vft 0.0.1 → 0.0.3

package/src/app/table/index.less

@@ -1,119 +0,0 @@
-@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

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

package/src/app/table/index.vue

@@ -1,478 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-## 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

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

package/src/app/table/types.ts

@@ -1,45 +0,0 @@
-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'>;