neko-ui 1.0.48 → 1.0.49

package/es/button/style.js

@@ -62,6 +62,7 @@ import{injectGlobal}from"../emotion";import prefixCls from"../prefix-cls";export
     user-select: none;
     touch-action: manipulation;
     box-sizing: border-box;
+    user-select: none;
 
     &:hover:not([disabled]) {
       border-color: var(--btn-hover-color);

package/es/index.d.ts

@@ -19,8 +19,8 @@ export { default as Skeleton } from './skeleton';
 export { default as CodeBlock, type CodeBlockProps } from './code-block';
 export { default as Photo, type PhotoProps, type ImageData } from './photo';
 export { default as Carousel, type CarouselProps } from './carousel';
-export type ComponentSize = 'small' | 'normal' | 'large';
 export { default as Portal, type PortalProps } from './portal';
 export { default as prefixCls, setPrefixCls } from './prefix-cls';
 export { default as highlight } from './highlight';
 export { default as Prism } from './prism';
+export type ComponentSize = 'small' | 'normal' | 'large';

package/es/tree/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ComponentSize } from '../index';
 declare const path: unique symbol;
 declare const pathEnd: unique symbol;
 export interface TreeData<T = string> {
@@ -10,13 +11,14 @@ export interface TreeData<T = string> {
     children?: TreeData<T>[];
     [path]?: string;
     [pathEnd]?: string;
-    [key: string | number | symbol]: T | string | boolean | TreeData<T>[] | undefined;
+    [key: string | number | symbol]: T | string | number | symbol | boolean | TreeData<T>[] | undefined;
 }
 type ReactMouseEvent = React.MouseEvent<HTMLLIElement, MouseEvent>;
 type OnRowClick = (e: ReactMouseEvent, key: string, item: TreeData) => void;
 export interface TreeBaseProp {
     className?: string;
     style?: React.CSSProperties;
+    size?: ComponentSize;
     readonly?: boolean;
     toggle?: boolean;
     direction?: 'rtl' | 'ltr';
@@ -27,34 +29,40 @@ export interface TreeBaseProp {
 type Imap = {
     [key: string]: string | true | number | object;
 };
-interface TreeSingleProps extends TreeBaseProp {
-    fromSchema?: false;
-    multiple?: false;
-    data: TreeData[];
+interface TreeSingleBaseProps extends TreeBaseProp {
     value?: string;
+    multiple?: false;
     onChange?(key?: string): void;
 }
-interface TreeSingleSchemaProps extends TreeBaseProp {
+interface TreeMultipleBaseProps extends TreeBaseProp {
+    value?: string[];
+    multiple: true;
+    onChange?(key?: string[]): void;
+}
+interface TreeSingleProps extends TreeSingleBaseProps {
+    fromSchema?: false;
+    data: TreeData[];
+}
+interface TreeSingleSchemaProps extends TreeSingleBaseProps {
     fromSchema: true;
-    multiple?: false;
     data: Imap;
-    value?: string;
-    onChange?(key?: string): void;
 }
-interface TreeMultipleProps extends TreeBaseProp {
+interface TreeSingleStringProps extends TreeSingleBaseProps {
+    fromSchema?: false;
+    data: string;
+}
+interface TreeMultipleProps extends TreeMultipleBaseProps {
     fromSchema?: false;
-    multiple: true;
     data: TreeData[];
-    value: string[];
-    onChange?(key: string[]): void;
 }
-interface TreeMultipleSchemaProps extends TreeBaseProp {
+interface TreeMultipleSchemaProps extends TreeMultipleBaseProps {
     fromSchema: true;
-    multiple: true;
     data: Imap;
-    value: string[];
-    onChange?(key: string[]): void;
 }
-export type TreeProps = TreeSingleProps | TreeMultipleProps | TreeMultipleSchemaProps | TreeSingleSchemaProps;
+interface TreeMultipleStringProps extends TreeMultipleBaseProps {
+    fromSchema?: false;
+    data: string;
+}
+export type TreeProps = TreeSingleProps | TreeMultipleProps | TreeMultipleSchemaProps | TreeSingleSchemaProps | TreeMultipleStringProps | TreeSingleStringProps;
 declare const Tree: React.FC<TreeProps>;
 export default Tree;

package/es/tree/index.js

@@ -1 +1 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};return _extends.apply(this,arguments)}import React,{useCallback,useEffect,useRef}from"react";import{cloneDeep,isFunction,passiveSupported,throttle}from"@moneko/common";import sso from"shared-store-object";import{cls}from"./style";import{cx}from"../emotion";import schema from"../from-schema";const path=Symbol("path");const pathEnd=Symbol("path-end");function countLineLen(tree,depth=0){const lastIdx=tree.length-1;const last=tree[lastIdx];const frist=tree[0];let line=[];for(let i=0,len=tree.length;i<len;i++){const item=tree[i],isLast=i===lastIdx;if(i===0||isLast){item[path]=frist.key+(tree.length===1?"":">"+last.key);if(isLast){item[pathEnd]=""}line.push(item[path])}if(item.children){line=line.concat(countLineLen(item.children,depth+1))}}return line}const Tree=({multiple,readonly,toggle,value,direction,onChange,onRowClick,fromSchema,data,onRowDoubleClick,renderRow,className,style})=>{const el=useRef(null);const store=useRef(sso({treeData:[],lines:[],current:value?Array.isArray(value)?value:[value]:[],rtl:direction==="rtl"}));const{current,rtl,treeData,lines}=store.current;const handleChange=useCallback(key=>{if(!readonly&&isFunction(onChange)){let _current=[...store.current.current];if(multiple){const idx=_current.indexOf(key);if(idx===-1){_current.push(key)}else{_current.splice(idx,1)}}else if(toggle&&store.current.current[0]===key){_current=[]}else{_current=[key]}onChange(multiple?_current:_current[0])}},[multiple,onChange,readonly,toggle]);const handleClick=useCallback((e,item)=>{handleChange(item.key);onRowClick===null||onRowClick===void 0?void 0:onRowClick(e,item.key,item)},[onRowClick,handleChange]);const renderItem=useCallback((item,title,subTitle)=>{const row=(renderRow===null||renderRow===void 0?void 0:renderRow(item,title,subTitle))||[title,subTitle];return rtl?row.reverse():row},[rtl,renderRow]);const renderTreeRow=useCallback((list,depth=0)=>{return list.map(item=>{const{name,title,subTitle,key,children}=item;const _title=name===title||!name?[title]:[name,title];return React.createElement(React.Fragment,{key:key},React.createElement("li",_extends({},{className:cx(cls.row,current.includes(key)&&cls.active,(readonly||!isFunction(onChange))&&cls.non),onClick:e=>handleClick(e,item),onDoubleClick:e=>{return onRowDoubleClick===null||onRowDoubleClick===void 0?void 0:onRowDoubleClick(e,key,item)},style:depth?{"--depth":`${depth*2}em`}:undefined,"data-path-end":item[pathEnd],"data-path":item[path]}),renderItem(item,React.createElement("span",{key:"title",className:cls.title},(rtl?_title.reverse():_title).join(": ")),subTitle&&React.createElement("span",{key:"subTitle",className:cls.subTitle},subTitle))),children?renderTreeRow(children,depth+1):null)})},[current,readonly,onChange,renderItem,rtl,handleClick,onRowDoubleClick]);const updateLine=throttle(useCallback(function(){const len=store.current.lines.length;if(el.current&&len){for(let i=0;i<len;i++){const al=el.current.querySelectorAll(`li[data-path="${store.current.lines[i]}"]`);if(al.length){const rect1=al[0].getBoundingClientRect();let sideLen=rect1.height/2+8;if(al.length>1){const{bottom,height,top}=al[1].getBoundingClientRect();sideLen=i===0?top-rect1.top:bottom-rect1.top-height/2+8;al[1].style.setProperty("--c","none")}else if(i===0){al[0].style.setProperty("--c","none")}if(al.length!==1||i!==0){al[0].style.setProperty("--line",`${Math.abs(sideLen)}px`)}}}}},[]),32);useEffect(()=>{store.current.current=value?Array.isArray(value)?value:[value]:[]},[value]);useEffect(()=>{store.current.rtl=direction==="rtl"},[direction]);useEffect(()=>{const __data=cloneDeep(fromSchema?schema(data):data);const __lines=[...new Set(countLineLen(__data))];store.current.lines=__lines;store.current.treeData=__data},[fromSchema,data]);useEffect(()=>{updateLine()},[lines,updateLine]);useEffect(()=>{window.addEventListener("resize",updateLine,passiveSupported);return()=>{window.removeEventListener("resize",updateLine,passiveSupported)}},[updateLine]);useEffect(()=>{const _store=store.current;return()=>{_store()}},[]);return React.createElement("ul",{ref:el,className:cx(cls.tree,className,rtl&&cls.rtl),style:style},renderTreeRow(treeData))};export default Tree;
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};return _extends.apply(this,arguments)}import React,{useCallback,useEffect,useRef}from"react";import{cloneDeep,isFunction,passiveSupported,throttle}from"@moneko/common";import sso from"shared-store-object";import{cls,sizeCnt}from"./style";import{cx}from"../emotion";import schema from"../from-schema";const path=Symbol("path");const pathEnd=Symbol("path-end");function countLineLen(tree,depth=0){const lastIdx=tree.length-1;const last=tree[lastIdx];const frist=tree[0];let line=[];for(let i=0,len=tree.length;i<len;i++){const item=tree[i],isLast=i===lastIdx;if(i===0||isLast){item[path]=frist.key+(tree.length===1?"":">"+last.key);if(isLast){item[pathEnd]=""}line.push(item[path])}if(item.children){line=line.concat(countLineLen(item.children,depth+1))}}return line}function parseTree(str){const depthRegex=/[^\s|`│├└]/;const lines=str.trim().split("\n");const stack=[{title:lines[0],key:lines[0]}];for(let i=1;i<lines.length;i++){const depth=lines[i].search(depthRegex);if(depth===-1){continue}const node={title:lines[i].slice(depth+3),depth};while(stack.length&&depth<=(stack[stack.length-1].depth||0)){stack.pop()}if(!stack.length){return[]}const parent=stack[stack.length-1];if(!parent.children){parent.children=[]}node.key=`${parent.key}-${node.title}-${depth}-${i}`;parent.children.push(node);stack.push(node)}return[stack[0]]}const Tree=({multiple,readonly,toggle,value,direction,onChange,onRowClick,fromSchema,data,onRowDoubleClick,renderRow,className,style,size})=>{const el=useRef(null);const store=useRef(sso({treeData:[],lines:[],current:value?Array.isArray(value)?value:[value]:[],rtl:direction==="rtl",size}));const{current,rtl,treeData,lines}=store.current;const handleChange=useCallback(key=>{if(!readonly&&isFunction(onChange)){let _current=[...store.current.current];if(multiple){const idx=_current.indexOf(key);if(idx===-1){_current.push(key)}else{_current.splice(idx,1)}}else if(toggle&&store.current.current[0]===key){_current=[]}else{_current=[key]}onChange(multiple?_current:_current[0])}},[multiple,onChange,readonly,toggle]);const handleClick=useCallback((e,item)=>{handleChange(item.key);onRowClick===null||onRowClick===void 0?void 0:onRowClick(e,item.key,item)},[onRowClick,handleChange]);const renderItem=useCallback((item,title,subTitle)=>{const row=(renderRow===null||renderRow===void 0?void 0:renderRow(item,title,subTitle))||[title,subTitle];return rtl?row.reverse():row},[rtl,renderRow]);const renderTreeRow=useCallback((list,depth=0)=>{return list.map(item=>{const{name,title,subTitle,key,children}=item;const _title=name===title||!name?[title]:[name,title];return React.createElement(React.Fragment,{key:key},React.createElement("li",_extends({},{className:cx(cls.row,current.includes(key)&&cls.active,(readonly||!isFunction(onChange))&&cls.non),onClick:e=>handleClick(e,item),onDoubleClick:e=>{return onRowDoubleClick===null||onRowDoubleClick===void 0?void 0:onRowDoubleClick(e,key,item)},style:depth?{"--depth":`${depth*2}em`}:undefined,"data-path-end":item[pathEnd],"data-path":item[path]}),renderItem(item,React.createElement("span",{key:"title",className:cls.title},(rtl?_title.reverse():_title).join(": ")),subTitle&&React.createElement("span",{key:"subTitle",className:cls.subTitle},subTitle))),children?renderTreeRow(children,depth+1):null)})},[current,readonly,onChange,renderItem,rtl,handleClick,onRowDoubleClick]);const updateLine=throttle(useCallback(function(){const len=store.current.lines.length;if(el.current&&len){const prefixSize=sizeCnt[store.current.size||"normal"];for(let i=0;i<len;i++){const al=el.current.querySelectorAll(`li[data-path="${store.current.lines[i]}"]`);if(al.length){const rect1=al[0].getBoundingClientRect();let sideLen=rect1.height/2+prefixSize;if(al.length>1){const{bottom,height,top}=al[1].getBoundingClientRect();sideLen=i===0?top-rect1.top:bottom-rect1.top-height/2+prefixSize;al[1].style.setProperty("--c","none")}else if(i===0){al[0].style.setProperty("--c","none")}if(al.length!==1||i!==0){al[0].style.setProperty("--line",`${Math.abs(sideLen)}px`)}}}}},[]),32);useEffect(()=>{store.current.current=value?Array.isArray(value)?value:[value]:[]},[value]);useEffect(()=>{store.current.rtl=direction==="rtl"},[direction]);useEffect(()=>{store.current.size=size},[size]);useEffect(()=>{const _data=cloneDeep(typeof data==="string"?parseTree(data):fromSchema?schema(data):data);store.current.lines=[...new Set(countLineLen(_data))];store.current.treeData=_data},[fromSchema,data]);useEffect(()=>{updateLine()},[size,lines,updateLine]);useEffect(()=>{window.addEventListener("resize",updateLine,passiveSupported);return()=>{window.removeEventListener("resize",updateLine,passiveSupported)}},[updateLine]);useEffect(()=>{const _store=store.current;return()=>{_store()}},[]);return React.createElement("ul",{ref:el,className:cx(cls.tree,size&&cls[size],className,rtl&&cls.rtl),style:style},renderTreeRow(treeData))};export default Tree;

package/es/tree/style.d.ts

@@ -7,4 +7,12 @@ export declare const cls: {
     active: "n-tree-active";
     rtl: "n-tree-rtl";
     non: "n-tree-non-interactive";
+    small: "n-tree-small";
+    normal: "n-tree-normal";
+    large: "n-tree-large";
+};
+export declare const sizeCnt: {
+    small: number;
+    normal: number;
+    large: number;
 };

package/es/tree/style.js

@@ -1,8 +1,9 @@
-import{injectGlobal}from"../emotion";import prefixCls from"../prefix-cls";export const cls={tree:prefixCls("tree"),row:prefixCls("tree-row"),children:prefixCls("tree-children"),title:prefixCls("tree-title"),subTitle:prefixCls("tree-sub-title"),active:prefixCls("tree-active"),rtl:prefixCls("tree-rtl"),non:prefixCls("tree-non-interactive")};injectGlobal`
+import{injectGlobal}from"../emotion";import prefixCls from"../prefix-cls";export const cls={tree:prefixCls("tree"),row:prefixCls("tree-row"),children:prefixCls("tree-children"),title:prefixCls("tree-title"),subTitle:prefixCls("tree-sub-title"),active:prefixCls("tree-active"),rtl:prefixCls("tree-rtl"),non:prefixCls("tree-non-interactive"),small:prefixCls("tree-small"),normal:prefixCls("tree-normal"),large:prefixCls("tree-large")};export const sizeCnt={small:6,normal:8,large:10};injectGlobal`
   .${cls.tree} {
     padding-inline-start: 2em;
     inline-size: 100%;
     box-sizing: border-box;
+    --size: 8px;
   }
 
   .${cls.row} {
@@ -17,7 +18,7 @@ import{injectGlobal}from"../emotion";import prefixCls from"../prefix-cls";export
     list-style: none;
     box-shadow: 0 0 0 1px var(--border-color);
     margin-inline-start: var(--depth);
-    margin-block-end: 8px;
+    margin-block-end: var(--size);
     cursor: pointer;
     box-sizing: border-box;
     min-inline-size: 160px;
@@ -59,7 +60,7 @@ import{injectGlobal}from"../emotion";import prefixCls from"../prefix-cls";export
         border-radius: var(--r);
         content: var(--c);
         inline-size: 1em;
-        inset-block-start: -8px;
+        inset-block-start: calc(var(--size) * -1);
         inset-inline-start: -1em;
         block-size: var(--line);
         box-sizing: border-box;
@@ -96,7 +97,7 @@ import{injectGlobal}from"../emotion";import prefixCls from"../prefix-cls";export
     font-weight: normal;
   }
   .${cls.subTitle} {
-    padding: 0 8px;
+    padding: 0 var(--size);
     font-size: 10px;
     color: var(--text-secondary);
     font-style: italic;
@@ -109,4 +110,44 @@ import{injectGlobal}from"../emotion";import prefixCls from"../prefix-cls";export
     box-shadow: 0 0 0 1px var(--primary-border);
     text-shadow: 2px 2px 2px var(--primary-outline);
   }
+  .${cls.small} {
+    --size: 6px;
+    .${cls.row} {
+      padding: 1px 9px;
+      &:first-of-type {
+        &[data-path]::after {
+          inset-block-start: 12px;
+        }
+      }
+    }
+    .${cls.title} {
+      font-size: 13px;
+    }
+    .${cls.subTitle} {
+      padding: 0 4px;
+      font-size: 9px;
+    }
+  }
+  .${cls.normal} {
+    --size: 8px;
+  }
+  .${cls.large} {
+    --size: 10px;
+    .${cls.row} {
+      padding: 3px 12px;
+      
+      &:first-of-type {
+        &[data-path]::after {
+          inset-block-start: 17px;
+        }
+      }
+    }
+    .${cls.title} {
+      font-size: 15px;
+    }
+    .${cls.subTitle} {
+      padding: 0 10px;
+      font-size: 12px;
+    }
+  }
 `;

package/lib/button/style.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"cls",{enumerable:true,get:function(){return cls}});var _emotion=require("../emotion");var _prefixCls=_interopRequireDefault(require("../prefix-cls"));function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0)}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}function _templateObject(){var data=_taggedTemplateLiteral(["\n  :root {\n    --disable-color: rgb(0 0 0 / 25%);\n    --disable-bg: rgb(0 0 0 / 4%);\n    --disable-border: #d9d9d9;\n  }\n\n  [data-theme='dark'] {\n    --disable-color: rgb(255 255 255 / 25%);\n    --disable-bg: rgb(255 255 255 / 8%);\n    --disable-border: #424242;\n  }\n  ."," {\n    display: block;\n    line-height: normal;\n    overflow: hidden;\n    text-align: center;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--btn-color);\n    transition-property: color;\n  }\n  .",",."," {\n    transition-timing-function: var(--transition-timing-function);\n    transition-duration: var(--transition-duration);\n  }\n  ."," {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--btn-border);\n    border-radius: var(--border-radius);\n    padding: 4px 16px;\n    inline-size: fit-content;\n    min-inline-size: var(--btn-size);\n    block-size: fit-content;\n    min-block-size: var(--btn-size);\n    font-size: var(--font-size);\n    color: var(--btn-color);\n    background-color: var(--btn-bg);\n    outline-offset: 4px;\n    line-height: 1;\n    cursor: pointer;\n    transition-property: color, background-color, border-color, width, height, transform;\n    user-select: none;\n    touch-action: manipulation;\n    box-sizing: border-box;\n\n    &:hover:not([disabled]) {\n      border-color: var(--btn-hover-color);\n      background-color: var(--btn-bg);\n      ."," {\n        color: var(--btn-hover-color);\n      }\n    }\n\n    &:active:not([disabled]) {\n      border-color: var(--btn-active-color);\n      background-color: var(--btn-bg);\n      transform: scale(0.98);\n      ."," {\n        color: var(--btn-active-color);\n      }\n    }\n  }\n  ."," {\n    --btn-size: 2rem;\n  }\n  ."," {\n    --btn-size: 1.5rem;\n\n    padding: 0 7px;\n    font-size: var(--font-size-xs);\n  }\n  ."," {\n    --btn-size: 2.5rem;\n\n    font-size: var(--font-size-lg);\n  }\n  ."," {\n    ."," {\n      --btn-color: var(--primary-color);\n    }\n  }\n  ."," {\n    --btn-outline-color: var(--primary-outline);\n    --btn-color: var(--text-color);\n    --btn-bg: var(--component-background);\n    --btn-border: var(--border-color);\n    --btn-hover-color: var(--primary-hover);\n    --btn-active-color: var(--primary-active);\n  }\n  ","\n  ","\n  ","\n  ","\n  ."," {\n    &:not([disabled]):not(.",") {\n      ."," {\n        color: #fff !important;\n      }\n\n      &:hover {\n        --btn-bg: var(--btn-hover-color) !important;\n      }\n\n      &:active {\n        --btn-bg: var(--btn-active-color) !important;\n      }\n    }\n  }\n  .",".","."," {\n    ."," {\n      color: #fff !important;\n    }\n  }\n  ."," {\n    border-style: dashed;\n  }\n  .",", ."," {\n    border-color: transparent !important;\n    background-color: transparent;\n  }\n  .",", ."," {\n    background-color: transparent !important;\n  }\n  .","."," {\n    &::after {\n      content: none;\n    }\n  }\n  ."," {\n    border-radius: 50% !important;\n    padding: 0;\n    min-inline-size: var(--btn-size);\n    max-inline-size: var(--btn-size);\n    min-block-size: var(--btn-size);\n    max-block-size: var(--btn-size);\n    text-align: center;\n    line-height: var(--btn-size);\n  }\n  .","[disabled] {\n    --btn-color: var(--disable-color);\n    --btn-bg: var(--disable-bg);\n    --btn-border: var(--disable-border);\n\n    cursor: not-allowed;\n  }\n  ."," {\n    inline-size: 100%;\n  }\n\n  .",", ."," {\n    &:not(.","):not(.",") {\n      position: relative;\n\n      &::before {\n        position: absolute;\n        display: block;\n        border-radius: inherit;\n        opacity: 0.2;\n        box-shadow: 0 0 0 0 var(--btn-outline-color);\n        inset: 0;\n        animation: btn-wave-effect 0.3s cubic-bezier(1, 1, 1, 1);\n        animation-fill-mode: forwards;\n        content: '';\n        pointer-events: none;\n      }\n    }\n  }\n\n  ."," {\n    &:not(.","):not(.",")::before {\n      opacity: 0.2;\n      animation: btn-wave-effect 0.3s cubic-bezier(1, 1, 1, 0.99) infinite;\n    }\n  }\n\n  @keyframes btn-wave-effect {\n    0% {\n      opacity: 1;\n      box-shadow: 0 0 0 var(--btn-outline-color);\n    }\n\n    25% {\n      opacity: 1;\n      box-shadow: 0 0 0 0.25rem var(--btn-outline-color);\n    }\n\n    100% {\n      opacity: 0;\n      box-shadow: 0 0 0 0.375rem var(--btn-outline-color);\n    }\n  }\n"]);_templateObject=function _templateObject(){return data};return data}var cls={btn:(0,_prefixCls.default)("btn"),label:(0,_prefixCls.default)("btn-label"),primary:(0,_prefixCls.default)("btn-primary"),warning:(0,_prefixCls.default)("btn-warning"),error:(0,_prefixCls.default)("btn-error"),danger:(0,_prefixCls.default)("btn-danger"),success:(0,_prefixCls.default)("btn-success"),infinite:(0,_prefixCls.default)("btn-infinite"),block:(0,_prefixCls.default)("btn-block"),dashed:(0,_prefixCls.default)("btn-dashed"),fill:(0,_prefixCls.default)("btn-fill"),circle:(0,_prefixCls.default)("btn-circle"),ghost:(0,_prefixCls.default)("btn-ghost"),link:(0,_prefixCls.default)("btn-link"),flat:(0,_prefixCls.default)("btn-flat"),disabled:(0,_prefixCls.default)("btn-disabled"),without:(0,_prefixCls.default)("btn-without"),default:(0,_prefixCls.default)("btn-default"),large:(0,_prefixCls.default)("btn-large"),small:(0,_prefixCls.default)("btn-small"),normal:(0,_prefixCls.default)("btn-normal")};function btnColor(type){var _cls=".".concat(cls[type]),fillCls=".".concat(cls[type],".").concat(cls.fill);if(type==="error"){_cls=".".concat(cls[type],",.").concat(cls.danger);fillCls=".".concat(cls[type],".").concat(cls.fill,",.").concat(cls.danger,".").concat(cls.fill)}return"\n    ".concat(_cls,":not([disabled]) {\n      .").concat(cls.label," {\n        --btn-color: var(--").concat(type,"-color);\n      }\n      --btn-border: var(--").concat(type,"-border);\n      --btn-bg: var(--").concat(type,"-bg);\n      --btn-hover-color: var(--").concat(type,"-hover);\n      --btn-active-color: var(--").concat(type,"-active);\n      --btn-outline-color: var(--").concat(type,"-outline);\n    }\n    ").concat(fillCls," {\n      --btn-bg: var(--").concat(type,"-color);\n      --btn-border: var(--").concat(type,"-color);\n      --btn-hover-bg: var(--").concat(type,"-hover);\n      --btn-active-bg: var(--").concat(type,"-active);\n    }\n  ")}(0,_emotion.injectGlobal)(_templateObject(),cls.label,cls.btn,cls.label,cls.btn,cls.label,cls.label,cls.normal,cls.small,cls.large,cls.link,cls.label,cls.default,btnColor("primary"),btnColor("error"),btnColor("success"),btnColor("warning"),cls.fill,cls.default,cls.label,cls.fill,cls.danger,cls.default,cls.label,cls.dashed,cls.flat,cls.link,cls.ghost,cls.link,cls.btn,cls.link,cls.circle,cls.disabled,cls.block,cls.without,cls.infinite,cls.link,cls.flat,cls.infinite,cls.link,cls.flat);
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"cls",{enumerable:true,get:function(){return cls}});var _emotion=require("../emotion");var _prefixCls=_interopRequireDefault(require("../prefix-cls"));function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0)}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}function _templateObject(){var data=_taggedTemplateLiteral(["\n  :root {\n    --disable-color: rgb(0 0 0 / 25%);\n    --disable-bg: rgb(0 0 0 / 4%);\n    --disable-border: #d9d9d9;\n  }\n\n  [data-theme='dark'] {\n    --disable-color: rgb(255 255 255 / 25%);\n    --disable-bg: rgb(255 255 255 / 8%);\n    --disable-border: #424242;\n  }\n  ."," {\n    display: block;\n    line-height: normal;\n    overflow: hidden;\n    text-align: center;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--btn-color);\n    transition-property: color;\n  }\n  .",",."," {\n    transition-timing-function: var(--transition-timing-function);\n    transition-duration: var(--transition-duration);\n  }\n  ."," {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--btn-border);\n    border-radius: var(--border-radius);\n    padding: 4px 16px;\n    inline-size: fit-content;\n    min-inline-size: var(--btn-size);\n    block-size: fit-content;\n    min-block-size: var(--btn-size);\n    font-size: var(--font-size);\n    color: var(--btn-color);\n    background-color: var(--btn-bg);\n    outline-offset: 4px;\n    line-height: 1;\n    cursor: pointer;\n    transition-property: color, background-color, border-color, width, height, transform;\n    user-select: none;\n    touch-action: manipulation;\n    box-sizing: border-box;\n    user-select: none;\n\n    &:hover:not([disabled]) {\n      border-color: var(--btn-hover-color);\n      background-color: var(--btn-bg);\n      ."," {\n        color: var(--btn-hover-color);\n      }\n    }\n\n    &:active:not([disabled]) {\n      border-color: var(--btn-active-color);\n      background-color: var(--btn-bg);\n      transform: scale(0.98);\n      ."," {\n        color: var(--btn-active-color);\n      }\n    }\n  }\n  ."," {\n    --btn-size: 2rem;\n  }\n  ."," {\n    --btn-size: 1.5rem;\n\n    padding: 0 7px;\n    font-size: var(--font-size-xs);\n  }\n  ."," {\n    --btn-size: 2.5rem;\n\n    font-size: var(--font-size-lg);\n  }\n  ."," {\n    ."," {\n      --btn-color: var(--primary-color);\n    }\n  }\n  ."," {\n    --btn-outline-color: var(--primary-outline);\n    --btn-color: var(--text-color);\n    --btn-bg: var(--component-background);\n    --btn-border: var(--border-color);\n    --btn-hover-color: var(--primary-hover);\n    --btn-active-color: var(--primary-active);\n  }\n  ","\n  ","\n  ","\n  ","\n  ."," {\n    &:not([disabled]):not(.",") {\n      ."," {\n        color: #fff !important;\n      }\n\n      &:hover {\n        --btn-bg: var(--btn-hover-color) !important;\n      }\n\n      &:active {\n        --btn-bg: var(--btn-active-color) !important;\n      }\n    }\n  }\n  .",".","."," {\n    ."," {\n      color: #fff !important;\n    }\n  }\n  ."," {\n    border-style: dashed;\n  }\n  .",", ."," {\n    border-color: transparent !important;\n    background-color: transparent;\n  }\n  .",", ."," {\n    background-color: transparent !important;\n  }\n  .","."," {\n    &::after {\n      content: none;\n    }\n  }\n  ."," {\n    border-radius: 50% !important;\n    padding: 0;\n    min-inline-size: var(--btn-size);\n    max-inline-size: var(--btn-size);\n    min-block-size: var(--btn-size);\n    max-block-size: var(--btn-size);\n    text-align: center;\n    line-height: var(--btn-size);\n  }\n  .","[disabled] {\n    --btn-color: var(--disable-color);\n    --btn-bg: var(--disable-bg);\n    --btn-border: var(--disable-border);\n\n    cursor: not-allowed;\n  }\n  ."," {\n    inline-size: 100%;\n  }\n\n  .",", ."," {\n    &:not(.","):not(.",") {\n      position: relative;\n\n      &::before {\n        position: absolute;\n        display: block;\n        border-radius: inherit;\n        opacity: 0.2;\n        box-shadow: 0 0 0 0 var(--btn-outline-color);\n        inset: 0;\n        animation: btn-wave-effect 0.3s cubic-bezier(1, 1, 1, 1);\n        animation-fill-mode: forwards;\n        content: '';\n        pointer-events: none;\n      }\n    }\n  }\n\n  ."," {\n    &:not(.","):not(.",")::before {\n      opacity: 0.2;\n      animation: btn-wave-effect 0.3s cubic-bezier(1, 1, 1, 0.99) infinite;\n    }\n  }\n\n  @keyframes btn-wave-effect {\n    0% {\n      opacity: 1;\n      box-shadow: 0 0 0 var(--btn-outline-color);\n    }\n\n    25% {\n      opacity: 1;\n      box-shadow: 0 0 0 0.25rem var(--btn-outline-color);\n    }\n\n    100% {\n      opacity: 0;\n      box-shadow: 0 0 0 0.375rem var(--btn-outline-color);\n    }\n  }\n"]);_templateObject=function _templateObject(){return data};return data}var cls={btn:(0,_prefixCls.default)("btn"),label:(0,_prefixCls.default)("btn-label"),primary:(0,_prefixCls.default)("btn-primary"),warning:(0,_prefixCls.default)("btn-warning"),error:(0,_prefixCls.default)("btn-error"),danger:(0,_prefixCls.default)("btn-danger"),success:(0,_prefixCls.default)("btn-success"),infinite:(0,_prefixCls.default)("btn-infinite"),block:(0,_prefixCls.default)("btn-block"),dashed:(0,_prefixCls.default)("btn-dashed"),fill:(0,_prefixCls.default)("btn-fill"),circle:(0,_prefixCls.default)("btn-circle"),ghost:(0,_prefixCls.default)("btn-ghost"),link:(0,_prefixCls.default)("btn-link"),flat:(0,_prefixCls.default)("btn-flat"),disabled:(0,_prefixCls.default)("btn-disabled"),without:(0,_prefixCls.default)("btn-without"),default:(0,_prefixCls.default)("btn-default"),large:(0,_prefixCls.default)("btn-large"),small:(0,_prefixCls.default)("btn-small"),normal:(0,_prefixCls.default)("btn-normal")};function btnColor(type){var _cls=".".concat(cls[type]),fillCls=".".concat(cls[type],".").concat(cls.fill);if(type==="error"){_cls=".".concat(cls[type],",.").concat(cls.danger);fillCls=".".concat(cls[type],".").concat(cls.fill,",.").concat(cls.danger,".").concat(cls.fill)}return"\n    ".concat(_cls,":not([disabled]) {\n      .").concat(cls.label," {\n        --btn-color: var(--").concat(type,"-color);\n      }\n      --btn-border: var(--").concat(type,"-border);\n      --btn-bg: var(--").concat(type,"-bg);\n      --btn-hover-color: var(--").concat(type,"-hover);\n      --btn-active-color: var(--").concat(type,"-active);\n      --btn-outline-color: var(--").concat(type,"-outline);\n    }\n    ").concat(fillCls," {\n      --btn-bg: var(--").concat(type,"-color);\n      --btn-border: var(--").concat(type,"-color);\n      --btn-hover-bg: var(--").concat(type,"-hover);\n      --btn-active-bg: var(--").concat(type,"-active);\n    }\n  ")}(0,_emotion.injectGlobal)(_templateObject(),cls.label,cls.btn,cls.label,cls.btn,cls.label,cls.label,cls.normal,cls.small,cls.large,cls.link,cls.label,cls.default,btnColor("primary"),btnColor("error"),btnColor("success"),btnColor("warning"),cls.fill,cls.default,cls.label,cls.fill,cls.danger,cls.default,cls.label,cls.dashed,cls.flat,cls.link,cls.ghost,cls.link,cls.btn,cls.link,cls.circle,cls.disabled,cls.block,cls.without,cls.infinite,cls.link,cls.flat,cls.infinite,cls.link,cls.flat);

package/lib/index.d.ts

@@ -19,8 +19,8 @@ export { default as Skeleton } from './skeleton';
 export { default as CodeBlock, type CodeBlockProps } from './code-block';
 export { default as Photo, type PhotoProps, type ImageData } from './photo';
 export { default as Carousel, type CarouselProps } from './carousel';
-export type ComponentSize = 'small' | 'normal' | 'large';
 export { default as Portal, type PortalProps } from './portal';
 export { default as prefixCls, setPrefixCls } from './prefix-cls';
 export { default as highlight } from './highlight';
 export { default as Prism } from './prism';
+export type ComponentSize = 'small' | 'normal' | 'large';

package/lib/tree/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ComponentSize } from '../index';
 declare const path: unique symbol;
 declare const pathEnd: unique symbol;
 export interface TreeData<T = string> {
@@ -10,13 +11,14 @@ export interface TreeData<T = string> {
     children?: TreeData<T>[];
     [path]?: string;
     [pathEnd]?: string;
-    [key: string | number | symbol]: T | string | boolean | TreeData<T>[] | undefined;
+    [key: string | number | symbol]: T | string | number | symbol | boolean | TreeData<T>[] | undefined;
 }
 type ReactMouseEvent = React.MouseEvent<HTMLLIElement, MouseEvent>;
 type OnRowClick = (e: ReactMouseEvent, key: string, item: TreeData) => void;
 export interface TreeBaseProp {
     className?: string;
     style?: React.CSSProperties;
+    size?: ComponentSize;
     readonly?: boolean;
     toggle?: boolean;
     direction?: 'rtl' | 'ltr';
@@ -27,34 +29,40 @@ export interface TreeBaseProp {
 type Imap = {
     [key: string]: string | true | number | object;
 };
-interface TreeSingleProps extends TreeBaseProp {
-    fromSchema?: false;
-    multiple?: false;
-    data: TreeData[];
+interface TreeSingleBaseProps extends TreeBaseProp {
     value?: string;
+    multiple?: false;
     onChange?(key?: string): void;
 }
-interface TreeSingleSchemaProps extends TreeBaseProp {
+interface TreeMultipleBaseProps extends TreeBaseProp {
+    value?: string[];
+    multiple: true;
+    onChange?(key?: string[]): void;
+}
+interface TreeSingleProps extends TreeSingleBaseProps {
+    fromSchema?: false;
+    data: TreeData[];
+}
+interface TreeSingleSchemaProps extends TreeSingleBaseProps {
     fromSchema: true;
-    multiple?: false;
     data: Imap;
-    value?: string;
-    onChange?(key?: string): void;
 }
-interface TreeMultipleProps extends TreeBaseProp {
+interface TreeSingleStringProps extends TreeSingleBaseProps {
+    fromSchema?: false;
+    data: string;
+}
+interface TreeMultipleProps extends TreeMultipleBaseProps {
     fromSchema?: false;
-    multiple: true;
     data: TreeData[];
-    value: string[];
-    onChange?(key: string[]): void;
 }
-interface TreeMultipleSchemaProps extends TreeBaseProp {
+interface TreeMultipleSchemaProps extends TreeMultipleBaseProps {
     fromSchema: true;
-    multiple: true;
     data: Imap;
-    value: string[];
-    onChange?(key: string[]): void;
 }
-export type TreeProps = TreeSingleProps | TreeMultipleProps | TreeMultipleSchemaProps | TreeSingleSchemaProps;
+interface TreeMultipleStringProps extends TreeMultipleBaseProps {
+    fromSchema?: false;
+    data: string;
+}
+export type TreeProps = TreeSingleProps | TreeMultipleProps | TreeMultipleSchemaProps | TreeSingleSchemaProps | TreeMultipleStringProps | TreeSingleStringProps;
 declare const Tree: React.FC<TreeProps>;
 export default Tree;

package/lib/tree/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"default",{enumerable:true,get:function(){return _default}});var _react=_interopRequireWildcard(require("react"));var _common=require("@moneko/common");var _sharedStoreObject=_interopRequireDefault(require("shared-store-object"));var _style=require("./style");var _emotion=require("../emotion");var _fromSchema=_interopRequireDefault(require("../from-schema"));function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};return _extends.apply(this,arguments)}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap;var cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj}}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj)}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc)}else{newObj[key]=obj[key]}}}newObj.default=obj;if(cache){cache.set(obj,newObj)}return newObj}function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread()}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}var path=Symbol("path");var pathEnd=Symbol("path-end");function countLineLen(tree){var depth=arguments.length>1&&arguments[1]!==void 0?arguments[1]:0;var lastIdx=tree.length-1;var last=tree[lastIdx];var frist=tree[0];var line=[];for(var i=0,len=tree.length;i<len;i++){var item=tree[i],isLast=i===lastIdx;if(i===0||isLast){item[path]=frist.key+(tree.length===1?"":">"+last.key);if(isLast){item[pathEnd]=""}line.push(item[path])}if(item.children){line=line.concat(countLineLen(item.children,depth+1))}}return line}var Tree=function(param){var multiple=param.multiple,readonly=param.readonly,toggle=param.toggle,value=param.value,direction=param.direction,onChange=param.onChange,onRowClick=param.onRowClick,fromSchema=param.fromSchema,data=param.data,onRowDoubleClick=param.onRowDoubleClick,renderRow=param.renderRow,className=param.className,style=param.style;var el=(0,_react.useRef)(null);var store=(0,_react.useRef)((0,_sharedStoreObject.default)({treeData:[],lines:[],current:value?Array.isArray(value)?value:[value]:[],rtl:direction==="rtl"}));var _store_current=store.current,current=_store_current.current,rtl=_store_current.rtl,treeData=_store_current.treeData,lines=_store_current.lines;var handleChange=(0,_react.useCallback)(function(key){if(!readonly&&(0,_common.isFunction)(onChange)){var _current=_toConsumableArray(store.current.current);if(multiple){var idx=_current.indexOf(key);if(idx===-1){_current.push(key)}else{_current.splice(idx,1)}}else if(toggle&&store.current.current[0]===key){_current=[]}else{_current=[key]}onChange(multiple?_current:_current[0])}},[multiple,onChange,readonly,toggle]);var handleClick=(0,_react.useCallback)(function(e,item){handleChange(item.key);onRowClick===null||onRowClick===void 0?void 0:onRowClick(e,item.key,item)},[onRowClick,handleChange]);var renderItem=(0,_react.useCallback)(function(item,title,subTitle){var row=(renderRow===null||renderRow===void 0?void 0:renderRow(item,title,subTitle))||[title,subTitle];return rtl?row.reverse():row},[rtl,renderRow]);var renderTreeRow=(0,_react.useCallback)(function(list){var depth=arguments.length>1&&arguments[1]!==void 0?arguments[1]:0;return list.map(function(item){var name=item.name,title=item.title,subTitle=item.subTitle,key=item.key,children=item.children;var _title=name===title||!name?[title]:[name,title];return _react.default.createElement(_react.default.Fragment,{key:key},_react.default.createElement("li",_extends({},{className:(0,_emotion.cx)(_style.cls.row,current.includes(key)&&_style.cls.active,(readonly||!(0,_common.isFunction)(onChange))&&_style.cls.non),onClick:function(e){return handleClick(e,item)},onDoubleClick:function(e){return onRowDoubleClick===null||onRowDoubleClick===void 0?void 0:onRowDoubleClick(e,key,item)},style:depth?{"--depth":"".concat(depth*2,"em")}:undefined,"data-path-end":item[pathEnd],"data-path":item[path]}),renderItem(item,_react.default.createElement("span",{key:"title",className:_style.cls.title},(rtl?_title.reverse():_title).join(": ")),subTitle&&_react.default.createElement("span",{key:"subTitle",className:_style.cls.subTitle},subTitle))),children?renderTreeRow(children,depth+1):null)})},[current,readonly,onChange,renderItem,rtl,handleClick,onRowDoubleClick]);var updateLine=(0,_common.throttle)((0,_react.useCallback)(function(){var len=store.current.lines.length;if(el.current&&len){for(var i=0;i<len;i++){var al=el.current.querySelectorAll('li[data-path="'.concat(store.current.lines[i],'"]'));if(al.length){var rect1=al[0].getBoundingClientRect();var sideLen=rect1.height/2+8;if(al.length>1){var _al__getBoundingClientRect=al[1].getBoundingClientRect(),bottom=_al__getBoundingClientRect.bottom,height=_al__getBoundingClientRect.height,top=_al__getBoundingClientRect.top;sideLen=i===0?top-rect1.top:bottom-rect1.top-height/2+8;al[1].style.setProperty("--c","none")}else if(i===0){al[0].style.setProperty("--c","none")}if(al.length!==1||i!==0){al[0].style.setProperty("--line","".concat(Math.abs(sideLen),"px"))}}}}},[]),32);(0,_react.useEffect)(function(){store.current.current=value?Array.isArray(value)?value:[value]:[]},[value]);(0,_react.useEffect)(function(){store.current.rtl=direction==="rtl"},[direction]);(0,_react.useEffect)(function(){var __data=(0,_common.cloneDeep)(fromSchema?(0,_fromSchema.default)(data):data);var __lines=_toConsumableArray(new Set(countLineLen(__data)));store.current.lines=__lines;store.current.treeData=__data},[fromSchema,data]);(0,_react.useEffect)(function(){updateLine()},[lines,updateLine]);(0,_react.useEffect)(function(){window.addEventListener("resize",updateLine,_common.passiveSupported);return function(){window.removeEventListener("resize",updateLine,_common.passiveSupported)}},[updateLine]);(0,_react.useEffect)(function(){var _store=store.current;return function(){_store()}},[]);return _react.default.createElement("ul",{ref:el,className:(0,_emotion.cx)(_style.cls.tree,className,rtl&&_style.cls.rtl),style:style},renderTreeRow(treeData))};var _default=Tree;
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"default",{enumerable:true,get:function(){return _default}});var _react=_interopRequireWildcard(require("react"));var _common=require("@moneko/common");var _sharedStoreObject=_interopRequireDefault(require("shared-store-object"));var _style=require("./style");var _emotion=require("../emotion");var _fromSchema=_interopRequireDefault(require("../from-schema"));function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};return _extends.apply(this,arguments)}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap;var cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj}}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj)}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc)}else{newObj[key]=obj[key]}}}newObj.default=obj;if(cache){cache.set(obj,newObj)}return newObj}function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread()}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}var path=Symbol("path");var pathEnd=Symbol("path-end");function countLineLen(tree){var depth=arguments.length>1&&arguments[1]!==void 0?arguments[1]:0;var lastIdx=tree.length-1;var last=tree[lastIdx];var frist=tree[0];var line=[];for(var i=0,len=tree.length;i<len;i++){var item=tree[i],isLast=i===lastIdx;if(i===0||isLast){item[path]=frist.key+(tree.length===1?"":">"+last.key);if(isLast){item[pathEnd]=""}line.push(item[path])}if(item.children){line=line.concat(countLineLen(item.children,depth+1))}}return line}function parseTree(str){var depthRegex=/[^\s|`│├└]/;var lines=str.trim().split("\n");var stack=[{title:lines[0],key:lines[0]}];for(var i=1;i<lines.length;i++){var depth=lines[i].search(depthRegex);if(depth===-1){continue}var node={title:lines[i].slice(depth+3),depth:depth};while(stack.length&&depth<=(stack[stack.length-1].depth||0)){stack.pop()}if(!stack.length){return[]}var parent=stack[stack.length-1];if(!parent.children){parent.children=[]}node.key="".concat(parent.key,"-").concat(node.title,"-").concat(depth,"-").concat(i);parent.children.push(node);stack.push(node)}return[stack[0]]}var Tree=function(param){var multiple=param.multiple,readonly=param.readonly,toggle=param.toggle,value=param.value,direction=param.direction,onChange=param.onChange,onRowClick=param.onRowClick,fromSchema=param.fromSchema,data=param.data,onRowDoubleClick=param.onRowDoubleClick,renderRow=param.renderRow,className=param.className,style=param.style,size=param.size;var el=(0,_react.useRef)(null);var store=(0,_react.useRef)((0,_sharedStoreObject.default)({treeData:[],lines:[],current:value?Array.isArray(value)?value:[value]:[],rtl:direction==="rtl",size:size}));var _store_current=store.current,current=_store_current.current,rtl=_store_current.rtl,treeData=_store_current.treeData,lines=_store_current.lines;var handleChange=(0,_react.useCallback)(function(key){if(!readonly&&(0,_common.isFunction)(onChange)){var _current=_toConsumableArray(store.current.current);if(multiple){var idx=_current.indexOf(key);if(idx===-1){_current.push(key)}else{_current.splice(idx,1)}}else if(toggle&&store.current.current[0]===key){_current=[]}else{_current=[key]}onChange(multiple?_current:_current[0])}},[multiple,onChange,readonly,toggle]);var handleClick=(0,_react.useCallback)(function(e,item){handleChange(item.key);onRowClick===null||onRowClick===void 0?void 0:onRowClick(e,item.key,item)},[onRowClick,handleChange]);var renderItem=(0,_react.useCallback)(function(item,title,subTitle){var row=(renderRow===null||renderRow===void 0?void 0:renderRow(item,title,subTitle))||[title,subTitle];return rtl?row.reverse():row},[rtl,renderRow]);var renderTreeRow=(0,_react.useCallback)(function(list){var depth=arguments.length>1&&arguments[1]!==void 0?arguments[1]:0;return list.map(function(item){var name=item.name,title=item.title,subTitle=item.subTitle,key=item.key,children=item.children;var _title=name===title||!name?[title]:[name,title];return _react.default.createElement(_react.default.Fragment,{key:key},_react.default.createElement("li",_extends({},{className:(0,_emotion.cx)(_style.cls.row,current.includes(key)&&_style.cls.active,(readonly||!(0,_common.isFunction)(onChange))&&_style.cls.non),onClick:function(e){return handleClick(e,item)},onDoubleClick:function(e){return onRowDoubleClick===null||onRowDoubleClick===void 0?void 0:onRowDoubleClick(e,key,item)},style:depth?{"--depth":"".concat(depth*2,"em")}:undefined,"data-path-end":item[pathEnd],"data-path":item[path]}),renderItem(item,_react.default.createElement("span",{key:"title",className:_style.cls.title},(rtl?_title.reverse():_title).join(": ")),subTitle&&_react.default.createElement("span",{key:"subTitle",className:_style.cls.subTitle},subTitle))),children?renderTreeRow(children,depth+1):null)})},[current,readonly,onChange,renderItem,rtl,handleClick,onRowDoubleClick]);var updateLine=(0,_common.throttle)((0,_react.useCallback)(function(){var len=store.current.lines.length;if(el.current&&len){var prefixSize=_style.sizeCnt[store.current.size||"normal"];for(var i=0;i<len;i++){var al=el.current.querySelectorAll('li[data-path="'.concat(store.current.lines[i],'"]'));if(al.length){var rect1=al[0].getBoundingClientRect();var sideLen=rect1.height/2+prefixSize;if(al.length>1){var _al__getBoundingClientRect=al[1].getBoundingClientRect(),bottom=_al__getBoundingClientRect.bottom,height=_al__getBoundingClientRect.height,top=_al__getBoundingClientRect.top;sideLen=i===0?top-rect1.top:bottom-rect1.top-height/2+prefixSize;al[1].style.setProperty("--c","none")}else if(i===0){al[0].style.setProperty("--c","none")}if(al.length!==1||i!==0){al[0].style.setProperty("--line","".concat(Math.abs(sideLen),"px"))}}}}},[]),32);(0,_react.useEffect)(function(){store.current.current=value?Array.isArray(value)?value:[value]:[]},[value]);(0,_react.useEffect)(function(){store.current.rtl=direction==="rtl"},[direction]);(0,_react.useEffect)(function(){store.current.size=size},[size]);(0,_react.useEffect)(function(){var _data=(0,_common.cloneDeep)(typeof data==="string"?parseTree(data):fromSchema?(0,_fromSchema.default)(data):data);store.current.lines=_toConsumableArray(new Set(countLineLen(_data)));store.current.treeData=_data},[fromSchema,data]);(0,_react.useEffect)(function(){updateLine()},[size,lines,updateLine]);(0,_react.useEffect)(function(){window.addEventListener("resize",updateLine,_common.passiveSupported);return function(){window.removeEventListener("resize",updateLine,_common.passiveSupported)}},[updateLine]);(0,_react.useEffect)(function(){var _store=store.current;return function(){_store()}},[]);return _react.default.createElement("ul",{ref:el,className:(0,_emotion.cx)(_style.cls.tree,size&&_style.cls[size],className,rtl&&_style.cls.rtl),style:style},renderTreeRow(treeData))};var _default=Tree;

package/lib/tree/style.d.ts

@@ -7,4 +7,12 @@ export declare const cls: {
     active: "n-tree-active";
     rtl: "n-tree-rtl";
     non: "n-tree-non-interactive";
+    small: "n-tree-small";
+    normal: "n-tree-normal";
+    large: "n-tree-large";
+};
+export declare const sizeCnt: {
+    small: number;
+    normal: number;
+    large: number;
 };

package/lib/tree/style.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"cls",{enumerable:true,get:function(){return cls}});var _emotion=require("../emotion");var _prefixCls=_interopRequireDefault(require("../prefix-cls"));function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0)}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}function _templateObject(){var data=_taggedTemplateLiteral(["\n  ."," {\n    padding-inline-start: 2em;\n    inline-size: 100%;\n    box-sizing: border-box;\n  }\n\n  ."," {\n    position: relative;\n    z-index: 0;\n    display: flex;\n    align-items: baseline;\n    border-radius: var(--border-radius);\n    padding: 2px 10px;\n    color: var(--text-color);\n    background-color: var(--component-background);\n    list-style: none;\n    box-shadow: 0 0 0 1px var(--border-color);\n    margin-inline-start: var(--depth);\n    margin-block-end: 8px;\n    cursor: pointer;\n    box-sizing: border-box;\n    min-inline-size: 160px;\n    inline-size: fit-content;\n\n    /* content-visibility: visible;\n    contain-intrinsic-size: 25px; */\n\n    &."," {\n      cursor: auto;\n    }\n    &::before,\n    &::after {\n      position: absolute;\n      pointer-events: none;\n      z-index: -1;\n      inset-inline-start: 0;\n      transition-property: border-color;\n    }\n\n    &:not(:first-of-type, :last-of-type, [data-path-end])::before {\n      content: '';\n      inset-inline-start: -1em;\n      inset-block-start: 50%;\n      inline-size: 1em;\n      block-size: 100%;\n      border-block-start: 1px solid var(--border-color);\n      box-sizing: border-box;\n    }\n\n    &[data-path] {\n      --r: 0 0 0 var(--border-radius);\n      --c: '';\n\n      &::after {\n        border-style: solid;\n        border-width: 0 0 1px 1px;\n        border-color: var(--border-color);\n        border-radius: var(--r);\n        content: var(--c);\n        inline-size: 1em;\n        inset-block-start: -8px;\n        inset-inline-start: -1em;\n        block-size: var(--line);\n        box-sizing: border-box;\n      }\n    }\n\n    &:first-of-type {\n      --r: var(--border-radius) 0 0 var(--border-radius);\n\n      &[data-path]::after {\n        border-width: 1px 0 1px 1px;\n        inset-block-start: 15px;\n      }\n    }\n\n    &:last-of-type {\n      margin-block-end: 0;\n    }\n  }\n  ."," {\n    direction: rtl;\n    ."," {\n      flex-direction: row-reverse;\n      justify-content: flex-end;\n\n      &::before,\n      &::after {\n        transform: scaleX(-1);\n      }\n    }\n  }\n  ."," {\n    font-size: 14px;\n    font-weight: normal;\n  }\n  ."," {\n    padding: 0 8px;\n    font-size: 10px;\n    color: var(--text-secondary);\n    font-style: italic;\n    text-transform: capitalize;\n    opacity: 0.5;\n  }\n  ."," {\n    color: var(--primary-color);\n    background-color: var(--primary-bg);\n    box-shadow: 0 0 0 1px var(--primary-border);\n    text-shadow: 2px 2px 2px var(--primary-outline);\n  }\n"]);_templateObject=function _templateObject(){return data};return data}var cls={tree:(0,_prefixCls.default)("tree"),row:(0,_prefixCls.default)("tree-row"),children:(0,_prefixCls.default)("tree-children"),title:(0,_prefixCls.default)("tree-title"),subTitle:(0,_prefixCls.default)("tree-sub-title"),active:(0,_prefixCls.default)("tree-active"),rtl:(0,_prefixCls.default)("tree-rtl"),non:(0,_prefixCls.default)("tree-non-interactive")};(0,_emotion.injectGlobal)(_templateObject(),cls.tree,cls.row,cls.non,cls.rtl,cls.row,cls.title,cls.subTitle,cls.active);
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});function _export(target,all){for(var name in all)Object.defineProperty(target,name,{enumerable:true,get:all[name]})}_export(exports,{cls:function(){return cls},sizeCnt:function(){return sizeCnt}});var _emotion=require("../emotion");var _prefixCls=_interopRequireDefault(require("../prefix-cls"));function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0)}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}function _templateObject(){var data=_taggedTemplateLiteral(["\n  ."," {\n    padding-inline-start: 2em;\n    inline-size: 100%;\n    box-sizing: border-box;\n    --size: 8px;\n  }\n\n  ."," {\n    position: relative;\n    z-index: 0;\n    display: flex;\n    align-items: baseline;\n    border-radius: var(--border-radius);\n    padding: 2px 10px;\n    color: var(--text-color);\n    background-color: var(--component-background);\n    list-style: none;\n    box-shadow: 0 0 0 1px var(--border-color);\n    margin-inline-start: var(--depth);\n    margin-block-end: var(--size);\n    cursor: pointer;\n    box-sizing: border-box;\n    min-inline-size: 160px;\n    inline-size: fit-content;\n\n    /* content-visibility: visible;\n    contain-intrinsic-size: 25px; */\n\n    &."," {\n      cursor: auto;\n    }\n    &::before,\n    &::after {\n      position: absolute;\n      pointer-events: none;\n      z-index: -1;\n      inset-inline-start: 0;\n      transition-property: border-color;\n    }\n\n    &:not(:first-of-type, :last-of-type, [data-path-end])::before {\n      content: '';\n      inset-inline-start: -1em;\n      inset-block-start: 50%;\n      inline-size: 1em;\n      block-size: 100%;\n      border-block-start: 1px solid var(--border-color);\n      box-sizing: border-box;\n    }\n\n    &[data-path] {\n      --r: 0 0 0 var(--border-radius);\n      --c: '';\n\n      &::after {\n        border-style: solid;\n        border-width: 0 0 1px 1px;\n        border-color: var(--border-color);\n        border-radius: var(--r);\n        content: var(--c);\n        inline-size: 1em;\n        inset-block-start: calc(var(--size) * -1);\n        inset-inline-start: -1em;\n        block-size: var(--line);\n        box-sizing: border-box;\n      }\n    }\n\n    &:first-of-type {\n      --r: var(--border-radius) 0 0 var(--border-radius);\n\n      &[data-path]::after {\n        border-width: 1px 0 1px 1px;\n        inset-block-start: 15px;\n      }\n    }\n\n    &:last-of-type {\n      margin-block-end: 0;\n    }\n  }\n  ."," {\n    direction: rtl;\n    ."," {\n      flex-direction: row-reverse;\n      justify-content: flex-end;\n\n      &::before,\n      &::after {\n        transform: scaleX(-1);\n      }\n    }\n  }\n  ."," {\n    font-size: 14px;\n    font-weight: normal;\n  }\n  ."," {\n    padding: 0 var(--size);\n    font-size: 10px;\n    color: var(--text-secondary);\n    font-style: italic;\n    text-transform: capitalize;\n    opacity: 0.5;\n  }\n  ."," {\n    color: var(--primary-color);\n    background-color: var(--primary-bg);\n    box-shadow: 0 0 0 1px var(--primary-border);\n    text-shadow: 2px 2px 2px var(--primary-outline);\n  }\n  ."," {\n    --size: 6px;\n    ."," {\n      padding: 1px 9px;\n      &:first-of-type {\n        &[data-path]::after {\n          inset-block-start: 12px;\n        }\n      }\n    }\n    ."," {\n      font-size: 13px;\n    }\n    ."," {\n      padding: 0 4px;\n      font-size: 9px;\n    }\n  }\n  ."," {\n    --size: 8px;\n  }\n  ."," {\n    --size: 10px;\n    ."," {\n      padding: 3px 12px;\n      \n      &:first-of-type {\n        &[data-path]::after {\n          inset-block-start: 17px;\n        }\n      }\n    }\n    ."," {\n      font-size: 15px;\n    }\n    ."," {\n      padding: 0 10px;\n      font-size: 12px;\n    }\n  }\n"]);_templateObject=function _templateObject(){return data};return data}var cls={tree:(0,_prefixCls.default)("tree"),row:(0,_prefixCls.default)("tree-row"),children:(0,_prefixCls.default)("tree-children"),title:(0,_prefixCls.default)("tree-title"),subTitle:(0,_prefixCls.default)("tree-sub-title"),active:(0,_prefixCls.default)("tree-active"),rtl:(0,_prefixCls.default)("tree-rtl"),non:(0,_prefixCls.default)("tree-non-interactive"),small:(0,_prefixCls.default)("tree-small"),normal:(0,_prefixCls.default)("tree-normal"),large:(0,_prefixCls.default)("tree-large")};var sizeCnt={small:6,normal:8,large:10};(0,_emotion.injectGlobal)(_templateObject(),cls.tree,cls.row,cls.non,cls.rtl,cls.row,cls.title,cls.subTitle,cls.active,cls.small,cls.row,cls.title,cls.subTitle,cls.normal,cls.large,cls.row,cls.title,cls.subTitle);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neko-ui",
-  "version": "1.0.48",
+  "version": "1.0.49",
   "description": "UI库",
   "main": "lib/index.js",
   "scripts": {
@@ -26,7 +26,7 @@
     "@commitlint/cli": "17.6.1",
     "@commitlint/config-conventional": "17.6.1",
     "@moneko/cli": "1.1.15",
-    "@moneko/core": "2.0.58",
+    "@moneko/core": "2.0.60",
     "@moneko/postcss": "1.0.29",
     "@moneko/react-live": "3.1.3",
     "@swc/jest": "0.2.26",
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "@emotion/css": "11.10.6",
-    "@moneko/common": "1.0.34",
+    "@moneko/common": "1.0.36",
     "katex": "0.16.6",
     "marked-completed": "1.2.5",
     "shared-store-object": "1.0.7",