@wlydfe/pro-ui 0.2.21 → 0.2.23

package/lib/components/display-item/src/index.vue2.js

@@ -0,0 +1,667 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var lodashEs = require('lodash-es');
+var iconsVue = require('@element-plus/icons-vue');
+var index$1 = require('../../form/index.js');
+var index = require('../../utils/index.js');
+require('../../../hooks/index.js');
+require('../../../constants/index.js');
+var index$2 = require('../../render/index.js');
+var elementPlus = require('element-plus');
+var displayItem$1 = require('./display-item.js');
+var useGetOptions = require('../../../hooks/useGetOptions.js');
+var displayItem = require('../../../constants/display-item.js');
+var is = require('../../utils/is.js');
+var form = require('../../../constants/form.js');
+
+const _hoisted_1 = ["innerHTML"];
+const _hoisted_2 = { class: "plus-display-item" };
+const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode(
+  "svg",
+  {
+    fill: "none",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    class: "t-icon t-icon-edit-1",
+    "pointer-events": "none"
+  },
+  [
+    /* @__PURE__ */ vue.createElementVNode("path", {
+      fill: "currentColor",
+      d: "M16.83 1.42l5.75 5.75L7.75 22H2v-5.75L16.83 1.42zm0 8.68l2.92-2.93-2.92-2.93-2.93 2.93 2.93 2.93zm-4.34-1.51L4 17.07V20h2.93l8.48-8.49L12.5 8.6z"
+    })
+  ],
+  -1
+  /* HOISTED */
+);
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PlusDisplayItem"
+  },
+  __name: "index",
+  props: {
+    column: { default: () => ({ prop: "", label: "" }) },
+    row: { default: () => ({}) },
+    index: { default: 0 },
+    editable: { type: [Boolean, String], default: false },
+    rest: { default: () => ({}) },
+    formProps: { default: () => ({}) }
+  },
+  emits: ["change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const customFieldProps = vue.ref({});
+    const customFieldPropsIsReady = vue.ref(false);
+    const customFormProps = vue.ref({});
+    const customFormPropsIsReady = vue.ref(false);
+    const formInstance = vue.ref();
+    const { customOptions: options } = useGetOptions.useGetOptions(props.column);
+    const columns = vue.ref([]);
+    const subRow = vue.ref(lodashEs.cloneDeep(props.row));
+    const isEdit = vue.ref(false);
+    const falseArray = [false, "click", "dblclick"];
+    vue.watch(
+      () => props.row,
+      (val) => {
+        subRow.value = lodashEs.cloneDeep(val);
+      },
+      {
+        deep: true
+      }
+    );
+    vue.watch(
+      () => [props.editable, props.column.editable],
+      () => {
+        if (props.column.editable === true) {
+          isEdit.value = true;
+          return;
+        }
+        if (props.column.editable === false) {
+          isEdit.value = false;
+          return;
+        }
+        if (props.editable === true) {
+          isEdit.value = true;
+          return;
+        }
+        if (falseArray.includes(props.editable)) {
+          isEdit.value = false;
+          return;
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    const hasEditIcon = vue.computed(
+      () => (props.editable === "click" || props.editable === "dblclick") && props.column.editable !== false
+    );
+    const displayValue = vue.computed({
+      get() {
+        return index.getValue(subRow.value, props.column.prop);
+      },
+      set(value) {
+        index.setValue(subRow.value, props.column.prop, value);
+      }
+    });
+    const formatterValue = vue.computed(() => {
+      const value = props.column.valueType === "link" ? props.column.linkText || displayValue.value : displayValue.value;
+      if (!displayItem.selectValueTypeList.includes(props.column.valueType) && !isEdit.value) {
+        if (props.column.formatter && is.isFunction(props.column.formatter)) {
+          return props.column.formatter(value, renderParams.value);
+        }
+        if (displayComponent.value.format && is.isFunction(displayComponent.value.format)) {
+          return displayComponent.value.format(
+            value,
+            customFieldProps.value.format || customFieldProps.value.valueFormat
+          );
+        }
+      }
+      if (value === void 0 || value === null || value === "") {
+        return "-";
+      }
+      return value;
+    });
+    const modelValues = vue.computed({
+      get() {
+        return { [props.column.prop]: displayValue.value };
+      },
+      set(values) {
+        displayValue.value = values[props.column.prop];
+      }
+    });
+    const isTagAndNoValue = vue.computed(
+      () => props.column.valueType === "tag" && (displayValue.value === void 0 || displayValue.value === null || displayValue.value === "")
+    );
+    const renderParams = vue.computed(() => ({
+      prop: props.column.prop,
+      valueType: props.column.valueType,
+      row: subRow.value,
+      index: props.index,
+      rowIndex: props.index,
+      fieldProps: customFieldProps.value,
+      options: options.value,
+      ...props.rest,
+      column: { ...props.rest.column, ...props.column }
+    }));
+    const tableRowInfo = vue.computed(() => ({
+      row: subRow.value,
+      index: props.index,
+      rowIndex: props.index,
+      ...props.rest,
+      column: { ...props.rest.column, ...props.column }
+    }));
+    vue.provide(form.TableFormRowInfoInjectionKey, tableRowInfo);
+    const imageUrl = vue.computed(() => {
+      const option = formatterValue.value;
+      if (option && is.isString(option)) {
+        return { options: [option], url: option };
+      }
+      if (is.isArray(option)) {
+        return { options: option, url: option[0] };
+      }
+      return { options: [], url: "" };
+    });
+    const getStatus = vue.computed(() => {
+      var _a, _b, _c, _d, _e;
+      if (((_a = props.column) == null ? void 0 : _a.customGetStatus) && is.isFunction((_b = props.column) == null ? void 0 : _b.customGetStatus)) {
+        const option2 = (_c = props.column) == null ? void 0 : _c.customGetStatus({
+          options: options.value,
+          value: displayValue.value,
+          row: subRow.value
+        });
+        return option2 || { label: "", value: "" };
+      }
+      if (
+        // select 多选
+        props.column.valueType === "select" && customFieldProps.value.multiple === true || // checkbox
+        props.column.valueType === "checkbox"
+      ) {
+        const option2 = ((_d = options.value) == null ? void 0 : _d.filter((i) => {
+          var _a2;
+          return (_a2 = displayValue.value) == null ? void 0 : _a2.includes(i.value);
+        })) || [];
+        return option2;
+      }
+      const option = ((_e = options.value) == null ? void 0 : _e.find(
+        (i) => i.value === displayValue.value
+      )) || { label: "", value: "" };
+      return option;
+    });
+    const displayComponent = vue.computed(() => displayItem$1.getDisplayComponent(props.column.valueType));
+    const displayComponentProps = vue.computed(() => {
+      return {
+        // img
+        ...props.column.valueType === "img" ? {
+          fit: "cover",
+          previewTeleported: true,
+          src: imageUrl.value.url,
+          previewSrcList: props.column.preview !== false ? imageUrl.value.options : []
+        } : null,
+        // progress
+        ...props.column.valueType === "progress" ? {
+          percentage: formatterValue.value
+        } : null,
+        // link
+        ...props.column.valueType === "link" ? {
+          type: "primary"
+        } : null,
+        // avatar
+        ...props.column.valueType === "avatar" ? {
+          src: formatterValue.value
+        } : null,
+        ...customFieldProps.value
+      };
+    });
+    vue.watch(
+      () => props.column,
+      (val) => {
+        if (val) {
+          columns.value = [val];
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    vue.watch(
+      () => props.column.fieldProps,
+      (val) => {
+        index.getCustomProps(val, displayValue.value, subRow.value, props.index, "fieldProps").then((data) => {
+          customFieldProps.value = data;
+          customFieldPropsIsReady.value = true;
+        }).catch((err) => {
+          throw err;
+        });
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    vue.watch(
+      () => [props.column.formProps, subRow.value],
+      () => {
+        index.getCustomProps(
+          props.column.formProps,
+          displayValue.value,
+          subRow.value,
+          props.index,
+          "formProps"
+        ).then((data) => {
+          customFormProps.value = data;
+          customFormPropsIsReady.value = true;
+        }).catch((err) => {
+          throw err;
+        });
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    vue.watch(
+      () => props.row,
+      (val) => {
+        subRow.value = { ...val };
+      },
+      {
+        deep: true
+      }
+    );
+    const copy = (data) => {
+      const url = data;
+      const textarea = document.createElement("textarea");
+      textarea.readOnly = true;
+      textarea.style.position = "absolute";
+      textarea.style.left = "-9999px";
+      textarea.value = url;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("Copy");
+      textarea.remove();
+    };
+    const handelClickCopy = (item, row) => {
+      copy(formatterValue.value);
+      row.isCopy = true;
+      setTimeout(() => {
+        row.isCopy = false;
+      }, 3e3);
+    };
+    const handleChange = (values) => {
+      emit("change", {
+        value: values[props.column.prop],
+        prop: props.column.prop,
+        // 兼容 value 代码
+        row: { value: subRow.value, ...subRow.value }
+      });
+    };
+    const startCellEdit = () => {
+      if (props.column.editable === false) {
+        isEdit.value = false;
+        return;
+      }
+      isEdit.value = true;
+    };
+    const stopCellEdit = () => {
+      if (props.column.editable === true) {
+        isEdit.value = true;
+        return;
+      }
+      isEdit.value = false;
+    };
+    const getDisplayItemInstance = () => {
+      return {
+        isEdit,
+        index: props.index,
+        rowIndex: props.index,
+        cellIndex: props.rest.cellIndex,
+        prop: props.column.prop,
+        formInstance: vue.computed(() => {
+          var _a;
+          return (_a = formInstance.value) == null ? void 0 : _a.formInstance;
+        })
+      };
+    };
+    __expose({
+      startCellEdit,
+      stopCellEdit,
+      getDisplayItemInstance
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(
+        vue.Fragment,
+        null,
+        [
+          vue.createCommentVNode(" \u8868\u5355\u7B2C\u4E00\u4F18\u5148\u7EA7 "),
+          isEdit.value ? (vue.openBlock(), vue.createElementBlock(
+            vue.Fragment,
+            { key: 0 },
+            [
+              customFormPropsIsReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusForm), vue.mergeProps({
+                key: 0,
+                ref_key: "formInstance",
+                ref: formInstance,
+                modelValue: modelValues.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValues.value = $event),
+                model: modelValues.value,
+                columns: columns.value,
+                "has-footer": false,
+                "has-label": false
+              }, { ...customFormProps.value, ..._ctx.formProps }, {
+                class: "plus-display-item__form",
+                onChange: handleChange
+              }), vue.createSlots({
+                _: 2
+                /* DYNAMIC */
+              }, [
+                _ctx.$slots[vue.unref(index.getFieldSlotName)(_ctx.column.prop)] ? {
+                  name: vue.unref(index.getFieldSlotName)(_ctx.column.prop),
+                  fn: vue.withCtx((scoped) => [
+                    vue.renderSlot(_ctx.$slots, vue.unref(index.getFieldSlotName)(_ctx.column.prop), vue.normalizeProps(vue.guardReactiveProps(scoped)))
+                  ]),
+                  key: "0"
+                } : void 0,
+                _ctx.$slots[vue.unref(index.getExtraSlotName)(_ctx.column.prop)] ? {
+                  name: vue.unref(index.getExtraSlotName)(_ctx.column.prop),
+                  fn: vue.withCtx((scoped) => [
+                    vue.renderSlot(_ctx.$slots, vue.unref(index.getExtraSlotName)(_ctx.column.prop), vue.normalizeProps(vue.guardReactiveProps(scoped)))
+                  ]),
+                  key: "1"
+                } : void 0,
+                _ctx.$slots[vue.unref(index.getPreviousSlotName)(_ctx.column.prop)] ? {
+                  name: vue.unref(index.getPreviousSlotName)(_ctx.column.prop),
+                  fn: vue.withCtx((scoped) => [
+                    vue.renderSlot(_ctx.$slots, vue.unref(index.getPreviousSlotName)(_ctx.column.prop), vue.normalizeProps(vue.guardReactiveProps(scoped)))
+                  ]),
+                  key: "2"
+                } : void 0
+              ]), 1040, ["modelValue", "model", "columns"])) : vue.createCommentVNode("v-if", true)
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          )) : _ctx.column.render && vue.unref(is.isFunction)(_ctx.column.render) ? (vue.openBlock(), vue.createElementBlock(
+            vue.Fragment,
+            { key: 1 },
+            [
+              vue.createCommentVNode(" \u81EA\u5B9A\u4E49\u663E\u793A "),
+              customFieldPropsIsReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.PlusRender), {
+                key: 0,
+                render: _ctx.column.render,
+                params: renderParams.value,
+                "callback-value": displayValue.value,
+                "custom-field-props": customFieldProps.value
+              }, null, 8, ["render", "params", "callback-value", "custom-field-props"])) : vue.createCommentVNode("v-if", true)
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          )) : _ctx.$slots[vue.unref(index.getTableCellSlotName)(_ctx.column.prop)] ? (vue.openBlock(), vue.createElementBlock(
+            vue.Fragment,
+            { key: 2 },
+            [
+              vue.createCommentVNode(" \u63D2\u69FD "),
+              vue.renderSlot(_ctx.$slots, vue.unref(index.getTableCellSlotName)(_ctx.column.prop), vue.mergeProps({ value: displayValue.value }, renderParams.value))
+            ],
+            2112
+            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+          )) : _ctx.column.renderHTML && vue.unref(is.isFunction)(_ctx.column.renderHTML) ? (vue.openBlock(), vue.createElementBlock(
+            vue.Fragment,
+            { key: 3 },
+            [
+              vue.createCommentVNode("\u663E\u793AHTML "),
+              vue.createElementVNode("span", {
+                class: "plus-display-item",
+                innerHTML: _ctx.column.renderHTML(displayValue.value, renderParams.value)
+              }, null, 8, _hoisted_1)
+            ],
+            2112
+            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+          )) : vue.unref(displayItem.selectValueTypeList).includes(_ctx.column.valueType) ? (vue.openBlock(), vue.createElementBlock(
+            vue.Fragment,
+            { key: 4 },
+            [
+              vue.createCommentVNode(" \u72B6\u6001\u663E\u793A `select`, `radio`, `checkbox`"),
+              vue.createElementVNode(
+                "span",
+                vue.mergeProps({ class: "plus-display-item plus-display-item__badge" }, customFieldProps.value, {
+                  class: { "is-list": vue.unref(is.isArray)(getStatus.value) }
+                }),
+                [
+                  vue.createCommentVNode(" \u591A\u9009 "),
+                  vue.unref(is.isArray)(getStatus.value) ? (vue.openBlock(), vue.createElementBlock(
+                    vue.Fragment,
+                    { key: 0 },
+                    [
+                      vue.unref(is.isFunction)(_ctx.column.formatter) ? (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: 0 },
+                        [
+                          vue.createTextVNode(
+                            vue.toDisplayString(_ctx.column.formatter(displayValue.value, renderParams.value)),
+                            1
+                            /* TEXT */
+                          )
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      )) : (vue.openBlock(true), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: 1 },
+                        vue.renderList(getStatus.value, (item) => {
+                          return vue.openBlock(), vue.createElementBlock("span", {
+                            key: String(item.value),
+                            class: "plus-display-item__badge__item"
+                          }, [
+                            vue.createElementVNode(
+                              "i",
+                              {
+                                class: vue.normalizeClass([
+                                  "plus-display-item__badge__dot",
+                                  item.type && !item.color ? "plus-display-item__badge__dot--" + item.type : ""
+                                ]),
+                                style: vue.normalizeStyle({ backgroundColor: item.color })
+                              },
+                              null,
+                              6
+                              /* CLASS, STYLE */
+                            ),
+                            vue.createTextVNode(
+                              " " + vue.toDisplayString(item.label),
+                              1
+                              /* TEXT */
+                            )
+                          ]);
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ],
+                    64
+                    /* STABLE_FRAGMENT */
+                  )) : (vue.openBlock(), vue.createElementBlock(
+                    vue.Fragment,
+                    { key: 1 },
+                    [
+                      vue.createCommentVNode(" \u5355\u9009 "),
+                      getStatus.value.color || getStatus.value.type ? (vue.openBlock(), vue.createElementBlock(
+                        "i",
+                        {
+                          key: 0,
+                          class: vue.normalizeClass([
+                            "plus-display-item__badge__dot",
+                            getStatus.value.type && !getStatus.value.color ? "plus-display-item__badge__dot--" + getStatus.value.type : ""
+                          ]),
+                          style: vue.normalizeStyle({ backgroundColor: getStatus.value.color })
+                        },
+                        null,
+                        6
+                        /* CLASS, STYLE */
+                      )) : vue.createCommentVNode("v-if", true),
+                      vue.createTextVNode(
+                        " " + vue.toDisplayString(vue.unref(is.isFunction)(_ctx.column.formatter) ? _ctx.column.formatter(displayValue.value, renderParams.value) : getStatus.value.label),
+                        1
+                        /* TEXT */
+                      )
+                    ],
+                    64
+                    /* STABLE_FRAGMENT */
+                  ))
+                ],
+                16
+                /* FULL_PROPS */
+              )
+            ],
+            2112
+            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+          )) : _ctx.column.valueType === "copy" ? (vue.openBlock(), vue.createElementBlock(
+            vue.Fragment,
+            { key: 5 },
+            [
+              vue.createCommentVNode(" \u590D\u5236 "),
+              vue.createElementVNode("span", _hoisted_2, [
+                vue.createTextVNode(
+                  vue.toDisplayString(formatterValue.value) + " ",
+                  1
+                  /* TEXT */
+                ),
+                displayValue.value ? (vue.openBlock(), vue.createBlock(
+                  vue.unref(elementPlus.ElIcon),
+                  vue.mergeProps({
+                    key: 0,
+                    size: "16",
+                    class: "plus-display-item__icon__copy"
+                  }, customFieldProps.value, {
+                    onClick: _cache[1] || (_cache[1] = ($event) => handelClickCopy(_ctx.column, subRow.value))
+                  }),
+                  {
+                    default: vue.withCtx(() => [
+                      !subRow.value.isCopy ? (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.DocumentCopy), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.Select), { key: 1 }))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  },
+                  16
+                  /* FULL_PROPS */
+                )) : vue.createCommentVNode("v-if", true)
+              ])
+            ],
+            2112
+            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+          )) : vue.unref(displayItem$1.hasDisplayComponent)(_ctx.column.valueType) ? (vue.openBlock(), vue.createElementBlock(
+            vue.Fragment,
+            { key: 6 },
+            [
+              vue.createCommentVNode(" \u7EDF\u4E00\u5904\u7406 "),
+              vue.createCommentVNode("has slots  "),
+              displayComponent.value.hasSlots ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(isTagAndNoValue.value ? "span" : displayComponent.value.component), vue.mergeProps({
+                key: 0,
+                class: ["plus-display-item", displayComponent.value.class]
+              }, { ...renderParams.value, ...displayComponentProps.value }), vue.createSlots({
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(
+                    " " + vue.toDisplayString(formatterValue.value),
+                    1
+                    /* TEXT */
+                  )
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, [
+                vue.renderList(_ctx.column.fieldSlots, (fieldSlot, key) => {
+                  return {
+                    name: key,
+                    fn: vue.withCtx((data) => [
+                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(fieldSlot), vue.mergeProps({ value: displayValue.value }, { ...renderParams.value, ...data }), null, 16, ["value"]))
+                    ])
+                  };
+                })
+              ]), 1040, ["class"])) : (vue.openBlock(), vue.createElementBlock(
+                vue.Fragment,
+                { key: 1 },
+                [
+                  vue.createCommentVNode("no slots  "),
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(displayComponent.value.component), vue.mergeProps({
+                    class: ["plus-display-item", displayComponent.value.class]
+                  }, { ...renderParams.value, ...displayComponentProps.value }), {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(
+                        vue.toDisplayString(formatterValue.value),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 16, ["class"]))
+                ],
+                2112
+                /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+              ))
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          )) : _ctx.column.valueType === "divider" ? (vue.openBlock(), vue.createBlock(
+            vue.unref(elementPlus.ElDivider),
+            vue.mergeProps({
+              key: 7,
+              ref: "fieldInstance",
+              class: "plus-form-item-field"
+            }, customFieldProps.value),
+            {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(
+                  vue.toDisplayString(formatterValue.value),
+                  1
+                  /* TEXT */
+                )
+              ]),
+              _: 1
+              /* STABLE */
+            },
+            16
+            /* FULL_PROPS */
+          )) : (vue.openBlock(), vue.createElementBlock(
+            vue.Fragment,
+            { key: 8 },
+            [
+              vue.createCommentVNode(" \u6CA1\u6709format "),
+              vue.createElementVNode(
+                "span",
+                vue.mergeProps({ class: "plus-display-item" }, customFieldProps.value),
+                vue.toDisplayString(formatterValue.value),
+                17
+                /* TEXT, FULL_PROPS */
+              )
+            ],
+            2112
+            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+          )),
+          vue.renderSlot(_ctx.$slots, "edit-icon", {}, () => [
+            hasEditIcon.value && !isEdit.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
+              key: 0,
+              size: 16,
+              class: "plus-display-item__edit-icon",
+              "pointer-events": "none"
+            }, {
+              default: vue.withCtx(() => [
+                _hoisted_3
+              ]),
+              _: 1
+              /* STABLE */
+            })) : vue.createCommentVNode("v-if", true)
+          ])
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      );
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/components/display-item/style/css.d.ts

@@ -0,0 +1,9 @@
+import "element-plus/es/components/image/style/css";
+import "element-plus/es/components/link/style/css";
+import "element-plus/es/components/tag/style/css";
+import "element-plus/es/components/progress/style/css";
+import "element-plus/es/components/icon/style/css";
+import "element-plus/es/components/avatar/style/css";
+import "element-plus/es/components/divider/style/css";
+import "@wlydfe/pro-ui/es/components/form/style/css";
+import "@wlydfe/pro-ui-theme-chalk/plus-display-item.css";

package/lib/components/display-item/style/css.js

@@ -0,0 +1,12 @@
+'use strict';
+
+require('element-plus/lib/components/image/style/css.js');
+require('element-plus/lib/components/link/style/css.js');
+require('element-plus/lib/components/tag/style/css.js');
+require('element-plus/lib/components/progress/style/css.js');
+require('element-plus/lib/components/icon/style/css.js');
+require('element-plus/lib/components/avatar/style/css.js');
+require('element-plus/lib/components/divider/style/css.js');
+require('../../form/style/css.js');
+require('@wlydfe/pro-ui-theme-chalk/plus-display-item.css');
+

package/lib/components/display-item/style/index.d.ts

@@ -0,0 +1,8 @@
+import "element-plus/es/components/image/style/index";
+import "element-plus/es/components/link/style/index";
+import "element-plus/es/components/tag/style/index";
+import "element-plus/es/components/progress/style/index";
+import "element-plus/es/components/avatar/style/index";
+import "element-plus/es/components/divider/style/index";
+import "@wlydfe/pro-ui/es/components/form/style/index";
+import "@wlydfe/pro-ui-theme-chalk/src/display-item.scss";