vft 0.0.1

package/src/app/table/index.less

@@ -0,0 +1,119 @@
+@prefix-cls: ~'@{pro-namespace}-table';
+@prefix-cls-tbody: ~'@{pro-namespace}-tbody';
+@prefix-var: ~'--@{prefix-cls-tbody}';
+@prefix-var-table: ~'--@{pro-namespace}-table';
+
+body {
+    @{prefix-var}-background: #eee;
+    @{prefix-var}-color: black;
+    @{prefix-var}-font-size: 14px;
+    @{prefix-var}-padding: 10px 5px;
+    @{prefix-var}-line-clamp: 1;
+    @{prefix-var}-tr-height: 50px;
+    @{prefix-var-table}-base-th-width: 100px;
+    @{prefix-var}-font-weight: 400;
+    @{prefix-var}-line-height: 20px;
+    @{prefix-var}-border-bottom-color: #eee;
+    @{prefix-var}-show-border-bottom: none;
+    @{prefix-var}-show-border-bottom-last: none;
+    @{prefix-var-table}-height: 100%;
+    @{prefix-var-table}-last-col-padding-right: 15px;
+    @{prefix-var-table}-first-col-padding-left: 15px;
+}
+
+.@{prefix-cls} {
+  width: 100%;
+  height: var(~'@{prefix-var-table}-height');
+  overflow: hidden;
+
+  .@{prefix-cls}__tbody {
+    display: flex;
+    position: relative;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    background-color: var(~'@{prefix-var}-background');
+
+    .@{prefix-cls}__tbody__left {
+      flex: none;
+      flex-wrap: wrap;
+      height: fit-content;
+
+      .@{prefix-cls}__tbody__tr {
+        .@{prefix-cls}__tbody__td:first-child {
+          padding-left: var(~'@{prefix-var-table}-first-col-padding-left');
+        }
+      }
+    }
+
+    .@{prefix-cls}__tbody__right {
+      -webkit-overflow-scrolling: touch;
+      flex: auto;
+      height: fit-content;
+      overflow-x: auto;
+      overflow-y: hidden;
+      flex-wrap: wrap;
+
+      &::-webkit-scrollbar {
+        opacity: 0;
+      }
+
+      .@{prefix-cls}__tbody__tr {
+        .@{prefix-cls}__tbody__td:last-child {
+          padding-right: var(~'@{prefix-var-table}-last-col-padding-right');
+        }
+      }
+    }
+
+    .@{prefix-cls}__tbody__tr {
+      display: flex;
+      align-items: center;
+      //height: calc(var(~'@{prefix-var}-tr-height') * var(~'@{prefix-var}-line-clamp'));
+      height: var(~'@{prefix-var}-tr-height');
+
+      .@{prefix-cls}__tbody__td {
+        height: 100%;
+        flex-shrink: 0;
+        color: var(~'@{prefix-var}-color');
+        font-size: var(~'@{prefix-var}-font-size');
+        line-height: var(~'@{prefix-var}-line-height');
+        font-weight: var(~'@{prefix-var}-font-weight');
+        padding: var(~'@{prefix-var}-padding');
+        box-sizing: border-box;
+        width: var(~'@{prefix-var-table}-base-th-width');
+        word-break: break-all;
+        position: relative;
+
+        .@{prefix-cls}__tbody__cell {
+          width: 100%;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: var(~'@{prefix-var}-line-clamp');
+        }
+
+        &::after {
+          display: var(~'@{prefix-var}-show-border-bottom');
+          .hairline-bottom(var(~'@{prefix-var}-border-bottom-color'));
+        }
+      }
+    }
+
+    .@{prefix-cls}__tbody__tr:last-child {
+      .@{prefix-cls}__tbody__td {
+        &::after {
+          display: var(~'@{prefix-var}-show-border-bottom-last');
+        }
+      }
+    }
+  }
+
+  .@{prefix-cls}__spin {
+    margin-top: 2px;
+
+    .@{pro-namespace}-spin {
+      justify-content: center;
+    }
+  }
+}

package/src/app/table/index.ts

@@ -0,0 +1,5 @@
+import Table from './index.vue';
+
+export * from './types';
+
+export { Table };

package/src/app/table/index.vue

@@ -0,0 +1,478 @@
+<script setup lang="tsx">
+import { useEventListener } from '@vri/use';
+import { addUnit, createNamespace, isFunction, generateCssVars } from '@vri/utils';
+import { useDebounceFn, useInfiniteScroll, useResizeObserver } from '@vueuse/core';
+import type { EmptyProps } from '../../common/empty';
+import { Empty } from '../../common/empty';
+import { Spin } from '../../common/spin';
+import { PageLoading } from '../page-loading';
+import TableHeader from './header.vue';
+import type { ColumnsProps } from './types';
+import { EXTRA_WIDTH } from './types';
+
+interface TableProps {
+  /** 表头数据 */
+  columns: ColumnsProps[];
+  /** 表格数据 */
+  tableData: any[];
+  /** 空数据占位符 */
+  emptyPlaceholder?: string;
+  /** 表头是否应用 sticky */
+  headerSticky?: boolean;
+  /** sticky Top 的值 */
+  stickyTop?: number;
+  /** 空状态配置 */
+  emptyCfg?: EmptyProps;
+  /** 分页加载每页数量 */
+  pageSize?: number;
+  /**  */
+  wrapperContainerId?: string;
+  /** 自适应表格宽高 */
+  autoSize?: boolean;
+  /** 是否在加载中 */
+  loading?: boolean;
+  /** 清除排序 */
+  clearSort?: boolean;
+}
+
+const namespace = 'vri';
+
+const {
+  tableData,
+  columns,
+  emptyPlaceholder = '-',
+  headerSticky,
+  stickyTop = 0,
+  emptyCfg,
+  pageSize = 0,
+  autoSize = false,
+  loading = false,
+  wrapperContainerId
+  // clearSort = false
+} = defineProps<TableProps>();
+
+const [name, bem] = /* hoist-static*/ createNamespace('table');
+
+const emit = defineEmits(['onTbodyScroll', 'sortChange']);
+
+defineOptions({
+  name
+});
+
+// 标示当前是表头还是表体滚动
+let currentScrollName = $ref('');
+// 判断表格渲染状态
+let tableRenderStatus = $ref(false);
+
+// 分页参数相关
+let page = $ref(1);
+const pageNum = $computed(() => Math.ceil(tableData.length / pageSize));
+
+const instance = getCurrentInstance();
+
+// 表格的一些 ref
+let table = ref();
+let thead = ref();
+let tbody = ref();
+let tbodyLeft = ref();
+let tbodyRight = ref();
+
+const showLoading = $computed(() => {
+  return page - 1 < pageNum;
+});
+
+const debouncedInit = useDebounceFn(() => init(), 120);
+
+watch(
+  [() => loading, () => tableData, () => columns],
+  () => {
+    tableRenderStatus = false;
+    debouncedInit();
+  },
+  {
+    immediate: true
+  }
+);
+
+// 初始化表格的一些方法
+function init() {
+  nextTick(() => {
+    // 以下监控表格状态滚动相关
+    useResizeObserver(tbody, () => {
+      if (thead?.value?.theadRight?.offsetHeight && tbody?.value) {
+        tbody.value.style.height = `calc(100% - ${thead.value.theadRight.offsetHeight}px)`;
+      }
+    });
+
+    useResizeObserver(table, () => {
+      if (table?.value) {
+        table.value.style.height = `calc(100% - ${table.value.getBoundingClientRect().top - 1}px)`;
+      }
+    });
+
+    if (isFunction(instance?.vnode?.props?.onOnTbodyScroll)) {
+      useEventListener(
+        tbody,
+        'scroll',
+        (e) => {
+          emit('onTbodyScroll', e);
+        },
+        {
+          passive: true
+        }
+      );
+    }
+
+    if (autoSize) {
+      useEventListener(
+        window,
+        'resize',
+        () => {
+          resetTableSize();
+        },
+        {
+          passive: true
+        }
+      );
+    }
+
+    if (pageSize) {
+      // const _scrollTarget = isString(scrollTarget) ? document.querySelector(scrollTarget) : scrollTarget;
+
+      useInfiniteScroll(
+        tbody,
+        () => {
+          if (page - 1 < pageNum) {
+            page++;
+            resetTableSize();
+          }
+        },
+        { distance: 10 }
+      );
+    }
+
+    initScroll();
+
+    resetTableSize();
+  });
+}
+
+// 表头表体滚动联动
+function initScroll() {
+  const theadScroll = thead?.value?.theadRight;
+
+  useEventListener(tbodyRight, 'touchstart', () => {
+    currentScrollName = 'tbody';
+  });
+
+  if (thead?.value?.theadRight) {
+    useEventListener(theadScroll, 'touchstart', () => {
+      currentScrollName = 'thead';
+    });
+  }
+
+  useEventListener(
+    tbodyRight,
+    'scroll',
+    (e) => {
+      if (theadScroll && currentScrollName === 'tbody') {
+        theadScroll.scrollLeft = (e?.target as HTMLElement)?.scrollLeft;
+      }
+    },
+    {
+      passive: true
+    }
+  );
+
+  useEventListener(
+    theadScroll,
+    'scroll',
+    (e) => {
+      if (tbodyRight?.value && currentScrollName === 'thead') {
+        tbodyRight.value.scrollLeft = (e?.target as HTMLElement)?.scrollLeft;
+      }
+    },
+    {
+      passive: true
+    }
+  );
+}
+
+const tableVars = $computed(() => {
+  if (autoSize) {
+    return generateCssVars({
+      tableBaseThWidth: 'auto',
+      tbodyTrHeight: 'auto'
+    });
+  }
+});
+
+const _style = $computed(() => {
+  return (item) => {
+    const _align = { textAlign: item?.cellAlign || item?.align || 'center' };
+    return item.width ? { width: addUnit(item.width, true), ..._align } : _align;
+  };
+});
+
+// 渲染单元格
+const renderCell = (isLeft?) => {
+  const _bemTbody = bem('tbody');
+  return (
+    <div class={[isLeft ? _bemTbody + '__left' : _bemTbody + '__right']} ref={isLeft ? tbodyLeft : tbodyRight}>
+      {tableData.slice(0, pageSize ? pageSize * page : undefined).map((item, index) => {
+        return (
+          <div class={[_bemTbody + '__tr']} key={index}>
+            {columns.map((subItem, subIndex) => {
+              const _dataIndex = subItem?.dataIndex;
+              const _cellName = subItem?.cellClassName;
+              return (isLeft ? !subItem.fixed : subItem.fixed) ? null : (
+                <span
+                  key={_dataIndex || subIndex}
+                  class={[_bemTbody + '__td', _cellName ? (isFunction(_cellName) ? _cellName?.(item) : _cellName) : '', { [_bemTbody + '__custom_width']: !subItem.width }]}
+                  style={_style(subItem)}
+                >
+                  <span class={_bemTbody + '__cell'}>{subItem?.render ? subItem?.render?.(item?.[_dataIndex!], item, index) : item[_dataIndex!] ?? (subItem?.emptyPlaceholder || emptyPlaceholder)}</span>
+                </span>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+// const showTable = $computed(() => tableRenderStatus || !autoSize);
+
+// 表格非固定列总宽度
+let rightTableWidth = $ref(0);
+
+function resetTableSize() {
+  if (tbody?.value && thead?.value && tbody.value?.offsetHeight && thead.value?.theadRight?.offsetHeight) {
+    rightTableWidth = 0;
+
+    let tbodyCustom = '.vri-table__tbody__custom_width';
+    let thCustom = '.vri-thead__th__custom_width';
+
+    if (wrapperContainerId) {
+      tbodyCustom = '#' + wrapperContainerId + ' ' + tbodyCustom;
+      thCustom = '#' + wrapperContainerId + ' ' + thCustom;
+    }
+    // 重置表体列宽
+    const tds: NodeListOf<HTMLElement> = document.querySelectorAll(tbodyCustom);
+    const ths: NodeListOf<HTMLElement> = document.querySelectorAll(thCustom);
+
+    if (autoSize) {
+      for (let i = 0; i < tds.length; i++) {
+        tds[i].style.width = 'auto';
+      }
+      for (const item of ths) {
+        item.style.width = 'auto';
+      }
+    }
+
+    nextTick(() => {
+      if (autoSize) {
+        resetTableWidthSize(true);
+        resetTableWidthSize();
+        resetTableHeightSize();
+      } else {
+        resetTableHeightSize();
+      }
+    });
+  }
+}
+
+// 表格宽度大小重置
+function resetTableWidthSize(isLeft = false) {
+  const headerClassName = '.' + namespace + '-thead__';
+  const tbodyClassName = '.' + namespace + '-table__tbody__';
+  let theadFixClassName = isLeft ? `${headerClassName}left ${headerClassName}tr` : `${headerClassName}right ${headerClassName}tr`;
+  let tbodyFixClassName = isLeft ? `${tbodyClassName}left ${tbodyClassName}tr` : `${tbodyClassName}right ${tbodyClassName}tr`;
+  let tbodyTr = isLeft ? `${tbodyClassName}left` : `${tbodyClassName}right`;
+
+  if (wrapperContainerId) {
+    theadFixClassName = '#' + wrapperContainerId + ' ' + theadFixClassName;
+    tbodyFixClassName = '#' + wrapperContainerId + ' ' + tbodyFixClassName;
+    tbodyTr = '#' + wrapperContainerId + ' ' + tbodyTr;
+  }
+
+
+  // 记录宽度
+  let arrWidth: number[][] = $ref([]);
+  // 表头单元格
+  const headerTr = document.querySelector(theadFixClassName) as HTMLElement;
+  const headerCell: NodeListOf<HTMLElement> = headerTr.querySelectorAll(`${headerClassName}th`);
+  const bodyMain: HTMLElement = document.querySelector(tbodyTr)!;
+  // 表体单元格
+  const bodyTr: NodeListOf<HTMLElement> = document.querySelectorAll(tbodyFixClassName);
+
+  for (let i = 0; i < bodyTr.length; i++) {
+    const bodyTrTd: NodeListOf<HTMLElement> = bodyTr[i].querySelectorAll(`${tbodyClassName}td`);
+    for (let j = 0; j < bodyTrTd.length; j++) {
+      if (!arrWidth[j]) {
+        arrWidth[j] = [];
+      }
+      arrWidth[j].push(bodyTrTd[j].offsetWidth);
+    }
+  }
+
+  // 重置表头列宽
+  for (let i = 0; i < headerCell.length; i++) {
+    arrWidth[i].push(headerCell[i].offsetWidth);
+    let maxWidth = Math.max.apply(null, arrWidth[i]);
+    if (headerCell[i].className.includes('thead__th__custom_width')) {
+      headerCell[i].style.width = maxWidth + EXTRA_WIDTH + 'px';
+    }
+  }
+
+  // 重置表体列宽
+  for (let i = 0; i < bodyTr.length; i++) {
+    const bodyTrTd: NodeListOf<HTMLElement> = bodyTr[i].querySelectorAll(`${tbodyClassName}td`);
+    for (let j = 0; j < bodyTrTd.length; j++) {
+      let maxWidth = Math.max.apply(null, arrWidth[j]);
+      if (bodyTrTd[j].className.includes('table__tbody__custom_width')) {
+        bodyTrTd[j].style.width = maxWidth + EXTRA_WIDTH + 'px';
+      }
+    }
+  }
+
+  for (const item of arrWidth) {
+    rightTableWidth += Math.max.apply(null, item);
+  }
+  bodyMain.style.width = rightTableWidth + 'px';
+  headerTr.style.width = rightTableWidth + 'px';
+}
+
+// 表格高度大小重置
+function resetTableHeightSize() {
+  const tbodyClassName = '.' + namespace + '-table__tbody__';
+  let tbodyLeftClassName = `${tbodyClassName}left ${tbodyClassName}tr`;
+  let tbodyRightClassName = `${tbodyClassName}right ${tbodyClassName}tr`;
+
+  if (wrapperContainerId) {
+    tbodyLeftClassName = '#' + wrapperContainerId + ' ' + tbodyLeftClassName;
+    tbodyRightClassName = '#' + wrapperContainerId + ' ' + tbodyRightClassName;
+  }
+
+  let tbodyLeftTr: NodeListOf<HTMLElement> = document.querySelectorAll(tbodyLeftClassName);
+  let tbodyRightTr: NodeListOf<HTMLElement> = document.querySelectorAll(tbodyRightClassName);
+
+  for (let i = 0; i < tbodyLeftTr.length; i++) {
+    tbodyLeftTr[i].style.height = 'auto';
+  }
+
+  for (let i = 0; i < tbodyRightTr.length; i++) {
+    tbodyRightTr[i].style.height = 'auto';
+  }
+
+  nextTick(() => {
+    // 记录宽度
+    let arrHeight: number[][] = $ref([]);
+
+    for (let i = 0; i < tbodyLeftTr?.length; i++) {
+      const bodyTrTd: NodeListOf<HTMLElement> = tbodyLeftTr[i].querySelectorAll(`${tbodyClassName}td`);
+      for (let j = 0; j < bodyTrTd.length; j++) {
+        if (!arrHeight[i]) {
+          arrHeight[i] = [];
+        }
+        arrHeight[i].push(bodyTrTd[j].offsetHeight);
+      }
+    }
+
+    for (let i = 0; i < tbodyRightTr?.length; i++) {
+      const bodyTrTd: NodeListOf<HTMLElement> = tbodyRightTr[i].querySelectorAll(`${tbodyClassName}td`);
+      for (let j = 0; j < bodyTrTd.length; j++) {
+        if (!arrHeight[i]) {
+          arrHeight[i] = [];
+        }
+        arrHeight[i].push(bodyTrTd[j].offsetHeight);
+      }
+    }
+
+    for (let i = 0; i < tbodyLeftTr.length; i++) {
+      let maxHeight = Math.max.apply(null, arrHeight[i]);
+      tbodyLeftTr[i].style.height = maxHeight + 'px';
+    }
+
+    for (let i = 0; i < tbodyRightTr.length; i++) {
+      let maxHeight = Math.max.apply(null, arrHeight[i]);
+      tbodyRightTr[i].style.height = maxHeight + 'px';
+    }
+
+    nextTick(() => {
+      tableRenderStatus = true;
+      const _columns = columns as ColumnsProps[] & { scrollLeft?: number };
+      if (_columns?.scrollLeft) {
+        const theadScroll = thead?.value?.theadRight;
+        theadScroll.scrollLeft = _columns?.scrollLeft;
+        tbodyRight.value.scrollLeft = _columns?.scrollLeft;
+      }
+    });
+  });
+}
+
+const headerStickyStyle = computed(() => {
+  return headerSticky
+    ? {
+        position: 'sticky',
+        top: addUnit(stickyTop, true),
+        zIndex: 1
+      }
+    : null;
+});
+
+const slots = useSlots();
+
+function onSortChange(data) {
+  emit('sortChange', { ...data, scrollLeft: tbodyRight.value.scrollLeft });
+}
+
+// v-slots={{
+//  loading: <span class={bem('loading')}></span>
+// }}
+const initLoadingStyle = generateCssVars({
+  pageLoadingHeight: '100%'
+});
+
+defineRender(() => {
+  return (
+    <div ref={table} id={`${namespace}-table`} class={bem()} style={{ ...tableVars }}>
+      {loading ? (
+        <div class={[bem('loading-con'), 'flex-center h-full']}>
+          <PageLoading spinCfg={{ size: 35 }} style={initLoadingStyle} />
+        </div>
+      ) : tableData?.length ? (
+        <div style={{ opacity: tableRenderStatus ? 1 : 0 }} class="h-full">
+          <TableHeader ref={thead} style={headerStickyStyle.value} columns={columns} onSortChange={onSortChange}>
+            {slots['thead-right']?.()}
+          </TableHeader>
+          <div ref={tbody} id={`${namespace}-tbody`} class={bem('tbody')}>
+            {renderCell(true)}
+            {renderCell()}
+          </div>
+          {pageSize && showLoading ? (
+            <div class={[bem('spin')]}>
+              <Spin>加载中...</Spin>
+            </div>
+          ) : null}
+        </div>
+      ) : (
+        <Empty class="h-full" {...emptyCfg}></Empty>
+      )}
+    </div>
+  );
+});
+
+defineExpose({
+  table,
+  thead,
+  tbody,
+  tbodyLeft,
+  tbodyRight
+});
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

package/src/app/table/md/api.md

@@ -0,0 +1,23 @@
+## Props
+
+| 参数             | 说明                                                | 类型           | 默认值  |
+| ---------------- | --------------------------------------------------- | -------------- | ------- |
+| columns          | 表头数据                                            | ColumnsProps[] | -       |
+| tableData        | 表格数据                                            | any[]          | -       |
+| emptyPlaceholder | 空数据占位符                                        | Numberish      | `-`     |
+| headerSticky     | 表头是否应用 `sticky`(注意 `sticky` 与外部布局有关) | boolean        | `false` |
+| stickyTop        | sticky top 的值                                     | number         | 0       |
+
+### ColumnsProps
+
+| 参数            | 说明                                                     | 类型                                              | 默认值   |
+| --------------- | -------------------------------------------------------- | ------------------------------------------------- | -------- |
+| title           | 列头显示的文字                                           | Numberish                                         | -        |
+| fixed           | 是否固定在左侧                                           | boolean                                           | `false`  |
+| width           | 列宽                                                     | Numberish                                         | -        |
+| align           | 设置列的对齐方式                                         | AlignType                                         | `center` |
+| cellAlign       | 设置表体对齐方式 优先级大于 `align`                      | AlignType                                         | -        |
+| dataIndex       | 列数据在数据项中对应的索引                               | string                                            | -        |
+| render          | 自定义 `render` 参数分别为当前行的值，当前行数据，行索引 | (text, record, index) => JSX.Element or Numberish | -        |
+| cellClassName   | 自定义列 `class`                                         | string                                            | -        |
+| headerClassName | 自定义表头 `class`                                       | string                                            | -        |

package/src/app/table/md/demo.md

@@ -0,0 +1,3 @@
+# Demo 示例
+
+[//]: # 'Todo'

package/src/app/table/types.ts

@@ -0,0 +1,45 @@
+import type { Ref } from 'vue';
+
+type AlignType = 'left' | 'center' | 'right';
+
+export interface ColumnsProps {
+  /** 列头显示文字 */
+  title: Numberish;
+  /** 是否固定在左侧 */
+  fixed?: boolean;
+  /** 列宽 */
+  width?: Numberish;
+  /** 设置列的对齐方式 */
+  align?: AlignType;
+  /** 设置表体对齐方式 优先级 > align */
+  cellAlign?: AlignType;
+  /** 列数据在数据项中对应的路径 */
+  dataIndex?: string;
+  /** 自定义 render 参数分别为当前行的值，当前行数据，行索引 */
+  render?: (text, record, index) => JSX.Element | Numberish;
+  /** render 的上一级 Dom 完全自定义 */
+  renderCell?: (text, record, index) => JSX.Element | Numberish;
+  /** 自定义列 class */
+  cellClassName?: string | ((record) => string);
+  /** 自定义表头 class */
+  headerClassName?: string;
+  /** 是否开启排序 */
+  sorter?: boolean;
+  /** 排序设置的默认顺序 */
+  sortDirection?: 'desc' | 'asc';
+  /** 空数据占位符 */
+  emptyPlaceholder?: string
+}
+
+export type TargetRef = Element | Ref<Element | undefined> | Window | any;
+
+export const EXTRA_WIDTH = 10;
+
+/** 排序的信息 */
+export type SortDataProps = {
+  /** 索引 */
+  index: number;
+  item: ColumnsProps;
+  /** 当前表格的 scrollLeft 值 */
+  scrollLeft?: number;
+} & Pick<ColumnsProps, 'dataIndex' | 'sortDirection'>;