@xiaohaih/condition-el-plus - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

assist.ts

@@ -0,0 +0,0 @@ import { UnwrapNestedRefs, reactive } from 'vue';

CHANGELOG.md

 # @xiaohaih/condition-el-plus
 
+## 0.3.0
+
+### Minor Changes
+
+- 重构条件, 增加表单校验支持
+
+### Patch Changes
+
+- Updated dependencies
+  - @xiaohaih/condition-core@0.3.0
+
 ## 0.2.3
@@ -4,0 +15,0 @@

index.ts

@@ -1,12 +0,4 @@
-export { default as HWrapper } from './package/wrapper/index.vue';
-export { default as HSelect } from './package/select/index.vue';
-export { default as HInput } from './package/input/index.vue';
-export { default as HDatePicker } from './package/datepicker/index.vue';
-export { default as HCascader } from './package/cascader/index.vue';
-export { default as HRadio } from './package/radio/index.vue';
-export { default as HCheckbox } from './package/checkbox/index.vue';
+export { provideKey, type ProvideValue } from '@xiaohaih/condition-core';
+export * from './package/index';
 export * from './assist';
 export * from './interface';
-export * from './src/common/props';
-export * from './src/common/emits';
-export * from './src/common/provide';

interface.ts

 import { ExtractPropTypes } from 'vue';
 import { CoreCondition } from '@xiaohaih/condition-core';
-import { ElSelect, ElInput, ElDatePicker, ElCascader, ElRadio, ElCheckbox } from 'element-plus';
+import { ElForm, ElFormItem, ElSelect, ElInput, ElDatePicker, ElCascader, ElRadio, ElCheckbox } from 'element-plus';
 import {
@@ -12,3 +12,3 @@ wrapperProps,
     cascaderProps,
-} from './src/common/props';
+} from './package/index';
 
@@ -19,3 +19,5 @@ export declare namespace HCondition {
 
-    interface WrapperProps extends CoreCondition.WrapperProps, ExtractPropTypes<OmitDefaultKey<typeof wrapperProps>> {}
+    interface WrapperProps
+        extends ExtractPropTypes<OmitDefaultKey<typeof wrapperProps>>,
+            Omit<Props<InstanceType<typeof ElForm>>, 'model' | 'class' | 'style' | 'toast'> {}
 
@@ -33,3 +35,4 @@ /** 条件声明集合 */
         extends Omit<ExtractPropTypes<OmitDefaultKey<typeof inputProps>>, BuiltInField>,
-            Omit<Props<InstanceType<typeof ElInput>>, keyof typeof inputProps> {
+            Omit<Props<InstanceType<typeof ElInput>>, keyof typeof inputProps>,
+            Omit<Props<InstanceType<typeof ElFormItem>>, 'prop'> {
         t: 'input';
@@ -39,3 +42,4 @@ }
         extends Omit<ExtractPropTypes<OmitDefaultKey<typeof selectProps>>, BuiltInField>,
-            Omit<Props<InstanceType<typeof ElSelect>>, keyof typeof selectProps> {
+            Omit<Props<InstanceType<typeof ElSelect>>, keyof typeof selectProps>,
+            Omit<Props<InstanceType<typeof ElFormItem>>, 'prop'> {
         t: 'select';
@@ -45,3 +49,4 @@ }
         extends Omit<ExtractPropTypes<OmitDefaultKey<typeof datepickerProps>>, BuiltInField>,
-            Omit<Props<InstanceType<typeof ElDatePicker>>, keyof typeof datepickerProps> {
+            Omit<Props<InstanceType<typeof ElDatePicker>>, keyof typeof datepickerProps>,
+            Omit<Props<InstanceType<typeof ElFormItem>>, 'prop'> {
         t: 'datepicker';
@@ -51,3 +56,4 @@ }
         extends Omit<ExtractPropTypes<OmitDefaultKey<typeof radioProps>>, BuiltInField>,
-            Omit<Props<InstanceType<typeof ElRadio>>, keyof typeof radioProps> {
+            Omit<Props<InstanceType<typeof ElRadio>>, keyof typeof radioProps | 'label'>,
+            Omit<Props<InstanceType<typeof ElFormItem>>, 'prop'> {
         t: 'radio';
@@ -57,3 +63,4 @@ }
         extends Omit<ExtractPropTypes<OmitDefaultKey<typeof checkboxProps>>, BuiltInField>,
-            Omit<Props<InstanceType<typeof ElCheckbox>>, keyof typeof checkboxProps> {
+            Omit<Props<InstanceType<typeof ElCheckbox>>, keyof typeof checkboxProps | 'label'>,
+            Omit<Props<InstanceType<typeof ElFormItem>>, 'prop'> {
         t: 'checkbox';
@@ -63,3 +70,4 @@ }
         extends Omit<ExtractPropTypes<OmitDefaultKey<typeof cascaderProps>>, BuiltInField>,
-            Omit<Props<InstanceType<typeof ElCascader>>, keyof typeof cascaderProps> {
+            Omit<Props<InstanceType<typeof ElCascader>>, keyof typeof cascaderProps>,
+            Omit<Props<InstanceType<typeof ElFormItem>>, 'prop'> {
         t: 'cascader';
@@ -66,0 +74,0 @@ }

package.json

 {
   "name": "@xiaohaih/condition-el-plus",
-  "version": "0.2.3",
-  "description": "",
+  "version": "0.3.0",
+  "description": "基于element-plus实现, 通过JSON配置表单组件(条件间可相互依赖)",
   "main": "dist/index.cjs.js",
@@ -19,7 +19,17 @@ "jsdelivr": "dist/index.umd.js",
   },
-  "keywords": [],
-  "author": "xiaohaih",
-  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xiaohaiH/condition/tree/master/package/element-plus"
+  },
+  "keywords": [
+    "vue3",
+    "element-plus",
+    "condition",
+    "JSON Form"
+  ],
+  "author": "xiaohai",
+  "license": "MIT",
+  "homepage": "https://xiaohaih.github.io/condition/index.html",
   "dependencies": {
-    "@xiaohaih/condition-core": "0.2.3"
+    "@xiaohaih/condition-core": "0.3.0"
   },
@@ -26,0 +36,0 @@ "devDependencies": {

README.md

@@ -1,213 +0,427 @@
-> ## 基于 `element-plus` 实现的条件搜索组件
+## 基于 `element-plus` 实现的条件搜索, 校验组件(条件之间相互依赖)
+
+-   通过 `JSON` 配置
+-   目前支持以下几种类型, 通过字段 `t` 来区分
+    -   <a href="#api-input">`input` (文本输入框)</a>
+    -   <a href="#api-select">`select` (下拉框)</a>
+    -   <a href="#api-date-picker">`datepicker` (日期选择)</a>
+    -   <a href="#api-cascader">`cascader` (级联组件)</a>
+    -   <a href="#api-radio">`radio` (单选框)</a>
+    -   <a href="#api-checkbox">`checkbox` (多选框)</a>
+
+> **[在线`demo`](https://xiaohaih.github.io/condition/index.html)**
+
+> [在线`demo`(备份)](https://xiaohaih.github.io/testaaa/index.html)
+
+<details>
+<summary>使用示例(条件形式)</summary>
+
+```vue
+<template>
+    <HWrapper
+        :datum="conditions"
+        :backfill="query"
+        @search="log('搜索事件', $event)"
+        @reset="log('重置事件', $event)"
+    ></HWrapper>
+</template>
+
+<script lang="ts">
+import { HWrapper, defineCondition } from '@xiaohaih/condition-plus';
+
+const conditions = () =>
+    defineCondition({
+        name: { t: 'input', placeholder: '名称搜索' },
+        address: { t: 'input', placeholder: '地址搜索' },
+    });
+
+export default {
+    components: {
+        HWrapper,
+    },
+    data: () =({
+        conditions: conditions(),
+        query: { name: '名称存在默认值' },
+        log: console.log,
+    }),
+};
+</script>
+```
+
+</details>
+<details>
+<summary>使用示例(表单形式)</summary>
+
+```vue
+<template>
+    <div>
+        <HWrapper
+            ref="formRef"
+            :datum="formCondition"
+            :rules="rules"
+            :backfill="query"
+            :render-btn="false"
+            :realtime="true"
+            @search="query = $event"
+        ></HWrapper>
+        <div style="min-height: 50px; line-height: 50px">{{ query }}</div>
+        <ElButton @click="validate">校验</ElButton>
+        <ElButton @click="validateField">逐个校验</ElButton>
+        <ElButton @click="clearValidate">清空校验</ElButton>
+    </div>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { HWrapper, defineCondition } from '@xiaohaih/condition-plus';
+
+const conditions = () =>
+    defineCondition({
+        name: { t: 'input', placeholder: '名称搜索' },
+        address: { t: 'input', placeholder: '地址搜索' },
+    });
+
+export default {
+    components: {
+        HWrapper,
+    },
+    setup(props, ctx) {
+        const formRef = ref<InstanceType<typeof HWrapper>>();
+        const query = ref<Record<string, any>>({
+            // 设置默认值
+            input1: '1',
+            // input2: '2',
+            // select1: '1',
+            // select2: '22',
+            // cas1: 'aa',
+            // cas2: 'cas2AA1',
+            // datepikcer1: '2024-03-24',
+            // datepikcer2: ['2024-03-24', '2024-03-28'],
+            // check1: ['check1'],
+            // check2: ['che1'],
+            // radio1: 'radio1',
+            // radio2: 'rad1',
+        });
+        const formCondition = defineCondition({
+            input1: {
+                t: 'input',
+                label: 'input1',
+                placeholder: '哈哈哈',
+            },
+            input2: {
+                t: 'input',
+                label: 'input2222',
+                placeholder: '666',
+                rules: [{ required: true, message: '必填项' }],
+            },
+            select1: {
+                t: 'select',
+                label: 'sel1',
+                placeholder: '哈哈哈',
+                options: [
+                    { label: '第一', value: '1' },
+                    { label: '第二', value: '2' },
+                    { label: '第三', value: '3' },
+                ],
+            },
+            select2: {
+                t: 'select',
+                label: 'sel2',
+                placeholder: 'test',
+                labelKey: 'dictLabel',
+                valueKey: 'dictValue',
+                options: [],
+                getOptions(cb) {
+                    setTimeout(() => {
+                        cb([
+                            { dictLabel: '第一一', dictValue: '11' },
+                            { dictLabel: '第二二', dictValue: '22' },
+                            { dictLabel: '第三三', dictValue: '33' },
+                        ]);
+                    }, 1000);
+                },
+                rules: [{ required: true, message: '必填项' }],
+            },
+            datepikcer1: {
+                t: 'datepicker',
+                label: 'date1',
+                placeholder: 'fff',
+                format: 'MM-DD',
+                valueFormat: 'YYYY-MM-DD',
+            },
+            date11: {
+                t: 'datepicker',
+                type: 'daterange',
+                label: 'date2',
+                fields: ['date11', 'date22'],
+                placeholder: '999',
+                startPlaceholder: '起',
+                endPlaceholder: '止',
+                rules: [{ required: true, message: '必填项' }],
+            },
+            cas1: {
+                t: 'cascader',
+                label: 'cas1',
+                placeholder: 'fff',
+                fields: ['cas1', 'cas1_1'],
+                props: { checkStrictly: true },
+                options: [
+                    {
+                        label: 'aa',
+                        value: 'aa',
+                        children: [
+                            { label: 'AA1', value: 'AA1' },
+                            { label: 'AA2', value: 'AA2' },
+                        ],
+                    },
+                    {
+                        label: 'bb',
+                        value: 'bb',
+                        children: [
+                            { label: 'BB1', value: 'BB1' },
+                            { label: 'BB2', value: 'BB2' },
+                        ],
+                    },
+                ],
+            },
+            cas2: {
+                t: 'cascader',
+                type: 'daterange',
+                label: 'cas2',
+                placeholder: '999',
+                rules: [{ required: true, message: '必填项' }],
+                getOptions(cb) {
+                    cb([
+                        {
+                            label: 'cas2aa',
+                            value: 'cas2aa',
+                            children: [
+                                { label: 'cas2AA1', value: 'cas2AA1' },
+                                { label: 'cas2AA2', value: 'cas2AA2' },
+                            ],
+                        },
+                        {
+                            label: 'cas2bb',
+                            value: 'cas2bb',
+                            children: [
+                                { label: 'cas2BB1', value: 'cas2BB1' },
+                                { label: 'cas2BB2', value: 'cas2BB2' },
+                            ],
+                        },
+                    ]);
+                },
+            },
+            check1: {
+                t: 'checkbox',
+                label: 'check1',
+                placeholder: 'ddd',
+                type: 'button',
+                options: [
+                    { label: 'check1', value: 'check1' },
+                    { label: 'check2', value: 'check2' },
+                ],
+            },
+            check2: {
+                t: 'checkbox',
+                label: 'check2',
+                placeholder: 'ddd',
+                rules: [{ required: true, message: '必填项' }],
+                getOptions(cb) {
+                    setTimeout(() => {
+                        cb([
+                            { label: 'che1', value: 'che1' },
+                            { label: 'che2', value: 'che2' },
+                        ]);
+                    }, 1000);
+                },
+            },
+            radio1: {
+                t: 'radio',
+                label: 'radio1',
+                placeholder: 'ddd',
+                type: 'button',
+                options: [
+                    { label: 'radio1', value: 'radio1' },
+                    { label: 'radio2', value: 'radio2' },
+                ],
+            },
+            radio2: {
+                t: 'radio',
+                label: 'radio2-cancelable',
+                placeholder: 'ddd',
+                rules: [{ required: true, message: '必填项' }],
+                cancelable: true,
+                getOptions(cb) {
+                    setTimeout(() => {
+                        cb([
+                            { label: 'rad1', value: 'rad1' },
+                            { label: 'rad2', value: 'rad2' },
+                        ]);
+                    }, 1000);
+                },
+            },
+        });
+        const rules = {
+            input1: [{ required: true, message: 'formRules' }],
+            input2: [
+                {
+                    validator: (rule: any, val: string, cb: (arg?: any) => void) =>
+                        val !== '123' ? cb('not 123 from formRules') : cb(),
+                    message: 'not 123 from formRules',
+                },
+            ],
+            select1: [{ required: true, message: 'select form FormRules' }],
+            datepikcer1: [{ required: true, message: 'datepicker form FormRules' }],
+            cas1: [{ required: true, message: 'cascader form FormRules' }],
+            check1: [{ required: true, message: 'check form FormRules' }],
+            radio1: [{ required: true, message: 'radio form FormRules' }],
+        };
+        const keys = Object.keys(forms);
+        let idx = 0;
+        function validate() {
+            formRef.value?.formRef?.validate();
+        }
+        function validateField() {
+            clearValidate();
+            formRef.value?.formRef?.validateField(keys[idx % keys.length]);
+            idx = (idx + 1) % keys.length;
+        }
+        function clearValidate() {
+            formRef.value?.formRef?.clearValidate();
+        }
+
+        return {
+            formRef,
+            query,
+            formCondition,
+            rules,
+            validate,
+            validateField,
+            clearValidate,
+        };
+    },
+};
+</script>
+```
+
+</details>
+
+<details>
+<summary><strong><a id="wrapper-attrs" href="#wrapper-attrs">容器Props</a></strong></summary>
+
+`tips: ` 支持 [`element-plus.Form`](https://element-plus.gitee.io/zh-CN/component/form.html#form-api) 所有 `props`(`model` 属性除外)
+| 属性名 | 是否必填 | 类型 | 描述 | 默认值 |
+| --------- | -------- | ------- | ------------------------ | ------ |
+| datum | 是 | object | 条件数据源 | - |
+| realtime | 否 | boolean | 是否实时触发搜索事件(值发生改变时) | - |
+| backfill | 否 | object | 回填信息(使条件内部值与该对象的值保持一致) | - |
+| toast | 否 | (msg: string) => void | 校验失败时产生的提示(与属性 `validator` 配合使用) | - |
+| searchAtDatumChanged | 否 | boolean | 是否在数据源发生改变后触发搜索事件 | - |
+| resetToInitialValue | 否 | boolean | 重置时是否置为初始值 | - |
+| immediateSearch | 否 | boolean | 初始是否触发搜索事件来返回当前的 `query` | - |
+| renderBtn | 否 | boolean | 是否渲染搜索重置按钮 | true |
+| resetTriggerSearch | 否 | boolean | 重置时触发搜索事件 | - |
+| searchText | 否 | string | 搜索按钮文字 | 搜索 |
+| resetText | 否 | string | 重置按钮文字 | 重置 |
+| rules | 否 | object\|object[] | Form.rules props | - |
+
+</details>
+
+<details>
+<summary>
+<strong><a id="common-attrs" href="#common-attrs">公共属性</a></strong>
+</summary>
+
+`tips: ` 支持[`element-ui.FormItem`](https://element-plus.gitee.io/zh-CN/component/form.html#formitem-api) 所有 `props`
+
+> | 属性名              | 是否必填 | 类型                                                                         | 描述                                   | 默认值    |
+> | ------------------- | -------- | ---------------------------------------------------------------------------- | -------------------------------------- | --------- |
+> | label               | 否       | string                                                                       | formItem.label 属性                    | -         |
+> | rules               | 否       | object\|object[]                                                             | formItem.rules 属性                    | -         |
+> | postfix             | 否       | VNode \| string \| Function                                                  | 条件间的分隔符                         | -         |
+> | emptyValue          | 否       | string                                                                       | 值为空时提交的值                       | undefined |
+> | resetToInitialValue | 否       | string                                                                       | 重置时是否置为初始值                   | false     |
+> | disabled            | 否       | boolean \| (obj: { query: object, backfill: object }) =boolean               | 是否禁用该条件                         | -         |
+> | hide                | 否       | boolean \| (obj: { query: object, backfill: object }) =boolean               | 是否隐藏该条件                         | -         |
+> | validator           | 否       | (query: object) =string \| Promise<string\| void                             | 校验该属性是否合格(不合格应返回字符串) | -         |
+> | defaultValue        | 否       | string \| string[] \| (query: object, backfill?: object) =string \| string[] | 默认值                                 | -         |
+> | depend              | 否       | boolean                                                                      | 是否依赖其它字段                       | -         |
+> | dependFields        | 否       | string \| string[]                                                           | 依赖的字段集合                         | -         |
+
+</details>
+
+## <span id="api-input">`input`</span>
+
+> `tips: ` 支持 [`element-plus.input`](https://element-plus.gitee.io/zh-CN/component/input.html#api) 所有 `props`
 >
-> -   通过 `JSON` 配置, 可动态显隐条件, 可实现相互依赖的条件
-> -   目前支持以下几种类型, 通过字段 `t` 来区分
->     -   `input` 文本输入框
->     -   `select` 下拉框
->     -   `datepicker` 日期选择
->     -   `cascader` 级联组件
->     -   `checkbox` 多选框
->     -   `radio` 单选框
-> -   提供了 `defineCondition` 函数来定义条件(支持 `ts` 提示)
-> -   提供了 `registerComponent` 方法来注册自定义条件组件, `unregisterComponent` 删除自定义的组件
-> -   使用示例
+> | 属性名    | 是否必填 | 类型    | 描述                                                                                          | 默认值 |
+> | --------- | -------- | ------- | --------------------------------------------------------------------------------------------- | ------ |
+> | realtime  | 否       | boolean | 是否实时触发搜索事件(当 `wrapper.realtime` 为 `true` 时, 可将该值设为 `false` 并设置抖动时间) | true   |
+> | waitTime  | 否       | number  | 实时触发事件的防抖动时长                                                                      | 300    |
+> | clearable | 否       | boolean | 是否可清空                                                                                    | true   |
+
+## <span id="api-select">`select`</span>
+
+> `tips: ` 支持 [`element-plus.select`](https://element-plus.gitee.io/zh-CN/component/select.html#select-api) 所有 `props`
 >
-> ```html
-> <template>
->     <HWrapper
->         :datum="conditions"
->         :backfill="query"
->         @search="log('搜索事件', $event)"
->         @reset="log('重置事件', $event)"
->     ></HWrapper>
-> </template>
-> ```
+> | 属性名       | 是否必填 | 类型                                           | 描述           | 默认值 |
+> | ------------ | -------- | ---------------------------------------------- | -------------- | ------ |
+> | labelKey     | 否       | string                                         | 选项的标签     | label  |
+> | valueKey     | 否       | string                                         | 选项的值       | value  |
+> | options      | 否       | any[]                                          | 数据源         | -      |
+> | getOptions   | 否       | (cb: (data: any[], query: object) =void) =void | 异步设置数据源 | -      |
+> | filterable   | 否       | boolean                                        | 是否可筛选     | true   |
+> | filterMethod | 否       | (val: string, item: 选项值) =boolean           | 自定义筛选逻辑 | -      |
+> | clearable    | 否       | boolean                                        | 是否可清空     | true   |
+
+## <span id="api-date-picker">`datepicker`</span>
+
+> `tips: ` 支持 [`element-plus.datePicker`](https://element-plus.gitee.io/zh-CN/component/date-picker.html#api) 所有 `props`
 >
-> ```html
-> <script lang="ts">
-> ```
+> | 属性名      | 是否必填 | 类型                                     | 描述                             | 默认值     |
+> | ----------- | -------- | ---------------------------------------- | -------------------------------- | ---------- |
+> | valueFormat | 否       | string                                   | 日期格式                         | YYYY-MM-DD |
+> | fields      | 否       | string[] \| [begin: number, end: number] | 日期范围选择时对应多个字段时使用 | -          |
+> | clearable   | 否       | boolean                                  | 是否可清空                       | true       |
+
+## <span id="api-cascader">`cascader`</span>
+
+> `tips: ` 支持 [`element-plus.cascader`](https://element-plus.gitee.io/zh-CN/component/cascader.html#cascader-api) 所有 `props`
 >
-> ```ts
-> import { HWrapper, defineCondition } from '@xiaohaih/condition-el';
+> | 属性名       | 是否必填 | 类型                                           | 描述                   | 默认值   |
+> | ------------ | -------- | ---------------------------------------------- | ---------------------- | -------- |
+> | valueKey     | 否       | string                                         | 选项的值               | value    |
+> | childrenKey  | 否       | string                                         | 子级 key               | children |
+> | emitPath     | 否       | boolean                                        | 是否以数组格式返回的值 | -        |
+> | options      | 是       | any[]                                          | 数据源                 | -        |
+> | getOptions   | 否       | (cb: (data: any[], query: object) =void) =void | 异步设置数据源         | -        |
+> | fields       | 否       | string[]                                       | 不同层级对应不同的字段 | -        |
+> | filterable   | 否       | boolean                                        | 是否可筛选             | true     |
+> | filterMethod | 否       | (val: string, item: 选项值) =boolean           | 自定义筛选逻辑         | -        |
+> | clearable    | 否       | boolean                                        | 是否可清空             | true     |
+
+## <span id="api-radio">`radio`</span>
+
+> `tips: ` 支持 [`element-plus.radioGroup`](https://element-plus.gitee.io/zh-CN/component/radio.html#radiogroup-api) 所有 `props`
 >
-> const conditions = () =>
->     defineCondition({
->         name: { t: 'input', placeholder: '名称搜索' },
->         address: { t: 'input', placeholder: '地址搜索' },
->     });
+> | 属性名     | 是否必填 | 类型                                           | 描述           | 默认值 |
+> | ---------- | -------- | ---------------------------------------------- | -------------- | ------ |
+> | valueKey   | 否       | string                                         | 选项的值       | value  |
+> | labelKey   | 否       | string                                         | 选项的文本内容 | label  |
+> | type       | 否       | radio \| button                                | 单选框类型     | radio  |
+> | cancelable | 否       | boolean                                        | 是否可取消     | -      |
+> | options    | 是       | any[]                                          | 数据源         | -      |
+> | getOptions | 否       | (cb: (data: any[], query: object) =void) =void | 异步设置数据源 | -      |
+
+## <span id="api-checkbox">`checkbox`</span>
+
+> `tips: ` 支持 [`element-plus.checkbox`](https://element-plus.gitee.io/zh-CN/component/radio.html#checkbox-api) 所有 `props`
 >
-> export default {
->     components: {
->         HWrapper,
->     },
->     data: () => ({
->         conditions: conditions(),
->         query: { name: '名称存在默认值' },
->         log: console.log,
->     }),
-> };
-> ```
->
-> ```html
-> </script>
-> ```
->
-> 不同类型支持的属性如下 👇
->
-> ## `input`
->
-> `tips: ` 支持 [`element-plus.input`](https://element-plus.gitee.io/zh-CN/component/input.html#api) 所有属性
->
-> | 属性名              | 是否必填 | 类型                                                                           | 描述                       | 默认值    |
-> | ------------------- | -------- | ------------------------------------------------------------------------------ | -------------------------- | --------- |
-> | realtime            | 否       | boolean                                                                        | 值改变时是否立即触发事件   | -         |
-> | waitTime            | 否       | number                                                                         | 实时触发事件的防抖动时长   | 300       |
-> | labelSuffix         | 否       | VNode \| string \| Function                                                    | 条件与名称的分隔符         | -         |
-> | postfix             | 否       | VNode \| string \| Function                                                    | 条件后显示的文字           | -         |
-> | filterable          | 否       | boolean                                                                        | 是否可筛选                 | true      |
-> | filterMethod        | 否       | (val: string, item: 选项值) => boolean                                         | 自定义筛选逻辑             | -         |
-> | clearable           | 否       | boolean                                                                        | 是否可清空                 | true      |
-> | as                  | 否       | string                                                                         | 字段别名(提交时优先该字段) | -         |
-> | emptyValue          | 否       | string                                                                         | 值为空时提交的值           | undefined |
-> | resetToInitialValue | 否       | string                                                                         | 重置时是否置为初始值       | false     |
-> | disabled            | 否       | boolean \| (obj: { query: object, backfill: object }) => boolean               | 是否禁用该条件             | -         |
-> | hide                | 否       | boolean \| (obj: { query: object, backfill: object }) => boolean               | 是否隐藏该条件             | -         |
-> | validator           | 否       | (query: object) => string \| Promise<string> \| void                           | 校验该属性是否合格         | -         |
-> | defaultValue        | 否       | string \| string[] \| (query: object, backfill?: object) => string \| string[] | 默认值                     | -         |
-> | depend              | 否       | boolean                                                                        | 是否依赖其它字段           | -         |
-> | dependFields        | 否       | string \| string[]                                                             | 依赖的字段集合             | -         |
->
-> ## `select`
->
-> `tips: ` 支持 [`element-plus.select`](https://element-plus.gitee.io/zh-CN/component/select.html#select-api) 所有属性
->
-> | 属性名              | 是否必填 | 类型                                                                           | 描述                           | 默认值    |
-> | ------------------- | -------- | ------------------------------------------------------------------------------ | ------------------------------ | --------- |
-> | labelKey            | 是       | string                                                                         | 选项的标签                     | -         |
-> | valueKey            | 是       | string                                                                         | 选项的值                       | -         |
-> | options             | 是       | any[]                                                                          | 提供的数据源                   | -         |
-> | getOptions          | 否       | (cb: (data: any[], query: object) => void) => void                             | 获取远程数据源                 | -         |
-> | label               | 否       | VNode \| string \| Function                                                    | 显示在条件前的名称             | -         |
-> | labelSuffix         | 否       | VNode \| string \| Function                                                    | 条件与名称的分隔符             | -         |
-> | postfix             | 否       | VNode \| string \| Function                                                    | 条件后显示的文字               | -         |
-> | filterable          | 否       | boolean                                                                        | 是否可筛选                     | true      |
-> | filterMethod        | 否       | (val: string, item: 选项值) => boolean                                         | 自定义筛选逻辑                 | -         |
-> | clearable           | 否       | boolean                                                                        | 是否可清空                     | true      |
-> | as                  | 否       | string                                                                         | 提交字段的别名(优先使用该字段) | -         |
-> | emptyValue          | 否       | string                                                                         | 值为空时提交的值               | undefined |
-> | resetToInitialValue | 否       | string                                                                         | 重置时是否置为初始值           | false     |
-> | disabled            | 否       | boolean \| (obj: { query: object, backfill: object }) => boolean               | 是否禁用该条件                 | -         |
-> | hide                | 否       | boolean \| (obj: { query: object, backfill: object }) => boolean               | 是否隐藏该条件                 | -         |
-> | validator           | 否       | (query: object) => string \| Promise<string> \| void                           | 校验该属性是否合格             | -         |
-> | defaultValue        | 否       | string \| string[] \| (query: object, backfill?: object) => string \| string[] | 默认值                         | -         |
-> | depend              | 否       | boolean                                                                        | 是否依赖其它字段               | -         |
-> | dependFields        | 否       | string \| string[]                                                             | 依赖的字段集合                 | -         |
->
-> ## `datepicker`
->
-> `tips: ` 支持 [`element-plus.datePicker`](https://element-plus.gitee.io/zh-CN/component/date-picker.html#api) 所有属性
->
-> | 属性名              | 是否必填 | 类型                                                                           | 描述                             | 默认值     |
-> | ------------------- | -------- | ------------------------------------------------------------------------------ | -------------------------------- | ---------- |
-> | valueFormat         | 否       | string                                                                         | 日期格式                         | YYYY-MM-DD |
-> | fields              | 否       | string[] \| [begin: number, end: number]                                       | 日期范围选择时对应多个字段时使用 | -          |
-> | label               | 否       | VNode \| string \| Function                                                    | 显示在条件前的名称               | -          |
-> | labelSuffix         | 否       | VNode \| string \| Function                                                    | 条件与名称的分隔符               | -          |
-> | postfix             | 否       | VNode \| string \| Function                                                    | 条件后显示的文字                 | -          |
-> | filterable          | 否       | boolean                                                                        | 是否可筛选                       | true       |
-> | filterMethod        | 否       | (val: string, item: 选项值) => boolean                                         | 自定义筛选逻辑                   | -          |
-> | clearable           | 否       | boolean                                                                        | 是否可清空                       | true       |
-> | as                  | 否       | string                                                                         | 提交字段的别名(优先使用该字段)   | -          |
-> | emptyValue          | 否       | string                                                                         | 值为空时提交的值                 | undefined  |
-> | resetToInitialValue | 否       | string                                                                         | 重置时是否置为初始值             | false      |
-> | disabled            | 否       | boolean \| (obj: { query: object, backfill: object }) => boolean               | 是否禁用该条件                   | -          |
-> | hide                | 否       | boolean \| (obj: { query: object, backfill: object }) => boolean               | 是否隐藏该条件                   | -          |
-> | validator           | 否       | (query: object) => string \| Promise<string> \| void                           | 校验该属性是否合格               | -          |
-> | defaultValue        | 否       | string \| string[] \| (query: object, backfill?: object) => string \| string[] | 默认值                           | -          |
-> | depend              | 否       | boolean                                                                        | 是否依赖其它字段                 | -          |
-> | dependFields        | 否       | string \| string[]                                                             | 依赖的字段集合                   | -          |
->
-> ## `cascader`
->
-> `tips: ` 支持 [`element-plus.cascader`](https://element-plus.gitee.io/zh-CN/component/cascader.html#cascader-api) 所有属性
->
-> | 属性名              | 是否必填 | 类型                                                                           | 描述                           | 默认值    |
-> | ------------------- | -------- | ------------------------------------------------------------------------------ | ------------------------------ | --------- |
-> | valueKey            | 是       | string                                                                         | 选项的值                       | -         |
-> | childrenKey         | 否       | string                                                                         | 子级 key                       | children  |
-> | emitPath            | 否       | boolean                                                                        | 是否以数组格式返回的值         | -         |
-> | options             | 是       | any[]                                                                          | 提供的数据源                   | -         |
-> | getOptions          | 否       | (cb: (data: any[], query: object) => void) => void                             | 获取远程数据源                 | -         |
-> | fields              | 否       | string[]                                                                       | 不同层级对应不同的字段         | -         |
-> | label               | 否       | VNode \| string \| Function                                                    | 显示在条件前的名称             | -         |
-> | labelSuffix         | 否       | VNode \| string \| Function                                                    | 条件与名称的分隔符             | -         |
-> | postfix             | 否       | VNode \| string \| Function                                                    | 条件后显示的文字               | -         |
-> | filterable          | 否       | boolean                                                                        | 是否可筛选                     | true      |
-> | filterMethod        | 否       | (val: string, item: 选项值) => boolean                                         | 自定义筛选逻辑                 | -         |
-> | clearable           | 否       | boolean                                                                        | 是否可清空                     | true      |
-> | as                  | 否       | string                                                                         | 提交字段的别名(优先使用该字段) | -         |
-> | emptyValue          | 否       | string                                                                         | 值为空时提交的值               | undefined |
-> | resetToInitialValue | 否       | string                                                                         | 重置时是否置为初始值           | false     |
-> | disabled            | 否       | boolean \| (obj: { query: object, backfill: object }) => boolean               | 是否禁用该条件                 | -         |
-> | hide                | 否       | boolean \| (obj: { query: object, backfill: object }) => boolean               | 是否隐藏该条件                 | -         |
-> | validator           | 否       | (query: object) => string \| Promise<string> \| void                           | 校验该属性是否合格             | -         |
-> | defaultValue        | 否       | string \| string[] \| (query: object, backfill?: object) => string \| string[] | 默认值                         | -         |
-> | depend              | 否       | boolean                                                                        | 是否依赖其它字段               | -         |
-> | dependFields        | 否       | string \| string[]                                                             | 依赖的字段集合                 | -         |
->
-> ## `radio`
->
-> `tips: ` 支持 [`element-plus.radioGroup`](https://element-plus.gitee.io/zh-CN/component/radio.html#radiogroup-api) 所有属性
->
-> | 属性名              | 是否必填 | 类型                                                                           | 描述                           | 默认值    |
-> | ------------------- | -------- | ------------------------------------------------------------------------------ | ------------------------------ | --------- |
-> | valueKey            | 是       | string                                                                         | 选项的值                       | -         |
-> | labelKey            | 是       | string                                                                         | 选项的文本内容                 | -         |
-> | type                | 否       | radio \| button                                                                | 单选框类型                     | radio     |
-> | cancelable          | 否       | boolean                                                                        | 是否可取消                     | -         |
-> | options             | 是       | any[]                                                                          | 提供的数据源                   | -         |
-> | getOptions          | 否       | (cb: (data: any[], query: object) => void) => void                             | 获取远程数据源                 | -         |
-> | fields              | 否       | string[]                                                                       | 不同层级对应不同的字段         | -         |
-> | label               | 否       | VNode \| string \| Function                                                    | 显示在条件前的名称             | -         |
-> | labelSuffix         | 否       | VNode \| string \| Function                                                    | 条件与名称的分隔符             | -         |
-> | postfix             | 否       | VNode \| string \| Function                                                    | 条件后显示的文字               | -         |
-> | filterable          | 否       | boolean                                                                        | 是否可筛选                     | true      |
-> | filterMethod        | 否       | (val: string, item: 选项值) => boolean                                         | 自定义筛选逻辑                 | -         |
-> | clearable           | 否       | boolean                                                                        | 是否可清空                     | true      |
-> | as                  | 否       | string                                                                         | 提交字段的别名(优先使用该字段) | -         |
-> | emptyValue          | 否       | string                                                                         | 值为空时提交的值               | undefined |
-> | resetToInitialValue | 否       | string                                                                         | 重置时是否置为初始值           | false     |
-> | disabled            | 否       | boolean \| (obj: { query: object, backfill: object }) => boolean               | 是否禁用该条件                 | -         |
-> | hide                | 否       | boolean \| (obj: { query: object, backfill: object }) => boolean               | 是否隐藏该条件                 | -         |
-> | validator           | 否       | (query: object) => string \| Promise<string> \| void                           | 校验该属性是否合格             | -         |
-> | defaultValue        | 否       | string \| string[] \| (query: object, backfill?: object) => string \| string[] | 默认值                         | -         |
-> | depend              | 否       | boolean                                                                        | 是否依赖其它字段               | -         |
-> | dependFields        | 否       | string \| string[]                                                             | 依赖的字段集合                 | -         |
->
-> ## `checkbox`
->
-> `tips: ` 支持 [`element-plus.checkbox`](https://element-plus.gitee.io/zh-CN/component/radio.html#checkbox-api) 所有属性
->
-> | 属性名              | 是否必填 | 类型                                                                           | 描述                           | 默认值    |
-> | ------------------- | -------- | ------------------------------------------------------------------------------ | ------------------------------ | --------- |
-> | valueKey            | 是       | string                                                                         | 选项的值                       | -         |
-> | labelKey            | 是       | string                                                                         | 选项的文本内容                 | -         |
-> | type                | 否       | checkbox \| button                                                             | 单选框类型                     | checkbox  |
-> | options             | 是       | any[]                                                                          | 提供的数据源                   | -         |
-> | getOptions          | 否       | (cb: (data: any[], query: object) => void) => void                             | 获取远程数据源                 | -         |
-> | fields              | 否       | string[]                                                                       | 不同层级对应不同的字段         | -         |
-> | label               | 否       | VNode \| string \| Function                                                    | 显示在条件前的名称             | -         |
-> | labelSuffix         | 否       | VNode \| string \| Function                                                    | 条件与名称的分隔符             | -         |
-> | postfix             | 否       | VNode \| string \| Function                                                    | 条件后显示的文字               | -         |
-> | filterable          | 否       | boolean                                                                        | 是否可筛选                     | true      |
-> | filterMethod        | 否       | (val: string, item: 选项值) => boolean                                         | 自定义筛选逻辑                 | -         |
-> | clearable           | 否       | boolean                                                                        | 是否可清空                     | true      |
-> | as                  | 否       | string                                                                         | 提交字段的别名(优先使用该字段) | -         |
-> | emptyValue          | 否       | string                                                                         | 值为空时提交的值               | undefined |
-> | resetToInitialValue | 否       | string                                                                         | 重置时是否置为初始值           | false     |
-> | disabled            | 否       | boolean \| (obj: { query: object, backfill: object }) => boolean               | 是否禁用该条件                 | -         |
-> | hide                | 否       | boolean \| (obj: { query: object, backfill: object }) => boolean               | 是否隐藏该条件                 | -         |
-> | validator           | 否       | (query: object) => string \| Promise<string> \| void                           | 校验该属性是否合格             | -         |
-> | defaultValue        | 否       | string \| string[] \| (query: object, backfill?: object) => string \| string[] | 默认值                         | -         |
-> | depend              | 否       | boolean                                                                        | 是否依赖其它字段               | -         |
-> | dependFields        | 否       | string \| string[]                                                             | 依赖的字段集合                 | -         |
+> | 属性名     | 是否必填 | 类型                                           | 描述                   | 默认值   |
+> | ---------- | -------- | ---------------------------------------------- | ---------------------- | -------- |
+> | valueKey   | 否       | string                                         | 选项的值               | value    |
+> | labelKey   | 否       | string                                         | 选项的文本内容         | label    |
+> | type       | 否       | checkbox \| button                             | 单选框类型             | checkbox |
+> | options    | 是       | any[]                                          | 数据源                 | -        |
+> | getOptions | 否       | (cb: (data: any[], query: object) =void) =void | 异步设置数据源         | -        |
+> | fields     | 否       | string[]                                       | 不同层级对应不同的字段 | -        |

tsconfig.json

@@ -0,0 +0,0 @@ {

tsconfig.node.json

@@ -0,0 +0,0 @@ {

vite.config.ts

@@ -0,0 +0,0 @@ import { resolve } from 'path';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

3

decreased by-57.14%

Number of lines in readme file

428

increased by100%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

59366

decreased by-93.06%

Number of package files

26

decreased by-43.48%

Lines of code

372

decreased by-92.52%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@xiaohaih/condition-core@0.3.0(transitive)

• - Removed@xiaohaih/condition-core@0.2.3(transitive)

• Updated@xiaohaih/condition-core@0.3.0