neko-ui 2.8.21 → 2.8.23

package/es/segmented/examples/custom-field-names.md

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

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

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

package/es/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":["For","Show","createEffect","createMemo","createSignal","mergeProps","isFunction","css","cx","customElement","style","FieldName","getOptions","theme","Segmented","props","box","baseStyle","isDark","value","setValue","defaultValue","offsetStyle","setOffsetStyle","cssVar","fieldNames","Object","assign","onChange","item","disabled","next","options","val","find","o","timer","setTimeout","clearTimeout","el","ref","offsetWidth","offsetHeight","offsetLeft","i","readOnly","handleChange","fieldName","name","key","icon","label","suffix","class","_","opt","element","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":["createEffect","createMemo","createSignal","For","mergeProps","Show","isFunction","css","cx","customElement","FieldName","getOptions","theme","style","Segmented","props","box","baseStyle","isDark","value","setValue","defaultValue","offsetStyle","setOffsetStyle","cssVar","fieldNames","Object","assign","onChange","item","disabled","next","options","val","find","o","timer","setTimeout","clearTimeout","el","ref","offsetWidth","offsetHeight","offsetLeft","i","readOnly","handleChange","fieldName","name","key","icon","label","suffix","class","_","opt","element","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"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"}

package/es/select/README.mdx

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

package/es/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/es/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/es/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/es/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/es/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/es/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/es/select/examples/no-data.md

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

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

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