neko-ui 2.9.2 → 2.9.4

package/lib/menu/index.js

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

package/lib/menu/index.js.map

@@ -1 +1 @@
-{"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 { clearAttribute, FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme, { block } 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      clearAttribute(el, ['css', 'items', 'fieldNames']);\n    });\n    return (\n      <>\n        <style textContent={block} />\n        <Menu {...props} />\n      </>\n    );\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","clearAttribute","block"],"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 { clearAttribute, FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme, { block } 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      clearAttribute(el, ['css', 'items', 'fieldNames']);\n    });\n    return (\n      <>\n        <style textContent={block} />\n        <Menu {...props} />\n      </>\n    );\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","clearAttribute","block"],"mappings":"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"}

package/lib/menu/style.js

@@ -209,5 +209,4 @@
       opacity: 0;
     }
   }
-`;
-//# sourceMappingURL=style.js.map
+`;

package/lib/menu/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/menu/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .menu {\n    --menu-selection: var(--primary-selection);\n\n    max-block-size: 100%;\n    display: block;\n    overflow-y: auto;\n    color: var(--text-color);\n\n    ${['primary', 'success', 'error', 'warning']\n      .map(\n        (s) =>\n          `.${s} {--text-color: var(--${s}-color);--text-heading: var(--${s}-color);--text-secondary: var(--${s}-secondary);--component-bg: var(--${s}-details-bg);--menu-selection: var(--${s}-selection);}`,\n      )\n      .join('')}\n  }\n\n  .menu-item,\n  .menu-group,\n  .sub-menu {\n    border-radius: calc(var(--border-radius) / 1.5);\n    transition:\n      0.3s background-color var(--transition-timing-function),\n      0.3s color var(--transition-timing-function);\n    box-sizing: border-box;\n    line-height: 1.57;\n  }\n\n  .menu-icon {\n    font-size: var(--font-size);\n  }\n\n  .menu-group {\n    position: relative;\n  }\n\n  .menu-group-title {\n    position: sticky;\n    z-index: 1;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 5px;\n    font-size: 12px;\n    color: var(--text-secondary);\n    inset-block-start: -2px;\n    column-gap: 5px;\n  }\n\n  .menu-suffix {\n    text-align: end;\n    color: var(--text-secondary);\n    flex: 1;\n  }\n\n  .sub-menu-title {\n    display: flex;\n    align-items: center;\n    border-radius: calc(var(--border-radius) / 1.5);\n    padding: 5px 12px;\n    column-gap: 5px;\n    transition: box-shadow var(--transition-duration) var(--transition-timing-function);\n\n    &:hover:not(&[aria-disabled]:not([aria-disabled='false'])) {\n      &:not([aria-selected='true'], .error) {\n        background-color: var(--disable-bg);\n      }\n    }\n\n    > .menu-arrow {\n      position: relative;\n      display: block;\n      inline-size: 12px;\n      block-size: 1.5px;\n      pointer-events: none;\n      color: var(--text-color);\n      opacity: 0.5;\n      margin-inline-start: 5px;\n\n      &::after,\n      &::before {\n        position: absolute;\n        border-radius: 2px;\n        background-color: currentcolor;\n        transition:\n          transform var(--transition-duration) var(--transition-timing-function),\n          color var(--transition-duration) var(--transition-timing-function);\n        inline-size: 6px;\n        block-size: 1.5px;\n        content: '';\n      }\n    }\n  }\n\n  .sub-menu {\n    cursor: pointer;\n\n    &:has([aria-selected='true']) > span {\n      color: var(--text-heading);\n    }\n  }\n\n  .sub-menu-children {\n    border-radius: calc(var(--border-radius) / 1.5);\n    background-color: var(--sub-menu-bg);\n    transform-origin: top;\n\n    > div {\n      padding: 5px 12px;\n    }\n  }\n\n  .sub-menu-open {\n    > .sub-menu-children {\n      animation: menu-open var(--transition-duration) var(--transition-timing-function) forwards;\n    }\n\n    > span.sub-menu-title {\n      box-shadow: 0 10px 5px 0 rgb(0 0 0 / 1%);\n\n      > .menu-arrow {\n        &::after {\n          transform: rotate(-45deg) translate3d(-1.5px, -1px, 1px);\n        }\n\n        &::before {\n          transform: rotate(45deg) translate3d(1.5px, -1px, 1px);\n        }\n      }\n    }\n  }\n\n  .sub-menu-close {\n    > .sub-menu-children {\n      animation: menu-close var(--transition-duration) var(--transition-timing-function) forwards;\n    }\n\n    > span.sub-menu-title {\n      box-shadow: 0 0 0 0 rgb(0 0 0 / 0%);\n\n      > .menu-arrow {\n        &::after {\n          transform: rotate(45deg) translate3d(-1px, 2px, 1px);\n        }\n\n        &::before {\n          transform: rotate(-45deg) translate3d(1px, 2px, 1px);\n        }\n      }\n    }\n  }\n\n  .menu-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 5px 12px;\n    cursor: pointer;\n    column-gap: 5px;\n    color: var(--text-color);\n\n    &:hover:not(&[aria-disabled]:not([aria-disabled='false'])) {\n      &:not([aria-selected='true']) {\n        color: var(--text-heading);\n        background-color: var(--disable-bg);\n      }\n    }\n\n    &[aria-disabled]:not([aria-disabled='false']) {\n      cursor: not-allowed;\n      color: var(--disable-color);\n    }\n\n    &[aria-selected='true'] {\n      color: var(--text-heading);\n      background-color: var(--menu-selection);\n\n      & + & {\n        border-start-end-radius: 0;\n        border-start-start-radius: 0;\n      }\n\n      &:has(+ &[aria-selected='true']) {\n        border-end-end-radius: 0;\n        border-end-start-radius: 0;\n      }\n    }\n  }\n\n  @keyframes menu-open {\n    from {\n      transform: scaleY(0);\n      block-size: 0;\n      opacity: 0;\n    }\n\n    to {\n      transform: scaleY(1);\n      block-size: var(--h);\n      opacity: 1;\n    }\n  }\n\n  @keyframes menu-close {\n    from {\n      transform: scaleY(1);\n      block-size: var(--h);\n      opacity: 1;\n    }\n\n    to {\n      transform: scaleY(0);\n      block-size: 0;\n      opacity: 0;\n    }\n  }\n`;\n"],"names":["style","css","map","s","join"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;IASrB,EAAE,CAAC,UAAW,UAAW,QAAS,UAAU,CACzCC,GAAG,CACF,AAACC,GACC,CAAC,CAAC,EAAEA,EAAE,sBAAsB,EAAEA,EAAE,8BAA8B,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,kCAAkC,EAAEA,EAAE,qCAAqC,EAAEA,EAAE,aAAa,CAAC,EAEtMC,IAAI,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0MhB,CAAC"}
+{"version":3,"sources":["components/menu/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .menu {\n    --menu-selection: var(--primary-selection);\n\n    max-block-size: 100%;\n    display: block;\n    overflow-y: auto;\n    color: var(--text-color);\n\n    ${['primary', 'success', 'error', 'warning']\n      .map(\n        (s) =>\n          `.${s} {--text-color: var(--${s}-color);--text-heading: var(--${s}-color);--text-secondary: var(--${s}-secondary);--component-bg: var(--${s}-details-bg);--menu-selection: var(--${s}-selection);}`,\n      )\n      .join('')}\n  }\n\n  .menu-item,\n  .menu-group,\n  .sub-menu {\n    border-radius: calc(var(--border-radius) / 1.5);\n    transition:\n      0.3s background-color var(--transition-timing-function),\n      0.3s color var(--transition-timing-function);\n    box-sizing: border-box;\n    line-height: 1.57;\n  }\n\n  .menu-icon {\n    font-size: var(--font-size);\n  }\n\n  .menu-group {\n    position: relative;\n  }\n\n  .menu-group-title {\n    position: sticky;\n    z-index: 1;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 5px;\n    font-size: 12px;\n    color: var(--text-secondary);\n    inset-block-start: -2px;\n    column-gap: 5px;\n  }\n\n  .menu-suffix {\n    text-align: end;\n    color: var(--text-secondary);\n    flex: 1;\n  }\n\n  .sub-menu-title {\n    display: flex;\n    align-items: center;\n    border-radius: calc(var(--border-radius) / 1.5);\n    padding: 5px 12px;\n    column-gap: 5px;\n    transition: box-shadow var(--transition-duration) var(--transition-timing-function);\n\n    &:hover:not(&[aria-disabled]:not([aria-disabled='false'])) {\n      &:not([aria-selected='true'], .error) {\n        background-color: var(--disable-bg);\n      }\n    }\n\n    > .menu-arrow {\n      position: relative;\n      display: block;\n      inline-size: 12px;\n      block-size: 1.5px;\n      pointer-events: none;\n      color: var(--text-color);\n      opacity: 0.5;\n      margin-inline-start: 5px;\n\n      &::after,\n      &::before {\n        position: absolute;\n        border-radius: 2px;\n        background-color: currentcolor;\n        transition:\n          transform var(--transition-duration) var(--transition-timing-function),\n          color var(--transition-duration) var(--transition-timing-function);\n        inline-size: 6px;\n        block-size: 1.5px;\n        content: '';\n      }\n    }\n  }\n\n  .sub-menu {\n    cursor: pointer;\n\n    &:has([aria-selected='true']) > span {\n      color: var(--text-heading);\n    }\n  }\n\n  .sub-menu-children {\n    border-radius: calc(var(--border-radius) / 1.5);\n    background-color: var(--sub-menu-bg);\n    transform-origin: top;\n\n    > div {\n      padding: 5px 12px;\n    }\n  }\n\n  .sub-menu-open {\n    > .sub-menu-children {\n      animation: menu-open var(--transition-duration) var(--transition-timing-function) forwards;\n    }\n\n    > span.sub-menu-title {\n      box-shadow: 0 10px 5px 0 rgb(0 0 0 / 1%);\n\n      > .menu-arrow {\n        &::after {\n          transform: rotate(-45deg) translate3d(-1.5px, -1px, 1px);\n        }\n\n        &::before {\n          transform: rotate(45deg) translate3d(1.5px, -1px, 1px);\n        }\n      }\n    }\n  }\n\n  .sub-menu-close {\n    > .sub-menu-children {\n      animation: menu-close var(--transition-duration) var(--transition-timing-function) forwards;\n    }\n\n    > span.sub-menu-title {\n      box-shadow: 0 0 0 0 rgb(0 0 0 / 0%);\n\n      > .menu-arrow {\n        &::after {\n          transform: rotate(45deg) translate3d(-1px, 2px, 1px);\n        }\n\n        &::before {\n          transform: rotate(-45deg) translate3d(1px, 2px, 1px);\n        }\n      }\n    }\n  }\n\n  .menu-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 5px 12px;\n    cursor: pointer;\n    column-gap: 5px;\n    color: var(--text-color);\n\n    &:hover:not(&[aria-disabled]:not([aria-disabled='false'])) {\n      &:not([aria-selected='true']) {\n        color: var(--text-heading);\n        background-color: var(--disable-bg);\n      }\n    }\n\n    &[aria-disabled]:not([aria-disabled='false']) {\n      cursor: not-allowed;\n      color: var(--disable-color);\n    }\n\n    &[aria-selected='true'] {\n      color: var(--text-heading);\n      background-color: var(--menu-selection);\n\n      & + & {\n        border-start-end-radius: 0;\n        border-start-start-radius: 0;\n      }\n\n      &:has(+ &[aria-selected='true']) {\n        border-end-end-radius: 0;\n        border-end-start-radius: 0;\n      }\n    }\n  }\n\n  @keyframes menu-open {\n    from {\n      transform: scaleY(0);\n      block-size: 0;\n      opacity: 0;\n    }\n\n    to {\n      transform: scaleY(1);\n      block-size: var(--h);\n      opacity: 1;\n    }\n  }\n\n  @keyframes menu-close {\n    from {\n      transform: scaleY(1);\n      block-size: var(--h);\n      opacity: 1;\n    }\n\n    to {\n      transform: scaleY(0);\n      block-size: 0;\n      opacity: 0;\n    }\n  }\n`;\n"],"names":["style","css","map","s","join"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;IASrB,EAAE,CAAC,UAAW,UAAW,QAAS,UAAU,CACzCC,GAAG,CACF,AAACC,GACC,CAAC,CAAC,EAAEA,EAAE,sBAAsB,EAAEA,EAAE,8BAA8B,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,kCAAkC,EAAEA,EAAE,qCAAqC,EAAEA,EAAE,aAAa,CAAC,EAEtMC,IAAI,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0MhB,CAAC"}

package/lib/modal/hooks.js

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return e}});const e={open:e=>{console.log(e)}};
-//# sourceMappingURL=hooks.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return t}});const e=e=>{},t={open:e};

package/lib/modal/hooks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/modal/hooks.ts"],"sourcesContent":["import { type ModalProps } from '.';\n\nconst open = (options: ModalProps) => {\n  // eslint-disable-next-line no-console\n  console.log(options);\n};\n\nexport default {\n  open: open,\n};\n"],"names":["open","options","console","log"],"mappings":"kGAOA,+CAAA,WAAA,EAAe,CACbA,KANW,AAACC,IAEZC,QAAQC,GAAG,CAACF,EACd,CAIA"}
+{"version":3,"sources":["components/modal/hooks.ts"],"sourcesContent":["import { type ModalProps } from '.';\n\nconst open = (options: ModalProps) => {\n  // eslint-disable-next-line no-console\n  console.log(options);\n};\n\nexport default {\n  open: open,\n};\n"],"names":["open","options"],"mappings":"kGAOA,+CAAA,KALA,MAAMA,EAAO,AAACC,IAGd,EAEA,EAAe,CACbD,KAAMA,CACR"}

package/lib/modal/index.js

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

package/lib/modal/index.js.map

@@ -1 +1 @@
-{"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 '..';\nimport { clearAttribute } from '../basic-config';\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 el = opt.element;\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    createEffect(() => {\n      clearAttribute(el, ['content']);\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","el","element","mergeProps","dispatchEvent","CustomEvent","detail","clearAttribute"],"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 '..';\nimport { clearAttribute } from '../basic-config';\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 el = opt.element;\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    createEffect(() => {\n      clearAttribute(el, ['content']);\n    });\n    return <Modal {...props} />;\n  },\n);\nexport default Modal;\n"],"names":["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","OpenState","customElement","_","opt","el","element","mergeProps","dispatchEvent","CustomEvent","detail","clearAttribute"],"mappings":"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"}

package/lib/modal/store.js

@@ -1,2 +1 @@
-"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return o}});const t=require("solid-js"),r=(e=require("@moneko/common/lib/updateStyleRule"))&&e.__esModule?e:{default:e},o=(0,t.createRoot)(function(){let[e,o]=(0,t.createSignal)(0);return(0,t.createEffect)(()=>{let t=e();0===t?(0,r.default)({"overflow-y":""},"body"):1===t&&(0,r.default)({"overflow-y":"hidden"},"body")}),{num:e,setNum:o}},(0,t.getOwner)());
-//# sourceMappingURL=store.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return n}});const e=require("solid-js"),t=o(require("@moneko/common/lib/updateStyleRule"));function o(e){return e&&e.__esModule?e:{default:e}}function r(){let[o,r]=(0,e.createSignal)(0);return(0,e.createEffect)(()=>{let e=o();0===e?(0,t.default)({"overflow-y":""},"body"):1===e&&(0,t.default)({"overflow-y":"hidden"},"body")}),{num:o,setNum:r}}const n=(0,e.createRoot)(r,(0,e.getOwner)());

package/lib/modal/store.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/modal/store.ts"],"sourcesContent":["import { createEffect, createRoot, createSignal, getOwner } from 'solid-js';\nimport { updateStyleRule } from '@moneko/common';\n\nfunction createModal() {\n  const [num, setNum] = createSignal(0);\n\n  createEffect(() => {\n    const count = num();\n\n    if (count === 0) {\n      updateStyleRule({ 'overflow-y': '' }, 'body');\n    } else if (count === 1) {\n      updateStyleRule({ 'overflow-y': 'hidden' }, 'body');\n    }\n  });\n  return {\n    num,\n    setNum,\n  };\n}\n\nexport default createRoot(createModal, getOwner());\n"],"names":["createRoot","num","setNum","createSignal","createEffect","count","updateStyleRule","getOwner"],"mappings":"wGAqBA,+CAAA,qBArBiE,yBACjC,mEAoBhC,EAAeA,GAAAA,YAAU,EAlBzB,WACE,GAAM,CAACC,EAAKC,EAAO,CAAGC,GAAAA,cAAY,EAAC,GAWnC,MATAC,GAAAA,cAAY,EAAC,KACX,IAAMC,EAAQJ,GAEVI,AAAU,CAAA,IAAVA,EACFC,GAAAA,SAAe,EAAC,CAAE,aAAc,EAAG,EAAG,QACnB,IAAVD,GACTC,GAAAA,SAAe,EAAC,CAAE,aAAc,QAAS,EAAG,OAEhD,GACO,CACLL,IAAAA,EACAC,OAAAA,CACF,CACF,EAEuCK,GAAAA,UAAQ"}
+{"version":3,"sources":["components/modal/store.ts"],"sourcesContent":["import { createEffect, createRoot, createSignal, getOwner } from 'solid-js';\nimport { updateStyleRule } from '@moneko/common';\n\nfunction createModal() {\n  const [num, setNum] = createSignal(0);\n\n  createEffect(() => {\n    const count = num();\n\n    if (count === 0) {\n      updateStyleRule({ 'overflow-y': '' }, 'body');\n    } else if (count === 1) {\n      updateStyleRule({ 'overflow-y': 'hidden' }, 'body');\n    }\n  });\n  return {\n    num,\n    setNum,\n  };\n}\n\nexport default createRoot(createModal, getOwner());\n"],"names":["createModal","num","setNum","createSignal","createEffect","count","updateStyleRule","createRoot","getOwner"],"mappings":"kGAqBA,+CAAA,qBArBiE,wBACjC,0FAEhC,SAASA,IACP,GAAM,CAACC,EAAKC,EAAO,CAAGC,GAAAA,cAAY,EAAC,GAWnC,MATAC,GAAAA,cAAY,EAAC,KACX,IAAMC,EAAQJ,GAEVI,AAAU,CAAA,IAAVA,EACFC,GAAAA,SAAe,EAAC,CAAE,aAAc,EAAG,EAAG,QACnB,IAAVD,GACTC,GAAAA,SAAe,EAAC,CAAE,aAAc,QAAS,EAAG,OAEhD,GACO,CACLL,IAAAA,EACAC,OAAAA,CACF,CACF,OAEA,EAAeK,GAAAA,YAAU,EAACP,EAAaQ,GAAAA,UAAQ"}

package/lib/modal/style.js

@@ -113,5 +113,4 @@
       pointer-events: none;
     }
   }
-`;
-//# sourceMappingURL=style.js.map
+`;

package/lib/modal/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/modal/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .portal {\n    --opacity: 0;\n    --scale: 0;\n    --timing: ease-in;\n\n    position: fixed;\n    box-sizing: border-box;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    inline-size: 100%;\n    block-size: 100%;\n    z-index: 99999;\n    display: flex;\n\n    &::before {\n      position: absolute;\n      z-index: -1;\n      background-color: var(--mask-bg);\n      opacity: var(--opacity);\n      transition: opacity 0.2s var(--timing);\n      inset-inline-start: 0;\n      inset-block-start: 0;\n      content: '';\n      inline-size: 100%;\n      block-size: 100%;\n      pointer-events: none;\n    }\n  }\n\n  .mask-blur::before {\n    backdrop-filter: blur(10px);\n  }\n\n  .modal-content {\n    margin: auto;\n    border-radius: var(--border-radius);\n    padding: 20px 24px;\n    background-color: var(--modal-component-bg);\n    opacity: var(--opacity);\n    box-shadow: var(--modal-box-shadow);\n    inline-size: 520px;\n    max-inline-size: calc(100% - 32px);\n    transform: translate3d(var(--x), var(--y), 1px) scale3d(var(--scale), var(--scale), 1);\n    transition-property: transform, opacity;\n    transition-duration: 0.2s;\n    transition-timing-function: var(--timing);\n    backdrop-filter: blur(10px);\n  }\n\n  .open {\n    --opacity: 0;\n    --timing: ease-in;\n\n    animation: zoom-in 0.2s var(--timing) forwards;\n  }\n\n  .closeing {\n    --opacity: 1;\n    --timing: ease-out;\n\n    animation: zoom-out 0.2s var(--timing) forwards;\n  }\n\n  .modal-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-end;\n  }\n\n  .modal-title {\n    flex: 1;\n  }\n\n  .modal-close {\n    position: absolute;\n    inset-inline-end: 10px;\n    inset-block-start: 10px;\n\n    &::part(label) {\n      color: var(--text-color);\n    }\n  }\n\n  @keyframes zoom-in {\n    0% {\n      --opacity: 0;\n      --scale: 0;\n\n      pointer-events: none;\n    }\n\n    100% {\n      --opacity: 1;\n      --scale: 1;\n      --x: 0;\n      --y: 0;\n    }\n  }\n\n  @keyframes zoom-out {\n    0% {\n      --opacity: 1;\n      --scale: 1;\n      --x: 0;\n      --y: 0;\n    }\n\n    100% {\n      --opacity: 0;\n      --scale: 0;\n\n      pointer-events: none;\n    }\n  }\n`;\n"],"names":["style","css"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHzB,CAAC"}
+{"version":3,"sources":["components/modal/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .portal {\n    --opacity: 0;\n    --scale: 0;\n    --timing: ease-in;\n\n    position: fixed;\n    box-sizing: border-box;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    inline-size: 100%;\n    block-size: 100%;\n    z-index: 99999;\n    display: flex;\n\n    &::before {\n      position: absolute;\n      z-index: -1;\n      background-color: var(--mask-bg);\n      opacity: var(--opacity);\n      transition: opacity 0.2s var(--timing);\n      inset-inline-start: 0;\n      inset-block-start: 0;\n      content: '';\n      inline-size: 100%;\n      block-size: 100%;\n      pointer-events: none;\n    }\n  }\n\n  .mask-blur::before {\n    backdrop-filter: blur(10px);\n  }\n\n  .modal-content {\n    margin: auto;\n    border-radius: var(--border-radius);\n    padding: 20px 24px;\n    background-color: var(--modal-component-bg);\n    opacity: var(--opacity);\n    box-shadow: var(--modal-box-shadow);\n    inline-size: 520px;\n    max-inline-size: calc(100% - 32px);\n    transform: translate3d(var(--x), var(--y), 1px) scale3d(var(--scale), var(--scale), 1);\n    transition-property: transform, opacity;\n    transition-duration: 0.2s;\n    transition-timing-function: var(--timing);\n    backdrop-filter: blur(10px);\n  }\n\n  .open {\n    --opacity: 0;\n    --timing: ease-in;\n\n    animation: zoom-in 0.2s var(--timing) forwards;\n  }\n\n  .closeing {\n    --opacity: 1;\n    --timing: ease-out;\n\n    animation: zoom-out 0.2s var(--timing) forwards;\n  }\n\n  .modal-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-end;\n  }\n\n  .modal-title {\n    flex: 1;\n  }\n\n  .modal-close {\n    position: absolute;\n    inset-inline-end: 10px;\n    inset-block-start: 10px;\n\n    &::part(label) {\n      color: var(--text-color);\n    }\n  }\n\n  @keyframes zoom-in {\n    0% {\n      --opacity: 0;\n      --scale: 0;\n\n      pointer-events: none;\n    }\n\n    100% {\n      --opacity: 1;\n      --scale: 1;\n      --x: 0;\n      --y: 0;\n    }\n  }\n\n  @keyframes zoom-out {\n    0% {\n      --opacity: 1;\n      --scale: 1;\n      --x: 0;\n      --y: 0;\n    }\n\n    100% {\n      --opacity: 0;\n      --scale: 0;\n\n      pointer-events: none;\n    }\n  }\n`;\n"],"names":["style","css"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHzB,CAAC"}

package/lib/notification/index.js

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return r}});const e=n(require("./notification")),u=n(require("./queque"));function n(e){return e&&e.__esModule?e:{default:e}}const r={info:e.default.bind(null,"info"),success:e.default.bind(null,"success"),error:e.default.bind(null,"error"),warning:e.default.bind(null,"warning"),primary:e.default.bind(null,"primary"),update:u.default.update,destory:u.default.clean};
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return r}});const e=n(require("./notification")),u=n(require("./queque"));function n(e){return e&&e.__esModule?e:{default:e}}const r={info:e.default.bind(null,"info"),success:e.default.bind(null,"success"),error:e.default.bind(null,"error"),warning:e.default.bind(null,"warning"),primary:e.default.bind(null,"primary"),update:u.default.update,destory:u.default.clean};

package/lib/notification/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/notification/index.tsx"],"sourcesContent":["import notification from './notification';\nimport queque, { type NotificationProps } from './queque';\n\nexport type { NotificationProps, NotificationType } from './queque';\n\n/** Api */\ninterface Notification {\n  /**\n   * 信息\n   * @param {String} content               - 内容.\n   * @param {Number} duration                 - 显示时间.\n   * @param {Boolean} close                   - 显示关闭按钮.\n   * @return {String} id\n   */\n  info(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n  /**\n   * 成功\n   * @param {String} content               - 内容.\n   * @param {Number} duration                 - 显示时间.\n   * @param {Boolean} close                   - 显示关闭按钮.\n   * @return {String} id\n   */\n  success(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n  /**\n   * 错误\n   * @param {String} content               - 内容.\n   * @param {Number} duration                 - 显示时间.\n   * @param {Boolean} close                   - 显示关闭按钮.\n   * @return {String} id\n   */\n  error(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n  /**\n   * 警告\n   * @param {String} content               - 内容.\n   * @param {Number} duration                 - 显示时间.\n   * @param {Boolean} close                   - 显示关闭按钮.\n   * @return {String} id\n   */\n  warning(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n  /**\n   * 主要\n   * @param {String} content               - 内容.\n   * @param {Number} duration                 - 显示时间.\n   * @param {Boolean} close                   - 显示关闭按钮.\n   * @return {String} id\n   */\n  primary(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n  /**\n   * 更新通知内容\n   * @param {String} id 通知id\n   * @param {NotificationProps} item 更新内容\n   * @constructor\n   */\n  update(uniqueId: string, item: NotificationProps): void;\n  /**\n   * 销毁全部通知\n   * @constructor\n   */\n  destory: VoidFunction;\n}\n\nexport default {\n  info: notification.bind(null, 'info'),\n  success: notification.bind(null, 'success'),\n  error: notification.bind(null, 'error'),\n  warning: notification.bind(null, 'warning'),\n  primary: notification.bind(null, 'primary'),\n  update: queque.update,\n  destory: queque.clean,\n} as Notification;\n"],"names":["info","notification","bind","success","error","warning","primary","update","queque","destory","clean"],"mappings":"kGA6DA,+CAAA,uBA7DyB,+BACsB,sEA4D/C,EAAe,CACbA,KAAMC,SAAY,CAACC,IAAI,CAAC,KAAM,QAC9BC,QAASF,SAAY,CAACC,IAAI,CAAC,KAAM,WACjCE,MAAOH,SAAY,CAACC,IAAI,CAAC,KAAM,SAC/BG,QAASJ,SAAY,CAACC,IAAI,CAAC,KAAM,WACjCI,QAASL,SAAY,CAACC,IAAI,CAAC,KAAM,WACjCK,OAAQC,SAAM,CAACD,MAAM,CACrBE,QAASD,SAAM,CAACE,KAAK,AACvB"}
+{"version":3,"sources":["components/notification/index.tsx"],"sourcesContent":["import notification from './notification';\nimport queque, { type NotificationProps } from './queque';\n\nexport type { NotificationProps, NotificationType } from './queque';\n\n/** Api */\ninterface Notification {\n  /**\n   * 信息\n   * @param {String} content               - 内容.\n   * @param {Number} duration                 - 显示时间.\n   * @param {Boolean} close                   - 显示关闭按钮.\n   * @return {String} id\n   */\n  info(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n  /**\n   * 成功\n   * @param {String} content               - 内容.\n   * @param {Number} duration                 - 显示时间.\n   * @param {Boolean} close                   - 显示关闭按钮.\n   * @return {String} id\n   */\n  success(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n  /**\n   * 错误\n   * @param {String} content               - 内容.\n   * @param {Number} duration                 - 显示时间.\n   * @param {Boolean} close                   - 显示关闭按钮.\n   * @return {String} id\n   */\n  error(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n  /**\n   * 警告\n   * @param {String} content               - 内容.\n   * @param {Number} duration                 - 显示时间.\n   * @param {Boolean} close                   - 显示关闭按钮.\n   * @return {String} id\n   */\n  warning(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n  /**\n   * 主要\n   * @param {String} content               - 内容.\n   * @param {Number} duration                 - 显示时间.\n   * @param {Boolean} close                   - 显示关闭按钮.\n   * @return {String} id\n   */\n  primary(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n  /**\n   * 更新通知内容\n   * @param {String} id 通知id\n   * @param {NotificationProps} item 更新内容\n   * @constructor\n   */\n  update(uniqueId: string, item: NotificationProps): void;\n  /**\n   * 销毁全部通知\n   * @constructor\n   */\n  destory: VoidFunction;\n}\n\nexport default {\n  info: notification.bind(null, 'info'),\n  success: notification.bind(null, 'success'),\n  error: notification.bind(null, 'error'),\n  warning: notification.bind(null, 'warning'),\n  primary: notification.bind(null, 'primary'),\n  update: queque.update,\n  destory: queque.clean,\n} as Notification;\n"],"names":["info","notification","bind","success","error","warning","primary","update","queque","destory","clean"],"mappings":"kGA6DA,+CAAA,uBA7DyB,+BACsB,sEA4D/C,EAAe,CACbA,KAAMC,SAAY,CAACC,IAAI,CAAC,KAAM,QAC9BC,QAASF,SAAY,CAACC,IAAI,CAAC,KAAM,WACjCE,MAAOH,SAAY,CAACC,IAAI,CAAC,KAAM,SAC/BG,QAASJ,SAAY,CAACC,IAAI,CAAC,KAAM,WACjCI,QAASL,SAAY,CAACC,IAAI,CAAC,KAAM,WACjCK,OAAQC,SAAM,CAACD,MAAM,CACrBE,QAASD,SAAM,CAACE,KAAK,AACvB"}

package/lib/notification/notification.js

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return f}});const e=require("solid-js/web"),t=require("solid-js"),n=require("@moneko/css"),r=i(require("../theme")),l=i(require("./queque")),o=require("./styles");function i(e){return e&&e.__esModule?e:{default:e}}const s=(0,e.template)("<style> "),c=(0,e.template)("<style>"),u=(0,e.template)('<span class="close">'),a=(0,e.template)('<div><div class="content">'),d="n-notification-box",f=(i,f,m=3e3,h,p)=>{let g=(0,t.createUniqueId)(),{list:v,add:y,remove:q}=l.default,{baseStyle:_}=r.default,w=document.getElementById(d);if(y({type:i,icon:p,children:f,close:h,uniqueId:g}),m&&m>0){let e=setTimeout(()=>{q(g),clearTimeout(e)},m)}if(!w){(w=document.createElement("div")).id=d,w.style.position="fixed",w.style.insetBlockStart="16px",w.style.insetInlineStart="50%",w.style.transform="translateX(-50%)",w.attachShadow({mode:"open"});let r=(0,e.render)(()=>((0,t.createEffect)(()=>{0===v().length&&(r(),w?.remove())}),(0,e.createComponent)(t.Show,{get when(){return v().length},get children(){return[(()=>{let t=s(),n=t.firstChild;return(0,e.effect)(()=>n.data=_()),t})(),(()=>{let e=c();return e.textContent=o.styles,e})(),(0,e.createComponent)(t.For,{get each(){return v()},children:r=>(()=>{let l=a(),o=l.firstChild;return(0,e.insert)(l,(0,e.createComponent)(t.Show,{get when(){return r.icon},get children(){return r.icon}}),o),(0,e.insert)(o,()=>r.children),(0,e.insert)(l,(0,e.createComponent)(t.Show,{get when(){return r.close},get children(){let e=u();return e.$$click=()=>{q(r.uniqueId)},e}}),null),(0,e.effect)(t=>{let o=(0,n.cx)("notification",r.type),i=!!r.closeing;return o!==t._v$&&(0,e.className)(l,t._v$=o),i!==t._v$2&&l.classList.toggle("closeing",t._v$2=i),t},{_v$:void 0,_v$2:void 0}),l})()})]}})),w.shadowRoot);document.body.appendChild(w)}return g};(0,e.delegateEvents)(["click"]);
-//# sourceMappingURL=notification.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return m}});const e=require("solid-js/web"),t=require("solid-js"),n=require("@moneko/css"),r=i(require("../theme")),l=i(require("./queque")),o=require("./styles");function i(e){return e&&e.__esModule?e:{default:e}}const s=(0,e.template)("<style> "),c=(0,e.template)("<style>"),u=(0,e.template)('<span class="close">'),a=(0,e.template)('<div><div class="content">'),d="n-notification-box",f=(i,f,m=3e3,h,p)=>{let g=(0,t.createUniqueId)(),{list:v,add:y,remove:q}=l.default,{baseStyle:_}=r.default,w=document.getElementById(d);if(y({type:i,icon:p,children:f,close:h,uniqueId:g}),m&&m>0){let e=setTimeout(()=>{q(g),clearTimeout(e)},m)}if(!w){(w=document.createElement("div")).id=d,w.style.position="fixed",w.style.insetBlockStart="16px",w.style.insetInlineStart="50%",w.style.transform="translateX(-50%)",w.attachShadow({mode:"open"});let r=(0,e.render)(()=>((0,t.createEffect)(()=>{0===v().length&&(r(),w?.remove())}),(0,e.createComponent)(t.Show,{get when(){return v().length},get children(){return[(()=>{let t=s(),n=t.firstChild;return(0,e.effect)(()=>n.data=_()),t})(),(()=>{let e=c();return e.textContent=o.styles,e})(),(0,e.createComponent)(t.For,{get each(){return v()},children:r=>(()=>{let l=a(),o=l.firstChild;return(0,e.insert)(l,(0,e.createComponent)(t.Show,{get when(){return r.icon},get children(){return r.icon}}),o),(0,e.insert)(o,()=>r.children),(0,e.insert)(l,(0,e.createComponent)(t.Show,{get when(){return r.close},get children(){let e=u();return e.$$click=()=>{q(r.uniqueId)},e}}),null),(0,e.effect)(t=>{let o=(0,n.cx)("notification",r.type),i=!!r.closeing;return o!==t._v$&&(0,e.className)(l,t._v$=o),i!==t._v$2&&l.classList.toggle("closeing",t._v$2=i),t},{_v$:void 0,_v$2:void 0}),l})()})]}})),w.shadowRoot);document.body.appendChild(w)}return g},m=f;(0,e.delegateEvents)(["click"]);

package/lib/notification/notification.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/notification/notification.tsx"],"sourcesContent":["import { createEffect, createUniqueId, For, Show } from 'solid-js';\nimport { render } from 'solid-js/web';\nimport { cx } from '@moneko/css';\n\nimport theme from '../theme';\n\nimport queque, { type NotificationType } from './queque';\nimport { styles } from './styles';\n\nconst mountId = 'n-notification-box';\n\nconst notification = (\n  type: keyof typeof NotificationType,\n  children: JSX.Element,\n  duration = 3000,\n  close?: boolean,\n  icon?: JSX.Element,\n) => {\n  const uniqueId = createUniqueId();\n  const { list, add, remove } = queque;\n  const { baseStyle } = theme;\n  let mount = document.getElementById(mountId);\n\n  add({\n    type,\n    icon,\n    children,\n    close,\n    uniqueId,\n  });\n  if (duration && duration > 0) {\n    const timer = setTimeout(() => {\n      remove(uniqueId);\n      clearTimeout(timer);\n    }, duration);\n  }\n  if (!mount) {\n    mount = document.createElement('div');\n    mount.id = mountId;\n    mount.style.position = 'fixed';\n    mount.style.insetBlockStart = '16px';\n    mount.style.insetInlineStart = '50%';\n    mount.style.transform = 'translateX(-50%)';\n    mount.attachShadow({ mode: 'open' });\n\n    const unmount = render(() => {\n      createEffect(() => {\n        if (list().length === 0) {\n          unmount();\n          mount?.remove();\n        }\n      });\n      return (\n        <Show when={list().length}>\n          <style textContent={baseStyle()} />\n          <style textContent={styles} />\n          <For each={list()}>\n            {(item) => {\n              return (\n                <div\n                  class={cx('notification', item.type)}\n                  classList={{\n                    closeing: item.closeing,\n                  }}\n                >\n                  <Show when={item.icon}>{item.icon}</Show>\n                  <div class=\"content\">{item.children}</div>\n                  <Show when={item.close}>\n                    <span\n                      class=\"close\"\n                      onClick={() => {\n                        remove(item.uniqueId);\n                      }}\n                    />\n                  </Show>\n                </div>\n              );\n            }}\n          </For>\n        </Show>\n      );\n    }, mount.shadowRoot!);\n\n    document.body.appendChild(mount);\n  }\n  return uniqueId;\n};\n\nexport default notification;\n"],"names":["mountId","type","children","duration","close","icon","uniqueId","createUniqueId","list","add","remove","queque","baseStyle","theme","mount","document","getElementById","timer","setTimeout","clearTimeout","createElement","id","style","position","insetBlockStart","insetInlineStart","transform","attachShadow","mode","unmount","render","createEffect","length","Show","styles","For","item","cx","closeing","shadowRoot","body","appendChild"],"mappings":"kGAwFA,+CAAA,qBAvFuB,0BADiC,sBAErC,2BAED,yBAE4B,uBACvB,sNAEjBA,EAAU,qBA+EhB,EA7EqB,CACnBC,EACAC,EACAC,EAAW,GAAI,CACfC,EACAC,KAEA,IAAMC,EAAWC,GAAAA,gBAAc,IACzB,CAAEC,KAAAA,CAAI,CAAEC,IAAAA,CAAG,CAAEC,OAAAA,CAAM,CAAE,CAAGC,SAAM,CAC9B,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CACvBC,EAAQC,SAASC,cAAc,CAAChB,GASpC,GAPAS,EAAI,CACFR,KAAAA,EACAI,KAAAA,EACAH,SAAAA,EACAE,MAAAA,EACAE,SAAAA,CACF,GACIH,GAAYA,EAAW,EAAG,CAC5B,IAAMc,EAAQC,WAAW,KACvBR,EAAOJ,GACPa,aAAaF,EACf,EAAGd,EACL,CACA,GAAI,CAACW,EAAO,CAEVA,AADAA,CAAAA,EAAQC,SAASK,aAAa,CAAC,MAAK,EAC9BC,EAAE,CAAGrB,EACXc,EAAMQ,KAAK,CAACC,QAAQ,CAAG,QACvBT,EAAMQ,KAAK,CAACE,eAAe,CAAG,OAC9BV,EAAMQ,KAAK,CAACG,gBAAgB,CAAG,MAC/BX,EAAMQ,KAAK,CAACI,SAAS,CAAG,mBACxBZ,EAAMa,YAAY,CAAC,CAAEC,KAAM,MAAO,GAElC,IAAMC,EAAUC,GAAAA,QAAM,EAAC,KACrBC,GAAAA,cAAY,EAAC,KACW,IAAlBvB,IAAOwB,MAAM,GACfH,IACAf,GAAOJ,SAEX,yBAEGuB,MAAI,oBAAOzB,IAAOwB,MAAM,qFACHpB,gDACAsB,QAAM,6BACzBC,KAAG,oBAAO3B,cACR,AAAC4B,6EAQKH,MAAI,oBAAOG,EAAK/B,IAAI,wBAAG+B,EAAK/B,IAAI,0BACX+B,EAAKlC,QAAQ,uCAClC+B,MAAI,oBAAOG,EAAKhC,KAAK,4CAGT,KACPM,EAAO0B,EAAK9B,QAAQ,CACtB,oCAZG+B,GAAAA,IAAE,EAAC,eAAgBD,EAAKnC,IAAI,MAEvBmC,EAAKE,QAAQ,4IAmBpCxB,EAAMyB,UAAU,EAEnBxB,SAASyB,IAAI,CAACC,WAAW,CAAC3B,EAC5B,CACA,OAAOR,CACT"}
+{"version":3,"sources":["components/notification/notification.tsx"],"sourcesContent":["import { createEffect, createUniqueId, For, Show } from 'solid-js';\nimport { render } from 'solid-js/web';\nimport { cx } from '@moneko/css';\n\nimport theme from '../theme';\n\nimport queque, { type NotificationType } from './queque';\nimport { styles } from './styles';\n\nconst mountId = 'n-notification-box';\n\nconst notification = (\n  type: keyof typeof NotificationType,\n  children: JSX.Element,\n  duration = 3000,\n  close?: boolean,\n  icon?: JSX.Element,\n) => {\n  const uniqueId = createUniqueId();\n  const { list, add, remove } = queque;\n  const { baseStyle } = theme;\n  let mount = document.getElementById(mountId);\n\n  add({\n    type,\n    icon,\n    children,\n    close,\n    uniqueId,\n  });\n  if (duration && duration > 0) {\n    const timer = setTimeout(() => {\n      remove(uniqueId);\n      clearTimeout(timer);\n    }, duration);\n  }\n  if (!mount) {\n    mount = document.createElement('div');\n    mount.id = mountId;\n    mount.style.position = 'fixed';\n    mount.style.insetBlockStart = '16px';\n    mount.style.insetInlineStart = '50%';\n    mount.style.transform = 'translateX(-50%)';\n    mount.attachShadow({ mode: 'open' });\n\n    const unmount = render(() => {\n      createEffect(() => {\n        if (list().length === 0) {\n          unmount();\n          mount?.remove();\n        }\n      });\n      return (\n        <Show when={list().length}>\n          <style textContent={baseStyle()} />\n          <style textContent={styles} />\n          <For each={list()}>\n            {(item) => {\n              return (\n                <div\n                  class={cx('notification', item.type)}\n                  classList={{\n                    closeing: item.closeing,\n                  }}\n                >\n                  <Show when={item.icon}>{item.icon}</Show>\n                  <div class=\"content\">{item.children}</div>\n                  <Show when={item.close}>\n                    <span\n                      class=\"close\"\n                      onClick={() => {\n                        remove(item.uniqueId);\n                      }}\n                    />\n                  </Show>\n                </div>\n              );\n            }}\n          </For>\n        </Show>\n      );\n    }, mount.shadowRoot!);\n\n    document.body.appendChild(mount);\n  }\n  return uniqueId;\n};\n\nexport default notification;\n"],"names":["mountId","notification","type","children","duration","close","icon","uniqueId","createUniqueId","list","add","remove","queque","baseStyle","theme","mount","document","getElementById","timer","setTimeout","clearTimeout","createElement","id","style","position","insetBlockStart","insetInlineStart","transform","attachShadow","mode","unmount","render","createEffect","length","Show","styles","For","item","cx","closeing","shadowRoot","body","appendChild"],"mappings":"kGAwFA,+CAAA,qBAvFuB,0BADiC,sBAErC,2BAED,yBAE4B,uBACvB,sNAEjBA,EAAU,qBAEVC,EAAe,CACnBC,EACAC,EACAC,EAAW,GAAI,CACfC,EACAC,KAEA,IAAMC,EAAWC,GAAAA,gBAAc,IACzB,CAAEC,KAAAA,CAAI,CAAEC,IAAAA,CAAG,CAAEC,OAAAA,CAAM,CAAE,CAAGC,SAAM,CAC9B,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CACvBC,EAAQC,SAASC,cAAc,CAACjB,GASpC,GAPAU,EAAI,CACFR,KAAAA,EACAI,KAAAA,EACAH,SAAAA,EACAE,MAAAA,EACAE,SAAAA,CACF,GACIH,GAAYA,EAAW,EAAG,CAC5B,IAAMc,EAAQC,WAAW,KACvBR,EAAOJ,GACPa,aAAaF,EACf,EAAGd,EACL,CACA,GAAI,CAACW,EAAO,CAEVA,AADAA,CAAAA,EAAQC,SAASK,aAAa,CAAC,MAAK,EAC9BC,EAAE,CAAGtB,EACXe,EAAMQ,KAAK,CAACC,QAAQ,CAAG,QACvBT,EAAMQ,KAAK,CAACE,eAAe,CAAG,OAC9BV,EAAMQ,KAAK,CAACG,gBAAgB,CAAG,MAC/BX,EAAMQ,KAAK,CAACI,SAAS,CAAG,mBACxBZ,EAAMa,YAAY,CAAC,CAAEC,KAAM,MAAO,GAElC,IAAMC,EAAUC,GAAAA,QAAM,EAAC,KACrBC,GAAAA,cAAY,EAAC,KACW,IAAlBvB,IAAOwB,MAAM,GACfH,IACAf,GAAOJ,SAEX,yBAEGuB,MAAI,oBAAOzB,IAAOwB,MAAM,qFACHpB,gDACAsB,QAAM,6BACzBC,KAAG,oBAAO3B,cACR,AAAC4B,6EAQKH,MAAI,oBAAOG,EAAK/B,IAAI,wBAAG+B,EAAK/B,IAAI,0BACX+B,EAAKlC,QAAQ,uCAClC+B,MAAI,oBAAOG,EAAKhC,KAAK,4CAGT,KACPM,EAAO0B,EAAK9B,QAAQ,CACtB,oCAZG+B,GAAAA,IAAE,EAAC,eAAgBD,EAAKnC,IAAI,MAEvBmC,EAAKE,QAAQ,4IAmBpCxB,EAAMyB,UAAU,EAEnBxB,SAASyB,IAAI,CAACC,WAAW,CAAC3B,EAC5B,CACA,OAAOR,CACT,EAEA,EAAeN"}

package/lib/notification/queque.js

@@ -1,2 +1 @@
-"use strict";var e,n;Object.defineProperty(exports,"__esModule",{value:!0}),function(e,n){for(var r in n)Object.defineProperty(e,r,{enumerable:!0,get:n[r]})}(exports,{NotificationType:function(){return e},default:function(){return t}});const r=require("solid-js");(n=e||(e={})).info="info",n.success="success",n.error="error",n.warning="warning",n.primary="primary";const t=(0,r.createRoot)(()=>{let[e,n]=(0,r.createSignal)([]);return{list:e,add:function(e){n(n=>[...n,e])},remove:function(e){n(n=>n.map(n=>n.uniqueId===e?{...n,closeing:!0}:n));let r=setTimeout(()=>{n(n=>n.filter(n=>n.uniqueId!==e)),clearTimeout(r)},200)},clean:function(){n([])},update:function(e,r){n(n=>n.map(n=>n.uniqueId===e?{...n,...r}:n))}}});
-//# sourceMappingURL=queque.js.map
+"use strict";var e;function n(e,n){for(var r in n)Object.defineProperty(e,r,{enumerable:!0,get:n[r]})}Object.defineProperty(exports,"__esModule",{value:!0}),n(exports,{NotificationType:function(){return e},default:function(){return i}});const r=require("solid-js");!function(e){e.info="info",e.success="success",e.error="error",e.warning="warning",e.primary="primary"}(e||(e={}));const t=(0,r.createRoot)(()=>{let[e,n]=(0,r.createSignal)([]);return{list:e,add:function(e){n(n=>[...n,e])},remove:function(e){n(n=>n.map(n=>n.uniqueId===e?{...n,closeing:!0}:n));let r=setTimeout(()=>{n(n=>n.filter(n=>n.uniqueId!==e)),clearTimeout(r)},200)},clean:function(){n([])},update:function(e,r){n(n=>n.map(n=>n.uniqueId===e?{...n,...r}:n))}}}),i=t;

package/lib/notification/queque.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/notification/queque.ts"],"sourcesContent":["import { createRoot, createSignal } from 'solid-js';\n\n/** Api\n * @since 2.7.0\n */\nexport interface NotificationProps {\n  /** 通知类型 */\n  type: keyof typeof NotificationType;\n  /** 通知内容 */\n  children: JSX.Element;\n  /** 图标 */\n  icon?: JSX.Element;\n  /**\n   * 是否显示关闭按钮\n   * @default false\n   */\n  close?: boolean;\n  /**\n   * 显示通知时间, 到时自动关闭; 当 duration < 1 时不自动关闭\n   * @default 3000\n   */\n  duration?: boolean;\n}\n\n/** 通知类型 */\nexport enum NotificationType {\n  /** 详细 */\n  info = 'info',\n  /** 成功 */\n  success = 'success',\n  /** 错误 */\n  error = 'error',\n  /** 警告 */\n  warning = 'warning',\n  /** 主要 */\n  primary = 'primary',\n}\n\ninterface NotificationQueQue extends NotificationProps {\n  uniqueId: string;\n  closeing?: boolean;\n}\nconst queque = createRoot(() => {\n  const [list, setList] = createSignal<NotificationQueQue[]>([]);\n\n  function add(item: NotificationQueQue) {\n    setList((prev) => [...prev, item]);\n  }\n  function remove(uniqueId: string) {\n    setList((prev) =>\n      prev.map((q) => {\n        if (q.uniqueId === uniqueId) {\n          return { ...q, closeing: true };\n        }\n        return q;\n      }),\n    );\n    const timer = setTimeout(() => {\n      setList((prev) => prev.filter((q) => q.uniqueId !== uniqueId));\n      clearTimeout(timer);\n    }, 200);\n  }\n  function update(uniqueId: string, item: NotificationProps) {\n    setList((prev) =>\n      prev.map((q) => {\n        if (q.uniqueId === uniqueId) {\n          return { ...q, ...item };\n        }\n        return q;\n      }),\n    );\n  }\n  function clean() {\n    setList([]);\n  }\n  return { list, add, remove, clean, update };\n});\n\nexport default queque;\n"],"names":["NotificationType","createRoot","list","setList","createSignal","add","item","prev","remove","uniqueId","map","q","closeing","timer","setTimeout","filter","clearTimeout","clean","update"],"mappings":"mBAyBYA,0LAqDZ,OAAsB,mBAAtB,qBA9EyC,aAyB7BA,EAAAA,IAAAA,qGAqDZ,EApCeC,GAAAA,YAAU,EAAC,KACxB,GAAM,CAACC,EAAMC,EAAQ,CAAGC,GAAAA,cAAY,EAAuB,EAAE,EAgC7D,MAAO,CAAEF,KAAAA,EAAMG,IA9Bf,SAAaC,CAAwB,EACnCH,EAAQ,AAACI,GAAS,IAAIA,EAAMD,EAAK,CACnC,EA4BoBE,OA3BpB,SAAgBC,CAAgB,EAC9BN,EAAQ,AAACI,GACPA,EAAKG,GAAG,CAAC,AAACC,GACR,AAAIA,EAAEF,QAAQ,GAAKA,EACV,CAAE,GAAGE,CAAC,CAAEC,SAAU,CAAA,CAAK,EAEzBD,IAGX,IAAME,EAAQC,WAAW,KACvBX,EAAQ,AAACI,GAASA,EAAKQ,MAAM,CAAC,AAACJ,GAAMA,EAAEF,QAAQ,GAAKA,IACpDO,aAAaH,EACf,EAAG,IACL,EAc4BI,MAH5B,WACEd,EAAQ,EAAE,CACZ,EACmCe,OAbnC,SAAgBT,CAAgB,CAAEH,CAAuB,EACvDH,EAAQ,AAACI,GACPA,EAAKG,GAAG,CAAC,AAACC,GACR,AAAIA,EAAEF,QAAQ,GAAKA,EACV,CAAE,GAAGE,CAAC,CAAE,GAAGL,CAAI,AAAC,EAElBK,GAGb,CAI0C,CAC5C"}
+{"version":3,"sources":["components/notification/queque.ts"],"sourcesContent":["import { createRoot, createSignal } from 'solid-js';\n\n/** Api\n * @since 2.7.0\n */\nexport interface NotificationProps {\n  /** 通知类型 */\n  type: keyof typeof NotificationType;\n  /** 通知内容 */\n  children: JSX.Element;\n  /** 图标 */\n  icon?: JSX.Element;\n  /**\n   * 是否显示关闭按钮\n   * @default false\n   */\n  close?: boolean;\n  /**\n   * 显示通知时间, 到时自动关闭; 当 duration < 1 时不自动关闭\n   * @default 3000\n   */\n  duration?: boolean;\n}\n\n/** 通知类型 */\nexport enum NotificationType {\n  /** 详细 */\n  info = 'info',\n  /** 成功 */\n  success = 'success',\n  /** 错误 */\n  error = 'error',\n  /** 警告 */\n  warning = 'warning',\n  /** 主要 */\n  primary = 'primary',\n}\n\ninterface NotificationQueQue extends NotificationProps {\n  uniqueId: string;\n  closeing?: boolean;\n}\nconst queque = createRoot(() => {\n  const [list, setList] = createSignal<NotificationQueQue[]>([]);\n\n  function add(item: NotificationQueQue) {\n    setList((prev) => [...prev, item]);\n  }\n  function remove(uniqueId: string) {\n    setList((prev) =>\n      prev.map((q) => {\n        if (q.uniqueId === uniqueId) {\n          return { ...q, closeing: true };\n        }\n        return q;\n      }),\n    );\n    const timer = setTimeout(() => {\n      setList((prev) => prev.filter((q) => q.uniqueId !== uniqueId));\n      clearTimeout(timer);\n    }, 200);\n  }\n  function update(uniqueId: string, item: NotificationProps) {\n    setList((prev) =>\n      prev.map((q) => {\n        if (q.uniqueId === uniqueId) {\n          return { ...q, ...item };\n        }\n        return q;\n      }),\n    );\n  }\n  function clean() {\n    setList([]);\n  }\n  return { list, add, remove, clean, update };\n});\n\nexport default queque;\n"],"names":["NotificationType","queque","createRoot","list","setList","createSignal","add","item","prev","remove","uniqueId","map","q","closeing","timer","setTimeout","filter","clearTimeout","clean","update"],"mappings":"8MA8EA,OAAsB,mBAAtB,qBA9EyC,sBAyB7BA,8FAAAA,IAAAA,OAiBZ,MAAMC,EAASC,GAAAA,YAAU,EAAC,KACxB,GAAM,CAACC,EAAMC,EAAQ,CAAGC,GAAAA,cAAY,EAAuB,EAAE,EAgC7D,MAAO,CAAEF,KAAAA,EAAMG,IA9Bf,SAAaC,CAAwB,EACnCH,EAAQ,AAACI,GAAS,IAAIA,EAAMD,EAAK,CACnC,EA4BoBE,OA3BpB,SAAgBC,CAAgB,EAC9BN,EAAQ,AAACI,GACPA,EAAKG,GAAG,CAAC,AAACC,GACR,AAAIA,EAAEF,QAAQ,GAAKA,EACV,CAAE,GAAGE,CAAC,CAAEC,SAAU,CAAA,CAAK,EAEzBD,IAGX,IAAME,EAAQC,WAAW,KACvBX,EAAQ,AAACI,GAASA,EAAKQ,MAAM,CAAC,AAACJ,GAAMA,EAAEF,QAAQ,GAAKA,IACpDO,aAAaH,EACf,EAAG,IACL,EAc4BI,MAH5B,WACEd,EAAQ,EAAE,CACZ,EACmCe,OAbnC,SAAgBT,CAAgB,CAAEH,CAAuB,EACvDH,EAAQ,AAACI,GACPA,EAAKG,GAAG,CAAC,AAACC,GACR,AAAIA,EAAEF,QAAQ,GAAKA,EACV,CAAE,GAAGE,CAAC,CAAE,GAAGL,CAAI,AAAC,EAElBK,GAGb,CAI0C,CAC5C,GAEA,EAAeX"}

package/lib/notification/styles.js

@@ -93,5 +93,4 @@
       margin-block-start: -50px;
     }
   }
-`;
-//# sourceMappingURL=styles.js.map
+`;

package/lib/notification/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/notification/styles.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const styles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    row-gap: 16px;\n    pointer-events: none;\n  }\n\n  .notification {\n    inline-size: fit-content;\n    display: flex;\n    align-items: center;\n    border-radius: var(--border-radius);\n    padding: 5px 16px;\n    background-color: var(--modal-component-bg);\n    opacity: var(--opacity);\n    box-shadow: var(--notification-box-shadow);\n    backdrop-filter: blur(10px);\n    gap: 8px;\n    pointer-events: all;\n    animation: scale-in 0.2s forwards;\n\n    &.closeing {\n      animation: scale-out 0.2s forwards;\n    }\n\n    &.error {\n      color: var(--error-color);\n      background-color: var(--error-notify-bg);\n    }\n\n    &.success {\n      color: var(--success-color);\n      background-color: var(--success-notify-bg);\n    }\n\n    &.warning {\n      color: var(--warning-color);\n      background-color: var(--warning-notify-bg);\n    }\n\n    &.primary {\n      color: var(--primary-color);\n      background-color: var(--primary-notify-bg);\n    }\n  }\n\n  .close {\n    border-radius: 16px;\n    font-size: 14px;\n    text-align: center;\n    opacity: 0.8;\n    outline: 2px solid transparent;\n    transition: transform var(--transition-duration);\n    transform: translate3d(50%, 0, 1px);\n    cursor: pointer;\n    block-size: 14px;\n    line-height: 1;\n    inline-size: 14px;\n\n    &::before {\n      content: '⛌';\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  @keyframes scale-in {\n    from {\n      transform: translate3d(0, -100%, 1px);\n      opacity: 0;\n    }\n\n    to {\n      transform: translate3d(0, 0, 1px);\n      opacity: 1;\n    }\n  }\n\n  @keyframes scale-out {\n    0% {\n      z-index: -1;\n      opacity: 1;\n      margin-block-start: 0;\n    }\n\n    100% {\n      z-index: -1;\n      opacity: 0;\n      margin-block-start: -50px;\n    }\n  }\n`;\n"],"names":["styles","css"],"mappings":"kGAEaA,8CAAAA,qBAFO,eAEPA,EAASC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+F1B,CAAC"}
+{"version":3,"sources":["components/notification/styles.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const styles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    row-gap: 16px;\n    pointer-events: none;\n  }\n\n  .notification {\n    inline-size: fit-content;\n    display: flex;\n    align-items: center;\n    border-radius: var(--border-radius);\n    padding: 5px 16px;\n    background-color: var(--modal-component-bg);\n    opacity: var(--opacity);\n    box-shadow: var(--notification-box-shadow);\n    backdrop-filter: blur(10px);\n    gap: 8px;\n    pointer-events: all;\n    animation: scale-in 0.2s forwards;\n\n    &.closeing {\n      animation: scale-out 0.2s forwards;\n    }\n\n    &.error {\n      color: var(--error-color);\n      background-color: var(--error-notify-bg);\n    }\n\n    &.success {\n      color: var(--success-color);\n      background-color: var(--success-notify-bg);\n    }\n\n    &.warning {\n      color: var(--warning-color);\n      background-color: var(--warning-notify-bg);\n    }\n\n    &.primary {\n      color: var(--primary-color);\n      background-color: var(--primary-notify-bg);\n    }\n  }\n\n  .close {\n    border-radius: 16px;\n    font-size: 14px;\n    text-align: center;\n    opacity: 0.8;\n    outline: 2px solid transparent;\n    transition: transform var(--transition-duration);\n    transform: translate3d(50%, 0, 1px);\n    cursor: pointer;\n    block-size: 14px;\n    line-height: 1;\n    inline-size: 14px;\n\n    &::before {\n      content: '⛌';\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  @keyframes scale-in {\n    from {\n      transform: translate3d(0, -100%, 1px);\n      opacity: 0;\n    }\n\n    to {\n      transform: translate3d(0, 0, 1px);\n      opacity: 1;\n    }\n  }\n\n  @keyframes scale-out {\n    0% {\n      z-index: -1;\n      opacity: 1;\n      margin-block-start: 0;\n    }\n\n    100% {\n      z-index: -1;\n      opacity: 0;\n      margin-block-start: -50px;\n    }\n  }\n`;\n"],"names":["styles","css"],"mappings":"kGAEaA,8CAAAA,qBAFO,eAEPA,EAASC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+F1B,CAAC"}

package/lib/pagination/index.js

@@ -1,2 +1 @@
-"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _}});const t=require("solid-js/web"),r=require("solid-js"),n=(e=require("@moneko/common/lib/isFunction"))&&e.__esModule?e:{default:e},i=require("@moneko/css"),a=require("solid-element"),l=require("../basic-config"),o=function(e,t){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=c(void 0);if(r&&r.has(e))return r.get(e);var n={__proto__:null},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var l=i?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(n,a,l):n[a]=e[a]}return n.default=e,r&&r.set(e,n),n}(require("../theme")),s=require("./styles");function c(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(c=function(e){return e?r:t})(e)}require("../button"),require("../typography");const u=(0,t.template)("<li>"),p=(0,t.template)(`<li><slot name="total-text"><n-typography>共 <!> 项`,!0,!1),f=(0,t.template)("<style> "),v=(0,t.template)("<style>"),d=(0,t.template)(`<nav aria-label="pagination" class="pagination"><ul><li><n-button class="pagination-item pagination-prev">〈</n-button></li><li><n-button class="pagination-item pagination-next">〉`,!0,!1),g=(0,t.template)('<li><n-button class="pagination-item">',!0,!1);function h(e){let{baseStyle:a}=o.default,[l,c]=(0,r.splitProps)(e,["page","pageSize","total","css","totalText"]),[h,_]=(0,r.createSignal)(1),[m,$]=(0,r.createSignal)(20),[b,y]=(0,r.createSignal)(0);(0,r.createEffect)(()=>{(0,r.batch)(()=>{"number"==typeof l.page&&l.page!==(0,r.untrack)(h)&&_(l.page),"number"==typeof l.pageSize&&l.pageSize!==(0,r.untrack)(m)&&$(l.pageSize),"number"==typeof l.total&&l.total!==(0,r.untrack)(b)&&y(l.total)})});let w=(0,r.createMemo)(()=>Math.ceil(b()/m())),C=(0,r.createMemo)(()=>{let e=w(),t=[];if(e<=5)for(let r=1;r<=e;r++)t.push(r);else{let r=Math.min(e,Math.max(1,h()-Math.floor(2.5))+5-1);for(let e=r-5+1;e<=r;e++)t.push(e)}if(t.length){let r=t[t.length-1],n=t[0];n>=2&&(2===n?t.splice(0,1,"p"):t.unshift("p"),t.unshift(1),r<e&&(r+=1,t.push(r))),r===e-1?(t.splice(t.length-1,1,"n"),t.push(e)):r<e-1&&(t.push("n"),t.push(e))}return t});function k(e){let t=(0,r.untrack)(h),n="n"===e?t+5:"p"===e?t-5:e;n<1?n=1:n>(0,r.untrack)(w)&&(n=(0,r.untrack)(w)),t!==n&&(void 0===l.page&&_(n),c.onChange?.(n,(0,r.untrack)(m)))}let x=()=>{let e=(0,r.createMemo)(()=>[(h()-1)*m()+1,h()*m()]);return(0,t.createComponent)(r.Show,{get when(){return!1!==l.totalText},get children(){let r=u();return(0,t.insert)(r,(()=>{let r=(0,t.memo)(()=>!!(0,n.default)(l.totalText));return()=>r()?l.totalText(b(),e()):(()=>{let e=p(),r=e.firstChild,n=r.firstChild,i=n.firstChild.nextSibling;return i.nextSibling,r._$owner=(0,t.getOwner)(),n._$owner=(0,t.getOwner)(),(0,t.insert)(n,b,i),e})()})()),r}})};return(0,t.createComponent)(r.Show,{get when(){return C().length},get children(){return[(()=>{let e=f(),r=e.firstChild;return(0,t.effect)(()=>r.data=a()),e})(),(()=>{let e=v();return e.textContent=s.styles,e})(),(0,t.createComponent)(r.Show,{get when(){return l.css},get children(){let e=f(),r=e.firstChild;return(0,t.effect)(()=>r.data=(0,i.css)(l.css)),e}}),(()=>{let e=d(),n=e.firstChild,i=n.firstChild,a=i.firstChild,l=i.nextSibling,o=l.firstChild;return(0,t.insert)(n,(0,t.createComponent)(x,{}),i),a.$$click=()=>{k((0,r.untrack)(h)-1)},a.flat=!0,a.circle=!0,a._$owner=(0,t.getOwner)(),(0,t.insert)(n,(0,t.createComponent)(r.For,{get each(){return C()},children:e=>{let n=(0,r.createMemo)(()=>e===h());return(()=>{let r=g(),i=r.firstChild;return i.$$click=()=>{k(e)},i.circle="number"!=typeof e,i._$owner=(0,t.getOwner)(),(0,t.insert)(i,e),(0,t.effect)(r=>{let a={[`pagination-${e}`]:"number"!=typeof e},l=c.size,o=!n(),s=n()?"primary":"default",u=n(),p=n()&&"page";return r._v$5=(0,t.classList)(i,a,r._v$5),l!==r._v$6&&(i.size=r._v$6=l),o!==r._v$7&&(i.flat=r._v$7=o),s!==r._v$8&&(i.type=r._v$8=s),u!==r._v$9&&(i.fill=r._v$9=u),p!==r._v$10&&(i.ariaCurrent=r._v$10=p),r},{_v$5:void 0,_v$6:void 0,_v$7:void 0,_v$8:void 0,_v$9:void 0,_v$10:void 0}),r})()}}),l),o.$$click=()=>{k((0,r.untrack)(h)+1)},o.flat=!0,o.circle=!0,o._$owner=(0,t.getOwner)(),(0,t.effect)(e=>{let t=c.size,r=1===h(),n=c.size,i=h()===w();return t!==e._v$&&(a.size=e._v$=t),r!==e._v$2&&(a.disabled=e._v$2=r),n!==e._v$3&&(o.size=e._v$3=n),i!==e._v$4&&(o.disabled=e._v$4=i),e},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),e})()]}})}(0,a.customElement)("n-pagination",{class:void 0,css:void 0,page:void 0,pageSize:void 0,total:0,size:void 0,onChange:void 0,totalText:void 0},(e,n)=>{let i=n.element,a=(0,r.mergeProps)({css:i.css,onChange(e,t){i.dispatchEvent(new CustomEvent("change",{detail:[e,t]}))}},e,{totalText:!!i.querySelector("[slot='total-text']")||e.totalText});return(0,r.createEffect)(()=>{(0,l.clearAttribute)(i,["css"])}),[(()=>{let e=v();return e.textContent=o.block,e})(),(0,t.createComponent)(h,a)]});const _=h;(0,t.delegateEvents)(["click"]);
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return m}});const e=require("solid-js/web"),t=require("solid-js"),r=s(require("@moneko/common/lib/isFunction")),n=require("@moneko/css"),i=require("solid-element"),l=require("../basic-config"),a=u(require("../theme")),o=require("./styles");function s(e){return e&&e.__esModule?e:{default:e}}function c(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(c=function(e){return e?r:t})(e)}function u(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=c(t);if(r&&r.has(e))return r.get(e);var n={__proto__:null},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&Object.prototype.hasOwnProperty.call(e,l)){var a=i?Object.getOwnPropertyDescriptor(e,l):null;a&&(a.get||a.set)?Object.defineProperty(n,l,a):n[l]=e[l]}return n.default=e,r&&r.set(e,n),n}require("../button"),require("../typography");const p=(0,e.template)("<li>"),f=(0,e.template)(`<li><slot name="total-text"><n-typography>共 <!> 项`,!0,!1),d=(0,e.template)("<style> "),v=(0,e.template)("<style>"),g=(0,e.template)(`<nav aria-label="pagination" class="pagination"><ul><li><n-button class="pagination-item pagination-prev">〈</n-button></li><li><n-button class="pagination-item pagination-next">〉`,!0,!1),h=(0,e.template)('<li><n-button class="pagination-item">',!0,!1);function _(i){let{baseStyle:l}=a.default,[s,c]=(0,t.splitProps)(i,["page","pageSize","total","css","totalText"]),[u,_]=(0,t.createSignal)(1),[m,$]=(0,t.createSignal)(20),[b,y]=(0,t.createSignal)(0);(0,t.createEffect)(()=>{(0,t.batch)(()=>{"number"==typeof s.page&&s.page!==(0,t.untrack)(u)&&_(s.page),"number"==typeof s.pageSize&&s.pageSize!==(0,t.untrack)(m)&&$(s.pageSize),"number"==typeof s.total&&s.total!==(0,t.untrack)(b)&&y(s.total)})});let w=(0,t.createMemo)(()=>Math.ceil(b()/m())),C=(0,t.createMemo)(()=>{let e=w(),t=[];if(e<=5)for(let r=1;r<=e;r++)t.push(r);else{let r=Math.min(e,Math.max(1,u()-Math.floor(2.5))+5-1);for(let e=r-5+1;e<=r;e++)t.push(e)}if(t.length){let r=t[t.length-1],n=t[0];n>=2&&(2===n?t.splice(0,1,"p"):t.unshift("p"),t.unshift(1),r<e&&(r+=1,t.push(r))),r===e-1?(t.splice(t.length-1,1,"n"),t.push(e)):r<e-1&&(t.push("n"),t.push(e))}return t});function k(e){let r=(0,t.untrack)(u),n="n"===e?r+5:"p"===e?r-5:e;n<1?n=1:n>(0,t.untrack)(w)&&(n=(0,t.untrack)(w)),r!==n&&(void 0===s.page&&_(n),c.onChange?.(n,(0,t.untrack)(m)))}let x=()=>{let n=(0,t.createMemo)(()=>[(u()-1)*m()+1,u()*m()]);return(0,e.createComponent)(t.Show,{get when(){return!1!==s.totalText},get children(){let t=p();return(0,e.insert)(t,(()=>{let t=(0,e.memo)(()=>!!(0,r.default)(s.totalText));return()=>t()?s.totalText(b(),n()):(()=>{let t=f(),r=t.firstChild,n=r.firstChild,i=n.firstChild.nextSibling;return i.nextSibling,r._$owner=(0,e.getOwner)(),n._$owner=(0,e.getOwner)(),(0,e.insert)(n,b,i),t})()})()),t}})};return(0,e.createComponent)(t.Show,{get when(){return C().length},get children(){return[(()=>{let t=d(),r=t.firstChild;return(0,e.effect)(()=>r.data=l()),t})(),(()=>{let e=v();return e.textContent=o.styles,e})(),(0,e.createComponent)(t.Show,{get when(){return s.css},get children(){let t=d(),r=t.firstChild;return(0,e.effect)(()=>r.data=(0,n.css)(s.css)),t}}),(()=>{let r=g(),n=r.firstChild,i=n.firstChild,l=i.firstChild,a=i.nextSibling,o=a.firstChild;return(0,e.insert)(n,(0,e.createComponent)(x,{}),i),l.$$click=()=>{k((0,t.untrack)(u)-1)},l.flat=!0,l.circle=!0,l._$owner=(0,e.getOwner)(),(0,e.insert)(n,(0,e.createComponent)(t.For,{get each(){return C()},children:r=>{let n=(0,t.createMemo)(()=>r===u());return(()=>{let t=h(),i=t.firstChild;return i.$$click=()=>{k(r)},i.circle="number"!=typeof r,i._$owner=(0,e.getOwner)(),(0,e.insert)(i,r),(0,e.effect)(t=>{let l={[`pagination-${r}`]:"number"!=typeof r},a=c.size,o=!n(),s=n()?"primary":"default",u=n(),p=n()&&"page";return t._v$5=(0,e.classList)(i,l,t._v$5),a!==t._v$6&&(i.size=t._v$6=a),o!==t._v$7&&(i.flat=t._v$7=o),s!==t._v$8&&(i.type=t._v$8=s),u!==t._v$9&&(i.fill=t._v$9=u),p!==t._v$10&&(i.ariaCurrent=t._v$10=p),t},{_v$5:void 0,_v$6:void 0,_v$7:void 0,_v$8:void 0,_v$9:void 0,_v$10:void 0}),t})()}}),a),o.$$click=()=>{k((0,t.untrack)(u)+1)},o.flat=!0,o.circle=!0,o._$owner=(0,e.getOwner)(),(0,e.effect)(e=>{let t=c.size,r=1===u(),n=c.size,i=u()===w();return t!==e._v$&&(l.size=e._v$=t),r!==e._v$2&&(l.disabled=e._v$2=r),n!==e._v$3&&(o.size=e._v$3=n),i!==e._v$4&&(o.disabled=e._v$4=i),e},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),r})()]}})}(0,i.customElement)("n-pagination",{class:void 0,css:void 0,page:void 0,pageSize:void 0,total:0,size:void 0,onChange:void 0,totalText:void 0},(r,n)=>{let i=n.element,o=(0,t.mergeProps)({css:i.css,onChange(e,t){i.dispatchEvent(new CustomEvent("change",{detail:[e,t]}))}},r,{totalText:!!i.querySelector("[slot='total-text']")||r.totalText});return(0,t.createEffect)(()=>{(0,l.clearAttribute)(i,["css"])}),[(()=>{let e=v();return e.textContent=a.block,e})(),(0,e.createComponent)(_,o)]});const m=_;(0,e.delegateEvents)(["click"]);

package/lib/pagination/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/pagination/index.tsx"],"sourcesContent":["import {\n  batch,\n  createEffect,\n  createMemo,\n  createSignal,\n  For,\n  mergeProps,\n  Show,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BasicConfig, CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { block } from '../theme';\n\nimport { styles } from './styles';\n\nimport '../button';\nimport '../typography';\n\nfunction Pagination(_: PaginationProps) {\n  const { baseStyle } = theme;\n  const maxCount = 5;\n  const [local, other] = splitProps(_, ['page', 'pageSize', 'total', 'css', 'totalText']);\n  const [page, setPage] = createSignal(1);\n  const [pageSize, setPageSize] = createSignal(20);\n  const [total, setTotal] = createSignal(0);\n\n  createEffect(() => {\n    batch(() => {\n      if (typeof local.page === 'number' && local.page !== untrack(page)) {\n        setPage(local.page);\n      }\n      if (typeof local.pageSize === 'number' && local.pageSize !== untrack(pageSize)) {\n        setPageSize(local.pageSize);\n      }\n      if (typeof local.total === 'number' && local.total !== untrack(total)) {\n        setTotal(local.total);\n      }\n    });\n  });\n  const totalPages = createMemo(() => Math.ceil(total() / pageSize()));\n  const pages = createMemo(() => {\n    const totals = totalPages();\n    const arr: (number | 'p' | 'n')[] = [];\n\n    if (totals <= maxCount) {\n      for (let i = 1; i <= totals; i++) {\n        arr.push(i);\n      }\n    } else {\n      const right = Math.min(totals, Math.max(1, page() - Math.floor(maxCount / 2)) + maxCount - 1);\n\n      for (let i = right - maxCount + 1; i <= right; i++) {\n        arr.push(i);\n      }\n    }\n\n    if (arr.length) {\n      let last = arr[arr.length - 1] as number;\n      const fast = arr[0] as number;\n\n      if (fast >= 2) {\n        if (fast === 2) {\n          arr.splice(0, 1, 'p');\n        } else {\n          arr.unshift('p');\n        }\n        arr.unshift(1);\n        if (last < totals) {\n          last += 1;\n          arr.push(last);\n        }\n      }\n      if (last === totals - 1) {\n        arr.splice(arr.length - 1, 1, 'n');\n        arr.push(totals);\n      } else if (last < totals - 1) {\n        arr.push('n');\n        arr.push(totals);\n      }\n    }\n    return arr;\n  });\n\n  function changePage(curr: number | 'p' | 'n') {\n    const p = untrack(page);\n    let next = curr === 'n' ? p + maxCount : curr === 'p' ? p - maxCount : curr;\n\n    if (next < 1) {\n      next = 1;\n    } else if (next > untrack(totalPages)) {\n      next = untrack(totalPages);\n    }\n    if (p !== next) {\n      if (local.page === void 0) {\n        setPage(next);\n      }\n      other.onChange?.(next, untrack(pageSize));\n    }\n  }\n  const TotalText = () => {\n    const ranges = createMemo(() => [(page() - 1) * pageSize() + 1, page() * pageSize()]);\n\n    return (\n      <Show when={local.totalText !== false}>\n        <li>\n          {isFunction(local.totalText) ? (\n            local.totalText(total(), ranges())\n          ) : (\n            <li>\n              <slot name=\"total-text\">\n                <n-typography>共 {total()} 项</n-typography>\n              </slot>\n            </li>\n          )}\n        </li>\n      </Show>\n    );\n  };\n\n  return (\n    <Show when={pages().length}>\n      <style textContent={baseStyle()} />\n      <style textContent={styles} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <nav aria-label=\"pagination\" class=\"pagination\">\n        <ul>\n          <TotalText />\n          <li>\n            <n-button\n              class=\"pagination-item pagination-prev\"\n              size={other.size}\n              flat={true}\n              circle={true}\n              disabled={page() === 1}\n              onClick={() => {\n                changePage(untrack(page) - 1);\n              }}\n            >\n              〈\n            </n-button>\n          </li>\n          <For each={pages()}>\n            {(curr) => {\n              const isCurrent = createMemo(() => curr === page());\n\n              return (\n                <li>\n                  <n-button\n                    class=\"pagination-item\"\n                    classList={{\n                      [`pagination-${curr}`]: typeof curr !== 'number',\n                    }}\n                    size={other.size}\n                    flat={!isCurrent()}\n                    circle={typeof curr !== 'number'}\n                    type={isCurrent() ? 'primary' : 'default'}\n                    fill={isCurrent()}\n                    aria-current={isCurrent() && 'page'}\n                    onClick={() => {\n                      changePage(curr);\n                    }}\n                  >\n                    {curr}\n                  </n-button>\n                </li>\n              );\n            }}\n          </For>\n          <li>\n            <n-button\n              class=\"pagination-item pagination-next\"\n              size={other.size}\n              flat={true}\n              circle={true}\n              disabled={page() === totalPages()}\n              onClick={() => {\n                changePage(untrack(page) + 1);\n              }}\n            >\n              〉\n            </n-button>\n          </li>\n        </ul>\n      </nav>\n    </Show>\n  );\n}\n\n/** API */\nexport interface PaginationProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义类名 */\n  css?: string;\n  /** 当前页数\n   * @default 1\n   */\n  page?: number;\n  /** 每页显示的数据条目数量\n   * @default 20\n   */\n  pageSize?: number;\n  /** 总数\n   * @default 0\n   */\n  total?: number;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 用于显示数据总量和当前数据顺序;\n   * 支持直接赋值给 'totalText' 属性\n   * 或者通过[slot=\"total-text\"]插槽\n   * @default true\n   */\n  totalText?: ((total: number, range: [start: number, end: number]) => JSX.Element) | false;\n  /** 值修改时的回调方法 */\n  onChange?(page: number, pageSize: number): void;\n  children?: JSX.Element;\n}\nexport type PaginationElement = CustomElement<PaginationProps>;\n\ncustomElement<PaginationProps>(\n  'n-pagination',\n  {\n    class: void 0,\n    css: void 0,\n    page: void 0,\n    pageSize: void 0,\n    total: 0,\n    size: void 0,\n    onChange: void 0,\n    totalText: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        onChange(page: number, pageSize: number) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: [page, pageSize],\n            }),\n          );\n        },\n      },\n      _,\n      {\n        totalText: (!!el.querySelector(\"[slot='total-text']\") as false) || _.totalText,\n      },\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['css']);\n    });\n    return (\n      <>\n        <style textContent={block} />\n        <Pagination {...props} />\n      </>\n    );\n  },\n);\nexport default Pagination;\n"],"names":["Pagination","_","baseStyle","theme","local","other","splitProps","page","setPage","createSignal","pageSize","setPageSize","total","setTotal","createEffect","batch","untrack","totalPages","createMemo","Math","ceil","pages","totals","arr","i","push","right","min","max","floor","maxCount","length","last","fast","splice","unshift","changePage","curr","p","next","onChange","TotalText","ranges","Show","totalText","isFunction","styles","css","For","isCurrent","size","customElement","class","opt","el","element","props","mergeProps","dispatchEvent","CustomEvent","detail","querySelector","clearAttribute","block"],"mappings":"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"}
+{"version":3,"sources":["components/pagination/index.tsx"],"sourcesContent":["import {\n  batch,\n  createEffect,\n  createMemo,\n  createSignal,\n  For,\n  mergeProps,\n  Show,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BasicConfig, CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { block } from '../theme';\n\nimport { styles } from './styles';\n\nimport '../button';\nimport '../typography';\n\nfunction Pagination(_: PaginationProps) {\n  const { baseStyle } = theme;\n  const maxCount = 5;\n  const [local, other] = splitProps(_, ['page', 'pageSize', 'total', 'css', 'totalText']);\n  const [page, setPage] = createSignal(1);\n  const [pageSize, setPageSize] = createSignal(20);\n  const [total, setTotal] = createSignal(0);\n\n  createEffect(() => {\n    batch(() => {\n      if (typeof local.page === 'number' && local.page !== untrack(page)) {\n        setPage(local.page);\n      }\n      if (typeof local.pageSize === 'number' && local.pageSize !== untrack(pageSize)) {\n        setPageSize(local.pageSize);\n      }\n      if (typeof local.total === 'number' && local.total !== untrack(total)) {\n        setTotal(local.total);\n      }\n    });\n  });\n  const totalPages = createMemo(() => Math.ceil(total() / pageSize()));\n  const pages = createMemo(() => {\n    const totals = totalPages();\n    const arr: (number | 'p' | 'n')[] = [];\n\n    if (totals <= maxCount) {\n      for (let i = 1; i <= totals; i++) {\n        arr.push(i);\n      }\n    } else {\n      const right = Math.min(totals, Math.max(1, page() - Math.floor(maxCount / 2)) + maxCount - 1);\n\n      for (let i = right - maxCount + 1; i <= right; i++) {\n        arr.push(i);\n      }\n    }\n\n    if (arr.length) {\n      let last = arr[arr.length - 1] as number;\n      const fast = arr[0] as number;\n\n      if (fast >= 2) {\n        if (fast === 2) {\n          arr.splice(0, 1, 'p');\n        } else {\n          arr.unshift('p');\n        }\n        arr.unshift(1);\n        if (last < totals) {\n          last += 1;\n          arr.push(last);\n        }\n      }\n      if (last === totals - 1) {\n        arr.splice(arr.length - 1, 1, 'n');\n        arr.push(totals);\n      } else if (last < totals - 1) {\n        arr.push('n');\n        arr.push(totals);\n      }\n    }\n    return arr;\n  });\n\n  function changePage(curr: number | 'p' | 'n') {\n    const p = untrack(page);\n    let next = curr === 'n' ? p + maxCount : curr === 'p' ? p - maxCount : curr;\n\n    if (next < 1) {\n      next = 1;\n    } else if (next > untrack(totalPages)) {\n      next = untrack(totalPages);\n    }\n    if (p !== next) {\n      if (local.page === void 0) {\n        setPage(next);\n      }\n      other.onChange?.(next, untrack(pageSize));\n    }\n  }\n  const TotalText = () => {\n    const ranges = createMemo(() => [(page() - 1) * pageSize() + 1, page() * pageSize()]);\n\n    return (\n      <Show when={local.totalText !== false}>\n        <li>\n          {isFunction(local.totalText) ? (\n            local.totalText(total(), ranges())\n          ) : (\n            <li>\n              <slot name=\"total-text\">\n                <n-typography>共 {total()} 项</n-typography>\n              </slot>\n            </li>\n          )}\n        </li>\n      </Show>\n    );\n  };\n\n  return (\n    <Show when={pages().length}>\n      <style textContent={baseStyle()} />\n      <style textContent={styles} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <nav aria-label=\"pagination\" class=\"pagination\">\n        <ul>\n          <TotalText />\n          <li>\n            <n-button\n              class=\"pagination-item pagination-prev\"\n              size={other.size}\n              flat={true}\n              circle={true}\n              disabled={page() === 1}\n              onClick={() => {\n                changePage(untrack(page) - 1);\n              }}\n            >\n              〈\n            </n-button>\n          </li>\n          <For each={pages()}>\n            {(curr) => {\n              const isCurrent = createMemo(() => curr === page());\n\n              return (\n                <li>\n                  <n-button\n                    class=\"pagination-item\"\n                    classList={{\n                      [`pagination-${curr}`]: typeof curr !== 'number',\n                    }}\n                    size={other.size}\n                    flat={!isCurrent()}\n                    circle={typeof curr !== 'number'}\n                    type={isCurrent() ? 'primary' : 'default'}\n                    fill={isCurrent()}\n                    aria-current={isCurrent() && 'page'}\n                    onClick={() => {\n                      changePage(curr);\n                    }}\n                  >\n                    {curr}\n                  </n-button>\n                </li>\n              );\n            }}\n          </For>\n          <li>\n            <n-button\n              class=\"pagination-item pagination-next\"\n              size={other.size}\n              flat={true}\n              circle={true}\n              disabled={page() === totalPages()}\n              onClick={() => {\n                changePage(untrack(page) + 1);\n              }}\n            >\n              〉\n            </n-button>\n          </li>\n        </ul>\n      </nav>\n    </Show>\n  );\n}\n\n/** API */\nexport interface PaginationProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义类名 */\n  css?: string;\n  /** 当前页数\n   * @default 1\n   */\n  page?: number;\n  /** 每页显示的数据条目数量\n   * @default 20\n   */\n  pageSize?: number;\n  /** 总数\n   * @default 0\n   */\n  total?: number;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 用于显示数据总量和当前数据顺序;\n   * 支持直接赋值给 'totalText' 属性\n   * 或者通过[slot=\"total-text\"]插槽\n   * @default true\n   */\n  totalText?: ((total: number, range: [start: number, end: number]) => JSX.Element) | false;\n  /** 值修改时的回调方法 */\n  onChange?(page: number, pageSize: number): void;\n  children?: JSX.Element;\n}\nexport type PaginationElement = CustomElement<PaginationProps>;\n\ncustomElement<PaginationProps>(\n  'n-pagination',\n  {\n    class: void 0,\n    css: void 0,\n    page: void 0,\n    pageSize: void 0,\n    total: 0,\n    size: void 0,\n    onChange: void 0,\n    totalText: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        onChange(page: number, pageSize: number) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: [page, pageSize],\n            }),\n          );\n        },\n      },\n      _,\n      {\n        totalText: (!!el.querySelector(\"[slot='total-text']\") as false) || _.totalText,\n      },\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['css']);\n    });\n    return (\n      <>\n        <style textContent={block} />\n        <Pagination {...props} />\n      </>\n    );\n  },\n);\nexport default Pagination;\n"],"names":["Pagination","_","baseStyle","theme","local","other","splitProps","page","setPage","createSignal","pageSize","setPageSize","total","setTotal","createEffect","batch","untrack","totalPages","createMemo","Math","ceil","pages","totals","arr","i","push","right","min","max","floor","maxCount","length","last","fast","splice","unshift","changePage","curr","p","next","onChange","TotalText","ranges","Show","totalText","isFunction","styles","css","For","isCurrent","size","customElement","class","opt","el","element","props","mergeProps","dispatchEvent","CustomEvent","detail","querySelector","clearAttribute","block"],"mappings":"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"}

package/lib/pagination/styles.js

@@ -77,5 +77,4 @@
       }
     }
   }
-`;
-//# sourceMappingURL=styles.js.map
+`;

package/lib/pagination/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/pagination/styles.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const styles = css`\n  .pagination {\n    ul {\n      display: inline-flex;\n      align-items: center;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n      gap: 4px;\n    }\n  }\n\n  .pagination-item::part(button) {\n    padding: 0 6px;\n  }\n\n  .pagination-prev {\n    &::part(label) {\n      transform: translateX(-25%);\n    }\n  }\n\n  .pagination-next {\n    &::part(label) {\n      transform: translateX(25%);\n    }\n  }\n\n  .pagination-p,\n  .pagination-n {\n    &::part(button) {\n      position: relative;\n\n      &::after {\n        position: absolute;\n        display: inline-block;\n        margin: auto;\n        font-size: inherit;\n        font-weight: bold;\n        opacity: 0.5;\n        inline-size: fit-content;\n        block-size: fit-content;\n        line-height: inherit;\n        inset-block: 0;\n        inset-inline: 0;\n        content: '⋯';\n        pointer-events: none;\n      }\n    }\n\n    &::part(label) {\n      opacity: 0;\n    }\n\n    &:hover::part(button)::after {\n      content: var(--content);\n      font-weight: inherit;\n    }\n  }\n\n  .pagination-p {\n    --content: '《';\n\n    &:hover {\n      &::part(button)::after {\n        transform: translateX(-25%);\n      }\n    }\n  }\n\n  .pagination-n {\n    --content: '》';\n\n    &:hover {\n      &::part(button)::after {\n        transform: translateX(25%);\n      }\n    }\n  }\n`;\n"],"names":["styles","css"],"mappings":"kGAEaA,8CAAAA,qBAFO,eAEPA,EAASC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+E1B,CAAC"}
+{"version":3,"sources":["components/pagination/styles.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const styles = css`\n  .pagination {\n    ul {\n      display: inline-flex;\n      align-items: center;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n      gap: 4px;\n    }\n  }\n\n  .pagination-item::part(button) {\n    padding: 0 6px;\n  }\n\n  .pagination-prev {\n    &::part(label) {\n      transform: translateX(-25%);\n    }\n  }\n\n  .pagination-next {\n    &::part(label) {\n      transform: translateX(25%);\n    }\n  }\n\n  .pagination-p,\n  .pagination-n {\n    &::part(button) {\n      position: relative;\n\n      &::after {\n        position: absolute;\n        display: inline-block;\n        margin: auto;\n        font-size: inherit;\n        font-weight: bold;\n        opacity: 0.5;\n        inline-size: fit-content;\n        block-size: fit-content;\n        line-height: inherit;\n        inset-block: 0;\n        inset-inline: 0;\n        content: '⋯';\n        pointer-events: none;\n      }\n    }\n\n    &::part(label) {\n      opacity: 0;\n    }\n\n    &:hover::part(button)::after {\n      content: var(--content);\n      font-weight: inherit;\n    }\n  }\n\n  .pagination-p {\n    --content: '《';\n\n    &:hover {\n      &::part(button)::after {\n        transform: translateX(-25%);\n      }\n    }\n  }\n\n  .pagination-n {\n    --content: '》';\n\n    &:hover {\n      &::part(button)::after {\n        transform: translateX(25%);\n      }\n    }\n  }\n`;\n"],"names":["styles","css"],"mappings":"kGAEaA,8CAAAA,qBAFO,eAEPA,EAASC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+E1B,CAAC"}