From 12cd747dc8ed3cfa6be5bbc731c1a6d8bc17c9d6 Mon Sep 17 00:00:00 2001 From: "1445654576@qq.com" <1445654576@qq.com> Date: Thu, 28 Oct 2021 21:31:28 +0800 Subject: [PATCH 1/9] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=9C=AA=E5=88=A4?= =?UTF-8?q?=E6=96=ADformItem=E6=98=AF=E5=90=A6=E4=B8=BA=E7=A9=BA=E7=9A=84?= =?UTF-8?q?=E5=BD=B1=E5=93=8D=E6=BA=90=E7=BB=84=E4=BB=B6=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/input/src/input.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/devui/input/src/input.tsx b/devui/input/src/input.tsx index 01331774..22822ede 100644 --- a/devui/input/src/input.tsx +++ b/devui/input/src/input.tsx @@ -18,6 +18,7 @@ export default defineComponent({ emits: ['update:value', 'focus', 'blur', 'change', 'keydown'], setup(props, ctx) { const formItem = inject(formItemInjectionKey, {} as IFormItem); + const hasFormItem = Object.keys(formItem).length > 0; const sizeCls = computed(() => `devui-input-${props.size}`); const showPwdIcon = ref(false) const inputType = ref('text') @@ -39,18 +40,18 @@ export default defineComponent({ const onInput = ($event: Event) => { ctx.emit('update:value', ($event.target as HTMLInputElement).value); - formItem.formItemMitt.emit(dFormItemEvents.input); + hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.input); }, onFocus = () => { ctx.emit('focus'); }, onBlur = () => { ctx.emit('blur'); - formItem.formItemMitt.emit(dFormItemEvents.blur); + hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.blur); }, onChange = ($event: Event) => { ctx.emit('change', ($event.target as HTMLInputElement).value); - formItem.formItemMitt.emit(dFormItemEvents.change); + hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.change); }, onKeydown = ($event: KeyboardEvent) => { ctx.emit('keydown', $event); -- Gitee From c9e997c5983928ef2c20e34f58c839323f4e0c33 Mon Sep 17 00:00:00 2001 From: "1445654576@qq.com" <1445654576@qq.com> Date: Sat, 30 Oct 2021 11:43:35 +0800 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=B7=A5?= =?UTF-8?q?=E5=85=B7=E5=87=BD=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/form/src/util/index.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 devui/form/src/util/index.ts diff --git a/devui/form/src/util/index.ts b/devui/form/src/util/index.ts new file mode 100644 index 00000000..a1fac48d --- /dev/null +++ b/devui/form/src/util/index.ts @@ -0,0 +1,12 @@ + +import eventBus from './event-bus' +export const EventBus = eventBus; + +export function isObject(obj: any): boolean { + return Object.prototype.toString.call(obj).slice(8, -1) === 'Object'; +} + +export function hasKey(obj: any, key: string | number | symbol): boolean { + if (!isObject(obj)) return false; + return Object.prototype.hasOwnProperty.call(obj, key); +} -- Gitee From cab25d3341a5980a17f48af2b7c0a4f6d6fbbcc4 Mon Sep 17 00:00:00 2001 From: "1445654576@qq.com" <1445654576@qq.com> Date: Sat, 30 Oct 2021 11:46:36 +0800 Subject: [PATCH 3/9] =?UTF-8?q?fix:=20=E5=A2=9E=E5=8A=A0=E7=B1=BB=E5=9E=8B?= =?UTF-8?q?=E9=99=90=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/form/src/directive/d-validate-rules.ts | 135 ++++++++++++++----- 1 file changed, 98 insertions(+), 37 deletions(-) diff --git a/devui/form/src/directive/d-validate-rules.ts b/devui/form/src/directive/d-validate-rules.ts index dd7b7e8c..428df37f 100644 --- a/devui/form/src/directive/d-validate-rules.ts +++ b/devui/form/src/directive/d-validate-rules.ts @@ -1,11 +1,69 @@ -import AsyncValidator from 'async-validator'; -import { VNode } from 'vue'; +import AsyncValidator, { RuleItem } from 'async-validator'; +import { VNode, DirectiveBinding } from 'vue'; import './style.scss'; import { debounce } from 'lodash'; -import EventBus from '../util/event-bus'; +import { EventBus, isObject, hasKey } from '../util'; + +interface ValidateFnParam { + validator: AsyncValidator + modelValue: Record + el: HTMLElement + tipEl: HTMLElement + isFormTag: boolean + message: string + messageShowType: MessageShowType +} + +interface CustomValidatorRuleObject { + message: string + validator: (rule, value) => boolean + asyncValidator: (rule, value) => Promise +} + +interface DirectiveValidateRuleOptions { + updateOn?: UpdateOn + errorStrategy?: ErrorStrategy + asyncDebounceTime?: number +} + +interface DirectiveBindingValue { + rules: Partial[] + options: DirectiveValidateRuleOptions + messageShowType: MessageShowType + errorStrategy: ErrorStrategy +} + +interface DirectiveCustomRuleItem extends RuleItem { + validators: CustomValidatorRuleObject[] + asyncValidators: CustomValidatorRuleObject[] +} + +type MessageShowType = 'popover' | 'text' | 'none' | 'toast'; +type UpdateOn = 'input' | 'focus' | 'change' | 'blur' | 'submit'; +type ErrorStrategy = 'dirty' | 'pristine'; + +enum ErrorStrategyEnum { + dirty = 'dirty', + pristine = 'pristine' +} + +enum UpdateOnEnum { + input = 'input', + focus = 'focus', + change = 'change', + blur = 'blur', + submit = 'submit', +} + +enum MessageShowTypeEnum { + popover = 'popover', + text = 'text', + none = 'none', + toast = 'toast' +} // 获取async-validator可用的规则名 -function getAvaliableRuleObj(ruleName: string, value) { +function getAvaliableRuleObj(ruleName: string, value: any) { if(!ruleName) { console.error("[v-d-validate] validator's key is invalid"); return null; @@ -127,17 +185,6 @@ function getKeyValueOfObjectList(obj): {key: string; value: any;}[] { return kvArr; } - -function isObject(obj): boolean { - return Object.prototype.toString.call(obj).slice(8, -1) === 'Object'; -} - - -function hasKey(obj, key): boolean { - if (!isObject(obj)) return false; - return Object.prototype.hasOwnProperty.call(obj, key); -} - function handleErrorStrategy(el: HTMLElement): void { const classList: Array = [...el.classList]; classList.push('d-validate-rules-error-pristine'); @@ -151,9 +198,9 @@ function handleErrorStrategyPass(el: HTMLElement): void { el.setAttribute('class', classList.join(' ')); } -function handleValidateError(el: HTMLElement, tipEl: HTMLElement, message: string, isFormTag: boolean, messageShowType: string): void { +function handleValidateError({el, tipEl, message, isFormTag, messageShowType}: Partial): void { // 如果该指令用在form标签上，这里做特殊处理 - if(isFormTag && messageShowType === 'toast') { + if(isFormTag && messageShowType === MessageShowTypeEnum.toast) { // todo：待替换为toast alert(message); return; @@ -171,14 +218,14 @@ function handleValidatePass(el: HTMLElement, tipEl: HTMLElement): void { } // 获取表单name -function getFormName(binding): string { +function getFormName(binding: DirectiveBinding): string { const _refs = binding.instance.$refs; const key = Object.keys(_refs)[0]; return _refs[key]['name']; } // 校验处理函数 -function validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowType}) { +function validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowType}: Partial) { validator.validate({modelName: modelValue}).then(() => { handleValidatePass(el, tipEl); }).catch((err) => { @@ -193,36 +240,50 @@ function validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowTyp msg = errors[0].message; } - handleValidateError(el, tipEl, msg, isFormTag, messageShowType); + handleValidateError({el, tipEl, message: msg, isFormTag, messageShowType}); }) } export default { - mounted(el: HTMLElement, binding: any, vnode: VNode): void { + mounted(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void { const isFormTag = el.tagName === 'FORM'; const hasOptions = isObject(binding.value) && hasKey(binding.value, 'options'); - const {rules: bindingRules, options = {}, messageShowType = 'popover'} = binding.value; - isFormTag && console.log('messageShowType', messageShowType); - - let {errorStrategy} = binding.value; + + // 获取指令绑定的值 + const { + rules: bindingRules, + options = {}, + messageShowType = MessageShowTypeEnum.popover + }: DirectiveBindingValue = binding.value; + let { errorStrategy }: DirectiveBindingValue = binding.value; + // errorStrategy可配置在options对象中 - const { updateOn = 'change', errorStrategy: optionsErrorStrategy = 'dirty', asyncDebounceTime = 300} = options; + const { + updateOn = UpdateOnEnum.change, + errorStrategy: ErrorStrategy = ErrorStrategyEnum.dirty, + asyncDebounceTime = 300 + }: DirectiveValidateRuleOptions = options; if(!errorStrategy) { - errorStrategy = optionsErrorStrategy; + errorStrategy = ErrorStrategy; } // 判断是否有options，有就取binding.value对象中的rules对象，再判断有没有rules对象，没有就取binding.value - const bindRules = hasOptions ? bindingRules : (bindingRules ? bindingRules : binding.value); + let customRule: Partial | DirectiveBindingValue = {}; + if(hasOptions) { + customRule = bindingRules ?? binding.value + }else { + customRule = binding.value as DirectiveBindingValue + } - const isCustomValidator = bindRules && isObject(bindRules) && (hasKey(bindRules, 'validators') || hasKey(bindRules, 'asyncValidators')); + const isCustomValidator = customRule && isObject(customRule) && (hasKey(customRule, 'validators') || hasKey(customRule, 'asyncValidators')); - const rules = Array.isArray(bindRules) ? bindRules : [bindRules]; + const rules = Array.isArray(customRule) ? customRule : [customRule]; const tipEl = document.createElement('span'); // messageShowType控制是否显示文字提示 - if(messageShowType !== 'none') { + if(messageShowType !== MessageShowTypeEnum.none) { el.parentNode.append(tipEl); } @@ -232,7 +293,7 @@ export default { rules.forEach((rule) => { const kvObjList = !Array.isArray(rule) && getKeyValueOfObjectList(rule); - let ruleObj = {}; + let ruleObj: Partial = {}; let avaliableRuleObj = {}; kvObjList.forEach(item => { avaliableRuleObj = getAvaliableRuleObj(item.key, item.value); @@ -244,11 +305,11 @@ export default { // 使用自定义的验证器 if(isCustomValidator) { // descriptor.modelName = []; - const {validators, asyncValidators} = bindRules; + const {validators, asyncValidators} = customRule as DirectiveCustomRuleItem; // 校验器 validators && validators.forEach(item => { - const ruleObj = { + const ruleObj: Partial = { message: item?.message || '', validator: (rule, value) => item.validator(rule, value), } @@ -257,9 +318,9 @@ export default { // 异步校验器 asyncValidators && asyncValidators.forEach(item => { - const ruleObj = { + const ruleObj: Partial = { message: item?.message || '', - asyncValidator: (rule, value, callback) => { + asyncValidator: (rule, value) => { return new Promise(debounce((resolve, reject) => { const res = item.asyncValidator(rule, value); if(res) { @@ -286,7 +347,7 @@ export default { vnode.children[0].el.addEventListener(updateOn, htmlEventValidateHandler); // 设置errorStrategy - if(errorStrategy === 'pristine') { + if(errorStrategy === ErrorStrategyEnum.pristine) { handleErrorStrategy(el); // pristine为初始化验证，初始化时需改变下原始值才能出发验证 vnode.children[0].props.value = '' + vnode.children[0].props.value; -- Gitee From 4758b9b4d306dcb9cdc05ca4cd585838f877c88b Mon Sep 17 00:00:00 2001 From: "1445654576@qq.com" <1445654576@qq.com> Date: Sat, 30 Oct 2021 11:55:18 +0800 Subject: [PATCH 4/9] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4import=E7=9A=84?= =?UTF-8?q?=E9=A1=BA=E5=BA=8F=EF=BC=8C=E6=9B=B4=E6=94=B9debounce=E7=9A=84?= =?UTF-8?q?=E5=BC=95=E5=85=A5=E6=9D=A5=E6=BA=90=E4=B8=BAlodash-es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/form/src/directive/d-validate-rules.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/devui/form/src/directive/d-validate-rules.ts b/devui/form/src/directive/d-validate-rules.ts index 428df37f..658bd0c3 100644 --- a/devui/form/src/directive/d-validate-rules.ts +++ b/devui/form/src/directive/d-validate-rules.ts @@ -1,8 +1,8 @@ import AsyncValidator, { RuleItem } from 'async-validator'; import { VNode, DirectiveBinding } from 'vue'; -import './style.scss'; -import { debounce } from 'lodash'; +import { debounce } from 'lodash-es'; import { EventBus, isObject, hasKey } from '../util'; +import './style.scss'; interface ValidateFnParam { validator: AsyncValidator -- Gitee From a66a8550e3ee40918dc9fdb9cc07110aa8bb802e Mon Sep 17 00:00:00 2001 From: "1445654576@qq.com" <1445654576@qq.com> Date: Sat, 30 Oct 2021 11:57:49 +0800 Subject: [PATCH 5/9] =?UTF-8?q?fix:=20=E5=B0=86tab=E7=BC=A9=E8=BF=9B?= =?UTF-8?q?=E6=94=B9=E4=B8=BA=E7=A9=BA=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/form/src/form-control/form-control.tsx | 78 ++++++++++---------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/devui/form/src/form-control/form-control.tsx b/devui/form/src/form-control/form-control.tsx index 2b5cb779..5a221b45 100644 --- a/devui/form/src/form-control/form-control.tsx +++ b/devui/form/src/form-control/form-control.tsx @@ -4,44 +4,44 @@ import Icon from '../../../icon/src/icon'; import {IForm, formControlProps, formInjectionKey} from '../form-types'; export default defineComponent({ - name: 'DFormControl', - props: formControlProps, - setup(props, ctx) { - const formControl = ref(); - const dForm = reactive(inject(formInjectionKey, {} as IForm)); - const labelData = reactive(dForm.labelData); - const isHorizontal = labelData.layout === 'horizontal'; + name: 'DFormControl', + props: formControlProps, + setup(props, ctx) { + const formControl = ref(); + const dForm = reactive(inject(formInjectionKey, {} as IForm)); + const labelData = reactive(dForm.labelData); + const isHorizontal = labelData.layout === 'horizontal'; - const iconData = computed(() => { - switch(props.feedbackStatus) { - case 'pending': - return {name: 'priority', color: '#e9edfa'}; - case 'success': - return {name: 'right-o', color: 'rgb(61, 204, 166)'}; - case 'error': - return {name: 'error-o', color: 'rgb(249, 95, 91)'}; - default: - return {name: '', color: ''}; - } - }) - - return () => { - const { - feedbackStatus, - extraInfo, - } = props; - return
-
- {ctx.slots.default?.()} - { - (feedbackStatus || ctx.slots.suffixTemplate?.()) && - - } -
- {extraInfo &&
{extraInfo}
} -
- } - } + const iconData = computed(() => { + switch(props.feedbackStatus) { + case 'pending': + return {name: 'priority', color: '#e9edfa'}; + case 'success': + return {name: 'right-o', color: 'rgb(61, 204, 166)'}; + case 'error': + return {name: 'error-o', color: 'rgb(249, 95, 91)'}; + default: + return {name: '', color: ''}; + } + }) + + return () => { + const { + feedbackStatus, + extraInfo, + } = props; + return
+
+ {ctx.slots.default?.()} + { + (feedbackStatus || ctx.slots.suffixTemplate?.()) && + + } +
+ {extraInfo &&
{extraInfo}
} +
+ } + } }) \ No newline at end of file -- Gitee From 9c93e4e6cb2d0713fd7eabbacc59453758c5cd89 Mon Sep 17 00:00:00 2001 From: "1445654576@qq.com" <1445654576@qq.com> Date: Sat, 30 Oct 2021 12:02:26 +0800 Subject: [PATCH 6/9] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4import=E7=9A=84?= =?UTF-8?q?=E9=A1=BA=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/form/src/form-control/form-control.tsx | 4 ++-- devui/form/src/form-item/form-item.tsx | 5 +++-- devui/form/src/form-label/form-label.tsx | 2 +- devui/form/src/form.tsx | 7 ++++--- 4 files changed, 10 insertions(+), 8 deletions(-) diff --git a/devui/form/src/form-control/form-control.tsx b/devui/form/src/form-control/form-control.tsx index 5a221b45..18150919 100644 --- a/devui/form/src/form-control/form-control.tsx +++ b/devui/form/src/form-control/form-control.tsx @@ -1,7 +1,7 @@ import { defineComponent, inject, ref, computed, reactive } from 'vue'; -import './form-control.scss'; -import Icon from '../../../icon/src/icon'; import {IForm, formControlProps, formInjectionKey} from '../form-types'; +import Icon from '../../../icon/src/icon'; +import './form-control.scss'; export default defineComponent({ name: 'DFormControl', diff --git a/devui/form/src/form-item/form-item.tsx b/devui/form/src/form-item/form-item.tsx index 5d677c63..738b98f3 100644 --- a/devui/form/src/form-item/form-item.tsx +++ b/devui/form/src/form-item/form-item.tsx @@ -1,8 +1,9 @@ import { defineComponent, reactive, inject, onMounted, onBeforeUnmount, provide, ref} from 'vue'; -import { dFormEvents, dFormItemEvents, IForm, formItemProps, formInjectionKey, formItemInjectionKey } from '../form-types'; -import './form-item.scss'; import AsyncValidator, { Rules } from 'async-validator'; import mitt from 'mitt'; +import { dFormEvents, dFormItemEvents, IForm, formItemProps, formInjectionKey, formItemInjectionKey } from '../form-types'; +import './form-item.scss'; + export default defineComponent({ name: 'DFormItem', diff --git a/devui/form/src/form-label/form-label.tsx b/devui/form/src/form-label/form-label.tsx index b3a2fe9f..59ac9f16 100644 --- a/devui/form/src/form-label/form-label.tsx +++ b/devui/form/src/form-label/form-label.tsx @@ -1,8 +1,8 @@ import { defineComponent, inject, reactive, computed } from 'vue'; import { IForm, formLabelProps, FormLabelProps, formInjectionKey } from '../form-types'; -import './form-label.scss'; import Icon from '../../../icon/src/icon'; import Popover from '../../../popover/src/popover'; +import './form-label.scss'; export default defineComponent({ name: 'DFormLabel', diff --git a/devui/form/src/form.tsx b/devui/form/src/form.tsx index 8aa16ca2..e8fbe99d 100644 --- a/devui/form/src/form.tsx +++ b/devui/form/src/form.tsx @@ -1,9 +1,10 @@ -import './form.scss' import { defineComponent, provide } from 'vue' -import { formProps, FormProps, IFormItem, dFormEvents, formInjectionKey, IForm } from './form-types' import mitt from 'mitt' -import EventBus from './util/event-bus' +import { formProps, FormProps, IFormItem, dFormEvents, formInjectionKey, IForm } from './form-types' +import { EventBus } from './util' +import './form.scss' + export default defineComponent({ name: 'DForm', -- Gitee From 7eb489c7904e0224b45749b65707dbba4edb27e7 Mon Sep 17 00:00:00 2001 From: "1445654576@qq.com" <1445654576@qq.com> Date: Sat, 30 Oct 2021 12:20:39 +0800 Subject: [PATCH 7/9] =?UTF-8?q?fix:=20=E6=B3=A8=E9=87=8Alog=E8=AF=AD?= =?UTF-8?q?=E5=8F=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/form/src/form-item/form-item.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/form/src/form-item/form-item.tsx b/packages/devui-vue/devui/form/src/form-item/form-item.tsx index 738b98f3..18228ff2 100644 --- a/packages/devui-vue/devui/form/src/form-item/form-item.tsx +++ b/packages/devui-vue/devui/form/src/form-item/form-item.tsx @@ -37,7 +37,7 @@ export default defineComponent({ const tipMessage = ref(''); const validate = (trigger: string) => { - console.log('trigger', trigger); + // console.log('trigger', trigger); const ruleKey = props.prop; const ruleItem = rules[ruleKey]; @@ -50,7 +50,7 @@ export default defineComponent({ showMessage.value = false; tipMessage.value = ''; }).catch(({ errors }) => { - console.log('validator errors', errors); + // console.log('validator errors', errors); showMessage.value = true; tipMessage.value = errors[0].message; }); -- Gitee From 499c4ff163424d1b47b4466d451a4d8a1eb3f980 Mon Sep 17 00:00:00 2001 From: "1445654576@qq.com" <1445654576@qq.com> Date: Sat, 30 Oct 2021 12:35:54 +0800 Subject: [PATCH 8/9] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=BC=80?= =?UTF-8?q?=E5=8F=91=E8=BF=9B=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/form/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/devui-vue/devui/form/index.ts b/packages/devui-vue/devui/form/index.ts index 199838e7..ba7b235f 100644 --- a/packages/devui-vue/devui/form/index.ts +++ b/packages/devui-vue/devui/form/index.ts @@ -32,6 +32,7 @@ export { Form, FormLabel, FormItem, FormControl, FormOperation } export default { title: 'Form 表单', category: '数据录入', + status: '70%', install(app: App): void { app.use(Form as any); app.use(FormLabel as any); -- Gitee From 43f31dc0e8f31c0c39bc0bb9403d2a2a94676e54 Mon Sep 17 00:00:00 2001 From: "1445654576@qq.com" <1445654576@qq.com> Date: Sat, 30 Oct 2021 12:40:25 +0800 Subject: [PATCH 9/9] =?UTF-8?q?fix:=20=E5=B0=86tab=E7=BC=A9=E8=BF=9B?= =?UTF-8?q?=E6=94=B9=E4=B8=BA=E7=A9=BA=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/form/src/form-item/form-item.tsx | 174 +++++++++--------- .../devui/form/src/form-label/form-label.tsx | 70 +++---- .../src/form-operation/form-operation.tsx | 22 +-- 3 files changed, 133 insertions(+), 133 deletions(-) diff --git a/packages/devui-vue/devui/form/src/form-item/form-item.tsx b/packages/devui-vue/devui/form/src/form-item/form-item.tsx index 18228ff2..28fddf78 100644 --- a/packages/devui-vue/devui/form/src/form-item/form-item.tsx +++ b/packages/devui-vue/devui/form/src/form-item/form-item.tsx @@ -6,101 +6,101 @@ import './form-item.scss'; export default defineComponent({ - name: 'DFormItem', - props: formItemProps, - setup(props, ctx) { - const formItemMitt = mitt(); - const dForm = reactive(inject(formInjectionKey, {} as IForm)); - const formData = reactive(dForm.formData); - const columnsClass = ref(dForm.columnsClass); - const initFormItemData = formData[props.prop]; - const labelData = reactive(dForm.labelData); - const rules = reactive(dForm.rules); - - const resetField = () => { - formData[props.prop] = initFormItemData; - } + name: 'DFormItem', + props: formItemProps, + setup(props, ctx) { + const formItemMitt = mitt(); + const dForm = reactive(inject(formInjectionKey, {} as IForm)); + const formData = reactive(dForm.formData); + const columnsClass = ref(dForm.columnsClass); + const initFormItemData = formData[props.prop]; + const labelData = reactive(dForm.labelData); + const rules = reactive(dForm.rules); + + const resetField = () => { + formData[props.prop] = initFormItemData; + } - const formItem = reactive({ - dHasFeedback: props.dHasFeedback, - prop: props.prop, - formItemMitt, - resetField - }) - provide(formItemInjectionKey, formItem); + const formItem = reactive({ + dHasFeedback: props.dHasFeedback, + prop: props.prop, + formItemMitt, + resetField + }) + provide(formItemInjectionKey, formItem); - const isHorizontal = labelData.layout === 'horizontal'; - const isVertical = labelData.layout === 'vertical'; - const isColumns = labelData.layout === 'columns'; + const isHorizontal = labelData.layout === 'horizontal'; + const isVertical = labelData.layout === 'vertical'; + const isColumns = labelData.layout === 'columns'; - const showMessage = ref(false); - const tipMessage = ref(''); + const showMessage = ref(false); + const tipMessage = ref(''); - const validate = (trigger: string) => { - // console.log('trigger', trigger); - - const ruleKey = props.prop; - const ruleItem = rules[ruleKey]; - const descriptor: Rules = {}; - descriptor[ruleKey] = ruleItem; - - const validator = new AsyncValidator(descriptor); + const validate = (trigger: string) => { + // console.log('trigger', trigger); + + const ruleKey = props.prop; + const ruleItem = rules[ruleKey]; + const descriptor: Rules = {}; + descriptor[ruleKey] = ruleItem; + + const validator = new AsyncValidator(descriptor); - validator.validate({[ruleKey]: formData[ruleKey]}).then(() => { - showMessage.value = false; - tipMessage.value = ''; - }).catch(({ errors }) => { - // console.log('validator errors', errors); - showMessage.value = true; - tipMessage.value = errors[0].message; - }); - } - const validateEvents = []; + validator.validate({[ruleKey]: formData[ruleKey]}).then(() => { + showMessage.value = false; + tipMessage.value = ''; + }).catch(({ errors }) => { + // console.log('validator errors', errors); + showMessage.value = true; + tipMessage.value = errors[0].message; + }); + } + const validateEvents = []; - const addValidateEvents = () => { - if(rules && rules[props.prop]) { - const ruleItem = rules[props.prop]; - let eventName = ruleItem['trigger']; + const addValidateEvents = () => { + if(rules && rules[props.prop]) { + const ruleItem = rules[props.prop]; + let eventName = ruleItem['trigger']; - if(Array.isArray(ruleItem)) { - ruleItem.forEach((item) => { - eventName = item['trigger']; - const cb = () => validate(eventName); - validateEvents.push({eventName: cb}); - formItem.formItemMitt.on(dFormItemEvents[eventName], cb); - }); - }else { - const cb = () => validate(eventName); - validateEvents.push({eventName: cb}); - ruleItem && formItem.formItemMitt.on(dFormItemEvents[eventName], cb); - } - } - } + if(Array.isArray(ruleItem)) { + ruleItem.forEach((item) => { + eventName = item['trigger']; + const cb = () => validate(eventName); + validateEvents.push({eventName: cb}); + formItem.formItemMitt.on(dFormItemEvents[eventName], cb); + }); + }else { + const cb = () => validate(eventName); + validateEvents.push({eventName: cb}); + ruleItem && formItem.formItemMitt.on(dFormItemEvents[eventName], cb); + } + } + } - const removeValidateEvents = () => { - if(rules && rules[props.prop] && validateEvents.length > 0) { - validateEvents.forEach(item => { - formItem.formItemMitt.off(item.eventName, item.cb); - }); - } - } + const removeValidateEvents = () => { + if(rules && rules[props.prop] && validateEvents.length > 0) { + validateEvents.forEach(item => { + formItem.formItemMitt.off(item.eventName, item.cb); + }); + } + } - onMounted(() => { - dForm.formMitt.emit(dFormEvents.addField, formItem); - addValidateEvents(); - }); + onMounted(() => { + dForm.formMitt.emit(dFormEvents.addField, formItem); + addValidateEvents(); + }); - onBeforeUnmount(() => { - dForm.formMitt.emit(dFormEvents.removeField, formItem); - removeValidateEvents(); - }); - return () => { - return ( -
- {ctx.slots.default?.()} -
{showMessage.value && tipMessage.value}
-
- ) - } - }, + onBeforeUnmount(() => { + dForm.formMitt.emit(dFormEvents.removeField, formItem); + removeValidateEvents(); + }); + return () => { + return ( +
+ {ctx.slots.default?.()} +
{showMessage.value && tipMessage.value}
+
+ ) + } + }, }) \ No newline at end of file diff --git a/packages/devui-vue/devui/form/src/form-label/form-label.tsx b/packages/devui-vue/devui/form/src/form-label/form-label.tsx index 59ac9f16..51715fdc 100644 --- a/packages/devui-vue/devui/form/src/form-label/form-label.tsx +++ b/packages/devui-vue/devui/form/src/form-label/form-label.tsx @@ -5,40 +5,40 @@ import Popover from '../../../popover/src/popover'; import './form-label.scss'; export default defineComponent({ - name: 'DFormLabel', - props: formLabelProps, - setup(props: FormLabelProps, ctx) { - const dForm = reactive(inject(formInjectionKey, {} as IForm)); - const labelData = reactive(dForm.labelData); + name: 'DFormLabel', + props: formLabelProps, + setup(props: FormLabelProps, ctx) { + const dForm = reactive(inject(formInjectionKey, {} as IForm)); + const labelData = reactive(dForm.labelData); - const isHorizontal = computed(() => labelData.layout === 'horizontal').value; - const isLg = computed(() => labelData.labelSize === 'lg').value; - const isSm = computed(() => labelData.labelSize === 'sm').value; - const isCenter = computed(() => labelData.labelAlign === 'center').value; - const isEnd = computed(() => labelData.labelAlign === 'end').value; - - const wrapperCls = `form-label${isHorizontal ? (isSm ? ' form-label_sm' : (isLg ? ' form-label_lg' : ' form-label_sd')) : ''}${isCenter ? ' form-label_center' : (isEnd ? ' form-label_end' : '')}`; - const className = `${props.required ? ' devui-required' : ''}`; - const style = {display: isHorizontal ? 'inline' : 'inline-block'}; - - return () => { - return - - {ctx.slots.default?.()} - { - props.hasHelp && props.helpTips && ( - ( - - - - ) - }}> - - ) - } - - - } - } + const isHorizontal = computed(() => labelData.layout === 'horizontal').value; + const isLg = computed(() => labelData.labelSize === 'lg').value; + const isSm = computed(() => labelData.labelSize === 'sm').value; + const isCenter = computed(() => labelData.labelAlign === 'center').value; + const isEnd = computed(() => labelData.labelAlign === 'end').value; + + const wrapperCls = `form-label${isHorizontal ? (isSm ? ' form-label_sm' : (isLg ? ' form-label_lg' : ' form-label_sd')) : ''}${isCenter ? ' form-label_center' : (isEnd ? ' form-label_end' : '')}`; + const className = `${props.required ? ' devui-required' : ''}`; + const style = {display: isHorizontal ? 'inline' : 'inline-block'}; + + return () => { + return + + {ctx.slots.default?.()} + { + props.hasHelp && props.helpTips && ( + ( + + + + ) + }}> + + ) + } + + + } + } }) \ No newline at end of file diff --git a/packages/devui-vue/devui/form/src/form-operation/form-operation.tsx b/packages/devui-vue/devui/form/src/form-operation/form-operation.tsx index 643591cd..5a589a9a 100644 --- a/packages/devui-vue/devui/form/src/form-operation/form-operation.tsx +++ b/packages/devui-vue/devui/form/src/form-operation/form-operation.tsx @@ -2,15 +2,15 @@ import { defineComponent } from 'vue'; import './form-operation.scss'; export default defineComponent({ - name: 'DFormOperation', - props: { - - }, - setup(props, ctx) { - return () => { - return
- {ctx.slots.default?.()} -
- } - } + name: 'DFormOperation', + props: { + + }, + setup(props, ctx) { + return () => { + return
+ {ctx.slots.default?.()} +
+ } + } }) \ No newline at end of file -- Gitee