@canlooks/can-ui 0.0.1

package/dist/esm/utils/utils.js

@@ -0,0 +1,282 @@
+/**
+ * 生成最简易的随机ID
+ * @param namespace
+ */
+export function getEazyID(namespace = '') {
+    return `${namespace}${Date.now()}${Math.random()}`;
+}
+const randomIdAlphabet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-';
+/**
+ * 获取任意长度由随机字母组成的ID
+ * @param length
+ */
+export function getShortID(length = 8) {
+    const { length: alphabetLength } = randomIdAlphabet;
+    let id = '';
+    while (length--) {
+        id += randomIdAlphabet[Math.floor(Math.random() * alphabetLength)];
+    }
+    return id;
+}
+/**
+ * 拼接元素的类名
+ * @param classes
+ */
+export function classnames(...classes) {
+    const ret = [];
+    for (let i = 0, { length } = classes; i < length; i++) {
+        const cls = classes[i];
+        if (!cls) {
+            continue;
+        }
+        if (typeof cls === 'object') {
+            if (Array.isArray(cls)) {
+                cls.length && ret.push(classnames(...cls));
+            }
+            else {
+                for (const k in cls) {
+                    cls[k] && ret.push(k);
+                }
+            }
+        }
+        else {
+            ret.push(cls);
+        }
+    }
+    return ret.join(' ');
+}
+/**
+ * 驼峰转分隔
+ * @param str
+ * @param separator
+ */
+export function humpToSegmented(str, separator = '-') {
+    return str.replace(/([A-Z])/g, (_, $1, index) => {
+        return index ? separator + $1.toLowerCase() : $1;
+    });
+}
+/**
+ * 将某个值统一转换成数组或undefined
+ * @param value
+ */
+export function toArray(value) {
+    return isUnset(value)
+        ? null
+        : Array.isArray(value) ? value : [value];
+}
+/**
+ * 判断某个值是否为已选中
+ * @param value 需要判断的值
+ * @param selectedValue 已选中的值，可能为undefined | V | V[]
+ */
+export function isSelected(value, selectedValue) {
+    return isUnset(value) || isUnset(selectedValue)
+        ? false
+        : Array.isArray(selectedValue)
+            ? selectedValue.includes(value)
+            : selectedValue === value;
+}
+/**
+ * 对象深复制
+ */
+export function cloneDeep(target) {
+    if (typeof structuredClone === 'function') {
+        return structuredClone(target);
+    }
+    if (!target || typeof target !== 'object') {
+        return target;
+    }
+    if (Array.isArray(target)) {
+        return target.map(v => {
+            return cloneDeep(v);
+        });
+    }
+    const res = {};
+    for (const k in target) {
+        res[k] = cloneDeep(target[k]);
+    }
+    return res;
+}
+export function mergeDeep(target, ...sources) {
+    for (let i = 0, { length } = sources; i < length; i++) {
+        const source = sources[i];
+        if (source && typeof source === 'object') {
+            for (const k in source) {
+                const v = source[k];
+                if (v && typeof v === 'object') {
+                    target[k] ||= Array.isArray(v) ? [] : {};
+                    mergeDeep(target[k], v);
+                }
+                else {
+                    target[k] = v;
+                }
+            }
+        }
+    }
+    return target;
+}
+/**
+ * 判断元素是否完全在目标容器内，用于Popper组件
+ * @param el
+ * @param container
+ */
+export function isElementVisibleCompletely(target, container) {
+    const { left, top, right, bottom } = target.getBoundingClientRect();
+    if (container) {
+        const { left: containerLeft, top: containerTop, right: containerRight, bottom: containerBottom } = container.getBoundingClientRect();
+        return left >= containerLeft && top >= containerTop && right <= containerRight && bottom <= containerBottom;
+    }
+    const vWidth = window.innerWidth || document.documentElement.clientWidth;
+    const vHeight = window.innerHeight || document.documentElement.clientHeight;
+    return left >= 0 && top >= 0 && right <= vWidth && bottom <= vHeight;
+}
+/**
+ * 下一个事件循环
+ * @param callback
+ */
+export function nextTick(callback) {
+    return new Promise(resolve => {
+        queueMicrotask(() => {
+            callback?.();
+            resolve();
+        });
+    });
+}
+/**
+ * 克隆Ref
+ * @param refs
+ */
+export function cloneRef(...refs) {
+    return (r) => {
+        refs.forEach(ref => {
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(r);
+                }
+                else {
+                    ref.current = r;
+                }
+            }
+        });
+    };
+}
+/**
+ * 判断变量是否为undefined或null
+ * @param it
+ */
+export function isUnset(it) {
+    return typeof it === 'undefined' || it === null;
+}
+/**
+ * 判断变量是否为Promise
+ * @param it
+ */
+export function isPromise(it) {
+    return it instanceof Promise || typeof it?.then === 'function';
+}
+export function getPromiseState(promise) {
+    const s = Symbol();
+    return Promise.race([promise, s]).then(res => {
+        return res === s ? 'pending' : 'fulfilled';
+    }).catch(() => 'rejected');
+}
+/**
+ * 将节点用某个分隔符拼接起来，通常用于渲染多选项
+ * @param arr
+ * @param callback
+ * @param seperator
+ */
+export function joinNodes(arr, callback, seperator = ' / ') {
+    return arr.flatMap((item, index) => {
+        return index > 0
+            ? [seperator, callback(item, index)]
+            : callback(item, index);
+    });
+}
+export function fixInputNumber(value, { min = -Infinity, max = Infinity, precision }) {
+    let num = +value;
+    if (isNaN(num)) {
+        return '';
+    }
+    num = Math.max(min, Math.min(max, num));
+    if (typeof precision === 'number') {
+        return num.toFixed(precision);
+    }
+    return num + '';
+}
+/**
+ * 判断某个元素是否为另一个元素的子元素
+ * @param target
+ * @param container
+ */
+export function isChildOf(target, container) {
+    if (!container) {
+        return false;
+    }
+    while (target) {
+        if (target === container) {
+            return true;
+        }
+        target = target.parentElement;
+    }
+    return false;
+}
+/**
+ * 从某个元素开始，一直向上查找，返回true表示找到，会停止递归
+ * @param target
+ * @param callback
+ */
+export function fineParent(target, callback) {
+    while (target) {
+        const { parentElement } = target;
+        if (!parentElement || callback(parentElement)) {
+            return parentElement;
+        }
+        target = parentElement;
+    }
+    return null;
+}
+/**
+ * 将数值限制在某个范围内
+ * @param value
+ * @param {[min, max]}
+ */
+export function range(value, min = -Infinity, max = Infinity) {
+    return Math.max(min, Math.min(max, value));
+}
+/**
+ * 对象深度查找，也可赋值
+ * @param obj
+ * @param keyPath
+ * @param setValue
+ * @param separator
+ */
+export function queryDeep(obj, keyPath, setValue, separator = '.') {
+    if (Array.isArray(keyPath)) {
+        let result = obj;
+        for (let i = 0, { length } = keyPath; i < length; i++) {
+            if (typeof result !== 'object' || !result) {
+                result = void 0;
+                break;
+            }
+            const k = keyPath[i];
+            if (setValue) {
+                if (i === length - 1) {
+                    result[k] = setValue(result[k]);
+                }
+                else if (!(k in result)) {
+                    result[k] = typeof keyPath[i + 1] === 'number' ? [] : {};
+                }
+            }
+            result = result[k];
+        }
+        return result;
+    }
+    if (typeof keyPath === 'string' && keyPath.includes(separator)) {
+        return queryDeep(obj, keyPath.split(separator), setValue);
+    }
+    if (setValue) {
+        obj[keyPath] = setValue(obj[keyPath]);
+    }
+    return obj[keyPath];
+}

package/dist/types/index.d.ts

@@ -0,0 +1,54 @@
+import {ComponentType, DetailedHTMLProps, HTMLAttributes, Ref} from 'react'
+
+declare namespace CanUI {
+    type Id = string | number
+
+    type Obj<T = any> = {[p: Id]: T}
+
+    type ThemeEasingName = 'linear' | 'ease' | 'easeIn' | 'easeOut' | 'easeInOut' | 'bounce' | 'swing'
+
+    type Status = 'success' | 'error' | 'warning' | 'info'
+
+    type ColorPresets = 'primary' | 'secondary' | Status
+
+    type ColorPropsValue = ColorPresets | 'text' | 'disabled' | 'placeholder' | 'inverse' | 'divider' | string
+
+    type TextColorPresets = 'primary' | 'secondary' | 'disabled' | 'placeholder' | 'inverse'
+
+    type Size = 'small' | 'medium' | 'large'
+
+    type CornerPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'
+
+    type BlockPlacement = CornerPlacement | 'top' | 'bottom'
+
+    type Placement = BlockPlacement | 'left' | 'right'
+
+    type DefineElement<T = Element | null | undefined> = T | (() => T)
+
+    type Breakpoints =
+        | 'xs'
+        | 'sm'
+        | 'md'
+        | 'lg'
+        | 'xl'
+
+    type ResponsiveValue<T = number> = {
+        [P in Breakpoints]?: T
+    }
+
+    type ResponsiveProp<T = number> = T | ResponsiveValue<T>
+
+    type DOMProps<T extends Element> = Omit<DetailedHTMLProps<HTMLAttributes<T>, T>, 'ref'> & {ref?: Ref<T>}
+
+    type DIVProps = DOMProps<HTMLDivElement>
+
+    type OverridableProps<T> = {
+        component?: T
+    } & (
+            T extends ComponentType<infer P> ? P
+            : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T]
+            : {}
+        )
+}
+
+export = CanUI

package/extensions/curd.d.ts

@@ -0,0 +1 @@
+export * from '../dist/cjs/extensions/curd';

package/extensions/curd.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// @ts-nocheck
+tslib_1.__exportStar(require("../dist/cjs/extensions/curd"), exports);

package/extensions/curd.mjs

@@ -0,0 +1,2 @@
+// @ts-nocheck
+export * from '../dist/esm/extensions/curd';

package/extensions/documentViewer.d.ts

@@ -0,0 +1 @@
+export * from '../dist/cjs/extensions/documentViewer';

package/extensions/documentViewer.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// @ts-nocheck
+tslib_1.__exportStar(require("../dist/cjs/extensions/documentViewer"), exports);

package/extensions/documentViewer.mjs

@@ -0,0 +1,2 @@
+// @ts-nocheck
+export * from '../dist/esm/extensions/documentViewer';

package/extensions/textFormatter.d.ts

@@ -0,0 +1 @@
+export * from '../dist/cjs/extensions/textFormatter';

package/extensions/textFormatter.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// @ts-nocheck
+tslib_1.__exportStar(require("../dist/cjs/extensions/textFormatter"), exports);

package/extensions/textFormatter.mjs

@@ -0,0 +1,2 @@
+// @ts-nocheck
+export * from '../dist/esm/extensions/textFormatter';

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@canlooks/can-ui",
+  "version": "0.0.1",
+  "author": "C.CanLiang <canlooks@gmail.com>",
+  "description": "My ui framework",
+  "license": "MIT",
+  "keywords": [
+    "ui framework"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "homepage": "https://gitee.com/canlooks/c_canui",
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/canlooks/c_canui"
+  },
+  "bugs": {
+    "url": "https://gitee.com/canlooks/c_canui/issues",
+    "email": "canlooks@gmail.com"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/esm/index.d.ts"
+    },
+    "./extensions/*": {
+      "import": "./extensions/*.mjs",
+      "require": "./extensions/*.js",
+      "types": "./extensions/*.d.ts"
+    }
+  },
+  "scripts": {
+    "clean": "canlooks-compiler clean",
+    "build": "canlooks-compiler",
+    "test": "vite -c test/vite.config.mts",
+    "test:build": "vite build -c test/vite.config.mts",
+    "test:unit": "ts-node test/unit.ts"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.5.1",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@emotion/react": "^11.13.3",
+    "color": "^4.2.3",
+    "dayjs": "^1.11.13",
+    "react-transition-group": "^4.4.5",
+    "tslib": "^2.7.0"
+  },
+  "devDependencies": {
+    "@canlooks/compiler": "^0.0.11",
+    "@mui/icons-material": "^6.1.3",
+    "@traptitech/markdown-it-katex": "^3.6.0",
+    "@types/color": "^3.0.6",
+    "@types/katex": "^0.16.7",
+    "@types/markdown-it": "^14.1.2",
+    "@types/markdown-it-link-attributes": "^3.0.5",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "highlight.js": "^11.10.0",
+    "markdown-it": "^14.1.0",
+    "markdown-it-link-attributes": "^4.0.1",
+    "mime": "^4.0.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-zoom-pan-pinch": "^3.6.1",
+    "shx": "^0.3.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9"
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,54 @@
+import {ComponentType, DetailedHTMLProps, HTMLAttributes, Ref} from 'react'
+
+declare namespace CanUI {
+    type Id = string | number
+
+    type Obj<T = any> = {[p: Id]: T}
+
+    type ThemeEasingName = 'linear' | 'ease' | 'easeIn' | 'easeOut' | 'easeInOut' | 'bounce' | 'swing'
+
+    type Status = 'success' | 'error' | 'warning' | 'info'
+
+    type ColorPresets = 'primary' | 'secondary' | Status
+
+    type ColorPropsValue = ColorPresets | 'text' | 'disabled' | 'placeholder' | 'inverse' | 'divider' | string
+
+    type TextColorPresets = 'primary' | 'secondary' | 'disabled' | 'placeholder' | 'inverse'
+
+    type Size = 'small' | 'medium' | 'large'
+
+    type CornerPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'
+
+    type BlockPlacement = CornerPlacement | 'top' | 'bottom'
+
+    type Placement = BlockPlacement | 'left' | 'right'
+
+    type DefineElement<T = Element | null | undefined> = T | (() => T)
+
+    type Breakpoints =
+        | 'xs'
+        | 'sm'
+        | 'md'
+        | 'lg'
+        | 'xl'
+
+    type ResponsiveValue<T = number> = {
+        [P in Breakpoints]?: T
+    }
+
+    type ResponsiveProp<T = number> = T | ResponsiveValue<T>
+
+    type DOMProps<T extends Element> = Omit<DetailedHTMLProps<HTMLAttributes<T>, T>, 'ref'> & {ref?: Ref<T>}
+
+    type DIVProps = DOMProps<HTMLDivElement>
+
+    type OverridableProps<T> = {
+        component?: T
+    } & (
+            T extends ComponentType<infer P> ? P
+            : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T]
+            : {}
+        )
+}
+
+export = CanUI