yuang-framework-ui-pc/es/ele-file-list/components/file-table-item.js

yuang-framework-ui-pc Library

import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, withModifiers, createElementVNode, createCommentVNode, renderSlot, toDisplayString, Fragment, renderList, normalizeStyle, createTextVNode } from "vue";
const _sfc_main = defineComponent({
  name: "FileTableItem",
  props: {
    /** 数据 */
    item: {
      type: Object,
      required: true
    },
    /** 选择框类型 */
    selectionType: String,
    /** 多选选中数据 */
    selections: Array,
    /** 单选选中数据 */
    current: Object,
    /** 后缀对应的图标 */
    icons: Array,
    /** 自定义列配置 */
    columns: Array,
    /** 右键下拉菜单是否显示 */
    ctxMenuDropdownVisible: Boolean
  },
  emits: {
    click: (_item) => true,
    checkChange: (_item) => true,
    contextOpen: (_option) => true
  },
  setup(props, { emit }) {
    const dropdownTriggerRef = ref(null);
    const selectable = computed(() => {
      return props.selectionType === "checkbox" || props.selectionType === "radio";
    });
    const selected = computed(() => {
      if (!selectable.value || !props.item) {
        return false;
      }
      if (props.selectionType === "checkbox") {
        return !!(props.selections && props.selections.some((t) => t.key === props.item.key));
      }
      return !!(props.current && props.current.key === props.item.key);
    });
    const icon = computed(() => {
      var _a, _b, _c;
      if (props.item.thumbnail) {
        return props.item.thumbnail;
      }
      if (!props.icons) {
        return;
      }
      if (props.item.isDirectory) {
        return (_a = props.icons.find((d) => d.type === "dir")) == null ? void 0 : _a.icon;
      }
      if (props.item.name) {
        const icon2 = (_b = props.icons.find((d) => {
          if (!d.suffixes) {
            return false;
          }
          return !!d.suffixes.find((t) => !!props.item.name.endsWith(t));
        })) == null ? void 0 : _b.icon;
        if (icon2) {
          return icon2;
        }
      }
      return (_c = props.icons.find((d) => d.type === "file")) == null ? void 0 : _c.icon;
    });
    const handleClick = () => {
      emit("click", props.item);
    };
    const handleCheckChange = () => {
      emit("checkChange", props.item);
    };
    const handleContextmenu = (e) => {
      if (dropdownTriggerRef.value != null) {
        emit("contextOpen", {
          item: props.item,
          triggerEl: dropdownTriggerRef.value,
          e
        });
      }
    };
    return {
      dropdownTriggerRef,
      selectable,
      selected,
      icon,
      handleClick,
      handleCheckChange,
      handleContextmenu
    };
  }
});
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = {
  key: 0,
  class: "ele-file-list-item-checkbox"
};
const _hoisted_2 = { class: "ele-file-list-item-name" };
const _hoisted_3 = { class: "ele-file-list-item-icon" };
const _hoisted_4 = ["src"];
const _hoisted_5 = ["title"];
const _hoisted_6 = {
  key: 0,
  class: "ele-file-list-item-tools"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    class: normalizeClass([
      "ele-file-list-item",
      { "is-checked": _ctx.selected },
      { "is-active": _ctx.ctxMenuDropdownVisible }
    ]),
    onClick: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["stop"]))
  }, [
    createElementVNode("div", {
      class: "ele-file-list-item-body",
      onContextmenu: _cache[1] || (_cache[1] = (...args) => _ctx.handleContextmenu && _ctx.handleContextmenu(...args))
    }, [
      _ctx.selectable ? (openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("i", {
          class: normalizeClass([
            "ele-file-list-checkbox",
            { "is-radio": _ctx.selectionType === "radio" },
            { "is-checked": _ctx.selected }
          ]),
          onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.handleCheckChange && _ctx.handleCheckChange(...args), ["stop"]))
        }, null, 2)
      ])) : createCommentVNode("", true),
      createElementVNode("div", _hoisted_2, [
        createElementVNode("div", _hoisted_3, [
          renderSlot(_ctx.$slots, "icon", {
            icon: _ctx.icon,
            item: _ctx.item
          }, () => [
            createElementVNode("img", {
              src: _ctx.icon,
              class: normalizeClass({ "ele-file-list-item-image": !!_ctx.item.thumbnail })
            }, null, 10, _hoisted_4)
          ]),
          renderSlot(_ctx.$slots, "title", { item: _ctx.item }, () => [
            createElementVNode("div", {
              title: _ctx.item.name,
              class: "ele-file-list-item-title"
            }, toDisplayString(_ctx.item.name), 9, _hoisted_5)
          ])
        ]),
        _ctx.$slots.tool ? (openBlock(), createElementBlock("div", _hoisted_6, [
          renderSlot(_ctx.$slots, "tool", { item: _ctx.item })
        ])) : createCommentVNode("", true)
      ]),
      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (col) => {
        return openBlock(), createElementBlock("div", {
          key: col.prop,
          style: normalizeStyle(col.style),
          class: "ele-file-list-item-cell"
        }, [
          col.slot && !["icon", "title", "tool", "contextMenu"].includes(col.slot) && _ctx.$slots[col.slot] ? renderSlot(_ctx.$slots, col.slot, {
            key: 0,
            item: _ctx.item,
            col
          }) : _ctx.item && col && col.prop ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
            createTextVNode(toDisplayString(_ctx.item[col.prop]), 1)
          ], 64)) : createCommentVNode("", true)
        ], 4);
      }), 128))
    ], 32),
    createElementVNode("div", {
      ref: "dropdownTriggerRef",
      class: "ele-file-list-item-dropdown",
      onClick: _cache[2] || (_cache[2] = withModifiers(() => {
      }, ["stop"]))
    }, null, 512)
  ], 2);
}
const fileTableItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  fileTableItem as default
};