hongluan-ui/es/components/simple-table/src/simple-table.mjs.map

Hongluan Component Library for Vue 3

{"version":3,"file":"simple-table.mjs","sources":["../../../../../../packages/components/simple-table/src/simple-table.vue"],"sourcesContent":["<template>\n  <table\n    ref=\"tableRef\"\n    :class=\"[\n      namespace,\n      size,\n      border,\n      {\n        'hover': hover,\n        'list': list,\n        'auto-height': autoHeight,\n        'table-fixed': tableFixed,\n      },\n      stripe == 'even' ? 'striped-even' : '',\n      stripe == 'odd' ? 'striped-odd' : '',\n      typeof stripe === 'boolean' && stripe ? 'striped-odd' : '',\n      scrollClass,\n    ]\"\n    :style=\"[\n      padding ? `--table-padding: ${padding}` : '',\n      cellPadding ? `--table-td-padding: ${cellPadding}` : '',\n      gap ? `--table-gap: ${gap}` : '',\n      gapX ? `--table-gap-x: ${gapX}` : '',\n      gapY ? `--table-gap-y: ${gapY}` : '',\n      fixedColumnsStyle,\n    ]\"\n  >\n    <colgroup v-if=\"crossHover\">\n      <col v-for=\"(c, cIdx) in realColsInfo.realCols\" :key=\"cIdx\" :class=\"{hover: cIdx === hoverColIndex}\">\n    </colgroup>\n    <thead v-if=\"showHeader\" :class=\"{ 'fixed-top': fixedHeader }\">\n      <tr\n        v-for=\"(row, rowIndex) in realColsInfo.headerRows\"\n        :key=\"rowIndex\"\n        :class=\"getHeaderRowClass({ row, rowIndex })\"\n        :style=\"getHeaderRowStyle({ row, rowIndex })\"\n      >\n        <th\n          v-for=\"(column, columnIndex) of row\"\n          v-show=\"isShowCol(column)\"\n          :key=\"`${rowIndex}-${column.id}-thead`\"\n          :rowspan=\"column.rowSpan\"\n          :colspan=\"column.colSpan\"\n          :style=\"[\n            {\n              'width': column.width ? column.width : false,\n              'min-width': column.minWidth ? column.minWidth : false,\n              'max-width': column.maxWidth ? column.maxWidth : false,\n              ...getHeaderCellStyle({ row, column, rowIndex, columnIndex })\n            },\n            !!column.fixed && getColFixed(column, columnIndex).distance ? '--table-fixed-distance:' + getColFixed(column, columnIndex).distance : ''\n          ]\"\n          :class=\"[\n            {\n              ['fixed-' + getColFixed(column).position]: !!column.fixed,\n              'show-shadow': getColFixed(column).hasShadow,\n            },\n            getHeaderCellClass({ row, column, rowIndex, columnIndex })\n          ]\"\n        >\n          <div\n            v-if=\"column.headerSlotName\"\n            class=\"cell\"\n            :style=\"column.align ? `justify-content:${column.align}` : ''\"\n          >\n            <slot :name=\"column.headerSlotName\" :col=\"{ ...column, columnIndex }\"></slot>\n          </div>\n          <div v-else class=\"cell\" :style=\"column.align ? `justify-content:${column.align}` : ''\">\n            {{ column.title }}\n            <sortable-icon\n              :sortable=\"column.sortable\"\n              @sort-change=\"val => $emit('sort-change', column.prop, val)\"\n            />\n            <filter-icon\n              v-if=\"column.filter?.slotName\"\n              :placement=\"column.filter.placement\"\n              :effect=\"column.filter.effect\"\n              :popper-class=\"column.filter.popperClass\"\n              :trigger=\"column.filter.trigger\"\n            >\n              <template #default=\"{ close }\">\n                <slot :name=\"column.filter.slotName\" :close=\"close\"></slot>\n              </template>\n            </filter-icon>\n          </div>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <body-row\n        :data=\"realData\"\n        @row-click=\"(...args) => rowClicked(...args)\"\n        @cell-click=\"(...args) => $emit('cell-click', ...args)\"\n      >\n        <template v-for=\"name in slotNames\" #[name]=\"colData\">\n          <slot :name=\"name\" v-bind=\"colData\"></slot>\n        </template>\n        <template v-for=\"name in expandSlotNames\" #[name]=\"colData\">\n          <slot :name=\"name\" v-bind=\"colData\"></slot>\n        </template>\n      </body-row>\n      <tr v-if=\"$slots.more\" class=\"more-content\">\n        <td :colspan=\"realColsInfo.realCols.length\">\n          <slot name=\"more\">{{ t('hl.select.loading') }}</slot>\n        </td>\n      </tr>\n      <tr v-if=\"data?.length === 0\" class=\"empty-content\">\n        <td :colspan=\"realColsInfo.realCols.length\">\n          <slot name=\"empty\">{{ t('hl.simpletable.emptyText') }}</slot>\n        </td>\n      </tr>\n      <tr v-if=\"data === null || data === undefined\" class=\"unknown-content\">\n        <td :colspan=\"realColsInfo.realCols.length\">\n          <slot name=\"unknown\"></slot>\n        </td>\n      </tr>\n    </tbody>\n    <tfoot :class=\"{ 'fixed-bottom': fixedFooter }\">\n      <slot name=\"foot\"></slot>\n    </tfoot>\n  </table>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref, provide, watch, onMounted, toRefs } from 'vue'\nimport { useLocale, useNamespace } from '@hongluan-ui/hooks'\nimport { cloneDeep, findLast } from 'lodash-unified'\nimport SortableIcon from './sortable.vue'\nimport FilterIcon from './filter.vue'\nimport BodyRow from './body/row.vue'\nimport { simpleTableProps, simpleTableContextKey } from './simple-table'\nimport { useExpand, useResizer, useTooltip, useTree, useScroll } from './composables'\nimport { convertCols } from './utils'\n\nimport type { ColumnType } from './simple-table'\nimport type { Nullable } from '@hongluan-ui/utils'\n\nexport default defineComponent({\n  name: 'SimpleTable',\n  components: { BodyRow, SortableIcon, FilterIcon },\n  props: simpleTableProps,\n  emits: ['row-click', 'cell-click', 'sort-change', 'expand', 'tree-expand', 'current-change'],\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const { namespace } = useNamespace('simple-table')\n    const tableRef = ref<HTMLTableElement>()\n    const currentSelectedRow = ref<Nullable<unknown>>(null)\n    const fixedColumnsStyle = ref('')\n    const hoverColIndex = ref<string | number>('')\n    const {\n      rowClassName,\n      rowStyle,\n      cellClassName,\n      cellStyle,\n      firstColumnIndex,\n      expandRowKeys,\n      defaultExpandAll,\n      cols,\n    } = toRefs(props)\n\n    const realColsInfo = computed(() => convertCols(cloneDeep(cols.value)))\n    const slotNames = computed(() => realColsInfo.value.realCols.filter(c => c.slotName).map(c => c.slotName))\n    const expandSlotNames = computed(() => realColsInfo.value.realCols.filter(c => c.expand?.slotName).map(c => c.expand?.slotName))\n    const realData = computed(() => props.data ?? [])\n    const hasTreeData = computed(() =>\n      realData.value.some(rd =>\n        rd[props.treeProps.hasChildren] ||\n        (Array.isArray(rd[props.treeProps.children]) && rd[props.treeProps.children].length),\n      ),\n    )\n\n    const {\n      toggleExpandRow,\n      expandedKeyExisted,\n      toggleExpand,\n    } = useExpand({\n      expandRowKeys,\n      getRowKey,\n      defaultExpandAll,\n    })\n\n    const {\n      isShowTooltipMap,\n      clearTooltip,\n      tdMouseover,\n      tdMouseleave,\n    } = useTooltip(realColsInfo)\n\n    const {\n      tableTreeMap,\n      hasChildren,\n      toggleExpandTree,\n      walkTreeNode,\n    } = useTree({\n      load: props.load,\n      treeProps: props.treeProps,\n      getRowKey,\n      expandRowKeys,\n      defaultExpandAll,\n    })\n\n    useResizer(props.resize, cols, tableRef)\n\n    const { scrollClass } = useScroll(props.scrollContainer, realColsInfo, tableRef)\n\n    function getRowKey(row: unknown): string {\n      const rowKey = props.rowKey\n      if (!row) throw new Error('Row is required when get row identity')\n      if (typeof rowKey === 'string') {\n        if (rowKey.indexOf('.') < 0) {\n          return row[rowKey] + ''\n        }\n        const key = rowKey.split('.')\n        let current = row\n        for (let i = 0; i < key.length; i++) {\n          current = current[key[i]]\n        }\n        return current + ''\n      } else if (typeof rowKey === 'function') {\n        return rowKey.call(null, row)\n      }\n    }\n\n    const isShowCol = (col: ColumnType) => {\n      return !('$show$' in col) || col.$show$\n    }\n    const toggleColumn = (index: number, show?: boolean) => {\n      cols.value[index].$show$ = show ?? !('$show$' in cols.value[index] ? cols.value[index].$show$ : true)\n    }\n    const getColFixed = (col: ColumnType, columnIndex?: number) => {\n      const pos = (col: ColumnType) => typeof col.fixed === 'string' ? col.fixed : col.fixed?.position\n      const result = {\n        hasShadow: false,\n        position: pos(col),\n        distance: typeof col.fixed === 'string' ? 0 : (col.fixed?.distance === 'auto' ? `var(--fixed-${pos(col)}-column-${columnIndex})` : col.fixed?.distance),\n      }\n      if (result.position === 'left') {\n        result.hasShadow = findLast(realColsInfo.value.realCols, c => pos(c) === 'left') === col\n      } else if (result.position === 'right') {\n        result.hasShadow = realColsInfo.value.realCols.find(c => pos(c) === 'right') === col\n      }\n      return result\n    }\n\n    const getHeaderRowClass = ({ row, rowIndex }) => {\n      return typeof props.headerRowClassName === 'string' ? props.headerRowClassName : props.headerRowClassName({ row, rowIndex })\n    }\n    const getHeaderRowStyle = ({ row, rowIndex }) => {\n      return typeof props.headerRowStyle === 'function' ? props.headerRowStyle({ row, rowIndex }) : props.headerRowStyle\n    }\n    const getHeaderCellClass = ({ row, column, rowIndex, columnIndex }) => {\n      return typeof props.headerCellClassName === 'string' ? props.headerCellClassName : props.headerCellClassName({ row, column, rowIndex, columnIndex })\n    }\n    const getHeaderCellStyle = ({ row, column, rowIndex, columnIndex }) => {\n      return typeof props.headerCellStyle === 'function' ? props.headerCellStyle({ row, column, rowIndex, columnIndex }) : props.headerCellStyle\n    }\n\n    const rowClicked = (row, rowIndex, $event) => {\n      if (props.highlightCurrentRow) {\n        emit('current-change', row, cloneDeep(currentSelectedRow.value))\n        currentSelectedRow.value = currentSelectedRow.value === row ? null : row\n      }\n      emit('row-click', row, rowIndex, $event)\n    }\n    const setCurrentRow = row => {\n      if (props.highlightCurrentRow) {\n        emit('current-change', row, cloneDeep(currentSelectedRow.value))\n        currentSelectedRow.value = row ?? null\n      }\n    }\n\n    const getSpan = ({ row, column, rowIndex, columnIndex }) => {\n      const span = { rowspan: 1, colspan: 1 }\n      if (props.spanMethod) {\n        const result = props.spanMethod({ row, column, rowIndex, columnIndex })\n        if (Array.isArray(result)) {\n          span.rowspan = result[0]\n          span.colspan = result[1]\n        } else if (typeof result === 'object') {\n          Object.assign(span, result)\n        }\n      }\n      return span\n    }\n\n    const handleFixedAutoDistance = () => {\n      const rows = tableRef.value.rows\n      const widths: number[] = []\n      if (!rows.length) return\n\n      const cellLen = rows[0].cells.length\n      for(let i = 0; i < cellLen; i++) {\n        widths[i] = rows[0].cells[i].offsetWidth\n      }\n\n      const fixedColumns: string[] = []\n      for(let j = 0, fixedLeftWidth = 0, fixedRightWidth = 0; j < cellLen; j++) {\n        const lastIdx = cellLen - j - 1\n        let cell = rows[0].cells[j]\n        if (cell.classList.contains('fixed-left')) {\n          if (cell.style.getPropertyValue('--table-fixed-distance').startsWith('var(--fixed')) {\n            fixedColumns.push(`--fixed-left-column-${j}:${fixedLeftWidth}px`)\n          }\n          fixedLeftWidth += widths[j]\n        }\n\n        cell = rows[0].cells[lastIdx]\n        if (cell.classList.contains('fixed-right')) {\n          if (cell.style.getPropertyValue('--table-fixed-distance').startsWith('var(--fixed')) {\n            fixedColumns.push(`--fixed-right-column-${cellLen - j - 1}:${fixedRightWidth}px`)\n          }\n          fixedRightWidth += widths[lastIdx]\n        }\n      }\n      fixedColumnsStyle.value = fixedColumns.join(';')\n    }\n\n    watch(realData, () => {\n      walkTreeNode(realData.value)\n    })\n\n    onMounted(() => {\n      walkTreeNode(realData.value)\n      handleFixedAutoDistance()\n    })\n\n    provide(simpleTableContextKey, {\n      rowClassName,\n      rowStyle,\n      cellClassName,\n      cellStyle,\n      firstColumnIndex,\n      load: props.load,\n      getSpan,\n      currentSelectedRow,\n      slotNames,\n      expandSlotNames,\n      realColsInfo,\n      getRowKey,\n      toggleExpandRow,\n      expandedKeyExisted,\n      isShowTooltipMap,\n      tdMouseover,\n      tdMouseleave,\n      tableTreeMap,\n      hasChildren,\n      hasTreeData,\n      toggleExpandTree,\n      isShowCol,\n      getColFixed,\n      hoverColIndex,\n    })\n\n    return {\n      t,\n      namespace,\n      tableRef,\n      fixedColumnsStyle,\n      isShowCol,\n      getColFixed,\n      realColsInfo,\n      slotNames,\n      expandSlotNames,\n      scrollClass,\n      realData,\n      getHeaderRowClass,\n      getHeaderRowStyle,\n      getHeaderCellClass,\n      getHeaderCellStyle,\n      setCurrentRow,\n      toggleExpand,\n      toggleExpandTree,\n      rowClicked,\n      toggleColumn,\n      clearTooltip,\n      hoverColIndex,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_normalizeStyle","_renderSlot"],"mappings":"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"}