@nathapp/na-cli 1.0.8 → 1.0.9

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

@@ -0,0 +1,5 @@
+export interface ChangePasswordForm {
+  existingPassword: string
+
+  password: string
+}

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

@@ -0,0 +1,83 @@
+import { CustomerAddress } from "../types/customer"
+
+export const formatCurrency = (value: number | string, currency: string = 'MYR', locale: string = 'en-US') => {
+  if (typeof value === 'string')
+    value = Number(value)
+
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency: currency === 'RM' ? 'MYR' : currency,
+  }).format(value)
+}
+
+export const formatNumber = (value: number | string, locale: string = 'en-US') => {
+  if (typeof value === 'string')
+    value = Number(value)
+
+  return new Intl.NumberFormat(locale).format(value)
+}
+
+export const formatNumberDecimal = (value: number | string, decimalPlaces: number = 2) => {
+  if (typeof value === 'string')
+    value = Number(value)
+
+  return value.toFixed(decimalPlaces)
+}
+
+export const formatAddress = (
+  address1: string,
+  address2?: string,
+  address3?: string,
+  city?: string,
+  postalCode?: string,
+  state?: string,
+  country?: string,
+  linebreak = ',',
+): string => {
+  let formattedAddress = ''
+
+  if (address1)
+    formattedAddress += `${address1}${linebreak}`
+
+  if (address2)
+    formattedAddress += `${address2}${linebreak}`
+
+  if (address3)
+    formattedAddress += `${address3}${linebreak}`
+
+  formattedAddress += `${postalCode} ${city}${linebreak}`
+
+  if (state)
+    formattedAddress += `${state}${linebreak}`
+
+  if (country)
+    formattedAddress += `${country}`
+
+  return formattedAddress
+}
+
+export const formatCustomerAddress = (
+  customerAddress: CustomerAddress,
+  linebreak = ',',
+): string => {
+  const {
+    address1,
+    address2,
+    address3,
+    city,
+    postcode,
+    stateName,
+    countryName,
+  } = customerAddress
+
+  return formatAddress(
+    address1,
+    address2,
+    address3,
+    city,
+    postcode,
+    stateName,
+    countryName,
+    linebreak,
+  )
+}

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

@@ -0,0 +1,51 @@
+/* eslint-disable @stylistic/js/operator-linebreak */
+import type { Country } from '../types/common'
+
+export const conditionalRequiredValidator = (value: unknown, condition: boolean) => {
+  if (!condition)
+    return true
+
+  return requiredValidator(value)
+}
+
+// 👉 mobile Validator
+export 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}`))) || 'The mobile number field must be a valid mobile number'
+
+  return regex.test(String(`${autoDialCode}${value}`)) || 'The Mobile Number field must be a valid mobile number'
+}
+
+export 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 || 'The currency field must be a valid currency and must be greater than 0'
+}

package/dist/templates/vuexy-portal/src/@layouts/components.ts

@@ -0,0 +1,11 @@
+export { default as HorizontalNav } from './components/HorizontalNav.vue'
+export { default as HorizontalNavGroup } from './components/HorizontalNavGroup.vue'
+export { default as HorizontalNavLayout } from './components/HorizontalNavLayout.vue'
+export { default as HorizontalNavLink } from './components/HorizontalNavLink.vue'
+export { default as HorizontalNavPopper } from './components/HorizontalNavPopper.vue'
+export { default as TransitionExpand } from './components/TransitionExpand.vue'
+export { default as VerticalNav } from './components/VerticalNav.vue'
+export { default as VerticalNavGroup } from './components/VerticalNavGroup.vue'
+export { default as VerticalNavLayout } from './components/VerticalNavLayout.vue'
+export { default as VerticalNavLink } from './components/VerticalNavLink.vue'
+export { default as VerticalNavSectionTitle } from './components/VerticalNavSectionTitle.vue'

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

@@ -0,0 +1,43 @@
+import { breakpointsVuetify } from '@vueuse/core'
+import { AppContentLayoutNav, ContentWidth, FooterType, HorizontalNavType, NavbarType } from '@layouts/enums'
+import type { LayoutConfig } from '@layouts/types'
+
+export const layoutConfig: LayoutConfig = {
+  app: {
+    title: 'my-layout',
+    logo: h('img', { src: '/src/assets/logo.svg' }),
+    contentWidth: ContentWidth.Boxed,
+    contentLayoutNav: AppContentLayoutNav.Vertical,
+    overlayNavFromBreakpoint: breakpointsVuetify.md,
+
+    // isRTL: false,
+    i18n: {
+      enable: true,
+    },
+    iconRenderer: h('div'),
+  },
+  navbar: {
+    type: NavbarType.Sticky,
+    navbarBlur: true,
+  },
+  footer: {
+    type: FooterType.Static,
+  },
+  verticalNav: {
+    isVerticalNavCollapsed: false,
+    defaultNavItemIconProps: { icon: 'tabler-circle' },
+  },
+  horizontalNav: {
+    type: HorizontalNavType.Sticky,
+    transition: 'none',
+    popoverOffset: 0,
+  },
+  icons: {
+    chevronDown: { icon: 'tabler-chevron-down' },
+    chevronRight: { icon: 'tabler-chevron-right' },
+    close: { icon: 'tabler-x' },
+    verticalNavPinned: { icon: 'tabler-circle-dot' },
+    verticalNavUnPinned: { icon: 'tabler-circle' },
+    sectionTitlePlaceholder: { icon: 'tabler-minus' },
+  },
+}

package/dist/templates/vuexy-portal/src/@layouts/enums.ts

@@ -0,0 +1,27 @@
+export const ContentWidth = {
+  Fluid: 'fluid',
+  Boxed: 'boxed',
+} as const
+
+export const NavbarType = {
+  Sticky: 'sticky',
+  Static: 'static',
+  Hidden: 'hidden',
+} as const
+
+export const FooterType = {
+  Sticky: 'sticky',
+  Static: 'static',
+  Hidden: 'hidden',
+} as const
+
+export const AppContentLayoutNav = {
+  Vertical: 'vertical',
+  Horizontal: 'horizontal',
+} as const
+
+export const HorizontalNavType = {
+  Sticky: 'sticky',
+  Static: 'static',
+  Hidden: 'hidden',
+} as const

package/dist/templates/vuexy-portal/src/@layouts/index.ts

@@ -0,0 +1,49 @@
+import type { PartialDeep } from 'type-fest'
+import type { Plugin } from 'vue'
+import { layoutConfig } from '@layouts/config'
+import { cookieRef, useLayoutConfigStore } from '@layouts/stores/config'
+import type { LayoutConfig } from '@layouts/types'
+import { _setDirAttr } from '@layouts/utils'
+
+// 🔌 Plugin
+export const createLayouts = (userConfig: PartialDeep<LayoutConfig>): Plugin => {
+  return (): void => {
+    const configStore = useLayoutConfigStore()
+
+    // Non reactive Values
+    layoutConfig.app.title = userConfig.app?.title ?? layoutConfig.app.title
+    layoutConfig.app.logo = userConfig.app?.logo ?? layoutConfig.app.logo as any
+    layoutConfig.app.overlayNavFromBreakpoint = userConfig.app?.overlayNavFromBreakpoint ?? layoutConfig.app.overlayNavFromBreakpoint
+    layoutConfig.app.i18n.enable = userConfig.app?.i18n?.enable ?? layoutConfig.app.i18n.enable
+    layoutConfig.app.iconRenderer = userConfig.app?.iconRenderer as LayoutConfig['app']['iconRenderer'] ?? layoutConfig.app.iconRenderer
+
+    layoutConfig.verticalNav.defaultNavItemIconProps = userConfig.verticalNav?.defaultNavItemIconProps ?? layoutConfig.verticalNav.defaultNavItemIconProps
+
+    layoutConfig.icons.chevronDown = userConfig.icons?.chevronDown ?? layoutConfig.icons.chevronDown
+    layoutConfig.icons.chevronRight = userConfig.icons?.chevronRight ?? layoutConfig.icons.chevronRight
+    layoutConfig.icons.close = userConfig.icons?.close ?? layoutConfig.icons.close
+    layoutConfig.icons.verticalNavPinned = userConfig.icons?.verticalNavPinned ?? layoutConfig.icons.verticalNavPinned
+    layoutConfig.icons.verticalNavUnPinned = userConfig.icons?.verticalNavUnPinned ?? layoutConfig.icons.verticalNavUnPinned
+    layoutConfig.icons.sectionTitlePlaceholder = userConfig.icons?.sectionTitlePlaceholder ?? layoutConfig.icons.sectionTitlePlaceholder
+
+    // Reactive Values (Store)
+    configStore.$patch({
+      appContentLayoutNav: cookieRef('appContentLayoutNav', userConfig.app?.contentLayoutNav ?? layoutConfig.app.contentLayoutNav).value,
+      appContentWidth: cookieRef('appContentWidth', userConfig.app?.contentWidth ?? layoutConfig.app.contentWidth).value,
+      footerType: cookieRef('footerType', userConfig.footer?.type ?? layoutConfig.footer.type).value,
+      navbarType: cookieRef('navbarType', userConfig.navbar?.type ?? layoutConfig.navbar.type).value,
+      isNavbarBlurEnabled: cookieRef('isNavbarBlurEnabled', userConfig.navbar?.navbarBlur ?? layoutConfig.navbar.navbarBlur).value,
+      isVerticalNavCollapsed: cookieRef('isVerticalNavCollapsed', userConfig.verticalNav?.isVerticalNavCollapsed ?? layoutConfig.verticalNav.isVerticalNavCollapsed).value,
+
+      // isAppRTL: userConfig.app?.isRTL ?? config.app.isRTL,
+      // isLessThanOverlayNavBreakpoint: false,
+      horizontalNavType: cookieRef('horizontalNavType', userConfig.horizontalNav?.type ?? layoutConfig.horizontalNav.type).value,
+    })
+
+    // _setDirAttr(config.app.isRTL ? 'rtl' : 'ltr')
+    _setDirAttr(configStore.isAppRTL ? 'rtl' : 'ltr')
+  }
+}
+
+export * from './components'
+export { layoutConfig }

package/dist/templates/vuexy-portal/src/@layouts/plugins/casl.ts

@@ -0,0 +1,48 @@
+import { useAbility } from '@casl/vue'
+import type { RouteLocationNormalized } from 'vue-router'
+import type { NavGroup } from '@layouts/types'
+
+/**
+ * Returns ability result if ACL is configured or else just return true
+ * We should allow passing string | undefined to can because for admin ability we omit defining action & subject
+ *
+ * Useful if you don't know if ACL is configured or not
+ * Used in @core files to handle absence of ACL without errors
+ *
+ * @param {string} action CASL Actions // https://casl.js.org/v4/en/guide/intro#basics
+ * @param {string} subject CASL Subject // https://casl.js.org/v4/en/guide/intro#basics
+ */
+export const can = (action: string | undefined, subject: string | undefined) => {
+  const vm = getCurrentInstance()
+
+  if (!vm)
+    return false
+
+  const localCan = vm.proxy && '$can' in vm.proxy
+
+  // @ts-expect-error We will get TS error in below line because we aren't using $can in component instance
+  return localCan ? vm.proxy?.$can(action, subject) : true
+}
+
+/**
+ * Check if user can view item based on it's ability
+ * Based on item's action and subject & Hide group if all of it's children are hidden
+ * @param {object} item navigation object item
+ */
+export const canViewNavMenuGroup = (item: NavGroup) => {
+  const hasAnyVisibleChild = item.children.some(i => can(i.action, i.subject))
+
+  // If subject and action is defined in item => Return based on children visibility (Hide group if no child is visible)
+  // Else check for ability using provided subject and action along with checking if has any visible child
+  if (!(item.action && item.subject))
+    return hasAnyVisibleChild
+
+  return can(item.action, item.subject) && hasAnyVisibleChild
+}
+
+export const canNavigate = (to: RouteLocationNormalized) => {
+  const ability = useAbility()
+
+  // @ts-expect-error We should allow passing string | undefined to can because for admin ability we omit defining action & subject
+  return to.matched.some(route => ability.can(route.meta.action, route.meta.subject))
+}

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

@@ -0,0 +1,115 @@
+import { AppContentLayoutNav, NavbarType } from '@layouts/enums'
+import { injectionKeyIsVerticalNavHovered } from '@layouts/symbols'
+import { _setDirAttr } from '@layouts/utils'
+
+// ℹ️ We should not import themeConfig here but in urgency we are doing it for now
+import { layoutConfig } from '@themeConfig'
+
+export const namespaceConfig = (str: string) => `${layoutConfig.app.title}-${str}`
+
+export const cookieRef = <T>(key: string, defaultValue: T) => {
+  return useCookie<T>(namespaceConfig(key), { default: () => defaultValue })
+}
+
+export const useLayoutConfigStore = defineStore('layoutConfig', () => {
+  const route = useRoute()
+
+  // 👉 Navbar Type
+  const navbarType = ref(layoutConfig.navbar.type)
+
+  // 👉 Navbar Type
+  const isNavbarBlurEnabled = cookieRef('isNavbarBlurEnabled', layoutConfig.navbar.navbarBlur)
+
+  // 👉 Vertical Nav Collapsed
+  const isVerticalNavCollapsed = cookieRef('isVerticalNavCollapsed', layoutConfig.verticalNav.isVerticalNavCollapsed)
+
+  // 👉 App Content Width
+  const appContentWidth = cookieRef('appContentWidth', layoutConfig.app.contentWidth)
+
+  // 👉 App Content Layout Nav
+  const appContentLayoutNav = ref(layoutConfig.app.contentLayoutNav)
+
+  watch(appContentLayoutNav, val => {
+    // If Navbar type is hidden while switching to horizontal nav => Reset it to sticky
+    if (val === AppContentLayoutNav.Horizontal) {
+      if (navbarType.value === NavbarType.Hidden)
+        navbarType.value = NavbarType.Sticky
+
+      isVerticalNavCollapsed.value = false
+    }
+  })
+
+  // 👉 Horizontal Nav Type
+  const horizontalNavType = ref(layoutConfig.horizontalNav.type)
+
+  //  👉 Horizontal Nav Popover Offset
+  const horizontalNavPopoverOffset = ref(layoutConfig.horizontalNav.popoverOffset)
+
+  // 👉 Footer Type
+  const footerType = ref(layoutConfig.footer.type)
+
+  // 👉 Misc
+  const isLessThanOverlayNavBreakpoint = computed(() => useMediaQuery(`(max-width: ${layoutConfig.app.overlayNavFromBreakpoint}px)`).value)
+
+  // 👉 Layout Classes
+  const _layoutClasses = computed(() => {
+    const { y: windowScrollY } = useWindowScroll()
+
+    return [
+      `layout-nav-type-${appContentLayoutNav.value}`,
+      `layout-navbar-${navbarType.value}`,
+      `layout-footer-${footerType.value}`,
+      {
+        'layout-vertical-nav-collapsed':
+          isVerticalNavCollapsed.value
+          && appContentLayoutNav.value === 'vertical'
+          && !isLessThanOverlayNavBreakpoint.value,
+      },
+      { [`horizontal-nav-${horizontalNavType.value}`]: appContentLayoutNav.value === 'horizontal' },
+      `layout-content-width-${appContentWidth.value}`,
+      { 'layout-overlay-nav': isLessThanOverlayNavBreakpoint.value },
+      { 'window-scrolled': unref(windowScrollY) },
+      route.meta.layoutWrapperClasses ? route.meta.layoutWrapperClasses : null,
+    ]
+  })
+
+  // 👉 RTL
+  // const isAppRTL = ref(layoutConfig.app.isRTL)
+  const isAppRTL = ref(false)
+
+  watch(isAppRTL, val => {
+    _setDirAttr(val ? 'rtl' : 'ltr')
+  })
+
+  // 👉 Is Vertical Nav Mini
+  /*
+    This function will return true if current state is mini. Mini state means vertical nav is:
+      - Collapsed
+      - Isn't hovered by mouse
+      - nav is not less than overlay breakpoint (hence, isn't overlay menu)
+
+    ℹ️ We are getting `isVerticalNavHovered` as param instead of via `inject` because
+        we are using this in `VerticalNav.vue` component which provide it and I guess because
+        same component is providing & injecting we are getting undefined error
+  */
+  const isVerticalNavMini = (isVerticalNavHovered: Ref<boolean> | null = null) => {
+    const isVerticalNavHoveredLocal = isVerticalNavHovered || inject(injectionKeyIsVerticalNavHovered) || ref(false)
+
+    return computed(() => isVerticalNavCollapsed.value && !isVerticalNavHoveredLocal.value && !isLessThanOverlayNavBreakpoint.value)
+  }
+
+  return {
+    appContentWidth,
+    appContentLayoutNav,
+    navbarType,
+    isNavbarBlurEnabled,
+    isVerticalNavCollapsed,
+    horizontalNavType,
+    horizontalNavPopoverOffset,
+    footerType,
+    isLessThanOverlayNavBreakpoint,
+    isAppRTL,
+    _layoutClasses,
+    isVerticalNavMini,
+  }
+})

package/dist/templates/vuexy-portal/src/@layouts/symbols.ts

@@ -0,0 +1 @@
+export const injectionKeyIsVerticalNavHovered: InjectionKey<Ref<boolean>> = Symbol('isVerticalNavHovered')

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

@@ -0,0 +1,126 @@
+import type { OffsetOptions } from '@floating-ui/dom'
+import type { RouteLocationRaw } from 'vue-router'
+import type { AppContentLayoutNav, ContentWidth, FooterType, HorizontalNavType, NavbarType } from '@layouts/enums'
+
+export interface LayoutConfig {
+  app: {
+    title: Lowercase<string>
+    logo: VNode
+    contentWidth: typeof ContentWidth[keyof typeof ContentWidth]
+    contentLayoutNav: typeof AppContentLayoutNav[keyof typeof AppContentLayoutNav]
+    overlayNavFromBreakpoint: number
+
+    // isRTL: boolean
+    i18n: {
+      enable: boolean
+    }
+    iconRenderer: Component
+  }
+  navbar: {
+    type: typeof NavbarType[keyof typeof NavbarType]
+    navbarBlur: boolean
+  }
+  footer: {
+    type: typeof FooterType[keyof typeof FooterType]
+  }
+  verticalNav: {
+    isVerticalNavCollapsed: boolean
+    defaultNavItemIconProps: unknown
+  }
+  horizontalNav: {
+    type: typeof HorizontalNavType[keyof typeof HorizontalNavType]
+    transition: string | Component
+    popoverOffset?: OffsetOptions
+  }
+  icons: {
+    chevronDown: any
+    chevronRight: any
+    close: any
+    verticalNavPinned: any
+    verticalNavUnPinned: any
+    sectionTitlePlaceholder: any
+  }
+}
+
+export interface AclProperties {
+  action: string
+  subject: string
+}
+
+// 👉 Vertical nav section title
+export interface NavSectionTitle extends Partial<AclProperties> {
+  heading: string
+}
+
+// 👉 Vertical nav link
+declare type ATagTargetAttrValues = '_blank' | '_self' | '_parent' | '_top' | 'framename'
+declare type ATagRelAttrValues =
+  | 'alternate'
+  | 'author'
+  | 'bookmark'
+  | 'external'
+  | 'help'
+  | 'license'
+  | 'next'
+  | 'nofollow'
+  | 'noopener'
+  | 'noreferrer'
+  | 'prev'
+  | 'search'
+  | 'tag'
+
+export interface NavLinkProps {
+  to?: RouteLocationRaw | string | null
+  href?: string
+  target?: ATagTargetAttrValues
+  rel?: ATagRelAttrValues
+}
+
+export interface NavLink extends NavLinkProps, Partial<AclProperties> {
+  title: string
+  icon?: unknown
+  badgeContent?: string
+  badgeClass?: string
+  disable?: boolean
+}
+
+// 👉 Vertical nav group
+export interface NavGroup extends Partial<AclProperties> {
+  title: string
+  icon?: unknown
+  badgeContent?: string
+  badgeClass?: string
+  children: (NavLink | NavGroup)[]
+  disable?: boolean
+}
+
+export declare type VerticalNavItems = (NavLink | NavGroup | NavSectionTitle)[]
+export declare type HorizontalNavItems = (NavLink | NavGroup)[]
+
+// 👉 Components ========================
+
+export interface I18nLanguage {
+  label: string
+  i18nLang: string
+  isRTL: boolean
+}
+
+// avatar | text | icon
+// Thanks: https://stackoverflow.com/a/60617060/10796681
+export type Notification = {
+  id: number
+  title: string
+  subtitle: string
+  time: string
+  color?: string
+  isSeen: boolean
+} & (
+  | { img: string; text?: never; icon?: never }
+  | { img?: never; text: string; icon?: never }
+  | { img?: never; text?: never; icon: string }
+)
+
+export interface ThemeSwitcherTheme {
+  name: string
+  icon: string
+}