neko-ui 2.8.0 → 2.8.2

package/lib/tabs/index.js

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

package/lib/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":["Tabs","props","box","add","wrapRef","baseStyle","isDark","theme","value","setValue","createSignal","offsetStyle","setOffsetStyle","wrap","setWrap","left","right","cssVar","createMemo","css","fieldNames","Object","assign","FieldName","items","getOptions","current","find","o","onChange","item","e","disabled","next","isFunction","onKeyUp","key","handleEdit","type","stopPropagation","preventDefault","onEdit","handleWheel","pwid","offsetWidth","addWid","scrollWidth","deltaY","passiveSupported","deltaX","nl","scrollLeft","scrollTo","el","untrack","ref","offsetLeft","createEffect","_val","defaultValue","timer","whellTimer","setTimeout","clearTimeout","behavior","onCleanup","ani","setAni","content","extra","_content","onAnimationEnd","onMount","addEventListener","passive","removeEventListener","style","Show","For","i","readOnly","icon","val","label","isActive","bind","btnCss","closable","cx","class","addCss","centered","customElement","_","opt","element","mergeProps","dispatchEvent","CustomEvent","detail","removeAttribute","createComponent"],"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":["Tabs","props","box","add","wrapRef","baseStyle","isDark","theme","value","setValue","createSignal","offsetStyle","setOffsetStyle","wrap","setWrap","left","right","cssVar","createMemo","css","fieldNames","Object","assign","FieldName","items","getOptions","current","find","o","onChange","item","e","disabled","next","isFunction","onKeyUp","key","handleEdit","type","stopPropagation","preventDefault","onEdit","handleWheel","pwid","offsetWidth","addWid","scrollWidth","deltaY","passiveSupported","deltaX","nl","scrollLeft","scrollTo","el","untrack","ref","offsetLeft","createEffect","_val","defaultValue","timer","whellTimer","setTimeout","clearTimeout","behavior","onCleanup","ani","setAni","animated","content","extra","_content","onAnimationEnd","onMount","addEventListener","passive","removeEventListener","style","Show","For","i","readOnly","icon","val","label","isActive","bind","btnCss","closable","cx","class","addCss","centered","customElement","_","opt","element","mergeProps","dispatchEvent","CustomEvent","detail","removeAttribute"],"rangeMappings":";;;;;;;;;;","mappings":"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"}

package/lib/tag/index.js

@@ -1,6 +1,6 @@
-"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return m}});const t=require("solid-js/web"),r=require("solid-js"),n=(e=require("@moneko/common/lib/isFunction"))&&e.__esModule?e:{default:e},o=require("@moneko/css"),l=require("solid-element"),s=require("./style"),c=function(e,t){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=i(void 0);if(r&&r.has(e))return r.get(e);var n={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&Object.prototype.hasOwnProperty.call(e,l)){var s=o?Object.getOwnPropertyDescriptor(e,l):null;s&&(s.get||s.set)?Object.defineProperty(n,l,s):n[l]=e[l]}return n.default=e,r&&r.set(e,n),n}(require("../theme"));function i(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(i=function(e){return e?r:t})(e)}const u=(0,t.template)("<style>"),a=(0,t.template)('<span class="icon">'),d=(0,t.template)('<span class="close">'),p=(0,t.template)("<span>");function f(e){let{baseStyle:l,isDark:i}=c.default,[f,m]=(0,r.splitProps)(e,["class","css","onClose","color","icon","closeIcon","bordered","type","disabled"]),[v,g]=(0,r.createSignal)(!0),b=(0,r.createMemo)(()=>f.color?(0,o.css)`
+"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return m}});const t=require("solid-js/web"),r=require("solid-js"),n=(e=require("@moneko/common/lib/isFunction"))&&e.__esModule?e:{default:e},o=require("@moneko/css"),l=require("solid-element"),s=require("./style"),c=function(e,t){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=i(void 0);if(r&&r.has(e))return r.get(e);var n={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&Object.prototype.hasOwnProperty.call(e,l)){var s=o?Object.getOwnPropertyDescriptor(e,l):null;s&&(s.get||s.set)?Object.defineProperty(n,l,s):n[l]=e[l]}return n.default=e,r&&r.set(e,n),n}(require("../theme"));function i(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(i=function(e){return e?r:t})(e)}const u=(0,t.template)("<style>"),a=(0,t.template)('<span class="icon">'),d=(0,t.template)('<span class="close">'),p=(0,t.template)("<span>");function f(e){let{baseStyle:l,isDark:i}=c.default,[f,m]=(0,r.splitProps)(e,["class","css","onClose","color","icon","closeIcon","bordered","type","disabled"]),[g,v]=(0,r.createSignal)(!0),b=(0,r.createMemo)(()=>f.color?(0,o.css)`
         :host {
-          ${(0,c.generateTheme)(f.color,{dark:i(),name:"tag-custom"})}
+          ${(0,c.generateColor)(f.color,{dark:i(),name:"tag-custom"})}
         }
-      `:"");function h(e){(0,n.default)(f.onClose)&&f.onClose(e),g(!1)}return(0,t.createComponent)(r.Show,{get when(){return v()},get children(){return[(()=>{let e=u();return(0,t.insert)(e,l,null),(0,t.insert)(e,b,null),(0,t.insert)(e,s.style,null),(0,t.insert)(e,()=>(0,o.css)(f.css),null),e})(),(()=>{let e=p();return(0,t.spread)(e,(0,t.mergeProps)(m,{get class(){return(0,o.cx)("tag",f.type,f.color&&"tag-custom",f.bordered&&"bordered",f.disabled&&"disabled")}}),!1,!0),(0,t.insert)(e,(0,t.createComponent)(r.Show,{get when(){return f.icon},get children(){let e=a();return(0,t.insert)(e,()=>f.icon),e}}),null),(0,t.insert)(e,()=>m.children,null),(0,t.insert)(e,(0,t.createComponent)(r.Show,{get when(){return f.closeIcon},get children(){let e=d();return(0,t.addEventListener)(e,"click",h,!0),(0,t.insert)(e,()=>!0===f.closeIcon?"⛌":f.closeIcon),e}}),null),e})()]}})}(0,l.customElement)("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,t)=>{let n=t.element,o=(0,r.mergeProps)({css:n.css,children:[...n.childNodes.values()],onClose(e){n.dispatchEvent(new CustomEvent("close",{detail:e}))}},e);return(0,r.createEffect)(()=>{n.replaceChildren(),n.removeAttribute("css")}),(0,r.createComponent)(f,o)});const m=f;(0,t.delegateEvents)(["click"]);
+      `:"");function h(e){(0,n.default)(f.onClose)&&f.onClose(e),v(!1)}return(0,t.createComponent)(r.Show,{get when(){return g()},get children(){return[(()=>{let e=u();return(0,t.insert)(e,l,null),(0,t.insert)(e,b,null),(0,t.insert)(e,s.style,null),(0,t.insert)(e,()=>(0,o.css)(f.css),null),e})(),(()=>{let e=p();return(0,t.spread)(e,(0,t.mergeProps)(m,{get class(){return(0,o.cx)("tag",f.type)},get classList(){return{"tag-custom":!!f.color,bordered:f.bordered,disabled:f.disabled}}}),!1,!0),(0,t.insert)(e,(0,t.createComponent)(r.Show,{get when(){return f.icon},get children(){let e=a();return(0,t.insert)(e,()=>f.icon),e}}),null),(0,t.insert)(e,()=>m.children,null),(0,t.insert)(e,(0,t.createComponent)(r.Show,{get when(){return f.closeIcon},get children(){let e=d();return(0,t.addEventListener)(e,"click",h,!0),(0,t.insert)(e,()=>!0===f.closeIcon?"⛌":f.closeIcon),e}}),null),e})()]}})}(0,l.customElement)("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,n)=>{let o=n.element,l=(0,r.mergeProps)({css:o.css,children:[...o.childNodes.values()],onClose(e){o.dispatchEvent(new CustomEvent("close",{detail:e}))}},e);return(0,r.createEffect)(()=>{o.replaceChildren(),o.removeAttribute("css")}),(0,t.createComponent)(f,l)});const m=f;(0,t.delegateEvents)(["click"]);
 //# sourceMappingURL=index.js.map

package/lib/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":["Tag","props","baseStyle","isDark","theme","local","other","splitProps","show","setShow","createSignal","customColor","createMemo","color","css","generateTheme","dark","name","onClose","e","isFunction","Show","style","cx","type","bordered","disabled","icon","children","closeIcon","customElement","class","_","opt","el","element","mergeProps","childNodes","values","dispatchEvent","CustomEvent","detail","createEffect","replaceChildren","removeAttribute","createComponent"],"rangeMappings":";;;;","mappings":"wGAqJA,+CAAA,+CA7IO,yBACoB,wEACH,yBACM,2BACR,ieACe,0RA2BrC,SAASA,EAAIC,CAAe,EAC1B,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGC,SAAK,CAC7B,CAACC,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACN,EAAO,CACvC,QACA,MACA,UACA,QACA,OACA,YACA,WACA,OACA,WACD,EACK,CAACO,EAAMC,EAAQ,CAAGC,GAAAA,cAAY,EAAC,CAAA,GAE/BC,EAAcC,GAAAA,YAAU,EAAC,IAC7B,AAAIP,EAAMQ,KAAK,CACNC,GAAAA,KAAG,CAAA,CAAC;;UAEP,EAAEC,GAAAA,eAAa,EAACV,EAAMQ,KAAK,CAAE,CAC3BG,KAAMb,IACNc,KAAM,YACR,GAAG;;MAEP,CAAC,CAEI,IAGT,SAASC,EAAQC,CAAQ,EACnBC,GAAAA,SAAU,EAACf,EAAMa,OAAO,GAC1Bb,EAAMa,OAAO,CAACC,GAEhBV,EAAQ,CAAA,EACV,CAEA,4BACGY,MAAI,oBAAOb,gEAEPN,uBACAS,uBACAW,OAAK,0BACLR,GAAAA,KAAG,EAACT,EAAMS,GAAG,oEAGVR,qBACGiB,GAAAA,IAAE,EACP,MACAlB,EAAMmB,IAAI,CACVnB,EAAMQ,KAAK,EAAI,aACfR,EAAMoB,QAAQ,EAAI,WAClBpB,EAAMqB,QAAQ,EAAI,2DAGnBL,MAAI,oBAAOhB,EAAMsB,IAAI,oDACAtB,EAAMsB,IAAI,gCAE/BrB,EAAMsB,QAAQ,4CACdP,MAAI,oBAAOhB,EAAMwB,SAAS,kEACIX,yBAC1Bb,AAAoB,CAAA,IAApBA,EAAMwB,SAAS,CAAY,IAAMxB,EAAMwB,SAAS,sBAM7D,CAIAC,GAAAA,eAAa,EACX,QACA,CACEC,MAAO,KAAK,EACZjB,IAAK,KAAK,EACVD,MAAO,KAAK,EACZc,KAAM,KAAK,EACXE,UAAW,KAAK,EAChBX,QAAS,KAAK,EACdO,SAAU,CAAA,EACVC,SAAU,KAAK,EACfF,KAAM,KAAK,CACb,EACA,CAACQ,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBlC,EAAQmC,GAAAA,YAAU,EACtB,CACEtB,IAAKoB,EAAGpB,GAAG,CACXc,SAAU,IAAIM,EAAGG,UAAU,CAACC,MAAM,GAAG,CACrCpB,QAAQC,CAAQ,EACde,EAAGK,aAAa,CACd,IAAIC,YAAY,QAAS,CACvBC,OAAQtB,CACV,GAEJ,CACF,EACAa,GAQF,MALAU,GAAAA,cAAY,EAAC,KACXR,EAAGS,eAAe,GAClBT,EAAGU,eAAe,CAAC,MACrB,GAEOC,GAAAA,iBAAe,EAAC7C,EAAKC,EAC9B,SAGF,EAAeD"}
+{"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":["Tag","props","baseStyle","isDark","theme","local","other","splitProps","show","setShow","createSignal","customColor","createMemo","color","css","generateColor","dark","name","onClose","e","isFunction","Show","style","cx","type","bordered","disabled","icon","children","closeIcon","customElement","class","_","opt","el","element","mergeProps","childNodes","values","dispatchEvent","CustomEvent","detail","createEffect","replaceChildren","removeAttribute"],"rangeMappings":";;;;","mappings":"wGA4IA,+CAAA,+CA5IqF,yBAC1D,wEACH,yBACM,2BACR,ieACe,0RA2BrC,SAASA,EAAIC,CAAe,EAC1B,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGC,SAAK,CAC7B,CAACC,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACN,EAAO,CACvC,QACA,MACA,UACA,QACA,OACA,YACA,WACA,OACA,WACD,EACK,CAACO,EAAMC,EAAQ,CAAGC,GAAAA,cAAY,EAAC,CAAA,GAE/BC,EAAcC,GAAAA,YAAU,EAAC,IAC7B,AAAIP,EAAMQ,KAAK,CACNC,GAAAA,KAAG,CAAA,CAAC;;UAEP,EAAEC,GAAAA,eAAa,EAACV,EAAMQ,KAAK,CAAE,CAC3BG,KAAMb,IACNc,KAAM,YACR,GAAG;;MAEP,CAAC,CAEI,IAGT,SAASC,EAAQC,CAAQ,EACnBC,GAAAA,SAAU,EAACf,EAAMa,OAAO,GAC1Bb,EAAMa,OAAO,CAACC,GAEhBV,EAAQ,CAAA,EACV,CAEA,4BACGY,MAAI,oBAAOb,gEAEPN,uBACAS,uBACAW,OAAK,0BACLR,GAAAA,KAAG,EAACT,EAAMS,GAAG,oEAGVR,qBACGiB,GAAAA,IAAE,EAAC,MAAOlB,EAAMmB,IAAI,yBAChB,CACT,aAAc,CAAC,CAACnB,EAAMQ,KAAK,CAC3BY,SAAUpB,EAAMoB,QAAQ,CACxBC,SAAUrB,EAAMqB,QAAQ,AAC1B,iDAECL,MAAI,oBAAOhB,EAAMsB,IAAI,oDACAtB,EAAMsB,IAAI,gCAE/BrB,EAAMsB,QAAQ,4CACdP,MAAI,oBAAOhB,EAAMwB,SAAS,kEACIX,yBAC1Bb,AAAoB,CAAA,IAApBA,EAAMwB,SAAS,CAAY,IAAMxB,EAAMwB,SAAS,sBAM7D,CAIAC,GAAAA,eAAa,EACX,QACA,CACEC,MAAO,KAAK,EACZjB,IAAK,KAAK,EACVD,MAAO,KAAK,EACZc,KAAM,KAAK,EACXE,UAAW,KAAK,EAChBX,QAAS,KAAK,EACdO,SAAU,CAAA,EACVC,SAAU,KAAK,EACfF,KAAM,KAAK,CACb,EACA,CAACQ,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBlC,EAAQmC,GAAAA,YAAU,EACtB,CACEtB,IAAKoB,EAAGpB,GAAG,CACXc,SAAU,IAAIM,EAAGG,UAAU,CAACC,MAAM,GAAG,CACrCpB,QAAQC,CAAQ,EACde,EAAGK,aAAa,CACd,IAAIC,YAAY,QAAS,CACvBC,OAAQtB,CACV,GAEJ,CACF,EACAa,GAQF,MALAU,GAAAA,cAAY,EAAC,KACXR,EAAGS,eAAe,GAClBT,EAAGU,eAAe,CAAC,MACrB,yBAEQ5C,EAAQC,EAClB,SAGF,EAAeD"}

package/lib/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/lib/theme/index.js

@@ -1,77 +1,2 @@
-"use strict";var e,r;Object.defineProperty(exports,"__esModule",{value:!0}),function(e,r){for(var o in r)Object.defineProperty(e,o,{enumerable:!0,get:r[o]})}(exports,{ColorScheme:function(){return e},default:function(){return m},generateTheme:function(){return l},toneColor:function(){return s.toneColor}});const o=require("solid-js"),a=c(require("@moneko/common/lib/colorParse")),t=c(require("@moneko/common/lib/mixColor")),n=c(require("@moneko/common/lib/toneColor")),i=require("@moneko/css"),s=require("@moneko/common");function c(e){return e&&e.__esModule?e:{default:e}}function l(e,r){let o=(0,n.default)(e,r?.dark),i=(0,a.default)(o[5]),s=(0,a.default)(e);return{[`--${r.name}-text`]:i.setAlpha(.65).toRgbaString(),[`--${r.name}-secondary`]:i.setAlpha(.45).toRgbaString(),[`--${r.name}-heading`]:o[5],[`--${r.name}-active`]:o[30],[`--${r.name}-color`]:o[40],[`--${r.name}-hover`]:(0,t.default)(o[40],o[30],15),[`--${r.name}-secondary-bg`]:o[70],[`--${r.name}-border`]:o[80],[`--${r.name}-outline`]:(0,t.default)(o[90],o[40],5),[`--${r.name}-selection`]:o[90],[`--${r.name}-notify-bg`]:(0,a.default)(o[90]).setAlpha(.8).toRgbaString(),[`--on-${r.name}-selection`]:o[10],[`--${r.name}-shadow`]:s.setAlpha(.12).toRgbaString(),[`--${r.name}-details-bg`]:o[95],[`--${r.name}-component-bg`]:o[98],[`--${r.name}-bg`]:o[99],[`--on-${r.name}-bg`]:o[5],[`--${r.name}-base-shadow`]:`0 3px 6px -4px ${s.setAlpha(.12).toRgbaString()}, 0 6px 16px 0 ${s.setAlpha(.08).toRgbaString()}, 0 9px 28px 8px ${s.setAlpha(.05).toRgbaString()}`}}(r=e||(e={})).light="light",r.dark="dark",r.auto="auto";const m=(0,o.createRoot)(function(){let r=e[localStorage.getItem("color-scheme")]||"auto",a=window.matchMedia("(prefers-color-scheme: dark)"),[t,n]=(0,o.createSignal)(r),[s,c]=(0,o.createSignal)(a.matches),[m,b]=(0,o.createSignal)({primary:"#5794ff",warning:"#faad14",error:"#ff4d4f",success:"#52c41a"}),[d,g]=(0,o.createSignal)({primary:"#4d81dc",warning:"#bb8314",error:"#901c22",success:"#419418"}),p=(0,o.createMemo)(()=>l(m().primary,{name:"primary"})),u=(0,o.createMemo)(()=>l(m().warning,{name:"warning"})),f=(0,o.createMemo)(()=>l(m().success,{name:"success"})),h=(0,o.createMemo)(()=>l(m().error,{name:"error"})),x=(0,o.createMemo)(()=>(0,i.css)`
-      :root,
-      :host {
-        ${p()}
-        ${u()}
-        ${f()}
-        ${h()}
-        --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);
-      }
-    `),y=(0,o.createMemo)(()=>l(d().primary,{name:"primary",dark:!0})),$=(0,o.createMemo)(()=>l(d().warning,{name:"warning",dark:!0})),v=(0,o.createMemo)(()=>l(d().success,{name:"success",dark:!0})),S=(0,o.createMemo)(()=>l(d().error,{name:"error",dark:!0})),k=(0,o.createMemo)(()=>(0,i.css)`
-      :root,
-      :host {
-        ${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=(0,i.css)`
-    :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 M(e){c(e.matches)}(0,o.createEffect)(()=>{let e=t();c("dark"===e||"auto"===e&&a.matches)});let z=(0,o.createMemo)(()=>w+(s()?k():x()));return(0,o.createEffect)(()=>{"auto"===t()?a.addEventListener("change",M):a.removeEventListener("change",M),localStorage.setItem("color-scheme",t())}),{baseStyle:z,dark:d,setDark:g,light:m,setLight:b,scheme:t,setScheme:n,isDark:s}},(0,o.getOwner)());
+"use strict";var e,r;Object.defineProperty(exports,"__esModule",{value:!0}),function(e,r){for(var o in r)Object.defineProperty(e,o,{enumerable:!0,get:r[o]})}(exports,{ColorScheme:function(){return e},default:function(){return m},generateColor:function(){return l},toneColor:function(){return c.toneColor}});const o=require("solid-js"),a=s(require("@moneko/common/lib/colorParse")),t=s(require("@moneko/common/lib/mixColor")),n=s(require("@moneko/common/lib/toneColor")),i=require("@moneko/css"),c=require("@moneko/common");function s(e){return e&&e.__esModule?e:{default:e}}function l(e,r){let o=(0,n.default)(e,r?.dark),i=(0,a.default)(o[5]),c=(0,a.default)(e);return{[`--${r.name}-text`]:i.setAlpha(.65).toRgbaString(),[`--${r.name}-secondary`]:i.setAlpha(.45).toRgbaString(),[`--${r.name}-heading`]:o[5],[`--${r.name}-active`]:o[30],[`--${r.name}-color`]:o[40],[`--${r.name}-hover`]:(0,t.default)(o[40],o[30],15),[`--${r.name}-secondary-bg`]:o[70],[`--${r.name}-border`]:o[80],[`--${r.name}-outline`]:(0,t.default)(o[90],o[40],5),[`--${r.name}-selection`]:o[90],[`--${r.name}-notify-bg`]:(0,a.default)(o[90]).setAlpha(.8).toRgbaString(),[`--on-${r.name}-selection`]:o[10],[`--${r.name}-shadow`]:c.setAlpha(.12).toRgbaString(),[`--${r.name}-shadow-1`]:c.setAlpha(.08).toRgbaString(),[`--${r.name}-shadow-2`]:c.setAlpha(.05).toRgbaString(),[`--${r.name}-details-bg`]:o[95],[`--${r.name}-component-bg`]:o[98],[`--${r.name}-bg`]:o[99],[`--on-${r.name}-bg`]:o[5]}}(r=e||(e={})).light="light",r.dark="dark",r.auto="auto";const m=(0,o.createRoot)(function(){let r=(0,i.css)({":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=e[localStorage.getItem("color-scheme")]||"auto",t=window.matchMedia("(prefers-color-scheme: dark)"),[n,c]=(0,o.createSignal)(a),[s,m]=(0,o.createSignal)(t.matches),[b,d]=(0,o.createSignal)({primary:"#5794ff",warning:"#faad14",error:"#ff4d4f",success:"#52c41a"}),[g,u]=(0,o.createSignal)({primary:"#4d81dc",warning:"#bb8314",error:"#901c22",success:"#419418"}),p=(0,o.createMemo)(()=>l(b().primary,{name:"primary"})),f=(0,o.createMemo)(()=>l(g().primary,{name:"primary",dark:!0})),h=(0,o.createMemo)(()=>l(b().warning,{name:"warning"})),y=(0,o.createMemo)(()=>l(g().warning,{name:"warning",dark:!0})),x=(0,o.createMemo)(()=>l(b().success,{name:"success"})),S=(0,o.createMemo)(()=>l(g().success,{name:"success",dark:!0})),v=(0,o.createMemo)(()=>l(b().error,{name:"error"})),$=(0,o.createMemo)(()=>l(g().error,{name:"error",dark:!0}));function k(e){let o="";for(let r in e)Object.prototype.hasOwnProperty.call(e,r)&&(o+=`${r}:${e[r]};`);return`${r}:root,:host{${o}}`}let w=(0,o.createMemo)(()=>k(Object.assign({},p(),h(),x(),v(),{"--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)"}))),M=(0,o.createMemo)(()=>k(Object.assign({},f(),y(),S(),$(),{"--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){m(e.matches)}(0,o.createEffect)(()=>{let e=n();m("dark"===e||"auto"===e&&t.matches)});let C=(0,o.createMemo)(()=>s()?M():w());return(0,o.createEffect)(()=>{"auto"===n()?t.addEventListener("change",z):t.removeEventListener("change",z),localStorage.setItem("color-scheme",n())}),{baseStyle:C,dark:g,setDark:u,light:b,setLight:d,scheme:n,setScheme:c,isDark:s}},(0,o.getOwner)());
 //# sourceMappingURL=index.js.map

package/lib/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","generateTheme","toneColor","base","option","obj","dark","textColor","colorParse","baseColor","name","setAlpha","toRgbaString","mixColor","createRoot","preset","localStorage","getItem","media","window","matchMedia","scheme","setScheme","createSignal","isDark","setIsDark","matches","light","setLight","primary","warning","error","success","setDark","createMemo","lightCss","css","darkPrimary","darkWarning","darkSuccess","darkError","darkCss","baseCss","update","e","createEffect","_","baseStyle","addEventListener","removeEventListener","setItem","getOwner"],"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","generateColor","toneColor","base","option","obj","dark","textColor","colorParse","baseColor","name","setAlpha","toRgbaString","mixColor","createRoot","baseTokens","css","fontSize","fontFamily","color","lineHeight","cursor","backgroundColor","inlineSize","blockSize","preset","localStorage","getItem","media","window","matchMedia","scheme","setScheme","createSignal","isDark","setIsDark","matches","light","setLight","primary","warning","error","success","setDark","createMemo","darkPrimary","darkWarning","darkSuccess","darkError","getHostCss","tokens","str","key","Object","prototype","hasOwnProperty","call","lightCss","assign","darkCss","update","e","createEffect","_","baseStyle","addEventListener","removeEventListener","setItem","getOwner"],"rangeMappings":"","mappings":"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"}

package/lib/tree/index.js

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

package/lib/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":["_","el","sizeCnt","small","normal","large","baseStyle","theme","lines","setLines","createSignal","treeData","setTreeData","fieldNames","createMemo","Object","assign","FieldName","rtl","direction","current","value","Array","isArray","path","Symbol","pathEnd","createEffect","data","fromSchema","schema","isString","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","frameCallback","prefixSize","al","querySelectorAll","rect1","getBoundingClientRect","sideLen","height","bottom","top","style","setProperty","Math","abs","css","renderTreeRow","For","name","subTitle","_title","e","onRowDoubleClick","handleClick","handleChange","readonly","isFunction","onChange","_current","multiple","idx","indexOf","splice","toggle","onRowClick","renderItem","row","renderRow","reverse","join","cx","includes","Show","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":["_","el","sizeCnt","small","normal","large","baseStyle","theme","lines","setLines","createSignal","treeData","setTreeData","normalFieldNames","key","name","title","subTitle","children","description","fieldNames","createMemo","Object","assign","rtl","direction","current","value","Array","isArray","path","Symbol","pathEnd","createEffect","data","fromSchema","schema","isString","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","frameCallback","prefixSize","al","querySelectorAll","rect1","getBoundingClientRect","sideLen","height","bottom","top","style","setProperty","Math","abs","css","renderTreeRow","For","_title","e","onRowDoubleClick","handleClick","handleChange","readonly","isFunction","onChange","_current","multiple","idx","indexOf","splice","toggle","onRowClick","renderItem","row","renderRow","reverse","join","Show","includes","class"],"rangeMappings":"","mappings":"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"}

package/lib/tree/register.js

@@ -1,2 +1,2 @@
-"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0});const o=require("solid-js"),t=require("solid-element"),i=(e=require("./index"))&&e.__esModule?e:{default:e};(0,t.customElement)("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},(e,t)=>{let d=t.element,l=(0,o.mergeProps)({data:d.data,value:d.value,multiple:d.multiple,fromSchema:d.fromSchema,size:d.size,css:d.css,readonly:d.readonly,toggle:d.toggle,direction:d.direction,onChange(e,o){d.dispatchEvent(new CustomEvent("change",{detail:[e,o]}))},onRowClick(e,o,t){d.dispatchEvent(new CustomEvent("rowclick",{detail:[e,o,t]}))},onRowDoubleClick(e,o,t){d.dispatchEvent(new CustomEvent("rowdoubleclick",{detail:[e,o,t]}))}},e);return(0,o.createEffect)(()=>{d.removeAttribute("css"),d.removeAttribute("field-names"),d.removeAttribute("data")}),(0,o.createComponent)(i.default,l)});
+"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0});const o=require("solid-js/web"),t=require("solid-js"),i=require("solid-element"),d=(e=require("./index"))&&e.__esModule?e:{default:e};(0,i.customElement)("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},(e,i)=>{let l=i.element,r=(0,t.mergeProps)({data:l.data,value:l.value,multiple:l.multiple,fromSchema:l.fromSchema,size:l.size,css:l.css,readonly:l.readonly,toggle:l.toggle,direction:l.direction,onChange(e,o){l.dispatchEvent(new CustomEvent("change",{detail:[e,o]}))},onRowClick(e,o,t){l.dispatchEvent(new CustomEvent("rowclick",{detail:[e,o,t]}))},onRowDoubleClick(e,o,t){l.dispatchEvent(new CustomEvent("rowdoubleclick",{detail:[e,o,t]}))}},e);return(0,t.createEffect)(()=>{l.removeAttribute("css"),l.removeAttribute("field-names"),l.removeAttribute("data")}),(0,o.createComponent)(d.default,r)});
 //# sourceMappingURL=register.js.map

package/lib/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":["customElement","fieldNames","fromSchema","size","data","multiple","value","onChange","class","css","readonly","toggle","direction","onRowClick","onRowDoubleClick","renderRow","_","opt","el","element","props","mergeProps","key","item","dispatchEvent","CustomEvent","detail","e","createEffect","removeAttribute","createComponent","Tree"],"rangeMappings":"","mappings":"0FAA0D,sBAC5B,8BACb,wCAGjBA,GAAAA,eAAa,EACX,SACA,CACEC,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,EAAQC,GAAAA,YAAU,EACtB,CACEjB,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,SAASe,CAAW,CAAEC,CAAc,EAClCL,EAAGM,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQ,CAACJ,EAAKC,EAAK,AACrB,GAEJ,EACAV,WAAWc,CAAa,CAAEL,CAAW,CAAEC,CAAc,EACnDL,EAAGM,aAAa,CACd,IAAIC,YAAY,WAAY,CAC1BC,OAAQ,CAACC,EAAGL,EAAKC,EAAK,AACxB,GAEJ,EACAT,iBAAiBa,CAAa,CAAEL,CAAW,CAAEC,CAAc,EACzDL,EAAGM,aAAa,CACd,IAAIC,YAAY,iBAAkB,CAChCC,OAAQ,CAACC,EAAGL,EAAKC,EAAK,AACxB,GAEJ,CACF,EACAP,GAQF,MALAY,GAAAA,cAAY,EAAC,KACXV,EAAGW,eAAe,CAAC,OACnBX,EAAGW,eAAe,CAAC,eACnBX,EAAGW,eAAe,CAAC,OACrB,GACOC,GAAAA,iBAAe,EAACC,SAAI,CAAEX,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":["customElement","fieldNames","fromSchema","size","data","multiple","value","onChange","class","css","readonly","toggle","direction","onRowClick","onRowDoubleClick","renderRow","_","opt","el","element","props","mergeProps","key","item","dispatchEvent","CustomEvent","detail","e","createEffect","removeAttribute","Tree"],"rangeMappings":"","mappings":"oHAAyC,sBACX,8BACb,wCAGjBA,GAAAA,eAAa,EACX,SACA,CACEC,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,EAAQC,GAAAA,YAAU,EACtB,CACEjB,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,SAASe,CAAW,CAAEC,CAAc,EAClCL,EAAGM,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQ,CAACJ,EAAKC,EAAK,AACrB,GAEJ,EACAV,WAAWc,CAAa,CAAEL,CAAW,CAAEC,CAAc,EACnDL,EAAGM,aAAa,CACd,IAAIC,YAAY,WAAY,CAC1BC,OAAQ,CAACC,EAAGL,EAAKC,EAAK,AACxB,GAEJ,EACAT,iBAAiBa,CAAa,CAAEL,CAAW,CAAEC,CAAc,EACzDL,EAAGM,aAAa,CACd,IAAIC,YAAY,iBAAkB,CAChCC,OAAQ,CAACC,EAAGL,EAAKC,EAAK,AACxB,GAEJ,CACF,EACAP,GAQF,MALAY,GAAAA,cAAY,EAAC,KACXV,EAAGW,eAAe,CAAC,OACnBX,EAAGW,eAAe,CAAC,eACnBX,EAAGW,eAAe,CAAC,OACrB,yBACQC,SAAI,CAAKV,EACnB"}

package/lib/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/lib/typography/index.js

@@ -18,5 +18,5 @@
         cursor: ${e.disabled?"not-allowed":"auto"};
         ${r}
       }
-    `});return[(()=>{let r=s();return(0,t.insert)(r,l,null),(0,t.insert)(r,a,null),(0,t.insert)(r,()=>(0,o.css)(e.css),null),r})(),(0,t.createComponent)(t.Dynamic,{get component(){return i.tag},get class(){return(0,o.cx)("typography",i.class)},get style(){return i.style},get children(){return i.children}})]}(0,l.customElement)("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,l=(0,r.mergeProps)({children:[...o.childNodes.values()]},e);return(0,r.createEffect)(()=>{o.replaceChildren()}),(0,r.createComponent)(i,l)});const a=i;
+    `});return[(()=>{let r=s();return(0,t.insert)(r,l,null),(0,t.insert)(r,a,null),(0,t.insert)(r,()=>(0,o.css)(e.css),null),r})(),(0,t.createComponent)(t.Dynamic,{get component(){return i.tag},get class(){return(0,o.cx)("typography",i.class)},get style(){return i.style},get children(){return i.children}})]}(0,l.customElement)("n-typography",{class:void 0,css:void 0,type:void 0,truncated:void 0,tag:void 0,disabled:void 0,style:void 0},(e,o)=>{let l=o.element,n=(0,r.mergeProps)({children:[...l.childNodes.values()]},e);return(0,r.createEffect)(()=>{l.replaceChildren()}),(0,t.createComponent)(i,n)});const a=i;
 //# sourceMappingURL=index.js.map

package/lib/typography/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/typography/index.tsx"],"sourcesContent":["import { createComponent, createEffect, createMemo, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Dynamic } from 'solid-js/web';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface TypographyProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 文本格式\n   * @default 'text'\n   */\n  type?: 'primary' | 'warning' | 'success' | 'error' | 'text' | 'secondary';\n  /** 启用超出隐藏\n   * @default false\n   */\n  truncated?: boolean | number;\n  /** 自定义标签名\n   * @default 'span'\n   */\n  tag?: string;\n  /** 禁用 */\n  disabled?: boolean;\n  children?: JSX.Element;\n  style?: Record<string, string | number>;\n}\n\nfunction Typography(props: TypographyProps) {\n  const { baseStyle } = theme;\n  const _ = mergeProps(\n    {\n      type: 'text',\n      tag: 'span',\n    },\n    props,\n  );\n  const customCss = createMemo(() => {\n    let color = props.type === 'secondary' ? '--text-secondary' : `--${props.type}-color`;\n\n    if (props.type === 'error') {\n      color = '--error-color';\n    } else if (props.disabled) {\n      color = '--disable-color';\n    }\n    let truncated = '';\n\n    if (props.truncated) {\n      truncated = css`\n        overflow: hidden;\n        /* stylelint-disable-next-line */\n        display: -webkit-box;\n        -webkit-box-orient: block-axis;\n        -webkit-line-clamp: ${(typeof props.truncated === 'number' && props.truncated) || 1};\n      `;\n    }\n\n    return css`\n      :host {\n        display: inline-block;\n        max-inline-size: 100%;\n      }\n\n      .typography {\n        font-size: var(--font-size);\n        word-break: break-word;\n        word-wrap: break-word;\n        color: var(${color});\n        cursor: ${props.disabled ? 'not-allowed' : 'auto'};\n        ${truncated}\n      }\n    `;\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {customCss()}\n        {css(props.css)}\n      </style>\n      <Dynamic component={_.tag} class={cx('typography', _.class)} style={_.style}>\n        {_.children}\n      </Dynamic>\n    </>\n  );\n}\n\nexport type TypographyElement = CustomElement<TypographyProps>;\n\ncustomElement<TypographyProps>(\n  'n-typography',\n  {\n    class: void 0,\n    css: void 0,\n    type: void 0,\n    truncated: void 0,\n    tag: void 0,\n    disabled: void 0,\n    style: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        children: [...el.childNodes.values()],\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n    });\n    return createComponent(Typography, props);\n  },\n);\nexport default Typography;\n"],"names":["Typography","props","baseStyle","theme","_","mergeProps","type","tag","customCss","createMemo","color","disabled","truncated","css","Dynamic","cx","class","style","children","customElement","opt","el","element","childNodes","values","createEffect","replaceChildren","createComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"wGAsHA,+CAAA,qBAnHwB,0BAH8C,sBAC9C,yBACM,8BAEZ,qEA0BlB,SAASA,EAAWC,CAAsB,EACxC,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CACrBC,EAAIC,GAAAA,YAAU,EAClB,CACEC,KAAM,OACNC,IAAK,MACP,EACAN,GAEIO,EAAYC,GAAAA,YAAU,EAAC,KAC3B,IAAIC,EAAQT,AAAe,cAAfA,EAAMK,IAAI,CAAmB,mBAAqB,CAAC,EAAE,EAAEL,EAAMK,IAAI,CAAC,MAAM,CAAC,AAEjFL,AAAe,CAAA,UAAfA,EAAMK,IAAI,CACZI,EAAQ,gBACCT,EAAMU,QAAQ,EACvBD,CAAAA,EAAQ,iBAAgB,EAE1B,IAAIE,EAAY,GAYhB,OAVIX,EAAMW,SAAS,EACjBA,CAAAA,EAAYC,GAAAA,KAAG,CAAA,CAAC;;;;;4BAKM,EAAE,AAA4B,UAA3B,OAAOZ,EAAMW,SAAS,EAAiBX,EAAMW,SAAS,EAAK,EAAE;MACtF,CAAC,AAAD,EAGKC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;mBAUI,EAAEH,EAAM;gBACX,EAAET,EAAMU,QAAQ,CAAG,cAAgB,OAAO;QAClD,EAAEC,EAAU;;IAEhB,CAAC,AACH,GAEA,4CAGOV,uBACAM,2BACAK,GAAAA,KAAG,EAACZ,EAAMY,GAAG,oCAEfC,SAAO,yBAAYV,EAAEG,GAAG,oBAASQ,GAAAA,IAAE,EAAC,aAAcX,EAAEY,KAAK,sBAAUZ,EAAEa,KAAK,wBACxEb,EAAEc,QAAQ,IAInB,CAIAC,GAAAA,eAAa,EACX,eACA,CACEH,MAAO,KAAK,EACZH,IAAK,KAAK,EACVP,KAAM,KAAK,EACXM,UAAW,KAAK,EAChBL,IAAK,KAAK,EACVI,SAAU,KAAK,EACfM,MAAO,KAAK,CACd,EACA,CAACb,EAAGgB,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBrB,EAAQI,GAAAA,YAAU,EACtB,CACEa,SAAU,IAAIG,EAAGE,UAAU,CAACC,MAAM,GAAG,AACvC,EACApB,GAMF,MAHAqB,GAAAA,cAAY,EAAC,KACXJ,EAAGK,eAAe,EACpB,GACOC,GAAAA,iBAAe,EAAC3B,EAAYC,EACrC,SAEF,EAAeD"}
+{"version":3,"sources":["../../components/typography/index.tsx"],"sourcesContent":["import { createEffect, createMemo, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Dynamic } from 'solid-js/web';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface TypographyProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 文本格式\n   * @default 'text'\n   */\n  type?: 'primary' | 'warning' | 'success' | 'error' | 'text' | 'secondary';\n  /** 启用超出隐藏\n   * @default false\n   */\n  truncated?: boolean | number;\n  /** 自定义标签名\n   * @default 'span'\n   */\n  tag?: string;\n  /** 禁用 */\n  disabled?: boolean;\n  children?: JSX.Element;\n  style?: Record<string, string | number>;\n}\n\nfunction Typography(props: TypographyProps) {\n  const { baseStyle } = theme;\n  const _ = mergeProps(\n    {\n      type: 'text',\n      tag: 'span',\n    },\n    props,\n  );\n  const customCss = createMemo(() => {\n    let color = props.type === 'secondary' ? '--text-secondary' : `--${props.type}-color`;\n\n    if (props.type === 'error') {\n      color = '--error-color';\n    } else if (props.disabled) {\n      color = '--disable-color';\n    }\n    let truncated = '';\n\n    if (props.truncated) {\n      truncated = css`\n        overflow: hidden;\n        /* stylelint-disable-next-line */\n        display: -webkit-box;\n        -webkit-box-orient: block-axis;\n        -webkit-line-clamp: ${(typeof props.truncated === 'number' && props.truncated) || 1};\n      `;\n    }\n\n    return css`\n      :host {\n        display: inline-block;\n        max-inline-size: 100%;\n      }\n\n      .typography {\n        font-size: var(--font-size);\n        word-break: break-word;\n        word-wrap: break-word;\n        color: var(${color});\n        cursor: ${props.disabled ? 'not-allowed' : 'auto'};\n        ${truncated}\n      }\n    `;\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {customCss()}\n        {css(props.css)}\n      </style>\n      <Dynamic component={_.tag} class={cx('typography', _.class)} style={_.style}>\n        {_.children}\n      </Dynamic>\n    </>\n  );\n}\n\nexport type TypographyElement = CustomElement<TypographyProps>;\n\ncustomElement<TypographyProps>(\n  'n-typography',\n  {\n    class: void 0,\n    css: void 0,\n    type: void 0,\n    truncated: void 0,\n    tag: void 0,\n    disabled: void 0,\n    style: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        children: [...el.childNodes.values()],\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n    });\n    return <Typography {...props} />;\n  },\n);\nexport default Typography;\n"],"names":["Typography","props","baseStyle","theme","_","mergeProps","type","tag","customCss","createMemo","color","disabled","truncated","css","Dynamic","cx","class","style","children","customElement","opt","el","element","childNodes","values","createEffect","replaceChildren"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"wGAsHA,+CAAA,qBAnHwB,0BAH6B,sBAC7B,yBACM,8BAEZ,qEA0BlB,SAASA,EAAWC,CAAsB,EACxC,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CACrBC,EAAIC,GAAAA,YAAU,EAClB,CACEC,KAAM,OACNC,IAAK,MACP,EACAN,GAEIO,EAAYC,GAAAA,YAAU,EAAC,KAC3B,IAAIC,EAAQT,AAAe,cAAfA,EAAMK,IAAI,CAAmB,mBAAqB,CAAC,EAAE,EAAEL,EAAMK,IAAI,CAAC,MAAM,CAAC,AAEjFL,AAAe,CAAA,UAAfA,EAAMK,IAAI,CACZI,EAAQ,gBACCT,EAAMU,QAAQ,EACvBD,CAAAA,EAAQ,iBAAgB,EAE1B,IAAIE,EAAY,GAYhB,OAVIX,EAAMW,SAAS,EACjBA,CAAAA,EAAYC,GAAAA,KAAG,CAAA,CAAC;;;;;4BAKM,EAAE,AAA4B,UAA3B,OAAOZ,EAAMW,SAAS,EAAiBX,EAAMW,SAAS,EAAK,EAAE;MACtF,CAAC,AAAD,EAGKC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;mBAUI,EAAEH,EAAM;gBACX,EAAET,EAAMU,QAAQ,CAAG,cAAgB,OAAO;QAClD,EAAEC,EAAU;;IAEhB,CAAC,AACH,GAEA,4CAGOV,uBACAM,2BACAK,GAAAA,KAAG,EAACZ,EAAMY,GAAG,oCAEfC,SAAO,yBAAYV,EAAEG,GAAG,oBAASQ,GAAAA,IAAE,EAAC,aAAcX,EAAEY,KAAK,sBAAUZ,EAAEa,KAAK,wBACxEb,EAAEc,QAAQ,IAInB,CAIAC,GAAAA,eAAa,EACX,eACA,CACEH,MAAO,KAAK,EACZH,IAAK,KAAK,EACVP,KAAM,KAAK,EACXM,UAAW,KAAK,EAChBL,IAAK,KAAK,EACVI,SAAU,KAAK,EACfM,MAAO,KAAK,CACd,EACA,CAACb,EAAGgB,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBrB,EAAQI,GAAAA,YAAU,EACtB,CACEa,SAAU,IAAIG,EAAGE,UAAU,CAACC,MAAM,GAAG,AACvC,EACApB,GAMF,MAHAqB,GAAAA,cAAY,EAAC,KACXJ,EAAGK,eAAe,EACpB,yBACQ1B,EAAeC,EACzB,SAEF,EAAeD"}