@fastkit/vui 0.12.8 → 0.12.9

package/src/components/VSwitch/VSwitch.scss

@@ -1,125 +1,127 @@
 @use 'sass:math';
 
-.v-switch {
-  --my-pin-color: var(--palette-background);
-  // --my-faux-bg-color: transparent;
+@layer vui {
+  .v-switch {
+    --my-pin-color: var(--palette-background);
+    // --my-faux-bg-color: transparent;
 
-  &--selected {
-    --my-pin-color: var(--color);
-  }
-
-  &__faux {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    width: var(--control-switch-width);
-    height: 100%;
-    cursor: pointer;
-
-    &::before {
-      display: block;
-      width: var(--control-switch-track-width);
-      height: var(--control-switch-track-height);
-      content: '';
-      background: var(--color);
-      border-radius: calc(var(--control-switch-track-height) / 2);
-      opacity: 0.5;
+    &--selected {
+      --my-pin-color: var(--color);
     }
 
-    &__pin {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
+    &__faux {
+      position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
-      width: var(--outer-size);
-      height: var(--outer-size);
-      // background: #f00;
-      border-radius: 50%;
-      transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-        transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+      width: 100%;
+      width: var(--control-switch-width);
+      height: 100%;
+      cursor: pointer;
 
-      &::before,
-      &::after {
+      &::before {
         display: block;
+        width: var(--control-switch-track-width);
+        height: var(--control-switch-track-height);
         content: '';
+        background: var(--color);
+        border-radius: calc(var(--control-switch-track-height) / 2);
+        opacity: 0.5;
       }
 
-      &::before {
+      &__pin {
         position: absolute;
-        width: 100%;
-        height: 100%;
-        background: currentColor;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--outer-size);
+        height: var(--outer-size);
+        // background: #f00;
         border-radius: 50%;
-        opacity: 0;
-        transition: opacity 0.2s;
-      }
+        transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+          transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 
-      &::after {
-        position: relative;
-        width: var(--icon-size);
-        height: var(--icon-size);
-        background: var(--my-pin-color);
-        border-radius: 50%;
-        box-shadow: rgb(0 0 0 / 0.2) 0 2px 1px -1px,
-          rgb(0 0 0 / 0.14) 0 1px 1px 0, rgb(0 0 0 / 0.12) 0 1px 3px 0;
-        transform: scale(var(--control-checkable-faux-scale));
+        &::before,
+        &::after {
+          display: block;
+          content: '';
+        }
+
+        &::before {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          background: currentColor;
+          border-radius: 50%;
+          opacity: 0;
+          transition: opacity 0.2s;
+        }
+
+        &::after {
+          position: relative;
+          width: var(--icon-size);
+          height: var(--icon-size);
+          background: var(--my-pin-color);
+          border-radius: 50%;
+          box-shadow: rgb(0 0 0 / 0.2) 0 2px 1px -1px,
+            rgb(0 0 0 / 0.14) 0 1px 1px 0, rgb(0 0 0 / 0.12) 0 1px 3px 0;
+          transform: scale(var(--control-checkable-faux-scale));
+        }
       }
     }
-  }
 
-  &--selected &__faux {
-    &__pin {
-      left: calc(100% - var(--outer-size));
+    &--selected &__faux {
+      &__pin {
+        left: calc(100% - var(--outer-size));
+      }
     }
-  }
 
-  &--disabled &__faux {
-    &::before {
-      background-color: #000;
-      opacity: 0.12;
-    }
+    &--disabled &__faux {
+      &::before {
+        background-color: #000;
+        opacity: 0.12;
+      }
 
-    &__pin {
-      &::after {
-        background-color: rgba(245, 245, 245, 1);
+      &__pin {
+        &::after {
+          background-color: rgba(245, 245, 245, 1);
+        }
       }
     }
-  }
 
-  &__faux:hover &__faux__pin::before {
-    opacity: 0.1;
-  }
+    &__faux:hover &__faux__pin::before {
+      opacity: 0.1;
+    }
 
-  &:focus-within &__faux {
-    &__pin {
-      &::before {
-        opacity: 0.1;
+    &:focus-within &__faux {
+      &__pin {
+        &::before {
+          opacity: 0.1;
+        }
       }
     }
-  }
 
-  // &--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/VSwitch/VSwitch.tsx

@@ -3,8 +3,8 @@ import { defineComponent } 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_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL } from '../../injections';
 import { VCheckable } from '../VCheckable';

package/src/components/VTabs/VTab.scss

@@ -1,73 +1,75 @@
 @use '../../styles/core.scss';
 
-.v-tab {
-  @include core.button-reset;
+@layer vui {
+  .v-tab {
+    @include core.button-reset;
 
-  --tab-content-color: var(--palette-caption);
-  --tab-content-focus-color: var(--main-color);
-  --tab-content-opacity: 0.7;
+    --tab-content-color: var(--palette-caption);
+    --tab-content-focus-color: var(--main-color);
+    --tab-content-opacity: 0.7;
 
-  position: relative;
-  z-index: 3;
-  display: flex;
-  // flex: 1 1 auto;
-  align-items: center;
-  justify-content: center;
-  height: var(--tabs-height);
-  padding: 0 1.25em;
-  font: inherit;
-  font-size: var(--tabs-font-size);
-  // color: inherit;
-  white-space: nowrap;
-  user-select: none;
-  transition: color 0.6s;
-
-  &::before {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    // top: 0;
-    left: 0;
-    z-index: 1;
-    height: 2px;
-    content: '';
-    background-color: var(--tab-content-focus-color);
-    border-radius: inherit;
-    transition: all 0.25s;
-    transform: scaleX(0);
-  }
-
-  &__content {
     position: relative;
-    z-index: 2;
+    z-index: 3;
     display: flex;
+    // flex: 1 1 auto;
     align-items: center;
-    line-height: 1.2;
-    color: var(--tab-content-color);
-    text-align: center;
-    opacity: var(--tab-content-opacity);
-    transition: all 0.25s ease;
-  }
+    justify-content: center;
+    height: var(--tabs-height);
+    padding: 0 1.25em;
+    font: inherit;
+    font-size: var(--tabs-font-size);
+    // color: inherit;
+    white-space: nowrap;
+    user-select: none;
+    transition: color 0.6s;
 
-  &__icon {
-    margin-right: 8px;
-    font-size: 120%;
-  }
+    &::before {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      // top: 0;
+      left: 0;
+      z-index: 1;
+      height: 2px;
+      content: '';
+      background-color: var(--tab-content-focus-color);
+      border-radius: inherit;
+      transition: all 0.25s;
+      transform: scaleX(0);
+    }
 
-  &:hover {
-    --tab-content-color: var(--tab-content-focus-color);
-  }
+    &__content {
+      position: relative;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      line-height: 1.2;
+      color: var(--tab-content-color);
+      text-align: center;
+      opacity: var(--tab-content-opacity);
+      transition: all 0.25s ease;
+    }
 
-  &--active {
-    --tab-content-color: rgba(0, 0, 0, 0.87);
+    &__icon {
+      margin-right: 8px;
+      font-size: 120%;
+    }
 
-    pointer-events: none;
-    background: var(--tabs-color);
+    &:hover {
+      --tab-content-color: var(--tab-content-focus-color);
+    }
 
-    --tab-content-opacity: 1;
+    &--active {
+      --tab-content-color: rgba(0, 0, 0, 0.87);
 
-    &::before {
-      transform: scaleX(1);
+      pointer-events: none;
+      background: var(--tabs-color);
+
+      --tab-content-opacity: 1;
+
+      &::before {
+        transform: scaleX(1);
+      }
     }
   }
 }

package/src/components/VTabs/VTabs.scss

@@ -1,49 +1,51 @@
 $my-offset: 30px;
 
-.v-tabs {
-  position: relative;
-  width: 100%;
-  height: var(--tabs-height);
-  overflow: hidden;
+@layer vui {
+  .v-tabs {
+    position: relative;
+    width: 100%;
+    height: var(--tabs-height);
+    overflow: hidden;
 
-  &::before {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    height: 2px;
-    content: '';
-    background: currentColor;
-    opacity: 0.25;
-  }
+    &::before {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      height: 2px;
+      content: '';
+      background: currentColor;
+      opacity: 0.25;
+    }
 
-  &__scroller {
-    width: 100%;
-    height: calc(var(--tabs-height) + #{$my-offset});
+    &__scroller {
+      width: 100%;
+      height: calc(var(--tabs-height) + #{$my-offset});
 
-    &__container {
-      padding-bottom: $my-offset;
+      &__container {
+        padding-bottom: $my-offset;
+      }
     }
-  }
 
-  &__content {
-    position: relative;
-    display: inline-flex;
-    align-items: stretch;
-    min-width: 100%;
-    vertical-align: bottom;
+    &__content {
+      position: relative;
+      display: inline-flex;
+      align-items: stretch;
+      min-width: 100%;
+      vertical-align: bottom;
 
-    // &::after {
-    //   position: absolute;
-    //   right: 0;
-    //   bottom: 0;
-    //   left: 0;
-    //   z-index: 1;
-    //   display: block;
-    //   height: var(--tabs-bar-height);
-    //   pointer-events: none;
-    //   content: '';
-    // }
+      // &::after {
+      //   position: absolute;
+      //   right: 0;
+      //   bottom: 0;
+      //   left: 0;
+      //   z-index: 1;
+      //   display: block;
+      //   height: var(--tabs-bar-height);
+      //   pointer-events: none;
+      //   content: '';
+      // }
+    }
   }
 }

package/src/components/VTabs/VTabs.tsx

@@ -16,8 +16,11 @@ import { useVui } from '../../injections';
 import { defineSlotsProps } from '@fastkit/vue-utils';
 import { RouteLocationRaw, RouteLocation } from 'vue-router';
 import { VTab, VTabRef } from './VTab';
-import { VScroller, useVScrollerRef } from '@fastkit/vue-kit';
-import { ScrollResult } from '@fastkit/scroller';
+import {
+  VScroller,
+  useVScrollerRef,
+  ScrollResult,
+} from '@fastkit/vue-scroller';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
 import { isPromise } from '@fastkit/helpers';
 

package/src/components/VTextCounter/VTextCounter.scss

@@ -1,3 +1,5 @@
-.v-text-counter {
-  white-space: nowrap;
+@layer vui {
+  .v-text-counter {
+    white-space: nowrap;
+  }
 }

package/src/components/VTextField/VTextField.scss

@@ -1,45 +1,47 @@
 @use '../../styles/core.scss';
 
-.v-text-field {
-  &__input {
-    cursor: text;
+@layer vui {
+  .v-text-field {
+    &__input {
+      cursor: text;
 
-    &__element {
-      width: 100%;
-      min-width: 0;
-      // width: calc(100% - 8px);
-      padding: 0;
-      margin: 0;
-      overflow: hidden;
-      // margin: 0 8px;
-      font-size: inherit;
-      line-height: inherit;
-      text-overflow: ellipsis;
-      letter-spacing: inherit;
-      white-space: nowrap;
-      background: transparent;
-      border: 0;
-      border-radius: 0;
-      outline: 0;
+      &__element {
+        width: 100%;
+        min-width: 0;
+        // width: calc(100% - 8px);
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+        // margin: 0 8px;
+        font-size: inherit;
+        line-height: inherit;
+        text-overflow: ellipsis;
+        letter-spacing: inherit;
+        white-space: nowrap;
+        background: transparent;
+        border: 0;
+        border-radius: 0;
+        outline: 0;
 
-      &:-webkit-autofill {
-        @include core.auto-fill-cancel;
-        // color: inherit !important;
-        // box-shadow: 0 0 0 1000px get-color(field) inset;
-      }
+        &:-webkit-autofill {
+          @include core.auto-fill-cancel;
+          // color: inherit !important;
+          // box-shadow: 0 0 0 1000px get-color(field) inset;
+        }
 
-      &::-ms-clear {
-        display: none;
-      }
+        &::-ms-clear {
+          display: none;
+        }
 
-      &::placeholder {
-        font-style: italic;
-        color: var(--control-disabled-color);
-      }
+        &::placeholder {
+          font-style: italic;
+          color: var(--control-disabled-color);
+        }
 
-      // @include placeholder {
-      //   color: get-color(text-muted);
-      // }
+        // @include placeholder {
+        //   color: get-color(text-muted);
+        // }
+      }
     }
   }
 }

package/src/components/VTextField/VTextField.tsx

@@ -5,9 +5,9 @@ import {
   useTextInputControl,
   createFormControlProps,
   FormControlSlots,
-  defineSlotsProps,
   TextInputEmits,
-} from '@fastkit/vue-kit';
+} from '@fastkit/vue-form-control';
+import { defineSlotsProps } from '@fastkit/vue-utils';
 import { VFormControl } from '../VFormControl';
 import {
   VControlField,

package/src/components/VTextarea/VTextarea.scss

@@ -1,41 +1,43 @@
 @use '../../styles/core.scss';
 
-.v-textarea {
-  &__input {
-    cursor: text;
+@layer vui {
+  .v-textarea {
+    &__input {
+      cursor: text;
 
-    &__element {
-      width: 100%;
-      min-width: 0;
-      padding: 8px 0;
-      margin: 0;
-      font-size: inherit;
-      line-height: inherit;
-      letter-spacing: inherit;
-      resize: none;
-      background: transparent;
-      border: 0;
-      border-radius: 0;
-      outline: 0;
+      &__element {
+        width: 100%;
+        min-width: 0;
+        padding: 8px 0;
+        margin: 0;
+        font-size: inherit;
+        line-height: inherit;
+        letter-spacing: inherit;
+        resize: none;
+        background: transparent;
+        border: 0;
+        border-radius: 0;
+        outline: 0;
 
-      &:-webkit-autofill {
-        @include core.auto-fill-cancel;
-        // color: inherit !important;
-        // box-shadow: 0 0 0 1000px get-color(field) inset;
-      }
+        &:-webkit-autofill {
+          @include core.auto-fill-cancel;
+          // color: inherit !important;
+          // box-shadow: 0 0 0 1000px get-color(field) inset;
+        }
 
-      &::-ms-clear {
-        display: none;
-      }
+        &::-ms-clear {
+          display: none;
+        }
 
-      &::placeholder {
-        font-style: italic;
-        color: var(--control-disabled-color);
-      }
+        &::placeholder {
+          font-style: italic;
+          color: var(--control-disabled-color);
+        }
 
-      // @include placeholder {
-      //   color: get-color(text-muted);
-      // }
+        // @include placeholder {
+        //   color: get-color(text-muted);
+        // }
+      }
     }
   }
 }

package/src/components/VTextarea/VTextarea.tsx

@@ -5,8 +5,8 @@ import {
   useTextareaControl,
   createFormControlProps,
   FormControlSlots,
-  defineSlotsProps,
-} from '@fastkit/vue-kit';
+} from '@fastkit/vue-form-control';
+import { defineSlotsProps } from '@fastkit/vue-utils';
 import { VFormControl } from '../VFormControl';
 import {
   VControlField,