neko-ui 2.8.21 → 2.8.23

package/lib/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/lib/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/lib/menu/index.js

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

package/lib/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":["Menu","props","ref","isDark","baseStyle","theme","local","other","splitProps","value","setValue","createSignal","openKeys","setOpenKeys","cssVar","createMemo","fieldNames","Object","assign","FieldName","options","getOptions","items","preventDefault","e","stopPropagation","change","item","disabled","_value","key","multiple","idx","indexOf","push","splice","toggle","isFunction","onChange","RenderMenu","_","For","list","RowTitle","Show","icon","label","suffix","SubMenu","isOpen","includes","show","setShow","untrack","handleOpen","_openKeys","filter","v","concat","onOpenChange","Child","el","hei","setHei","onAnimationEnd","createEffect","offsetHeight","children","cx","class","Switch","bind","type","handleClosed","Match","Array","isArray","length","frameCallback","querySelector","next","offsetTop","scrollTop","scrollTo","top","behavior","style","css","customElement","defaultValue","opt","element","defaultProps","dispatchEvent","CustomEvent","detail","keys","mergeProps","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":["Menu","props","ref","isDark","baseStyle","theme","local","other","splitProps","value","setValue","createSignal","openKeys","setOpenKeys","cssVar","createMemo","fieldNames","Object","assign","FieldName","options","getOptions","items","preventDefault","e","stopPropagation","change","item","disabled","_value","key","multiple","idx","indexOf","push","splice","toggle","isFunction","onChange","RenderMenu","_","For","list","RowTitle","Show","icon","label","suffix","SubMenu","isOpen","includes","show","setShow","untrack","handleOpen","_openKeys","filter","v","concat","onOpenChange","Child","el","hei","setHei","onAnimationEnd","createEffect","offsetHeight","children","cx","class","Switch","bind","type","handleClosed","Match","Array","isArray","length","frameCallback","querySelector","next","offsetTop","scrollTop","scrollTo","top","behavior","style","css","customElement","defaultValue","opt","element","defaultProps","dispatchEvent","CustomEvent","detail","keys","mergeProps","removeAttribute"],"mappings":"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"}

package/lib/modal/README.mdx

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

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/modal/index.tsx"],"sourcesContent":["import {\n  Show,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  untrack,\n} from 'solid-js';\nimport { customElement } from 'solid-element';\nimport { Portal } from 'solid-js/web';\nimport modalStore from './store';\nimport { style } from './style';\nimport '../button';\nimport type { CustomElement } from '..';\n\n/**\n * API\n * @since 2.6.0\n */\nexport interface ModalProps {\n  /** 是否打开模态框 */\n  open?: OpenStateKey;\n  /** 开启关闭的回调函数 */\n  onOpenChange?: (open: OpenStateKey) => void;\n  /** 点击遮罩关闭\n   * @default true\n   */\n  maskClosable?: boolean;\n  /** 通过 `esc` 按键关闭\n   * @default true\n   */\n  escClosable?: boolean;\n  /**\n   * 自定义关闭图标, 设置为 null 或 false 时隐藏关闭按钮\n   */\n  closeIcon?: JSX.Element | null;\n  /** 内容 */\n  content: JSX.Element;\n  /** 标题 */\n  title?: JSX.Element;\n  /** 遮罩模糊\n   * @default false\n   */\n  maskBlur?: boolean;\n}\n\n/**\n * OpenStateKey\n */\nexport enum OpenState {\n  /** 完全关闭 */\n  closed = 'closed',\n  /** 正在关闭 */\n  closeing = 'closeing',\n  /** 打开 */\n  open = 'open',\n}\nexport type OpenStateKey = keyof typeof OpenState;\nexport type ModalElement = CustomElement<ModalProps, 'onOpenChange'>;\n\nfunction Modal(props: ModalProps) {\n  const doc = document.documentElement;\n  const { setNum } = modalStore;\n  const [open, setOpen] = createSignal<OpenStateKey>('closed');\n  const [posi, setPosi] = createSignal({\n    x: 0,\n    y: 0,\n    width: 0,\n    height: 0,\n  });\n  let portal: HTMLDivElement | undefined;\n\n  const getCss = createMemo(() => {\n    const { x, y, width, height } = posi();\n\n    return `.portal { --y: ${-(y - height / 2)}px;--x: ${-(x - width / 2)}px;}`;\n  });\n\n  function openChange(visi: OpenStateKey) {\n    setOpen(visi);\n    props.onOpenChange?.(visi);\n  }\n  function preventDefault(e: Event) {\n    e.preventDefault();\n  }\n  function close(e: KeyboardEvent | Event) {\n    preventDefault(e);\n    if (e.type === 'keydown') {\n      if (props.escClosable && (e as KeyboardEvent).key === 'Escape') {\n        openChange(OpenState.closeing);\n      }\n    } else {\n      openChange(OpenState.closeing);\n    }\n  }\n  function handleDestroy() {\n    if (open() === OpenState.closeing) {\n      openChange(OpenState.closed);\n    }\n  }\n  function portalClick(e: Event) {\n    preventDefault(e);\n    if (props.maskClosable && e.target === portal) {\n      openChange(OpenState.closeing);\n    }\n  }\n\n  createEffect(() => {\n    if (props.open !== void 0 && props.open !== untrack(open)) {\n      setOpen(props.open);\n    }\n  });\n\n  function point(e: MouseEvent) {\n    setPosi((prev) => ({\n      ...prev,\n      x: doc.clientWidth / 2 - e.clientX,\n      y: doc.clientHeight / 2 - e.clientY,\n    }));\n  }\n  createEffect(() => {\n    if (open() === OpenState.open) {\n      setNum((prev) => prev + 1);\n      doc.addEventListener('mousewheel', preventDefault, {\n        passive: false,\n      });\n\n      if (props.escClosable) {\n        doc.addEventListener('keydown', close, false);\n      }\n    } else if (open() === OpenState.closeing) {\n      setNum((prev) => prev - 1);\n    } else {\n      doc.addEventListener('click', point, true);\n    }\n\n    onCleanup(() => {\n      doc.removeEventListener('mousewheel', preventDefault, false);\n      doc.removeEventListener('keydown', close, false);\n      doc.removeEventListener('click', point, true);\n    });\n  });\n  const closeIcon = createMemo(() => {\n    if (props.closeIcon === null || props.closeIcon === false) {\n      return null;\n    }\n    if (['function', 'object'].includes(typeof props.closeIcon)) {\n      return () => <span class=\"modal-close\">{props.closeIcon}</span>;\n    }\n    return () => (\n      <n-button class=\"modal-close\" danger={true} circle={true} flat={true} onClick={close}>\n        {props.closeIcon}\n      </n-button>\n    );\n  });\n\n  return (\n    <Show when={open() !== OpenState.closed}>\n      <Portal useShadow={true}>\n        <style textContent={getCss()} />\n        <style textContent={style} />\n        <div\n          ref={portal}\n          class=\"portal\"\n          classList={{\n            open: open() === OpenState.open,\n            closeing: open() !== OpenState.open,\n            'mask-blur': props.maskBlur,\n          }}\n          onAnimationEnd={handleDestroy}\n          onClick={portalClick}\n        >\n          <div class=\"modal-content\">\n            <div class=\"modal-header\">\n              <strong class=\"modal-title\">{props.title}</strong>\n            </div>\n            <Show when={props.closeIcon === void 0} fallback={closeIcon() as JSXElement}>\n              <n-button class=\"modal-close\" danger={true} circle={true} flat={true} onClick={close}>\n                ⛌\n              </n-button>\n            </Show>\n            <div class=\"modal-body\">{props.content}</div>\n            {/* <div class=\"modal-footer\">{props.footer}</div> */}\n          </div>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\ncustomElement<ModalProps>(\n  'n-modal',\n  {\n    open: 'closed' as OpenStateKey,\n    maskClosable: true,\n    escClosable: true,\n    onOpenChange: void 0,\n    closeIcon: void 0,\n    content: void 0,\n    title: void 0,\n    maskBlur: void 0,\n  },\n  (_, opt) => {\n    const props = mergeProps(\n      {\n        onOpenChange(open: OpenStateKey) {\n          opt.element.dispatchEvent(\n            new CustomEvent('openchange', {\n              detail: open,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    return <Modal {...props} />;\n  },\n);\nexport default Modal;\n"],"names":["OpenState","Modal","props","portal","doc","document","documentElement","setNum","modalStore","open","setOpen","createSignal","posi","setPosi","x","y","width","height","getCss","createMemo","openChange","visi","onOpenChange","preventDefault","e","close","type","escClosable","key","handleDestroy","portalClick","maskClosable","target","point","prev","clientWidth","clientX","clientHeight","clientY","createEffect","untrack","addEventListener","passive","onCleanup","removeEventListener","closeIcon","includes","Show","Portal","style","title","content","maskBlur","customElement","_","opt","mergeProps","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}
+{"version":3,"sources":["../../components/modal/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  Show,\n  untrack,\n} from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\n\nimport modalStore from './store';\nimport { style } from './style';\n\nimport '../button';\n\n/**\n * API\n * @since 2.6.0\n */\nexport interface ModalProps {\n  /** 是否打开模态框 */\n  open?: OpenStateKey;\n  /** 开启关闭的回调函数 */\n  onOpenChange?: (open: OpenStateKey) => void;\n  /** 点击遮罩关闭\n   * @default true\n   */\n  maskClosable?: boolean;\n  /** 通过 `esc` 按键关闭\n   * @default true\n   */\n  escClosable?: boolean;\n  /**\n   * 自定义关闭图标, 设置为 null 或 false 时隐藏关闭按钮\n   */\n  closeIcon?: JSX.Element | null;\n  /** 内容 */\n  content: JSX.Element;\n  /** 标题 */\n  title?: JSX.Element;\n  /** 遮罩模糊\n   * @default false\n   */\n  maskBlur?: boolean;\n}\n\n/**\n * OpenStateKey\n */\nexport enum OpenState {\n  /** 完全关闭 */\n  closed = 'closed',\n  /** 正在关闭 */\n  closeing = 'closeing',\n  /** 打开 */\n  open = 'open',\n}\nexport type OpenStateKey = keyof typeof OpenState;\nexport type ModalElement = CustomElement<ModalProps, 'onOpenChange'>;\n\nfunction Modal(props: ModalProps) {\n  const doc = document.documentElement;\n  const { setNum } = modalStore;\n  const [open, setOpen] = createSignal<OpenStateKey>('closed');\n  const [posi, setPosi] = createSignal({\n    x: 0,\n    y: 0,\n    width: 0,\n    height: 0,\n  });\n  let portal: HTMLDivElement | undefined;\n\n  const getCss = createMemo(() => {\n    const { x, y, width, height } = posi();\n\n    return `.portal { --y: ${-(y - height / 2)}px;--x: ${-(x - width / 2)}px;}`;\n  });\n\n  function openChange(visi: OpenStateKey) {\n    setOpen(visi);\n    props.onOpenChange?.(visi);\n  }\n  function preventDefault(e: Event) {\n    e.preventDefault();\n  }\n  function close(e: KeyboardEvent | Event) {\n    preventDefault(e);\n    if (e.type === 'keydown') {\n      if (props.escClosable && (e as KeyboardEvent).key === 'Escape') {\n        openChange(OpenState.closeing);\n      }\n    } else {\n      openChange(OpenState.closeing);\n    }\n  }\n  function handleDestroy() {\n    if (open() === OpenState.closeing) {\n      openChange(OpenState.closed);\n    }\n  }\n  function portalClick(e: Event) {\n    preventDefault(e);\n    if (props.maskClosable && e.target === portal) {\n      openChange(OpenState.closeing);\n    }\n  }\n\n  createEffect(() => {\n    if (props.open !== void 0 && props.open !== untrack(open)) {\n      setOpen(props.open);\n    }\n  });\n\n  function point(e: MouseEvent) {\n    setPosi((prev) => ({\n      ...prev,\n      x: doc.clientWidth / 2 - e.clientX,\n      y: doc.clientHeight / 2 - e.clientY,\n    }));\n  }\n  createEffect(() => {\n    if (open() === OpenState.open) {\n      setNum((prev) => prev + 1);\n      doc.addEventListener('mousewheel', preventDefault, {\n        passive: false,\n      });\n\n      if (props.escClosable) {\n        doc.addEventListener('keydown', close, false);\n      }\n    } else if (open() === OpenState.closeing) {\n      setNum((prev) => prev - 1);\n    } else {\n      doc.addEventListener('click', point, true);\n    }\n\n    onCleanup(() => {\n      doc.removeEventListener('mousewheel', preventDefault, false);\n      doc.removeEventListener('keydown', close, false);\n      doc.removeEventListener('click', point, true);\n    });\n  });\n  const closeIcon = createMemo(() => {\n    if (props.closeIcon === null || props.closeIcon === false) {\n      return null;\n    }\n    if (['function', 'object'].includes(typeof props.closeIcon)) {\n      return () => <span class=\"modal-close\">{props.closeIcon}</span>;\n    }\n    return () => (\n      <n-button class=\"modal-close\" danger={true} circle={true} flat={true} onClick={close}>\n        {props.closeIcon}\n      </n-button>\n    );\n  });\n\n  return (\n    <Show when={open() !== OpenState.closed}>\n      <Portal useShadow={true}>\n        <style textContent={getCss()} />\n        <style textContent={style} />\n        <div\n          ref={portal}\n          class=\"portal\"\n          classList={{\n            open: open() === OpenState.open,\n            closeing: open() !== OpenState.open,\n            'mask-blur': props.maskBlur,\n          }}\n          onAnimationEnd={handleDestroy}\n          onClick={portalClick}\n        >\n          <div class=\"modal-content\">\n            <div class=\"modal-header\">\n              <strong class=\"modal-title\">{props.title}</strong>\n            </div>\n            <Show when={props.closeIcon === void 0} fallback={closeIcon() as JSXElement}>\n              <n-button class=\"modal-close\" danger={true} circle={true} flat={true} onClick={close}>\n                ⛌\n              </n-button>\n            </Show>\n            <div class=\"modal-body\">{props.content}</div>\n            {/* <div class=\"modal-footer\">{props.footer}</div> */}\n          </div>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\ncustomElement<ModalProps>(\n  'n-modal',\n  {\n    open: 'closed' as OpenStateKey,\n    maskClosable: true,\n    escClosable: true,\n    onOpenChange: void 0,\n    closeIcon: void 0,\n    content: void 0,\n    title: void 0,\n    maskBlur: void 0,\n  },\n  (_, opt) => {\n    const props = mergeProps(\n      {\n        onOpenChange(open: OpenStateKey) {\n          opt.element.dispatchEvent(\n            new CustomEvent('openchange', {\n              detail: open,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    return <Modal {...props} />;\n  },\n);\nexport default Modal;\n"],"names":["OpenState","Modal","props","portal","doc","document","documentElement","setNum","modalStore","open","setOpen","createSignal","posi","setPosi","x","y","width","height","getCss","createMemo","openChange","visi","onOpenChange","preventDefault","e","close","type","escClosable","key","handleDestroy","portalClick","maskClosable","target","point","prev","clientWidth","clientX","clientHeight","clientY","createEffect","untrack","addEventListener","passive","onCleanup","removeEventListener","closeIcon","includes","Show","Portal","style","title","content","maskBlur","customElement","_","opt","mergeProps","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}