@winchsa/ui 0.1.33 → 0.1.34

package/dist/styles/core/base/_utilities.scss

@@ -0,0 +1,418 @@
+@use '../../assets/scss/variables/template' as variables;
+@use '../../layouts/mixins' as layoutsMixins;
+
+//  Demo spacers
+// TODO: Use vuetify SCSS variable here
+$card-spacer-content: 16px;
+
+.demo-space-x {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-block-start: -$card-spacer-content;
+
+  & > * {
+    margin-block-start: $card-spacer-content;
+    margin-inline-end: $card-spacer-content;
+  }
+}
+
+.demo-space-y {
+  & > * {
+    margin-block-end: $card-spacer-content;
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+}
+
+//  Card match height
+.match-height.v-row {
+  .v-card {
+    block-size: 100%;
+  }
+}
+
+//  Whitespace
+.whitespace-no-wrap {
+  white-space: nowrap;
+}
+
+//  Colors
+
+/*
+  ℹ️ Vuetify is applying `.text-white` class to badge icon but don't provide its styles
+  Moreover, we also use this class in some places
+
+  ℹ️ In vuetify 2 with `$color-pack: false` SCSS var config this class was getting generated but this is not the case in v3
+
+  ℹ️ We also need !important to get correct color in badge icon
+*/
+.text-white {
+  color: #fff !important;
+}
+
+.bg-var-theme-background {
+  background-color: rgba(var(--v-theme-on-background), 0.08) !important;
+}
+
+// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
+@each $color-name in variables.$theme-colors-name {
+  .bg-light-#{$color-name} {
+    background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
+  }
+}
+
+//  clamp text
+.clamp-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+.leading-normal {
+  line-height: normal !important;
+}
+
+//  for rtl only
+.flip-in-rtl {
+  @include layoutsMixins.rtl {
+    transform: scaleX(-1);
+  }
+}
+
+//  Carousel
+.carousel-delimiter-top-end {
+  .v-carousel__controls {
+    justify-content: end;
+    block-size: 40px;
+    inset-block-start: 0;
+    padding-inline: 1rem;
+
+    .v-btn--icon.v-btn--density-default {
+      block-size: calc(var(--v-btn-height) + -10px);
+      color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+      inline-size: calc(var(--v-btn-height) + -8px);
+
+      &.v-btn--active {
+        color: #fff;
+      }
+
+      .v-btn__overlay {
+        opacity: 0;
+      }
+
+      .v-ripple__container {
+        display: none;
+      }
+
+      .v-btn__content {
+        .v-icon {
+          block-size: 8px !important;
+          inline-size: 8px !important;
+        }
+      }
+    }
+  }
+
+  @each $color-name in variables.$theme-colors-name {
+    &.dots-active-#{$color-name} {
+      .v-carousel__controls {
+        .v-btn--active {
+          color: rgb(var(--v-theme-#{$color-name})) !important;
+        }
+      }
+    }
+  }
+}
+
+//  Pagination small-select dropdown for table
+// TODO: remove this class after vuetify datatable implememtation
+
+.per-page-select {
+  margin-block: auto;
+
+  .v-field__input {
+    align-items: center;
+    padding: 2px;
+    font-size: 14px;
+  }
+
+  .v-field__append-inner {
+    align-items: center;
+    padding: 0;
+    margin-inline-start: -2.5rem;
+
+    .v-icon {
+      margin-inline-start: 0 !important;
+    }
+  }
+}
+
+.v-timeline-item {
+  .app-timeline-title {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.3125rem;
+  }
+
+  .app-timeline-meta {
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+    font-size: 12px;
+    line-height: 0.875rem;
+  }
+
+  .app-timeline-text {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    font-size: 14px;
+    line-height: 1.25rem;
+  }
+}
+
+@for $i from 1 through 1100 {
+  .app-z-#{$i} {
+    z-index: $i * 1;
+  }
+}
+
+@for $i from 1 through 100 {
+  .app-gap-#{$i} {
+    gap: $i * 0.25rem;
+  }
+}
+
+.app-font-weight-semibold {
+  font-weight: 600 !important;
+}
+
+.app-font-size-12 {
+  font-size: 12px !important;
+}
+
+.app-font-size-13 {
+  font-size: 13px;
+}
+
+.app-font-size-15 {
+  font-size: 15px;
+}
+
+.app-font-size-16 {
+  font-size: 15px;
+}
+
+.app-font-size-18 {
+  font-size: 18px;
+}
+
+.app-font-size-22 {
+  font-size: 22px;
+}
+
+.app-font-size-24 {
+  font-size: 24px;
+}
+
+@for $i from 1 through 400 {
+  .app-w-#{$i}px {
+    width: $i * 1px;
+  }
+}
+
+@for $i from 1 through 400 {
+  .app-min-w-#{$i}px {
+    min-width: $i * 1px;
+  }
+}
+
+@for $i from 1 through 200 {
+  .app-max-w-#{$i}px {
+    width: $i * 1px;
+  }
+  .\!app-max-w-#{$i}px {
+    width: $i * 1px !important;
+  }
+}
+
+@for $i from 1 through 100 {
+  .app-w-#{$i}rem {
+    width: $i * 0.25rem;
+  }
+}
+
+@for $i from 1 through 300 {
+  .app-h-#{$i}px {
+    height: $i * 1px;
+  }
+}
+
+@for $i from 1 through 300 {
+  .app-min-h-#{$i}px {
+    min-height: $i * 1px;
+  }
+}
+
+.app-min-h-250px {
+  min-height: 250px;
+}
+
+@for $i from 1 through 100 {
+  .app-h-#{$i}vh {
+    height: $i * 1vh;
+  }
+}
+
+@for $i from -100 through 100 {
+  .app-top-#{$i}px {
+    top: $i * 1px;
+  }
+}
+
+@for $i from -100 through 100 {
+  .app-left-#{$i}px {
+    left: $i * 1px;
+  }
+}
+
+@for $i from -100 through 100 {
+  .app-right-#{$i}px {
+    right: $i * 1px;
+  }
+}
+
+@for $i from -100 through 100 {
+  .app-bottom-#{$i}px {
+    bottom: $i * 1px;
+  }
+}
+
+.app-rounded-6 {
+  border-radius: 6px;
+}
+
+.slide-in-right {
+	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+  animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+@-webkit-keyframes slide-in-right {
+  0% {
+    -webkit-transform: translateX(50px);
+            transform: translateX(50px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-right {
+  0% {
+    -webkit-transform: translateX(50px);
+            transform: translateX(50px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.slide-out-right {
+	-webkit-animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+	        animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+}
+
+@-webkit-keyframes slide-out-right {
+  0% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateX(50px);
+            transform: translateX(50px);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-out-right {
+  0% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateX(50px);
+            transform: translateX(50px);
+    opacity: 0;
+  }
+}
+
+.app-w-fit {
+  width: fit-content;
+}
+
+.app-h-fit {
+  height: fit-content;
+}
+
+.app-cursor-pointer {
+  cursor: pointer;
+}
+
+.app-pointer-events-all {
+  pointer-events: all;
+}
+.app-min-h-screen {
+  min-height: 100vh;
+}
+
+.app-aspect-ratio-1 {
+  aspect-ratio: 1;
+}
+
+.app-flex-1 {
+  flex: 1 1 0%;
+}
+
+@for $i from 0 through 100 {
+  .app-opacity-#{$i} {
+    opacity: $i * 1%;
+  }
+}
+
+.app-border-silver {
+  border: 1px solid rgba(var(--v-theme-silver));
+}
+
+.app-inset-inline-end-9px {
+  inset-inline-end: 9px;
+}
+
+.app-h-fit {
+  height: fit-content !important;
+}
+
+.app-border-yellow {
+  border: 1px solid rgb(var(--v-theme-yellow));
+}
+
+.app-border-dark-gray {
+  border: 1px solid rgb(var(--v-theme-dark-gray));
+}
+
+.app-border-primary {
+  border-color: rgb(var(--v-theme-primary)) !important;
+}
+
+.app-dir-ltr {
+  direction: ltr !important;
+}

package/dist/styles/core/base/_utils.scss

@@ -0,0 +1,100 @@
+@use 'sass:map';
+@use 'sass:list';
+@use '../../assets/scss/variables/template' as variables;
+
+// Thanks: https://css-tricks.com/snippets/sass/deep-getset-maps/
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map.get($map, $key);
+  }
+
+  @return $map;
+}
+
+@function map-deep-set($map, $keys, $value) {
+  $maps: ($map);
+  $result: null;
+
+  // If the last key is a map already
+  // Warn the user we will be overriding it with $value
+  @if type-of(nth($keys, -1)) == 'map' {
+    @warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
+  }
+
+  // If $keys is a single key
+  // Just merge and return
+  @if length($keys) == 1 {
+    @return map-merge(
+      $map,
+      (
+        $keys: $value,
+      )
+    );
+  }
+
+  // Loop from the first to the second to last key from $keys
+  // Store the associated map to this key in the $maps list
+  // If the key doesn't exist, throw an error
+  @for $i from 1 through length($keys) - 1 {
+    $current-key: list.nth($keys, $i);
+    $current-map: list.nth($maps, -1);
+    $current-get: map.get($current-map, $current-key);
+
+    @if not $current-get {
+      @error "Key `#{$key}` doesn't exist at current level in map.";
+    }
+
+    $maps: list.append($maps, $current-get);
+  }
+
+  // Loop from the last map to the first one
+  // Merge it with the previous one
+  @for $i from length($maps) through 1 {
+    $current-map: list.nth($maps, $i);
+    $current-key: list.nth($keys, $i);
+    $current-val: if($i == list.length($maps), $value, $result);
+    $result: map.map-merge(
+      $current-map,
+      (
+        $current-key: $current-val,
+      )
+    );
+  }
+
+  // Return result
+  @return $result;
+}
+
+// font size utility classes
+@each $name, $size in variables.$font-sizes {
+  .text-#{$name} {
+    font-size: $size;
+    line-height: map.get(variables.$font-line-height, $name);
+  }
+}
+
+// truncate utility class
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// gap utility class
+@each $name, $size in variables.$gap {
+  .gap-#{$name} {
+    gap: $size;
+  }
+
+  .gap-x-#{$name} {
+    column-gap: $size;
+  }
+
+  .gap-y-#{$name} {
+    row-gap: $size;
+  }
+}
+
+.list-none {
+  list-style-type: none;
+}

package/dist/styles/core/base/_variables.scss

@@ -0,0 +1,190 @@
+@use 'vuetify/lib/styles/tools/functions' as *;
+
+/*
+  TODO: Add docs on when to use placeholder vs when to use SASS variable
+
+  Placeholder
+    - When we want to keep customization to our self between templates use it
+
+  Variables
+    - When we want to allow customization from both user and our side
+    - You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
+*/
+
+@forward '../../layouts/variables' with (
+  // Adjust z-index so vertical nav & overlay stays on top of v-layout in v-main. E.g. Email app
+  $layout-vertical-nav-z-index: 1004,
+  $layout-overlay-z-index: 1003
+);
+@use '../../layouts/variables' as *;
+
+//  Default layout
+
+$navbar-high-emphasis-text: true !default;
+
+// @forward "layouts/variables" with (
+//   $layout-vertical-nav-width: 350px !default,
+// );
+
+$theme-colors-name: ('primary', 'secondary', 'error', 'info', 'success', 'warning') !default;
+
+//  Default layout with vertical nav
+
+$default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
+
+//  Vertical nav
+$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
+$vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !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: 1rem !default;
+$vertical-nav-horizontal-padding: 0.75rem !default;
+
+// Vertical nav header height. Mostly we will align it with navbar height;
+$vertical-nav-header-height: $layout-vertical-nav-navbar-height !default;
+$vertical-nav-navbar-elevation: 3 !default;
+$vertical-nav-navbar-style: 'elevated' !default; // options: elevated, floating
+$vertical-nav-floating-navbar-top: 1rem !default;
+
+// Vertical nav header padding
+$vertical-nav-header-padding: 1rem $vertical-nav-horizontal-padding !default;
+$vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
+
+// Move logo when vertical nav is mini (collapsed but not hovered)
+$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px !default;
+
+// Space between logo and title
+$vertical-nav-header-logo-title-spacing: 0.9rem !default;
+
+// Section title margin top (when its not first child)
+$vertical-nav-section-title-mt: 1.5rem !default;
+
+// Section title margin bottom
+$vertical-nav-section-title-mb: 0.5rem !default;
+
+// Vertical nav icons
+$vertical-nav-items-icon-size: 1.5rem !default;
+$vertical-nav-items-nested-icon-size: 0.9rem !default;
+$vertical-nav-items-icon-margin-inline-end: 0.5rem !default;
+
+// Transition duration for nav group arrow
+$vertical-nav-nav-group-arrow-transition-duration: 0.15s !default;
+
+// Timing function for nav group arrow
+$vertical-nav-nav-group-arrow-transition-timing-function: ease-in-out !default;
+
+//  Horizontal nav
+
+/*
+    ❗ 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.6875rem !default;
+
+// Gap between top level horizontal nav items
+$horizontal-nav-top-level-items-gap: 4px !default;
+
+// Horizontal nav icons
+$horizontal-nav-items-icon-size: 1.5rem !default;
+$horizontal-nav-third-level-icon-size: 0.9rem !default;
+$horizontal-nav-items-icon-margin-inline-end: 0.625rem !default;
+
+// ℹ️ We used SCSS variable because we want to allow users to update max height of popper content
+// 120px is combined height of navbar & horizontal nav
+$horizontal-nav-popper-content-max-height: calc((var(--vh, 1vh) * 100) - 120px - 4rem) !default;
+
+// ℹ️ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values.
+$horizontal-nav-popper-content-top: calc($horizontal-nav-padding + 0.375rem) !default;
+
+//  Plugins
+
+$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;
+
+//  Vuetify
+
+// Used in src/core/base/libs/vuetify/_overrides.scss
+$vuetify-reduce-default-compact-button-icon-size: true !default;
+
+//  Custom variables
+// for utility classes
+$font-sizes: () !default;
+$font-sizes: map-deep-merge(
+  (
+    'xs': 0.75rem,
+    'sm': 0.875rem,
+    'base': 1rem,
+    'lg': 1.125rem,
+    'xl': 1.25rem,
+    '2xl': 1.5rem,
+    '3xl': 1.875rem,
+    '4xl': 2.25rem,
+    '5xl': 3rem,
+    '6xl': 3.75rem,
+    '7xl': 4.5rem,
+    '8xl': 6rem,
+    '9xl': 8rem,
+  ),
+  $font-sizes
+);
+
+// line height
+$font-line-height: () !default;
+$font-line-height: map-deep-merge(
+  (
+    'xs': 1rem,
+    'sm': 1.25rem,
+    'base': 1.5rem,
+    'lg': 1.75rem,
+    'xl': 1.75rem,
+    '2xl': 2rem,
+    '3xl': 2.25rem,
+    '4xl': 2.5rem,
+    '5xl': 1,
+    '6xl': 1,
+    '7xl': 1,
+    '8xl': 1,
+    '9xl': 1,
+  ),
+  $font-line-height
+);
+
+// gap utility class
+$gap: () !default;
+$gap: map-deep-merge(
+  (
+    '0': 0,
+    '1': 0.25rem,
+    '2': 0.5rem,
+    '3': 0.75rem,
+    '4': 1rem,
+    '5': 1.25rem,
+    '6': 1.5rem,
+    '7': 1.75rem,
+    '8': 2rem,
+    '9': 2.25rem,
+    '10': 2.5rem,
+    '11': 2.75rem,
+    '12': 3rem,
+    '14': 3.5rem,
+    '16': 4rem,
+    '20': 5rem,
+    '24': 6rem,
+    '28': 7rem,
+    '32': 8rem,
+    '36': 9rem,
+    '40': 10rem,
+    '44': 11rem,
+    '48': 12rem,
+    '52': 13rem,
+    '56': 14rem,
+    '60': 15rem,
+    '64': 16rem,
+    '72': 18rem,
+    '80': 20rem,
+    '96': 24rem,
+  ),
+  $gap
+);