ele-admin-plus 1.5.1-beta.3 → 1.6.0-beta.1

package/es/ele-chat/components/chat-conversation.d.ts

@@ -0,0 +1,51 @@
+import { PropType } from 'vue';
+import { DropdownItem } from '../../ele-dropdown/types';
+import { ConversationItem, ConversationDropdownItems, ChatConversationSlots } from '../types';
+
+declare function __VLS_template(): Readonly<ChatConversationSlots> & ChatConversationSlots;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** 对话 */
+    item: {
+        type: PropType<ConversationItem>;
+        required: true;
+    };
+    /** 对话列表选中 */
+    active: PropType<string | number>;
+    /** 对话列表展开 */
+    expandedKeys: PropType<Array<string | number>>;
+    /** 下拉菜单数据 */
+    dropdownItems: PropType<ConversationDropdownItems>;
+    /** 当前打开下拉菜单的对话值 */
+    dropdownOpenKey: PropType<string | number>;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    itemClick: (_item: ConversationItem, _e: MouseEvent) => void;
+    itemMoreClick: (_item: ConversationItem, _dropdownMenus: DropdownItem[], _e: MouseEvent) => void;
+    itemMoreMouseenter: (_item: ConversationItem, _dropdownMenus: DropdownItem[], _e: MouseEvent) => void;
+    itemExpandhange: (_item: ConversationItem, _expanded: boolean) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 对话 */
+    item: {
+        type: PropType<ConversationItem>;
+        required: true;
+    };
+    /** 对话列表选中 */
+    active: PropType<string | number>;
+    /** 对话列表展开 */
+    expandedKeys: PropType<Array<string | number>>;
+    /** 下拉菜单数据 */
+    dropdownItems: PropType<ConversationDropdownItems>;
+    /** 当前打开下拉菜单的对话值 */
+    dropdownOpenKey: PropType<string | number>;
+}>> & Readonly<{
+    onItemClick?: ((_item: ConversationItem, _e: MouseEvent) => any) | undefined;
+    onItemMoreClick?: ((_item: ConversationItem, _dropdownMenus: DropdownItem[], _e: MouseEvent) => any) | undefined;
+    onItemMoreMouseenter?: ((_item: ConversationItem, _dropdownMenus: DropdownItem[], _e: MouseEvent) => any) | undefined;
+    onItemExpandhange?: ((_item: ConversationItem, _expanded: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/ele-chat/components/chat-conversation.js

@@ -0,0 +1,155 @@
+import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, unref, withCtx, createCommentVNode, renderSlot, createTextVNode, toDisplayString, withModifiers, Fragment, renderList, createBlock, createSlots, mergeProps } from "vue";
+import { ElIcon } from "element-plus";
+import { ArrowDown, EllipsisOutlined } from "../../icons/index";
+const _hoisted_1 = {
+  key: 0,
+  class: "ele-chat-conversation-shrink"
+};
+const _hoisted_2 = ["title"];
+const _hoisted_3 = {
+  key: 0,
+  class: "ele-chat-conversations"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "ChatConversation" },
+  __name: "chat-conversation",
+  props: {
+    /** 对话 */
+    item: {
+      type: Object,
+      required: true
+    },
+    /** 对话列表选中 */
+    active: [String, Number],
+    /** 对话列表展开 */
+    expandedKeys: Array,
+    /** 下拉菜单数据 */
+    dropdownItems: [Array, Function],
+    /** 当前打开下拉菜单的对话值 */
+    dropdownOpenKey: [String, Number]
+  },
+  emits: {
+    /**列表项点击事件 */
+    itemClick: (_item, _e) => true,
+    /**列表项更多按钮点击事件 */
+    itemMoreClick: (_item, _dropdownMenus, _e) => true,
+    /**列表项更多按钮鼠标移入事件 */
+    itemMoreMouseenter: (_item, _dropdownMenus, _e) => true,
+    /** 对话列表展开折叠事件 */
+    itemExpandhange: (_item, _expanded) => true
+  },
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const isShrink = computed(() => {
+      if (props.expandedKeys == null) {
+        return false;
+      }
+      return !(props.item.key != null && props.expandedKeys.includes(props.item.key));
+    });
+    const dropdownData = computed(() => {
+      if (typeof props.dropdownItems === "function") {
+        return props.dropdownItems(props.item) || [];
+      }
+      return props.dropdownItems || [];
+    });
+    const handleItemExpandhange = (item, expanded) => {
+      emit("itemExpandhange", item, expanded);
+    };
+    const handleItemClick = (item, e) => {
+      if (!item.group && item.children != null) {
+        handleItemExpandhange(item, isShrink.value);
+      }
+      if (item.children != null) {
+        return;
+      }
+      emit("itemClick", item, e);
+    };
+    const handleItemMoreClick = (item, dropdownMenus, e) => {
+      emit("itemMoreClick", item, dropdownMenus, e);
+    };
+    const handleItemMoreMouseenter = (item, dropdownMenus, e) => {
+      emit("itemMoreMouseenter", item, dropdownMenus, e);
+    };
+    return (_ctx, _cache) => {
+      const _component_ChatConversation = resolveComponent("ChatConversation", true);
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["ele-chat-conversation", [
+          { "is-group": __props.item.group },
+          { "is-parent": !__props.item.group && __props.item.children != null },
+          { "is-shrink": isShrink.value },
+          { "is-active": __props.item.key != null && __props.item.key === __props.active },
+          { "is-dropdown-opened": __props.item.key != null && __props.item.key === __props.dropdownOpenKey }
+        ]])
+      }, [
+        createElementVNode("div", {
+          class: "ele-chat-conversation-body",
+          onClick: _cache[2] || (_cache[2] = (e) => handleItemClick(__props.item, e))
+        }, [
+          !__props.item.group && __props.item.children != null ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            createVNode(unref(ElIcon), null, {
+              default: withCtx(() => [
+                createVNode(unref(ArrowDown))
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: "ele-chat-conversation-label",
+            title: __props.item.label
+          }, [
+            renderSlot(_ctx.$slots, "conversationItem", { item: __props.item }, () => [
+              createTextVNode(toDisplayString(__props.item.label), 1)
+            ])
+          ], 8, _hoisted_2),
+          dropdownData.value.length ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(["ele-chat-conversation-more", {
+              "is-opened": __props.item.key != null && __props.item.key === __props.dropdownOpenKey
+            }]),
+            onClick: _cache[0] || (_cache[0] = withModifiers(
+              (e) => handleItemMoreClick(__props.item, dropdownData.value, e),
+              ["stop"]
+            )),
+            onMouseenter: _cache[1] || (_cache[1] = (e) => handleItemMoreMouseenter(__props.item, dropdownData.value, e))
+          }, [
+            createVNode(unref(ElIcon), null, {
+              default: withCtx(() => [
+                createVNode(unref(EllipsisOutlined))
+              ]),
+              _: 1
+            })
+          ], 34)) : createCommentVNode("", true)
+        ]),
+        __props.item.children != null ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.item.children, (child) => {
+            return openBlock(), createBlock(_component_ChatConversation, {
+              key: child.key ?? child.label,
+              item: child,
+              active: __props.active,
+              expandedKeys: __props.expandedKeys,
+              dropdownItems: __props.dropdownItems,
+              dropdownOpenKey: __props.dropdownOpenKey,
+              onItemClick: handleItemClick,
+              onItemMoreClick: handleItemMoreClick,
+              onItemMoreMouseenter: handleItemMoreMouseenter,
+              onItemExpandhange: handleItemExpandhange
+            }, createSlots({ _: 2 }, [
+              renderList(Object.keys(_ctx.$slots), (name) => {
+                return {
+                  name,
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, name, mergeProps({ ref_for: true }, slotProps || {}))
+                  ])
+                };
+              })
+            ]), 1032, ["item", "active", "expandedKeys", "dropdownItems", "dropdownOpenKey"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/ele-chat/components/chat-conversations.d.ts

@@ -0,0 +1,43 @@
+import { PropType } from 'vue';
+import { EleDropdownProps } from '../../ele-app/plus';
+import { ConversationItem, ConversationDropdownItems, ChatConversationSlots } from '../types';
+
+declare function __VLS_template(): Readonly<ChatConversationSlots> & ChatConversationSlots;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** 对话列表 */
+    items: PropType<ConversationItem[]>;
+    /** 对话列表选中 */
+    active: PropType<string | number>;
+    /** 对话列表展开 */
+    expandedKeys: PropType<Array<string | number>>;
+    /** 下拉菜单属性 */
+    dropdownProps: PropType<EleDropdownProps>;
+    /** 下拉菜单数据 */
+    dropdownItems: PropType<ConversationDropdownItems>;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    itemClick: (_item: ConversationItem) => void;
+    "update:active": (_active?: string | number | undefined) => void;
+    "update:expandedKeys": (_keys?: (string | number)[] | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 对话列表 */
+    items: PropType<ConversationItem[]>;
+    /** 对话列表选中 */
+    active: PropType<string | number>;
+    /** 对话列表展开 */
+    expandedKeys: PropType<Array<string | number>>;
+    /** 下拉菜单属性 */
+    dropdownProps: PropType<EleDropdownProps>;
+    /** 下拉菜单数据 */
+    dropdownItems: PropType<ConversationDropdownItems>;
+}>> & Readonly<{
+    onItemClick?: ((_item: ConversationItem) => any) | undefined;
+    "onUpdate:active"?: ((_active?: string | number | undefined) => any) | undefined;
+    "onUpdate:expandedKeys"?: ((_keys?: (string | number)[] | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/ele-chat/components/chat-conversations.js

@@ -0,0 +1,151 @@
+import { defineComponent, inject, ref, watch, openBlock, createElementBlock, Fragment, renderList, createBlock, createSlots, withCtx, renderSlot, mergeProps } from "vue";
+import { useDropdown } from "../../ele-dropdown-provider/util";
+import ChatConversation from "./chat-conversation";
+import { CHAT_KEY, defaultDropdownProps } from "../props";
+const _hoisted_1 = { class: "ele-chat-conversation-list" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "chat-conversations",
+  props: {
+    /** 对话列表 */
+    items: Array,
+    /** 对话列表选中 */
+    active: [String, Number],
+    /** 对话列表展开 */
+    expandedKeys: Array,
+    /** 下拉菜单属性 */
+    dropdownProps: Object,
+    /** 下拉菜单数据 */
+    dropdownItems: [Array, Function]
+  },
+  emits: {
+    /**对话列表项点击事件 */
+    itemClick: (_item) => true,
+    /** 更新对话列表选中 */
+    "update:active": (_active) => true,
+    /** 更新对话列表展开 */
+    "update:expandedKeys": (_keys) => true
+  },
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const chatProvider = inject(CHAT_KEY, null);
+    const dropdownProvider = useDropdown();
+    const expandedItemKeys = ref(
+      props.expandedKeys
+    );
+    const itemDropdownOpenKey = ref();
+    let itemDropdownCurrentData;
+    const handleChatItemClick = (item) => {
+      emit("itemClick", item);
+      if (item.key != null && item.key !== props.active) {
+        emit("update:active", item.key);
+      }
+    };
+    const openDropdown = (item, triggerEl, dropdownMenus, dropdownProps) => {
+      if (!dropdownMenus.length) {
+        const f = dropdownProvider?.removeDropdown ?? chatProvider?.removeDropdown;
+        f && f(triggerEl);
+        return;
+      }
+      itemDropdownCurrentData = item;
+      itemDropdownOpenKey.value = item.key;
+      const option = {
+        ...defaultDropdownProps,
+        onVisibleChange: handleDropdownVisibleChange,
+        ...dropdownProps || {}
+      };
+      const func = dropdownProvider?.openDropdown ?? chatProvider?.openDropdown;
+      func && func(triggerEl, dropdownMenus, option);
+    };
+    const handleItemMoreClick = (item, dropdownMenus, e) => {
+      if (props.dropdownProps?.trigger !== "hover") {
+        openDropdown(item, e.currentTarget, dropdownMenus, props.dropdownProps);
+      }
+    };
+    const handleItemMoreMouseenter = (item, dropdownMenus, e) => {
+      if (props.dropdownProps?.trigger === "hover") {
+        openDropdown(item, e.currentTarget, dropdownMenus, props.dropdownProps);
+      }
+    };
+    const expandedKeysIsChanged = (keys1, keys2) => {
+      if (keys1 == null && keys2 == null) {
+        return false;
+      }
+      if (keys1 != null && keys2 == null || keys1 == null && keys2 != null) {
+        return true;
+      }
+      if ((keys1?.length ?? 0) !== (keys2?.length ?? 0)) {
+        return true;
+      }
+      return (keys1 ?? []).some((v) => !(keys2 ?? []).includes(v));
+    };
+    const handleItemExpandhange = (item, expanded) => {
+      if (item.key == null) {
+        return;
+      }
+      const keys = new Set(expandedItemKeys.value || []);
+      if (expandedItemKeys.value == null && props.items) {
+        props.items.forEach((d) => {
+          if (d.key != null) {
+            keys.add(d.key);
+          }
+        });
+      }
+      if (expanded) {
+        keys.add(item.key);
+      } else {
+        keys.delete(item.key);
+      }
+      expandedItemKeys.value = [...keys];
+      if (expandedKeysIsChanged(props.expandedKeys, expandedItemKeys.value)) {
+        emit("update:expandedKeys", expandedItemKeys.value);
+      }
+    };
+    const handleDropdownVisibleChange = (visible) => {
+      if (!visible) {
+        itemDropdownOpenKey.value = void 0;
+      } else {
+        itemDropdownOpenKey.value = itemDropdownCurrentData?.key;
+      }
+    };
+    watch(
+      () => props.expandedKeys,
+      (keys) => {
+        if (expandedKeysIsChanged(keys, expandedItemKeys.value)) {
+          expandedItemKeys.value = keys;
+        }
+      },
+      { deep: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+          return openBlock(), createBlock(ChatConversation, {
+            key: item.key ?? item.label,
+            item,
+            active: __props.active,
+            expandedKeys: expandedItemKeys.value,
+            dropdownItems: __props.dropdownItems,
+            dropdownOpenKey: itemDropdownOpenKey.value,
+            onItemClick: handleChatItemClick,
+            onItemMoreClick: handleItemMoreClick,
+            onItemMoreMouseenter: handleItemMoreMouseenter,
+            onItemExpandhange: handleItemExpandhange
+          }, createSlots({ _: 2 }, [
+            renderList(Object.keys(_ctx.$slots), (name) => {
+              return {
+                name,
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, name, mergeProps({ ref_for: true }, slotProps || {}))
+                ])
+              };
+            })
+          ]), 1032, ["item", "active", "expandedKeys", "dropdownItems", "dropdownOpenKey"]);
+        }), 128))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/ele-chat/components/chat-files.d.ts

@@ -0,0 +1,38 @@
+import { PropType } from 'vue';
+import { FileItem, FileCardSlots } from '../types';
+
+declare function __VLS_template(): Readonly<FileCardSlots> & FileCardSlots;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** 附件 */
+    files: PropType<FileItem[]>;
+    /** 是否只读模式 */
+    readonly: BooleanConstructor;
+    /** 滚动模式 */
+    overflow: PropType<"scrollX" | "scrollY">;
+    /** 上传失败文本 */
+    uploadError: StringConstructor;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    fileClick: (_item: FileItem, _e: MouseEvent) => void;
+    fileRemove: (_item: FileItem, _e: MouseEvent) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 附件 */
+    files: PropType<FileItem[]>;
+    /** 是否只读模式 */
+    readonly: BooleanConstructor;
+    /** 滚动模式 */
+    overflow: PropType<"scrollX" | "scrollY">;
+    /** 上传失败文本 */
+    uploadError: StringConstructor;
+}>> & Readonly<{
+    onFileClick?: ((_item: FileItem, _e: MouseEvent) => any) | undefined;
+    onFileRemove?: ((_item: FileItem, _e: MouseEvent) => any) | undefined;
+}>, {
+    readonly: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/ele-chat/components/chat-files.js

@@ -0,0 +1,227 @@
+import { defineComponent, ref, watch, nextTick, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createVNode, unref, withCtx, createBlock, createCommentVNode, createElementVNode, Fragment, renderList, createSlots, renderSlot, mergeProps } from "vue";
+import { ElIcon } from "element-plus";
+import { ArrowUp, ArrowLeft, ArrowDown, ArrowRight } from "../../icons/index";
+import { useTimer, useMousewheel } from "../../utils/hook";
+import FileCard from "./file-card";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "chat-files",
+  props: {
+    /** 附件 */
+    files: Array,
+    /** 是否只读模式 */
+    readonly: Boolean,
+    /** 滚动模式 */
+    overflow: String,
+    /** 上传失败文本 */
+    uploadError: String
+  },
+  emits: {
+    /** 附件点击事件 */
+    fileClick: (_item, _e) => true,
+    /** 附件删除事件 */
+    fileRemove: (_item, _e) => true
+  },
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const filesRef = ref(null);
+    const enableScrollLeft = ref(false);
+    const enableScrollRight = ref(false);
+    const handleItemClick = (item, e) => {
+      emit("fileClick", item, e);
+    };
+    const handleItemDel = (item, e) => {
+      emit("fileRemove", item, e);
+    };
+    const handleScroll = () => {
+      const filesEl = filesRef.value;
+      if (!filesEl) {
+        return;
+      }
+      if (props.overflow !== "scrollY") {
+        const left = filesEl.scrollLeft || 0;
+        enableScrollLeft.value = left > 1;
+        const width = filesEl.scrollWidth - filesEl.clientWidth - 1;
+        enableScrollRight.value = width > 1 && left < width;
+        return;
+      }
+      const top = filesEl.scrollTop || 0;
+      enableScrollLeft.value = top > 1;
+      const height = filesEl.scrollHeight - filesEl.clientHeight - 1;
+      enableScrollRight.value = height > 1 && top < height;
+    };
+    const handleScrollTop = (_e, callback) => {
+      const filesEl = filesRef.value;
+      if (filesEl && filesEl.scrollTop > 0) {
+        const top = filesEl.scrollTop - filesEl.clientHeight + 50;
+        filesEl.scrollTo({
+          top: top < 0 ? 0 : top,
+          behavior: "smooth"
+        });
+        callback && callback();
+      }
+    };
+    const handleScrollLeft = (e, callback) => {
+      if (props.overflow === "scrollY") {
+        handleScrollTop(e, callback);
+        return;
+      }
+      const filesEl = filesRef.value;
+      if (filesEl && filesEl.scrollLeft > 0) {
+        const left = filesEl.scrollLeft - filesEl.clientWidth + 50;
+        filesEl.scrollTo({
+          left: left < 0 ? 0 : left,
+          behavior: "smooth"
+        });
+        callback && callback();
+      }
+    };
+    const handleScrollBottom = (_e, callback) => {
+      const filesEl = filesRef.value;
+      if (filesEl) {
+        const top = filesEl.scrollTop + filesEl.clientHeight - 50;
+        filesEl.scrollTo({
+          top,
+          behavior: "smooth"
+        });
+        callback && callback();
+      }
+    };
+    const handleScrollRight = (e, callback) => {
+      if (props.overflow === "scrollY") {
+        handleScrollBottom(e, callback);
+        return;
+      }
+      const filesEl = filesRef.value;
+      if (filesEl) {
+        const left = filesEl.scrollLeft + filesEl.clientWidth - 50;
+        filesEl.scrollTo({
+          left,
+          behavior: "smooth"
+        });
+        callback && callback();
+      }
+    };
+    watch(
+      () => props.files,
+      () => {
+        nextTick(() => {
+          handleScroll();
+        });
+      },
+      { deep: true }
+    );
+    const [startScrollTimer, _stopScrollTimer, scrollWaiting] = useTimer(320);
+    const { bindMousewheel, unbindMousewheel } = useMousewheel((param) => {
+      if (props.overflow === "scrollY" || scrollWaiting.value) {
+        return;
+      }
+      const { e, direction } = param;
+      const callback = () => {
+        e.preventDefault();
+        e.stopPropagation();
+      };
+      if (direction === "up") {
+        if (!enableScrollLeft.value) {
+          return;
+        }
+        startScrollTimer();
+        handleScrollLeft(e, callback);
+      } else {
+        if (!enableScrollRight.value) {
+          return;
+        }
+        startScrollTimer();
+        handleScrollRight(e, callback);
+      }
+      e.preventDefault();
+      e.stopPropagation();
+    });
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        handleScroll();
+      });
+    }) : void 0;
+    onMounted(() => {
+      const filesEl = filesRef.value;
+      if (filesEl) {
+        if (props.overflow === "scrollY") {
+          handleScroll();
+        } else {
+          bindMousewheel(filesEl);
+          observer && observer.observe(filesEl);
+        }
+      }
+    });
+    onBeforeUnmount(() => {
+      const filesEl = filesRef.value;
+      if (filesEl) {
+        unbindMousewheel(filesEl);
+        observer && observer.unobserve(filesEl);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["ele-chat-file-wrapper", [
+          { "is-ping-left": enableScrollLeft.value },
+          { "is-ping-right": enableScrollRight.value },
+          { "is-vertical": __props.overflow === "scrollY" }
+        ]])
+      }, [
+        enableScrollLeft.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "ele-chat-file-tool",
+          onClick: handleScrollLeft
+        }, [
+          createVNode(unref(ElIcon), null, {
+            default: withCtx(() => [
+              __props.overflow === "scrollY" ? (openBlock(), createBlock(unref(ArrowUp), { key: 0 })) : (openBlock(), createBlock(unref(ArrowLeft), { key: 1 }))
+            ]),
+            _: 1
+          })
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          ref_key: "filesRef",
+          ref: filesRef,
+          class: "ele-chat-files",
+          onScroll: handleScroll
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.files, (item) => {
+            return openBlock(), createBlock(FileCard, {
+              key: item.key ?? item.name,
+              item,
+              readonly: __props.readonly,
+              uploadError: __props.uploadError,
+              onClick: (e) => handleItemClick(item, e),
+              onFileRemove: handleItemDel
+            }, createSlots({ _: 2 }, [
+              renderList(Object.keys(_ctx.$slots), (name) => {
+                return {
+                  name,
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, name, mergeProps({ ref_for: true }, slotProps || {}))
+                  ])
+                };
+              })
+            ]), 1032, ["item", "readonly", "uploadError", "onClick"]);
+          }), 128))
+        ], 544),
+        enableScrollRight.value ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "ele-chat-file-tool",
+          onClick: handleScrollRight
+        }, [
+          createVNode(unref(ElIcon), null, {
+            default: withCtx(() => [
+              __props.overflow === "scrollY" ? (openBlock(), createBlock(unref(ArrowDown), { key: 0 })) : (openBlock(), createBlock(unref(ArrowRight), { key: 1 }))
+            ]),
+            _: 1
+          })
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};