ct-component-plus 0.0.43 → 0.0.44

package/packages/style/index.js

@@ -1,3 +1,3 @@
-import "element-plus/dist/index.css";
-import './init.less';
+import "element-plus/dist/index.css";
+import './init.less';
 import './element.less'

package/packages/style/init.less

@@ -1,114 +1,114 @@
-
-:root {
-  // --命名空间-主题-具体内容-修饰,同一块内容的多个单词用_链接
-  // 字体
-  --ct-font-label: 12px; //标签字号
-  --ct-font-special: 13px;  //特殊应用
-  --ct-font-size: 14px;  //常用字号-小
-  --ct-font-large: 15px;  //常用字号-大
-  --ct-font-title-s: 16px;  //标题-小(small)
-  --ct-font-title-m: 17px;  //标题-中(medium)
-  --ct-font-title-l: 18px;  //标题-大(large)
-  --ct-font-system-s: 19px;  //系统标题-小
-  --ct-font-system-l: 20px;  //系统标题-大
-  --ct-font-color: #141617;  //字体默认颜色
-
-  // 主色
-  --ct-color-primary: var(--ct-color-blue); //系统默认主色，这里取的的蓝色
-  --ct-color-blue: #4D64FF; //主色-蓝
-  --ct-color-yellow: #FFAD2C; //主色-黄
-  --ct-color-green: #1EB7AD; //主色-绿
-  --ct-color-purple: #664FFF; //主色-紫
-  --ct-color-orange: #FF9218; //主色-橙
-  --ct-color-sky: #42A6FF; //主色-天蓝
-  --ct-color-red: #FF643E; //主色-橘红
-  --ct-color-grass: #88CE77;  //主色-草绿 
-  --ct-color-sub-blue: #3A45FF; //辅色-蓝色
-  --ct-color-sub-purple: #7B4CF4; //辅色-紫色
-  // 中性色
-  --ct-color-black: #141617; //标准黑
-  --ct-color-grey-sub: #535C66; //辅助灰(sub)
-  --ct-color-grey-transition: #8F99A3; //过渡灰(transition)
-  --ct-color-grey-tip: #A4AFBB; //提示灰
-  --ct-color-separator: #D8DEE8; //分隔线
-  --ct-color-bg: #F0F3F9; //背景色
-  // 状态色
-  --ct-color-primary-border: #B1BBFF; //主色边框色
-  --ct-color-primary-bg: #ECF1FF; //主色背景色
-  --ct-color-success: #07C47E; //成功色
-  --ct-color-success-border: #9BE0CA; //成功边框色
-  --ct-color-success-bg: #F1FDF9; //成功背景色
-  --ct-color-danger: #FF4D4D; //危险色
-  --ct-color-danger-border: #FFA39E; //危险边框色
-  --ct-color-danger-bg: #FFF1F0; //危险背景色
-  --ct-color-warning: #FFAD2C; //警告色
-  --ct-color-warning-border: #FFD28B; //警告边框色
-  --ct-color-warning-bg: #FFFBE6; //警告背景色
-  --ct-color-disabled: var(--ct-color-grey-tip); //禁用颜色（文字）
-  --ct-color-placeholder: var(--ct-color-grey-tip);  //placeholder颜色
-  // 边框
-  --ct-border-color: #A4AFBB;  //边框色（默认、深色）
-  --ct-border-color-light: #D8DEE8;  //边框色（浅色）
-  --ct-border-radius: 4px;  //默认圆角
-  --ct-border-radius-s: 2px;  //小圆角
-  --ct-border-radius-l: 6px;  //大圆角
-  // 基础布局
-  --ct-layout-menu-width: 224px;  //左侧菜单宽
-  --ct-layout-menu-width_collapse: 68px;  //收起左侧菜单宽
-  --ct-layout-header-height: 68px;  //顶部导航高
-  --ct-layout-margin: 16px;  //页面边距
-
-  --ct-hover-opacity: 0.8;  //hover改变透明度
-
-  --ct-component-size: 32px;  //数据录入类组件的size
-  --ct-component-width: 248px;
-  --ct-component-inner-height: calc(var(--ct-component-size) - 2px);
-  --ct-component-inner-padding: 12px;
-  --ct-component-border-color: var(--ct-border-color);
-  --ct-component-border: 0 0 0 1px var(--ct-component-border-color) inset;
-  --ct-component-border-radius: var(--ct-border-radius);
-  --ct-component-fill-color: #ffffff;
-  --ct-component-color: var(--ct-color-black);
-  --ct-component-disabled-bg-color: #F6F7F9;
-  --ct-component-hover-color: #F5F7FC;
-  --ct-component-hover-border-color: var(--ct-color-grey-sub);
-
-  --ct-popper-light-border: none;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  color: var(--ct-font-color);
-  font-size: var(--ct-font-size);
-  font-family: 'Helvetica Neue','PingFang SC',Arial,'Microsoft YaHei',WenQuanYiMicroHei;
-  font-smoothing: antialiased;
-  -webkit-font-smoothing: antialiased;
-  
-}
-:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
- color: var(--ct-color-placeholder);
-}
-::-moz-placeholder { /* Mozilla Firefox 19+ */
- color: var(--ct-color-placeholder);
-}
-input {
-  &::placeholder,
-  &::-webkit-input-placeholder,
-  &:-ms-input-placeholder,
-  &::-ms-input-placeholder {
-    color: var(--ct-color-placeholder);
-  }
-}
-::-webkit-scrollbar {
-  width: 7px;
-  height: 7px;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background: rgba(0, 0, 0, 0.45);
-}
-
-
+
+:root {
+  // --命名空间-主题-具体内容-修饰,同一块内容的多个单词用_链接
+  // 字体
+  --ct-font-label: 12px; //标签字号
+  --ct-font-special: 13px;  //特殊应用
+  --ct-font-size: 14px;  //常用字号-小
+  --ct-font-large: 15px;  //常用字号-大
+  --ct-font-title-s: 16px;  //标题-小(small)
+  --ct-font-title-m: 17px;  //标题-中(medium)
+  --ct-font-title-l: 18px;  //标题-大(large)
+  --ct-font-system-s: 19px;  //系统标题-小
+  --ct-font-system-l: 20px;  //系统标题-大
+  --ct-font-color: #141617;  //字体默认颜色
+
+  // 主色
+  --ct-color-primary: var(--ct-color-blue); //系统默认主色，这里取的的蓝色
+  --ct-color-blue: #4D64FF; //主色-蓝
+  --ct-color-yellow: #FFAD2C; //主色-黄
+  --ct-color-green: #1EB7AD; //主色-绿
+  --ct-color-purple: #664FFF; //主色-紫
+  --ct-color-orange: #FF9218; //主色-橙
+  --ct-color-sky: #42A6FF; //主色-天蓝
+  --ct-color-red: #FF643E; //主色-橘红
+  --ct-color-grass: #88CE77;  //主色-草绿 
+  --ct-color-sub-blue: #3A45FF; //辅色-蓝色
+  --ct-color-sub-purple: #7B4CF4; //辅色-紫色
+  // 中性色
+  --ct-color-black: #141617; //标准黑
+  --ct-color-grey-sub: #535C66; //辅助灰(sub)
+  --ct-color-grey-transition: #8F99A3; //过渡灰(transition)
+  --ct-color-grey-tip: #A4AFBB; //提示灰
+  --ct-color-separator: #D8DEE8; //分隔线
+  --ct-color-bg: #F0F3F9; //背景色
+  // 状态色
+  --ct-color-primary-border: #B1BBFF; //主色边框色
+  --ct-color-primary-bg: #ECF1FF; //主色背景色
+  --ct-color-success: #07C47E; //成功色
+  --ct-color-success-border: #9BE0CA; //成功边框色
+  --ct-color-success-bg: #F1FDF9; //成功背景色
+  --ct-color-danger: #FF4D4D; //危险色
+  --ct-color-danger-border: #FFA39E; //危险边框色
+  --ct-color-danger-bg: #FFF1F0; //危险背景色
+  --ct-color-warning: #FFAD2C; //警告色
+  --ct-color-warning-border: #FFD28B; //警告边框色
+  --ct-color-warning-bg: #FFFBE6; //警告背景色
+  --ct-color-disabled: var(--ct-color-grey-tip); //禁用颜色（文字）
+  --ct-color-placeholder: var(--ct-color-grey-tip);  //placeholder颜色
+  // 边框
+  --ct-border-color: #A4AFBB;  //边框色（默认、深色）
+  --ct-border-color-light: #D8DEE8;  //边框色（浅色）
+  --ct-border-radius: 4px;  //默认圆角
+  --ct-border-radius-s: 2px;  //小圆角
+  --ct-border-radius-l: 6px;  //大圆角
+  // 基础布局
+  --ct-layout-menu-width: 224px;  //左侧菜单宽
+  --ct-layout-menu-width_collapse: 68px;  //收起左侧菜单宽
+  --ct-layout-header-height: 68px;  //顶部导航高
+  --ct-layout-margin: 16px;  //页面边距
+
+  --ct-hover-opacity: 0.8;  //hover改变透明度
+
+  --ct-component-size: 32px;  //数据录入类组件的size
+  --ct-component-width: 248px;
+  --ct-component-inner-height: calc(var(--ct-component-size) - 2px);
+  --ct-component-inner-padding: 12px;
+  --ct-component-border-color: var(--ct-border-color);
+  --ct-component-border: 0 0 0 1px var(--ct-component-border-color) inset;
+  --ct-component-border-radius: var(--ct-border-radius);
+  --ct-component-fill-color: #ffffff;
+  --ct-component-color: var(--ct-color-black);
+  --ct-component-disabled-bg-color: #F6F7F9;
+  --ct-component-hover-color: #F5F7FC;
+  --ct-component-hover-border-color: var(--ct-color-grey-sub);
+
+  --ct-popper-light-border: none;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  color: var(--ct-font-color);
+  font-size: var(--ct-font-size);
+  font-family: 'Helvetica Neue','PingFang SC',Arial,'Microsoft YaHei',WenQuanYiMicroHei;
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
+  
+}
+:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+ color: var(--ct-color-placeholder);
+}
+::-moz-placeholder { /* Mozilla Firefox 19+ */
+ color: var(--ct-color-placeholder);
+}
+input {
+  &::placeholder,
+  &::-webkit-input-placeholder,
+  &:-ms-input-placeholder,
+  &::-ms-input-placeholder {
+    color: var(--ct-color-placeholder);
+  }
+}
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.45);
+}
+
+

package/packages/utils/index.js

@@ -1,2 +1,2 @@
-export * from './types'
+export * from './types'
 export * from './operate'

package/packages/utils/operate.js

@@ -1,78 +1,78 @@
-import { isString, isArray, isObject, isFunction } from './types';
-
-export const toFirstUpperCase = (str) => {
-  if (str && isString(str)) {
-    const res = str;
-    return res[0].toUpperCase() + res.substring(1)
-  } else {
-    return str
-  }
-}
-
-export function copyObj(obj) {
-  if (obj === null || typeof obj !== 'object') {
-    return obj;
-  }
-
-  const clone = Array.isArray(obj) ? [] : {};
-
-  Object.keys(obj).forEach((key) => {
-    if (typeof obj[key] === 'object') {
-      clone[key] = copyObj(obj[key]);
-    } else {
-      clone[key] = obj[key];
-    }
-  });
-
-  const symbols = Object.getOwnPropertySymbols(obj);
-  symbols.forEach((symbol) => {
-    if (typeof obj[symbol] === 'object') {
-      clone[symbol] = copyObj(obj[symbol]);
-    } else {
-      clone[symbol] = obj[symbol];
-    }
-  });
-
-  const functions = Object.getOwnPropertyNames(obj).filter(
-    (prop) => typeof obj[prop] === 'function'
-  );
-  functions.forEach((func) => {
-    clone[func] = obj[func];
-  });
-
-  return clone;
-}
-
-export const getOpacityColor = (color, opacity) => {
-  const reg = /rgba\((.*)\)/;
-  let str = color.replace(reg, (match, p1) => {
-    let arr = p1.split(',');
-    arr[arr.length - 1] = opacity;
-    return `rgba(${arr.join()})`
-  });
-  return str;
-}
-
-/**
- * Merges two objects, giving the last one precedence(相同取后面的)
- * @param {Object} target
- * @param {(Object|Array)} source
- * @returns {Object}
- */
-export function objectMerge(target, source) {
-  if (typeof target !== 'object') {
-    target = {}
-  }
-  if (Array.isArray(source)) {
-    return source.slice()
-  }
-  Object.keys(source).forEach(property => {
-    const sourceProperty = source[property]
-    if (typeof sourceProperty === 'object') {
-      target[property] = objectMerge(target[property], sourceProperty)
-    } else {
-      target[property] = sourceProperty
-    }
-  })
-  return target
+import { isString, isArray, isObject, isFunction } from './types';
+
+export const toFirstUpperCase = (str) => {
+  if (str && isString(str)) {
+    const res = str;
+    return res[0].toUpperCase() + res.substring(1)
+  } else {
+    return str
+  }
+}
+
+export function copyObj(obj) {
+  if (obj === null || typeof obj !== 'object') {
+    return obj;
+  }
+
+  const clone = Array.isArray(obj) ? [] : {};
+
+  Object.keys(obj).forEach((key) => {
+    if (typeof obj[key] === 'object') {
+      clone[key] = copyObj(obj[key]);
+    } else {
+      clone[key] = obj[key];
+    }
+  });
+
+  const symbols = Object.getOwnPropertySymbols(obj);
+  symbols.forEach((symbol) => {
+    if (typeof obj[symbol] === 'object') {
+      clone[symbol] = copyObj(obj[symbol]);
+    } else {
+      clone[symbol] = obj[symbol];
+    }
+  });
+
+  const functions = Object.getOwnPropertyNames(obj).filter(
+    (prop) => typeof obj[prop] === 'function'
+  );
+  functions.forEach((func) => {
+    clone[func] = obj[func];
+  });
+
+  return clone;
+}
+
+export const getOpacityColor = (color, opacity) => {
+  const reg = /rgba\((.*)\)/;
+  let str = color.replace(reg, (match, p1) => {
+    let arr = p1.split(',');
+    arr[arr.length - 1] = opacity;
+    return `rgba(${arr.join()})`
+  });
+  return str;
+}
+
+/**
+ * Merges two objects, giving the last one precedence(相同取后面的)
+ * @param {Object} target
+ * @param {(Object|Array)} source
+ * @returns {Object}
+ */
+export function objectMerge(target, source) {
+  if (typeof target !== 'object') {
+    target = {}
+  }
+  if (Array.isArray(source)) {
+    return source.slice()
+  }
+  Object.keys(source).forEach(property => {
+    const sourceProperty = source[property]
+    if (typeof sourceProperty === 'object') {
+      target[property] = objectMerge(target[property], sourceProperty)
+    } else {
+      target[property] = sourceProperty
+    }
+  })
+  return target
 }

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)
+        }
+    })
+}
+

package/packages/utils/types.js

@@ -1,35 +1,35 @@
-import { isArray, isObject, isString } from '@vue/shared'
-export {
-  isArray,
-  isFunction,
-  isObject,
-  isString,
-  isDate,
-  isPromise,
-  isSymbol,
-} from '@vue/shared'  //这个@vue/shared是装了vue3一定会安装的
-
-export { isClient, isIOS } from '@vueuse/core'
-
-
-export const isUndefined = (val) => val === undefined
-export const isBoolean = (val) => typeof val === 'boolean'
-export const isNumber = (val) => typeof val === 'number'
-
-export const isEmpty = (val) =>
-  (!val && val !== 0) ||
-  (isArray(val) && val.length === 0) ||
-  (isObject(val) && !Object.keys(val).length)
-
-export const isElement = (e) => {
-  if (typeof Element === 'undefined') return false
-  return e instanceof Element
-}
-
-export const isStringNumber = (val) => {
-  if (!isString(val)) {
-    return false
-  }
-  return !Number.isNaN(Number(val))
-}
-
+import { isArray, isObject, isString } from '@vue/shared'
+export {
+  isArray,
+  isFunction,
+  isObject,
+  isString,
+  isDate,
+  isPromise,
+  isSymbol,
+} from '@vue/shared'  //这个@vue/shared是装了vue3一定会安装的
+
+export { isClient, isIOS } from '@vueuse/core'
+
+
+export const isUndefined = (val) => val === undefined
+export const isBoolean = (val) => typeof val === 'boolean'
+export const isNumber = (val) => typeof val === 'number'
+
+export const isEmpty = (val) =>
+  (!val && val !== 0) ||
+  (isArray(val) && val.length === 0) ||
+  (isObject(val) && !Object.keys(val).length)
+
+export const isElement = (e) => {
+  if (typeof Element === 'undefined') return false
+  return e instanceof Element
+}
+
+export const isStringNumber = (val) => {
+  if (!isString(val)) {
+    return false
+  }
+  return !Number.isNaN(Number(val))
+}
+