Initial commit

resources/js/plugins/vuetify/defaults.js

@@ -0,0 +1,191 @@
+export default {
+  IconBtn: {
+    icon: true,
+    color: 'default',
+    variant: 'text',
+  },
+  VAlert: {
+    density: 'comfortable',
+    VBtn: {
+      color: undefined,
+    },
+  },
+  VAvatar: {
+    // ℹ️ Remove after next release
+    variant: 'flat',
+  },
+  VBadge: {
+    // set v-badge default color to primary
+    color: 'primary',
+  },
+  VBtn: {
+    // set v-btn default color to primary
+    color: 'primary',
+  },
+  VChip: {
+    label: true,
+  },
+  VDataTable: {
+    VPagination: {
+      showFirstLastPage: true,
+      firstIcon: 'tabler-chevrons-left',
+      lastIcon: 'tabler-chevrons-right',
+    },
+  },
+  VDataTableServer: {
+    VPagination: {
+      showFirstLastPage: true,
+      firstIcon: 'tabler-chevrons-left',
+      lastIcon: 'tabler-chevrons-right',
+    },
+  },
+  VExpansionPanel: {
+    expandIcon: 'tabler-chevron-right',
+    collapseIcon: 'tabler-chevron-right',
+  },
+  VExpansionPanelTitle: {
+    expandIcon: 'tabler-chevron-right',
+    collapseIcon: 'tabler-chevron-right',
+  },
+  VList: {
+    color: 'primary',
+    density: 'compact',
+    VCheckboxBtn: {
+      density: 'compact',
+    },
+    VListItem: {
+      ripple: false,
+      VAvatar: {
+        size: 40,
+      },
+    },
+  },
+  VMenu: {
+    offset: '2px',
+  },
+  VPagination: {
+    density: 'comfortable',
+    variant: 'tonal',
+  },
+  VTabs: {
+    // set v-tabs default color to primary
+    color: 'primary',
+    density: 'comfortable',
+    VSlideGroup: {
+      showArrows: true,
+    },
+  },
+  VTooltip: {
+    // set v-tooltip default location to top
+    location: 'top',
+  },
+  VCheckboxBtn: {
+    color: 'primary',
+  },
+  VCheckbox: {
+    // set v-checkbox default color to primary
+    color: 'primary',
+    density: 'comfortable',
+    hideDetails: 'auto',
+  },
+  VRadioGroup: {
+    color: 'primary',
+    density: 'comfortable',
+    hideDetails: 'auto',
+  },
+  VRadio: {
+    density: 'comfortable',
+    hideDetails: 'auto',
+  },
+  VSelect: {
+    variant: 'outlined',
+    color: 'primary',
+    density: 'comfortable',
+    hideDetails: 'auto',
+    VChip: {
+      label: true,
+    },
+  },
+  VRangeSlider: {
+    // set v-range-slider default color to primary
+    color: 'primary',
+    trackSize: 6,
+    thumbSize: 22,
+    density: 'comfortable',
+    thumbLabel: true,
+    hideDetails: 'auto',
+  },
+  VRating: {
+    // set v-rating default color to primary
+    color: 'warning',
+  },
+  VProgressLinear: {
+    height: 6,
+    roundedBar: true,
+    rounded: true,
+    bgColor: 'rgba(var(--v-track-bg))',
+  },
+  VSlider: {
+    // set v-range-slider default color to primary
+    color: 'primary',
+    thumbLabel: true,
+    hideDetails: 'auto',
+    thumbSize: 22,
+    trackSize: 6,
+    elevation: 4,
+  },
+  VTextField: {
+    variant: 'outlined',
+    density: 'comfortable',
+    color: 'primary',
+    hideDetails: 'auto',
+  },
+  VAutocomplete: {
+    variant: 'outlined',
+    color: 'primary',
+    density: 'comfortable',
+    hideDetails: 'auto',
+    menuProps: {
+      contentClass: 'app-autocomplete__content v-autocomplete__content',
+    },
+    VChip: {
+      label: true,
+    },
+  },
+  VCombobox: {
+    variant: 'outlined',
+    density: 'comfortable',
+    color: 'primary',
+    hideDetails: 'auto',
+    VChip: {
+      label: true,
+    },
+  },
+  VFileInput: {
+    variant: 'outlined',
+    density: 'comfortable',
+    color: 'primary',
+    hideDetails: 'auto',
+  },
+  VTextarea: {
+    variant: 'outlined',
+    density: 'comfortable',
+    color: 'primary',
+    hideDetails: 'auto',
+  },
+  VSnackbar: {
+    VBtn: {
+      density: 'comfortable',
+    },
+  },
+  VSwitch: {
+    // set v-switch default color to primary
+    inset: true,
+    color: 'primary',
+    hideDetails: 'auto',
+    ripple: false,
+  },
+  VNavigationDrawer: {
+    touchless: true,
+  },
+}

resources/js/plugins/vuetify/icons.js

@@ -0,0 +1,77 @@
+import checkboxChecked from '@images/svg/checkbox-checked.svg'
+import checkboxIndeterminate from '@images/svg/checkbox-indeterminate.svg'
+import checkboxUnchecked from '@images/svg/checkbox-unchecked.svg'
+import radioChecked from '@images/svg/radio-checked.svg'
+import radioUnchecked from '@images/svg/radio-unchecked.svg'
+
+const customIcons = {
+  'mdi-checkbox-blank-outline': checkboxUnchecked,
+  'mdi-checkbox-marked': checkboxChecked,
+  'mdi-minus-box': checkboxIndeterminate,
+  'mdi-radiobox-marked': radioChecked,
+  'mdi-radiobox-blank': radioUnchecked,
+}
+
+const aliases = {
+  calendar: 'tabler-calendar',
+  collapse: 'tabler-chevron-up',
+  complete: 'tabler-check',
+  cancel: 'tabler-x',
+  close: 'tabler-x',
+  delete: 'tabler-circle-x-filled',
+  clear: 'tabler-circle-x',
+  success: 'tabler-circle-check',
+  info: 'tabler-info-circle',
+  warning: 'tabler-alert-triangle',
+  error: 'tabler-alert-circle',
+  prev: 'tabler-chevron-left',
+  ratingEmpty: 'tabler-star',
+  ratingFull: 'tabler-star-filled',
+  ratingHalf: 'tabler-star-half-filled',
+  next: 'tabler-chevron-right',
+  delimiter: 'tabler-circle',
+  sort: 'tabler-arrow-up',
+  expand: 'tabler-chevron-down',
+  menu: 'tabler-menu-2',
+  subgroup: 'tabler-caret-down',
+  dropdown: 'tabler-chevron-down',
+  edit: 'tabler-pencil',
+  loading: 'tabler-refresh',
+  first: 'tabler-player-skip-back',
+  last: 'tabler-player-skip-forward',
+  unfold: 'tabler-arrows-move-vertical',
+  file: 'tabler-paperclip',
+  plus: 'tabler-plus',
+  minus: 'tabler-minus',
+  sortAsc: 'tabler-arrow-up',
+  sortDesc: 'tabler-arrow-down',
+}
+
+export const iconify = {
+  component: props => {
+    // Load custom SVG directly instead of going through icon component
+    if (typeof props.icon === 'string') {
+      const iconComponent = customIcons[props.icon]
+      if (iconComponent)
+        return h(iconComponent)
+    }
+    
+    return h(props.tag, {
+      ...props,
+
+      // As we are using class based icons
+      class: [props.icon],
+
+      // Remove used props from DOM rendering
+      tag: undefined,
+      icon: undefined,
+    })
+  },
+}
+export const icons = {
+  defaultSet: 'iconify',
+  aliases,
+  sets: {
+    iconify,
+  },
+}

resources/js/plugins/vuetify/index.js

@@ -0,0 +1,51 @@
+import { deepMerge } from '@antfu/utils'
+import { useI18n } from 'vue-i18n'
+import { createVuetify } from 'vuetify'
+import { VBtn } from 'vuetify/components/VBtn'
+import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
+import defaults from './defaults'
+import { icons } from './icons'
+import { staticPrimaryColor, staticPrimaryDarkenColor, themes } from './theme'
+import { getI18n } from '@/plugins/i18n/index'
+import { themeConfig } from '@themeConfig'
+
+// Styles
+import { cookieRef } from '@/@layouts/stores/config'
+import '@core-scss/template/libs/vuetify/index.scss'
+import 'vuetify/styles'
+
+export default function (app) {
+  const cookieThemeValues = {
+    defaultTheme: resolveVuetifyTheme(themeConfig.app.theme),
+    themes: {
+      light: {
+        colors: {
+          'primary': cookieRef('lightThemePrimaryColor', staticPrimaryColor).value,
+          'primary-darken-1': cookieRef('lightThemePrimaryDarkenColor', staticPrimaryDarkenColor).value,
+        },
+      },
+      dark: {
+        colors: {
+          'primary': cookieRef('darkThemePrimaryColor', staticPrimaryColor).value,
+          'primary-darken-1': cookieRef('darkThemePrimaryDarkenColor', staticPrimaryDarkenColor).value,
+        },
+      },
+    },
+  }
+
+  const optionTheme = deepMerge({ themes }, cookieThemeValues)
+
+  const vuetify = createVuetify({
+    aliases: {
+      IconBtn: VBtn,
+    },
+    defaults,
+    icons,
+    theme: optionTheme,
+    locale: {
+      adapter: createVueI18nAdapter({ i18n: getI18n(), useI18n }),
+    },
+  })
+
+  app.use(vuetify)
+}

resources/js/plugins/vuetify/theme.js

@@ -0,0 +1,150 @@
+export const staticPrimaryColor = '#7367F0'
+export const staticPrimaryDarkenColor = '#675DD8'
+export const themes = {
+  light: {
+    dark: false,
+    colors: {
+      'primary': staticPrimaryColor,
+      'on-primary': '#fff',
+      'primary-darken-1': '#675DD8',
+      'secondary': '#808390',
+      'on-secondary': '#fff',
+      'secondary-darken-1': '#737682',
+      'success': '#28C76F',
+      'on-success': '#fff',
+      'success-darken-1': '#24B364',
+      'info': '#00BAD1',
+      'on-info': '#fff',
+      'info-darken-1': '#00A7BC',
+      'warning': '#FF9F43',
+      'on-warning': '#fff',
+      'warning-darken-1': '#E68F3C',
+      'error': '#FF4C51',
+      'on-error': '#fff',
+      'error-darken-1': '#E64449',
+      'background': '#F8F7FA',
+      'on-background': '#2F2B3D',
+      'surface': '#fff',
+      'on-surface': '#2F2B3D',
+      'grey-50': '#FAFAFA',
+      'grey-100': '#F5F5F5',
+      'grey-200': '#EEEEEE',
+      'grey-300': '#E0E0E0',
+      'grey-400': '#BDBDBD',
+      'grey-500': '#9E9E9E',
+      'grey-600': '#757575',
+      'grey-700': '#616161',
+      'grey-800': '#424242',
+      'grey-900': '#212121',
+      'grey-light': '#FAFAFA',
+      'perfect-scrollbar-thumb': '#DBDADE',
+      'skin-bordered-background': '#fff',
+      'skin-bordered-surface': '#fff',
+      'expansion-panel-text-custom-bg': '#fafafa',
+    },
+    variables: {
+      'code-color': '#d400ff',
+      'overlay-scrim-background': '#2F2B3D',
+      'tooltip-background': '#2F2B3D',
+      'overlay-scrim-opacity': 0.5,
+      'hover-opacity': 0.06,
+      'focus-opacity': 0.1,
+      'selected-opacity': 0.08,
+      'activated-opacity': 0.16,
+      'pressed-opacity': 0.14,
+      'dragged-opacity': 0.1,
+      'disabled-opacity': 0.4,
+      'border-color': '#2F2B3D',
+      'border-opacity': 0.12,
+      'table-header-color': '#EAEAEC',
+      'high-emphasis-opacity': 0.9,
+      'medium-emphasis-opacity': 0.7,
+      'switch-opacity': 0.2,
+      'switch-disabled-track-opacity': 0.3,
+      'switch-disabled-thumb-opacity': 0.4,
+      'switch-checked-disabled-opacity': 0.3,
+      'track-bg': '#F1F0F2',
+
+      // Shadows
+      'shadow-key-umbra-color': '#2F2B3D',
+      'shadow-xs-opacity': 0.10,
+      'shadow-sm-opacity': 0.12,
+      'shadow-md-opacity': 0.14,
+      'shadow-lg-opacity': 0.16,
+      'shadow-xl-opacity': 0.18,
+    },
+  },
+  dark: {
+    dark: true,
+    colors: {
+      'primary': staticPrimaryColor,
+      'on-primary': '#fff',
+      'primary-darken-1': '#675DD8',
+      'secondary': '#808390',
+      'on-secondary': '#fff',
+      'secondary-darken-1': '#737682',
+      'success': '#28C76F',
+      'on-success': '#fff',
+      'success-darken-1': '#24B364',
+      'info': '#00BAD1',
+      'on-info': '#fff',
+      'info-darken-1': '#00A7BC',
+      'warning': '#FF9F43',
+      'on-warning': '#fff',
+      'warning-darken-1': '#E68F3C',
+      'error': '#FF4C51',
+      'on-error': '#fff',
+      'error-darken-1': '#E64449',
+      'background': '#25293C',
+      'on-background': '#E1DEF5',
+      'surface': '#2F3349',
+      'on-surface': '#E1DEF5',
+      'grey-50': '#26293A',
+      'grey-100': '#2F3349',
+      'grey-200': '#26293A',
+      'grey-300': '#4A5072',
+      'grey-400': '#5E6692',
+      'grey-500': '#7983BB',
+      'grey-600': '#AAB3DE',
+      'grey-700': '#B6BEE3',
+      'grey-800': '#CFD3EC',
+      'grey-900': '#E7E9F6',
+      'grey-light': '#353A52',
+      'perfect-scrollbar-thumb': '#4A5072',
+      'skin-bordered-background': '#2F3349',
+      'skin-bordered-surface': '#2F3349',
+    },
+    variables: {
+      'code-color': '#d400ff',
+      'overlay-scrim-background': '#171925',
+      'tooltip-background': '#F7F4FF',
+      'overlay-scrim-opacity': 0.6,
+      'hover-opacity': 0.06,
+      'focus-opacity': 0.1,
+      'selected-opacity': 0.08,
+      'activated-opacity': 0.16,
+      'pressed-opacity': 0.14,
+      'dragged-opacity': 0.1,
+      'disabled-opacity': 0.4,
+      'border-color': '#E1DEF5',
+      'border-opacity': 0.12,
+      'table-header-color': '#535876',
+      'high-emphasis-opacity': 0.9,
+      'medium-emphasis-opacity': 0.7,
+      'switch-opacity': 0.4,
+      'switch-disabled-track-opacity': 0.4,
+      'switch-disabled-thumb-opacity': 0.8,
+      'switch-checked-disabled-opacity': 0.3,
+      'track-bg': '#3A3F57',
+
+      // Shadows
+      'shadow-key-umbra-color': '#131120',
+      'shadow-xs-opacity': 0.16,
+      'shadow-sm-opacity': 0.18,
+      'shadow-md-opacity': 0.2,
+      'shadow-lg-opacity': 0.22,
+      'shadow-xl-opacity': 0.24,
+    },
+  },
+}
+export default themes