@nathapp/na-cli 1.0.8 → 1.0.9

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

@@ -0,0 +1,180 @@
+import type { Router } from 'vue-router'
+import { layoutConfig } from '@layouts/config'
+import { AppContentLayoutNav } from '@layouts/enums'
+import { useLayoutConfigStore } from '@layouts/stores/config'
+import type { NavGroup, NavLink, NavLinkProps } from '@layouts/types'
+
+export const openGroups = ref<string[]>([])
+
+/**
+ * Return nav link props to use
+ // @param {Object, String} item navigation routeName or route Object provided in navigation data
+ */
+
+export const getComputedNavLinkToProp = computed(() => (link: NavLink) => {
+  const props: NavLinkProps = {
+    target: link.target,
+    rel: link.rel,
+  }
+
+  // If route is string => it assumes string is route name => Create route object from route name
+  // If route is not string => It assumes it's route object => returns passed route object
+  if (link.to)
+    props.to = typeof link.to === 'string' ? { name: link.to } : link.to
+  else props.href = link.href
+
+  return props
+})
+
+/**
+ * Return route name for navigation link
+ * If link is string then it will assume it is route-name
+ * IF link is object it will resolve the object and will return the link
+ // @param {Object, String} link navigation link object/string
+ */
+export const resolveNavLinkRouteName = (link: NavLink, router: Router) => {
+  if (!link.to)
+    return null
+
+  if (typeof link.to === 'string')
+    return link.to
+
+  return router.resolve(link.to).name
+}
+
+/**
+ * Check if nav-link is active
+ * @param {object} link nav-link object
+ */
+export const isNavLinkActive = (link: NavLink, router: Router) => {
+  // Matched routes array of current route
+  const matchedRoutes = router.currentRoute.value.matched
+
+  // Check if provided route matches route's matched route
+  const resolveRoutedName = resolveNavLinkRouteName(link, router)
+
+  if (!resolveRoutedName)
+    return false
+
+  return matchedRoutes.some(route => {
+    return route.name === resolveRoutedName || route.meta.navActiveLink === resolveRoutedName
+  })
+}
+
+/**
+ * Check if nav group is active
+ * @param {Array} children Group children
+ */
+export const isNavGroupActive = (children: (NavLink | NavGroup)[], router: Router): boolean =>
+  children.some(child => {
+    // If child have children => It's group => Go deeper(recursive)
+    if ('children' in child)
+      return isNavGroupActive(child.children, router)
+
+    // else it's link => Check for matched Route
+    return isNavLinkActive(child, router)
+  })
+
+/**
+ * Change `dir` attribute based on direction
+ * @param dir 'ltr' | 'rtl'
+ */
+export const _setDirAttr = (dir: 'ltr' | 'rtl') => {
+  // Check if document exists for SSR
+  if (typeof document !== 'undefined')
+    document.documentElement.setAttribute('dir', dir)
+}
+
+/**
+ * Return dynamic i18n props based on i18n plugin is enabled or not
+ * @param key i18n translation key
+ * @param tag tag to wrap the translation with
+ */
+export const getDynamicI18nProps = (key: string, tag = 'span') => {
+  if (!layoutConfig.app.i18n.enable)
+    return {}
+
+  return {
+    keypath: key,
+    tag,
+    scope: 'global',
+  }
+}
+
+export const switchToVerticalNavOnLtOverlayNavBreakpoint = () => {
+  const configStore = useLayoutConfigStore()
+
+  /*
+      ℹ️ This is flag will hold nav type need to render when switching between lgAndUp from mdAndDown window width
+
+      Requirement: When we nav is set to `horizontal` and we hit the `mdAndDown` breakpoint nav type shall change to `vertical` nav
+      Now if we go back to `lgAndUp` breakpoint from `mdAndDown` how we will know which was previous nav type in large device?
+
+      Let's assign value of `appContentLayoutNav` as default value of lgAndUpNav. Why 🤔?
+        If template is viewed in lgAndUp
+          We will assign `appContentLayoutNav` value to `lgAndUpNav` because at this point both constant is same
+          Hence, for `lgAndUpNav` it will take value from theme config file
+        else
+          It will always show vertical nav and if user increase the window width it will fallback to `appContentLayoutNav` value
+          But `appContentLayoutNav` will be value set in theme config file
+    */
+  const lgAndUpNav = ref(configStore.appContentLayoutNav)
+
+  /*
+      There might be case where we manually switch from vertical to horizontal nav and vice versa in `lgAndUp` screen
+      So when user comes back from `mdAndDown` to `lgAndUp` we can set updated nav type
+      For this we need to update the `lgAndUpNav` value if screen is `lgAndUp`
+    */
+  watch(
+    () => configStore.appContentLayoutNav,
+    value => {
+      if (!configStore.isLessThanOverlayNavBreakpoint)
+        lgAndUpNav.value = value
+    },
+  )
+
+  /*
+      This is layout switching part
+      If it's `mdAndDown` => We will use vertical nav no matter what previous nav type was
+      Or if it's `lgAndUp` we need to switch back to `lgAndUp` nav type. For this we will tracker property `lgAndUpNav`
+    */
+  watch(() => configStore.isLessThanOverlayNavBreakpoint, val => {
+    configStore.appContentLayoutNav = val ? AppContentLayoutNav.Vertical : lgAndUpNav.value
+  }, { immediate: true })
+}
+
+/**
+ * Convert Hex color to rgb
+ * @param hex
+ */
+
+export const hexToRgb = (hex: string) => {
+// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+
+  hex = hex.replace(shorthandRegex, (m: string, r: string, g: string, b: string) => {
+    return r + r + g + g + b + b
+  })
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+
+  return result ? `${Number.parseInt(result[1], 16)},${Number.parseInt(result[2], 16)},${Number.parseInt(result[3], 16)}` : null
+}
+
+/**
+ *RGBA color to Hex color with / without opacity
+ */
+export const rgbaToHex = (rgba: string, forceRemoveAlpha = false) => {
+  return (
+    `#${
+      rgba
+        .replace(/^rgba?\(|\s+|\)$/g, '') // Get's rgba / rgb string values
+        .split(',') // splits them at ","
+        .filter((string, index) => !forceRemoveAlpha || index !== 3)
+        .map(string => Number.parseFloat(string)) // Converts them to numbers
+        .map((number, index) => (index === 3 ? Math.round(number * 255) : number)) // Converts alpha to 255 number
+        .map(number => number.toString(16)) // Converts numbers to hex
+        .map(string => (string.length === 1 ? `0${string}` : string)) // Adds 0 when length of one number is 1
+        .join('')}`
+  )
+}

package/dist/templates/vuexy-portal/src/api/api.ts

@@ -0,0 +1 @@
+export const $api = createPrivateAxios()

package/dist/templates/vuexy-portal/src/api/commonApi.ts

@@ -0,0 +1,25 @@
+import type { Country, State } from '@/@custom/types/common'
+
+export const commonApi = {
+  fetchAvailableCountries: async (): Promise<Country[]> => {
+    const result = await $api.get('/config/country/supported')
+
+    return resolveResult<Country[]>(result)
+  },
+
+  fetchStateByCountryCode: async (countryCode: string): Promise<State[]> => {
+    const params = {
+      countryCode,
+    }
+
+    const result = await $api.get('/config/state', { params })
+
+    return resolveResult<State[]>(result)
+  },
+
+  fetchAvailableLanguages: async () => {
+    const result = await $api.get('/config/lang/supported')
+
+    return resolveResult(result)
+  },
+}

package/dist/templates/vuexy-portal/src/api/index.ts

@@ -0,0 +1,58 @@
+import type { AxiosResponse } from 'axios'
+import axios from 'axios'
+import type { ToastProps } from 'vue-toast-notification'
+import { useToast } from 'vue-toast-notification'
+import type { Result, TResult } from './types'
+
+export const resolveResult: {
+  <T = any>(response: AxiosResponse): T
+  <T = any>(response: AxiosResponse, wrapResult: boolean): T | TResult<T>
+} = <T = any>(response: AxiosResponse, wrapResult: boolean = true): Result<T> => {
+  const res = response.data
+  if (wrapResult)
+    return res.data as T
+
+  return res as TResult<T>
+}
+
+export const useDisplayErrorMessage = (message: string, options?: ToastProps) => {
+  const $toast = useToast()
+
+  const opt = Object.assign({}, {
+    position: 'top-right',
+    duration: 3000,
+    dismissible: true,
+    pauseOnHover: true,
+    queue: true,
+  }, options)
+
+  $toast.error(message, opt)
+}
+
+export const createAxios = (baseURL?: string) => {
+  const thisAxios = axios.create({
+    baseURL,
+  })
+
+  thisAxios.interceptors.request.use(
+    config => requestInterceptor(config),
+    error => {
+      return Promise.reject(error)
+    },
+  )
+
+  thisAxios.interceptors.response.use(
+    (response: AxiosResponse) => successResponseInterceptor(response),
+    error => errorResponseInterceptor(error),
+  )
+
+  return thisAxios
+}
+
+export const createPrivateAxios = () => {
+  const baseURL = (window as any)?.configs?.VUE_APP_BASE_API
+  || process.env.VUE_APP_BASE_API
+  || import.meta.env.VITE_API_BASE_URL
+
+  return createAxios(baseURL)
+}

package/dist/templates/vuexy-portal/src/api/requestInterceptor.ts

@@ -0,0 +1,21 @@
+export const resolveRequestConfigOrOption = (configOrOption: any) => {
+  const accessToken = useCookie('accessToken').value
+  const lang = useCookie('language').value || 'en_US'
+
+  configOrOption.headers = {
+    ...configOrOption.headers,
+    lang,
+  }
+  if (accessToken) {
+    configOrOption.headers = {
+      ...configOrOption.headers,
+      Authorization: `Bearer ${accessToken}`,
+    }
+  }
+
+  return configOrOption
+}
+
+export const requestInterceptor = (configOrOption: any) => {
+  return resolveRequestConfigOrOption(configOrOption)
+}

package/dist/templates/vuexy-portal/src/api/responseInterceptor.ts

@@ -0,0 +1,52 @@
+/* eslint-disable prefer-promise-reject-errors */
+/* eslint-disable promise/no-promise-in-callback */
+import type { AxiosResponse } from 'axios'
+
+export const isOctetStreamResponse = (response: AxiosResponse) => {
+  return response.headers
+  && response.headers['content-type'] === 'application/octet-stream;charset=utf-8'
+}
+
+export const resolveSuccessResponse = (response: AxiosResponse) => {
+  const res = response.data
+  const errCode = res.ret
+  if (
+    isOctetStreamResponse(response)
+  )
+    return response
+
+  if (typeof errCode != 'undefined' && errCode !== 0)
+    return Promise.reject(res)
+
+  return response
+}
+
+export const resolveErrorResponse = async (error: any) => {
+  const authStore = useAuthStore()
+  const { response } = error
+  if (response) {
+    const data = response.data
+    if (response.status === 500 || response.status === 400) {
+      if (data.ret !== '0') {
+        useDisplayErrorMessage(data.message || data.msg)
+
+        return Promise.reject(data)
+      }
+    }
+    else if (response.status === 401 && response.config.url !== authStore.config.logoutEndpoint) {
+      await authStore.logout()
+    }
+
+    return data ? Promise.reject(data) : Promise.reject()
+  }
+
+  return Promise.reject()
+}
+
+export const successResponseInterceptor = (response: AxiosResponse) => {
+  return resolveSuccessResponse(response)
+}
+
+export const errorResponseInterceptor = (error: any) => {
+  return resolveErrorResponse(error)
+}

package/dist/templates/vuexy-portal/src/api/types.ts

@@ -0,0 +1,14 @@
+import type { AxiosRequestConfig } from 'axios'
+
+export interface TResult<T = any> {
+  ret: number
+
+  data: T
+}
+
+export type Result<T = any> = T | TResult<T>
+
+export interface RequestConfig<D = any> extends AxiosRequestConfig<D> {
+  wrapResult?: boolean
+  immediate?: boolean
+}

package/dist/templates/vuexy-portal/src/api/useApi.ts

@@ -0,0 +1,68 @@
+import { ref } from 'vue'
+import type { RequestConfig, Result } from './types'
+
+const defaultRequestConfig: RequestConfig = {
+  wrapResult: true,
+  immediate: false,
+}
+
+export const useAxios = () => {
+  return createPrivateAxios()
+}
+
+export const useApi = <T = Result>(config: RequestConfig) => {
+  const axios = useAxios()
+  const error = ref(null)
+  const data = ref<T>()
+  const loading = ref(false)
+  const configIns = ref({ ...defaultRequestConfig, ...config })
+
+  const { wrapResult, immediate } = configIns.value
+
+  const execute = async (): Promise<T> => {
+    data.value = undefined
+    error.value = null
+    loading.value = true
+    try {
+      const response = await axios(configIns.value)
+      const res = response.data
+      let result
+      if (wrapResult)
+        result = res.data
+      else
+        result = res
+
+      data.value = result
+
+      return result
+    }
+    catch (err: any) {
+      error.value = err
+    }
+    finally {
+      loading.value = false
+    }
+    if (wrapResult) {
+      return {} as any
+    }
+    else {
+      return {
+        ret: -1,
+        data: null,
+      } as any
+    }
+  }
+
+  if (immediate) {
+    watchEffect(() => {
+      execute()
+    })
+  }
+
+  return {
+    execute,
+    error,
+    data,
+    loading,
+  }
+}

package/dist/templates/vuexy-portal/src/api/useFetchApi.ts

@@ -0,0 +1,41 @@
+import { createFetch } from '@vueuse/core'
+import { destr } from 'destr'
+
+export const useFetchApi = createFetch({
+  baseUrl: (window as any)?.configs?.VUE_APP_BASE_API
+  || process.env.VUE_APP_BASE_API
+  || import.meta.env.VITE_API_BASE_URL,
+  fetchOptions: {
+    headers: {
+      Accept: 'application/json',
+    },
+  },
+  options: {
+    refetch: true,
+    async beforeFetch({ options }) {
+      options = resolveRequestConfigOrOption(options)
+
+      return { options }
+    },
+    afterFetch(ctx) {
+      const { data, response } = ctx
+
+      // Parse data if it's JSON
+
+      let parsedData = null
+      try {
+        parsedData = destr(data)
+      }
+      catch (error) {
+        console.error(error)
+      }
+
+      return { data: parsedData, response }
+    },
+    onFetchError(ctx) {
+      const { data, response, error } = ctx
+
+      return { data, response, error }
+    },
+  },
+})

package/dist/templates/vuexy-portal/src/api/userApi.ts

@@ -0,0 +1,11 @@
+import type { MaybeRefOrGetter } from 'vue'
+import type { TResult } from './types'
+import type { ChangePasswordForm } from '@/@custom/types/user'
+
+export const userApi = {
+  changePassword: async (form: MaybeRefOrGetter<ChangePasswordForm>) => {
+    const result = await $api.post('/auth/change-password', toValue(form))
+
+    return resolveResult(result, false) as TResult<any>
+  },
+}

package/dist/templates/vuexy-portal/src/composables/useApiFetch.ts

@@ -0,0 +1,48 @@
+import { createFetch } from '@vueuse/core';
+import { destr } from 'destr';
+
+export const useApiFetch = createFetch({
+  baseUrl: (window as any)?.configs?.VUE_APP_BASE_API ||
+    process.env.VUE_APP_BASE_API ||
+    import.meta.env.VITE_API_BASE_URL,
+  fetchOptions: {
+    headers: {
+      Accept: 'application/json',
+    },
+  },
+  options: {
+    refetch: true,
+    async beforeFetch({ options }) {
+      const accessToken = useCookie('accessToken').value
+      const lang = useCookie('language').value || 'en_US';
+
+      options.headers = {
+        ...options.headers,
+        lang,
+      }
+      if (accessToken) {
+        options.headers = {
+          ...options.headers,
+          Authorization: `Bearer ${accessToken}`,
+        }
+      }
+
+      return { options }
+    },
+    afterFetch(ctx) {
+      const { data, response } = ctx
+
+      // Parse data if it's JSON
+
+      let parsedData: any = null
+      try {
+        parsedData = destr(data)
+      }
+      catch (error) {
+        console.error(error)
+      }
+
+      return { data: parsedData, response }
+    },
+  },
+})

package/dist/templates/vuexy-portal/src/composables/useJwt.ts

@@ -0,0 +1,108 @@
+import type { AxiosInstance } from 'axios'
+import axios from 'axios'
+import { md5 } from 'js-md5'
+
+export interface JwtConfig {
+  loginEndpoint: string
+
+  logoutEndpoint?: string
+
+  refreshEndpoint?: string
+
+  tokenType: string
+
+  accessTokenKeyName: string
+
+  refreshTokenKeyName: string
+}
+
+export const defaultJwtConfig: JwtConfig = {
+  loginEndpoint: '/auth/login',
+
+  refreshEndpoint: '/auth/refresh-token',
+
+  logoutEndpoint: '/auth/logout',
+
+  tokenType: 'Bearer',
+
+  accessTokenKeyName: 'accessToken',
+
+  refreshTokenKeyName: 'refreshToken',
+}
+
+const loginInternal = async (data: any, config: JwtConfig, axiosIns: AxiosInstance) => {
+  const headers = {
+    // gsign: data.gsign,
+  }
+
+  delete data.gsign
+  data.password = md5(data.password)
+
+  return axiosIns.post(config.loginEndpoint, data, { headers })
+}
+
+export const useJwt = (jwtOverrideConfig?: JwtConfig, axiosIns?: AxiosInstance) => {
+  const config = Object.assign({}, defaultJwtConfig, jwtOverrideConfig)
+  const innerAxios = axiosIns || axios
+  const userData = useCookie<any>('userData')
+  const ability = useAbility()
+
+  const getToken = () => {
+    return useCookie(config.accessTokenKeyName).value
+  }
+
+  const getRefreshToken = () => {
+    return useCookie(config.refreshTokenKeyName).value
+  }
+
+  const login = (data: any) => {
+    return loginInternal(data, config, innerAxios)
+  }
+
+  const logout = async (callback?: () => void) => {
+    if (config.logoutEndpoint) {
+      try {
+        await innerAxios.post(config.logoutEndpoint)
+      }
+      catch (err) {
+        console.error('logout error', err)
+      }
+    }
+
+    // Remove "accessToken" from cookie
+    useCookie('accessToken').value = null
+
+    // Remove "userData" from cookie
+    userData.value = null
+    useCookie('userData').value = null
+
+    // ℹ️ We had to remove abilities in then block because if we don't nav menu items mutation is visible while redirecting user to login page
+    // Remove "userAbilities" from cookie
+    useCookie('userAbilityRules').value = null
+
+    // Reset ability to initial ability
+    ability.update([])
+
+    typeof callback === 'function' && callback()
+  }
+
+  const refreshToken = () => {
+    const { refreshEndpoint } = config
+
+    if (!refreshEndpoint)
+      return
+
+    return innerAxios.post(refreshEndpoint, {
+      refreshToken: getRefreshToken(),
+    })
+  }
+
+  return {
+    config,
+    getToken,
+    getRefreshToken,
+    login,
+    logout,
+    refreshToken,
+  }
+}

package/dist/templates/vuexy-portal/src/main.ts

@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+
+import App from '@/App.vue'
+import { registerPlugins } from '@core/utils/plugins'
+
+// Styles
+import '@core/scss/template/index.scss'
+import '@styles/styles.scss'
+
+// Create vue app
+const app = createApp(App)
+
+// Register plugins
+registerPlugins(app)
+
+// Mount vue app
+app.mount('#app')

package/dist/templates/vuexy-portal/src/navigation/horizontal/index.ts

@@ -0,0 +1,5 @@
+import { allNavigations } from "..";
+
+export default [
+...allNavigations,
+]

package/dist/templates/vuexy-portal/src/navigation/index.ts

@@ -0,0 +1,7 @@
+export const allNavigations = [
+  {
+    title: 'navigation.home',
+    to: { name: 'root' },
+    icon: { icon: 'tabler-smart-home' },
+  },
+]

package/dist/templates/vuexy-portal/src/navigation/vertical/index.ts

@@ -0,0 +1,5 @@
+import { allNavigations } from "..";
+
+export default [
+...allNavigations,
+]