vft 0.0.1 → 0.0.3

package/src/app/table/demos/index.vue

@@ -1,453 +0,0 @@
-<!--eslint-disable-->
-<script setup lang="tsx">
-import { addUnit } from '@vri/utils';
-import { ConfigProvider, PresudoInsert as VriPresudoInsert, Table as VriTable } from '../..';
-import { Empty } from '../../empty/types';
-import { ColumnsProps } from '../types';
-
-interface Props {
-  /** 年份数据 */
-  yearsData?: number[];
-}
-
-const { yearsData = [2021, 2020, 2019, 2018, 2017, 2016, 2015] } = defineProps<Props>();
-
-const tableData: any[] = $ref([
-  {
-    name: '碳排放量碳排放量碳碳排放量碳排放量碳',
-    unit: ' ',
-    level: 2
-  },
-  {
-    name: '碳排放总量(范围一、二)',
-    unit: '吨CO2e',
-    values: [
-      {
-        year: 2021,
-        value: '159,540,000.00'
-      },
-      {
-        year: 2020,
-        value: '167,440,000.00'
-      },
-      {
-        year: 2019
-      }
-    ]
-  },
-  {
-    name: '碳排放量(范围一)',
-    unit: '碳排放总量(范围一、二)碳排放总量(范围一、二)碳排放总量(范围一、二)',
-    values: [
-      {
-        year: 2021,
-        value: '121,390,000.00'
-      },
-      {
-        year: 2020,
-        value: '127,570,000.00'
-      },
-      {
-        year: 2019,
-        value: '132,170,000.00'
-      }
-    ]
-  },
-  {
-    name: '碳排放强度',
-    unit: ' ',
-    level: 2
-  },
-  {
-    name: '单位营收碳排放量(范围一、二)',
-    unit: '千克CO2e/万元',
-    values: [
-      {
-        year: 2021,
-        value: '610.25'
-      },
-      {
-        year: 2020,
-        value: '865.84'
-      },
-      {
-        year: 2019,
-        value: '691.67'
-      }
-    ]
-  },
-  {
-    name: '单位营收碳排放量(范围一)',
-    unit: '千克CO2e/万元',
-    values: [
-      {
-        year: 2021,
-        value: '464.32'
-      },
-      {
-        year: 2020,
-        value: '659.67'
-      },
-      {
-        year: 2019,
-        value: '525.15'
-      }
-    ]
-  },
-  {
-    name: '单位营收碳排放量(范围二)',
-    unit: '千克CO2e/万元',
-    values: [
-      {
-        year: 2021,
-        value: '145.93'
-      },
-      {
-        year: 2020,
-        value: '206.17'
-      },
-      {
-        year: 2019,
-        value: '166.52'
-      }
-    ]
-  },
-  {
-    name: '单位营收碳排放量(范77围二)',
-    unit: '千克CO2e/万元',
-    values: [
-      {
-        year: 2021,
-        value: '145.93'
-      },
-      {
-        year: 2020,
-        value: '206.17'
-      },
-      {
-        year: 2019,
-        value: '166.52'
-      }
-    ]
-  },
-  {
-    name: '单位营收碳排放量(66范围二)',
-    unit: '千克CO2e/万元',
-    values: [
-      {
-        year: 2021,
-        value: '145.93'
-      },
-      {
-        year: 2020,
-        value: '206.17'
-      },
-      {
-        year: 2019,
-        value: '166.52'
-      }
-    ]
-  },
-  {
-    name: '单位营收碳排放量(范55围二)',
-    unit: '千克CO2e/万元',
-    values: [
-      {
-        year: 2021,
-        value: '145.93'
-      },
-      {
-        year: 2020,
-        value: '206.17'
-      },
-      {
-        year: 2019,
-        value: '166.52'
-      }
-    ]
-  },
-  {
-    name: '单位营收碳排放量(范44围二)',
-    unit: '千克CO2e/万元',
-    values: [
-      {
-        year: 2021,
-        value: '145.93'
-      },
-      {
-        year: 2020,
-        value: '206.17'
-      },
-      {
-        year: 2019,
-        value: '166.52'
-      }
-    ]
-  },
-  {
-    name: '单位营收碳排放量(范33围二)',
-    unit: '千克CO2e/万元',
-    values: [
-      {
-        year: 2021,
-        value: '145.93'
-      },
-      {
-        year: 2020,
-        value: '206.17'
-      },
-      {
-        year: 2019,
-        value: '166.52'
-      }
-    ]
-  },
-  {
-    name: '单位营收碳排放量(范22围二)',
-    unit: '千克CO2e/万元',
-    values: [
-      {
-        year: 2021,
-        value: '145.93'
-      },
-      {
-        year: 2020,
-        value: '206.17'
-      },
-      {
-        year: 2019,
-        value: '166.52'
-      }
-    ]
-  },
-  {
-    name: '单位营收碳排放量(范11围二)',
-    unit: '千克CO2e/万元',
-    values: [
-      {
-        year: 2021,
-        value: '145.93'
-      },
-      {
-        year: 2020,
-        value: '206.17'
-      },
-      {
-        year: 2019,
-        value: '166.52'
-      }
-    ]
-  },
-  {
-    name: '单位营收碳排放量(范围二11)',
-    unit: '千克CO2e/万元',
-    values: [
-      {
-        year: 2021,
-        value: '145.93'
-      },
-      {
-        year: 2020,
-        value: '206.17'
-      },
-      {
-        year: 2019,
-        value: '166.52'
-      }
-    ]
-  },
-  {
-    name: '单位营收碳排放量(范围二331111111)',
-    unit: '千克CO2e/万元',
-    values: [
-      {
-        year: 2021,
-        value: '145.93'
-      },
-      {
-        year: 2020,
-        value: '206.17'
-      },
-      {
-        year: 2019,
-        value: '166.52'
-      }
-    ]
-  }
-]);
-
-let columns = $ref<ColumnsProps[]>([
-  {
-    title: '指标指标指标指标指标指标指标指标指标指标指标',
-    fixed: true,
-    width: 120,
-    sorter: true,
-    // sortDirection: 'asc',
-    align: 'left',
-    dataIndex: 'name',
-    render: (text, record, index) => {
-      // 第一层大标题
-      if (record.level === 1) {
-        return (
-          <>
-            <div class={{ placeholder: !!index }}></div>
-            <div class={['h-21px', 'mt-12px']}>
-              <VriPresudoInsert
-                class={['title', 'absolute ml-[-13px]']}
-                text={text}
-                prseudoCfg={{
-                  color: '#15b4f1',
-                  width: 4,
-                  distance: 9
-                }}
-              />
-            </div>
-          </>
-        );
-      }
-      // 小标题
-      else if (record.level === 2) {
-        return <div class="sub-title">{text}</div>;
-      }
-      return text;
-    }
-  },
-  {
-    title: '单位单位单位单位单位单位单位单位单位单位单位单位',
-    align: 'left',
-    sorter: true,
-    dataIndex: 'unit',
-    cellClassName: 'unit-cell'
-  },
-  {
-    title: '单位单位单位单位单位单位',
-    align: 'left',
-    dataIndex: 'unit',
-    cellClassName: 'unit-cell'
-  }
-]);
-
-yearsData.forEach((item) => {
-  columns.push({
-    title: item + '年' + item + '年' + item + '年' + item + '年',
-    align: 'right',
-    render: (_, record) => {
-      if ([1, 2].includes(record?.level)) {
-        return '';
-      }
-      const data = record?.values?.filter((subItem) => {
-        return subItem.year === item;
-      });
-      return data?.[0]?.value || '-';
-    }
-  });
-});
-
-const tableInitStyle = {
-  // tableHeight: addUnit(800, true),
-
-  theadThHeight: '32px',
-  theadBackground: '#f9f9f9',
-  theadPadding: '7.5px 10px',
-  theadFontSize: '13px',
-  theadColor: '#111',
-
-  tbodyTrHeight: addUnit(100, true) as string,
-  tbodyBackground: '#fff',
-  tbodyPadding: '7.5px 10px',
-  tbodyFontSize: '14px',
-  tbodyColor: '#111',
-  tbodyLineClamp: 4
-};
-
-function onSortChange(data) {
-  console.log(data, '======-');
-}
-
-let test = $ref();
-</script>
-
-<template>
-  <!--<div id="test" ref="test" class="w-90vw ml-5vw border border-red-700 h-500px overflow-auto">-->
-  <button @click="tableData = []">测试</button>
-  <config-provider :themeVars="tableInitStyle" class="h-full">
-    <vri-table
-      headerSticky
-      :autoSize="false"
-      emptyPlaceholder="--"
-      @sortChange="onSortChange"
-      :tableData="tableData"
-      :columns="columns"
-      :emptyCfg="{
-        img: Empty.NO_SEARCH
-      }"
-    >
-      <template v-if="yearsData?.length > 2" #thead-right>
-        <span class="showAngle" />
-      </template>
-    </vri-table>
-  </config-provider>
-  <!--</div>-->
-</template>
-
-<style scoped lang="less">
-#test {
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-:deep(.vri-table) {
-  .title {
-    white-space: nowrap;
-    font-weight: bold;
-    font-size: 16px;
-    color: #000;
-  }
-
-  .vri-table__tbody__left {
-    .vri-table__tbody__td {
-      padding: 7.5px 0 7.5px 13px !important;
-    }
-  }
-
-  .sub-title {
-    width: 130px;
-    white-space: nowrap;
-    color: #ee5a00;
-    font-weight: 400;
-    font-size: 15px;
-  }
-
-  .placeholder {
-    min-width: 100% !important;
-    width: 100vw;
-    //position: relative;
-
-    &::before {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 8px;
-      display: block;
-      background: #fafafa;
-      left: 0;
-    }
-  }
-
-  .unit-cell {
-    font-size: 12px !important;
-  }
-
-  .showAngle {
-    content: '';
-    background: url('./rightAngle.png');
-    position: absolute;
-    right: 0.04rem;
-    width: 0.12rem;
-    height: 0.16rem;
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-  }
-}
-</style>

package/src/app/table/header.vue

@@ -1,203 +0,0 @@
-<script setup lang="tsx">
-import { addUnit, createNamespace } from '@vri/utils';
-import type { ColumnsProps } from './types';
-
-interface Props {
-  /** 表头数据 */
-  columns: ColumnsProps[];
-}
-
-const { columns } = defineProps<Props>();
-
-const emit = defineEmits(['SortChange']);
-
-const [name, bem] = /* hoist-static*/ createNamespace('thead');
-
-defineOptions({
-  name
-});
-
-let theadRight = ref();
-
-// const [thNoWidthRefs, setThNoWidthRefs] = useRefs();
-
-const slots = useSlots();
-
-const _style = $computed(() => {
-  return (item) => {
-    const alignType = item?.align === 'left' ? 'flex-start' : item?.align === 'right' ? 'flex-end' : 'center';
-    const _align = { justifyContent: alignType || 'center', textAlign: item?.align || 'center' };
-    return item.width ? { width: addUnit(item.width, true), ..._align } : _align;
-  };
-});
-
-// 当前排序的索引
-const activeIndex = $computed(() => {
-  const _columns = columns as ColumnsProps[] & { activeIndex?: number };
-  return _columns?.activeIndex
-    ? _columns?.activeIndex
-    : columns.findIndex((item) => {
-        return item.sorter === true;
-      });
-});
-
-const sortClass = $computed(() => {
-  return (item, index) => {
-    return ['translate-x-2px', bem('sort'), { 'rotate-180': item.sortDirection === 'asc' }, activeIndex === index ? 'opacity-100' : 'opacity-0'];
-  };
-});
-
-// 排序事件
-function onSortChange(item, index, columns) {
-  item.sortDirection = item.sortDirection === 'asc' ? 'desc' : 'asc';
-  columns.activeIndex = index;
-  columns.scrollLeft = theadRight.value.scrollLeft;
-  emit('SortChange', {
-    sortDirection: item.sortDirection,
-    dataIndex: item?.dataIndex,
-    index,
-    item
-  });
-}
-
-// 渲染表头单元格
-const renderItem = (isFixed?) => {
-  return (
-    <div class={bem('tr')}>
-      {columns.map((item, index) => {
-        return (isFixed && item.fixed) || (!isFixed && !item.fixed) ? (
-          <span
-            class={[bem('th'), item?.headerClassName, { [bem('th__custom_width') as string]: !item.width }, { 'translate-x-7px': item?.sorter }]}
-            key={index}
-            style={_style(item)}
-            onClick={item?.sorter ? () => onSortChange(item, index, columns) : () => {}}
-          >
-            <span class={bem('cell')}>{item.title}</span>
-            {item?.sorter ? <span class={sortClass(item, index)}>&emsp;</span> : null}
-          </span>
-        ) : null;
-      })}
-    </div>
-  );
-};
-
-// 表头内容
-const renderHeader = () => {
-  return (
-    <div id={`${namespace}-thead`} class={bem()}>
-      <div class={bem('left')}>{renderItem(true)}</div>
-      <div ref={theadRight} class={bem('right')}>
-        {renderItem()}
-      </div>
-      {slots.default?.()}
-    </div>
-  );
-};
-
-// function handleScroll(e) {
-//   console.log('currentScrollName', currentScrollName);
-//   const tbody = document.querySelector(`#${namespace}-tbody .${namespace}-table__tbody__right`);
-//   if (tbody && currentScrollName === 'thead') {
-//     console.log(e.target.scrollLeft, tbody.scrollLeft);
-//     tbody.scrollLeft = e.target.scrollLeft;
-//   }
-// }
-
-defineRender(() => {
-  return renderHeader();
-});
-
-defineExpose({
-  theadRight
-});
-</script>
-
-<style lang="less">
-@prefix-cls: ~'@{pro-namespace}-thead';
-@prefix-var: ~'--@{prefix-cls}';
-@prefix-var-table: ~'--@{pro-namespace}-table';
-
-body {
-  @{prefix-var}-height: 40px;
-  @{prefix-var}-background: white;
-  @{prefix-var}-color: black;
-  @{prefix-var}-font-size: 14px;
-  @{prefix-var}-font-weight: 500;
-  @{prefix-var}-padding: 10px 5px;
-  @{prefix-var}-line-clamp: 4;
-  @{prefix-var}-border-bottom-color: #eee;
-  @{prefix-var}-show-border-bottom: none;
-}
-
-.@{prefix-cls} {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  background: var(~'@{prefix-var}-background');
-  box-sizing: border-box;
-
-  &::after {
-    display: var(~'@{prefix-var}-show-border-bottom');
-    .hairline-bottom(var(~'@{prefix-var}-border-bottom-color'));
-  }
-
-  .@{prefix-cls}__right {
-    flex: auto;
-    overflow-x: auto;
-    overflow-y: hidden;
-    display: flex;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-
-    .@{prefix-cls}__th:last-child {
-      padding-right: var(~'@{prefix-var-table}-last-col-padding-right');
-    }
-  }
-
-  .@{prefix-cls}__left {
-    box-sizing: border-box;
-
-    .@{prefix-cls}__th:first-child {
-      padding-left: var(~'@{prefix-var-table}-first-col-padding-left');
-    }
-  }
-
-  .@{prefix-cls}__tr {
-    display: flex;
-    color: var(~'@{prefix-var}-color');
-    font-size: var(~'@{prefix-var}-font-size');
-    font-weight: var(~'@{prefix-var}-font-weight');
-
-    .@{prefix-cls}__th {
-      box-sizing: border-box;
-      flex-shrink: 0;
-      display: inline-flex;
-      align-items: center;
-      padding: var(~'@{prefix-var}-padding');
-      width: var(~'@{prefix-var-table}-base-th-width');
-
-      .@{prefix-cls}__cell {
-        word-break: break-all;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: var(~'@{prefix-var}-line-clamp');
-        //width: 100%;
-      }
-    }
-
-  }
-
-  .@{prefix-cls}__sort {
-    display: inline-block;
-    width: 7px;
-    height: 10px;
-    background: url(./assets/sort_triangle.png) no-repeat;
-    background-size: cover;
-  }
-}
-</style>