yuang-framework-ui-pc 1.1.45 → 1.1.47

package/es/ele-virtual-table/components/header-cell.js

@@ -0,0 +1,261 @@
+import { defineComponent, computed, resolveComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createCommentVNode, createElementVNode, createBlock, normalizeProps, mergeProps, withCtx, createTextVNode, toDisplayString } from "vue";
+import { CellRender, getColKey, getOrderValue } from "../util";
+import CellCheckbox from "./cell-checkbox";
+import CellFilter from "./cell-filter";
+const _sfc_main = defineComponent({
+  name: "HeaderCell",
+  components: { CellCheckbox, CellFilter, CellRender },
+  props: {
+    /** 当前列配置 */
+    column: Object,
+    /** 当前列索引 */
+    columnIndex: Number,
+    /** 当前行索引 */
+    headerIndex: Number,
+    /** 当前列宽 */
+    colSize: Object,
+    /** 表格排序状态 */
+    sortBy: Object,
+    /** 表格当前筛选值 */
+    filterValue: Object,
+    /** 表格是否是全选状态 */
+    isCheckAll: Boolean,
+    /** 表格是否是半选状态 */
+    isIndeterminate: Boolean,
+    /** 是否禁用表头选择框 */
+    disabledCheckbox: Boolean,
+    /** 表格尺寸 */
+    tableSize: String,
+    /** 单元格类名自定义 */
+    headerCellClass: [String, Function],
+    /** 单元格样式自定义 */
+    headerCellStyle: [Object, Function],
+    /** 表头单元格是否溢出省略 */
+    headerEllipsis: Boolean,
+    /** 表格行高 */
+    rowHeight: Number
+  },
+  emits: {
+    /** 多选框选中改变事件 */
+    checkedChange: (_checked) => true,
+    /** 列筛选改变事件 */
+    filterChange: (_params) => true,
+    /** 点击事件 */
+    click: (_col, _e) => true,
+    /** 右键事件 */
+    contextmenu: (_col, _e) => true,
+    /** 鼠标移入事件 */
+    mouseenter: (_col, _e) => true
+  },
+  setup(props, { emit, slots }) {
+    const originalCol = computed(() => {
+      return props.column ? props.column.originalCol : void 0;
+    });
+    const cellParam = computed(() => {
+      return {
+        column: originalCol.value,
+        columnIndex: props.columnIndex,
+        rowIndex: props.headerIndex
+      };
+    });
+    const cellClass = computed(() => {
+      const classes = ["el-table-v2__header-cell", "ele-table-td"];
+      if (props.column) {
+        if (!props.column.colspan) {
+          classes.push("is-none");
+        } else if (props.column.colspan > 1) {
+          classes.push("is-multi-cell");
+        }
+        if (!props.column.rowspan) {
+          classes.push("is-placeholder");
+        } else if (props.column.rowspan > 1) {
+          classes.push("is-multi-row");
+        }
+      }
+      const col = originalCol.value;
+      if (col) {
+        const align = col.headerAlign || col.align;
+        if (align) {
+          classes.push("is-align-" + align);
+        }
+        if (col.sortable === true || col.sortable === "custom") {
+          classes.push("is-sortable");
+        }
+        if (props.sortBy != null && getColKey(col) === props.sortBy.key) {
+          const sortClass = getOrderValue(props.sortBy.order);
+          if (sortClass) {
+            classes.push("is-" + sortClass);
+          }
+        }
+        if (col.filters && col.filters.length && props.filterValue && props.filterValue.length) {
+          classes.push("is-filtered");
+        }
+        if (col.type === "selection") {
+          classes.push("is-selection");
+        }
+        if (col.type === "expand") {
+          classes.push("is-expand");
+        }
+        if (props.headerEllipsis) {
+          classes.push("is-ellipsis");
+        }
+        if (col.fixed === "right") {
+          classes.push("is-fixed-right");
+        } else if (col.fixed === "left" || col.fixed === true) {
+          classes.push("is-fixed-left");
+        }
+        if (props.column) {
+          if (props.column.isFixedLeftLast) {
+            classes.push("is-fixed-left-last");
+          }
+          if (props.column.isFixedRightFirst) {
+            classes.push("is-fixed-right-first");
+          }
+        }
+        if (typeof props.headerCellClass === "function") {
+          const temp = props.headerCellClass(cellParam.value);
+          if (temp) {
+            classes.push(temp);
+          }
+        } else if (props.headerCellClass) {
+          classes.push(props.headerCellClass);
+        }
+        if (col.labelClassName) {
+          classes.push(col.labelClassName);
+        }
+      }
+      return classes.join(" ");
+    });
+    const cellHeight = computed(() => {
+      if (props.rowHeight == null || props.column == null || !props.column.rowspan || props.column.rowspan <= 1) {
+        return;
+      }
+      return props.column.rowspan * props.rowHeight + "px";
+    });
+    const cellStyle = computed(() => {
+      if (!props.colSize) {
+        return;
+      }
+      const { width, fixedLeft, fixedRight } = props.colSize;
+      const userStyle = props.headerCellStyle;
+      const param = cellParam.value;
+      return [
+        {
+          width: width + "px",
+          height: cellHeight.value,
+          left: fixedLeft,
+          right: fixedRight
+        },
+        (typeof userStyle === "function" ? userStyle(param) : userStyle) || {}
+      ];
+    });
+    const cellTitle = computed(() => {
+      return originalCol.value ? originalCol.value.label : void 0;
+    });
+    const renderOpt = computed(() => {
+      const col = originalCol.value;
+      if (col) {
+        const param = { column: col, $index: props.columnIndex };
+        if (col.headerSlot) {
+          const headerSlot = slots[col.headerSlot];
+          if (typeof headerSlot === "function") {
+            return { render: headerSlot, params: [param] };
+          }
+        }
+        if (typeof col.renderHeader === "function") {
+          return { render: col.renderHeader, params: [param] };
+        }
+      }
+      return {};
+    });
+    const handleCheckedChange = (checked) => {
+      emit("checkedChange", checked);
+    };
+    const handleFilterChange = (value) => {
+      emit("filterChange", { column: originalCol.value, value });
+    };
+    const handleClick = (e) => {
+      emit("click", originalCol.value, e);
+    };
+    const handleContextmenu = (e) => {
+      emit("contextmenu", originalCol.value, e);
+    };
+    const handleMouseenter = (e) => {
+      emit("mouseenter", originalCol.value, e);
+    };
+    return {
+      originalCol,
+      cellClass,
+      cellStyle,
+      cellTitle,
+      renderOpt,
+      handleCheckedChange,
+      handleFilterChange,
+      handleClick,
+      handleContextmenu,
+      handleMouseenter
+    };
+  }
+});
+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-table-cell"
+};
+const _hoisted_2 = ["title"];
+const _hoisted_3 = {
+  key: 0,
+  class: "ele-table-sorter"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CellCheckbox = resolveComponent("CellCheckbox");
+  const _component_CellRender = resolveComponent("CellRender");
+  const _component_CellFilter = resolveComponent("CellFilter");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.cellClass),
+    style: normalizeStyle(_ctx.cellStyle),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    onContextmenu: _cache[1] || (_cache[1] = (...args) => _ctx.handleContextmenu && _ctx.handleContextmenu(...args)),
+    onMouseenter: _cache[2] || (_cache[2] = (...args) => _ctx.handleMouseenter && _ctx.handleMouseenter(...args))
+  }, [
+    _ctx.originalCol ? (openBlock(), createElementBlock("div", _hoisted_1, [
+      createElementVNode("div", {
+        class: "ele-cell-title",
+        title: _ctx.headerEllipsis ? _ctx.cellTitle : void 0
+      }, [
+        _ctx.originalCol.type === "selection" ? (openBlock(), createBlock(_component_CellCheckbox, {
+          key: 0,
+          checked: _ctx.isCheckAll,
+          indeterminate: _ctx.isIndeterminate,
+          disabled: _ctx.disabledCheckbox,
+          size: _ctx.tableSize,
+          onChange: _ctx.handleCheckedChange
+        }, null, 8, ["checked", "indeterminate", "disabled", "size", "onChange"])) : (openBlock(), createBlock(_component_CellRender, normalizeProps(mergeProps({ key: 1 }, _ctx.renderOpt)), {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(_ctx.cellTitle), 1)
+          ]),
+          _: 1
+        }, 16))
+      ], 8, _hoisted_2),
+      _ctx.originalCol.sortable ? (openBlock(), createElementBlock("div", _hoisted_3)) : createCommentVNode("", true),
+      _ctx.originalCol.filters && _ctx.originalCol.filters.length ? (openBlock(), createBlock(_component_CellFilter, {
+        key: 1,
+        filtered: _ctx.filterValue,
+        filterMultiple: _ctx.originalCol.filterMultiple,
+        filters: _ctx.originalCol.filters,
+        filterPlacement: _ctx.originalCol.filterPlacement,
+        onChange: _ctx.handleFilterChange
+      }, null, 8, ["filtered", "filterMultiple", "filters", "filterPlacement", "onChange"])) : createCommentVNode("", true)
+    ])) : createCommentVNode("", true)
+  ], 38);
+}
+const headerCell = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  headerCell as default
+};