neko-ui 2.8.21 → 2.8.23

package/es/menu/examples/icon.md

@@ -0,0 +1,125 @@
+---
+title: 带图标的选项
+description: 给每一项添加独特的图标
+order: 3
+---
+
+```html
+<n-menu></n-menu>
+<script>
+  const el = container.querySelector('n-menu');
+
+  el.openKeys = ['一级菜单'];
+  el.onchange = function (e) {
+    console.log(e.detail);
+  };
+  el.addEventListener('openchange', function (e) {
+    el.openKeys = e.detail;
+  });
+  el.items = [
+    {
+      label: '一级菜单',
+      icon: '❤️',
+      children: [
+        {
+          label: '动物',
+          options: [
+            { label: '狮子', value: '狮子', icon: '🦁', suffix: 'option' },
+            { label: '大青蛙', value: '大青蛙', icon: '🐸', suffix: 'option' },
+          ],
+        },
+        {
+          label: '动物2',
+          options: [
+            { label: '狮子', value: '狮子2', icon: '🦁', suffix: 'option' },
+            { label: '大青蛙', value: '大青蛙2', icon: '🐸', suffix: 'option' },
+          ],
+        },
+      ],
+    },
+    {
+      label: '二级菜单',
+      icon: '👂',
+      suffix: 'two',
+      children: [
+        {
+          label: '动物3',
+          options: [
+            { label: '狮子', value: '狮子3', suffix: 'option' },
+            { label: '大青蛙', value: '大青蛙3' },
+          ],
+        },
+        {
+          label: '动物4',
+          options: [
+            { label: '狮子', value: '狮子4' },
+            { label: '大青蛙', value: '大青蛙4', suffix: 'option' },
+          ],
+        },
+      ],
+    },
+  ];
+</script>
+```
+
+```jsx
+function Demo() {
+  let el;
+  const items = [
+    {
+      label: '一级菜单',
+      icon: '❤️',
+      children: [
+        {
+          label: '动物',
+          options: [
+            { label: '狮子', value: '狮子', icon: '🦁', suffix: 'option' },
+            { label: '大青蛙', value: '大青蛙', icon: '🐸', suffix: 'option' },
+          ],
+        },
+        {
+          label: '动物2',
+          options: [
+            { label: '狮子', value: '狮子2', icon: '🦁', suffix: 'option' },
+            { label: '大青蛙', value: '大青蛙2', icon: '🐸', suffix: 'option' },
+          ],
+        },
+      ],
+    },
+    {
+      label: '二级菜单',
+      icon: '👂',
+      suffix: 'two',
+      children: [
+        {
+          label: '动物3',
+          options: [
+            { label: '狮子', value: '狮子3', suffix: 'option' },
+            { label: '大青蛙', value: '大青蛙3' },
+          ],
+        },
+        {
+          label: '动物4',
+          options: [
+            { label: '狮子', value: '狮子4' },
+            { label: '大青蛙', value: '大青蛙4', suffix: 'option' },
+          ],
+        },
+      ],
+    },
+  ];
+
+  function openChange(e) {
+    el.openKeys = e.detail;
+  }
+
+  return (
+    <n-menu
+      ref={(e) => (el = e)}
+      open-keys={['一级菜单']}
+      onOpenChange={openChange}
+      items={items}
+    />
+  );
+}
+```

package/es/menu/examples/multiple.md

@@ -0,0 +1,42 @@
+---
+title: 多选模式
+description: 将 `multiple` 属性设置为 true, 进行多选操作, 当设置 `value` 时值受控
+order: 2
+---
+
+```html
+<n-menu selectable="true" multiple="true">
+  <div>可多选</div>
+</n-menu>
+<script>
+  const el = container.querySelector('n-menu');
+
+  el.items = [
+    { value: 'a', label: '张三' },
+    { value: 'b', label: '李四' },
+    { value: 'c', label: '王五', type: 'error' },
+    { value: 'd', label: '赵六' },
+  ];
+  el.value = ['a', 'c'];
+  el.onchange = function (e) {
+    e.target.value = e.detail.key;
+  };
+</script>
+```
+
+```jsx
+<n-menu
+  multiple
+  selectable
+  value={['2', '4']}
+  items={[
+    { value: '1', label: '张三' },
+    { value: '2', label: '李四' },
+    { value: '3', label: '王五' },
+    { value: '4', label: '赵六' },
+  ]}
+  onChange={(e) => {
+    e.target.value = e.detail.key;
+  }}
+/>
+```

package/es/menu/index.js

@@ -1,2 +1,2 @@
-import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{spread as s}from"solid-js/web";import{setAttribute as i}from"solid-js/web";import{memo as l}from"solid-js/web";import{insert as o}from"solid-js/web";import{effect as n}from"solid-js/web";import{delegateEvents as r}from"solid-js/web";import{createComponent as a}from"solid-js/web";import{className as d}from"solid-js/web";import{addEventListener as u}from"solid-js/web";let m=t('<span class="menu-icon" part="icon">'),f=t('<span class="menu-suffix" part="suffix">'),c=t('<div class="sub-menu-children" part="sub-menu-children"><div>'),v=t('<div part="sub-menu"><span class="sub-menu-title"><span class="menu-arrow">'),p=t('<div><span class="menu-group-title">'),g=t('<div part="item">'),h=t("<style> "),b=t("<style>"),w=t('<section class="menu" part="menu">');import{For as C,Match as $,Show as y,Switch as N,createEffect as _,createMemo as j,createSignal as A,mergeProps as k,splitProps as T,untrack as x}from"solid-js";import O from"@moneko/common/lib/frameCallback";import E from"@moneko/common/lib/isFunction";import{css as H,cx as K}from"@moneko/css";import{customElement as L}from"solid-element";import{style as D}from"./style";import{FieldName as P}from"../basic-config";import q from"../get-options";import F from"../theme";function S(t){let r;let{isDark:k,baseStyle:L}=F,[S,V]=T(t,["class","css","items","fieldNames","value","disabled","toggle","multiple","onChange","onOpenChange","openKeys"]),[z,B]=A([]),[G,I]=A([]),J=j(()=>`:host {--sub-menu-bg: ${k()?"rgb(255 255 255 / 1%)":"rgb(0 0 0 / 1%)"} ;}`),M=j(()=>Object.assign({},P,S.fieldNames)),Q=j(()=>q(S.items,M()));function R(e){e.preventDefault(),e.stopPropagation()}function U(e,t){if(t.preventDefault(),!e.disabled&&!S.disabled){let t=[...z()],s=e[M().value];if(S.multiple){let e=t.indexOf(s);-1===e?t.push(s):t.splice(e,1)}else t=S.toggle&&t[0]===s?[]:[s];E(S.onChange)&&S.onChange(S.multiple?t:t[0],e),void 0===S.value&&B(t)}}function W(t){return a(C,{get each(){return t.list},children:s=>{function r(){return[a(y,{get when(){return s[t.fieldNames.icon]},get children(){let e=m();return o(e,()=>s[t.fieldNames.icon]),e}}),l(()=>s[t.fieldNames.label]),(()=>{let e=f();return o(e,()=>s[t.fieldNames.suffix]),e})()]}function h(){let i=j(()=>G().includes(s[t.fieldNames.value])),[l,m]=A(x(i));function f(e){R(e);let i=G();i=i.includes(s[t.fieldNames.value])?i.filter(e=>e!==s[t.fieldNames.value]):i.concat(s[t.fieldNames.value]),E(S.onOpenChange)&&S.onOpenChange(i),void 0===S.openKeys&&I(i)}function p(){let l;let[r,d]=A();function f(){i()||m(!1)}return _(()=>{d((null==l?void 0:l.offsetHeight)||0)}),(()=>{let i=c(),d=i.firstChild,m=l;return u(i,"animationend",f),"function"==typeof m?e(m,d):l=d,o(d,a(W,{get fieldNames(){return t.fieldNames},get list(){return s[t.fieldNames.children]}})),n(()=>(r(),i.style.setProperty("--h",`${r()}px`))),i})()}return _(()=>{i()&&m(!0)}),(()=>{let e=v(),t=e.firstChild,m=t.firstChild;return u(e,"mousedown",R,!0),u(t,"click",f,!0),o(t,a(r,{}),m),o(e,a(y,{get when(){return l()},get children(){return a(p,{})}}),null),n(t=>{let l=K("sub-menu",s.class),o=!!i(),n=!i();return l!==t._v$&&d(e,t._v$=l),o!==t._v$2&&e.classList.toggle("sub-menu-open",t._v$2=o),n!==t._v$3&&e.classList.toggle("sub-menu-close",t._v$3=n),t},{_v$:void 0,_v$2:void 0,_v$3:void 0}),e})()}return a(N,{get fallback(){return(()=>{let e=g();return u(e,"click",U.bind(null,s),!0),u(e,"mousedown",R,!0),o(e,a(r,{})),n(l=>{let o=K("menu-item",s.class,s.type),n=s.handleClosed,r=S.disabled||s.disabled,a=z().includes(s[t.fieldNames.value]);return o!==l._v$4&&d(e,l._v$4=o),n!==l._v$5&&i(e,"handle-closed",l._v$5=n),r!==l._v$6&&i(e,"aria-disabled",l._v$6=r),a!==l._v$7&&i(e,"aria-selected",l._v$7=a),l},{_v$4:void 0,_v$5:void 0,_v$6:void 0,_v$7:void 0}),e})()},get children(){return[a($,{get when(){return Array.isArray(s[t.fieldNames.children])},get children(){return a(h,{})}}),a($,{get when(){return Array.isArray(s[t.fieldNames.options])},get children(){let e=p(),i=e.firstChild;return u(e,"mousedown",R,!0),o(i,a(r,{})),o(e,a(W,{get fieldNames(){return t.fieldNames},get list(){return s[t.fieldNames.options]}}),null),n(()=>d(e,K("menu-group",s.class))),e}})]}})}})}return _(()=>{void 0!==S.value&&null!==S.value?B(Array.isArray(S.value)?S.value:[S.value]):B([])}),_(()=>{Array.isArray(S.openKeys)&&I(S.openKeys)}),_(()=>{var e;(null==(e=z())?void 0:e.length)&&O(()=>{let e=null==r?void 0:r.querySelector("[aria-selected=true]");if(e&&r){let t=e.offsetTop-r.offsetTop;t<r.scrollTop?r.scrollTo({top:t,behavior:"smooth"}):e.offsetTop+e.offsetHeight>r.scrollTop+r.offsetHeight+r.offsetTop&&r.scrollTo({top:t-r.offsetHeight+e.offsetHeight,behavior:"smooth"})}})}),[(()=>{let e=h(),t=e.firstChild;return n(()=>t.data=L()),e})(),(()=>{let e=b();return e.textContent=D,e})(),(()=>{let e=h(),t=e.firstChild;return n(()=>t.data=J()),e})(),a(y,{get when(){return S.css},get children(){let e=h(),t=e.firstChild;return n(()=>t.data=H(S.css)),e}}),(()=>{let t=w(),i=r;return"function"==typeof i?e(i,t):r=t,s(t,V,!1,!0),o(t,a(W,{get fieldNames(){return M()},get list(){return Q()}})),t})()]}L("n-menu",{class:void 0,css:void 0,disabled:void 0,value:void 0,defaultValue:void 0,onOpenChange:void 0,openKeys:void 0,fieldNames:void 0,multiple:void 0,toggle:void 0,onChange:void 0,items:[]},(e,t)=>{let s=t.element,i=k({css:s.css,onChange(e,t){s.dispatchEvent(new CustomEvent("change",{detail:[e,t]}))},onOpenChange(e){s.dispatchEvent(new CustomEvent("openchange",{detail:e}))}},e);return _(()=>{s.removeAttribute("items"),s.removeAttribute("field-names"),s.removeAttribute("css")}),a(S,i)});export default S;r(["click","mousedown"]);
+import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{spread as s}from"solid-js/web";import{setAttribute as i}from"solid-js/web";import{memo as o}from"solid-js/web";import{insert as l}from"solid-js/web";import{effect as r}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as a}from"solid-js/web";import{className as d}from"solid-js/web";import{addEventListener as u}from"solid-js/web";let m=t('<span class="menu-icon" part="icon">'),f=t('<span class="menu-suffix" part="suffix">'),c=t('<div class="sub-menu-children" part="sub-menu-children"><div>'),p=t('<div part="sub-menu"><span class="sub-menu-title"><span class="menu-arrow">'),v=t('<div><span class="menu-group-title">'),g=t('<div part="item">'),h=t("<style> "),b=t("<style>"),y=t('<section class="menu" part="menu">');import{createEffect as w,createMemo as C,createSignal as $,For as N,Match as _,mergeProps as A,Show as j,splitProps as k,Switch as T,untrack as x}from"solid-js";import O from"@moneko/common/lib/frameCallback";import E from"@moneko/common/lib/isFunction";import{css as H,cx as K}from"@moneko/css";import{customElement as L}from"solid-element";import{FieldName as D}from"../basic-config";import P from"../get-options";import q from"../theme";import{style as F}from"./style";function S(t){let n;let{isDark:A,baseStyle:L}=q,[S,V]=k(t,["class","css","items","fieldNames","value","disabled","toggle","multiple","onChange","onOpenChange","openKeys"]),[z,B]=$([]),[G,I]=$([]),J=C(()=>`:host {--sub-menu-bg: ${A()?"rgb(255 255 255 / 1%)":"rgb(0 0 0 / 1%)"} ;}`),M=C(()=>Object.assign({},D,S.fieldNames)),Q=C(()=>P(S.items,M()));function R(e){e.preventDefault(),e.stopPropagation()}function U(e,t){if(t.preventDefault(),!e.disabled&&!S.disabled){let t=[...z()],s=e[M().value];if(S.multiple){let e=t.indexOf(s);-1===e?t.push(s):t.splice(e,1)}else t=S.toggle&&t[0]===s?[]:[s];E(S.onChange)&&S.onChange(S.multiple?t:t[0],e),void 0===S.value&&B(t)}}function W(t){return a(N,{get each(){return t.list},children:s=>{function n(){return[a(j,{get when(){return s[t.fieldNames.icon]},get children(){let e=m();return l(e,()=>s[t.fieldNames.icon]),e}}),o(()=>s[t.fieldNames.label]),(()=>{let e=f();return l(e,()=>s[t.fieldNames.suffix]),e})()]}function h(){let i=C(()=>G().includes(s[t.fieldNames.value])),[o,m]=$(x(i));function f(e){R(e);let i=G();i=i.includes(s[t.fieldNames.value])?i.filter(e=>e!==s[t.fieldNames.value]):i.concat(s[t.fieldNames.value]),E(S.onOpenChange)&&S.onOpenChange(i),void 0===S.openKeys&&I(i)}function v(){let o;let[n,d]=$();function f(){i()||m(!1)}return w(()=>{d((null==o?void 0:o.offsetHeight)||0)}),(()=>{let i=c(),d=i.firstChild,m=o;return u(i,"animationend",f),"function"==typeof m?e(m,d):o=d,l(d,a(W,{get fieldNames(){return t.fieldNames},get list(){return s[t.fieldNames.children]}})),r(()=>(n(),i.style.setProperty("--h",`${n()}px`))),i})()}return w(()=>{i()&&m(!0)}),(()=>{let e=p(),t=e.firstChild,m=t.firstChild;return u(e,"mousedown",R,!0),u(t,"click",f,!0),l(t,a(n,{}),m),l(e,a(j,{get when(){return o()},get children(){return a(v,{})}}),null),r(t=>{let o=K("sub-menu",s.class),l=!!i(),r=!i();return o!==t._v$&&d(e,t._v$=o),l!==t._v$2&&e.classList.toggle("sub-menu-open",t._v$2=l),r!==t._v$3&&e.classList.toggle("sub-menu-close",t._v$3=r),t},{_v$:void 0,_v$2:void 0,_v$3:void 0}),e})()}return a(T,{get fallback(){return(()=>{let e=g();return u(e,"click",U.bind(null,s),!0),u(e,"mousedown",R,!0),l(e,a(n,{})),r(o=>{let l=K("menu-item",s.class,s.type),r=s.handleClosed,n=S.disabled||s.disabled,a=z().includes(s[t.fieldNames.value]);return l!==o._v$4&&d(e,o._v$4=l),r!==o._v$5&&i(e,"handle-closed",o._v$5=r),n!==o._v$6&&i(e,"aria-disabled",o._v$6=n),a!==o._v$7&&i(e,"aria-selected",o._v$7=a),o},{_v$4:void 0,_v$5:void 0,_v$6:void 0,_v$7:void 0}),e})()},get children(){return[a(_,{get when(){return Array.isArray(s[t.fieldNames.children])},get children(){return a(h,{})}}),a(_,{get when(){return Array.isArray(s[t.fieldNames.options])},get children(){let e=v(),i=e.firstChild;return u(e,"mousedown",R,!0),l(i,a(n,{})),l(e,a(W,{get fieldNames(){return t.fieldNames},get list(){return s[t.fieldNames.options]}}),null),r(()=>d(e,K("menu-group",s.class))),e}})]}})}})}return w(()=>{void 0!==S.value&&null!==S.value?B(Array.isArray(S.value)?S.value:[S.value]):B([])}),w(()=>{Array.isArray(S.openKeys)&&I(S.openKeys)}),w(()=>{Array.isArray(z())&&z().length&&O(()=>{let e=null==n?void 0:n.querySelector("[aria-selected=true]");if(e&&n){let t=e.offsetTop-n.offsetTop;t<n.scrollTop?n.scrollTo({top:t,behavior:"smooth"}):e.offsetTop+e.offsetHeight>n.scrollTop+n.offsetHeight+n.offsetTop&&n.scrollTo({top:t-n.offsetHeight+e.offsetHeight,behavior:"smooth"})}})}),[(()=>{let e=h(),t=e.firstChild;return r(()=>t.data=L()),e})(),(()=>{let e=b();return e.textContent=F,e})(),(()=>{let e=h(),t=e.firstChild;return r(()=>t.data=J()),e})(),a(j,{get when(){return S.css},get children(){let e=h(),t=e.firstChild;return r(()=>t.data=H(S.css)),e}}),(()=>{let t=y(),i=n;return"function"==typeof i?e(i,t):n=t,s(t,V,!1,!0),l(t,a(W,{get fieldNames(){return M()},get list(){return Q()}})),t})()]}L("n-menu",{class:void 0,css:void 0,disabled:void 0,value:void 0,defaultValue:void 0,onOpenChange:void 0,openKeys:void 0,fieldNames:void 0,multiple:void 0,toggle:void 0,onChange:void 0,items:[]},(e,t)=>{let s=t.element,i=A({css:s.css,onChange(e,t){s.dispatchEvent(new CustomEvent("change",{detail:[e,t]}))},onOpenChange(e){s.dispatchEvent(new CustomEvent("openchange",{detail:e}))}},e);return w(()=>{s.removeAttribute("items"),s.removeAttribute("field-names"),s.removeAttribute("css")}),a(S,i)});export default S;n(["click","mousedown"]);
 //# sourceMappingURL=index.js.map

package/es/menu/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/menu/index.tsx"],"sourcesContent":["import {\n  For,\n  Match,\n  Show,\n  Switch,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { frameCallback, 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 type { BaseOption, BasicConfig, CustomElement } from '..';\n\nfunction Menu(props: MenuProps | MenuMultipleProps) {\n  let ref: HTMLDivElement | undefined;\n  const { isDark, baseStyle } = theme;\n  const [local, other] = splitProps(props, [\n    'class',\n    'css',\n    'items',\n    'fieldNames',\n    'value',\n    'disabled',\n    'toggle',\n    'multiple',\n    'onChange',\n    'onOpenChange',\n    'openKeys',\n  ]);\n  const [value, setValue] = createSignal<(string | number)[]>([]);\n  const [openKeys, setOpenKeys] = createSignal<(string | number)[]>([]);\n  const cssVar = createMemo(\n    () => `:host {--sub-menu-bg: ${isDark() ? 'rgb(255 255 255 / 1%)' : 'rgb(0 0 0 / 1%)'} ;}`,\n  );\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, local.fieldNames));\n  const options = createMemo(() => getOptions(local.items, fieldNames()));\n\n  function preventDefault(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  function change(item: MenuOption, e: MouseEvent) {\n    e.preventDefault();\n    if (!item.disabled && !local.disabled) {\n      let _value = [...value()];\n      const key = item[fieldNames().value]!;\n\n      if (local.multiple) {\n        const idx = _value.indexOf(key);\n\n        if (idx === -1) {\n          _value.push(key);\n        } else {\n          _value.splice(idx, 1);\n        }\n      } else if (local.toggle && _value[0] === key) {\n        _value = [];\n      } else {\n        _value = [key];\n      }\n      if (isFunction(local.onChange)) {\n        local.onChange((local.multiple ? _value : _value[0]) as never, item);\n      }\n      if (typeof local.value === 'undefined') {\n        setValue(_value);\n      }\n    }\n  }\n\n  interface RenderMenuProps {\n    list: MenuOption[];\n    fieldNames: { [key in keyof typeof FieldName]: string };\n  }\n  function RenderMenu(_: RenderMenuProps) {\n    return (\n      <For each={_.list}>\n        {(item) => {\n          function RowTitle() {\n            return (\n              <>\n                <Show when={item[_.fieldNames.icon]}>\n                  <span class=\"menu-icon\" part=\"icon\">\n                    {item[_.fieldNames.icon]}\n                  </span>\n                </Show>\n                {item[_.fieldNames.label]}\n                <span class=\"menu-suffix\" part=\"suffix\">\n                  {item[_.fieldNames.suffix]}\n                </span>\n              </>\n            );\n          }\n\n          function SubMenu() {\n            const isOpen = createMemo(() => openKeys().includes(item[_.fieldNames.value]!));\n            const [show, setShow] = createSignal<boolean>(untrack(isOpen));\n\n            createEffect(() => {\n              if (isOpen()) {\n                setShow(true);\n              }\n            });\n            function handleOpen(e: MouseEvent) {\n              preventDefault(e);\n              let _openKeys = openKeys();\n\n              if (_openKeys.includes(item[_.fieldNames.value]!)) {\n                _openKeys = _openKeys.filter((v) => v !== item[_.fieldNames.value]);\n              } else {\n                _openKeys = _openKeys.concat(item[_.fieldNames.value]!);\n              }\n\n              if (isFunction(local.onOpenChange)) {\n                local.onOpenChange(_openKeys);\n              }\n              if (local.openKeys === void 0) {\n                setOpenKeys(_openKeys);\n              }\n            }\n            function Child() {\n              let el: HTMLDivElement | undefined;\n              const [hei, setHei] = createSignal();\n\n              createEffect(() => {\n                setHei(el?.offsetHeight || 0);\n              });\n              function onAnimationEnd() {\n                if (!isOpen()) {\n                  setShow(false);\n                }\n              }\n              return (\n                <div\n                  class=\"sub-menu-children\"\n                  part=\"sub-menu-children\"\n                  style={{\n                    '--h': `${hei()}px`,\n                  }}\n                  onAnimationEnd={onAnimationEnd}\n                >\n                  <div ref={el}>\n                    <RenderMenu fieldNames={_.fieldNames} list={item[_.fieldNames.children]!} />\n                  </div>\n                </div>\n              );\n            }\n\n            return (\n              <div\n                class={cx('sub-menu', item.class)}\n                classList={{\n                  'sub-menu-open': isOpen(),\n                  'sub-menu-close': !isOpen(),\n                }}\n                part=\"sub-menu\"\n                onMouseDown={preventDefault}\n              >\n                <span class=\"sub-menu-title\" onClick={handleOpen}>\n                  <RowTitle />\n                  <span class=\"menu-arrow\" />\n                </span>\n                <Show when={show()}>\n                  <Child />\n                </Show>\n              </div>\n            );\n          }\n          return (\n            <Switch\n              fallback={\n                <div\n                  class={cx('menu-item', item.class, item.type)}\n                  part=\"item\"\n                  handle-closed={item.handleClosed}\n                  aria-disabled={local.disabled || item.disabled}\n                  aria-selected={value().includes(item[_.fieldNames.value]!)}\n                  onMouseDown={preventDefault}\n                  onClick={change.bind(null, item)}\n                >\n                  <RowTitle />\n                </div>\n              }\n            >\n              <Match when={Array.isArray(item[_.fieldNames.children])}>\n                <SubMenu />\n              </Match>\n              <Match when={Array.isArray(item[_.fieldNames.options])}>\n                <div class={cx('menu-group', item.class)} onMouseDown={preventDefault}>\n                  <span class=\"menu-group-title\">\n                    <RowTitle />\n                  </span>\n                  <RenderMenu fieldNames={_.fieldNames} list={item[_.fieldNames.options]!} />\n                </div>\n              </Match>\n            </Switch>\n          );\n        }}\n      </For>\n    );\n  }\n\n  createEffect(() => {\n    if (local.value !== void 0 && local.value !== null) {\n      setValue(Array.isArray(local.value) ? local.value : [local.value]);\n    } else {\n      setValue([]);\n    }\n  });\n  createEffect(() => {\n    if (Array.isArray(local.openKeys)) {\n      setOpenKeys(local.openKeys);\n    }\n  });\n\n  createEffect(() => {\n    if (value()?.length) {\n      frameCallback(() => {\n        const el = ref?.querySelector<HTMLElement>('[aria-selected=true]');\n\n        if (el && ref) {\n          const next = el.offsetTop - ref.offsetTop;\n\n          if (next < ref.scrollTop) {\n            ref.scrollTo({\n              top: next,\n              behavior: 'smooth',\n            });\n          } else if (\n            el.offsetTop + el.offsetHeight >\n            ref.scrollTop + ref.offsetHeight + ref.offsetTop\n          ) {\n            ref.scrollTo({\n              top: next - ref.offsetHeight + el.offsetHeight,\n              behavior: 'smooth',\n            });\n          }\n        }\n      });\n    }\n  });\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <style textContent={cssVar()} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <section ref={ref} class=\"menu\" part=\"menu\" {...other}>\n        <RenderMenu fieldNames={fieldNames()} list={options()} />\n      </section>\n    </>\n  );\n}\n\nexport interface BaseMenuProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 菜单展开的keys */\n  openKeys?: (string | number)[];\n  /** 菜单展开时触发的方法 */\n  onOpenChange?: (keys: (string | number)[]) => void;\n  /** 选项数据 */\n  items?: (string | MenuOption)[];\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n  /** 不可用状态 */\n  disabled?: boolean;\n  /** 可以取消 */\n  toggle?: boolean;\n}\n\nexport interface MenuProps extends BaseMenuProps {\n  /** 值修改时的回调方法 */\n  onChange?(val: string | number, item: MenuOption): void;\n  /** 值 */\n  value?: string | number;\n  /** 默认值 */\n  defaultValue?: string | number;\n  /** 可多选\n   * @default false\n   */\n  multiple?: false | never;\n}\n\nexport interface MenuMultipleProps extends BaseMenuProps {\n  /** 可多选\n   * @default true\n   */\n  multiple: true;\n  /** 值修改时的回调方法 */\n  onChange?(val: (string | number)[], item: MenuOption): void;\n  /** 值 */\n  value?: (string | number)[];\n  /** 默认值 */\n  defaultValue?: (string | number)[];\n}\n\n/** 菜单选项 */\nexport interface MenuOption extends Omit<BaseOption, 'children' | 'options'> {\n  /** 图标 */\n  icon?: JSX.Element;\n  /** 内置类型(状态) */\n  type?: 'primary' | 'success' | 'error' | 'warning';\n  /** 自定义颜色 */\n  color?: string;\n  /** 子菜单 */\n  children?: (string | MenuOption)[];\n  /** 分组子选项 */\n  options?: (string | MenuOption)[];\n}\n\nexport type MenuElement = CustomElement<MenuProps, 'onChange' | 'onOpenChange'>;\nexport type MenuMultipleElement = CustomElement<MenuMultipleProps, 'onChange' | 'onOpenChange'>;\n\ncustomElement<MenuProps>(\n  'n-menu',\n  {\n    class: void 0,\n    css: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    onOpenChange: void 0,\n    openKeys: void 0,\n    fieldNames: void 0,\n    multiple: void 0,\n    toggle: void 0,\n    onChange: void 0,\n    items: [],\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const defaultProps: Partial<MenuProps> = {\n      css: el.css,\n      onChange(key, item) {\n        el.dispatchEvent(\n          new CustomEvent('change', {\n            detail: [key, item],\n          }),\n        );\n      },\n      onOpenChange(keys) {\n        el.dispatchEvent(\n          new CustomEvent('openchange', {\n            detail: keys,\n          }),\n        );\n      },\n    };\n    const props = mergeProps(defaultProps, _);\n\n    createEffect(() => {\n      el.removeAttribute('items');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return <Menu {...props} />;\n  },\n);\n\nexport default Menu;\n"],"names":["For","Match","Show","Switch","createEffect","createMemo","createSignal","mergeProps","splitProps","untrack","frameCallback","isFunction","css","cx","customElement","style","FieldName","getOptions","theme","Menu","props","ref","isDark","baseStyle","local","other","value","setValue","openKeys","setOpenKeys","cssVar","fieldNames","Object","assign","options","items","preventDefault","e","stopPropagation","change","item","disabled","_value","key","multiple","idx","indexOf","push","splice","toggle","onChange","RenderMenu","_","list","RowTitle","icon","label","suffix","SubMenu","isOpen","includes","show","setShow","handleOpen","_openKeys","filter","v","concat","onOpenChange","Child","el","hei","setHei","onAnimationEnd","offsetHeight","children","class","bind","type","handleClosed","Array","isArray","length","querySelector","next","offsetTop","scrollTop","scrollTo","top","behavior","defaultValue","opt","element","dispatchEvent","CustomEvent","detail","keys","removeAttribute"],"mappings":"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"}
+{"version":3,"sources":["../../components/menu/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  For,\n  Match,\n  mergeProps,\n  Show,\n  splitProps,\n  Switch,\n  untrack,\n} from 'solid-js';\nimport { frameCallback, 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\nfunction Menu(props: MenuProps | MenuMultipleProps) {\n  let ref: HTMLDivElement | undefined;\n  const { isDark, baseStyle } = theme;\n  const [local, other] = splitProps(props, [\n    'class',\n    'css',\n    'items',\n    'fieldNames',\n    'value',\n    'disabled',\n    'toggle',\n    'multiple',\n    'onChange',\n    'onOpenChange',\n    'openKeys',\n  ]);\n  const [value, setValue] = createSignal<(string | number)[]>([]);\n  const [openKeys, setOpenKeys] = createSignal<(string | number)[]>([]);\n  const cssVar = createMemo(\n    () => `:host {--sub-menu-bg: ${isDark() ? 'rgb(255 255 255 / 1%)' : 'rgb(0 0 0 / 1%)'} ;}`,\n  );\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, local.fieldNames));\n  const options = createMemo(() => getOptions(local.items, fieldNames()));\n\n  function preventDefault(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  function change(item: MenuOption, e: MouseEvent) {\n    e.preventDefault();\n    if (!item.disabled && !local.disabled) {\n      let _value = [...value()];\n      const key = item[fieldNames().value]!;\n\n      if (local.multiple) {\n        const idx = _value.indexOf(key);\n\n        if (idx === -1) {\n          _value.push(key);\n        } else {\n          _value.splice(idx, 1);\n        }\n      } else if (local.toggle && _value[0] === key) {\n        _value = [];\n      } else {\n        _value = [key];\n      }\n      if (isFunction(local.onChange)) {\n        local.onChange((local.multiple ? _value : _value[0]) as never, item);\n      }\n      if (typeof local.value === 'undefined') {\n        setValue(_value);\n      }\n    }\n  }\n\n  interface RenderMenuProps {\n    list: MenuOption[];\n    fieldNames: { [key in keyof typeof FieldName]: string };\n  }\n  function RenderMenu(_: RenderMenuProps) {\n    return (\n      <For each={_.list}>\n        {(item) => {\n          function RowTitle() {\n            return (\n              <>\n                <Show when={item[_.fieldNames.icon]}>\n                  <span class=\"menu-icon\" part=\"icon\">\n                    {item[_.fieldNames.icon]}\n                  </span>\n                </Show>\n                {item[_.fieldNames.label]}\n                <span class=\"menu-suffix\" part=\"suffix\">\n                  {item[_.fieldNames.suffix]}\n                </span>\n              </>\n            );\n          }\n\n          function SubMenu() {\n            const isOpen = createMemo(() => openKeys().includes(item[_.fieldNames.value]));\n            const [show, setShow] = createSignal<boolean>(untrack(isOpen));\n\n            createEffect(() => {\n              if (isOpen()) {\n                setShow(true);\n              }\n            });\n            function handleOpen(e: MouseEvent) {\n              preventDefault(e);\n              let _openKeys = openKeys();\n\n              if (_openKeys.includes(item[_.fieldNames.value])) {\n                _openKeys = _openKeys.filter((v) => v !== item[_.fieldNames.value]);\n              } else {\n                _openKeys = _openKeys.concat(item[_.fieldNames.value]);\n              }\n\n              if (isFunction(local.onOpenChange)) {\n                local.onOpenChange(_openKeys);\n              }\n              if (local.openKeys === void 0) {\n                setOpenKeys(_openKeys);\n              }\n            }\n            function Child() {\n              let el: HTMLDivElement | undefined;\n              const [hei, setHei] = createSignal();\n\n              createEffect(() => {\n                setHei(el?.offsetHeight || 0);\n              });\n              function onAnimationEnd() {\n                if (!isOpen()) {\n                  setShow(false);\n                }\n              }\n              return (\n                <div\n                  class=\"sub-menu-children\"\n                  part=\"sub-menu-children\"\n                  style={{\n                    '--h': `${hei()}px`,\n                  }}\n                  onAnimationEnd={onAnimationEnd}\n                >\n                  <div ref={el}>\n                    <RenderMenu fieldNames={_.fieldNames} list={item[_.fieldNames.children]} />\n                  </div>\n                </div>\n              );\n            }\n\n            return (\n              <div\n                class={cx('sub-menu', item.class)}\n                classList={{\n                  'sub-menu-open': isOpen(),\n                  'sub-menu-close': !isOpen(),\n                }}\n                part=\"sub-menu\"\n                onMouseDown={preventDefault}\n              >\n                <span class=\"sub-menu-title\" onClick={handleOpen}>\n                  <RowTitle />\n                  <span class=\"menu-arrow\" />\n                </span>\n                <Show when={show()}>\n                  <Child />\n                </Show>\n              </div>\n            );\n          }\n          return (\n            <Switch\n              fallback={\n                <div\n                  class={cx('menu-item', item.class, item.type)}\n                  part=\"item\"\n                  handle-closed={item.handleClosed}\n                  aria-disabled={local.disabled || item.disabled}\n                  aria-selected={value().includes(item[_.fieldNames.value])}\n                  onMouseDown={preventDefault}\n                  onClick={change.bind(null, item)}\n                >\n                  <RowTitle />\n                </div>\n              }\n            >\n              <Match when={Array.isArray(item[_.fieldNames.children])}>\n                <SubMenu />\n              </Match>\n              <Match when={Array.isArray(item[_.fieldNames.options])}>\n                <div class={cx('menu-group', item.class)} onMouseDown={preventDefault}>\n                  <span class=\"menu-group-title\">\n                    <RowTitle />\n                  </span>\n                  <RenderMenu fieldNames={_.fieldNames} list={item[_.fieldNames.options]} />\n                </div>\n              </Match>\n            </Switch>\n          );\n        }}\n      </For>\n    );\n  }\n\n  createEffect(() => {\n    if (local.value !== void 0 && local.value !== null) {\n      setValue(Array.isArray(local.value) ? local.value : [local.value]);\n    } else {\n      setValue([]);\n    }\n  });\n  createEffect(() => {\n    if (Array.isArray(local.openKeys)) {\n      setOpenKeys(local.openKeys);\n    }\n  });\n\n  createEffect(() => {\n    if (Array.isArray(value()) && value().length) {\n      frameCallback(() => {\n        const el = ref?.querySelector<HTMLElement>('[aria-selected=true]');\n\n        if (el && ref) {\n          const next = el.offsetTop - ref.offsetTop;\n\n          if (next < ref.scrollTop) {\n            ref.scrollTo({\n              top: next,\n              behavior: 'smooth',\n            });\n          } else if (\n            el.offsetTop + el.offsetHeight >\n            ref.scrollTop + ref.offsetHeight + ref.offsetTop\n          ) {\n            ref.scrollTo({\n              top: next - ref.offsetHeight + el.offsetHeight,\n              behavior: 'smooth',\n            });\n          }\n        }\n      });\n    }\n  });\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <style textContent={cssVar()} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <section ref={ref} class=\"menu\" part=\"menu\" {...other}>\n        <RenderMenu fieldNames={fieldNames()} list={options()} />\n      </section>\n    </>\n  );\n}\n\nexport interface BaseMenuProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 菜单展开的keys */\n  openKeys?: (string | number)[];\n  /** 菜单展开时触发的方法 */\n  onOpenChange?: (keys: (string | number)[]) => void;\n  /** 选项数据 */\n  items?: (string | MenuOption)[];\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n  /** 不可用状态 */\n  disabled?: boolean;\n  /** 可以取消 */\n  toggle?: boolean;\n}\n\nexport interface MenuProps extends BaseMenuProps {\n  /** 值修改时的回调方法 */\n  onChange?(val: string | number, item: MenuOption): void;\n  /** 值 */\n  value?: string | number;\n  /** 默认值 */\n  defaultValue?: string | number;\n  /** 可多选\n   * @default false\n   */\n  multiple?: false | never;\n}\n\nexport interface MenuMultipleProps extends BaseMenuProps {\n  /** 可多选\n   * @default true\n   */\n  multiple: true;\n  /** 值修改时的回调方法 */\n  onChange?(val: (string | number)[], item: MenuOption): void;\n  /** 值 */\n  value?: (string | number)[];\n  /** 默认值 */\n  defaultValue?: (string | number)[];\n}\n\n/** 菜单选项 */\nexport interface MenuOption extends Omit<BaseOption, 'children' | 'options'> {\n  /** 图标 */\n  icon?: JSX.Element;\n  /** 内置类型(状态) */\n  type?: 'primary' | 'success' | 'error' | 'warning';\n  /** 自定义颜色 */\n  color?: string;\n  /** 子菜单 */\n  children?: (string | MenuOption)[];\n  /** 分组子选项 */\n  options?: (string | MenuOption)[];\n}\n\nexport type MenuElement = CustomElement<MenuProps, 'onChange' | 'onOpenChange'>;\nexport type MenuMultipleElement = CustomElement<MenuMultipleProps, 'onChange' | 'onOpenChange'>;\n\ncustomElement<MenuProps>(\n  'n-menu',\n  {\n    class: void 0,\n    css: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    onOpenChange: void 0,\n    openKeys: void 0,\n    fieldNames: void 0,\n    multiple: void 0,\n    toggle: void 0,\n    onChange: void 0,\n    items: [],\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const defaultProps: Partial<MenuProps> = {\n      css: el.css,\n      onChange(key, item) {\n        el.dispatchEvent(\n          new CustomEvent('change', {\n            detail: [key, item],\n          }),\n        );\n      },\n      onOpenChange(keys) {\n        el.dispatchEvent(\n          new CustomEvent('openchange', {\n            detail: keys,\n          }),\n        );\n      },\n    };\n    const props = mergeProps(defaultProps, _);\n\n    createEffect(() => {\n      el.removeAttribute('items');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return <Menu {...props} />;\n  },\n);\n\nexport default Menu;\n"],"names":["createEffect","createMemo","createSignal","For","Match","mergeProps","Show","splitProps","Switch","untrack","frameCallback","isFunction","css","cx","customElement","FieldName","getOptions","theme","style","Menu","props","ref","isDark","baseStyle","local","other","value","setValue","openKeys","setOpenKeys","cssVar","fieldNames","Object","assign","options","items","preventDefault","e","stopPropagation","change","item","disabled","_value","key","multiple","idx","indexOf","push","splice","toggle","onChange","RenderMenu","_","list","RowTitle","icon","label","suffix","SubMenu","isOpen","includes","show","setShow","handleOpen","_openKeys","filter","v","concat","onOpenChange","Child","el","hei","setHei","onAnimationEnd","offsetHeight","children","class","bind","type","handleClosed","Array","isArray","length","querySelector","next","offsetTop","scrollTop","scrollTo","top","behavior","defaultValue","opt","element","dispatchEvent","CustomEvent","detail","keys","removeAttribute"],"mappings":"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"}

package/es/modal/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 反馈
+title: 模态框
+subtitle: n-modal
+icon: ☱
+---
+
+# Modal 模态对话框
+
+> 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `模态框` 在当前页面正中打开一个浮层，在浮层中进行操作。

package/es/modal/examples/basic.md

@@ -0,0 +1,56 @@
+---
+title: 最简单的用法
+description: 最简单的用法
+order: 1
+---
+
+```html
+<n-button type="primary">打开模态框</n-button>
+<n-modal title="最简单的用法"></n-modal>
+<script>
+  const modal = container.querySelector('n-modal');
+  const btn = container.querySelector('n-button');
+
+  btn.addEventListener('click', function (e) {
+    modal.open = 'open';
+  });
+  modal.content = 'content...';
+  modal.addEventListener('openchange', function (e) {
+    modal.open = e.detail;
+  });
+</script>
+```
+
+```jsx
+const Demo = () => {
+  const [open, setOpen] = createSignal('closed');
+  const handleOpen = () => {
+    setOpen('open');
+  };
+  const handleOpenChange = (e) => {
+    setOpen(e?.detail);
+  };
+
+  return (
+    <>
+      <n-modal
+        open={open}
+        title="最简单的用法"
+        onOpenChange={handleOpenChange}
+        content={
+          <>
+            <p>Some contents...</p>
+            <p>Some contents...</p>
+            <p>Some contents...</p>
+          </>
+        }
+      />
+      <n-button type="primary" onClick={handleOpen}>
+        打开模态框
+      </n-button>
+    </>
+  );
+};
+
+render(<Demo />);
+```

package/es/modal/examples/close-icon.md

@@ -0,0 +1,57 @@
+---
+title: 自定义关闭图标
+description: 自定义关闭图标, 设置为 null 或 false 时隐藏关闭按钮
+order: 2
+---
+
+```html
+<n-button type="primary">关闭图标</n-button>
+<n-modal title="自定义关闭图标" close-icon="关"></n-modal>
+<script>
+  const modal = container.querySelector('n-modal');
+  const btn = container.querySelector('n-button');
+
+  btn.addEventListener('click', function (e) {
+    modal.open = 'open';
+  });
+  modal.content = 'content...';
+  modal.addEventListener('openchange', function (e) {
+    modal.open = e.detail;
+  });
+</script>
+```
+
+```jsx
+const Demo = () => {
+  const [open, setOpen] = createSignal('closed');
+  const handleOpen = () => {
+    setOpen('open');
+  };
+  const handleOpenChange = (e) => {
+    setOpen(e?.detail);
+  };
+
+  return (
+    <>
+      <n-modal
+        open={open}
+        title="自定义关闭图标"
+        close-icon="关"
+        onOpenChange={handleOpenChange}
+        content={
+          <>
+            <p>Some contents...</p>
+            <p>Some contents...</p>
+            <p>Some contents...</p>
+          </>
+        }
+      />
+      <n-button type="primary" onClick={handleOpen}>
+        关闭图标
+      </n-button>
+    </>
+  );
+};
+
+render(<Demo />);
+```

package/es/modal/examples/esc-closable.md

@@ -0,0 +1,64 @@
+---
+title: 通过 esc 按键关闭
+description: 通过 `esc` 按键关闭, 默认开启
+order: 4
+---
+
+```html
+<n-button type="primary">通过 esc 按键关闭模态框</n-button>
+<n-modal esc-closable="false"></n-modal>
+<script>
+  const modal = container.querySelector('n-modal');
+  const btn = container.querySelector('n-button');
+
+  btn.addEventListener('click', function (e) {
+    modal.open = 'open';
+  });
+  const div = document.createElement('div');
+  const p1 = document.createElement('p');
+
+  p1.textContent = '按下 esc 键关闭模态框, 默认开启;';
+  const p2 = document.createElement('p');
+
+  p2.textContent = '这里关闭了 esc 键关闭功能;';
+  div.append(p1);
+  div.append(p2);
+  modal.content = div;
+  modal.addEventListener('openchange', function (e) {
+    modal.open = e.detail;
+  });
+</script>
+```
+
+```jsx
+const Demo = () => {
+  const [open, setOpen] = createSignal('closed');
+  const handleOpen = () => {
+    setOpen('open');
+  };
+  const handleOpenChange = (e) => {
+    setOpen(e?.detail);
+  };
+
+  return (
+    <>
+      <n-modal
+        open={open}
+        esc-closable={false}
+        onOpenChange={handleOpenChange}
+        content={
+          <>
+            <p>按下 esc 键关闭模态框, 默认开启;</p>
+            <p>这里关闭了 esc 键关闭功能;</p>
+          </>
+        }
+      />
+      <n-button type="primary" onClick={handleOpen}>
+        通过 esc 按键关闭模态框
+      </n-button>
+    </>
+  );
+};
+
+render(<Demo />);
+```

package/es/modal/examples/mask-blur.md

@@ -0,0 +1,56 @@
+---
+title: 遮罩模糊
+description: 给遮罩添加高斯模糊
+order: 5
+---
+
+```html
+<n-button type="primary">遮罩模糊</n-button>
+<n-modal title="给遮罩添加高斯模糊" mask-blur="true"></n-modal>
+<script>
+  const modal = container.querySelector('n-modal');
+  const btn = container.querySelector('n-button');
+
+  btn.addEventListener('click', function (e) {
+    modal.open = 'open';
+  });
+  modal.content = 'content...';
+  modal.addEventListener('openchange', function (e) {
+    modal.open = e.detail;
+  });
+</script>
+```
+
+```jsx
+const Demo = () => {
+  const [open, setOpen] = createSignal('closed');
+  const handleOpen = () => {
+    setOpen('open');
+  };
+  const handleOpenChange = (e) => {
+    setOpen(e?.detail);
+  };
+
+  return (
+    <>
+      <n-modal
+        open={open}
+        title="给遮罩添加高斯模糊"
+        mask-blur={true}
+        onOpenChange={handleOpenChange}
+        content={
+          <>
+            <p>Some contents...</p>
+            <p>Some contents...</p>
+          </>
+        }
+      />
+      <n-button type="primary" onClick={handleOpen}>
+        遮罩模糊
+      </n-button>
+    </>
+  );
+};
+
+render(<Demo />);
+```

package/es/modal/examples/mask-closable.md

@@ -0,0 +1,64 @@
+---
+title: 点击遮罩关闭
+description: 点击遮罩关闭模态框, 默认开启
+order: 3
+---
+
+```html
+<n-button type="primary">点击遮罩关闭模态框</n-button>
+<n-modal mask-closable="false"></n-modal>
+<script>
+  const modal = container.querySelector('n-modal');
+  const btn = container.querySelector('n-button');
+
+  btn.addEventListener('click', function (e) {
+    modal.open = 'open';
+  });
+  const div = document.createElement('div');
+  const p1 = document.createElement('p');
+
+  p1.textContent = '点击遮罩关闭模态框, 默认开启;';
+  const p2 = document.createElement('p');
+
+  p2.textContent = '这里关闭了点击遮罩关闭功能;';
+  div.append(p1);
+  div.append(p2);
+  modal.content = div;
+  modal.addEventListener('openchange', function (e) {
+    modal.open = e.detail;
+  });
+</script>
+```
+
+```jsx
+const Demo = () => {
+  const [open, setOpen] = createSignal('closed');
+  const handleOpen = () => {
+    setOpen('open');
+  };
+  const handleOpenChange = (e) => {
+    setOpen(e?.detail);
+  };
+
+  return (
+    <>
+      <n-modal
+        open={open}
+        mask-closable={false}
+        onOpenChange={handleOpenChange}
+        content={
+          <>
+            <p>点击遮罩关闭模态框, 默认开启;</p>
+            <p>这里关闭了点击遮罩关闭功能;</p>
+          </>
+        }
+      />
+      <n-button type="primary" onClick={handleOpen}>
+        点击遮罩关闭模态框
+      </n-button>
+    </>
+  );
+};
+
+render(<Demo />);
+```

package/es/modal/index.js

@@ -1,2 +1,2 @@
-var e;function t(){return(t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e}).apply(this,arguments)}import{use as o}from"solid-js/web";import{template as n}from"solid-js/web";import"solid-js/web";import{insert as l}from"solid-js/web";import{getOwner as s}from"solid-js/web";import{effect as i}from"solid-js/web";import{delegateEvents as r}from"solid-js/web";import{createComponent as c}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=n('<span class="modal-close">'),m=n('<n-button class="modal-close">',!0,!1),p=n("<style> "),u=n("<style>"),v=n(`<n-button class="modal-close">⛌`,!0,!1),f=n('<div class="portal"><div class="modal-content"><div class="modal-header"><strong class="modal-title"></strong></div><div class="modal-body">');import{Show as g,createEffect as h,createMemo as b,createSignal as w,mergeProps as y,onCleanup as k,untrack as C}from"solid-js";import{customElement as j}from"solid-element";import{Portal as $}from"solid-js/web";import E from"./store";import{style as O}from"./style";import"../button";export var OpenState;function _(e){let n;let r=document.documentElement,{setNum:y}=E,[j,_]=w("closed"),[L,x]=w({x:0,y:0,width:0,height:0}),I=b(()=>{let{x:e,y:t,width:o,height:n}=L();return`.portal { --y: ${-(t-n/2)}px;--x: ${-(e-o/2)}px;}`});function S(t){_(t),null==e.onOpenChange||e.onOpenChange.call(e,t)}function B(e){e.preventDefault()}function D(t){B(t),"keydown"===t.type?e.escClosable&&"Escape"===t.key&&S("closeing"):S("closeing")}function H(){"closeing"===j()&&S("closed")}function P(t){B(t),e.maskClosable&&t.target===n&&S("closeing")}function W(e){x(o=>t({},o,{x:r.clientWidth/2-e.clientX,y:r.clientHeight/2-e.clientY}))}h(()=>{void 0!==e.open&&e.open!==C(j)&&_(e.open)}),h(()=>{"open"===j()?(y(e=>e+1),r.addEventListener("mousewheel",B,{passive:!1}),e.escClosable&&r.addEventListener("keydown",D,!1)):"closeing"===j()?y(e=>e-1):r.addEventListener("click",W,!0),k(()=>{r.removeEventListener("mousewheel",B,!1),r.removeEventListener("keydown",D,!1),r.removeEventListener("click",W,!0)})});let X=b(()=>null===e.closeIcon||!1===e.closeIcon?null:["function","object"].includes(typeof e.closeIcon)?()=>(()=>{let t=d();return l(t,()=>e.closeIcon),t})():()=>(()=>{let t=m();return a(t,"click",D,!0),t.danger=!0,t.circle=!0,t.flat=!0,t._$owner=s(),l(t,()=>e.closeIcon),t})());return c(g,{get when(){return"closed"!==j()},get children(){return c($,{useShadow:!0,get children(){return[(()=>{let e=p(),t=e.firstChild;return i(()=>t.data=I()),e})(),(()=>{let e=u();return e.textContent=O,e})(),(()=>{let t=f(),r=n,d=t.firstChild,m=d.firstChild,p=m.firstChild,u=m.nextSibling;return a(t,"click",P,!0),a(t,"animationend",H),"function"==typeof r?o(r,t):n=t,l(p,()=>e.title),l(d,c(g,{get when(){return void 0===e.closeIcon},get fallback(){return X()},get children(){let e=v();return a(e,"click",D,!0),e.danger=!0,e.circle=!0,e.flat=!0,e._$owner=s(),e}}),u),l(u,()=>e.content),i(o=>{let n=!("open"!==j()),l="open"!==j(),s=!!e.maskBlur;return n!==o._v$&&t.classList.toggle("open",o._v$=n),l!==o._v$2&&t.classList.toggle("closeing",o._v$2=l),s!==o._v$3&&t.classList.toggle("mask-blur",o._v$3=s),o},{_v$:void 0,_v$2:void 0,_v$3:void 0}),t})()]}})}})}(e=OpenState||(OpenState={})).closed="closed",e.closeing="closeing",e.open="open",j("n-modal",{open:"closed",maskClosable:!0,escClosable:!0,onOpenChange:void 0,closeIcon:void 0,content:void 0,title:void 0,maskBlur:void 0},(e,t)=>c(_,y({onOpenChange(e){t.element.dispatchEvent(new CustomEvent("openchange",{detail:e}))}},e)));export default _;r(["click"]);
+var e;function t(){return(t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e}).apply(this,arguments)}import{use as o}from"solid-js/web";import{template as n}from"solid-js/web";import"solid-js/web";import{insert as l}from"solid-js/web";import{getOwner as s}from"solid-js/web";import{effect as i}from"solid-js/web";import{delegateEvents as r}from"solid-js/web";import{createComponent as c}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=n('<span class="modal-close">'),m=n('<n-button class="modal-close">',!0,!1),p=n("<style> "),u=n("<style>"),v=n(`<n-button class="modal-close">⛌`,!0,!1),f=n('<div class="portal"><div class="modal-content"><div class="modal-header"><strong class="modal-title"></strong></div><div class="modal-body">');import{createEffect as g,createMemo as h,createSignal as b,mergeProps as w,onCleanup as y,Show as k,untrack as C}from"solid-js";import{Portal as j}from"solid-js/web";import{customElement as $}from"solid-element";import E from"./store";import{style as O}from"./style";import"../button";export var OpenState;function _(e){let n;let r=document.documentElement,{setNum:w}=E,[$,_]=b("closed"),[L,x]=b({x:0,y:0,width:0,height:0}),I=h(()=>{let{x:e,y:t,width:o,height:n}=L();return`.portal { --y: ${-(t-n/2)}px;--x: ${-(e-o/2)}px;}`});function S(t){_(t),null==e.onOpenChange||e.onOpenChange.call(e,t)}function B(e){e.preventDefault()}function D(t){B(t),"keydown"===t.type?e.escClosable&&"Escape"===t.key&&S("closeing"):S("closeing")}function H(){"closeing"===$()&&S("closed")}function P(t){B(t),e.maskClosable&&t.target===n&&S("closeing")}function W(e){x(o=>t({},o,{x:r.clientWidth/2-e.clientX,y:r.clientHeight/2-e.clientY}))}g(()=>{void 0!==e.open&&e.open!==C($)&&_(e.open)}),g(()=>{"open"===$()?(w(e=>e+1),r.addEventListener("mousewheel",B,{passive:!1}),e.escClosable&&r.addEventListener("keydown",D,!1)):"closeing"===$()?w(e=>e-1):r.addEventListener("click",W,!0),y(()=>{r.removeEventListener("mousewheel",B,!1),r.removeEventListener("keydown",D,!1),r.removeEventListener("click",W,!0)})});let X=h(()=>null===e.closeIcon||!1===e.closeIcon?null:["function","object"].includes(typeof e.closeIcon)?()=>(()=>{let t=d();return l(t,()=>e.closeIcon),t})():()=>(()=>{let t=m();return a(t,"click",D,!0),t.danger=!0,t.circle=!0,t.flat=!0,t._$owner=s(),l(t,()=>e.closeIcon),t})());return c(k,{get when(){return"closed"!==$()},get children(){return c(j,{useShadow:!0,get children(){return[(()=>{let e=p(),t=e.firstChild;return i(()=>t.data=I()),e})(),(()=>{let e=u();return e.textContent=O,e})(),(()=>{let t=f(),r=n,d=t.firstChild,m=d.firstChild,p=m.firstChild,u=m.nextSibling;return a(t,"click",P,!0),a(t,"animationend",H),"function"==typeof r?o(r,t):n=t,l(p,()=>e.title),l(d,c(k,{get when(){return void 0===e.closeIcon},get fallback(){return X()},get children(){let e=v();return a(e,"click",D,!0),e.danger=!0,e.circle=!0,e.flat=!0,e._$owner=s(),e}}),u),l(u,()=>e.content),i(o=>{let n=!("open"!==$()),l="open"!==$(),s=!!e.maskBlur;return n!==o._v$&&t.classList.toggle("open",o._v$=n),l!==o._v$2&&t.classList.toggle("closeing",o._v$2=l),s!==o._v$3&&t.classList.toggle("mask-blur",o._v$3=s),o},{_v$:void 0,_v$2:void 0,_v$3:void 0}),t})()]}})}})}(e=OpenState||(OpenState={})).closed="closed",e.closeing="closeing",e.open="open",$("n-modal",{open:"closed",maskClosable:!0,escClosable:!0,onOpenChange:void 0,closeIcon:void 0,content:void 0,title:void 0,maskBlur:void 0},(e,t)=>c(_,w({onOpenChange(e){t.element.dispatchEvent(new CustomEvent("openchange",{detail:e}))}},e)));export default _;r(["click"]);
 //# sourceMappingURL=index.js.map