@fastkit/vui 0.12.8 → 0.12.9

package/src/components/VCheckbox/VCheckbox.scss

@@ -1,56 +1,58 @@
 @use 'sass:math';
 
-.v-checkbox {
-  --my-border-color: var(--color);
-  --my-faux-bg-color: transparent;
+@layer vui {
+  .v-checkbox {
+    --my-border-color: var(--color);
+    --my-faux-bg-color: transparent;
 
-  &--selected,
-  &--indeterminate {
-    --my-border-color: transparent;
-    --my-faux-bg-color: var(--color);
-  }
+    &--selected,
+    &--indeterminate {
+      --my-border-color: transparent;
+      --my-faux-bg-color: var(--color);
+    }
 
-  &__faux {
-    display: block;
-    width: 100%;
-    height: 100%;
-    clip-path: polygon(
-      0 0,
-      0 100%,
-      100% 100%,
-      100% 0,
-      88.25% 28.25%,
-      38% 78.125%,
-      12% 50%,
-      20% 42.1875%,
-      38% 63%,
-      82% 20%,
-      88.25% 28.25%,
-      100% 0
-    );
-    background: var(--my-faux-bg-color);
-    border: solid 2px var(--my-border-color);
-    border-radius: var(--control-field-radius);
-    transition: border-color 0.2s, background-color 0.2s;
-  }
+    &__faux {
+      display: block;
+      width: 100%;
+      height: 100%;
+      clip-path: polygon(
+        0 0,
+        0 100%,
+        100% 100%,
+        100% 0,
+        88.25% 28.25%,
+        38% 78.125%,
+        12% 50%,
+        20% 42.1875%,
+        38% 63%,
+        82% 20%,
+        88.25% 28.25%,
+        100% 0
+      );
+      background: var(--my-faux-bg-color);
+      border: solid 2px var(--my-border-color);
+      border-radius: var(--control-field-radius);
+      transition: border-color 0.2s, background-color 0.2s;
+    }
 
-  &--indeterminate &__faux {
-    $x1: math.div(12, 54) * 100%;
-    $x2: 100% - $x1;
-    $y1: math.div(24, 54) * 100%;
-    $y2: 100% - $y1;
+    &--indeterminate &__faux {
+      $x1: math.div(12, 54) * 100%;
+      $x2: 100% - $x1;
+      $y1: math.div(24, 54) * 100%;
+      $y2: 100% - $y1;
 
-    clip-path: polygon(
-      0 0,
-      0 100%,
-      100% 100%,
-      100% 0,
-      #{$x2} #{$y1},
-      #{$x2} #{$y2},
-      #{$x1} #{$y2},
-      #{$x1} #{$y1},
-      #{$x2} #{$y1},
-      100% 0
-    );
+      clip-path: polygon(
+        0 0,
+        0 100%,
+        100% 100%,
+        100% 0,
+        #{$x2} #{$y1},
+        #{$x2} #{$y2},
+        #{$x1} #{$y2},
+        #{$x1} #{$y1},
+        #{$x2} #{$y1},
+        100% 0
+      );
+    }
   }
 }

package/src/components/VCheckbox/VCheckbox.tsx

@@ -3,8 +3,8 @@ import { defineComponent, computed } from 'vue';
 import {
   createFormSelectorItemSettings,
   useFormSelectorItemControl,
-  renderSlotOrEmpty,
-} from '@fastkit/vue-kit';
+} from '@fastkit/vue-form-control';
+import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { createControlProps, useControl } from '../../composables';
 import {
   VUI_CHECKBOX_GROUP_SYMBOL,

package/src/components/VChip/VChip.scss

@@ -1,78 +1,80 @@
 @use '../../styles/core.scss';
 
-.v-chip {
-  @include core.button-reset();
+@layer vui {
+  .v-chip {
+    @include core.button-reset();
 
-  $chip-sizes: xs, sm, md, lg, xl;
+    $chip-sizes: xs, sm, md, lg, xl;
 
-  --chip-radius: calc(var(--chip-height) / 2);
+    --chip-radius: calc(var(--chip-height) / 2);
 
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--chip-height);
-  padding: 0 var(--chip-padding);
-  overflow: hidden;
-  font-size: var(--chip-font-size);
-  font-weight: var(--chip-font-weight);
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: bottom;
-  cursor: default;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: var(--chip-radius);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--chip-height);
+    padding: 0 var(--chip-padding);
+    overflow: hidden;
+    font-size: var(--chip-font-size);
+    font-weight: var(--chip-font-weight);
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: bottom;
+    cursor: default;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: var(--chip-radius);
 
-  --shadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
-  --focusShadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
+    --shadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
+    --focusShadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
 
-  &--clickable {
-    cursor: pointer;
-  }
+    &--clickable {
+      cursor: pointer;
+    }
 
-  @each $size in $chip-sizes {
-    &--#{$size} {
-      --chip-height: var(--chip-height-#{$size});
-      --chip-font-size: var(--chip-font-size-#{$size});
+    @each $size in $chip-sizes {
+      &--#{$size} {
+        --chip-height: var(--chip-height-#{$size});
+        --chip-font-size: var(--chip-font-size-#{$size});
+      }
     }
-  }
 
-  &--label {
-    --chip-radius: 4px;
-  }
+    &--label {
+      --chip-radius: 4px;
+    }
 
-  // &[disabled] {
-  //   pointer-events: none;
+    // &[disabled] {
+    //   pointer-events: none;
 
-  //   &::before {
-  //     content: none;
-  //   }
-  // }
-  // // noop
+    //   &::before {
+    //     content: none;
+    //   }
+    // }
+    // // noop
 
-  // img,
-  // &__image {
-  //   display: inline-flex;
-  //   width: inherit !important;
-  //   height: inherit !important;
-  //   border-radius: inherit;
-  //   object-fit: cover;
-  // }
+    // img,
+    // &__image {
+    //   display: inline-flex;
+    //   width: inherit !important;
+    //   height: inherit !important;
+    //   border-radius: inherit;
+    //   object-fit: cover;
+    // }
 
-  &__icon {
-    &--start {
-      margin-right: calc(var(--chip-padding) * 0.5);
-      margin-left: calc(var(--chip-padding) * -0.5);
-    }
+    &__icon {
+      &--start {
+        margin-right: calc(var(--chip-padding) * 0.5);
+        margin-left: calc(var(--chip-padding) * -0.5);
+      }
 
-    &--end {
-      margin-right: calc(var(--chip-padding) * -0.5);
-      margin-left: calc(var(--chip-padding) * 0.5);
+      &--end {
+        margin-right: calc(var(--chip-padding) * -0.5);
+        margin-left: calc(var(--chip-padding) * 0.5);
+      }
     }
-  }
 
-  .v-avatar {
-    --avatar-size: 14px;
+    .v-avatar {
+      --avatar-size: 14px;
+    }
   }
 }

package/src/components/VChip/VChip.tsx

@@ -10,9 +10,14 @@ import { useVui } from '../../injections';
 import type { IconName } from '../VIcon';
 import { VIcon } from '../VIcon';
 
+// @TODO Unable to resolve dts for `navigationableInheritProps`.
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { RouteLocationRaw } from 'vue-router';
+
 export const CHIP_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
 
-export type ChipSize = typeof CHIP_SIZES[number];
+export type ChipSize = (typeof CHIP_SIZES)[number];
 
 export type VChipIcon = () => VNodeChild;
 

package/src/components/VContentSwitcher/VContentSwitcher.scss

@@ -1,72 +1,74 @@
-.v-content-switcher {
-  position: relative;
-  display: block;
-  width: 100%;
-  overflow: hidden;
-  transition: var(--transition-tab);
-
-  &__content {
+@layer vui {
+  .v-content-switcher {
+    position: relative;
+    display: block;
     width: 100%;
-  }
+    overflow: hidden;
+    transition: var(--transition-tab);
 
-  &-prev {
-    &-enter-active,
-    &-leave-active {
-      transition: var(--transition-tab);
+    &__content {
+      width: 100%;
     }
 
-    &-enter {
-      &-from {
-        transform: translateX(-100%);
+    &-prev {
+      &-enter-active,
+      &-leave-active {
+        transition: var(--transition-tab);
       }
 
-      &-to {
-        transform: translateX(0%);
+      &-enter {
+        &-from {
+          transform: translateX(-100%);
+        }
+
+        &-to {
+          transform: translateX(0%);
+        }
       }
-    }
 
-    &-leave {
-      transform: translateX(0%);
+      &-leave {
+        transform: translateX(0%);
 
-      &-active {
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
+        &-active {
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
 
-      &-to {
-        transform: translateX(100%);
+        &-to {
+          transform: translateX(100%);
+        }
       }
     }
-  }
 
-  &-next {
-    &-enter-active,
-    &-leave-active {
-      transition: var(--transition-tab);
-    }
-
-    &-enter {
-      &-from {
-        transform: translateX(100%);
+    &-next {
+      &-enter-active,
+      &-leave-active {
+        transition: var(--transition-tab);
       }
 
-      &-to {
-        transform: translateX(0%);
+      &-enter {
+        &-from {
+          transform: translateX(100%);
+        }
+
+        &-to {
+          transform: translateX(0%);
+        }
       }
-    }
 
-    &-leave {
-      transform: translateX(0%);
+      &-leave {
+        transform: translateX(0%);
 
-      &-active {
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
+        &-active {
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
 
-      &-to {
-        transform: translateX(-100%);
+        &-to {
+          transform: translateX(-100%);
+        }
       }
     }
   }