neko-ui 2.8.0 → 2.8.2

package/es/tabs/index.d.ts

@@ -32,6 +32,11 @@ export interface TabsProps {
         left?: JSX.Element | (() => JSX.Element | (() => JSX.Element));
         right?: JSX.Element | (() => JSX.Element | (() => JSX.Element));
     };
+    /** 动画
+     * @since 2.8.2
+     * @default false
+     */
+    animated?: boolean;
 }
 export interface TabOption extends Omit<BaseOption, 'options'> {
     /** 内容 */

package/es/tabs/index.js

@@ -1,4 +1,4 @@
-import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as l}from"solid-js/web";import{insert as o}from"solid-js/web";import{getOwner as i}from"solid-js/web";import{effect as r}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{className as d}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let f=t("<style>"),u=t(`<n-button class="tab add">＋`,!0,!1),v=t("<div><div>"),m=t("<div>"),c=t(`<span class="remove">⛌`),p=t("<n-button>",!0,!1);import{For as b,Show as h,createComponent as g,createEffect as $,createMemo as w,createSignal as _,mergeProps as x,onCleanup as y,onMount as L,untrack as j}from"solid-js";import k from"@moneko/common/lib/isFunction";import E from"@moneko/common/lib/passiveSupported";import{css as T,cx as C}from"@moneko/css";import{customElement as W}from"solid-element";import{addCss as A,btnCss as N,style as V}from"./style";import{FieldName as D}from"../basic-config";import"../button";import O from"../get-options";import P from"../theme";function X(t){let n,g,x;let{baseStyle:W,isDark:X}=P,[F,S]=_(),[Y,q]=_(""),[z,B]=_({left:!1,right:!1}),G=w(()=>X()?T`
+import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as l}from"solid-js/web";import{insert as i}from"solid-js/web";import{getOwner as o}from"solid-js/web";import{effect as r}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{className as a}from"solid-js/web";import{classList as d}from"solid-js/web";import{addEventListener as v}from"solid-js/web";let f=t("<style>"),u=t(`<n-button class="tab add">＋`,!0,!1),m=t('<div><div class="items">'),c=t('<div class="content">'),p=t(`<span class="remove">⛌`),b=t("<n-button>",!0,!1);import{For as g,Show as $,createEffect as h,createMemo as _,createSignal as w,mergeProps as L,onCleanup as x,onMount as y,untrack as j}from"solid-js";import k from"@moneko/common/lib/isFunction";import E from"@moneko/common/lib/passiveSupported";import{css as T,cx as C}from"@moneko/css";import{customElement as W}from"solid-element";import{addCss as A,btnCss as N,style as V}from"./style";import{FieldName as D}from"../basic-config";import"../button";import O from"../get-options";import P from"../theme";function X(t){let n,L,W;let{baseStyle:X,isDark:F}=P,[S,Y]=w(),[q,z]=w(""),[B,G]=w({left:!1,right:!1}),H=_(()=>F()?T`
         :host {
           --tab-current-bg: var(--component-bg);
           --tab-bg: rgb(255 255 255 / 4%);
@@ -8,5 +8,5 @@ import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";impor
         --tab-bg: var(--primary-details-bg);
         --tab-current-bg: var(--component-bg);
       }
-    `),H=w(()=>Object.assign({},D,t.fieldNames)),I=w(()=>O(t.items,H())),J=w(()=>I().find(e=>e[H().value]===F()));function K(e,l){if(!t.disabled&&!e.disabled){let o=e[H().value];void 0===t.value&&S(o),k(t.onChange)&&t.onChange(o,e,l)}}function M(e,t){"Enter"===t.key&&K(e,t)}function Q(e,l,o){o.stopPropagation(),o.preventDefault(),k(t.onEdit)&&t.onEdit(e,l,o)}function R(e){if(x){var t;let l=n.offsetWidth,o=(null==g?void 0:g.offsetWidth)||0,i=x.scrollWidth;if(i>l-o){let t=0;e&&(E||(e.stopPropagation(),e.preventDefault()),t=0!==e.deltaX?e.deltaX:e.deltaY);let l=x.scrollLeft+t;x.scrollTo({left:l}),B({left:l>0,right:i>l+x.offsetWidth})}else B({left:!1,right:!1});let r=null==(t=j(J))?void 0:t.ref;q(`.tabs {--w: ${r.offsetWidth}px;--left: ${r.offsetLeft-x.scrollLeft+x.offsetLeft}px;--s:${x.scrollLeft}px}`)}}$(()=>{let e=j(F);void 0!==t.value?e=t.value:void 0!==t.defaultValue?e=t.defaultValue:I()[0]&&(e=I()[0][H().value]),e!==j(F)&&S(e)}),$(()=>{var e;let t,l;let o=null==(e=J())?void 0:e.ref;o?t=setTimeout(()=>{clearTimeout(t),x&&(B({left:!1,right:!1}),x.scrollTo({left:o.offsetLeft-x.offsetLeft,behavior:"smooth"})),q(`.tabs {--w: ${o.offsetWidth}px;--left: ${o.offsetLeft-x.scrollLeft+x.offsetLeft}px;--s:${x.scrollLeft}px}`),l=setTimeout(()=>{clearTimeout(l),R()},300)},0):q(""),y(()=>{clearTimeout(t),clearTimeout(l)})});let[U,Z]=_("slide-in");$(()=>{var e;return Z("slide-in"),null==(e=J())?void 0:e.content});let ee=w(()=>{var e,l;return k(null==(e=t.extra)?void 0:e.left)?t.extra.left():null==(l=t.extra)?void 0:l.left}),et=w(()=>{var e,l;return k(null==(e=t.extra)?void 0:e.right)?t.extra.right():null==(l=t.extra)?void 0:l.right}),el=w(()=>{var e;let t=null==(e=J())?void 0:e.content;return k(t)?t():t});function eo(){Z("")}return L(()=>{null==n||n.addEventListener("wheel",R,{passive:E})}),y(()=>{null==n||n.removeEventListener("wheel",R,!1)}),[(()=>{let e=f();return o(e,W,null),o(e,G,null),o(e,V,null),o(e,Y,null),o(e,()=>T(t.css),null),e})(),(()=>{let f=v(),m=n,$=f.firstChild,_=x;return"function"==typeof m?e(m,f):n=f,o(f,s(h,{get when(){return ee()},get children(){return ee()}}),$),"function"==typeof _?e(_,$):x=$,o($,s(b,{get each(){return I()},children:(l,n)=>{let f=w(()=>t.disabled||l.disabled),{icon:u,value:v,label:m}=H(),b=w(()=>void 0!==F()&&l[v]===F());return(()=>{let t=p(),v=I()[n()].ref;return"function"==typeof v?e(v,t):I()[n()].ref=t,a(t,"click",K.bind(null,l),!0),a(t,"keyup",M.bind(null,l),!0),t.link=!0,t.css=N,t._$owner=i(),o(t,()=>l[m],null),o(t,s(h,{get when(){return l.closable},get children(){let e=c();return a(e,"click",Q.bind(null,"remove",l),!0),e}}),null),r(e=>{let o=b()?"primary":"default",i=C("tab",b()&&"active",l.class),r=f()?-1:0,n=f(),s=l[u];return o!==e._v$4&&(t.type=e._v$4=o),i!==e._v$5&&d(t,e._v$5=i),r!==e._v$6&&(t.tabindex=e._v$6=r),n!==e._v$7&&(t.disabled=e._v$7=n),s!==e._v$8&&(t.icon=e._v$8=s),e},{_v$4:void 0,_v$5:void 0,_v$6:void 0,_v$7:void 0,_v$8:void 0}),t})()}})),o(f,s(h,{get when(){return t.add},get children(){let t=u(),l=g;return a(t,"click",Q.bind(null,"add",void 0),!0),"function"==typeof l?e(l,t):g=t,t.link=!0,t.css=A,t._$owner=i(),t}}),null),o(f,s(h,{get when(){return et()},get children(){return et()}}),null),r(e=>{let o=C("tabs",t.type,t.class,t.centered&&"centered"),i=t.disabled,r=C("items",z().left&&"warp-left",z().right&&"warp-right");return o!==e._v$&&d(f,e._v$=o),i!==e._v$2&&l(f,"aria-disabled",e._v$2=i),r!==e._v$3&&d($,e._v$3=r),e},{_v$:void 0,_v$2:void 0,_v$3:void 0}),f})(),s(h,{get when(){var ei;return null==(ei=J())?void 0:ei.content},get children(){let e=m();return a(e,"animationend",eo),o(e,el),r(()=>d(e,C("content",U()))),e}})]}W("n-tabs",{class:void 0,css:void 0,disabled:void 0,value:void 0,defaultValue:void 0,centered:void 0,items:[],type:"line",fieldNames:void 0,add:void 0,extra:void 0},(e,t)=>{let l=t.element,o=x({onChange(e,t,o){l.dispatchEvent(new CustomEvent("change",{detail:[e,t,o]}))},onEdit(e,t,o){l.dispatchEvent(new CustomEvent("edit",{detail:[e,t,o]}))}},e);return $(()=>{l.removeAttribute("items"),l.removeAttribute("field-names"),l.removeAttribute("css")}),g(X,o)});export default X;n(["click","keyup"]);
+    `),I=_(()=>Object.assign({},D,t.fieldNames)),J=_(()=>O(t.items,I())),K=_(()=>J().find(e=>e[I().value]===S()));function M(e,l){if(!t.disabled&&!e.disabled){let i=e[I().value];void 0===t.value&&Y(i),k(t.onChange)&&t.onChange(i,e,l)}}function Q(e,t){"Enter"===t.key&&M(e,t)}function R(e,l,i){i.stopPropagation(),i.preventDefault(),k(t.onEdit)&&t.onEdit(e,l,i)}function U(e){if(W){var t;let l=n.offsetWidth,i=(null==L?void 0:L.offsetWidth)||0,o=W.scrollWidth;if(o>l-i){let t=0;e&&(E||(e.stopPropagation(),e.preventDefault()),t=0!==e.deltaX?e.deltaX:e.deltaY);let l=W.scrollLeft+t;W.scrollTo({left:l}),G({left:l>0,right:o>l+W.offsetWidth})}else G({left:!1,right:!1});let r=null==(t=j(K))?void 0:t.ref;z(`.tabs {--w: ${r.offsetWidth}px;--left: ${r.offsetLeft-W.scrollLeft+W.offsetLeft}px;--s:${W.scrollLeft}px}`)}}h(()=>{let e=j(S);void 0!==t.value?e=t.value:void 0!==t.defaultValue?e=t.defaultValue:J()[0]&&(e=J()[0][I().value]),e!==j(S)&&Y(e)}),h(()=>{var e;let t,l;let i=null==(e=K())?void 0:e.ref;i?t=setTimeout(()=>{clearTimeout(t),W&&(G({left:!1,right:!1}),W.scrollTo({left:i.offsetLeft-W.offsetLeft,behavior:"smooth"})),z(`.tabs {--w: ${i.offsetWidth}px;--left: ${i.offsetLeft-W.scrollLeft+W.offsetLeft}px;--s:${W.scrollLeft}px}`),l=setTimeout(()=>{clearTimeout(l),U()},300)},0):z(""),x(()=>{clearTimeout(t),clearTimeout(l)})});let[Z,ee]=w("slide-in");h(()=>{var e;return t.animated&&ee("slide-in"),null==(e=K())?void 0:e.content});let et=_(()=>{var e,l;return k(null==(e=t.extra)?void 0:e.left)?t.extra.left():null==(l=t.extra)?void 0:l.left}),el=_(()=>{var e,l;return k(null==(e=t.extra)?void 0:e.right)?t.extra.right():null==(l=t.extra)?void 0:l.right}),ei=_(()=>{var e;let t=null==(e=K())?void 0:e.content;return k(t)?t():t});function eo(){t.animated&&ee("")}return y(()=>{null==n||n.addEventListener("wheel",U,{passive:E})}),x(()=>{null==n||n.removeEventListener("wheel",U,!1)}),[(()=>{let e=f();return i(e,X,null),i(e,H,null),i(e,V,null),i(e,q,null),i(e,()=>T(t.css),null),e})(),(()=>{let d=m(),f=n,c=d.firstChild,h=W;return"function"==typeof f?e(f,d):n=d,i(d,s($,{get when(){return et()},get children(){return et()}}),c),"function"==typeof h?e(h,c):W=c,i(c,s(g,{get each(){return J()},children:(l,n)=>{let d=_(()=>t.disabled||l.disabled),{icon:f,value:u,label:m}=I(),c=_(()=>void 0!==S()&&l[u]===S());return(()=>{let t=b(),u=J()[n()].ref;return"function"==typeof u?e(u,t):J()[n()].ref=t,v(t,"click",M.bind(null,l),!0),v(t,"keyup",Q.bind(null,l),!0),t.link=!0,t.css=N,t._$owner=o(),i(t,()=>l[m],null),i(t,s($,{get when(){return l.closable},get children(){let e=p();return v(e,"click",R.bind(null,"remove",l),!0),e}}),null),r(e=>{let i=c()?"primary":"default",o=C("tab",l.class),r=!!c(),s=!!(c()&&0===n()),v=d()?-1:0,u=d(),m=l[f];return i!==e._v$6&&(t.type=e._v$6=i),o!==e._v$7&&a(t,e._v$7=o),r!==e._v$8&&t.classList.toggle("active",e._v$8=r),s!==e._v$9&&t.classList.toggle("first-active",e._v$9=s),v!==e._v$10&&(t.tabindex=e._v$10=v),u!==e._v$11&&(t.disabled=e._v$11=u),m!==e._v$12&&(t.icon=e._v$12=m),e},{_v$6:void 0,_v$7:void 0,_v$8:void 0,_v$9:void 0,_v$10:void 0,_v$11:void 0,_v$12:void 0}),t})()}})),i(d,s($,{get when(){return t.add},get children(){let t=u(),l=L;return v(t,"click",R.bind(null,"add",void 0),!0),"function"==typeof l?e(l,t):L=t,t.link=!0,t.css=A,t._$owner=o(),t}}),null),i(d,s($,{get when(){return el()},get children(){return el()}}),null),r(e=>{let i=C("tabs",t.type,t.class),o=!!t.centered,r=t.disabled,n=!!B().left,s=!!B().right;return i!==e._v$&&a(d,e._v$=i),o!==e._v$2&&d.classList.toggle("centered",e._v$2=o),r!==e._v$3&&l(d,"aria-disabled",e._v$3=r),n!==e._v$4&&c.classList.toggle("warp-left",e._v$4=n),s!==e._v$5&&c.classList.toggle("warp-right",e._v$5=s),e},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0,_v$5:void 0}),d})(),s($,{get when(){var er;return null==(er=K())?void 0:er.content},get children(){let e=c();return v(e,"animationend",eo),i(e,ei),r(l=>d(e,{[Z()]:t.animated},l)),e}})]}W("n-tabs",{class:void 0,css:void 0,disabled:void 0,value:void 0,defaultValue:void 0,centered:void 0,items:[],type:"line",fieldNames:void 0,add:void 0,extra:void 0,animated:void 0},(e,t)=>{let l=t.element,i=L({onChange(e,t,i){l.dispatchEvent(new CustomEvent("change",{detail:[e,t,i]}))},onEdit(e,t,i){l.dispatchEvent(new CustomEvent("edit",{detail:[e,t,i]}))}},e);return h(()=>{l.removeAttribute("items"),l.removeAttribute("field-names"),l.removeAttribute("css")}),s(X,i)});export default X;n(["click","keyup"]);
 //# sourceMappingURL=index.js.map

package/es/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/tabs/index.tsx"],"sourcesContent":["import {\n  For,\n  Show,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  untrack,\n} from 'solid-js';\nimport { isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { addCss, btnCss, style } from './style';\nimport { FieldName } from '../basic-config';\nimport '../button';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport type { BaseOption, BasicConfig, ButtonElement, CustomElement } from '..';\n\nexport interface TabsProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 值(指定值时为受控模式,配合onChange使用) */\n  value?: string | number;\n  /** 默认值 */\n  defaultValue?: string | number;\n  /** 选项数据 */\n  items?: (TabOption | string)[];\n  /** 标签页居中 */\n  centered?: boolean;\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n  /** 标签页的显示类型\n   * @default 'line'\n   */\n  type?: 'line' | 'card';\n  /** 值修改时的回调方法 */\n  onChange?(val: string, item: TabOption, e: Event): void;\n  /** 显示添加按钮 */\n  add?: boolean;\n  /** 删除和添加时的回调方法 */\n  onEdit?: (type: 'add' | 'remove', item: TabOption, e: Event) => void;\n  /** 给标签页左右添加的附加内容 */\n  extra?: {\n    left?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n    right?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  };\n}\n\nexport interface TabOption extends Omit<BaseOption, 'options'> {\n  /** 内容 */\n  content?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  /** 标签可关闭 */\n  closable?: boolean;\n}\n\nfunction Tabs(props: TabsProps) {\n  const { baseStyle, isDark } = theme;\n  let box: HTMLDivElement | undefined;\n  let add: ButtonElement | undefined;\n  const [value, setValue] = createSignal<string | number>();\n  const [offsetStyle, setOffsetStyle] = createSignal('');\n  const [wrap, setWrap] = createSignal({ left: false, right: false });\n  let wrapRef: HTMLDivElement | undefined;\n\n  const cssVar = createMemo(() => {\n    if (isDark()) {\n      return css`\n        :host {\n          --tab-current-bg: var(--component-bg);\n          --tab-bg: rgb(255 255 255 / 4%);\n        }\n      `;\n    }\n\n    return css`\n      :host {\n        --tab-bg: var(--primary-details-bg);\n        --tab-current-bg: var(--component-bg);\n      }\n    `;\n  });\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n  const items = createMemo<TabOption[]>(() => {\n    return getOptions(props.items, fieldNames());\n  });\n  const current = createMemo(() => {\n    return items().find((o) => o[fieldNames().value] === value());\n  });\n\n  function onChange(item: TabOption, e: Event) {\n    if (!props.disabled && !item.disabled) {\n      const next = item[fieldNames().value];\n\n      if (props.value === void 0) {\n        setValue(next);\n      }\n      if (isFunction(props.onChange)) {\n        props.onChange(next, item, e);\n      }\n    }\n  }\n  function onKeyUp(item: TabOption, e: KeyboardEvent) {\n    if (e.key === 'Enter') {\n      onChange(item, e);\n    }\n  }\n  function handleEdit(type: 'remove' | 'add', item: TabOption | undefined, e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n    if (isFunction(props.onEdit)) {\n      props.onEdit(type, item, e);\n    }\n  }\n  function handleWheel(e?: WheelEvent) {\n    if (wrapRef) {\n      const pwid = box!.offsetWidth;\n      const addWid = add?.offsetWidth || 0;\n      const scrollWidth = wrapRef.scrollWidth;\n\n      if (scrollWidth > pwid - addWid) {\n        let deltaY = 0;\n\n        if (e) {\n          if (!passiveSupported) {\n            e.stopPropagation();\n            e.preventDefault();\n          }\n          deltaY = e.deltaX !== 0 ? e.deltaX : e.deltaY;\n        }\n        const nl = wrapRef.scrollLeft + deltaY;\n\n        wrapRef.scrollTo({\n          left: nl,\n        });\n        setWrap({\n          left: nl > 0,\n          right: scrollWidth > nl + wrapRef.offsetWidth,\n        });\n      } else {\n        setWrap({\n          left: false,\n          right: false,\n        });\n      }\n      const el = untrack(current)?.ref;\n\n      setOffsetStyle(\n        `.tabs {--w: ${el.offsetWidth}px;--left: ${\n          el.offsetLeft - wrapRef!.scrollLeft + wrapRef.offsetLeft\n        }px;--s:${wrapRef!.scrollLeft}px}`,\n      );\n    }\n  }\n  createEffect(() => {\n    let _val = untrack(value);\n\n    if (props.value !== void 0) {\n      _val = props.value;\n    } else if (props.defaultValue !== void 0) {\n      _val = props.defaultValue;\n    } else if (items()[0]) {\n      _val = items()[0][fieldNames().value];\n    }\n    if (_val !== untrack(value)) {\n      setValue(_val);\n    }\n  });\n\n  createEffect(() => {\n    let timer: NodeJS.Timeout | undefined, whellTimer: NodeJS.Timeout | undefined;\n    const el = current()?.ref;\n\n    if (el) {\n      timer = setTimeout(() => {\n        clearTimeout(timer);\n        if (wrapRef) {\n          setWrap({\n            left: false,\n            right: false,\n          });\n          wrapRef.scrollTo({\n            left: el.offsetLeft - wrapRef.offsetLeft,\n            behavior: 'smooth',\n          });\n        }\n\n        setOffsetStyle(\n          `.tabs {--w: ${el.offsetWidth}px;--left: ${\n            el.offsetLeft - wrapRef!.scrollLeft + wrapRef!.offsetLeft\n          }px;--s:${wrapRef!.scrollLeft}px}`,\n        );\n        whellTimer = setTimeout(() => {\n          clearTimeout(whellTimer);\n          handleWheel();\n        }, 300);\n      }, 0);\n    } else {\n      setOffsetStyle('');\n    }\n    onCleanup(() => {\n      clearTimeout(timer);\n      clearTimeout(whellTimer);\n    });\n  });\n  const [ani, setAni] = createSignal('slide-in');\n\n  createEffect(() => {\n    setAni('slide-in');\n    return current()?.content;\n  });\n  const left = createMemo(() =>\n    isFunction(props.extra?.left) ? (props.extra!.left() as JSX.Element) : props.extra?.left,\n  );\n  const right = createMemo(() =>\n    isFunction(props.extra?.right) ? (props.extra!.right() as JSX.Element) : props.extra?.right,\n  );\n  const content = createMemo(() => {\n    const _content = current()?.content;\n\n    return isFunction(_content) ? (_content() as JSX.Element) : _content;\n  });\n\n  function onAnimationEnd() {\n    setAni('');\n  }\n  onMount(() => {\n    box?.addEventListener('wheel', handleWheel, {\n      passive: passiveSupported,\n    });\n  });\n  onCleanup(() => {\n    box?.removeEventListener('wheel', handleWheel, false);\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {cssVar()}\n        {style}\n        {offsetStyle()}\n        {css(props.css)}\n      </style>\n      <div\n        ref={box}\n        class={cx('tabs', props.type, props.class, props.centered && 'centered')}\n        aria-disabled={props.disabled}\n      >\n        <Show when={left()}>{left()}</Show>\n        <div\n          ref={wrapRef}\n          class={cx('items', wrap().left && 'warp-left', wrap().right && 'warp-right')}\n        >\n          <For each={items()}>\n            {(item, i) => {\n              const readOnly = createMemo(() => props.disabled || item.disabled);\n              const { icon, value: val, label } = fieldNames();\n              const isActive = createMemo(() => value() !== void 0 && item[val] === value());\n\n              return (\n                <n-button\n                  link={true}\n                  type={isActive() ? 'primary' : 'default'}\n                  class={cx('tab', isActive() && 'active', item.class)}\n                  tabindex={readOnly() ? -1 : 0}\n                  onKeyUp={onKeyUp.bind(null, item)}\n                  onClick={onChange.bind(null, item)}\n                  disabled={readOnly()}\n                  icon={item[icon]}\n                  ref={items()[i()].ref}\n                  css={btnCss}\n                >\n                  {item[label]}\n                  <Show when={item.closable}>\n                    <span class=\"remove\" onClick={handleEdit.bind(null, 'remove', item)}>\n                      ⛌\n                    </span>\n                  </Show>\n                </n-button>\n              );\n            }}\n          </For>\n        </div>\n        <Show when={props.add}>\n          <n-button\n            ref={add}\n            link={true}\n            class=\"tab add\"\n            css={addCss}\n            onClick={handleEdit.bind(null, 'add', void 0)}\n          >\n            ＋\n          </n-button>\n        </Show>\n        <Show when={right()}>{right()}</Show>\n      </div>\n      <Show when={current()?.content}>\n        <div class={cx('content', ani())} onAnimationEnd={onAnimationEnd}>\n          {content()}\n        </div>\n      </Show>\n    </>\n  );\n}\n\nexport type TabsElement = CustomElement<TabsProps, 'onChange' | 'onEdit'>;\n\ncustomElement<TabsProps>(\n  'n-tabs',\n  {\n    class: void 0,\n    css: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    centered: void 0,\n    items: [],\n    type: 'line' as TabsProps['type'],\n    fieldNames: void 0,\n    add: void 0,\n    extra: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(next: string, item: TabOption, e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: [next, item, e],\n            }),\n          );\n        },\n        onEdit(type: 'add' | 'remove', item: TabOption, e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('edit', {\n              detail: [type, item, e],\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('items');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return createComponent(Tabs, props);\n  },\n);\nexport default Tabs;\n"],"names":["For","Show","createComponent","createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","untrack","isFunction","passiveSupported","css","cx","customElement","addCss","btnCss","style","FieldName","getOptions","theme","Tabs","props","box","add","wrapRef","baseStyle","isDark","value","setValue","offsetStyle","setOffsetStyle","wrap","setWrap","left","right","cssVar","fieldNames","Object","assign","items","current","find","o","onChange","item","e","disabled","next","onKeyUp","key","handleEdit","type","stopPropagation","preventDefault","onEdit","handleWheel","pwid","offsetWidth","addWid","scrollWidth","deltaY","deltaX","nl","scrollLeft","scrollTo","el","ref","offsetLeft","_val","defaultValue","timer","whellTimer","setTimeout","clearTimeout","behavior","ani","setAni","content","extra","_content","onAnimationEnd","addEventListener","passive","removeEventListener","i","readOnly","icon","val","label","isActive","bind","closable","class","centered","_","opt","element","dispatchEvent","CustomEvent","detail","removeAttribute"],"rangeMappings":";;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../components/tabs/index.tsx"],"sourcesContent":["import {\n  For,\n  Show,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  untrack,\n} from 'solid-js';\nimport { isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { addCss, btnCss, style } from './style';\nimport { FieldName } from '../basic-config';\nimport '../button';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport type { BaseOption, BasicConfig, ButtonElement, CustomElement } from '..';\n\nexport interface TabsProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 值(指定值时为受控模式,配合onChange使用) */\n  value?: string | number;\n  /** 默认值 */\n  defaultValue?: string | number;\n  /** 选项数据 */\n  items?: (TabOption | string)[];\n  /** 标签页居中 */\n  centered?: boolean;\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n  /** 标签页的显示类型\n   * @default 'line'\n   */\n  type?: 'line' | 'card';\n  /** 值修改时的回调方法 */\n  onChange?(val: string, item: TabOption, e: Event): void;\n  /** 显示添加按钮 */\n  add?: boolean;\n  /** 删除和添加时的回调方法 */\n  onEdit?: (type: 'add' | 'remove', item: TabOption, e: Event) => void;\n  /** 给标签页左右添加的附加内容 */\n  extra?: {\n    left?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n    right?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  };\n  /** 动画\n   * @since 2.8.2\n   * @default false\n   */\n  animated?: boolean;\n}\n\nexport interface TabOption extends Omit<BaseOption, 'options'> {\n  /** 内容 */\n  content?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  /** 标签可关闭 */\n  closable?: boolean;\n}\n\nfunction Tabs(props: TabsProps) {\n  const { baseStyle, isDark } = theme;\n  let box: HTMLDivElement | undefined;\n  let add: ButtonElement | undefined;\n  const [value, setValue] = createSignal<string | number>();\n  const [offsetStyle, setOffsetStyle] = createSignal('');\n  const [wrap, setWrap] = createSignal({ left: false, right: false });\n  let wrapRef: HTMLDivElement | undefined;\n\n  const cssVar = createMemo(() => {\n    if (isDark()) {\n      return css`\n        :host {\n          --tab-current-bg: var(--component-bg);\n          --tab-bg: rgb(255 255 255 / 4%);\n        }\n      `;\n    }\n\n    return css`\n      :host {\n        --tab-bg: var(--primary-details-bg);\n        --tab-current-bg: var(--component-bg);\n      }\n    `;\n  });\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n  const items = createMemo<TabOption[]>(() => {\n    return getOptions(props.items, fieldNames());\n  });\n  const current = createMemo(() => {\n    return items().find((o) => o[fieldNames().value] === value());\n  });\n\n  function onChange(item: TabOption, e: Event) {\n    if (!props.disabled && !item.disabled) {\n      const next = item[fieldNames().value];\n\n      if (props.value === void 0) {\n        setValue(next);\n      }\n      if (isFunction(props.onChange)) {\n        props.onChange(next, item, e);\n      }\n    }\n  }\n  function onKeyUp(item: TabOption, e: KeyboardEvent) {\n    if (e.key === 'Enter') {\n      onChange(item, e);\n    }\n  }\n  function handleEdit(type: 'remove' | 'add', item: TabOption | undefined, e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n    if (isFunction(props.onEdit)) {\n      props.onEdit(type, item, e);\n    }\n  }\n  function handleWheel(e?: WheelEvent) {\n    if (wrapRef) {\n      const pwid = box!.offsetWidth;\n      const addWid = add?.offsetWidth || 0;\n      const scrollWidth = wrapRef.scrollWidth;\n\n      if (scrollWidth > pwid - addWid) {\n        let deltaY = 0;\n\n        if (e) {\n          if (!passiveSupported) {\n            e.stopPropagation();\n            e.preventDefault();\n          }\n          deltaY = e.deltaX !== 0 ? e.deltaX : e.deltaY;\n        }\n        const nl = wrapRef.scrollLeft + deltaY;\n\n        wrapRef.scrollTo({\n          left: nl,\n        });\n        setWrap({\n          left: nl > 0,\n          right: scrollWidth > nl + wrapRef.offsetWidth,\n        });\n      } else {\n        setWrap({\n          left: false,\n          right: false,\n        });\n      }\n      const el = untrack(current)?.ref;\n\n      setOffsetStyle(\n        `.tabs {--w: ${el.offsetWidth}px;--left: ${\n          el.offsetLeft - wrapRef!.scrollLeft + wrapRef.offsetLeft\n        }px;--s:${wrapRef!.scrollLeft}px}`,\n      );\n    }\n  }\n  createEffect(() => {\n    let _val = untrack(value);\n\n    if (props.value !== void 0) {\n      _val = props.value;\n    } else if (props.defaultValue !== void 0) {\n      _val = props.defaultValue;\n    } else if (items()[0]) {\n      _val = items()[0][fieldNames().value];\n    }\n    if (_val !== untrack(value)) {\n      setValue(_val);\n    }\n  });\n\n  createEffect(() => {\n    let timer: NodeJS.Timeout | undefined, whellTimer: NodeJS.Timeout | undefined;\n    const el = current()?.ref;\n\n    if (el) {\n      timer = setTimeout(() => {\n        clearTimeout(timer);\n        if (wrapRef) {\n          setWrap({\n            left: false,\n            right: false,\n          });\n          wrapRef.scrollTo({\n            left: el.offsetLeft - wrapRef.offsetLeft,\n            behavior: 'smooth',\n          });\n        }\n\n        setOffsetStyle(\n          `.tabs {--w: ${el.offsetWidth}px;--left: ${\n            el.offsetLeft - wrapRef!.scrollLeft + wrapRef!.offsetLeft\n          }px;--s:${wrapRef!.scrollLeft}px}`,\n        );\n        whellTimer = setTimeout(() => {\n          clearTimeout(whellTimer);\n          handleWheel();\n        }, 300);\n      }, 0);\n    } else {\n      setOffsetStyle('');\n    }\n    onCleanup(() => {\n      clearTimeout(timer);\n      clearTimeout(whellTimer);\n    });\n  });\n  const [ani, setAni] = createSignal('slide-in');\n\n  createEffect(() => {\n    if (props.animated) {\n      setAni('slide-in');\n    }\n    return current()?.content;\n  });\n  const left = createMemo(() =>\n    isFunction(props.extra?.left) ? (props.extra!.left() as JSX.Element) : props.extra?.left,\n  );\n  const right = createMemo(() =>\n    isFunction(props.extra?.right) ? (props.extra!.right() as JSX.Element) : props.extra?.right,\n  );\n  const content = createMemo(() => {\n    const _content = current()?.content;\n\n    return isFunction(_content) ? (_content() as JSX.Element) : _content;\n  });\n\n  function onAnimationEnd() {\n    if (props.animated) {\n      setAni('');\n    }\n  }\n  onMount(() => {\n    box?.addEventListener('wheel', handleWheel, {\n      passive: passiveSupported,\n    });\n  });\n  onCleanup(() => {\n    box?.removeEventListener('wheel', handleWheel, false);\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {cssVar()}\n        {style}\n        {offsetStyle()}\n        {css(props.css)}\n      </style>\n      <div\n        ref={box}\n        class={cx('tabs', props.type, props.class)}\n        classList={{\n          centered: props.centered,\n        }}\n        aria-disabled={props.disabled}\n      >\n        <Show when={left()}>{left()}</Show>\n        <div\n          ref={wrapRef}\n          class=\"items\"\n          classList={{\n            'warp-left': wrap().left,\n            'warp-right': wrap().right,\n          }}\n        >\n          <For each={items()}>\n            {(item, i) => {\n              const readOnly = createMemo(() => props.disabled || item.disabled);\n              const { icon, value: val, label } = fieldNames();\n              const isActive = createMemo(() => value() !== void 0 && item[val] === value());\n\n              return (\n                <n-button\n                  link={true}\n                  type={isActive() ? 'primary' : 'default'}\n                  class={cx('tab', item.class)}\n                  classList={{\n                    active: isActive(),\n                    'first-active': isActive() && i() === 0,\n                  }}\n                  tabindex={readOnly() ? -1 : 0}\n                  onKeyUp={onKeyUp.bind(null, item)}\n                  onClick={onChange.bind(null, item)}\n                  disabled={readOnly()}\n                  icon={item[icon]}\n                  ref={items()[i()].ref}\n                  css={btnCss}\n                >\n                  {item[label]}\n                  <Show when={item.closable}>\n                    <span class=\"remove\" onClick={handleEdit.bind(null, 'remove', item)}>\n                      ⛌\n                    </span>\n                  </Show>\n                </n-button>\n              );\n            }}\n          </For>\n        </div>\n        <Show when={props.add}>\n          <n-button\n            ref={add}\n            link={true}\n            class=\"tab add\"\n            css={addCss}\n            onClick={handleEdit.bind(null, 'add', void 0)}\n          >\n            ＋\n          </n-button>\n        </Show>\n        <Show when={right()}>{right()}</Show>\n      </div>\n      <Show when={current()?.content}>\n        <div\n          class=\"content\"\n          classList={{\n            [ani()]: props.animated,\n          }}\n          onAnimationEnd={onAnimationEnd}\n        >\n          {content()}\n        </div>\n      </Show>\n    </>\n  );\n}\n\nexport type TabsElement = CustomElement<TabsProps, 'onChange' | 'onEdit'>;\n\ncustomElement<TabsProps>(\n  'n-tabs',\n  {\n    class: void 0,\n    css: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    centered: void 0,\n    items: [],\n    type: 'line' as TabsProps['type'],\n    fieldNames: void 0,\n    add: void 0,\n    extra: void 0,\n    animated: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(next: string, item: TabOption, e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: [next, item, e],\n            }),\n          );\n        },\n        onEdit(type: 'add' | 'remove', item: TabOption, e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('edit', {\n              detail: [type, item, e],\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('items');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return <Tabs {...props} />;\n  },\n);\nexport default Tabs;\n"],"names":["For","Show","createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","untrack","isFunction","passiveSupported","css","cx","customElement","addCss","btnCss","style","FieldName","getOptions","theme","Tabs","props","box","add","wrapRef","baseStyle","isDark","value","setValue","offsetStyle","setOffsetStyle","wrap","setWrap","left","right","cssVar","fieldNames","Object","assign","items","current","find","o","onChange","item","e","disabled","next","onKeyUp","key","handleEdit","type","stopPropagation","preventDefault","onEdit","handleWheel","pwid","offsetWidth","addWid","scrollWidth","deltaY","deltaX","nl","scrollLeft","scrollTo","el","ref","offsetLeft","_val","defaultValue","timer","whellTimer","setTimeout","clearTimeout","behavior","ani","setAni","animated","content","extra","_content","onAnimationEnd","addEventListener","passive","removeEventListener","i","readOnly","icon","val","label","isActive","bind","closable","class","centered","_","opt","element","dispatchEvent","CustomEvent","detail","removeAttribute"],"rangeMappings":";;;;;;;;;;","mappings":"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"}

package/es/tag/index.js

@@ -1,6 +1,6 @@
-import{template as e}from"solid-js/web";import{spread as o}from"solid-js/web";import{mergeProps as s}from"solid-js/web";import"solid-js/web";import{insert as r}from"solid-js/web";import{delegateEvents as l}from"solid-js/web";import{createComponent as t}from"solid-js/web";import{addEventListener as n}from"solid-js/web";let i=e("<style>"),c=e('<span class="icon">'),d=e('<span class="close">'),m=e("<span>");import{Show as a,createComponent as p,createEffect as u,createMemo as b,createSignal as f,mergeProps as v,splitProps as g}from"solid-js";import h from"@moneko/common/lib/isFunction";import{css as w,cx as j}from"@moneko/css";import{customElement as C}from"solid-element";import{style as k}from"./style";import y,{generateTheme as I}from"../theme";function E(e){let{baseStyle:l,isDark:p}=y,[u,v]=g(e,["class","css","onClose","color","icon","closeIcon","bordered","type","disabled"]),[C,E]=f(!0),x=b(()=>u.color?w`
+import{template as e}from"solid-js/web";import{spread as o}from"solid-js/web";import{mergeProps as s}from"solid-js/web";import"solid-js/web";import{insert as r}from"solid-js/web";import{delegateEvents as t}from"solid-js/web";import{createComponent as l}from"solid-js/web";import{addEventListener as n}from"solid-js/web";let i=e("<style>"),c=e('<span class="icon">'),d=e('<span class="close">'),m=e("<span>");import{Show as a,createEffect as u,createMemo as p,createSignal as b,mergeProps as f,splitProps as g}from"solid-js";import v from"@moneko/common/lib/isFunction";import{css as h,cx as w}from"@moneko/css";import{customElement as j}from"solid-element";import{style as C}from"./style";import k,{generateColor as y}from"../theme";function I(e){let{baseStyle:t,isDark:u}=k,[f,j]=g(e,["class","css","onClose","color","icon","closeIcon","bordered","type","disabled"]),[I,E]=b(!0),L=p(()=>f.color?h`
         :host {
-          ${I(u.color,{dark:p(),name:"tag-custom"})}
+          ${y(f.color,{dark:u(),name:"tag-custom"})}
         }
-      `:"");function A(e){h(u.onClose)&&u.onClose(e),E(!1)}return t(a,{get when(){return C()},get children(){return[(()=>{let e=i();return r(e,l,null),r(e,x,null),r(e,k,null),r(e,()=>w(u.css),null),e})(),(()=>{let e=m();return o(e,s(v,{get class(){return j("tag",u.type,u.color&&"tag-custom",u.bordered&&"bordered",u.disabled&&"disabled")}}),!1,!0),r(e,t(a,{get when(){return u.icon},get children(){let e=c();return r(e,()=>u.icon),e}}),null),r(e,()=>v.children,null),r(e,t(a,{get when(){return u.closeIcon},get children(){let e=d();return n(e,"click",A,!0),r(e,()=>!0===u.closeIcon?"⛌":u.closeIcon),e}}),null),e})()]}})}C("n-tag",{class:void 0,css:void 0,color:void 0,icon:void 0,closeIcon:void 0,onClose:void 0,bordered:!0,disabled:void 0,type:void 0},(e,o)=>{let s=o.element,r=v({css:s.css,children:[...s.childNodes.values()],onClose(e){s.dispatchEvent(new CustomEvent("close",{detail:e}))}},e);return u(()=>{s.replaceChildren(),s.removeAttribute("css")}),p(E,r)});export default E;l(["click"]);
+      `:"");function x(e){v(f.onClose)&&f.onClose(e),E(!1)}return l(a,{get when(){return I()},get children(){return[(()=>{let e=i();return r(e,t,null),r(e,L,null),r(e,C,null),r(e,()=>h(f.css),null),e})(),(()=>{let e=m();return o(e,s(j,{get class(){return w("tag",f.type)},get classList(){return{"tag-custom":!!f.color,bordered:f.bordered,disabled:f.disabled}}}),!1,!0),r(e,l(a,{get when(){return f.icon},get children(){let e=c();return r(e,()=>f.icon),e}}),null),r(e,()=>j.children,null),r(e,l(a,{get when(){return f.closeIcon},get children(){let e=d();return n(e,"click",x,!0),r(e,()=>!0===f.closeIcon?"⛌":f.closeIcon),e}}),null),e})()]}})}j("n-tag",{class:void 0,css:void 0,color:void 0,icon:void 0,closeIcon:void 0,onClose:void 0,bordered:!0,disabled:void 0,type:void 0},(e,o)=>{let s=o.element,r=f({css:s.css,children:[...s.childNodes.values()],onClose(e){s.dispatchEvent(new CustomEvent("close",{detail:e}))}},e);return u(()=>{s.replaceChildren(),s.removeAttribute("css")}),l(I,r)});export default I;t(["click"]);
 //# sourceMappingURL=index.js.map

package/es/tag/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/tag/index.tsx"],"sourcesContent":["import {\n  Show,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  splitProps,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport theme, { generateTheme } from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface TagProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义颜色 */\n  color?: string;\n  /** 图标 */\n  icon?: JSX.Element;\n  /** 内置类型(状态) */\n  type?: 'primary' | 'success' | 'error' | 'warning';\n  /** 自定义关闭图标 */\n  closeIcon?: JSX.Element | boolean;\n  /** 显示边框\n   * @default true\n   */\n  bordered?: boolean;\n  /** 禁用 */\n  disabled?: boolean;\n  /** 关闭时的回调方法 */\n  onClose?: (e: MouseEvent) => void;\n  children?: JSX.Element;\n}\n\nfunction Tag(props: TagProps) {\n  const { baseStyle, isDark } = theme;\n  const [local, other] = splitProps(props, [\n    'class',\n    'css',\n    'onClose',\n    'color',\n    'icon',\n    'closeIcon',\n    'bordered',\n    'type',\n    'disabled',\n  ]);\n  const [show, setShow] = createSignal(true);\n\n  const customColor = createMemo(() => {\n    if (local.color) {\n      return css`\n        :host {\n          ${generateTheme(local.color, {\n            dark: isDark(),\n            name: 'tag-custom',\n          })}\n        }\n      `;\n    }\n    return '';\n  });\n\n  function onClose(e: Event) {\n    if (isFunction(local.onClose)) {\n      local.onClose(e);\n    }\n    setShow(false);\n  }\n\n  return (\n    <Show when={show()}>\n      <style>\n        {baseStyle()}\n        {customColor()}\n        {style}\n        {css(local.css)}\n      </style>\n      <span\n        {...other}\n        class={cx(\n          'tag',\n          local.type,\n          local.color && 'tag-custom',\n          local.bordered && 'bordered',\n          local.disabled && 'disabled',\n        )}\n      >\n        <Show when={local.icon}>\n          <span class=\"icon\">{local.icon}</span>\n        </Show>\n        {other.children}\n        <Show when={local.closeIcon}>\n          <span class=\"close\" onClick={onClose}>\n            {local.closeIcon === true ? '⛌' : local.closeIcon}\n          </span>\n        </Show>\n      </span>\n    </Show>\n  );\n}\n\nexport type TagElement = CustomElement<TagProps, 'onClose'>;\n\ncustomElement<TagProps>(\n  'n-tag',\n  {\n    class: void 0,\n    css: void 0,\n    color: void 0,\n    icon: void 0,\n    closeIcon: void 0,\n    onClose: void 0,\n    bordered: true,\n    disabled: void 0,\n    type: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        children: [...el.childNodes.values()],\n        onClose(e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('close', {\n              detail: e,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n      el.removeAttribute('css');\n    });\n\n    return createComponent(Tag, props);\n  },\n);\n\nexport default Tag;\n"],"names":["Show","createComponent","createEffect","createMemo","createSignal","mergeProps","splitProps","isFunction","css","cx","customElement","style","theme","generateTheme","Tag","props","baseStyle","isDark","local","other","show","setShow","customColor","color","dark","name","onClose","e","type","bordered","disabled","icon","children","closeIcon","class","_","opt","el","element","childNodes","values","dispatchEvent","CustomEvent","detail","replaceChildren","removeAttribute"],"rangeMappings":";;;;","mappings":"uZAAA,QACEA,QAAAA,CAAI,CACJC,mBAAAA,CAAe,CACfC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,cAAAA,CAAU,KACL,UAAW,AAClB,QAASC,MAAkB,+BAAiB,AAC5C,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAAOC,GAASC,iBAAAA,CAAa,KAAQ,UAAW,CA2BhD,SAASC,EAAIC,CAAe,EAC1B,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGL,EACxB,CAACM,EAAOC,EAAM,CAAGb,EAAWS,EAAO,CACvC,QACA,MACA,UACA,QACA,OACA,YACA,WACA,OACA,WACD,EACK,CAACK,EAAMC,EAAQ,CAAGjB,EAAa,CAAA,GAE/BkB,EAAcnB,EAAW,IAC7B,AAAIe,EAAMK,KAAK,CACNf,CAAG,CAAC;;UAEP,EAAEK,EAAcK,EAAMK,KAAK,CAAE,CAC3BC,KAAMP,IACNQ,KAAM,YACR,GAAG;;MAEP,CAAC,CAEI,IAGT,SAASC,EAAQC,CAAQ,EACnBpB,EAAWW,EAAMQ,OAAO,GAC1BR,EAAMQ,OAAO,CAACC,GAEhBN,EAAQ,CAAA,EACV,CAEA,SACGrB,qBAAWoB,sDAEPJ,YACAM,YACAX,gBACAH,EAAIU,EAAMV,GAAG,2CAGVW,sBACGV,EACL,MACAS,EAAMU,IAAI,CACVV,EAAMK,KAAK,EAAI,aACfL,EAAMW,QAAQ,EAAI,WAClBX,EAAMY,QAAQ,EAAI,4BAGnB9B,qBAAWkB,EAAMa,IAAI,0CACAb,EAAMa,IAAI,qBAE/BZ,EAAMa,QAAQ,aACdhC,qBAAWkB,EAAMe,SAAS,8CACIP,cAC1BR,AAAoB,CAAA,IAApBA,EAAMe,SAAS,CAAY,IAAMf,EAAMe,SAAS,sBAM7D,CAIAvB,EACE,QACA,CACEwB,MAAO,KAAK,EACZ1B,IAAK,KAAK,EACVe,MAAO,KAAK,EACZQ,KAAM,KAAK,EACXE,UAAW,KAAK,EAChBP,QAAS,KAAK,EACdG,SAAU,CAAA,EACVC,SAAU,KAAK,EACfF,KAAM,KAAK,CACb,EACA,CAACO,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBvB,EAAQV,EACZ,CACEG,IAAK6B,EAAG7B,GAAG,CACXwB,SAAU,IAAIK,EAAGE,UAAU,CAACC,MAAM,GAAG,CACrCd,QAAQC,CAAQ,EACdU,EAAGI,aAAa,CACd,IAAIC,YAAY,QAAS,CACvBC,OAAQhB,CACV,GAEJ,CACF,EACAQ,GAQF,OALAjC,EAAa,KACXmC,EAAGO,eAAe,GAClBP,EAAGQ,eAAe,CAAC,MACrB,GAEO5C,EAAgBa,EAAKC,EAC9B,EAGF,gBAAeD,CAAI"}
+{"version":3,"sources":["../../components/tag/index.tsx"],"sourcesContent":["import { Show, createEffect, createMemo, createSignal, mergeProps, splitProps } from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport theme, { generateColor } from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface TagProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义颜色 */\n  color?: string;\n  /** 图标 */\n  icon?: JSX.Element;\n  /** 内置类型(状态) */\n  type?: 'primary' | 'success' | 'error' | 'warning';\n  /** 自定义关闭图标 */\n  closeIcon?: JSX.Element | boolean;\n  /** 显示边框\n   * @default true\n   */\n  bordered?: boolean;\n  /** 禁用 */\n  disabled?: boolean;\n  /** 关闭时的回调方法 */\n  onClose?: (e: MouseEvent) => void;\n  children?: JSX.Element;\n}\n\nfunction Tag(props: TagProps) {\n  const { baseStyle, isDark } = theme;\n  const [local, other] = splitProps(props, [\n    'class',\n    'css',\n    'onClose',\n    'color',\n    'icon',\n    'closeIcon',\n    'bordered',\n    'type',\n    'disabled',\n  ]);\n  const [show, setShow] = createSignal(true);\n\n  const customColor = createMemo(() => {\n    if (local.color) {\n      return css`\n        :host {\n          ${generateColor(local.color, {\n            dark: isDark(),\n            name: 'tag-custom',\n          })}\n        }\n      `;\n    }\n    return '';\n  });\n\n  function onClose(e: Event) {\n    if (isFunction(local.onClose)) {\n      local.onClose(e);\n    }\n    setShow(false);\n  }\n\n  return (\n    <Show when={show()}>\n      <style>\n        {baseStyle()}\n        {customColor()}\n        {style}\n        {css(local.css)}\n      </style>\n      <span\n        {...other}\n        class={cx('tag', local.type)}\n        classList={{\n          'tag-custom': !!local.color,\n          bordered: local.bordered,\n          disabled: local.disabled,\n        }}\n      >\n        <Show when={local.icon}>\n          <span class=\"icon\">{local.icon}</span>\n        </Show>\n        {other.children}\n        <Show when={local.closeIcon}>\n          <span class=\"close\" onClick={onClose}>\n            {local.closeIcon === true ? '⛌' : local.closeIcon}\n          </span>\n        </Show>\n      </span>\n    </Show>\n  );\n}\n\nexport type TagElement = CustomElement<TagProps, 'onClose'>;\n\ncustomElement<TagProps>(\n  'n-tag',\n  {\n    class: void 0,\n    css: void 0,\n    color: void 0,\n    icon: void 0,\n    closeIcon: void 0,\n    onClose: void 0,\n    bordered: true,\n    disabled: void 0,\n    type: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        children: [...el.childNodes.values()],\n        onClose(e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('close', {\n              detail: e,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n      el.removeAttribute('css');\n    });\n\n    return <Tag {...props} />;\n  },\n);\n\nexport default Tag;\n"],"names":["Show","createEffect","createMemo","createSignal","mergeProps","splitProps","isFunction","css","cx","customElement","style","theme","generateColor","Tag","props","baseStyle","isDark","local","other","show","setShow","customColor","color","dark","name","onClose","e","type","bordered","disabled","icon","children","closeIcon","class","_","opt","el","element","childNodes","values","dispatchEvent","CustomEvent","detail","replaceChildren","removeAttribute"],"rangeMappings":";;;;","mappings":"uZAAA,QAASA,QAAAA,CAAI,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAChG,QAASC,MAAkB,+BAAiB,AAC5C,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAAOC,GAASC,iBAAAA,CAAa,KAAQ,UAAW,CA2BhD,SAASC,EAAIC,CAAe,EAC1B,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGL,EACxB,CAACM,EAAOC,EAAM,CAAGb,EAAWS,EAAO,CACvC,QACA,MACA,UACA,QACA,OACA,YACA,WACA,OACA,WACD,EACK,CAACK,EAAMC,EAAQ,CAAGjB,EAAa,CAAA,GAE/BkB,EAAcnB,EAAW,IAC7B,AAAIe,EAAMK,KAAK,CACNf,CAAG,CAAC;;UAEP,EAAEK,EAAcK,EAAMK,KAAK,CAAE,CAC3BC,KAAMP,IACNQ,KAAM,YACR,GAAG;;MAEP,CAAC,CAEI,IAGT,SAASC,EAAQC,CAAQ,EACnBpB,EAAWW,EAAMQ,OAAO,GAC1BR,EAAMQ,OAAO,CAACC,GAEhBN,EAAQ,CAAA,EACV,CAEA,SACGpB,qBAAWmB,sDAEPJ,YACAM,YACAX,gBACAH,EAAIU,EAAMV,GAAG,2CAGVW,sBACGV,EAAG,MAAOS,EAAMU,IAAI,yBAChB,CACT,aAAc,CAAC,CAACV,EAAMK,KAAK,CAC3BM,SAAUX,EAAMW,QAAQ,CACxBC,SAAUZ,EAAMY,QAAQ,AAC1B,kBAEC7B,qBAAWiB,EAAMa,IAAI,0CACAb,EAAMa,IAAI,qBAE/BZ,EAAMa,QAAQ,aACd/B,qBAAWiB,EAAMe,SAAS,8CACIP,cAC1BR,AAAoB,CAAA,IAApBA,EAAMe,SAAS,CAAY,IAAMf,EAAMe,SAAS,sBAM7D,CAIAvB,EACE,QACA,CACEwB,MAAO,KAAK,EACZ1B,IAAK,KAAK,EACVe,MAAO,KAAK,EACZQ,KAAM,KAAK,EACXE,UAAW,KAAK,EAChBP,QAAS,KAAK,EACdG,SAAU,CAAA,EACVC,SAAU,KAAK,EACfF,KAAM,KAAK,CACb,EACA,CAACO,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBvB,EAAQV,EACZ,CACEG,IAAK6B,EAAG7B,GAAG,CACXwB,SAAU,IAAIK,EAAGE,UAAU,CAACC,MAAM,GAAG,CACrCd,QAAQC,CAAQ,EACdU,EAAGI,aAAa,CACd,IAAIC,YAAY,QAAS,CACvBC,OAAQhB,CACV,GAEJ,CACF,EACAQ,GAQF,OALAjC,EAAa,KACXmC,EAAGO,eAAe,GAClBP,EAAGQ,eAAe,CAAC,MACrB,KAEQ/B,EAAQC,EAClB,EAGF,gBAAeD,CAAI"}

package/es/theme/index.d.ts

@@ -5,7 +5,7 @@ export { toneColor } from '@moneko/common';
  * @param {ThemeOption} option 配置项
  * @returns {Record<string, string>} 主题色调
  */
-export declare function generateTheme(base: string, option: ThemeOption): Record<string, string>;
+export declare function generateColor(base: string, option: ThemeOption): Record<string, string>;
 /** 颜色模式 */
 export declare enum ColorScheme {
     /** 明亮 */

package/es/theme/index.js

@@ -1,77 +1,2 @@
-var e;import{createEffect as o,createMemo as r,createRoot as a,createSignal as n,getOwner as t}from"solid-js";import i from"@moneko/common/lib/colorParse";import m from"@moneko/common/lib/mixColor";import s from"@moneko/common/lib/toneColor";import{css as l}from"@moneko/css";export{toneColor}from"@moneko/common";export function generateTheme(e,o){let r=s(e,null==o?void 0:o.dark),a=i(r[5]),n=i(e);return{[`--${o.name}-text`]:a.setAlpha(.65).toRgbaString(),[`--${o.name}-secondary`]:a.setAlpha(.45).toRgbaString(),[`--${o.name}-heading`]:r[5],[`--${o.name}-active`]:r[30],[`--${o.name}-color`]:r[40],[`--${o.name}-hover`]:m(r[40],r[30],15),[`--${o.name}-secondary-bg`]:r[70],[`--${o.name}-border`]:r[80],[`--${o.name}-outline`]:m(r[90],r[40],5),[`--${o.name}-selection`]:r[90],[`--${o.name}-notify-bg`]:i(r[90]).setAlpha(.8).toRgbaString(),[`--on-${o.name}-selection`]:r[10],[`--${o.name}-shadow`]:n.setAlpha(.12).toRgbaString(),[`--${o.name}-details-bg`]:r[95],[`--${o.name}-component-bg`]:r[98],[`--${o.name}-bg`]:r[99],[`--on-${o.name}-bg`]:r[5],[`--${o.name}-base-shadow`]:`0 3px 6px -4px ${n.setAlpha(.12).toRgbaString()}, 0 6px 16px 0 ${n.setAlpha(.08).toRgbaString()}, 0 9px 28px 8px ${n.setAlpha(.05).toRgbaString()}`}}export var ColorScheme;(e=ColorScheme||(ColorScheme={})).light="light",e.dark="dark",e.auto="auto";export default a(function(){let e=ColorScheme[localStorage.getItem("color-scheme")]||"auto",a=window.matchMedia("(prefers-color-scheme: dark)"),[t,i]=n(e),[m,s]=n(a.matches),[c,g]=n({primary:"#5794ff",warning:"#faad14",error:"#ff4d4f",success:"#52c41a"}),[b,d]=n({primary:"#4d81dc",warning:"#bb8314",error:"#901c22",success:"#419418"}),p=r(()=>generateTheme(c().primary,{name:"primary"})),h=r(()=>generateTheme(c().warning,{name:"warning"})),x=r(()=>generateTheme(c().success,{name:"success"})),f=r(()=>generateTheme(c().error,{name:"error"})),$=r(()=>l`
-      :root,
-      :host {
-        ${p()}
-        ${h()}
-        ${x()}
-        ${f()}
-        --bg: transparent;
-        --disable-color: rgb(0 0 0 / 25%);
-        --disable-bg: rgb(0 0 0 / 4%);
-        --disable-border: #d9d9d9;
-        --border-color: var(--primary-border);
-        --component-bg: var(--primary-bg);
-      }
-    `),u=r(()=>generateTheme(b().primary,{name:"primary",dark:!0})),y=r(()=>generateTheme(b().warning,{name:"warning",dark:!0})),v=r(()=>generateTheme(b().success,{name:"success",dark:!0})),S=r(()=>generateTheme(b().error,{name:"error",dark:!0})),k=r(()=>l`
-      :root,
-      :host {
-        ${u()}
-        ${y()}
-        ${S()}
-        ${v()}
-        --bg: #1c1c1c;
-        --disable-color: rgb(255 255 255 / 25%);
-        --disable-bg: rgb(255 255 255 / 8%);
-        --disable-border: #424242;
-        --border-color: #303030;
-        --component-bg: #141414;
-        --primary-shadow: rgb(0 0 0 / 12%);
-        --primary-selection: rgb(255 255 255 / 5%);
-        --primary-details-bg: rgb(255 255 255 / 3%);
-        --primary-component-bg: #000;
-        --modal-component-bg: rgb(30 30 30 / 80%);
-      }
-    `),w=l`
-    :root,
-    :host {
-      --font-size: 14px;
-      --font-size-sm: 12px;
-      --font-size-xs: 10px;
-      --font-size-lg: 16px;
-      --border-base: 1px solid var(--border-color);
-      --border-radius: 8px;
-      --text-color: var(--primary-text);
-      --text-secondary: var(--primary-secondary);
-      --text-heading: var(--primary-heading);
-      --text-selection: var(--primary-selection);
-      --box-shadow-base: var(--primary-base-shadow);
-      --transition-duration: 0.3s;
-      --mask-bg: rgb(0 0 0 / 5%);
-      --modal-component-bg: rgb(255 255 255 / 80%);
-      --modal-box-shadow: 0 5px 35px rgb(0 0 0 / 10%);
-      --notification-box-shadow: 0 4px 16px rgb(0 0 0 / 5%);
-      --transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
-
-      font-size: var(--font-size);
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-        'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-        'Noto Color Emoji', Helvetica, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans';
-      color: var(--text-color, rgb(0 0 0 / 65%));
-      line-height: 1.8;
-    }
-
-    [disabled]:not([disabled='false']) {
-      cursor: not-allowed;
-      color: var(--disable-color);
-    }
-
-    ::selection {
-      background-color: var(--text-selection);
-    }
-
-    ::-webkit-scrollbar {
-      inline-size: 4px;
-      block-size: 4px;
-    }
-  `;function C(e){s(e.matches)}o(()=>{let e=t();s("dark"===e||"auto"===e&&a.matches)});let z=r(()=>w+(m()?k():$()));return o(()=>{"auto"===t()?a.addEventListener("change",C):a.removeEventListener("change",C),localStorage.setItem("color-scheme",t())}),{baseStyle:z,dark:b,setDark:d,light:c,setLight:g,scheme:t,setScheme:i,isDark:m}},t());
+var e;import{createEffect as o,createMemo as r,createRoot as a,createSignal as n,getOwner as t}from"solid-js";import i from"@moneko/common/lib/colorParse";import l from"@moneko/common/lib/mixColor";import s from"@moneko/common/lib/toneColor";import{css as m}from"@moneko/css";export{toneColor}from"@moneko/common";export function generateColor(e,o){let r=s(e,null==o?void 0:o.dark),a=i(r[5]),n=i(e);return{[`--${o.name}-text`]:a.setAlpha(.65).toRgbaString(),[`--${o.name}-secondary`]:a.setAlpha(.45).toRgbaString(),[`--${o.name}-heading`]:r[5],[`--${o.name}-active`]:r[30],[`--${o.name}-color`]:r[40],[`--${o.name}-hover`]:l(r[40],r[30],15),[`--${o.name}-secondary-bg`]:r[70],[`--${o.name}-border`]:r[80],[`--${o.name}-outline`]:l(r[90],r[40],5),[`--${o.name}-selection`]:r[90],[`--${o.name}-notify-bg`]:i(r[90]).setAlpha(.8).toRgbaString(),[`--on-${o.name}-selection`]:r[10],[`--${o.name}-shadow`]:n.setAlpha(.12).toRgbaString(),[`--${o.name}-shadow-1`]:n.setAlpha(.08).toRgbaString(),[`--${o.name}-shadow-2`]:n.setAlpha(.05).toRgbaString(),[`--${o.name}-details-bg`]:r[95],[`--${o.name}-component-bg`]:r[98],[`--${o.name}-bg`]:r[99],[`--on-${o.name}-bg`]:r[5]}}export var ColorScheme;(e=ColorScheme||(ColorScheme={})).light="light",e.dark="dark",e.auto="auto";export default a(function(){let e=m({":root,:host":{"--scrollbar-size":"4px","--font-size":"14px","--font-size-sm":"12px","--font-size-xs":"10px","--font-size-lg":"16px","--border-base":"1px solid var(--border-color)","--border-radius":"8px","--text-color":"var(--primary-text)","--text-secondary":"var(--primary-secondary)","--text-heading":"var(--primary-heading)","--text-selection":"var(--primary-selection)","--transition-duration":"0.3s","--mask-bg":"rgb(0 0 0 / 5%)","--modal-component-bg":"rgb(255 255 255 / 80%)","--modal-box-shadow":"0 5px 35px rgb(0 0 0 / 10%)","--notification-box-shadow":"0 4px 16px rgb(0 0 0 / 5%)","--transition-timing-function":"cubic-bezier(0.645, 0.045, 0.355, 1)",fontSize:"var(--font-size)",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', Helvetica, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans'",color:"var(--text-color, rgb(0 0 0 / 65%))",lineHeight:1.8},'[disabled]:not([disabled="false"])':{cursor:"not-allowed",color:"var(--disable-color)"},"::selection":{backgroundColor:"var(--text-selection)"},"::-webkit-scrollbar":{inlineSize:"var(--scrollbar-size)",blockSize:"var(--scrollbar-size)"}}),a=ColorScheme[localStorage.getItem("color-scheme")]||"auto",t=window.matchMedia("(prefers-color-scheme: dark)"),[i,l]=n(a),[s,c]=n(t.matches),[b,g]=n({primary:"#5794ff",warning:"#faad14",error:"#ff4d4f",success:"#52c41a"}),[d,p]=n({primary:"#4d81dc",warning:"#bb8314",error:"#901c22",success:"#419418"}),h=r(()=>generateColor(b().primary,{name:"primary"})),f=r(()=>generateColor(d().primary,{name:"primary",dark:!0})),u=r(()=>generateColor(b().warning,{name:"warning"})),x=r(()=>generateColor(d().warning,{name:"warning",dark:!0})),y=r(()=>generateColor(b().success,{name:"success"})),v=r(()=>generateColor(d().success,{name:"success",dark:!0})),S=r(()=>generateColor(b().error,{name:"error"})),$=r(()=>generateColor(d().error,{name:"error",dark:!0}));function C(o){let r="";for(let e in o)Object.prototype.hasOwnProperty.call(o,e)&&(r+=`${e}:${o[e]};`);return`${e}:root,:host{${r}}`}let k=r(()=>C(Object.assign({},h(),u(),y(),S(),{"--bg":"transparent","--disable-color":"rgb(0 0 0 / 25%)","--disable-bg":"rgb(0 0 0 / 4%)","--disable-border":"#d9d9d9","--border-color":"var(--primary-border)","--component-bg":"var(--primary-bg)"}))),w=r(()=>C(Object.assign({},f(),x(),v(),$(),{"--bg":"#1c1c1c","--disable-color":"rgb(255 255 255 / 25%)","--disable-bg":"rgb(255 255 255 / 8%)","--disable-border":"#424242","--border-color":"#303030","--component-bg":"#141414","--primary-shadow":"rgb(0 0 0 / 12%)","--primary-selection":"rgb(255 255 255 / 5%)","--primary-details-bg":"rgb(255 255 255 / 3%)","--primary-component-bg":"#000","--modal-component-bg":"rgb(30 30 30 / 80%)"})));function z(e){c(e.matches)}o(()=>{let e=i();c("dark"===e||"auto"===e&&t.matches)});let A=r(()=>s()?w():k());return o(()=>{"auto"===i()?t.addEventListener("change",z):t.removeEventListener("change",z),localStorage.setItem("color-scheme",i())}),{baseStyle:A,dark:d,setDark:p,light:b,setLight:g,scheme:i,setScheme:l,isDark:s}},t());
 //# sourceMappingURL=index.js.map

package/es/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/theme/index.ts"],"sourcesContent":["import {\n  type Accessor,\n  type Setter,\n  createEffect,\n  createMemo,\n  createRoot,\n  createSignal,\n  getOwner,\n} from 'solid-js';\nimport { colorParse, mixColor, toneColor } from '@moneko/common';\nimport { css } from '@moneko/css';\nexport { toneColor } from '@moneko/common';\n\n/** 生成主题色调\n * @param {string} base 基础颜色\n * @param {ThemeOption} option 配置项\n * @returns {Record<string, string>} 主题色调\n */\nexport function generateTheme(base: string, option: ThemeOption): Record<string, string> {\n  const obj = toneColor(base, option?.dark);\n  const textColor = colorParse(obj[5]);\n  const baseColor = colorParse(base);\n\n  return {\n    [`--${option.name}-text`]: textColor.setAlpha(0.65).toRgbaString(),\n    [`--${option.name}-secondary`]: textColor.setAlpha(0.45).toRgbaString(),\n    [`--${option.name}-heading`]: obj[5],\n    [`--${option.name}-active`]: obj[30],\n    [`--${option.name}-color`]: obj[40],\n    // [`--${option.name}-hover`]: obj[50],\n    [`--${option.name}-hover`]: mixColor(obj[40], obj[30], 15),\n    [`--${option.name}-secondary-bg`]: obj[70],\n    [`--${option.name}-border`]: obj[80],\n    // [`--${option.name}-outline`]: obj[90],\n    [`--${option.name}-outline`]: mixColor(obj[90], obj[40], 5),\n    [`--${option.name}-selection`]: obj[90],\n    [`--${option.name}-notify-bg`]: colorParse(obj[90]).setAlpha(0.8).toRgbaString(),\n    [`--on-${option.name}-selection`]: obj[10],\n    [`--${option.name}-shadow`]: baseColor.setAlpha(0.12).toRgbaString(),\n    [`--${option.name}-details-bg`]: obj[95],\n    [`--${option.name}-component-bg`]: obj[98],\n    [`--${option.name}-bg`]: obj[99],\n    [`--on-${option.name}-bg`]: obj[5],\n    [`--${option.name}-base-shadow`]: `0 3px 6px -4px ${baseColor\n      .setAlpha(0.12)\n      .toRgbaString()}, 0 6px 16px 0 ${baseColor\n      .setAlpha(0.08)\n      .toRgbaString()}, 0 9px 28px 8px ${baseColor.setAlpha(0.05).toRgbaString()}`,\n  };\n}\n\n/** 颜色模式 */\nexport enum ColorScheme {\n  /** 明亮 */\n  light = 'light',\n  /** 暗黑 */\n  dark = 'dark',\n  /** 跟随系统 */\n  auto = 'auto',\n}\n\nfunction createTheme() {\n  const preset =\n    ColorScheme[localStorage.getItem('color-scheme') as keyof typeof ColorScheme] || 'auto';\n  /** 检测 prefers-color-scheme 媒体查询是否为 light 模式 */\n  const media = window.matchMedia('(prefers-color-scheme: dark)');\n  const [scheme, setScheme] = createSignal<keyof typeof ColorScheme>(preset);\n  const [isDark, setIsDark] = createSignal(media.matches);\n  const [light, setLight] = createSignal({\n    primary: '#5794ff',\n    warning: '#faad14',\n    error: '#ff4d4f',\n    success: '#52c41a',\n  });\n  const [dark, setDark] = createSignal({\n    primary: '#4d81dc',\n    warning: '#bb8314',\n    error: '#901c22',\n    success: '#419418',\n  });\n  const primary = createMemo(() => generateTheme(light().primary, { name: 'primary' }));\n  const warning = createMemo(() => generateTheme(light().warning, { name: 'warning' }));\n  const success = createMemo(() => generateTheme(light().success, { name: 'success' }));\n  const error = createMemo(() => generateTheme(light().error, { name: 'error' }));\n  const lightCss = createMemo(() => {\n    return css`\n      :root,\n      :host {\n        ${primary()}\n        ${warning()}\n        ${success()}\n        ${error()}\n        --bg: transparent;\n        --disable-color: rgb(0 0 0 / 25%);\n        --disable-bg: rgb(0 0 0 / 4%);\n        --disable-border: #d9d9d9;\n        --border-color: var(--primary-border);\n        --component-bg: var(--primary-bg);\n      }\n    `;\n  });\n  const darkPrimary = createMemo(() =>\n    generateTheme(dark().primary, { name: 'primary', dark: true }),\n  );\n  const darkWarning = createMemo(() =>\n    generateTheme(dark().warning, { name: 'warning', dark: true }),\n  );\n  const darkSuccess = createMemo(() =>\n    generateTheme(dark().success, { name: 'success', dark: true }),\n  );\n  const darkError = createMemo(() => generateTheme(dark().error, { name: 'error', dark: true }));\n  const darkCss = createMemo(() => {\n    return css`\n      :root,\n      :host {\n        ${darkPrimary()}\n        ${darkWarning()}\n        ${darkError()}\n        ${darkSuccess()}\n        --bg: #1c1c1c;\n        --disable-color: rgb(255 255 255 / 25%);\n        --disable-bg: rgb(255 255 255 / 8%);\n        --disable-border: #424242;\n        --border-color: #303030;\n        --component-bg: #141414;\n        --primary-shadow: rgb(0 0 0 / 12%);\n        --primary-selection: rgb(255 255 255 / 5%);\n        --primary-details-bg: rgb(255 255 255 / 3%);\n        --primary-component-bg: #000;\n        --modal-component-bg: rgb(30 30 30 / 80%);\n      }\n    `;\n  });\n  const baseCss = css`\n    :root,\n    :host {\n      --font-size: 14px;\n      --font-size-sm: 12px;\n      --font-size-xs: 10px;\n      --font-size-lg: 16px;\n      --border-base: 1px solid var(--border-color);\n      --border-radius: 8px;\n      --text-color: var(--primary-text);\n      --text-secondary: var(--primary-secondary);\n      --text-heading: var(--primary-heading);\n      --text-selection: var(--primary-selection);\n      --box-shadow-base: var(--primary-base-shadow);\n      --transition-duration: 0.3s;\n      --mask-bg: rgb(0 0 0 / 5%);\n      --modal-component-bg: rgb(255 255 255 / 80%);\n      --modal-box-shadow: 0 5px 35px rgb(0 0 0 / 10%);\n      --notification-box-shadow: 0 4px 16px rgb(0 0 0 / 5%);\n      --transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);\n\n      font-size: var(--font-size);\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n        'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n        'Noto Color Emoji', Helvetica, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans';\n      color: var(--text-color, rgb(0 0 0 / 65%));\n      line-height: 1.8;\n    }\n\n    [disabled]:not([disabled='false']) {\n      cursor: not-allowed;\n      color: var(--disable-color);\n    }\n\n    ::selection {\n      background-color: var(--text-selection);\n    }\n\n    ::-webkit-scrollbar {\n      inline-size: 4px;\n      block-size: 4px;\n    }\n  `;\n\n  function update(e: MediaQueryListEvent) {\n    setIsDark(e.matches);\n  }\n  createEffect(() => {\n    const _ = scheme();\n\n    setIsDark(_ === 'dark' || (_ === 'auto' && media.matches));\n  });\n  const baseStyle = createMemo(() => baseCss + (isDark() ? darkCss() : lightCss()));\n\n  createEffect(() => {\n    if (scheme() === 'auto') {\n      // 监听 prefers-color-scheme 媒体查询变化，自动更新颜色方案\n      media.addEventListener('change', update);\n    } else {\n      media.removeEventListener('change', update);\n    }\n    localStorage.setItem('color-scheme', scheme());\n  });\n\n  return {\n    baseStyle,\n    dark,\n    setDark,\n    light,\n    setLight,\n    scheme,\n    setScheme,\n    isDark,\n  };\n}\n\n/** API */\nexport interface Theme {\n  /** 亮色样式的主要色 */\n  light: Accessor<Color>;\n  /** 设置亮色样式的主要色 */\n  setLight: Setter<Color>;\n  /** 黑色样式的主要色 */\n  dark: Accessor<Color>;\n  /** 设置黑色样式的主要色 */\n  setDark: Setter<Color>;\n  /** 颜色模式\n   * @default 'auto'\n   */\n  scheme: Accessor<keyof typeof ColorScheme>;\n  /** 设置颜色模式 */\n  setScheme: Setter<keyof typeof ColorScheme>;\n  /** 是否为色模式 */\n  isDark: Accessor<boolean>;\n  /** 基本都样式表, 响应 scheme 变化 */\n  baseStyle: Accessor<string>;\n}\n\n/** 主要色 */\ninterface Color {\n  /** 主要\n   * @default '#5794ff'\n   */\n  primary: string;\n  /** 警告\n   * @default '#faad14'\n   */\n  warning: string;\n  /** 错误\n   * @default '#ff4d4f'\n   */\n  error: string;\n  /** 成功\n   * @default '#52c41a'\n   */\n  success: string;\n}\n\nexport interface ThemeOption {\n  /** 是否采用暗色算法\n   * @default false\n   */\n  dark?: boolean;\n  /** 颜色名称 */\n  name: string;\n}\n\nexport default createRoot<Theme>(createTheme, getOwner());\n"],"names":["ColorScheme","createEffect","createMemo","createRoot","createSignal","getOwner","colorParse","mixColor","toneColor","css","generateTheme","base","option","obj","dark","textColor","baseColor","name","setAlpha","toRgbaString","preset","localStorage","getItem","media","window","matchMedia","scheme","setScheme","isDark","setIsDark","matches","light","setLight","primary","warning","error","success","setDark","lightCss","darkPrimary","darkWarning","darkSuccess","darkError","darkCss","baseCss","update","e","_","baseStyle","addEventListener","removeEventListener","setItem"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../components/theme/index.ts"],"sourcesContent":["import {\n  type Accessor,\n  type Setter,\n  createEffect,\n  createMemo,\n  createRoot,\n  createSignal,\n  getOwner,\n} from 'solid-js';\nimport { colorParse, mixColor, toneColor } from '@moneko/common';\nimport { CSSObject, css } from '@moneko/css';\nexport { toneColor } from '@moneko/common';\n\n/** 生成主题色调\n * @param {string} base 基础颜色\n * @param {ThemeOption} option 配置项\n * @returns {Record<string, string>} 主题色调\n */\nexport function generateColor(base: string, option: ThemeOption): Record<string, string> {\n  const obj = toneColor(base, option?.dark);\n  const textColor = colorParse(obj[5]);\n  const baseColor = colorParse(base);\n\n  return {\n    [`--${option.name}-text`]: textColor.setAlpha(0.65).toRgbaString(),\n    [`--${option.name}-secondary`]: textColor.setAlpha(0.45).toRgbaString(),\n    [`--${option.name}-heading`]: obj[5],\n    [`--${option.name}-active`]: obj[30],\n    [`--${option.name}-color`]: obj[40],\n    [`--${option.name}-hover`]: mixColor(obj[40], obj[30], 15),\n    [`--${option.name}-secondary-bg`]: obj[70],\n    [`--${option.name}-border`]: obj[80],\n    [`--${option.name}-outline`]: mixColor(obj[90], obj[40], 5),\n    [`--${option.name}-selection`]: obj[90],\n    [`--${option.name}-notify-bg`]: colorParse(obj[90]).setAlpha(0.8).toRgbaString(),\n    [`--on-${option.name}-selection`]: obj[10],\n    [`--${option.name}-shadow`]: baseColor.setAlpha(0.12).toRgbaString(),\n    [`--${option.name}-shadow-1`]: baseColor.setAlpha(0.08).toRgbaString(),\n    [`--${option.name}-shadow-2`]: baseColor.setAlpha(0.05).toRgbaString(),\n    [`--${option.name}-details-bg`]: obj[95],\n    [`--${option.name}-component-bg`]: obj[98],\n    [`--${option.name}-bg`]: obj[99],\n    [`--on-${option.name}-bg`]: obj[5],\n  };\n}\n\n/** 颜色模式 */\nexport enum ColorScheme {\n  /** 明亮 */\n  light = 'light',\n  /** 暗黑 */\n  dark = 'dark',\n  /** 跟随系统 */\n  auto = 'auto',\n}\n\nfunction createTheme() {\n  const baseTokens = css({\n    ':root,:host': {\n      '--scrollbar-size': '4px',\n      '--font-size': '14px',\n      '--font-size-sm': '12px',\n      '--font-size-xs': '10px',\n      '--font-size-lg': '16px',\n      '--border-base': '1px solid var(--border-color)',\n      '--border-radius': '8px',\n      '--text-color': 'var(--primary-text)',\n      '--text-secondary': 'var(--primary-secondary)',\n      '--text-heading': 'var(--primary-heading)',\n      '--text-selection': 'var(--primary-selection)',\n      '--transition-duration': '0.3s',\n      '--mask-bg': 'rgb(0 0 0 / 5%)',\n      '--modal-component-bg': 'rgb(255 255 255 / 80%)',\n      '--modal-box-shadow': '0 5px 35px rgb(0 0 0 / 10%)',\n      '--notification-box-shadow': '0 4px 16px rgb(0 0 0 / 5%)',\n      '--transition-timing-function': 'cubic-bezier(0.645, 0.045, 0.355, 1)',\n      fontSize: 'var(--font-size)',\n      fontFamily:\n        \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', Helvetica, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans'\",\n      color: 'var(--text-color, rgb(0 0 0 / 65%))',\n      lineHeight: 1.8,\n    },\n    '[disabled]:not([disabled=\"false\"])': {\n      cursor: 'not-allowed',\n      color: 'var(--disable-color)',\n    },\n    '::selection': {\n      backgroundColor: 'var(--text-selection)',\n    },\n    '::-webkit-scrollbar': {\n      inlineSize: 'var(--scrollbar-size)',\n      blockSize: 'var(--scrollbar-size)',\n    },\n  });\n  const preset =\n    ColorScheme[localStorage.getItem('color-scheme') as keyof typeof ColorScheme] || 'auto';\n  /** 检测 prefers-color-scheme 媒体查询是否为 light 模式 */\n  const media = window.matchMedia('(prefers-color-scheme: dark)');\n  const [scheme, setScheme] = createSignal<keyof typeof ColorScheme>(preset);\n  const [isDark, setIsDark] = createSignal(media.matches);\n  const [light, setLight] = createSignal({\n    primary: '#5794ff',\n    warning: '#faad14',\n    error: '#ff4d4f',\n    success: '#52c41a',\n  });\n  const [dark, setDark] = createSignal({\n    primary: '#4d81dc',\n    warning: '#bb8314',\n    error: '#901c22',\n    success: '#419418',\n  });\n  const primary = createMemo(() => generateColor(light().primary, { name: 'primary' }));\n  const darkPrimary = createMemo(() =>\n    generateColor(dark().primary, { name: 'primary', dark: true }),\n  );\n  const warning = createMemo(() => generateColor(light().warning, { name: 'warning' }));\n  const darkWarning = createMemo(() =>\n    generateColor(dark().warning, { name: 'warning', dark: true }),\n  );\n  const success = createMemo(() => generateColor(light().success, { name: 'success' }));\n  const darkSuccess = createMemo(() =>\n    generateColor(dark().success, { name: 'success', dark: true }),\n  );\n  const error = createMemo(() => generateColor(light().error, { name: 'error' }));\n  const darkError = createMemo(() => generateColor(dark().error, { name: 'error', dark: true }));\n\n  function getHostCss(tokens: CSSObject) {\n    let str = '';\n\n    for (const key in tokens) {\n      if (Object.prototype.hasOwnProperty.call(tokens, key)) {\n        str += `${key}:${tokens[key]};`;\n      }\n    }\n    return `${baseTokens}:root,:host{${str}}`;\n  }\n  const lightCss = createMemo(() => {\n    const tokens = Object.assign({}, primary(), warning(), success(), error(), {\n      '--bg': 'transparent',\n      '--disable-color': 'rgb(0 0 0 / 25%)',\n      '--disable-bg': 'rgb(0 0 0 / 4%)',\n      '--disable-border': '#d9d9d9',\n      '--border-color': 'var(--primary-border)',\n      '--component-bg': 'var(--primary-bg)',\n    });\n\n    return getHostCss(tokens);\n  });\n  const darkCss = createMemo(() => {\n    const tokens = Object.assign({}, darkPrimary(), darkWarning(), darkSuccess(), darkError(), {\n      '--bg': '#1c1c1c',\n      '--disable-color': 'rgb(255 255 255 / 25%)',\n      '--disable-bg': 'rgb(255 255 255 / 8%)',\n      '--disable-border': '#424242',\n      '--border-color': '#303030',\n      '--component-bg': '#141414',\n      '--primary-shadow': 'rgb(0 0 0 / 12%)',\n      '--primary-selection': 'rgb(255 255 255 / 5%)',\n      '--primary-details-bg': 'rgb(255 255 255 / 3%)',\n      '--primary-component-bg': '#000',\n      '--modal-component-bg': 'rgb(30 30 30 / 80%)',\n    });\n\n    return getHostCss(tokens);\n  });\n\n  function update(e: MediaQueryListEvent) {\n    setIsDark(e.matches);\n  }\n  createEffect(() => {\n    const _ = scheme();\n\n    setIsDark(_ === 'dark' || (_ === 'auto' && media.matches));\n  });\n  const baseStyle = createMemo(() => (isDark() ? darkCss() : lightCss()));\n\n  createEffect(() => {\n    if (scheme() === 'auto') {\n      // 监听 prefers-color-scheme 媒体查询变化，自动更新颜色方案\n      media.addEventListener('change', update);\n    } else {\n      media.removeEventListener('change', update);\n    }\n    localStorage.setItem('color-scheme', scheme());\n  });\n\n  return {\n    baseStyle,\n    dark,\n    setDark,\n    light,\n    setLight,\n    scheme,\n    setScheme,\n    isDark,\n  };\n}\n\n/** API */\nexport interface Theme {\n  /** 亮色样式的主要色 */\n  light: Accessor<Color>;\n  /** 设置亮色样式的主要色 */\n  setLight: Setter<Color>;\n  /** 黑色样式的主要色 */\n  dark: Accessor<Color>;\n  /** 设置黑色样式的主要色 */\n  setDark: Setter<Color>;\n  /** 颜色模式\n   * @default 'auto'\n   */\n  scheme: Accessor<keyof typeof ColorScheme>;\n  /** 设置颜色模式 */\n  setScheme: Setter<keyof typeof ColorScheme>;\n  /** 是否为色模式 */\n  isDark: Accessor<boolean>;\n  /** 基本都样式表, 响应 scheme 变化 */\n  baseStyle: Accessor<string>;\n}\n\n/** 主要色 */\ninterface Color {\n  /** 主要\n   * @default '#5794ff'\n   */\n  primary: string;\n  /** 警告\n   * @default '#faad14'\n   */\n  warning: string;\n  /** 错误\n   * @default '#ff4d4f'\n   */\n  error: string;\n  /** 成功\n   * @default '#52c41a'\n   */\n  success: string;\n}\n\nexport interface ThemeOption {\n  /** 是否采用暗色算法\n   * @default false\n   */\n  dark?: boolean;\n  /** 颜色名称 */\n  name: string;\n}\n\nexport default createRoot<Theme>(createTheme, getOwner());\n"],"names":["ColorScheme","createEffect","createMemo","createRoot","createSignal","getOwner","colorParse","mixColor","toneColor","css","generateColor","base","option","obj","dark","textColor","baseColor","name","setAlpha","toRgbaString","baseTokens","fontSize","fontFamily","color","lineHeight","cursor","backgroundColor","inlineSize","blockSize","preset","localStorage","getItem","media","window","matchMedia","scheme","setScheme","isDark","setIsDark","matches","light","setLight","primary","warning","error","success","setDark","darkPrimary","darkWarning","darkSuccess","darkError","getHostCss","tokens","str","key","Object","prototype","hasOwnProperty","call","lightCss","assign","darkCss","update","e","_","baseStyle","addEventListener","removeEventListener","setItem"],"rangeMappings":"","mappings":"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"}

package/es/tree/index.js

@@ -1,2 +1,2 @@
-import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{style as l}from"solid-js/web";import{setAttribute as o}from"solid-js/web";import{insert as r}from"solid-js/web";import{effect as n}from"solid-js/web";import{delegateEvents as i}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{className as a}from"solid-js/web";let m=t("<li>"),c=t('<span class="title">'),u=t('<span class="sub-title">'),d=t("<style>"),p=t("<ul>");import{For as f,Show as h,createEffect as v,createMemo as g,createSignal as b}from"solid-js";import $ from"@moneko/common/lib/frameCallback";import y from"@moneko/common/lib/isFunction";import k from"@moneko/common/lib/isString";import{css as w,cx as j}from"@moneko/css";import"./register";import{style as _}from"./style";import{FieldName as C}from"../basic-config";import R from"../from-schema";import S from"../theme";export*from"./type";export default function(t){let i;let x={small:6,normal:8,large:10},{baseStyle:A}=S,[P,z]=b([]),[B,D]=b([]),N=g(()=>Object.assign({},C,t.fieldNames)),O=g(()=>"rtl"===t.direction),q=g(()=>void 0!==t.value&&null!==t.value?Array.isArray(t.value)?t.value:[t.value]:[]),E=Symbol("path"),F=Symbol("path-end");return v(()=>{let e=t.fromSchema?R(t.data):k(t.data)?function(e){let t=N(),l=t.key,o=t.title,r=t.children,n=/[^\s|`│├└]/,i=e.trim().split("\n"),s=[{[o]:i[0],[l]:i[0]}];for(let e=1;e<i.length;e++){let t=i[e].search(n);if(-1===t)continue;let a={[o]:i[e].slice(t+3),depth:t};for(;s.length&&t<=(s[s.length-1].depth||0);)s.pop();if(!s.length)return[];let m=s[s.length-1];m[r]||(m[r]=[]),a[l]=`${m[l]}-${a[o]}-${t}-${e}`,m[r].push(a),s.push(a)}return[s[0]]}(t.data):t.data;z([...new Set(function e(t,l=0){let o=t.length-1,r=t[o],n=t[0],i=[],s=N(),a=s.key,m=s.children;for(let s=0,c=t.length;s<c;s++){let c=t[s],u=s===o;c[E]=void 0,c[F]=void 0,(0===s||u)&&(c[E]=n[a]+(1===t.length?"":`>${r[a]}`),u&&(c[F]=""),i.push(c[E])),c[m]&&(i=i.concat(e(c[m],l+1)))}return i}(e))]),D(e)}),v(()=>{let e=P(),l=t.size||"normal";$(()=>{let t=e.length;if(i&&t){let o=x[l];for(let l=0;l<t;l++){let t=i.querySelectorAll(`li[data-path="${e[l]}"]`);if(t.length){let e=t[0].getBoundingClientRect(),r=e.height/2+o;if(t.length>1){let{bottom:n,height:i,top:s}=t[1].getBoundingClientRect();r=0===l?s-e.top:n-e.top-i/2+o,t[1].style.setProperty("--c","none")}else 0===l&&t[0].style.setProperty("--c","none");(1!==t.length||0!==l)&&t[0].style.setProperty("--line",`${Math.abs(r)}px`)}}}})}),[(()=>{let e=d();return r(e,A,null),r(e,_,null),r(e,()=>w(t.css),null),e})(),(()=>{let d=p(),v=i;return"function"==typeof v?e(v,d):i=d,r(d,()=>(function e(i,d=0){return s(f,{each:i,children:i=>{let p=N(),f=i[p.title],v=i[p.key],g=i[p.name],b=i[p.subTitle],$=i[p.children],k=g!==f&&g?[g,f]:[f];return[(()=>{let e=m();return e.$$dblclick=e=>null==t.onRowDoubleClick?void 0:t.onRowDoubleClick.call(t,e,v,i),e.$$click=e=>(function(e,l){let o=N();(function(e,l){if(!t.readonly&&y(t.onChange)){let o=[...q()];if(t.multiple){let t=o.indexOf(e);-1===t?o.push(e):o.splice(t,1)}else o=t.toggle&&o[0]===e?[]:[e];t.onChange(t.multiple?o:o[0],l)}})(l[o.key],l),null==t.onRowClick||t.onRowClick.call(t,e,l[o.key],l)})(e,i),r(e,()=>(function(e,l,o){let r=(null==t.renderRow?void 0:t.renderRow.call(t,e,l,o))||[l,o];return O()?r.reverse():r})(i,(()=>{let e=c();return r(e,()=>(O()?k.reverse():k).join(": ")),e})(),b&&(()=>{let e=u();return r(e,b),e})())),n(r=>{let n=j("row",q().includes(v)&&"active",(t.readonly||!y(t.onChange))&&"non"),s=d?{"--depth":`${2*d}em`}:void 0,m=i[F],c=i[E];return n!==r._v$&&a(e,r._v$=n),r._v$2=l(e,s,r._v$2),m!==r._v$3&&o(e,"data-path-end",r._v$3=m),c!==r._v$4&&o(e,"data-path",r._v$4=c),r},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),e})(),s(h,{when:$,get children(){return e($,d+1)}})]}})})(B())),n(()=>a(d,j("tree",t.size,t.class,O()&&"rtl"))),d})()]}i(["click","dblclick"]);
+import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{style as l}from"solid-js/web";import{setAttribute as o}from"solid-js/web";import{insert as n}from"solid-js/web";import{effect as r}from"solid-js/web";import{delegateEvents as i}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{classList as a}from"solid-js/web";let c=t('<li class="row">'),m=t('<span class="title">'),d=t('<span class="sub-title">'),u=t("<style>"),p=t('<ul class="tree">');import{For as f,Show as h,createEffect as g,createMemo as v,createSignal as $}from"solid-js";import b from"@moneko/common/lib/frameCallback";import y from"@moneko/common/lib/isFunction";import k from"@moneko/common/lib/isString";import{css as w}from"@moneko/css";import"./register";import{style as _}from"./style";import j from"../from-schema";import C from"../theme";export*from"./type";export default function(t){let i;let R={small:6,normal:8,large:10},{baseStyle:S}=C,[x,A]=$([]),[L,P]=$([]),T={key:"key",name:"name",title:"title",subTitle:"subTitle",children:"children",description:"description"},z=v(()=>Object.assign(T,t.fieldNames)),B=v(()=>"rtl"===t.direction),D=v(()=>void 0!==t.value&&null!==t.value?Array.isArray(t.value)?t.value:[t.value]:[]),O=Symbol("path"),q=Symbol("path-end");return g(()=>{let e=t.fromSchema?j(t.data):k(t.data)?function(e){let t=z(),l=t.key,o=t.title,n=t.children,r=/[^\s|`│├└]/,i=e.trim().split("\n"),s=[{[o]:i[0],[l]:i[0]}];for(let e=1;e<i.length;e++){let t=i[e].search(r);if(-1===t)continue;let a={[o]:i[e].slice(t+3),depth:t};for(;s.length&&t<=(s[s.length-1].depth||0);)s.pop();if(!s.length)return[];let c=s[s.length-1];c[n]||(c[n]=[]),a[l]=`${c[l]}-${a[o]}-${t}-${e}`,c[n].push(a),s.push(a)}return[s[0]]}(t.data):t.data;A([...new Set(function e(t,l=0){let o=t.length-1,n=t[o],r=t[0],i=[],s=z(),a=s.key,c=s.children;for(let s=0,m=t.length;s<m;s++){let m=t[s],d=s===o;delete m[O],delete m[q],(0===s||d)&&(m[O]=r[a]+(1===t.length?"":`>${n[a]}`),d&&(m[q]=""),i.push(m[O])),m[c]&&(i=i.concat(e(m[c],l+1)))}return i}(e))]),P(e)}),g(()=>{let e=x(),l=t.size||"normal";b(()=>{let t=e.length;if(i&&t){let o=R[l];for(let l=0;l<t;l++){let t=i.querySelectorAll(`li[data-path="${e[l]}"]`);if(t.length){let e=t[0].getBoundingClientRect(),n=e.height/2+o;if(t.length>1){let{bottom:r,height:i,top:s}=t[1].getBoundingClientRect();n=0===l?s-e.top:r-e.top-i/2+o,t[1].style.setProperty("--c","none")}else 0===l&&t[0].style.setProperty("--c","none");(1!==t.length||0!==l)&&t[0].style.setProperty("--line",`${Math.abs(n)}px`)}}}})}),[(()=>{let e=u();return n(e,S,null),n(e,_,null),n(e,()=>w(t.css),null),e})(),(()=>{let u=p(),g=i;return"function"==typeof g?e(g,u):i=u,n(u,()=>(function e(i,a=0){return s(f,{each:i,children:i=>{let u=z(),p=i[u.title],f=i[u.key],g=i[u.name],v=i[u.subTitle],$=i[u.children],b=g!==p&&g?[g,p]:[p];return[(()=>{let e=c();return e.$$dblclick=e=>null==t.onRowDoubleClick?void 0:t.onRowDoubleClick.call(t,e,f,i),e.$$click=e=>(function(e,l){let o=z();(function(e,l){if(!t.readonly&&y(t.onChange)){let o=[...D()];if(t.multiple){let t=o.indexOf(e);-1===t?o.push(e):o.splice(t,1)}else o=t.toggle&&o[0]===e?[]:[e];t.onChange(t.multiple?o:o[0],l)}})(l[o.key],l),null==t.onRowClick||t.onRowClick.call(t,e,l[o.key],l)})(e,i),n(e,()=>(function(e,l,o){let n=(null==t.renderRow?void 0:t.renderRow.call(t,e,l,o))||[l,o];return B()?n.reverse():n})(i,(()=>{let e=m();return n(e,()=>(B()?b.reverse():b).join(": ")),e})(),s(h,{when:v,get children(){let e=d();return n(e,v),e}}))),r(n=>{let r=!!D().includes(f),s=!!(t.readonly||!y(t.onChange)),c=a?{"--depth":`${2*a}em`}:void 0,m=i[q],d=i[O];return r!==n._v$&&e.classList.toggle("active",n._v$=r),s!==n._v$2&&e.classList.toggle("non",n._v$2=s),n._v$3=l(e,c,n._v$3),m!==n._v$4&&o(e,"data-path-end",n._v$4=m),d!==n._v$5&&o(e,"data-path",n._v$5=d),n},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0,_v$5:void 0}),e})(),s(h,{when:$,get children(){return e($,a+1)}})]}})})(L())),r(e=>a(u,{[t.size||"normal"]:!0,[t.class]:!!t.class,rtl:B()},e)),u})()]}i(["click","dblclick"]);
 //# sourceMappingURL=index.js.map

package/es/tree/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/tree/index.tsx"],"sourcesContent":["import { For, Show, createEffect, createMemo, createSignal } from 'solid-js';\nimport { frameCallback, isFunction, isString } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport './register';\nimport { style } from './style';\nimport { FieldName } from '../basic-config';\nimport schema from '../from-schema';\nimport theme from '../theme';\nimport type {\n  TreeData,\n  TreeMultipleProps,\n  TreeMultipleSchemaProps,\n  TreeMultipleStringProps,\n  TreeProps,\n  TreeSchemaProps,\n  TreeStack,\n  TreeStringProps,\n} from './type';\n\nfunction Tree(\n  _:\n    | TreeProps\n    | TreeMultipleProps\n    | TreeMultipleSchemaProps\n    | TreeSchemaProps\n    | TreeMultipleStringProps\n    | TreeStringProps,\n) {\n  const sizeCnt = {\n    small: 6,\n    normal: 8,\n    large: 10,\n  };\n  const { baseStyle } = theme;\n  let el: HTMLUListElement | undefined;\n  const [lines, setLines] = createSignal<string[]>([]);\n  const [treeData, setTreeData] = createSignal<TreeData[]>([]);\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, _.fieldNames));\n  const rtl = createMemo(() => _.direction === 'rtl');\n  const current = createMemo(() => {\n    if (_.value !== void 0 && _.value !== null) {\n      return Array.isArray(_.value) ? _.value : [_.value];\n    }\n    return [];\n  });\n  const path = Symbol('path');\n  const pathEnd = Symbol('path-end');\n\n  function countLineLen(tree: TreeData[], depth = 0) {\n    const lastIdx = tree.length - 1;\n    const last = tree[lastIdx];\n    const frist = tree[0];\n    let line: string[] = [];\n    const fields = fieldNames();\n    const key = fields.key;\n    const children = fields.children;\n\n    for (let i = 0, len = tree.length; i < len; i++) {\n      const item = tree[i],\n        isLast = i === lastIdx;\n\n      item[path] = void 0;\n      item[pathEnd] = void 0;\n      if (i === 0 || isLast) {\n        item[path] = frist[key] + (tree.length === 1 ? '' : `>${last[key]}`);\n        if (isLast) {\n          item[pathEnd] = '';\n        }\n        line.push(item[path]);\n      }\n      if (item[children]) {\n        line = line.concat(countLineLen(item[children]!, depth + 1));\n      }\n    }\n    return line;\n  }\n\n  function parseTree(str: string): TreeData[] {\n    const fields = fieldNames();\n    const key = fields.key as 'key';\n    const title = fields.title as 'title';\n    const children = fields.children as 'children';\n    const depthRegex = /[^\\s|`│├└]/;\n    const rows = str.trim().split('\\n');\n    const stack: TreeStack[] = [{ [title]: rows[0], [key]: rows[0] }];\n\n    for (let i = 1; i < rows.length; i++) {\n      const depth = rows[i].search(depthRegex);\n\n      if (depth === -1) {\n        continue;\n      }\n      const node: Partial<TreeData> = {\n        [title]: rows[i].slice(depth + 3),\n        depth,\n      };\n\n      while (stack.length && depth <= (stack[stack.length - 1].depth || 0)) {\n        stack.pop();\n      }\n      if (!stack.length) {\n        return [];\n      }\n      const parent = stack[stack.length - 1];\n\n      if (!parent[children]) {\n        parent[children] = [];\n      }\n      node[key] = `${parent[key]}-${node[title]}-${depth}-${i}`;\n      parent[children].push(node as TreeData);\n      stack.push(node as TreeData);\n    }\n\n    return [stack[0]];\n  }\n\n  function handleChange(key: string, item: TreeData) {\n    if (!_.readonly && isFunction(_.onChange)) {\n      let _current = [...current()];\n\n      if (_.multiple) {\n        const idx = _current.indexOf(key);\n\n        if (idx === -1) {\n          _current.push(key);\n        } else {\n          _current.splice(idx, 1);\n        }\n      } else if (_.toggle && _current[0] === key) {\n        _current = [];\n      } else {\n        _current = [key];\n      }\n      _.onChange(_.multiple ? _current : _current[0], item);\n    }\n  }\n  function handleClick(e: MouseEvent, item: TreeData) {\n    const fields = fieldNames();\n\n    handleChange(item[fields.key], item);\n    _.onRowClick?.(e, item[fields.key] as never, item as TreeData<never>);\n  }\n  function renderItem(item: TreeData, title: JSX.Element, subTitle?: JSX.Element): JSX.Element[] {\n    const row = _.renderRow?.(item, title, subTitle) || [title, subTitle];\n\n    return rtl() ? row.reverse() : row;\n  }\n\n  function renderTreeRow(list: TreeData[], depth = 0): JSX.Element {\n    return (\n      <For each={list}>\n        {(item) => {\n          const fields = fieldNames();\n          const title = item[fields.title];\n          const key = item[fields.key];\n          const name = item[fields.name];\n          const subTitle = item[fields.subTitle];\n          const children = item[fields.children];\n          const _title = name === title || !name ? [title] : [name, title];\n\n          return (\n            <>\n              <li\n                class={cx(\n                  'row',\n                  current().includes(key) && 'active',\n                  (_.readonly || !isFunction(_.onChange)) && 'non',\n                )}\n                onClick={(e) => handleClick(e, item)}\n                onDblClick={(e) => _.onRowDoubleClick?.(e, key, item)}\n                style={depth ? { '--depth': `${depth * 2}em` } : void 0}\n                data-path-end={item[pathEnd]}\n                data-path={item[path]}\n              >\n                {renderItem(\n                  item,\n                  <span class=\"title\">{(rtl() ? _title.reverse() : _title).join(': ')}</span>,\n                  subTitle && <span class=\"sub-title\">{subTitle}</span>,\n                )}\n              </li>\n              <Show when={children}>{renderTreeRow(children!, depth + 1)}</Show>\n            </>\n          );\n        }}\n      </For>\n    );\n  }\n  createEffect(() => {\n    const data = _.fromSchema ? schema(_.data) : isString(_.data) ? parseTree(_.data) : _.data;\n\n    setLines([...new Set(countLineLen(data))]);\n    setTreeData(data);\n  });\n\n  createEffect(() => {\n    const list = lines();\n    const size = _.size || 'normal';\n\n    frameCallback(() => {\n      const len = list.length;\n\n      if (el && len) {\n        const prefixSize = sizeCnt[size];\n\n        for (let i = 0; i < len; i++) {\n          const al: NodeListOf<HTMLLIElement> = el.querySelectorAll(`li[data-path=\"${list[i]}\"]`);\n\n          if (al.length) {\n            const rect1 = al[0].getBoundingClientRect();\n            let sideLen = rect1.height / 2 + prefixSize;\n\n            if (al.length > 1) {\n              const { bottom, height, top } = al[1].getBoundingClientRect();\n\n              sideLen = i === 0 ? top - rect1.top : bottom - rect1.top - height / 2 + prefixSize;\n              al[1].style.setProperty('--c', 'none');\n            } else if (i === 0) {\n              al[0].style.setProperty('--c', 'none');\n            }\n            if (al.length !== 1 || i !== 0) {\n              al[0].style.setProperty('--line', `${Math.abs(sideLen)}px`);\n            }\n          }\n        }\n      }\n    });\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(_.css)}\n      </style>\n      <ul ref={el} class={cx('tree', _.size, _.class, rtl() && 'rtl')}>\n        {renderTreeRow(treeData())}\n      </ul>\n    </>\n  );\n}\n\nexport * from './type';\nexport default Tree;\n"],"names":["For","Show","createEffect","createMemo","createSignal","frameCallback","isFunction","isString","css","cx","style","FieldName","schema","theme","_","el","sizeCnt","small","normal","large","baseStyle","lines","setLines","treeData","setTreeData","fieldNames","Object","assign","rtl","direction","current","value","Array","isArray","path","Symbol","pathEnd","data","fromSchema","parseTree","str","fields","key","title","children","depthRegex","rows","trim","split","stack","i","length","depth","search","node","slice","pop","parent","push","Set","countLineLen","tree","lastIdx","last","frist","line","len","item","isLast","concat","list","size","prefixSize","al","querySelectorAll","rect1","getBoundingClientRect","sideLen","height","bottom","top","setProperty","Math","abs","renderTreeRow","name","subTitle","_title","e","onRowDoubleClick","handleClick","handleChange","readonly","onChange","_current","multiple","idx","indexOf","splice","toggle","onRowClick","renderItem","row","renderRow","reverse","join","includes","class"],"rangeMappings":"","mappings":"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"}
+{"version":3,"sources":["../../components/tree/index.tsx"],"sourcesContent":["import { For, Show, createEffect, createMemo, createSignal } from 'solid-js';\nimport { frameCallback, isFunction, isString } from '@moneko/common';\nimport { css } from '@moneko/css';\nimport './register';\nimport { style } from './style';\nimport schema from '../from-schema';\nimport theme from '../theme';\nimport type {\n  TreeData,\n  TreeMultipleProps,\n  TreeMultipleSchemaProps,\n  TreeMultipleStringProps,\n  TreeProps,\n  TreeSchemaProps,\n  TreeStack,\n  TreeStringProps,\n} from './type';\n\nfunction Tree(\n  _:\n    | TreeProps\n    | TreeMultipleProps\n    | TreeMultipleSchemaProps\n    | TreeSchemaProps\n    | TreeMultipleStringProps\n    | TreeStringProps,\n) {\n  const sizeCnt = {\n    small: 6,\n    normal: 8,\n    large: 10,\n  };\n  const { baseStyle } = theme;\n  let el: HTMLUListElement | undefined;\n  const [lines, setLines] = createSignal<string[]>([]);\n  const [treeData, setTreeData] = createSignal<TreeData[]>([]);\n  const normalFieldNames = {\n    key: 'key' as const,\n    name: 'name' as const,\n    title: 'title' as const,\n    subTitle: 'subTitle' as const,\n    children: 'children' as const,\n    description: 'description' as const,\n  };\n  const fieldNames = createMemo(() => Object.assign(normalFieldNames, _.fieldNames));\n  const rtl = createMemo(() => _.direction === 'rtl');\n  const current = createMemo(() => {\n    if (_.value !== void 0 && _.value !== null) {\n      return Array.isArray(_.value) ? _.value : [_.value];\n    }\n    return [];\n  });\n  const path = Symbol('path');\n  const pathEnd = Symbol('path-end');\n\n  function countLineLen(tree: TreeData[], depth = 0) {\n    const lastIdx = tree.length - 1;\n    const last = tree[lastIdx];\n    const frist = tree[0];\n    let line: string[] = [];\n    const fields = fieldNames();\n    const key = fields.key;\n    const children = fields.children;\n\n    for (let i = 0, len = tree.length; i < len; i++) {\n      const item = tree[i],\n        isLast = i === lastIdx;\n\n      delete item[path];\n      delete item[pathEnd];\n      if (i === 0 || isLast) {\n        item[path] = frist[key] + (tree.length === 1 ? '' : `>${last[key]}`);\n        if (isLast) {\n          item[pathEnd] = '';\n        }\n        line.push(item[path]);\n      }\n      if (item[children]) {\n        line = line.concat(countLineLen(item[children]!, depth + 1));\n      }\n    }\n    return line;\n  }\n\n  function parseTree(str: string): TreeData[] {\n    const fields = fieldNames();\n    const key = fields.key;\n    const title = fields.title;\n    const children = fields.children;\n    const depthRegex = /[^\\s|`│├└]/;\n    const rows = str.trim().split('\\n');\n    const stack: TreeStack[] = [{ [title]: rows[0], [key]: rows[0] }];\n\n    for (let i = 1; i < rows.length; i++) {\n      const depth = rows[i].search(depthRegex);\n\n      if (depth === -1) {\n        continue;\n      }\n      const node: Partial<TreeData> = {\n        [title]: rows[i].slice(depth + 3),\n        depth,\n      };\n\n      while (stack.length && depth <= (stack[stack.length - 1].depth || 0)) {\n        stack.pop();\n      }\n      if (!stack.length) {\n        return [];\n      }\n      const parent = stack[stack.length - 1];\n\n      if (!parent[children]) {\n        parent[children] = [];\n      }\n      node[key] = `${parent[key]}-${node[title]}-${depth}-${i}`;\n      parent[children].push(node as TreeData);\n      stack.push(node as TreeData);\n    }\n\n    return [stack[0]];\n  }\n\n  function handleChange(key: string, item: TreeData) {\n    if (!_.readonly && isFunction(_.onChange)) {\n      let _current = [...current()];\n\n      if (_.multiple) {\n        const idx = _current.indexOf(key);\n\n        if (idx === -1) {\n          _current.push(key);\n        } else {\n          _current.splice(idx, 1);\n        }\n      } else if (_.toggle && _current[0] === key) {\n        _current = [];\n      } else {\n        _current = [key];\n      }\n      _.onChange(_.multiple ? _current : _current[0], item);\n    }\n  }\n  function handleClick(e: MouseEvent, item: TreeData) {\n    const fields = fieldNames();\n\n    handleChange(item[fields.key], item);\n    _.onRowClick?.(e, item[fields.key] as never, item as TreeData<never>);\n  }\n  function renderItem(item: TreeData, title: JSX.Element, subTitle?: JSX.Element): JSX.Element[] {\n    const row = _.renderRow?.(item, title, subTitle) || [title, subTitle];\n\n    return rtl() ? row.reverse() : row;\n  }\n\n  function renderTreeRow(list: TreeData[], depth = 0): JSX.Element {\n    return (\n      <For each={list}>\n        {(item) => {\n          const fields = fieldNames();\n          const title = item[fields.title];\n          const key = item[fields.key];\n          const name = item[fields.name];\n          const subTitle = item[fields.subTitle];\n          const children = item[fields.children];\n          const _title = name === title || !name ? [title] : [name, title];\n\n          return (\n            <>\n              <li\n                class=\"row\"\n                classList={{\n                  active: current().includes(key),\n                  non: _.readonly || !isFunction(_.onChange),\n                }}\n                onClick={(e) => handleClick(e, item)}\n                onDblClick={(e) => _.onRowDoubleClick?.(e, key, item)}\n                style={depth ? { '--depth': `${depth * 2}em` } : void 0}\n                data-path-end={item[pathEnd]}\n                data-path={item[path]}\n              >\n                {renderItem(\n                  item,\n                  <span class=\"title\">{(rtl() ? _title.reverse() : _title).join(': ')}</span>,\n                  <Show when={subTitle}>\n                    <span class=\"sub-title\">{subTitle}</span>\n                  </Show>,\n                )}\n              </li>\n              <Show when={children}>{renderTreeRow(children!, depth + 1)}</Show>\n            </>\n          );\n        }}\n      </For>\n    );\n  }\n  createEffect(() => {\n    const data = _.fromSchema ? schema(_.data) : isString(_.data) ? parseTree(_.data) : _.data;\n\n    setLines([...new Set(countLineLen(data))]);\n    setTreeData(data);\n  });\n\n  createEffect(() => {\n    const list = lines();\n    const size = _.size || 'normal';\n\n    frameCallback(() => {\n      const len = list.length;\n\n      if (el && len) {\n        const prefixSize = sizeCnt[size];\n\n        for (let i = 0; i < len; i++) {\n          const al: NodeListOf<HTMLLIElement> = el.querySelectorAll(`li[data-path=\"${list[i]}\"]`);\n\n          if (al.length) {\n            const rect1 = al[0].getBoundingClientRect();\n            let sideLen = rect1.height / 2 + prefixSize;\n\n            if (al.length > 1) {\n              const { bottom, height, top } = al[1].getBoundingClientRect();\n\n              sideLen = i === 0 ? top - rect1.top : bottom - rect1.top - height / 2 + prefixSize;\n              al[1].style.setProperty('--c', 'none');\n            } else if (i === 0) {\n              al[0].style.setProperty('--c', 'none');\n            }\n            if (al.length !== 1 || i !== 0) {\n              al[0].style.setProperty('--line', `${Math.abs(sideLen)}px`);\n            }\n          }\n        }\n      }\n    });\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(_.css)}\n      </style>\n      <ul\n        ref={el}\n        class=\"tree\"\n        classList={{\n          [_.size || 'normal']: true,\n          [_.class as string]: !!_.class,\n          rtl: rtl(),\n        }}\n      >\n        {renderTreeRow(treeData())}\n      </ul>\n    </>\n  );\n}\n\nexport * from './type';\nexport default Tree;\n"],"names":["For","Show","createEffect","createMemo","createSignal","frameCallback","isFunction","isString","css","style","schema","theme","_","el","sizeCnt","small","normal","large","baseStyle","lines","setLines","treeData","setTreeData","normalFieldNames","key","name","title","subTitle","children","description","fieldNames","Object","assign","rtl","direction","current","value","Array","isArray","path","Symbol","pathEnd","data","fromSchema","parseTree","str","fields","depthRegex","rows","trim","split","stack","i","length","depth","search","node","slice","pop","parent","push","Set","countLineLen","tree","lastIdx","last","frist","line","len","item","isLast","concat","list","size","prefixSize","al","querySelectorAll","rect1","getBoundingClientRect","sideLen","height","bottom","top","setProperty","Math","abs","renderTreeRow","_title","e","onRowDoubleClick","handleClick","handleChange","readonly","onChange","_current","multiple","idx","indexOf","splice","toggle","onRowClick","renderItem","row","renderRow","reverse","join","includes","class"],"rangeMappings":"","mappings":"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"}

package/es/tree/register.js

@@ -1,2 +1,2 @@
-import{createComponent as e,createEffect as o,mergeProps as i}from"solid-js";import{customElement as t}from"solid-element";import d from"./index";t("n-tree",{fieldNames:{},fromSchema:void 0,size:void 0,data:[],multiple:void 0,value:void 0,onChange:void 0,class:void 0,css:void 0,readonly:void 0,toggle:void 0,direction:void 0,onRowClick:void 0,onRowDoubleClick:void 0,renderRow:void 0},(t,l)=>{let n=l.element,a=i({data:n.data,value:n.value,multiple:n.multiple,fromSchema:n.fromSchema,size:n.size,css:n.css,readonly:n.readonly,toggle:n.toggle,direction:n.direction,onChange(e,o){n.dispatchEvent(new CustomEvent("change",{detail:[e,o]}))},onRowClick(e,o,i){n.dispatchEvent(new CustomEvent("rowclick",{detail:[e,o,i]}))},onRowDoubleClick(e,o,i){n.dispatchEvent(new CustomEvent("rowdoubleclick",{detail:[e,o,i]}))}},t);return o(()=>{n.removeAttribute("css"),n.removeAttribute("field-names"),n.removeAttribute("data")}),e(d,a)});
+import{createComponent as e}from"solid-js/web";import{createEffect as o,mergeProps as i}from"solid-js";import{customElement as t}from"solid-element";import d from"./index";t("n-tree",{fieldNames:{},fromSchema:void 0,size:void 0,data:[],multiple:void 0,value:void 0,onChange:void 0,class:void 0,css:void 0,readonly:void 0,toggle:void 0,direction:void 0,onRowClick:void 0,onRowDoubleClick:void 0,renderRow:void 0},(t,l)=>{let n=l.element,a=i({data:n.data,value:n.value,multiple:n.multiple,fromSchema:n.fromSchema,size:n.size,css:n.css,readonly:n.readonly,toggle:n.toggle,direction:n.direction,onChange(e,o){n.dispatchEvent(new CustomEvent("change",{detail:[e,o]}))},onRowClick(e,o,i){n.dispatchEvent(new CustomEvent("rowclick",{detail:[e,o,i]}))},onRowDoubleClick(e,o,i){n.dispatchEvent(new CustomEvent("rowdoubleclick",{detail:[e,o,i]}))}},t);return o(()=>{n.removeAttribute("css"),n.removeAttribute("field-names"),n.removeAttribute("data")}),e(d,a)});
 //# sourceMappingURL=register.js.map

package/es/tree/register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/tree/register.ts"],"sourcesContent":["import { createComponent, createEffect, mergeProps } from 'solid-js';\nimport { customElement } from 'solid-element';\nimport Tree from './index';\nimport type { TreeData, TreeProps } from './type';\n\ncustomElement<TreeProps>(\n  'n-tree',\n  {\n    fieldNames: {},\n    fromSchema: void 0,\n    size: void 0,\n    data: [],\n    multiple: void 0,\n    value: void 0,\n    onChange: void 0,\n    class: void 0,\n    css: void 0,\n    readonly: void 0,\n    toggle: void 0,\n    direction: void 0,\n    onRowClick: void 0,\n    onRowDoubleClick: void 0,\n    renderRow: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        data: el.data,\n        value: el.value,\n        multiple: el.multiple,\n        fromSchema: el.fromSchema,\n        size: el.size,\n        css: el.css,\n        readonly: el.readonly,\n        toggle: el.toggle,\n        direction: el.direction,\n        onChange(key: string, item: TreeData) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: [key, item],\n            }),\n          );\n        },\n        onRowClick(e: MouseEvent, key: string, item: TreeData) {\n          el.dispatchEvent(\n            new CustomEvent('rowclick', {\n              detail: [e, key, item],\n            }),\n          );\n        },\n        onRowDoubleClick(e: MouseEvent, key: string, item: TreeData) {\n          el.dispatchEvent(\n            new CustomEvent('rowdoubleclick', {\n              detail: [e, key, item],\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('css');\n      el.removeAttribute('field-names');\n      el.removeAttribute('data');\n    });\n    return createComponent(Tree, props);\n  },\n);\n"],"names":["createComponent","createEffect","mergeProps","customElement","Tree","fieldNames","fromSchema","size","data","multiple","value","onChange","class","css","readonly","toggle","direction","onRowClick","onRowDoubleClick","renderRow","_","opt","el","element","props","key","item","dispatchEvent","CustomEvent","detail","e","removeAttribute"],"rangeMappings":"","mappings":"AAAA,OAASA,mBAAAA,CAAe,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACrE,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAAOC,MAAU,SAAU,CAG3BD,EACE,SACA,CACEE,WAAY,CAAC,EACbC,WAAY,KAAK,EACjBC,KAAM,KAAK,EACXC,KAAM,EAAE,CACRC,SAAU,KAAK,EACfC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfC,MAAO,KAAK,EACZC,IAAK,KAAK,EACVC,SAAU,KAAK,EACfC,OAAQ,KAAK,EACbC,UAAW,KAAK,EAChBC,WAAY,KAAK,EACjBC,iBAAkB,KAAK,EACvBC,UAAW,KAAK,CAClB,EACA,CAACC,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBC,EAAQtB,EACZ,CACEM,KAAMc,EAAGd,IAAI,CACbE,MAAOY,EAAGZ,KAAK,CACfD,SAAUa,EAAGb,QAAQ,CACrBH,WAAYgB,EAAGhB,UAAU,CACzBC,KAAMe,EAAGf,IAAI,CACbM,IAAKS,EAAGT,GAAG,CACXC,SAAUQ,EAAGR,QAAQ,CACrBC,OAAQO,EAAGP,MAAM,CACjBC,UAAWM,EAAGN,SAAS,CACvBL,SAASc,CAAW,CAAEC,CAAc,EAClCJ,EAAGK,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQ,CAACJ,EAAKC,EAAK,AACrB,GAEJ,EACAT,WAAWa,CAAa,CAAEL,CAAW,CAAEC,CAAc,EACnDJ,EAAGK,aAAa,CACd,IAAIC,YAAY,WAAY,CAC1BC,OAAQ,CAACC,EAAGL,EAAKC,EAAK,AACxB,GAEJ,EACAR,iBAAiBY,CAAa,CAAEL,CAAW,CAAEC,CAAc,EACzDJ,EAAGK,aAAa,CACd,IAAIC,YAAY,iBAAkB,CAChCC,OAAQ,CAACC,EAAGL,EAAKC,EAAK,AACxB,GAEJ,CACF,EACAN,GAQF,OALAnB,EAAa,KACXqB,EAAGS,eAAe,CAAC,OACnBT,EAAGS,eAAe,CAAC,eACnBT,EAAGS,eAAe,CAAC,OACrB,GACO/B,EAAgBI,EAAMoB,EAC/B"}
+{"version":3,"sources":["../../components/tree/register.tsx"],"sourcesContent":["import { createEffect, mergeProps } from 'solid-js';\nimport { customElement } from 'solid-element';\nimport Tree from './index';\nimport type { TreeData, TreeProps } from './type';\n\ncustomElement<TreeProps>(\n  'n-tree',\n  {\n    fieldNames: {},\n    fromSchema: void 0,\n    size: void 0,\n    data: [],\n    multiple: void 0,\n    value: void 0,\n    onChange: void 0,\n    class: void 0,\n    css: void 0,\n    readonly: void 0,\n    toggle: void 0,\n    direction: void 0,\n    onRowClick: void 0,\n    onRowDoubleClick: void 0,\n    renderRow: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        data: el.data,\n        value: el.value,\n        multiple: el.multiple,\n        fromSchema: el.fromSchema,\n        size: el.size,\n        css: el.css,\n        readonly: el.readonly,\n        toggle: el.toggle,\n        direction: el.direction,\n        onChange(key: string, item: TreeData) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: [key, item],\n            }),\n          );\n        },\n        onRowClick(e: MouseEvent, key: string, item: TreeData) {\n          el.dispatchEvent(\n            new CustomEvent('rowclick', {\n              detail: [e, key, item],\n            }),\n          );\n        },\n        onRowDoubleClick(e: MouseEvent, key: string, item: TreeData) {\n          el.dispatchEvent(\n            new CustomEvent('rowdoubleclick', {\n              detail: [e, key, item],\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('css');\n      el.removeAttribute('field-names');\n      el.removeAttribute('data');\n    });\n    return <Tree {...props} />;\n  },\n);\n"],"names":["createEffect","mergeProps","customElement","Tree","fieldNames","fromSchema","size","data","multiple","value","onChange","class","css","readonly","toggle","direction","onRowClick","onRowDoubleClick","renderRow","_","opt","el","element","props","key","item","dispatchEvent","CustomEvent","detail","e","removeAttribute"],"rangeMappings":"","mappings":"8CAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACpD,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAAOC,MAAU,SAAU,CAG3BD,EACE,SACA,CACEE,WAAY,CAAC,EACbC,WAAY,KAAK,EACjBC,KAAM,KAAK,EACXC,KAAM,EAAE,CACRC,SAAU,KAAK,EACfC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfC,MAAO,KAAK,EACZC,IAAK,KAAK,EACVC,SAAU,KAAK,EACfC,OAAQ,KAAK,EACbC,UAAW,KAAK,EAChBC,WAAY,KAAK,EACjBC,iBAAkB,KAAK,EACvBC,UAAW,KAAK,CAClB,EACA,CAACC,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBC,EAAQtB,EACZ,CACEM,KAAMc,EAAGd,IAAI,CACbE,MAAOY,EAAGZ,KAAK,CACfD,SAAUa,EAAGb,QAAQ,CACrBH,WAAYgB,EAAGhB,UAAU,CACzBC,KAAMe,EAAGf,IAAI,CACbM,IAAKS,EAAGT,GAAG,CACXC,SAAUQ,EAAGR,QAAQ,CACrBC,OAAQO,EAAGP,MAAM,CACjBC,UAAWM,EAAGN,SAAS,CACvBL,SAASc,CAAW,CAAEC,CAAc,EAClCJ,EAAGK,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQ,CAACJ,EAAKC,EAAK,AACrB,GAEJ,EACAT,WAAWa,CAAa,CAAEL,CAAW,CAAEC,CAAc,EACnDJ,EAAGK,aAAa,CACd,IAAIC,YAAY,WAAY,CAC1BC,OAAQ,CAACC,EAAGL,EAAKC,EAAK,AACxB,GAEJ,EACAR,iBAAiBY,CAAa,CAAEL,CAAW,CAAEC,CAAc,EACzDJ,EAAGK,aAAa,CACd,IAAIC,YAAY,iBAAkB,CAChCC,OAAQ,CAACC,EAAGL,EAAKC,EAAK,AACxB,GAEJ,CACF,EACAN,GAQF,OALAnB,EAAa,KACXqB,EAAGS,eAAe,CAAC,OACnBT,EAAGS,eAAe,CAAC,eACnBT,EAAGS,eAAe,CAAC,OACrB,KACQ3B,EAASoB,EACnB"}

package/es/tree/type.d.ts

@@ -28,7 +28,9 @@ export interface TreeBaseProp {
      */
     fromSchema?: false;
     /** 自定义节点字段 */
-    fieldNames?: BasicConfig['fieldName'];
+    fieldNames?: Partial<{
+        [key in keyof TreeData]: string;
+    }>;
 }
 interface TreeBaseProps extends TreeBaseProp {
     /** 选中的值, 多选模式时为数组 */

package/es/typography/index.js

@@ -1,10 +1,10 @@
-import{template as e}from"solid-js/web";import{insert as t}from"solid-js/web";import{createComponent as r}from"solid-js/web";let o=e("<style>");import{createComponent as l,createEffect as i,createMemo as s,mergeProps as n}from"solid-js";import{css as d,cx as a}from"@moneko/css";import{customElement as p}from"solid-element";import{Dynamic as c}from"solid-js/web";import m from"../theme";function u(e){let{baseStyle:l}=m,i=n({type:"text",tag:"span"},e),p=s(()=>{let t="secondary"===e.type?"--text-secondary":`--${e.type}-color`;"error"===e.type?t="--error-color":e.disabled&&(t="--disable-color");let r="";return e.truncated&&(r=d`
+import{template as e}from"solid-js/web";import{insert as t}from"solid-js/web";import{createComponent as r}from"solid-js/web";let o=e("<style>");import{createEffect as l,createMemo as i,mergeProps as s}from"solid-js";import{css as n,cx as d}from"@moneko/css";import{customElement as a}from"solid-element";import{Dynamic as p}from"solid-js/web";import c from"../theme";function m(e){let{baseStyle:l}=c,a=s({type:"text",tag:"span"},e),m=i(()=>{let t="secondary"===e.type?"--text-secondary":`--${e.type}-color`;"error"===e.type?t="--error-color":e.disabled&&(t="--disable-color");let r="";return e.truncated&&(r=n`
         overflow: hidden;
         /* stylelint-disable-next-line */
         display: -webkit-box;
         -webkit-box-orient: block-axis;
         -webkit-line-clamp: ${"number"==typeof e.truncated&&e.truncated||1};
-      `),d`
+      `),n`
       :host {
         display: inline-block;
         max-inline-size: 100%;
@@ -18,5 +18,5 @@ import{template as e}from"solid-js/web";import{insert as t}from"solid-js/web";im
         cursor: ${e.disabled?"not-allowed":"auto"};
         ${r}
       }
-    `});return[(()=>{let r=o();return t(r,l,null),t(r,p,null),t(r,()=>d(e.css),null),r})(),r(c,{get component(){return i.tag},get class(){return a("typography",i.class)},get style(){return i.style},get children(){return i.children}})]}p("n-typography",{class:void 0,css:void 0,type:void 0,truncated:void 0,tag:void 0,disabled:void 0,style:void 0},(e,t)=>{let r=t.element,o=n({children:[...r.childNodes.values()]},e);return i(()=>{r.replaceChildren()}),l(u,o)});export default u;
+    `});return[(()=>{let r=o();return t(r,l,null),t(r,m,null),t(r,()=>n(e.css),null),r})(),r(p,{get component(){return a.tag},get class(){return d("typography",a.class)},get style(){return a.style},get children(){return a.children}})]}a("n-typography",{class:void 0,css:void 0,type:void 0,truncated:void 0,tag:void 0,disabled:void 0,style:void 0},(e,t)=>{let o=t.element,i=s({children:[...o.childNodes.values()]},e);return l(()=>{o.replaceChildren()}),r(m,i)});export default m;
 //# sourceMappingURL=index.js.map