neko-ui 2.8.21 → 2.8.23

package/es/modal/index.js.map

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

package/es/notification/README.mdx

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

package/es/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/es/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/es/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/es/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/es/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":["notification","queque","info","bind","success","error","warning","primary","update","destory","clean"],"mappings":"AAAA,OAAOA,MAAkB,gBAAiB,AAC1C,QAAOC,MAAwC,UAAW,AA4D1D,eAAe,CACbC,KAAMF,EAAaG,IAAI,CAAC,KAAM,QAC9BC,QAASJ,EAAaG,IAAI,CAAC,KAAM,WACjCE,MAAOL,EAAaG,IAAI,CAAC,KAAM,SAC/BG,QAASN,EAAaG,IAAI,CAAC,KAAM,WACjCI,QAASP,EAAaG,IAAI,CAAC,KAAM,WACjCK,OAAQP,EAAOO,MAAM,CACrBC,QAASR,EAAOS,KAAK,AACvB,CAAkB"}
+{"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":["notification","queque","info","bind","success","error","warning","primary","update","destory","clean"],"mappings":"AAAA,OAAOA,MAAkB,gBAAiB,AAC1C,QAAOC,MAAwC,UAAW,AA4D1D,eAAe,CACbC,KAAMF,EAAaG,IAAI,CAAC,KAAM,QAC9BC,QAASJ,EAAaG,IAAI,CAAC,KAAM,WACjCE,MAAOL,EAAaG,IAAI,CAAC,KAAM,SAC/BG,QAASN,EAAaG,IAAI,CAAC,KAAM,WACjCI,QAASP,EAAaG,IAAI,CAAC,KAAM,WACjCK,OAAQP,EAAOO,MAAM,CACrBC,QAASR,EAAOS,KAAK,AACvB,CAAkB"}

package/es/notification/notification.js

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

package/es/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":["For","Show","createEffect","createUniqueId","cx","render","queque","styles","theme","mountId","type","children","duration","close","icon","uniqueId","list","add","remove","baseStyle","mount","document","getElementById","timer","setTimeout","clearTimeout","createElement","id","style","position","insetBlockStart","insetInlineStart","transform","attachShadow","mode","unmount","length","item","closeing","shadowRoot","body","appendChild"],"mappings":"0VAAA,QAASA,OAAAA,CAAG,CAAEC,QAAAA,CAAI,CAAEC,gBAAAA,CAAY,CAAEC,kBAAAA,CAAc,KAAQ,UAAW,AACnE,QAASC,MAAAA,CAAE,KAAQ,aAAc,AACjC,QAASC,UAAAA,CAAM,KAAQ,cAAe,AACtC,QAAOC,MAAuC,UAAW,AACzD,QAASC,UAAAA,CAAM,KAAQ,UAAW,AAClC,QAAOC,MAAW,UAAW,CAE7B,IAAMC,EAAU,oBA0EhB,eAxEqB,CAAA,CACnBC,EACAC,EACAC,EAAW,GAAI,CACfC,EACAC,KAEA,IAAMC,EAAWZ,IACX,CAAEa,KAAAA,CAAI,CAAEC,IAAAA,CAAG,CAAEC,OAAAA,CAAM,CAAE,CAAGZ,EACxB,CAAEa,UAAAA,CAAS,CAAE,CAAGX,EAClBY,EAAQC,SAASC,cAAc,CAACb,GASpC,GAPAQ,EAAI,CACFP,KAAAA,EACAI,KAAAA,EACAH,SAAAA,EACAE,MAAAA,EACAE,SAAAA,CACF,GACIH,GAAYA,EAAW,EAAG,CAC5B,IAAMW,EAAQC,WAAW,KACvBN,EAAOH,GACPU,aAAaF,EACf,EAAGX,EACL,CACA,GAAI,CAACQ,EAAO,CAEVA,AADAA,CAAAA,EAAQC,SAASK,aAAa,CAAC,MAAK,EAC9BC,EAAE,CAAGlB,EACXW,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,EAAU9B,EAAO,KACrBH,EAAa,KACW,IAAlBc,IAAOoB,MAAM,GACfD,UACAf,GAAAA,EAAOF,MAAM,GAEjB,KAEGjB,qBAAWe,IAAOoB,MAAM,2EACHjB,gDACAZ,UACnBP,qBAAUgB,cACR,AAACqB,+CAQKpC,qBAAWoC,EAAKvB,IAAI,wBAAGuB,EAAKvB,IAAI,eACXuB,EAAK1B,QAAQ,QAClCV,qBAAWoC,EAAKxB,KAAK,4CACS,IAAMK,EAAOmB,EAAKtB,QAAQ,yBARlDX,EAAG,eAAgBiC,EAAK3B,IAAI,MAEvB2B,EAAKC,QAAQ,8HAcpClB,EAAOmB,UAAU,EAEpBlB,SAASmB,IAAI,CAACC,WAAW,CAACrB,EAC5B,CACA,OAAOL,CACT,CAAA,CAE4B"}
+{"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":["createEffect","createUniqueId","For","Show","render","cx","theme","queque","styles","mountId","type","children","duration","close","icon","uniqueId","list","add","remove","baseStyle","mount","document","getElementById","timer","setTimeout","clearTimeout","createElement","id","style","position","insetBlockStart","insetInlineStart","transform","attachShadow","mode","unmount","length","item","closeing","shadowRoot","body","appendChild"],"mappings":"0VAAA,QAASA,gBAAAA,CAAY,CAAEC,kBAAAA,CAAc,CAAEC,OAAAA,CAAG,CAAEC,QAAAA,CAAI,KAAQ,UAAW,AACnE,QAASC,UAAAA,CAAM,KAAQ,cAAe,AACtC,QAASC,MAAAA,CAAE,KAAQ,aAAc,AAEjC,QAAOC,MAAW,UAAW,AAE7B,QAAOC,MAAuC,UAAW,AACzD,QAASC,UAAAA,CAAM,KAAQ,UAAW,CAElC,IAAMC,EAAU,oBA+EhB,eA7EqB,CAAA,CACnBC,EACAC,EACAC,EAAW,GAAI,CACfC,EACAC,KAEA,IAAMC,EAAWd,IACX,CAAEe,KAAAA,CAAI,CAAEC,IAAAA,CAAG,CAAEC,OAAAA,CAAM,CAAE,CAAGX,EACxB,CAAEY,UAAAA,CAAS,CAAE,CAAGb,EAClBc,EAAQC,SAASC,cAAc,CAACb,GASpC,GAPAQ,EAAI,CACFP,KAAAA,EACAI,KAAAA,EACAH,SAAAA,EACAE,MAAAA,EACAE,SAAAA,CACF,GACIH,GAAYA,EAAW,EAAG,CAC5B,IAAMW,EAAQC,WAAW,KACvBN,EAAOH,GACPU,aAAaF,EACf,EAAGX,EACL,CACA,GAAI,CAACQ,EAAO,CAEVA,AADAA,CAAAA,EAAQC,SAASK,aAAa,CAAC,MAAK,EAC9BC,EAAE,CAAGlB,EACXW,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,EAAU/B,EAAO,KACrBJ,EAAa,KACW,IAAlBgB,IAAOoB,MAAM,GACfD,UACAf,GAAAA,EAAOF,MAAM,GAEjB,KAEGf,qBAAWa,IAAOoB,MAAM,2EACHjB,gDACAX,UACnBN,qBAAUc,cACR,AAACqB,+CAQKlC,qBAAWkC,EAAKvB,IAAI,wBAAGuB,EAAKvB,IAAI,eACXuB,EAAK1B,QAAQ,QAClCR,qBAAWkC,EAAKxB,KAAK,4CAGT,KACPK,EAAOmB,EAAKtB,QAAQ,CACtB,yBAZGV,EAAG,eAAgBgC,EAAK3B,IAAI,MAEvB2B,EAAKC,QAAQ,8HAmBpClB,EAAMmB,UAAU,EAEnBlB,SAASmB,IAAI,CAACC,WAAW,CAACrB,EAC5B,CACA,OAAOL,CACT,CAAA,CAE4B"}

package/es/pagination/README.mdx

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

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

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

package/es/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":["For","Show","batch","createEffect","createMemo","createSignal","mergeProps","splitProps","untrack","isFunction","css","customElement","styles","theme","Pagination","_","baseStyle","local","other","page","setPage","pageSize","setPageSize","total","setTotal","totalPages","Math","ceil","pages","totals","arr","i","push","right","min","max","floor","maxCount","length","last","fast","splice","unshift","changePage","curr","p","next","onChange","TotalText","ranges","totalText","isCurrent","size","class","opt","el","element","props","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":["batch","createEffect","createMemo","createSignal","For","mergeProps","Show","splitProps","untrack","isFunction","css","customElement","theme","styles","Pagination","_","baseStyle","local","other","page","setPage","pageSize","setPageSize","total","setTotal","totalPages","Math","ceil","pages","totals","arr","i","push","right","min","max","floor","maxCount","length","last","fast","splice","unshift","changePage","curr","p","next","onChange","TotalText","ranges","totalText","isCurrent","size","class","opt","el","element","props","dispatchEvent","CustomEvent","detail","querySelector","removeAttribute"],"mappings":"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"}

package/es/popover/README.mdx

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

package/es/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/es/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>
+```