Feat/typing slot

.github/workflows/ci.yml

@@ -0,0 +1,29 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  verify:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build
+      - run: pnpm --filter @s-form/core test --run
+      - run: pnpm --filter @s-form/core pack --dry-run
+      - run: pnpm --filter @s-form/preset-element-plus pack --dry-run

.gitignore

@@ -3,3 +3,4 @@ node_modules
 .pnpm-debug.log
 **/dist/*
 .DS_Store
+coverage

README.md

@@ -8,11 +8,11 @@ npm i @s-form/core @s-form/preset-element-plus element-plus
 
 ```ts
 import { SmartForm } from '@s-form/core'
-import { useDefineSchema } from '@s-form/preset-element-plus'
-//import base style
-import '@s-form/core/style'
+import { useEleSchema } from '@s-form/preset-element-plus'
+// import base style
+import '@s-form/core/style.css'
 
-const schema = useDefineSchema()([
+const schema = useEleSchema()([
   {
     label: '输入框',
     alias: 'input',

package.json

@@ -8,22 +8,7 @@
     "build": "pnpm -r --filter=./packages/* run build",
     "precommit": "lint-staged"
   },
-  "devDependencies": {
-    "@rollup/plugin-typescript": "^9.0.2",
-    "@rushstack/eslint-patch": "^1.2.0",
-    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^11.0.2",
-    "async-validator": "^4.2.5",
-    "bumpp": "^8.2.1",
-    "eslint": "^8.34.0",
-    "eslint-plugin-vue": "^9.9.0",
-    "prettier": "^2.8.4",
-    "typescript": "4.9.5",
-    "vitest": "^0.23.4",
-    "vue": "^3.2.47"
-  },
   "dependencies": {
-    "@s-form/core": "workspace:*",
-    "rollup": "^3.15.0"
+    "@s-form/core": "workspace:*"
   }
 }

packages/core/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

packages/core/package.json

@@ -1,45 +1,54 @@
 {
   "name": "@s-form/core",
-  "version": "0.0.11",
+  "version": "0.0.20",
   "license": "MIT",
   "type": "module",
   "typings": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./style.css": "./dist/style.css",
     "./style": {
       "import": "./dist/style.css"
     }
   },
   "scripts": {
     "build": "vite build && vue-tsc  --emitDeclarationOnly",
-    "precommit": "lint-staged"
+    "precommit": "lint-staged",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "vue-composable": "^1.0.0-beta.24"
+    "vitest": "^1.6.0",
+    "vue-composable": "1.0.0-beta.24"
   },
   "module": "dist/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
   "peerDependencies": {
-    "@vueuse/core": "^9.12.0",
+    "@vueuse/core": "^10.0.0",
     "async-validator": "^4.2.5",
-    "vue": "^3.2.41"
+    "vue": "^3.4.0"
   },
   "devDependencies": {
-    "@types/uuid": "8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.38.0",
-    "@typescript-eslint/parser": "^5.38.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vue-macros/volar": "^0.8.4",
-    "eslint": "^8.23.1",
-    "postcss": "^8.4.16",
-    "sass": "^1.55.0",
-    "typescript": "^4.9.5",
-    "unplugin-auto-import": "0.14.2",
-    "unplugin-vue-define-options": "^1.2.3",
-    "vite": "4.1.1",
-    "vite-plugin-windicss": "^1.8.10",
-    "vue-tsc": "^1.0.24"
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vue-macros/volar": "^0.18.18",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^8.57.0",
+    "postcss": "^8.4.38",
+    "sass": "^1.77.4",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.12",
+    "vite-plugin-windicss": "^1.9.3",
+    "vue-tsc": "^2.0.19"
   }
-}
+}

packages/core/src/FormItem/FormItem.vue

@@ -5,6 +5,7 @@
     class="form-item"
     :class="labelClass"
     :style="state.item.itemStyle"
+    :id="state.item.key"
   >
     <div
       v-if="labelPosition !== 'sticky'"
@@ -15,8 +16,8 @@
     </div>
     <div class="content-wrapper">
       <slot />
-      <div v-if="data?.$anyInvalid && data.$dirty" class="error-msg">
-        {{ data.validate.$message }}
+      <div v-if="data?.$anyInvalid && data.$anyDirty" class="error-msg">
+        {{ errMsg }}
       </div>
     </div>
   </div>
@@ -76,6 +77,20 @@ const labelClass = computed(() => {
   ].flatMap((e) => e.split(' '))
 })
 
+const errMsg = computed(() => {
+  const error = props.data.$errors?.[0]
+  const toErrorString = (e: unknown): string =>
+    typeof e === 'string'
+      ? e
+      : Array.isArray(e)
+      ? toErrorString(e[0])
+      : e instanceof Error
+      ? e.message
+      : 'error'
+
+  return toErrorString(error)
+})
+
 defineExpose({
   el: elRef,
 })
@@ -84,8 +99,9 @@ defineExpose({
 .label-wrapper {
   @apply flex-shrink-0 whitespace-nowrap relative z-1 mr-3;
 }
+
 .form-item {
-  @apply flex text-sm  relative;
+  @apply flex text-sm relative;
 
   &.label-top {
     @apply block;
@@ -102,6 +118,7 @@ defineExpose({
   @apply text-red-400 text-xs;
   @apply absolute -bottom-1.3em left-0;
 }
+
 .content-wrapper {
   @apply flex-1 relative;
 }

packages/core/src/FormItem/type.ts

@@ -1,11 +1,18 @@
+import type { Ref } from 'vue'
+
 export type ValidateModel<T = any> = {
   $value: T
   $anyInvalid?: any
+  $anyDirty?: boolean
   $errors?: any
   $dirty: boolean
   $reset: () => void
   [customProp: `$${string}`]: any
   validate: {
     $message: string
+    $pending?: boolean
+    $promise: { value: Promise<any> }
   }
 }
+
+export type ValidateModelObj = Record<string, ValidateModel>