@nathapp/na-cli 1.0.8 → 1.0.10

package/dist/templates/vuexy-portal/src/@core/libs/chartjs/components/ScatterChart.ts

@@ -0,0 +1,58 @@
+import type { PluginOptionsByType } from 'chart.js'
+import { CategoryScale, Chart as ChartJS, Legend, LineElement, LinearScale, PointElement, Title, Tooltip } from 'chart.js'
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import { Scatter } from 'vue-chartjs'
+
+ChartJS.register(Title, Tooltip, Legend, PointElement, LineElement, CategoryScale, LinearScale)
+
+export default defineComponent({
+  name: 'ScatterChart',
+  props: {
+    chartId: {
+      type: String,
+      default: 'scatter-chart',
+    },
+    width: {
+      type: Number,
+      default: 400,
+    },
+    height: {
+      type: Number,
+      default: 400,
+    },
+    cssClasses: {
+      default: '',
+      type: String,
+    },
+    styles: {
+      type: Object as PropType<Partial<CSSStyleDeclaration>>,
+      default: () => ({}),
+    },
+    plugins: {
+      type: Array as PropType<PluginOptionsByType<'scatter'>[]>,
+      default: () => [],
+    },
+    chartData: {
+      type: Object,
+      default: () => ({}),
+    },
+    chartOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    return () =>
+      h(h(Scatter), {
+        data: props.chartData,
+        options: props.chartOptions,
+        chartId: props.chartId,
+        width: props.width,
+        height: props.height,
+        cssClasses: props.cssClasses,
+        styles: props.styles,
+        plugins: props.plugins,
+      })
+  },
+})

package/dist/templates/vuexy-portal/src/@core/stores/config.ts

@@ -0,0 +1,80 @@
+import { storeToRefs } from 'pinia'
+import { useTheme } from 'vuetify'
+import { cookieRef, useLayoutConfigStore } from '@layouts/stores/config'
+import { themeConfig } from '@themeConfig'
+
+// SECTION Store
+export const useConfigStore = defineStore('config', () => {
+  // 👉 Theme
+  const userPreferredColorScheme = usePreferredColorScheme()
+  const cookieColorScheme = cookieRef<'light' | 'dark'>('color-scheme', 'light')
+
+  watch(
+    userPreferredColorScheme,
+    val => {
+      if (val !== 'no-preference')
+        cookieColorScheme.value = val
+    },
+    { immediate: true },
+  )
+
+  const theme = cookieRef('theme', themeConfig.app.theme)
+
+  // 👉 isVerticalNavSemiDark
+  const isVerticalNavSemiDark = cookieRef('isVerticalNavSemiDark', themeConfig.verticalNav.isVerticalNavSemiDark)
+
+  // 👉 isVerticalNavSemiDark
+  const skin = cookieRef('skin', themeConfig.app.skin)
+
+  // ℹ️ We need to use `storeToRefs` to forward the state
+  const {
+    isLessThanOverlayNavBreakpoint,
+    appContentWidth,
+    navbarType,
+    isNavbarBlurEnabled,
+    appContentLayoutNav,
+    isVerticalNavCollapsed,
+    footerType,
+    isAppRTL,
+  } = storeToRefs(useLayoutConfigStore())
+
+  return {
+    theme,
+    isVerticalNavSemiDark,
+    skin,
+
+    // @layouts exports
+    isLessThanOverlayNavBreakpoint,
+    appContentWidth,
+    navbarType,
+    isNavbarBlurEnabled,
+    appContentLayoutNav,
+    isVerticalNavCollapsed,
+    footerType,
+    isAppRTL,
+  }
+})
+// !SECTION
+
+// SECTION Init
+export const initConfigStore = () => {
+  const userPreferredColorScheme = usePreferredColorScheme()
+  const vuetifyTheme = useTheme()
+  const configStore = useConfigStore()
+
+  watch(
+    [() => configStore.theme, userPreferredColorScheme],
+    () => {
+      vuetifyTheme.global.name.value = configStore.theme === 'system'
+        ? userPreferredColorScheme.value === 'dark'
+          ? 'dark'
+          : 'light'
+        : configStore.theme
+    })
+
+  onMounted(() => {
+    if (configStore.theme === 'system')
+      vuetifyTheme.global.name.value = userPreferredColorScheme.value
+  })
+}
+// !SECTION

package/dist/templates/vuexy-portal/src/@core/types.ts

@@ -0,0 +1,49 @@
+import type { LiteralUnion, ValueOf } from 'type-fest'
+import type { Skins } from './enums'
+import type { I18nLanguage, LayoutConfig } from '@layouts/types'
+
+interface ExplicitThemeConfig {
+  app: {
+    i18n: {
+      defaultLocale: string
+      langConfig: I18nLanguage[]
+    }
+    theme: LiteralUnion<'light' | 'dark' | 'system', string>
+    skin: ValueOf<typeof Skins>
+  }
+  verticalNav: {
+    isVerticalNavSemiDark: boolean
+  }
+}
+
+export type UserThemeConfig = LayoutConfig & ExplicitThemeConfig
+
+// SECTION Custom Input
+export interface CustomInputContent {
+  title: string
+  desc?: string
+  value: string
+  subtitle?: string
+  icon?: string | object
+  images?: string
+}
+
+export interface GridColumn {
+  cols?: string
+  sm?: string
+  md?: string
+  lg?: string
+  xl?: string
+  xxl?: string
+}
+
+// Data table
+export interface SortItem { key: string; order?: boolean | 'asc' | 'desc' }
+
+export interface Options {
+  page: number
+  itemsPerPage: number
+  sortBy: readonly SortItem[]
+  groupBy: readonly SortItem[]
+  search: string | undefined
+}

package/dist/templates/vuexy-portal/src/@core/utils/formatters.ts

@@ -0,0 +1,48 @@
+import { isToday } from './helpers'
+
+export const avatarText = (value: string) => {
+  if (!value)
+    return ''
+  const nameArray = value.split(' ')
+
+  return nameArray.map(word => word.charAt(0).toUpperCase()).join('')
+}
+
+// TODO: Try to implement this: https://twitter.com/fireship_dev/status/1565424801216311297
+export const kFormatter = (num: number) => {
+  const regex = /\B(?=(\d{3})+(?!\d))/g
+
+  return Math.abs(num) > 9999 ? `${Math.sign(num) * +((Math.abs(num) / 1000).toFixed(1))}k` : Math.abs(num).toFixed(0).replace(regex, ',')
+}
+
+/**
+ * Format and return date in Humanize format
+ * Intl docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+ * Intl Constructor: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
+ * @param {string} value date to format
+ * @param {Intl.DateTimeFormatOptions} formatting Intl object to format with
+ */
+export const formatDate = (value: string, formatting: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' }) => {
+  if (!value)
+    return value
+
+  return new Intl.DateTimeFormat('en-US', formatting).format(new Date(value))
+}
+
+/**
+ * Return short human friendly month representation of date
+ * Can also convert date to only time if date is of today (Better UX)
+ * @param {string} value date to format
+ * @param {boolean} toTimeForCurrentDay Shall convert to time if day is today/current
+ */
+export const formatDateToMonthShort = (value: string, toTimeForCurrentDay = true) => {
+  const date = new Date(value)
+  let formatting: Record<string, string> = { month: 'short', day: 'numeric' }
+
+  if (toTimeForCurrentDay && isToday(date))
+    formatting = { hour: 'numeric', minute: 'numeric' }
+
+  return new Intl.DateTimeFormat('en-US', formatting).format(new Date(value))
+}
+
+export const prefixWithPlus = (value: number) => value > 0 ? `+${value}` : value

package/dist/templates/vuexy-portal/src/@core/utils/helpers.ts

@@ -0,0 +1,32 @@
+// 👉 IsEmpty
+export const isEmpty = (value: unknown): boolean => {
+  if (value === null || value === undefined || value === '')
+    return true
+
+  return !!(Array.isArray(value) && value.length === 0)
+}
+
+// 👉 IsNullOrUndefined
+export const isNullOrUndefined = (value: unknown): value is undefined | null => {
+  return value === null || value === undefined
+}
+
+// 👉 IsEmptyArray
+export const isEmptyArray = (arr: unknown): boolean => {
+  return Array.isArray(arr) && arr.length === 0
+}
+
+// 👉 IsObject
+export const isObject = (obj: unknown): obj is Record<string, unknown> =>
+  obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)
+
+// 👉 IsToday
+export const isToday = (date: Date) => {
+  const today = new Date()
+
+  return (
+    date.getDate() === today.getDate()
+    && date.getMonth() === today.getMonth()
+    && date.getFullYear() === today.getFullYear()
+  )
+}

package/dist/templates/vuexy-portal/src/@core/utils/plugins.ts

@@ -0,0 +1,53 @@
+import type { App } from 'vue'
+
+/**
+ * This is helper function to register plugins like a nuxt
+ * To register a plugin just export a const function `defineVuePlugin` that takes `app` as argument and call `app.use`
+ * For Scanning plugins it will include all files in `src/plugins` and `src/plugins/**\/index.ts`
+ *
+ *
+ * @param {App} app Vue app instance
+ *
+ * @example
+ * ```ts
+ * // File: src/plugins/vuetify/index.ts
+ *
+ * import type { App } from 'vue'
+ * import { createVuetify } from 'vuetify'
+ *
+ * const vuetify = createVuetify({ ... })
+ *
+ * export default function (app: App) {
+ *   app.use(vuetify)
+ * }
+ * ```
+ *
+ * All you have to do is use this helper function in `main.ts` file like below:
+ * ```ts
+ * // File: src/main.ts
+ * import { registerPlugins } from '@core/utils/plugins'
+ * import { createApp } from 'vue'
+ * import App from '@/App.vue'
+ *
+ * // Create vue app
+ * const app = createApp(App)
+ *
+ * // Register plugins
+ * registerPlugins(app) // [!code focus]
+ *
+ * // Mount vue app
+ * app.mount('#app')
+ * ```
+ */
+
+export const registerPlugins = (app: App) => {
+  const imports = import.meta.glob<{ default: (app: App) => void }>(['../../plugins/*.{ts,js}', '../../plugins/*/index.{ts,js}'], { eager: true })
+
+  const importPaths = Object.keys(imports).sort()
+
+  importPaths.forEach(path => {
+    const pluginImportModule = imports[path]
+
+    pluginImportModule.default?.(app)
+  })
+}

package/dist/templates/vuexy-portal/src/@core/utils/validators.ts

@@ -0,0 +1,105 @@
+import { isEmpty, isEmptyArray, isNullOrUndefined } from './helpers'
+
+// 👉 Required Validator
+export const requiredValidator = (value: unknown) => {
+  if (isNullOrUndefined(value) || isEmptyArray(value) || value === false)
+    return 'This field is required'
+
+  return !!String(value).trim().length || 'This field is required'
+}
+
+// 👉 Email Validator
+export const emailValidator = (value: unknown) => {
+  if (isEmpty(value))
+    return true
+
+  const re = /^(?:[^<>()[\]\\.,;:\s@"]+(?:\.[^<>()[\]\\.,;:\s@"]+)*|".+")@(?:\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\]|(?:[a-z\-\d]+\.)+[a-z]{2,})$/i
+
+  if (Array.isArray(value))
+    return value.every(val => re.test(String(val))) || 'The Email field must be a valid email'
+
+  return re.test(String(value)) || 'The Email field must be a valid email'
+}
+
+// 👉 Password Validator
+export const passwordValidator = (password: string) => {
+  const regExp = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%&*()]).{8,}/
+
+  const validPassword = regExp.test(password)
+
+  return validPassword || 'Field must contain at least one uppercase, lowercase, special character and digit with min 8 chars'
+}
+
+// 👉 Confirm Password Validator
+export const confirmedValidator = (value: string, target: string) =>
+
+  value === target || 'The Confirm Password field confirmation does not match'
+
+// 👉 Between Validator
+export const betweenValidator = (value: unknown, min: number, max: number) => {
+  const valueAsNumber = Number(value)
+
+  return (Number(min) <= valueAsNumber && Number(max) >= valueAsNumber) || `Enter number between ${min} and ${max}`
+}
+
+// 👉 Integer Validator
+export const integerValidator = (value: unknown) => {
+  if (isEmpty(value))
+    return true
+
+  if (Array.isArray(value))
+    return value.every(val => /^-?\d+$/.test(String(val))) || 'This field must be an integer'
+
+  return /^-?\d+$/.test(String(value)) || 'This field must be an integer'
+}
+
+// 👉 Regex Validator
+export const regexValidator = (value: unknown, regex: RegExp | string): string | boolean => {
+  if (isEmpty(value))
+    return true
+
+  let regeX = regex
+  if (typeof regeX === 'string')
+    regeX = new RegExp(regeX)
+
+  if (Array.isArray(value))
+    return value.every(val => regexValidator(val, regeX))
+
+  return regeX.test(String(value)) || 'The Regex field format is invalid'
+}
+
+// 👉 Alpha Validator
+export const alphaValidator = (value: unknown) => {
+  if (isEmpty(value))
+    return true
+
+  return /^[A-Z]*$/i.test(String(value)) || 'The Alpha field may only contain alphabetic characters'
+}
+
+// 👉 URL Validator
+export const urlValidator = (value: unknown) => {
+  if (isEmpty(value))
+    return true
+
+  const re = /^https?:\/\/[^\s$.?#].\S*$/
+
+  return re.test(String(value)) || 'URL is invalid'
+}
+
+// 👉 Length Validator
+export const lengthValidator = (value: unknown, length: number) => {
+  if (isEmpty(value))
+    return true
+
+  return String(value).length === length || `"The length of the Characters field must be ${length} characters."`
+}
+
+// 👉 Alpha-dash Validator
+export const alphaDashValidator = (value: unknown) => {
+  if (isEmpty(value))
+    return true
+
+  const valueAsString = String(value)
+
+  return /^[\w-]*$/.test(valueAsString) || 'All Character are not valid'
+}

package/dist/templates/vuexy-portal/src/@core/utils/vuetify.ts

@@ -0,0 +1,13 @@
+import type { LiteralUnion } from 'type-fest'
+import { cookieRef } from '@layouts/stores/config'
+
+export const resolveVuetifyTheme = (defaultTheme: LiteralUnion<'light' | 'dark' | 'system', string>): 'light' | 'dark' => {
+  const cookieColorScheme = cookieRef<'light' | 'dark'>('color-scheme', usePreferredDark().value ? 'dark' : 'light')
+  const storedTheme = cookieRef('theme', defaultTheme).value
+
+  return storedTheme === 'system'
+    ? cookieColorScheme.value === 'dark'
+      ? 'dark'
+      : 'light'
+    : storedTheme as 'light' | 'dark'
+}

package/dist/templates/vuexy-portal/src/@custom/composables/toasts.ts

@@ -0,0 +1,45 @@
+import { useToast } from 'vue-toast-notification'
+
+export const useAppToasts = (options?: any) => {
+  const $toast = useToast()
+  const { t } = useI18n()
+
+  const opt = Object.assign({}, {
+    position: 'top-right',
+    duration: 3000,
+    dismissible: true,
+    pauseOnHover: true,
+    queue: true,
+  }, options)
+
+  const toastError = (message: string, overrideOption?: any) => {
+    const override = Object.assign({}, opt, overrideOption)
+
+    $toast.error(message, override)
+  }
+
+  const toastLocalizeError = (key: string, params: any = {}, overrideOption?: any) => {
+    const localizeMessage = t(key, params)
+
+    toastError(localizeMessage, overrideOption)
+  }
+
+  const toastSuccess = (message: string, overrideOption?: any) => {
+    const override = Object.assign({}, opt, overrideOption)
+
+    $toast.success(message, override)
+  }
+
+  const toastLocalizeSuccess = (key: string, params: any = {}, overrideOption?: any) => {
+    const localizeMessage = t(key, params)
+
+    toastSuccess(localizeMessage, overrideOption)
+  }
+
+  return {
+    toastError,
+    toastLocalizeError,
+    toastSuccess,
+    toastLocalizeSuccess,
+  }
+}

package/dist/templates/vuexy-portal/src/@custom/composables/validator.ts

@@ -0,0 +1,160 @@
+import type { Country } from '../types/common'
+
+export const useValidators = () => {
+  const { t } = useI18n()
+
+  // 👉 Required Validator
+  const requiredValidator = (value: unknown) => {
+    if (isNullOrUndefined(value) || isEmptyArray(value) || value === false)
+      return t('validation.requiredMessage')
+
+    return !!String(value).trim().length || t('validation.requiredMessage')
+  }
+
+  // 👉 Email Validator
+  const emailValidator = (value: unknown) => {
+    if (isEmpty(value))
+      return true
+
+    const re = /^(?:[^<>()[\]\\.,;:\s@"]+(?:\.[^<>()[\]\\.,;:\s@"]+)*|".+")@(?:\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\]|(?:[a-z\-\d]+\.)+[a-z]{2,})$/i
+
+    if (Array.isArray(value))
+      return value.every(val => re.test(String(val))) || t('validation.invalidEmailFormat')
+
+    return re.test(String(value)) || t('validation.invalidEmailFormat')
+  }
+
+  // 👉 Password Validator
+  const passwordValidator = (password: string) => {
+    const regExp = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%&*()]).{8,}/
+
+    const validPassword = regExp.test(password)
+
+    return validPassword || t('validation.invalidPasswordFormat')
+  }
+
+  // 👉 Confirm Password Validator
+  const confirmedPasswordValidator = (value: string, target: string) =>
+
+    value === target || t('validation.confirmPasswordNotMatch')
+
+  // 👉 Between Validator
+  const betweenValidator = (value: unknown, min: number, max: number) => {
+    const valueAsNumber = Number(value)
+
+    return (Number(min) <= valueAsNumber && Number(max) >= valueAsNumber) || t('validation.betweenMessage', { min, max })
+  }
+
+  // 👉 Integer Validator
+  const integerValidator = (value: unknown) => {
+    if (isEmpty(value))
+      return true
+
+    if (Array.isArray(value))
+      return value.every(val => /^-?\d+$/.test(String(val))) || t('validation.integerMessage')
+
+    return /^-?\d+$/.test(String(value)) || t('validation.integerMessage')
+  }
+
+  // 👉 Alpha Validator
+  const alphaValidator = (value: unknown) => {
+    if (isEmpty(value))
+      return true
+
+    return /^[A-Z]*$/i.test(String(value)) || t('validation.alphaMessage')
+  }
+
+  // 👉 URL Validator
+  const urlValidator = (value: unknown) => {
+    if (isEmpty(value))
+      return true
+
+    const re = /^https?:\/\/[^\s$.?#].\S*$/
+
+    return re.test(String(value)) || t('validation.urlMessage')
+  }
+
+  // 👉 Length Validator
+  const lengthValidator = (value: unknown, length: number) => {
+    if (isEmpty(value))
+      return true
+
+    return String(value).length === length || t('validation.lengthMessage', { length })
+  }
+
+  // 👉 Alpha-dash Validator
+  const alphaDashValidator = (value: unknown) => {
+    if (isEmpty(value))
+      return true
+
+    const valueAsString = String(value)
+
+    return /^[\w-]*$/.test(valueAsString) || t('validation.alphaDashMessage')
+  }
+
+  const conditionalRequiredValidator = (value: unknown, condition: boolean) => {
+    if (!condition)
+      return true
+
+    return requiredValidator(value)
+  }
+
+  // 👉 mobile Validator
+  const mobileValidator = (country: Country | string, value: unknown) => {
+    if (isEmpty(value))
+      return true
+    let countryIso2 = ''
+    let autoDialCode = '' // only auto add dialcode when country Object is provided
+    if (typeof country === 'string') {
+      countryIso2 = country
+    }
+    else {
+      countryIso2 = country.countryCode
+      autoDialCode = country.dialCode
+    }
+
+    const regex
+      = countryIso2.toLocaleLowerCase() === 'my'
+        ? // malaysia mobile phone
+        /^(\+?6?01)[02-46-9]-*\d{7}$|^(\+?6?01)1-*\d{8}$/
+        : // other mobile no +919367788755, 8989829304, +16308520397
+        /^\+?\(?\d{3}\)?\d{3}[-\s.]?\d{3,8}$/
+
+    if (Array.isArray(value))
+      return value.every(val => regex.test(String(`${autoDialCode}${val}`))) || t('validation.mobileNumberFormat')
+
+    return regex.test(String(`${autoDialCode}${value}`)) || t('validation.mobileNumberFormat')
+  }
+
+  const positiveCurrencyValidator = (value: unknown, mustGreaterZero = false) => {
+    if (isEmpty(value))
+      return true
+
+    // /^\d+(\.\d{1,2})?$/
+    // eslint-disable-next-line regexp/no-unused-capturing-group
+    const regex = /^\d+(\.\d{1,2})?$/
+
+    const isValidCurrency = regex.test(String(value))
+
+    const valid = mustGreaterZero && isValidCurrency ? Number(value) > 0 : isValidCurrency
+
+    return valid || t('validation.currencyFormat')
+  }
+
+  return {
+    conditionalRequiredValidator,
+    mobileValidator,
+    requiredValidator,
+    emailValidator,
+    passwordValidator,
+    positiveCurrencyValidator,
+    confirmedPasswordValidator,
+    betweenValidator,
+    integerValidator,
+    regexValidator,
+    alphaValidator,
+    urlValidator,
+    lengthValidator,
+    alphaDashValidator,
+  }
+}

package/dist/templates/vuexy-portal/src/@custom/types/common.ts

@@ -0,0 +1,17 @@
+export interface Country {
+  id: number
+
+  countryCode: string
+
+  dialCode: string
+
+  name: string
+}
+
+export interface State {
+  id: number
+
+  countryCode: string
+
+  name: string
+}

package/dist/templates/vuexy-portal/src/@custom/types/pagination.ts

@@ -0,0 +1,19 @@
+export interface IPage {
+
+  current: number,
+
+  size: number,
+
+}
+
+
+export interface PagingResult<T> {
+
+  total: number;
+  size: number;
+  current: number;
+  hasNext: boolean;
+  hasPrev: boolean;
+  records: T[];
+
+}