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

package/dist/templates/vuexy-portal/src/@core/components/cards/AppCardCode.vue

@@ -0,0 +1,152 @@
+<script lang="ts" setup>
+import { getHighlighter } from 'shikiji'
+import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
+
+type CodeLanguages = 'ts' | 'js'
+
+interface Props {
+  title: string
+  code: CodeProp
+  codeLanguage?: string
+  noPadding?: boolean
+}
+
+type CodeProp = Record<CodeLanguages, string>
+
+const props = withDefaults(defineProps<Props>(), {
+  codeLanguage: 'markup',
+  noPadding: false,
+})
+
+const preferredCodeLanguage = useCookie<CodeLanguages>('preferredCodeLanguage', {
+  default: () => 'ts',
+  maxAge: COOKIE_MAX_AGE_1_YEAR,
+})
+
+const isCodeShown = ref(false)
+
+const { copy, copied } = useClipboard({ source: computed(() => props.code[preferredCodeLanguage.value]) })
+
+const highlighter = await getHighlighter({
+  themes: ['dracula', 'dracula-soft'],
+  langs: ['vue'],
+})
+
+const codeSnippet = highlighter.codeToHtml(props.code[preferredCodeLanguage.value], {
+  lang: 'vue',
+  theme: 'dracula',
+})
+</script>
+
+<template>
+  <!-- eslint-disable regex/invalid -->
+  <VCard class="app-card-code">
+    <VCardItem>
+      <VCardTitle>{{ props.title }}</VCardTitle>
+      <template #append>
+        <IconBtn
+          size="small"
+          :color="isCodeShown ? 'primary' : 'default'"
+          :class="isCodeShown ? '' : 'text-disabled'"
+          @click="isCodeShown = !isCodeShown"
+        >
+          <VIcon
+            size="20"
+            icon="tabler-code"
+          />
+        </IconBtn>
+      </template>
+    </VCardItem>
+    <slot v-if="noPadding" />
+    <VCardText v-else>
+      <slot />
+    </VCardText>
+    <VExpandTransition>
+      <div v-show="isCodeShown">
+        <VDivider />
+
+        <VCardText class="d-flex gap-y-3 flex-column">
+          <div class="d-flex justify-end">
+            <VBtnToggle
+              v-model="preferredCodeLanguage"
+              mandatory
+              density="compact"
+            >
+              <VBtn
+                value="ts"
+                icon
+                :variant="preferredCodeLanguage === 'ts' ? 'tonal' : 'text'"
+                :color="preferredCodeLanguage === 'ts' ? 'primary' : ''"
+              >
+                <VIcon
+                  icon="mdi-language-typescript"
+                  :color="preferredCodeLanguage === 'ts' ? 'primary' : 'secondary'"
+                />
+              </VBtn>
+
+              <VBtn
+                value="js"
+                icon
+                :variant="preferredCodeLanguage === 'js' ? 'tonal' : 'text'"
+                :color="preferredCodeLanguage === 'js' ? 'primary' : ''"
+              >
+                <VIcon
+                  icon="mdi-language-javascript"
+                  :color="preferredCodeLanguage === 'js' ? 'primary' : 'secondary'"
+                />
+              </VBtn>
+            </VBtnToggle>
+          </div>
+
+          <div class="position-relative">
+            <PerfectScrollbar
+              style="border-radius: 6px;max-block-size: 500px;"
+              :options="{ wheelPropagation: false, suppressScrollX: false }"
+            >
+              <!-- eslint-disable-next-line vue/no-v-html -->
+              <span v-html="codeSnippet" />
+            </PerfectScrollbar>
+            <IconBtn
+              class="position-absolute app-card-code-copy-icon"
+              color="white"
+              @click="() => { copy() }"
+            >
+              <VIcon
+                :icon="copied ? 'tabler-check' : 'tabler-copy'"
+                size="20"
+              />
+            </IconBtn>
+          </div>
+        </VCardText>
+      </div>
+    </VExpandTransition>
+  </VCard>
+</template>
+
+<style lang="scss">
+@use "@styles/variables/vuetify.scss";
+
+code[class*="language-"],
+pre[class*="language-"] {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 14px;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  border-radius: vuetify.$card-border-radius;
+  max-block-size: 500px;
+}
+
+.app-card-code-copy-icon {
+  inset-block-start: 1.2em;
+  inset-inline-end: 0.8em;
+}
+
+.app-card-code {
+  .shiki {
+    padding: 0.75rem;
+    text-wrap: wrap;
+  }
+}
+</style>

package/dist/templates/vuexy-portal/src/@core/components/cards/CardStatisticsHorizontal.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  color?: string
+  icon: string
+  stats: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'primary',
+})
+</script>
+
+<template>
+  <VCard>
+    <VCardText class="d-flex align-center justify-space-between">
+      <div>
+        <div class="d-flex align-center flex-wrap">
+          <h5 class="text-h5">
+            {{ props.stats }}
+          </h5>
+        </div>
+        <div class="text-subtitle-1">
+          {{ props.title }}
+        </div>
+      </div>
+
+      <VAvatar
+        :color="props.color"
+        :size="42"
+        rounded
+        variant="tonal"
+      >
+        <VIcon
+          :icon="props.icon"
+          size="26"
+        />
+      </VAvatar>
+    </VCardText>
+  </VCard>
+</template>

package/dist/templates/vuexy-portal/src/@core/components/cards/CardStatisticsVertical.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  color?: string
+  icon: string
+  stats: string
+  height: number
+  series: unknown[]
+  chartOptions: unknown
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'primary',
+})
+</script>
+
+<template>
+  <VCard>
+    <VCardText class="d-flex flex-column pb-0">
+      <VAvatar
+        v-if="props.icon"
+        size="42"
+        variant="tonal"
+        :color="props.color"
+        rounded
+        class="mb-2"
+      >
+        <VIcon
+          :icon="props.icon"
+          size="26"
+        />
+      </VAvatar>
+
+      <h5 class="text-h5">
+        {{ props.stats }}
+      </h5>
+      <div class="text-sm">
+        {{ props.title }}
+      </div>
+    </VCardText>
+
+    <VueApexCharts
+      :series="props.series"
+      :options="props.chartOptions"
+      :height="props.height"
+    />
+  </VCard>
+</template>

package/dist/templates/vuexy-portal/src/@core/scss/base/_components.scss

@@ -0,0 +1,185 @@
+@use "@core/scss/base/mixins";
+@use "@layouts/styles/placeholders";
+@use "@layouts/styles/mixins" as layoutMixins;
+@use "@configured-variables" as variables;
+@use "@styles/variables/_vuetify.scss" as vuetify;
+
+// 👉 Avatar group
+.v-avatar-group {
+  display: flex;
+  align-items: center;
+
+  > * {
+    &:not(:first-child) {
+      margin-inline-start: -0.8rem;
+    }
+
+    transition: transform 0.25s ease, box-shadow 0.15s ease;
+
+    &:hover {
+      z-index: 2;
+      transform: translateY(-5px) scale(1.05);
+
+      @include mixins.elevation(3);
+    }
+  }
+
+  > .v-avatar {
+    border: 2px solid rgb(var(--v-theme-surface));
+    transition: transform 0.15s ease;
+  }
+}
+
+// 👉 Button outline with default color border color
+.v-alert--variant-outlined,
+.v-avatar--variant-outlined,
+.v-btn.v-btn--variant-outlined,
+.v-card--variant-outlined,
+.v-chip--variant-outlined,
+.v-list-item--variant-outlined {
+  &:not([class*="text-"]) {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+
+  &.text-default {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+}
+
+// 👉 Custom Input
+.v-label.custom-input {
+  padding: 1rem;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  opacity: 1;
+  white-space: normal;
+
+  +.v-label {
+    letter-spacing: normal;
+  }
+
+  &:hover {
+    border-color: rgba(var(--v-border-color), 0.25);
+  }
+
+  &.active {
+    border-color: rgb(var(--v-theme-primary));
+
+    .v-icon {
+      color: rgb(var(--v-theme-primary)) !important;
+    }
+  }
+}
+
+// 👉 Datatable
+.v-data-table-footer__pagination {
+  @include layoutMixins.rtl {
+    .v-btn {
+      .v-icon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+
+// Dialog responsive width
+.v-dialog {
+  // dialog custom close btn
+  .v-dialog-close-btn {
+    position: absolute;
+    z-index: 1;
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
+    inset-block-start: 0.5rem;
+    inset-inline-end: 0.5rem;
+
+    .v-btn__overlay {
+      display: none;
+    }
+  }
+
+  .v-card {
+    @extend %style-scroll-bar;
+  }
+}
+
+@media (min-width: 600px) {
+  .v-dialog {
+    &.v-dialog-sm,
+    &.v-dialog-lg,
+    &.v-dialog-xl {
+      .v-overlay__content {
+        inline-size: 565px !important;
+      }
+    }
+  }
+}
+
+@media (min-width: 960px) {
+  .v-dialog {
+    &.v-dialog-lg,
+    &.v-dialog-xl {
+      .v-overlay__content {
+        inline-size: 865px !important;
+      }
+    }
+  }
+}
+
+@media (min-width: 1264px) {
+  .v-dialog.v-dialog-xl {
+    .v-overlay__content {
+      inline-size: 1165px !important;
+    }
+  }
+}
+
+// 👉 Expansion panel
+.v-expansion-panels.customized-panels {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: vuetify.$border-radius-root;
+
+  .v-expansion-panel-title {
+    background-color: rgb(var(--v-theme-expansion-panel-text-custom-bg));
+    border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+    margin-block-end: -1px;
+  }
+
+  .v-expansion-panel-text__wrapper {
+    padding: 20px;
+  }
+}
+
+// v-tab with pill support
+.v-tabs.v-tabs-pill {
+  .v-tab.v-btn {
+    border-radius: 6px !important;
+    transition: none;
+
+    .v-tab__slider {
+      visibility: hidden;
+    }
+  }
+}
+
+// loop for all colors bg
+@each $color-name in variables.$theme-colors-name {
+  body .v-tabs.v-tabs-pill {
+    .v-slide-group-item--active.v-tab--selected.text-#{$color-name} {
+      background-color: rgb(var(--v-theme-#{$color-name}));
+      color: rgb(var(--v-theme-on-#{$color-name})) !important;
+    }
+  }
+}
+
+// ℹ️ We are make even width of all v-timeline body
+.v-timeline--vertical.v-timeline {
+  .v-timeline-item {
+    .v-timeline-item__body {
+      justify-self: stretch !important;
+    }
+  }
+}
+
+// 👉 Switch
+.v-switch .v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
+  color: #fff !important;
+}

package/dist/templates/vuexy-portal/src/@core/scss/base/_dark.scss

@@ -0,0 +1,16 @@
+@use "@configured-variables" as variables;
+
+// ————————————————————————————————————
+// * ——— Perfect Scrollbar
+// ————————————————————————————————————
+
+body.v-theme--dark {
+  .ps__rail-y,
+  .ps__rail-x {
+    background-color: transparent !important;
+  }
+
+  .ps__thumb-y {
+    background-color: variables.$plugin-ps-thumb-y-dark;
+  }
+}

package/dist/templates/vuexy-portal/src/@core/scss/base/_default-layout-w-horizontal-nav.scss

@@ -0,0 +1,45 @@
+@use "@core/scss/base/placeholders" as *;
+@use "@core/scss/template/placeholders" as *;
+@use "@core/scss/base/mixins";
+
+.layout-wrapper.layout-nav-type-horizontal {
+  .layout-navbar-and-nav-container {
+    @extend %default-layout-horizontal-nav-navbar-and-nav-container;
+  }
+
+  // 👉 Navbar
+  .layout-navbar {
+    @extend %default-layout-horizontal-nav-navbar;
+  }
+
+  // 👉 Layout content container
+  .navbar-content-container {
+    display: flex;
+    align-items: center;
+    block-size: 100%;
+  }
+
+  .layout-horizontal-nav {
+    @extend %default-layout-horizontal-nav-nav;
+
+    .nav-items {
+      @extend %default-layout-horizontal-nav-nav-items-list;
+    }
+  }
+
+  // 👉 App footer
+  .layout-footer {
+    @at-root {
+      .layout-footer-sticky#{&} {
+        background-color: rgb(var(--v-theme-surface));
+
+        @include mixins.elevation(3);
+      }
+    }
+  }
+
+  // TODO: Use Vuetify grid sass variable here
+  .layout-page-content {
+    padding-block: 1.5rem;
+  }
+}

package/dist/templates/vuexy-portal/src/@core/scss/base/_default-layout-w-vertical-nav.scss

@@ -0,0 +1,103 @@
+@use "@configured-variables" as variables;
+@use "@core/scss/base/placeholders" as *;
+@use "@core/scss/template/placeholders" as *;
+@use "misc";
+@use "@core/scss/base/mixins";
+
+$header: ".layout-navbar";
+
+@if variables.$layout-vertical-nav-navbar-is-contained {
+  $header: ".layout-navbar .navbar-content-container";
+}
+
+.layout-wrapper.layout-nav-type-vertical {
+  // SECTION  Layout Navbar
+  // 👉 Elevated navbar
+  @if variables.$vertical-nav-navbar-style == "elevated" {
+    // Add transition
+    #{$header} {
+      transition: padding 0.2s ease, background-color 0.18s ease;
+    }
+
+    // If navbar is contained => Add border radius to header
+    @if variables.$layout-vertical-nav-navbar-is-contained {
+      #{$header} {
+        border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      }
+    }
+
+    // Scrolled styles for sticky navbar
+    @at-root {
+      /* ℹ️ This html selector with not selector is required when:
+        dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and our style broke
+    */
+      html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky,
+      &.window-scrolled.layout-navbar-sticky {
+
+        #{$header} {
+          @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
+          @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
+        }
+
+        .navbar-blur#{$header} {
+          @extend %blurry-bg;
+        }
+      }
+    }
+  }
+
+  // 👉 Floating navbar
+  @else if  variables.$vertical-nav-navbar-style == "floating" {
+    // ℹ️ Regardless of navbar is contained or not => Apply overlay to .layout-navbar
+    .layout-navbar {
+      &.navbar-blur {
+        @extend %default-layout-vertical-nav-floating-navbar-overlay;
+      }
+    }
+
+    &:not(.layout-navbar-sticky) {
+      #{$header} {
+        margin-block-start: variables.$vertical-nav-floating-navbar-top;
+      }
+    }
+
+    #{$header} {
+      @if variables.$layout-vertical-nav-navbar-is-contained {
+        border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      }
+
+      background-color: rgb(var(--v-theme-surface));
+
+      @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
+    }
+
+    .navbar-blur#{$header} {
+      @extend %blurry-bg;
+    }
+  }
+
+  // !SECTION
+
+  // 👉 Layout footer
+  .layout-footer {
+    $ele-layout-footer: &;
+
+    .footer-content-container {
+      border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness 0 0;
+
+      // Sticky footer
+      @at-root {
+        // ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer
+        .layout-footer-sticky#{$ele-layout-footer} {
+          .footer-content-container {
+            background-color: rgb(var(--v-theme-surface));
+            padding-block: 0;
+            padding-inline: 1.2rem;
+
+            @include mixins.elevation(3);
+          }
+        }
+      }
+    }
+  }
+}

package/dist/templates/vuexy-portal/src/@core/scss/base/_default-layout.scss

@@ -0,0 +1,16 @@
+@use "@core/scss/base/placeholders";
+@use "@core/scss/base/variables";
+
+.layout-vertical-nav,
+.layout-horizontal-nav {
+  ol,
+  ul {
+    list-style: none;
+  }
+}
+
+.layout-navbar {
+  @if variables.$navbar-high-emphasis-text {
+    @extend %layout-navbar;
+  }
+}