neko-ui 2.8.21 → 2.8.23

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

@@ -0,0 +1,29 @@
+---
+title: 禁用某个选项
+description: 通过设置 `options` 中的 `disabled` 来禁用某个选项
+order: 3
+---
+
+```html
+<n-segmented default-value="1"></n-segmented>
+<script>
+  const el = container.querySelector('n-segmented');
+
+  el.options = [
+    { value: 1, label: '选项1' },
+    { value: 2, label: '选项2', disabled: true },
+    { value: 3, label: '选项3' },
+  ];
+</script>
+```
+
+```jsx
+<n-segmented
+  default-value={1}
+  options={[
+    { value: 1, label: '选项1' },
+    { value: 2, label: '选项2', disabled: true },
+    { value: 3, label: '选项3' },
+  ]}
+/>
+```

package/lib/segmented/examples/disabled.md

@@ -0,0 +1,18 @@
+---
+title: 不可用
+description: 禁用全部选项选项
+order: 4
+---
+
+```html
+<n-segmented default-value="Vue" disabled="true"></n-segmented>
+<script>
+  const el = container.querySelector('n-segmented');
+
+  el.options = ['React', 'Vue', 'SolidJS', 'Flutter'];
+</script>
+```
+
+```jsx
+<n-segmented default-value="Vue" disabled options={['React', 'Vue', 'SolidJS', 'Flutter']} />
+```

package/lib/segmented/examples/icon.md

@@ -0,0 +1,28 @@
+---
+title: 图标
+description: 为每个选项搭配上图标
+order: 5
+---
+
+```html
+<n-segmented default-value="3"></n-segmented>
+<script>
+  const el = container.querySelector('n-segmented');
+  const icon = document.createElement('span');
+
+  icon.textContent = 'Ⓒ';
+  icon.style.color = 'red';
+  el.options = ['HTML', { value: 3, label: 'CSS', icon: icon }, 'JavaScript'];
+</script>
+```
+
+```jsx
+<n-segmented
+  default-value={3}
+  options={[
+    'HTML',
+    { value: 3, label: 'CSS', icon: <span style={{ color: 'red' }}>Ⓒ</span> },
+    'JavaScript',
+  ]}
+/>
+```

package/lib/segmented/examples/options.md

@@ -0,0 +1,21 @@
+---
+title: 单独配置
+description: 单独配置标题和值
+order: 2
+---
+
+```html
+<n-segmented default-value="3"></n-segmented>
+<script>
+  const el = container.querySelector('n-segmented');
+
+  el.options = ['HTML', 'CSS', { value: 3, label: 'TypeScript' }, 'Dart', 'Swift', 'Rust'];
+</script>
+```
+
+```jsx
+<n-segmented
+  default-value={3}
+  options={['HTML', 'CSS', { value: 3, label: 'TypeScript' }, 'Dart', 'Swift', 'Rust']}
+/>
+```

package/lib/segmented/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return h}});const e=require("solid-js/web"),t=require("solid-js"),n=u(require("@moneko/common/lib/isFunction")),r=require("@moneko/css"),l=require("solid-element"),a=require("./style"),s=require("../basic-config"),i=u(require("../get-options")),o=u(require("../theme"));function u(e){return e&&e.__esModule?e:{default:e}}require("../typography");const d=(0,e.template)("<style> "),c=(0,e.template)("<style>"),f=(0,e.template)("<div>"),m=(0,e.template)('<input class="segmented" type="radio">'),p=(0,e.template)('<span class="icon">'),g=(0,e.template)('<n-typography type="secondary">',!0,!1),b=(0,e.template)("<label>");function v(l){let u;let{baseStyle:v,isDark:h}=o.default,[y,C]=(0,t.createSignal)(l.defaultValue),[x,w]=(0,t.createSignal)(""),q=(0,t.createMemo)(()=>h()?(0,r.css)`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return h}});const e=require("solid-js/web"),t=require("solid-js"),n=u(require("@moneko/common/lib/isFunction")),r=require("@moneko/css"),l=require("solid-element"),a=require("../basic-config"),s=u(require("../get-options")),i=u(require("../theme")),o=require("./style");function u(e){return e&&e.__esModule?e:{default:e}}require("../typography");const d=(0,e.template)("<style> "),c=(0,e.template)("<style>"),f=(0,e.template)("<div>"),m=(0,e.template)('<input class="segmented" type="radio">'),p=(0,e.template)('<span class="icon">'),g=(0,e.template)('<n-typography type="secondary">',!0,!1),b=(0,e.template)("<label>");function v(l){let u;let{baseStyle:v,isDark:h}=i.default,[y,C]=(0,t.createSignal)(l.defaultValue),[x,w]=(0,t.createSignal)(""),q=(0,t.createMemo)(()=>h()?(0,r.css)`
         :host {
           --segmented-bg: #000;
           --segmented-current-bg: #1f1f1f;
@@ -8,5 +8,5 @@
         --segmented-bg: var(--primary-details-bg);
         --segmented-current-bg: #fff;
       }
-    `),E=(0,t.createMemo)(()=>Object.assign({},s.FieldName,l.fieldNames));function k(e){if(!l.disabled&&!e.disabled){let t=e[E().value];(0,n.default)(l.onChange)&&l.onChange(t),void 0===l.value&&C(t)}}let N=(0,t.createMemo)(()=>(0,i.default)(l.options,E()));return(0,t.createEffect)(()=>{C(void 0!==l.value&&l.value||l.defaultValue)}),(0,t.createEffect)(()=>{let e=N().find(e=>e[E().value]===y()),t=setTimeout(()=>{clearTimeout(t);let n=e?.ref;n?w(`.box {--w: ${n.offsetWidth}px;--h: ${n.offsetHeight}px;--left: ${n.offsetLeft}px;}`):w("")},0)}),[(()=>{let t=d(),n=t.firstChild;return(0,e.effect)(()=>n.data=v()),t})(),(()=>{let t=d(),n=t.firstChild;return(0,e.effect)(()=>n.data=q()),t})(),(()=>{let e=c();return e.textContent=a.style,e})(),(()=>{let t=d(),n=t.firstChild;return(0,e.effect)(()=>n.data=x()),t})(),(0,e.createComponent)(t.Show,{get when(){return l.css},get children(){let t=d(),n=t.firstChild;return(0,e.effect)(()=>n.data=(0,r.css)(l.css)),t}}),(()=>{let n=f(),a=u;return"function"==typeof a?(0,e.use)(a,n):u=n,(0,e.insert)(n,(0,e.createComponent)(t.For,{get each(){return N()},children:(n,a)=>{let s=l.disabled||n.disabled,i=()=>k(n),o=E();return[(()=>{let t=m();return(0,e.addEventListener)(t,"change",i),t.disabled=s,(0,e.effect)(()=>(0,e.setAttribute)(t,"name",l.name)),(0,e.effect)(()=>t.value=n[o.value]),(0,e.effect)(()=>t.checked=n[o.value]===y()),t})(),(()=>{let l=b(),u=N()[a()].ref;return"function"==typeof u?(0,e.use)(u,l):N()[a()].ref=l,(0,e.addEventListener)(l,"click",i,!0),l.$$keyup=({key:e})=>{"Enter"===e&&k(n)},(0,e.setAttribute)(l,"tabindex",s?-1:0),(0,e.setAttribute)(l,"aria-disabled",s),(0,e.insert)(l,(0,e.createComponent)(t.Show,{get when(){return n[o.icon]},get children(){let t=p();return(0,e.insert)(t,()=>n[o.icon]),t}}),null),(0,e.insert)(l,()=>n[o.label],null),(0,e.insert)(l,(0,e.createComponent)(t.Show,{get when(){return n[o.suffix]},get children(){let t=g();return t._$owner=(0,e.getOwner)(),(0,e.insert)(t,()=>n[o.suffix]),t}}),null),(0,e.effect)(()=>(0,e.className)(l,(0,r.cx)("label",n.class))),l})()]}})),(0,e.effect)(()=>(0,e.className)(n,(0,r.cx)("box",l.class))),n})()]}(0,l.customElement)("n-segmented",{class:void 0,css:void 0,name:void 0,disabled:void 0,value:void 0,defaultValue:void 0,options:[],onChange:void 0,fieldNames:void 0},(n,r)=>{let l=r.element,a=(0,t.mergeProps)({css:l.css,name:l.name,disabled:l.disabled,value:l.value,defaultValue:l.defaultValue,options:l.options,fieldNames:l.fieldNames,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,a)});const h=v;(0,e.delegateEvents)(["click","keyup"]);
+    `),E=(0,t.createMemo)(()=>Object.assign({},a.FieldName,l.fieldNames));function k(e){if(!l.disabled&&!e.disabled){let t=e[E().value];(0,n.default)(l.onChange)&&l.onChange(t),void 0===l.value&&C(t)}}let N=(0,t.createMemo)(()=>(0,s.default)(l.options,E()));return(0,t.createEffect)(()=>{C(void 0!==l.value&&l.value||l.defaultValue)}),(0,t.createEffect)(()=>{let e=N().find(e=>e[E().value]===y()),t=setTimeout(()=>{clearTimeout(t);let n=e?.ref;n?w(`.box {--w: ${n.offsetWidth}px;--h: ${n.offsetHeight}px;--left: ${n.offsetLeft}px;}`):w("")},0)}),[(()=>{let t=d(),n=t.firstChild;return(0,e.effect)(()=>n.data=v()),t})(),(()=>{let t=d(),n=t.firstChild;return(0,e.effect)(()=>n.data=q()),t})(),(()=>{let e=c();return e.textContent=o.style,e})(),(()=>{let t=d(),n=t.firstChild;return(0,e.effect)(()=>n.data=x()),t})(),(0,e.createComponent)(t.Show,{get when(){return l.css},get children(){let t=d(),n=t.firstChild;return(0,e.effect)(()=>n.data=(0,r.css)(l.css)),t}}),(()=>{let n=f(),a=u;return"function"==typeof a?(0,e.use)(a,n):u=n,(0,e.insert)(n,(0,e.createComponent)(t.For,{get each(){return N()},children:(n,a)=>{let s=l.disabled||n.disabled,i=()=>{k(n)},o=E();return[(()=>{let t=m();return(0,e.addEventListener)(t,"change",i),t.disabled=s,(0,e.effect)(()=>(0,e.setAttribute)(t,"name",l.name)),(0,e.effect)(()=>t.value=n[o.value]),(0,e.effect)(()=>t.checked=n[o.value]===y()),t})(),(()=>{let l=b(),u=N()[a()].ref;return"function"==typeof u?(0,e.use)(u,l):N()[a()].ref=l,(0,e.addEventListener)(l,"click",i,!0),l.$$keyup=({key:e})=>{"Enter"===e&&k(n)},(0,e.setAttribute)(l,"tabindex",s?-1:0),(0,e.setAttribute)(l,"aria-disabled",s),(0,e.insert)(l,(0,e.createComponent)(t.Show,{get when(){return n[o.icon]},get children(){let t=p();return(0,e.insert)(t,()=>n[o.icon]),t}}),null),(0,e.insert)(l,()=>n[o.label],null),(0,e.insert)(l,(0,e.createComponent)(t.Show,{get when(){return n[o.suffix]},get children(){let t=g();return t._$owner=(0,e.getOwner)(),(0,e.insert)(t,()=>n[o.suffix]),t}}),null),(0,e.effect)(()=>(0,e.className)(l,(0,r.cx)("label",n.class))),l})()]}})),(0,e.effect)(()=>(0,e.className)(n,(0,r.cx)("box",l.class))),n})()]}(0,l.customElement)("n-segmented",{class:void 0,css:void 0,name:void 0,disabled:void 0,value:void 0,defaultValue:void 0,options:[],onChange:void 0,fieldNames:void 0},(n,r)=>{let l=r.element,a=(0,t.mergeProps)({css:l.css,name:l.name,disabled:l.disabled,value:l.value,defaultValue:l.defaultValue,options:l.options,fieldNames:l.fieldNames,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,a)});const h=v;(0,e.delegateEvents)(["click","keyup"]);
 //# sourceMappingURL=index.js.map

package/lib/segmented/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/segmented/index.tsx"],"sourcesContent":["import { For, Show, createEffect, createMemo, createSignal, mergeProps } from 'solid-js';\nimport { isFunction } from '@moneko/common';\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 '../typography';\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\n\nexport interface SegmentedProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** input[type=\"radio\"] 的 name 属性 */\n  name?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 值 */\n  value?: string | number;\n  /** 默认值 */\n  defaultValue?: string | number;\n  /** 选项数据 */\n  options?: (BaseOption | string | number)[];\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n  /** 值修改时的回调方法 */\n  onChange?(val: string | number): void;\n}\n\nfunction Segmented(props: SegmentedProps) {\n  const { baseStyle, isDark } = theme;\n  const [value, setValue] = createSignal(props.defaultValue);\n  const [offsetStyle, setOffsetStyle] = createSignal('');\n  let box: HTMLDivElement | undefined;\n  const cssVar = createMemo(() => {\n    if (isDark()) {\n      return css`\n        :host {\n          --segmented-bg: #000;\n          --segmented-current-bg: #1f1f1f;\n        }\n      `;\n    }\n\n    return css`\n      :host {\n        --segmented-bg: var(--primary-details-bg);\n        --segmented-current-bg: #fff;\n      }\n    `;\n  });\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n\n  function onChange(item: BaseOption) {\n    if (!props.disabled && !item.disabled) {\n      const next = item[fieldNames().value];\n\n      if (isFunction(props.onChange)) {\n        props.onChange(next);\n      }\n      if (props.value === void 0) {\n        setValue(next);\n      }\n    }\n  }\n  function onKeyUp(key: string, item: BaseOption) {\n    if (key === 'Enter') {\n      onChange(item);\n    }\n  }\n  const options = createMemo(() => {\n    return getOptions(props.options, fieldNames());\n  });\n\n  createEffect(() => {\n    setValue((props.value !== void 0 && props.value) || props.defaultValue);\n  });\n\n  createEffect(() => {\n    const val = options().find((o) => o[fieldNames().value] === value());\n    const timer = setTimeout(() => {\n      clearTimeout(timer);\n      const el = val?.ref;\n\n      if (el) {\n        setOffsetStyle(\n          `.box {--w: ${el.offsetWidth}px;--h: ${el.offsetHeight}px;--left: ${el.offsetLeft}px;}`,\n        );\n      } else {\n        setOffsetStyle('');\n      }\n    }, 0);\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={cssVar()} />\n      <style textContent={style} />\n      <style textContent={offsetStyle()} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <div ref={box} class={cx('box', props.class)}>\n        <For each={options()}>\n          {(item, i) => {\n            const readOnly = props.disabled || item.disabled;\n            const handleChange = () => onChange(item);\n            const fieldName = fieldNames();\n\n            return (\n              <>\n                <input\n                  class=\"segmented\"\n                  type=\"radio\"\n                  name={props.name}\n                  value={item[fieldName.value]}\n                  disabled={readOnly}\n                  checked={item[fieldName.value] === value()}\n                  onChange={handleChange}\n                />\n                <label\n                  class={cx('label', item.class)}\n                  tabindex={readOnly ? -1 : 0}\n                  onKeyUp={({ key }) => onKeyUp(key, item)}\n                  onClick={handleChange}\n                  aria-disabled={readOnly}\n                  ref={options()[i()].ref}\n                >\n                  <Show when={item[fieldName.icon]}>\n                    <span class=\"icon\">{item[fieldName.icon]}</span>\n                  </Show>\n                  {item[fieldName.label]}\n                  <Show when={item[fieldName.suffix]}>\n                    <n-typography type=\"secondary\">{item[fieldName.suffix]}</n-typography>\n                  </Show>\n                </label>\n              </>\n            );\n          }}\n        </For>\n      </div>\n    </>\n  );\n}\n\nexport type SegmentedElement = CustomElement<SegmentedProps>;\n\ncustomElement<SegmentedProps>(\n  'n-segmented',\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: [],\n    onChange: void 0,\n    fieldNames: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        name: el.name,\n        disabled: el.disabled,\n        value: el.value,\n        defaultValue: el.defaultValue,\n        options: el.options,\n        fieldNames: el.fieldNames,\n        onChange(next: string) {\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 <Segmented {...props} />;\n  },\n);\nexport default Segmented;\n"],"names":["Segmented","props","box","baseStyle","isDark","theme","value","setValue","createSignal","defaultValue","offsetStyle","setOffsetStyle","cssVar","createMemo","css","fieldNames","Object","assign","FieldName","onChange","item","disabled","next","isFunction","options","getOptions","createEffect","val","find","o","timer","setTimeout","clearTimeout","el","ref","offsetWidth","offsetHeight","offsetLeft","style","Show","For","i","readOnly","handleChange","fieldName","name","key","icon","label","suffix","cx","class","customElement","_","opt","element","mergeProps","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"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"}
+{"version":3,"sources":["../../components/segmented/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, mergeProps, Show } from 'solid-js';\nimport { isFunction } from '@moneko/common';\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\nimport '../typography';\n\nexport interface SegmentedProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** input[type=\"radio\"] 的 name 属性 */\n  name?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 值 */\n  value?: string | number;\n  /** 默认值 */\n  defaultValue?: string | number;\n  /** 选项数据 */\n  options?: (BaseOption | string | number)[];\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n  /** 值修改时的回调方法 */\n  onChange?(val: string | number): void;\n}\n\nfunction Segmented(props: SegmentedProps) {\n  const { baseStyle, isDark } = theme;\n  const [value, setValue] = createSignal(props.defaultValue);\n  const [offsetStyle, setOffsetStyle] = createSignal('');\n  let box: HTMLDivElement | undefined;\n  const cssVar = createMemo(() => {\n    if (isDark()) {\n      return css`\n        :host {\n          --segmented-bg: #000;\n          --segmented-current-bg: #1f1f1f;\n        }\n      `;\n    }\n\n    return css`\n      :host {\n        --segmented-bg: var(--primary-details-bg);\n        --segmented-current-bg: #fff;\n      }\n    `;\n  });\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n\n  function onChange(item: BaseOption) {\n    if (!props.disabled && !item.disabled) {\n      const next = item[fieldNames().value];\n\n      if (isFunction(props.onChange)) {\n        props.onChange(next);\n      }\n      if (props.value === void 0) {\n        setValue(next);\n      }\n    }\n  }\n  function onKeyUp(key: string, item: BaseOption) {\n    if (key === 'Enter') {\n      onChange(item);\n    }\n  }\n  const options = createMemo(() => {\n    return getOptions(props.options, fieldNames());\n  });\n\n  createEffect(() => {\n    setValue((props.value !== void 0 && props.value) || props.defaultValue);\n  });\n\n  createEffect(() => {\n    const val = options().find((o) => o[fieldNames().value] === value());\n    const timer = setTimeout(() => {\n      clearTimeout(timer);\n      const el = val?.ref;\n\n      if (el) {\n        setOffsetStyle(\n          `.box {--w: ${el.offsetWidth}px;--h: ${el.offsetHeight}px;--left: ${el.offsetLeft}px;}`,\n        );\n      } else {\n        setOffsetStyle('');\n      }\n    }, 0);\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={cssVar()} />\n      <style textContent={style} />\n      <style textContent={offsetStyle()} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <div ref={box} class={cx('box', props.class)}>\n        <For each={options()}>\n          {(item, i) => {\n            const readOnly = props.disabled || item.disabled;\n            const handleChange = () => {\n              onChange(item);\n            };\n            const fieldName = fieldNames();\n\n            return (\n              <>\n                <input\n                  class=\"segmented\"\n                  type=\"radio\"\n                  name={props.name}\n                  value={item[fieldName.value]}\n                  disabled={readOnly}\n                  checked={item[fieldName.value] === value()}\n                  onChange={handleChange}\n                />\n                <label\n                  class={cx('label', item.class)}\n                  tabindex={readOnly ? -1 : 0}\n                  onKeyUp={({ key }) => {\n                    onKeyUp(key, item);\n                  }}\n                  onClick={handleChange}\n                  aria-disabled={readOnly}\n                  ref={options()[i()].ref}\n                >\n                  <Show when={item[fieldName.icon]}>\n                    <span class=\"icon\">{item[fieldName.icon]}</span>\n                  </Show>\n                  {item[fieldName.label]}\n                  <Show when={item[fieldName.suffix]}>\n                    <n-typography type=\"secondary\">{item[fieldName.suffix]}</n-typography>\n                  </Show>\n                </label>\n              </>\n            );\n          }}\n        </For>\n      </div>\n    </>\n  );\n}\n\nexport type SegmentedElement = CustomElement<SegmentedProps>;\n\ncustomElement<SegmentedProps>(\n  'n-segmented',\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: [],\n    onChange: void 0,\n    fieldNames: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        name: el.name,\n        disabled: el.disabled,\n        value: el.value,\n        defaultValue: el.defaultValue,\n        options: el.options,\n        fieldNames: el.fieldNames,\n        onChange(next: string) {\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 <Segmented {...props} />;\n  },\n);\nexport default Segmented;\n"],"names":["Segmented","props","box","baseStyle","isDark","theme","value","setValue","createSignal","defaultValue","offsetStyle","setOffsetStyle","cssVar","createMemo","css","fieldNames","Object","assign","FieldName","onChange","item","disabled","next","isFunction","options","getOptions","createEffect","val","find","o","timer","setTimeout","clearTimeout","el","ref","offsetWidth","offsetHeight","offsetLeft","style","Show","For","i","readOnly","handleChange","fieldName","name","key","icon","label","suffix","cx","class","customElement","_","opt","element","mergeProps","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"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"}

package/lib/select/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据录入
+title: 下拉选择
+subtitle: n-select
+icon: ▼
+---
+
+# Select 下拉选择
+
+> 下拉选择

package/lib/select/examples/basic.md

@@ -0,0 +1,44 @@
+---
+title: 最简单的用法
+description: 通过 `default-value` 属性设置默认值
+order: 1
+---
+
+```html
+<n-select default-value="C" label="最简单的配置" placeholder="请选择"></n-select>
+<div>或者</div>
+<n-select default-value="2"></n-select>
+<script>
+  const els = container.querySelectorAll('n-select');
+
+  els[0].options = ['A', 'B', 'C', 'D'];
+  els[1].options = [
+    {
+      label: '分组1',
+      options: [
+        { value: 1, label: '选项 1' },
+        { value: 2, label: '选项 2' },
+      ],
+    },
+    { label: '分组2', options: [{ value: 4, label: '选项 4' }] },
+  ];
+</script>
+```
+
+```jsx
+<n-select default-value="C" label="最简单的配置" options={['A', 'B', 'C', 'D']} />
+<div>或者</div>
+<n-select
+  default-value={2}
+  options={[
+    {
+      label: '分组1',
+      options: [
+        { value: 1, label: '选项 1' },
+        { value: 2, label: '选项 2' },
+      ],
+    },
+    { label: '分组2', options: [{ value: 4, label: '选项 4' }] },
+  ]}
+/>
+```

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

@@ -0,0 +1,21 @@
+---
+title: 禁用部分选项
+description: 设置 `options` 中的 `disabled` 属性禁用部分选项
+order: 2
+---
+
+```html
+<n-select placeholder="请选择"></n-select>
+<script>
+  const el = container.querySelector('n-select');
+
+  el.options = ['默认', { value: '2', label: '附加', disabled: true }, '去除'];
+</script>
+```
+
+```jsx
+<n-select
+  placeholder="请选择"
+  options={['默认', { value: '2', label: '附加', disabled: true }, '去除']}
+/>
+```

package/lib/select/examples/disabled.md

@@ -0,0 +1,24 @@
+---
+title: 不可用状态
+description: 设置 `disabled` 属性禁用操作
+order: 3
+---
+
+```html
+<n-select default-value="B" disabled="true"></n-select>
+<hr />
+<n-select multiple="true" disabled="true"></n-select>
+<script>
+  const el = container.querySelectorAll('n-select');
+
+  el[0].options = ['A', 'B', 'D'];
+  el[1].options = ['A', 'B', 'D'];
+  el[1].value = ['A', 'D'];
+</script>
+```
+
+```jsx
+<n-select default-value="B" disabled options={['A', 'B', 'D']} />
+<hr />
+<n-select value={['A', 'D']} multiple disabled options={['A', 'B', 'D']} />
+```

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

@@ -0,0 +1,40 @@
+---
+title: 自定义字段名
+description: 自定义节点 'label'、'value'、'options' 的字段
+order: 5
+---
+
+```html
+<n-select default-value="3" placeholder="请选择"></n-select>
+<script>
+  const el = container.querySelector('n-select');
+
+  el.fieldNames = {
+    label: 'name',
+    value: 'code',
+  };
+  el.options = [
+    { code: '1', name: 'option-1' },
+    { code: '2', name: 'option-2' },
+    { code: '3', name: 'option-3' },
+    { code: '4', name: 'option-4' },
+  ];
+</script>
+```
+
+```jsx
+<n-select
+  default-value="3"
+  placeholder="请选择"
+  field-names={{
+    label: 'name',
+    value: 'code',
+  }}
+  options={[
+    { code: '1', name: 'option-1' },
+    { code: '2', name: 'option-2' },
+    { code: '3', name: 'option-3' },
+    { code: '4', name: 'option-4' },
+  ]}
+/>
+```

package/lib/select/examples/item-suffix.md

@@ -0,0 +1,84 @@
+---
+title: 给选项添加后缀
+description: 可以使用 `suffix` 给选项添加一个描述
+order: 8
+---
+
+```html
+<n-select default-value="3" placeholder="请选择"></n-select>
+<script>
+  const el = container.querySelector('n-select');
+  el.options = [
+    {
+      label: '人员',
+      suffix: () => {
+        // 可以是一个函数, 返回 dom
+        const add = document.createElement('n-popover');
+
+        add.textContent = '?';
+        add.style.cursor = 'pointer';
+        add.content = '这里是人员列表';
+        add.arrow = true;
+        add.onmousedown = function (e) {
+          e.stopPropagation();
+          e.preventDefault();
+        };
+        return add;
+      },
+      children: [
+        // 也可以是string
+        { value: 1, label: '张三', suffix: 'zhangsan' },
+        { value: 2, label: '李四', suffix: 'lishi' },
+        { value: 3, label: '王五', suffix: 'wangwu' },
+      ],
+    },
+    {
+      label: '其他',
+      options: [
+        // 也可以是string
+        { value: '11', label: '张三', suffix: 'zhangsan' },
+        { value: '22', label: '李四', suffix: 'lishi' },
+        { value: '33', label: '王五', suffix: 'wangwu' },
+      ],
+    },
+  ];
+</script>
+```
+
+```jsx
+<n-select
+  default-value="3"
+  placeholder="请选择"
+  options={[
+    {
+      label: '人员',
+      suffix: () => (
+        <n-popover
+          arrow={true}
+          onMouseDown={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+          }}
+          content={<strong style={{ padding: '16px' }}>这里是人员列表</strong>}
+        >
+          ?
+        </n-popover>
+      ),
+      children: [
+        { value: '1', label: '张三', suffix: 'zhangsan' },
+        { value: '2', label: '李四', suffix: 'lishi' },
+        { value: '3', label: '王五', suffix: 'wangwu' },
+      ],
+    },
+    {
+      label: '其他',
+      options: [
+        // 也可以是string
+        { value: '11', label: '张三', suffix: 'zhangsan' },
+        { value: '22', label: '李四', suffix: 'lishi' },
+        { value: '33', label: '王五', suffix: 'wangwu' },
+      ],
+    },
+  ]}
+/>
+```

package/lib/select/examples/multiple.md

@@ -0,0 +1,61 @@
+---
+title: 多选模式
+description: 设置 `multiple` 属性支持多选
+order: 4
+---
+
+```html
+<n-select multiple="true" placeholder="请选择"></n-select>
+<script>
+  const el = container.querySelector('n-select');
+
+  el.defaultValue = ['3', '6', '2'];
+  el.options = [
+    {
+      label: '普通',
+      options: [
+        { value: '1', label: '张三' },
+        { value: '2', label: '李四' },
+        { value: '3', label: '王五' },
+      ],
+    },
+    {
+      label: '华山派',
+      options: [
+        { value: '4', label: '赵六' },
+        { value: '7', label: '王五3' },
+        { value: '8', label: '赵六4', type: 'warning' },
+        { value: '5', label: '张三1', disabled: true },
+        { value: '6', label: '李四2', type: 'error' },
+      ],
+    },
+  ];
+</script>
+```
+
+```jsx
+<n-select
+  multiple
+  default-value={['2', '3']}
+  options={[
+    {
+      label: '普通',
+      options: [
+        { value: '1', label: '张三' },
+        { value: '2', label: '李四' },
+        { value: '3', label: '王五' },
+      ],
+    },
+    {
+      label: '华山派',
+      options: [
+        { value: '4', label: '赵六' },
+        { value: '7', label: '王五3' },
+        { value: '8', label: '赵六4', type: 'warning' },
+        { value: '5', label: '张三1', disabled: true },
+        { value: '6', label: '李四2', type: 'error' },
+      ],
+    },
+  ]}
+/>
+```

package/lib/select/examples/no-data.md

@@ -0,0 +1,12 @@
+---
+title: 无数据
+order: 5
+---
+
+```html
+<n-select></n-select>
+```
+
+```jsx
+<n-select />
+```

package/lib/select/examples/prefix-icon.md

@@ -0,0 +1,74 @@
+---
+title: 前缀
+description: 通过 `default-value` 属性设置默认值
+order: 1
+---
+
+```html
+<div style="display:flex;gap:10px;flex-direction:column;">
+  <n-select default-value="C" suffix-icon="😅" prefix-icon="🌞" label="后缀,前缀"></n-select>
+  <n-select suffix-icon="🌞" label="带后缀,无前缀"></n-select>
+  <n-select multiple="true" prefix-icon="🌞" label="后缀,前缀"></n-select>
+  <n-select prefix-icon="🌞" label="带前缀,无后缀"></n-select>
+  <n-select multiple="true" label="带后缀,无前缀" suffix-icon="🌞"></n-select>
+  <n-select multiple="true" prefix-icon="🌞" label="带前缀,无后缀"></n-select>
+  <n-select></n-select>
+</div>
+<script>
+  const els = container.querySelectorAll('n-select');
+  els[2].suffixIcon = function () {
+    const a = document.createElement('div');
+
+    a.innerHTML = `<n-popover arrow="true" content="这是一个提示">🔔</n-popover>`;
+    return a.firstElementChild;
+  };
+  for (var i = els.length - 1; i >= 0; i--) {
+    els[i].options = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
+    els[i].placeholder = '请选择';
+  }
+</script>
+```
+
+```jsx
+const opts = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
+
+render(
+  <div
+    style={{
+      display: 'flex',
+      gap: '10px',
+      'flex-direction': 'column',
+    }}
+  >
+    <n-select
+      default-value="C"
+      suffix-icon="😅"
+      prefix-icon={
+        <n-popover arrow content="这是一个提示">
+          😅
+        </n-popover>
+      }
+      label="后缀,前缀"
+      options={opts}
+      placeholder="请选择"
+    />
+    <n-select suffix-icon="🌞" label="带后缀,无前缀" options={opts} placeholder="请选择" />
+    <n-select
+      multiple
+      label="后缀,前缀"
+      suffix-icon={
+        <n-popover arrow content="这是一个提示">
+          🔔
+        </n-popover>
+      }
+      prefix-icon="🌞"
+      options={opts}
+      placeholder="请选择"
+    />
+    <n-select prefix-icon="🌞" label="带前缀,无后缀" options={opts} placeholder="请选择" />
+    <n-select multiple label="带后缀,无前缀" suffix-icon="🌞" options={opts} placeholder="请选择" />
+    <n-select multiple prefix-icon="🌞" label="带前缀,无后缀" options={opts} placeholder="请选择" />
+    <n-select placeholder="请选择" />
+  </div>
+);
+```

package/lib/select/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=c(require("@moneko/common/lib/isFunction")),r=require("solid-element"),a=require("./style"),o=require("../basic-config"),l=function(e,t){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=s(void 0);if(n&&n.has(e))return n.get(e);var r={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if("default"!==o&&Object.prototype.hasOwnProperty.call(e,o)){var l=a?Object.getOwnPropertyDescriptor(e,o):null;l&&(l.get||l.set)?Object.defineProperty(r,o,l):r[o]=e[o]}return r.default=e,n&&n.set(e,r),r}(require("../dropdown")),i=c(require("../get-options"));function c(e){return e&&e.__esModule?e:{default:e}}function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(s=function(e){return e?n:t})(e)}require("../tag");const u=(0,e.template)('<span class="prefix">'),d=(0,e.template)('<label class="label">'),p=(0,e.template)('<span class="suffix">'),f=(0,e.template)('<div class="select"><div class="tags">'),v=(0,e.template)('<span class="value">'),g=(0,e.template)('<span class="placeholder">'),h=(0,e.template)('<n-tag class="tag">',!0,!1);function b(r){let c,s;let[b,m]=(0,t.splitProps)(r,["css","value","onChange","open","onOpenChange","label","prefixIcon","suffixIcon","placeholder","trigger","options"]),[_,w]=(0,t.createSignal)(null),[y,$]=(0,t.createSignal)([]),[k,C]=(0,t.createSignal)(""),[E,O]=(0,t.createSignal)([]),[x,A]=(0,t.createSignal)({}),j=(0,t.createMemo)(()=>Object.assign({},o.FieldName,m.fieldNames));function S(e){m.disabled||((0,n.default)(b.onOpenChange)&&b.onOpenChange(e),void 0===b.open&&w(e))}function M(e){e.target?.parentElement===c?.parentNode?.parentNode?.activeElement&&S(!(0,t.untrack)(_))}function P(e,t){void 0===b.value&&$(e?Array.isArray(e)?e:[e]:[]),(0,n.default)(b.onChange)&&b.onChange(e,t)}function I({key:e}){switch(e){case"ArrowDown":case"ArrowUp":break;case"Backspace":if(m.multiple){let e=[...(0,t.untrack)(y)];e.splice(-1,1),P(e,(0,t.untrack)(x)[(0,t.untrack)(y).length-1])}else P(void 0,(0,t.untrack)(x)[(0,t.untrack)(y)[0]]);break;case"Enter":S(!(0,t.untrack)(_));break;case"Escape":S(!1)}}function q(e){e.stopPropagation(),e.preventDefault()}function L(e,n){q(n),P((0,t.untrack)(y).filter(t=>t!==e),(0,t.untrack)(x)[e])}function D(e){q(e),S(!0)}function N(e){q(e),(0,t.untrack)(_)&&S(!1)}(0,t.createEffect)(()=>{(0,t.batch)(()=>{let e=j(),t=(0,i.default)(b.options,e);O(t),A(function e(t,n){let r={};for(let a=0,o=t.length;a<o;a++){let o=t[a],l=o[n.options];r[o[n.value]]=o,Array.isArray(l)&&Object.assign(r,e(l,n));let i=o[n.children];r[o[n.value]]=o,Array.isArray(i)&&Object.assign(r,e(i,n))}return r}(t,e))})}),(0,t.createEffect)(()=>{(0,t.batch)(()=>{b.open!==(0,t.untrack)(_)&&void 0!==b.open&&w(b.open),void 0!==b.value&&null!==b.value?$(Array.isArray(b.value)?b.value:[b.value]):$([])})}),(0,t.onMount)(()=>{if(void 0===b.value){let e=m.defaultValue;$(e?Array.isArray(e)?e:[e]:[])}}),(0,t.createEffect)(()=>{b.label&&C(`.label {--x: ${s?.offsetLeft||0}px; }`)});let W=(0,t.createMemo)(()=>(0,n.default)(b.prefixIcon)?b.prefixIcon():b.prefixIcon),F=(0,t.createMemo)(()=>(0,n.default)(b.label)?b.label():b.label),B=(0,t.createMemo)(()=>(0,n.default)(b.suffixIcon)?b.suffixIcon():b.suffixIcon);return(0,e.createComponent)(l.default,(0,e.mergeProps)({placement:"left",get css(){return a.style+k()+(b.css||"")},trigger:"none",get items(){return E()},get value(){return y()},onChange:P,get open(){return _()},onOpenChange:S},m,{get children(){let n=f(),r=c,a=n.firstChild,o=s;return(0,e.addEventListener)(n,"blur",N),(0,e.addEventListener)(n,"focus",D),(0,e.addEventListener)(n,"keydown",I,!0),"function"==typeof r?(0,e.use)(r,n):c=n,(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return W()},get children(){let t=u();return(0,e.insert)(t,W),t}}),a),(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return F()},get children(){let t=d();return(0,e.insert)(t,F),t}}),a),(0,e.addEventListener)(a,"mousedown",M,!0),"function"==typeof o?(0,e.use)(o,a):s=a,(0,e.insert)(a,(0,e.createComponent)(t.Show,{get when(){return m.multiple},get fallback(){return(0,e.createComponent)(t.Show,{get when(){return y().length},get fallback(){return(0,e.createComponent)(t.Show,{get when(){return b.placeholder},get children(){let t=g();return(0,e.insert)(t,()=>b.placeholder),t}})},get children(){let t=v();return(0,e.insert)(t,()=>x()[y()[0]]?.[j().label]||y()[0]),(0,e.effect)(()=>t.classList.toggle("opacity",!!_())),t}})},get children(){return(0,e.createComponent)(t.For,{get each(){return y()},get fallback(){return(0,e.createComponent)(t.Show,{get when(){return b.placeholder},get children(){let t=g();return(0,e.insert)(t,()=>b.placeholder),t}})},children:t=>(()=>{let n=h();return(0,e.addEventListener)(n,"close",L.bind(null,t)),n._$owner=(0,e.getOwner)(),(0,e.insert)(n,()=>x()[t]?.[j().label]||t),(0,e.effect)(e=>{let r=!!_(),a=x()[t]?.type||"primary",o=x()[t]?.color,l=x()[t]?.icon,i=!m.disabled&&!x()[t]?.disabled,c=m.disabled||x()[t]?.disabled;return r!==e._v$3&&n.classList.toggle("opacity",e._v$3=r),a!==e._v$4&&(n.type=e._v$4=a),o!==e._v$5&&(n.color=e._v$5=o),l!==e._v$6&&(n.icon=e._v$6=l),i!==e._v$7&&(n.closeIcon=e._v$7=i),c!==e._v$8&&(n.disabled=e._v$8=c),e},{_v$3:void 0,_v$4:void 0,_v$5:void 0,_v$6:void 0,_v$7:void 0,_v$8:void 0}),n})()})}})),(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return B()},get children(){let t=p();return(0,e.insert)(t,B),t}}),null),(0,e.effect)(t=>{let r=m.disabled?-1:0,a=m.disabled;return r!==t._v$&&(0,e.setAttribute)(n,"tabindex",t._v$=r),a!==t._v$2&&(0,e.setAttribute)(n,"aria-disabled",t._v$2=a),t},{_v$:void 0,_v$2:void 0}),n}}))}(0,r.customElement)("n-select",{...l.defaultProps,options:[],label:void 0,placeholder:"请选择",dropdownMatchSelectWidth:!0,prefixIcon:void 0,suffixIcon:void 0},(n,r)=>{let a=r.element,o=(0,t.mergeProps)({onChange(e,t){a.dispatchEvent(new CustomEvent("change",{detail:[e,t]}))},onOpenChange(e){a.dispatchEvent(new CustomEvent("openchange",{detail:e}))}},n);return(0,t.createEffect)(()=>{a.removeAttribute("options"),a.removeAttribute("field-names"),a.removeAttribute("css")}),(0,e.createComponent)(b,o)});const m=b;(0,e.delegateEvents)(["keydown","mousedown"]);
+"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=c(require("@moneko/common/lib/isFunction")),r=require("solid-element"),a=require("../basic-config"),o=function(e,t){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=s(void 0);if(n&&n.has(e))return n.get(e);var r={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if("default"!==o&&Object.prototype.hasOwnProperty.call(e,o)){var l=a?Object.getOwnPropertyDescriptor(e,o):null;l&&(l.get||l.set)?Object.defineProperty(r,o,l):r[o]=e[o]}return r.default=e,n&&n.set(e,r),r}(require("../dropdown")),l=c(require("../get-options")),i=require("./style");function c(e){return e&&e.__esModule?e:{default:e}}function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(s=function(e){return e?n:t})(e)}require("../tag");const u=(0,e.template)('<span class="prefix">'),d=(0,e.template)('<label class="label">'),p=(0,e.template)('<span class="suffix">'),f=(0,e.template)('<div class="select"><div class="tags">'),v=(0,e.template)('<span class="value">'),g=(0,e.template)('<span class="placeholder">'),h=(0,e.template)('<n-tag class="tag">',!0,!1);function b(r){let c,s;let[b,m]=(0,t.splitProps)(r,["css","value","onChange","open","onOpenChange","label","prefixIcon","suffixIcon","placeholder","trigger","options"]),[_,w]=(0,t.createSignal)(null),[y,$]=(0,t.createSignal)([]),[k,C]=(0,t.createSignal)(""),[E,O]=(0,t.createSignal)([]),[x,A]=(0,t.createSignal)({}),j=(0,t.createMemo)(()=>Object.assign({},a.FieldName,m.fieldNames));function S(e){m.disabled||((0,n.default)(b.onOpenChange)&&b.onOpenChange(e),void 0===b.open&&w(e))}function M(e){e.target?.parentElement===c?.parentNode?.parentNode?.activeElement&&S(!(0,t.untrack)(_))}function P(e,t){void 0===b.value&&$(e?Array.isArray(e)?e:[e]:[]),(0,n.default)(b.onChange)&&b.onChange(e,t)}function I({key:e}){switch(e){case"ArrowDown":case"ArrowUp":break;case"Backspace":if(m.multiple){let e=[...(0,t.untrack)(y)];e.splice(-1,1),P(e,(0,t.untrack)(x)[(0,t.untrack)(y).length-1])}else P(void 0,(0,t.untrack)(x)[(0,t.untrack)(y)[0]]);break;case"Enter":S(!(0,t.untrack)(_));break;case"Escape":S(!1)}}function q(e){e.stopPropagation(),e.preventDefault()}function L(e,n){q(n),P((0,t.untrack)(y).filter(t=>t!==e),(0,t.untrack)(x)[e])}function D(e){q(e),S(!0)}function N(e){q(e),(0,t.untrack)(_)&&S(!1)}(0,t.createEffect)(()=>{(0,t.batch)(()=>{let e=j(),t=(0,l.default)(b.options,e);O(t),A(function e(t,n){let r={};for(let a=0,o=t.length;a<o;a++){let o=t[a],l=o[n.options];r[o[n.value]]=o,Array.isArray(l)&&Object.assign(r,e(l,n));let i=o[n.children];r[o[n.value]]=o,Array.isArray(i)&&Object.assign(r,e(i,n))}return r}(t,e))})}),(0,t.createEffect)(()=>{(0,t.batch)(()=>{b.open!==(0,t.untrack)(_)&&void 0!==b.open&&w(b.open),void 0!==b.value&&null!==b.value?$(Array.isArray(b.value)?b.value:[b.value]):$([])})}),(0,t.onMount)(()=>{if(void 0===b.value){let e=m.defaultValue;$(e?Array.isArray(e)?e:[e]:[])}}),(0,t.createEffect)(()=>{b.label&&C(`.label {--x: ${s?.offsetLeft||0}px; }`)});let W=(0,t.createMemo)(()=>(0,n.default)(b.prefixIcon)?b.prefixIcon():b.prefixIcon),F=(0,t.createMemo)(()=>(0,n.default)(b.label)?b.label():b.label),B=(0,t.createMemo)(()=>(0,n.default)(b.suffixIcon)?b.suffixIcon():b.suffixIcon);return(0,e.createComponent)(o.default,(0,e.mergeProps)({placement:"left",get css(){return i.style+k()+(b.css||"")},trigger:"none",get items(){return E()},get value(){return y()},onChange:P,get open(){return _()},onOpenChange:S},m,{get children(){let n=f(),r=c,a=n.firstChild,o=s;return(0,e.addEventListener)(n,"blur",N),(0,e.addEventListener)(n,"focus",D),(0,e.addEventListener)(n,"keydown",I,!0),"function"==typeof r?(0,e.use)(r,n):c=n,(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return W()},get children(){let t=u();return(0,e.insert)(t,W),t}}),a),(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return F()},get children(){let t=d();return(0,e.insert)(t,F),t}}),a),(0,e.addEventListener)(a,"mousedown",M,!0),"function"==typeof o?(0,e.use)(o,a):s=a,(0,e.insert)(a,(0,e.createComponent)(t.Show,{get when(){return m.multiple},get fallback(){return(0,e.createComponent)(t.Show,{get when(){return y().length},get fallback(){return(0,e.createComponent)(t.Show,{get when(){return b.placeholder},get children(){let t=g();return(0,e.insert)(t,()=>b.placeholder),t}})},get children(){let t=v();return(0,e.insert)(t,()=>x()[y()[0]]?.[j().label]||y()[0]),(0,e.effect)(()=>t.classList.toggle("opacity",!!_())),t}})},get children(){return(0,e.createComponent)(t.For,{get each(){return y()},get fallback(){return(0,e.createComponent)(t.Show,{get when(){return b.placeholder},get children(){let t=g();return(0,e.insert)(t,()=>b.placeholder),t}})},children:t=>(()=>{let n=h();return(0,e.addEventListener)(n,"close",L.bind(null,t)),n._$owner=(0,e.getOwner)(),(0,e.insert)(n,()=>x()[t]?.[j().label]||t),(0,e.effect)(e=>{let r=!!_(),a=x()[t]?.type||"primary",o=x()[t]?.color,l=x()[t]?.icon,i=!m.disabled&&!x()[t]?.disabled,c=m.disabled||x()[t]?.disabled;return r!==e._v$3&&n.classList.toggle("opacity",e._v$3=r),a!==e._v$4&&(n.type=e._v$4=a),o!==e._v$5&&(n.color=e._v$5=o),l!==e._v$6&&(n.icon=e._v$6=l),i!==e._v$7&&(n.closeIcon=e._v$7=i),c!==e._v$8&&(n.disabled=e._v$8=c),e},{_v$3:void 0,_v$4:void 0,_v$5:void 0,_v$6:void 0,_v$7:void 0,_v$8:void 0}),n})()})}})),(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return B()},get children(){let t=p();return(0,e.insert)(t,B),t}}),null),(0,e.effect)(t=>{let r=m.disabled?-1:0,a=m.disabled;return r!==t._v$&&(0,e.setAttribute)(n,"tabindex",t._v$=r),a!==t._v$2&&(0,e.setAttribute)(n,"aria-disabled",t._v$2=a),t},{_v$:void 0,_v$2:void 0}),n}}))}(0,r.customElement)("n-select",{...o.defaultProps,options:[],label:void 0,placeholder:"请选择",dropdownMatchSelectWidth:!0,prefixIcon:void 0,suffixIcon:void 0},(n,r)=>{let a=r.element,o=(0,t.mergeProps)({onChange(e,t){a.dispatchEvent(new CustomEvent("change",{detail:[e,t]}))},onOpenChange(e){a.dispatchEvent(new CustomEvent("openchange",{detail:e}))}},n);return(0,t.createEffect)(()=>{a.removeAttribute("options"),a.removeAttribute("field-names"),a.removeAttribute("css")}),(0,e.createComponent)(b,o)});const m=b;(0,e.delegateEvents)(["keydown","mousedown"]);
 //# sourceMappingURL=index.js.map