element-ui-pro-components-test 1.5.0

package/packages/pro-table/src/components/ColumnSettingsItem.vue

@@ -0,0 +1,401 @@
+<template>
+  <div v-if="columns.length" class="column-settings-item-list">
+    <div class="title">{{ title }}</div>
+    <div ref="dragDropZoneRef" class="drag-drop-zone">
+      <div 
+        class="column-settings-item"
+        v-for="(column, index) in columns"
+        :class="{ draggable, dragging: dragIndex === index}"
+        :draggable="draggable"
+        @dragstart="(e) => onDragstart(e, index)"
+        @dragenter.prevent="onDragenter"
+        @dragover.prevent="(e) => onDragover(e, index)"
+        @dragleave="onDragleave"
+        @drop="(e) => onDrop(e, index)"
+        @dragend="onDragend"
+        :key="column.prop"  
+      >
+        <span v-if="draggable" class="icon icon-holder">
+          <HolderIcon />
+        </span>
+        <span class="switcher"></span>
+        <component 
+          :is="dynamicComponent"
+          v-bind="dynamicComponent === 'el-checkbox' 
+            ? { value: column.checkable, disabled: column.disabled } 
+            : { class: 'text-wrapper' }"
+          v-on="dynamicComponent === 'el-checkbox'
+            ? { change: (checked) => handleChange(checked, column.prop) }
+            : {}"
+        >
+          <span class="label">{{ column.label }}</span>
+          <ColumnAlignSettings :column="column" />
+          <!-- 拖拽指示元素 -->
+          <!-- start -->
+            <!-- ::before 伪元素 -->
+            <!-- start -->
+            <div v-if="index === 0 && dropIndex === index" class="indicator head-indicator"></div>
+            <!-- end -->
+            <!-- ::after 伪元素 -->
+            <!-- start -->
+            <div v-else-if="dropIndex === index + 1" class="indicator tail-indicator"></div>
+            <!-- end -->
+          <!-- end -->
+        </component>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import HolderIcon from './svg/HolderIcon'
+import ColumnAlignSettings from './ColumnAlignSettings'
+import { t } from 'element-ui-pro-components/src/locale'
+
+export default {
+  name: 'ColumnSettingsItem',
+  components: {
+    HolderIcon,
+    ColumnAlignSettings
+  },
+  inject: ["onColumnSettingsChange"],
+  props: {
+    // 列表项
+    columns: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    // 列设置
+    columnSettings: {
+      type: Object,
+    },
+  },
+  computed: {
+    // 列类型
+    title() {
+      const { columns } = this
+      if (Array.isArray(columns) && columns.length) {
+        const fixed = columns[0].fixed
+        return fixed === "left"
+          ? t('elProComponents.tableToolBar.leftFixedTitle')
+          : fixed === "right"
+          ? t('elProComponents.tableToolBar.rightFixedTitle')
+          : t('elProComponents.tableToolBar.noFixedTitle')
+      }
+
+      return ""
+    },
+    // 是否支持拖动
+    draggable() {
+      return this.columnSettings.draggable && this.columns?.length > 1
+    },
+    // 动态组件
+    dynamicComponent() {
+      return this.columnSettings.checkable ? 'el-checkbox' : 'span'
+    },
+  },
+  data() {
+    return {
+      dragIndex: -1, // 开始拖动目标的下标
+      dropIndex: -1, // 可释放目标的下标
+    }
+  },
+  methods: {
+    /**
+     * @desc 监听修改
+     * @param {Boolean} checked 状态
+     * @param {String} prop 属性
+     */
+    handleChange(checked, prop) {
+      // ProTable provide 提供
+      this.onColumnSettingsChange({ event: "check", checked, prop });
+    },
+    /**
+     * @desc 获取光标位置
+     * @param {Object} e
+     * @returns {String} top | bottom
+     */
+    getCursorPos(e) {
+      // 1. 获取元素的位置和尺寸
+      const rect = e.target.getBoundingClientRect()
+
+      // 2. 获取鼠标相对于元素的位置
+      const relativeY = e.clientY - rect.top
+
+      // 3. 判断光标在释放目标位置的上半还是下半
+      const cursorPos = relativeY < rect.height / 2 ? "top" : "bottom"
+
+      return cursorPos      
+    },
+    /**
+     * @desc 获取释放位置下标
+     * @param {Object} e
+     * @param {Number} dropIndex 释放目标的下标
+     */
+    getDropIndex(e, dropIndex) {
+      // 获取光标位置
+      const cursorPos = this.getCursorPos(e)
+      
+      // 光标在释放目标位置上半 则在释放目标位置上方插入
+      // 光标在释放目标位置下半 则在释放目标位置下方插入
+      const targetDropIndex = cursorPos === 'top' ? dropIndex : dropIndex + 1
+
+      // 当前拖拽的方向
+      const dragDirection = this.dragIndex < dropIndex ? "down" : "up"
+      
+      // 释放位置 = 开始拖拽位置
+      if (targetDropIndex === this.dragIndex) {
+        return -1
+      }
+
+      // 拖拽方向：down && 相邻 则说明位置不变
+      const isNear = Math.abs(targetDropIndex - this.dragIndex) === 1
+      if (isNear && dragDirection === 'down') {
+        return -1
+      }
+
+      return targetDropIndex
+    },
+    /**
+     * @desc 开始拖动
+     * @param {Object} e 拖拽元素对象
+     * @param {Number} index 下标
+     */
+    onDragstart(e, index) {
+      e.dataTransfer.effectAllowed = "move"
+      e.dataTransfer.dropEffect = "move"
+      this.dragIndex = index
+    },
+    /**
+     * @desc 拖入到释放目标
+     * @param {Object} e 拖拽元素对象
+     */
+    onDragenter(e) {
+      if (this.dragIndex === -1) {
+        // 其它拖拽区域
+        e.dataTransfer.dropEffect = 'none'
+      } else {
+        e.dataTransfer.dropEffect = 'move'
+      }
+    },
+    /**
+     * @desc 拖拽到释放目标上
+     * @param {Object} e 释放目标对象
+     * @param {Number} dropIndex 下标
+     */
+    onDragover(e, dropIndex) {
+      // ***参数是在事件绑定时确定的 而不是在事件触发时***
+
+      // 如果拖动到其它列 
+      if (this.dragIndex < 0) {
+        e.dataTransfer.dropEffect = 'none'
+        return
+      }
+
+      // 释放目标是开始拖动目标 则退出
+      if (this.dragIndex === dropIndex) {
+        this.dropIndex = -1
+        return
+      }
+
+      // 获取释放位置下标
+      this.dropIndex = this.getDropIndex(e, dropIndex)
+    },
+    /**
+     * @desc 离开可释放目标
+     */
+    onDragleave(e) {
+      const dragDropZoneRef = this.$refs.dragDropZoneRef
+      // 是否在列表区域内
+      if (dragDropZoneRef.contains(e.relatedTarget)) {
+        return
+      }
+
+      this.dropIndex = -1
+    },
+    /**
+     * @desc 释放目标停止拖拽
+     * @param {Object} e 释放目标对象
+     * @param {Number} dropIndex 释放的下标
+     */
+    onDrop(e, dropIndex) {
+      if (this.dragIndex === dropIndex) {
+        this.dropIndex = -1
+        return
+      }
+
+      // 获取释放位置下标
+      const index = this.getDropIndex(e, dropIndex)
+      if (index > -1) {
+        const { columns } = this
+        const fromProp = columns[this.dragIndex].prop
+        // 是否拖拽到最后一列
+        const isAfter = index === this.columns.length
+        const toProp = isAfter ? columns[index - 1].prop : columns[index].prop
+        // ProTable provide 提供
+        this.onColumnSettingsChange({ event: 'drop', fromProp, toProp, isAfter })
+      }
+    },
+    /**
+     * @desc 结束拖拽
+     */
+    onDragend() {
+      // 重置
+      this.dragIndex = -1
+      this.dropIndex = -1
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.column-settings-item-list {
+   > .title {
+    margin-block-start: 6px;
+    margin-block-end: 6px;
+    padding-inline-start: 24px;
+    color: rgba(42, 46, 54, 0.65);
+    font-size: 12px;
+  }
+
+  .column-settings-item {
+    display: flex;
+    align-items: center;
+    padding: 0 0 4px 0;
+    outline: none;
+    color: rgba(42, 46, 54, 0.88);
+
+    &.draggable {
+      cursor: grab;
+    }
+
+    &.dragging {
+      position: relative;
+
+      &::after {
+        position: absolute;
+        top: 0;
+        inset-inline-end: 0;
+        bottom: 4px;
+        inset-inline-start: 0;
+        border: 1px solid #1677ff;
+        opacity: 0;
+        animation-name: fade;
+        animation-duration: 0.3s;
+        animation-play-state: running;
+        animation-fill-mode: forwards;
+        content: "";
+        pointer-events: none;
+      }
+    }
+
+    .indicator {
+      width: calc(100% - 4px);
+      height: 2px;
+      background-color: #1677ff;
+      border-radius: 1px;
+      pointer-events: none;
+      position: absolute;
+      z-index: 1;
+      bottom: -3px;
+
+      &.head-indicator {
+        top: 0;
+      }
+
+      &::before,
+      &::after {
+        position: absolute;
+        left: 0;
+        top: -3px;
+        inset-inline-start: -6px;
+        width: 8px;
+        height: 8px;
+        background-color: transparent;
+        border: 2px solid #1677ff;
+        border-radius: 50%;
+        content: "";
+        box-sizing: border-box;
+      }
+    }
+
+    .icon-holder {
+      flex-shrink: 0;
+      width: 24px;
+      line-height: 24px;
+      text-align: center;
+      visibility: visible;
+      opacity: 0.2;
+      transition: opacity 0.3s;
+    }
+
+    .switcher {
+      flex: none;
+      align-self: stretch;
+      width: 24px;
+      margin: 0;
+      line-height: 24px;
+      text-align: center;
+      cursor: unset;
+      user-select: none;
+      transition: all 0.3s;
+      border-radius: 6px;
+    }
+
+    ::v-deep .el-checkbox,
+    .text-wrapper {
+      flex: 1;
+    }
+
+    ::v-deep .el-checkbox__label,
+    .text-wrapper {
+      display: inline-flex;
+      padding: 0 4px;
+      line-height: 24px;
+      border-radius: 6px;
+      box-sizing: border-box;
+      transition: background-color 0.2s;
+      position: relative;
+    }
+
+    ::v-deep .el-checkbox__label {
+      width: calc(100% - 18px);
+      margin-left: 4px;
+    }
+
+    ::v-deep .label {
+      display: inline-block;
+      max-width: 80px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      word-break: break-all;
+      white-space: nowrap;
+
+      &:empty::before {
+        content: '\00a0';
+      }
+    }
+
+    &:hover {
+      ::v-deep .el-checkbox__label,
+      .text-wrapper {
+        background: rgba(42, 46, 54, 0.04);
+      }
+
+      .icon-algin-group {
+        display: inline-flex;
+      }
+    }
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>

package/packages/pro-table/src/components/svg/ArrowIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor"
+    aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path
+      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z">
+    </path>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ArrowIcon'
+}
+</script>
+
+<style scoped></style>

package/packages/pro-table/src/components/svg/HolderIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    t="1768466031154" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4754"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" fill="currentColor">
+    <path
+      d="M300 276.497a56 56 0 1 0 56-96.994 56 56 0 0 0-56 96.994z m0 284a56 56 0 1 0 56-96.994 56 56 0 0 0-56 96.994zM640 228a56 56 0 1 0 112 0 56 56 0 0 0-112 0z m0 284a56 56 0 1 0 112 0 56 56 0 0 0-112 0zM300 844.497a56 56 0 1 0 56-96.994 56 56 0 0 0-56 96.994zM640 796a56 56 0 1 0 112 0 56 56 0 0 0-112 0z"
+      p-id="4755"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'HolderIcon'
+}
+</script>
+
+<style scoped></style>

package/packages/pro-table/src/components/svg/SettingIcon.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    t="1768525838046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10889"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" fill="currentColor">
+    <path
+      d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56c10.1-8.6 13.8-22.6 9.3-35.2l-0.9-2.6c-18.1-50.5-44.9-96.9-79.7-137.9l-1.8-2.1c-8.6-10.1-22.5-13.9-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85c-2.4-13.1-12.7-23.3-25.8-25.7l-2.7-0.5c-52.1-9.4-106.9-9.4-159 0l-2.7 0.5c-13.1 2.4-23.4 12.6-25.8 25.7l-15.8 85.4c-35.9 13.6-69.2 32.9-99 57.4l-81.9-29.1c-12.5-4.4-26.5-0.7-35.1 9.5l-1.8 2.1c-34.8 41.1-61.6 87.5-79.7 137.9l-0.9 2.6c-4.5 12.5-0.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5c-10.1 8.6-13.8 22.6-9.3 35.2l0.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1c8.6 10.1 22.5 13.9 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4c2.4 13.1 12.7 23.3 25.8 25.7l2.7 0.5c26.1 4.7 52.8 7.1 79.5 7.1 26.7 0 53.5-2.4 79.5-7.1l2.7-0.5c13.1-2.4 23.4-12.6 25.8-25.7l15.7-85c36.2-13.6 69.7-32.9 99.7-57.6l81.3 28.9c12.5 4.4 26.5 0.7 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l0.9-2.6c4.5-12.3 0.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9c-11.3 26.1-25.6 50.7-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97c-28.1 3.2-56.8 3.2-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9z"
+      p-id="10890"></path>
+    <path
+      d="M512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m79.2 255.2C570 602.3 541.9 614 512 614c-29.9 0-58-11.7-79.2-32.8C411.7 560 400 531.9 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8C612.3 444 624 472.1 624 502c0 29.9-11.7 58-32.8 79.2z"
+      p-id="10891"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SettingIcon'
+}
+</script>
+
+<style scoped></style>

package/packages/pro-table/src/components/svg/VerticalAlginBottomIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    t="1768466105119" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6880"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
+    <path
+      d="M955.968 928v-66.944h-864V928h864z m-427.904-114.752l150.784-150.784H565.76V100.864H490.24l0.128 561.6H377.216l150.848 150.784z"
+      fill="currentColor" p-id="6881"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'VerticalAlignBottomIcon'
+}
+</script>
+
+<style scoped></style>

package/packages/pro-table/src/components/svg/VerticalAlginMiddleIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    t="1768466311335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9722"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" fill="currentColor">
+    <path
+      d="M512 614.4l-153.6 153.6 102.4 0 0 204.8 102.4 0 0-204.8 102.4 0L512 614.4zM665.6 256l-102.4 0L563.2 51.2 460.8 51.2l0 204.8L358.4 256l153.6 153.6L665.6 256zM921.6 512c0-28.3136-2.4576-51.2-30.72-51.2L133.12 460.8C104.8576 460.8 102.4 483.6864 102.4 512c0 28.2112 2.4576 51.2 30.72 51.2L890.88 563.2C919.1424 563.2 921.6 540.2112 921.6 512z"
+      p-id="9723"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'VerticalAlignMiddleIcon'
+}
+</script>
+
+<style scoped></style>

package/packages/pro-table/src/components/svg/VerticalAlignTopIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    t="1768466090113" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5827"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
+    <path
+      d="M955.968 100.864v66.944h-864V100.864h864zM528.064 215.616l150.784 150.784H565.76V928H490.24l0.128-561.6H377.216L528 215.68z"
+      fill="currentColor" p-id="5828"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'VerticalAlignTopIcon'
+}
+</script>
+
+<style scoped></style>