@vunk/form 2.4.0 → 2.5.0

package/components/cascader/src/index.vue.d.ts

@@ -151,7 +151,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         debounce: number;
         beforeFilter: (value: string) => boolean | Promise<any>;
         tagType: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown>;
-        tagEffect: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "dark" | "plain" | "light", unknown>;
+        tagEffect: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "dark" | "light" | "plain", unknown>;
         validateEvent: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     }>;
     coreOnEmits: {};
@@ -338,7 +338,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     debounce: number;
     beforeFilter: (value: string) => boolean | Promise<any>;
     tagType: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown>;
-    tagEffect: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "dark" | "plain" | "light", unknown>;
+    tagEffect: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "dark" | "light" | "plain", unknown>;
     validateEvent: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     optionsUrl: string;
 }, {}, {

package/components/fieldset/index.cjs

@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var elementPlus = require('element-plus');
+var _pluginVue_exportHelper = require('../_plugin-vue_export-helper.cjs');
+
+const props = {
+  labelWidth: {
+    type: [String, Number],
+    default: void 0
+  }
+};
+const emits = {};
+
+class ElementPlusError extends Error {
+  constructor(m) {
+    super(m);
+    this.name = "ElementPlusError";
+  }
+}
+function debugWarn(scope, message) {
+  if (process.env.NODE_ENV !== "production") {
+    const error = new ElementPlusError(`[${scope}] ${message}`) ;
+    console.warn(error);
+  }
+}
+
+const SCOPE = "ElForm";
+function useFormLabelWidth() {
+  const potentialLabelWidthArr = vue.ref([]);
+  const autoLabelWidth = vue.computed(() => {
+    if (!potentialLabelWidthArr.value.length)
+      return "0";
+    const max = Math.max(...potentialLabelWidthArr.value);
+    return max ? `${max}px` : "";
+  });
+  function getLabelWidthIndex(width) {
+    const index = potentialLabelWidthArr.value.indexOf(width);
+    if (index === -1 && autoLabelWidth.value === "0") {
+      debugWarn(SCOPE, `unexpected width ${width}`);
+    }
+    return index;
+  }
+  function registerLabelWidth(val, oldVal) {
+    if (val && oldVal) {
+      const index = getLabelWidthIndex(oldVal);
+      potentialLabelWidthArr.value.splice(index, 1, val);
+    } else if (val) {
+      potentialLabelWidthArr.value.push(val);
+    }
+  }
+  function deregisterLabelWidth(val) {
+    const index = getLabelWidthIndex(val);
+    if (index > -1) {
+      potentialLabelWidthArr.value.splice(index, 1);
+    }
+  }
+  return {
+    autoLabelWidth,
+    registerLabelWidth,
+    deregisterLabelWidth
+  };
+}
+
+var _sfc_main = vue.defineComponent({
+  name: "VkfFieldset",
+  props,
+  emits,
+  setup(props2) {
+    const formContext = vue.inject(elementPlus.formContextKey);
+    const labelWidth = vue.computed(() => {
+      return props2.labelWidth ?? formContext.labelWidth;
+    });
+    vue.provide(
+      elementPlus.formContextKey,
+      vue.reactive({
+        ...vue.toRefs(formContext),
+        labelWidth,
+        ...useFormLabelWidth()
+      })
+    );
+    return {};
+  }
+});
+
+const _hoisted_1 = { class: "vkf-fieldset" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("fieldset", _hoisted_1, [
+    vue.renderSlot(_ctx.$slots, "default")
+  ]);
+}
+var VkfFieldset = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/fieldset/src/index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkfFieldset.install = (app) => {
+  app.component(VkfFieldset.name || "VkfFieldset", VkfFieldset);
+};
+
+exports.VkfFieldset = VkfFieldset;
+exports.__VkfFieldset = types;
+exports.default = VkfFieldset;

package/components/fieldset/index.css

@@ -0,0 +1,5 @@
+.vkf-fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}

package/components/fieldset/index.d.ts

@@ -0,0 +1,4 @@
+import VkfFieldset from './src/index.vue';
+export * as __VkfFieldset from './src/types';
+export { VkfFieldset, };
+export default VkfFieldset;

package/components/fieldset/index.mjs

@@ -0,0 +1,100 @@
+import { ref, computed, defineComponent, inject, provide, reactive, toRefs, openBlock, createElementBlock, renderSlot } from 'vue';
+import { formContextKey } from 'element-plus';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+
+const props = {
+  labelWidth: {
+    type: [String, Number],
+    default: void 0
+  }
+};
+const emits = {};
+
+class ElementPlusError extends Error {
+  constructor(m) {
+    super(m);
+    this.name = "ElementPlusError";
+  }
+}
+function debugWarn(scope, message) {
+  if (process.env.NODE_ENV !== "production") {
+    const error = new ElementPlusError(`[${scope}] ${message}`) ;
+    console.warn(error);
+  }
+}
+
+const SCOPE = "ElForm";
+function useFormLabelWidth() {
+  const potentialLabelWidthArr = ref([]);
+  const autoLabelWidth = computed(() => {
+    if (!potentialLabelWidthArr.value.length)
+      return "0";
+    const max = Math.max(...potentialLabelWidthArr.value);
+    return max ? `${max}px` : "";
+  });
+  function getLabelWidthIndex(width) {
+    const index = potentialLabelWidthArr.value.indexOf(width);
+    if (index === -1 && autoLabelWidth.value === "0") {
+      debugWarn(SCOPE, `unexpected width ${width}`);
+    }
+    return index;
+  }
+  function registerLabelWidth(val, oldVal) {
+    if (val && oldVal) {
+      const index = getLabelWidthIndex(oldVal);
+      potentialLabelWidthArr.value.splice(index, 1, val);
+    } else if (val) {
+      potentialLabelWidthArr.value.push(val);
+    }
+  }
+  function deregisterLabelWidth(val) {
+    const index = getLabelWidthIndex(val);
+    if (index > -1) {
+      potentialLabelWidthArr.value.splice(index, 1);
+    }
+  }
+  return {
+    autoLabelWidth,
+    registerLabelWidth,
+    deregisterLabelWidth
+  };
+}
+
+var _sfc_main = defineComponent({
+  name: "VkfFieldset",
+  props,
+  emits,
+  setup(props2) {
+    const formContext = inject(formContextKey);
+    const labelWidth = computed(() => {
+      return props2.labelWidth ?? formContext.labelWidth;
+    });
+    provide(
+      formContextKey,
+      reactive({
+        ...toRefs(formContext),
+        labelWidth,
+        ...useFormLabelWidth()
+      })
+    );
+    return {};
+  }
+});
+
+const _hoisted_1 = { class: "vkf-fieldset" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("fieldset", _hoisted_1, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+var VkfFieldset = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/fieldset/src/index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkfFieldset.install = (app) => {
+  app.component(VkfFieldset.name || "VkfFieldset", VkfFieldset);
+};
+
+export { VkfFieldset, types as __VkfFieldset, VkfFieldset as default };

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

@@ -0,0 +1,7 @@
+export declare const props: {
+    labelWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: any;
+    };
+};
+export declare const emits: {};

package/components/fieldset/src/index.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    labelWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: any;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    labelWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: any;
+    };
+}>> & Readonly<{}>, {
+    labelWidth: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1 @@
+export {};

package/components/fieldset/src/use.d.ts

@@ -0,0 +1,5 @@
+export declare function useFormLabelWidth(): {
+    autoLabelWidth: import("vue").ComputedRef<string>;
+    registerLabelWidth: (val: number, oldVal: number) => void;
+    deregisterLabelWidth: (val: number) => void;
+};

package/components/form-item/index.cjs

@@ -68,7 +68,7 @@ var _sfc_main = vue.defineComponent({
     ElButton: elementPlus.ElButton
   },
   props,
-  setup(props2) {
+  setup(props2, { slots }) {
     const formItemBindProps = elementPlus$1.createFormItemBindProps(props2, ["rules"]);
     const readonly = composables.useComputedReadonly(props2);
     const globalConfig = elementPlus.useGlobalConfig();
@@ -118,15 +118,48 @@ var _sfc_main = vue.defineComponent({
       });
       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"];
+      const formItemSlots = props2.formItemSlots;
+      formItemSlots && Object.keys(formItemSlots).filter(keys.includes).forEach((key) => {
+        const slot = formItemSlots?.[key];
+        if (slot) {
+          theSlots[key] = slot;
+        }
+      });
+      return theSlots;
+    });
     return {
       formItemBindProps,
       readonly,
       rules: rules$1,
-      localeName
+      localeName,
+      elFormItemSlots,
+      customSlots
     };
   }
 });
 
+const _hoisted_1 = {
+  key: 1,
+  class: "vk-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");
@@ -139,7 +172,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "is-readonly": _ctx.readonly,
       "vkf-form-item--inline": _ctx.inline,
       "is-empty-label": !_ctx.label,
-      "is-information": _ctx.information
+      "is-information": _ctx.information,
+      "has-label-actions": _ctx.customSlots.labelActions
     }],
     size: _ctx.formItemSize,
     rules: _ctx.rules
@@ -202,11 +236,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["content"])) : vue.createCommentVNode("v-if", true)
+        }, 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)))
+        ])) : vue.createCommentVNode("v-if", true)
       ]),
       key: "0"
     } : void 0,
-    vue.renderList(_ctx.formItemSlots, (item, key) => {
+    vue.renderList(_ctx.elFormItemSlots, (item, key) => {
       return {
         name: key,
         fn: vue.withCtx((e) => [

package/components/form-item/index.css

@@ -20,3 +20,16 @@
 .vkf-form-item.is-empty-label .el-form-item__label:before{
   display: none;
 }
+.vkf-form-item.has-label-actions > .el-form-item__label {
+  width: 100%;
+  padding-right: 0;
+}
+.vk-form-item-label__actions {
+  float: right;
+  align-items: center;
+  display: none;
+  height: 1.8em;
+}
+.el-form-item--label-top .vk-form-item-label__actions {
+  display: inline-flex;
+}

package/components/form-item/index.mjs

@@ -1,6 +1,6 @@
 import { formItemProps, ElFormItem, ElIcon, ElTooltip, ElButton, useGlobalConfig } from 'element-plus';
 import { bindPropsFactory } from '@vunk/core/shared/utils-vue';
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, mergeProps, createSlots, withCtx, renderSlot, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, createVNode, renderList, resolveDynamicComponent } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, mergeProps, createSlots, withCtx, renderSlot, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, createVNode, resolveDynamicComponent, renderList } from 'vue';
 import { createFormItemBindProps } from '@vunk/form/shared/element-plus';
 import { useComputedReadonly } from '@vunk/form/composables';
 import { isPlainObject } from '@vunk/core/shared/utils-object';
@@ -64,7 +64,7 @@ var _sfc_main = defineComponent({
     ElButton
   },
   props,
-  setup(props2) {
+  setup(props2, { slots }) {
     const formItemBindProps = createFormItemBindProps(props2, ["rules"]);
     const readonly = useComputedReadonly(props2);
     const globalConfig = useGlobalConfig();
@@ -114,15 +114,48 @@ var _sfc_main = defineComponent({
       });
       return data;
     });
+    const elFormItemSlots = 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 = computed(() => {
+      const theSlots = {
+        labelActions: slots?.labelActions ? () => slots.labelActions?.() : void 0
+      };
+      const keys = ["labelActions"];
+      const formItemSlots = props2.formItemSlots;
+      formItemSlots && Object.keys(formItemSlots).filter(keys.includes).forEach((key) => {
+        const slot = formItemSlots?.[key];
+        if (slot) {
+          theSlots[key] = slot;
+        }
+      });
+      return theSlots;
+    });
     return {
       formItemBindProps,
       readonly,
       rules,
-      localeName
+      localeName,
+      elFormItemSlots,
+      customSlots
     };
   }
 });
 
+const _hoisted_1 = {
+  key: 1,
+  class: "vk-form-item-label__actions"
+};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Warning = resolveComponent("Warning");
   const _component_ElIcon = resolveComponent("ElIcon");
@@ -135,7 +168,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "is-readonly": _ctx.readonly,
       "vkf-form-item--inline": _ctx.inline,
       "is-empty-label": !_ctx.label,
-      "is-information": _ctx.information
+      "is-information": _ctx.information,
+      "has-label-actions": _ctx.customSlots.labelActions
     }],
     size: _ctx.formItemSize,
     rules: _ctx.rules
@@ -198,11 +232,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["content"])) : createCommentVNode("v-if", true)
+        }, 8, ["content"])) : createCommentVNode("v-if", true),
+        _ctx.customSlots.labelActions ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.customSlots.labelActions)))
+        ])) : createCommentVNode("v-if", true)
       ]),
       key: "0"
     } : void 0,
-    renderList(_ctx.formItemSlots, (item, key) => {
+    renderList(_ctx.elFormItemSlots, (item, key) => {
       return {
         name: key,
         fn: withCtx((e) => [

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

@@ -1,4 +1,5 @@
 import { FormItemRule } from 'element-plus';
+import { NormalObject } from '@vunk/shared';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<Omit<{
     formItemSize: {
         type: import("vue").PropType<"default" | "small" | "large">;
@@ -81,6 +82,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly: import("vue").ComputedRef<boolean>;
     rules: import("vue").ComputedRef<FormItemRule[]>;
     localeName: import("vue").ComputedRef<string>;
+    elFormItemSlots: import("vue").ComputedRef<NormalObject>;
+    customSlots: import("vue").ComputedRef<NormalObject>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<Omit<{
     formItemSize: {
         type: import("vue").PropType<"default" | "small" | "large">;

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

@@ -3,4 +3,5 @@ export type FormItemSlots = {
     label: Func<{
         label: string;
     }>;
+    labelActions: Func;
 };

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

@@ -1,2 +1,3 @@
-import { __VkfForm } from '@vunk/form/components/form';
-export type FormItem = __VkfForm.FormItem;
+import { __VkfInputCollection } from '@vunk/form/components/input-collection';
+import { __VkfTemplatesDefault } from '@vunk/form';
+export type FormItem<P extends string = string> = __VkfTemplatesDefault.Source<P> | __VkfInputCollection.Source<P>;

package/components/information-templates-default/index.cjs

@@ -105,8 +105,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 information: true,
                 class: vue.normalizeClass(`${_ctx.prefixCls}-main`),
                 readonly: true,
-                "model-value": value
-              }, null, 8, ["label", "class", "model-value"])
+                "model-value": value,
+                options: props.options
+              }, null, 8, ["label", "class", "model-value", "options"])
             ]),
             _: 2
             /* DYNAMIC */
@@ -145,7 +146,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                             key: index,
                             "label-render": props.summaryLabel,
                             data: item,
-                            "form-items": props.columns
+                            "form-items": props.columns.map((v) => {
+                              return {
+                                ...v,
+                                ...v.templateProps,
+                                ...v.templateProps?.createTemplateProps?.({
+                                  row: item
+                                })
+                              };
+                            })
                           }, null, 8, ["label-render", "data", "form-items"]);
                         }),
                         128

package/components/information-templates-default/index.mjs

@@ -101,8 +101,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 information: true,
                 class: normalizeClass(`${_ctx.prefixCls}-main`),
                 readonly: true,
-                "model-value": value
-              }, null, 8, ["label", "class", "model-value"])
+                "model-value": value,
+                options: props.options
+              }, null, 8, ["label", "class", "model-value", "options"])
             ]),
             _: 2
             /* DYNAMIC */
@@ -141,7 +142,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                             key: index,
                             "label-render": props.summaryLabel,
                             data: item,
-                            "form-items": props.columns
+                            "form-items": props.columns.map((v) => {
+                              return {
+                                ...v,
+                                ...v.templateProps,
+                                ...v.templateProps?.createTemplateProps?.({
+                                  row: item
+                                })
+                              };
+                            })
                           }, null, 8, ["label-render", "data", "form-items"]);
                         }),
                         128