@maxtropy/v-components 0.1.12-beta.5 → 0.1.12-beta.6

package/lib/components/timePicker/MxTimePicker.vue.js

@@ -0,0 +1,78 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+require("element-plus/es/components/time-picker/style/css");
+require("element-plus/es/components/config-provider/style/css");
+require("element-plus/es/components/button/style/css");
+const iconsVue = require("@element-plus/icons-vue");
+const locale = require("element-plus/lib/locale/lang/zh-cn");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "MxTimePicker",
+  props: {
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    startPlaceholder: {
+      type: String,
+      default: ""
+    },
+    endPlaceholder: {
+      type: String,
+      default: ""
+    },
+    showSwitch: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["click-left", "click-right"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const onClickLeft = () => {
+      emit("click-left");
+    };
+    const onClickRight = () => {
+      emit("click-right");
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElConfigProvider), { locale: vue.unref(locale) }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(vue.unref(elementPlus.ElTimePicker), vue.mergeProps({
+            placeholder: props.placeholder ? props.placeholder : "请选择开始时间",
+            "start-placeholder": props.startPlaceholder ? props.startPlaceholder : "开始时间",
+            "end-placeholder": props.endPlaceholder ? props.endPlaceholder : "结束时间",
+            "range-separator": "⇀",
+            "clear-icon": "CircleCloseFilled",
+            class: "mx-time-picker",
+            "popper-class": "mx-time-picker-popper"
+          }, _ctx.$attrs), vue.createSlots({ _: 2 }, [
+            vue.renderList(_ctx.$slots, (item, key, index) => {
+              return {
+                name: key,
+                fn: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, key)
+                ])
+              };
+            })
+          ]), 1040, ["placeholder", "start-placeholder", "end-placeholder"]),
+          props.showSwitch ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElButton), {
+            key: 0,
+            class: "mx-time-picker-range-switch-btn",
+            icon: vue.unref(iconsVue.ArrowLeftBold),
+            onClick: onClickLeft
+          }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+          props.showSwitch ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElButton), {
+            key: 1,
+            class: "mx-time-picker-range-switch-btn",
+            icon: vue.unref(iconsVue.ArrowRightBold),
+            onClick: onClickRight
+          }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["locale"]);
+    };
+  }
+});
+const MxTimePicker_vue_vue_type_style_index_0_lang = "";
+module.exports = _sfc_main;

package/lib/components/timePicker/index.d.ts

@@ -0,0 +1,7 @@
+import MxTimePicker from './MxTimePicker.vue';
+declare module 'vue' {
+    interface GlobalComponents {
+        MxTimePicker: typeof MxTimePicker;
+    }
+}
+export default MxTimePicker;

package/lib/components/timePicker/index.js

@@ -0,0 +1,6 @@
+"use strict";
+const MxTimePicker = require("./MxTimePicker.vue");
+MxTimePicker.install = (app) => {
+  app.component(MxTimePicker.__name, MxTimePicker);
+};
+module.exports = MxTimePicker;

package/lib/components/tooltip/MxTooltip.css

@@ -0,0 +1,17 @@
+.mx-tooltip.el-popper {
+  --el-popper-border-radius: 2px;
+}
+.mx-tooltip.el-popper.is-dark {
+  background: #3e3e3e;
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.85);
+}
+.mx-tooltip.el-popper.is-dark .el-popper__arrow::before {
+  background-color: #3e3e3e;
+}
+.mx-tooltip.el-popper.is-dark > span:first-child {
+  display: inline-block;
+  max-width: 224px;
+  word-wrap: break-word;
+}

package/lib/components/tooltip/MxTooltip.vue.d.ts

@@ -0,0 +1,7 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, Partial<Record<NonNullable<string | number>, (_: {}) => any>>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/tooltip/MxTooltip.vue.js

@@ -0,0 +1,23 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+require("element-plus/es/components/tooltip/style/css");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "MxTooltip",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTooltip), vue.mergeProps({ "popper-class": "mx-tooltip" }, _ctx.$attrs), vue.createSlots({ _: 2 }, [
+        vue.renderList(_ctx.$slots, (item, key, index) => {
+          return {
+            name: key,
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, key)
+            ])
+          };
+        })
+      ]), 1040);
+    };
+  }
+});
+const MxTooltip_vue_vue_type_style_index_0_lang = "";
+module.exports = _sfc_main;

package/lib/components/tooltip/index.d.ts

@@ -0,0 +1,7 @@
+import MxTooltip from './MxTooltip.vue';
+declare module 'vue' {
+    interface GlobalComponents {
+        MxTooltip: typeof MxTooltip;
+    }
+}
+export default MxTooltip;

package/lib/components/tooltip/index.js

@@ -0,0 +1,6 @@
+"use strict";
+const MxTooltip = require("./MxTooltip.vue");
+MxTooltip.install = (app) => {
+  app.component(MxTooltip.__name, MxTooltip);
+};
+module.exports = MxTooltip;

package/lib/components/tree/MxTree.css

@@ -0,0 +1,56 @@
+.mx-tree.el-tree {
+  --el-fill-color-blank: transparent;
+  --el-tree-text-color: rgba(255, 255, 255, 0.85);
+  --el-tree-node-hover-bg-color: rgba(255, 255, 255, 0.05);
+}
+.mx-tree.el-tree .el-tree-node:focus > .el-tree-node__content {
+  --el-tree-node-hover-bg-color: rgba(64, 64, 64, 1);
+  position: relative;
+}
+.mx-tree.el-tree .el-tree-node:focus > .el-tree-node__content:before {
+  content: "";
+  width: 2px;
+  height: 100%;
+  background-color: #00adff;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.mx-tree.el-tree .el-tree-node__content {
+  height: 32px;
+  margin-bottom: 4px;
+  --el-tree-expand-icon-color: #4a90e2;
+}
+.mx-tree.el-tree .el-tree-node__content .el-icon {
+  height: 10px;
+  width: 10px;
+  line-height: 10px;
+  margin-left: 8px;
+  padding: 6px 7px;
+  --color: #4a90e2;
+}
+.mx-tree.el-tree .el-tree-node__content .el-icon svg {
+  height: 10px;
+  width: 10px;
+}
+.mx-tree.el-tree .el-tree-node__content .el-tree-node__label {
+  padding: 0 24px 0 4px;
+  flex: 1;
+  word-break: break-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mx-tree.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background-color: #404040;
+  position: relative;
+}
+.mx-tree.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content:before {
+  content: "";
+  width: 2px;
+  height: 100%;
+  background-color: #00adff;
+  position: absolute;
+  left: 0;
+  top: 0;
+}

package/lib/components/tree/MxTree.vue.d.ts

@@ -0,0 +1,7 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, Partial<Record<NonNullable<string | number>, (_: {}) => any>>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/tree/MxTree.vue.js

@@ -0,0 +1,26 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+require("element-plus/es/components/tree/style/css");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "MxTree",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTree), vue.mergeProps({
+        class: "mx-tree",
+        indent: 24
+      }, _ctx.$attrs), vue.createSlots({ _: 2 }, [
+        vue.renderList(_ctx.$slots, (item, key, index) => {
+          return {
+            name: key,
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, key)
+            ])
+          };
+        })
+      ]), 1040);
+    };
+  }
+});
+const MxTree_vue_vue_type_style_index_0_lang = "";
+module.exports = _sfc_main;

package/lib/components/tree/index.d.ts

@@ -0,0 +1,7 @@
+import MxTree from './MxTree.vue';
+declare module 'vue' {
+    interface GlobalComponents {
+        MxTree: typeof MxTree;
+    }
+}
+export default MxTree;

package/lib/components/tree/index.js

@@ -0,0 +1,6 @@
+"use strict";
+const MxTree = require("./MxTree.vue");
+MxTree.install = (app) => {
+  app.component(MxTree.__name, MxTree);
+};
+module.exports = MxTree;

package/lib/components/treeselect/MxTreeSelect.css

@@ -0,0 +1,111 @@
+.mx-tree-select.el-select {
+  --el-select-border-color-hover: rgba(0, 173, 255, 0.5);
+  --el-select-disabled-border: rgba(0, 173, 255, 0.5);
+  --el-tag-hover-color: transparent;
+}
+.mx-tree-select.el-select .el-tag .el-tag__close:hover {
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.85);
+}
+.mx-tree-select.el-select .el-input__wrapper {
+  --el-input-border-color: rgba(0, 173, 255, 0.5);
+  --el-input-text-color: rgba(255, 255, 255, 0.85);
+  --el-disabled-border-color: var(--el-input-border-color);
+  --el-input-bg-color: rgba(74, 144, 226, 0.16);
+  --el-disabled-bg-color: rgba(255, 255, 255, 0.1);
+  --el-disabled-text-color: rgba(255, 255, 255, 0.3);
+  --el-input-border-radius: 2px;
+}
+.mx-tree-select.el-select .el-input__wrapper input::placeholder {
+  color: rgba(255, 255, 255, 0.45);
+}
+.mx-tree-select.el-select .el-input__wrapper:hover {
+  --el-input-hover-border-color: rgba(0, 173, 255, 0.8);
+  --el-select-border-color-hover: rgba(0, 173, 255, 0.8);
+  box-shadow: 0 0 0 1px rgba(0, 173, 255, 0.8);
+}
+.mx-tree-select.el-select .el-select-tags-wrapper .el-tag {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+  color: rgba(255, 255, 255, 0.65);
+}
+.mx-tree-select-dropdown.el-tree-select__popper.el-popper {
+  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.2), 0px 6px 16px 0px rgba(0, 0, 0, 0.32), 0px 3px 6px -4px rgba(0, 0, 0, 0.48);
+  border: none;
+  --el-bg-color-overlay: #1f1f1f;
+  --el-text-color-regular: rgba(255, 255, 255, 0.65);
+}
+.mx-tree-select-dropdown.el-tree-select__popper.el-popper .el-popper__arrow::before {
+  display: none;
+}
+.mx-tree-select-dropdown.el-tree-select__popper.el-popper .mx-tree-select.el-tree {
+  --el-fill-color-blank: #1f1f1f;
+  --el-tree-text-color: rgba(255, 255, 255, 0.65);
+}
+.mx-tree-select-dropdown.el-tree-select__popper.el-popper .mx-tree-select.el-tree .el-tree-node__content {
+  height: 24px;
+  --el-tree-node-hover-bg-color: transparent;
+  --el-tree-expand-icon-color: #4a90e2;
+  margin-bottom: 4px;
+}
+.mx-tree-select-dropdown.el-tree-select__popper.el-popper .mx-tree-select.el-tree .el-tree-node__content .el-icon {
+  --color: #4a90e2;
+  height: 10px;
+  width: 10px;
+  line-height: 10px;
+  padding: 7px;
+}
+.mx-tree-select-dropdown.el-tree-select__popper.el-popper .mx-tree-select.el-tree .el-tree-node__content .el-checkbox {
+  --el-border-color: rgba(0, 173, 255, 0.5);
+  --el-color-primary: #4a90e2;
+}
+.mx-tree-select-dropdown.el-tree-select__popper.el-popper .mx-tree-select.el-tree .el-tree-node__content .el-checkbox .el-checkbox__inner {
+  --el-checkbox-bg-color: transparent;
+  --el-checkbox-disabled-input-fill: rgba(255, 255, 255, 0.05);
+  --el-checkbox-disabled-border-color: rgba(255, 255, 255, 0.2);
+  --el-checkbox-disabled-checked-input-fill: var(--el-checkbox-disabled-input-fill);
+  --el-checkbox-disabled-checked-input-border-color: var(--el-checkbox-disabled-border-color);
+  --el-checkbox-disabled-checked-icon-color: var(--el-checkbox-disabled-border-color);
+  --el-checkbox-input-border-color-hover: rgba(0, 173, 255, 0.8);
+  --el-checkbox-input-width: 16px;
+  --el-checkbox-input-height: 16px;
+  --el-border-color: rgba(0, 173, 255, 0.5);
+  --el-checkbox-border-radius: 2px;
+  --el-checkbox-input-border: 1px solid var(--el-border-color);
+}
+.mx-tree-select-dropdown.el-tree-select__popper.el-popper .mx-tree-select.el-tree .el-tree-node__content .el-checkbox .is-indeterminate .el-checkbox__inner::before {
+  top: 6px;
+}
+.mx-tree-select-dropdown.el-tree-select__popper.el-popper .mx-tree-select.el-tree .el-tree-node__content .el-checkbox .el-checkbox__inner::after {
+  left: 5px;
+  top: 2px;
+}
+.mx-tree-select-dropdown.el-tree-select__popper.el-popper .mx-tree-select.el-tree .el-tree-node__content .el-checkbox .el-checkbox__label {
+  --el-disabled-text-color: rgba(255, 255, 255, 0.3);
+}
+.mx-tree-select-dropdown.el-tree-select__popper.el-popper .mx-tree-select.el-tree .el-tree-node__content :deep(.is-indeterminate) {
+  --el-checkbox-checked-bg-color: transparent;
+  --el-checkbox-checked-input-border-color: rgba(0, 173, 255, 0.5);
+  --el-checkbox-checked-icon-color: var(--el-color-primary);
+}
+.mx-tree-select-dropdown.el-tree-select__popper.el-popper .mx-tree-select.el-tree .el-tree-node__content .el-select-dropdown__item {
+  padding-left: 4px;
+  margin-right: 4px;
+  line-height: 24px;
+  height: 24px;
+}
+.mx-tree-select-dropdown.el-tree-select__popper.el-popper .mx-tree-select.el-tree .el-tree-node__content .el-select-dropdown__item:hover {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+  color: rgba(255, 255, 255, 0.85);
+}
+.mx-tree-select-dropdown.el-tree-select__popper.el-popper .mx-tree-select.el-tree .el-tree-node__content .el-select-dropdown__item.selected {
+  color: rgba(255, 255, 255, 0.85);
+  font-weight: 400;
+  background-color: #111d2c !important;
+}
+.mx-tree-select-dropdown.el-tree-select__popper.el-popper .mx-tree-select.el-tree .el-tree-node__content .el-select-dropdown__item.is-disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+.mx-tree-select-dropdown.el-tree-select__popper.el-popper .el-select-dropdown.is-multiple .mx-tree-select.el-tree .el-select-dropdown__item.selected {
+  background-color: transparent !important;
+}

package/lib/components/treeselect/MxTreeSelect.vue.d.ts

@@ -0,0 +1,7 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, Partial<Record<NonNullable<string | number>, (_: {}) => any>>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/treeselect/MxTreeSelect.vue.js

@@ -0,0 +1,34 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+require("element-plus/es/components/tree-select/style/css");
+require("element-plus/es/components/config-provider/style/css");
+const locale = require("element-plus/lib/locale/lang/zh-cn");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "MxTreeSelect",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElConfigProvider), { locale: vue.unref(locale) }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(vue.unref(elementPlus.ElTreeSelect), vue.mergeProps({
+            class: "mx-tree-select",
+            "popper-class": "mx-tree-select-dropdown",
+            "clear-icon": "CircleCloseFilled"
+          }, _ctx.$attrs), vue.createSlots({ _: 2 }, [
+            vue.renderList(_ctx.$slots, (item, key, index) => {
+              return {
+                name: key,
+                fn: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, key)
+                ])
+              };
+            })
+          ]), 1040)
+        ]),
+        _: 3
+      }, 8, ["locale"]);
+    };
+  }
+});
+const MxTreeSelect_vue_vue_type_style_index_0_lang = "";
+module.exports = _sfc_main;

package/lib/components/treeselect/index.d.ts

@@ -0,0 +1,7 @@
+import MxTreeSelect from './MxTreeSelect.vue';
+declare module 'vue' {
+    interface GlobalComponents {
+        MxTreeSelect: typeof MxTreeSelect;
+    }
+}
+export default MxTreeSelect;

package/lib/components/treeselect/index.js

@@ -0,0 +1,6 @@
+"use strict";
+const MxTreeSelect = require("./MxTreeSelect.vue");
+MxTreeSelect.install = (app) => {
+  app.component(MxTreeSelect.__name, MxTreeSelect);
+};
+module.exports = MxTreeSelect;

package/lib/components/upload/MxUpload.css

@@ -0,0 +1,111 @@
+.mx-upload[data-v-ac1e4650] {
+  position: relative;
+}
+.mx-upload .mx-upload-btn .el-icon[data-v-ac1e4650] {
+  margin-right: 4px;
+}
+.mx-upload .mx-upload-tip[data-v-ac1e4650] {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.45);
+  line-height: 22px;
+  margin-top: 8px;
+}
+.mx-upload[data-v-ac1e4650] .el-upload-dragger {
+  --el-color-primary: #4a90e2;
+  --el-border-color: rgba(255, 255, 255, 0.2);
+  background-color: transparent;
+  padding: 40px 54px;
+  overflow: visible;
+}
+.mx-upload[data-v-ac1e4650] .el-upload-dragger .el-icon {
+  font-size: 48px;
+  color: #4a90e2;
+}
+.mx-upload[data-v-ac1e4650] .el-upload-dragger .mx-upload-text {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 24px;
+  margin-top: 12px;
+}
+.mx-upload[data-v-ac1e4650] .el-upload-dragger .mx-upload-tip {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.45);
+  line-height: 22px;
+  margin-top: 4px;
+}
+.mx-upload.mx-upload-disabled[data-v-ac1e4650] .el-upload-dragger,
+.mx-upload.mx-upload-disabled[data-v-ac1e4650] .el-upload-list--picture-card .el-upload--picture-card {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+.mx-upload.mx-upload-disabled[data-v-ac1e4650] .el-upload-dragger .el-icon,
+.mx-upload.mx-upload-disabled[data-v-ac1e4650] .el-upload-dragger .mx-upload-text,
+.mx-upload.mx-upload-disabled[data-v-ac1e4650] .el-upload-dragger .mx-upload-tip,
+.mx-upload.mx-upload-disabled[data-v-ac1e4650] .el-upload-list--picture-card .el-upload--picture-card .el-icon,
+.mx-upload.mx-upload-disabled[data-v-ac1e4650] .el-upload-list--picture-card .el-upload--picture-card .mx-upload-text,
+.mx-upload.mx-upload-disabled[data-v-ac1e4650] .el-upload-list--picture-card .el-upload--picture-card .mx-upload-tip {
+  color: rgba(255, 255, 255, 0.3);
+}
+.mx-upload[data-v-ac1e4650] .el-upload-list.el-upload-list--picture-card {
+  margin: 0 !important;
+}
+.mx-upload[data-v-ac1e4650] .el-upload-list.el-upload-list--picture-card .el-upload-list__item,
+.mx-upload[data-v-ac1e4650] .el-upload-list.el-upload-list--picture-card .el-upload--picture-card {
+  background-color: transparent;
+  border-color: rgba(255, 255, 255, 0.2);
+  margin: 0 16px 16px 0;
+  width: 104px;
+  height: 104px;
+}
+.mx-upload[data-v-ac1e4650] .el-upload-list.el-upload-list--picture-card .el-upload--picture-card {
+  flex-direction: column;
+}
+.mx-upload[data-v-ac1e4650] .el-upload-list.el-upload-list--picture-card .el-upload--picture-card:hover {
+  border-color: #4a90e2;
+}
+.mx-upload[data-v-ac1e4650] .el-upload-list.el-upload-list--picture-card .el-upload--picture-card .el-icon,
+.mx-upload[data-v-ac1e4650] .el-upload-list.el-upload-list--picture-card .el-upload--picture-card .mx-upload-text {
+  color: rgba(255, 255, 255, 0.65);
+}
+.mx-upload[data-v-ac1e4650] .el-upload-list.el-upload-list--picture-card .el-upload--picture-card .el-icon {
+  font-size: 24px;
+}
+.mx-upload[data-v-ac1e4650] .el-upload-list.el-upload-list--picture-card .el-upload--picture-card .mx-upload-text {
+  font-size: 14px;
+  margin-top: 10px;
+  line-height: 22px;
+}
+.mx-upload[data-v-ac1e4650] .el-upload-list.el-upload-list--picture-card + .mx-upload-tip {
+  margin-top: -8px;
+}
+.mx-upload[data-v-ac1e4650] .el-upload-list {
+  --el-text-color-secondary: rgba(255, 255, 255, 0.85);
+  padding-left: 0;
+  margin-top: 8px;
+}
+.mx-upload[data-v-ac1e4650] .el-upload-list .el-upload-list__item {
+  list-style: none;
+  margin-bottom: 8px;
+  --el-fill-color-light: rgba(255, 255, 255, 0.05);
+}
+.mx-upload .mx-error-msg[data-v-ac1e4650] {
+  text-align: left;
+  position: absolute;
+  left: 0;
+}
+.mx-upload .mx-error-msg > p[data-v-ac1e4650] {
+  font-size: 14px;
+  color: #e64242;
+  line-height: 22px;
+  margin-top: 0;
+  margin-bottom: 8px;
+}.mx-upload-preview.mx-dialog.el-dialog .el-dialog__header {
+  border-bottom: none;
+  padding: 0;
+  height: 24px;
+}
+.mx-upload-preview.mx-dialog.el-dialog .el-dialog__footer {
+  display: none;
+}
+.mx-upload-preview.mx-dialog.el-dialog img {
+  width: 100%;
+}

package/lib/components/upload/MxUpload.vue.d.ts

@@ -0,0 +1,111 @@
+import { FileSpec, UploadFiles } from './upload';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    accept: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    fileSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fileSpec: {
+        type: import("vue").PropType<FileSpec>;
+        default: undefined;
+    };
+    limit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fileList: {
+        type: import("vue").PropType<UploadFiles>;
+        default: () => [];
+    };
+    beforeRemove: {
+        type: import("vue").PropType<(uploadFile: import("element-plus").UploadFile, uploadFiles: import("element-plus").UploadFiles) => import("element-plus/es/utils/typescript").Awaitable<boolean>>;
+        default: null;
+    };
+    onChange: {
+        type: import("vue").PropType<(uploadFile: import("element-plus").UploadFile, uploadFiles: import("element-plus").UploadFiles) => void>;
+        default: null;
+    };
+    beforeUpload: {
+        type: import("vue").PropType<(rawFile: import("element-plus").UploadRawFile) => import("element-plus/es/utils/typescript").Awaitable<boolean | void | Blob | File | null | undefined>>;
+        default: null;
+    };
+    onPreview: {
+        type: import("vue").PropType<(uploadFile: import("element-plus").UploadFile) => void>;
+        default: null;
+    };
+    drag: {
+        type: BooleanConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    accept: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    fileSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fileSpec: {
+        type: import("vue").PropType<FileSpec>;
+        default: undefined;
+    };
+    limit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fileList: {
+        type: import("vue").PropType<UploadFiles>;
+        default: () => [];
+    };
+    beforeRemove: {
+        type: import("vue").PropType<(uploadFile: import("element-plus").UploadFile, uploadFiles: import("element-plus").UploadFiles) => import("element-plus/es/utils/typescript").Awaitable<boolean>>;
+        default: null;
+    };
+    onChange: {
+        type: import("vue").PropType<(uploadFile: import("element-plus").UploadFile, uploadFiles: import("element-plus").UploadFiles) => void>;
+        default: null;
+    };
+    beforeUpload: {
+        type: import("vue").PropType<(rawFile: import("element-plus").UploadRawFile) => import("element-plus/es/utils/typescript").Awaitable<boolean | void | Blob | File | null | undefined>>;
+        default: null;
+    };
+    onPreview: {
+        type: import("vue").PropType<(uploadFile: import("element-plus").UploadFile) => void>;
+        default: null;
+    };
+    drag: {
+        type: BooleanConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+}>>, {
+    onChange: (uploadFile: import("element-plus").UploadFile, uploadFiles: import("element-plus").UploadFiles) => void;
+    drag: boolean;
+    disabled: boolean;
+    beforeUpload: (rawFile: import("element-plus").UploadRawFile) => import("element-plus/es/utils/typescript").Awaitable<boolean | void | Blob | File | null | undefined>;
+    beforeRemove: (uploadFile: import("element-plus").UploadFile, uploadFiles: import("element-plus").UploadFiles) => import("element-plus/es/utils/typescript").Awaitable<boolean>;
+    onPreview: (uploadFile: import("element-plus").UploadFile) => void;
+    accept: unknown[];
+    fileList: UploadFiles;
+    limit: number;
+    fileSize: number;
+    fileSpec: FileSpec;
+}, {}>, {
+    default?(_: {}): any;
+    tip?(_: {}): any;
+    trigger?(_: {}): any;
+    file?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};