neko-ui 2.8.21 → 2.8.23

package/lib/notification/README.mdx

@@ -0,0 +1,11 @@
+---
+type: 反馈
+title: 通知提醒框
+subtitle: notification
+icon: ☗
+---
+
+# Notification 通知提醒框
+
+> 全局展示通知提醒信息
+

package/lib/notification/examples/basic.md

@@ -0,0 +1,35 @@
+---
+title: 最简单的用法
+description: 最简单的用法
+order: 1
+---
+
+```html
+<n-button>消息通知</n-button>
+<script>
+  const { notification } = NekoUI;
+  const btn = container.querySelector('n-button');
+
+  btn.addEventListener('click', function () {
+    notification.info('操作成功!!!');
+  });
+</script>
+```
+
+```jsx
+const { notification } = NekoUI;
+
+const Demo = () => {
+  const handleOpen = () => {
+    notification.info('操作成功!!!');
+  };
+
+  return (
+    <n-button type="primary" onClick={handleOpen}>
+      显示通知
+    </n-button>
+  );
+};
+
+render(<Demo />);
+```

package/lib/notification/examples/close.md

@@ -0,0 +1,35 @@
+---
+title: 手动关闭
+description: 带关闭按钮
+order: 2
+---
+
+```html
+<n-button>消息通知(手动关闭)</n-button>
+<script>
+  const { notification } = NekoUI;
+  const btn = container.querySelector('n-button');
+
+  btn.addEventListener('click', function () {
+    notification.info('操作成功!!!', 0, true);
+  });
+</script>
+```
+
+```jsx
+const { notification } = NekoUI;
+
+const Demo = () => {
+  const handleOpen = () => {
+    notification.info('操作成功!!!', 0, true);
+  };
+
+  return (
+    <n-button type="primary" onClick={handleOpen}>
+      显示通知
+    </n-button>
+  );
+};
+
+render(<Demo />);
+```

package/lib/notification/examples/type.md

@@ -0,0 +1,84 @@
+---
+title: 不同的通知类型
+description: 不同的通知类型
+order: 2
+---
+
+```html
+<n-button>消息</n-button>
+<n-button type="primary">主要</n-button>
+<n-button type="error">错误</n-button>
+<n-button type="warning">警告</n-button>
+<n-button type="success">成功</n-button>
+<script>
+  const { notification } = NekoUI;
+  const btns = container.querySelectorAll('n-button');
+
+  btns.forEach((btn) => {
+    btn.addEventListener('click', function () {
+      switch (btn.type) {
+        case 'primary':
+          notification.primary(`${btn.type} message`, 5000);
+          break;
+        case 'warning':
+          notification.warning(`${btn.type} message`, 2000);
+          break;
+        case 'error':
+          notification.error(`${btn.type} message`, 0, true);
+          break;
+        case 'success':
+          notification.success(`${btn.type} message`, 4000);
+          break;
+        default:
+          notification.info('info message', 1000);
+          break;
+      }
+    });
+  });
+</script>
+```
+
+```jsx
+const Demo = () => {
+  const { notification } = NekoUI;
+  const handleOpen = (type: string) => {
+    switch (type) {
+        case 'primary':
+          notification.primary(`${type} message`, 5000);
+          break;
+        case 'warning':
+          notification.warning(`${type} message`, 2000);
+          break;
+        case 'error':
+          notification.error(`${type} message`, 0, true);
+          break;
+        case 'success':
+          notification.success(`${type} message`, 4000);
+          break;
+        default:
+          notification.info('info message', 1000);
+          break;
+      }
+  };
+
+  return (
+    <>
+      <n-button onClick={handleOpen.bind(null, 'info')}>消息</n-button>
+      <n-button type="primary" onClick={handleOpen.bind(null, 'primary')}>
+        主要
+      </n-button>
+      <n-button type="error" onClick={handleOpen.bind(null, 'error')}>
+        错误
+      </n-button>
+      <n-button type="warning" onClick={handleOpen.bind(null, 'warning')}>
+        警告
+      </n-button>
+      <n-button type="success" onClick={handleOpen.bind(null, 'success')}>
+        成功
+      </n-button>
+    </>
+  );
+};
+
+render(<Demo />);
+```

package/lib/notification/examples/update.md

@@ -0,0 +1,52 @@
+---
+title: 更新内容
+description: 可以通过唯一的 key 来更新内容
+order: 4
+---
+
+```html
+<n-button>更新消息 (手动关闭)</n-button>
+<script>
+  const { notification } = NekoUI;
+  const btn = container.querySelector('n-button');
+
+  btn.addEventListener('click', function () {
+    const id = notification.info('操作成功!!!', 5000);
+
+    const timer = setTimeout(() => {
+      const icon = document.createElement('i');
+
+      icon.textContent = '🎉';
+      notification.update(id, {
+        type: 'success',
+        children: '更新成功!!!',
+        icon: icon,
+      });
+      clearTimeout(timer);
+    }, 2000);
+  });
+</script>
+```
+
+```jsx
+const { notification } = NekoUI;
+
+const Demo = () => {
+  const handleOpen = () => {
+    const id = notification.info('操作成功!!!', 5000);
+
+    const timer = setTimeout(() => {
+      notification.update(id, {
+        type: 'success',
+        children: '更新成功!!!',
+        icon: <i>🎉</i>,
+      });
+      clearTimeout(timer);
+    }, 2000);
+  };
+
+  return <n-button onClick={handleOpen}>更新消息 (手动关闭)</n-button>;
+};
+
+render(<Demo />);
+```

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 { NotificationType, NotificationProps } 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,2 @@
-"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("./queque")),l=require("./styles"),o=i(require("../theme"));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}=r.default,{baseStyle:_}=o.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=l.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"]);
+"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

package/lib/notification/notification.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/notification/notification.tsx"],"sourcesContent":["import { For, Show, createEffect, createUniqueId } from 'solid-js';\nimport { cx } from '@moneko/css';\nimport { render } from 'solid-js/web';\nimport queque, { type NotificationType } from './queque';\nimport { styles } from './styles';\nimport theme from '../theme';\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 class=\"close\" onClick={() => remove(item.uniqueId)} />\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":"kGAiFA,+CAAA,qBA/EuB,0BAFiC,sBACrC,2BAE2B,uBACvB,wBACL,uNAEZA,EAAU,qBA0EhB,EAxEqB,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,4CACS,IAAMM,EAAO0B,EAAK9B,QAAQ,oCARlD+B,GAAAA,IAAE,EAAC,eAAgBD,EAAKnC,IAAI,MAEvBmC,EAAKE,QAAQ,4IAcpCxB,EAAOyB,UAAU,EAEpBxB,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","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"}

package/lib/pagination/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据展示
+title: 分页器
+subtitle: n-pagination
+icon: 🍁
+---
+
+# Pagination 分页器
+
+> 当加载/渲染所有数据将花费很多时间时, 采用分页的形式分隔长列表，每次只加载一个页面。

package/lib/pagination/examples/basic.md

@@ -0,0 +1,13 @@
+---
+title: 基本使用
+description: 最简单的使用方式
+order: 1
+---
+
+```html
+<n-pagination page-size="10" total="85"></n-pagination>
+```
+
+```jsx
+<n-pagination page-size={10} total={85} />
+```

package/lib/pagination/examples/onchange.md

@@ -0,0 +1,29 @@
+---
+title: 受控
+description: 当手动传入 `page` 时, 为受控模式
+order: 2
+---
+
+```html
+<n-pagination page="1" page-size="10" total="85"></n-pagination>
+<script>
+  const el = container.querySelector('n-pagination');
+
+  el.onchange = function (e) {
+    const [page, size] = e.detail;
+    e.target.page = page;
+  };
+</script>
+```
+
+```jsx
+<n-pagination
+  page={1}
+  page-size={10}
+  total={85}
+  onChange={function (e) {
+    const [page, size] = e.detail;
+    e.target.page = page;
+  }}
+/>
+```

package/lib/pagination/examples/size.md

@@ -0,0 +1,23 @@
+---
+title: 不同的尺寸
+description: Pagination 内置有大、中、小三种尺寸。通过 `size` 进行设置; 默认为 'normal'。
+order: 4
+---
+
+```html
+<h4>小:</h4>
+<n-pagination page-size="15" total="85" size="small"></n-pagination>
+<h4>默认: 中</h4>
+<n-pagination page-size="15" total="85" size="normal"></n-pagination>
+<h4>大:</h4>
+<n-pagination page-size="15" total="85" size="large"></n-pagination>
+```
+
+```jsx
+<h4>小:</h4>
+<n-pagination page-size={15} total={85} size="small" />
+<h4>默认: 中</h4>
+<n-pagination page-size={15} total={85} size="normal" />
+<h4>大:</h4>
+<n-pagination page-size={15} total={85} size="large" />
+```

package/lib/pagination/examples/total-text.md

@@ -0,0 +1,42 @@
+---
+title: 显示数据总量
+description: 通过设置 `totalText` 展示总共有多少数据。
+order: 3
+---
+
+```html
+<h4>不显示:</h4>
+<n-pagination total-text="false" page-size="10" total="85"></n-pagination>
+<h4>使用插槽: slot</h4>
+<n-pagination page-size="10" total="85">
+  <span slot="total-text">总共 85 条数据</span>
+</n-pagination>
+<h4>使用函数:</h4>
+<n-pagination class="func" page-size="10" total="85"></n-pagination>
+<script>
+  const el = container.querySelector('n-pagination.func');
+
+  el.totalText = function (total, rangs) {
+    return `${rangs.join('~')} 共 ${total} 项`;
+  };
+</script>
+```
+
+```jsx
+<h4>不显示:</h4>
+<n-pagination total-text={false} page-size={10} total={85} />
+<h4>使用插槽: slot</h4>
+<n-pagination page-size={10} total={85}>
+  <span slot="total-text">总共 85 条数据</span>
+</n-pagination>
+<h4>使用函数:</h4>
+<n-pagination
+  page-size={10}
+  total={85}
+  total-text={function () {
+    return function (total, rangs) {
+      return `${rangs.join('~')} 共 ${total} 项`;
+    };
+  }}
+/>
+```

package/lib/pagination/index.js

@@ -1,2 +1,2 @@
-"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=o(require("@moneko/common/lib/isFunction")),r=require("@moneko/css"),i=require("solid-element"),l=require("./styles");require("../button");const a=o(require("../theme"));function o(e){return e&&e.__esModule?e:{default:e}}require("../typography");const s=(0,e.template)("<li>"),c=(0,e.template)(`<li><slot name="total-text"><n-typography>共 <!> 项`,!0,!1),u=(0,e.template)("<style> "),p=(0,e.template)("<style>"),v=(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),d=(0,e.template)('<li><n-button class="pagination-item">',!0,!1);function g(i){let{baseStyle:o}=a.default,[g,f]=(0,t.splitProps)(i,["page","pageSize","total","css","totalText"]),[h,m]=(0,t.createSignal)(1),[$,_]=(0,t.createSignal)(20),[b,C]=(0,t.createSignal)(0);(0,t.createEffect)(()=>{(0,t.batch)(()=>{"number"==typeof g.page&&g.page!==(0,t.untrack)(h)&&m(g.page),"number"==typeof g.pageSize&&g.pageSize!==(0,t.untrack)($)&&_(g.pageSize),"number"==typeof g.total&&g.total!==(0,t.untrack)(b)&&C(g.total)})});let w=(0,t.createMemo)(()=>Math.ceil(b()/$())),y=(0,t.createMemo)(()=>{let e=w(),t=[];if(e<=5)for(let n=1;n<=e;n++)t.push(n);else{let n=Math.min(e,Math.max(1,h()-Math.floor(2.5))+5-1);for(let e=n-5+1;e<=n;e++)t.push(e)}if(t.length){let n=t[t.length-1],r=t[0];r>=2&&(2===r?t.splice(0,1,"p"):t.unshift("p"),t.unshift(1),n<e&&(n+=1,t.push(n))),n===e-1?(t.splice(t.length-1,1,"n"),t.push(e)):n<e-1&&(t.push("n"),t.push(e))}return t});function x(e){let n=(0,t.untrack)(h),r="n"===e?n+5:"p"===e?n-5:e;r<1?r=1:r>(0,t.untrack)(w)&&(r=(0,t.untrack)(w)),n!==r&&(void 0===g.page&&m(r),f.onChange?.(r,(0,t.untrack)($)))}let k=()=>{let r=(0,t.createMemo)(()=>[(h()-1)*$()+1,h()*$()]);return(0,e.createComponent)(t.Show,{get when(){return!1!==g.totalText},get children(){let t=s();return(0,e.insert)(t,(()=>{let t=(0,e.memo)(()=>!!(0,n.default)(g.totalText));return()=>t()?g.totalText(b(),r()):(()=>{let t=c(),n=t.firstChild,r=n.firstChild,i=r.firstChild.nextSibling;return i.nextSibling,n._$owner=(0,e.getOwner)(),r._$owner=(0,e.getOwner)(),(0,e.insert)(r,b,i),t})()})()),t}})};return(0,e.createComponent)(t.Show,{get when(){return y().length},get children(){return[(()=>{let t=u(),n=t.firstChild;return(0,e.effect)(()=>n.data=o()),t})(),(()=>{let e=p();return e.textContent=l.styles,e})(),(0,e.createComponent)(t.Show,{get when(){return g.css},get children(){let t=u(),n=t.firstChild;return(0,e.effect)(()=>n.data=(0,r.css)(g.css)),t}}),(()=>{let n=v(),r=n.firstChild,i=r.firstChild,l=i.firstChild,a=i.nextSibling,o=a.firstChild;return(0,e.insert)(r,(0,e.createComponent)(k,{}),i),l.$$click=()=>x((0,t.untrack)(h)-1),l.flat=!0,l.circle=!0,l._$owner=(0,e.getOwner)(),(0,e.insert)(r,(0,e.createComponent)(t.For,{get each(){return y()},children:n=>{let r=(0,t.createMemo)(()=>n===h());return(()=>{let t=d(),i=t.firstChild;return i.$$click=()=>x(n),i.circle="number"!=typeof n,i._$owner=(0,e.getOwner)(),(0,e.insert)(i,n),(0,e.effect)(t=>{let l={[`pagination-${n}`]:"number"!=typeof n},a=f.size,o=!r(),s=r()?"primary":"default",c=r(),u=r()&&"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),c!==t._v$9&&(i.fill=t._v$9=c),u!==t._v$10&&(i.ariaCurrent=t._v$10=u),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=()=>x((0,t.untrack)(h)+1),o.flat=!0,o.circle=!0,o._$owner=(0,e.getOwner)(),(0,e.effect)(e=>{let t=f.size,n=1===h(),r=f.size,i=h()===w();return t!==e._v$&&(l.size=e._v$=t),n!==e._v$2&&(l.disabled=e._v$2=n),r!==e._v$3&&(o.size=e._v$3=r),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}),n})()]}})}(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},(n,r)=>{let i=r.element,l=(0,t.mergeProps)({css:i.css,onChange(e,t){i.dispatchEvent(new CustomEvent("change",{detail:[e,t]}))}},n,{totalText:!!i.querySelector("[slot='total-text']")||n.totalText});return(0,t.createEffect)(()=>{i.removeAttribute("css")}),(0,e.createComponent)(g,l)});const f=g;(0,e.delegateEvents)(["click"]);
+"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=o(require("@moneko/common/lib/isFunction")),r=require("@moneko/css"),i=require("solid-element"),l=o(require("../theme")),a=require("./styles");function o(e){return e&&e.__esModule?e:{default:e}}require("../button"),require("../typography");const s=(0,e.template)("<li>"),c=(0,e.template)(`<li><slot name="total-text"><n-typography>共 <!> 项`,!0,!1),u=(0,e.template)("<style> "),p=(0,e.template)("<style>"),v=(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),d=(0,e.template)('<li><n-button class="pagination-item">',!0,!1);function g(i){let{baseStyle:o}=l.default,[g,f]=(0,t.splitProps)(i,["page","pageSize","total","css","totalText"]),[h,m]=(0,t.createSignal)(1),[$,_]=(0,t.createSignal)(20),[b,C]=(0,t.createSignal)(0);(0,t.createEffect)(()=>{(0,t.batch)(()=>{"number"==typeof g.page&&g.page!==(0,t.untrack)(h)&&m(g.page),"number"==typeof g.pageSize&&g.pageSize!==(0,t.untrack)($)&&_(g.pageSize),"number"==typeof g.total&&g.total!==(0,t.untrack)(b)&&C(g.total)})});let w=(0,t.createMemo)(()=>Math.ceil(b()/$())),y=(0,t.createMemo)(()=>{let e=w(),t=[];if(e<=5)for(let n=1;n<=e;n++)t.push(n);else{let n=Math.min(e,Math.max(1,h()-Math.floor(2.5))+5-1);for(let e=n-5+1;e<=n;e++)t.push(e)}if(t.length){let n=t[t.length-1],r=t[0];r>=2&&(2===r?t.splice(0,1,"p"):t.unshift("p"),t.unshift(1),n<e&&(n+=1,t.push(n))),n===e-1?(t.splice(t.length-1,1,"n"),t.push(e)):n<e-1&&(t.push("n"),t.push(e))}return t});function x(e){let n=(0,t.untrack)(h),r="n"===e?n+5:"p"===e?n-5:e;r<1?r=1:r>(0,t.untrack)(w)&&(r=(0,t.untrack)(w)),n!==r&&(void 0===g.page&&m(r),f.onChange?.(r,(0,t.untrack)($)))}let k=()=>{let r=(0,t.createMemo)(()=>[(h()-1)*$()+1,h()*$()]);return(0,e.createComponent)(t.Show,{get when(){return!1!==g.totalText},get children(){let t=s();return(0,e.insert)(t,(()=>{let t=(0,e.memo)(()=>!!(0,n.default)(g.totalText));return()=>t()?g.totalText(b(),r()):(()=>{let t=c(),n=t.firstChild,r=n.firstChild,i=r.firstChild.nextSibling;return i.nextSibling,n._$owner=(0,e.getOwner)(),r._$owner=(0,e.getOwner)(),(0,e.insert)(r,b,i),t})()})()),t}})};return(0,e.createComponent)(t.Show,{get when(){return y().length},get children(){return[(()=>{let t=u(),n=t.firstChild;return(0,e.effect)(()=>n.data=o()),t})(),(()=>{let e=p();return e.textContent=a.styles,e})(),(0,e.createComponent)(t.Show,{get when(){return g.css},get children(){let t=u(),n=t.firstChild;return(0,e.effect)(()=>n.data=(0,r.css)(g.css)),t}}),(()=>{let n=v(),r=n.firstChild,i=r.firstChild,l=i.firstChild,a=i.nextSibling,o=a.firstChild;return(0,e.insert)(r,(0,e.createComponent)(k,{}),i),l.$$click=()=>{x((0,t.untrack)(h)-1)},l.flat=!0,l.circle=!0,l._$owner=(0,e.getOwner)(),(0,e.insert)(r,(0,e.createComponent)(t.For,{get each(){return y()},children:n=>{let r=(0,t.createMemo)(()=>n===h());return(()=>{let t=d(),i=t.firstChild;return i.$$click=()=>{x(n)},i.circle="number"!=typeof n,i._$owner=(0,e.getOwner)(),(0,e.insert)(i,n),(0,e.effect)(t=>{let l={[`pagination-${n}`]:"number"!=typeof n},a=f.size,o=!r(),s=r()?"primary":"default",c=r(),u=r()&&"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),c!==t._v$9&&(i.fill=t._v$9=c),u!==t._v$10&&(i.ariaCurrent=t._v$10=u),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=()=>{x((0,t.untrack)(h)+1)},o.flat=!0,o.circle=!0,o._$owner=(0,e.getOwner)(),(0,e.effect)(e=>{let t=f.size,n=1===h(),r=f.size,i=h()===w();return t!==e._v$&&(l.size=e._v$=t),n!==e._v$2&&(l.disabled=e._v$2=n),r!==e._v$3&&(o.size=e._v$3=r),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}),n})()]}})}(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},(n,r)=>{let i=r.element,l=(0,t.mergeProps)({css:i.css,onChange(e,t){i.dispatchEvent(new CustomEvent("change",{detail:[e,t]}))}},n,{totalText:!!i.querySelector("[slot='total-text']")||n.totalText});return(0,t.createEffect)(()=>{i.removeAttribute("css")}),(0,e.createComponent)(g,l)});const f=g;(0,e.delegateEvents)(["click"]);
 //# sourceMappingURL=index.js.map

package/lib/pagination/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/pagination/index.tsx"],"sourcesContent":["import {\n  For,\n  Show,\n  batch,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { styles } from './styles';\nimport '../button';\nimport theme from '../theme';\nimport '../typography';\nimport type { BasicConfig, CustomElement } from '..';\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={() => changePage(untrack(page) - 1)}\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={() => changePage(curr)}\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={() => changePage(untrack(page) + 1)}\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      el.removeAttribute('css');\n    });\n    return <Pagination {...props} />;\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","removeAttribute"],"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 theme 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      el.removeAttribute('css');\n    });\n    return <Pagination {...props} />;\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","removeAttribute"],"mappings":"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"}

package/lib/popover/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 反馈
+title: 气泡卡片
+subtitle: n-popover
+icon: ⌑
+---
+
+# Popover 气泡卡片
+
+> 气泡卡片

package/lib/popover/examples/basic.md

@@ -0,0 +1,35 @@
+---
+title: 基本使用
+order: 1
+---
+
+```html
+<n-popover arrow="true" placement="bottomLeft">
+  <span>hover</span>
+</n-popover>
+<script>
+  const el = container.querySelector('n-popover');
+
+  el.content = function () {
+    const c = document.createElement('div');
+
+    c.innerHTML = `<n-typography type="success">success</n-typography><n-typography type="error">danger</n-typography>`;
+    return c;
+  };
+</script>
+```
+
+```jsx
+<n-popover
+  arrow
+  placement="bottomLeft"
+  content={() => (
+    <div>
+      <n-typography type="success">success</n-typography>
+      <n-typography type="error">danger</n-typography>
+    </div>
+  )}
+>
+  <span>hover</span>
+</n-popover>
+```

package/lib/popover/examples/click.md

@@ -0,0 +1,15 @@
+---
+title: 点击触发
+description: 将 `trigger` 为 `click`，将可以通过鼠标点击触发提示框显示
+order: 2
+---
+
+```html
+<n-popover arrow="true" trigger="click" content="点击我">点击我</n-popover>
+```
+
+```jsx
+<n-popover arrow content="点击我" trigger="click">
+  点击我
+</n-popover>
+```

package/lib/popover/examples/context-menu.md

@@ -0,0 +1,58 @@
+---
+title: 右键触发
+description: 将 `trigger` 为 `contextMenu`，将可以通过右键触发提示框显示
+order: 3
+---
+
+```html
+<n-popover trigger="contextMenu" style="width: 100%;">
+  <div style="width: 100%;opacity: 0.4;">右键点我</div>
+</n-popover>
+<script>
+  const el = container.querySelector('n-popover');
+  const c = document.createElement('a');
+
+  c.style.color = 'red';
+  c.textContent = '右键触发';
+  el.content = c;
+  el.css = `.popover {
+      display: block;
+      width: 100%;
+      height: 150px;
+      background-color: var(--disable-bg);
+      border-radius: 8px;
+      line-height: 150px;
+      text-align: center;
+      font-size: x-large;
+    }`;
+</script>
+```
+
+```jsx
+<n-popover
+  content={<a style="color: red;">右键触发</a>}
+  style={{ width: '100%' }}
+  trigger="contextMenu"
+  css={`
+    .popover {
+      display: block;
+      width: 100%;
+      height: 150px;
+      background-color: var(--disable-bg);
+      border-radius: 8px;
+      line-height: 150px;
+      text-align: center;
+      font-size: x-large;
+    }
+  `}
+>
+  <div
+    style={{
+      width: '100%',
+      opacity: 0.4,
+    }}
+  >
+    右键点我
+  </div>
+</n-popover>
+```