@qin-ui/element-plus-pro 1.0.0

package/es/element-plus-pro.css

@@ -0,0 +1,66 @@
+[class*='-form-item'] [class*='-form-item'][data-v-f9126ed0] {
+  margin-bottom: 18px;
+}
+.pro-table_search-form[data-v-f615ff61] [class*='-form-item'] {
+  margin: 0;
+}
+.pro-table_search-form_expand-toggle-button[data-v-f615ff61] {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  padding-left: 4px;
+}
+.pro-table_search-form .transition[data-v-f615ff61] {
+  transition: all 0.25s;
+}
+.pro-table_search-form-container[data-v-45e627f4] {
+  margin-bottom: 24px;
+  padding: 24px;
+  background-color: var(--el-bg-color, #fff);
+  border-radius: 4px;
+}
+.pro-table_table-container[data-v-55d01897] {
+  flex: 1;
+  padding: 24px 24px 0;
+  background-color: var(--el-bg-color, #fff);
+  border-radius: 4px;
+}
+.pro-table_size-control_button[data-v-7af52d04] {
+  display: flex;
+  align-items: center;
+  padding-right: 12px;
+  padding-left: 12px;
+}
+.pro-table_size-control_button[data-v-7af52d04] svg {
+  transform: scale(1.3);
+}
+.pro-table_column-control_button[data-v-e45d2d29] {
+  display: flex;
+  align-items: center;
+  padding-right: 12px;
+  padding-left: 12px;
+}
+.pro-table_column-control_button[data-v-e45d2d29] svg {
+  transform: scale(1.2, 1.4);
+}
+.pro-table_header[data-v-c5989f58] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.pro-table_header[data-v-c5989f58]:empty {
+  display: none;
+}
+.pro-table_header + .pro-table_header_content[data-v-c5989f58] {
+  margin-top: 16px;
+}
+.pro-table_header_button-bar[data-v-c5989f58] {
+  flex: 1;
+}
+.pro-table_header_toolbar[data-v-c5989f58] {
+  margin-left: 12px;
+}
+.pro-table_pagination[data-v-c5989f58] {
+  justify-content: flex-end;
+  padding: 16px 0;
+}

package/es/form/index-BvqMIOZ8.js

@@ -0,0 +1,470 @@
+import { inject, computed, provide, toValue, defineComponent, useAttrs, useSlots, watchEffect, createBlock, openBlock, unref, mergeProps, withModifiers, withCtx, createVNode, renderSlot, normalizeProps, guardReactiveProps, resolveComponent, createElementBlock, Fragment, renderList, createSlots, ref, createCommentVNode, resolveDynamicComponent, isVNode, createTextVNode, toDisplayString } from "vue";
+import { ElFormItem, ElCol, ElTable, ElPagination, useFormDisabled, ElForm, ElTransfer, ElTreeSelect, ElSlider, ElSwitch, ElRadioGroup, ElCheckboxGroup, ElTimeSelect, ElTimePicker, ElDatePicker, ElCascader, ElSelect, ElAutocomplete, ElInputNumber, ElInput, ElRow } from "element-plus";
+import { INJECT_CONFIG, getInjectConfig, INJECT_COMPONENTS } from "../component-provider/index.js";
+import { I as InjectionFormKey, c as camelizeProperties, a as InjectionPathKey, g as getObject, u as useForm$1, b as useFields$1, d as useFormRef$1 } from "../core/index-VQxpXgLX.js";
+import { i as isPlainObject, t as toPath, o as omit, c as cloneDeep } from "../vendor/utils/lodash-es-p6jau26B.js";
+const tableProps = () => ElTable.props || {};
+const paginationProps = () => ElPagination.props || {};
+const gridItemProps = () => ElCol.props || {};
+const formItemProps = () => ElFormItem.props || {};
+const DisabledContextKey = Symbol("pro-form-disabled-context");
+const useDisabledContext = () => {
+  const formDisabled = useFormDisabled();
+  return inject(DisabledContextKey, computed(() => !!formDisabled.value));
+};
+const useDisabledContextProvider = (disabled) => {
+  provide(DisabledContextKey, computed(() => !!toValue(disabled)));
+};
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...{ name: "ProForm", inheritAttrs: false },
+  __name: "index",
+  props: {
+    grid: { type: [Boolean, Object], default: false },
+    form: { default: () => ({}) }
+  },
+  setup(__props) {
+    provide(InjectionFormKey, __props.form);
+    const { formData, fields, setFormRef } = __props.form;
+    const _fields = computed(() => fields.value);
+    const config = INJECT_CONFIG["pro-form"];
+    const attrs = useAttrs();
+    const { grid: _injectGrid, ...injectAttrs } = inject(
+      config.injectionKey,
+      config.default
+    );
+    const slots = useSlots();
+    watchEffect(() => {
+      Object.keys(slots).forEach((name) => {
+        if (name === "default") return;
+        provide(`${TeleportComponentNamePrefix}${name}`, slots[name]);
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElForm), mergeProps({
+        ref: (el) => {
+          var _a;
+          return (_a = unref(setFormRef)) == null ? void 0 : _a(el);
+        },
+        model: unref(formData)
+      }, mergeProps(injectAttrs, unref(camelizeProperties)(unref(attrs))), {
+        class: "pro-form",
+        onSubmit: _cache[0] || (_cache[0] = withModifiers(() => {
+        }, ["prevent"]))
+      }), {
+        default: withCtx(() => [
+          createVNode(unref(BaseFormItem), {
+            fields: _fields.value,
+            grid: __props.grid
+          }, null, 8, ["fields", "grid"]),
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["model"]);
+    };
+  }
+});
+const FORM_ITEM_SLOT_KEYS = ["label", "error"];
+const componentMap = {
+  "input": ElInput,
+  "input-number": ElInputNumber,
+  "autocomplete": ElAutocomplete,
+  "select": ElSelect,
+  "cascader": ElCascader,
+  "date-picker": ElDatePicker,
+  "time-picker": ElTimePicker,
+  "time-select": ElTimeSelect,
+  "checkbox-group": ElCheckboxGroup,
+  "radio-group": ElRadioGroup,
+  "switch": ElSwitch,
+  "slider": ElSlider,
+  "tree-select": ElTreeSelect,
+  "transfer": ElTransfer
+};
+const TeleportComponentNamePrefix = "TeleportComponent_";
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    path: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const namePath = computed(() => {
+      return Array.isArray(props.path) ? props.path.join(".") : props.path;
+    });
+    provide(InjectionPathKey, namePath);
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default", { path: namePath.value });
+    };
+  }
+});
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    field: {}
+  },
+  setup(__props) {
+    const formItemPropKeys = Object.keys(formItemProps());
+    const gridItemPropKeys = Object.keys(gridItemProps());
+    const props = __props;
+    const config = INJECT_CONFIG["pro-form-item"];
+    const injectFormItemProps = inject(config.injectionKey, config.default);
+    const groupedAttributes = computed(() => {
+      let gridItemProps2 = {};
+      let formItemProps2 = {};
+      const componentProps = { slots: {} };
+      const formItemSlots = {};
+      if (isPlainObject(props.field)) {
+        const { path, name, fields, formItemClass, formItemStyle, formItemContainer, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, ...rest } = props.field;
+        const {
+          class: injectClassName,
+          style: injectStyle,
+          span: injectSpan,
+          formItemContainer: injectFormItemContainer,
+          xs,
+          sm,
+          md,
+          lg,
+          xl,
+          ...injectRest
+        } = injectFormItemProps;
+        const initGridItemProps = span || span === 0 ? { span } : { xs, sm, md, lg, xl, span: injectSpan };
+        gridItemProps2 = fields ? { span: span ?? 24 } : initGridItemProps;
+        formItemProps2 = mergeProps(
+          injectRest,
+          { class: injectClassName, style: injectStyle },
+          { class: toValue(formItemClass), style: toValue(formItemStyle) },
+          formItemDataAttrs
+        );
+        formItemProps2.container = formItemContainer ?? injectFormItemContainer;
+        Object.keys(rest).forEach((k) => {
+          if (gridItemPropKeys.includes(k)) {
+            gridItemProps2[k] = rest[k];
+          } else if (formItemPropKeys.includes(k)) {
+            formItemProps2[k] = rest[k];
+          } else {
+            componentProps[k] = rest[k];
+          }
+        });
+        Object.assign(componentProps, componentDataAttrs);
+        Object.keys(slots).forEach((k) => {
+          if (FORM_ITEM_SLOT_KEYS.includes(k)) {
+            formItemSlots[k] = slots[k];
+          } else {
+            componentProps["slots"][k] = slots[k];
+          }
+        });
+      }
+      return { gridItemProps: gridItemProps2, formItemProps: formItemProps2, componentProps, formItemSlots };
+    });
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(groupedAttributes.value)));
+    };
+  }
+});
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...{ name: "BaseFormItem", inheritAttrs: false },
+  __name: "index",
+  props: {
+    grid: { type: [Boolean, Object], default: () => void 0 },
+    fields: { default: () => [] },
+    disabled: { type: Boolean, default: () => void 0 }
+  },
+  setup(__props) {
+    const validFields = computed(() => {
+      var _a, _b;
+      return (_b = (_a = __props.fields).filter) == null ? void 0 : _b.call(_a, (field) => !field.hidden);
+    });
+    useDisabledContextProvider(computed(() => __props.disabled));
+    const config = INJECT_CONFIG["pro-form"];
+    const { grid: injectGrid } = inject(config.injectionKey, config.default);
+    const enableGrid = computed(() => {
+      if (__props.grid !== void 0) return !!__props.grid;
+      return !!injectGrid;
+    });
+    const computedGridProps = computed(() => {
+      return enableGrid.value ? { ...getObject(injectGrid), ...getObject(__props.grid) } : {};
+    });
+    const formItemRefs = [];
+    const componentRefs = [];
+    const onFormItemMounted = (index, formItemProps2) => {
+      const field = validFields.value[index];
+      Object.assign(field, {
+        getFormItemRef: () => formItemRefs[index],
+        getFormItemComputedProps: () => formItemProps2
+      });
+    };
+    const onComponentMounted = (index) => {
+      const field = validFields.value[index];
+      Object.assign(field, {
+        getComponentRef: () => {
+          var _a;
+          return (_a = componentRefs[index]) == null ? void 0 : _a.getComponentRef();
+        },
+        getComponentComputedProps: () => {
+          var _a;
+          return (_a = componentRefs[index]) == null ? void 0 : _a.getComponentComputedProps();
+        }
+      });
+    };
+    return (_ctx, _cache) => {
+      const _component_BaseFormItem = resolveComponent("BaseFormItem");
+      return openBlock(), createBlock(unref(_sfc_main$1), mergeProps({
+        component: enableGrid.value ? unref(ElRow) : void 0
+      }, computedGridProps.value, { style: { "width": "100%" } }), {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(validFields.value, ({ path: _path, ...field }, index) => {
+            return openBlock(), createBlock(_sfc_main$5, mergeProps({
+              key: unref(toPath)(toValue(_path ?? index)).join(".") || index
+            }, { ref_for: true }, { path: _path }), {
+              default: withCtx(({ path }) => [
+                createVNode(_sfc_main$4, { field }, {
+                  default: withCtx(({
+                    gridItemProps: gridItemProps2,
+                    formItemProps: { container, ...formItemProps2 },
+                    componentProps,
+                    formItemSlots
+                  }) => [
+                    createVNode(unref(_sfc_main$1), mergeProps({
+                      component: enableGrid.value ? unref(ElCol) : void 0
+                    }, { ref_for: true }, gridItemProps2), {
+                      default: withCtx(() => [
+                        createVNode(unref(_sfc_main$1), {
+                          component: container,
+                          path
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(unref(ElFormItem), mergeProps({ ref_for: true }, formItemProps2, {
+                              ref_for: true,
+                              ref: (el) => formItemRefs[index] = el,
+                              prop: unref(toPath)(path).join("."),
+                              path,
+                              onVnodeMounted: ($event) => onFormItemMounted(index, formItemProps2)
+                            }), createSlots({
+                              default: withCtx(() => [
+                                field.fields ? (openBlock(), createBlock(_component_BaseFormItem, {
+                                  key: 0,
+                                  grid: field.grid ?? __props.grid,
+                                  fields: field.fields,
+                                  disabled: toValue(field.disabled)
+                                }, null, 8, ["grid", "fields", "disabled"])) : (openBlock(), createBlock(unref(_sfc_main$2), mergeProps({
+                                  key: 1,
+                                  ref_for: true,
+                                  ref: (el) => componentRefs[index] = el
+                                }, { ref_for: true }, componentProps, {
+                                  path,
+                                  onVnodeMounted: ($event) => onComponentMounted(index)
+                                }), null, 16, ["path", "onVnodeMounted"]))
+                              ]),
+                              _: 2
+                            }, [
+                              renderList(formItemSlots, (slot, name) => {
+                                return {
+                                  name,
+                                  fn: withCtx((scoped) => [
+                                    createVNode(unref(_sfc_main), mergeProps({
+                                      path,
+                                      component: slot
+                                    }, { ref_for: true }, scoped), null, 16, ["path", "component"])
+                                  ])
+                                };
+                              })
+                            ]), 1040, ["prop", "path", "onVnodeMounted"])
+                          ]),
+                          _: 2
+                        }, 1032, ["component", "path"])
+                      ]),
+                      _: 2
+                    }, 1040, ["component"])
+                  ]),
+                  _: 2
+                }, 1032, ["field"])
+              ]),
+              _: 2
+            }, 1040);
+          }), 128))
+        ]),
+        _: 1
+      }, 16, ["component"]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const BaseFormItem = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-f9126ed0"]]);
+const useForm = useForm$1;
+const getInitProps = (field) => {
+  const { component, type } = field;
+  if (typeof component === "string") {
+    const k = [component, type].filter(Boolean).join(".");
+    const config = getInjectConfig(k);
+    if (!config) return {};
+    const injectProps = inject(config.injectionKey, config.default);
+    return injectProps;
+  }
+  return {};
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{ name: "BaseField", inheritAttrs: false },
+  __name: "index",
+  props: {
+    component: { default: () => void 0 },
+    path: { default: "" }
+  },
+  setup(__props, { expose: __expose }) {
+    const form = useForm(false);
+    const { getFormData, setFormData } = form;
+    const componentRef = ref();
+    const attrs = useAttrs();
+    function getOldValue() {
+      return cloneDeep(getFormData == null ? void 0 : getFormData(__props.path));
+    }
+    const value = computed({
+      get() {
+        let val = getFormData == null ? void 0 : getFormData(__props.path);
+        const { valueFormatter } = groupedAttrs.value;
+        if (typeof valueFormatter === "object" && typeof valueFormatter.get === "function") {
+          val = valueFormatter.get(val);
+        }
+        return val;
+      },
+      set(val) {
+        let newVal = val;
+        const { valueFormatter } = groupedAttrs.value;
+        if (valueFormatter) {
+          if (typeof valueFormatter === "function") {
+            newVal = valueFormatter(val, getOldValue());
+          } else if (typeof valueFormatter.set === "function") {
+            newVal = valueFormatter.set(val, getOldValue());
+          }
+        }
+        setFormData == null ? void 0 : setFormData(__props.path, newVal);
+      }
+    });
+    const parentDisabled = useDisabledContext();
+    const groupedAttrs = computed(() => {
+      const initProps = getInitProps({
+        component: __props.component,
+        type: attrs.type
+      });
+      const modelPropName = attrs.modelProp ?? initProps.modelProp ?? "modelValue";
+      const mergedProps = mergeProps(
+        initProps,
+        attrs,
+        { class: attrs.componentClass, style: attrs.componentStyle },
+        { class: initProps.componentClass, style: initProps.componentStyle },
+        { disabled: attrs.disabled ?? parentDisabled.value ?? initProps.disabled },
+        { modelProp: modelPropName }
+      );
+      const { valueFormatter, modelProp, slots, componentClass, componentStyle, componentContainer, ...rest } = mergedProps;
+      const modelBindingProp = modelProp ?? "modelValue";
+      const bindAttrs = omit(rest, [
+        modelBindingProp,
+        `onUpdate:${modelBindingProp}`
+      ]);
+      return {
+        attrs: bindAttrs,
+        slots,
+        componentContainer,
+        modelProp: modelBindingProp,
+        valueFormatter
+      };
+    });
+    const teleportComponent = inject(
+      `${TeleportComponentNamePrefix}${__props.path}`,
+      void 0
+    );
+    const customComponents = inject(INJECT_COMPONENTS, {});
+    const is = computed(() => {
+      if (teleportComponent) return teleportComponent;
+      if (typeof __props.component === "string") {
+        return customComponents[__props.component] || componentMap[__props.component] || __props.component;
+      }
+      return __props.component;
+    });
+    __expose({
+      getComponentRef: () => componentRef.value,
+      getComponentComputedProps: () => groupedAttrs.value.attrs
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), {
+        component: groupedAttrs.value.componentContainer,
+        path: __props.path
+      }, {
+        default: withCtx(() => [
+          is.value ? (openBlock(), createBlock(resolveDynamicComponent(is.value), mergeProps({ key: 0 }, groupedAttrs.value.attrs, {
+            ref_key: "componentRef",
+            ref: componentRef,
+            [`${groupedAttrs.value.modelProp}`]: value.value,
+            [`onUpdate:${groupedAttrs.value.modelProp}`]: _cache[0] || (_cache[0] = ($event) => value.value = $event),
+            path: __props.path
+          }), createSlots({ _: 2 }, [
+            renderList(groupedAttrs.value.slots, (slot, name) => {
+              return {
+                name,
+                fn: withCtx((scoped) => [
+                  createVNode(unref(_sfc_main), mergeProps({ path: __props.path }, scoped, { component: slot }), null, 16, ["path", "component"])
+                ])
+              };
+            })
+          ]), 1040, ["path"])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["component", "path"]);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{ name: "ContainerFragment", inheritAttrs: false },
+  __name: "index",
+  props: {
+    component: { type: [Object, Function] }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return __props.component ? (openBlock(), createBlock(resolveDynamicComponent(__props.component), normalizeProps(mergeProps({ key: 0 }, _ctx.$attrs)), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16)) : renderSlot(_ctx.$slots, "default", { key: 1 });
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "SlotComponent", inheritAttrs: false },
+  __name: "index",
+  props: {
+    component: { type: [Object, Function, String, Number, Boolean, null] }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return isVNode(__props.component) || typeof __props.component === "function" ? (openBlock(), createBlock(resolveDynamicComponent(__props.component), normalizeProps(mergeProps({ key: 0 }, _ctx.$attrs)), null, 16)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+        createTextVNode(toDisplayString(__props.component), 1)
+      ], 64));
+    };
+  }
+});
+const useFields = useFields$1;
+const useFormRef = useFormRef$1;
+export {
+  BaseFormItem as B,
+  FORM_ITEM_SLOT_KEYS as F,
+  TeleportComponentNamePrefix as T,
+  _export_sfc as _,
+  _sfc_main$6 as a,
+  _sfc_main$1 as b,
+  _sfc_main$2 as c,
+  _sfc_main as d,
+  componentMap as e,
+  useFields as f,
+  useFormRef as g,
+  getInitProps as h,
+  paginationProps as p,
+  tableProps as t,
+  useForm as u
+};

package/es/form/index.js

@@ -0,0 +1,20 @@
+import { c, a, B, b, F, d, T, e, a as a2, h, f, u, g } from "./index-BvqMIOZ8.js";
+import { I, a as a3, e as e2 } from "../core/index-VQxpXgLX.js";
+export {
+  c as BaseField,
+  a as BaseForm,
+  B as BaseFormItem,
+  b as ContainerFragment,
+  F as FORM_ITEM_SLOT_KEYS,
+  I as InjectionFormKey,
+  a3 as InjectionPathKey,
+  d as SlotComponent,
+  T as TeleportComponentNamePrefix,
+  e as componentMap,
+  a2 as default,
+  h as getInitProps,
+  f as useFields,
+  u as useForm,
+  e2 as useFormData,
+  g as useFormRef
+};