jky-component-lib 0.0.64 → 0.0.65

package/dist/es/form/Form.vue.d.ts

@@ -88,7 +88,7 @@ declare function getFormInstance(): ({
     validateOnRuleChange: boolean;
 }> & Omit<Readonly<import('element-plus').FormProps> & Readonly<{
     onValidate?: ((prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => any) | undefined;
-}>, "labelWidth" | "labelPosition" | "showMessage" | "validate" | "clearValidate" | "requireAsteriskPosition" | "labelSuffix" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validateField" | "resetFields" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & import('vue').ShallowUnwrapRef<{
+}>, "labelPosition" | "requireAsteriskPosition" | "labelWidth" | "labelSuffix" | "showMessage" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validate" | "validateField" | "resetFields" | "clearValidate" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & import('vue').ShallowUnwrapRef<{
     validate: (callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
     validateField: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>, callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
     resetFields: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>) => void;
@@ -195,7 +195,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
         validateOnRuleChange: boolean;
     }> & Omit<Readonly<import('element-plus').FormProps> & Readonly<{
         onValidate?: ((prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => any) | undefined;
-    }>, "labelWidth" | "labelPosition" | "showMessage" | "validate" | "clearValidate" | "requireAsteriskPosition" | "labelSuffix" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validateField" | "resetFields" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & import('vue').ShallowUnwrapRef<{
+    }>, "labelPosition" | "requireAsteriskPosition" | "labelWidth" | "labelSuffix" | "showMessage" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validate" | "validateField" | "resetFields" | "clearValidate" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & import('vue').ShallowUnwrapRef<{
         validate: (callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
         validateField: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>, callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
         resetFields: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>) => void;
@@ -293,7 +293,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
         validateOnRuleChange: boolean;
     }> & Omit<Readonly<import('element-plus').FormProps> & Readonly<{
         onValidate?: ((prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => any) | undefined;
-    }>, "labelWidth" | "labelPosition" | "showMessage" | "validate" | "clearValidate" | "requireAsteriskPosition" | "labelSuffix" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validateField" | "resetFields" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & import('vue').ShallowUnwrapRef<{
+    }>, "labelPosition" | "requireAsteriskPosition" | "labelWidth" | "labelSuffix" | "showMessage" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validate" | "validateField" | "resetFields" | "clearValidate" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & import('vue').ShallowUnwrapRef<{
         validate: (callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
         validateField: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>, callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
         resetFields: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>) => void;
@@ -327,16 +327,20 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     }) => any) | undefined;
 }>, {
     size: import('element-plus').ComponentSize;
-    labelWidth: string | number;
+    grid: import('./types').GridConfig;
+    inline: boolean;
     labelPosition: "left" | "right" | "top";
-    showFooter: boolean;
+    labelWidth: string | number;
     showTitle: boolean;
     gutter: number;
     defaultSpan: number;
     responsive: boolean;
     watchDeep: boolean;
+    showFooter: boolean;
+    footerClass: string;
     submitText: string;
     cancelText: string;
+    showCount: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     formRef: ({
         $: import('vue').ComponentInternalInstance;
@@ -423,7 +427,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
         validateOnRuleChange: boolean;
     }> & Omit<Readonly<import('element-plus').FormProps> & Readonly<{
         onValidate?: ((prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => any) | undefined;
-    }>, "labelWidth" | "labelPosition" | "showMessage" | "validate" | "clearValidate" | "requireAsteriskPosition" | "labelSuffix" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validateField" | "resetFields" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & import('vue').ShallowUnwrapRef<{
+    }>, "labelPosition" | "requireAsteriskPosition" | "labelWidth" | "labelSuffix" | "showMessage" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validate" | "validateField" | "resetFields" | "clearValidate" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & import('vue').ShallowUnwrapRef<{
         validate: (callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
         validateField: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>, callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
         resetFields: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>) => void;

package/dist/es/form/Form.vue.js

@@ -49,18 +49,14 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { defineComponent, useModel, ref, computed, useAttrs, watch, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createVNode, unref, mergeProps, withCtx, Fragment, renderList, createBlock, createTextVNode, mergeModels } from "vue";
-import { ElForm, ElButton } from "element-plus";
+import { defineComponent, useModel, provide, ref, useAttrs, computed, watch, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createVNode, unref, mergeProps, withCtx, Fragment, renderList, createBlock, createElementVNode, createTextVNode, mergeModels } from "vue";
+import { ElForm, ElFormItem, ElButton } from "element-plus";
 import _sfc_main$1 from "./FormItem.vue.js";
 /* empty css              */
 const _hoisted_1 = {
   key: 0,
   class: "jky-form__title mb-4 text-xl font-semibold"
 };
-const _hoisted_2 = {
-  key: 1,
-  class: "jky-form__footer mt-6 flex justify-end gap-2"
-};
 const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
   name: "JkyForm",
   inheritAttrs: false
@@ -74,15 +70,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     gutter: { default: 0 },
     defaultSpan: { default: 24 },
     responsive: { type: Boolean, default: true },
+    grid: { type: [Boolean, Object], default: false },
     className: {},
     readonly: { type: Boolean },
     disabled: { type: Boolean },
     watchDeep: { type: Boolean, default: true },
-    showFooter: { type: Boolean, default: false },
+    showFooter: { type: Boolean, default: true },
+    footerClass: { default: "" },
     submitText: { default: "提交" },
     cancelText: { default: "取消" },
     submitDisabled: { type: Boolean },
     cancelDisabled: { type: Boolean },
+    showCount: { default: 999 },
     onValidate: {},
     onSubmit: {},
     onReset: {},
@@ -92,7 +91,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     requireAsteriskPosition: {},
     labelWidth: { default: "100" },
     labelSuffix: {},
-    inline: { type: Boolean },
+    inline: { type: Boolean, default: false },
     inlineMessage: { type: Boolean },
     statusIcon: { type: Boolean },
     showMessage: { type: Boolean },
@@ -110,57 +109,83 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     const props = __props;
     const emit = __emit;
     const modelValue = useModel(__props, "modelValue");
+    provide("formModel", modelValue);
     const formRef = ref();
+    const attrs = useAttrs();
+    const JKY_FORM_PROPS = [
+      "modelValue",
+      "items",
+      "showTitle",
+      "title",
+      "gutter",
+      "defaultSpan",
+      "responsive",
+      "readonly",
+      "disabled",
+      "watchDeep",
+      "showFooter",
+      "footerClass",
+      "submitText",
+      "cancelText",
+      "submitDisabled",
+      "cancelDisabled",
+      "onValidate",
+      "onSubmit",
+      "onReset",
+      "className",
+      "grid",
+      "showCount"
+    ];
+    const elFormProps = computed(() => {
+      const formProps = Object.fromEntries(
+        Object.entries(props).filter(([key]) => !JKY_FORM_PROPS.includes(key))
+      );
+      const _a = attrs, { class: _, style } = _a, restAttrs = __objRest(_a, ["class", "style"]);
+      return __spreadValues(__spreadValues({}, formProps), restAttrs);
+    });
     const formClass = computed(() => {
       return [
-        "jky-form"
+        "jky-form",
+        attrs.class
       ].filter(Boolean).join(" ");
     });
-    const attrs = useAttrs();
-    const elFormProps = computed(() => {
-      const _a = props, {
-        modelValue: modelValue2,
-        items,
-        showTitle,
-        title,
-        gutter,
-        defaultSpan,
-        responsive,
-        readonly,
-        disabled,
-        watchDeep,
-        showFooter,
-        submitText,
-        cancelText,
-        submitDisabled,
-        cancelDisabled,
-        onValidate,
-        onSubmit,
-        onReset
-      } = _a, rest = __objRest(_a, [
-        // JkyForm 自己的 props（不传递给 ElForm）
-        "modelValue",
-        "items",
-        "showTitle",
-        "title",
-        "gutter",
-        "defaultSpan",
-        "responsive",
-        "readonly",
-        "disabled",
-        "watchDeep",
-        "showFooter",
-        "submitText",
-        "cancelText",
-        "submitDisabled",
-        "cancelDisabled",
-        "onValidate",
-        "onSubmit",
-        "onReset"
-      ]);
-      const _b = rest, { model } = _b, formProps = __objRest(_b, ["model"]);
-      return __spreadValues(__spreadValues({}, formProps), attrs);
+    const _elFormClass = computed(() => {
+      const classes = [];
+      if (props.inline && props.grid) {
+        classes.push("jky-form--grid");
+      }
+      return classes;
+    });
+    const _gridStyle = computed(() => {
+      if (!props.inline || !props.grid || typeof props.grid === "boolean") {
+        return {};
+      }
+      const style = {};
+      const breakpoints = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+      breakpoints.forEach((breakpoint) => {
+        const columns = props.grid[breakpoint];
+        if (columns !== void 0) {
+          style[`--jky-form-grid-cols-${breakpoint}`] = columns;
+        }
+      });
+      return style;
+    });
+    const showAllItems = ref(false);
+    const visibleItems = computed(() => {
+      if (!props.items || props.items.length <= props.showCount) {
+        return props.items;
+      }
+      if (showAllItems.value) {
+        return props.items;
+      }
+      return props.items.slice(0, props.showCount);
     });
+    const showMoreButton = computed(() => {
+      return props.items && props.items.length > props.showCount;
+    });
+    function toggleShowMore() {
+      showAllItems.value = !showAllItems.value;
+    }
     watch(
       () => props.modelValue,
       (newVal, oldVal) => {
@@ -227,11 +252,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         __props.showTitle && __props.title ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
         createVNode(unref(ElForm), mergeProps({
           ref_key: "formRef",
-          ref: formRef,
-          model: modelValue.value
-        }, elFormProps.value), {
+          ref: formRef
+        }, elFormProps.value, {
+          model: modelValue.value,
+          class: _elFormClass.value,
+          style: _gridStyle.value
+        }), {
           default: withCtx(() => [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+            (openBlock(true), createElementBlock(Fragment, null, renderList(visibleItems.value, (item) => {
               return openBlock(), createBlock(_sfc_main$1, {
                 key: item.field,
                 field: item.field,
@@ -240,32 +268,54 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                 readonly: __props.readonly,
                 disabled: __props.disabled
               }, null, 8, ["field", "config", "model", "readonly", "disabled"]);
-            }), 128))
+            }), 128)),
+            showMoreButton.value || props.showFooter ? (openBlock(), createBlock(unref(ElFormItem), {
+              key: 0,
+              "label-width": 0
+            }, {
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  class: normalizeClass(["w-full flex gap-2", [props.grid && props.inline ? "justify-center" : "justify-end", props.footerClass]])
+                }, [
+                  showMoreButton.value ? (openBlock(), createBlock(unref(ElButton), {
+                    key: 0,
+                    type: "primary",
+                    onClick: toggleShowMore
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(showAllItems.value ? "收起" : `展开 (${props.items.length - props.showCount})`), 1)
+                    ]),
+                    _: 1
+                  })) : createCommentVNode("", true),
+                  props.showFooter ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                    createVNode(unref(ElButton), {
+                      disabled: __props.cancelDisabled || __props.disabled,
+                      onClick: handleCancel
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(__props.cancelText), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["disabled"]),
+                    createVNode(unref(ElButton), {
+                      type: "primary",
+                      disabled: __props.submitDisabled || __props.disabled,
+                      loading: false,
+                      onClick: handleSubmit
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(__props.submitText), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["disabled"])
+                  ], 64)) : createCommentVNode("", true)
+                ], 2)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
           ]),
           _: 1
-        }, 16, ["model"]),
-        props.showFooter ? (openBlock(), createElementBlock("div", _hoisted_2, [
-          createVNode(unref(ElButton), {
-            disabled: __props.cancelDisabled || __props.disabled,
-            onClick: handleCancel
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(__props.cancelText), 1)
-            ]),
-            _: 1
-          }, 8, ["disabled"]),
-          createVNode(unref(ElButton), {
-            type: "primary",
-            disabled: __props.submitDisabled || __props.disabled,
-            loading: false,
-            onClick: handleSubmit
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(__props.submitText), 1)
-            ]),
-            _: 1
-          }, 8, ["disabled"])
-        ])) : createCommentVNode("", true)
+        }, 16, ["model", "class", "style"])
       ], 2);
     };
   }

package/dist/es/form/FormItem.vue.js

@@ -51,10 +51,12 @@ var __async = (__this, __arguments, generator) => {
 };
 import { defineComponent, ref, watch, computed, openBlock, createElementBlock, createBlock, unref, mergeProps, withCtx, createElementVNode, resolveDynamicComponent, Fragment, createTextVNode, toDisplayString, createCommentVNode, createSlots, h } from "vue";
 import { Plus as plus_default, CircleCloseFilled as circle_close_filled_default, CircleCheckFilled as circle_check_filled_default, WarningFilled as warning_filled_default, QuestionFilled as question_filled_default } from "../node_modules/@element-plus/icons-vue/dist/index.js";
-import { ElFormItem, ElDivider, ElInput, ElUpload, ElButton, ElIcon, ElInputNumber, ElRate, ElColorPicker, ElTreeSelect, ElCascader, ElSlider, ElSwitch, ElCheckboxGroup, ElCheckbox, ElRadioGroup, ElRadio, ElTimeSelect, ElTimePicker, ElDatePicker, ElAutocomplete, ElSelect, ElTooltip } from "element-plus";
+import { ElFormItem, ElDivider, ElInput, ElUpload, ElButton, ElIcon, ElInputNumber, ElRate, ElTransfer, ElSelectV2, ElMention, ElInputTag, ElColorPickerPanel, ElColorPicker, ElTreeSelect, ElCascader, ElSlider, ElSwitch, ElCheckboxGroup, ElCheckbox, ElRadioGroup, ElRadio, ElTimeSelect, ElTimePicker, ElDatePicker, ElAutocomplete, ElSelect, ElTooltip } from "element-plus";
 import { JkyAddInput } from "../add-input/index.js";
 import { JkyCodeMirrorEditor } from "../code-mirror-editor/index.js";
 import { JkyRichEditor } from "../rich-editor/index.js";
+import _sfc_main$1 from "./SelectTable.vue.js";
+/* empty css                 */
 const _hoisted_1 = {
   key: 0,
   style: { "display": "none" }
@@ -209,7 +211,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
           default: () => props.config.children || null
         });
       }
-      const commonProps = __spreadValues({
+      const commonProps = __spreadProps(__spreadValues({
         // use `undefined` to fix placeholder issue
         "modelValue": modelValue.value || void 0,
         "onUpdate:modelValue": (val) => {
@@ -218,7 +220,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         "placeholder": props.config.placeholder || void 0,
         "disabled": props.disabled,
         "clearable": props.config.clearable
-      }, componentProps.value);
+      }, componentProps.value), {
+        "class": ["w-full min-w-25", componentProps.value.class]
+      });
       switch (type) {
         case "input":
           return h(ElInput, __spreadProps(__spreadValues({}, commonProps), {
@@ -315,6 +319,54 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         }
         case "color-picker":
           return h(ElColorPicker, __spreadValues(__spreadValues({}, commonProps), componentProps.value));
+        // 颜色选择器面板
+        case "color-picker-panel":
+          return h(ElColorPickerPanel, __spreadValues(__spreadValues({}, commonProps), componentProps.value));
+        // 标签输入框
+        case "input-tag": {
+          const inputTagProps = __spreadValues(__spreadProps(__spreadValues({}, commonProps), {
+            "modelValue": modelValue.value || [],
+            "onUpdate:modelValue": (val) => {
+              props.model[props.field] = val;
+            }
+          }), componentProps.value);
+          return h(ElInputTag, inputTagProps);
+        }
+        // 提及组件
+        case "mention": {
+          const mentionProps = __spreadValues(__spreadProps(__spreadValues({}, commonProps), {
+            "modelValue": modelValue.value || "",
+            "onUpdate:modelValue": (val) => {
+              props.model[props.field] = val;
+            }
+          }), componentProps.value);
+          return h(ElMention, mentionProps);
+        }
+        // 虚拟化选择器
+        case "select-v2": {
+          const selectV2Props = __spreadValues(__spreadProps(__spreadValues({}, commonProps), {
+            "modelValue": modelValue.value,
+            "onUpdate:modelValue": (val) => {
+              props.model[props.field] = val;
+            },
+            "options": componentProps.value.options || []
+          }), componentProps.value);
+          return h(ElSelectV2, selectV2Props);
+        }
+        // 穿梭框
+        case "transfer": {
+          const transferProps = __spreadValues(__spreadProps(__spreadValues({}, commonProps), {
+            "modelValue": modelValue.value || [],
+            "onUpdate:modelValue": (val) => {
+              props.model[props.field] = val;
+            },
+            "data": componentProps.value.data || []
+          }), componentProps.value);
+          return h(ElTransfer, transferProps);
+        }
+        // 表格选择器
+        case "select-table":
+          return h(_sfc_main$1, __spreadValues(__spreadValues({}, commonProps), componentProps.value));
         case "rate":
           return h(ElRate, __spreadValues(__spreadValues({}, commonProps), componentProps.value));
         case "input-number": {

package/dist/es/form/SelectTable.vue.d.ts

@@ -0,0 +1,38 @@
+import { SelectTableProps } from './types';
+declare const _default: import('vue').DefineComponent<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<SelectTableProps>, {
+    multiple: boolean;
+    labelField: string;
+    idField: string;
+    readonly: boolean;
+    disabled: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | (string | number)[]) => any;
+    change: (value: string | number | (string | number)[], selectedData: any[]) => any;
+}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<SelectTableProps>, {
+    multiple: boolean;
+    labelField: string;
+    idField: string;
+    readonly: boolean;
+    disabled: boolean;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | (string | number)[]) => any) | undefined;
+    onChange?: ((value: string | number | (string | number)[], selectedData: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};