neko-ui 2.8.21 → 2.8.23

package/es/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":["Index","Show","createEffect","createMemo","createSignal","mergeProps","onCleanup","isFunction","css","cx","customElement","style","theme","Carousel","_props","playTimer","baseStyle","props","autoplay","children","left","setLeft","right","setRight","offset","setOffset","direction","setDirection","onOffsetChange","_dir","onChange","handlePrev","handleNext","handleDot","idx","e","stopPropagation","_offset","_current","Math","floor","list","dotLen","Array","length","fill","Number","arr","_prev","_next","clearInterval","setInterval","header","dots","_","bind","class","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":["createEffect","createMemo","createSignal","Index","mergeProps","onCleanup","Show","isFunction","css","cx","customElement","theme","style","Carousel","_props","playTimer","baseStyle","props","autoplay","children","left","setLeft","right","setRight","offset","setOffset","direction","setDirection","onOffsetChange","_dir","onChange","handlePrev","handleNext","handleDot","idx","e","stopPropagation","_offset","_current","Math","floor","list","dotLen","Array","length","fill","Number","arr","_prev","_next","clearInterval","setInterval","header","dots","_","bind","class","opt","el","element","key","dispatchEvent","CustomEvent","detail","replaceChildren"],"mappings":"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"}

package/es/checkbox/README.mdx

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

package/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/checkbox/index.js

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

package/es/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":["For","Show","createEffect","createMemo","createSignal","mergeProps","css","cx","customElement","style","FieldName","getOptions","theme","Checkbox","props","baseStyle","value","setValue","fieldNames","Object","assign","_val","defaultValue","val","Array","isArray","options","fieldName","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","readOnly","realVal","_indeterminate","ref","v","bind","class","status","name","layout","_","opt","el","element","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":["createEffect","createMemo","createSignal","For","mergeProps","Show","css","cx","customElement","FieldName","getOptions","theme","style","Checkbox","props","baseStyle","value","setValue","fieldNames","Object","assign","_val","defaultValue","val","Array","isArray","options","fieldName","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","readOnly","realVal","_indeterminate","ref","v","bind","class","status","name","layout","_","opt","el","element","next","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"yeAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,CAAEC,OAAAA,CAAG,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,KAAQ,UAAW,AACzF,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,aAAAA,CAAS,KAAQ,iBAAkB,AAC5C,QAAOC,MAAgB,gBAAiB,AACxC,QAAOC,MAAW,UAAW,AAE7B,QAASC,SAAAA,CAAK,KAAQ,SAAU,CA0DhC,SAASC,EAASC,CAA6C,EAC7D,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGJ,EAChB,CAACK,EAAOC,EAAS,CAAGf,EAAkC,EAAE,EACxDgB,EAAajB,EAAW,IAAMkB,OAAOC,MAAM,CAAC,CAAC,EAAGX,EAAWK,EAAMI,UAAU,GAEjFlB,EAAa,KACX,IAAMqB,EAAO,AAAuB,KAAA,IAAhBP,EAAME,KAAK,CAAmBF,EAAMQ,YAAY,CAAGR,EAAME,KAAK,CAC9EO,EAA2B,EAAE,CAE7BC,MAAMC,OAAO,CAACJ,GAChBE,EAAMF,EACmB,KAAA,IAATA,GAChBE,CAAAA,EAAM,CAACF,EAA0B,AAAD,EAGlCJ,EAASM,EACX,GACA,IAAMG,EAAUzB,EAAW,KACzB,IAAM0B,EAAYT,IAElB,GAAI,AAAyB,KAAA,IAAlBJ,EAAMY,OAAO,CACtB,OAAOhB,EAAW,CAAC,CAAEM,MAAO,CAAE,EAAoB,CAAEW,GAEtD,IAAMC,EAA6B,CACjC,CAAE,CAACD,EAAUX,KAAK,CAAC,CAAE,MAAO,CAACW,EAAUE,KAAK,CAAC,CAAE,KAAMC,cAAe,CAAA,CAAM,EAC3E,CAGD,MAAOC,AAFKjB,CAAAA,EAAMc,QAAQ,CAAGA,EAAW,EAAE,AAAD,EAE9BI,MAAM,CAACtB,EAAWI,EAAMY,OAAO,EAAI,EAAE,CAAEC,GACpD,GAEMM,EAAMhC,EAAW,KACrB,IAAMiC,EAA8B,EAAE,CAChCP,EAAYT,IAQlB,OANAQ,IAAUS,OAAO,CAAC,AAACC,IACX,kBAAmBA,GAAS,AAAiC,KAAA,IAA1BA,CAAI,CAACT,EAAUX,KAAK,CAAC,EAC5DkB,EAAOG,IAAI,CAACD,CAAI,CAACT,EAAUX,KAAK,CAAC,CAErC,GAEOkB,CACT,GAYMI,EAAarC,EAAW,KAC5B,IAAIsC,EAAU,CAAA,EACRC,EAAOP,IAEb,IAAK,IAAIQ,EAAI,EAAGC,EAAMF,EAAKG,MAAM,CAAEF,EAAIC,EAAKD,IAC1C,GAAI,CAACzB,IAAQ4B,QAAQ,CAACJ,CAAI,CAACC,EAAE,EAAG,CAC9BF,EAAU,CAAA,EACV,KACF,CAEF,OAAOA,CACT,GAEA,SAASM,EAAST,CAAoB,EACpC,GAAI,CAACtB,EAAMgC,QAAQ,EAAI,CAACV,EAAKU,QAAQ,CAAE,CACrC,IAAMC,EAAkB,kBAAmBX,EACvCY,EAASD,EAAkB,EAAE,CAAG,IAAI/B,IAAQ,CAC1CO,EAAMa,CAAI,CAAClB,IAAaF,KAAK,CAAC,CAEpC,GAAI+B,EACGT,KACHU,CAAAA,EAASf,GAAI,MAEV,CACL,IAAMgB,EAAMD,EAAOE,OAAO,CAAC3B,EAEvB0B,AAAQ,CAAA,KAARA,EACFD,EAAOG,MAAM,CAACF,EAAK,GAEnBD,EAAOX,IAAI,CAACd,EAEhB,CAC2B,KAAA,IAAhBT,EAAME,KAAK,EACpBC,EAAS+B,SAEXlC,EAAM+B,QAAQ,EAAd/B,EAAM+B,QAAQ,MAAd/B,EAAkB,AAAyB,KAAA,IAAlBA,EAAMY,OAAO,CAAmB,CAAC,CAACsB,CAAM,CAAC,EAAE,CAAGA,EACzE,CACF,CACA,SAASI,EAAQhB,CAAoB,CAAEiB,CAAgB,EACrDA,EAAEC,cAAc,GACF,UAAVD,EAAEE,GAAG,EACPV,EAAST,EAEb,CAEA,0DAEwBrB,gDACAH,UACnBP,qBAAWS,EAAMR,GAAG,8DACCA,EAAIQ,EAAMR,GAAG,qCAGhCH,qBAAUuB,cACR,AAACU,IACA,IAAMoB,EAAW1C,EAAMgC,QAAQ,EAAIV,EAAKU,QAAQ,CAC1CnB,EAAYT,IACZuC,EAAUrB,CAAI,CAACT,EAAUX,KAAK,CAAC,CAOrC,MALI,kBAAmBoB,GACrBpC,EAAa,KArEvB,IAAI0D,CAsEQtB,CAAAA,EAAKuB,GAAG,CAAC7B,aAAa,EAtE9B4B,EAAiB,CAAA,EAErBzB,IAAME,OAAO,CAAC,AAACyB,IACT5C,IAAQ2B,MAAM,EAAI,CAAC3B,IAAQ4B,QAAQ,CAACgB,IACtCF,CAAAA,EAAiB,CAAA,CAAG,CAExB,GACOA,EAgEG,oCAWStB,EAAKuB,GAAG,oCAHNd,EAASgB,IAAI,CAAC,KAAMzB,mBADpBgB,EAAQS,IAAI,CAAC,KAAMzB,2BAFboB,kBACLA,EAAW,GAAK,gBAYdX,EAASgB,IAAI,CAAC,KAAMzB,gCAPzBA,EAAKuB,GAAG,WAINF,aACGD,UAIJpB,CAAI,CAACT,EAAUE,KAAK,CAAC,cAhBtBtB,EAAG,OAAQ6B,EAAK0B,KAAK,CAAE1B,EAAK2B,MAAM,IAUjCjD,EAAMkD,IAAI,8GAGP,kBAAmB5B,EAAOE,IAAetB,IAAQ4B,QAAQ,CAACa,SAM3E,eAjCYlD,EAAG,MAAOO,EAAMmD,MAAM,CAAEnD,EAAMgD,KAAK,UAsCzD,CAKAtD,EACE,aACA,CACEsD,MAAO,KAAK,EACZxD,IAAK,KAAK,EACV0D,KAAM,KAAK,EACXlB,SAAU,KAAK,EACf9B,MAAO,KAAK,EACZM,aAAc,KAAK,EACnBI,QAAS,KAAK,EACdmB,SAAU,KAAK,EACf3B,WAAY,KAAK,EACjBU,SAAU,KAAK,EACfqC,OAAQ,KAAK,CACf,EACA,CAACC,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBvD,EAAQV,EACZ,CACE6D,OAAQG,EAAGH,MAAM,EAAI,aACrBpB,SAASyB,CAAmC,EAC1CF,EAAGG,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQH,CACV,GAEJ,CACF,EACAJ,GAQF,OALAlE,EAAa,KACXoE,EAAGM,eAAe,CAAC,WACnBN,EAAGM,eAAe,CAAC,eACnBN,EAAGM,eAAe,CAAC,MACrB,KACQ7D,EAAaC,EACvB,EAEF,gBAAeD,CAAS"}

package/es/code/README.mdx

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

package/es/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/es/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/es/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/es/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/es/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>
+```

package/es/code/index.js

@@ -1,3 +1,3 @@
-import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as o}from"solid-js/web";import{insert as r}from"solid-js/web";import{effect as n}from"solid-js/web";import{delegateEvents as i}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{className as l}from"solid-js/web";import{classList as a}from"solid-js/web";import{addEventListener as d}from"solid-js/web";let u=t('<div class="toolbar"><button class="toolbar-copy" aria-label="copy">'),m=t("<pre><code> "),c=t("<style> "),g=t("<style>"),v=t("<div><textarea>");import{Show as f,createEffect as p,createSignal as b,mergeProps as h,onCleanup as $,onMount as w,untrack as _}from"solid-js";import C from"@moneko/common/lib/isFunction";import k from"@moneko/common/lib/setClipboard";import{css as j,cx as y}from"@moneko/css";import{customElement as L}from"solid-element";import{style as E}from"./style";import x from"../prism";import N from"../prism/css";import W from"../theme";function I(t){let i;let{baseStyle:h}=W,L=/^diff-([\w-]+)/i,[I,A]=b(""),[M,O]=b(20),[P,R]=b(!1);function B(){return new IntersectionObserver(e=>{R(e[0].isIntersecting)})}function F(){return new Worker("https://cdn.jsdelivr.net/npm/neko-ui@latest/es/code/worker.js")}let H=t.webWorker?void 0:B(),J=t.webWorker?F():void 0;function S(){k(_(I),i)}function T(){return(()=>{let c=m(),g=c.firstChild,v=i,p=g.firstChild;return r(c,s(f,{get when(){return t.toolbar},get children(){let e=u();return d(e.firstChild,"click",S,!0),n(()=>{var r;return o(e,"data-language",null==(r=t.language)?void 0:r.split(" ")[0])}),e}}),g),"function"==typeof v?e(v,g):i=g,n(e=>{let o={[`language-${t.language}`]:!!t.language,"line-numbers":t.lineNumber,"not-toolbar":!t.toolbar,[t.class]:!t.edit},r=`language-${t.language}`,n=I();return e._v$=a(c,o,e._v$),r!==e._v$2&&l(g,e._v$2=r),n!==e._v$3&&(p.data=e._v$3=n),e},{_v$:void 0,_v$2:void 0,_v$3:void 0}),c})()}function U({target:e}){let o=`${e.value}${/\n$/.test(e.value)?"​":""}`;A(o),C(t.onChange)&&t.onChange(o)}function q(e){i.innerHTML=e.data,O(i.getBoundingClientRect().height-(t.toolbar?40:16))}function z(){H&&(H.unobserve(i),H.disconnect())}return p(()=>{if(t.code)try{A(decodeURIComponent(t.code))}catch(e){A(t.code)}else A("")}),p(()=>{t.webWorker?(J||(J=F()),J.addEventListener("message",q)):H||(H=B())}),p(()=>{if(J)J.postMessage(JSON.stringify({language:t.language,code:I()}));else{var e,o;e=t.language||"markup",(o=I())&&P()&&(z(),L.test(e)&&!x.languages[e]&&(x.languages[e]=x.languages.diff),q({data:x.highlight(`${o}
-`,x.languages[e]||x.languages.markup,e)}))}}),w(()=>{i&&(null==H||H.observe(i))}),$(()=>{J&&(J.removeEventListener("message",q),J.terminate()),z()}),[(()=>{let e=c(),t=e.firstChild;return n(()=>t.data=h()),e})(),(()=>{let e=c(),t=e.firstChild;return n(()=>t.data=N()),e})(),(()=>{let e=g();return e.textContent=E,e})(),s(f,{get when(){return t.css},get children(){let e=c(),o=e.firstChild;return n(()=>o.data=j(t.css)),e}}),s(f,{get when(){return t.edit},get fallback(){return s(T,{})},get children(){let e=v(),o=e.firstChild;return d(o,"input",U,!0),r(e,s(T,{}),null),n(r=>{let n=y("n-editor",t.class),i=!!t.lineNumber,s=!t.toolbar,a=`${M()}px`;return n!==r._v$4&&l(e,r._v$4=n),i!==r._v$5&&o.classList.toggle("line-numbers",r._v$5=i),s!==r._v$6&&o.classList.toggle("not-toolbar",r._v$6=s),a!==r._v$7&&(null!=(r._v$7=a)?o.style.setProperty("height",a):o.style.removeProperty("height")),r},{_v$4:void 0,_v$5:void 0,_v$6:void 0,_v$7:void 0}),n(()=>o.value=t.code),e}})]}L("n-code",{class:void 0,code:void 0,language:void 0,children:void 0,edit:void 0,toolbar:void 0,css:void 0,lineNumber:void 0,onChange:void 0,webWorker:void 0},(e,t)=>{let o=t.element,r=h({code:o.textContent,css:o.css,onChange(e){o.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return p(()=>{o.replaceChildren(),o.removeAttribute("css")}),s(I,r)});export default I;i(["click","input"]);
+function e(e,t,r,n,o,i,s){try{var l=e[i](s),a=l.value}catch(e){r(e);return}l.done?t(a):Promise.resolve(a).then(n,o)}function t(t){return function(){var r=this,n=arguments;return new Promise(function(o,i){var s=t.apply(r,n);function l(t){e(s,o,i,l,a,"next",t)}function a(t){e(s,o,i,l,a,"throw",t)}l(void 0)})}}import{use as r}from"solid-js/web";import{template as n}from"solid-js/web";import{setAttribute as o}from"solid-js/web";import{insert as i}from"solid-js/web";import{effect as s}from"solid-js/web";import{delegateEvents as l}from"solid-js/web";import{createComponent as a}from"solid-js/web";import{className as u}from"solid-js/web";import{classList as d}from"solid-js/web";import{addEventListener as c}from"solid-js/web";let m=n('<div class="toolbar"><button class="toolbar-copy" aria-label="copy">'),v=n("<pre><code> "),g=n("<style> "),f=n("<style>"),p=n("<div><textarea>");import{createEffect as h,createResource as b,createSignal as $,mergeProps as w,onCleanup as C,onMount as _,Show as y,untrack as k}from"solid-js";import j from"@moneko/common/lib/isFunction";import P from"@moneko/common/lib/setClipboard";import{css as L,cx as x}from"@moneko/css";import{customElement as E}from"solid-element";import W from"../theme";import{style as N}from"./style";let I={Prism:null,prismCss:null};function A(e){let n;let{baseStyle:l}=W,w=/^diff-([\w-]+)/i,[E,A]=$(""),[M,O]=$(20),[R,B]=$(!1);function F(){return(F=t(function*(){return I.Prism||(I.Prism=(yield import("../prism")).default),I.Prism})).apply(this,arguments)}function H(){return(H=t(function*(){return I.prismCss||(I.prismCss=(yield import("../prism/css")).default),I.prismCss})).apply(this,arguments)}let[J]=b("prism",function(){return F.apply(this,arguments)}),[S]=b("prism-css",function(){return H.apply(this,arguments)});function T(){return new IntersectionObserver(e=>{B(e[0].isIntersecting)})}function U(){return new Worker("https://cdn.jsdelivr.net/npm/neko-ui@latest/es/code/worker.js")}let q=e.webWorker?void 0:T(),z=e.webWorker?U():void 0;function D(){P(k(E),n)}function G(){return(()=>{let t=v(),l=t.firstChild,g=n,f=l.firstChild;return i(t,a(y,{get when(){return e.toolbar},get children(){let t=m();return c(t.firstChild,"click",D,!0),s(()=>{var r;return o(t,"data-language",null==(r=e.language)?void 0:r.split(" ")[0])}),t}}),l),"function"==typeof g?r(g,l):n=l,s(r=>{let n={[`language-${e.language}`]:!!e.language,"line-numbers":e.lineNumber,"not-toolbar":!e.toolbar,[e.class]:!e.edit},o=`language-${e.language}`,i=E();return r._v$=d(t,n,r._v$),o!==r._v$2&&u(l,r._v$2=o),i!==r._v$3&&(f.data=r._v$3=i),r},{_v$:void 0,_v$2:void 0,_v$3:void 0}),t})()}function K({target:t}){let r=`${t.value}${t.value.endsWith("\n")?"​":""}`;A(r),j(e.onChange)&&e.onChange(r)}function Q(t){n.innerHTML=t.data,O(n.getBoundingClientRect().height-(e.toolbar?40:16))}function V(){q&&(q.unobserve(n),q.disconnect())}return h(()=>{if(e.code)try{A(decodeURIComponent(e.code))}catch(t){A(e.code)}else A("")}),h(()=>{e.webWorker?(z||(z=U()),z.addEventListener("message",Q)):q||(q=T())}),h(()=>{z?z.postMessage(JSON.stringify({language:e.language,code:E()})):function(e,t){let r=J();t&&R()&&r&&(V(),w.test(e)&&!r.languages[e]&&(r.languages[e]=r.languages.diff),Q({data:r.highlight(`${t}
+`,r.languages[e]||r.languages.markup,e)}))}(e.language||"markup",E())}),_(()=>{n&&(null==q||q.observe(n))}),C(()=>{z&&(z.removeEventListener("message",Q),z.terminate()),V()}),[(()=>{let e=g(),t=e.firstChild;return s(()=>t.data=l()),e})(),(()=>{let e=g(),t=e.firstChild;return s(()=>{var e;return t.data=null==(e=S())?void 0:e()}),e})(),(()=>{let e=f();return e.textContent=N,e})(),a(y,{get when(){return e.css},get children(){let t=g(),r=t.firstChild;return s(()=>r.data=L(e.css)),t}}),a(y,{get when(){return e.edit},get fallback(){return a(G,{})},get children(){let t=p(),r=t.firstChild;return c(r,"input",K,!0),i(t,a(G,{}),null),s(n=>{let o=x("n-editor",e.class),i=!!e.lineNumber,s=!e.toolbar,l=`${M()}px`;return o!==n._v$4&&u(t,n._v$4=o),i!==n._v$5&&r.classList.toggle("line-numbers",n._v$5=i),s!==n._v$6&&r.classList.toggle("not-toolbar",n._v$6=s),l!==n._v$7&&(null!=(n._v$7=l)?r.style.setProperty("height",l):r.style.removeProperty("height")),n},{_v$4:void 0,_v$5:void 0,_v$6:void 0,_v$7:void 0}),s(()=>r.value=e.code),t}})]}E("n-code",{class:void 0,code:void 0,language:void 0,children:void 0,edit:void 0,toolbar:void 0,css:void 0,lineNumber:void 0,onChange:void 0,webWorker:void 0},(e,t)=>{let r=t.element,n=w({code:r.textContent,css:r.css,onChange(e){r.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return h(()=>{r.replaceChildren(),r.removeAttribute("css")}),a(A,n)});export default A;l(["click","input"]);
 //# sourceMappingURL=index.js.map

package/es/code/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/code/index.tsx"],"sourcesContent":["import {\n  Show,\n  createEffect,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  untrack,\n} from 'solid-js';\nimport { isFunction, setClipboard } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport Prism from '../prism';\nimport prismCss from '../prism/css';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface CodeProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 内容 */\n  code?: string;\n  /** 语言 */\n  language?: string;\n  /** 显示代码行号 */\n  lineNumber?: boolean;\n  /** 支持编辑 */\n  edit?: boolean;\n  /** 开启代码块工具条 */\n  toolbar?: boolean;\n  /** 编辑修改时的回调 */\n  onChange?: (code: string) => void;\n  children?: JSX.Element;\n  /**\n   * 使用 web worker\n   * @default false\n   */\n  webWorker?: boolean;\n}\n\nexport type CodeElement = CustomElement<CodeProps>;\n\nfunction Code(props: CodeProps) {\n  const { baseStyle } = theme;\n  let codeEl: HTMLPreElement;\n  const diffLang = /^diff-([\\w-]+)/i;\n  const [code, setCode] = createSignal<string>('');\n  const [hei, setHei] = createSignal(20);\n  const [isIntersecting, setIsIntersecting] = createSignal(false);\n\n  function initObserver() {\n    return new IntersectionObserver((entries) => {\n      setIsIntersecting(entries[0].isIntersecting);\n    });\n  }\n  function initWorker() {\n    return new Worker('https://cdn.jsdelivr.net/npm/neko-ui@latest/es/code/worker.js');\n  }\n  // eslint-disable-next-line solid/reactivity\n  let observer = props.webWorker ? void 0 : initObserver();\n  // eslint-disable-next-line solid/reactivity\n  let worker: Worker | undefined = props.webWorker ? initWorker() : void 0;\n\n  function copy() {\n    setClipboard(untrack(code), codeEl);\n  }\n  function Pre() {\n    return (\n      <pre\n        classList={{\n          [`language-${props.language}`]: !!props.language,\n          'line-numbers': props.lineNumber,\n          'not-toolbar': !props.toolbar,\n          [props.class as string]: !props.edit,\n        }}\n      >\n        <Show when={props.toolbar}>\n          <div class=\"toolbar\" data-language={props.language?.split(' ')[0]}>\n            <button class=\"toolbar-copy\" aria-label=\"copy\" onClick={copy} />\n          </div>\n        </Show>\n        <code ref={codeEl} class={`language-${props.language}`} textContent={code()} />\n      </pre>\n    );\n  }\n  function change({ target }: { target: HTMLTextAreaElement }) {\n    const c = `${target.value}${/\\n$/.test(target.value) ? '\\u200b' : ''}`;\n\n    setCode(c);\n    if (isFunction(props.onChange)) {\n      props.onChange(c);\n    }\n  }\n  function update(e: { data: string }) {\n    codeEl.innerHTML = e.data;\n    setHei(codeEl.getBoundingClientRect().height - (props.toolbar ? 40 : 16));\n  }\n  function cleanObserver() {\n    if (observer) {\n      // 停止观察目标元素\n      observer.unobserve(codeEl);\n      observer.disconnect();\n    }\n  }\n  function postMessage(language: string, value?: string) {\n    if (!value || !isIntersecting()) return;\n    cleanObserver();\n    if (diffLang.test(language) && !Prism.languages[language]) {\n      Prism.languages[language] = Prism.languages.diff;\n    }\n    update({\n      data: Prism.highlight(\n        `${value}\\n`,\n        Prism.languages[language] || Prism.languages.markup,\n        language,\n      ),\n    });\n  }\n  createEffect(() => {\n    if (props.code) {\n      try {\n        setCode(decodeURIComponent(props.code));\n      } catch (error) {\n        setCode(props.code);\n      }\n    } else {\n      setCode('');\n    }\n  });\n  createEffect(() => {\n    if (props.webWorker) {\n      if (!worker) {\n        worker = initWorker();\n      }\n      worker.addEventListener('message', update);\n    } else if (!observer) {\n      observer = initObserver();\n    }\n  });\n\n  createEffect(() => {\n    if (worker) {\n      worker.postMessage(\n        JSON.stringify({\n          language: props.language,\n          code: code(),\n        }),\n      );\n    } else {\n      postMessage(props.language || 'markup', code());\n    }\n  });\n  onMount(() => {\n    if (codeEl) {\n      // 开始观察目标元素\n      observer?.observe(codeEl);\n    }\n  });\n  onCleanup(() => {\n    if (worker) {\n      worker.removeEventListener('message', update);\n      worker.terminate();\n    }\n    cleanObserver();\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={prismCss()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <Show when={props.edit} fallback={<Pre />}>\n        <div class={cx('n-editor', props.class)}>\n          <textarea\n            value={props.code}\n            classList={{\n              'line-numbers': props.lineNumber,\n              'not-toolbar': !props.toolbar,\n            }}\n            style={{ height: `${hei()}px` }}\n            onInput={change}\n          />\n          <Pre />\n        </div>\n      </Show>\n    </>\n  );\n}\n\ncustomElement<CodeProps>(\n  'n-code',\n  {\n    class: void 0,\n    code: void 0,\n    language: void 0,\n    children: void 0,\n    edit: void 0,\n    toolbar: void 0,\n    css: void 0,\n    lineNumber: void 0,\n    onChange: void 0,\n    webWorker: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        code: el.textContent,\n        css: el.css,\n        onChange(val: string) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: val,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n      el.removeAttribute('css');\n    });\n\n    return <Code {...props} />;\n  },\n);\nexport default Code;\n"],"names":["Show","createEffect","createSignal","mergeProps","onCleanup","onMount","untrack","isFunction","setClipboard","css","cx","customElement","style","Prism","prismCss","theme","Code","props","codeEl","baseStyle","diffLang","code","setCode","hei","setHei","isIntersecting","setIsIntersecting","initObserver","IntersectionObserver","entries","initWorker","Worker","observer","webWorker","worker","copy","Pre","toolbar","language","split","lineNumber","class","edit","change","target","c","value","test","onChange","update","e","innerHTML","data","getBoundingClientRect","height","cleanObserver","unobserve","disconnect","decodeURIComponent","error","addEventListener","postMessage","JSON","stringify","languages","diff","highlight","markup","observe","removeEventListener","terminate","children","_","opt","el","element","textContent","val","dispatchEvent","CustomEvent","detail","replaceChildren","removeAttribute"],"mappings":"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"}
+{"version":3,"sources":["../../components/code/index.tsx"],"sourcesContent":["import {\n  type Accessor,\n  createEffect,\n  createResource,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  Show,\n  untrack,\n} from 'solid-js';\nimport { isFunction, setClipboard } 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 CodeProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 内容 */\n  code?: string;\n  /** 语言 */\n  language?: string;\n  /** 显示代码行号 */\n  lineNumber?: boolean;\n  /** 支持编辑 */\n  edit?: boolean;\n  /** 开启代码块工具条 */\n  toolbar?: boolean;\n  /** 编辑修改时的回调 */\n  onChange?: (code: string) => void;\n  children?: JSX.Element;\n  /**\n   * 使用 web worker\n   * @default false\n   */\n  webWorker?: boolean;\n}\n\nexport type CodeElement = CustomElement<CodeProps>;\nconst cache = {\n  Prism: null as typeof import('../prism/index').default | null,\n  prismCss: null as Accessor<string> | null,\n};\n\nfunction Code(props: CodeProps) {\n  const { baseStyle } = theme;\n  let codeEl: HTMLPreElement;\n  const diffLang = /^diff-([\\w-]+)/i;\n  const [code, setCode] = createSignal<string>('');\n  const [hei, setHei] = createSignal(20);\n  const [isIntersecting, setIsIntersecting] = createSignal(false);\n\n  async function fetchPrism() {\n    if (!cache.Prism) {\n      cache.Prism = (await import('../prism')).default;\n    }\n    return cache.Prism;\n  }\n  async function fetchPrismCss() {\n    if (!cache.prismCss) {\n      cache.prismCss = (await import('../prism/css')).default;\n    }\n    return cache.prismCss;\n  }\n  const [prismJS] = createResource('prism', fetchPrism);\n  const [prismCss] = createResource('prism-css', fetchPrismCss);\n\n  function initObserver() {\n    return new IntersectionObserver((entries) => {\n      setIsIntersecting(entries[0].isIntersecting);\n    });\n  }\n  function initWorker() {\n    return new Worker('https://cdn.jsdelivr.net/npm/neko-ui@latest/es/code/worker.js');\n  }\n  // eslint-disable-next-line solid/reactivity\n  let observer = props.webWorker ? void 0 : initObserver();\n  // eslint-disable-next-line solid/reactivity\n  let worker: Worker | undefined = props.webWorker ? initWorker() : void 0;\n\n  function copy() {\n    setClipboard(untrack(code), codeEl);\n  }\n  function Pre() {\n    return (\n      <pre\n        classList={{\n          [`language-${props.language}`]: !!props.language,\n          'line-numbers': props.lineNumber,\n          'not-toolbar': !props.toolbar,\n          [props.class!]: !props.edit,\n        }}\n      >\n        <Show when={props.toolbar}>\n          <div class=\"toolbar\" data-language={props.language?.split(' ')[0]}>\n            <button class=\"toolbar-copy\" aria-label=\"copy\" onClick={copy} />\n          </div>\n        </Show>\n        <code ref={codeEl} class={`language-${props.language}`} textContent={code()} />\n      </pre>\n    );\n  }\n  function change({ target }: { target: HTMLTextAreaElement }) {\n    const c = `${target.value}${target.value.endsWith('\\n') ? '\\u200b' : ''}`;\n\n    setCode(c);\n    if (isFunction(props.onChange)) {\n      props.onChange(c);\n    }\n  }\n  function update(e: { data: string }) {\n    codeEl.innerHTML = e.data;\n    setHei(codeEl.getBoundingClientRect().height - (props.toolbar ? 40 : 16));\n  }\n  function cleanObserver() {\n    if (observer) {\n      // 停止观察目标元素\n      observer.unobserve(codeEl);\n      observer.disconnect();\n    }\n  }\n  function postMessage(language: string, value?: string) {\n    const Prism = prismJS();\n\n    if (!value || !isIntersecting() || !Prism) return;\n    cleanObserver();\n    if (diffLang.test(language) && !Prism.languages[language]) {\n      Prism.languages[language] = Prism.languages.diff;\n    }\n    update({\n      data: Prism.highlight(\n        `${value}\\n`,\n        Prism.languages[language] || Prism.languages.markup,\n        language,\n      ),\n    });\n  }\n  createEffect(() => {\n    if (props.code) {\n      try {\n        setCode(decodeURIComponent(props.code));\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      } catch (_error) {\n        setCode(props.code);\n      }\n    } else {\n      setCode('');\n    }\n  });\n  createEffect(() => {\n    if (props.webWorker) {\n      if (!worker) {\n        worker = initWorker();\n      }\n      worker.addEventListener('message', update);\n    } else if (!observer) {\n      observer = initObserver();\n    }\n  });\n\n  createEffect(() => {\n    if (worker) {\n      worker.postMessage(\n        JSON.stringify({\n          language: props.language,\n          code: code(),\n        }),\n      );\n    } else {\n      postMessage(props.language || 'markup', code());\n    }\n  });\n  onMount(() => {\n    if (codeEl) {\n      // 开始观察目标元素\n      observer?.observe(codeEl);\n    }\n  });\n  onCleanup(() => {\n    if (worker) {\n      worker.removeEventListener('message', update);\n      worker.terminate();\n    }\n    cleanObserver();\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={prismCss()?.()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <Show when={props.edit} fallback={<Pre />}>\n        <div class={cx('n-editor', props.class)}>\n          <textarea\n            value={props.code}\n            classList={{\n              'line-numbers': props.lineNumber,\n              'not-toolbar': !props.toolbar,\n            }}\n            style={{ height: `${hei()}px` }}\n            onInput={change}\n          />\n          <Pre />\n        </div>\n      </Show>\n    </>\n  );\n}\n\ncustomElement<CodeProps>(\n  'n-code',\n  {\n    class: void 0,\n    code: void 0,\n    language: void 0,\n    children: void 0,\n    edit: void 0,\n    toolbar: void 0,\n    css: void 0,\n    lineNumber: void 0,\n    onChange: void 0,\n    webWorker: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        code: el.textContent,\n        css: el.css,\n        onChange(val: string) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: val,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n      el.removeAttribute('css');\n    });\n\n    return <Code {...props} />;\n  },\n);\nexport default Code;\n"],"names":["createEffect","createResource","createSignal","mergeProps","onCleanup","onMount","Show","untrack","isFunction","setClipboard","css","cx","customElement","theme","style","cache","Prism","prismCss","Code","props","codeEl","baseStyle","diffLang","code","setCode","hei","setHei","isIntersecting","setIsIntersecting","fetchPrism","default","fetchPrismCss","prismJS","initObserver","IntersectionObserver","entries","initWorker","Worker","observer","webWorker","worker","copy","Pre","toolbar","language","split","lineNumber","class","edit","change","target","c","value","endsWith","onChange","update","e","innerHTML","data","getBoundingClientRect","height","cleanObserver","unobserve","disconnect","decodeURIComponent","_error","addEventListener","postMessage","JSON","stringify","test","languages","diff","highlight","markup","observe","removeEventListener","terminate","children","_","opt","el","element","textContent","val","dispatchEvent","CustomEvent","detail","replaceChildren","removeAttribute"],"mappings":"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"}