@wlydfe/pro-ui 0.2.0

package/es/components/form/src/index.vue.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './index.vue2.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const Form = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "index.vue"]]);
+
+export { Form as default };

package/es/components/form/src/index.vue2.mjs

@@ -0,0 +1,320 @@
+import { defineComponent, ref, unref, computed, useSlots, watch, openBlock, createBlock, mergeProps, withCtx, renderSlot, createCommentVNode, createElementBlock, Fragment, renderList, createElementVNode, resolveDynamicComponent, createTextVNode, toDisplayString, createVNode, createSlots, normalizeProps, guardReactiveProps, normalizeStyle } from 'vue';
+import { ElMessage, ElForm, ElCard, ElIcon, ElButton } from 'element-plus';
+import '../../../hooks/index.mjs';
+import { filterSlots, getLabelSlotName, getFieldSlotName, getExtraSlotName } from '../../utils/index.mjs';
+import PlusFormContent from './form-content.vue.mjs';
+import { useLocale } from '../../../hooks/useLocale.mjs';
+
+const _hoisted_1 = { class: "plus-form__group__item__icon" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PlusForm"
+  },
+  __name: "index",
+  props: {
+    modelValue: { default: () => ({}) },
+    defaultValues: { default: () => ({}) },
+    columns: { default: () => [] },
+    labelWidth: { default: "80px" },
+    labelPosition: { default: "left" },
+    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 }
+  },
+  emits: ["update:modelValue", "submit", "change", "reset", "submitError"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useLocale();
+    const formInstance = ref();
+    const values = ref({});
+    const filterHide = (columns) => {
+      return columns.filter((item) => unref(item.hideInForm) !== true);
+    };
+    const model = computed(() => values.value);
+    const style = computed(() => ({
+      justifyContent: props.footerAlign === "left" ? "flex-start" : props.footerAlign === "center" ? "center" : "flex-end"
+    }));
+    const subColumns = computed(() => filterHide(props.columns));
+    const slots = useSlots();
+    const labelSlots = filterSlots(slots, getLabelSlotName());
+    const fieldSlots = filterSlots(slots, getFieldSlotName());
+    const extraSlots = filterSlots(slots, getExtraSlotName());
+    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) {
+          ElMessage.closeAll();
+          const values2 = Object.values(errors);
+          ElMessage.warning(((_c = (_b = values2[0]) == null ? void 0 : _b[0]) == null ? void 0 : _c.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);
+    };
+    __expose({
+      formInstance,
+      handleSubmit,
+      handleReset
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElForm), 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 : ""
+      }, _ctx.$attrs, { model: model.value }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createCommentVNode(" \u5206\u7EC4\u8868\u5355 "),
+            _ctx.group ? (openBlock(true), createElementBlock(
+              Fragment,
+              { key: 0 },
+              renderList(_ctx.group, (groupItem) => {
+                return openBlock(), createBlock(
+                  unref(ElCard),
+                  {
+                    key: groupItem.title,
+                    class: "plus-form__group__item"
+                  },
+                  {
+                    header: withCtx(() => [
+                      renderSlot(_ctx.$slots, "group-header", {
+                        title: groupItem.title,
+                        columns: groupItem.columns,
+                        icon: groupItem.icon
+                      }, () => [
+                        createElementVNode("div", _hoisted_1, [
+                          groupItem.icon ? (openBlock(), createBlock(
+                            unref(ElIcon),
+                            { key: 0 },
+                            {
+                              default: withCtx(() => [
+                                (openBlock(), createBlock(resolveDynamicComponent(groupItem.icon)))
+                              ]),
+                              _: 2
+                              /* DYNAMIC */
+                            },
+                            1024
+                            /* DYNAMIC_SLOTS */
+                          )) : createCommentVNode("v-if", true),
+                          createTextVNode(
+                            " " + toDisplayString(groupItem.title),
+                            1
+                            /* TEXT */
+                          )
+                        ])
+                      ])
+                    ]),
+                    default: withCtx(() => [
+                      createVNode(PlusFormContent, {
+                        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),
+                        onChange: handleChange
+                      }, createSlots({
+                        _: 2
+                        /* DYNAMIC */
+                      }, [
+                        renderList(unref(labelSlots), (_, key) => {
+                          return {
+                            name: key,
+                            fn: withCtx((data) => [
+                              renderSlot(_ctx.$slots, key, mergeProps({ ref_for: true }, data))
+                            ])
+                          };
+                        }),
+                        renderList(unref(fieldSlots), (_, key) => {
+                          return {
+                            name: key,
+                            fn: withCtx((data) => [
+                              renderSlot(_ctx.$slots, key, mergeProps({ ref_for: true }, data))
+                            ])
+                          };
+                        }),
+                        renderList(unref(extraSlots), (_, key) => {
+                          return {
+                            name: key,
+                            fn: withCtx((data) => [
+                              renderSlot(_ctx.$slots, key, mergeProps({ ref_for: true }, data))
+                            ])
+                          };
+                        }),
+                        _ctx.$slots["tooltip-icon"] ? {
+                          name: "tooltip-icon",
+                          fn: withCtx(() => [
+                            renderSlot(_ctx.$slots, "tooltip-icon")
+                          ]),
+                          key: "0"
+                        } : void 0
+                      ]), 1032, ["modelValue", "row-props", "col-props", "columns"])
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  },
+                  1024
+                  /* DYNAMIC_SLOTS */
+                );
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            )) : (openBlock(), createElementBlock(
+              Fragment,
+              { key: 1 },
+              [
+                createCommentVNode(" \u666E\u901A\u8868\u5355 "),
+                createVNode(PlusFormContent, {
+                  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,
+                  onChange: handleChange
+                }, createSlots({
+                  _: 2
+                  /* DYNAMIC */
+                }, [
+                  renderList(unref(labelSlots), (_, key) => {
+                    return {
+                      name: key,
+                      fn: withCtx((data) => [
+                        renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
+                      ])
+                    };
+                  }),
+                  renderList(unref(fieldSlots), (_, key) => {
+                    return {
+                      name: key,
+                      fn: withCtx((data) => [
+                        renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
+                      ])
+                    };
+                  }),
+                  renderList(unref(extraSlots), (_, key) => {
+                    return {
+                      name: key,
+                      fn: withCtx((data) => [
+                        renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
+                      ])
+                    };
+                  }),
+                  _ctx.$slots["search-footer"] ? {
+                    name: "search-footer",
+                    fn: withCtx(() => [
+                      renderSlot(_ctx.$slots, "search-footer")
+                    ]),
+                    key: "0"
+                  } : void 0,
+                  _ctx.$slots["tooltip-icon"] ? {
+                    name: "tooltip-icon",
+                    fn: withCtx(() => [
+                      renderSlot(_ctx.$slots, "tooltip-icon")
+                    ]),
+                    key: "1"
+                  } : void 0
+                ]), 1032, ["modelValue", "row-props", "col-props", "columns", "has-label"])
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            ))
+          ]),
+          _ctx.hasFooter ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: "plus-form__footer",
+              style: normalizeStyle(style.value)
+            },
+            [
+              renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({ handleReset, handleSubmit })), () => [
+                _ctx.hasReset ? (openBlock(), createBlock(unref(ElButton), {
+                  key: 0,
+                  onClick: handleReset
+                }, {
+                  default: withCtx(() => [
+                    createCommentVNode(" \u91CD\u7F6E "),
+                    createTextVNode(
+                      " " + toDisplayString(_ctx.resetText || unref(t)("plus.form.resetText")),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })) : createCommentVNode("v-if", true),
+                createVNode(unref(ElButton), {
+                  type: "primary",
+                  loading: _ctx.submitLoading,
+                  onClick: handleSubmit
+                }, {
+                  default: withCtx(() => [
+                    createCommentVNode(" \u63D0\u4EA4 "),
+                    createTextVNode(
+                      " " + toDisplayString(_ctx.submitText || unref(t)("plus.form.submitText")),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["loading"])
+              ])
+            ],
+            4
+            /* STYLE */
+          )) : createCommentVNode("v-if", true)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["rules", "label-width", "class", "label-position", "label-suffix", "model"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/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-components/form-item/style/css';
+import '@wlydfe/pro-ui-theme-chalk/plus-form.css';

package/es/components/form/style/css.mjs

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

package/es/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-components/form-item/style/index';
+import '@wlydfe/pro-ui-theme-chalk/src/form.scss';

package/es/components/form/style/index.mjs

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