@winchsa/ui 0.1.30 → 0.1.33

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

@@ -1,418 +0,0 @@
-@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

@@ -1,100 +0,0 @@
-@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

@@ -1,190 +0,0 @@
-@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
-);