@kyfe/ks-query-table 0.0.22 → 0.0.24

package/src/view/home/query-table/components/pe-table/style/header.less

@@ -1,141 +0,0 @@
-.pe-table-header_cell {
-  position: absolute;
-  left: 0;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  font-size: 12PX;
-  padding: 0 8PX;
-  height: 100%;
-  overflow: hidden;
-  background-color: #f7f8fa;
-  color: #575555;
-  // border-bottom: 1PX solid #D9DEE2;
-  // border-right: 0.5PX solid #DEDEDE;
-}
-.ks-multi-screen .pe-table-header_cell {
-  font-size: 13PX !important;
-}
-.pe-table-header_cell::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 1px;
-  height: 100%;
-  background-color: #DEDEDE;
-  transform-origin: right;
-  transform: scaleX(0.5);
-}
-.pe-table-header_cell.center {
-  justify-content: center;
-}
-.pe-table-header_cell.right {
-  justify-content: flex-end
-}
-.pe-table-header_cell.left {
-  justify-content: flex-start
-}
-// .pe-table-header_cell::before {
-//   position: absolute;
-//   content: '';
-//   display: block;
-//   padding: 8px 0;
-//   right: 0;
-//   width: 1px;
-//   background: #d9dee2;
-// }
-.pe-table-header_cell.overflow span {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.pe-table-header_cell-label {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.pe-table-header_cell-sort {
-  margin-left: 3PX;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  width: 8PX;
-  height: 14PX;
-}
-.pe-table-header_cell-sort .sort-caret {
-  background: url('../images/sort.svg');
-  background-repeat: no-repeat;
-  background-size: 8PX 4PX;
-  width: 8PX;
-  height: 4PX;
-}
-.pe-table-header_cell-sort .descending {
-  margin-top: 2PX;
-  transform: rotate(180deg);
-}
-.pe-table-header_cell-sort.ascending .sort-caret.ascending {
-  background: url('../images/sorting.svg');
-  background-repeat: no-repeat;
-  background-size: 8PX 4PX;
-}
-.pe-table-header_cell-sort.descending .sort-caret.descending {
-  background: url('../images/sorting.svg');
-  background-repeat: no-repeat;
-  background-size: 8PX 4PX;
-}
-.pe-table-header_cell-collapse {
-  position: relative;
-  box-sizing: border-box;
-  display: inline-block;
-  width: 12PX;
-  height: 20PX;
-  margin-left: 6PX;
-  margin-right: -2PX;
-  padding: 4PX 0;
-}
-.pe-table-header_cell-collapse::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: -8PX;
-  width: 8PX;
-  height: 100%;
-  background-color: transparent;
-}
-.pe-table-header_cell-collapse::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -8PX;
-  width: 8PX;
-  height: 100%;
-  background-color: transparent;
-}
-.pe-table-header_cell-collapse.unfold {
-  background: url('../images/unfold.svg');
-  background-size: 12PX 12PX;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-clip: content-box;
-}
-.pe-table-header_cell-collapse.fold {
-  background: url('../images/fold.svg');
-  background-size: 12PX 12PX;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-clip: content-box;
-}
-.pe-table-header_cell.collapse-bg {
-  background-color: #F0F3F8 !important;
-}
-
-.pe-table-scrolling__x {
-  .pe-table-header_cell__last-fixed {
-    box-shadow: 4px 0 6px -4px rgba(28, 32, 35, 0.1);
-  }
-  .pe-table-header_cell__last-fixed.pe-table-header_cell::after {
-    display: none;
-  }
-}

package/src/view/home/query-table/components/pe-table/style/index.less

@@ -1,88 +0,0 @@
-.pe-table-wrap {
-  height: 100%;
-  overflow: hidden;
-}
-.pe-table-container {
-  position: relative;
-  height: 100%;
-}
-
-.pe-table-scrollbar_horizontal-track {
-  position: absolute;
-  bottom: 0;
-  z-index: 10;
-  // height: 4PX;
-  height: var(--peHScrollbarSize);
-  width: 100%;
-  // cursor: pointer;
-}
-.pe-table-scrollbar_horizontal-thumb {
-  background-color: transparent;
-  height: 100%;
-  // cursor: pointer;
-  border-radius: 0.25rem;
-}
-
-.pe-table-scrollbar_vertical-track {
-  position: absolute;
-  right: 0;
-  height: 100%;
-  // width: 4PX;
-  width: var(--peVScrollbarSize);
-  z-index: 10;
-  // cursor: pointer;
-}
-
-.pe-table-scrollbar_vertical-thumb {
-  border-radius: 0.25rem;
-  width: 100%;
-  // cursor: pointer;
-  background-color: transparent;
-}
-
-.pe-table-wrap .hidden {
-  transition: opacity 0.3s ease-in-out;
-  opacity: 0;
-}
-.pe-table-wrap .visible {
-  transition: opacity 0.3s ease-in-out;
-  opacity: 1;
-}
-
-.pe-table-resize_line {
-  position: absolute;
-  top: 0;
-  width: 2PX;
-  height: 100%;
-  z-index: 10;
-  background-color: #e66868;
-  display: none;
-}
-.pe-table-resize_line-thumb {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 4PX;
-  background-color: #e66868;
-}
-
-.load-more {
-  position: relative;
-  will-change: transform;
-  transform: translateY(-9999px);
-  height: 180PX;
-  width: 100%;
-  // opacity: 0;
-  // z-index: -1;
-}
-.stretch {
-  position: relative;
-  will-change: transform;
-  transform: translateY(-9999px);
-  height: 44PX;
-  line-height: 44PX;
-  font-size: 13PX;
-  color: #7B7878;
-  width: 100%;
-  text-align: center;
-}

package/src/view/home/query-table/components/pe-table/style/load-more.less

@@ -1,61 +0,0 @@
-.pe-table-load-more {
-  display: flex;
-  width: 100%;
-  height: 44PX;
-  justify-content: center;
-  align-items: center;
-  .loading {
-    width: 14PX;
-    height: 14PX;
-    border: 1PX solid transparent;
-    border-top-color: #03050D;
-    border-left-color: #03050D;
-    border-bottom-color: #03050D;
-    border-radius: 50%;
-    animation: spin 1s ease-in-out infinite;
-  }
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  .loading-container {
-    display: inline-block;
-    font-size: 13PX;
-    color: #C2C0C0;
-  }
-  .loading-color {
-    padding-left: 8PX;
-    color: #03050D !important;
-  }
-
-  .dots {
-    display: inline-block;
-    width: 0;
-    overflow: hidden;
-    vertical-align: bottom;
-    animation: dotAnimation 2s infinite;
-  }
-
-  @keyframes dotAnimation {
-    0% {
-      width: 0;
-    }
-    20% {
-      width: 0.4em;
-    }
-    40% {
-      width: 0.8em;
-    }
-    60% {
-      width: 1.2em;
-    }
-    80% {
-      width: 1.2em;
-    }
-    100% {
-      width: 0;
-    }
-  }
-}

package/src/view/home/query-table/components/pe-table/style/row.less

@@ -1,6 +0,0 @@
-.pe-table-row {
-  position: absolute;
-  top: 0px;
-  transform: translateZ(0);
-  will-change: transform;
-}

package/src/view/home/query-table/components/pe-table/table-loading.vue

@@ -1,120 +0,0 @@
-<script>
-function sleep(timestamp) {
-  return new Promise(resolve => setTimeout(resolve, timestamp))
-}
-
-export default {
-  props: {
-    delayLoading: { type: Number, default: 0 },
-
-    top: {
-      type: [Number, String],
-      default: 0,
-    },
-    headerTotalHeight: {
-      type: [Number, String],
-      default: 0,
-    },
-  },
-  data() {
-    return { endDelay: false }
-  },
-  mounted() {
-    this.delayLoading && sleep(this.delayLoading).finally(() => (this.endDelay = true))
-  },
-  render() {
-    const $props = this.$props
-    const top = $props.top ? $props.top : $props.headerTotalHeight + 30
-    const style = {
-      top: top + 'PX',
-    }
-
-    if (this.delayLoading && !this.endDelay) return null
-
-    return (
-      <div class="table-loading">
-        <div class="loading-wrap" style={style}>
-          <div class="loading"></div>
-        </div>
-      </div>
-    )
-  },
-  methods: {
-    handleMaskClick(event) {
-      event.stopPropagation()
-      event.preventDefault()
-    },
-  },
-}
-</script>
-<style lang="less" scoped>
-.table-loading {
-  z-index: 999;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  .loading-wrap {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    color: #03050d;
-    display: flex;
-    width: 16px;
-    height: 30px;
-    align-items: center;
-    .loading {
-      width: 14px;
-      height: 14px;
-      border: 1px solid transparent;
-      border-top-color: #03050d;
-      border-left-color: #03050d;
-      border-bottom-color: #03050d;
-      border-radius: 50%;
-      animation: spin 1s ease-in-out infinite;
-      box-sizing: content-box;
-    }
-
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
-    // .loading-container {
-    //   padding-left: 8PX;
-    //   display: inline-block;
-    //   font-size: 14PX;
-    // }
-
-    // .dots {
-    //   display: inline-block;
-    //   width: 0;
-    //   overflow: hidden;
-    //   vertical-align: bottom;
-    //   animation: dotAnimation 2s infinite;
-    // }
-
-    @keyframes dotAnimation {
-      0% {
-        width: 0;
-      }
-      20% {
-        width: 0.4em;
-      }
-      40% {
-        width: 0.8em;
-      }
-      60% {
-        width: 1.2em;
-      }
-      80% {
-        width: 1.2em;
-      }
-      100% {
-        width: 0;
-      }
-    }
-  }
-}
-</style>

package/src/view/home/query-table/components/pe-table/table-total.vue

@@ -1,57 +0,0 @@
-<script>
-  export default {
-    props: {
-      show: {
-        type: Boolean,
-        default: false
-      },
-      endRow: {
-        type: [Number, String],
-        default: 0
-      },
-      total: {
-        type: [Number, String],
-        default: 0
-      },
-      totalOffset: {
-        type: [Number, String],
-        default: 0
-      }
-    },
-    render () {
-      const style = {
-        display: this.show ? 'block' : 'none',
-      }
-      return (
-        <div class="table-total" style={style}>
-          <span class="total-end">{ `${this.endRow - this.totalOffset}` }</span><span>/</span><span>{ `${this.total - this.totalOffset}` }</span>
-        </div>
-      )
-    }
-  }
-</script>
-<style lang="less" scoped>
-  .table-total {
-    z-index: 999;
-    position: absolute;
-    bottom: 16PX;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 64PX;
-    height: 20PX;
-    line-height: 20PX;
-    font-size: 12PX;
-    color: #1D1919;
-    text-align: center;
-    border-radius: 100PX;
-    background: rgba(255, 255, 255, 0.9);
-    box-shadow: 0px 0px 6px 0px rgba(28, 32, 35, 0.12);
-    .total-end {
-      color: #F2412F;
-    }
-    .popup-content {
-      padding-bottom: constant(safe-area-inset-bottom);
-      padding-bottom: env(safe-area-inset-bottom)
-    }
-  }
-</style>

package/src/view/home/query-table/components/pe-table/utils/animate.js

@@ -1,80 +0,0 @@
-export function smoothEaseOut(t) {
-  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
-}
-
-/**
- * 平滑滚动到指定位置
- * @param {Object} options 滚动配置
- * @param {Number} options.from 起始位置
- * @param {Number} options.to 目标位置
- * @param {Number} options.duration 动画持续时间(毫秒)
- * @param {Function} options.onUpdate 位置更新回调
- * @param {Function} [options.onComplete] 动画完成回调
- * @param {Function} [options.easing=easeOutCubic] 缓动函数
- */
-export function animateScroll(options) {
-  const {
-    from,
-    to,
-    duration,
-    onUpdate,
-    onComplete,
-    easing = smoothEaseOut
-  } = options
-
-  const startTime = performance.now()
-  const distance = to - from
-  let animationId = null
-  let lastPos = from
-
-  const animate = (currentTime = performance.now()) => {
-    const elapsed = currentTime - startTime
-    const progress = Math.min(elapsed / duration, 1)
-    
-    // 时间补偿
-    if (progress < 1) {
-      animationId = requestAnimationFrame(animate)
-      const nextFrameTime = performance.now()
-      const frameDuration = nextFrameTime - currentTime
-      
-      if (frameDuration > 16.7) {
-        const compensation = frameDuration / 16.7
-        const compensatedProgress = Math.min(progress * compensation, 1)
-        const easedProgress = easing(compensatedProgress)
-        const currentPos = from + (distance * easedProgress)
-        if (Math.abs(currentPos - lastPos) >= 1) {
-          onUpdate(currentPos)
-          lastPos = currentPos
-        }
-        return
-      }
-    }
-    
-    // 正常计算
-    const easedProgress = easing(progress)
-    const currentPos = from + (distance * easedProgress)
-    
-    if (Math.abs(currentPos - lastPos) >= 1) {
-      onUpdate(currentPos)
-      lastPos = currentPos
-    }
-    
-    if (progress >= 1) {
-      onUpdate(to) // 确保到达终点
-      if (onComplete) onComplete()
-      animationId = null
-    }
-  }
-
-  animationId = requestAnimationFrame(animate)
-
-  // 返回取消函数
-  return {
-    cancel: () => {
-      if (animationId) {
-        cancelAnimationFrame(animationId)
-        animationId = null
-      }
-    }
-  }
-}