Merge branch 'master' of github.com:isolcat/catisol-ui

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 coverage/
 docs/.vitepress/cache
+dist/

docs/components/Form/form.md

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import demo from './base.vue'
 import demo2 from './rule.vue'
+import demo3 from './myRule.vue'
 
 </script>
 
@@ -16,6 +17,8 @@ import demo2 from './rule.vue'
 
 <demo />
 
+
+
 <details>
 
 <summary>展开查看</summary>
@@ -220,3 +223,110 @@ const resetForm = () => {
 
 ```
 </details>
+
+## 自定义表单的规则校验
+
+FormItem 组件允许开发者定义自己的校验规则,以满足特殊的校验需求。这种自定义校验规则与内置的必填(required)、最小长度(min)和最大长度(max)规则无缝集成,提供了极大的灵活性和扩展性。
+
+### 使用方式
+在`rules`属性中,除了可以设置内置的校验规则外,还可以添加一个`validator`属性,其值为一个校验函数。该函数会在表单校验时被调用,并根据其返回值来判断是否通过校验。
+比如下面的例子让重复输入的密码和上面的相等
+
+<demo3 />
+
+
+<details>
+
+<summary>展开查看</summary>
+
+```vue
+<template>
+  <c-form :model="formData" :rules="rules" ref="form" @validate-success="handleSuccess" @validate-failure="handleFailure">
+    <c-form-item label="Username" prop="username">
+      <CInput v-model="formData.username" type="text" />
+    </c-form-item>
+    <c-form-item label="Password" prop="password">
+      <CInput v-model="formData.password" show-password />
+    </c-form-item>
+    <c-form-item label="Confirm Password" prop="confirmPassword">
+      <CInput v-model="formData.confirmPassword" show-password />
+    </c-form-item>
+    <CButton type="submit">Submit</CButton>
+  </c-form>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      formData: {
+        username: '',
+        password: '',
+        confirmPassword: '',
+      },
+      rules: {
+        username: [
+          { required: true, message: 'Please enter your username' },
+          { min: 3, message: 'Username must be at least 3 characters' },
+        ],
+        password: [
+          { required: true, message: 'Please enter your password' },
+          { min: 6, message: 'Password must be at least 6 characters' },
+        ],
+        confirmPassword: [
+          { required: true, message: 'Please confirm your password' },
+          {
+            validator: (value, rule) => {
+              return value === this.formData.password || 'Passwords do not match';
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    handleSuccess(model) {
+      console.log('Form submitted:', model);
+      // 提交表单数据
+    },
+    handleFailure() {
+      console.error('Form validation failed');
+    },
+  },
+};
+</script>
+
+
+
+```
+</details>
+
+
+## FormItem 属性
+
+| 属性名 | 描述                            | 默认值 |
+| ------ | ------------------------------- | ------ |
+| label  | 表单项标签文本                  | -      |
+| prop   | 表单项在 `model` 中对应的属性名 | -      |
+
+## Form 属性
+
+| 属性名        | 描述                                  | 默认值 |
+| ------------- | ------------------------------------- | ------ |
+| model         | 表单数据对象                          | {}     |
+| rules         | 表单验证规则对象                      | {}     |
+| inline        | 是否使用内联布局                      | false  |
+| labelPosition | 标签文本的位置,可选值为 `left`、`top` | 'left' |
+
+## 校验规则属性
+
+在 `rules` 对象中,每个表单字段对应一个校验规则数组,该数组中的每个元素都是一个规则对象,可以包含以下属性:
+
+| 属性名    | 描述                       | 默认值 |
+| --------- | -------------------------- | ------ |
+| required  | 是否为必填项               | false  |
+| min       | 最小长度限制               | -      |
+| max       | 最大长度限制               | -      |
+| message   | 校验失败时的自定义错误信息 | -      |
+| validator | 自定义校验规则函数         | -      |

docs/components/Form/myRule.vue

@@ -0,0 +1,56 @@
+<template>
+  <c-form :model="formData" :rules="rules" ref="form" @validate-success="handleSuccess" @validate-failure="handleFailure">
+    <c-form-item label="Username" prop="username">
+      <CInput v-model="formData.username" type="text" />
+    </c-form-item>
+    <c-form-item label="Password" prop="password">
+      <CInput v-model="formData.password" show-password />
+    </c-form-item>
+    <c-form-item label="Confirm Password" prop="confirmPassword">
+      <CInput v-model="formData.confirmPassword" show-password />
+    </c-form-item>
+    <CButton type="submit">Submit</CButton>
+  </c-form>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      formData: {
+        username: '',
+        password: '',
+        confirmPassword: '',
+      },
+      rules: {
+        username: [
+          { required: true, message: 'Please enter your username' },
+          { min: 3, message: 'Username must be at least 3 characters' },
+        ],
+        password: [
+          { required: true, message: 'Please enter your password' },
+          { min: 6, message: 'Password must be at least 6 characters' },
+        ],
+        confirmPassword: [
+          { required: true, message: 'Please confirm your password' },
+          {
+            validator: (value, rule) => {
+              return value === this.formData.password || 'Passwords do not match';
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    handleSuccess(model) {
+      console.log('Form submitted:', model);
+      // 提交表单数据
+    },
+    handleFailure() {
+      console.error('Form validation failed');
+    },
+  },
+};
+</script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "catisol-ui",
-  "version": "0.9.92",
+  "version": "0.9.95",
   "description": "",
   "type": "module",
   "main": "./dist/catisol-ui.esm.js",
@@ -32,17 +32,18 @@
     "postcss": "^8.4.21",
     "postcss-prefix-selector": "^1.16.0",
     "unocss": "0.45.6",
-    "vite": "3.0.7",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "5.1.4",
     "vitepress": "1.0.0-rc.31",
-    "vitest": "0.21.1"
+    "vitest": "1.3.1",
+    "vue": "3.2.39"
   },
   "maintainers": [
     "isolcat"
   ],
   "dependencies": {
     "@documate/vue": "^0.3.1",
     "@unocss/vite": "^0.45.13",
-    "@vueuse/core": "^10.2.1",
-    "vue": "^3.3.4"
+    "@vueuse/core": "^10.2.1"
   }
 }

packages/table/table.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, defineOptions, defineProps } from 'vue'
+import { computed, defineProps } from 'vue'
 
 defineOptions({
   name: 'CTable'

vite.config.ts

@@ -1,42 +1,42 @@
 /// <reference types="vitest" />
 import { defineConfig } from 'vite';
+import { resolve } from 'path'
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import { presetUno, presetAttributify, presetIcons } from 'unocss';
 import Unocss from './config/unocss';
-import UnocssIcons from '@unocss/preset-icons'
-
-// https://vitejs.dev/config/
+import Components from 'unplugin-vue-components/vite'; // 更新这里
 
 export default defineConfig({
+	resolve: {
+		dedupe: ['vue']
+	},
 	build: {
 		cssCodeSplit: true,
 		lib: {
-			entry: './packages/entry.ts',
+			entry: resolve(__dirname, './packages/entry.ts'),
 			name: 'CatIsolUI',
-			fileName: 'catisol-ui', // 设置打包后的文件名为"catisol-ui"
+			fileName: (format) => `catisol-ui.${format}.js`, // 根据格式设置打包后的文件名
 			formats: ['esm', 'umd', 'iife']
 		},
 		rollupOptions: {
-			// 移除assets文件夹下的哈希值
+			external: ['vue'],
 			output: {
 				assetFileNames: 'assets/[name][extname]',
 				globals: {
 					vue: 'Vue'
 				}
 			}
-		}
+		},
 	},
 	test: {
 		global: true,
-		// 设置支持tsx和jsx组件
 		transformMode: {
 			tsx: 'jsx'
 		},
 		coverage: {
 			reporter: ['text', 'json', 'html']
 		},
-		// 设置测试环境
 		environment: 'happy-dom'
 	},
 	server: {
@@ -47,15 +47,14 @@ export default defineConfig({
 	plugins: [
 		// 添加UnoCSS和JSX插件
 		Unocss({
-			presets: [UnocssIcons({
-				// 其他选项
-				prefix: 'i-',
-				extraProperties: {
-					display: 'inline-block'
-				}
-			}), presetUno(), presetAttributify(), presetIcons()]
+			presets: [presetUno(), presetAttributify(), presetIcons()]
 		}),
 		vueJsx(),
-		vue()
+		vue(),
+		Components({
+			dirs: ['packages/*'],
+			extensions: ['vue'],
+			deep: true, // 如果组件分布在子目录的多个层级中，确保设置为true
+		}),
 	]
 });