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

A high quality UI components Library with Vue.js

{"version":3,"file":"index.mjs","sources":["../../../../../../src/components/ivue-table/table-header/index.ts"],"sourcesContent":["import {\r\n  h,\r\n  defineComponent,\r\n  inject,\r\n  getCurrentInstance,\r\n  onMounted,\r\n  nextTick,\r\n  ref,\r\n} from 'vue';\r\nimport IvueIcon from '../../ivue-icon/index.vue';\r\n\r\nimport useUtils from './utils';\r\nimport useStyle from './styles';\r\nimport useEvent from './events';\r\nimport useTableLayoutObserver from '../table-layout-observer';\r\n\r\n// 过滤组件\r\nimport FilterPanel from '../table/filter-panel.vue';\r\n\r\n// ts\r\nimport { TableContextKey } from '../table/defaults';\r\nimport type { TableColumnCtx } from '../table-column/defaults';\r\nimport type { PropType } from 'vue';\r\nimport type {\r\n  TableHeader,\r\n  FilterPanelInstance,\r\n  TableHeaderProps,\r\n} from './types';\r\n\r\nconst prefixCls = 'ivue-table';\r\n\r\nexport default defineComponent({\r\n  props: {\r\n    /**\r\n     * 列是否固定在左侧或者右侧。 true 表示固定在左侧\r\n     *\r\n     * @type {String}\r\n     */\r\n    fixed: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    /**\r\n     * store\r\n     *\r\n     * @type {Object}\r\n     */\r\n    store: {\r\n      required: true,\r\n      type: Object as PropType<TableHeaderProps['store']>,\r\n    },\r\n    /**\r\n     * 是否带有纵向边框\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    border: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 默认的排序列的 prop 和顺序。\r\n     *\r\n     * @type {Object}\r\n     */\r\n    defaultSort: {\r\n      type: Object as PropType<TableHeaderProps['defaultSort']>,\r\n      default: () => {\r\n        return {\r\n          prop: '',\r\n          order: '',\r\n        };\r\n      },\r\n    },\r\n    /**\r\n     * tooltip点击是否阻止当前事件在捕获和冒泡阶段的进一步传播\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    tooltipStop: {\r\n      type: Boolean,\r\n    },\r\n  },\r\n  setup(props: TableHeaderProps, { emit }) {\r\n    // vm\r\n    const vm = getCurrentInstance() as TableHeader;\r\n\r\n    // inject\r\n    const IvueTable = inject(TableContextKey);\r\n\r\n    // data\r\n\r\n    // 过滤的列节点\r\n    const filterPanels = ref<Record<number, FilterPanelInstance>>({});\r\n\r\n    const {\r\n      // 获取当前列的行数\r\n      columnRows,\r\n      isGroup,\r\n    } = useUtils(props);\r\n\r\n    const {\r\n      // 头部行样式\r\n      getHeaderCellClass,\r\n      getHeaderCellStyle,\r\n      getHeaderRowStyle,\r\n      getHeaderRowClass,\r\n    } = useStyle(props);\r\n\r\n    // 事件\r\n    const {\r\n      handleSortClick,\r\n      handleHeaderClick,\r\n      handleMouseDown,\r\n      handleMouseMove,\r\n      handleMouseOut,\r\n    } = useEvent(props, emit);\r\n\r\n    // 布局改变监听\r\n    const { handleColumnsChange, handleScrollableWidthChange } =\r\n      useTableLayoutObserver(IvueTable);\r\n\r\n    vm.state = {\r\n      handleColumnsChange,\r\n      handleScrollableWidthChange,\r\n    };\r\n\r\n    vm.filterPanels = filterPanels;\r\n\r\n    // methods\r\n\r\n    // 渲染排序\r\n    const renderSortable = (column) => {\r\n      // 是否有排序\r\n      if (!column.sortable) {\r\n        return null;\r\n      }\r\n\r\n      return h(\r\n        'span',\r\n        {\r\n          class: `${prefixCls}-header--sortable`,\r\n        },\r\n        [\r\n          // 上按钮\r\n          h(\r\n            IvueIcon,\r\n            {\r\n              class: `${prefixCls}-header--ascending`,\r\n              onClick: ($event: Event) => {\r\n                handleSortClick($event, column, 'ascending');\r\n              },\r\n            },\r\n            {\r\n              default: () => 'arrow_drop_up',\r\n            }\r\n          ),\r\n          // 下按钮\r\n          h(\r\n            IvueIcon,\r\n            {\r\n              class: `${prefixCls}-header--descending`,\r\n              onClick: ($event: Event) => {\r\n                handleSortClick($event, column, 'descending');\r\n              },\r\n            },\r\n            {\r\n              default: () => 'arrow_drop_down',\r\n            }\r\n          ),\r\n        ]\r\n      );\r\n    };\r\n\r\n    // 渲染头部\r\n    const renderHeader = (column, cellIndex: number) => {\r\n      // 是否有头部\r\n      if (!column.renderHeader) {\r\n        return column.label;\r\n      }\r\n\r\n      return h('span', {}, [\r\n        column.renderHeader({\r\n          column,\r\n          $index: cellIndex,\r\n          store: props.store,\r\n          _self: vm.$parent,\r\n        }),\r\n      ]);\r\n    };\r\n\r\n    // 渲染过滤\r\n    const renderFilter = (column: TableColumnCtx) => {\r\n      if (!column.filterable) {\r\n        return null;\r\n      }\r\n\r\n      return h(FilterPanel, {\r\n        // 当前列\r\n        column,\r\n        // store\r\n        store: props.store,\r\n        // 过滤弹出框的定位\r\n        placement: column.filterPlacement,\r\n        // tooltip点击是否阻止当前事件在捕获和冒泡阶段的进一步传播\r\n        tooltipStop: props.tooltipStop,\r\n        // 更新列数据\r\n        upDataColumn: (key: string, value: boolean) => {\r\n          column[key] = value;\r\n        },\r\n      });\r\n    };\r\n\r\n    // 渲染 th\r\n    const renderTh = (\r\n      list: TableColumnCtx[],\r\n      rowSpan: number,\r\n      rowIndex: number\r\n    ) => {\r\n      return list.map((column: TableColumnCtx, cellIndex: number) => {\r\n        // 规定单元格可横跨的行数\r\n        if (column.rowSpan > rowSpan) {\r\n          rowSpan = column.rowSpan;\r\n        }\r\n\r\n        return h(\r\n          'th',\r\n          {\r\n            // class\r\n            class: getHeaderCellClass(rowIndex, cellIndex, list, column),\r\n            // style\r\n            style: getHeaderCellStyle(rowIndex, cellIndex, list, column),\r\n            // 规定单元格可横跨的列数。\r\n            colspan: column.colSpan,\r\n            // 规定单元格可横跨的行数\r\n            rowspan: column.rowSpan,\r\n            // key\r\n            key: `${column.id}-thead`,\r\n            onClick: ($event: Event) => {\r\n              // 头部点击\r\n              handleHeaderClick($event, column);\r\n            },\r\n            // 鼠标按下\r\n            onMousedown: ($event: MouseEvent) => {\r\n              handleMouseDown($event, column);\r\n            },\r\n            // 鼠标移动\r\n            onMousemove: ($event: MouseEvent) => {\r\n              handleMouseMove($event, column);\r\n            },\r\n            // 鼠标退出\r\n            onMouseout: () => {\r\n              handleMouseOut();\r\n            },\r\n          },\r\n          [\r\n            // cell\r\n            h(\r\n              'div',\r\n              {\r\n                class: [\r\n                  'cell',\r\n                  // 是否有选择过滤\r\n                  column.filteredValue && column.filteredValue.length > 0\r\n                    ? 'highlight'\r\n                    : '',\r\n                ],\r\n              },\r\n              h(\r\n                'div',\r\n                {\r\n                  class: 'cell-content',\r\n                },\r\n                [\r\n                  // 渲染头部\r\n                  renderHeader(column, cellIndex),\r\n                  // 排序\r\n                  renderSortable(column),\r\n                  // 渲染过滤\r\n                  renderFilter(column),\r\n                ]\r\n              )\r\n            ),\r\n          ]\r\n        );\r\n      });\r\n    };\r\n\r\n    // onMounted\r\n    onMounted(() => {\r\n      nextTick(() => {\r\n        const { prop, order } = props.defaultSort;\r\n\r\n        IvueTable?.store.commit('sort', { prop, order, init: true });\r\n      });\r\n    });\r\n\r\n    return {\r\n      // data\r\n      filterPanels,\r\n\r\n      // computed\r\n      isGroup,\r\n      columnRows,\r\n\r\n      // methods\r\n      renderTh,\r\n      handleColumnsChange,\r\n      getHeaderRowStyle,\r\n      getHeaderRowClass,\r\n    };\r\n  },\r\n  render() {\r\n    const {\r\n      columnRows,\r\n      renderTh,\r\n      isGroup,\r\n      getHeaderRowStyle,\r\n      getHeaderRowClass,\r\n    } = this;\r\n\r\n    const rowSpan = 1;\r\n\r\n    return h(\r\n      'thead',\r\n      {\r\n        class: {\r\n          ['is-group']: isGroup,\r\n        },\r\n      },\r\n      columnRows.map((item: TableColumnCtx, rowIndex: number) => {\r\n        return h(\r\n          'tr',\r\n          {\r\n            class: getHeaderRowClass(rowIndex),\r\n            style: getHeaderRowStyle(rowIndex),\r\n            key: rowIndex,\r\n          },\r\n          renderTh(item, rowSpan, rowIndex)\r\n        );\r\n      })\r\n    );\r\n  },\r\n});\r\n"],"names":["useTableLayoutObserver"],"mappings":"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"}