@nathapp/na-cli 1.0.8 → 1.0.9

package/dist/templates/vuexy-portal/src/plugins/vuetify/defaults.ts

@@ -0,0 +1,192 @@
+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',
+    scrollStrategy: 'block',
+  },
+  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,
+  },
+}

package/dist/templates/vuexy-portal/src/plugins/vuetify/icons.ts

@@ -0,0 +1,84 @@
+import type { IconAliases, IconProps } from 'vuetify'
+
+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: Record<string, unknown> = {
+  'mdi-checkbox-blank-outline': checkboxUnchecked,
+  'mdi-checkbox-marked': checkboxChecked,
+  'mdi-minus-box': checkboxIndeterminate,
+  'mdi-radiobox-marked': radioChecked,
+  'mdi-radiobox-blank': radioUnchecked,
+}
+
+const aliases: Partial<IconAliases> = {
+  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: IconProps) => {
+    // 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,
+  },
+}

package/dist/templates/vuexy-portal/src/plugins/vuetify/index.ts

@@ -0,0 +1,47 @@
+import { deepMerge } from '@antfu/utils'
+import type { App } from 'vue'
+import { createVuetify } from 'vuetify'
+import { VBtn } from 'vuetify/components/VBtn'
+import defaults from './defaults'
+import { icons } from './icons'
+import { staticPrimaryColor, staticPrimaryDarkenColor, themes } from './theme'
+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: 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,
+
+  })
+
+  app.use(vuetify)
+}

package/dist/templates/vuexy-portal/src/plugins/vuetify/theme.ts

@@ -0,0 +1,155 @@
+import type { ThemeDefinition } from 'vuetify'
+
+export const staticPrimaryColor = '#7367F0'
+export const staticPrimaryDarkenColor = '#675DD8'
+
+export const themes: Record<string, ThemeDefinition> = {
+  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

package/dist/templates/vuexy-portal/src/plugins/webfontloader.ts

@@ -0,0 +1,19 @@
+/**
+ * plugins/webfontloader.js
+ *
+ * webfontloader documentation: https://github.com/typekit/webfontloader
+ */
+
+export async function loadFonts() {
+  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
+
+  webFontLoader.load({
+    google: {
+      families: ['Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'],
+    },
+  })
+}
+
+export default function () {
+  loadFonts()
+}

package/dist/templates/vuexy-portal/src/stores/auth.ts

@@ -0,0 +1,22 @@
+export const useAuthStore = defineStore('auth', () => {
+  const axios = useAxios()
+  const router = useRouter()
+  const jwt = useJwt(defaultJwtConfig, axios)
+  const config = ref(jwt.config)
+
+  const login = async (data: any) => {
+    return jwt.login(data)
+  }
+
+  const logout = async () => {
+    jwt.logout(() => {
+      router.push('/login')
+    })
+  }
+
+  return {
+    config,
+    login,
+    logout,
+  }
+})

package/dist/templates/vuexy-portal/src/stores/common.ts

@@ -0,0 +1,41 @@
+import type { Country } from '@/@custom/types/common'
+
+interface CommonState {
+  availableCountries: Country[]
+  isCountriesFetched: boolean
+  availableLanguages: any[]
+}
+
+export const useCommonStore = defineStore('common', {
+  state: (): CommonState => ({
+    availableCountries: [],
+    isCountriesFetched: false,
+    availableLanguages: [],
+  }),
+
+  actions: {
+    async fetchAvailableCountries() {
+      try {
+        this.availableCountries = await commonApi.fetchAvailableCountries()
+        this.isCountriesFetched = true
+      }
+      catch (error) {
+        return error
+      }
+    },
+    async getAvailableCountries() {
+      if (!this.isCountriesFetched)
+        await this.fetchAvailableCountries()
+
+      return this.availableCountries
+    },
+    async fetchAvailableLanguages() {
+      try {
+        this.availableLanguages = await commonApi.fetchAvailableLanguages()
+      }
+      catch (error) {
+        return error
+      }
+    },
+  },
+})

package/dist/templates/vuexy-portal/src/utils/constants.ts

@@ -0,0 +1,3 @@
+export const COOKIE_MAX_AGE_1_YEAR = 365 * 24 * 60 * 60
+
+export const PAGE_SIZE = 25

package/dist/templates/vuexy-portal/src/utils/paginationMeta.ts

@@ -0,0 +1,10 @@
+import { themeConfig } from '@themeConfig';
+import { useI18n } from 'vue-i18n';
+
+export const paginationMeta = <T extends { page: number; itemsPerPage: number }>(options: T, total: number) => {
+  const { t } = useI18n({ useScope: 'global' });
+  const start = (options.page - 1) * options.itemsPerPage + 1
+  const end = Math.min(options.page * options.itemsPerPage, total)
+  const displayStart = total === 0 ? 0 : start;
+  return themeConfig.app.i18n.enable ? t('pagination.paginationMeta', { start: displayStart, end, total }) : `Showing ${displayStart} to ${end} of ${total} entries`
+}

package/dist/templates/vuexy-portal/themeConfig.ts

@@ -0,0 +1,66 @@
+import { defineThemeConfig } from '@core'
+import { Skins } from '@core/enums'
+import { breakpointsVuetify } from '@vueuse/core'
+import { VIcon } from 'vuetify/components/VIcon'
+
+// ❗ Logo SVG must be imported with ?raw suffix
+import logo from '@images/logo.svg?raw'
+
+import { AppContentLayoutNav, ContentWidth, FooterType, NavbarType } from '@layouts/enums'
+
+export const { themeConfig, layoutConfig } = defineThemeConfig({
+  app: {
+    title: 'vuexy',
+    logo: h('div', { innerHTML: logo, style: 'line-height:0; color: rgb(var(--v-global-theme-primary))' }),
+    contentWidth: ContentWidth.Boxed,
+    contentLayoutNav: AppContentLayoutNav.Vertical,
+    overlayNavFromBreakpoint: breakpointsVuetify.md + 16, // 16 for scrollbar. Docs: https://next.vuetifyjs.com/en/features/display-and-platform/
+    i18n: {
+      enable: true,
+      defaultLocale: 'en_US',
+      langConfig: [
+        {
+          label: 'English',
+          i18nLang: 'en_US',
+          isRTL: false,
+        },
+        {
+          label: '简体中文',
+          i18nLang: 'zh_CN',
+          isRTL: false,
+        },
+      ],
+    },
+    theme: 'system',
+    skin: Skins.Default,
+    iconRenderer: VIcon,
+  },
+  navbar: {
+    type: NavbarType.Sticky,
+    navbarBlur: true,
+  },
+  footer: { type: FooterType.Static },
+  verticalNav: {
+    isVerticalNavCollapsed: false,
+    defaultNavItemIconProps: { icon: 'tabler-circle' },
+    isVerticalNavSemiDark: false,
+  },
+  horizontalNav: {
+    type: 'sticky',
+    transition: 'slide-y-reverse-transition',
+    popoverOffset: 6,
+  },
+
+  /*
+  // ℹ️  In below Icons section, you can specify icon for each component. Also you can use other props of v-icon component like `color` and `size` for each icon.
+  // Such as: chevronDown: { icon: 'tabler-chevron-down', color:'primary', size: '24' },
+  */
+  icons: {
+    chevronDown: { icon: 'tabler-chevron-down' },
+    chevronRight: { icon: 'tabler-chevron-right', size: 20 },
+    close: { icon: 'tabler-x' },
+    verticalNavPinned: { icon: 'tabler-circle-dot' },
+    verticalNavUnPinned: { icon: 'tabler-circle' },
+    sectionTitlePlaceholder: { icon: 'tabler-minus' },
+  },
+})