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

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_field.scss

@@ -0,0 +1,308 @@
+@use "sass:map";
+@use "@configured-variables" as variables;
+@use "@core/scss/template/mixins" as templateMixins;
+
+$v-input-density: (
+  comfortable: (
+    icon-size: 1rem,
+    font-size: 0.9375rem,
+    line-height: 1.5rem,
+  ),
+  default: (
+    icon-size: 1.125rem,
+    font-size: 1.0625rem,
+    line-height: 1.5rem,
+  ),
+  compact: (
+    icon-size: 0.8125rem,
+    font-size: 0.8125rem,
+    line-height: 1.375rem,
+  ),
+);
+
+// 👉 VInput
+.v-input {
+  // 👉 VField
+  .v-field {
+    .v-field__loader {
+      .v-progress-linear {
+        .v-progress-linear__background {
+          background-color: transparent !important;
+        }
+      }
+    }
+
+    &.v-field--variant-solo,
+    &.v-field--variant-filled {
+      --v-field-padding-top: 7px !important;
+
+      color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    }
+
+    // Color for text field
+    .v-field__input {
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    }
+
+    // Make field border width 2px when error
+    &.v-field--error {
+      .v-field__outline {
+        --v-field-border-width: 2px;
+      }
+    }
+
+    // Label
+    &.v-field--variant-outlined {
+      .v-label {
+        &.v-field-label--floating {
+          line-height: 0.9375rem;
+          margin-block: 0;
+          margin-inline: 6px;
+        }
+      }
+    }
+
+    &:not(.v-field--focused):hover .v-field__outline {
+      --v-field-border-opacity: 0.6 !important;
+    }
+
+    // Shadow on focus
+    &.v-field--variant-outlined.v-field--focused:not(.v-field--error, .v-field--success) {
+      .v-field__outline {
+        @each $color-name in variables.$theme-colors-name {
+          &.text-#{$color-name} {
+            @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
+          }
+        }
+
+        &:not([class*="text-"]) {
+          @include templateMixins.custom-elevation(var(--v-theme-primary), "sm");
+        }
+      }
+    }
+  }
+
+  // Give hint messages color based on theme color
+  @each $color-name in variables.$theme-colors-name {
+    &:has( .v-field.v-field--focused .v-field__outline.text-#{$color-name}) {
+      .v-messages {
+        color: rgb(var(--v-theme-#{$color-name}));
+      }
+    }
+  }
+
+  // Loop through each density setting in the map
+  @each $density, $settings in $v-input-density {
+    &.v-input--density-#{$density} {
+      .v-input__append,
+      .v-input__prepend,
+      .v-input__details,
+      .v-field .v-field__append-inner,
+      .v-field .v-field__prepend-inner,
+      .v-field .v-field__clearable {
+        > .v-icon {
+          block-size: map.get($settings, icon-size);
+          color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+          font-size: map.get($settings, icon-size);
+          inline-size: map.get($settings, icon-size);
+          opacity: 1;
+        }
+      }
+
+      .v-field {
+        .v-field__input {
+          font-size: map.get($settings, font-size);
+          line-height: map.get($settings, line-height);
+        }
+      }
+    }
+  }
+}
+
+// 👉 TextField, Select, AutoComplete, ComboBox, Textarea
+// ℹ️ We added .v-application to increase the specificity of the selector
+
+// Styles related to our custom input components
+body {
+  .app-text-field,
+  .app-select,
+  .app-autocomplete,
+  .app-combobox,
+  .app-textarea,
+  .app-picker-field {
+    // making padding 0 for help text
+    .v-text-field .v-input__details {
+      padding-inline-start: 0;
+    }
+
+    // Placeholder
+    .v-input {
+      .v-field {
+        // Placeholder transition
+        input,
+        .v-field__input {
+          &::placeholder {
+            transition: transform 0.2s ease-out;
+          }
+        }
+
+        &.v-field--focused {
+          input,
+          .v-field__input {
+            &::placeholder {
+              transform: translateX(4px) !important;
+
+              [dir="rtl"] & {
+                transform: translateX(-4px) !important;
+              }
+            }
+          }
+        }
+      }
+
+      // padding for different density
+      &.v-input--density-default {
+        .v-field {
+          .v-field__input {
+            --v-field-padding-start: 16px;
+            --v-field-padding-end: 16px;
+          }
+        }
+      }
+
+      &.v-input--density-comfortable {
+        .v-field {
+          .v-field__input {
+            --v-field-padding-start: 14px;
+            --v-field-padding-end: 14px;
+          }
+        }
+      }
+
+      &.v-input--density-compact {
+        .v-field {
+          .v-field__input {
+            --v-field-padding-start: 12px;
+            --v-field-padding-end: 12px;
+          }
+        }
+      }
+    }
+
+    // Disabled state
+    &:has(.v-input.v-input--disabled) {
+      .v-label {
+        color: rgba(var(--v-theme-on-surface), 0.38);
+      }
+
+      .v-input {
+        .v-field.v-field--disabled {
+          background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
+          opacity: 1;
+
+          .v-field__outline {
+            --v-field-border-opacity: 0.24;
+          }
+
+          .v-field__input {
+            color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+          }
+        }
+      }
+    }
+
+    // Apply color to label
+    @each $color-name in variables.$theme-colors-name {
+      .v-label {
+        color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+
+        &:has(+ .v-input .v-field.v-field--focused .v-field__outline.text-#{$color-name}) {
+          color: rgb(var(--v-theme-#{$color-name}));
+        }
+
+        &:has(+ .v-input .v-field.v-field--error) {
+          color: rgb(var(--v-theme-error));
+        }
+      }
+    }
+  }
+
+  @mixin style-selectable-component($component-name) {
+    .app-#{$component-name} {
+      .v-#{$component-name}__selection {
+        line-height: 24px;
+        margin-block: 0 !important;
+      }
+
+      // Vertical alignment of placeholder & text
+      .v-#{$component-name} .v-field .v-field__input > input {
+        align-self: center;
+      }
+
+      // Chips
+
+      .v-#{$component-name}.v-#{$component-name}--chips.v-input--dirty {
+        .v-#{$component-name}__selection {
+          margin: 0;
+        }
+
+        .v-field__input {
+          gap: 3px;
+        }
+
+        &.v-input--density-compact {
+          .v-field__input {
+            padding-inline-start: 0.5rem;
+          }
+        }
+
+        &.v-input--density-comfortable {
+          .v-field__input {
+            padding-inline-start: 0.75rem;
+          }
+        }
+
+        &.v-input--density-default {
+          .v-field__input {
+            padding-inline-start: 1rem;
+          }
+        }
+      }
+    }
+  }
+
+  @include style-selectable-component("autocomplete");
+  @include style-selectable-component("select");
+  @include style-selectable-component("combobox");
+
+  // AutoComplete
+  @at-root {
+    .app-autocomplete__content {
+      .v-list-item--active {
+        .v-autocomplete__mask {
+          background: rgba(92, 82, 192, 60%);
+        }
+      }
+
+      .v-theme--dark {
+        .v-list-item:not(.v-list-item--active) {
+          .v-autocomplete__mask {
+            background: rgba(59, 64, 92, 60%);
+          }
+        }
+      }
+    }
+  }
+}
+
+.app-inner-list {
+  // Hide checkboxes
+  .v-selection-control {
+    display: none;
+  }
+}
+
+// Hide resizer
+::-webkit-resizer {
+  background: transparent;
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_list.scss

@@ -0,0 +1,30 @@
+// 👉 List
+.v-list-item {
+  --v-hover-opacity: 0.06 !important;
+
+  .v-checkbox-btn.v-selection-control--density-compact {
+    margin-inline-end: 0.5rem;
+  }
+
+  .v-list-item__overlay {
+    transition: none;
+  }
+
+  .v-list-item__prepend {
+    .v-icon {
+      font-size: 1.375rem;
+    }
+  }
+
+  &.v-list-item--active {
+    &.v-list-group__header {
+      color: rgb(var(--v-theme-primary));
+    }
+
+    &:not(.v-list-group__header) {
+      .v-list-item-subtitle {
+        color: rgb(var(--v-theme-primary));
+      }
+    }
+  }
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_menu.scss

@@ -0,0 +1,35 @@
+// Style list differently when it's used in a components like select, menu etc
+.v-menu {
+  // Adjust padding of list item inside menu
+  .v-list-item {
+    padding-block: 8px !important;
+    padding-inline: 16px !important;
+  }
+}
+
+// 👉 Menu
+// Menu custom style
+.v-menu.v-overlay {
+  .v-overlay__content {
+    .v-list {
+      .v-list-item {
+        border-radius: 0.375rem;
+        margin-block: 0.125rem;
+        margin-inline: 0.5rem;
+        min-block-size: 2.375rem;
+
+        &:first-child {
+          margin-block-start: 0;
+        }
+
+        &:last-child {
+          margin-block-end: 0;
+        }
+      }
+
+      .v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line {
+        padding-block: 0.5rem;
+      }
+    }
+  }
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_otp-input.scss

@@ -0,0 +1,17 @@
+// otp input
+.v-otp-input {
+  justify-content: unset !important;
+
+  .v-otp-input__content {
+    max-inline-size: 100%;
+
+    .v-field.v-field--focused {
+      .v-field__outline {
+        .v-field__outline__start,
+        .v-field__outline__end {
+          border-color: rgb(var(--v-theme-primary)) !important;
+        }
+      }
+    }
+  }
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_pagination.scss

@@ -0,0 +1,140 @@
+/* stylelint-disable no-descending-specificity */
+@use "@core/scss/template/mixins" as templateMixins;
+@use "@configured-variables" as variables;
+
+// 👉 Pagination
+.v-pagination {
+  // pagination
+  .v-pagination__next,
+  .v-pagination__prev {
+    .v-btn--icon {
+      &.v-btn--size-small {
+        .v-icon {
+          font-size: 1rem;
+        }
+      }
+
+      &.v-btn--size-default {
+        .v-icon {
+          font-size: 1.125rem;
+        }
+      }
+
+      &.v-btn--size-large {
+        .v-icon {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+
+  // common style for all components
+  .v-pagination__next,
+  .v-pagination__prev,
+  .v-pagination__first,
+  .v-pagination__last,
+  .v-pagination__item {
+    .v-btn {
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+      font-size: 0.8125rem;
+      font-weight: 400;
+      line-height: 1;
+
+      --v-activated-opacity: 0.08;
+
+      &:hover {
+        .v-btn__overlay {
+          --v-hover-opacity: 0.16;
+        }
+      }
+
+      &.v-btn--disabled {
+        opacity: 0.45;
+      }
+
+      &.v-btn--size-large {
+        font-size: 0.9375rem;
+      }
+    }
+  }
+
+  // Disable scale animation for button
+  .v-pagination__item {
+    .v-btn {
+      transform: scale(1) !important;
+
+      /* We disabled transition because it looks ugly 🤮 */
+      transition-duration: 0s;
+
+      &:active {
+        transform: scale(1);
+      }
+    }
+  }
+
+  .v-pagination__list {
+    @each $color-name in variables.$theme-colors-name {
+      &:has(.v-pagination__item.v-pagination__item--is-active .v-btn.text-#{$color-name}) {
+        .v-pagination__item {
+          .v-btn {
+            &:hover {
+              color: rgb(var(--v-theme-#{$color-name}));
+
+              .v-btn__overlay {
+                background-color: rgb(var(--v-theme-#{$color-name}));
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .v-pagination__item--is-active {
+      .v-btn {
+        &:not([class*="text-"]) {
+          color: rgb(var(--v-theme-primary));
+
+          &:not(.v-btn--variant-outlined) {
+            .v-btn__underlay {
+              --v-activated-opacity: 0.04;
+            }
+          }
+
+          &.v-btn--variant-outlined {
+            border-color: rgb(var(--v-theme-primary));
+
+            .v-btn__overlay {
+              opacity: 0.16;
+            }
+          }
+        }
+
+        // box-shadow
+        @each $color-name in variables.$theme-colors-name {
+          &:not(.v-btn--disabled) {
+            &.text-#{$color-name} {
+              &,
+              &:hover,
+              &:active,
+              &:focus {
+                @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
+              }
+
+              .v-btn__underlay {
+                opacity: 1 !important;
+              }
+
+              .v-btn__content {
+                color: #fff;
+              }
+
+              &.v-btn--variant-outlined {
+                background-color: rgb(var(--v-theme-#{$color-name}));
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_progress.scss

@@ -0,0 +1,13 @@
+// @use "@core/scss/template/mixins" as templateMixins;
+@use "@configured-variables" as variables;
+
+// 👉 Progress
+// .v-progress-linear {
+// .v-progress-linear__determinate {
+//   @each $color-name in variables.$theme-colors-name {
+//     &.bg-#{$color-name} {
+//       // @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
+//     }
+//   }
+// }
+// }

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_radio.scss

@@ -0,0 +1,46 @@
+@use "@core/scss/base/mixins";
+@use "@configured-variables" as variables;
+
+// 👉 Radio
+.v-radio,
+.v-radio-btn {
+  // 👉 radio icon opacity
+  .v-selection-control__input > .v-icon {
+    opacity: 1;
+  }
+
+  &.v-selection-control--disabled {
+    --v-disabled-opacity: 0.45;
+  }
+
+  &.v-selection-control--dirty {
+    @each $color-name in variables.$theme-colors-name {
+      .v-selection-control__wrapper.text-#{$color-name} {
+        .v-selection-control__input {
+          /* ℹ️ Using filter: drop-shadow() instead of box-shadow because box-shadow creates white background for SVG; */
+          .v-icon {
+            filter: drop-shadow(0 2px 6px rgba(var(--v-theme-#{$color-name}), 0.3));
+          }
+        }
+      }
+    }
+  }
+
+  &.v-selection-control {
+    .v-selection-control__input {
+      svg {
+        font-size: 1.5rem;
+      }
+    }
+
+    .v-label {
+      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+    }
+  }
+}
+
+// 👉 Radio, Checkbox
+
+.v-input.v-radio-group > .v-input__control > .v-label {
+  margin-inline-start: 0;
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_rating.scss

@@ -0,0 +1,20 @@
+// 👉 Rating
+.v-rating {
+  .v-rating__wrapper {
+    .v-btn .v-icon {
+      --v-icon-size-multiplier: 1;
+    }
+
+    .v-btn--density-default {
+      --v-btn-height: 26px;
+    }
+
+    .v-btn--density-compact {
+      --v-btn-height: 30px;
+    }
+
+    .v-btn--density-comfortable {
+      --v-btn-height: 32px;
+    }
+  }
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_slider.scss

@@ -0,0 +1,27 @@
+// 👉 Slider
+.v-slider {
+  .v-slider-track__background--opacity {
+    opacity: 0.16;
+  }
+}
+
+.v-slider-thumb {
+  .v-slider-thumb__surface::after {
+    border-radius: 50%;
+    background-color: #fff;
+    block-size: calc(var(--v-slider-thumb-size) - 10px);
+    inline-size: calc(var(--v-slider-thumb-size) - 10px);
+  }
+
+  .v-slider-thumb__label {
+    background-color: rgb(var(--v-tooltip-background));
+    color: rgb(var(--v-theme-surface));
+    font-weight: 500;
+    letter-spacing: 0.15px;
+    line-height: 1.25rem;
+
+    &::before {
+      content: none;
+    }
+  }
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_snackbar.scss

@@ -0,0 +1,10 @@
+// 👉 snackbar
+.v-snackbar {
+  .v-snackbar__actions {
+    .v-btn {
+      font-size: 13px;
+      line-height: 18px;
+      text-transform: capitalize;
+    }
+  }
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_switch.scss

@@ -0,0 +1,58 @@
+@use "@configured-variables" as variables;
+@use "@core/scss/template/mixins" as templateMixins;
+
+// 👉 switch
+.v-switch {
+  &.v-switch--inset {
+    .v-selection-control {
+      .v-switch__track {
+        transition: all 0.1s;
+      }
+
+      &.v-selection-control--dirty {
+        @each $color-name in variables.$theme-colors-name {
+          .v-switch__track.bg-#{$color-name} {
+            @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
+          }
+        }
+      }
+
+      &:not(.v-selection-control--dirty) {
+        .v-switch__track {
+          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 16%) inset;
+        }
+      }
+    }
+
+    .v-selection-control__input {
+      transform: translateX(-5px);
+
+      --v-selection-control-size: 0.875rem;
+
+      .v-switch__thumb {
+        box-shadow: 0 1px 6px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity));
+        transform: scale(1);
+      }
+    }
+
+    .v-selection-control--dirty {
+      .v-selection-control__input {
+        transform: translateX(6px);
+      }
+    }
+  }
+
+  .v-label {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    line-height: 1.375rem !important;
+  }
+}
+
+.v-switch.v-input,
+.v-checkbox-btn,
+.v-radio-btn,
+.v-radio {
+  --v-input-control-height: auto;
+
+  flex: unset;
+}