@fastkit/vui 0.12.7 → 0.12.9

package/src/components/VWysiwygEditor/extensions/linter/Linter.scss

@@ -1,140 +1,139 @@
-.v-linter {
-  &__problem {
-    margin-bottom: -1px;
-    cursor: help;
-    background: var(--deep-color);
-    border-bottom: 1px solid var(--main-color);
-  }
-
-  &__issue-icon {
-    position: absolute;
-    right: 2px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.2em;
-    height: 1.2em;
-    margin-top: 0.2em;
-    // padding-left: 0.5px;
-    font-family: times, georgia, serif;
-    font-size: 15px;
-    font-weight: 700;
-    line-height: 1;
-    color: var(--text-color);
-    text-align: center;
-    cursor: pointer;
-    background: var(--main-color);
-    border-radius: 100px;
-
-    &::before {
-      content: '!';
+@layer vui {
+  .v-linter {
+    &__problem {
+      margin-bottom: -1px;
+      cursor: help;
+      background: var(--deep-color);
+      border-bottom: 1px solid var(--main-color);
     }
-  }
-
-  &__issue-menu-wrapper {
-    position: relative;
-    display: inline-block;
-    width: 0px;
-    height: 1em;
-    overflow: visible;
-  }
 
-  &__issue-menu {
-    font-size: 87.5%;
-    // font-size: 12px;
-    line-height: 1.5;
+    &__issue-icon {
+      position: absolute;
+      right: 2px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.2em;
+      height: 1.2em;
+      margin-top: 0.2em;
+      // padding-left: 0.5px;
+      font-family: times, georgia, serif;
+      font-size: 15px;
+      font-weight: 700;
+      line-height: 1;
+      color: var(--text-color);
+      text-align: center;
+      cursor: pointer;
+      background: var(--main-color);
+      border-radius: 100px;
 
-    .v-dialog__body {
-      padding: 0;
-      font-size: inherit;
+      &::before {
+        content: '!';
+      }
     }
 
-    &__message {
-      padding: 8px;
+    &__issue-menu-wrapper {
+      position: relative;
+      display: inline-block;
+      width: 0px;
+      height: 1em;
+      overflow: visible;
     }
 
-    &__fixers {
-      position: relative;
-      padding: 4px 0;
-      // padding: 8px;
-      // border-top: solid 1px var(--divider-color);
-      &::before {
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
-        display: block;
-        height: 1px;
-        content: '';
-        background: currentColor;
-        opacity: 0.5;
+    &__issue-menu {
+      font-size: 87.5%;
+      // font-size: 12px;
+      line-height: 1.5;
+
+      .v-dialog__body {
+        padding: 0;
+        font-size: inherit;
       }
-    }
 
-    &__fixer {
-      &__button {
-        position: relative;
-        display: block;
-        width: 100%;
+      &__message {
         padding: 8px;
-        font: inherit;
-        font-size: 12px;
-        // margin-top: 8px;
-        // color: var(--palette-link);
-        text-align: left;
-        // text-decoration: underline;
-        cursor: pointer;
-        background: transparent;
-        border: 0;
-        outline: 0;
-        appearance: none;
+      }
 
+      &__fixers {
+        position: relative;
+        padding: 4px 0;
+        // padding: 8px;
+        // border-top: solid 1px var(--divider-color);
         &::before {
           position: absolute;
           top: 0;
           right: 0;
-          bottom: 0;
           left: 0;
           display: block;
+          height: 1px;
           content: '';
           background: currentColor;
-          opacity: 0;
-          transition: 0.15s;
+          opacity: 0.5;
         }
+      }
+
+      &__fixer {
+        &__button {
+          position: relative;
+          display: block;
+          width: 100%;
+          padding: 8px;
+          font: inherit;
+          font-size: 12px;
+          // margin-top: 8px;
+          // color: var(--palette-link);
+          text-align: left;
+          // text-decoration: underline;
+          cursor: pointer;
+          background: transparent;
+          border: 0;
+          outline: 0;
+          appearance: none;
 
-        &:hover,
-        &:focus {
           &::before {
-            opacity: 0.1;
+            position: absolute;
+            inset: 0;
+            display: block;
+            content: '';
+            background: currentColor;
+            opacity: 0;
+            transition: 0.15s;
           }
-        }
 
-        &__message {
-          position: relative;
+          &:hover,
+          &:focus {
+            &::before {
+              opacity: 0.1;
+            }
+          }
+
+          &__message {
+            position: relative;
+          }
         }
       }
-    }
-    // pointer-events: none;
-    // background: #fff;
-    // border-radius: 4px;
-    // opacity: 0;
-    // transition: opacity 0.15s;
+      // pointer-events: none;
+      // background: #fff;
+      // border-radius: 4px;
+      // opacity: 0;
+      // transition: opacity 0.15s;
 
-    // &--active {
-    //   pointer-events: auto;
-    //   opacity: 1;
-    // }
+      // &--active {
+      //   pointer-events: auto;
+      //   opacity: 1;
+      // }
 
-    &__fix {
-      display: inline;
-      margin-top: 8px;
-      color: var(--palette-link);
-      text-decoration: underline;
-      cursor: pointer;
-      background: transparent;
-      border: 0;
-      outline: 0;
-      appearance: none;
+      &__fix {
+        display: inline;
+        margin-top: 8px;
+        color: var(--palette-link);
+        text-decoration: underline;
+        cursor: pointer;
+        background: transparent;
+        border: 0;
+        outline: 0;
+        appearance: none;
+      }
     }
   }
 }

package/src/components/VWysiwygEditor/schemes.ts

@@ -30,7 +30,7 @@ const prefixedEventName = <S extends string>(
   return `on${source.charAt(0).toUpperCase()}${source.slice(1)}` as any;
 };
 
-export type WysiwygEditorEvent = typeof EDITOR_EVENTS[number];
+export type WysiwygEditorEvent = (typeof EDITOR_EVENTS)[number];
 
 export type WysiwygEditorPrefixedEvent = PrefixedEventName<WysiwygEditorEvent>;
 

package/src/components/VWysiwygEditor/tools/color.scss

@@ -2,139 +2,133 @@
   --v-wysiwyg-color-tool: 30px;
 }
 
-.v-wysiwyg-color-tool {
-  &__button {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: bottom;
-
-    &__bar {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      display: block;
-      height: 2px;
-      background: currentColor;
-    }
-  }
-
-  &__menu {
-    .v-dialog__content {
-      min-width: 0;
-    }
-
-    .v-dialog__body {
-      padding: 2px;
-    }
-  }
-
-  &__items {
-    --item-size: var(--v-wysiwyg-color-tool);
-
-    display: inline-flex;
-    flex-wrap: wrap;
-    align-items: center;
-    max-width: calc(var(--item-size) * 5);
-    vertical-align: bottom;
-
-    &--with-label {
-      display: flex;
-      flex-direction: column;
-      // flex-wrap: nowrap;
-      align-items: flex-start;
-      max-width: none;
-      padding: 2px;
-    }
-  }
-
-  &__item {
-    --focus-offset: calc(var(--item-size) * 0.05);
-
-    position: relative;
-    display: flex;
-    flex-basis: var(--item-size);
-    align-items: center;
-    width: var(--item-size);
-    height: var(--item-size);
-    padding: 0;
-    margin: 0;
-    // margin: 2px;
-    cursor: pointer;
-    background: transparent;
-    border: 0;
-    border-radius: 0;
-    outline: 0;
-    appearance: none;
-
-    &__color {
+@layer vui {
+  .v-wysiwyg-color-tool {
+    &__button {
       position: relative;
-      flex: 0 0 var(--item-size);
-      width: var(--item-size);
-      height: var(--item-size);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      vertical-align: bottom;
 
-      &::before {
+      &__bar {
         position: absolute;
-        top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         display: block;
-        content: '';
+        height: 2px;
         background: currentColor;
-        border: solid 1px transparent;
-        transition: all 0.15s;
       }
     }
 
-    &__name {
-      position: relative;
-      padding: 0 8px;
-      font-size: 12px;
-      white-space: nowrap;
+    &__menu {
+      .v-dialog__content {
+        min-width: 0;
+      }
+
+      .v-dialog__body {
+        padding: 2px;
+      }
     }
 
-    &:hover &__color,
-    &:focus &__color {
-      &::before {
-        top: var(--focus-offset);
-        right: var(--focus-offset);
-        bottom: var(--focus-offset);
-        left: var(--focus-offset);
-        border-color: rgba(0, 0, 0, 0.1);
+    &__items {
+      --item-size: var(--v-wysiwyg-color-tool);
+
+      display: inline-flex;
+      flex-wrap: wrap;
+      align-items: center;
+      max-width: calc(var(--item-size) * 5);
+      vertical-align: bottom;
+
+      &--with-label {
+        display: flex;
+        flex-direction: column;
+        // flex-wrap: nowrap;
+        align-items: flex-start;
+        max-width: none;
+        padding: 2px;
       }
     }
-  }
 
-  &__items--with-label &__item {
-    flex-basis: auto;
-    width: auto;
-    width: 100%;
-
-    &::before {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      display: block;
-      content: '';
-      background: currentColor;
-      opacity: 0;
-      transition: opacity 0.15s;
+    &__item {
+      --focus-offset: calc(var(--item-size) * 0.05);
+
+      position: relative;
+      display: flex;
+      flex-basis: var(--item-size);
+      align-items: center;
+      width: var(--item-size);
+      height: var(--item-size);
+      padding: 0;
+      margin: 0;
+      // margin: 2px;
+      cursor: pointer;
+      background: transparent;
+      border: 0;
+      border-radius: 0;
+      outline: 0;
+      appearance: none;
+
+      &__color {
+        position: relative;
+        flex: 0 0 var(--item-size);
+        width: var(--item-size);
+        height: var(--item-size);
+
+        &::before {
+          position: absolute;
+          inset: 0;
+          display: block;
+          content: '';
+          background: currentColor;
+          border: solid 1px transparent;
+          transition: all 0.15s;
+        }
+      }
+
+      &__name {
+        position: relative;
+        padding: 0 8px;
+        font-size: 12px;
+        white-space: nowrap;
+      }
+
+      &:hover &__color,
+      &:focus &__color {
+        &::before {
+          inset: var(--focus-offset) var(--focus-offset) var(--focus-offset)
+            var(--focus-offset);
+          border-color: rgba(0, 0, 0, 0.1);
+        }
+      }
     }
 
-    &:hover,
-    &:focus {
+    &__items--with-label &__item {
+      flex-basis: auto;
+      width: auto;
+      width: 100%;
+
       &::before {
-        opacity: 0.1;
+        position: absolute;
+        inset: 0;
+        display: block;
+        content: '';
+        background: currentColor;
+        opacity: 0;
+        transition: opacity 0.15s;
       }
-    }
 
-    & + .v-wysiwyg-color-tool__item {
-      margin-top: 2px;
+      &:hover,
+      &:focus {
+        &::before {
+          opacity: 0.1;
+        }
+      }
+
+      & + .v-wysiwyg-color-tool__item {
+        margin-top: 2px;
+      }
     }
   }
 }

package/src/components/kits.ts

@@ -1 +1 @@
-export { VDialog, VMenu, VSnackbar, VTooltip } from '@fastkit/vue-kit';
+export { VDialog, VMenu, VSnackbar, VTooltip } from '@fastkit/vue-stack';

package/src/composables/control.ts

@@ -12,7 +12,7 @@ import {
   ControlFieldVariant,
   CONTROL_FIELD_VARIANTS,
 } from '../schemes';
-import { createPropsOptions } from '@fastkit/vue-kit';
+import { createPropsOptions } from '@fastkit/vue-utils';
 import {
   VuiControlInjectionKey,
   VuiControlFieldInjectionKey,

package/src/composables/form-selector.scss

@@ -1,24 +1,26 @@
-.v-form-selector {
-  &__body {
-    display: block;
-  }
+@layer vui {
+  .v-form-selector {
+    &__body {
+      display: block;
+    }
 
-  &__placeholder {
-    display: flex;
-    align-items: center;
-    margin-top: 8px;
-    font-style: italic;
-    opacity: 0.5;
+    &__placeholder {
+      display: flex;
+      align-items: center;
+      margin-top: 8px;
+      font-style: italic;
+      opacity: 0.5;
 
-    &--error {
-      color: var(--main-color);
-      opacity: 1;
+      &--error {
+        color: var(--main-color);
+        opacity: 1;
+      }
     }
-  }
 
-  &--stacked &__body {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+    &--stacked &__body {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
   }
 }

package/src/composables/form-selector.tsx

@@ -1,8 +1,6 @@
 import './form-selector.scss';
 import { VNodeChild, defineComponent, PropType, computed } from 'vue';
 import {
-  defineSlotsProps,
-  TypedSlot,
   createFormControlProps,
   createFormSelectorSettings,
   FormControlSlots,
@@ -10,10 +8,14 @@ import {
   FormSelectorControl,
   ResolvedFormSelectorItem,
   FormNodeControl,
+} from '@fastkit/vue-form-control';
+import {
+  defineSlotsProps,
+  TypedSlot,
   renderSlotOrEmpty,
   VNodeChildOrSlot,
   resolveVNodeChildOrSlots,
-} from '@fastkit/vue-kit';
+} from '@fastkit/vue-utils';
 import { createControlProps, useControl } from './control';
 import { VFormControl } from '../components/VFormControl';
 import { useVui } from '../injections';

package/src/index.ts

@@ -1,7 +1,18 @@
-export * from '@fastkit/vue-kit';
-
 import './styles/index.scss';
 
+export * from '@fastkit/helpers';
+export * from '@fastkit/icon-font';
+export * from '@fastkit/media-match';
+export * from '@fastkit/vue-media-match';
+export * from '@fastkit/rules';
+export * from '@fastkit/vue-app-layout';
+export * from '@fastkit/vue-color-scheme';
+export * from '@fastkit/vue-form-control';
+export * from '@fastkit/vue-scroller';
+export * from '@fastkit/vue-stack';
+export * from '@fastkit/vue-utils';
+export * from '@fastkit/vue-loading';
+
 export * from './schemes';
 export * from './composables';
 export * from './components';

package/src/plugin.tsx

@@ -7,12 +7,12 @@ import {
   VuiInjectionKey,
 } from './service';
 import {
-  installVueAppLayout,
   installVueStackPlugin,
   VueStackServiceOptions,
-  VueColorSchemePlugin,
-  onAppUnmount,
-} from '@fastkit/vue-kit';
+} from '@fastkit/vue-stack';
+import { VueColorSchemePlugin } from '@fastkit/vue-color-scheme';
+import { installVueAppLayout } from '@fastkit/vue-app-layout';
+import { onAppUnmount } from '@fastkit/vue-utils';
 import { VButton } from './components/VButton';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface

package/src/schemes/control.ts

@@ -1,10 +1,10 @@
 export const CONTROL_SIZES = ['sm', 'md', 'lg'] as const;
 
-export type ControlSize = typeof CONTROL_SIZES[number];
+export type ControlSize = (typeof CONTROL_SIZES)[number];
 
 export const CONTROL_FIELD_VARIANTS = ['outlined', 'filled', 'flat'] as const;
 
-export type ControlFieldVariant = typeof CONTROL_FIELD_VARIANTS[number];
+export type ControlFieldVariant = (typeof CONTROL_FIELD_VARIANTS)[number];
 
 export const CONTROL_LOADING_SPINNER_SIZES: Record<ControlSize, number> = {
   sm: 16,

package/src/service.tsx

@@ -4,20 +4,20 @@ import { VNodeChild, reactive, UnwrapNestedRefs } from 'vue';
 import { ScopeName, ColorVariant } from '@fastkit/color-scheme';
 import type { IconName, RawIconProp } from './components/VIcon';
 import {
-  type VueColorSchemePluginSettings,
   type VueStackService,
   type VDialogProps,
   type VStackControl,
-  type VNodeChildOrSlot,
   resolveVStackDynamicInput,
-} from '@fastkit/vue-kit';
+} from '@fastkit/vue-stack';
+import { type VNodeChildOrSlot } from '@fastkit/vue-utils';
+import { type VueColorSchemePluginSettings } from '@fastkit/vue-color-scheme';
 import type { Router } from 'vue-router';
 import { RouterLink, useLink, UseLinkOptions } from 'vue-router';
 import { LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
 import { VForm } from './components/VForm';
 import { VTextField, TextFieldInput } from './components/VTextField';
 import { VueForm, FormControlHinttipDelay } from '@fastkit/vue-form-control';
-import { getDocumentScroller } from '@fastkit/vue-scroller';
+import { getDocumentScroller, UseScroller } from '@fastkit/vue-scroller';
 import { ControlSize } from './schemes';
 
 export type UseLinkResult = ReturnType<typeof useLink>;
@@ -188,7 +188,7 @@ export class VuiService {
   readonly stack: VueStackService;
   readonly useLink: typeof useLink;
 
-  get scroller() {
+  get scroller(): UseScroller {
     return getDocumentScroller();
   }
 

package/src/styles/core/functions.scss

@@ -49,8 +49,8 @@
   touch-action: manipulation;
   cursor: pointer;
   user-select: none;
-  background-color: transparent;
-  border: 0;
+  // background-color: transparent;
+  border-width: 0;
   outline: 0;
   appearance: none;