@vunk/form 1.1.13 → 1.1.15

package/components/button/index.js

@@ -1,7 +1,8 @@
 import { _VkfFormItemCtx, VkfFormItem } from '@vunk/form/components/form-item';
-import { buttonProps, buttonEmits, ElButton, ElMessage } from 'element-plus';
+import { buttonProps, buttonEmits, ElButton } from 'element-plus';
 import { defineComponent, inject, resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, createVNode, mergeProps, toHandlers, createSlots, renderSlot, createTextVNode, toDisplayString, renderList, resolveDynamicComponent } from 'vue';
 import { createButtonBindProps, createButtonOnEmits } from '@vunk/form/shared/element-plus';
+import { validateCatch } from '@vunk/form/shared/form';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -66,18 +67,7 @@ const _sfc_main = defineComponent({
         if (flag) {
           emit("click", e);
         }
-      }).catch((err) => {
-        let msg = "";
-        for (const key in err) {
-          err[key].forEach((v) => {
-            msg += v.message + ";";
-          });
-        }
-        ElMessage({
-          type: "warning",
-          message: msg
-        });
-      });
+      }).catch(validateCatch);
     };
     return {
       formBindProps,

package/components/cascader/index.css

@@ -0,0 +1,10 @@
+
+.el-cascader.is-readonly{
+  --el-readonly-cursor: text;
+  --el-disabled-bg-color: initial;
+  --el-disabled-text-color: var(--el-input-text-color);
+}
+.el-cascader.is-readonly .el-input.is-disabled .el-input__inner,
+.el-cascader.is-readonly .el-input.is-disabled{
+  cursor: var(--el-readonly-cursor);
+}

package/components/cascader/index.js

@@ -114,8 +114,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [
       createVNode(_component_ElCascader, mergeProps(_ctx.coreBindProps, toHandlers(_ctx.coreOnEmits), {
         readonly: _ctx.readonly,
-        options: _ctx.options
-      }), null, 16, ["readonly", "options"])
+        disabled: _ctx.readonly || _ctx.disabled,
+        options: _ctx.options,
+        class: {
+          "is-readonly": _ctx.readonly
+        }
+      }), null, 16, ["readonly", "disabled", "options", "class"])
     ]),
     _: 1
   }, 16);

package/components/form/src/ctx.d.ts

@@ -334,7 +334,7 @@ export declare const props: {
         default: boolean;
     };
     /**
-     * itemLayout为 true 时，
+     * layout 为 true 时，
      * 该值生效
      * el-row 添加额外属性
      */
@@ -343,7 +343,7 @@ export declare const props: {
         default: () => {};
     };
     /**
-     * itemLayout为 true 时，
+     * layout 为 true 时，
      * 该值生效
      * el-col 添加额外属性
      */

package/components/form-item/index.js

@@ -1,9 +1,10 @@
-import { formItemProps, ElFormItem } from 'element-plus';
+import { formItemProps, ElFormItem, useGlobalConfig } from 'element-plus';
 import { bindPropsFactory } from '@vunk/core/shared/utils-vue';
 import { defineComponent, computed, resolveComponent, openBlock, createBlock, mergeProps, createSlots, withCtx, renderSlot, renderList, resolveDynamicComponent } from 'vue';
 import { createFormItemBindProps } from '@vunk/form/shared/element-plus';
 import { useComputedReadonly } from '@vunk/form/composables';
-import { isNotEmptyObject } from '@vunk/core/shared/utils-object';
+import { isPlainObject, isNotEmptyObject } from '@vunk/core/shared/utils-object';
+import { PATTERN_OPTIONS } from '@vunk/form/shared/rules';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -73,19 +74,59 @@ const _sfc_main = defineComponent({
   setup(props2) {
     const formItemBindProps = createFormItemBindProps(props2, ["rules"]);
     const readonly = useComputedReadonly(props2);
+    const globalConfig = useGlobalConfig();
+    const localeName = computed(() => {
+      return globalConfig.value?.locale?.name;
+    });
+    const requiredMessage = `${props2.label || "\u8BE5\u5B57\u6BB5"}\u4E0D\u80FD\u4E3A\u7A7A`;
+    const setDefaultMessage = (rule) => {
+      if (localeName.value === "zh-cn") {
+        if (rule.message)
+          return;
+        if (rule.required) {
+          rule.message = requiredMessage;
+        }
+        const ruleInfo = PATTERN_OPTIONS.find((i) => i.value === rule.pattern);
+        if (ruleInfo) {
+          rule.message = `\u8F93\u5165 ${props2.label || "\u8BE5\u5B57\u6BB5"} ${ruleInfo.title}`;
+        }
+      }
+    };
     const rules = computed(() => {
-      let data = props2.rules;
-      if (Array.isArray(data)) {
-        data = data.filter((rule) => {
-          return isNotEmptyObject(rule);
-        });
+      let data = [];
+      if (!props2.rules) {
+        if (props2.required) {
+          data.push({
+            required: true
+          });
+        }
+      }
+      if (isPlainObject(props2.rules)) {
+        data = [props2.rules];
+      }
+      if (Array.isArray(props2.rules)) {
+        data = props2.rules;
+        if (props2.required) {
+          if (!props2.rules.find((item) => item.required)) {
+            data.push({
+              required: true
+            });
+          }
+        }
       }
+      data = data.filter((rule) => {
+        return isNotEmptyObject(rule);
+      });
+      data.forEach((rule) => {
+        setDefaultMessage(rule);
+      });
       return data;
     });
     return {
       formItemBindProps,
       readonly,
-      rules
+      rules,
+      localeName
     };
   }
 });

package/components/form-item/src/index.vue.d.ts

@@ -1,3 +1,4 @@
+import { FormItemRule } from 'element-plus';
 declare const _default: import("vue").DefineComponent<Omit<{
     formItemSize: {
         type: import("vue").PropType<"default" | "small" | "large">;
@@ -29,7 +30,7 @@ declare const _default: import("vue").DefineComponent<Omit<{
     };
     required: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
     rules: {
-        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("element-plus").FormItemRule | import("element-plus").FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>) | ((new (...args: any[]) => import("element-plus").FormItemRule | import("element-plus").FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>))[], unknown, unknown>>;
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => FormItemRule | FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<FormItemRule>) | ((new (...args: any[]) => FormItemRule | FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<FormItemRule>))[], unknown, unknown>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -63,7 +64,8 @@ declare const _default: import("vue").DefineComponent<Omit<{
         showMessage: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     }>;
     readonly: import("vue").ComputedRef<boolean>;
-    rules: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("element-plus").FormItemRule | import("element-plus").FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>) | ((new (...args: any[]) => import("element-plus").FormItemRule | import("element-plus").FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>))[], unknown, unknown> | undefined>;
+    rules: import("vue").ComputedRef<FormItemRule[]>;
+    localeName: import("vue").ComputedRef<string | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<Omit<{
     formItemSize: {
         type: import("vue").PropType<"default" | "small" | "large">;
@@ -95,7 +97,7 @@ declare const _default: import("vue").DefineComponent<Omit<{
     };
     required: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
     rules: {
-        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("element-plus").FormItemRule | import("element-plus").FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>) | ((new (...args: any[]) => import("element-plus").FormItemRule | import("element-plus").FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>))[], unknown, unknown>>;
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => FormItemRule | FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<FormItemRule>) | ((new (...args: any[]) => FormItemRule | FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<FormItemRule>))[], unknown, unknown>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;

package/components/upload/index.css

@@ -1,4 +1,7 @@
 
+.vkf-upload {
+  width: 100%;
+}
 .vkf-upload-empty-tip{
   display: none;
 }

package/index.css

@@ -1,4 +1,15 @@
 
+.el-cascader.is-readonly{
+  --el-readonly-cursor: text;
+  --el-disabled-bg-color: initial;
+  --el-disabled-text-color: var(--el-input-text-color);
+}
+.el-cascader.is-readonly .el-input.is-disabled .el-input__inner,
+.el-cascader.is-readonly .el-input.is-disabled{
+  cursor: var(--el-readonly-cursor);
+}
+
+
 .el-checkbox-group.is-readonly .el-checkbox,
 .el-checkbox-group.is-readonly{
   --el-readonly-cursor: auto;
@@ -182,6 +193,9 @@
 
 
 
+.vkf-upload {
+  width: 100%;
+}
 .vkf-upload-empty-tip{
   display: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vunk/form",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "description": "",
   "main": "index.esm.js",
   "scripts": {

package/shared/form/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 表单验证失败, 处理方式
+ * 消息提示
+ * @param err
+ */
+export declare const validateCatch: (err: any) => void;

package/shared/form/index.js

@@ -0,0 +1,16 @@
+import { ElMessage } from 'element-plus';
+
+const validateCatch = (err) => {
+  let msg = "";
+  for (const key in err) {
+    err[key].forEach((v) => {
+      msg += v.message + ";";
+    });
+  }
+  ElMessage({
+    type: "warning",
+    message: msg
+  });
+};
+
+export { validateCatch };