@nathapp/na-cli 1.0.8 → 1.0.9

package/dist/templates/vuexy-portal/src/plugins/1.router/additional-routes.ts

@@ -0,0 +1,23 @@
+import type { RouteRecordRaw } from 'vue-router/auto'
+
+// const emailRouteComponent = () => import('@/pages/apps/email/index.vue')
+
+// 👉 Redirects
+export const redirects: RouteRecordRaw[] = [
+  // ℹ️ We are redirecting to different pages based on role.
+  // NOTE: Role is just for UI purposes. ACL is based on abilities.
+  // {
+  //   path: '/pages/user-profile',
+  //   name: 'pages-user-profile',
+  //   redirect: () => ({ name: 'pages-user-profile-tab', params: { tab: 'profile' } }),
+  // },
+  {
+    path: '/account-settings',
+    name: 'account-settings',
+    redirect: () => ({ name: 'account-settings-tab', params: { tab: 'security' } }),
+  },
+]
+
+export const routes: RouteRecordRaw[] = [
+
+]

package/dist/templates/vuexy-portal/src/plugins/1.router/guards.ts

@@ -0,0 +1,50 @@
+import type { Router } from 'vue-router'
+import { canNavigate } from '@layouts/plugins/casl'
+
+export const setupGuards = (router: Router) => {
+  // 👉 router.beforeEach
+  // Docs: https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
+  router.beforeEach(to => {
+    /*
+     * If it's a public route, continue navigation. This kind of pages are allowed to visited by login & non-login users. Basically, without any restrictions.
+     * Examples of public routes are, 404, under maintenance, etc.
+     */
+    if (to.meta.public)
+      return
+
+    /**
+     * Check if user is logged in by checking if token & user data exists in local storage
+     * Feel free to update this logic to suit your needs
+     */
+    const isLoggedIn = !!(useCookie('userData').value && useCookie('accessToken').value)
+
+    /*
+      If user is logged in and is trying to access login like page, redirect to home
+      else allow visiting the page
+      (WARN: Don't allow executing further by return statement because next code will check for permissions)
+     */
+    if (to.meta.unauthenticatedOnly) {
+      if (isLoggedIn)
+        return '/'
+      else
+        return undefined
+    }
+
+    if (to.meta.authenticatedOnly && isLoggedIn)
+      return
+    
+    if (!canNavigate(to) && to.matched.length) {
+      /* eslint-disable indent */
+      return isLoggedIn
+        ? { name: 'not-authorized' }
+        : {
+            name: 'login',
+            query: {
+              ...to.query,
+              to: to.fullPath !== '/' ? to.path : undefined,
+            },
+          }
+      /* eslint-enable indent */
+    }
+  })
+}

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

@@ -0,0 +1,45 @@
+import type { App } from 'vue'
+
+import { setupLayouts } from 'virtual:generated-layouts'
+import type { RouteRecordRaw } from 'vue-router/auto'
+
+import { createRouter, createWebHistory } from 'vue-router/auto'
+
+import { redirects, routes } from './additional-routes'
+import { setupGuards } from './guards'
+
+function recursiveLayouts(route: RouteRecordRaw): RouteRecordRaw {
+  if (route.children) {
+    for (let i = 0; i < route.children.length; i++)
+      route.children[i] = recursiveLayouts(route.children[i])
+
+    return route
+  }
+
+  return setupLayouts([route])[0]
+}
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  scrollBehavior(to) {
+    if (to.hash)
+      return { el: to.hash, behavior: 'smooth', top: 60 }
+
+    return { top: 0 }
+  },
+  extendRoutes: pages => [
+    ...redirects,
+    ...[
+      ...pages,
+      ...routes,
+    ].map(route => recursiveLayouts(route)),
+  ],
+})
+
+setupGuards(router)
+
+export { router }
+
+export default function (app: App) {
+  app.use(router)
+}

package/dist/templates/vuexy-portal/src/plugins/2.pinia.ts

@@ -0,0 +1,8 @@
+import { createPinia } from 'pinia'
+import type { App } from 'vue'
+
+export const store = createPinia()
+
+export default function (app: App) {
+  app.use(store)
+}

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

@@ -0,0 +1,10 @@
+import { createMongoAbility } from '@casl/ability'
+
+export type Actions = 'create' | 'read' | 'update' | 'delete' | 'manage'
+
+// ex: Post, Comment, User, etc. We haven't used any of these in our demo though.
+export type Subjects = 'Post' | 'Comment' | 'all'
+
+export interface Rule { action: Actions; subject: Subjects }
+
+export const ability = createMongoAbility<[Actions, Subjects]>()

package/dist/templates/vuexy-portal/src/plugins/casl/composables/useAbility.ts

@@ -0,0 +1,4 @@
+import { useAbility as useCaslAbility } from '@casl/vue'
+import type { ability } from '../ability'
+
+export const useAbility = () => useCaslAbility<typeof ability>()

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

@@ -0,0 +1,14 @@
+import type { App } from 'vue'
+
+import { createMongoAbility } from '@casl/ability'
+import { abilitiesPlugin } from '@casl/vue'
+import type { Rule } from './ability'
+
+export default function (app: App) {
+  const userAbilityRules = useCookie<Rule[]>('userAbilityRules')
+  const initialAbility = createMongoAbility(userAbilityRules.value ?? [])
+
+  app.use(abilitiesPlugin, initialAbility, {
+    useGlobalProperties: true,
+  })
+}

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

@@ -0,0 +1,29 @@
+import { cookieRef } from '@layouts/stores/config'
+import { themeConfig } from '@themeConfig'
+import type { App } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+const messages = Object.fromEntries(
+  Object.entries(
+    import.meta.glob<{ default: any }>('./locales/*.json', { eager: true }))
+    .map(([key, value]) => [key.slice(10, -5), value.default]),
+)
+
+let _i18n: any = null
+
+export const getI18n = () => {
+  if (_i18n === null) {
+    _i18n = createI18n({
+      legacy: false,
+      locale: cookieRef('language', themeConfig.app.i18n.defaultLocale).value,
+      fallbackLocale: 'en_US',
+      messages,
+    })
+  }
+
+  return _i18n
+}
+
+export default function (app: App) {
+  app.use(getI18n())
+}

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

@@ -0,0 +1,299 @@
+/**
+ * This is an advanced example for creating icon bundles for Iconify SVG Framework.
+ *
+ * It creates a bundle from:
+ * - All SVG files in a directory.
+ * - Custom JSON files.
+ * - Iconify icon sets.
+ * - SVG framework.
+ *
+ * This example uses Iconify Tools to import and clean up icons.
+ * For Iconify Tools documentation visit https://docs.iconify.design/tools/tools2/
+ */
+import { promises as fs } from 'node:fs'
+import { dirname, join } from 'node:path'
+
+// Installation: npm install --save-dev @iconify/tools @iconify/utils @iconify/json @iconify/iconify
+import { cleanupSVG, importDirectory, isEmptyColor, parseColors, runSVGO } from '@iconify/tools'
+import type { IconifyJSON } from '@iconify/types'
+import { getIcons, getIconsCSS, stringToIcon } from '@iconify/utils'
+
+/**
+ * Script configuration
+ */
+interface BundleScriptCustomSVGConfig {
+
+  // Path to SVG files
+  dir: string
+
+  // True if icons should be treated as monotone: colors replaced with currentColor
+  monotone: boolean
+
+  // Icon set prefix
+  prefix: string
+}
+
+interface BundleScriptCustomJSONConfig {
+
+  // Path to JSON file
+  filename: string
+
+  // List of icons to import. If missing, all icons will be imported
+  icons?: string[]
+}
+
+interface BundleScriptConfig {
+
+  // Custom SVG to import and bundle
+  svg?: BundleScriptCustomSVGConfig[]
+
+  // Icons to bundled from @iconify/json packages
+  icons?: string[]
+
+  // List of JSON files to bundled
+  // Entry can be a string, pointing to filename or a BundleScriptCustomJSONConfig object (see type above)
+  // If entry is a string or object without 'icons' property, an entire JSON file will be bundled
+  json?: (string | BundleScriptCustomJSONConfig)[]
+}
+
+const sources: BundleScriptConfig = {
+
+  svg: [
+    // {
+    //   dir: 'src/assets/images/iconify-svg',
+    //   monotone: true,
+    //   prefix: 'custom',
+    // },
+
+    // {
+    //   dir: 'emojis',
+    //   monotone: false,
+    //   prefix: 'emoji',
+    // },
+  ],
+
+  icons: [
+    // 'mdi:home',
+    // 'mdi:account',
+    // 'mdi:login',
+    // 'mdi:logout',
+    // 'octicon:book-24',
+    // 'octicon:code-square-24',
+  ],
+
+  json: [
+    // Custom JSON file
+    // 'json/gg.json',
+
+    // Iconify JSON file (@iconify/json is a package name, /json/ is directory where files are, then filename)
+    require.resolve('@iconify-json/tabler/icons.json'),
+    {
+      filename: require.resolve('@iconify-json/mdi/icons.json'),
+      icons: [
+        'close-circle',
+        'language-javascript',
+        'language-typescript',
+      ],
+    },
+    {
+      filename: require.resolve('@iconify-json/fa/icons.json'),
+      icons: [
+        'circle',
+      ],
+    },
+
+    // Custom file with only few icons
+    // {
+    //   filename: require.resolve('@iconify-json/line-md/icons.json'),
+    //   icons: [
+    //     'home-twotone-alt',
+    //     'github',
+    //     'document-list',
+    //     'document-code',
+    //     'image-twotone',
+    //   ],
+    // },
+  ],
+}
+
+// File to save bundle to
+const target = join(__dirname, 'icons.css')
+
+/**
+ * Do stuff!
+ */
+
+;(async function () {
+  // Create directory for output if missing
+  const dir = dirname(target)
+  try {
+    await fs.mkdir(dir, {
+      recursive: true,
+    })
+  }
+  catch (err) {
+    //
+  }
+
+  const allIcons: IconifyJSON[] = []
+
+  /**
+   * Convert sources.icons to sources.json
+   */
+  if (sources.icons) {
+    const sourcesJSON = sources.json ? sources.json : (sources.json = [])
+
+    // Sort icons by prefix
+    const organizedList = organizeIconsList(sources.icons)
+
+    for (const prefix in organizedList) {
+      const filename = require.resolve(`@iconify/json/json/${prefix}.json`)
+
+      sourcesJSON.push({
+        filename,
+        icons: organizedList[prefix],
+      })
+    }
+  }
+
+  /**
+   * Bundle JSON files and collect icons
+   */
+  if (sources.json) {
+    for (let i = 0; i < sources.json.length; i++) {
+      const item = sources.json[i]
+
+      // Load icon set
+      const filename = typeof item === 'string' ? item : item.filename
+      const content = JSON.parse(await fs.readFile(filename, 'utf8')) as IconifyJSON
+
+      for (const key in content) {
+        if (key === 'prefix' && content.prefix === 'tabler') {
+          for (const k in content.icons)
+            content.icons[k].body = content.icons[k].body.replace(/stroke-width="2"/g, 'stroke-width="1.5"')
+        }
+      }
+
+      // Filter icons
+      if (typeof item !== 'string' && item.icons?.length) {
+        const filteredContent = getIcons(content, item.icons)
+
+        if (!filteredContent)
+          throw new Error(`Cannot find required icons in ${filename}`)
+
+        // Collect filtered icons
+        allIcons.push(filteredContent)
+      }
+      else {
+        // Collect all icons from the JSON file
+        allIcons.push(content)
+      }
+    }
+  }
+
+  /**
+   * Bundle custom SVG icons and collect icons
+   */
+  if (sources.svg) {
+    for (let i = 0; i < sources.svg.length; i++) {
+      const source = sources.svg[i]
+
+      // Import icons
+      const iconSet = await importDirectory(source.dir, {
+        prefix: source.prefix,
+      })
+
+      // Validate, clean up, fix palette, etc.
+      await iconSet.forEach(async (name, type) => {
+        if (type !== 'icon')
+          return
+
+        // Get SVG instance for parsing
+        const svg = iconSet.toSVG(name)
+
+        if (!svg) {
+          // Invalid icon
+          iconSet.remove(name)
+
+          return
+        }
+
+        // Clean up and optimise icons
+        try {
+          // Clean up icon code
+          await cleanupSVG(svg)
+
+          if (source.monotone) {
+            // Replace color with currentColor, add if missing
+            // If icon is not monotone, remove this code
+            await parseColors(svg, {
+              defaultColor: 'currentColor',
+              callback: (attr, colorStr, color) => {
+                return !color || isEmptyColor(color) ? colorStr : 'currentColor'
+              },
+            })
+          }
+
+          // Optimise
+          await runSVGO(svg)
+        }
+        catch (err) {
+          // Invalid icon
+          console.error(`Error parsing ${name} from ${source.dir}:`, err)
+          iconSet.remove(name)
+
+          return
+        }
+
+        // Update icon from SVG instance
+        iconSet.fromSVG(name, svg)
+      })
+
+      // Collect the SVG icon
+      allIcons.push(iconSet.export())
+    }
+  }
+
+  // Generate CSS from collected icons
+  const cssContent = allIcons
+    .map(iconSet => getIconsCSS(
+      iconSet,
+      Object.keys(iconSet.icons),
+      {
+        iconSelector: '.{prefix}-{name}',
+        mode: 'mask',
+      },
+    ))
+    .join('\n')
+
+  // Save the CSS to a file
+  await fs.writeFile(target, cssContent, 'utf8')
+
+  console.log(`Saved CSS to ${target}!`)
+})().catch(err => {
+  console.error(err)
+})
+
+/**
+ * Sort icon names by prefix
+ */
+function organizeIconsList(icons: string[]): Record<string, string[]> {
+  const sorted: Record<string, string[]> = Object.create(null)
+
+  icons.forEach(icon => {
+    const item = stringToIcon(icon)
+
+    if (!item)
+      return
+
+    const prefix = item.prefix
+    const prefixList = sorted[prefix] ? sorted[prefix] : (sorted[prefix] = [])
+
+    const name = item.name
+
+    if (!prefixList.includes(name))
+      prefixList.push(name)
+  })
+
+  return sorted
+}

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

@@ -0,0 +1,5 @@
+import './icons.css'
+
+export default function () {
+  // This plugin just requires icons import
+}

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

@@ -0,0 +1,13 @@
+import type { App } from 'vue'
+
+import { createLayouts } from '@layouts'
+
+import { layoutConfig } from '@themeConfig'
+
+// Styles
+import '@layouts/styles/index.scss'
+
+export default function (app: App) {
+  // ℹ️ We generate layout config from our themeConfig so you don't have to write config twice
+  app.use(createLayouts(layoutConfig))
+}

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

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import ToastPlugin from 'vue-toast-notification'
+import 'vue-toast-notification/dist/theme-default.css'
+
+// import 'vue-toast-notification/dist/theme-bootstrap.css';
+
+export default function (app: App) {
+  app.use(ToastPlugin)
+}