neko-ui 2.8.21 → 2.8.23

package/lib/tabs/examples/extra.md

@@ -0,0 +1,65 @@
+---
+title: 附加内容
+description: 可以在页签两边添加附加操作
+order: 4
+---
+
+```html
+<n-tabs></n-tabs>
+<script>
+  const el = container.querySelector('n-tabs');
+
+  el.extra = {
+    left: () => {
+      const btn = document.createElement('n-button');
+
+      btn.textContent = 'Left';
+      btn.size = 'small';
+      return btn;
+    },
+    right: () => {
+      const btn = document.createElement('n-button');
+
+      btn.textContent = 'Right';
+      btn.size = 'small';
+      return btn;
+    },
+  };
+  el.items = new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i + 1,
+      label: `Tab ${i + 1}`,
+      content: () => {
+        const md = document.createElement('n-md');
+
+        md.textContent = `!> Content of Tab Pane ${i + 1}`;
+        return md;
+      },
+    };
+  });
+</script>
+```
+
+```jsx
+function Demo() {
+  const Content = (props) => {
+    return <n-md>!> Content of Tab Pane {props.idx}</n-md>;
+  };
+
+  return (
+    <n-tabs
+      extra={{
+        left: () => <n-button size="small">Left</n-button>,
+        right: () => <n-button size="small">Right</n-button>,
+      }}
+      items={new Array(3).fill(0).map((_, i) => {
+        return {
+          value: i + 1,
+          label: `Tab ${i + 1}`,
+          content: () => <Content idx={i + 1} />,
+        };
+      })}
+    />
+  );
+}
+```

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 $}});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"),a=require("./style"),o=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)("<style>"),v=(0,e.template)(`<n-button class="tab add">＋`,!0,!1),m=(0,e.template)('<div><div class="items">'),g=(0,e.template)('<div class="content">'),p=(0,e.template)(`<span class="remove">⛌`),h=(0,e.template)("<n-button>",!0,!1);function b(i){let c,b,$;let{baseStyle:_,isDark:w}=d.default,[L,C]=(0,t.createSignal)(),[E,x]=(0,t.createSignal)(""),[y,k]=(0,t.createSignal)({left:!1,right:!1}),M=(0,t.createMemo)(()=>w()?(0,l.css)`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return $}});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"),a=require("../basic-config"),o=c(require("../get-options")),s=c(require("../theme")),d=require("./style");function c(e){return e&&e.__esModule?e:{default:e}}require("../button");const u=(0,e.template)("<style> "),f=(0,e.template)("<style>"),v=(0,e.template)(`<n-button class="tab add">＋`,!0,!1),m=(0,e.template)('<div><div class="items">'),g=(0,e.template)('<div class="content">'),p=(0,e.template)(`<span class="remove">⛌`),h=(0,e.template)("<n-button>",!0,!1);function b(i){let c,b,$;let{baseStyle:_,isDark:w}=s.default,[L,C]=(0,t.createSignal)(),[E,x]=(0,t.createSignal)(""),[y,k]=(0,t.createSignal)({left:!1,right:!1}),M=(0,t.createMemo)(()=>w()?(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);
       }
-    `),q=(0,t.createMemo)(()=>Object.assign({},o.FieldName,i.fieldNames)),S=(0,t.createMemo)(()=>(0,s.default)(i.items,q())),T=(0,t.createMemo)(()=>S().find(e=>e[q().value]===L()));function W(e,t){if(!i.disabled&&!e.disabled){let r=e[q().value];void 0===i.value&&C(r),(0,n.default)(i.onChange)&&i.onChange(r,e,t)}}function j(e,t){"Enter"===t.key&&W(e,t)}function N(e,t,r){r.stopPropagation(),r.preventDefault(),(0,n.default)(i.onEdit)&&i.onEdit(e,t,r)}function O(e){if($){let n=c.offsetWidth,l=b?.offsetWidth||0,i=$.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=$.scrollLeft+t;$.scrollTo({left:n}),k({left:n>0,right:i>n+$.offsetWidth})}else k({left:!1,right:!1});let a=(0,t.untrack)(T)?.ref;x(`.tabs {--w: ${a.offsetWidth}px;--left: ${a.offsetLeft-$.scrollLeft+$.offsetLeft}px;--s:${$.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:S()[0]&&(e=S()[0][q().value]),e!==(0,t.untrack)(L)&&C(e)}),(0,t.createEffect)(()=>{let e,n;let r=T()?.ref;r?e=setTimeout(()=>{clearTimeout(e),$&&(k({left:!1,right:!1}),$.scrollTo({left:r.offsetLeft-$.offsetLeft,behavior:"smooth"})),x(`.tabs {--w: ${r.offsetWidth}px;--left: ${r.offsetLeft-$.scrollLeft+$.offsetLeft}px;--s:${$.scrollLeft}px}`),n=setTimeout(()=>{clearTimeout(n),O()},300)},0):x(""),(0,t.onCleanup)(()=>{clearTimeout(e),clearTimeout(n)})});let[P,A]=(0,t.createSignal)("slide-in");(0,t.createEffect)(()=>(i.animated&&A("slide-in"),T()?.content));let F=(0,t.createMemo)(()=>(0,n.default)(i.extra?.left)?i.extra.left():i.extra?.left),V=(0,t.createMemo)(()=>(0,n.default)(i.extra?.right)?i.extra.right():i.extra?.right),D=(0,t.createMemo)(()=>{let e=T()?.content;return(0,n.default)(e)?e():e});function X(){i.animated&&A("")}return(0,t.onMount)(()=>{c?.addEventListener("wheel",O,{passive:r.default})}),(0,t.onCleanup)(()=>{c?.removeEventListener("wheel",O,!1)}),[(()=>{let t=u(),n=t.firstChild;return(0,e.effect)(()=>n.data=_()),t})(),(()=>{let t=u(),n=t.firstChild;return(0,e.effect)(()=>n.data=M()),t})(),(()=>{let e=f();return e.textContent=a.style,e})(),(()=>{let t=u(),n=t.firstChild;return(0,e.effect)(()=>n.data=E()),t})(),(0,e.createComponent)(t.Show,{get when(){return i.css},get children(){let t=u(),n=t.firstChild;return(0,e.effect)(()=>n.data=(0,l.css)(i.css)),t}}),(()=>{let n=m(),r=c,o=n.firstChild,s=$;return"function"==typeof r?(0,e.use)(r,n):c=n,(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return F()},get children(){return F()}}),o),"function"==typeof s?(0,e.use)(s,o):$=o,(0,e.insert)(o,(0,e.createComponent)(t.For,{get each(){return S()},children:(n,r)=>{let o=(0,t.createMemo)(()=>i.disabled||n.disabled),{icon:s,value:d,label:c}=q(),u=(0,t.createMemo)(()=>void 0!==L()&&n[d]===L());return(()=>{let i=h(),d=S()[r()].ref;return"function"==typeof d?(0,e.use)(d,i):S()[r()].ref=i,(0,e.addEventListener)(i,"click",W.bind(null,n),!0),(0,e.addEventListener)(i,"keyup",j.bind(null,n),!0),i.link=!0,i.css=a.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",N.bind(null,"remove",n),!0),t}}),null),(0,e.effect)(t=>{let a=u()?"primary":"default",d=(0,l.cx)("tab",n.class),c=!!u(),f=!!(u()&&0===r()),v=o()?-1:0,m=o(),g=n[s];return a!==t._v$6&&(i.type=t._v$6=a),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=v(),n=b;return(0,e.addEventListener)(t,"click",N.bind(null,"add",void 0),!0),"function"==typeof n?(0,e.use)(n,t):b=t,t.link=!0,t.css=a.addCss,t._$owner=(0,e.getOwner)(),t}}),null),(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return V()},get children(){return V()}}),null),(0,e.effect)(t=>{let r=(0,l.cx)("tabs",i.type,i.class),a=!!i.centered,s=i.disabled,d=!!y().left,c=!!y().right;return r!==t._v$&&(0,e.className)(n,t._v$=r),a!==t._v$2&&n.classList.toggle("centered",t._v$2=a),s!==t._v$3&&(0,e.setAttribute)(n,"aria-disabled",t._v$3=s),d!==t._v$4&&o.classList.toggle("warp-left",t._v$4=d),c!==t._v$5&&o.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 T()?.content},get children(){let t=g();return(0,e.addEventListener)(t,"animationend",X),(0,e.insert)(t,D),(0,e.effect)(n=>(0,e.classList)(t,{[P()]: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 $=b;(0,e.delegateEvents)(["click","keyup"]);
+    `),q=(0,t.createMemo)(()=>Object.assign({},a.FieldName,i.fieldNames)),S=(0,t.createMemo)(()=>(0,o.default)(i.items,q())),T=(0,t.createMemo)(()=>S().find(e=>e[q().value]===L()));function W(e,t){if(!i.disabled&&!e.disabled){let r=e[q().value];void 0===i.value&&C(r),(0,n.default)(i.onChange)&&i.onChange(r,e,t)}}function j(e,t){"Enter"===t.key&&W(e,t)}function N(e,t,r){r.stopPropagation(),r.preventDefault(),(0,n.default)(i.onEdit)&&i.onEdit(e,t,r)}function O(e){if($){let n=c.offsetWidth,l=b?.offsetWidth||0,i=$.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=$.scrollLeft+t;$.scrollTo({left:n}),k({left:n>0,right:i>n+$.offsetWidth})}else k({left:!1,right:!1});let a=(0,t.untrack)(T)?.ref;x(`.tabs {--w: ${a.offsetWidth}px;--left: ${a.offsetLeft-$.scrollLeft+$.offsetLeft}px;--s:${$.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:S()[0]&&(e=S()[0][q().value]),e!==(0,t.untrack)(L)&&C(e)}),(0,t.createEffect)(()=>{let e,n;let r=T()?.ref;r?e=setTimeout(()=>{clearTimeout(e),$&&(k({left:!1,right:!1}),$.scrollTo({left:r.offsetLeft-$.offsetLeft,behavior:"smooth"})),x(`.tabs {--w: ${r.offsetWidth}px;--left: ${r.offsetLeft-$.scrollLeft+$.offsetLeft}px;--s:${$.scrollLeft}px}`),n=setTimeout(()=>{clearTimeout(n),O()},300)},0):x(""),(0,t.onCleanup)(()=>{clearTimeout(e),clearTimeout(n)})});let[P,A]=(0,t.createSignal)("slide-in");(0,t.createEffect)(()=>(i.animated&&A("slide-in"),T()?.content));let F=(0,t.createMemo)(()=>(0,n.default)(i.extra?.left)?i.extra.left():i.extra?.left),V=(0,t.createMemo)(()=>(0,n.default)(i.extra?.right)?i.extra.right():i.extra?.right),D=(0,t.createMemo)(()=>{let e=T()?.content;return(0,n.default)(e)?e():e});function X(){i.animated&&A("")}return(0,t.onMount)(()=>{c?.addEventListener("wheel",O,{passive:r.default})}),(0,t.onCleanup)(()=>{c?.removeEventListener("wheel",O,!1)}),[(()=>{let t=u(),n=t.firstChild;return(0,e.effect)(()=>n.data=_()),t})(),(()=>{let t=u(),n=t.firstChild;return(0,e.effect)(()=>n.data=M()),t})(),(()=>{let e=f();return e.textContent=d.style,e})(),(()=>{let t=u(),n=t.firstChild;return(0,e.effect)(()=>n.data=E()),t})(),(0,e.createComponent)(t.Show,{get when(){return i.css},get children(){let t=u(),n=t.firstChild;return(0,e.effect)(()=>n.data=(0,l.css)(i.css)),t}}),(()=>{let n=m(),r=c,a=n.firstChild,o=$;return"function"==typeof r?(0,e.use)(r,n):c=n,(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return F()},get children(){return F()}}),a),"function"==typeof o?(0,e.use)(o,a):$=a,(0,e.insert)(a,(0,e.createComponent)(t.For,{get each(){return S()},children:(n,r)=>{let a=(0,t.createMemo)(()=>i.disabled||n.disabled),{icon:o,value:s,label:c}=q(),u=(0,t.createMemo)(()=>void 0!==L()&&n[s]===L());return(()=>{let i=h(),s=S()[r()].ref;return"function"==typeof s?(0,e.use)(s,i):S()[r()].ref=i,(0,e.addEventListener)(i,"click",W.bind(null,n),!0),(0,e.addEventListener)(i,"keyup",j.bind(null,n),!0),i.link=!0,i.css=d.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",N.bind(null,"remove",n),!0),t}}),null),(0,e.effect)(t=>{let s=u()?"primary":"default",d=(0,l.cx)("tab",n.class),c=!!u(),f=!!(u()&&0===r()),v=a()?-1:0,m=a(),g=n[o];return s!==t._v$6&&(i.type=t._v$6=s),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=v(),n=b;return(0,e.addEventListener)(t,"click",N.bind(null,"add",void 0),!0),"function"==typeof n?(0,e.use)(n,t):b=t,t.link=!0,t.css=d.addCss,t._$owner=(0,e.getOwner)(),t}}),null),(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return V()},get children(){return V()}}),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 T()?.content},get children(){let t=g();return(0,e.addEventListener)(t,"animationend",X),(0,e.insert)(t,D),(0,e.effect)(n=>(0,e.classList)(t,{[P()]: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 $=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  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 textContent={baseStyle()} />\n      <style textContent={cssVar()} />\n      <style textContent={style} />\n      <style textContent={offsetStyle()} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\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"],"mappings":"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"}
+{"version":3,"sources":["../../components/tabs/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  For,\n  mergeProps,\n  onCleanup,\n  onMount,\n  Show,\n  untrack,\n} from 'solid-js';\nimport { isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BaseOption, BasicConfig, ButtonElement, CustomElement } from '..';\nimport { FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme from '../theme';\n\nimport { addCss, btnCss, style } from './style';\n\nimport '../button';\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 textContent={baseStyle()} />\n      <style textContent={cssVar()} />\n      <style textContent={style} />\n      <style textContent={offsetStyle()} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\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"],"mappings":"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"}

package/lib/tag/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 通用
+title: 标签
+subtitle: n-tag
+icon: 🏷️
+---
+
+# Tag 标签
+
+> 进行标记和分类的小标签。

package/lib/tag/examples/basic.md

@@ -0,0 +1,28 @@
+---
+title: 基本使用
+description: 基本标签的用法，可以通过设置 `close-icon` 变为可关闭标签并自定义关闭按钮，设置为 true 时将使用默认关闭按钮
+order: 1
+---
+
+```html
+<n-tag>Tag 1</n-tag>
+<n-tag close-icon="true">Close</n-tag>
+<n-tag>Custom Close</n-tag>
+<script>
+  const el = container.querySelectorAll('n-tag');
+
+  el[2].closeIcon = () => {
+    const icon = document.createElement('span');
+    icon.textContent = '⊖';
+    return icon;
+  };
+</script>
+```
+
+```jsx
+<n-tag>Tag 1</n-tag>
+<n-tag close-icon={true}>Prevent Default</n-tag>
+<n-tag close-icon={() => <span>⊖</span>}>
+  Tag 2
+</n-tag>
+```

package/lib/tag/examples/bordered.md

@@ -0,0 +1,19 @@
+---
+title: 无边框
+description: 无边框模式。
+order: 5
+---
+
+```html
+<n-tag bordered="false" type="primary">primary</n-tag>
+<n-tag bordered="false" color="purple">purple</n-tag>
+<n-tag bordered="false" color="#f50">#f50</n-tag>
+<n-tag bordered="false" color="green">green</n-tag>
+```
+
+```jsx
+<n-tag bordered={false} type="primary">primary</n-tag>
+<n-tag bordered={false} color="purple">purple</n-tag>
+<n-tag bordered={false} color="#f50">#f50</n-tag>
+<n-tag bordered={false} color="green">green</n-tag>
+```

package/lib/tag/examples/color.md

@@ -0,0 +1,25 @@
+---
+title: 自定义色彩
+description: 通过 `color` 设置色彩
+order: 2
+---
+
+```html
+<n-tag color="blue">blue</n-tag>
+<n-tag color="red">red</n-tag>
+<n-tag color="purple">purple</n-tag>
+<n-tag color="magenta">magenta</n-tag>
+<n-tag color="black">black</n-tag>
+<n-tag color="#f50">#f50</n-tag>
+<n-tag color="green">green</n-tag>
+```
+
+```jsx
+<n-tag color="blue">blue</n-tag>
+<n-tag color="red">red</n-tag>
+<n-tag color="purple">purple</n-tag>
+<n-tag color="magenta">magenta</n-tag>
+<n-tag color="black">black</n-tag>
+<n-tag color="#f50">#f50</n-tag>
+<n-tag color="green">green</n-tag>
+```

package/lib/tag/examples/icon.md

@@ -0,0 +1,21 @@
+---
+title: 图标
+description: 通过 `icon` 在文本前添加一个图标
+order: 4
+---
+
+```html
+<n-tag icon="⎋">Default</n-tag>
+<n-tag icon="⌥" type="primary">Primary</n-tag>
+<n-tag icon="⌘" type="warning">Warning</n-tag>
+<n-tag icon="♼" type="success">Success</n-tag>
+<n-tag icon="⚾" type="error">Error</n-tag>
+```
+
+```jsx
+<n-tag icon="⎋">Default</n-tag>
+<n-tag icon="⌥" type="primary">Primary</n-tag>
+<n-tag icon="⌘" type="warning">Warning</n-tag>
+<n-tag icon="♼" type="success">Success</n-tag>
+<n-tag icon="⚾" type="error">Error</n-tag>
+```

package/lib/tag/examples/type.md

@@ -0,0 +1,19 @@
+---
+title: 预设类型
+description: 通过 `type` 更改预设色彩的标签样式
+order: 3
+---
+
+```html
+<n-tag close-icon="true" type="primary">primary</n-tag>
+<n-tag close-icon="true" type="warning">warning</n-tag>
+<n-tag close-icon="true" type="success">success</n-tag>
+<n-tag close-icon="true" type="error">error</n-tag>
+```
+
+```jsx
+<n-tag close-icon={true} type="primary">primary</n-tag>
+<n-tag close-icon={true} type="warning">warning</n-tag>
+<n-tag close-icon={true} type="success">success</n-tag>
+<n-tag close-icon={true} type="error">error</n-tag>
+```

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 g}});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"),s=require("solid-element"),l=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 s in e)if("default"!==s&&Object.prototype.hasOwnProperty.call(e,s)){var l=o?Object.getOwnPropertyDescriptor(e,s):null;l&&(l.get||l.set)?Object.defineProperty(n,s,l):n[s]=e[s]}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 a=(0,t.template)("<style> "),u=(0,t.template)("<style>"),d=(0,t.template)('<span class="icon">'),p=(0,t.template)('<span class="close">'),f=(0,t.template)("<span>");function m(e){let{baseStyle:s,isDark:i}=c.default,[m,g]=(0,r.splitProps)(e,["class","css","onClose","color","icon","closeIcon","bordered","type","disabled"]),[h,v]=(0,r.createSignal)(!0),b=(0,r.createMemo)(()=>m.color?(0,o.css)`
+"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return g}});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"),s=require("solid-element"),l=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 s in e)if("default"!==s&&Object.prototype.hasOwnProperty.call(e,s)){var l=o?Object.getOwnPropertyDescriptor(e,s):null;l&&(l.get||l.set)?Object.defineProperty(n,s,l):n[s]=e[s]}return n.default=e,r&&r.set(e,n),n}(require("../theme")),c=require("./style");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 a=(0,t.template)("<style> "),u=(0,t.template)("<style>"),d=(0,t.template)('<span class="icon">'),p=(0,t.template)('<span class="close">'),f=(0,t.template)("<span>");function m(e){let{baseStyle:s,isDark:i}=l.default,[m,g]=(0,r.splitProps)(e,["class","css","onClose","color","icon","closeIcon","bordered","type","disabled"]),[h,v]=(0,r.createSignal)(!0),b=(0,r.createMemo)(()=>m.color?(0,o.css)`
         :host {
-          ${(0,c.generateColor)(m.color,{dark:i(),name:"tag-custom"})}
+          ${(0,l.generateColor)(m.color,{dark:i(),name:"tag-custom"})}
         }
-      `:"");function y(e){(0,n.default)(m.onClose)&&m.onClose(e),v(!1)}return(0,t.createComponent)(r.Show,{get when(){return h()},get children(){return[(()=>{let e=a(),r=e.firstChild;return(0,t.effect)(()=>r.data=s()),e})(),(()=>{let e=a(),r=e.firstChild;return(0,t.effect)(()=>r.data=b()),e})(),(()=>{let e=u();return e.textContent=l.style,e})(),(0,t.createComponent)(r.Show,{get when(){return m.css},get children(){let e=a(),r=e.firstChild;return(0,t.effect)(()=>r.data=(0,o.css)(m.css)),e}}),(()=>{let e=f();return(0,t.spread)(e,(0,t.mergeProps)(g,{get class(){return(0,o.cx)("tag",m.type)},get classList(){return{"tag-custom":!!m.color,bordered:m.bordered,disabled:m.disabled}}}),!1,!0),(0,t.insert)(e,(0,t.createComponent)(r.Show,{get when(){return m.icon},get children(){let e=d();return(0,t.insert)(e,()=>m.icon),e}}),null),(0,t.insert)(e,()=>g.children,null),(0,t.insert)(e,(0,t.createComponent)(r.Show,{get when(){return m.closeIcon},get children(){let e=p();return(0,t.addEventListener)(e,"click",y,!0),(0,t.insert)(e,()=>!0===m.closeIcon?"⛌":m.closeIcon),e}}),null),e})()]}})}(0,s.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,s=(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)(m,s)});const g=m;(0,t.delegateEvents)(["click"]);
+      `:"");function y(e){(0,n.default)(m.onClose)&&m.onClose(e),v(!1)}return(0,t.createComponent)(r.Show,{get when(){return h()},get children(){return[(()=>{let e=a(),r=e.firstChild;return(0,t.effect)(()=>r.data=s()),e})(),(()=>{let e=a(),r=e.firstChild;return(0,t.effect)(()=>r.data=b()),e})(),(()=>{let e=u();return e.textContent=c.style,e})(),(0,t.createComponent)(r.Show,{get when(){return m.css},get children(){let e=a(),r=e.firstChild;return(0,t.effect)(()=>r.data=(0,o.css)(m.css)),e}}),(()=>{let e=f();return(0,t.spread)(e,(0,t.mergeProps)(g,{get class(){return(0,o.cx)("tag",m.type)},get classList(){return{"tag-custom":!!m.color,bordered:m.bordered,disabled:m.disabled}}}),!1,!0),(0,t.insert)(e,(0,t.createComponent)(r.Show,{get when(){return m.icon},get children(){let e=d();return(0,t.insert)(e,()=>m.icon),e}}),null),(0,t.insert)(e,()=>g.children,null),(0,t.insert)(e,(0,t.createComponent)(r.Show,{get when(){return m.closeIcon},get children(){let e=p();return(0,t.addEventListener)(e,"click",y,!0),(0,t.insert)(e,()=>!0===m.closeIcon?"⛌":m.closeIcon),e}}),null),e})()]}})}(0,s.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,s=(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)(m,s)});const g=m;(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 { 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 textContent={baseStyle()} />\n      <style textContent={customColor()} />\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\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"],"mappings":"wGA4IA,+CAAA,+CA5IqF,yBAC1D,wEACH,yBACM,2BACR,ieACe,uTA2BrC,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,wFACUN,wEACAS,gDACAW,OAAK,6BACxBD,MAAI,oBAAOhB,EAAMS,GAAG,wEACCA,GAAAA,KAAG,EAACT,EAAMS,GAAG,8DAG7BR,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"}
+{"version":3,"sources":["../../components/tag/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, mergeProps, Show, splitProps } from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport theme, { generateColor } from '../theme';\n\nimport { style } from './style';\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 textContent={baseStyle()} />\n      <style textContent={customColor()} />\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\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"],"mappings":"wGA8IA,+CAAA,+CA9IqF,yBAC1D,wEACH,yBACM,ueAGO,uBAEf,qTA0BtB,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,wFACUN,wEACAS,gDACAW,OAAK,6BACxBD,MAAI,oBAAOhB,EAAMS,GAAG,wEACCA,GAAAA,KAAG,EAACT,EAAMS,GAAG,8DAG7BR,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/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 全局
+title: 动态配色
+subtitle: theme & generateColor
+icon: 👅
+---
+
+# 共享颜色方案
+
+> 根据浏览器首选颜色方案媒体查询的变化自动更新颜色的方案

package/lib/theme/examples/colors.md

@@ -0,0 +1,123 @@
+---
+title: 调色板、生成、设置主题色
+description: 通过传入一个基础色生成出主题色调
+order: 1
+col: 100%
+---
+
+```jsx
+const { dark, setDark, light, setLight } = NekoUI.theme;
+
+function getTextColor(colors) {
+  return {
+    0: colors['100'],
+    1: colors['90'],
+    2: colors['90'],
+    3: colors['95'],
+    4: colors['95'],
+    5: colors['99'],
+    6: colors['99'],
+    7: colors['30'],
+    8: colors['30'],
+    9: colors['20'],
+    10: colors['20'],
+    11: colors['10'],
+    12: colors['5'],
+    13: colors['5'],
+    14: colors['0'],
+  };
+}
+
+function Item({ name, isDark }) {
+  const color = createMemo(() => (isDark ? dark() : light())[name]);
+  const colors = createMemo(() => NekoUI.toneColor(color(), isDark));
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        'align-items': 'center',
+        'flex-wrap': 'wrap',
+        width: '100%',
+        'font-size': '8px',
+        'font-weight': 100,
+        'text-align': 'center',
+      }}
+    >
+      <strong
+        style={{
+          width: '30px',
+          'text-align': 'right',
+          'margin-right': '8px',
+          color: `var(--${name}-color)`,
+        }}
+      >
+        {name}:
+      </strong>
+      <n-color-picker
+        style={{ 'margin-right': '8px' }}
+        value={color()}
+        onChange={(e) => {
+          if (isDark) {
+            setDark((prev) => {
+              return { ...prev, [name]: e.detail };
+            });
+          } else {
+            setLight((prev) => {
+              return { ...prev, [name]: e.detail };
+            });
+          }
+          e.target.value = e.detail;
+        }}
+      />
+      {Object.keys(colors()).slice(1,-1).map((c, i) => {
+        let item;
+        createEffect(() => {
+          item.style.backgroundColor = colors()[c];
+          item.style.color = getTextColor(colors())[i];
+        });
+        return (
+          <div
+            ref={(e) => (item = e)}
+            class="item"
+            style={{
+              flex: 1,
+              padding: '4px',
+            }}
+          >
+            <div>{c}</div>
+            <div>{colors()[c]}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+render(
+  <>
+    {['#fff', '#000'].map((c) => {
+      const dark = c === '#000';
+
+      return (
+        <div
+          style={{
+            display: 'flex',
+            'flex-direction': 'column',
+            padding: '8px',
+            'margin-bottom': '16px',
+            width: '100%',
+            'background-color': c,
+            'overflow-x': 'auto',
+          }}
+        >
+          <Item name="primary" isDark={dark} />
+          <Item name="warning" isDark={dark} />
+          <Item name="error" isDark={dark} />
+          <Item name="success" isDark={dark} />
+        </div>
+      );
+    })}
+  </>
+);
+```

package/lib/theme/examples/theme.md

@@ -0,0 +1,19 @@
+---
+title: 切换颜色模式
+description: 通过传入一个基础色生成出主题色调
+order: 2
+col: 100%
+---
+
+```jsx
+function Demo() {
+  const { isDark, scheme, setScheme } = NekoUI.theme;
+  function handleChange(e) {
+    setScheme(e.detail ? 'dark' : 'light');
+  }
+
+  return (
+    <n-switch checked={isDark()} onChange={handleChange} un-checked-text="🌞" checked-text="🌛" />
+  );
+}
+```

package/lib/theme/index.js

@@ -1,2 +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},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"]):not(n-img)':{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)());
+"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"]):not(n-img)':{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