@fastkit/vui 0.12.7 → 0.12.9

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,

package/src/components/VToolbar/VToolbar.scss

@@ -1,26 +1,28 @@
 // @use './core.scss';
 // @use '../../styles/core.scss';
 
-.v-toolbar {
-  --height: var(--toolbar-height);
+@layer vui {
+  .v-toolbar {
+    --height: var(--toolbar-height);
 
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: var(--height);
-  padding: 0 calc(var(--root-em) * 1.5); // 24
-  margin: 0;
-  border-radius: inherit;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: var(--height);
+    padding: 0 calc(var(--root-em) * 1.5); // 24
+    margin: 0;
+    border-radius: inherit;
 
-  &--plain {
-    --main-color: var(--palette-background);
-  }
+    &--plain {
+      --main-color: var(--palette-background);
+    }
 
-  .v-app-layout__header > & {
-    height: 100%;
-  }
+    .v-app-layout__header > & {
+      height: 100%;
+    }
 
-  &--dense {
-    --height: var(--toolbar-dense-height);
+    &--dense {
+      --height: var(--toolbar-dense-height);
+    }
   }
 }

package/src/components/VToolbar/VToolbarEdge.scss

@@ -1,27 +1,29 @@
 // @use '../../styles/core.scss';
 
-.v-toolbar-edge {
-  display: flex;
-  flex: 0 0;
-  align-items: center;
-  align-self: stretch;
+@layer vui {
+  .v-toolbar-edge {
+    display: flex;
+    flex: 0 0;
+    align-items: center;
+    align-self: stretch;
 
-  &:empty,
-  &--empty {
-    display: none;
-  }
+    &:empty,
+    &--empty {
+      display: none;
+    }
 
-  $my-negative-margin: calc(-1 * var(--root-em) * 0.75); // -12
-  $my-margin: calc(var(--root-em) * 0.75); // -12
+    $my-negative-margin: calc(-1 * var(--root-em) * 0.75); // -12
+    $my-margin: calc(var(--root-em) * 0.75); // -12
 
-  &--start {
-    margin-right: $my-margin;
-    margin-left: $my-negative-margin;
-  }
+    &--start {
+      margin-right: $my-margin;
+      margin-left: $my-negative-margin;
+    }
 
-  &--end {
-    padding-left: $my-margin;
-    margin-right: $my-negative-margin;
-    margin-left: auto;
+    &--end {
+      padding-left: $my-margin;
+      margin-right: $my-negative-margin;
+      margin-left: auto;
+    }
   }
 }

package/src/components/VToolbar/VToolbarMenu.scss

@@ -1,7 +1,9 @@
 // @use '../../styles/core.scss';
 
-.v-toolbar-menu {
-  height: 100%;
-  margin: 0;
-  box-shadow: none;
+@layer vui {
+  .v-toolbar-menu {
+    height: 100%;
+    margin: 0;
+    box-shadow: none;
+  }
 }

package/src/components/VToolbar/VToolbarMenu.tsx

@@ -4,6 +4,11 @@ import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { VButton, vueButtonProps } from '../VButton';
 import { useVui } from '../../injections';
 
+// @TODO Unable to resolve dts for `navigationableInheritProps`.
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { RouteLocationRaw } from 'vue-router';
+
 export type VToolbarMenuEdge = 'start' | 'end';
 
 export const VToolbarMenu = defineComponent({

package/src/components/VToolbar/VToolbarTitle.scss

@@ -1,22 +1,24 @@
 // @use '../../styles/core.scss';
 
-.v-toolbar-title {
-  display: flex;
-  flex-grow: 1;
-  margin: 0;
-  // font-size: var(--typo-h3-size);
-  font-size: 1.25rem;
-  // font-weight: var(--typo-h3-weight);
-  font-weight: 400;
-  // font-size: 16px;
-  // font-weight: 500;
-  line-height: 1;
+@layer vui {
+  .v-toolbar-title {
+    display: flex;
+    flex-grow: 1;
+    margin: 0;
+    // font-size: var(--typo-h3-size);
+    font-size: 1.25rem;
+    // font-weight: var(--typo-h3-weight);
+    font-weight: 400;
+    // font-size: 16px;
+    // font-weight: 500;
+    line-height: 1;
 
-  // font-weight: 500;
-  // font-size: 1.25rem;
-  // line-height: 1.6;
-  // letter-spacing: 0.0075em;
-  white-space: nowrap;
+    // font-weight: 500;
+    // font-size: 1.25rem;
+    // line-height: 1.6;
+    // letter-spacing: 0.0075em;
+    white-space: nowrap;
 
-  // @include core.typo('h2');
+    // @include core.typo('h2');
+  }
 }

package/src/components/VWysiwygEditor/VWysiwygEditor.scss

@@ -1,66 +1,68 @@
 @use '../../styles/core.scss';
 
-.v-wysiwyg-editor {
-  &--sm {
-    --min-height: var(--wysiwyg-min-height-sm);
-    --max-height: var(--wysiwyg-max-height-sm);
-  }
-
-  &--md {
-    --min-height: var(--wysiwyg-min-height-md);
-    --max-height: var(--wysiwyg-max-height-md);
-  }
-
-  &--lg {
-    --min-height: var(--wysiwyg-min-height-lg);
-    --max-height: var(--wysiwyg-max-height-lg);
-  }
+@layer vui {
+  .v-wysiwyg-editor {
+    &--sm {
+      --min-height: var(--wysiwyg-min-height-sm);
+      --max-height: var(--wysiwyg-max-height-sm);
+    }
 
-  &__wrapper {
-    position: relative;
-  }
+    &--md {
+      --min-height: var(--wysiwyg-min-height-md);
+      --max-height: var(--wysiwyg-max-height-md);
+    }
 
-  .v-control-field__body {
-    width: 100%;
-  }
+    &--lg {
+      --min-height: var(--wysiwyg-min-height-lg);
+      --max-height: var(--wysiwyg-max-height-lg);
+    }
 
-  &__floating-toolbar {
-    position: absolute;
-    right: 0;
-    bottom: 100%;
-    z-index: 1;
-  }
+    &__wrapper {
+      position: relative;
+    }
 
-  &__body {
-    position: relative;
-    width: 100%;
-    max-height: var(--max-height);
-    // max-height: 200px;
-    overflow: auto;
-  }
+    .v-control-field__body {
+      width: 100%;
+    }
 
-  &__input {
-    cursor: text;
+    &__floating-toolbar {
+      position: absolute;
+      right: 0;
+      bottom: 100%;
+      z-index: 1;
+    }
 
-    &__element {
+    &__body {
+      position: relative;
       width: 100%;
-      min-width: 0;
-      padding: 8px 0;
-      margin: 0;
+      max-height: var(--max-height);
+      // max-height: 200px;
+      overflow: auto;
     }
 
-    &__prose {
-      width: 100%;
-      min-height: var(--min-height);
-      outline: none;
+    &__input {
+      cursor: text;
+
+      &__element {
+        width: 100%;
+        min-width: 0;
+        padding: 8px 0;
+        margin: 0;
+      }
+
+      &__prose {
+        width: 100%;
+        min-height: var(--min-height);
+        outline: none;
+      }
     }
-  }
 
-  &--disabled-min-heihgt &__input__prose {
-    min-height: 0;
-  }
+    &--disabled-min-heihgt &__input__prose {
+      min-height: 0;
+    }
 
-  &--disabled-max-heihgt &__body {
-    max-height: none;
+    &--disabled-max-heihgt &__body {
+      max-height: none;
+    }
   }
 }

package/src/components/VWysiwygEditor/VWysiwygEditor.tsx

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