ivue-material-plus/dist/unplugin-vue-components/lib/components/ivue-table/table-header/index.js

A high quality UI components Library with Vue.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var index = require('../../ivue-icon/index2.js');
var utils = require('./utils.js');
var styles = require('./styles.js');
var events = require('./events.js');
var tableLayoutObserver = require('../table-layout-observer.js');
var filterPanel = require('../table/filter-panel.js');
var defaults = require('../table/defaults.js');

const prefixCls = "ivue-table";
var TableHeader = vue.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 = vue.getCurrentInstance();
    const IvueTable = vue.inject(defaults.TableContextKey);
    const filterPanels = vue.ref({});
    const {
      columnRows,
      isGroup
    } = utils["default"](props);
    const {
      getHeaderCellClass,
      getHeaderCellStyle,
      getHeaderRowStyle,
      getHeaderRowClass
    } = styles["default"](props);
    const {
      handleSortClick,
      handleHeaderClick,
      handleMouseDown,
      handleMouseMove,
      handleMouseOut
    } = events["default"](props, emit);
    const { handleColumnsChange, handleScrollableWidthChange } = tableLayoutObserver["default"](IvueTable);
    vm.state = {
      handleColumnsChange,
      handleScrollableWidthChange
    };
    vm.filterPanels = filterPanels;
    const renderSortable = (column) => {
      if (!column.sortable) {
        return null;
      }
      return vue.h(
        "span",
        {
          class: `${prefixCls}-header--sortable`
        },
        [
          vue.h(
            index["default"],
            {
              class: `${prefixCls}-header--ascending`,
              onClick: ($event) => {
                handleSortClick($event, column, "ascending");
              }
            },
            {
              default: () => "arrow_drop_up"
            }
          ),
          vue.h(
            index["default"],
            {
              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 vue.h("span", {}, [
        column.renderHeader({
          column,
          $index: cellIndex,
          store: props.store,
          _self: vm.$parent
        })
      ]);
    };
    const renderFilter = (column) => {
      if (!column.filterable) {
        return null;
      }
      return vue.h(filterPanel["default"], {
        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 vue.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();
            }
          },
          [
            vue.h(
              "div",
              {
                class: [
                  "cell",
                  column.filteredValue && column.filteredValue.length > 0 ? "highlight" : ""
                ]
              },
              vue.h(
                "div",
                {
                  class: "cell-content"
                },
                [
                  renderHeader(column, cellIndex),
                  renderSortable(column),
                  renderFilter(column)
                ]
              )
            )
          ]
        );
      });
    };
    vue.onMounted(() => {
      vue.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 vue.h(
      "thead",
      {
        class: {
          ["is-group"]: isGroup
        }
      },
      columnRows.map((item, rowIndex) => {
        return vue.h(
          "tr",
          {
            class: getHeaderRowClass(rowIndex),
            style: getHeaderRowStyle(rowIndex),
            key: rowIndex
          },
          renderTh(item, rowSpan, rowIndex)
        );
      })
    );
  }
});

exports["default"] = TableHeader;
//# sourceMappingURL=index.js.map