@nathapp/na-cli 1.0.1-rc.6 → 1.0.2

package/dist/templates/vuexy-portal/src/layouts/components/NavSearchBar.vue

@@ -0,0 +1,266 @@
+<script setup lang="ts">
+import Shepherd from 'shepherd.js'
+import { withQuery } from 'ufo'
+import type { RouteLocationRaw } from 'vue-router'
+import type { SearchResults } from '@db/app-bar-search/types'
+import { useConfigStore } from '@core/stores/config'
+
+interface Suggestion {
+  icon: string
+  title: string
+  url: RouteLocationRaw
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const configStore = useConfigStore()
+
+interface SuggestionGroup {
+  title: string
+  content: Suggestion[]
+}
+
+// 👉 Is App Search Bar Visible
+const isAppSearchBarVisible = ref(false)
+const isLoading = ref(false)
+
+// 👉 Default suggestions
+
+const suggestionGroups: SuggestionGroup[] = [
+  {
+    title: 'Popular Searches',
+    content: [
+      { icon: 'tabler-chart-bar', title: 'Analytics', url: { name: 'dashboards-analytics' } },
+      { icon: 'tabler-chart-donut-3', title: 'CRM', url: { name: 'dashboards-crm' } },
+      { icon: 'tabler-shopping-cart', title: 'eCommerce', url: { name: 'dashboards-ecommerce' } },
+      { icon: 'tabler-truck', title: 'Logistics', url: { name: 'dashboards-logistics' } },
+    ],
+  },
+  {
+    title: 'Apps & Pages',
+    content: [
+      { icon: 'tabler-calendar', title: 'Calendar', url: { name: 'apps-calendar' } },
+      { icon: 'tabler-lock', title: 'Roles & Permissions', url: { name: 'apps-roles' } },
+      { icon: 'tabler-settings', title: 'Account Settings', url: { name: 'pages-account-settings-tab', params: { tab: 'account' } } },
+      { icon: 'tabler-copy', title: 'Dialog Examples', url: { name: 'pages-dialog-examples' } },
+    ],
+  },
+  {
+    title: 'User Interface',
+    content: [
+      { icon: 'tabler-typography', title: 'Typography', url: { name: 'pages-typography' } },
+      { icon: 'tabler-menu-2', title: 'Accordion', url: { name: 'components-expansion-panel' } },
+      { icon: 'tabler-info-triangle', title: 'Alert', url: { name: 'components-alert' } },
+      { icon: 'tabler-checkbox', title: 'Cards', url: { name: 'pages-cards-card-basic' } },
+    ],
+  },
+  {
+    title: 'Forms & Tables',
+    content: [
+      { icon: 'tabler-circle-dot', title: 'Radio', url: { name: 'forms-radio' } },
+      { icon: 'tabler-file-invoice', title: 'Form Layouts', url: { name: 'forms-form-layouts' } },
+      { icon: 'tabler-table', title: 'Table', url: { name: 'tables-data-table' } },
+      { icon: 'tabler-edit', title: 'Editor', url: { name: 'forms-editors' } },
+    ],
+  },
+]
+
+// 👉 No Data suggestion
+const noDataSuggestions: Suggestion[] = [
+  {
+    title: 'Analytics',
+    icon: 'tabler-chart-bar',
+    url: { name: 'dashboards-analytics' },
+  },
+  {
+    title: 'CRM',
+    icon: 'tabler-chart-donut-3',
+    url: { name: 'dashboards-crm' },
+  },
+  {
+    title: 'eCommerce',
+    icon: 'tabler-shopping-cart',
+    url: { name: 'dashboards-ecommerce' },
+  },
+]
+
+const searchQuery = ref('')
+
+const router = useRouter()
+const searchResult = ref<SearchResults[]>([])
+
+const fetchResults = async () => {
+  isLoading.value = true
+
+  const { data } = await useApi<any>(withQuery('/app-bar/search', { q: searchQuery.value }))
+
+  searchResult.value = data.value
+
+  // ℹ️ simulate loading: we have used setTimeout for better user experience your can remove it
+  setTimeout(() => {
+    isLoading.value = false
+  }, 500)
+}
+
+watch(searchQuery, fetchResults)
+
+const closeSearchBar = () => {
+  isAppSearchBarVisible.value = false
+  searchQuery.value = ''
+}
+
+// 👉 redirect the selected page
+const redirectToSuggestedPage = (selected: Suggestion) => {
+  router.push(selected.url as string)
+  closeSearchBar()
+}
+
+const LazyAppBarSearch = defineAsyncComponent(() => import('@core/components/AppBarSearch.vue'))
+</script>
+
+<template>
+  <div
+    class="d-flex align-center cursor-pointer"
+    v-bind="$attrs"
+    style="user-select: none;"
+    @click="isAppSearchBarVisible = !isAppSearchBarVisible"
+  >
+    <!-- 👉 Search Trigger button -->
+    <!-- close active tour while opening search bar using icon -->
+    <IconBtn @click="Shepherd.activeTour?.cancel()">
+      <VIcon icon="tabler-search" />
+    </IconBtn>
+
+    <span
+      v-if="configStore.appContentLayoutNav === 'vertical'"
+      class="d-none d-md-flex align-center text-disabled ms-2"
+      @click="Shepherd.activeTour?.cancel()"
+    >
+      <span class="me-2">Search</span>
+      <span class="meta-key">&#8984;K</span>
+    </span>
+  </div>
+
+  <!-- 👉 App Bar Search -->
+  <LazyAppBarSearch
+    v-model:isDialogVisible="isAppSearchBarVisible"
+    :search-results="searchResult"
+    :is-loading="isLoading"
+    @search="searchQuery = $event"
+  >
+    <!-- suggestion -->
+    <template #suggestions>
+      <VCardText class="app-bar-search-suggestions pa-12">
+        <VRow v-if="suggestionGroups">
+          <VCol
+            v-for="suggestion in suggestionGroups"
+            :key="suggestion.title"
+            cols="12"
+            sm="6"
+          >
+            <p
+              class="custom-letter-spacing text-disabled text-uppercase py-2 px-4 mb-0"
+              style="font-size: 0.75rem; line-height: 0.875rem;"
+            >
+              {{ suggestion.title }}
+            </p>
+            <VList class="card-list">
+              <VListItem
+                v-for="item in suggestion.content"
+                :key="item.title"
+                class="app-bar-search-suggestion mx-4 mt-2"
+                @click="redirectToSuggestedPage(item)"
+              >
+                <VListItemTitle>{{ item.title }}</VListItemTitle>
+                <template #prepend>
+                  <VIcon
+                    :icon="item.icon"
+                    size="20"
+                    class="me-n1"
+                  />
+                </template>
+              </VListItem>
+            </VList>
+          </VCol>
+        </VRow>
+      </VCardText>
+    </template>
+
+    <!-- no data suggestion -->
+    <template #noDataSuggestion>
+      <div class="mt-9">
+        <span class="d-flex justify-center text-disabled mb-2">Try searching for</span>
+        <h6
+          v-for="suggestion in noDataSuggestions"
+          :key="suggestion.title"
+          class="app-bar-search-suggestion text-h6 font-weight-regular cursor-pointer py-2 px-4"
+          @click="redirectToSuggestedPage(suggestion)"
+        >
+          <VIcon
+            size="20"
+            :icon="suggestion.icon"
+            class="me-2"
+          />
+          <span>{{ suggestion.title }}</span>
+        </h6>
+      </div>
+    </template>
+
+    <!-- search result -->
+    <template #searchResult="{ item }">
+      <VListSubheader class="text-disabled custom-letter-spacing font-weight-regular ps-4">
+        {{ item.title }}
+      </VListSubheader>
+      <VListItem
+        v-for="list in item.children"
+        :key="list.title"
+        :to="list.url"
+        @click="closeSearchBar"
+      >
+        <template #prepend>
+          <VIcon
+            size="20"
+            :icon="list.icon"
+            class="me-n1"
+          />
+        </template>
+        <template #append>
+          <VIcon
+            size="20"
+            icon="tabler-corner-down-left"
+            class="enter-icon flip-in-rtl"
+          />
+        </template>
+        <VListItemTitle>
+          {{ list.title }}
+        </VListItemTitle>
+      </VListItem>
+    </template>
+  </LazyAppBarSearch>
+</template>
+
+<style lang="scss">
+@use "@styles/variables/vuetify.scss";
+
+.meta-key {
+  border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 6px;
+  block-size: 1.5625rem;
+  font-size: 0.8125rem;
+  line-height: 1.3125rem;
+  padding-block: 0.125rem;
+  padding-inline: 0.25rem;
+}
+
+.app-bar-search-dialog {
+  .custom-letter-spacing {
+    letter-spacing: 0.8px;
+  }
+
+  .card-list {
+    --v-card-list-gap: 8px;
+  }
+}
+</style>

package/dist/templates/vuexy-portal/src/layouts/components/NavbarShortcuts.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const shortcuts = [
+  {
+    icon: 'tabler-calendar',
+    title: 'Calendar',
+    subtitle: 'Appointments',
+    to: { name: 'apps-calendar' },
+  },
+  {
+    icon: 'tabler-file-dollar',
+    title: 'Invoice App',
+    subtitle: 'Manage Accounts',
+    to: { name: 'apps-invoice-list' },
+  },
+  {
+    icon: 'tabler-user',
+    title: 'Users',
+    subtitle: 'Manage Users',
+    to: { name: 'apps-user-list' },
+  },
+  {
+    icon: 'tabler-users',
+    title: 'Role Management',
+    subtitle: 'Permission',
+    to: { name: 'apps-roles' },
+  },
+  {
+    icon: 'tabler-device-desktop-analytics',
+    title: 'Dashboard',
+    subtitle: 'Dashboard Analytics',
+    to: { name: 'dashboards-analytics' },
+  },
+  {
+    icon: 'tabler-settings',
+    title: 'Settings',
+    subtitle: 'Account Settings',
+    to: { name: 'pages-account-settings-tab', params: { tab: 'account' } },
+  },
+
+]
+</script>
+
+<template>
+  <Shortcuts :shortcuts="shortcuts" />
+</template>

package/dist/templates/vuexy-portal/src/layouts/components/NavbarThemeSwitcher.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ThemeSwitcherTheme } from '@layouts/types'
+
+const themes: ThemeSwitcherTheme[] = [
+  {
+    name: 'light',
+    icon: 'tabler-sun-high',
+  },
+  {
+    name: 'dark',
+    icon: 'tabler-moon-stars',
+  },
+  {
+    name: 'system',
+    icon: 'tabler-device-desktop-analytics',
+  },
+]
+</script>
+
+<template>
+  <ThemeSwitcher :themes="themes" />
+</template>

package/dist/templates/vuexy-portal/src/layouts/components/UserProfile.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+const authStore = useAuthStore()
+
+const userData = useCookie<any>('userData')
+
+const logoutAction = () => {
+  authStore.logout()
+}
+</script>
+
+<template>
+  <VBadge
+    dot
+    location="bottom right"
+    offset-x="3"
+    offset-y="3"
+    bordered
+    color="success"
+  >
+    <VAvatar
+      class="cursor-pointer"
+      :color="!(userData && userData.avatar) ? 'primary' : undefined"
+      :variant="!(userData && userData.avatar) ? 'tonal' : undefined"
+    >
+      <VImg
+        v-if="userData.avatar"
+        :src="userData.avatar"
+      />
+      <span v-else>
+        {{ avatarText(userData.name) }}
+      </span>
+
+      <!-- SECTION Menu -->
+      <VMenu
+        activator="parent"
+        width="230"
+        location="bottom end"
+        offset="14px"
+      >
+        <VList>
+          <!-- 👉 User Avatar & Name -->
+          <VListItem>
+            <template #prepend>
+              <VListItemAction start>
+                <VBadge
+                  dot
+                  location="bottom right"
+                  offset-x="3"
+                  offset-y="3"
+                  color="success"
+                >
+                  <VAvatar
+                    color="primary"
+                    variant="tonal"
+                  >
+                    <VImg
+                      v-if="userData.avatar"
+                      :src="userData.avatar"
+                    />
+                    <span v-else>
+                      {{ avatarText(userData.name) }}
+                    </span>
+                  </VAvatar>
+                </VBadge>
+              </VListItemAction>
+            </template>
+
+            <VListItemTitle class="font-weight-semibold">
+              {{ userData ? userData.name : "" }}
+            </VListItemTitle>
+            <VListItemSubtitle>
+              {{ userData ? $t(`userRole.${userData.userRole}`) : "" }}
+            </VListItemSubtitle>
+          </VListItem>
+
+          <VDivider class="my-2" />
+
+          <!-- 👉 Settings -->
+          <VListItem
+            link
+            :to="{ name: 'account-settings' }"
+          >
+            <template #prepend>
+              <VIcon
+                class="me-2"
+                icon="tabler-settings"
+                size="22"
+              />
+            </template>
+
+            <VListItemTitle>{{ $t('accountSetting.settings') }}</VListItemTitle>
+          </VListItem>
+
+          <!-- Divider -->
+          <VDivider class="my-2" />
+
+          <!-- 👉 Logout -->
+          <VListItem @click="logoutAction">
+            <template #prepend>
+              <VIcon
+                class="me-2"
+                icon="tabler-logout"
+                size="22"
+              />
+            </template>
+
+            <VListItemTitle>{{ $t('common.logout') }}</VListItemTitle>
+          </VListItem>
+        </VList>
+      </VMenu>
+      <!-- !SECTION -->
+    </VAvatar>
+  </VBadge>
+</template>

package/dist/templates/vuexy-portal/src/layouts/default.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { useConfigStore } from '@core/stores/config'
+import { AppContentLayoutNav } from '@layouts/enums'
+import { switchToVerticalNavOnLtOverlayNavBreakpoint } from '@layouts/utils'
+
+const DefaultLayoutWithHorizontalNav = defineAsyncComponent(() => import('./components/DefaultLayoutWithHorizontalNav.vue'))
+const DefaultLayoutWithVerticalNav = defineAsyncComponent(() => import('./components/DefaultLayoutWithVerticalNav.vue'))
+
+const configStore = useConfigStore()
+
+// ℹ️ This will switch to vertical nav when define breakpoint is reached when in horizontal nav layout
+// Remove below composable usage if you are not using horizontal nav layout in your app
+switchToVerticalNavOnLtOverlayNavBreakpoint()
+
+const { layoutAttrs, injectSkinClasses } = useSkins()
+
+injectSkinClasses()
+</script>
+
+<template>
+  <Component
+    v-bind="layoutAttrs"
+    :is="configStore.appContentLayoutNav === AppContentLayoutNav.Vertical ? DefaultLayoutWithVerticalNav : DefaultLayoutWithHorizontalNav"
+  />
+</template>
+
+<style lang="scss">
+// As we are using `layouts` plugin we need its styles to be imported
+@use "@layouts/styles/default-layout";
+</style>

package/dist/templates/vuexy-portal/src/pages/[...error].vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useGenerateImageVariant } from '@core/composable/useGenerateImageVariant'
+import miscMaskDark from '@images/pages/misc-mask-dark.png'
+import miscMaskLight from '@images/pages/misc-mask-light.png'
+
+const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
+
+definePage({
+  alias: '/pages/not-found/:error(.*)',
+  meta: {
+    layout: 'blank',
+    public: true,
+  },
+})
+</script>
+
+<template>
+  <div class="misc-wrapper">
+    <ErrorHeader
+      status-code="404"
+      :title="$t('errorPage.pageNotFound')"
+      :description="$t('errorPage.pageNotFoundMessage')"
+    />
+
+    <VBtn
+      to="/"
+      class="mb-11"
+    >
+      {{ $t('common.backToHome') }}
+    </VBtn>
+
+    <!-- 👉 Image -->
+    <div class="misc-avatar w-100 text-center" />
+
+    <img
+      class="misc-footer-img d-none d-md-block"
+      :src="authThemeMask"
+      alt="misc-footer-img"
+      height="320"
+    >
+  </div>
+</template>
+
+<style lang="scss">
+@use "@core/scss/template/pages/misc.scss";
+</style>

package/dist/templates/vuexy-portal/src/pages/account-settings/[tab].vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import AccountSettingsSecurity from '@/views/account-settings/AccountSettingsSecurity.vue'
+
+const { t } = useI18n()
+const route = useRoute('account-settings-tab')
+
+const activeTab = computed({
+  get: () => route.params.tab,
+  set: () => route.params.tab,
+})
+
+// tabs
+const tabs = [
+  { title: t('accountSetting.security'), icon: 'tabler-lock', tab: 'security' },
+]
+
+definePage({
+  meta: {
+    navActiveLink: 'account-settings-tab',
+    authenticatedOnly: true,
+  },
+})
+</script>
+
+<template>
+  <div>
+    <VTabs
+      v-model="activeTab"
+      class="v-tabs-pill"
+    >
+      <VTab
+        v-for="item in tabs"
+        :key="item.icon"
+        :value="item.tab"
+        :to="{ name: 'account-settings-tab', params: { tab: item.tab } }"
+      >
+        <VIcon
+          size="20"
+          start
+          :icon="item.icon"
+        />
+        {{ item.title }}
+      </VTab>
+    </VTabs>
+
+    <VWindow
+      v-model="activeTab"
+      class="mt-6 disable-tab-transition"
+      :touch="false"
+    >
+      <!-- Security -->
+      <VWindowItem value="security">
+        <AccountSettingsSecurity />
+      </VWindowItem>
+    </VWindow>
+  </div>
+</template>

package/dist/templates/vuexy-portal/src/pages/index.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+definePage({
+  meta: {
+    authenticatedOnly: true,
+  },
+})
+</script>
+<template>
+  <div>
+    <VCard
+      class="mb-6"
+      title="Kick start your project 🚀"
+    >
+      <VCardText>All the best for your new project.</VCardText>
+      <VCardText>
+        Please make sure to read our <a
+          href="https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-decoration-none"
+        >
+          Template Documentation
+        </a> to understand where to go from here and how to use our template.
+      </VCardText>
+    </VCard>
+
+    <VCard title="Want to integrate JWT? 🔒">
+      <VCardText>We carefully crafted JWT flow so you can implement JWT with ease and with minimum efforts.</VCardText>
+      <VCardText>Please read our  JWT Documentation to get more out of JWT authentication.</VCardText>
+    </VCard>
+  </div>
+</template>