@wlydfe/pro-ui 0.2.21 → 0.2.24

package/lib/components/form/src/index.vue2.js

@@ -0,0 +1,310 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var elementPlus = require('element-plus');
+require('../../../hooks/index.js');
+var index = require('../../utils/index.js');
+var formContent = require('./form-content.vue.js');
+var useLocale = require('../../../hooks/useLocale.js');
+var is = require('../../utils/is.js');
+
+const _hoisted_1 = { class: "plus-form__group__item__icon" };
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PlusForm",
+    inheritAttrs: false
+  },
+  __name: "index",
+  props: {
+    modelValue: { default: () => ({}) },
+    defaultValues: { default: () => ({}) },
+    columns: { default: () => [] },
+    labelWidth: { default: "110px" },
+    labelPosition: { default: "right" },
+    rowProps: { default: () => ({}) },
+    colProps: { default: () => ({}) },
+    labelSuffix: { default: "" },
+    hasErrorTip: { type: Boolean, default: true },
+    hasFooter: { type: Boolean, default: true },
+    hasReset: { type: Boolean, default: true },
+    hasLabel: { type: Boolean, default: true },
+    submitText: { default: "" },
+    resetText: { default: "" },
+    submitLoading: { type: Boolean, default: false },
+    footerAlign: { default: "left" },
+    rules: { default: () => ({}) },
+    group: { type: [Boolean, Array], default: false },
+    cardProps: { default: () => ({}) },
+    prevent: { type: Boolean, default: false },
+    collapseDuration: { default: void 0 },
+    collapseTransition: { type: Boolean, default: void 0 },
+    clearable: { type: Boolean, default: true }
+  },
+  emits: ["update:modelValue", "submit", "change", "reset", "submitError", "validate"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useLocale.useLocale();
+    const formInstance = vue.ref(null);
+    const values = vue.ref({});
+    const filterHide = (columns) => {
+      return (columns == null ? void 0 : columns.filter((item) => vue.unref(item.hideInForm) !== true)) || [];
+    };
+    const model = vue.computed(() => values.value);
+    const style = vue.computed(() => ({
+      justifyContent: props.footerAlign === "left" ? "flex-start" : props.footerAlign === "center" ? "center" : "flex-end"
+    }));
+    const subColumns = vue.computed(() => filterHide(props.columns));
+    const subGroup = vue.computed(
+      () => {
+        var _a;
+        return is.isArray(props.group) ? (_a = props.group) == null ? void 0 : _a.filter((item) => vue.unref(item.hideInGroup) !== true) : props.group;
+      }
+    );
+    const originAttrs = vue.useAttrs();
+    const attrs = vue.computed(() => ({
+      ...originAttrs,
+      ...props.prevent ? {
+        onSubmit: vue.withModifiers(
+          (...arg) => {
+            if ((originAttrs == null ? void 0 : originAttrs.onSubmit) && is.isFunction(originAttrs == null ? void 0 : originAttrs.onSubmit)) {
+              ;
+              originAttrs.onSubmit(...arg);
+            }
+          },
+          ["prevent"]
+        )
+      } : {}
+    }));
+    vue.watch(
+      () => props.modelValue,
+      (val) => {
+        values.value = val;
+      },
+      {
+        immediate: true
+      }
+    );
+    const handleChange = (_, column) => {
+      emit("update:modelValue", values.value);
+      emit("change", values.value, column);
+    };
+    const clearValidate = () => {
+      var _a;
+      (_a = formInstance.value) == null ? void 0 : _a.clearValidate();
+    };
+    const handleSubmit = async () => {
+      var _a, _b, _c;
+      try {
+        const valid = await ((_a = formInstance.value) == null ? void 0 : _a.validate());
+        if (valid) {
+          emit("submit", values.value);
+          return true;
+        }
+      } catch (errors) {
+        if (props.hasErrorTip) {
+          elementPlus.ElMessage.closeAll();
+          const values2 = is.isPlainObject(errors) && Object.values(errors);
+          const message = values2 ? (_c = (_b = values2[0]) == null ? void 0 : _b[0]) == null ? void 0 : _c.message : void 0;
+          elementPlus.ElMessage.warning(message || t("plus.form.errorTip"));
+        }
+        emit("submitError", errors);
+      }
+      return false;
+    };
+    const handleReset = () => {
+      clearValidate();
+      values.value = { ...props.defaultValues };
+      emit("update:modelValue", values.value);
+      emit("reset", values.value);
+    };
+    const handleValidate = (...args) => {
+      emit("validate", ...args);
+    };
+    __expose({
+      formInstance,
+      handleSubmit,
+      handleReset
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElForm), vue.mergeProps({
+        ref_key: "formInstance",
+        ref: formInstance,
+        rules: _ctx.rules,
+        "label-width": _ctx.hasLabel ? _ctx.labelWidth : 0,
+        class: ["plus-form", _ctx.hasLabel ? "" : "no-has-label"],
+        "label-position": _ctx.labelPosition,
+        "validate-on-rule-change": false,
+        "label-suffix": _ctx.hasLabel ? _ctx.labelSuffix : ""
+      }, attrs.value, {
+        model: model.value,
+        onValidate: handleValidate
+      }), {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default", {}, () => [
+            vue.createCommentVNode(" group form "),
+            subGroup.value ? (vue.openBlock(true), vue.createElementBlock(
+              vue.Fragment,
+              { key: 0 },
+              vue.renderList(subGroup.value, (groupItem, index$1) => {
+                return vue.openBlock(), vue.createBlock(
+                  vue.unref(elementPlus.ElCard),
+                  vue.mergeProps({
+                    key: vue.unref(groupItem.title)
+                  }, groupItem.cardProps || _ctx.cardProps, { class: "plus-form__group__item" }),
+                  {
+                    header: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "group-header", {
+                        title: vue.unref(groupItem.title),
+                        columns: groupItem.columns,
+                        icon: groupItem.icon,
+                        index: index$1
+                      }, () => [
+                        vue.createElementVNode("div", _hoisted_1, [
+                          groupItem.icon ? (vue.openBlock(), vue.createBlock(
+                            vue.unref(elementPlus.ElIcon),
+                            { key: 0 },
+                            {
+                              default: vue.withCtx(() => [
+                                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(groupItem.icon)))
+                              ]),
+                              _: 2
+                              /* DYNAMIC */
+                            },
+                            1024
+                            /* DYNAMIC_SLOTS */
+                          )) : vue.createCommentVNode("v-if", true),
+                          vue.createTextVNode(
+                            " " + vue.toDisplayString(vue.unref(groupItem.title)),
+                            1
+                            /* TEXT */
+                          )
+                        ])
+                      ])
+                    ]),
+                    default: vue.withCtx(() => [
+                      _ctx.$slots[vue.unref(index.getFormGroupSlotName)(groupItem.name)] ? vue.renderSlot(_ctx.$slots, vue.unref(index.getFormGroupSlotName)(groupItem.name), vue.mergeProps({ key: 0 }, groupItem, { index: index$1 })) : (vue.openBlock(), vue.createBlock(formContent.default, {
+                        key: 1,
+                        modelValue: values.value,
+                        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => values.value = $event),
+                        "row-props": _ctx.rowProps,
+                        "col-props": _ctx.colProps,
+                        columns: filterHide(groupItem.columns),
+                        "has-label": _ctx.hasLabel,
+                        "collapse-transition": _ctx.collapseTransition,
+                        "collapse-duration": _ctx.collapseDuration,
+                        clearable: _ctx.clearable,
+                        onChange: handleChange
+                      }, vue.createSlots({
+                        _: 2
+                        /* DYNAMIC */
+                      }, [
+                        vue.renderList(_ctx.$slots, (_, key) => {
+                          return {
+                            name: key,
+                            fn: vue.withCtx((data) => [
+                              vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
+                            ])
+                          };
+                        })
+                      ]), 1032, ["modelValue", "row-props", "col-props", "columns", "has-label", "collapse-transition", "collapse-duration", "clearable"]))
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  },
+                  1040
+                  /* FULL_PROPS, DYNAMIC_SLOTS */
+                );
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            )) : (vue.openBlock(), vue.createElementBlock(
+              vue.Fragment,
+              { key: 1 },
+              [
+                vue.createCommentVNode(" normal form "),
+                vue.createVNode(formContent.default, {
+                  modelValue: values.value,
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => values.value = $event),
+                  "row-props": _ctx.rowProps,
+                  "col-props": _ctx.colProps,
+                  columns: subColumns.value,
+                  "has-label": _ctx.hasLabel,
+                  "collapse-transition": _ctx.collapseTransition,
+                  "collapse-duration": _ctx.collapseDuration,
+                  clearable: _ctx.clearable,
+                  onChange: handleChange
+                }, vue.createSlots({
+                  _: 2
+                  /* DYNAMIC */
+                }, [
+                  vue.renderList(_ctx.$slots, (_, key) => {
+                    return {
+                      name: key,
+                      fn: vue.withCtx((data) => [
+                        vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
+                      ])
+                    };
+                  })
+                ]), 1032, ["modelValue", "row-props", "col-props", "columns", "has-label", "collapse-transition", "collapse-duration", "clearable"])
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            ))
+          ]),
+          _ctx.hasFooter ? (vue.openBlock(), vue.createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: "plus-form__footer",
+              style: vue.normalizeStyle(style.value)
+            },
+            [
+              vue.renderSlot(_ctx.$slots, "footer", vue.normalizeProps(vue.guardReactiveProps({ handleReset, handleSubmit })), () => [
+                _ctx.hasReset ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElButton), {
+                  key: 0,
+                  onClick: handleReset
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createCommentVNode(" reset "),
+                    vue.createTextVNode(
+                      " " + vue.toDisplayString(_ctx.resetText || vue.unref(t)("plus.form.resetText")),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })) : vue.createCommentVNode("v-if", true),
+                vue.createVNode(vue.unref(elementPlus.ElButton), {
+                  type: "primary",
+                  loading: _ctx.submitLoading,
+                  onClick: handleSubmit
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createCommentVNode(" submit "),
+                    vue.createTextVNode(
+                      " " + vue.toDisplayString(_ctx.submitText || vue.unref(t)("plus.form.submitText")),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["loading"])
+              ])
+            ],
+            4
+            /* STYLE */
+          )) : vue.createCommentVNode("v-if", true)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["rules", "label-width", "class", "label-position", "label-suffix", "model"]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/components/form/src/type.d.ts

@@ -0,0 +1,151 @@
+import { PlusColumn, FieldValues, Mutable, RecordType } from '@wlydfe/pro-ui/es/types';
+import { FormRules, RowProps, ColProps, CardProps, ComponentSize } from 'element-plus';
+import { Component, ComputedRef } from 'vue';
+
+/**
+ * fork https://github.com/element-plus/element-plus/blob/dev/packages/components/form/src/form.ts#L14-L110
+ */
+export type ElementPlusFormProps = {
+    /**
+     * @description Control the size of components in this form.
+     */
+    size: ComponentSize;
+    /**
+     * @description Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component.
+     */
+    disabled: boolean;
+    /**
+     * @description Data of form component.
+     */
+    model?: RecordType;
+    /**
+     * @description Validation rules of form.
+     */
+    rules: FormRules;
+    /**
+     * @description Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required.
+     */
+    labelPosition: 'left' | 'right' | 'top';
+    /**
+     * @description Position of asterisk.
+     */
+    requireAsteriskPosition: 'left' | 'right';
+    /**
+     * @description Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported.
+     */
+    labelWidth: string | number;
+    /**
+     * @description Suffix of the label.
+     */
+    labelSuffix: string;
+    /**
+     * @description Whether the form is inline.
+     */
+    inline: boolean;
+    /**
+     * @description Whether to display the error message inline with the form item.
+     */
+    inlineMessage: boolean;
+    /**
+     * @description Whether to display an icon indicating the validation result.
+     */
+    statusIcon: boolean;
+    /**
+     * @description Whether to show the error message.
+     */
+    showMessage: boolean;
+    /**
+     * @description Whether to trigger validation when the `rules` prop is changed.
+     */
+    validateOnRuleChange: boolean;
+    /**
+     * @description Whether to hide required fields should have a red asterisk (star) beside their labels.
+     */
+    hideRequiredAsterisk: boolean;
+    /**
+     * @description When validation fails, scroll to the first error form entry.
+     */
+    scrollToError: boolean;
+    /**
+     * @description When validation fails, it scrolls to the first error item based on the scrollIntoView option.
+     * @version 2.3.2
+     */
+    scrollIntoViewOptions: RecordType | boolean;
+};
+/**
+ * 分组表单配置项
+ */
+export interface PlusFormGroupRow {
+    /**
+     * @version v0.1.17  新增 ComputedRef<string> 类型
+     */
+    title: string | ComputedRef<string>;
+    /**
+     * @version v0.1.25 新增，用于自动生成分步内容插槽
+     */
+    name?: string;
+    icon?: Component;
+    /**
+     * @desc 分组表单el-card的props，优先级高于整体的cardProps
+     * @version v0.1.1
+     */
+    cardProps?: Partial<Mutable<CardProps>>;
+    hideInGroup?: boolean | ComputedRef<boolean>;
+    /**
+     * @version  v0.1.25 调整为可选
+     */
+    columns?: PlusColumn[];
+}
+export type PlusFormSelfProps = {
+    modelValue?: FieldValues;
+    defaultValues?: FieldValues;
+    columns?: PlusColumn[];
+    labelWidth?: ElementPlusFormProps['labelWidth'];
+    labelPosition?: ElementPlusFormProps['labelPosition'];
+    rowProps?: Partial<Mutable<RowProps>>;
+    colProps?: Partial<Mutable<ColProps>>;
+    labelSuffix?: ElementPlusFormProps['labelSuffix'];
+    hasErrorTip?: boolean;
+    hasFooter?: boolean;
+    hasReset?: boolean;
+    hasLabel?: boolean;
+    submitText?: string;
+    resetText?: string;
+    submitLoading?: boolean;
+    footerAlign?: 'left' | 'right' | 'center';
+    rules?: ElementPlusFormProps['rules'];
+    group?: false | PlusFormGroupRow[];
+    cardProps?: Partial<Mutable<CardProps>>;
+    /**
+     * @desc 阻止el-form的默认提交表单行为
+     * @version v0.1.12
+     */
+    prevent?: boolean;
+    /**
+     * @desc 动画时长
+     * @version v0.1.15
+     */
+    collapseDuration?: number;
+    /**
+     * @desc 是否开启折叠动画
+     * @version v0.1.15
+     */
+    collapseTransition?: boolean;
+    /**
+     *  @version v0.1.18
+     */
+    clearable?: boolean;
+};
+export type PlusFormProps = PlusFormSelfProps & Partial<ElementPlusFormProps> & RecordType;
+export interface PlusFormState {
+    values: FieldValues;
+    subColumns: PlusColumn[];
+}
+export interface PlusFormEmits {
+    (e: 'update:modelValue', values: FieldValues): void;
+    (e: 'submit', values: FieldValues): void;
+    (e: 'change', values: FieldValues, column: PlusColumn): void;
+    (e: 'reset', values: FieldValues): void;
+    (e: 'submitError', errors: unknown): void;
+    (e: 'validate', ...args: any[]): boolean;
+}

package/lib/components/form/src/type.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/lib/components/form/style/css.d.ts

@@ -0,0 +1,7 @@
+import "element-plus/es/components/form/style/css";
+import "element-plus/es/components/button/style/css";
+import "element-plus/es/components/card/style/css";
+import "element-plus/es/components/row/style/css";
+import "element-plus/es/components/col/style/css";
+import "@wlydfe/pro-ui/es/components/form-item/style/css";
+import "@wlydfe/pro-ui-theme-chalk/plus-form.css";

package/lib/components/form/style/css.js

@@ -0,0 +1,10 @@
+'use strict';
+
+require('element-plus/lib/components/form/style/css.js');
+require('element-plus/lib/components/button/style/css.js');
+require('element-plus/lib/components/card/style/css.js');
+require('element-plus/lib/components/row/style/css.js');
+require('element-plus/lib/components/col/style/css.js');
+require('../../form-item/style/css.js');
+require('@wlydfe/pro-ui-theme-chalk/plus-form.css');
+

package/lib/components/form/style/index.d.ts

@@ -0,0 +1,7 @@
+import "element-plus/es/components/form/style/index";
+import "element-plus/es/components/button/style/index";
+import "element-plus/es/components/card/style/index";
+import "element-plus/es/components/row/style/index";
+import "element-plus/es/components/col/style/index";
+import "@wlydfe/pro-ui/es/components/form-item/style/index";
+import "@wlydfe/pro-ui-theme-chalk/src/form.scss";

package/lib/components/form/style/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+require('element-plus/lib/components/form/style/index.js');
+require('element-plus/lib/components/button/style/index.js');
+require('element-plus/lib/components/card/style/index.js');
+require('element-plus/lib/components/row/style/index.js');
+require('element-plus/lib/components/col/style/index.js');
+require('../../form-item/style/index.js');
+require('../../../theme-chalk/src/form.scss.js');
+