docs(zod): optimize docs (#1764)

* docs(zod): optimize docs * docs(auto-complete): correct rules type
varletjs · Sep 14, 2024 · 0b1da28 · 0b1da28
1 parent c574659
commit 0b1da28
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 10 deletions.
diff --git a/packages/varlet-ui/docs/zodValidation.en-US.md b/packages/varlet-ui/docs/zodValidation.en-US.md
@@ -10,7 +10,14 @@ We support form validation based on [Zod](https://zod.dev/) in `3.5.0+`.
 In order to control the size of the component library, we do not build-in `Zod`, so you need to install it manually.
 
 ```shell
-pnpm i zod
+# npm
+npm i zod -S   
+
+# yarn
+yarn add zod    
+
+# pnpm
+pnpm add zod
 ```
 
 ### Basic Usage
@@ -67,7 +74,7 @@ function handleSubmit(valid) {
 </template>
 ```
 
-### Use with Typescript
+### Use With Typescript
 
 If you use `Typescript`, define a `Zod Schema` to get both Typescript types and form rules.
 

diff --git a/packages/varlet-ui/docs/zodValidation.zh-CN.md b/packages/varlet-ui/docs/zodValidation.zh-CN.md
@@ -9,7 +9,14 @@
 为了控制组件库的尺寸，我们不内置 `Zod`，所以需要手动安装。
 
 ```shell
-pnpm i zod
+# npm
+npm i zod -S   
+
+# yarn
+yarn add zod    
+
+# pnpm
+pnpm add zod
 ```
 
 ### 基本使用

diff --git a/packages/varlet-ui/src/auto-complete/docs/zh-CN.md b/packages/varlet-ui/src/auto-complete/docs/zh-CN.md
@@ -248,7 +248,7 @@ function useAutoComplete() {
 | `readonly` | 是否只读            | _boolean_ | `false` |
 | `disabled` | 是否禁用            | _boolean_ | `false` |
 | `validate-trigger` | 触发验证的时机，可选值为 `onFocus` `onBlur` `onChange` `onClick` `onClear` `onInput` | _AutoCompleteValidateTrigger[]_ | `['onInput', 'onClear', 'onChange']` |
-| `rules` | 验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示     | _Array<(v: string) => any>_ | `-` |
+| `rules` | 验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示     | _(v: string) => any \| ZodType \| Array<(v: string) => any \| ZodType>_ | `-` |
 | `enterkeyhint` | 定制回车键样式，参见 [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) | _string_ | `-` |
 | `clearable` | 是否可清除              | _boolean_ | `false` |
 | `line` | 是否显示分割线                | _boolean_ | `true` |

diff --git a/packages/varlet-ui/src/radio-group/docs/zh-CN.md b/packages/varlet-ui/src/radio-group/docs/zh-CN.md
@@ -207,7 +207,7 @@ const value = ref(false)
 <template>
   <var-radio
     v-model="value"
-    :rules="z.boolean().refine((v) => v, { message: '请勾选' })"
+    :rules="z.boolean().refine((v) => v, '请勾选')"
   >
     当前的值: {{ value }}
   </var-radio>

diff --git a/packages/varlet-ui/src/radio-group/example/index.vue b/packages/varlet-ui/src/radio-group/example/index.vue
@@ -103,7 +103,7 @@ onThemeChange()
   </var-radio>
 
   <app-type>{{ t('radioValidateWithZod') }}</app-type>
-  <var-radio v-model="value10" :rules="z.boolean().refine((v) => v, { message: t('radioValidateMessage') })">
+  <var-radio v-model="value10" :rules="z.boolean().refine((v) => v, t('radioValidateMessage'))">
     {{ t('currentValue') }} {{ value10 }}
   </var-radio>
 
@@ -115,10 +115,7 @@ onThemeChange()
   <div class="relation">{{ t('currentValue') }} {{ value8 }}</div>
 
   <app-type>{{ t('radioGroupValidateWithZod') }}</app-type>
-  <var-radio-group
-    v-model="value11"
-    :rules="z.number().refine((v) => v === 0, { message: t('radioGroupValidateMessage') })"
-  >
+  <var-radio-group v-model="value11" :rules="z.number().refine((v) => v === 0, t('radioGroupValidateMessage'))">
     <var-radio :checked-value="0">{{ t('eat') }}</var-radio>
     <var-radio :checked-value="1">{{ t('sleep') }}</var-radio>
   </var-radio-group>