ct-component-plus 0.0.42 → 0.0.44

package/README.md

@@ -1,3 +1,3 @@
-# Vue 3 + Vite
-
-青塔组件库的 Vue 3 版本，使用 Vite 构建。
+# Vue 3 + Vite
+
+青塔组件库的 Vue 3 版本，使用 Vite 构建。

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ct-component-plus",
   "private": false,
-  "version": "0.0.42",
+  "version": "0.0.44",
   "type": "module",
   "main": "packages/components/index.js",
   "files": [

package/packages/components/search-box/src/search-box.vue

@@ -12,9 +12,8 @@
           :key="item.param || index"
           :style="{ ...getComponentStyle(item) }">
           <slot v-bind="getComponentSlotScope(item)">
-            <slot
-              name="item-before"
-              v-bind="getComponentSlotScope(item)"></slot>
+            <slot name="item-before" v-bind="getComponentSlotScope(item)">
+            </slot>
             <span
               :class="[
                 ns.e('item-label'),
@@ -142,7 +141,7 @@ const getComponentProps = (item) => {
   };
 };
 const getComponent = (type) => {
-  return isObject(type) ? type : componentAll.value[type] || type;
+  return isObject(type) ? type : componentAll.value[type] || "div";
 };
 const getComponentSlotScope = (item) => {
   return isObject(item) ? item : {};

package/packages/components/table/src/index.js

@@ -64,4 +64,16 @@ export const tableProps = {
   alignLeftKeys: Array,
   alignRightKeys: Array,
   rowKey: String,
+  showOverflowTooltip: {
+    type: Boolean,
+    default: true
+  },
+  sticky: {
+    type: Object,
+    default: () => {
+      return {
+        top: 0
+      }
+    }
+  }
 }

package/packages/components/table/src/table.vue

@@ -8,7 +8,8 @@
         :span-method="spanMethod"
         @selection-change="handleSelectChange"
         :row-key="rowKey || 'rowKey'"
-        v-bind="$attrs">
+        v-bind="$attrs"
+        v-sticky="sticky">
         <el-table-column
           v-if="isMultiSelect"
           type="selection"
@@ -28,7 +29,7 @@
           :sortable="column.sortable ? 'custom' : false"
           :align="getColumnAlign(column)"
           :fixed="column.fixed || false"
-          show-overflow-tooltip
+          :show-overflow-tooltip="showOverflowTooltip"
           v-bind="column.rawAttr || {}">
           <template #header="scope" v-if="column.slotHeader">
             <slot
@@ -58,7 +59,7 @@
               :sortable="column1.sortable ? 'custom' : false"
               :align="getColumnAlign(column1)"
               :fixed="column1.fixed || false"
-              show-overflow-tooltip
+              :show-overflow-tooltip="showOverflowTooltip"
               v-bind="column1.rawAttr || {}">
               <template #default="scope">
                 <slot

package/packages/constants/aria.ts

@@ -1,17 +1,17 @@
-export const EVENT_CODE = {
-  tab: 'Tab',
-  enter: 'Enter',
-  space: 'Space',
-  left: 'ArrowLeft', // 37
-  up: 'ArrowUp', // 38
-  right: 'ArrowRight', // 39
-  down: 'ArrowDown', // 40
-  esc: 'Escape',
-  delete: 'Delete',
-  backspace: 'Backspace',
-  numpadEnter: 'NumpadEnter',
-  pageUp: 'PageUp',
-  pageDown: 'PageDown',
-  home: 'Home',
-  end: 'End',
-}
+export const EVENT_CODE = {
+  tab: 'Tab',
+  enter: 'Enter',
+  space: 'Space',
+  left: 'ArrowLeft', // 37
+  up: 'ArrowUp', // 38
+  right: 'ArrowRight', // 39
+  down: 'ArrowDown', // 40
+  esc: 'Escape',
+  delete: 'Delete',
+  backspace: 'Backspace',
+  numpadEnter: 'NumpadEnter',
+  pageUp: 'PageUp',
+  pageDown: 'PageDown',
+  home: 'Home',
+  end: 'End',
+}

package/packages/constants/index.ts

@@ -1 +1 @@
-export * from './aria'
+export * from './aria'

package/packages/directives/click-outside/index.ts

@@ -1,118 +1,118 @@
-import { isClient, isElement } from '../../utils'
-
-import type {
-  ComponentPublicInstance,
-  DirectiveBinding,
-  ObjectDirective,
-} from 'vue'
-
-type DocumentHandler = <T extends MouseEvent>(mouseup: T, mousedown: T) => void
-type FlushList = Map<
-  HTMLElement,
-  {
-    documentHandler: DocumentHandler
-    bindingFn: (...args: unknown[]) => unknown
-  }[]
->
-
-const nodeList: FlushList = new Map()
-
-let startClick: MouseEvent
-
-if (isClient) {
-  document.addEventListener('mousedown', (e: MouseEvent) => (startClick = e))
-  document.addEventListener('mouseup', (e: MouseEvent) => {
-    for (const handlers of nodeList.values()) {
-      for (const { documentHandler } of handlers) {
-        documentHandler(e as MouseEvent, startClick)
-      }
-    }
-  })
-}
-
-function createDocumentHandler(
-  el: HTMLElement,
-  binding: DirectiveBinding
-): DocumentHandler {
-  let excludes: HTMLElement[] = []
-  if (Array.isArray(binding.arg)) {
-    excludes = binding.arg
-  } else if (isElement(binding.arg)) {
-    // due to current implementation on binding type is wrong the type casting is necessary here
-    excludes.push(binding.arg as unknown as HTMLElement)
-  }
-  return function (mouseup, mousedown) {
-    const popperRef = (
-      binding.instance as ComponentPublicInstance<{
-        popperRef: HTMLElement
-      }>
-    ).popperRef
-    const mouseUpTarget = mouseup.target as Node
-    const mouseDownTarget = mousedown?.target as Node
-    const isBound = !binding || !binding.instance
-    const isTargetExists = !mouseUpTarget || !mouseDownTarget
-    const isContainedByEl =
-      el.contains(mouseUpTarget) || el.contains(mouseDownTarget)
-    const isSelf = el === mouseUpTarget
-
-    const isTargetExcluded =
-      (excludes.length &&
-        excludes.some((item) => item?.contains(mouseUpTarget))) ||
-      (excludes.length && excludes.includes(mouseDownTarget as HTMLElement))
-    const isContainedByPopper =
-      popperRef &&
-      (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget))
-    if (
-      isBound ||
-      isTargetExists ||
-      isContainedByEl ||
-      isSelf ||
-      isTargetExcluded ||
-      isContainedByPopper
-    ) {
-      return
-    }
-    binding.value(mouseup, mousedown)
-  }
-}
-
-const ClickOutside: ObjectDirective = {
-  beforeMount(el: HTMLElement, binding: DirectiveBinding) {
-    // there could be multiple handlers on the element
-    if (!nodeList.has(el)) {
-      nodeList.set(el, [])
-    }
-
-    nodeList.get(el)!.push({
-      documentHandler: createDocumentHandler(el, binding),
-      bindingFn: binding.value,
-    })
-  },
-  updated(el: HTMLElement, binding: DirectiveBinding) {
-    if (!nodeList.has(el)) {
-      nodeList.set(el, [])
-    }
-
-    const handlers = nodeList.get(el)!
-    const oldHandlerIndex = handlers.findIndex(
-      (item) => item.bindingFn === binding.oldValue
-    )
-    const newHandler = {
-      documentHandler: createDocumentHandler(el, binding),
-      bindingFn: binding.value,
-    }
-
-    if (oldHandlerIndex >= 0) {
-      // replace the old handler to the new handler
-      handlers.splice(oldHandlerIndex, 1, newHandler)
-    } else {
-      handlers.push(newHandler)
-    }
-  },
-  unmounted(el: HTMLElement) {
-    // remove all listeners when a component unmounted
-    nodeList.delete(el)
-  },
-}
-
-export default ClickOutside
+import { isClient, isElement } from '../../utils'
+
+import type {
+  ComponentPublicInstance,
+  DirectiveBinding,
+  ObjectDirective,
+} from 'vue'
+
+type DocumentHandler = <T extends MouseEvent>(mouseup: T, mousedown: T) => void
+type FlushList = Map<
+  HTMLElement,
+  {
+    documentHandler: DocumentHandler
+    bindingFn: (...args: unknown[]) => unknown
+  }[]
+>
+
+const nodeList: FlushList = new Map()
+
+let startClick: MouseEvent
+
+if (isClient) {
+  document.addEventListener('mousedown', (e: MouseEvent) => (startClick = e))
+  document.addEventListener('mouseup', (e: MouseEvent) => {
+    for (const handlers of nodeList.values()) {
+      for (const { documentHandler } of handlers) {
+        documentHandler(e as MouseEvent, startClick)
+      }
+    }
+  })
+}
+
+function createDocumentHandler(
+  el: HTMLElement,
+  binding: DirectiveBinding
+): DocumentHandler {
+  let excludes: HTMLElement[] = []
+  if (Array.isArray(binding.arg)) {
+    excludes = binding.arg
+  } else if (isElement(binding.arg)) {
+    // due to current implementation on binding type is wrong the type casting is necessary here
+    excludes.push(binding.arg as unknown as HTMLElement)
+  }
+  return function (mouseup, mousedown) {
+    const popperRef = (
+      binding.instance as ComponentPublicInstance<{
+        popperRef: HTMLElement
+      }>
+    ).popperRef
+    const mouseUpTarget = mouseup.target as Node
+    const mouseDownTarget = mousedown?.target as Node
+    const isBound = !binding || !binding.instance
+    const isTargetExists = !mouseUpTarget || !mouseDownTarget
+    const isContainedByEl =
+      el.contains(mouseUpTarget) || el.contains(mouseDownTarget)
+    const isSelf = el === mouseUpTarget
+
+    const isTargetExcluded =
+      (excludes.length &&
+        excludes.some((item) => item?.contains(mouseUpTarget))) ||
+      (excludes.length && excludes.includes(mouseDownTarget as HTMLElement))
+    const isContainedByPopper =
+      popperRef &&
+      (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget))
+    if (
+      isBound ||
+      isTargetExists ||
+      isContainedByEl ||
+      isSelf ||
+      isTargetExcluded ||
+      isContainedByPopper
+    ) {
+      return
+    }
+    binding.value(mouseup, mousedown)
+  }
+}
+
+const ClickOutside: ObjectDirective = {
+  beforeMount(el: HTMLElement, binding: DirectiveBinding) {
+    // there could be multiple handlers on the element
+    if (!nodeList.has(el)) {
+      nodeList.set(el, [])
+    }
+
+    nodeList.get(el)!.push({
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value,
+    })
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {
+    if (!nodeList.has(el)) {
+      nodeList.set(el, [])
+    }
+
+    const handlers = nodeList.get(el)!
+    const oldHandlerIndex = handlers.findIndex(
+      (item) => item.bindingFn === binding.oldValue
+    )
+    const newHandler = {
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value,
+    }
+
+    if (oldHandlerIndex >= 0) {
+      // replace the old handler to the new handler
+      handlers.splice(oldHandlerIndex, 1, newHandler)
+    } else {
+      handlers.push(newHandler)
+    }
+  },
+  unmounted(el: HTMLElement) {
+    // remove all listeners when a component unmounted
+    nodeList.delete(el)
+  },
+}
+
+export default ClickOutside

package/packages/utils/table.js

@@ -0,0 +1,135 @@
+/**
+ * 思路:通过简单的 el-table的 thead和tbody父级别区域，进行设置对于的fixed
+ * 1.复制一份 thead 设置为fixed,先隐藏掉。
+ * 2.创建滚动条监听事件，根据滚动条计算表格所在可视窗口位置。设置thead副本是否显示
+ * 3.创建横向滚动条的属性变化监听。当监听变化时，说明在拖动横向滚动条，需要将设置对应副本的表头位置，防止错位
+ */
+
+function getElParentBySelector(el, queryClassSelector) {
+    if (!el) {
+        return el
+    }
+    if ([...el.classList].includes(queryClassSelector)) {
+        return el
+    }
+    return getElParentBySelector(el.parentNode, queryClassSelector)
+}
+
+function getTableShowWidth(thead) {
+    const tableBox = getElParentBySelector(thead, 'el-table')
+    return tableBox.getBoundingClientRect().width
+}
+
+//使用setTime来确保不会重复设置
+
+function createTableSticky(el, binding, vNode) {
+    let stickyTop = binding.value.top || 0
+    const zIndex = binding.value.zIndex || 0
+    stickyTop = parseFloat(stickyTop)
+    // 获取表格(element)
+    let thead = el.querySelector('.el-table__header')
+    thead = getElParentBySelector(thead, 'el-table__header-wrapper')
+    const tbody = el.querySelector('.el-scrollbar') || el.querySelector('.el-table__body')
+    // const tableBox = el.querySelector('.el-table__inner-wrapper')
+
+    const elBodyBox = el.querySelector('.el-table__body-wrapper')
+
+    /**
+     * 插入副本元素，确保文档流不塌陷
+     */
+    const copyThead = thead.cloneNode(true)
+    copyThead.classList.add('el-table_header-copy')
+    copyThead.style.display = 'none'
+    copyThead.style.position = 'fixed'
+    copyThead.style.zIndex = zIndex || 1994
+    copyThead.style.top = stickyTop + 'px'
+    copyThead.style.backgroundColor = '#fff'
+    copyThead.style.borderTop = '1px solid #999999'
+
+    thead.parentNode.insertBefore(copyThead, elBodyBox)
+
+    //获取thead 的显示宽度
+    const headerShowWidth = getTableShowWidth(thead)
+
+    // 获取滚动元素
+    const scrollParent = document.querySelector(binding.value.parent || 'body')
+    if (!scrollParent || binding.value.disabled === true) {
+        return
+    }
+
+    scrollParent.addEventListener('scroll', function () {
+        const theadHeight = thead.clientHeight
+        // 获取thead距离顶部的距离
+        const theadTop = thead.getBoundingClientRect().top
+        // 判断是否需要回归原来位置
+        const originally = tbody.getBoundingClientRect().top
+        // 判断底部距离是否超过表头
+        const goBeyond = tbody.getBoundingClientRect().bottom
+
+        if (theadTop <= stickyTop) {
+            copyThead.style.display = 'block'
+            copyThead.style.width =
+                (tbody.offsetWidth < headerShowWidth ? tbody.offsetWidth : headerShowWidth) + 'px'
+        }
+
+        if (originally - theadHeight > stickyTop || goBeyond - theadHeight / 2 <= stickyTop) {
+            //影藏副本
+            copyThead.style.display = 'none'
+        }
+    })
+
+    try {
+        //启动底部滚动条监控，防止横向滚动条滚动，表头没有动的问题
+        const elThumbBut = el.querySelector(
+            '.el-table__body-wrapper .el-scrollbar .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb'
+        )
+        if (elThumbBut) {
+            const observer = new MutationObserver(mutationsList => {
+                for (const mutation of mutationsList) {
+                    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+                        // CSS样式发生了变化
+                        // 将 thumb 滚动条的
+                        const transformX = elThumbBut.style.transform
+                        if (transformX) {
+                            copyThead.querySelector(
+                                '.el-table__header'
+                            ).style.marginLeft = `-${transformX.replace(/[a-zA-Z()]/g, '')}`
+                        }
+                    }
+                }
+            })
+            //开始监听横向滚动条
+            observer.observe(elThumbBut, { attributes: true })
+        }
+    } catch (error) { }
+}
+
+export function createSticky(vue) {
+    let clearTimeId = 0
+    // el-table表头吸顶效果
+    vue.directive('sticky', {
+        // 当被绑定的元素插入到 DOM 中时……
+        mounted(el, binding) {
+            const random = parseInt(Math.random() * 10 + '')
+            //TIP 延时设置，确保表格进行渲染成功！
+            clearTimeId = setTimeout(() => {
+                createTableSticky(el, binding)
+                // clearTimeout(clearTimeId)
+            }, 1000 + random)
+        },
+
+        update(el, binding) {
+            const random = parseInt(Math.random() * 10 + '')
+            //TIP 延时设置，确保表格进行渲染成功！
+            clearTimeId = setTimeout(() => {
+                createTableSticky(el, binding)
+                // clearTimeout(clearTimeId)
+            }, 1000 + random)
+        },
+
+        unmounted(el, binding) {
+            clearTimeId && clearTimeout(clearTimeId)
+        }
+    })
+}
+