feat: 添加 Unocss 支持，更新配置并引入新组件

formkit.config.fkLibrary.ts

@@ -0,0 +1,4 @@
+import { checkbox, form, group, list, number, range, submit, text, textarea } from '@formkit/inputs'
+
+export const fkLibrary = { text, form, submit, group, checkbox, range, list, number, textarea, }
+console.debug(`range :>> `, range);

formkit.config.theme.ts

@@ -10,43 +10,55 @@ 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)) {
-     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)) {
+    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 }
+}
 
 /**
  * These classes have already been merged with globals using tailwind-merge
  * and are ready to be used directly in the theme.
  **/
-const classes: Record<string, Record<string, boolean>> = {
+export const classes: Record<string, Record<string, boolean>> = {
   "family:button__wrapper": {
     "group-data-[disabled=true]:grayscale": true
   },
@@ -3288,7 +3300,7 @@ const classes: Record<string, Record<string, boolean>> = {
  * Globals are merged prior to generating this file — these are included for
  * any other non-matching inputs.
  **/
-const globals: Record<string, Record<string, boolean>> = {
+export const globals: Record<string, Record<string, boolean>> = {
   "outer": {
     "group": true,
     "max-w-[20em]": true,

formkit.config.ts

@@ -2,21 +2,17 @@ import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formki
 import type { FormKitOptions } from '@formkit/core'
 import { createI18nPlugin, zh } from '@formkit/i18n'
 import { genesisIcons } from '@formkit/icons'
-import { checkbox, createLibraryPlugin, form, group, list, number, range, submit, text, textarea, } from '@formkit/inputs'
+import { createLibraryPlugin } 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.addAsteriskPlugin'
+import { fkLibrary } from './formkit.config.fkLibrary'
 import { rootClasses } from "./formkit.config.theme"
-import HeadlessuiToggle from "./src/headlessui-switch.vue";
+import HeadlessuiToggle from "./src/headlessui-switch.vue"
 
-
-const library = createLibraryPlugin({
-  text, form, submit, group, checkbox, range, list, number, textarea,
-  'headlessuiSwitch': createInput(HeadlessuiToggle)
-})
 const validation = createValidationPlugin(defaultRules)
 const i18n = createI18nPlugin({ zh })
 const theme = undefined;
@@ -28,7 +24,13 @@ export default {
   plugins: [
     createProPlugin(apiKey, { toggle }),
 
-    library,
+    createLibraryPlugin(fkLibrary),
+
+    createLibraryPlugin(
+      {
+        'headlessuiSwitch': createInput(HeadlessuiToggle),
+      }
+    ),
 
     themePlugin, bindings, i18n, validation, addAsteriskPlugin,
 

package.json

@@ -27,8 +27,10 @@
     "zod-i18n-map": "^2.27.0"
   },
   "devDependencies": {
+    "@unocss/extractor-arbitrary-variants": "^0.64.1",
     "@vitejs/plugin-vue": "^5.2.0",
     "typescript": "~5.6.3",
+    "unocss": "^0.64.1",
     "vite": "^5.4.11",
     "vue-tsc": "^2.1.10"
   }

src/assets/main.css

@@ -1,16 +1,16 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* @tailwind base; */
+/* @tailwind components; */
+/* @tailwind utilities; */
 
 body {
-  background-color:#f3f4f6;
-  color:#1f2937;
+  background-color: #f3f4f6;
+  color: #1f2937;
 }
 
 @media (prefers-color-scheme: dark) {
   body {
-    background-color:#1a202c;
-    color:#e5e7eb;
+    background-color: #1a202c;
+    color: #e5e7eb;
   }
 }
 

src/main.ts

@@ -4,6 +4,10 @@ import { createApp } from 'vue'
 import formKitConfig from '../formkit.config'
 import App from './App.vue'
 
+// import '@unocss/reset/tailwind-compat.css'
+import '@unocss/reset/tailwind.css'
+import 'virtual:uno.css'
+
 const app = createApp(App)
 
 // https://github.dev/formkit/auto-animate/blob/master/docs/src/examples/formkit/ActualFormKit.vue

unocss.config.ts

@@ -0,0 +1,59 @@
+import { extractorArbitraryVariants } from '@unocss/extractor-arbitrary-variants'
+import { defineConfig, presetUno, presetWind, transformerVariantGroup } from 'unocss';
+import { classes, globals } from './formkit.config.theme';
+import { fkLibrary } from './formkit.config.fkLibrary';
+
+const familyList = [...new Set(Object.values(fkLibrary).map(lib => lib.family))].filter(f => f) as string[]
+const typeList = [...new Set(Object.values(fkLibrary).map(lib => lib.type))].filter(f => f) as string[]
+
+console.debug(`familyList :>> `, familyList);
+console.debug(`typeList :>> `, typeList);
+
+const globalsR = [...new Set(
+  Object.values(globals).flatMap(v => Object.keys(v))
+)];
+const classesR = [...new Set(
+  // Object.values(classes).flatMap(v => Object.keys(v))
+  Object.keys(classes)
+    .filter(k =>
+      familyList.some(f => k.includes(f)) ||
+      typeList.some(t => k.includes(t))
+    )
+    .map(k => classes[k])
+    .flatMap(v => Object.keys(v))
+    .filter(className => !className.includes('[]'))
+)]
+// console.debug(`classesR :>> `, classesR);
+
+
+export default defineConfig({
+  content: {
+    filesystem: [
+      'xx.ts',
+    ],
+    inline: [
+      '!border-none', // for: "range__inner"
+      classesR.join(' '),
+      globalsR.join(' '),
+      async () => {
+        return '';
+      },
+    ],
+    pipeline: {
+      // include: [
+      //   /xx.ts($|\?)/,
+      // ],
+    }
+  },
+  presets: [
+    presetUno({
+      dark: 'media',
+    }),
+  ],
+  transformers: [
+    transformerVariantGroup(),
+  ],
+  extractors: [
+    extractorArbitraryVariants(),
+  ],
+})

vite.config.ts

@@ -1,9 +1,10 @@
+import UnoCSS from 'unocss/vite'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), UnoCSS(),],
   build: {
     sourcemap: true
   }

xx.ts

@@ -0,0 +1,8 @@
+const classss = [
+  'text-8882',
+  'formkit-disabled:opacity-40',
+]
+
+const globals: Record<string, Record<string, boolean>> = {
+
+};