yuang-framework-ui-pc/lib/ele-file-list/components/file-grid.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const ReceiverView = require("../../ele-config-provider/components/receiver-view");
const FileGridItem = require("./file-grid-item");
const _sfc_main = vue.defineComponent({
  name: "FileGrid",
  components: { ReceiverView, FileGridItem },
  props: {
    /** 文件数据 */
    data: Array,
    /** 后缀对应的图标 */
    icons: Array,
    /** 选择框类型 */
    selectionType: String,
    /** 已选中的数据 */
    selections: Array,
    /** 单选选中数据 */
    current: Object,
    /** 是否是全选 */
    isCheckAll: Boolean,
    /** 是否是半选 */
    isIndeterminate: Boolean,
    /** 全选按钮文字 */
    checkAllText: String,
    /** 选中后的文字 */
    selectedText: String,
    /** 文件右键菜单是否打开 */
    ctxMenuDropdownVisible: Boolean,
    /** 当前打开的右键菜单对应的文件数据 */
    contextMenuFileItem: Object
  },
  emits: {
    checkAllChange: () => true,
    itemClick: (_item) => true,
    itemCheckChange: (_item) => true,
    itemContextOpen: (_option) => true
  },
  setup(props, { emit }) {
    const headerText = vue.computed(() => {
      if (!props.selections || !props.selections.length) {
        return props.checkAllText;
      }
      if (!props.selectedText) {
        return "";
      }
      return props.selectedText.replace(
        /\{\s*total\s*\}/g,
        String(props.selections.length)
      );
    });
    const handleCheckAllChange = () => {
      emit("checkAllChange");
    };
    const handleItemClick = (item) => {
      emit("itemClick", item);
    };
    const handleItemCheckChange = (item) => {
      emit("itemCheckChange", item);
    };
    const handleItemContextOpen = (option) => {
      emit("itemContextOpen", option);
    };
    return {
      headerText,
      handleCheckAllChange,
      handleItemClick,
      handleItemCheckChange,
      handleItemContextOpen
    };
  }
});
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-header"
};
const _hoisted_2 = { class: "ele-file-list-body" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_FileGridItem = vue.resolveComponent("FileGridItem");
  const _component_ReceiverView = vue.resolveComponent("ReceiverView");
  return vue.openBlock(), vue.createBlock(_component_ReceiverView, { class: "ele-file-list" }, {
    default: vue.withCtx(() => [
      _ctx.selectionType === "checkbox" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createElementVNode("div", {
          class: "ele-file-list-selection",
          onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => _ctx.handleCheckAllChange && _ctx.handleCheckAllChange(...args), ["stop"]))
        }, [
          vue.createElementVNode("i", {
            class: vue.normalizeClass([
              "ele-file-list-checkbox",
              { "is-checked": _ctx.isCheckAll },
              { "is-indeterminate": _ctx.isIndeterminate }
            ])
          }, null, 2),
          vue.createElementVNode("div", null, vue.toDisplayString(_ctx.headerText), 1)
        ])
      ])) : vue.createCommentVNode("", true),
      vue.createElementVNode("div", _hoisted_2, [
        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data, (item) => {
          return vue.openBlock(), vue.createBlock(_component_FileGridItem, {
            key: item.key,
            item,
            selectionType: _ctx.selectionType,
            selections: _ctx.selections,
            current: _ctx.current,
            icons: _ctx.icons,
            ctxMenuDropdownVisible: _ctx.ctxMenuDropdownVisible && _ctx.contextMenuFileItem === item,
            onClick: _ctx.handleItemClick,
            onCheckChange: _ctx.handleItemCheckChange,
            onContextOpen: _ctx.handleItemContextOpen
          }, vue.createSlots({ _: 2 }, [
            vue.renderList(Object.keys(_ctx.$slots), (name) => {
              return {
                name,
                fn: vue.withCtx((slotProps) => [
                  vue.renderSlot(_ctx.$slots, name, vue.mergeProps({ ref_for: true }, slotProps || {}))
                ])
              };
            })
          ]), 1032, ["item", "selectionType", "selections", "current", "icons", "ctxMenuDropdownVisible", "onClick", "onCheckChange", "onContextOpen"]);
        }), 128))
      ])
    ]),
    _: 3
  });
}
const fileGrid = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = fileGrid;