ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-table/table-header/index.mjs

A high quality UI components Library with Vue.js

import { defineComponent, getCurrentInstance, inject, ref, h, onMounted, nextTick } from 'vue';
import IvueIcon from '../../ivue-icon/index2.mjs';
import useUtils from './utils.mjs';
import useStyle from './styles.mjs';
import useEvent from './events.mjs';
import useLayoutObserver from '../table-layout-observer.mjs';
import FilterPanel from '../table/filter-panel.mjs';
import { TableContextKey } from '../table/defaults.mjs';

const prefixCls = "ivue-table";
var TableHeader = defineComponent({
  props: {
    fixed: {
      type: String,
      default: ""
    },
    store: {
      required: true,
      type: Object
    },
    border: {
      type: Boolean,
      default: false
    },
    defaultSort: {
      type: Object,
      default: () => {
        return {
          prop: "",
          order: ""
        };
      }
    },
    tooltipStop: {
      type: Boolean
    }
  },
  setup(props, { emit }) {
    const vm = getCurrentInstance();
    const IvueTable = inject(TableContextKey);
    const filterPanels = ref({});
    const {
      columnRows,
      isGroup
    } = useUtils(props);
    const {
      getHeaderCellClass,
      getHeaderCellStyle,
      getHeaderRowStyle,
      getHeaderRowClass
    } = useStyle(props);
    const {
      handleSortClick,
      handleHeaderClick,
      handleMouseDown,
      handleMouseMove,
      handleMouseOut
    } = useEvent(props, emit);
    const { handleColumnsChange, handleScrollableWidthChange } = useLayoutObserver(IvueTable);
    vm.state = {
      handleColumnsChange,
      handleScrollableWidthChange
    };
    vm.filterPanels = filterPanels;
    const renderSortable = (column) => {
      if (!column.sortable) {
        return null;
      }
      return h(
        "span",
        {
          class: `${prefixCls}-header--sortable`
        },
        [
          h(
            IvueIcon,
            {
              class: `${prefixCls}-header--ascending`,
              onClick: ($event) => {
                handleSortClick($event, column, "ascending");
              }
            },
            {
              default: () => "arrow_drop_up"
            }
          ),
          h(
            IvueIcon,
            {
              class: `${prefixCls}-header--descending`,
              onClick: ($event) => {
                handleSortClick($event, column, "descending");
              }
            },
            {
              default: () => "arrow_drop_down"
            }
          )
        ]
      );
    };
    const renderHeader = (column, cellIndex) => {
      if (!column.renderHeader) {
        return column.label;
      }
      return h("span", {}, [
        column.renderHeader({
          column,
          $index: cellIndex,
          store: props.store,
          _self: vm.$parent
        })
      ]);
    };
    const renderFilter = (column) => {
      if (!column.filterable) {
        return null;
      }
      return h(FilterPanel, {
        column,
        store: props.store,
        placement: column.filterPlacement,
        tooltipStop: props.tooltipStop,
        upDataColumn: (key, value) => {
          column[key] = value;
        }
      });
    };
    const renderTh = (list, rowSpan, rowIndex) => {
      return list.map((column, cellIndex) => {
        if (column.rowSpan > rowSpan) {
          rowSpan = column.rowSpan;
        }
        return h(
          "th",
          {
            class: getHeaderCellClass(rowIndex, cellIndex, list, column),
            style: getHeaderCellStyle(rowIndex, cellIndex, list, column),
            colspan: column.colSpan,
            rowspan: column.rowSpan,
            key: `${column.id}-thead`,
            onClick: ($event) => {
              handleHeaderClick($event, column);
            },
            onMousedown: ($event) => {
              handleMouseDown($event, column);
            },
            onMousemove: ($event) => {
              handleMouseMove($event, column);
            },
            onMouseout: () => {
              handleMouseOut();
            }
          },
          [
            h(
              "div",
              {
                class: [
                  "cell",
                  column.filteredValue && column.filteredValue.length > 0 ? "highlight" : ""
                ]
              },
              h(
                "div",
                {
                  class: "cell-content"
                },
                [
                  renderHeader(column, cellIndex),
                  renderSortable(column),
                  renderFilter(column)
                ]
              )
            )
          ]
        );
      });
    };
    onMounted(() => {
      nextTick(() => {
        const { prop, order } = props.defaultSort;
        IvueTable == null ? void 0 : IvueTable.store.commit("sort", { prop, order, init: true });
      });
    });
    return {
      filterPanels,
      isGroup,
      columnRows,
      renderTh,
      handleColumnsChange,
      getHeaderRowStyle,
      getHeaderRowClass
    };
  },
  render() {
    const {
      columnRows,
      renderTh,
      isGroup,
      getHeaderRowStyle,
      getHeaderRowClass
    } = this;
    const rowSpan = 1;
    return h(
      "thead",
      {
        class: {
          ["is-group"]: isGroup
        }
      },
      columnRows.map((item, rowIndex) => {
        return h(
          "tr",
          {
            class: getHeaderRowClass(rowIndex),
            style: getHeaderRowStyle(rowIndex),
            key: rowIndex
          },
          renderTh(item, rowSpan, rowIndex)
        );
      })
    );
  }
});

export { TableHeader as default };
//# sourceMappingURL=index.mjs.map