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

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

@@ -0,0 +1 @@
+@use "bordered";

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

@@ -0,0 +1,9 @@
+.layout-wrapper.layout-nav-type-horizontal {
+  .layout-navbar-and-nav-container {
+    .app-logo {
+      .app-title {
+        font-size: 22px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+@use "@core/scss/base/mixins";
+
+.layout-wrapper.layout-nav-type-vertical {
+  // 👉 Layout footer
+  .layout-footer {
+    $ele-layout-footer: &;
+
+    .footer-content-container {
+      // 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 {
+            @include mixins.elevation(6);
+          }
+        }
+      }
+    }
+  }
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/_horizontal-nav.scss

@@ -0,0 +1,40 @@
+@use "@core/scss/template/placeholders" as *;
+
+.layout-horizontal-nav {
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+
+  // SECTION Nav Group
+  .nav-group,
+  .nav-link {
+    .popper-content {
+      .nav-link.sub-item a,
+      .nav-group-label {
+        @extend %nav-group-label-and-nav-link-style;
+      }
+
+      .nav-group.active {
+        > .popper-triggerer .nav-group-label {
+          font-weight: 500;
+        }
+      }
+
+      .nav-group.sub-item .sub-item {
+        .nav-group-label .nav-item-icon {
+          color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+        }
+
+        a:not(.router-link-exact-active) .nav-item-icon {
+          color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+        }
+      }
+
+      .nav-link.sub-item {
+        .router-link-active.router-link-exact-active {
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  // !SECTION
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/_mixins.scss

@@ -0,0 +1,6 @@
+@use "sass:map";
+@use "@configured-variables" as variables;
+
+@mixin custom-elevation($color, $size) {
+  box-shadow: (map.get(variables.$shadow-params, $size) rgba($color, map.get(variables.$shadow-opacity, $size)));
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/_utilities.scss

@@ -0,0 +1,49 @@
+.v-timeline-item {
+  .app-timeline-title {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 1.3125rem;
+  }
+
+  .app-timeline-meta {
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+    font-size: 11px;
+    line-height: 0.875rem;
+  }
+
+  .app-timeline-text {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    font-size: 13px;
+    line-height: 1.25rem;
+  }
+}
+
+// ℹ️ Temporary solution as v-spacer style is not getting applied in build version. will remove this after release.
+// VSpacer
+.v-spacer {
+  flex-grow: 1;
+}
+
+// app-logo & app-logo-title
+.app-logo {
+  display: flex;
+  align-items: center;
+  column-gap: 0.75rem;
+
+  .app-logo-title {
+    font-size: 1.375rem;
+    font-weight: 700;
+    letter-spacing: 0.25px;
+    line-height: 1.5rem;
+    text-transform: capitalize;
+  }
+}
+
+.text-white-variant {
+  color: rgba(255, 255, 255, 78%);
+}
+
+.bg-custom-background {
+  background-color: rgb(var(--v-table-header-color));
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/_variables.scss

@@ -0,0 +1,102 @@
+@forward "@core/scss/base/variables" with (
+  $default-layout-with-vertical-nav-navbar-footer-roundness: 6px !default,
+
+  $vertical-nav-navbar-style: "floating" !default, // options: elevated, floating
+
+  // 👉 Vertical nav
+  $vertical-nav-background-color-rgb: var(--v-theme-surface) !default,
+  // ℹ️ This is used to keep consistency between nav items and nav header left & right margin
+  // This is used by nav items & nav header
+  $vertical-nav-horizontal-spacing: 0.75rem !default,
+
+  // Section title margin top (when its not first child)
+  $vertical-nav-section-title-mt: 1rem !default,
+  $vertical-nav-navbar-elevation: 4 !default,
+  $vertical-nav-horizontal-padding: 0.75rem !default,
+  $layout-vertical-nav-collapsed-width: 70px !default,
+
+  // Move logo when vertical nav is mini (collapsed but not hovered)
+  $vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -1px !default,
+
+  // Section title margin bottom
+  $vertical-nav-section-title-mb: 0.375rem !default,
+
+  // Vertical nav header padding
+  $vertical-nav-header-padding: 1.25rem 0.5rem !default,
+
+  // Vertical nav icons
+  $vertical-nav-items-icon-size: 1.375rem !default,
+  $vertical-nav-items-nested-icon-size: 0.75rem !default,
+
+  //  👉Footer
+  $layout-vertical-nav-footer-height: 54px !default,
+
+  // Gap between top level horizontal nav items
+  $horizontal-nav-top-level-items-gap: 6px !default,
+
+  $horizontal-nav-items-icon-margin-inline-end: 0.5rem !default,
+
+  $horizontal-nav-popper-content-top: 0.375rem !default,
+
+  $horizontal-nav-group-arrow-icon-size: 1.25rem !default,
+  $horizontal-nav-third-level-icon-size: 0.75rem !default,
+  /*
+    ❗ Heads up
+    ==================
+    Here we assume we will always use shorthand property which will apply same padding on four side
+    This is because this have been used as value of top property by `.popper-content`
+  */
+  $horizontal-nav-padding: 0.5rem !default,
+
+  // 👉 Navbar
+  $layout-vertical-nav-navbar-height: 54px !default,
+  $layout-horizontal-nav-navbar-height: 54px !default,
+
+  // Font sizes
+  $font-sizes: (
+    "xs": 0.6875rem,
+    "sm": 0.8125rem,
+    "base": 0.9375rem,
+    "lg": 1.125rem,
+    "xl": 1.5rem,
+    "2xl": 1.75rem,
+    "3xl": 2rem,
+    "4xl": 2.375rem,
+    "5xl": 3rem,
+    "6xl": 3.5rem,
+    "7xl": 4rem,
+    "8xl": 4.5rem,
+    "9xl": 5.25rem,
+  ) !default,
+
+  // Line heights
+  $font-line-height: (
+    "xs": 0.9375rem,
+    "sm": 1.25rem,
+    "base": 1.375rem,
+    "lg": 1.75rem,
+    "xl": 2.375rem,
+    "2xl": 2.625rem,
+    "3xl": 2.75rem,
+    "4xl": 3.25rem,
+    "5xl": 1,
+    "6xl": 1,
+    "7xl": 1,
+    "8xl": 1,
+    "9xl": 1
+  ) !default,
+);
+
+/* Custom shadow opacity */
+$shadow-opacity: (
+  "sm": 0.3,
+  "md": 0.4,
+  "lg": 0.5,
+) !default;
+
+/* Custom shadow params */
+$shadow-params: (
+  "sm": 0 2px 6px 0,
+  "md": 0 4px 16px 0,
+  "lg": 0 6px 20px 0,
+) !default;

package/dist/templates/vuexy-portal/src/@core/scss/template/_vertical-nav.scss

@@ -0,0 +1,47 @@
+@use "@configured-variables" as variables;
+@use "@core/scss/base/mixins";
+@use "@layouts/styles/mixins" as layoutsMixins;
+
+.layout-nav-type-vertical {
+  // 👉 Layout Vertical nav
+  .layout-vertical-nav {
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+
+    @include mixins.elevation(4);
+
+    .nav-header {
+      padding-inline-end: 0.125rem;
+
+      .app-logo {
+        .app-title {
+          font-size: 22px;
+        }
+      }
+    }
+
+    .nav-items {
+      padding-block: 0.25rem;
+    }
+
+    // 👉 Nav group & Link
+    .nav-link,
+    .nav-group {
+      /* shadow cut issue fix */
+      margin-block-end: -0.5rem;
+      padding-block-end: 0.5rem;
+
+      a {
+        outline: none;
+      }
+    }
+
+    .nav-section-title .placeholder-icon {
+      margin-inline-start: 0.0625rem;
+      transform: scaleX(1.6);
+
+      @include layoutsMixins.rtl {
+        margin-inline-start: 0.125rem;
+      }
+    }
+  }
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/index.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+@use "@core/scss/base";
+
+// Layout
+@use "vertical-nav";
+@use "horizontal-nav";
+@use "default-layout-w-vertical-nav";
+@use "default-layout-w-horizontal-nav";
+
+// Skins
+@use "skins";
+
+// Utilities
+@use "utilities";
+
+// Mixins
+@use "mixins";

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/apex-chart.scss

@@ -0,0 +1,108 @@
+@use "@styles/variables/_vuetify.scss" as vuetify;
+@use "@layouts/styles/mixins" as layoutsMixins;
+@use "@core/scss/base/mixins";
+
+body .apexcharts-canvas {
+  &line[stroke="transparent"] {
+    display: "none";
+  }
+
+  .apexcharts-tooltip {
+    @include mixins.elevation(3);
+
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-surface));
+
+    .apexcharts-tooltip-title {
+      border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+      background: rgb(var(--v-theme-surface));
+      font-weight: 500;
+      padding-inline: 10px;
+    }
+
+    &.apexcharts-theme-light {
+      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+    }
+
+    &.apexcharts-theme-dark {
+      color: white;
+    }
+
+    .apexcharts-tooltip-series-group:first-of-type {
+      padding-block-end: 0;
+    }
+  }
+
+  .apexcharts-xaxistooltip {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-grey-50));
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+
+    &::after {
+      border-block-end-color: rgb(var(--v-theme-grey-50));
+    }
+
+    &::before {
+      border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+  }
+
+  .apexcharts-yaxistooltip {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-grey-50));
+
+    &::after {
+      border-inline-start-color: rgb(var(--v-theme-grey-50));
+    }
+
+    &::before {
+      border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+  }
+
+  .apexcharts-xaxistooltip-text,
+  .apexcharts-yaxistooltip-text {
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+  }
+
+  .apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-yaxis-label {
+    @include layoutsMixins.rtl {
+      text-anchor: start;
+    }
+  }
+
+  .apexcharts-text,
+  .apexcharts-tooltip-text,
+  .apexcharts-datalabel-label,
+  .apexcharts-datalabel,
+  .apexcharts-xaxistooltip-text,
+  .apexcharts-yaxistooltip-text,
+  .apexcharts-legend-text {
+    font-family: vuetify.$body-font-family !important;
+  }
+
+  .apexcharts-pie-label {
+    fill: white;
+    filter: none;
+  }
+
+  .apexcharts-marker {
+    box-shadow: none;
+  }
+
+  .apexcharts-tooltip-marker {
+    margin-inline-end: 0.625rem;
+
+    @include layoutsMixins.rtl {
+      margin-inline: 0 0.625rem !important;
+    }
+  }
+
+  .apexcharts-legend-marker {
+    margin-inline-end: 0.3875rem !important;
+
+    @include layoutsMixins.rtl {
+      margin-inline-end: 0.75rem !important;
+    }
+  }
+}