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

yuang-framework-ui-pc Library

import { defineComponent, computed, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, createElementBlock, createCommentVNode, withModifiers, normalizeClass, toDisplayString, Fragment, renderList, normalizeStyle, renderSlot, createTextVNode, createSlots, mergeProps } from "vue";
import ReceiverView from "../../ele-config-provider/components/receiver-view";
import FileTableItem from "./file-table-item";
import FileSort from "./file-sort";
const _sfc_main = defineComponent({
  name: "FileTable",
  components: { ReceiverView, FileTableItem, FileSort },
  props: {
    /** 文件数据 */
    data: Array,
    /** 后缀对应的图标 */
    icons: Array,
    /** 选择框类型 */
    selectionType: String,
    /** 选中数据 */
    selections: Array,
    /** 单选选中数据 */
    current: Object,
    /** 是否是全选 */
    isCheckAll: Boolean,
    /** 是否是半选 */
    isIndeterminate: Boolean,
    /** 文件名文字 */
    nameText: String,
    /** 文件大小文字 */
    sizeText: String,
    /** 修改时间文字 */
    timeText: String,
    /** 默认的列是否可以排序 */
    sortable: Boolean,
    /** 排序字段 */
    sort: String,
    /** 排序方式 */
    order: String,
    /** 自定义列配置 */
    columns: Array,
    /** 文件右键菜单是否打开 */
    ctxMenuDropdownVisible: Boolean,
    /** 当前打开的右键菜单对应的文件数据 */
    contextMenuFileItem: Object
  },
  emits: {
    checkAllChange: () => true,
    itemClick: (_item) => true,
    itemCheckChange: (_item) => true,
    itemContextOpen: (_option) => true,
    sortChange: (_sort) => true
  },
  setup(props, { emit }) {
    const tableCols = computed(() => {
      if (props.columns) {
        return props.columns;
      }
      const cols = [
        {
          title: props.sizeText,
          prop: "length",
          style: {
            width: "120px",
            flexShrink: 0
          },
          sortable: props.sortable
        },
        {
          title: props.timeText,
          prop: "updateTime",
          style: {
            width: "180px",
            flexShrink: 0
          },
          sortable: props.sortable
        }
      ];
      return cols;
    });
    const handleCheckAllChange = () => {
      emit("checkAllChange");
    };
    const handleItemClick = (item) => {
      emit("itemClick", item);
    };
    const handleItemCheckChange = (item) => {
      emit("itemCheckChange", item);
    };
    const handleSortChange = (sort, col) => {
      if (!col) {
        if (props.sortable) {
          emit("sortChange", sort);
        }
      } else if (col.sortable) {
        emit("sortChange", sort);
      }
    };
    const handleItemContextOpen = (option) => {
      emit("itemContextOpen", option);
    };
    return {
      tableCols,
      handleCheckAllChange,
      handleItemClick,
      handleItemCheckChange,
      handleSortChange,
      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 = { class: "ele-file-list-header" };
const _hoisted_2 = { class: "ele-file-list-item" };
const _hoisted_3 = { class: "ele-file-list-item-body" };
const _hoisted_4 = {
  key: 0,
  class: "ele-file-list-item-checkbox"
};
const _hoisted_5 = ["onClick"];
const _hoisted_6 = { class: "ele-file-list-body" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_FileSort = resolveComponent("FileSort");
  const _component_FileTableItem = resolveComponent("FileTableItem");
  const _component_ReceiverView = resolveComponent("ReceiverView");
  return openBlock(), createBlock(_component_ReceiverView, { class: "ele-file-list-table" }, {
    default: withCtx(() => [
      createElementVNode("div", _hoisted_1, [
        createElementVNode("div", _hoisted_2, [
          createElementVNode("div", _hoisted_3, [
            _ctx.selectionType === "checkbox" || _ctx.selectionType === "radio" ? (openBlock(), createElementBlock("div", _hoisted_4, [
              _ctx.selectionType === "checkbox" ? (openBlock(), createElementBlock("i", {
                key: 0,
                class: normalizeClass([
                  "ele-file-list-checkbox",
                  { "is-checked": _ctx.isCheckAll },
                  { "is-indeterminate": _ctx.isIndeterminate }
                ]),
                onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.handleCheckAllChange && _ctx.handleCheckAllChange(...args), ["stop"]))
              }, null, 2)) : createCommentVNode("", true)
            ])) : createCommentVNode("", true),
            createElementVNode("div", {
              class: normalizeClass(["ele-file-list-item-name", { "is-sortable": _ctx.sortable }]),
              onClick: _cache[1] || (_cache[1] = ($event) => _ctx.handleSortChange("name"))
            }, [
              createElementVNode("span", null, toDisplayString(_ctx.nameText), 1),
              _ctx.sortable ? (openBlock(), createBlock(_component_FileSort, {
                key: 0,
                sort: _ctx.sort,
                order: _ctx.order,
                name: "name"
              }, null, 8, ["sort", "order"])) : createCommentVNode("", true)
            ], 2),
            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tableCols, (col) => {
              return openBlock(), createElementBlock("div", {
                key: col.prop,
                style: normalizeStyle(col.headerStyle || col.style),
                class: normalizeClass([
                  "ele-file-list-item-cell",
                  { "is-sortable": col.sortable }
                ]),
                onClick: ($event) => _ctx.handleSortChange(col.prop, col)
              }, [
                createElementVNode("span", null, [
                  col.headerSlot && !["icon", "title", "tool", "contextMenu"].includes(
                    col.headerSlot
                  ) && _ctx.$slots[col.headerSlot] ? renderSlot(_ctx.$slots, col.headerSlot, {
                    key: 0,
                    col
                  }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                    createTextVNode(toDisplayString(col.title), 1)
                  ], 64))
                ]),
                col.sortable ? (openBlock(), createBlock(_component_FileSort, {
                  key: 0,
                  sort: _ctx.sort,
                  order: _ctx.order,
                  name: col.prop
                }, null, 8, ["sort", "order", "name"])) : createCommentVNode("", true)
              ], 14, _hoisted_5);
            }), 128))
          ])
        ])
      ]),
      createElementVNode("div", _hoisted_6, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item) => {
          return openBlock(), createBlock(_component_FileTableItem, {
            key: item.key,
            item,
            selectionType: _ctx.selectionType,
            selections: _ctx.selections,
            current: _ctx.current,
            icons: _ctx.icons,
            columns: _ctx.tableCols,
            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", "columns", "ctxMenuDropdownVisible", "onClick", "onCheckChange", "onContextOpen"]);
        }), 128))
      ])
    ]),
    _: 3
  });
}
const fileTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  fileTable as default
};