@vunk/form 2.12.2 → 2.13.1

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

@@ -14,7 +14,7 @@ export type LayoutProps = {
      */
     templateLayout?: TemplateLayout;
 };
-export type FormItem<P extends string = string> = (__VkfTemplatesDefault.Source<P> | __VkfTemplatesLayout.ElRowSource<FormItem<P>> | __VkfTemplatesLayout.ElColSource<FormItem<P>> | __VkfTemplatesLayout.VkfFlexSource<FormItem<P>>) & LayoutProps;
+export type FormItem<P = string> = (__VkfTemplatesDefault.Source<P> | __VkfTemplatesLayout.ElRowSource<FormItem<P>> | __VkfTemplatesLayout.ElColSource<FormItem<P>> | __VkfTemplatesLayout.VkfFlexSource<FormItem<P>>) & LayoutProps;
 export type ColItem = __VkfTemplatesLayout.ElColSource<FormItem>;
 export type RowItem = __VkfTemplatesLayout.ElRowSource<ColItem>;
 export interface TemplateLayout extends VueComponentPropsType<typeof ElCol> {

package/components/form-item/index.cjs

@@ -46,7 +46,8 @@ const _props = {
   information: {
     type: Boolean,
     default: false
-  }
+  },
+  prop: null
 };
 Reflect.deleteProperty(_props, "size");
 const props = _props;
@@ -58,140 +59,65 @@ var ctx = /*#__PURE__*/Object.freeze({
   props: props
 });
 
-var _sfc_main = vue.defineComponent({
-  name: "VkfFormItem",
-  components: {
-    ElFormItem: elementPlus.ElFormItem,
-    ElIcon: elementPlus.ElIcon,
-    ElTooltip: elementPlus.ElTooltip,
-    Warning: index.warning_default,
-    ElButton: elementPlus.ElButton
+var _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
   },
-  props,
-  setup(props2, { slots }) {
-    const formItemBindProps = elementPlus$1.createFormItemBindProps(props2, ["rules"]);
-    const readonly = composables.useComputedReadonly(props2);
-    const globalConfig = elementPlus.useGlobalConfig();
-    const localeName = vue.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 = rules.PATTERN_OPTIONS.find((i) => i.value === rule.pattern);
-        if (ruleInfo) {
-          rule.message = `\u8F93\u5165 ${props2.label || "\u8BE5\u5B57\u6BB5"} ${ruleInfo.title}`;
-        }
-      }
-    };
-    const rules$1 = vue.computed(() => {
-      let data = [];
-      if (!props2.rules && props2.required) {
-        data.push({
-          required: true
-        });
-      }
-      if (utilsObject.isPlainObject(props2.rules)) {
-        data = [props2.rules];
-      }
-      if (Array.isArray(props2.rules)) {
-        data = props2.rules;
-        if (props2.required && !props2.rules.find((item) => item.required)) {
-          data.push({
-            required: true
-          });
-        }
-      }
-      data = data.filter((rule) => {
-        if (!rule) return;
-        if (utilsObject.isPlainObject(rule)) {
-          const enableKeys = Object.keys(rule).filter((key) => !key.startsWith("data-"));
-          return enableKeys.length > 0;
-        }
-      });
-      data.forEach((rule) => {
-        setDefaultMessage(rule);
-      });
-      return data;
-    });
-    const elFormItemSlots = vue.computed(() => {
-      const slots2 = {};
-      const keys = ["label", "default", "error"];
-      const formItemSlots = props2.formItemSlots;
-      if (formItemSlots) {
-        Object.keys(formItemSlots).forEach((key) => {
-          if (keys.includes(key)) {
-            slots2[key] = formItemSlots?.[key];
-          }
-        });
-      }
-      return slots2;
-    });
-    const customSlots = vue.computed(() => {
-      const theSlots = {
-        labelActions: slots?.labelActions ? () => slots.labelActions?.() : void 0
-      };
-      const keys = ["labelActions", "after"];
-      const formItemSlots = props2.formItemSlots;
-      formItemSlots && Object.keys(formItemSlots).filter((key) => keys.includes(key)).forEach((key) => {
-        const slot = formItemSlots?.[key];
-        if (slot) {
-          theSlots[key] = slot;
-        }
-      });
-      return theSlots;
-    });
-    return {
-      formItemBindProps,
-      readonly,
-      rules: rules$1,
-      localeName,
-      elFormItemSlots,
-      customSlots
-    };
+  __name: "core",
+  props: {
+    labelTip: {
+      type: String,
+      default: ""
+    },
+    formItemTip: {
+      type: String,
+      default: ""
+    },
+    formItemTipClass: null
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const __returned__ = { get ElFormItem() {
+      return elementPlus.ElFormItem;
+    }, get ElTooltip() {
+      return elementPlus.ElTooltip;
+    }, get ElIcon() {
+      return elementPlus.ElIcon;
+    }, get ElButton() {
+      return elementPlus.ElButton;
+    }, get Warning() {
+      return index.warning_default;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 });
 
 const _hoisted_1 = {
   key: 1,
-  class: "vk-form-item-label__actions"
+  class: "vkf-form-item-label__actions"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Warning = vue.resolveComponent("Warning");
-  const _component_ElIcon = vue.resolveComponent("ElIcon");
-  const _component_ElButton = vue.resolveComponent("ElButton");
-  const _component_ElTooltip = vue.resolveComponent("ElTooltip");
-  const _component_ElFormItem = vue.resolveComponent("ElFormItem");
-  return vue.openBlock(), vue.createBlock(_component_ElFormItem, vue.mergeProps(_ctx.formItemBindProps, {
-    ref: _ctx.elRef,
+  return vue.openBlock(), vue.createBlock($setup["ElFormItem"], vue.mergeProps(_ctx.$attrs, {
     class: ["vkf-form-item", {
-      "is-readonly": _ctx.readonly,
-      "vkf-form-item--inline": _ctx.inline,
-      "is-empty-label": !_ctx.label,
-      "is-information": _ctx.information,
-      "has-label-actions": _ctx.customSlots.labelActions
-    }],
-    size: _ctx.formItemSize,
-    rules: _ctx.rules
-  }), vue.createSlots({
+      "has-label-actions": _ctx.$slots.labelActions
+    }]
+  }), {
     default: vue.withCtx(() => [
+      vue.renderSlot(_ctx.$slots, "before"),
       vue.renderSlot(_ctx.$slots, "default"),
-      _ctx.customSlots.after ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.customSlots.after), { key: 0 })) : vue.createCommentVNode("v-if", true),
-      _ctx.formItemTip ? (vue.openBlock(), vue.createElementBlock(
+      vue.renderSlot(_ctx.$slots, "after"),
+      $props.formItemTip ? (vue.openBlock(), vue.createElementBlock(
         "div",
         {
-          key: 1,
-          class: vue.normalizeClass(["vkf-form-item__tip", _ctx.formItemTipClass])
+          key: 0,
+          class: vue.normalizeClass(["vkf-form-item__tip", $props.formItemTipClass])
         },
         [
           vue.createElementVNode(
             "span",
             null,
-            vue.toDisplayString(_ctx.formItemTip),
+            vue.toDisplayString($props.formItemTip),
             1
             /* TEXT */
           )
@@ -200,32 +126,28 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         /* CLASS */
       )) : vue.createCommentVNode("v-if", true)
     ]),
-    _: 2
-    /* DYNAMIC */
-  }, [
-    !_ctx.formItemSlots?.label && (_ctx.label || _ctx.labelTip) ? {
-      name: "label",
-      fn: vue.withCtx(() => [
+    label: vue.withCtx((e) => [
+      vue.renderSlot(_ctx.$slots, "label", vue.normalizeProps(vue.guardReactiveProps(e)), () => [
         vue.createElementVNode(
           "span",
           null,
-          vue.toDisplayString(_ctx.label),
+          vue.toDisplayString(e.label),
           1
           /* TEXT */
         ),
-        _ctx.labelTip ? (vue.openBlock(), vue.createBlock(_component_ElTooltip, {
+        $props.labelTip ? (vue.openBlock(), vue.createBlock($setup["ElTooltip"], {
           key: 0,
-          content: _ctx.labelTip
+          content: $props.labelTip
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(_component_ElButton, {
+            vue.createVNode($setup["ElButton"], {
               text: "",
               class: "vkf-form-item-label-tip-button"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_component_ElIcon, null, {
+                vue.createVNode($setup["ElIcon"], null, {
                   default: vue.withCtx(() => [
-                    vue.createVNode(_component_Warning)
+                    vue.createVNode($setup["Warning"])
                   ]),
                   _: 1
                   /* STABLE */
@@ -238,23 +160,97 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _: 1
           /* STABLE */
         }, 8, ["content"])) : vue.createCommentVNode("v-if", true),
-        _ctx.customSlots.labelActions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.customSlots.labelActions)))
+        _ctx.$slots.labelActions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          vue.renderSlot(_ctx.$slots, "labelActions")
         ])) : vue.createCommentVNode("v-if", true)
-      ]),
-      key: "0"
-    } : void 0,
-    vue.renderList(_ctx.elFormItemSlots, (item, key) => {
-      return {
-        name: key,
-        fn: vue.withCtx((e) => [
-          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item?.(e))))
-        ])
-      };
-    })
-  ]), 1040, ["class", "size", "rules"]);
+      ])
+    ]),
+    error: vue.withCtx((e) => [
+      vue.renderSlot(_ctx.$slots, "error", vue.normalizeProps(vue.guardReactiveProps(e)))
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 16, ["class"]);
 }
-var VkfFormItem = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/form-item/src/index.vue"]]);
+var FormItemCore = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/form-item/src/core.vue"]]);
+
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  name: "VkfFormItem",
+  props,
+  setup(props2, {
+    slots
+  }) {
+    const formItemBindProps = elementPlus$1.createFormItemBindProps(props2, ["rules"]);
+    const readonly = composables.useComputedReadonly(props2);
+    const globalConfig = elementPlus.useGlobalConfig();
+    const localeName = vue.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 = rules.PATTERN_OPTIONS.find(i => i.value === rule.pattern);
+        if (ruleInfo) {
+          rule.message = `\u8F93\u5165 ${props2.label || "\u8BE5\u5B57\u6BB5"} ${ruleInfo.title}`;
+        }
+      }
+    };
+    const rules$1 = vue.computed(() => {
+      let data = [];
+      if (!props2.rules && props2.required) {
+        data.push({
+          required: true
+        });
+      }
+      if (utilsObject.isPlainObject(props2.rules)) {
+        data = [props2.rules];
+      }
+      if (Array.isArray(props2.rules)) {
+        data = props2.rules;
+        if (props2.required && !props2.rules.find(item => item.required)) {
+          data.push({
+            required: true
+          });
+        }
+      }
+      data = data.filter(rule => {
+        if (!rule) return;
+        if (utilsObject.isPlainObject(rule)) {
+          const enableKeys = Object.keys(rule).filter(key => !key.startsWith("data-"));
+          return enableKeys.length > 0;
+        }
+      });
+      data.forEach(rule => {
+        setDefaultMessage(rule);
+      });
+      return data;
+    });
+    return () => vue.h(FormItemCore, {
+      ...formItemBindProps.value,
+      ref: props2.elRef,
+      class: {
+        "is-readonly": readonly.value,
+        "vkf-form-item--inline": props2.inline,
+        "is-empty-label": !props2.label,
+        "is-information": props2.information
+      },
+      size: props2.formItemSize,
+      rules: rules$1.value,
+      formItemTip: props2.formItemTip,
+      formItemTipClass: props2.formItemTipClass,
+      labelTip: props2.labelTip
+    }, {
+      ...slots,
+      ...props2.formItemSlots
+    });
+  }
+});
+
+var VkfFormItem = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/form-item/src/index.vue"]]);
 
 var types = /*#__PURE__*/Object.freeze({
   __proto__: null

package/components/form-item/index.css

@@ -1,12 +1,3 @@
-.vkf-form-item.is-information{
-  margin-bottom: 0;
-}
-.vkf-form-item--inline{
-  display: inline-flex;
-}
-.vkf-form-item__tip {
-  color: var(--el-text-color-secondary);
-}
 .vkf-form-item-label-tip-button:hover .el-icon {
   color: var(--el-color-primary);
 }
@@ -17,19 +8,25 @@
   margin-left: 4px;
   padding: 4px;
 }
-.vkf-form-item.is-empty-label .el-form-item__label:before{
-  display: none;
-}
-.vkf-form-item.has-label-actions > .el-form-item__label {
+.el-form-item--label-top.vkf-form-item.has-label-actions > .el-form-item__label {
   width: 100%;
   padding-right: 0;
 }
-.vk-form-item-label__actions {
+.vkf-form-item__tip {
+  color: var(--el-text-color-secondary);
+}
+.vkf-form-item-label__actions {
   float: right;
   align-items: center;
-  display: none;
+  display: inline-flex;
   height: 1.8em;
 }
-.el-form-item--label-top .vk-form-item-label__actions {
+.vkf-form-item.is-information{
+  margin-bottom: 0;
+}
+.vkf-form-item--inline{
   display: inline-flex;
 }
+.vkf-form-item.is-empty-label .el-form-item__label:before{
+  display: none;
+}