@lx-frontend/wrap-element-ui 0.4.6-beta.2 → 1.0.0-beta.1

package/src/components/EditableTable/useDragSort.ts

@@ -0,0 +1,292 @@
+import { onBeforeUnmount, onMounted, ref, Ref } from 'vue';
+import { IColumnConfig, IDraggingData, IEmits, IProps } from "./types"
+import throttle from "lodash/throttle"
+
+interface IUseDragSortParams {
+  props: IProps
+  emit: IEmits
+  viewSettingDragSortOptions: Ref<IColumnConfig[]>
+  beforeDragStart: () => boolean
+  currScope: Ref<any>
+  currentPage: Ref<number>
+  pageSize: Ref<number>
+  tableDomRef: Ref<any>
+}
+export default function useDragSort({props, emit, viewSettingDragSortOptions, currentPage, pageSize, beforeDragStart, currScope, tableDomRef }: IUseDragSortParams) {
+
+  const draggingData = ref<IDraggingData>({}); // 拖拽相关数据
+  const isMouseDown = ref(false);
+  const dragType = ref<'row' | 'view-setting'>('row');
+  // 如果页面存在多个table实例，如果没有这个值来区分正在操作哪个表格，拖拽功能会有异常
+  const isOperating = ref(false);
+
+  onMounted(() => {
+    tableDomRef.value.$el.addEventListener('mousedown', () => {isOperating.value = true});
+    document.addEventListener('mousedown', handleDocumentMouseDown);
+    document.addEventListener('mousemove', handleDocumentMouseMove);
+    document.addEventListener('mouseup', handleDocumentMouseUp);
+  })
+
+  onBeforeUnmount(() => {
+    tableDomRef.value.$el.removeEventListener('mousedown', () => isOperating.value = true);
+    document.removeEventListener('mousedown', handleDocumentMouseDown);
+    document.removeEventListener('mousemove', handleDocumentMouseMove);
+    document.removeEventListener('mouseup', handleDocumentMouseUp);
+  })
+
+  const handleDocumentMouseDown = (e) => {
+    isMouseDown.value = true;
+    const target = e.target as HTMLElement
+
+    if (typeof target.dataset?.index === 'undefined') return
+
+    if ([...target.classList].includes('row-drag-target')) {
+      dragType.value = 'row';
+      if (!isOperating.value) return
+      // 处理列表行拖拽
+      handleDragMouseDown(e, +target.dataset.index);
+    }
+
+    if ([...target.classList].includes('view-setting-drag-target')) {
+      dragType.value = 'view-setting';
+      // 处理显示设置拖拽
+      handleViewSettingDragMouseDown(e, +target.dataset.index);
+    }
+  }
+
+  const handleDocumentMouseMove = (e) => {
+    if (!isMouseDown.value || typeof draggingData.value.draggingIndex === 'undefined') {
+      return;
+    }
+
+    throttledMoveHandler(e);
+  }
+
+  const handleDocumentMouseUp = (e) => {
+    isOperating.value = false;
+    isMouseDown.value = false;
+    if (typeof draggingData.value.draggingIndex === 'undefined') {
+      return;
+    }
+    if (dragType.value === 'row') {
+      handleDragDrop(e, currScope.value);
+    }
+
+    if (dragType.value === 'view-setting') {
+      handleViewSettingDragDrop();
+    }
+  }
+
+  const handleDragMouseDown = (event, draggingIndex) => {
+    if (!beforeDragStart()) return
+    const rows = [...document.getElementsByClassName(`custom-row-classname`)] as HTMLElement[];
+    const rowDoms: Record<number, HTMLElement[]> = [];
+    for (let i = 0; i < rows.length; i++) {
+      const row = rows[i];
+      const clsIndex = ([...row.classList].find(cls => cls.startsWith(`custom-row-classname-`)) ?? '').split('-').pop() ?? 'NaN';
+      if (typeof +clsIndex === 'number') {
+        rowDoms[+clsIndex] = rowDoms[+clsIndex] || [];
+        rowDoms[+clsIndex].push(row);
+      }
+    }
+
+    draggingData.value.isDragging = true;
+    draggingData.value.rowDoms = rowDoms;
+    draggingData.value.draggingIndex = +draggingIndex;
+    draggingData.value.rowsRange = [];
+
+    draggingData.value.startPosition = {
+      x: event.clientX,
+      y: event.clientY
+    };
+
+    // 列表过大时拖拽有性能问题，所以拖拽范围限制在拖拽元素的上下15个元素内
+    const dragSemiRange = props.dragSemiRange ?? 15;
+    for (const i of Object.keys(rowDoms).map(Number)) {
+      if (i < draggingIndex - dragSemiRange || i > draggingIndex + dragSemiRange) {
+        draggingData.value.rowsRange[i] = undefined
+        continue
+      }
+      const rowdom = rowDoms[i];
+      // 在Chrom中，relative加z-index可以让拖拽更流畅，然而在Safari中无效
+      // 如果在Safari中relative有效，其实蒙层都没有必要了
+      rowdom.forEach(el => el.style.setProperty('position', 'relative'));
+
+      if (i !== draggingData.value.draggingIndex) {
+        rowdom.forEach(el => el.style.setProperty('transition', 'transform 0.25s ease'));
+      } else {
+        rowdom.forEach(el => el.style.setProperty('z-index', '100'));
+        // 当有固定列时，一行的内容并不是一个tr，而是两个或多个tr的叠加显示，其中有的列内容被隐藏
+        // 所以拖拽时，需要同时拖拽所有的tr，并显示所有内容，否则拖拽效果会显示异常
+        const tds = rowdom
+          .map(dom => dom.querySelectorAll('td'))
+          .reduce((pre, curr) => ([...pre, ...curr]), [] as HTMLElement[])
+          .filter(td => td.classList.contains('is-hidden'));
+        draggingData.value.hiddenTds = tds;
+        tds.forEach(td => td.classList.remove('is-hidden'));
+
+        // 生成一个蒙层，防止拖动时文字被选中
+        const fullScreenDiv = document.createElement('div');
+        fullScreenDiv.style.position = 'fixed';
+        fullScreenDiv.style.top = '0';
+        fullScreenDiv.style.left = '0';
+        fullScreenDiv.style.right = '0';
+        fullScreenDiv.style.bottom = '0';
+        fullScreenDiv.style.zIndex = '999';
+        fullScreenDiv.style.cursor = 'grabbing';
+        document.body.appendChild(fullScreenDiv);
+        draggingData.value.fullScreenDiv = fullScreenDiv;
+      }
+      // 计算每一行的高度范围
+      const rect = rowdom[0].getBoundingClientRect()
+      draggingData.value.rowsRange = draggingData.value.rowsRange || [];
+      draggingData.value.rowsRange[i] = ([
+        rect.top,
+        rect.bottom
+      ]);
+    }
+  }
+
+  const calcPositionRowShouldBePlace = (rowsRange: ([number, number])[], draggingClientY: number) => {
+    if (!draggingData.value.rowsRange ||
+      typeof draggingData.value.draggingIndex === 'undefined' ||
+      typeof props.dragSemiRange === 'undefined'
+    ) return;
+    const rangeLeft = draggingData.value.draggingIndex - props.dragSemiRange <= 0 ? 0 : draggingData.value.draggingIndex - props.dragSemiRange
+    const rangeRight = draggingData.value.draggingIndex + props.dragSemiRange >= draggingData.value.rowsRange.length ? draggingData.value.rowsRange.length - 1 : draggingData.value.draggingIndex + props.dragSemiRange
+    if (!rowsRange) return -1;
+    if (draggingClientY <= rowsRange[rangeLeft][0]) return rangeLeft;
+    if (draggingClientY >= rowsRange[rangeRight][1]) return rangeRight;
+    for (let i = rangeLeft; i <= rangeRight; i++) {
+      const [top, bottom] = rowsRange[i];
+      if (draggingClientY > top && draggingClientY < bottom) {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  const clearMovingData = () => {
+    const rowdoms = draggingData.value.rowDoms || [];
+    const draggingIndex = draggingData.value.draggingIndex ?? -1
+    const dragSemiRange = props.dragSemiRange ?? 15;
+    for (const i of Object.keys(rowdoms).map(Number)) {
+      if (i < draggingIndex - dragSemiRange || i > draggingIndex + dragSemiRange) continue
+      const doms = rowdoms[i];
+      doms.forEach(el => {
+        el.style.removeProperty('position');
+        el.style.removeProperty('transition');
+        el.style.removeProperty('transform');
+        el.style.removeProperty('z-index');
+      });
+    }
+    draggingData.value.fullScreenDiv?.parentNode?.removeChild(draggingData.value.fullScreenDiv);
+    draggingData.value.hiddenTds?.forEach(el => el.classList.add('is-hidden'));
+    draggingData.value = {};
+    currScope.value = null
+  }
+
+  const handleDragDrop = (event, scope) => {
+    if (!scope) return
+    const { draggingIndex = 0, dropIndex = draggingIndex } = draggingData.value;
+    const dataList = scope.store.states.data;
+    const movedRow = dataList[draggingIndex];
+    const newList = [
+      ...dataList.slice(0, +draggingIndex),
+      ...dataList.slice(draggingIndex + 1)
+    ];
+    newList.splice(dropIndex, 0, movedRow);
+    scope.store.states.data = newList;
+    emit('row-drag-drop', {
+      row: movedRow,
+      fromIndex: draggingIndex,
+      toIndex: dropIndex,
+      page: currentPage.value,
+      size: pageSize.value
+    });
+    // 清理工作
+    clearMovingData();
+  }
+
+  const handleViewSettingDragMouseDown = (event, index) => {
+    const rowDoms = [...document.getElementsByClassName('view-setting-draggable-item')]
+      .reduce((pre, item, index) => ({...pre, [index]: [item]}), {});
+    draggingData.value.isDragging = true;
+    draggingData.value.rowDoms = rowDoms;
+    draggingData.value.draggingIndex = +index;
+    draggingData.value.startPosition = {
+      x: event.clientX,
+      y: event.clientY
+    };
+
+    for (const i of Object.keys(rowDoms).map(Number)) {
+      const rowdoms = rowDoms[i];
+      rowdoms.forEach((el) => {
+        el.style.setProperty('position', 'relative');
+      });
+
+      if (i !== draggingData.value.draggingIndex) {
+        rowdoms.forEach(el => el.style.setProperty('transition', 'transform 0.25s ease'));
+      }
+      const rect = rowdoms[0].getBoundingClientRect();
+      draggingData.value.rowsRange = draggingData.value.rowsRange || [];
+      draggingData.value.rowsRange.push([
+        rect.top,
+        rect.bottom
+      ]);
+    }
+  }
+
+  const handleMove = (event) => {
+    if (!draggingData.value.isDragging) return;
+    const { y = 0 } = draggingData.value.startPosition || {};
+    const { draggingIndex = -1, rowDoms = {} } = draggingData.value;
+    const draggingRow = rowDoms?.[draggingIndex ?? 0];
+    for (let i = 0; i < draggingRow.length; i++) {
+      const dom = draggingRow[i];
+      dom?.style.setProperty('transform', `translateY(${event.clientY - y}px)`);
+    }
+
+    // 判断应该落在第几行
+    const idx = calcPositionRowShouldBePlace(draggingData.value.rowsRange as [number, number][], event.clientY);
+    if (typeof idx !== 'number') return;
+    const [top, bottom] = draggingData.value.rowsRange![draggingIndex] as [number, number];
+    draggingData.value.dropIndex = idx;
+    const rowHeight = bottom - top;
+    const dragSemiRange = props.dragSemiRange ?? 15;
+    for (const i of Object.keys(rowDoms).map(Number)) {
+      if (i < draggingIndex - dragSemiRange || i > draggingIndex + dragSemiRange || draggingIndex === i) continue
+      const doms = rowDoms[i];
+      if (idx < draggingIndex) {
+        if (i >= idx && i < draggingIndex) {
+          doms.forEach(el => el.style.setProperty('transform', `translateY(${rowHeight}px)`));
+        } else {
+          doms.forEach(el => el.style.removeProperty('transform'));
+        }
+      } else if (idx > draggingIndex) {
+        if (i <= idx && i > draggingIndex) {
+          doms.forEach(el => el.style.setProperty('transform', `translateY(${-rowHeight}px)`));
+        } else {
+          doms.forEach(el => el.style.removeProperty('transform'));
+        }
+      } else {
+        doms.forEach(el => el.style.removeProperty('transform'));
+      }
+    }
+  }
+
+  const handleViewSettingDragDrop = () => {
+    const { draggingIndex = 0, dropIndex = draggingIndex } = draggingData.value;
+    const movedRow = viewSettingDragSortOptions.value[draggingIndex];
+    const newList = [
+      ...viewSettingDragSortOptions.value.slice(0, draggingIndex),
+      ...viewSettingDragSortOptions.value.slice(draggingIndex + 1)
+    ];
+    newList.splice(dropIndex, 0, movedRow);
+    viewSettingDragSortOptions.value = newList;
+    // 清理工作
+    clearMovingData();
+  }
+
+  const throttledMoveHandler = throttle(handleMove, 10);
+}

package/src/components/EditableTable/usePagination.ts

@@ -0,0 +1,34 @@
+import { ref } from "vue"
+import { IEmits } from "./types"
+
+interface IParams {
+  emit: IEmits
+  beforePageChange: () => void
+}
+
+export default function usePagination({emit, beforePageChange}: IParams) {
+
+  const pageSize = ref(10);
+  const currentPage = ref(1);
+
+  const handlePageSizeChange = (size: number) => {
+    pageSize.value = size;
+    currentPage.value = 1;
+    // searchValue.value = {};
+    beforePageChange();
+    emit('page-change', {size, page: currentPage.value});
+  }
+
+  const handleCurrPageChange = (curr: number) => {
+    // searchValue.value = {};
+    beforePageChange();
+    emit('page-change', {size: pageSize.value, page: curr});
+  }
+
+  return {
+    pageSize,
+    currentPage,
+    handlePageSizeChange,
+    handleCurrPageChange
+  }
+}

package/src/components/EditableTable/useRowBgColor.ts

@@ -0,0 +1,51 @@
+import { ref, nextTick } from "vue"
+import { IColorList, IEmits } from "./types"
+
+interface IUseRowBgColorParams {
+  colorList: IColorList;
+  emit: IEmits;
+}
+
+export default function useRowBgColor({colorList, emit}: IUseRowBgColorParams) {
+  const colorPopoverRef = ref<any>(null);
+
+  const isDefaultColor = (id: number) => {
+    if (!id) {
+      // 没有颜色id，则认为是默认色
+      return true;
+    }
+    return colorList.find(c => +c.id === +id)?.default;
+  }
+
+  const getColorById = (id: number, type: 'bg' | 'sample' = 'bg') => {
+    return colorList.find(c => +c.id === +id)?.[`${type}Color`] || '';
+  }
+
+  const setRowStyle = (scope) => {
+    const row = scope.row;
+    return {
+      backgroundColor: row.colorId ? getColorById(row.colorId) : ''
+    }
+  }
+
+  const handleColorChange = async (colorId: number, scope) => {
+    const { row, $index: rowIndex, store } = scope;
+    const dataList = store.states.data;
+    const curRow = {...dataList[rowIndex], colorId: +colorId};
+    const newList = [...dataList];
+    newList.splice(rowIndex, 1, curRow);
+    store.states.data = newList;
+    emit('row-bg-change', {colorId, row, rowIndex});
+    await nextTick();
+    // TODO: 为什么不是数组？为什么关闭弹窗不生效了？
+    colorPopoverRef.value?.doClose();
+  }
+
+  return {
+    isDefaultColor,
+    getColorById,
+    setRowStyle,
+    handleColorChange,
+    colorPopoverRef
+  }
+}

package/src/components/EditableTable/useViewSetting.ts

@@ -0,0 +1,67 @@
+import { ref, nextTick, watch, ComputedRef, Ref, onMounted } from "vue"
+import { IColumnConfig, IProps } from "./types"
+
+interface IViewSettingParams {
+  tableDomRef: any
+  showingColumns: Ref<string[]>
+  actualColumns: ComputedRef<IColumnConfig[]>
+  props: IProps
+}
+
+export default function useViewSetting({ tableDomRef, showingColumns, actualColumns, props }: IViewSettingParams) {
+  const viewSettingDragSortOptions = ref<IColumnConfig[]>([]);
+  const columnsToBeShown = ref<string[]>([]); // 显示设置弹窗中勾选的列
+  const viewSettingVisible = ref(false);
+  const leftFixedColumnCount = ref(0);
+
+  watch(
+    () => columnsToBeShown.value,
+    (val) => {
+      viewSettingDragSortOptions.value = props.columnConfig
+        .filter(c => val.includes(c.prop));
+    },
+    { immediate: true }
+  )
+
+  watch(
+    () => showingColumns.value,
+    (val) => {
+      // 只要正在显示的列发生变化，dialog中的显示项也要同步变化，反之不然
+      columnsToBeShown.value = [...val];
+    },
+    { immediate: true }
+  )
+
+  onMounted(() => {
+    leftFixedColumnCount.value = props.leftFixedCount as number;
+  })
+
+  const handleViewSettingShow = () => {
+    viewSettingDragSortOptions.value = actualColumns.value
+      .filter(c => columnsToBeShown.value.includes(c.prop));
+    viewSettingVisible.value = true;
+  }
+
+  const handleViewSettingClose = () => {
+    viewSettingVisible.value = false;
+    // 恢复显示的列
+    showingColumns.value = actualColumns.value.map(c => c.prop);
+  }
+
+  const handleViewSettingConfirm = async () => {
+    viewSettingVisible.value = false;
+    showingColumns.value = viewSettingDragSortOptions.value.map(c => c.prop);
+    await nextTick();
+    tableDomRef.value?.doLayout();
+  }
+
+  return {
+    viewSettingDragSortOptions,
+    columnsToBeShown,
+    viewSettingVisible,
+    leftFixedColumnCount,
+    handleViewSettingShow,
+    handleViewSettingClose,
+    handleViewSettingConfirm
+  }
+}

package/{packages/Ellipsis/src → src/components/Ellipsis}/MultilineEllipsis.vue

@@ -122,7 +122,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="less">
   .ellipsis {
     width: 100%;
     margin: 5px auto;

package/{packages/Ellipsis/src/Ellipsis.vue → src/components/Ellipsis/index.vue}

@@ -4,16 +4,16 @@
       :disabled="showPopover === 'off' || (showPopover !== 'always' && !isOverflow)"
       :popper-class="popoverName"
       placement="top-start"
-      trigger="hover">
+      trigger="hover"
+    >
       <div class="popover-content">
         <slot name="popover">
           <div v-for="(item, index) in contentArr" :key="getKey(item, index)">{{ item }}</div>
         </slot>
       </div>
       <div slot="reference">
-        <template v-for="(item, index) in contentArr">
+        <div v-for="(item, index) in contentArr" :key="getKey(item, index)">
           <MultilineEllipsis
-            :key="getKey(item, index)"
             :content="item"
             :fontSize="fontSize"
             :color="color"
@@ -29,7 +29,7 @@
             }"
             :isOverflow.sync="overflowArr[index]">
           </MultilineEllipsis>
-        </template>
+        </div>
       </div>
     </ElPopover>
   </div>
@@ -108,7 +108,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="less">
   .ellipsis-popover {
     width: 100%;
   }