neko-ui 2.8.21 → 2.8.23

package/lib/carousel/examples/dots.md

@@ -0,0 +1,23 @@
+---
+title: 指示器
+description: 显示当前位置
+order: 3
+---
+
+```html
+<n-carousel dots="true">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</n-carousel>
+```
+
+```jsx
+<n-carousel dots>
+  {Array(100)
+    .fill(0)
+    .map((_, i) => {
+      return <div>100 / {i + 1}</div>;
+    })}
+</n-carousel>
+```

package/lib/carousel/examples/header.md

@@ -0,0 +1,38 @@
+---
+title: 添加头部
+order: 4
+---
+
+```html
+<n-carousel dots="true">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</n-carousel>
+<script>
+  const el = container.querySelector('n-carousel');
+  el.header = function (current) {
+    const header = document.createElement('div');
+    header.style.padding = '16px';
+    header.innerHTML = '3 / ' + (current + 1);
+    return header;
+  };
+</script>
+```
+
+```jsx
+const list = Array(10000)
+  .fill(0)
+  .map((_, i) => <div>10000 / {i + 1}</div>);
+
+render(
+  <n-carousel
+    dots
+    header={() => (num: number) => {
+      return <div style="padding: 16px;">10000 / {num + 1}</div>;
+    }}
+  >
+    {list}
+  </n-carousel>
+);
+```

package/lib/carousel/index.js

@@ -1,2 +1,2 @@
-"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"),n=s(require("@moneko/common/lib/isFunction")),r=require("@moneko/css"),l=require("solid-element"),i=require("./style"),a=s(require("../theme"));function s(e){return e&&e.__esModule?e:{default:e}}const o=(0,e.template)("<style> "),c=(0,e.template)("<style>"),d=(0,e.template)('<section class="header">'),u=(0,e.template)('<div class="dots">'),f=(0,e.template)('<section><section class="list"><div class="item"></div><div class="item"></div><div class="item"></div></section><slot name="header"></slot><div class="prev"></div><div class="next">'),v=(0,e.template)('<i class="dot">');function h(l){let s;let{baseStyle:h}=a.default,m=(0,t.mergeProps)({autoplay:-1,children:[]},l),[g,p]=(0,t.createSignal)(0),[C,b]=(0,t.createSignal)(1),[E,S]=(0,t.createSignal)(0),[x,_]=(0,t.createSignal)(0);function w(){let e=x();-1===e?S(g()):1===e&&S(C()),_(0),(0,n.default)(m.onChange)&&m.onChange(E())}function y(){_(-1)}function q(){_(1)}function $(e,t){t.stopPropagation();let n=E(),r=20*Math.floor(n/20)+e;r>n?(_(1),b(r)):r<n&&(_(-1),p(r))}let k=(0,t.createMemo)(()=>[...m.children]),M=(0,t.createMemo)(()=>Array(k().length>20?20:k().length).fill(null));(0,t.createEffect)(()=>{void 0!==m.offset&&S(Number(m.offset))}),(0,t.createEffect)(()=>{var e,t;let n,r;let[l,i]=(e=E(),t=k(),n=e-1,r=e+1,n<0&&(n=t.length-1),r>t.length-1&&(r=0),[n,r]);p(l),b(i)}),(0,t.createEffect)(()=>{clearInterval(s);let e=Number(m.autoplay);e>0&&(s=setInterval(()=>{e<1&&clearInterval(s),q()},e))}),(0,t.onCleanup)(()=>{clearInterval(s)});let I=(0,t.createMemo)(()=>(0,n.default)(m.header)?m.header(E()):m.header);return[(()=>{let t=o(),n=t.firstChild;return(0,e.effect)(()=>n.data=h()),t})(),(()=>{let e=c();return e.textContent=i.style,e})(),(0,e.createComponent)(t.Show,{get when(){return m.css},get children(){let t=o(),n=t.firstChild;return(0,e.effect)(()=>n.data=(0,r.css)(m.css)),t}}),(()=>{let n=f(),l=n.firstChild,i=l.firstChild,a=i.nextSibling,s=a.nextSibling,o=l.nextSibling,c=o.nextSibling,h=c.nextSibling;return(0,e.insert)(i,()=>k()[g()]),(0,e.addEventListener)(a,"animationend",w),(0,e.insert)(a,()=>k()[E()]),(0,e.insert)(s,()=>k()[C()]),o._$owner=(0,e.getOwner)(),(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return I()},get children(){let t=d();return(0,e.insert)(t,I),t}}),c),(0,e.addEventListener)(c,"click",y,!0),(0,e.addEventListener)(h,"click",q,!0),(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return m.dots},get children(){let n=u();return(0,e.insert)(n,(0,e.createComponent)(t.Index,{get each(){return M()},children:(t,n)=>(()=>{let t=v();return(0,e.addEventListener)(t,"click",$.bind(null,n),!0),(0,e.effect)(()=>t.classList.toggle("active",!(n!==E()%20+x()))),t})()})),n}}),null),(0,e.effect)(t=>{let i=(0,r.cx)("carousel",m.class),a=x();return i!==t._v$&&(0,e.className)(n,t._v$=i),a!==t._v$2&&(0,e.setAttribute)(l,"data-dir",t._v$2=a),t},{_v$:void 0,_v$2:void 0}),n})()]}(0,l.customElement)("n-carousel",{children:void 0,autoplay:void 0,class:void 0,css:void 0,offset:void 0,dots:void 0,header:void 0,onChange:void 0},(n,r)=>{let l=r.element,i=(0,t.mergeProps)({onChange(e){l.offset=e,l.dispatchEvent(new CustomEvent("change",{detail:e}))}},n);return(0,t.createEffect)(()=>{l.replaceChildren()}),(0,e.createComponent)(h,i)});const m=h;(0,e.delegateEvents)(["click"]);
+"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"),n=s(require("@moneko/common/lib/isFunction")),r=require("@moneko/css"),l=require("solid-element"),i=s(require("../theme")),a=require("./style");function s(e){return e&&e.__esModule?e:{default:e}}const o=(0,e.template)("<style> "),c=(0,e.template)("<style>"),d=(0,e.template)('<section class="header">'),u=(0,e.template)('<div class="dots">'),f=(0,e.template)('<section><section class="list"><div class="item"></div><div class="item"></div><div class="item"></div></section><slot name="header"></slot><div class="prev"></div><div class="next">'),v=(0,e.template)('<i class="dot">');function h(l){let s;let{baseStyle:h}=i.default,m=(0,t.mergeProps)({autoplay:-1,children:[]},l),[g,p]=(0,t.createSignal)(0),[C,b]=(0,t.createSignal)(1),[E,S]=(0,t.createSignal)(0),[x,_]=(0,t.createSignal)(0);function w(){let e=x();-1===e?S(g()):1===e&&S(C()),_(0),(0,n.default)(m.onChange)&&m.onChange(E())}function y(){_(-1)}function q(){_(1)}function $(e,t){t.stopPropagation();let n=E(),r=20*Math.floor(n/20)+e;r>n?(_(1),b(r)):r<n&&(_(-1),p(r))}let k=(0,t.createMemo)(()=>[...m.children]),M=(0,t.createMemo)(()=>Array(k().length>20?20:k().length).fill(null));(0,t.createEffect)(()=>{void 0!==m.offset&&S(Number(m.offset))}),(0,t.createEffect)(()=>{var e,t;let n,r;let[l,i]=(e=E(),t=k(),n=e-1,r=e+1,n<0&&(n=t.length-1),r>t.length-1&&(r=0),[n,r]);p(l),b(i)}),(0,t.createEffect)(()=>{clearInterval(s);let e=Number(m.autoplay);e>0&&(s=setInterval(()=>{e<1&&clearInterval(s),q()},e))}),(0,t.onCleanup)(()=>{clearInterval(s)});let I=(0,t.createMemo)(()=>(0,n.default)(m.header)?m.header(E()):m.header);return[(()=>{let t=o(),n=t.firstChild;return(0,e.effect)(()=>n.data=h()),t})(),(()=>{let e=c();return e.textContent=a.style,e})(),(0,e.createComponent)(t.Show,{get when(){return m.css},get children(){let t=o(),n=t.firstChild;return(0,e.effect)(()=>n.data=(0,r.css)(m.css)),t}}),(()=>{let n=f(),l=n.firstChild,i=l.firstChild,a=i.nextSibling,s=a.nextSibling,o=l.nextSibling,c=o.nextSibling,h=c.nextSibling;return(0,e.insert)(i,()=>k()[g()]),(0,e.addEventListener)(a,"animationend",w),(0,e.insert)(a,()=>k()[E()]),(0,e.insert)(s,()=>k()[C()]),o._$owner=(0,e.getOwner)(),(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return I()},get children(){let t=d();return(0,e.insert)(t,I),t}}),c),(0,e.addEventListener)(c,"click",y,!0),(0,e.addEventListener)(h,"click",q,!0),(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return m.dots},get children(){let n=u();return(0,e.insert)(n,(0,e.createComponent)(t.Index,{get each(){return M()},children:(t,n)=>(()=>{let t=v();return(0,e.addEventListener)(t,"click",$.bind(null,n),!0),(0,e.effect)(()=>t.classList.toggle("active",!(n!==E()%20+x()))),t})()})),n}}),null),(0,e.effect)(t=>{let i=(0,r.cx)("carousel",m.class),a=x();return i!==t._v$&&(0,e.className)(n,t._v$=i),a!==t._v$2&&(0,e.setAttribute)(l,"data-dir",t._v$2=a),t},{_v$:void 0,_v$2:void 0}),n})()]}(0,l.customElement)("n-carousel",{children:void 0,autoplay:void 0,class:void 0,css:void 0,offset:void 0,dots:void 0,header:void 0,onChange:void 0},(n,r)=>{let l=r.element,i=(0,t.mergeProps)({onChange(e){l.offset=e,l.dispatchEvent(new CustomEvent("change",{detail:e}))}},n);return(0,t.createEffect)(()=>{l.replaceChildren()}),(0,e.createComponent)(h,i)});const m=h;(0,e.delegateEvents)(["click"]);
 //# sourceMappingURL=index.js.map

package/lib/carousel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/carousel/index.tsx"],"sourcesContent":["import {\n  Index,\n  Show,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\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 from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface CarouselProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 轮播的内容 */\n  children?: JSX.Element[];\n  /** 当前内容的位置\n   * @default 0\n   */\n  offset?: number;\n  /** 开启指示器 */\n  dots?: boolean;\n  /** 设置自动播放时长, 不设置时不自动播放 */\n  autoplay?: number;\n  /** 自定义头部 */\n  header?: (current: number) => JSX.Element | ((current: number) => JSX.Element);\n  /** 切换显示的位置时的回调方法 */\n  onChange?: (e: number) => void;\n}\nexport type CarouselElement = CustomElement<CarouselProps>;\n\nfunction Carousel(_props: CarouselProps) {\n  const { baseStyle } = theme;\n  const props = mergeProps({ autoplay: -1, children: [] }, _props);\n  const [left, setLeft] = createSignal(0);\n  const [right, setRight] = createSignal(1);\n  const [offset, setOffset] = createSignal(0);\n  const [direction, setDirection] = createSignal<1 | -1 | 0>(0);\n  let playTimer: NodeJS.Timeout | undefined;\n\n  function onOffsetChange() {\n    const _dir = direction();\n\n    if (_dir === -1) {\n      setOffset(left());\n    } else if (_dir === 1) {\n      setOffset(right());\n    }\n    setDirection(0);\n    if (isFunction(props.onChange)) {\n      props.onChange(offset());\n    }\n  }\n  function handlePrev() {\n    setDirection(-1);\n  }\n  function handleNext() {\n    setDirection(1);\n  }\n  function handleDot(idx: number, e: Event) {\n    e.stopPropagation();\n    const _offset = offset();\n    const _current = Math.floor(_offset / 20) * 20 + idx;\n\n    if (_current > _offset) {\n      setDirection(1);\n      setRight(_current);\n    } else if (_current < _offset) {\n      setDirection(-1);\n      setLeft(_current);\n    }\n  }\n  function getPrevNext(idx: number, arr: JSX.Element[]) {\n    let _prev = idx - 1,\n      _next = idx + 1;\n\n    if (_prev < 0) {\n      _prev = arr.length - 1;\n    }\n    if (_next > arr.length - 1) {\n      _next = 0;\n    }\n    return [_prev, _next];\n  }\n  const list = createMemo(() => [...props.children]);\n  const dotLen = createMemo(() => Array(list().length > 20 ? 20 : list().length).fill(null));\n\n  createEffect(() => {\n    if (props.offset !== void 0) {\n      setOffset(Number(props.offset));\n    }\n  });\n  createEffect(() => {\n    const [_prev, _next] = getPrevNext(offset(), list());\n\n    setLeft(_prev);\n    setRight(_next);\n  });\n  createEffect(() => {\n    clearInterval(playTimer);\n    const autoplay = Number(props.autoplay);\n\n    if (autoplay > 0) {\n      playTimer = setInterval(() => {\n        if (autoplay < 1) {\n          clearInterval(playTimer);\n        }\n        handleNext();\n      }, autoplay);\n    }\n  });\n\n  onCleanup(() => {\n    clearInterval(playTimer);\n  });\n  const header = createMemo(() =>\n    isFunction(props.header) ? props.header(offset()) : props.header,\n  );\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <section class={cx('carousel', props.class)}>\n        <section class=\"list\" data-dir={direction()}>\n          <div class=\"item\">{list()[left()]}</div>\n          <div class=\"item\" onAnimationEnd={onOffsetChange}>\n            {list()[offset()]}\n          </div>\n          <div class=\"item\">{list()[right()]}</div>\n        </section>\n        <slot name=\"header\" />\n        <Show when={header()}>\n          <section class=\"header\">{header()}</section>\n        </Show>\n        <div class=\"prev\" onClick={handlePrev} />\n        <div class=\"next\" onClick={handleNext} />\n        <Show when={props.dots}>\n          <div class=\"dots\">\n            <Index each={dotLen()}>\n              {(_, idx) => {\n                return (\n                  <i\n                    class=\"dot\"\n                    classList={{\n                      active: idx === (offset() % 20) + direction(),\n                    }}\n                    onClick={handleDot.bind(null, idx)}\n                  />\n                );\n              }}\n            </Index>\n          </div>\n        </Show>\n      </section>\n    </>\n  );\n}\n\ncustomElement<CarouselProps>(\n  'n-carousel',\n  {\n    children: void 0,\n    autoplay: void 0,\n    class: void 0,\n    css: void 0,\n    offset: void 0,\n    dots: void 0,\n    header: void 0,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(key: number) {\n          el.offset = key;\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: key,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n    });\n    return <Carousel {...props} />;\n  },\n);\nexport default Carousel;\n"],"names":["Carousel","_props","playTimer","baseStyle","theme","props","mergeProps","autoplay","children","left","setLeft","createSignal","right","setRight","offset","setOffset","direction","setDirection","onOffsetChange","_dir","isFunction","onChange","handlePrev","handleNext","handleDot","idx","e","stopPropagation","_offset","_current","Math","floor","list","createMemo","dotLen","Array","length","fill","createEffect","Number","arr","_prev","_next","clearInterval","setInterval","onCleanup","header","style","Show","css","dots","Index","_","bind","cx","class","customElement","opt","el","element","key","dispatchEvent","CustomEvent","detail","replaceChildren"],"mappings":"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"}
+{"version":3,"sources":["../../components/carousel/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  Index,\n  mergeProps,\n  onCleanup,\n  Show,\n} 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 from '../theme';\n\nimport { style } from './style';\n\nexport interface CarouselProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 轮播的内容 */\n  children?: JSX.Element[];\n  /** 当前内容的位置\n   * @default 0\n   */\n  offset?: number;\n  /** 开启指示器 */\n  dots?: boolean;\n  /** 设置自动播放时长, 不设置时不自动播放 */\n  autoplay?: number;\n  /** 自定义头部 */\n  header?: (current: number) => JSX.Element | ((current: number) => JSX.Element);\n  /** 切换显示的位置时的回调方法 */\n  onChange?: (e: number) => void;\n}\nexport type CarouselElement = CustomElement<CarouselProps>;\n\nfunction Carousel(_props: CarouselProps) {\n  const { baseStyle } = theme;\n  const props = mergeProps({ autoplay: -1, children: [] }, _props);\n  const [left, setLeft] = createSignal(0);\n  const [right, setRight] = createSignal(1);\n  const [offset, setOffset] = createSignal(0);\n  const [direction, setDirection] = createSignal<1 | -1 | 0>(0);\n  let playTimer: NodeJS.Timeout | undefined;\n\n  function onOffsetChange() {\n    const _dir = direction();\n\n    if (_dir === -1) {\n      setOffset(left());\n    } else if (_dir === 1) {\n      setOffset(right());\n    }\n    setDirection(0);\n    if (isFunction(props.onChange)) {\n      props.onChange(offset());\n    }\n  }\n  function handlePrev() {\n    setDirection(-1);\n  }\n  function handleNext() {\n    setDirection(1);\n  }\n  function handleDot(idx: number, e: Event) {\n    e.stopPropagation();\n    const _offset = offset();\n    const _current = Math.floor(_offset / 20) * 20 + idx;\n\n    if (_current > _offset) {\n      setDirection(1);\n      setRight(_current);\n    } else if (_current < _offset) {\n      setDirection(-1);\n      setLeft(_current);\n    }\n  }\n  function getPrevNext(idx: number, arr: JSX.Element[]) {\n    let _prev = idx - 1,\n      _next = idx + 1;\n\n    if (_prev < 0) {\n      _prev = arr.length - 1;\n    }\n    if (_next > arr.length - 1) {\n      _next = 0;\n    }\n    return [_prev, _next];\n  }\n  const list = createMemo(() => [...props.children]);\n  const dotLen = createMemo(() => Array(list().length > 20 ? 20 : list().length).fill(null));\n\n  createEffect(() => {\n    if (props.offset !== void 0) {\n      setOffset(Number(props.offset));\n    }\n  });\n  createEffect(() => {\n    const [_prev, _next] = getPrevNext(offset(), list());\n\n    setLeft(_prev);\n    setRight(_next);\n  });\n  createEffect(() => {\n    clearInterval(playTimer);\n    const autoplay = Number(props.autoplay);\n\n    if (autoplay > 0) {\n      playTimer = setInterval(() => {\n        if (autoplay < 1) {\n          clearInterval(playTimer);\n        }\n        handleNext();\n      }, autoplay);\n    }\n  });\n\n  onCleanup(() => {\n    clearInterval(playTimer);\n  });\n  const header = createMemo(() =>\n    isFunction(props.header) ? props.header(offset()) : props.header,\n  );\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <section class={cx('carousel', props.class)}>\n        <section class=\"list\" data-dir={direction()}>\n          <div class=\"item\">{list()[left()]}</div>\n          <div class=\"item\" onAnimationEnd={onOffsetChange}>\n            {list()[offset()]}\n          </div>\n          <div class=\"item\">{list()[right()]}</div>\n        </section>\n        <slot name=\"header\" />\n        <Show when={header()}>\n          <section class=\"header\">{header()}</section>\n        </Show>\n        <div class=\"prev\" onClick={handlePrev} />\n        <div class=\"next\" onClick={handleNext} />\n        <Show when={props.dots}>\n          <div class=\"dots\">\n            <Index each={dotLen()}>\n              {(_, idx) => {\n                return (\n                  <i\n                    class=\"dot\"\n                    classList={{\n                      active: idx === (offset() % 20) + direction(),\n                    }}\n                    onClick={handleDot.bind(null, idx)}\n                  />\n                );\n              }}\n            </Index>\n          </div>\n        </Show>\n      </section>\n    </>\n  );\n}\n\ncustomElement<CarouselProps>(\n  'n-carousel',\n  {\n    children: void 0,\n    autoplay: void 0,\n    class: void 0,\n    css: void 0,\n    offset: void 0,\n    dots: void 0,\n    header: void 0,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(key: number) {\n          el.offset = key;\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: key,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n    });\n    return <Carousel {...props} />;\n  },\n);\nexport default Carousel;\n"],"names":["Carousel","_props","playTimer","baseStyle","theme","props","mergeProps","autoplay","children","left","setLeft","createSignal","right","setRight","offset","setOffset","direction","setDirection","onOffsetChange","_dir","isFunction","onChange","handlePrev","handleNext","handleDot","idx","e","stopPropagation","_offset","_current","Math","floor","list","createMemo","dotLen","Array","length","fill","createEffect","Number","arr","_prev","_next","clearInterval","setInterval","onCleanup","header","style","Show","css","dots","Index","_","bind","cx","class","customElement","opt","el","element","key","dispatchEvent","CustomEvent","detail","replaceChildren"],"mappings":"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"}

package/lib/checkbox/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据录入
+title: 复选框
+subtitle: n-checkbox
+icon: ▣
+---
+
+# Checkbox 复选框
+
+> Checkbox 在一组可选项中进行多项选择

package/lib/checkbox/examples/basic.md

@@ -0,0 +1,31 @@
+---
+title: 基本使用
+description: 基本使用
+order: 1
+---
+
+```html
+<n-checkbox label="启用"></n-checkbox>
+<n-checkbox default-value="B"></n-checkbox>
+<script>
+  const el = container.querySelectorAll('n-checkbox');
+
+  el[0].onchange = function (e) {
+    console.log(e.detail);
+  };
+  el[1].options = ['A', 'B', 'C', 'D'];
+  el[1].onchange = function (e) {
+    console.log(e.detail);
+  };
+</script>
+```
+
+```jsx
+<n-checkbox
+  default-value={['B']}
+  options={['A', 'B', 'C', 'D']}
+  onChange={(e) => {
+    console.log(e.detail);
+  }}
+/>
+```

package/lib/checkbox/examples/check-all.md

@@ -0,0 +1,37 @@
+---
+title: 开启全选
+description: 可以通过 `check-all` 设置开启全选
+order: 5
+---
+
+```html
+<n-checkbox check-all="true" value="2"></n-checkbox>
+<script>
+  const el = container.querySelector('n-checkbox');
+
+  el.options = [
+    { value: 1, label: '选项-1' },
+    { value: 2, label: '选项-2' },
+    { value: 3, label: '选项-3' },
+    { value: 4, label: '选项-4' },
+  ];
+  el.onchange = function (e) {
+    el.value = e.detail;
+  };
+</script>
+```
+
+```jsx
+<n-checkbox
+  check-all
+  options={[
+    { value: 1, label: '选项-1' },
+    { value: 2, label: '选项-2' },
+    { value: 3, label: '选项-3' },
+    { value: 4, label: '选项-4' },
+  ]}
+  onChange={(e) => {
+    e.target.value = e.detail;
+  }}
+/>
+```

package/lib/checkbox/examples/disabled-all.md

@@ -0,0 +1,28 @@
+---
+title: 禁用全部选项选项
+description: 禁用全部选项选项
+order: 3
+---
+
+```html
+<n-checkbox value="1" disabled="true"></n-checkbox>
+<script>
+  const el = container.querySelector('n-checkbox');
+
+  el.options = [
+    { value: 1, label: '选项-1' },
+    { value: 2, label: '选项-2' },
+  ];
+</script>
+```
+
+```tsx
+<n-checkbox
+  value={[1]}
+  disabled
+  options={[
+    { value: 1, label: '选项-1' },
+    { value: 2, label: '选项-2' },
+  ]}
+/>
+```

package/lib/checkbox/examples/disabled-option.md

@@ -0,0 +1,35 @@
+---
+title: 禁用单个选项
+description: 禁用单个选项
+order: 2
+---
+
+```html
+<n-checkbox value="2"></n-checkbox>
+<script>
+  const el = container.querySelector('n-checkbox');
+
+  el.options = [
+    { value: 1, label: '选项-1', disabled: true },
+    { value: 2, label: '选项-2' },
+    { value: 3, label: '选项-3' },
+  ];
+  el.onchange = function (e) {
+    el.value = e.detail;
+  };
+</script>
+```
+
+```jsx
+<n-checkbox
+  value={[2]}
+  options={[
+    { value: 1, label: '选项-1', disabled: true },
+    { value: 2, label: '选项-2' },
+    { value: 3, label: '选项-3' },
+  ]}
+  onChange={(e) => {
+    e.target.value = e.detail;
+  }}
+/>
+```

package/lib/checkbox/examples/field-names.md

@@ -0,0 +1,40 @@
+---
+title: 自定义字段名
+description: 自定义节点 'label'、'value'、'options' 的字段
+order: 6
+---
+
+```html
+<n-checkbox></n-checkbox>
+<script>
+  const el = container.querySelector('n-checkbox');
+
+  el.options = [
+    { code: 1, name: '选项-1' },
+    { code: 2, name: '选项-2' },
+    { code: 3, name: '选项-3' },
+  ];
+  el.fieldNames = { label: 'name', value: 'code' };
+  el.onchange = function (e) {
+    el.value = e.detail;
+  };
+</script>
+```
+
+```jsx
+<n-checkbox
+  value={2}
+  field-names={{
+    label: 'name',
+    value: 'code',
+  }}
+  options={[
+    { code: 1, name: '选项-1' },
+    { code: 2, name: '选项-2' },
+    { code: 3, name: '选项-3' },
+  ]}
+  onChange={(e) => {
+    e.target.value = e.detail;
+  }}
+/>
+```

package/lib/checkbox/examples/status.md

@@ -0,0 +1,37 @@
+---
+title: 状态
+description: radio提供5种内置的状态
+order: 6
+---
+
+```html
+<n-checkbox value="b"></n-checkbox>
+<script>
+  const el = container.querySelector('n-checkbox');
+
+  el.options = [
+    { value: 'a', label: '默认' },
+    { value: 'b', label: '成功', status: 'success' },
+    { value: 'c', label: '警告', status: 'warning' },
+    { value: 'd', label: '错误', status: 'error' },
+  ];
+  el.onchange = function (e) {
+    el.value = e.detail;
+  };
+</script>
+```
+
+```jsx
+<n-checkbox
+  value={['b']}
+  options={[
+    { value: 'a', label: '默认' },
+    { value: 'b', label: '成功', status: 'success' },
+    { value: 'c', label: '警告', status: 'warning' },
+    { value: 'd', label: '错误', status: 'error' },
+  ]}
+  onChange={(e) => {
+    e.target.value = e.detail;
+  }}
+/>
+```

package/lib/checkbox/examples/vertical.md

@@ -0,0 +1,36 @@
+---
+title: 垂直排列
+description: 通过设置 `vertical` 属性来使用垂直排列
+order: 4
+---
+
+```html
+<n-checkbox layout="vertical"></n-checkbox>
+<script>
+  const el = container.querySelector('n-checkbox');
+
+  el.options = [
+    { value: 'a', label: '选项-1' },
+    { value: 'b', label: '选项-2' },
+    { value: 'c', label: '选项-3' },
+  ];
+  el.onchange = function (e) {
+    el.value = e.detail;
+  };
+</script>
+```
+
+```jsx
+<n-checkbox
+  layout="vertical"
+  name="vertical-checkbox"
+  options={[
+    { value: 'a', label: '选项-1' },
+    { value: 'b', label: '选项-2' },
+    { value: 'c', label: '选项-3' },
+  ]}
+  onChange={(e) => {
+    e.target.value = e.detail;
+  }}
+/>
+```

package/lib/checkbox/index.js

@@ -1,2 +1,2 @@
-"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"),n=require("@moneko/css"),i=require("solid-element"),l=require("./style"),r=require("../basic-config"),a=s(require("../get-options")),o=s(require("../theme"));function s(e){return e&&e.__esModule?e:{default:e}}const d=(0,e.template)("<style> "),u=(0,e.template)("<style>"),c=(0,e.template)("<section>"),f=(0,e.template)('<span><input class="checkbox" type="checkbox"><label>');function v(i){let{baseStyle:s}=o.default,[v,m]=(0,t.createSignal)([]),b=(0,t.createMemo)(()=>Object.assign({},r.FieldName,i.fieldNames));(0,t.createEffect)(()=>{let e=void 0===i.value?i.defaultValue:i.value,t=[];Array.isArray(e)?t=e:void 0!==e&&(t=[e]),m(t)});let p=(0,t.createMemo)(()=>{let e=b();if(void 0===i.options)return(0,a.default)([{value:1}],e);let t=[{[e.value]:"all",[e.label]:"全选",indeterminate:!1}];return(i.checkAll?t:[]).concat((0,a.default)(i.options||[],e))}),h=(0,t.createMemo)(()=>{let e=[],t=b();return p().forEach(n=>{"indeterminate"in n||void 0===n[t.value]||e.push(n[t.value])}),e}),g=(0,t.createMemo)(()=>{let e=!0,t=h();for(let n=0,i=t.length;n<i;n++)if(!v().includes(t[n])){e=!1;break}return e});function y(e){if(!i.disabled&&!e.disabled){let t="indeterminate"in e,n=t?[]:[...v()],l=e[b().value];if(t)g()||(n=h());else{let e=n.indexOf(l);-1!==e?n.splice(e,1):n.push(l)}void 0===i.value&&m(n),i.onChange?.(void 0===i.options?!!n[0]:n)}}function k(e,t){t.preventDefault(),"Enter"===t.key&&y(e)}return[(()=>{let t=d(),n=t.firstChild;return(0,e.effect)(()=>n.data=s()),t})(),(()=>{let e=u();return e.textContent=l.style,e})(),(0,e.createComponent)(t.Show,{get when(){return i.css},get children(){let t=d(),l=t.firstChild;return(0,e.effect)(()=>l.data=(0,n.css)(i.css)),t}}),(()=>{let l=c();return(0,e.insert)(l,(0,e.createComponent)(t.For,{get each(){return p()},children:l=>{let r=i.disabled||l.disabled,a=b(),o=l[a.value];return"indeterminate"in l&&(0,t.createEffect)(()=>{let e;l.ref.indeterminate=(e=!1,h().forEach(t=>{v().length&&!v().includes(t)&&(e=!0)}),e)}),(()=>{let t=f(),s=t.firstChild,d=l.ref,u=s.nextSibling;return(0,e.addEventListener)(t,"click",y.bind(null,l),!0),(0,e.addEventListener)(t,"keyup",k.bind(null,l),!0),(0,e.setAttribute)(t,"aria-disabled",r),(0,e.setAttribute)(t,"tabindex",r?-1:0),(0,e.addEventListener)(s,"change",y.bind(null,l)),"function"==typeof d?(0,e.use)(d,s):l.ref=s,s.value=o,s.disabled=r,(0,e.insert)(u,()=>l[a.label]),(0,e.effect)(r=>{let a=(0,n.cx)("item",l.class,l.status),o=i.name;return a!==r._v$&&(0,e.className)(t,r._v$=a),o!==r._v$2&&(0,e.setAttribute)(s,"name",r._v$2=o),r},{_v$:void 0,_v$2:void 0}),(0,e.effect)(()=>s.checked="indeterminate"in l?g():v().includes(o)),t})()}})),(0,e.effect)(()=>(0,e.className)(l,(0,n.cx)("box",i.layout,i.class))),l})()]}(0,i.customElement)("n-checkbox",{class:void 0,css:void 0,name:void 0,disabled:void 0,value:void 0,defaultValue:void 0,options:void 0,onChange:void 0,fieldNames:void 0,checkAll:void 0,layout:void 0},(n,i)=>{let l=i.element,r=(0,t.mergeProps)({layout:l.layout||"horizontal",onChange(e){l.dispatchEvent(new CustomEvent("change",{detail:e}))}},n);return(0,t.createEffect)(()=>{l.removeAttribute("options"),l.removeAttribute("field-names"),l.removeAttribute("css")}),(0,e.createComponent)(v,r)});const m=v;(0,e.delegateEvents)(["click","keyup"]);
+"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"),n=require("@moneko/css"),i=require("solid-element"),l=require("../basic-config"),r=s(require("../get-options")),a=s(require("../theme")),o=require("./style");function s(e){return e&&e.__esModule?e:{default:e}}const d=(0,e.template)("<style> "),u=(0,e.template)("<style>"),c=(0,e.template)("<section>"),f=(0,e.template)('<span><input class="checkbox" type="checkbox"><label>');function v(i){let{baseStyle:s}=a.default,[v,m]=(0,t.createSignal)([]),b=(0,t.createMemo)(()=>Object.assign({},l.FieldName,i.fieldNames));(0,t.createEffect)(()=>{let e=void 0===i.value?i.defaultValue:i.value,t=[];Array.isArray(e)?t=e:void 0!==e&&(t=[e]),m(t)});let p=(0,t.createMemo)(()=>{let e=b();if(void 0===i.options)return(0,r.default)([{value:1}],e);let t=[{[e.value]:"all",[e.label]:"全选",indeterminate:!1}];return(i.checkAll?t:[]).concat((0,r.default)(i.options||[],e))}),h=(0,t.createMemo)(()=>{let e=[],t=b();return p().forEach(n=>{"indeterminate"in n||void 0===n[t.value]||e.push(n[t.value])}),e}),g=(0,t.createMemo)(()=>{let e=!0,t=h();for(let n=0,i=t.length;n<i;n++)if(!v().includes(t[n])){e=!1;break}return e});function y(e){if(!i.disabled&&!e.disabled){let t="indeterminate"in e,n=t?[]:[...v()],l=e[b().value];if(t)g()||(n=h());else{let e=n.indexOf(l);-1!==e?n.splice(e,1):n.push(l)}void 0===i.value&&m(n),i.onChange?.(void 0===i.options?!!n[0]:n)}}function k(e,t){t.preventDefault(),"Enter"===t.key&&y(e)}return[(()=>{let t=d(),n=t.firstChild;return(0,e.effect)(()=>n.data=s()),t})(),(()=>{let e=u();return e.textContent=o.style,e})(),(0,e.createComponent)(t.Show,{get when(){return i.css},get children(){let t=d(),l=t.firstChild;return(0,e.effect)(()=>l.data=(0,n.css)(i.css)),t}}),(()=>{let l=c();return(0,e.insert)(l,(0,e.createComponent)(t.For,{get each(){return p()},children:l=>{let r=i.disabled||l.disabled,a=b(),o=l[a.value];return"indeterminate"in l&&(0,t.createEffect)(()=>{let e;l.ref.indeterminate=(e=!1,h().forEach(t=>{v().length&&!v().includes(t)&&(e=!0)}),e)}),(()=>{let t=f(),s=t.firstChild,d=l.ref,u=s.nextSibling;return(0,e.addEventListener)(t,"click",y.bind(null,l),!0),(0,e.addEventListener)(t,"keyup",k.bind(null,l),!0),(0,e.setAttribute)(t,"aria-disabled",r),(0,e.setAttribute)(t,"tabindex",r?-1:0),(0,e.addEventListener)(s,"change",y.bind(null,l)),"function"==typeof d?(0,e.use)(d,s):l.ref=s,s.value=o,s.disabled=r,(0,e.insert)(u,()=>l[a.label]),(0,e.effect)(r=>{let a=(0,n.cx)("item",l.class,l.status),o=i.name;return a!==r._v$&&(0,e.className)(t,r._v$=a),o!==r._v$2&&(0,e.setAttribute)(s,"name",r._v$2=o),r},{_v$:void 0,_v$2:void 0}),(0,e.effect)(()=>s.checked="indeterminate"in l?g():v().includes(o)),t})()}})),(0,e.effect)(()=>(0,e.className)(l,(0,n.cx)("box",i.layout,i.class))),l})()]}(0,i.customElement)("n-checkbox",{class:void 0,css:void 0,name:void 0,disabled:void 0,value:void 0,defaultValue:void 0,options:void 0,onChange:void 0,fieldNames:void 0,checkAll:void 0,layout:void 0},(n,i)=>{let l=i.element,r=(0,t.mergeProps)({layout:l.layout||"horizontal",onChange(e){l.dispatchEvent(new CustomEvent("change",{detail:e}))}},n);return(0,t.createEffect)(()=>{l.removeAttribute("options"),l.removeAttribute("field-names"),l.removeAttribute("css")}),(0,e.createComponent)(v,r)});const m=v;(0,e.delegateEvents)(["click","keyup"]);
 //# sourceMappingURL=index.js.map

package/lib/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/checkbox/index.tsx"],"sourcesContent":["import { For, Show, createEffect, createMemo, createSignal, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport { FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\n\n/** 通用API\n * @since 1.0.0\n */\nexport interface CheckboxBaseProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** input[type=\"checkbox\"] 的 name 属性 */\n  name?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 选项排列方式\n   * @default 'horizontal'\n   */\n  layout?: 'vertical' | 'horizontal';\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n}\n/** 复选框API */\nexport interface CheckboxBoolProps extends CheckboxBaseProps {\n  /** 一个 bool 值; */\n  value?: boolean;\n  /** 默认值 */\n  defaultValue?: boolean;\n  /** 值修改时的回调方法 */\n  onChange?: (val: boolean) => void;\n  checkAll?: never;\n  options?: never;\n}\n/** 通过数据渲染一组复选框按钮的API */\nexport interface CheckboxGroupProps extends CheckboxBaseProps {\n  /** 全选 */\n  checkAll?: boolean;\n  /** 值;\n   * 当设置了value时, 将是受控模式;\n   * 受控模式可通过 onChange 事件更新 value\n   **/\n  value?: (string | number)[];\n  /** 默认值 */\n  defaultValue?: (string | number)[];\n  /** 渲染选项所使用的数据,\n   * 当没有设置该值时, 将渲染一个切换 bool 值的按钮\n   * */\n  options?: (CheckboxOption | string)[];\n  /** 值修改时的回调方法 */\n  onChange?: (val: (string | number)[]) => void;\n}\n/** 复选框选项\n * @since 1.0.0\n */\nexport interface CheckboxOption extends BaseOption {\n  /** 不确定状态 */\n  indeterminate?: boolean;\n}\n\nfunction Checkbox(props: CheckboxBoolProps | CheckboxGroupProps) {\n  const { baseStyle } = theme;\n  const [value, setValue] = createSignal<(string | number)[]>([]);\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n\n  createEffect(() => {\n    const _val = typeof props.value === 'undefined' ? props.defaultValue : props.value;\n    let val: (string | number)[] = [];\n\n    if (Array.isArray(_val)) {\n      val = _val;\n    } else if (typeof _val !== 'undefined') {\n      val = [_val as unknown as string];\n    }\n\n    setValue(val);\n  });\n  const options = createMemo(() => {\n    const fieldName = fieldNames();\n\n    if (typeof props.options === 'undefined') {\n      return getOptions([{ value: 1 } as CheckboxOption], fieldName);\n    }\n    const checkAll: CheckboxOption[] = [\n      { [fieldName.value]: 'all', [fieldName.label]: '全选', indeterminate: false },\n    ];\n    const arr = props.checkAll ? checkAll : [];\n\n    return arr.concat(getOptions(props.options || [], fieldName));\n  });\n\n  const all = createMemo(() => {\n    const allVal: (string | number)[] = [];\n    const fieldName = fieldNames();\n\n    options().forEach((item) => {\n      if (!('indeterminate' in item) && typeof item[fieldName.value] !== 'undefined') {\n        allVal.push(item[fieldName.value]!);\n      }\n    });\n\n    return allVal;\n  });\n\n  function getIndeterminate() {\n    let _indeterminate = false;\n\n    all().forEach((v) => {\n      if (value().length && !value().includes(v)) {\n        _indeterminate = true;\n      }\n    });\n    return _indeterminate;\n  }\n  const checkedAll = createMemo(() => {\n    let checked = true;\n    const alls = all();\n\n    for (let i = 0, len = alls.length; i < len; i++) {\n      if (!value().includes(alls[i])) {\n        checked = false;\n        break;\n      }\n    }\n    return checked;\n  });\n\n  function onChange(item: CheckboxOption) {\n    if (!props.disabled && !item.disabled) {\n      const isIndeterminate = 'indeterminate' in item;\n      let newVal = isIndeterminate ? [] : [...value()];\n      const val = item[fieldNames().value]!;\n\n      if (isIndeterminate) {\n        if (!checkedAll()) {\n          newVal = all();\n        }\n      } else {\n        const idx = newVal.indexOf(val);\n\n        if (idx !== -1) {\n          newVal.splice(idx, 1);\n        } else {\n          newVal.push(val);\n        }\n      }\n      if (typeof props.value === 'undefined') {\n        setValue(newVal);\n      }\n      props.onChange?.((typeof props.options === 'undefined' ? !!newVal[0] : newVal) as never);\n    }\n  }\n  function onKeyUp(item: CheckboxOption, e: KeyboardEvent) {\n    e.preventDefault();\n    if (e.key === 'Enter') {\n      onChange(item);\n    }\n  }\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <section class={cx('box', props.layout, props.class)}>\n        <For each={options()}>\n          {(item) => {\n            const readOnly = props.disabled || item.disabled;\n            const fieldName = fieldNames();\n            const realVal = item[fieldName.value]!;\n\n            if ('indeterminate' in item) {\n              createEffect(() => {\n                item.ref.indeterminate = getIndeterminate();\n              });\n            }\n            return (\n              <span\n                class={cx('item', item.class, item.status)}\n                aria-disabled={readOnly}\n                tabindex={readOnly ? -1 : 0}\n                onKeyUp={onKeyUp.bind(null, item)}\n                onClick={onChange.bind(null, item)}\n              >\n                <input\n                  ref={item.ref}\n                  class=\"checkbox\"\n                  type=\"checkbox\"\n                  name={props.name}\n                  value={realVal as string}\n                  disabled={readOnly}\n                  checked={'indeterminate' in item ? checkedAll() : value().includes(realVal)}\n                  onChange={onChange.bind(null, item)}\n                />\n                <label>{item[fieldName.label]}</label>\n              </span>\n            );\n          }}\n        </For>\n      </section>\n    </>\n  );\n}\n\nexport type CheckboxGroupElement = CustomElement<CheckboxGroupProps>;\nexport type CheckboxBoolElement = CustomElement<CheckboxBoolProps>;\n\ncustomElement<CheckboxBoolProps | CheckboxGroupProps>(\n  'n-checkbox',\n  {\n    class: void 0,\n    css: void 0,\n    name: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    options: void 0,\n    onChange: void 0,\n    fieldNames: void 0,\n    checkAll: void 0,\n    layout: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        layout: el.layout || 'horizontal',\n        onChange(next: (string | number)[] | boolean) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: next,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('options');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return <Checkbox {...props} />;\n  },\n);\nexport default Checkbox;\n"],"names":["Checkbox","props","baseStyle","theme","value","setValue","createSignal","fieldNames","createMemo","Object","assign","FieldName","createEffect","_val","defaultValue","val","Array","isArray","options","fieldName","getOptions","checkAll","label","indeterminate","arr","concat","all","allVal","forEach","item","push","checkedAll","checked","alls","i","len","length","includes","onChange","disabled","isIndeterminate","newVal","idx","indexOf","splice","onKeyUp","e","preventDefault","key","style","Show","css","For","readOnly","realVal","_indeterminate","ref","v","bind","cx","class","status","name","layout","customElement","_","opt","el","element","mergeProps","next","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"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"}
+{"version":3,"sources":["../../components/checkbox/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, mergeProps, Show } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\nimport { FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme from '../theme';\n\nimport { style } from './style';\n\n/** 通用API\n * @since 1.0.0\n */\nexport interface CheckboxBaseProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** input[type=\"checkbox\"] 的 name 属性 */\n  name?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 选项排列方式\n   * @default 'horizontal'\n   */\n  layout?: 'vertical' | 'horizontal';\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n}\n/** 复选框API */\nexport interface CheckboxBoolProps extends CheckboxBaseProps {\n  /** 一个 bool 值; */\n  value?: boolean;\n  /** 默认值 */\n  defaultValue?: boolean;\n  /** 值修改时的回调方法 */\n  onChange?: (val: boolean) => void;\n  checkAll?: never;\n  options?: never;\n}\n/** 通过数据渲染一组复选框按钮的API */\nexport interface CheckboxGroupProps extends CheckboxBaseProps {\n  /** 全选 */\n  checkAll?: boolean;\n  /** 值;\n   * 当设置了value时, 将是受控模式;\n   * 受控模式可通过 onChange 事件更新 value\n   **/\n  value?: (string | number)[];\n  /** 默认值 */\n  defaultValue?: (string | number)[];\n  /** 渲染选项所使用的数据,\n   * 当没有设置该值时, 将渲染一个切换 bool 值的按钮\n   * */\n  options?: (CheckboxOption | string)[];\n  /** 值修改时的回调方法 */\n  onChange?: (val: (string | number)[]) => void;\n}\n/** 复选框选项\n * @since 1.0.0\n */\nexport interface CheckboxOption extends BaseOption {\n  /** 不确定状态 */\n  indeterminate?: boolean;\n}\n\nfunction Checkbox(props: CheckboxBoolProps | CheckboxGroupProps) {\n  const { baseStyle } = theme;\n  const [value, setValue] = createSignal<(string | number)[]>([]);\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n\n  createEffect(() => {\n    const _val = typeof props.value === 'undefined' ? props.defaultValue : props.value;\n    let val: (string | number)[] = [];\n\n    if (Array.isArray(_val)) {\n      val = _val;\n    } else if (typeof _val !== 'undefined') {\n      val = [_val as unknown as string];\n    }\n\n    setValue(val);\n  });\n  const options = createMemo(() => {\n    const fieldName = fieldNames();\n\n    if (typeof props.options === 'undefined') {\n      return getOptions([{ value: 1 } as CheckboxOption], fieldName);\n    }\n    const checkAll: CheckboxOption[] = [\n      { [fieldName.value]: 'all', [fieldName.label]: '全选', indeterminate: false },\n    ];\n    const arr = props.checkAll ? checkAll : [];\n\n    return arr.concat(getOptions(props.options || [], fieldName));\n  });\n\n  const all = createMemo(() => {\n    const allVal: (string | number)[] = [];\n    const fieldName = fieldNames();\n\n    options().forEach((item) => {\n      if (!('indeterminate' in item) && typeof item[fieldName.value] !== 'undefined') {\n        allVal.push(item[fieldName.value]!);\n      }\n    });\n\n    return allVal;\n  });\n\n  function getIndeterminate() {\n    let _indeterminate = false;\n\n    all().forEach((v) => {\n      if (value().length && !value().includes(v)) {\n        _indeterminate = true;\n      }\n    });\n    return _indeterminate;\n  }\n  const checkedAll = createMemo(() => {\n    let checked = true;\n    const alls = all();\n\n    for (let i = 0, len = alls.length; i < len; i++) {\n      if (!value().includes(alls[i])) {\n        checked = false;\n        break;\n      }\n    }\n    return checked;\n  });\n\n  function onChange(item: CheckboxOption) {\n    if (!props.disabled && !item.disabled) {\n      const isIndeterminate = 'indeterminate' in item;\n      let newVal = isIndeterminate ? [] : [...value()];\n      const val = item[fieldNames().value]!;\n\n      if (isIndeterminate) {\n        if (!checkedAll()) {\n          newVal = all();\n        }\n      } else {\n        const idx = newVal.indexOf(val);\n\n        if (idx !== -1) {\n          newVal.splice(idx, 1);\n        } else {\n          newVal.push(val);\n        }\n      }\n      if (typeof props.value === 'undefined') {\n        setValue(newVal);\n      }\n      props.onChange?.((typeof props.options === 'undefined' ? !!newVal[0] : newVal) as never);\n    }\n  }\n  function onKeyUp(item: CheckboxOption, e: KeyboardEvent) {\n    e.preventDefault();\n    if (e.key === 'Enter') {\n      onChange(item);\n    }\n  }\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <section class={cx('box', props.layout, props.class)}>\n        <For each={options()}>\n          {(item) => {\n            const readOnly = props.disabled || item.disabled;\n            const fieldName = fieldNames();\n            const realVal = item[fieldName.value]!;\n\n            if ('indeterminate' in item) {\n              createEffect(() => {\n                item.ref.indeterminate = getIndeterminate();\n              });\n            }\n            return (\n              <span\n                class={cx('item', item.class, item.status)}\n                aria-disabled={readOnly}\n                tabindex={readOnly ? -1 : 0}\n                onKeyUp={onKeyUp.bind(null, item)}\n                onClick={onChange.bind(null, item)}\n              >\n                <input\n                  ref={item.ref}\n                  class=\"checkbox\"\n                  type=\"checkbox\"\n                  name={props.name}\n                  value={realVal as string}\n                  disabled={readOnly}\n                  checked={'indeterminate' in item ? checkedAll() : value().includes(realVal)}\n                  onChange={onChange.bind(null, item)}\n                />\n                <label>{item[fieldName.label]}</label>\n              </span>\n            );\n          }}\n        </For>\n      </section>\n    </>\n  );\n}\n\nexport type CheckboxGroupElement = CustomElement<CheckboxGroupProps>;\nexport type CheckboxBoolElement = CustomElement<CheckboxBoolProps>;\n\ncustomElement<CheckboxBoolProps | CheckboxGroupProps>(\n  'n-checkbox',\n  {\n    class: void 0,\n    css: void 0,\n    name: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    options: void 0,\n    onChange: void 0,\n    fieldNames: void 0,\n    checkAll: void 0,\n    layout: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        layout: el.layout || 'horizontal',\n        onChange(next: (string | number)[] | boolean) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: next,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('options');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return <Checkbox {...props} />;\n  },\n);\nexport default Checkbox;\n"],"names":["Checkbox","props","baseStyle","theme","value","setValue","createSignal","fieldNames","createMemo","Object","assign","FieldName","createEffect","_val","defaultValue","val","Array","isArray","options","fieldName","getOptions","checkAll","label","indeterminate","arr","concat","all","allVal","forEach","item","push","checkedAll","checked","alls","i","len","length","includes","onChange","disabled","isIndeterminate","newVal","idx","indexOf","splice","onKeyUp","e","preventDefault","key","style","Show","css","For","readOnly","realVal","_indeterminate","ref","v","bind","cx","class","status","name","layout","customElement","_","opt","el","element","mergeProps","next","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"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"}

package/lib/code/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据展示
+title: 代码块
+subtitle: n-code
+icon: 🌷
+---
+
+# 代码块
+
+> 代码块

package/lib/code/examples/basic.md

@@ -0,0 +1,19 @@
+---
+title: 最简单的用法
+description: 最简单的用法
+---
+
+```html
+<n-code language="javascript">
+let foo = bar.baz([1, 2, 3]);
+    foo = foo + 1;
+</n-code>
+```
+
+```jsx
+<n-code
+  code={`let foo = bar.baz([1, 2, 3]);
+    foo = foo + 1;`}
+  language="javascript"
+/>
+```

package/lib/code/examples/diff.md

@@ -0,0 +1,45 @@
+---
+title: 高亮 diff
+description: 将diff字符串高亮, 只需要将lang设置成 `diff-语言名称` 即可, 比如 css 你可以写成 `language="diff-css"`
+order: 5
+---
+
+```html
+<h4>javascript</h4>
+<n-code language="diff-javascript">
++ let foo = bar.baz([1, 2, 3]);
+-    foo = foo + 1;
+  let foo = bar.baz([1, 2, 3]);
+-    foo = foo + 1;
+- console.log(12);
+</n-code>
+<h4>css</h4>
+<n-code language="diff-css">
++ body {
+- div {
+    color: red;
+-   border: 5px solid #ddd;
+-   outline: none;
+  }
+</n-code>
+```
+
+```jsx
+<h4>javascript</h4>
+<n-code
+  code={`+ let foo = bar.baz([1, 2, 3]);
+-    foo = foo + 1;
+  let foo = bar.baz([1, 2, 3]);
+-    foo = foo + 1;
+- console.log(12);`}
+  language="diff-javascript"
+/>
+<h4>css</h4>
+<n-code language="diff-css" code={`+ body {
+- div {
+    color: red;
+-   border: 5px solid #ddd;
+-   outline: none;
+  }`}
+/>
+```

package/lib/code/examples/line-number.md

@@ -0,0 +1,18 @@
+---
+title: 代码行号
+description: 显示代码行号
+---
+
+```html
+<n-code line-number="true" language="javascript">
+const foo = bar.baz([1, 2, 3]) + 1;
+console.log(`foo: ${foo}`);
+</n-code>
+```
+
+```jsx
+<n-code line-number language="javascript">
+{`const foo = bar.baz([1, 2, 3]) + 1;
+console.log(\`foo: $\{foo}\`);`}
+</n-code>
+```

package/lib/code/examples/live-edit.md

@@ -0,0 +1,20 @@
+---
+title: 编辑
+description: 支持编辑
+---
+
+```html
+<n-code edit="true" language="javascript">
+const foo = bar.baz([1, 2, 3]) + 1;
+console.log(`foo: foo`);
+</n-code>
+```
+
+```jsx
+<n-code
+  edit
+  language="javascript"
+  code={`const foo = bar.baz([1, 2, 3]) + 1;
+console.log(\`foo: foo\`);`}
+/>
+```

package/lib/code/examples/toolbar.md

@@ -0,0 +1,18 @@
+---
+title: 顶部工具栏
+description: 显示顶部工具栏
+---
+
+```html
+<n-code toolbar="true" language="javascript">
+const foo = bar.baz([1, 2, 3]) + 1;
+console.log(`foo: ${foo}`);
+</n-code>
+```
+
+```jsx
+<n-code toolbar language="javascript">
+  {`const foo = bar.baz([1, 2, 3]) + 1;
+console.log(\`foo: \${foo}\`);`}
+</n-code>
+```