first commit

resources/js/plugins/vuetify/defaults.js

@@ -0,0 +1,143 @@
+export default {
+  IconBtn: {
+    icon: true,
+    color: 'default',
+    variant: 'text',
+  },
+  VAlert: {
+    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: {
+    elevation: 0,
+  },
+  VMenu: {
+    offset: '2px',
+  },
+  VPagination: {
+    density: 'comfortable',
+    showFirstLastPage: true,
+    variant: 'tonal',
+  },
+  VTabs: {
+    // set v-tabs default color to primary
+    color: 'primary',
+    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',
+    hideDetails: 'auto',
+    density: 'comfortable',
+  },
+  VRangeSlider: {
+    // set v-range-slider default color to primary
+    color: 'primary',
+    thumbLabel: true,
+    hideDetails: 'auto',
+    trackSize: 6,
+    thumbSize: 22,
+    elevation: 4,
+  },
+  VRating: {
+    // set v-rating default color to primary
+    activeColor: 'warning',
+    color: 'disabled',
+  },
+  VProgressCircular: {
+    // set v-progress-circular default color to primary
+    color: 'primary',
+  },
+  VProgressLinear: {
+    color: 'primary',
+  },
+  VSlider: {
+    // set v-slider default color to primary
+    color: 'primary',
+    trackSize: 6,
+    hideDetails: 'auto',
+    thumbSize: 22,
+    elevation: 4,
+  },
+  VSnackbar: {
+    VBtn: {
+      size: 'small',
+    },
+  },
+  VTextField: {
+    variant: 'outlined',
+    density: 'comfortable',
+    color: 'primary',
+    hideDetails: 'auto',
+  },
+  VAutocomplete: {
+    variant: 'outlined',
+    color: 'primary',
+    density: 'comfortable',
+    hideDetails: 'auto',
+  },
+  VCombobox: {
+    variant: 'outlined',
+    color: 'primary',
+    hideDetails: 'auto',
+    density: 'comfortable',
+  },
+  VFileInput: {
+    variant: 'outlined',
+    color: 'primary',
+    hideDetails: 'auto',
+    density: 'comfortable',
+  },
+  VTextarea: {
+    variant: 'outlined',
+    color: 'primary',
+    hideDetails: 'auto',
+    density: 'comfortable',
+  },
+  VSwitch: {
+    // set v-switch default color to primary
+    inset: true,
+    color: 'primary',
+    hideDetails: 'auto',
+  },
+  VNavigationDrawer: {
+    touchless: true,
+  },
+}

resources/js/plugins/vuetify/icons.js

@@ -0,0 +1,79 @@
+/* eslint-disable regex/invalid */
+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 = {
+  info: 'ri-error-warning-line',
+  success: 'ri-checkbox-circle-line',
+  warning: 'ri-alert-line',
+  error: 'ri-error-warning-line',
+  calendar: 'ri-calendar-2-line',
+  collapse: 'ri-arrow-up-s-line',
+  complete: 'ri-check-line',
+  cancel: 'ri-close-line',
+  close: 'ri-close-line',
+  delete: 'ri-close-circle-fill',
+  clear: 'ri-close-line',
+  prev: 'ri-arrow-left-s-line',
+  next: 'ri-arrow-right-s-line',
+  delimiter: 'ri-circle-line',
+  sort: 'ri-arrow-up-line',
+  expand: 'ri-arrow-down-s-line',
+  menu: 'ri-menu-line',
+  subgroup: 'ri-arrow-down-s-fill',
+  dropdown: 'ri-arrow-down-s-line',
+  edit: 'ri-pencil-line',
+  ratingEmpty: 'ri-star-line',
+  ratingFull: 'ri-star-fill',
+  ratingHalf: 'ri-star-half-line',
+  loading: 'ri-refresh-line',
+  first: 'ri-skip-back-mini-line',
+  last: 'ri-skip-forward-mini-line',
+  unfold: 'ri-split-cells-vertical',
+  file: 'ri-attachment-2',
+  plus: 'ri-add-line',
+  minus: 'ri-subtract-line',
+  sortAsc: 'ri-arrow-up-line',
+  sortDesc: 'ri-arrow-down-line',
+}
+
+/* eslint-enable */
+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,50 @@
+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'
+
+// 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(),
+    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,143 @@
+export const staticPrimaryColor = '#8C57FF'
+export const staticPrimaryDarkenColor = '#7E4EE6'
+export const themes = {
+  light: {
+    dark: false,
+    colors: {
+      'primary': staticPrimaryColor,
+      'on-primary': '#fff',
+      'primary-darken-1': '#7E4EE6',
+      'secondary': '#8A8D93',
+      'secondary-darken-1': '#7C7F84',
+      'on-secondary': '#fff',
+      'success': '#56CA00',
+      'success-darken-1': '#4DB600',
+      'on-success': '#fff',
+      'info': '#16B1FF',
+      'info-darken-1': '#149FE6',
+      'on-info': '#fff',
+      'warning': '#FFB400',
+      'warning-darken-1': '#E6A200',
+      'on-warning': '#fff',
+      'error': '#FF4C51',
+      'error-darken-1': '#E64449',
+      'on-error': '#fff',
+      'background': '#f4f5fa',
+      'on-background': '#2E263D',
+      'surface': '#fff',
+      'on-surface': '#2E263D',
+      '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',
+      'perfect-scrollbar-thumb': '#dbdade',
+      'skin-bordered-background': '#fff',
+      'skin-bordered-surface': '#fff',
+      'expansion-panel-text-custom-bg': '#fafafa',
+      'track-bg': '#F0F2F8',
+      'chat-bg': '#F7F6FA',
+    },
+    variables: {
+      'code-color': '#d400ff',
+      'overlay-scrim-background': '#2E263D',
+      'tooltip-background': '#1A0E33',
+      'overlay-scrim-opacity': 0.5,
+      'hover-opacity': 0.04,
+      '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': '#2E263D',
+      'border-opacity': 0.12,
+      'table-header-color': '#F6F7FB',
+      'high-emphasis-opacity': 0.9,
+      'medium-emphasis-opacity': 0.7,
+
+      // 👉 shadows
+      'shadow-key-umbra-color': '#2E263D',
+      'shadow-xs-opacity': '0.16',
+      'shadow-sm-opacity': '0.18',
+      'shadow-md-opacity': '0.20',
+      'shadow-lg-opacity': '0.22',
+      'shadow-xl-opacity': '0.24',
+    },
+  },
+  dark: {
+    dark: true,
+    colors: {
+      'primary': staticPrimaryColor,
+      'on-primary': '#fff',
+      'primary-darken-1': '#7E4EE6',
+      'secondary': '#8A8D93',
+      'secondary-darken-1': '#7C7F84',
+      'on-secondary': '#fff',
+      'success': '#56CA00',
+      'success-darken-1': '#4DB600',
+      'on-success': '#fff',
+      'info': '#16B1FF',
+      'info-darken-1': '#149FE6',
+      'on-info': '#fff',
+      'warning': '#FFB400',
+      'warning-darken-1': '#E6A200',
+      'on-warning': '#fff',
+      'error': '#FF4C51',
+      'error-darken-1': '#E64449',
+      'on-error': '#fff',
+      'background': '#28243D',
+      'on-background': '#E7E3FC',
+      'surface': '#312d4b',
+      'on-surface': '#E7E3FC',
+      'grey-50': '#2A2E42',
+      'grey-100': '#2F3349',
+      'grey-200': '#4A5072',
+      'grey-300': '#5E6692',
+      'grey-400': '#7983BB',
+      'grey-500': '#8692D0',
+      'grey-600': '#AAB3DE',
+      'grey-700': '#B6BEE3',
+      'grey-800': '#CFD3EC',
+      'grey-900': '#E7E9F6',
+      'perfect-scrollbar-thumb': '#4a5072',
+      'skin-bordered-background': '#312d4b',
+      'skin-bordered-surface': '#312d4b',
+      'expansion-panel-text-custom-bg': '#373350',
+      'track-bg': '#474360',
+      'chat-bg': '#373452',
+    },
+    variables: {
+      'code-color': '#d400ff',
+      'overlay-scrim-background': '#312D4B',
+      'tooltip-background': '#F7F4FF',
+      'overlay-scrim-opacity': 0.5,
+      'hover-opacity': 0.04,
+      'focus-opacity': 0.1,
+      'selected-opacity': 0.08,
+      'activated-opacity': 0.16,
+      'pressed-opacity': 0.14,
+      'disabled-opacity': 0.4,
+      'dragged-opacity': 0.1,
+      'border-color': '#E7E3FC',
+      'border-opacity': 0.12,
+      'table-header-color': '#3D3759',
+      'high-emphasis-opacity': 0.9,
+      'medium-emphasis-opacity': 0.7,
+
+      // 👉 Shadows
+      'shadow-key-umbra-color': '#131120',
+      'shadow-xs-opacity': '0.20',
+      'shadow-sm-opacity': '0.22',
+      'shadow-md-opacity': '0.24',
+      'shadow-lg-opacity': '0.26',
+      'shadow-xl-opacity': '0.28',
+    },
+  },
+}
+export default themes