sculp-js 1.0.0 → 1.1.0

package/README.md

@@ -1,24 +1,121 @@
 [![Node.js CI](https://github.com/chandq/sculp-js/actions/workflows/node.js.yml/badge.svg)](https://github.com/chandq/sculp-js/actions/workflows/node.js.yml)
 [![sculp-js](https://img.shields.io/github/package-json/v/chandq/sculp-js?style=flat-square)](https://github.com/chandq/sculp-js)
-[![node](https://img.shields.io/badge/node-v12.0.0-blue)](https://nodejs.org/download/release/v12.0.0/)
+[![node](https://img.shields.io/badge/node-v16.0.0-blue)](https://nodejs.org/download/release/v16.0.0/)
 [![node](https://img.shields.io/badge/language-typescript-orange.svg)](https://nodejs.org/download/release/v12.0.0/)
 [![license:MIT](https://img.shields.io/npm/l/vue.svg?sanitize=true)](https://github.com/chandq/sculp-js/blob/main/LICENSE.md)
 [![Downloads:?](https://img.shields.io/npm/dm/sculp-js.svg?sanitize=true)](https://npmcharts.com/compare/sculp-js?minimal=true)
+[![codecov](https://codecov.io/gh/chandq/sculp-js/graph/badge.svg?token=VZ6TERPGI9)](https://codecov.io/gh/chandq/sculp-js)
 
 # sculp-js
 
-> TS + Rollup, 原生实现，不依赖任何第三方库，输出 esm、cjs、umd三种模块方式的产物
+[API文档](https://chandq.github.io/sculp-js/)
 
-js 工具函数库, 包含类型判断模块：type, 数据处理模块：`array`、`object`、`string`、`number`，功能性模块：下载`download`、复制`clipboard`、`cookie`、日期`date`、qs、水印`watermark`, 文件处理模块：`file`，自定义悬浮提示模块： `tooltip`, dom处理模块：`dom`;
+> TS + Rollup, native implementation, without relying on any third-party libraries, outputs products of three module modes: ESM, CJS, and UMD
+
+## Features
+
+- Type
+
+  - isString
+  - isBoolean
+  - isNumber
+  - isUndefined
+  - isNull
+  - isPrimitive
+  - isObject
+  - typeIs
 
 - Array
 
   - arrayLike 判断类数组
-  - arrayEach 可中断的数组遍历， 支持倒序
   - arrayEachAsync 异步遍历数组，可中断，支持倒序
-  - arrayInsertBefore 改变数组元素位置
-  - arrayRemove 数组删除指定元素
-  - deepTraversal 深度优先遍历函数, 支持continue、break，可定制id、children
-  - getTreeIds 在树中找到 id 为某个值的节点，并返回上游的所有父级节点
+  - forEachDeep 深度优先遍历函数, 支持continue、break，可定制id、children
+  - searchTreeById 在树中找到 id 为某个值的节点，并返回上游的所有父级节点
+  - buildTree 根据 id 与 parentId 从对象数组中构建对应的树
+
+- Object
+
+  - isPlainObject
+  - objectHas
+  - objectAssign 合并
+  - objectEach
+  - objectEachAsync
+  - objectGet
+
+- Number
+
+  - formatNumber
+
+- String
+
+  - stringCamelCase
+  - stringKebabCase
+  - getStrWidthPx
+
+- Unique
+
+  - uniqueString
+  - uniqueNumber
+
+- Date
+
+  - formatDate
+  - dateToStart
+  - dateToEnd
+  - calculateDate
+  - calculateDateTime
+
+- Download
+
+  - downloadURL
+  - downloadHref
+  - downloadBlob
+  - downloadData
+
+- File
+
+  - chooseLocalFile
+
+- Dom
+
+  - hasClass
+  - addClass
+  - removeClass
+  - setStyle
+  - getStyle
+  - getComputedCssVal
+
+- Watermark
+
+  - genCanvasWM
+
+- Clipboard
+  - copyText
+
+## Install
+
+```js
+npm i sculp-js
+```
+
+## Usage
+
+```js
+import { forEachDeep } from 'sculp-js';
+
+const tree = [
+  { id: 1, name: 'row1' },
+  {
+    id: 2,
+    name: 'row2',
+    children: [{ id: 21, name: 'row2-1' }]
+  },
+  { id: 3, name: 'row3' }
+];
 
-## [API文档详情](https://chandq.github.io/sculp-js/)
+const arr = [];
+forEachDeep(tree, ({ id, name }) => {
+  arr.push(name);
+});
+// arr will be: ['row1', 'row2', 'row2-1', 'row3'];
+```

package/lib/cjs/array.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */
@@ -25,26 +25,32 @@ function arrayLike(any) {
     return object.objectHas(any, 'length');
 }
 /**
- * 遍历数组，返回 false 中断遍历
+ * 遍历数组，返回 false 中断遍历(支持continue和break操作)
  *
  * @param {ArrayLike<V>} array
- * @param {(val: V, idx: number) => any} iterator
- * @param reverse {boolean} 是否倒序
+ * @param {(val: V, idx: number) => any} iterator 迭代函数, 返回值为true时continue, 返回值为false时break
+ * @param {boolean} reverse  是否倒序
  * @returns {*}
  */
 function arrayEach(array, iterator, reverse = false) {
     if (reverse) {
         for (let idx = array.length - 1; idx >= 0; idx--) {
             const val = array[idx];
-            if (iterator(val, idx, array) === false)
+            const re = iterator(val, idx, array);
+            if (re === false)
                 break;
+            else if (re === true)
+                continue;
         }
     }
     else {
         for (let idx = 0; idx < array.length; idx++) {
             const val = array[idx];
-            if (iterator(val, idx, array) === false)
+            const re = iterator(val, idx, array);
+            if (re === false)
                 break;
+            else if (re === true)
+                continue;
         }
     }
 }
@@ -106,21 +112,25 @@ function arrayRemove(array, expect) {
 /**
  * 自定义深度优先遍历函数(支持continue和break操作)
  * @param {ArrayLike<V>} tree  树形数据
- * @param {Function} iterator  迭代函数
+ * @param {Function} iterator  迭代函数, 返回值为true时continue, 返回值为false时break
  * @param {string} children 定制子元素的key
  * @param {boolean} isReverse  是否反向遍历
  * @returns {*}
  */
-function deepTraversal(tree, iterator, children = 'children', isReverse = false) {
-    let level = 0;
+function forEachDeep(tree, iterator, children = 'children', isReverse = false) {
+    let level = 0, isBreak = false;
     const walk = (arr, parent) => {
         if (isReverse) {
             for (let i = arr.length - 1; i >= 0; i--) {
+                if (isBreak) {
+                    break;
+                }
                 const re = iterator(arr[i], i, tree, parent, level);
-                if (re === 'break') {
+                if (re === false) {
+                    isBreak = true;
                     break;
                 }
-                else if (re === 'continue') {
+                else if (re === true) {
                     continue;
                 }
                 // @ts-ignore
@@ -133,11 +143,15 @@ function deepTraversal(tree, iterator, children = 'children', isReverse = false)
         }
         else {
             for (let i = 0; i < arr.length; i++) {
+                if (isBreak) {
+                    break;
+                }
                 const re = iterator(arr[i], i, tree, parent, level);
-                if (re === 'break') {
+                if (re === false) {
+                    isBreak = true;
                     break;
                 }
-                else if (re === 'continue') {
+                else if (re === true) {
                     continue;
                 }
                 // @ts-ignore
@@ -159,7 +173,7 @@ function deepTraversal(tree, iterator, children = 'children', isReverse = false)
  * @param {ITreeConf} config - 迭代配置项
  * @returns {[IdLike[], ITreeItem<V>[]]} - 由parentId...childId, parentObject-childObject组成的二维数组
  */
-function getTreeIds(tree, nodeId, config) {
+function searchTreeById(tree, nodeId, config) {
     const { children = 'children', id = 'id' } = config || {};
     const toFlatArray = (tree, parentId, parent) => {
         return tree.reduce((t, _) => {
@@ -184,11 +198,97 @@ function getTreeIds(tree, nodeId, config) {
     };
     return getIds(toFlatArray(tree));
 }
+/**
+ * 使用迭代函数转换数组
+ * @param {T} array
+ * @param {Function} callback 迭代函数
+ * @return {Array}
+ */
+function flatMap(array, callback) {
+    const result = [];
+    array.forEach((value, index) => {
+        result.push(...callback(value, index, array));
+    });
+    return result;
+}
+/**
+ * 根据 idProp 与 parentIdProp 从对象数组中构建对应的树
+ * 当 A[parentIdProp] === B[idProp] 时，对象A会被移动到对象B的children。
+ * 当一个对象的 parentIdProp 不与其他对象的 idProp 字段相等时，该对象被作为树的顶层节点
+ * @param {string} idProp 元素ID
+ * @param {string} parentIdProp 父元素ID
+ * @param {object[]} items 一维数组
+ * @returns {WithChildren<T>[]} 树
+ * @example
+ * const array = [
+ *   { id: 'node-1', parent: 'root' },
+ *   { id: 'node-2', parent: 'root' },
+ *   { id: 'node-3', parent: 'node-2' },
+ *   { id: 'node-4', parent: 'node-2' },
+ *   { id: 'node-5', parent: 'node-4' },
+ * ]
+ * const tree = buildTree('id', 'parent', array)
+ * expect(tree).toEqual([
+ *   { id: 'node-1', parent: 'root' },
+ *   {
+ *     id: 'node-2',
+ *     parent: 'root',
+ *     children: [
+ *       { id: 'node-3', parent: 'node-2' },
+ *       {
+ *         id: 'node-4',
+ *         parent: 'node-2',
+ *         children: [{ id: 'node-5', parent: 'node-4' }],
+ *       },
+ *     ],
+ *   },
+ * ])
+ */
+function buildTree(idProp, parentIdProp, items) {
+    const wrapperMap = new Map();
+    const ensure = (id) => {
+        if (wrapperMap.has(id)) {
+            return wrapperMap.get(id);
+        }
+        //@ts-ignore
+        const wrapper = { id, parent: null, item: null, children: [] };
+        wrapperMap.set(id, wrapper);
+        return wrapper;
+    };
+    for (const item of items) {
+        const parentWrapper = ensure(item[parentIdProp]);
+        const itemWrapper = ensure(item[idProp]);
+        //@ts-ignore
+        itemWrapper.parent = parentWrapper;
+        //@ts-ignore
+        parentWrapper.children.push(itemWrapper);
+        //@ts-ignore
+        itemWrapper.item = item;
+    }
+    const topLevelWrappers = flatMap(Array.from(wrapperMap.values()).filter(wrapper => wrapper.parent === null), wrapper => wrapper.children);
+    return unwrapRecursively(topLevelWrappers);
+    function unwrapRecursively(wrapperArray) {
+        const result = [];
+        for (const wrapper of wrapperArray) {
+            if (wrapper.children.length === 0) {
+                result.push(wrapper.item);
+            }
+            else {
+                result.push({
+                    ...wrapper.item,
+                    children: unwrapRecursively(wrapper.children)
+                });
+            }
+        }
+        return result;
+    }
+}
 
 exports.arrayEach = arrayEach;
 exports.arrayEachAsync = arrayEachAsync;
 exports.arrayInsertBefore = arrayInsertBefore;
 exports.arrayLike = arrayLike;
 exports.arrayRemove = arrayRemove;
-exports.deepTraversal = deepTraversal;
-exports.getTreeIds = getTreeIds;
+exports.buildTree = buildTree;
+exports.forEachDeep = forEachDeep;
+exports.searchTreeById = searchTreeById;

package/lib/cjs/async.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/clipboard.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/cookie.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/date.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/dom.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/download.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/easing.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/file.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/func.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/index.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */
@@ -25,6 +25,7 @@ var func = require('./func.js');
 var random = require('./random.js');
 var number = require('./number.js');
 var unique = require('./unique.js');
+var tooltip = require('./tooltip.js');
 
 
 
@@ -33,8 +34,9 @@ exports.arrayEachAsync = array.arrayEachAsync;
 exports.arrayInsertBefore = array.arrayInsertBefore;
 exports.arrayLike = array.arrayLike;
 exports.arrayRemove = array.arrayRemove;
-exports.deepTraversal = array.deepTraversal;
-exports.getTreeIds = array.getTreeIds;
+exports.buildTree = array.buildTree;
+exports.forEachDeep = array.forEachDeep;
+exports.searchTreeById = array.searchTreeById;
 exports.copyText = clipboard.copyText;
 exports.cookieDel = cookie.cookieDel;
 exports.cookieGet = cookie.cookieGet;
@@ -125,3 +127,4 @@ exports.numberToHex = number.numberToHex;
 exports.UNIQUE_NUMBER_SAFE_LENGTH = unique.UNIQUE_NUMBER_SAFE_LENGTH;
 exports.uniqueNumber = unique.uniqueNumber;
 exports.uniqueString = unique.uniqueString;
+exports.tooltipEvent = tooltip.tooltipEvent;

package/lib/cjs/number.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/object.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/path.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/qs.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/random.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/string.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/tooltip.js

@@ -0,0 +1,118 @@
+/*!
+ * sculp-js v1.0.1
+ * (c) 2023-2023 chandq
+ * Released under the MIT License.
+ */
+
+'use strict';
+
+var string = require('./string.js');
+
+/**
+ * @title tooltip
+ * @Desc 自定义的tooltip方法, 支持拖动悬浮提示
+ * Created by chendeqiao on 2017/5/8.
+ * @example
+ *  <span onmouseleave="handleMouseLeave('#root')" onmousemove="handleMouseEnter({rootElId: '#root', title: 'title content', event: event})"
+ * 		onmouseenter="handleMouseEnter({'#root', title: 'title content', event: event})">title content </span>
+ */
+/**
+ * 自定义title提示功能的mouseenter事件句柄
+ * @param {ITooltipParams} param1
+ * @returns {*}
+ */
+function handleMouseEnter({ rootElId = '#root', title, event }) {
+    try {
+        const $rootEl = document.querySelector(rootElId);
+        console.assert($rootEl !== null, `未找到id为 ${rootElId} 的dom元素`);
+        let $customTitle = null;
+        // 动态创建class样式，并加入到head中
+        if (!document.querySelector('.tooltip-inner1494304949567')) {
+            const tooltipWrapperClass = document.createElement('style');
+            tooltipWrapperClass.type = 'text/css';
+            tooltipWrapperClass.innerHTML = `
+        .tooltip-inner1494304949567 {
+          max-width: 250px;
+          padding: 3px 8px;
+          color: #fff;
+          text-decoration: none;
+          border-radius: 4px;
+          text-align: left;
+        }
+      `;
+            document.querySelector('head').appendChild(tooltipWrapperClass);
+        }
+        if (document.querySelector('#customTitle1494304949567')) {
+            $customTitle = document.querySelector('#customTitle1494304949567');
+            mouseenter($customTitle, title, event);
+        }
+        else {
+            const $contentContainer = document.createElement('div');
+            $contentContainer.className = 'customTitle';
+            $contentContainer.id = 'customTitle1494304949567';
+            $contentContainer.className = 'tooltip';
+            $contentContainer.style.cssText = 'z-index: 99999999; visibility: hidden;';
+            $contentContainer.innerHTML =
+                '<div class="tooltip-inner1494304949567" style="word-wrap: break-word; max-width: 44px;">皮肤</div>';
+            $rootEl.appendChild($contentContainer);
+            $customTitle = document.querySelector('#customTitle1494304949567');
+            if (title) {
+                //判断div显示的内容是否为空
+                mouseenter($customTitle, title, event);
+                $customTitle.style.visibility = 'visible';
+            }
+        }
+    }
+    catch (e) {
+        console.error(e.message);
+    }
+}
+/**
+ * 提示文案dom渲染的处理函数
+ * @param {HTMLDivElement} customTitle
+ * @param {string} title 提示的字符串
+ * @param {PointerEvent} e 事件对象
+ * @returns {*}
+ */
+function mouseenter($customTitle, title, e) {
+    let diffValueX = 200 + 50; //默认设置弹出div的宽度为250px
+    let x = 13;
+    const y = 23;
+    const $contentEle = $customTitle.children[0];
+    if (string.getStrWidthPx(title, 12) < 180 + 50) {
+        //【弹出div自适应字符串宽度】若显示的字符串占用宽度小于180，则设置弹出div的宽度为“符串占用宽度”+20
+        $contentEle.style.maxWidth = string.getStrWidthPx(title, 12) + 20 + 50 + 'px';
+        diffValueX = e.clientX + (string.getStrWidthPx(title, 12) + 50) - document.body.offsetWidth;
+    }
+    else {
+        $contentEle.style.maxWidth = '250px';
+        diffValueX = e.clientX + 230 - document.body.offsetWidth; //计算div水平方向显示的内容超出屏幕多少宽度
+    }
+    $contentEle.innerHTML = title; //html方法可解析内容中换行标签，text方法不能
+    if (diffValueX > 0) {
+        //水平方向超出可见区域时
+        x -= diffValueX;
+    }
+    $customTitle.style.top = e.clientY + y + 'px';
+    $customTitle.style.left = e.clientX + x + 'px';
+    $customTitle.style.maxWidth = '250px';
+    const diffValueY = $customTitle.getBoundingClientRect().top + $contentEle.offsetHeight - document.body.offsetHeight;
+    if (diffValueY > 0) {
+        //垂直方向超出可见区域时
+        $customTitle.style.top = e.clientY - diffValueY + 'px';
+    }
+}
+/**
+ * 移除提示文案dom的事件句柄
+ * @param {string} rootElId
+ * @returns {*}
+ */
+function handleMouseLeave(rootElId = '#root') {
+    const rootEl = document.querySelector(rootElId), titleEl = document.querySelector('#customTitle1494304949567');
+    if (rootEl && titleEl) {
+        rootEl.removeChild(titleEl);
+    }
+}
+const tooltipEvent = { handleMouseEnter, handleMouseLeave };
+
+exports.tooltipEvent = tooltipEvent;

package/lib/cjs/type.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/unique.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/url.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/cjs/watermark.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.0.0
+ * sculp-js v1.0.1
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */