feat: 更新表单组件，简化代码结构并添加调试插件

2024-11-25 10:33:01 +08:00
parent 07320f09b0
commit 7bb954e348
11 changed files with 152 additions and 185 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -5,6 +5,9 @@
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar",
  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "file",
  "typescript.tsdk": "node_modules/typescript/lib",
--- a/formkit.config.addAsteriskPlugin.ts
+++ b/formkit.config.addAsteriskPlugin.ts
@ -1,40 +0,0 @@
-import type { FormKitNode } from "@formkit/core";
-
-const legends = ['checkbox_multi', 'radio_multi', 'repeater', 'transferlist'];
-export function addAsteriskPlugin(node: FormKitNode) {
-  if (['button', 'submit', 'hidden', 'group', 'list', 'meta'].includes(node.props.type)) return;
-
-  node.on('created', () => {
-    const legendOrLabel = legends.includes(`${node.props.type}${node.props.options ? '_multi' : ''}`) ? 'legend' : 'label';
-
-    console.group('[node created]', node.props.label || node.props.submitLabel)
-    console.debug(`node :>> `, node);
-    console.debug(`node.props.definition :>> `, node.props.definition);
-    // if (typeof node.props.definition!.schema === 'function') {
-    //   console.debug(`node.props.definition.schema.call :>> `, node.props.definition!.schema.call(node.props.definition, {}));
-    // }
-    console.debug(`legendOrLabel :>> `, legendOrLabel);
-    console.groupEnd()
-    if (!node.props.definition) return;
-
-    if (node.props.definition.schemaMemoKey) {
-      node.props.definition.schemaMemoKey += `${node.props.options ? '_multi' : ''}_add_asterisk`;
-    };
-
-    const schemaFn = node.props.definition.schema!;
-    node.props.definition!.schema = (sectionsSchema = {}) => {
-      sectionsSchema[legendOrLabel] = {
-        children: ['$label', {
-          $el: 'span',
-          if: '$state.required',
-          attrs: {
-            class: '$classes.asterisk',
-          },
-          children: ['*']
-        }]
-      }
-
-      return typeof schemaFn === 'function' ? schemaFn(sectionsSchema) : schemaFn
-    }
-  })
-}
--- a/formkit.config.fkLibrary.ts
+++ b/formkit.config.fkLibrary.ts
@ -1,25 +0,0 @@
-import {
-  checkbox,
-  form,
-  group,
-  list,
-  number,
-  range,
-  submit,
-  text,
-  textarea,
-} from "@formkit/inputs";
-
-// https://unocss.dev/presets/wind#differences-from-tailwind-css
-
-export const fkLibrary = {
-  text,
-  form,
-  submit,
-  group,
-  checkbox,
-  range,
-  list,
-  number,
-  textarea,
-};
--- a/formkit.config.plugin.addAsteriskPlugin.ts
+++ b/formkit.config.plugin.addAsteriskPlugin.ts
@ -0,0 +1,37 @@
+import type { FormKitExtendableSchemaRoot, FormKitNode } from '@formkit/core';
+
+const legends = ['checkbox_multi', 'radio_multi', 'repeater', 'transferlist'];
+export function addAsteriskPlugin(node: FormKitNode) {
+  if (['button', 'submit', 'hidden', 'group', 'list', 'meta'].includes(node.props.type)) return;
+
+  node.on('created', () => {
+    const legendOrLabel = legends.includes(`${node.props.type}${node.props.options ? '_multi' : ''}`)
+      ? 'legend'
+      : 'label';
+
+    if (!node.props.definition) return;
+
+    if (node.props.definition.schemaMemoKey) {
+      node.props.definition.schemaMemoKey += `${node.props.options ? '_multi' : ''}_add_asterisk`;
+    }
+
+    const schemaFn = node.props.definition.schema! as FormKitExtendableSchemaRoot;
+    node.props.definition!.schema = (sectionsSchema = {}) => {
+      sectionsSchema[legendOrLabel] = {
+        children: [
+          '$label',
+          {
+            $el: 'span',
+            if: '$state.required',
+            attrs: {
+              class: '$classes.asterisk',
+            },
+            children: ['*'],
+          },
+        ],
+      };
+
+      return schemaFn(sectionsSchema);
+    };
+  });
+}
--- a/formkit.config.plugin.debug.ts
+++ b/formkit.config.plugin.debug.ts
@ -0,0 +1,10 @@
+export function debugPlugin(node: import('@formkit/core').FormKitNode) {
+  if (['button', 'submit', 'hidden', 'group', 'list', 'meta'].includes(node.props.type)) return;
+
+  node.on('created', () => {
+    console.group('[node created]', node.props.label || node.props.submitLabel);
+    console.debug(`node :>> `, node);
+    console.debug(`node.props.definition :>> `, node.props.definition);
+    console.groupEnd();
+  });
+}
--- a/formkit.config.theme.ts
+++ b/formkit.config.theme.ts
@ -10,55 +10,43 @@ import type { FormKitNode } from '@formkit/core'
  * @theme - regenesis
  **/

-/**
- * This is the theme function itself, it should be imported and used as the
- * config.rootClasses function. For example:
- *
- * ```js
- * import { theme } from './formkit.theme'
- * import { defineFormKitConfig } from '@formkit/vue'
- *
- * export default defineFormKitConfig({
- *   config: {
- *     rootClasses: theme
- *   }
- * })
- * ```
- **/
-export function rootClasses(sectionName: string, node: FormKitNode): Record<string, boolean> {
-
-  const key = `${node.props.type}__${sectionName}`
-  const semanticKey = `formkit-${sectionName}`
-  const familyKey = node.props.family ? `family:${node.props.family}__${sectionName}` : ''
-  const memoKey = `${key}__${familyKey}`
-  if (!(memoKey in classes)) {
-    setTimeout(() => {
-      // console.group(`rootClasses(${sectionName}) ${memoKey}`)
-      // console.debug(`key :>> `, key);
-      // console.debug(`semanticKey :>> `, semanticKey);
-      // console.debug(`familyKey :>> `, familyKey);
-      // console.debug(`memoKey :>> `, memoKey);
-      // console.debug(`classes[key] :>> `, classes[key]);
-      // console.debug(`globals[sectionName] :>> `, globals[sectionName]);
-      // console.groupEnd()
-    }, 1000);
-
-    const sectionClasses = classes[key] ?? globals[sectionName] ?? {}
-    sectionClasses[semanticKey] = true
-    if (familyKey in classes) {
-      classes[memoKey] = { ...classes[familyKey], ...sectionClasses }
-    } else {
-      classes[memoKey] = sectionClasses
-    }
-  }
-  return classes[memoKey] ?? { [semanticKey]: true }
-}
+ /**
+  * This is the theme function itself, it should be imported and used as the
+  * config.rootClasses function. For example:
+  *
+  * ```js
+  * import { theme } from './formkit.theme'
+  * import { defineFormKitConfig } from '@formkit/vue'
+  *
+  * export default defineFormKitConfig({
+  *   config: {
+  *     rootClasses: theme
+  *   }
+  * })
+  * ```
+  **/
+ export function rootClasses (sectionName: string, node: FormKitNode): Record<string, boolean> {
+   const key = `${node.props.type}__${sectionName}`
+   const semanticKey = `formkit-${sectionName}`
+   const familyKey = node.props.family ? `family:${node.props.family}__${sectionName}` : ''
+   const memoKey = `${key}__${familyKey}`
+   if (!(memoKey in classes)) {
+     const sectionClasses = classes[key] ?? globals[sectionName] ?? {}
+     sectionClasses[semanticKey] = true
+     if (familyKey in classes) {
+       classes[memoKey] = { ...classes[familyKey],  ...sectionClasses }
+     } else {
+       classes[memoKey] = sectionClasses
+     }
+   }
+   return classes[memoKey] ?? { [semanticKey]: true }
+ }

 /**
 * These classes have already been merged with globals using tailwind-merge
 * and are ready to be used directly in the theme.
 **/
-export const classes: Record<string, Record<string, boolean>> = {
+const classes: Record<string, Record<string, boolean>> = {
  "family:button__wrapper": {
    "group-data-[disabled=true]:grayscale": true
  },
@ -3300,7 +3288,7 @@ export const classes: Record<string, Record<string, boolean>> = {
 * Globals are merged prior to generating this file — these are included for
 * any other non-matching inputs.
 **/
-export const globals: Record<string, Record<string, boolean>> = {
+const globals: Record<string, Record<string, boolean>> = {
  "outer": {
    "group": true,
    "max-w-[20em]": true,
--- a/formkit.config.ts
+++ b/formkit.config.ts
@ -1,65 +1,59 @@
-import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formkit/addons'
-import type { FormKitNode, FormKitOptions } from '@formkit/core'
-import { createI18nPlugin, zh } from '@formkit/i18n'
-import { genesisIcons } from '@formkit/icons'
-import { createLibraryPlugin, submit, text } from '@formkit/inputs'
-import { createProPlugin, toggle } from '@formkit/pro'
-import * as defaultRules from '@formkit/rules'
-import { createThemePlugin } from '@formkit/themes'
-import { createValidationPlugin } from '@formkit/validation'
-import { /* defaultConfig, */ bindings, createInput } from '@formkit/vue'
-import { addAsteriskPlugin } from './formkit.config.addAsteriskPlugin'
-// import { fkLibrary } from './formkit.config.fkLibrary'
-// import { rootClasses } from "./formkit.config.theme"
-import HeadlessuiToggle from "./src/headlessui-switch.vue"
-import { register as decodeErrors } from '@formkit/dev'
-
-decodeErrors();
-
-const validation = createValidationPlugin(defaultRules)
-
-const theme = undefined;
-const icons = genesisIcons;
+import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formkit/addons';
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue';
+import type { FormKitOptions } from '@formkit/core';
+import { register as decodeErrors } from '@formkit/dev';
+import { createI18nPlugin, zh } from '@formkit/i18n';
+import { createLibraryPlugin, submit, text } from '@formkit/inputs';
+import * as defaultRules from '@formkit/rules';
+import { createValidationPlugin } from '@formkit/validation';
+import { /* defaultConfig, */ bindings, plugin /* defaultConfig */ } from '@formkit/vue';
+import type { App } from 'vue';
+import { addAsteriskPlugin } from './formkit.config.plugin.addAsteriskPlugin';
+import { debugPlugin } from './formkit.config.plugin.debug';
+import { form } from '@/__fk-inputs__/inputs/form';

 // const apiKey = 'fk-6cdd5192223'
-export default {
+const config: FormKitOptions = {
  plugins: [
-    // createProPlugin(apiKey, { toggle }),
-    // createLibraryPlugin(fkLibrary),
-    createLibraryPlugin({
-      text,
-      submit,
-    }),
-    // createLibraryPlugin(
-    //   {
-    //     'headlessuiSwitch': createInput(HeadlessuiToggle),
-    //   }
+    ...[
+      // createProPlugin(apiKey, { toggle }),
+      // createLibraryPlugin(fkLibrary),
+      createLibraryPlugin({
+        form,
+        submit,
+        text,
+      }),
+      // createLibraryPlugin(
+      //   {
+      //     'headlessuiSwitch': createInput(HeadlessuiToggle),
+      //   }
+      // ),
+    ],
+    // createThemePlugin(
+    //   theme: undefined /* icons: genesisIcons, iconLoaderUrl, iconLoader */,
    // ),
-    createThemePlugin(theme, icons/* , iconLoaderUrl, iconLoader */),
    bindings,
    createI18nPlugin({ zh }),
-    validation,
+    createValidationPlugin(defaultRules),
    addAsteriskPlugin,
-
-    // https://github.com/formkit/formkit/blob/ac1947a305eb5082ba95f53800305d080787cb32/packages/addons/src/plugins/autoHeightTextarea.ts
-    createAutoHeightTextareaPlugin(),
-
-    // https://auto-animate.formkit.com/#usage
-    // https://github.com/formkit/auto-animate/
-    // https://github.com/formkit/formkit/blob/46d64d05c1b37875fc6227853f2bcfa987550c91/packages/addons/src/plugins/autoAnimatePlugin.ts
+    createAutoHeightTextareaPlugin(/* https://github.com/formkit/formkit/blob/ac1947a305eb5082ba95f53800305d080787cb32/packages/addons/src/plugins/autoHeightTextarea.ts */),
    createAutoAnimatePlugin(
+      // https://auto-animate.formkit.com/#usage
+      // https://github.com/formkit/auto-animate/
+      // https://github.com/formkit/formkit/blob/46d64d05c1b37875fc6227853f2bcfa987550c91/packages/addons/src/plugins/autoAnimatePlugin.ts
      {
        duration: 250,
        easing: 'ease-in-out',
      },
-      // {
-      //   /* optional animation targets object */
-      //   // default:
-      //   global: ['outer', 'inner'],
-      //   form: ['form'],
-      //   repeater: ['items'],
-      // }
-    )
+      {
+        /* optional animation targets object */
+        // default:
+        global: ['outer', 'inner'],
+        form: ['form'],
+        repeater: ['items'],
+      },
+    ),
+    debugPlugin,
  ],
  config: {
    // rootClasses: false,
@ -68,4 +62,10 @@ export default {
    //   console.debug(`sectionName :>> `, sectionName);
    // }
  },
-} satisfies FormKitOptions
+};
+
+export function setupFormKit(app: App) {
+  decodeErrors();
+  app.use(plugin, config);
+  app.use(autoAnimatePlugin); // v-auto-animate="{ duration: 100 }"
+}
--- a/src/fk-inputs/inputs/_demo_text.ts
+++ b/src/fk-inputs/inputs/_demo_text.ts
@ -1,16 +1,15 @@
 import { FormKitTypeDefinition } from '@formkit/core'
 import {
-  outer,
-  inner,
-  wrapper,
-  label,
+  casts,
  help,
  icon,
+  inner,
+  label,
+  outer,
  prefix,
  suffix,
  textInput,
-  casts,
-  createSection,
+  wrapper
 } from '@formkit/inputs'
 import { messages } from '../sections/messages'

--- a/src/all-custom/all-custom.vue
+++ b/src/all-custom/all-custom.vue
@ -31,7 +31,7 @@ async function submit() {
          label: 'font-medium block'
        }
      }"
-      :type="form"
+      type="form"
      #default="{ value }"
      @submit="submit"
      submit-label="提交 ✨"
--- a/src/main.ts
+++ b/src/main.ts
@ -1,13 +1,9 @@
-import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
-import { plugin, /* defaultConfig */ } from '@formkit/vue'
-import { createApp } from 'vue'
-import formKitConfig from '../formkit.config'
-import App from './App.vue'
-
+import Aura from "@primevue/themes/aura";
 import PrimeVue from "primevue/config";
-import Aura from '@primevue/themes/aura';
-import ToastService from 'primevue/toastservice';
-
+import ToastService from "primevue/toastservice";
+import { createApp } from "vue";
+import { setupFormKit } from "../formkit.config";
+import App from "./App.vue";

 // import '@unocss/reset/normalize.css'
 // import '@unocss/reset/sanitize/sanitize.css'
@ -16,16 +12,15 @@ import ToastService from 'primevue/toastservice';
 // import '@unocss/reset/tailwind-compat.css'
 // import '@unocss/reset/tailwind.css'

-import 'virtual:uno.css'
-import 'primeicons/primeicons.css'
+import "primeicons/primeicons.css";
+import "virtual:uno.css";

-const app = createApp(App)
+const app = createApp(App);
 app.use(PrimeVue, { theme: { preset: Aura } });
 app.use(ToastService);

-
 // https://github.dev/formkit/auto-animate/blob/master/docs/src/examples/formkit/ActualFormKit.vue
-app.use(autoAnimatePlugin) // v-auto-animate="{ duration: 100 }"

-app.use(plugin, formKitConfig)
-app.mount('#app')
+setupFormKit(app);
+
+app.mount("#app");
--- a/src/tutorial-form/index.vue
+++ b/src/tutorial-form/index.vue
@ -220,7 +220,7 @@ onMounted(() => {

      <div class="bg-gray-100 p-4 rounded-xl dark:bg-gray-800">
        <h2 class="font-bold text-lg mb-4 color:gray-800 dark:text-white">Pro Inputs</h2>
-        <FormKit type="toggle" />
+        <!-- <FormKit type="toggle" /> -->
      </div>

    </FormKit>