@wfrog/vc-ui 1.1.0 → 1.2.0

package/dist/es/components/dialog-upload-images/dialog-upload-images.mjs

@@ -1,20 +1,21 @@
 import './index.css'
-import { c as buildProps, d as definePropType, u as useNamespace, j as isFunction, h as isString, t as throwError, i as isArray, k as isNil, N as NOOP, l as isPlainObject, e as debugWarn } from '../../chunk/DRoyW749.mjs';
-import { v as vLoading } from '../../chunk/BHsNc7jl.mjs';
-import { E as ElButton } from '../../chunk/D0LB3gF-.mjs';
+import { c as buildProps, d as definePropType, u as useNamespace, j as isFunction, h as isString, t as throwError, i as isArray, k as isNil, N as NOOP, l as isPlainObject, e as debugWarn } from '../../chunk/CcKUdl3e.mjs';
+import { v as vLoading } from '../../chunk/DKpRXDRE.mjs';
+import { E as ElButton } from '../../chunk/CKbkzlkO.mjs';
 import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, unref, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, toDisplayString, createBlock, withCtx, resolveDynamicComponent, ref, TransitionGroup, Fragment, renderList, withKeys, withModifiers, createVNode, inject, shallowRef, watch, nextTick, onBeforeUnmount, provide, toRef, createSlots, mergeProps, isRef, withDirectives, createTextVNode } from 'vue';
 import Draggable from 'vuedraggable-es-fix';
 import { C as Component$1 } from '../dialog/dialog.mjs';
 import { C as Component$2 } from '../el-icon/el-icon.mjs';
-import { E as ElIcon } from '../../chunk/cPBw23yt.mjs';
+import { E as ElIcon } from '../../chunk/DEPZhJ0Z.mjs';
 import { WarningFilled, CircleCheck, CircleClose, Check, Close, Document, ZoomIn, Delete } from '@element-plus/icons-vue';
-import { _ as _export_sfc, w as withInstall } from '../../chunk/DTLPXrjb.mjs';
+import { _ as _export_sfc, w as withInstall } from '../../chunk/BTsEMnf_.mjs';
 import { m as mutable } from '../../chunk/B-rxnVJv.mjs';
-import { u as useLocale } from '../../chunk/Dk6Bx0KT.mjs';
-import { b as useFormDisabled } from '../../chunk/DXPWe_a5.mjs';
+import { u as useLocale } from '../../chunk/plK2vnjp.mjs';
+import { b as useFormDisabled } from '../../chunk/U13Qpiki.mjs';
+import { f as flatten } from '../../chunk/BDyXj_90.mjs';
 import { e as entriesOf } from '../../chunk/DVNTpOBR.mjs';
-import { c as cloneDeep } from '../../chunk/DouIsSPi.mjs';
-import { i as isEqual } from '../../chunk/BsLJxiSC.mjs';
+import { c as cloneDeep } from '../../chunk/CNILa-hz.mjs';
+import { i as isEqual } from '../../chunk/Dw-yyl2m.mjs';
 import { useVModel } from '@vueuse/core';
 import { _ as _export_sfc$1 } from '../../chunk/pcqpp-6-.mjs';
 
@@ -72,20 +73,25 @@ const progressProps = buildProps({
   }
 });
 
-const __default__$4 = defineComponent({
-  name: "ElProgress"
-});
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  ...__default__$4,
+const _hoisted_1$3 = ["aria-valuenow"];
+const _hoisted_2$3 = { viewBox: "0 0 100 100" };
+const _hoisted_3$1 = ["d", "stroke", "stroke-linecap", "stroke-width"];
+const _hoisted_4$1 = ["d", "stroke", "opacity", "stroke-linecap", "stroke-width"];
+const _hoisted_5$1 = { key: 0 };
+const _sfc_main$5 = defineComponent({
+  ...{
+    name: "ElProgress"
+  },
+  __name: "progress",
   props: progressProps,
   setup(__props) {
-    const props = __props;
     const STATUS_COLOR_MAP = {
       success: "#13ce66",
       exception: "#ff4949",
       warning: "#e6a23c",
       default: "#20a0ff"
     };
+    const props = __props;
     const ns = useNamespace("progress");
     const barStyle = computed(() => {
       const barStyle2 = {
@@ -100,10 +106,15 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }
       return barStyle2;
     });
-    const relativeStrokeWidth = computed(() => (props.strokeWidth / props.width * 100).toFixed(1));
+    const relativeStrokeWidth = computed(
+      () => (props.strokeWidth / props.width * 100).toFixed(1)
+    );
     const radius = computed(() => {
       if (["circle", "dashboard"].includes(props.type)) {
-        return Number.parseInt(`${50 - Number.parseFloat(relativeStrokeWidth.value) / 2}`, 10);
+        return Number.parseInt(
+          `${50 - Number.parseFloat(relativeStrokeWidth.value) / 2}`,
+          10
+        );
       }
       return 0;
     });
@@ -200,79 +211,119 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         "aria-valuemin": "0",
         "aria-valuemax": "100"
       }, [
-        _ctx.type === "line" ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: normalizeClass(unref(ns).b("bar"))
-        }, [
-          createElementVNode("div", {
-            class: normalizeClass(unref(ns).be("bar", "outer")),
-            style: normalizeStyle({ height: `${_ctx.strokeWidth}px` })
-          }, [
-            createElementVNode("div", {
-              class: normalizeClass([
-                unref(ns).be("bar", "inner"),
-                { [unref(ns).bem("bar", "inner", "indeterminate")]: _ctx.indeterminate },
-                { [unref(ns).bem("bar", "inner", "striped")]: _ctx.striped },
-                { [unref(ns).bem("bar", "inner", "striped-flow")]: _ctx.stripedFlow }
-              ]),
-              style: normalizeStyle(unref(barStyle))
-            }, [
-              (_ctx.showText || _ctx.$slots.default) && _ctx.textInside ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                class: normalizeClass(unref(ns).be("bar", "innerText"))
-              }, [
-                renderSlot(_ctx.$slots, "default", { percentage: _ctx.percentage }, () => [
-                  createElementVNode("span", null, toDisplayString(unref(content)), 1)
-                ])
-              ], 2)) : createCommentVNode("v-if", true)
-            ], 6)
-          ], 6)
-        ], 2)) : (openBlock(), createElementBlock("div", {
-          key: 1,
-          class: normalizeClass(unref(ns).b("circle")),
-          style: normalizeStyle({ height: `${_ctx.width}px`, width: `${_ctx.width}px` })
-        }, [
-          (openBlock(), createElementBlock("svg", { viewBox: "0 0 100 100" }, [
-            createElementVNode("path", {
-              class: normalizeClass(unref(ns).be("circle", "track")),
-              d: unref(trackPath),
-              stroke: `var(${unref(ns).cssVarName("fill-color-light")}, #e5e9f2)`,
-              "stroke-linecap": _ctx.strokeLinecap,
-              "stroke-width": unref(relativeStrokeWidth),
-              fill: "none",
-              style: normalizeStyle(unref(trailPathStyle))
-            }, null, 14, ["d", "stroke", "stroke-linecap", "stroke-width"]),
-            createElementVNode("path", {
-              class: normalizeClass(unref(ns).be("circle", "path")),
-              d: unref(trackPath),
-              stroke: unref(stroke),
-              fill: "none",
-              opacity: _ctx.percentage ? 1 : 0,
-              "stroke-linecap": _ctx.strokeLinecap,
-              "stroke-width": unref(relativeStrokeWidth),
-              style: normalizeStyle(unref(circlePathStyle))
-            }, null, 14, ["d", "stroke", "opacity", "stroke-linecap", "stroke-width"])
-          ]))
-        ], 6)),
-        (_ctx.showText || _ctx.$slots.default) && !_ctx.textInside ? (openBlock(), createElementBlock("div", {
-          key: 2,
-          class: normalizeClass(unref(ns).e("text")),
-          style: normalizeStyle({ fontSize: `${unref(progressTextSize)}px` })
-        }, [
-          renderSlot(_ctx.$slots, "default", { percentage: _ctx.percentage }, () => [
-            !_ctx.status ? (openBlock(), createElementBlock("span", { key: 0 }, toDisplayString(unref(content)), 1)) : (openBlock(), createBlock(unref(ElIcon), { key: 1 }, {
-              default: withCtx(() => [
-                (openBlock(), createBlock(resolveDynamicComponent(unref(statusIcon))))
-              ]),
-              _: 1
-            }))
-          ])
-        ], 6)) : createCommentVNode("v-if", true)
-      ], 10, ["aria-valuenow"]);
+        _ctx.type === "line" ? (openBlock(), createElementBlock(
+          "div",
+          {
+            key: 0,
+            class: normalizeClass(unref(ns).b("bar"))
+          },
+          [
+            createElementVNode(
+              "div",
+              {
+                class: normalizeClass(unref(ns).be("bar", "outer")),
+                style: normalizeStyle({ height: `${_ctx.strokeWidth}px` })
+              },
+              [
+                createElementVNode(
+                  "div",
+                  {
+                    class: normalizeClass([
+                      unref(ns).be("bar", "inner"),
+                      { [unref(ns).bem("bar", "inner", "indeterminate")]: _ctx.indeterminate },
+                      { [unref(ns).bem("bar", "inner", "striped")]: _ctx.striped },
+                      { [unref(ns).bem("bar", "inner", "striped-flow")]: _ctx.stripedFlow }
+                    ]),
+                    style: normalizeStyle(barStyle.value)
+                  },
+                  [
+                    (_ctx.showText || _ctx.$slots.default) && _ctx.textInside ? (openBlock(), createElementBlock(
+                      "div",
+                      {
+                        key: 0,
+                        class: normalizeClass(unref(ns).be("bar", "innerText"))
+                      },
+                      [
+                        renderSlot(_ctx.$slots, "default", { percentage: _ctx.percentage }, () => [
+                          createElementVNode(
+                            "span",
+                            null,
+                            toDisplayString(content.value),
+                            1
+                          )
+                        ])
+                      ],
+                      2
+                    )) : createCommentVNode("v-if", true)
+                  ],
+                  6
+                )
+              ],
+              6
+            )
+          ],
+          2
+        )) : (openBlock(), createElementBlock(
+          "div",
+          {
+            key: 1,
+            class: normalizeClass(unref(ns).b("circle")),
+            style: normalizeStyle({ height: `${_ctx.width}px`, width: `${_ctx.width}px` })
+          },
+          [
+            (openBlock(), createElementBlock("svg", _hoisted_2$3, [
+              createElementVNode("path", {
+                class: normalizeClass(unref(ns).be("circle", "track")),
+                d: trackPath.value,
+                stroke: `var(${unref(ns).cssVarName("fill-color-light")}, #e5e9f2)`,
+                "stroke-linecap": _ctx.strokeLinecap,
+                "stroke-width": relativeStrokeWidth.value,
+                fill: "none",
+                style: normalizeStyle(trailPathStyle.value)
+              }, null, 14, _hoisted_3$1),
+              createElementVNode("path", {
+                class: normalizeClass(unref(ns).be("circle", "path")),
+                d: trackPath.value,
+                stroke: stroke.value,
+                fill: "none",
+                opacity: _ctx.percentage ? 1 : 0,
+                "stroke-linecap": _ctx.strokeLinecap,
+                "stroke-width": relativeStrokeWidth.value,
+                style: normalizeStyle(circlePathStyle.value)
+              }, null, 14, _hoisted_4$1)
+            ]))
+          ],
+          6
+        )),
+        (_ctx.showText || _ctx.$slots.default) && !_ctx.textInside ? (openBlock(), createElementBlock(
+          "div",
+          {
+            key: 2,
+            class: normalizeClass(unref(ns).e("text")),
+            style: normalizeStyle({ fontSize: `${progressTextSize.value}px` })
+          },
+          [
+            renderSlot(_ctx.$slots, "default", { percentage: _ctx.percentage }, () => [
+              !_ctx.status ? (openBlock(), createElementBlock(
+                "span",
+                _hoisted_5$1,
+                toDisplayString(content.value),
+                1
+              )) : (openBlock(), createBlock(unref(ElIcon), { key: 1 }, {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(statusIcon.value)))
+                ]),
+                _: 1
+              }))
+            ])
+          ],
+          6
+        )) : createCommentVNode("v-if", true)
+      ], 10, _hoisted_1$3);
     };
   }
 });
-var Progress = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__file", "progress.vue"]]);
+var Progress = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/progress/src/progress.vue"]]);
 
 const ElProgress = withInstall(Progress);
 
@@ -414,7 +465,8 @@ const uploadBaseProps = buildProps({
     type: Boolean,
     default: void 0
   },
-  limit: Number
+  limit: Number,
+  directory: Boolean
 });
 const uploadProps = buildProps({
   ...uploadBaseProps,
@@ -484,15 +536,22 @@ const uploadListEmits = {
   remove: (file) => !!file
 };
 
-const __default__$3 = defineComponent({
-  name: "ElUploadList"
-});
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  ...__default__$3,
+const _hoisted_1$2 = ["tabindex", "aria-disabled", "onKeydown"];
+const _hoisted_2$2 = ["src", "crossorigin"];
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = ["title"];
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = ["onClick"];
+const _sfc_main$4 = defineComponent({
+  ...{
+    name: "ElUploadList"
+  },
+  __name: "upload-list",
   props: uploadListProps,
   emits: uploadListEmits,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const { t } = useLocale();
     const nsUpload = useNamespace("upload");
     const nsIcon = useNamespace("icon");
@@ -510,139 +569,164 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(TransitionGroup, {
         tag: "ul",
-        class: normalizeClass(unref(containerKls)),
+        class: normalizeClass(containerKls.value),
         name: unref(nsList).b()
       }, {
         default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.files, (file, index) => {
-            return openBlock(), createElementBlock("li", {
-              key: file.uid || file.name,
-              class: normalizeClass([
-                unref(nsUpload).be("list", "item"),
-                unref(nsUpload).is(file.status),
-                { focusing: focusing.value }
-              ]),
-              tabindex: unref(disabled) ? void 0 : 0,
-              "aria-disabled": unref(disabled),
-              role: "button",
-              onKeydown: withKeys(($event) => !unref(disabled) && handleRemove(file), ["delete"]),
-              onFocus: ($event) => focusing.value = true,
-              onBlur: ($event) => focusing.value = false,
-              onClick: ($event) => focusing.value = false
-            }, [
-              renderSlot(_ctx.$slots, "default", {
-                file,
-                index
-              }, () => [
-                _ctx.listType === "picture" || file.status !== "uploading" && _ctx.listType === "picture-card" ? (openBlock(), createElementBlock("img", {
-                  key: 0,
-                  class: normalizeClass(unref(nsUpload).be("list", "item-thumbnail")),
-                  src: file.url,
-                  crossorigin: _ctx.crossorigin,
-                  alt: ""
-                }, null, 10, ["src", "crossorigin"])) : createCommentVNode("v-if", true),
-                file.status === "uploading" || _ctx.listType !== "picture-card" ? (openBlock(), createElementBlock("div", {
-                  key: 1,
-                  class: normalizeClass(unref(nsUpload).be("list", "item-info"))
-                }, [
-                  createElementVNode("a", {
-                    class: normalizeClass(unref(nsUpload).be("list", "item-name")),
-                    onClick: withModifiers(($event) => _ctx.handlePreview(file), ["prevent"])
-                  }, [
-                    createVNode(unref(ElIcon), {
-                      class: normalizeClass(unref(nsIcon).m("document"))
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(unref(Document))
-                      ]),
-                      _: 1
-                    }, 8, ["class"]),
-                    createElementVNode("span", {
-                      class: normalizeClass(unref(nsUpload).be("list", "item-file-name")),
-                      title: file.name
-                    }, toDisplayString(file.name), 11, ["title"])
-                  ], 10, ["onClick"]),
-                  file.status === "uploading" ? (openBlock(), createBlock(unref(ElProgress), {
-                    key: 0,
-                    type: _ctx.listType === "picture-card" ? "circle" : "line",
-                    "stroke-width": _ctx.listType === "picture-card" ? 6 : 2,
-                    percentage: Number(file.percentage),
-                    style: normalizeStyle(_ctx.listType === "picture-card" ? "" : "margin-top: 0.5rem")
-                  }, null, 8, ["type", "stroke-width", "percentage", "style"])) : createCommentVNode("v-if", true)
-                ], 2)) : createCommentVNode("v-if", true),
-                createElementVNode("label", {
-                  class: normalizeClass(unref(nsUpload).be("list", "item-status-label"))
-                }, [
-                  _ctx.listType === "text" ? (openBlock(), createBlock(unref(ElIcon), {
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(_ctx.files, (file, index) => {
+              return openBlock(), createElementBlock("li", {
+                key: file.uid || file.name,
+                class: normalizeClass([
+                  unref(nsUpload).be("list", "item"),
+                  unref(nsUpload).is(file.status),
+                  { focusing: focusing.value }
+                ]),
+                tabindex: unref(disabled) ? void 0 : 0,
+                "aria-disabled": unref(disabled),
+                role: "button",
+                onKeydown: withKeys(($event) => !unref(disabled) && handleRemove(file), ["delete"]),
+                onFocus: _cache[0] || (_cache[0] = ($event) => focusing.value = true),
+                onBlur: _cache[1] || (_cache[1] = ($event) => focusing.value = false),
+                onClick: _cache[2] || (_cache[2] = ($event) => focusing.value = false)
+              }, [
+                renderSlot(_ctx.$slots, "default", {
+                  file,
+                  index
+                }, () => [
+                  _ctx.listType === "picture" || file.status !== "uploading" && _ctx.listType === "picture-card" ? (openBlock(), createElementBlock("img", {
                     key: 0,
-                    class: normalizeClass([unref(nsIcon).m("upload-success"), unref(nsIcon).m("circle-check")])
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(CircleCheck))
-                    ]),
-                    _: 1
-                  }, 8, ["class"])) : ["picture-card", "picture"].includes(_ctx.listType) ? (openBlock(), createBlock(unref(ElIcon), {
-                    key: 1,
-                    class: normalizeClass([unref(nsIcon).m("upload-success"), unref(nsIcon).m("check")])
+                    class: normalizeClass(unref(nsUpload).be("list", "item-thumbnail")),
+                    src: file.url,
+                    crossorigin: _ctx.crossorigin,
+                    alt: ""
+                  }, null, 10, _hoisted_2$2)) : createCommentVNode("v-if", true),
+                  file.status === "uploading" || _ctx.listType !== "picture-card" ? (openBlock(), createElementBlock(
+                    "div",
+                    {
+                      key: 1,
+                      class: normalizeClass(unref(nsUpload).be("list", "item-info"))
+                    },
+                    [
+                      createElementVNode("a", {
+                        class: normalizeClass(unref(nsUpload).be("list", "item-name")),
+                        onClick: withModifiers(($event) => _ctx.handlePreview(file), ["prevent"])
+                      }, [
+                        createVNode(unref(ElIcon), {
+                          class: normalizeClass(unref(nsIcon).m("document"))
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(unref(Document))
+                          ]),
+                          _: 1
+                        }, 8, ["class"]),
+                        createElementVNode("span", {
+                          class: normalizeClass(unref(nsUpload).be("list", "item-file-name")),
+                          title: file.name
+                        }, toDisplayString(file.name), 11, _hoisted_4)
+                      ], 10, _hoisted_3),
+                      file.status === "uploading" ? (openBlock(), createBlock(unref(ElProgress), {
+                        key: 0,
+                        type: _ctx.listType === "picture-card" ? "circle" : "line",
+                        "stroke-width": _ctx.listType === "picture-card" ? 6 : 2,
+                        percentage: Number(file.percentage),
+                        style: normalizeStyle(_ctx.listType === "picture-card" ? "" : "margin-top: 0.5rem")
+                      }, null, 8, ["type", "stroke-width", "percentage", "style"])) : createCommentVNode("v-if", true)
+                    ],
+                    2
+                  )) : createCommentVNode("v-if", true),
+                  createElementVNode(
+                    "label",
+                    {
+                      class: normalizeClass(unref(nsUpload).be("list", "item-status-label"))
+                    },
+                    [
+                      _ctx.listType === "text" ? (openBlock(), createBlock(unref(ElIcon), {
+                        key: 0,
+                        class: normalizeClass([unref(nsIcon).m("upload-success"), unref(nsIcon).m("circle-check")])
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(CircleCheck))
+                        ]),
+                        _: 1
+                      }, 8, ["class"])) : ["picture-card", "picture"].includes(_ctx.listType) ? (openBlock(), createBlock(unref(ElIcon), {
+                        key: 1,
+                        class: normalizeClass([unref(nsIcon).m("upload-success"), unref(nsIcon).m("check")])
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(Check))
+                        ]),
+                        _: 1
+                      }, 8, ["class"])) : createCommentVNode("v-if", true)
+                    ],
+                    2
+                  ),
+                  !unref(disabled) ? (openBlock(), createBlock(unref(ElIcon), {
+                    key: 2,
+                    class: normalizeClass(unref(nsIcon).m("close")),
+                    onClick: ($event) => handleRemove(file)
                   }, {
                     default: withCtx(() => [
-                      createVNode(unref(Check))
+                      createVNode(unref(Close))
                     ]),
                     _: 1
-                  }, 8, ["class"])) : createCommentVNode("v-if", true)
-                ], 2),
-                !unref(disabled) ? (openBlock(), createBlock(unref(ElIcon), {
-                  key: 2,
-                  class: normalizeClass(unref(nsIcon).m("close")),
-                  onClick: ($event) => handleRemove(file)
-                }, {
-                  default: withCtx(() => [
-                    createVNode(unref(Close))
-                  ]),
-                  _: 2
-                }, 1032, ["class", "onClick"])) : createCommentVNode("v-if", true),
-                createCommentVNode(" Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn"),
-                createCommentVNode(" This is a bug which needs to be fixed "),
-                createCommentVNode(" TODO: Fix the incorrect navigation interaction "),
-                !unref(disabled) ? (openBlock(), createElementBlock("i", {
-                  key: 3,
-                  class: normalizeClass(unref(nsIcon).m("close-tip"))
-                }, toDisplayString(unref(t)("el.upload.deleteTip")), 3)) : createCommentVNode("v-if", true),
-                _ctx.listType === "picture-card" ? (openBlock(), createElementBlock("span", {
-                  key: 4,
-                  class: normalizeClass(unref(nsUpload).be("list", "item-actions"))
-                }, [
-                  createElementVNode("span", {
-                    class: normalizeClass(unref(nsUpload).be("list", "item-preview")),
-                    onClick: ($event) => _ctx.handlePreview(file)
-                  }, [
-                    createVNode(unref(ElIcon), {
-                      class: normalizeClass(unref(nsIcon).m("zoom-in"))
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(unref(ZoomIn))
-                      ]),
-                      _: 1
-                    }, 8, ["class"])
-                  ], 10, ["onClick"]),
-                  !unref(disabled) ? (openBlock(), createElementBlock("span", {
-                    key: 0,
-                    class: normalizeClass(unref(nsUpload).be("list", "item-delete")),
-                    onClick: ($event) => handleRemove(file)
-                  }, [
-                    createVNode(unref(ElIcon), {
-                      class: normalizeClass(unref(nsIcon).m("delete"))
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(unref(Delete))
-                      ]),
-                      _: 1
-                    }, 8, ["class"])
-                  ], 10, ["onClick"])) : createCommentVNode("v-if", true)
-                ], 2)) : createCommentVNode("v-if", true)
-              ])
-            ], 42, ["tabindex", "aria-disabled", "onKeydown", "onFocus", "onBlur", "onClick"]);
-          }), 128)),
+                  }, 8, ["class", "onClick"])) : createCommentVNode("v-if", true),
+                  createCommentVNode(" Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn"),
+                  createCommentVNode(" This is a bug which needs to be fixed "),
+                  createCommentVNode(" TODO: Fix the incorrect navigation interaction "),
+                  !unref(disabled) ? (openBlock(), createElementBlock(
+                    "i",
+                    {
+                      key: 3,
+                      class: normalizeClass(unref(nsIcon).m("close-tip"))
+                    },
+                    toDisplayString(unref(t)("el.upload.deleteTip")),
+                    3
+                  )) : createCommentVNode("v-if", true),
+                  _ctx.listType === "picture-card" ? (openBlock(), createElementBlock(
+                    "span",
+                    {
+                      key: 4,
+                      class: normalizeClass(unref(nsUpload).be("list", "item-actions"))
+                    },
+                    [
+                      createElementVNode("span", {
+                        class: normalizeClass(unref(nsUpload).be("list", "item-preview")),
+                        onClick: ($event) => _ctx.handlePreview(file)
+                      }, [
+                        createVNode(unref(ElIcon), {
+                          class: normalizeClass(unref(nsIcon).m("zoom-in"))
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(unref(ZoomIn))
+                          ]),
+                          _: 1
+                        }, 8, ["class"])
+                      ], 10, _hoisted_5),
+                      !unref(disabled) ? (openBlock(), createElementBlock("span", {
+                        key: 0,
+                        class: normalizeClass(unref(nsUpload).be("list", "item-delete")),
+                        onClick: ($event) => handleRemove(file)
+                      }, [
+                        createVNode(unref(ElIcon), {
+                          class: normalizeClass(unref(nsIcon).m("delete"))
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(unref(Delete))
+                          ]),
+                          _: 1
+                        }, 8, ["class"])
+                      ], 10, _hoisted_6)) : createCommentVNode("v-if", true)
+                    ],
+                    2
+                  )) : createCommentVNode("v-if", true)
+                ])
+              ], 42, _hoisted_1$2);
+            }),
+            128
+          )),
           renderSlot(_ctx.$slots, "append")
         ]),
         _: 3
@@ -650,41 +734,92 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var UploadList = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__file", "upload-list.vue"]]);
+var UploadList = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/upload/src/upload-list.vue"]]);
 
 const uploadDraggerProps = buildProps({
   disabled: {
     type: Boolean,
     default: void 0
-  }
+  },
+  directory: Boolean
 });
 const uploadDraggerEmits = {
   file: (file) => isArray(file)
 };
 
 const COMPONENT_NAME = "ElUploadDrag";
-const __default__$2 = defineComponent({
-  name: COMPONENT_NAME
-});
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  ...__default__$2,
+const _sfc_main$3 = defineComponent({
+  ...{
+    name: COMPONENT_NAME
+  },
+  __name: "upload-dragger",
   props: uploadDraggerProps,
   emits: uploadDraggerEmits,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
     const uploaderContext = inject(uploadContextKey);
     if (!uploaderContext) {
-      throwError(COMPONENT_NAME, "usage: <el-upload><el-upload-dragger /></el-upload>");
+      throwError(
+        COMPONENT_NAME,
+        "usage: <el-upload><el-upload-dragger /></el-upload>"
+      );
     }
     const ns = useNamespace("upload");
     const dragover = ref(false);
     const disabled = useFormDisabled();
-    const onDrop = (e) => {
+    const getFile = (entry) => {
+      return new Promise((resolve, reject) => entry.file(resolve, reject));
+    };
+    const getAllFiles = async (entry) => {
+      try {
+        if (entry.isFile) {
+          const file = await getFile(
+            entry
+          );
+          file.isDirectory = false;
+          return [file];
+        }
+        if (entry.isDirectory) {
+          const dirReader = entry.createReader();
+          const getEntries = () => {
+            return new Promise(
+              (resolve, reject) => dirReader.readEntries(resolve, reject)
+            );
+          };
+          const entries = [];
+          let readEntries = await getEntries();
+          while (readEntries.length > 0) {
+            entries.push(...readEntries);
+            readEntries = await getEntries();
+          }
+          const filePromises = entries.map(
+            (entry2) => getAllFiles(entry2).catch(() => [])
+          );
+          const files = await Promise.all(filePromises);
+          return flatten(files);
+        }
+      } catch (e) {
+        return [];
+      }
+      return [];
+    };
+    const onDrop = async (e) => {
       if (disabled.value)
         return;
       dragover.value = false;
       e.stopPropagation();
       const files = Array.from(e.dataTransfer.files);
       const items = e.dataTransfer.items || [];
+      if (props.directory) {
+        const entries = Array.from(items).map((item) => {
+          var _a;
+          return (_a = item == null ? void 0 : item.webkitGetAsEntry) == null ? void 0 : _a.call(item);
+        }).filter((entry) => entry);
+        const allFiles = await Promise.all(entries.map(getAllFiles));
+        emit("file", flatten(allFiles));
+        return;
+      }
       files.forEach((file, index) => {
         var _a;
         const item = items[index];
@@ -704,18 +839,23 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         dragover.value = false;
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([unref(ns).b("dragger"), unref(ns).is("dragover", dragover.value)]),
-        onDrop: withModifiers(onDrop, ["prevent"]),
-        onDragover: withModifiers(onDragover, ["prevent"]),
-        onDragleave: withModifiers(onDragleave, ["prevent"])
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 42, ["onDrop", "onDragover", "onDragleave"]);
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass([unref(ns).b("dragger"), unref(ns).is("dragover", dragover.value)]),
+          onDrop: withModifiers(onDrop, ["prevent"]),
+          onDragover: withModifiers(onDragover, ["prevent"]),
+          onDragleave: withModifiers(onDragleave, ["prevent"])
+        },
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        34
+      );
     };
   }
 });
-var UploadDragger = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "upload-dragger.vue"]]);
+var UploadDragger = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/upload/src/upload-dragger.vue"]]);
 
 const uploadContentProps = buildProps({
   ...uploadBaseProps,
@@ -732,7 +872,9 @@ const uploadContentProps = buildProps({
     default: NOOP
   },
   onSuccess: {
-    type: definePropType(Function),
+    type: definePropType(
+      Function
+    ),
     default: NOOP
   },
   onProgress: {
@@ -749,18 +891,22 @@ const uploadContentProps = buildProps({
   }
 });
 
-const __default__$1 = defineComponent({
-  name: "ElUploadContent",
-  inheritAttrs: false
-});
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
+const _hoisted_1$1 = ["tabindex", "aria-disabled", "onKeydown"];
+const _hoisted_2$1 = ["name", "disabled", "multiple", "accept", "webkitdirectory"];
+const _sfc_main$2 = defineComponent({
+  ...{
+    name: "ElUploadContent",
+    inheritAttrs: false
+  },
+  __name: "upload-content",
   props: uploadContentProps,
-  setup(__props, { expose }) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const ns = useNamespace("upload");
     const disabled = useFormDisabled();
-    const requests = shallowRef({});
+    const requests = shallowRef(
+      {}
+    );
     const inputRef = shallowRef();
     const uploadFiles = (files) => {
       if (files.length === 0)
@@ -813,9 +959,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           });
         }
       }
-      doUpload(Object.assign(file, {
-        uid: rawFile.uid
-      }), beforeData);
+      doUpload(
+        Object.assign(file, {
+          uid: rawFile.uid
+        }),
+        beforeData
+      );
     };
     const resolveData = async (data, rawFile) => {
       if (isFunction(data)) {
@@ -885,14 +1034,16 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       handleClick();
     };
     const abort = (file) => {
-      const _reqs = entriesOf(requests.value).filter(file ? ([uid]) => String(file.uid) === uid : () => true);
+      const _reqs = entriesOf(requests.value).filter(
+        file ? ([uid]) => String(file.uid) === uid : () => true
+      );
       _reqs.forEach(([uid, req]) => {
         if (req instanceof XMLHttpRequest)
           req.abort();
         delete requests.value[uid];
       });
     };
-    expose({
+    __expose({
       abort,
       upload
     });
@@ -913,13 +1064,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         _ctx.drag ? (openBlock(), createBlock(UploadDragger, {
           key: 0,
           disabled: unref(disabled),
+          directory: _ctx.directory,
           onFile: uploadFiles
         }, {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "default")
           ]),
           _: 3
-        }, 8, ["disabled"])) : renderSlot(_ctx.$slots, "default", { key: 1 }),
+        }, 8, ["disabled", "directory"])) : renderSlot(_ctx.$slots, "default", { key: 1 }),
         createElementVNode("input", {
           ref_key: "inputRef",
           ref: inputRef,
@@ -928,16 +1080,17 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           disabled: unref(disabled),
           multiple: _ctx.multiple,
           accept: _ctx.accept,
+          webkitdirectory: _ctx.directory,
           type: "file",
           onChange: handleChange,
-          onClick: withModifiers(() => {
-          }, ["stop"])
-        }, null, 42, ["name", "disabled", "multiple", "accept", "onClick"])
-      ], 42, ["tabindex", "aria-disabled", "onKeydown"]);
+          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+          }, ["stop"]))
+        }, null, 42, _hoisted_2$1)
+      ], 42, _hoisted_1$1);
     };
   }
 });
-var UploadContent = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "upload-content.vue"]]);
+var UploadContent = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/upload/src/upload-content.vue"]]);
 
 const SCOPE = "ElUpload";
 const revokeFileObjectURL = (file) => {
@@ -947,17 +1100,26 @@ const revokeFileObjectURL = (file) => {
   }
 };
 const useHandlers = (props, uploadRef) => {
-  const uploadFiles = useVModel(props, "fileList", void 0, { passive: true });
+  const uploadFiles = useVModel(
+    props,
+    "fileList",
+    void 0,
+    { passive: true }
+  );
   const getFile = (rawFile) => uploadFiles.value.find((file) => file.uid === rawFile.uid);
   function abort(file) {
     var _a;
     (_a = uploadRef.value) == null ? void 0 : _a.abort(file);
   }
   function clearFiles(states = ["ready", "uploading", "success", "fail"]) {
-    uploadFiles.value = uploadFiles.value.filter((row) => !states.includes(row.status));
+    uploadFiles.value = uploadFiles.value.filter(
+      (row) => !states.includes(row.status)
+    );
   }
   function removeFile(file) {
-    uploadFiles.value = uploadFiles.value.filter((uploadFile) => uploadFile.uid !== file.uid);
+    uploadFiles.value = uploadFiles.value.filter(
+      (uploadFile) => uploadFile.uid !== file.uid
+    );
   }
   const emitChange = (file) => {
     nextTick(() => props.onChange(file, uploadFiles.value));
@@ -1035,28 +1197,35 @@ const useHandlers = (props, uploadRef) => {
       return raw && ((_a = uploadRef.value) == null ? void 0 : _a.upload(raw));
     });
   }
-  watch(() => props.listType, (val) => {
-    if (val !== "picture-card" && val !== "picture") {
-      return;
-    }
-    uploadFiles.value = uploadFiles.value.map((file) => {
-      const { raw, url } = file;
-      if (!url && raw) {
-        try {
-          file.url = URL.createObjectURL(raw);
-        } catch (err) {
-          props.onError(err, file, uploadFiles.value);
-        }
+  watch(
+    () => props.listType,
+    (val) => {
+      if (val !== "picture-card" && val !== "picture") {
+        return;
       }
-      return file;
-    });
-  });
-  watch(uploadFiles, (files) => {
-    for (const file of files) {
-      file.uid || (file.uid = genFileId());
-      file.status || (file.status = "success");
+      uploadFiles.value = uploadFiles.value.map((file) => {
+        const { raw, url } = file;
+        if (!url && raw) {
+          try {
+            file.url = URL.createObjectURL(raw);
+          } catch (err) {
+            props.onError(err, file, uploadFiles.value);
+          }
+        }
+        return file;
+      });
     }
-  }, { immediate: true, deep: true });
+  );
+  watch(
+    uploadFiles,
+    (files) => {
+      for (const file of files) {
+        file.uid || (file.uid = genFileId());
+        file.status || (file.status = "success");
+      }
+    },
+    { immediate: true, deep: true }
+  );
   return {
     uploadFiles,
     abort,
@@ -1071,13 +1240,13 @@ const useHandlers = (props, uploadRef) => {
   };
 };
 
-const __default__ = defineComponent({
-  name: "ElUpload"
-});
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__,
+const _sfc_main$1 = defineComponent({
+  ...{
+    name: "ElUpload"
+  },
+  __name: "upload",
   props: uploadProps,
-  setup(__props, { expose }) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const disabled = useFormDisabled();
     const uploadRef = shallowRef();
@@ -1109,7 +1278,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     provide(uploadContextKey, {
       accept: toRef(props, "accept")
     });
-    expose({
+    __expose({
       abort,
       submit,
       clearFiles,
@@ -1118,7 +1287,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        unref(isPictureCard) && _ctx.showFileList ? (openBlock(), createBlock(UploadList, {
+        isPictureCard.value && _ctx.showFileList ? (openBlock(), createBlock(UploadList, {
           key: 0,
           disabled: unref(disabled),
           "list-type": _ctx.listType,
@@ -1128,16 +1297,21 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           onRemove: unref(handleRemove)
         }, createSlots({
           append: withCtx(() => [
-            createVNode(UploadContent, mergeProps({
-              ref_key: "uploadRef",
-              ref: uploadRef
-            }, unref(uploadContentProps)), {
-              default: withCtx(() => [
-                _ctx.$slots.trigger ? renderSlot(_ctx.$slots, "trigger", { key: 0 }) : createCommentVNode("v-if", true),
-                !_ctx.$slots.trigger && _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 1 }) : createCommentVNode("v-if", true)
-              ]),
-              _: 3
-            }, 16)
+            createVNode(
+              UploadContent,
+              mergeProps({
+                ref_key: "uploadRef",
+                ref: uploadRef
+              }, uploadContentProps.value),
+              {
+                default: withCtx(() => [
+                  _ctx.$slots.trigger ? renderSlot(_ctx.$slots, "trigger", { key: 0 }) : createCommentVNode("v-if", true),
+                  !_ctx.$slots.trigger && _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 1 }) : createCommentVNode("v-if", true)
+                ]),
+                _: 3
+              },
+              16
+            )
           ]),
           _: 2
         }, [
@@ -1148,23 +1322,29 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 file,
                 index
               })
-            ])
+            ]),
+            key: "0"
           } : void 0
         ]), 1032, ["disabled", "list-type", "files", "crossorigin", "handle-preview", "onRemove"])) : createCommentVNode("v-if", true),
-        !unref(isPictureCard) || unref(isPictureCard) && !_ctx.showFileList ? (openBlock(), createBlock(UploadContent, mergeProps({
-          key: 1,
-          ref_key: "uploadRef",
-          ref: uploadRef
-        }, unref(uploadContentProps)), {
-          default: withCtx(() => [
-            _ctx.$slots.trigger ? renderSlot(_ctx.$slots, "trigger", { key: 0 }) : createCommentVNode("v-if", true),
-            !_ctx.$slots.trigger && _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 1 }) : createCommentVNode("v-if", true)
-          ]),
-          _: 3
-        }, 16)) : createCommentVNode("v-if", true),
+        !isPictureCard.value || isPictureCard.value && !_ctx.showFileList ? (openBlock(), createBlock(
+          UploadContent,
+          mergeProps({
+            key: 1,
+            ref_key: "uploadRef",
+            ref: uploadRef
+          }, uploadContentProps.value),
+          {
+            default: withCtx(() => [
+              _ctx.$slots.trigger ? renderSlot(_ctx.$slots, "trigger", { key: 0 }) : createCommentVNode("v-if", true),
+              !_ctx.$slots.trigger && _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 1 }) : createCommentVNode("v-if", true)
+            ]),
+            _: 3
+          },
+          16
+        )) : createCommentVNode("v-if", true),
         _ctx.$slots.trigger ? renderSlot(_ctx.$slots, "default", { key: 2 }) : createCommentVNode("v-if", true),
         renderSlot(_ctx.$slots, "tip"),
-        !unref(isPictureCard) && _ctx.showFileList ? (openBlock(), createBlock(UploadList, {
+        !isPictureCard.value && _ctx.showFileList ? (openBlock(), createBlock(UploadList, {
           key: 3,
           disabled: unref(disabled),
           "list-type": _ctx.listType,
@@ -1182,14 +1362,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 file,
                 index
               })
-            ])
+            ]),
+            key: "0"
           } : void 0
         ]), 1032, ["disabled", "list-type", "files", "crossorigin", "handle-preview", "onRemove"])) : createCommentVNode("v-if", true)
       ]);
     };
   }
 });
-var Upload = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "upload.vue"]]);
+var Upload = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/upload/src/upload.vue"]]);
 
 const ElUpload = withInstall(Upload);