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

yuang-framework-ui-pc Library

import { defineComponent, computed, resolveComponent, createBlock, openBlock, withCtx, createElementBlock, createCommentVNode, createElementVNode, withModifiers, normalizeClass, toDisplayString, Fragment, renderList, createSlots, renderSlot, mergeProps } from "vue";
import ReceiverView from "../../ele-config-provider/components/receiver-view";
import FileGridItem from "./file-grid-item";
const _sfc_main = 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 = 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 = resolveComponent("FileGridItem");
  const _component_ReceiverView = resolveComponent("ReceiverView");
  return openBlock(), createBlock(_component_ReceiverView, { class: "ele-file-list" }, {
    default: withCtx(() => [
      _ctx.selectionType === "checkbox" ? (openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", {
          class: "ele-file-list-selection",
          onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.handleCheckAllChange && _ctx.handleCheckAllChange(...args), ["stop"]))
        }, [
          createElementVNode("i", {
            class: normalizeClass([
              "ele-file-list-checkbox",
              { "is-checked": _ctx.isCheckAll },
              { "is-indeterminate": _ctx.isIndeterminate }
            ])
          }, null, 2),
          createElementVNode("div", null, toDisplayString(_ctx.headerText), 1)
        ])
      ])) : createCommentVNode("", true),
      createElementVNode("div", _hoisted_2, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item) => {
          return openBlock(), 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
          }, createSlots({ _: 2 }, [
            renderList(Object.keys(_ctx.$slots), (name) => {
              return {
                name,
                fn: withCtx((slotProps) => [
                  renderSlot(_ctx.$slots, name, 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]]);
export {
  fileGrid as default
};