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

yuang-framework-ui-pc Library

import { defineComponent, ref, computed, createElementBlock, openBlock, withModifiers, normalizeClass, createElementVNode, createCommentVNode, renderSlot, toDisplayString } from "vue";
const _sfc_main = defineComponent({
  name: "FileGridItem",
  props: {
    /** 数据 */
    item: {
      type: Object,
      required: true
    },
    /** 选择框类型 */
    selectionType: String,
    /** 多选选中数据 */
    selections: Array,
    /** 单选选中数据 */
    current: Object,
    /** 后缀对应的图标 */
    icons: 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 = { class: "ele-file-list-item-icon" };
const _hoisted_2 = ["src"];
const _hoisted_3 = ["title"];
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[0] || (_cache[0] = (...args) => _ctx.handleContextmenu && _ctx.handleContextmenu(...args))
    }, [
      createElementVNode("div", _hoisted_1, [
        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_2)
        ])
      ]),
      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_3)
      ])
    ], 32),
    _ctx.selectable ? (openBlock(), createElementBlock("div", {
      key: 0,
      class: "ele-file-list-item-checkbox",
      onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.handleCheckChange && _ctx.handleCheckChange(...args), ["stop"]))
    }, _cache[4] || (_cache[4] = [
      createElementVNode("i", { class: "ele-file-list-checkbox is-checked" }, null, -1)
    ]))) : createCommentVNode("", true),
    createElementVNode("div", {
      ref: "dropdownTriggerRef",
      class: "ele-file-list-item-dropdown",
      onClick: _cache[2] || (_cache[2] = withModifiers(() => {
      }, ["stop"]))
    }, null, 512)
  ], 2);
}
const fileGridItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  fileGridItem as default
};