@wlydfe/pro-ui 0.2.0

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

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index_vue_vue_type_script_setup_true_lang = require('./index.vue2.js');
+const _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.js');
+
+const Form = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__file", "index.vue"]]);
+
+exports.default = Form;

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

@@ -0,0 +1,324 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const vue = require('vue');
+const elementPlus = require('element-plus');
+require('../../../hooks/index.js');
+const index = require('../../utils/index.js');
+const formContent = require('./form-content.vue.js');
+const useLocale = require('../../../hooks/useLocale.js');
+
+const _hoisted_1 = { class: "plus-form__group__item__icon" };
+const _sfc_main = /* @__PURE__ */ vue.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.useLocale();
+    const formInstance = vue.ref();
+    const values = vue.ref({});
+    const filterHide = (columns) => {
+      return 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 slots = vue.useSlots();
+    const labelSlots = index.filterSlots(slots, index.getLabelSlotName());
+    const fieldSlots = index.filterSlots(slots, index.getFieldSlotName());
+    const extraSlots = index.filterSlots(slots, index.getExtraSlotName());
+    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 = Object.values(errors);
+          elementPlus.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 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 : ""
+      }, _ctx.$attrs, { model: model.value }), {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default", {}, () => [
+            vue.createCommentVNode(" \u5206\u7EC4\u8868\u5355 "),
+            _ctx.group ? (vue.openBlock(true), vue.createElementBlock(
+              vue.Fragment,
+              { key: 0 },
+              vue.renderList(_ctx.group, (groupItem) => {
+                return vue.openBlock(), vue.createBlock(
+                  vue.unref(elementPlus.ElCard),
+                  {
+                    key: groupItem.title,
+                    class: "plus-form__group__item"
+                  },
+                  {
+                    header: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "group-header", {
+                        title: groupItem.title,
+                        columns: groupItem.columns,
+                        icon: groupItem.icon
+                      }, () => [
+                        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(groupItem.title),
+                            1
+                            /* TEXT */
+                          )
+                        ])
+                      ])
+                    ]),
+                    default: vue.withCtx(() => [
+                      vue.createVNode(formContent.default, {
+                        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
+                      }, vue.createSlots({
+                        _: 2
+                        /* DYNAMIC */
+                      }, [
+                        vue.renderList(vue.unref(labelSlots), (_, key) => {
+                          return {
+                            name: key,
+                            fn: vue.withCtx((data) => [
+                              vue.renderSlot(_ctx.$slots, key, vue.mergeProps({ ref_for: true }, data))
+                            ])
+                          };
+                        }),
+                        vue.renderList(vue.unref(fieldSlots), (_, key) => {
+                          return {
+                            name: key,
+                            fn: vue.withCtx((data) => [
+                              vue.renderSlot(_ctx.$slots, key, vue.mergeProps({ ref_for: true }, data))
+                            ])
+                          };
+                        }),
+                        vue.renderList(vue.unref(extraSlots), (_, key) => {
+                          return {
+                            name: key,
+                            fn: vue.withCtx((data) => [
+                              vue.renderSlot(_ctx.$slots, key, vue.mergeProps({ ref_for: true }, data))
+                            ])
+                          };
+                        }),
+                        _ctx.$slots["tooltip-icon"] ? {
+                          name: "tooltip-icon",
+                          fn: vue.withCtx(() => [
+                            vue.renderSlot(_ctx.$slots, "tooltip-icon")
+                          ]),
+                          key: "0"
+                        } : void 0
+                      ]), 1032, ["modelValue", "row-props", "col-props", "columns"])
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  },
+                  1024
+                  /* DYNAMIC_SLOTS */
+                );
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            )) : (vue.openBlock(), vue.createElementBlock(
+              vue.Fragment,
+              { key: 1 },
+              [
+                vue.createCommentVNode(" \u666E\u901A\u8868\u5355 "),
+                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,
+                  onChange: handleChange
+                }, vue.createSlots({
+                  _: 2
+                  /* DYNAMIC */
+                }, [
+                  vue.renderList(vue.unref(labelSlots), (_, key) => {
+                    return {
+                      name: key,
+                      fn: vue.withCtx((data) => [
+                        vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
+                      ])
+                    };
+                  }),
+                  vue.renderList(vue.unref(fieldSlots), (_, key) => {
+                    return {
+                      name: key,
+                      fn: vue.withCtx((data) => [
+                        vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
+                      ])
+                    };
+                  }),
+                  vue.renderList(vue.unref(extraSlots), (_, key) => {
+                    return {
+                      name: key,
+                      fn: vue.withCtx((data) => [
+                        vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
+                      ])
+                    };
+                  }),
+                  _ctx.$slots["search-footer"] ? {
+                    name: "search-footer",
+                    fn: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "search-footer")
+                    ]),
+                    key: "0"
+                  } : void 0,
+                  _ctx.$slots["tooltip-icon"] ? {
+                    name: "tooltip-icon",
+                    fn: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "tooltip-icon")
+                    ]),
+                    key: "1"
+                  } : void 0
+                ]), 1032, ["modelValue", "row-props", "col-props", "columns", "has-label"])
+              ],
+              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(" \u91CD\u7F6E "),
+                    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(" \u63D0\u4EA4 "),
+                    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/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/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-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');
+