@fastkit/vui 0.6.36 → 0.6.40

package/src/styles/variables.scss

@@ -0,0 +1,320 @@
+:root {
+  --root-em: 16px;
+  --root-spacing: 8px;
+
+  // =============================================
+  // transitions
+  // =============================================
+  --transition-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);
+  --transition-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1);
+  --transition-ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
+  --transition-fast-in-fast-out: cubic-bezier(0.25, 0.8, 0.25, 1);
+  --transition-swing: cubic-bezier(0.25, 0.8, 0.5, 1);
+  --transition-primary: var(--transition-swing);
+  --transition-tab: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+  --transition-fade: 0.2s;
+
+  // =============================================
+  // typographies
+  // =============================================
+  --typo-fallback-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  --type-emoji-font: 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typo-font: var(--typo-base-font), var(--typo-fallback-font),
+    var(--type-emoji-font);
+
+  // base
+  --typo-base-size: 1rem;
+  --typo-base-weight: 400;
+  --typo-base-height: 1.5;
+  --typo-base-spacing: 0em;
+
+  // h1
+  --typo-h1-size: 2.5rem;
+  --typo-h1-weight: 500;
+  --typo-h1-height: 1.2222222222222223;
+  --typo-h1-spacing: 0em;
+  --typo-h1-margin: 16px 0;
+  --typo-h1-color: var(--palette-heading);
+
+  // h2
+  --typo-h2-size: 1.875rem;
+  --typo-h2-weight: 500;
+  --typo-h2-height: 1.5;
+  --typo-h2-spacing: 0em;
+  --typo-h2-margin: 40px 0 10px;
+  --typo-h2-color: var(--palette-heading);
+
+  // h3
+  --typo-h3-size: 1.25rem;
+  --typo-h3-weight: 500;
+  --typo-h3-height: 1.5;
+  --typo-h3-spacing: 0em;
+  --typo-h3-margin: 20px 0 10px;
+  --typo-h3-color: var(--palette-heading);
+
+  // h4
+  --typo-h4-size: 1.25rem;
+  --typo-h4-weight: 400;
+  --typo-h4-height: 1.5;
+  --typo-h4-spacing: 0em;
+  --typo-h4-margin: 10px 0 16px;
+  --typo-h4-color: var(--palette-heading);
+
+  // h5
+  --typo-h5-size: 0.875rem;
+  --typo-h5-weight: 400;
+  --typo-h5-height: 1.57;
+  --typo-h5-spacing: 0em;
+  --typo-h5-margin: 10px 0 16px;
+  --typo-h5-color: var(--palette-heading);
+
+  // h6
+  --typo-h6-size: 0.67rem;
+  --typo-h6-weight: 400;
+  --typo-h6-height: 1.5;
+  --typo-h6-spacing: 0em;
+  --typo-h6-margin: 10px 0 16px;
+  --typo-h6-color: var(--palette-heading);
+
+  // subtitle1
+  --typo-subtitle1-size: 1rem;
+  --typo-subtitle1-weight: 400;
+  --typo-subtitle1-height: 1.75;
+  --typo-subtitle1-spacing: 0.00938em;
+
+  // subtitle2
+  --typo-subtitle2-size: 0.875rem;
+  --typo-subtitle2-weight: 500;
+  --typo-subtitle2-height: 1.57;
+  --typo-subtitle2-spacing: 0.00714em;
+
+  // small
+  --typo-sm-size: calc(var(--root-em) * 0.875);
+
+  // // body1
+  // --typo-body1-size: 1rem;
+  // --typo-body1-weight: 400;
+  // --typo-body1-height: 1.5;
+  // --typo-body1-spacing: 0.00938em;
+
+  // // body2
+  // --typo-body2-size: 0.875rem;
+  // --typo-body2-weight: 400;
+  // --typo-body2-height: 1.43;
+  // --typo-body2-spacing: 0.01071em;
+
+  // // button
+  // --typo-button-size: 0.875rem;
+  // --typo-button-weight: 500;
+  // --typo-button-height: 1.75;
+  // --typo-button-spacing: 0.02857em;
+
+  // // caption
+  // --typo-caption-size: 0.75rem;
+  // --typo-caption-weight: 400;
+  // --typo-caption-height: 1.66;
+  // --typo-caption-spacing: 0.03333em;
+
+  // // overline
+  // --typo-overline-size: 0.75rem;
+  // --typo-overline-weight: 400;
+  // --typo-overline-height: 2.66;
+  // --typo-overline-spacing: 0.08333em;
+
+  // =============================================
+  // controls
+  // =============================================
+
+  // control-field-height
+  --control-field-rem-sm: 0.875rem; // 14
+  --control-field-rem-md: 1rem; // 16
+  --control-field-rem-lg: 1.125rem; // 18
+
+  // control defaults
+  --control-disabled-color: rgba(0, 0, 0, 0.38);
+  --control-horizontal-margin: 0.5em; // 16
+  --control-field-radius: 2px;
+  --control-field-fill-color: rgba(0, 0, 0, 0.06);
+  --control-field-fill-hover-color: rgba(0, 0, 0, 0.09);
+  --control-field-outline-color: rgba(114, 106, 106, 0.23);
+  --control-field-outline-hover-color: rgba(0, 0, 0, 0.87);
+  --control-field-bottom-color: rgba(0, 0, 0, 0.42);
+  --control-field-bottom-hover-color: rgba(0, 0, 0, 0.87);
+  --control-field-height: 2.25em;
+  --control-field-line-height: 1.4375em;
+  --control-field-letter-spacing: 0.00938em;
+  --control-label-color: rgba(0, 0, 0, 0.6);
+  --control-label-font-weight: 500;
+  --control-label-font-size: 0.75em; // 12
+  --control-label-height: 1.4375em;
+  --control-message-color: rgba(0, 0, 0, 0.6);
+  --control-message-font-size: 0.75em; // 12
+  --control-message-horizontal-margin: calc(var(--root-spacing) * 0.5);
+  --control-checkable-outer-size: 2em; // 42
+  --control-checkable-icon-size: 1em; // 20
+  --control-checkable-faux-scale: 1.2;
+  --control-checkable-faux-margin: 0.2em;
+  --control-checkable-base-color: rgba(0, 0, 0, 0.6);
+  --control-switch-width: 3.625em; // 58
+  --control-switch-track-width: 2.125em; // 34
+  --control-switch-track-height: 0.875em; // 14
+
+  // =============================================
+  // wysiwygs
+  // =============================================
+  --wysiwyg-min-height-sm: 3em;
+  --wysiwyg-min-height-md: 6em;
+  --wysiwyg-min-height-lg: 9em;
+  --wysiwyg-max-height-sm: 9em;
+  --wysiwyg-max-height-md: 13em;
+  --wysiwyg-max-height-lg: 16em;
+
+  // shadows
+  --shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
+  --shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
+  --shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);
+
+  // shadows(umbra)
+  --shadow-key-umbra-0: 0px 0px 0px 0px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-1: 0px 2px 1px -1px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-2: 0px 3px 1px -2px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-3: 0px 3px 3px -2px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-4: 0px 2px 4px -1px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-5: 0px 3px 5px -1px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-6: 0px 3px 5px -1px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-7: 0px 4px 5px -2px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-8: 0px 5px 5px -3px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-9: 0px 5px 6px -3px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-10: 0px 6px 6px -3px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-11: 0px 6px 7px -4px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-12: 0px 7px 8px -4px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-13: 0px 7px 8px -4px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-14: 0px 7px 9px -4px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-15: 0px 8px 9px -5px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-16: 0px 8px 10px -5px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-17: 0px 8px 11px -5px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-18: 0px 9px 11px -5px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-19: 0px 9px 12px -6px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-20: 0px 10px 13px -6px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-21: 0px 10px 13px -6px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-22: 0px 10px 14px -6px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-23: 0px 11px 14px -7px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-24: 0px 11px 15px -7px var(--shadow-key-umbra-opacity);
+
+  // shadows(penumbra)
+  --shadow-key-penumbra-0: 0px 0px 0px 0px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-1: 0px 1px 1px 0px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-2: 0px 2px 2px 0px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-3: 0px 3px 4px 0px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-4: 0px 4px 5px 0px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-5: 0px 5px 8px 0px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-6: 0px 6px 10px 0px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-7: 0px 7px 10px 1px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-8: 0px 8px 10px 1px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-9: 0px 9px 12px 1px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-10: 0px 10px 14px 1px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-11: 0px 11px 15px 1px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-12: 0px 12px 17px 2px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-13: 0px 13px 19px 2px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-14: 0px 14px 21px 2px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-15: 0px 15px 22px 2px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-16: 0px 16px 24px 2px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-17: 0px 17px 26px 2px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-18: 0px 18px 28px 2px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-19: 0px 19px 29px 2px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-20: 0px 20px 31px 3px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-21: 0px 21px 33px 3px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-22: 0px 22px 35px 3px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-23: 0px 23px 36px 3px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-24: 0px 24px 38px 3px var(--shadow-key-penumbra-opacity);
+
+  // shadows(ambient)
+  --shadow-key-ambient-0: 0px 0px 0px 0px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-1: 0px 1px 3px 0px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-2: 0px 1px 5px 0px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-3: 0px 1px 8px 0px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-4: 0px 1px 10px 0px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-5: 0px 1px 14px 0px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-6: 0px 1px 18px 0px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-7: 0px 2px 16px 1px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-8: 0px 3px 14px 2px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-9: 0px 3px 16px 2px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-10: 0px 4px 18px 3px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-11: 0px 4px 20px 3px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-12: 0px 5px 22px 4px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-13: 0px 5px 24px 4px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-14: 0px 5px 26px 4px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-15: 0px 6px 28px 5px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-16: 0px 6px 30px 5px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-17: 0px 6px 32px 5px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-18: 0px 7px 34px 6px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-19: 0px 7px 36px 6px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-20: 0px 8px 38px 7px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-21: 0px 8px 40px 7px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-22: 0px 8px 42px 7px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-23: 0px 9px 44px 8px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-24: 0px 9px 46px 8px var(--shadow-key-ambient-opacity);
+
+  // toolbar
+  --toolbar-height: var(--v-app-layout-vertial-fixed-height);
+  --toolbar-dense-height: calc(var(--toolbar-height) * 0.8);
+
+  // card
+  --card-content-padding: 1rem; // 16px
+  --card-actions-padding: 0.5rem; // 8px
+
+  // pagination
+  --pagination-item-radius: 2px;
+  --pagination-item-font-size: var(--root-em);
+  --pagination-item-size: calc(var(--root-em) * 2);
+  --pagination-item-margin: calc(var(--root-em) * 0.5);
+  --pagination-item-font-size-dense: calc(
+    var(--pagination-item-font-size) * 0.625
+  );
+  --pagination-item-size-dense: calc(var(--pagination-item-size) * 0.8125);
+  --pagination-item-margin-dense: calc(var(--pagination-item-margin) * 0.75);
+
+  // table
+  --table-vertical-margin: calc(var(--root-em) * 1.25);
+  --table-font-size: calc(var(--root-em) * 0.75);
+  --table-caption-font-size: calc(var(--root-em) * 1);
+  --table-caption-font-weight: regular;
+  --table-caption-vertical-margin: calc(var(--root-em) * 0.625);
+  --table-cell-height: calc(var(--root-em) * 3.125);
+  --table-cell-vertial-padding: calc(var(--root-em) * 0.3125);
+  --table-cell-horizontal-padding: calc(var(--root-em) * 1);
+  --table-header-color: var(--palette-primary);
+  --table-header-font-weight: 500;
+
+  // tabs
+  --tabs-height: calc(var(--root-em) * 3);
+  --tabs-bar-height: calc(var(--root-em) * 0.375);
+  // --tabs-color: var(--main-color);
+  --tabs-font-size: calc(var(--root-em) * 0.875);
+
+  // breadcrumbs
+  --breadcrumbs-font-size: var(--typo-sm-size);
+}
+
+:root,
+[lang='en'] {
+  --typo-base-font: Roboto, 'Noto Sans';
+}
+
+[lang='ja'] {
+  --typo-base-font: Roboto, 'Noto Sans JP';
+}
+
+[lang='ko'] {
+  --typo-base-font: Roboto, 'Noto Sans KR';
+}
+
+[lang='zh-cmn-Hant'] {
+  --typo-base-font: Roboto, 'Noto Sans TC';
+}
+
+[lang='zh-cmn-Hans'] {
+  --typo-base-font: Roboto, 'Noto Sans SC';
+}

package/src/styles/wysiwyg.scss

@@ -0,0 +1,24 @@
+.wysiwyg {
+  & > h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  ul,
+  ol,
+  table {
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  p {
+    margin: 0;
+  }
+}

package/src/tool/index.ts

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

package/src/tool/vite-plugin.ts

@@ -0,0 +1,281 @@
+import { Plugin } from 'vite';
+import { dynamicSrcVitePlugin } from '@fastkit/vite-kit';
+import path from 'path';
+import fs from 'fs-extra';
+import { findPackageDirSync } 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(__dirname, '../..');
+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/dist/vue-stack.css';
+import '@fastkit/vue-app-layout/dist/vue-app-layout.css';
+import '@fastkit/vue-loading/dist/vue-loading.css';
+import '@fastkit/vue-scroller/dist/vue-scroller.css';
+import '@fastkit/vui/dist/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, VuiPluginOptions } 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 }) {
+  _installVuiPlugin(settings.app, {
+    RouterLink: VPageLink,
+    colorScheme,
+    uiSettings: <%~ it.uiSettings %>,
+    icons: <%~ it.icons %>,
+    ...settings,
+  });
+}
+
+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() {
+  // const pkgDir = findPackageDirSync();
+  // if (!pkgDir) {
+  //   throw new Error(`missing package directory`);
+  // }
+  // return path.join(pkgDir, '.vui');
+  return path.resolve('.vui');
+}
+
+function getBuiltinsDir() {
+  // const cwd = process.cwd();
+  const pkgDir = findPackageDirSync(undefined, true);
+  if (!pkgDir) {
+    throw new Error(`missing package directory`);
+  }
+
+  // For development...
+  // console.log('■■■', cwd);
+  // if (cwd.endsWith('/docs')) {
+  //   const result = path.resolve(cwd, '../packages/vui/src/assets/builtins');
+  //   return result;
+  // }
+
+  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;
+  onBootError?: (err: unknown) => any;
+  __dev?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+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,
+      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,
+      // 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) {
+    // if (options.__dev) {
+    //   dynamicDest = path.resolve(__dirname, '../../../../docs/.vui');
+    // } else {
+    //   dynamicDest = defaultDynamicDest();
+    // }
+    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\//);
+      // ssr.noExternal.push(/\/fastkit\//);
+
+      (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,
+  };
+}