@fastkit/vui 0.12.8 → 0.12.9

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;
 

package/src/styles/index.scss

@@ -1,9 +1,23 @@
-// @use '@fastkit/stylebase/normalize.css';
-@use '../../../stylebase/normalize.css';
-@use './variables.scss';
-@use './base.scss';
-@use './typo.scss';
-@use './elevation.scss';
-@use './group.scss';
-@use './control.scss';
-@use './wysiwyg.scss';
+@use 'sass:meta';
+
+@layer vui-normalize, vui-color-scheme, vui;
+
+@layer vui-normalize {
+  @include meta.load-css('@fastkit/stylebase/normalize.css');
+
+  button {
+    background-color: transparent;
+  }
+}
+
+@layer vui {
+  // @include meta.load-css('@fastkit/stylebase/normalize.css');
+
+  @include meta.load-css('./variables.scss');
+  @include meta.load-css('./base.scss');
+  @include meta.load-css('./typo.scss');
+  @include meta.load-css('./elevation.scss');
+  @include meta.load-css('./group.scss');
+  @include meta.load-css('./control.scss');
+  @include meta.load-css('./wysiwyg.scss');
+}

package/dist/tool/index.d.ts

@@ -1,2 +0,0 @@
-export * from './vite-plugin';
-//# sourceMappingURL=index.d.ts.map

package/dist/tool/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/tool/index.mjs

@@ -1,193 +0,0 @@
-import { dynamicSrcVitePlugin } from '@fastkit/vite-kit';
-import path from 'node:path';
-import fs from 'fs-extra';
-import { getDirname, findPackageDirSync } from '@fastkit/node-util';
-import { render } from 'eta';
-import { TinyLogger, createTinyError } from '@fastkit/tiny-logger';
-
-const name = 'vui';
-new TinyLogger(name);
-const VuiError = createTinyError(name);
-
-const VUI_PACKAGE_DIR = path.resolve(getDirname(import.meta.url), '../..');
-const STYLE_AFTER_EFFECTS_PATH = path.join(VUI_PACKAGE_DIR, 'src/styles/after-effects.scss');
-const COLOR_DUMP_STYLE = `@include dump-color-scheme(true);`;
-const TEMPLATE = `
-/* eslint-disable */
-// @ts-nocheck
-<% if (!it.__dev) { %>
-import '@fastkit/vue-stack/vue-stack.css';
-import '@fastkit/vue-app-layout/vue-app-layout.css';
-import '@fastkit/vue-loading/vue-loading.css';
-import '@fastkit/vue-scroller/vue-scroller.css';
-import '@fastkit/vui/vui.css';
-<% } %>
-import './setup.scss';
-import type { App } from 'vue';
-import type { Router } from 'vue-router';
-import { VPageLink } from '@fastkit/vue-page';
-import { installVuiPlugin as _installVuiPlugin, RawVuiPluginOptions, mergeVuiPluginOptions } from '@fastkit/vui';
-import { colorScheme } from '<%~ it.colorScheme %>';
-import '<%~ it.mediaMatch %>';
-import './icon-font';
-import '${STYLE_AFTER_EFFECTS_PATH}';
-
-export function installVui(settings: { app: App, router: Router }, options?: RawVuiPluginOptions) {
-  const merged = mergeVuiPluginOptions({
-    RouterLink: VPageLink,
-    colorScheme,
-    uiSettings: <%~ it.uiSettings %>,
-    icons: <%~ it.icons %>,
-    ...settings,
-  }, options);
-  _installVuiPlugin(settings.app, merged);
-}
-
-export default installVui;
-`.trim();
-async function renderTemplate({ colorScheme, mediaMatch, uiSettings, icons, __dev, }) {
-    const result = await render(TEMPLATE, {
-        colorScheme,
-        mediaMatch,
-        uiSettings: JSON.stringify(uiSettings),
-        icons: JSON.stringify(icons),
-        __dev,
-    }, { async: true });
-    if (!result) {
-        throw new VuiError('template render error.');
-    }
-    return result;
-}
-function defaultDynamicDest() {
-    return path.resolve('.vui');
-}
-function getBuiltinsDir() {
-    const pkgDir = findPackageDirSync(undefined, true);
-    if (!pkgDir) {
-        throw new Error(`missing package directory`);
-    }
-    return path.join(pkgDir, 'node_modules/@fastkit/vui/dist/assets/builtins');
-}
-function viteVuiPlugin(options = {}) {
-    const plugins = [];
-    const builtinsDir = getBuiltinsDir();
-    const { colorScheme = path.join(builtinsDir, 'color-scheme'), mediaMatch = path.join(builtinsDir, 'media-match'), iconFont, iconFontDefaults, onBooted, onBootError, uiSettings = {
-        primaryScope: 'primary',
-        plainVariant: 'plain',
-        containedVariant: 'contained',
-        warningScope: 'warning',
-        errorScope: 'error',
-        buttonDefault: {
-            color: 'base',
-            variant: 'contained',
-        },
-        tabDefault: {
-            color: 'accent',
-        },
-        dialogOk: {
-            color: 'primary',
-        },
-    }, icons = {
-        menuDown: 'mdi-menu-down',
-        navigationExpand: 'mdi-menu-down',
-        prev: 'mdi-chevron-left',
-        next: 'mdi-chevron-right',
-        sort: 'mdi-chevron-down',
-        editorTextColor: 'mdi-format-color-text',
-        editorformatBold: 'mdi-format-bold',
-        editorformatUnderline: 'mdi-format-underline',
-        editorformatItalic: 'mdi-format-italic',
-        editorformatListBulleted: 'mdi-format-list-bulleted',
-        editorformatListNumbered: 'mdi-format-list-numbered',
-        editorLink: 'mdi-link',
-        editorLinkOff: 'mdi-link-off',
-        editorUndo: 'mdi-undo-variant',
-        editorRedo: 'mdi-redo-variant',
-        hinttip: 'mdi-help-circle-outline',
-        clear: 'mdi-close',
-        reload: 'mdi-reload',
-        // navigationExpand: (gen, active) => {
-        //   return gen({
-        //     name: 'mdi-menu-down' as any,
-        //     rotate: active ? 180 : 0,
-        //   });
-        // },
-        ...options.icons,
-    }, __dev, } = options;
-    let dynamicDest;
-    const { dynamicDest: _dynamicDest } = options;
-    if (!_dynamicDest) {
-        dynamicDest = defaultDynamicDest();
-    }
-    else {
-        dynamicDest = _dynamicDest;
-    }
-    const colorSchemeSrc = path.resolve(colorScheme);
-    const colorSchemeDest = path.join(dynamicDest, 'color-scheme');
-    const mediaMatchDest = path.join(dynamicDest, 'media-match');
-    const dts = `
-/// <reference path="./color-scheme/color-scheme.info.ts" />
-/// <reference path="./icon-font/index.ts" />
-/// <reference path="./media-match/media-match.ts" />
-export {};
-  `.trim();
-    fs.ensureDirSync(dynamicDest);
-    fs.writeFileSync(path.join(dynamicDest, 'setup.scss'), COLOR_DUMP_STYLE);
-    fs.writeFileSync(path.join(dynamicDest, 'vui.d.ts'), dts);
-    let iconFontEntries = iconFont || [
-        {
-            src: '@mdi',
-        },
-    ];
-    if (iconFontDefaults) {
-        iconFontEntries = iconFontEntries.map((entry) => {
-            return {
-                ...iconFontDefaults,
-                ...entry,
-            };
-        });
-    }
-    plugins.push(dynamicSrcVitePlugin({
-        colorScheme: {
-            src: colorSchemeSrc,
-            dest: colorSchemeDest,
-        },
-        mediaMatch: {
-            src: path.resolve(mediaMatch),
-            dest: mediaMatchDest,
-        },
-        iconFont: {
-            entries: iconFontEntries,
-            dest: path.join(dynamicDest, 'icon-font'),
-        },
-        onBooted,
-        onBootError,
-    }));
-    const plugin = {
-        name: 'vite:vui',
-        enforce: 'pre',
-        async config(config) {
-            await fs.writeFile(path.join(dynamicDest, 'installer.ts'), await renderTemplate(settings));
-            const ssr = config.ssr || {};
-            ssr.noExternal = ssr.noExternal || [];
-            ssr.noExternal.push(/\/vui\/dist\/assets\//);
-            config.ssr = ssr;
-            return config;
-        },
-    };
-    plugins.push(plugin);
-    const settings = {
-        colorScheme: path.join(colorSchemeDest, 'color-scheme.info'),
-        mediaMatch: path.join(mediaMatchDest, 'media-match'),
-        uiSettings,
-        icons,
-        __dev,
-    };
-    return {
-        plugins,
-        dest: dynamicDest,
-        settings,
-    };
-}
-
-export { viteVuiPlugin };