@fastkit/vui 0.12.7 → 0.12.9

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 };

package/dist/tool/vite-plugin.d.ts

@@ -1,25 +0,0 @@
-import { Plugin } from 'vite';
-import { RawIconFontEntry, IconFontSettings } from '@fastkit/icon-font-gen';
-import { VuiServiceOptions } from '../service';
-export interface ViteVuiPluginOptions extends Partial<Pick<VuiServiceOptions, 'uiSettings' | 'icons'>> {
-    dynamicDest?: string;
-    colorScheme?: string;
-    mediaMatch?: string;
-    iconFont?: RawIconFontEntry[];
-    iconFontDefaults?: IconFontSettings;
-    onBooted?: (() => any) | (() => Promise<any>);
-    onBootError?: ((err: unknown) => any) | ((err: unknown) => Promise<any>);
-    __dev?: boolean;
-}
-export interface ViteVuiPluginResultSettings extends Pick<VuiServiceOptions, 'uiSettings' | 'icons'> {
-    colorScheme: string;
-    mediaMatch: string;
-    __dev?: boolean;
-}
-export interface ViteVuiPluginResult {
-    settings: ViteVuiPluginResultSettings;
-    plugins: (Plugin | Plugin[])[];
-    dest: string;
-}
-export declare function viteVuiPlugin(options?: ViteVuiPluginOptions): ViteVuiPluginResult;
-//# sourceMappingURL=vite-plugin.d.ts.map

package/dist/tool/vite-plugin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAK9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAmF/C,MAAM,WAAW,oBACf,SAAQ,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAC3B,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CAqJrB"}

package/src/assets/builtins/color-scheme.ts

@@ -1,9 +0,0 @@
-import { createSimpleColorScheme } from '@fastkit/color-scheme-gen';
-
-const scheme = createSimpleColorScheme({
-  // primary: '#28bebd',
-  // secondary: '#484d55',
-  // default: '#2f495e',
-});
-
-export default scheme;

package/src/assets/builtins/media-match.ts

@@ -1,3 +0,0 @@
-import { createRecommendedSettings } from '@fastkit/media-match-gen';
-
-export default createRecommendedSettings();

package/src/tool/index.ts

@@ -1,2 +0,0 @@
-export * from './vite-plugin';
-// export * from './nuxt-module';

package/src/tool/vite-plugin.ts

@@ -1,266 +0,0 @@
-import { Plugin } from 'vite';
-import { dynamicSrcVitePlugin } from '@fastkit/vite-kit';
-import path from 'node:path';
-import fs from 'fs-extra';
-import { findPackageDirSync, getDirname } from '@fastkit/node-util';
-import { RawIconFontEntry, IconFontSettings } from '@fastkit/icon-font-gen';
-import { VuiServiceOptions } from '../service';
-import { render } from 'eta';
-import { VuiError } from '../logger';
-
-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,
-}: ViteVuiPluginResultSettings) {
-  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');
-}
-
-export interface ViteVuiPluginOptions
-  extends Partial<Pick<VuiServiceOptions, 'uiSettings' | 'icons'>> {
-  dynamicDest?: string;
-  colorScheme?: string;
-  mediaMatch?: string;
-  iconFont?: RawIconFontEntry[];
-  iconFontDefaults?: IconFontSettings;
-  onBooted?: (() => any) | (() => Promise<any>);
-  onBootError?: ((err: unknown) => any) | ((err: unknown) => Promise<any>);
-  __dev?: boolean;
-}
-
-export interface ViteVuiPluginResultSettings
-  extends Pick<VuiServiceOptions, 'uiSettings' | 'icons'> {
-  colorScheme: string;
-  mediaMatch: string;
-  __dev?: boolean;
-}
-
-export interface ViteVuiPluginResult {
-  settings: ViteVuiPluginResultSettings;
-  plugins: (Plugin | Plugin[])[];
-  dest: string;
-}
-
-export function viteVuiPlugin(
-  options: ViteVuiPluginOptions = {},
-): ViteVuiPluginResult {
-  const plugins: (Plugin | Plugin[])[] = [];
-
-  const builtinsDir = getBuiltinsDir();
-  const {
-    colorScheme = path.join(builtinsDir, 'color-scheme'),
-    mediaMatch = path.join(builtinsDir, 'media-match'),
-    iconFont,
-    iconFontDefaults,
-    onBooted,
-    onBootError,
-    uiSettings = {
-      primaryScope: 'primary' as any,
-      plainVariant: 'plain' as any,
-      containedVariant: 'contained' as any,
-      warningScope: 'warning' as any,
-      errorScope: 'error' as any,
-      buttonDefault: {
-        color: 'base' as any,
-        variant: 'contained' as any,
-      },
-      tabDefault: {
-        color: 'accent' as any,
-      },
-      dialogOk: {
-        color: 'primary' as any,
-      },
-    },
-    icons = {
-      menuDown: 'mdi-menu-down' as any,
-      navigationExpand: 'mdi-menu-down' as any,
-      prev: 'mdi-chevron-left' as any,
-      next: 'mdi-chevron-right' as any,
-      sort: 'mdi-chevron-down' as any,
-      editorTextColor: 'mdi-format-color-text' as any,
-      editorformatBold: 'mdi-format-bold' as any,
-      editorformatUnderline: 'mdi-format-underline' as any,
-      editorformatItalic: 'mdi-format-italic' as any,
-      editorformatListBulleted: 'mdi-format-list-bulleted' as any,
-      editorformatListNumbered: 'mdi-format-list-numbered' as any,
-      editorLink: 'mdi-link' as any,
-      editorLinkOff: 'mdi-link-off' as any,
-      editorUndo: 'mdi-undo-variant' as any,
-      editorRedo: 'mdi-redo-variant' as any,
-      hinttip: 'mdi-help-circle-outline' as any,
-      clear: 'mdi-close' as any,
-      reload: 'mdi-reload' as any,
-      // navigationExpand: (gen, active) => {
-      //   return gen({
-      //     name: 'mdi-menu-down' as any,
-      //     rotate: active ? 180 : 0,
-      //   });
-      // },
-      ...options.icons,
-    } as VuiServiceOptions['icons'],
-    __dev,
-  } = options;
-
-  let dynamicDest: string;
-
-  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: RawIconFontEntry[] = 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: Plugin = {
-    name: 'vite:vui',
-    enforce: 'pre',
-    async config(config) {
-      await fs.writeFile(
-        path.join(dynamicDest, 'installer.ts'),
-        await renderTemplate(settings),
-      );
-
-      const ssr = (config as any).ssr || {};
-      ssr.noExternal = ssr.noExternal || [];
-      ssr.noExternal.push(/\/vui\/dist\/assets\//);
-
-      (config as any).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,
-  };
-}