feat: 在 devDependencies 中添加 netlify-cli 依赖

.github/workflows/ci.yaml

@@ -16,3 +16,14 @@ jobs:
           cp dist/index.html dist/200.html
           npx surge --project ./dist --domain $DEPLOY_DOMAIN --token d843de16b331c626f10771245c56ed93 # npx surge token
           echo the preview URL is $DEPLOY_DOMAIN
+  netlify:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: yanhao98/composite-actions/setup-node-environment@main
+      - name: deploy
+        run: |
+          npx vite build
+          npx netlify deploy --prod --dir dist
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: 9273cadf-2b0a-4616-bbd6-b06a33646100

.github/workflows/test.yaml

@@ -6,6 +6,4 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: yanhao98/composite-actions/setup-node-environment@main
-      - name: deploy
-        run: |
-          npx vue-tsc -b
+      - run: npx vue-tsc -b

.gitignore

@@ -22,6 +22,3 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-
-# Local Netlify folder
-.netlify

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

formkit.config.theme.ts

@@ -10,7 +10,7 @@ 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:
   *
@@ -25,24 +25,12 @@ import type { FormKitNode } from '@formkit/core'
   * })
   * ```
   **/
-export function rootClasses(sectionName: string, node: FormKitNode): Record<string, boolean> {
-
+ 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) {
@@ -52,13 +40,13 @@ export function rootClasses(sectionName: string, node: FormKitNode): Record<stri
      }
    }
    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,

formkit.config.ts

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

package.json

@@ -7,8 +7,7 @@
   "scripts": {
     "dev": "vite --port 1115",
     "build": "vue-tsc -b && vite build",
-    "preview": "vite preview",
-    "preview:netlify": "netlify deploy --dir dist"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@formkit/addons": "^1.6.9",
@@ -28,10 +27,9 @@
     "zod-i18n-map": "^2.27.0"
   },
   "devDependencies": {
-    "@unocss/extractor-arbitrary-variants": "^0.64.1",
     "@vitejs/plugin-vue": "^5.2.0",
+    "netlify-cli": "^17.37.2",
     "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,10 +4,6 @@ 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

@@ -1,63 +0,0 @@
-import { extractorArbitraryVariants } from "@unocss/extractor-arbitrary-variants";
-import {
-  defineConfig,
-  presetUno,
-  transformerVariantGroup
-} from "unocss";
-import { fkLibrary } from "./formkit.config.fkLibrary";
-import { classes, globals } from "./formkit.config.theme";
-
-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.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("[]"))
-      .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,10 +1,9 @@
-import UnoCSS from 'unocss/vite'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue(), UnoCSS(),],
+  plugins: [vue()],
   build: {
     sourcemap: true
   }

xx.ts

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