neko-ui 2.8.21 → 2.8.23

package/es/typography/examples/basic.md

@@ -0,0 +1,27 @@
+---
+title: 基本使用
+description: 文本的基本格式
+order: 1
+---
+
+```html
+<n-typography>normal text</n-typography>
+<n-typography type="secondary">secondary text</n-typography>
+<n-typography type="success">success text</n-typography>
+<n-typography type="error">danger text</n-typography>
+<n-typography type="warning">warning text</n-typography>
+<n-typography type="primary">primary text</n-typography>
+<n-typography type="primary" disabled="true"> disabled text </n-typography>
+```
+
+```jsx
+<n-typography>normal text</n-typography>
+<n-typography type="secondary">secondary text</n-typography>
+<n-typography type="success">success text</n-typography>
+<n-typography type="error">danger text</n-typography>
+<n-typography type="warning">warning text</n-typography>
+<n-typography type="primary">primary text</n-typography>
+<n-typography type="primary" disabled>
+  disabled text
+</n-typography>
+```

package/es/typography/examples/tag.md

@@ -0,0 +1,25 @@
+---
+title: 自定义标签
+description: 添加 `tag` 属性设置自定义标签类型
+order: 3
+---
+
+```html
+<n-typography tag="mark">mark</n-typography>
+<n-typography tag="u">underline</n-typography>
+<n-typography tag="strong">strong</n-typography>
+<n-typography tag="del">delete</n-typography>
+<n-typography tag="i">italic</n-typography>
+<n-typography tag="kbd">keyboard</n-typography>
+<n-typography tag="a">link</n-typography>
+```
+
+```jsx
+<n-typography tag="mark">mark</n-typography>
+<n-typography tag="u">underline</n-typography>
+<n-typography tag="strong">strong</n-typography>
+<n-typography tag="del">delete</n-typography>
+<n-typography tag="i">italic</n-typography>
+<n-typography tag="kbd">keyboard</n-typography>
+<n-typography tag="a">link</n-typography>
+```

package/es/typography/examples/truncated.md

@@ -0,0 +1,17 @@
+---
+title: 超出隐藏
+description: 添加 `truncated` 属性启用文本超出隐藏, 添加 `truncated.rows` 属性设置文本超出多少行后隐藏
+order: 2
+---
+
+```html
+<n-typography truncated="2">Don’t <n-typography type="success">compare</n-typography> your life with others. There’s no comparison between the <n-typography type="warning">sun</n-typography> and the <n-typography type="warning">moon</n-typography>. They shine when it’s their time.</n-typography>
+```
+
+```jsx
+<n-typography truncated={2}>
+  Don’t <n-typography type="success">compare</n-typography> your life with others. There’s no
+  comparison between the <n-typography type="warning">sun</n-typography> and the
+  <n-typography type="warning">moon</n-typography>. They shine when it’s their time.
+</n-typography>
+```

package/es/typography/index.js

@@ -1,10 +1,10 @@
-import{template as e}from"solid-js/web";import{effect as t}from"solid-js/web";import{createComponent as r}from"solid-js/web";let o=e("<style> ");import{Show as l,createEffect as i,createMemo as s,mergeProps as d}from"solid-js";import{css as a,cx as n}from"@moneko/css";import{customElement as c}from"solid-element";import{Dynamic as p}from"solid-js/web";import m from"../theme";function u(e){let{baseStyle:i}=m,c=d({type:"text",tag:"span"},e),u=s(()=>{let t="secondary"===e.type?"--text-secondary":`--${e.type}-color`;"error"===e.type?t="--error-color":e.disabled&&(t="--disable-color");let r="";return e.truncated&&(r=a`
+import{template as e}from"solid-js/web";import{effect as t}from"solid-js/web";import{createComponent as r}from"solid-js/web";let o=e("<style> ");import{createEffect as l,createMemo as i,mergeProps as s,Show as d}from"solid-js";import{Dynamic as a}from"solid-js/web";import{css as n,cx as c}from"@moneko/css";import{customElement as p}from"solid-element";import m from"../theme";function u(e){let{baseStyle:l}=m,p=s({type:"text",tag:"span"},e),u=i(()=>{let t="secondary"===e.type?"--text-secondary":`--${e.type}-color`;"error"===e.type?t="--error-color":e.disabled&&(t="--disable-color");let r="";return e.truncated&&(r=n`
         overflow: hidden;
         /* stylelint-disable-next-line */
         display: -webkit-box;
         -webkit-box-orient: block-axis;
         -webkit-line-clamp: ${"number"==typeof e.truncated&&e.truncated||1};
-      `),a`
+      `),n`
       :host {
         display: inline-block;
         max-inline-size: 100%;
@@ -18,5 +18,5 @@ import{template as e}from"solid-js/web";import{effect as t}from"solid-js/web";im
         cursor: ${e.disabled?"not-allowed":"auto"};
         ${r}
       }
-    `});return[(()=>{let e=o(),r=e.firstChild;return t(()=>r.data=i()),e})(),(()=>{let e=o(),r=e.firstChild;return t(()=>r.data=u()),e})(),r(l,{get when(){return e.css},get children(){let r=o(),l=r.firstChild;return t(()=>l.data=a(e.css)),r}}),r(p,{get component(){return c.tag},get class(){return n("typography",c.class)},get style(){return c.style},get children(){return c.children}})]}c("n-typography",{class:void 0,css:void 0,type:void 0,truncated:void 0,tag:void 0,disabled:void 0,style:void 0},(e,t)=>{let o=t.element,l=d({children:[...o.childNodes.values()]},e);return i(()=>{o.replaceChildren()}),r(u,l)});export default u;
+    `});return[(()=>{let e=o(),r=e.firstChild;return t(()=>r.data=l()),e})(),(()=>{let e=o(),r=e.firstChild;return t(()=>r.data=u()),e})(),r(d,{get when(){return e.css},get children(){let r=o(),l=r.firstChild;return t(()=>l.data=n(e.css)),r}}),r(a,{get component(){return p.tag},get class(){return c("typography",p.class)},get style(){return p.style},get children(){return p.children}})]}p("n-typography",{class:void 0,css:void 0,type:void 0,truncated:void 0,tag:void 0,disabled:void 0,style:void 0},(e,t)=>{let o=t.element,i=s({children:[...o.childNodes.values()]},e);return l(()=>{o.replaceChildren()}),r(u,i)});export default u;
 //# sourceMappingURL=index.js.map

package/es/typography/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/typography/index.tsx"],"sourcesContent":["import { Show, createEffect, createMemo, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Dynamic } from 'solid-js/web';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface TypographyProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 文本格式\n   * @default 'text'\n   */\n  type?: 'primary' | 'warning' | 'success' | 'error' | 'text' | 'secondary';\n  /** 启用超出隐藏\n   * @default false\n   */\n  truncated?: boolean | number;\n  /** 自定义标签名\n   * @default 'span'\n   */\n  tag?: string;\n  /** 禁用 */\n  disabled?: boolean;\n  children?: JSX.Element;\n  style?: Record<string, string | number>;\n}\n\nfunction Typography(props: TypographyProps) {\n  const { baseStyle } = theme;\n  const _ = mergeProps(\n    {\n      type: 'text',\n      tag: 'span',\n    },\n    props,\n  );\n  const customCss = createMemo(() => {\n    let color = props.type === 'secondary' ? '--text-secondary' : `--${props.type}-color`;\n\n    if (props.type === 'error') {\n      color = '--error-color';\n    } else if (props.disabled) {\n      color = '--disable-color';\n    }\n    let truncated = '';\n\n    if (props.truncated) {\n      truncated = css`\n        overflow: hidden;\n        /* stylelint-disable-next-line */\n        display: -webkit-box;\n        -webkit-box-orient: block-axis;\n        -webkit-line-clamp: ${(typeof props.truncated === 'number' && props.truncated) || 1};\n      `;\n    }\n\n    return css`\n      :host {\n        display: inline-block;\n        max-inline-size: 100%;\n      }\n\n      .typography {\n        font-size: var(--font-size);\n        word-break: break-word;\n        word-wrap: break-word;\n        color: var(${color});\n        cursor: ${props.disabled ? 'not-allowed' : 'auto'};\n        ${truncated}\n      }\n    `;\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={customCss()} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <Dynamic component={_.tag} class={cx('typography', _.class)} style={_.style}>\n        {_.children}\n      </Dynamic>\n    </>\n  );\n}\n\nexport type TypographyElement = CustomElement<TypographyProps>;\n\ncustomElement<TypographyProps>(\n  'n-typography',\n  {\n    class: void 0,\n    css: void 0,\n    type: void 0,\n    truncated: void 0,\n    tag: void 0,\n    disabled: void 0,\n    style: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        children: [...el.childNodes.values()],\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n    });\n    return <Typography {...props} />;\n  },\n);\nexport default Typography;\n"],"names":["Show","createEffect","createMemo","mergeProps","css","cx","customElement","Dynamic","theme","Typography","props","baseStyle","_","type","tag","customCss","color","disabled","truncated","class","style","children","opt","el","element","childNodes","values","replaceChildren"],"mappings":"gJAAA,QAASA,QAAAA,CAAI,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACtE,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,WAAAA,CAAO,KAAQ,cAAe,AACvC,QAAOC,MAAW,UAAW,CA0B7B,SAASC,EAAWC,CAAsB,EACxC,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGH,EAChBI,EAAIT,EACR,CACEU,KAAM,OACNC,IAAK,MACP,EACAJ,GAEIK,EAAYb,EAAW,KAC3B,IAAIc,EAAQN,AAAe,cAAfA,EAAMG,IAAI,CAAmB,mBAAqB,CAAC,EAAE,EAAEH,EAAMG,IAAI,CAAC,MAAM,CAAC,AAEjFH,AAAe,CAAA,UAAfA,EAAMG,IAAI,CACZG,EAAQ,gBACCN,EAAMO,QAAQ,EACvBD,CAAAA,EAAQ,iBAAgB,EAE1B,IAAIE,EAAY,GAYhB,OAVIR,EAAMQ,SAAS,EACjBA,CAAAA,EAAYd,CAAG,CAAC;;;;;4BAKM,EAAE,AAA4B,UAA3B,OAAOM,EAAMQ,SAAS,EAAiBR,EAAMQ,SAAS,EAAK,EAAE;MACtF,CAAC,AAAD,EAGKd,CAAG,CAAC;;;;;;;;;;mBAUI,EAAEY,EAAM;gBACX,EAAEN,EAAMO,QAAQ,CAAG,cAAgB,OAAO;QAClD,EAAEC,EAAU;;IAEhB,CAAC,AACH,GAEA,0DAEwBP,8DACAI,aACnBf,qBAAWU,EAAMN,GAAG,8DACCA,EAAIM,EAAMN,GAAG,UAElCG,0BAAmBK,EAAEE,GAAG,qBAAST,EAAG,aAAcO,EAAEO,KAAK,sBAAUP,EAAEQ,KAAK,wBACxER,EAAES,QAAQ,IAInB,CAIAf,EACE,eACA,CACEa,MAAO,KAAK,EACZf,IAAK,KAAK,EACVS,KAAM,KAAK,EACXK,UAAW,KAAK,EAChBJ,IAAK,KAAK,EACVG,SAAU,KAAK,EACfG,MAAO,KAAK,CACd,EACA,CAACR,EAAGU,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBd,EAAQP,EACZ,CACEkB,SAAU,IAAIE,EAAGE,UAAU,CAACC,MAAM,GAAG,AACvC,EACAd,GAMF,OAHAX,EAAa,KACXsB,EAAGI,eAAe,EACpB,KACQlB,EAAeC,EACzB,EAEF,gBAAeD,CAAW"}
+{"version":3,"sources":["../../components/typography/index.tsx"],"sourcesContent":["import { createEffect, createMemo, mergeProps, Show } from 'solid-js';\nimport { Dynamic } from 'solid-js/web';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport theme from '../theme';\n\nexport interface TypographyProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 文本格式\n   * @default 'text'\n   */\n  type?: 'primary' | 'warning' | 'success' | 'error' | 'text' | 'secondary';\n  /** 启用超出隐藏\n   * @default false\n   */\n  truncated?: boolean | number;\n  /** 自定义标签名\n   * @default 'span'\n   */\n  tag?: string;\n  /** 禁用 */\n  disabled?: boolean;\n  children?: JSX.Element;\n  style?: Record<string, string | number>;\n}\n\nfunction Typography(props: TypographyProps) {\n  const { baseStyle } = theme;\n  const _ = mergeProps(\n    {\n      type: 'text',\n      tag: 'span',\n    },\n    props,\n  );\n  const customCss = createMemo(() => {\n    let color = props.type === 'secondary' ? '--text-secondary' : `--${props.type}-color`;\n\n    if (props.type === 'error') {\n      color = '--error-color';\n    } else if (props.disabled) {\n      color = '--disable-color';\n    }\n    let truncated = '';\n\n    if (props.truncated) {\n      truncated = css`\n        overflow: hidden;\n        /* stylelint-disable-next-line */\n        display: -webkit-box;\n        -webkit-box-orient: block-axis;\n        -webkit-line-clamp: ${(typeof props.truncated === 'number' && props.truncated) || 1};\n      `;\n    }\n\n    return css`\n      :host {\n        display: inline-block;\n        max-inline-size: 100%;\n      }\n\n      .typography {\n        font-size: var(--font-size);\n        word-break: break-word;\n        word-wrap: break-word;\n        color: var(${color});\n        cursor: ${props.disabled ? 'not-allowed' : 'auto'};\n        ${truncated}\n      }\n    `;\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={customCss()} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <Dynamic component={_.tag} class={cx('typography', _.class)} style={_.style}>\n        {_.children}\n      </Dynamic>\n    </>\n  );\n}\n\nexport type TypographyElement = CustomElement<TypographyProps>;\n\ncustomElement<TypographyProps>(\n  'n-typography',\n  {\n    class: void 0,\n    css: void 0,\n    type: void 0,\n    truncated: void 0,\n    tag: void 0,\n    disabled: void 0,\n    style: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        children: [...el.childNodes.values()],\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n    });\n    return <Typography {...props} />;\n  },\n);\nexport default Typography;\n"],"names":["createEffect","createMemo","mergeProps","Show","Dynamic","css","cx","customElement","theme","Typography","props","baseStyle","_","type","tag","customCss","color","disabled","truncated","class","style","children","opt","el","element","childNodes","values","replaceChildren"],"mappings":"gJAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,KAAQ,UAAW,AACtE,QAASC,WAAAA,CAAO,KAAQ,cAAe,AACvC,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAAOC,MAAW,UAAW,CAyB7B,SAASC,EAAWC,CAAsB,EACxC,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGH,EAChBI,EAAIV,EACR,CACEW,KAAM,OACNC,IAAK,MACP,EACAJ,GAEIK,EAAYd,EAAW,KAC3B,IAAIe,EAAQN,AAAe,cAAfA,EAAMG,IAAI,CAAmB,mBAAqB,CAAC,EAAE,EAAEH,EAAMG,IAAI,CAAC,MAAM,CAAC,AAEjFH,AAAe,CAAA,UAAfA,EAAMG,IAAI,CACZG,EAAQ,gBACCN,EAAMO,QAAQ,EACvBD,CAAAA,EAAQ,iBAAgB,EAE1B,IAAIE,EAAY,GAYhB,OAVIR,EAAMQ,SAAS,EACjBA,CAAAA,EAAYb,CAAG,CAAC;;;;;4BAKM,EAAE,AAA4B,UAA3B,OAAOK,EAAMQ,SAAS,EAAiBR,EAAMQ,SAAS,EAAK,EAAE;MACtF,CAAC,AAAD,EAGKb,CAAG,CAAC;;;;;;;;;;mBAUI,EAAEW,EAAM;gBACX,EAAEN,EAAMO,QAAQ,CAAG,cAAgB,OAAO;QAClD,EAAEC,EAAU;;IAEhB,CAAC,AACH,GAEA,0DAEwBP,8DACAI,aACnBZ,qBAAWO,EAAML,GAAG,8DACCA,EAAIK,EAAML,GAAG,UAElCD,0BAAmBQ,EAAEE,GAAG,qBAASR,EAAG,aAAcM,EAAEO,KAAK,sBAAUP,EAAEQ,KAAK,wBACxER,EAAES,QAAQ,IAInB,CAIAd,EACE,eACA,CACEY,MAAO,KAAK,EACZd,IAAK,KAAK,EACVQ,KAAM,KAAK,EACXK,UAAW,KAAK,EAChBJ,IAAK,KAAK,EACVG,SAAU,KAAK,EACfG,MAAO,KAAK,CACd,EACA,CAACR,EAAGU,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBd,EAAQR,EACZ,CACEmB,SAAU,IAAIE,EAAGE,UAAU,CAACC,MAAM,GAAG,AACvC,EACAd,GAMF,OAHAZ,EAAa,KACXuB,EAAGI,eAAe,EACpB,KACQlB,EAAeC,EACzB,EAEF,gBAAeD,CAAW"}

package/eslint.config.mjs

@@ -0,0 +1,9 @@
+import neko from 'eslint-config-neko';
+import solid from 'eslint-plugin-solid/configs/typescript';
+
+const conf = [
+  ...neko.configs.recommended,
+  { ignores: ['**/**/*.mdx?', 'lib', 'docs', 'coverage', 'prism.js'] },
+];
+
+export default conf.concat(solid);

package/lib/avatar/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 通用
+title: 头像
+subtitle: n-avatar
+icon: 🎧
+---
+
+# 带轮廓的头像
+
+> 带 logo 轮廓的头像

package/lib/avatar/examples/basic.md

@@ -0,0 +1,14 @@
+---
+title: 最简单的用法
+description: 通过 `src` 属性设置头像
+order: 1
+col: 50%
+---
+
+```html
+<n-avatar src="https://gw.alipayobjects.com/zos/alicdn/HJtErOC0O/avatar.png"></n-avatar>
+```
+
+```jsx
+<n-avatar src="https://gw.alipayobjects.com/zos/alicdn/HJtErOC0O/avatar.png" />
+```

package/lib/avatar/examples/group.md

@@ -0,0 +1,57 @@
+---
+title: 头像组
+description: 使用 AvatarGroup 将头像组合展现。
+order: 3
+---
+
+```html
+<n-avatar-group></n-avatar-group>
+<n-avatar-group max-count="10"></n-avatar-group>
+<script>
+  const el = container.querySelectorAll('n-avatar-group');
+
+  el[0].data = Array(4).fill({
+    src: 'https://gw.alipayobjects.com/zos/alicdn/HJtErOC0O/avatar.png',
+  });
+  el[1].data = Array(20)
+    .fill(0)
+    .map((_, i) => {
+      if (i % 2) {
+        return {
+          src: 'https://gw.alipayobjects.com/zos/alicdn/HJtErOC0O/avatar.png',
+        };
+      }
+      return {
+        username: ['avatar', 'gw', 'bjec', '#zos'][i % 3],
+        color: ['#cabdeb', 'green', '#e9887c', '#e989ua'][i % 3],
+      };
+    });
+</script>
+```
+
+```jsx
+const data1 = Array(4).fill({
+  src: 'https://gw.alipayobjects.com/zos/alicdn/HJtErOC0O/avatar.png',
+});
+const data2 = Array(20)
+  .fill(0)
+  .map((_, i) => {
+    if (i % 2) {
+      return {
+        src: 'https://gw.alipayobjects.com/zos/alicdn/HJtErOC0O/avatar.png',
+      };
+    }
+    return {
+      username: ['avatar', 'gw', 'bjec', '#zos'][i % 3],
+      color: ['#cabdeb', 'green', '#e9887c', '#e989ua'][i % 3],
+    };
+  });
+
+render(
+  <>
+    <n-avatar-group data={data1} />
+    <br />
+    <n-avatar-group data={data2} max-count={10} />
+  </>
+);
+```

package/lib/avatar/examples/size.md

@@ -0,0 +1,21 @@
+---
+title: 最简单的用法
+description: 头像内置有大、中、小三种尺寸。通过设置 `size` 为 `large`、`small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中 'normal'。也可以将 `size` 设置为实际大小 `number`
+order: 2
+---
+
+```html
+<n-avatar size="100" username="100"></n-avatar>
+<n-avatar size="50" username="50"></n-avatar>
+<n-avatar size="large" username="large"></n-avatar>
+<n-avatar size="normal" username="normal"></n-avatar>
+<n-avatar size="small" username="small"></n-avatar>
+```
+
+```jsx
+<n-avatar size="100" username="100"></n-avatar>
+<n-avatar size="50" username="50"></n-avatar>
+<n-avatar size="large" username="large"></n-avatar>
+<n-avatar size="normal" username="normal"></n-avatar>
+<n-avatar size="small" username="small"></n-avatar>
+```

package/lib/avatar/group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/avatar/group.tsx"],"sourcesContent":["import { For, Show, createMemo, mergeProps, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport '../avatar';\nimport '../popover';\nimport type { AvatarProps, BasicConfig, CustomElement } from '..';\n\nconst style = css`\n  .group {\n    display: inline-flex;\n    align-items: center;\n\n    & > n-avatar {\n      display: flex;\n    }\n\n    & > n-avatar:not(:first-child),\n    & > n-popover {\n      margin-inline-start: -4%;\n      transition: margin-inline-start var(--transition-duration);\n\n      &:hover:not(n-popover) {\n        margin-inline-start: 4px;\n\n        &:has(+ n-avatar),\n        &:has(+ n-popover) {\n          margin-inline-end: calc(4% + 4px);\n        }\n      }\n    }\n  }\n`;\n\nconst moreCss = css`\n  .more {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow-y: auto;\n    padding: 8px;\n    max-inline-size: 60vi;\n    max-block-size: 80vb;\n    gap: 8px;\n    flex-wrap: wrap;\n\n    & > n-avatar {\n      display: flex;\n    }\n  }\n`;\n\nexport interface AvatarGroupProps {\n  /** 头像数据 */\n  data?: Omit<AvatarProps, 'size'>[];\n  /** 头像尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 最多显示个数 */\n  maxCount?: number;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n}\nexport type AvatarGroupElement = CustomElement<AvatarGroupProps>;\n\nconst defaultProps: AvatarGroupProps = {\n  data: [],\n  size: void 0,\n  class: void 0,\n  maxCount: void 0,\n  css: void 0,\n};\n\nfunction AvatarGroup(_props: AvatarGroupProps) {\n  const props = mergeProps(defaultProps, _props);\n  const [local, other] = splitProps(props, ['data', 'maxCount', 'class', 'size', 'css']);\n  const data = createMemo(() => local.data || []);\n  const showAvatar = createMemo(() => data().slice(0, local.maxCount));\n  const more = createMemo(() => {\n    const _data = data();\n    const len = _data.length - (local.maxCount || _data.length);\n\n    if (len > 0) {\n      return _data.slice(-len);\n    }\n    return [];\n  });\n\n  return (\n    <>\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <div {...other} class={cx('group', local.class)}>\n        <For each={showAvatar()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n        <Show when={more().length}>\n          <n-popover\n            arrow={true}\n            trigger=\"click\"\n            popup-css={moreCss}\n            content={\n              <div class=\"more\">\n                <For each={more()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n              </div>\n            }\n          >\n            <n-avatar size={local.size} username={`+${more().length}`} />\n          </n-popover>\n        </Show>\n      </div>\n    </>\n  );\n}\n\ncustomElement<AvatarGroupProps>('n-avatar-group', defaultProps, AvatarGroup);\n\nexport default AvatarGroup;\n"],"names":["style","css","moreCss","defaultProps","data","size","class","maxCount","AvatarGroup","_props","props","mergeProps","local","other","splitProps","createMemo","showAvatar","slice","more","_data","len","length","Show","cx","For","a","customElement"],"mappings":"kGAuHA,+CAAA,+CAvH8D,sBACtC,yBACM,yBACvB,qBACA,mPAGDA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AAwBlB,CAAC,CAEKC,EAAUD,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;AAgBpB,CAAC,CAkBKE,EAAiC,CACrCC,KAAM,EAAE,CACRC,KAAM,KAAK,EACXC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfN,IAAK,KAAK,CACZ,EAEA,SAASO,EAAYC,CAAwB,EAC3C,IAAMC,EAAQC,GAAAA,YAAU,EAACR,EAAcM,GACjC,CAACG,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACJ,EAAO,CAAC,OAAQ,WAAY,QAAS,OAAQ,MAAM,EAC/EN,EAAOW,GAAAA,YAAU,EAAC,IAAMH,EAAMR,IAAI,EAAI,EAAE,EACxCY,EAAaD,GAAAA,YAAU,EAAC,IAAMX,IAAOa,KAAK,CAAC,EAAGL,EAAML,QAAQ,GAC5DW,EAAOH,GAAAA,YAAU,EAAC,KACtB,IAAMI,EAAQf,IACRgB,EAAMD,EAAME,MAAM,CAAIT,CAAAA,EAAML,QAAQ,EAAIY,EAAME,MAAM,AAAD,SAEzD,AAAID,EAAM,EACDD,EAAMF,KAAK,CAAC,CAACG,GAEf,EAAE,AACX,GAEA,4CAEwBpB,8BACnBsB,MAAI,oBAAOV,EAAMX,GAAG,wEACCA,GAAAA,KAAG,EAACW,EAAMX,GAAG,8DAE1BY,qBAAcU,GAAAA,IAAE,EAAC,QAASX,EAAMN,KAAK,iDAC3CkB,KAAG,oBAAOR,cAAe,AAACS,yDAAoBA,qBAASb,EAAMP,IAAI,yFACjEiB,MAAI,oBAAOJ,IAAOG,MAAM,yDAEd,CAAA,aAEInB,uEAGNsB,KAAG,oBAAON,cAAS,AAACO,yDAAoBA,qBAASb,EAAMP,IAAI,kIAIhDO,EAAMP,IAAI,GAAY,CAAC,CAAC,EAAEa,IAAOG,MAAM,CAAC,CAAC,oHAMrE,CAEAK,GAAAA,eAAa,EAAmB,iBAAkBvB,EAAcK,SAEhE,EAAeA"}
+{"version":3,"sources":["../../components/avatar/group.tsx"],"sourcesContent":["import { createMemo, For, mergeProps, Show, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { AvatarProps, BasicConfig, CustomElement } from '..';\n\nimport '../avatar';\nimport '../popover';\n\nconst style = css`\n  .group {\n    display: inline-flex;\n    align-items: center;\n\n    & > n-avatar {\n      display: flex;\n    }\n\n    & > n-avatar:not(:first-child),\n    & > n-popover {\n      margin-inline-start: -4%;\n      transition: margin-inline-start var(--transition-duration);\n\n      &:hover:not(n-popover) {\n        margin-inline-start: 4px;\n\n        &:has(+ n-avatar),\n        &:has(+ n-popover) {\n          margin-inline-end: calc(4% + 4px);\n        }\n      }\n    }\n  }\n`;\n\nconst moreCss = css`\n  .more {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow-y: auto;\n    padding: 8px;\n    max-inline-size: 60vi;\n    max-block-size: 80vb;\n    gap: 8px;\n    flex-wrap: wrap;\n\n    & > n-avatar {\n      display: flex;\n    }\n  }\n`;\n\nexport interface AvatarGroupProps {\n  /** 头像数据 */\n  data?: Omit<AvatarProps, 'size'>[];\n  /** 头像尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 最多显示个数 */\n  maxCount?: number;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n}\nexport type AvatarGroupElement = CustomElement<AvatarGroupProps>;\n\nconst defaultProps: AvatarGroupProps = {\n  data: [],\n  size: void 0,\n  class: void 0,\n  maxCount: void 0,\n  css: void 0,\n};\n\nfunction AvatarGroup(_props: AvatarGroupProps) {\n  const props = mergeProps(defaultProps, _props);\n  const [local, other] = splitProps(props, ['data', 'maxCount', 'class', 'size', 'css']);\n  const data = createMemo(() => local.data || []);\n  const showAvatar = createMemo(() => data().slice(0, local.maxCount));\n  const more = createMemo(() => {\n    const _data = data();\n    const len = _data.length - (local.maxCount || _data.length);\n\n    if (len > 0) {\n      return _data.slice(-len);\n    }\n    return [];\n  });\n\n  return (\n    <>\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <div {...other} class={cx('group', local.class)}>\n        <For each={showAvatar()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n        <Show when={more().length}>\n          <n-popover\n            arrow={true}\n            trigger=\"click\"\n            popup-css={moreCss}\n            content={\n              <div class=\"more\">\n                <For each={more()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n              </div>\n            }\n          >\n            <n-avatar size={local.size} username={`+${more().length}`} />\n          </n-popover>\n        </Show>\n      </div>\n    </>\n  );\n}\n\ncustomElement<AvatarGroupProps>('n-avatar-group', defaultProps, AvatarGroup);\n\nexport default AvatarGroup;\n"],"names":["style","css","moreCss","defaultProps","data","size","class","maxCount","AvatarGroup","_props","props","mergeProps","local","other","splitProps","createMemo","showAvatar","slice","more","_data","len","length","Show","cx","For","a","customElement"],"mappings":"kGAyHA,+CAAA,+CAzH8D,sBACtC,yBACM,yBAIvB,qBACA,mPAEDA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AAwBlB,CAAC,CAEKC,EAAUD,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;AAgBpB,CAAC,CAkBKE,EAAiC,CACrCC,KAAM,EAAE,CACRC,KAAM,KAAK,EACXC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfN,IAAK,KAAK,CACZ,EAEA,SAASO,EAAYC,CAAwB,EAC3C,IAAMC,EAAQC,GAAAA,YAAU,EAACR,EAAcM,GACjC,CAACG,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACJ,EAAO,CAAC,OAAQ,WAAY,QAAS,OAAQ,MAAM,EAC/EN,EAAOW,GAAAA,YAAU,EAAC,IAAMH,EAAMR,IAAI,EAAI,EAAE,EACxCY,EAAaD,GAAAA,YAAU,EAAC,IAAMX,IAAOa,KAAK,CAAC,EAAGL,EAAML,QAAQ,GAC5DW,EAAOH,GAAAA,YAAU,EAAC,KACtB,IAAMI,EAAQf,IACRgB,EAAMD,EAAME,MAAM,CAAIT,CAAAA,EAAML,QAAQ,EAAIY,EAAME,MAAM,AAAD,SAEzD,AAAID,EAAM,EACDD,EAAMF,KAAK,CAAC,CAACG,GAEf,EAAE,AACX,GAEA,4CAEwBpB,8BACnBsB,MAAI,oBAAOV,EAAMX,GAAG,wEACCA,GAAAA,KAAG,EAACW,EAAMX,GAAG,8DAE1BY,qBAAcU,GAAAA,IAAE,EAAC,QAASX,EAAMN,KAAK,iDAC3CkB,KAAG,oBAAOR,cAAe,AAACS,yDAAoBA,qBAASb,EAAMP,IAAI,yFACjEiB,MAAI,oBAAOJ,IAAOG,MAAM,yDAEd,CAAA,aAEInB,uEAGNsB,KAAG,oBAAON,cAAS,AAACO,yDAAoBA,qBAASb,EAAMP,IAAI,kIAIhDO,EAAMP,IAAI,GAAY,CAAC,CAAC,EAAEa,IAAOG,MAAM,CAAC,CAAC,oHAMrE,CAEAK,GAAAA,eAAa,EAAmB,iBAAkBvB,EAAcK,SAEhE,EAAeA"}

package/lib/avatar/index.js

@@ -1,9 +1,9 @@
-"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"),r=require("@moneko/css"),s=require("solid-element"),a=require("./style"),n=i(require("../img")),l=i(require("../theme"));function i(e){return e&&e.__esModule?e:{default:e}}const o=(0,e.template)("<style> "),c=(0,e.template)("<style>"),u=(0,e.template)("<span>"),d=(0,e.template)("<div>"),h=(0,e.template)('<svg viewBox="0 0 1 1" aria-hidden="true" overflow="hidden"><defs><clipPath id="clipPathAvatar" clipPathUnits="objectBoundingBox"><path d="M.395.126H.4A.016.016 0 0 1 .418.14v.002L.42.158a.39.39 0 0 0 .019.12L.44.284l.005.01c.011.026.034.05.05.053h.011a.084.084 0 0 0 .016-.01.115.115 0 0 0 .025-.03.259.259 0 0 0 .033-.14.02.02 0 0 0 0-.008.03.03 0 0 1 0-.01V.145L.584.136h.001C.583.134.591.127.594.126h.024L.63.127l.013.001h.01a.123.123 0 0 0 .021.003h.003L.7.133a.591.591 0 0 1 .046.004L.77.139h.013l.006.002h.009c.01 0 .019.006.036.023a.24.24 0 0 1 .018.02l.004.004a.49.49 0 0 1 .063.094L.927.3a.032.032 0 0 0 .004.007L.932.31l.004.007.007.022a.141.141 0 0 0 .004.008.34.34 0 0 0 .011.037l.002.01A.463.463 0 0 1 .969.46v.013A.358.358 0 0 1 .963.58a.537.537 0 0 1-.064.16.378.378 0 0 1-.096.111.042.042 0 0 1-.014.002L.762.851.732.85A1.092 1.092 0 0 0 .667.845C.641.842.636.84.63.832L.626.825C.624.822.628.814.636.8a.129.129 0 0 0 .01-.022.02.02 0 0 0 .001-.003V.773a.143.143 0 0 0 .009-.02A.149.149 0 0 1 .66.738.028.028 0 0 0 .662.73V.726a.243.243 0 0 1-.106.07.177.177 0 0 1-.121-.003A.25.25 0 0 1 .35.736C.34.726.338.724.337.727A.095.095 0 0 0 .344.75v.003s.001 0 0 0a.316.316 0 0 0 .024.053L.37.811c.005.01.005.013.001.02C.367.837.36.84.345.842A.462.462 0 0 1 .3.847.967.967 0 0 0 .25.85L.224.852.213.853A.027.027 0 0 1 .191.847.438.438 0 0 1 .098.735a.525.525 0 0 1-.065-.19L.032.529V.517a.35.35 0 0 1 0-.052L.034.433.036.421A.288.288 0 0 1 .04.397.173.173 0 0 1 .05.36c0-.003 0-.006.002-.01A.133.133 0 0 0 .057.336L.06.33A.293.293 0 0 1 .084.276L.09.266A.14.14 0 0 1 .1.246L.106.24A.288.288 0 0 1 .142.19a.227.227 0 0 0 .01-.01.17.17 0 0 1 .037-.036A.036.036 0 0 1 .202.14h.023L.228.138h.008L.248.136H.26A.104.104 0 0 0 .28.134a.01.01 0 0 1 .004 0h.003L.289.133h.006A.18.18 0 0 1 .313.131h.011L.327.13H.33L.348.128h.009L.364.127h.004L.37.126h.011L.388.125a.01.01 0 0 0 .003 0h.004z" fill="#7483AB">');function p(s){let i,p;let{baseStyle:f}=l.default,m={small:"24px",normal:"32px",large:"40px"},L=(0,t.mergeProps)({size:32},s),[y,v]=(0,t.splitProps)(L,["class","css","src","alt","size","color","username"]),[g,A]=(0,t.createSignal)(1),C=(0,t.createMemo)(()=>{let e=m[y.size]||`${y.size}px`;return(0,r.css)`
+"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"),r=require("@moneko/css"),s=require("solid-element"),a=i(require("../img")),n=i(require("../theme")),l=require("./style");function i(e){return e&&e.__esModule?e:{default:e}}const o=(0,e.template)("<style> "),c=(0,e.template)("<style>"),u=(0,e.template)("<span>"),d=(0,e.template)("<div>"),h=(0,e.template)('<svg viewBox="0 0 1 1" aria-hidden="true" overflow="hidden"><defs><clipPath id="clipPathAvatar" clipPathUnits="objectBoundingBox"><path d="M.395.126H.4A.016.016 0 0 1 .418.14v.002L.42.158a.39.39 0 0 0 .019.12L.44.284l.005.01c.011.026.034.05.05.053h.011a.084.084 0 0 0 .016-.01.115.115 0 0 0 .025-.03.259.259 0 0 0 .033-.14.02.02 0 0 0 0-.008.03.03 0 0 1 0-.01V.145L.584.136h.001C.583.134.591.127.594.126h.024L.63.127l.013.001h.01a.123.123 0 0 0 .021.003h.003L.7.133a.591.591 0 0 1 .046.004L.77.139h.013l.006.002h.009c.01 0 .019.006.036.023a.24.24 0 0 1 .018.02l.004.004a.49.49 0 0 1 .063.094L.927.3a.032.032 0 0 0 .004.007L.932.31l.004.007.007.022a.141.141 0 0 0 .004.008.34.34 0 0 0 .011.037l.002.01A.463.463 0 0 1 .969.46v.013A.358.358 0 0 1 .963.58a.537.537 0 0 1-.064.16.378.378 0 0 1-.096.111.042.042 0 0 1-.014.002L.762.851.732.85A1.092 1.092 0 0 0 .667.845C.641.842.636.84.63.832L.626.825C.624.822.628.814.636.8a.129.129 0 0 0 .01-.022.02.02 0 0 0 .001-.003V.773a.143.143 0 0 0 .009-.02A.149.149 0 0 1 .66.738.028.028 0 0 0 .662.73V.726a.243.243 0 0 1-.106.07.177.177 0 0 1-.121-.003A.25.25 0 0 1 .35.736C.34.726.338.724.337.727A.095.095 0 0 0 .344.75v.003s.001 0 0 0a.316.316 0 0 0 .024.053L.37.811c.005.01.005.013.001.02C.367.837.36.84.345.842A.462.462 0 0 1 .3.847.967.967 0 0 0 .25.85L.224.852.213.853A.027.027 0 0 1 .191.847.438.438 0 0 1 .098.735a.525.525 0 0 1-.065-.19L.032.529V.517a.35.35 0 0 1 0-.052L.034.433.036.421A.288.288 0 0 1 .04.397.173.173 0 0 1 .05.36c0-.003 0-.006.002-.01A.133.133 0 0 0 .057.336L.06.33A.293.293 0 0 1 .084.276L.09.266A.14.14 0 0 1 .1.246L.106.24A.288.288 0 0 1 .142.19a.227.227 0 0 0 .01-.01.17.17 0 0 1 .037-.036A.036.036 0 0 1 .202.14h.023L.228.138h.008L.248.136H.26A.104.104 0 0 0 .28.134a.01.01 0 0 1 .004 0h.003L.289.133h.006A.18.18 0 0 1 .313.131h.011L.327.13H.33L.348.128h.009L.364.127h.004L.37.126h.011L.388.125a.01.01 0 0 0 .003 0h.004z" fill="#7483AB">');function p(s){let i,p;let{baseStyle:f}=n.default,m={small:"24px",normal:"32px",large:"40px"},L=(0,t.mergeProps)({size:32},s),[y,v]=(0,t.splitProps)(L,["class","css","src","alt","size","color","username"]),[g,A]=(0,t.createSignal)(1),C=(0,t.createMemo)(()=>{let e=m[y.size]||`${y.size}px`;return(0,r.css)`
       .avatar {
         --avatar-color: ${y.color};
 
         inline-size: ${e};
         block-size: ${e};
       }
-    `});return(0,t.createEffect)(()=>{p&&i&&p.clientWidth+6>i.clientWidth&&A((i.clientWidth-6)/p.clientWidth)}),[(()=>{let t=o(),r=t.firstChild;return(0,e.effect)(()=>r.data=f()),t})(),(()=>{let e=c();return e.textContent=a.style,e})(),(()=>{let t=o(),r=t.firstChild;return(0,e.effect)(()=>r.data=C()),t})(),(0,e.createComponent)(t.Show,{get when(){return y.css},get children(){let t=o(),s=t.firstChild;return(0,e.effect)(()=>s.data=(0,r.css)(y.css)),t}}),(()=>{let s=d(),a=i;return"function"==typeof a?(0,e.use)(a,s):i=s,(0,e.spread)(s,(0,e.mergeProps)({get class(){return(0,r.cx)("avatar",y.class)}},v),!1,!0),(0,e.insert)(s,(0,e.createComponent)(t.Switch,{get children(){return[(0,e.createComponent)(t.Match,{get when(){return"string"==typeof y.src},get children(){return(0,e.createComponent)(n.default,{get src(){return y.src},get alt(){return y.alt},style:{"z-index":9999}})}}),(0,e.createComponent)(t.Match,{get when(){return y.username},get children(){let t=u(),r=p;return"function"==typeof r?(0,e.use)(r,t):p=t,(0,e.insert)(t,()=>y.username),(0,e.effect)(()=>(g(),t.style.setProperty("transform",`scale(${g()})`))),t}})]}})),s})(),(()=>{let e=h();return e.style.setProperty("position","absolute"),e.style.setProperty("width","0"),e.style.setProperty("height","0"),e.style.setProperty("opacity","0"),e.style.setProperty("pointer-events","none"),e})()]}(0,s.customElement)("n-avatar",{css:void 0,size:void 0,src:void 0,alt:void 0,username:void 0,color:void 0,class:void 0},p);const f=p;
+    `});return(0,t.createEffect)(()=>{p&&i&&p.clientWidth+6>i.clientWidth&&A((i.clientWidth-6)/p.clientWidth)}),[(()=>{let t=o(),r=t.firstChild;return(0,e.effect)(()=>r.data=f()),t})(),(()=>{let e=c();return e.textContent=l.style,e})(),(()=>{let t=o(),r=t.firstChild;return(0,e.effect)(()=>r.data=C()),t})(),(0,e.createComponent)(t.Show,{get when(){return y.css},get children(){let t=o(),s=t.firstChild;return(0,e.effect)(()=>s.data=(0,r.css)(y.css)),t}}),(()=>{let s=d(),n=i;return"function"==typeof n?(0,e.use)(n,s):i=s,(0,e.spread)(s,(0,e.mergeProps)({get class(){return(0,r.cx)("avatar",y.class)}},v),!1,!0),(0,e.insert)(s,(0,e.createComponent)(t.Switch,{get children(){return[(0,e.createComponent)(t.Match,{get when(){return"string"==typeof y.src},get children(){return(0,e.createComponent)(a.default,{get src(){return y.src},get alt(){return y.alt},style:{"z-index":9999}})}}),(0,e.createComponent)(t.Match,{get when(){return y.username},get children(){let t=u(),r=p;return"function"==typeof r?(0,e.use)(r,t):p=t,(0,e.insert)(t,()=>y.username),(0,e.effect)(()=>(g(),t.style.setProperty("transform",`scale(${g()})`))),t}})]}})),s})(),(()=>{let e=h();return e.style.setProperty("position","absolute"),e.style.setProperty("width","0"),e.style.setProperty("height","0"),e.style.setProperty("opacity","0"),e.style.setProperty("pointer-events","none"),e})()]}(0,s.customElement)("n-avatar",{css:void 0,size:void 0,src:void 0,alt:void 0,username:void 0,color:void 0,class:void 0},p);const f=p;
 //# sourceMappingURL=index.js.map

package/lib/avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/avatar/index.tsx"],"sourcesContent":["import {\n  Match,\n  Show,\n  Switch,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  splitProps,\n} from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport Img from '../img';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement } from '../index';\n\nexport interface AvatarProps {\n  /** 头像 */\n  src?: string;\n  /** 替代文本 */\n  alt?: string;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: number | BasicConfig['size'];\n  /** 用户名 */\n  username?: string;\n  /** 背景颜色 */\n  color?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n}\nexport type AvatarElement = CustomElement<AvatarProps>;\n\nfunction Avatar(_: AvatarProps) {\n  const { baseStyle } = theme;\n  const avatarSize: Record<string, string> = {\n    small: '24px',\n    normal: '32px',\n    large: '40px',\n  };\n\n  const props = mergeProps({ size: 32 }, _);\n  const [local, other] = splitProps(props, [\n    'class',\n    'css',\n    'src',\n    'alt',\n    'size',\n    'color',\n    'username',\n  ]);\n  let box: HTMLDivElement | undefined;\n  let label: HTMLSpanElement | undefined;\n  const [scale, setScale] = createSignal(1);\n\n  const _style = createMemo(() => {\n    const size = avatarSize[local.size] || `${local.size}px`;\n\n    return css`\n      .avatar {\n        --avatar-color: ${local.color};\n\n        inline-size: ${size};\n        block-size: ${size};\n      }\n    `;\n  });\n\n  createEffect(() => {\n    if (label && box) {\n      if (label.clientWidth + 6 > box.clientWidth) {\n        setScale((box.clientWidth - 6) / label.clientWidth);\n      }\n    }\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <style textContent={_style()} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <div ref={box} class={cx('avatar', local.class)} {...other}>\n        <Switch>\n          <Match when={typeof local.src === 'string'}>\n            <Img src={local.src} alt={local.alt} style={{ 'z-index': 9999 }} />\n          </Match>\n          <Match when={local.username}>\n            <span ref={label} style={{ transform: `scale(${scale()})` }}>\n              {local.username}\n            </span>\n          </Match>\n        </Switch>\n      </div>\n      <svg\n        viewBox=\"0 0 1 1\"\n        aria-hidden=\"true\"\n        style={{\n          position: 'absolute',\n          width: '0',\n          height: '0',\n          opacity: 0,\n          'pointer-events': 'none',\n        }}\n        overflow=\"hidden\"\n      >\n        <defs>\n          <clipPath id=\"clipPathAvatar\" clipPathUnits=\"objectBoundingBox\">\n            <path\n              d=\"M.395.126H.4A.016.016 0 0 1 .418.14v.002L.42.158a.39.39 0 0 0 .019.12L.44.284l.005.01c.011.026.034.05.05.053h.011a.084.084 0 0 0 .016-.01.115.115 0 0 0 .025-.03.259.259 0 0 0 .033-.14.02.02 0 0 0 0-.008.03.03 0 0 1 0-.01V.145L.584.136h.001C.583.134.591.127.594.126h.024L.63.127l.013.001h.01a.123.123 0 0 0 .021.003h.003L.7.133a.591.591 0 0 1 .046.004L.77.139h.013l.006.002h.009c.01 0 .019.006.036.023a.24.24 0 0 1 .018.02l.004.004a.49.49 0 0 1 .063.094L.927.3a.032.032 0 0 0 .004.007L.932.31l.004.007.007.022a.141.141 0 0 0 .004.008.34.34 0 0 0 .011.037l.002.01A.463.463 0 0 1 .969.46v.013A.358.358 0 0 1 .963.58a.537.537 0 0 1-.064.16.378.378 0 0 1-.096.111.042.042 0 0 1-.014.002L.762.851.732.85A1.092 1.092 0 0 0 .667.845C.641.842.636.84.63.832L.626.825C.624.822.628.814.636.8a.129.129 0 0 0 .01-.022.02.02 0 0 0 .001-.003V.773a.143.143 0 0 0 .009-.02A.149.149 0 0 1 .66.738.028.028 0 0 0 .662.73V.726a.243.243 0 0 1-.106.07.177.177 0 0 1-.121-.003A.25.25 0 0 1 .35.736C.34.726.338.724.337.727A.095.095 0 0 0 .344.75v.003s.001 0 0 0a.316.316 0 0 0 .024.053L.37.811c.005.01.005.013.001.02C.367.837.36.84.345.842A.462.462 0 0 1 .3.847.967.967 0 0 0 .25.85L.224.852.213.853A.027.027 0 0 1 .191.847.438.438 0 0 1 .098.735a.525.525 0 0 1-.065-.19L.032.529V.517a.35.35 0 0 1 0-.052L.034.433.036.421A.288.288 0 0 1 .04.397.173.173 0 0 1 .05.36c0-.003 0-.006.002-.01A.133.133 0 0 0 .057.336L.06.33A.293.293 0 0 1 .084.276L.09.266A.14.14 0 0 1 .1.246L.106.24A.288.288 0 0 1 .142.19a.227.227 0 0 0 .01-.01.17.17 0 0 1 .037-.036A.036.036 0 0 1 .202.14h.023L.228.138h.008L.248.136H.26A.104.104 0 0 0 .28.134a.01.01 0 0 1 .004 0h.003L.289.133h.006A.18.18 0 0 1 .313.131h.011L.327.13H.33L.348.128h.009L.364.127h.004L.37.126h.011L.388.125a.01.01 0 0 0 .003 0h.004z\"\n              fill=\"#7483AB\"\n            />\n          </clipPath>\n        </defs>\n      </svg>\n    </>\n  );\n}\n\ncustomElement<AvatarProps>(\n  'n-avatar',\n  {\n    css: void 0,\n    size: void 0,\n    src: void 0,\n    alt: void 0,\n    username: void 0,\n    color: void 0,\n    class: void 0,\n  },\n  Avatar,\n);\nexport default Avatar;\n"],"names":["Avatar","_","box","label","baseStyle","theme","avatarSize","small","normal","large","props","mergeProps","size","local","other","splitProps","scale","setScale","createSignal","_style","createMemo","css","color","createEffect","clientWidth","style","Show","cx","class","Switch","Match","src","Img","alt","username","customElement"],"mappings":"kGA0IA,+CAAA,+CAjIO,sBACiB,yBACM,2BACR,uBACN,uBACE,6jEAuBlB,SAASA,EAAOC,CAAc,MAkBxBC,EACAC,EAlBJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CACrBC,EAAqC,CACzCC,MAAO,OACPC,OAAQ,OACRC,MAAO,MACT,EAEMC,EAAQC,GAAAA,YAAU,EAAC,CAAEC,KAAM,EAAG,EAAGX,GACjC,CAACY,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACL,EAAO,CACvC,QACA,MACA,MACA,MACA,OACA,QACA,WACD,EAGK,CAACM,EAAOC,EAAS,CAAGC,GAAAA,cAAY,EAAC,GAEjCC,EAASC,GAAAA,YAAU,EAAC,KACxB,IAAMR,EAAON,CAAU,CAACO,EAAMD,IAAI,CAAC,EAAI,CAAC,EAAEC,EAAMD,IAAI,CAAC,EAAE,CAAC,CAExD,MAAOS,GAAAA,KAAG,CAAA,CAAC;;wBAES,EAAER,EAAMS,KAAK,CAAC;;qBAEjB,EAAEV,EAAK;oBACR,EAAEA,EAAK;;IAEvB,CAAC,AACH,GAUA,MARAW,GAAAA,cAAY,EAAC,KACPpB,GAASD,GACPC,EAAMqB,WAAW,CAAG,EAAItB,EAAIsB,WAAW,EACzCP,EAAS,AAACf,CAAAA,EAAIsB,WAAW,CAAG,CAAA,EAAKrB,EAAMqB,WAAW,CAGxD,iEAIwBpB,gDACAqB,OAAK,oEACLN,iCACnBO,MAAI,oBAAOb,EAAMQ,GAAG,wEACCA,GAAAA,KAAG,EAACR,EAAMQ,GAAG,0BAEzBnB,4CAAAA,uDAAYyB,GAAAA,IAAE,EAAC,SAAUd,EAAMe,KAAK,IAAOd,+CAClDe,QAAM,8CACJC,OAAK,mBAAO,AAAqB,UAArB,OAAOjB,EAAMkB,GAAG,6CAC1BC,SAAG,mBAAMnB,EAAMkB,GAAG,mBAAOlB,EAAMoB,GAAG,QAAS,CAAE,UAAW,IAAK,6BAE/DH,OAAK,oBAAOjB,EAAMqB,QAAQ,6BACd/B,4CAAAA,uBACRU,EAAMqB,QAAQ,oBAD8BlB,oCAAT,CAAC,MAAM,EAAEA,IAAQ,CAAC,CAAC,+OA6BrE,CAEAmB,GAAAA,eAAa,EACX,WACA,CACEd,IAAK,KAAK,EACVT,KAAM,KAAK,EACXmB,IAAK,KAAK,EACVE,IAAK,KAAK,EACVC,SAAU,KAAK,EACfZ,MAAO,KAAK,EACZM,MAAO,KAAK,CACd,EACA5B,SAEF,EAAeA"}
+{"version":3,"sources":["../../components/avatar/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  Match,\n  mergeProps,\n  Show,\n  splitProps,\n  Switch,\n} from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport Img from '../img';\nimport type { BasicConfig, CustomElement } from '../index';\nimport theme from '../theme';\n\nimport { style } from './style';\n\nexport interface AvatarProps {\n  /** 头像 */\n  src?: string;\n  /** 替代文本 */\n  alt?: string;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: number | BasicConfig['size'];\n  /** 用户名 */\n  username?: string;\n  /** 背景颜色 */\n  color?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n}\nexport type AvatarElement = CustomElement<AvatarProps>;\n\nfunction Avatar(_: AvatarProps) {\n  const { baseStyle } = theme;\n  const avatarSize: Record<string, string> = {\n    small: '24px',\n    normal: '32px',\n    large: '40px',\n  };\n\n  const props = mergeProps({ size: 32 }, _);\n  const [local, other] = splitProps(props, [\n    'class',\n    'css',\n    'src',\n    'alt',\n    'size',\n    'color',\n    'username',\n  ]);\n  let box: HTMLDivElement | undefined;\n  let label: HTMLSpanElement | undefined;\n  const [scale, setScale] = createSignal(1);\n\n  const _style = createMemo(() => {\n    const size = avatarSize[local.size] || `${local.size}px`;\n\n    return css`\n      .avatar {\n        --avatar-color: ${local.color};\n\n        inline-size: ${size};\n        block-size: ${size};\n      }\n    `;\n  });\n\n  createEffect(() => {\n    if (label && box) {\n      if (label.clientWidth + 6 > box.clientWidth) {\n        setScale((box.clientWidth - 6) / label.clientWidth);\n      }\n    }\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <style textContent={_style()} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <div ref={box} class={cx('avatar', local.class)} {...other}>\n        <Switch>\n          <Match when={typeof local.src === 'string'}>\n            <Img src={local.src} alt={local.alt} style={{ 'z-index': 9999 }} />\n          </Match>\n          <Match when={local.username}>\n            <span ref={label} style={{ transform: `scale(${scale()})` }}>\n              {local.username}\n            </span>\n          </Match>\n        </Switch>\n      </div>\n      <svg\n        viewBox=\"0 0 1 1\"\n        aria-hidden=\"true\"\n        style={{\n          position: 'absolute',\n          width: '0',\n          height: '0',\n          opacity: 0,\n          'pointer-events': 'none',\n        }}\n        overflow=\"hidden\"\n      >\n        <defs>\n          <clipPath id=\"clipPathAvatar\" clipPathUnits=\"objectBoundingBox\">\n            <path\n              d=\"M.395.126H.4A.016.016 0 0 1 .418.14v.002L.42.158a.39.39 0 0 0 .019.12L.44.284l.005.01c.011.026.034.05.05.053h.011a.084.084 0 0 0 .016-.01.115.115 0 0 0 .025-.03.259.259 0 0 0 .033-.14.02.02 0 0 0 0-.008.03.03 0 0 1 0-.01V.145L.584.136h.001C.583.134.591.127.594.126h.024L.63.127l.013.001h.01a.123.123 0 0 0 .021.003h.003L.7.133a.591.591 0 0 1 .046.004L.77.139h.013l.006.002h.009c.01 0 .019.006.036.023a.24.24 0 0 1 .018.02l.004.004a.49.49 0 0 1 .063.094L.927.3a.032.032 0 0 0 .004.007L.932.31l.004.007.007.022a.141.141 0 0 0 .004.008.34.34 0 0 0 .011.037l.002.01A.463.463 0 0 1 .969.46v.013A.358.358 0 0 1 .963.58a.537.537 0 0 1-.064.16.378.378 0 0 1-.096.111.042.042 0 0 1-.014.002L.762.851.732.85A1.092 1.092 0 0 0 .667.845C.641.842.636.84.63.832L.626.825C.624.822.628.814.636.8a.129.129 0 0 0 .01-.022.02.02 0 0 0 .001-.003V.773a.143.143 0 0 0 .009-.02A.149.149 0 0 1 .66.738.028.028 0 0 0 .662.73V.726a.243.243 0 0 1-.106.07.177.177 0 0 1-.121-.003A.25.25 0 0 1 .35.736C.34.726.338.724.337.727A.095.095 0 0 0 .344.75v.003s.001 0 0 0a.316.316 0 0 0 .024.053L.37.811c.005.01.005.013.001.02C.367.837.36.84.345.842A.462.462 0 0 1 .3.847.967.967 0 0 0 .25.85L.224.852.213.853A.027.027 0 0 1 .191.847.438.438 0 0 1 .098.735a.525.525 0 0 1-.065-.19L.032.529V.517a.35.35 0 0 1 0-.052L.034.433.036.421A.288.288 0 0 1 .04.397.173.173 0 0 1 .05.36c0-.003 0-.006.002-.01A.133.133 0 0 0 .057.336L.06.33A.293.293 0 0 1 .084.276L.09.266A.14.14 0 0 1 .1.246L.106.24A.288.288 0 0 1 .142.19a.227.227 0 0 0 .01-.01.17.17 0 0 1 .037-.036A.036.036 0 0 1 .202.14h.023L.228.138h.008L.248.136H.26A.104.104 0 0 0 .28.134a.01.01 0 0 1 .004 0h.003L.289.133h.006A.18.18 0 0 1 .313.131h.011L.327.13H.33L.348.128h.009L.364.127h.004L.37.126h.011L.388.125a.01.01 0 0 0 .003 0h.004z\"\n              fill=\"#7483AB\"\n            />\n          </clipPath>\n        </defs>\n      </svg>\n    </>\n  );\n}\n\ncustomElement<AvatarProps>(\n  'n-avatar',\n  {\n    css: void 0,\n    size: void 0,\n    src: void 0,\n    alt: void 0,\n    username: void 0,\n    color: void 0,\n    class: void 0,\n  },\n  Avatar,\n);\nexport default Avatar;\n"],"names":["Avatar","_","box","label","baseStyle","theme","avatarSize","small","normal","large","props","mergeProps","size","local","other","splitProps","scale","setScale","createSignal","_style","createMemo","css","color","createEffect","clientWidth","style","Show","cx","class","Switch","Match","src","Img","alt","username","customElement"],"mappings":"kGA4IA,+CAAA,+CAnIO,sBACiB,yBACM,6BAEd,uBAEE,uBAEI,2jEAsBtB,SAASA,EAAOC,CAAc,MAkBxBC,EACAC,EAlBJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CACrBC,EAAqC,CACzCC,MAAO,OACPC,OAAQ,OACRC,MAAO,MACT,EAEMC,EAAQC,GAAAA,YAAU,EAAC,CAAEC,KAAM,EAAG,EAAGX,GACjC,CAACY,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACL,EAAO,CACvC,QACA,MACA,MACA,MACA,OACA,QACA,WACD,EAGK,CAACM,EAAOC,EAAS,CAAGC,GAAAA,cAAY,EAAC,GAEjCC,EAASC,GAAAA,YAAU,EAAC,KACxB,IAAMR,EAAON,CAAU,CAACO,EAAMD,IAAI,CAAC,EAAI,CAAC,EAAEC,EAAMD,IAAI,CAAC,EAAE,CAAC,CAExD,MAAOS,GAAAA,KAAG,CAAA,CAAC;;wBAES,EAAER,EAAMS,KAAK,CAAC;;qBAEjB,EAAEV,EAAK;oBACR,EAAEA,EAAK;;IAEvB,CAAC,AACH,GAUA,MARAW,GAAAA,cAAY,EAAC,KACPpB,GAASD,GACPC,EAAMqB,WAAW,CAAG,EAAItB,EAAIsB,WAAW,EACzCP,EAAS,AAACf,CAAAA,EAAIsB,WAAW,CAAG,CAAA,EAAKrB,EAAMqB,WAAW,CAGxD,iEAIwBpB,gDACAqB,OAAK,oEACLN,iCACnBO,MAAI,oBAAOb,EAAMQ,GAAG,wEACCA,GAAAA,KAAG,EAACR,EAAMQ,GAAG,0BAEzBnB,4CAAAA,uDAAYyB,GAAAA,IAAE,EAAC,SAAUd,EAAMe,KAAK,IAAOd,+CAClDe,QAAM,8CACJC,OAAK,mBAAO,AAAqB,UAArB,OAAOjB,EAAMkB,GAAG,6CAC1BC,SAAG,mBAAMnB,EAAMkB,GAAG,mBAAOlB,EAAMoB,GAAG,QAAS,CAAE,UAAW,IAAK,6BAE/DH,OAAK,oBAAOjB,EAAMqB,QAAQ,6BACd/B,4CAAAA,uBACRU,EAAMqB,QAAQ,oBAD8BlB,oCAAT,CAAC,MAAM,EAAEA,IAAQ,CAAC,CAAC,+OA6BrE,CAEAmB,GAAAA,eAAa,EACX,WACA,CACEd,IAAK,KAAK,EACVT,KAAM,KAAK,EACXmB,IAAK,KAAK,EACVE,IAAK,KAAK,EACVC,SAAU,KAAK,EACfZ,MAAO,KAAK,EACZM,MAAO,KAAK,CACd,EACA5B,SAEF,EAAeA"}

package/lib/avatar/style.js

@@ -1,4 +1,4 @@
-"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"style",{enumerable:!0,get:function(){return n}});const t=require("@moneko/css"),i=(e=require("./favicon.svg"))&&e.__esModule?e:{default:e},r=`data:image/svg+xml;base64,${window.btoa(decodeURIComponent(i.default.replace("data:image/svg+xml,","")))}`,n=(0,t.css)`
+"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"style",{enumerable:!0,get:function(){return r}});const t=require("@moneko/css"),i=(e=require("./favicon.svg"))&&e.__esModule?e:{default:e},r=(0,t.css)`
   .avatar {
     position: relative;
     display: inline-flex;
@@ -33,7 +33,7 @@
     }
 
     &::after {
-      background: url(${r}) no-repeat center/contain;
+      background: url(${i.default}) no-repeat center/contain;
     }
 
     &:hover {

package/lib/avatar/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/avatar/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\nimport favicon from './favicon.svg';\n\nconst faviconBg = `data:image/svg+xml;base64,${window.btoa(\n  decodeURIComponent(favicon.replace('data:image/svg+xml,', '')),\n)}`;\n\nexport const style = css`\n  .avatar {\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    inline-size: 32px;\n    block-size: 32px;\n    transition: transform var(--transition-duration);\n    cursor: pointer;\n    user-select: none;\n    animation: avatar-morph-effect 8s var(--transition-timing-function) infinite;\n    background-image: linear-gradient(\n      45deg,\n      var(--primary-outline) 0%,\n      var(--success-outline) 100%\n    );\n\n    &::before,\n    &::after {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      display: block;\n      inline-size: 100%;\n      block-size: 100%;\n      content: '';\n      pointer-events: none;\n    }\n\n    &::before {\n      clip-path: url('#clipPathAvatar');\n    }\n\n    &::after {\n      background: url(${faviconBg}) no-repeat center/contain;\n    }\n\n    &:hover {\n      transform: scale(1.2);\n    }\n\n    img {\n      position: absolute;\n      inset-inline-start: 0;\n      inline-size: 100%;\n      block-size: 100%;\n      clip-path: url('#clipPathAvatar');\n    }\n  }\n\n  @keyframes avatar-morph-effect {\n    0% {\n      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n    }\n\n    50% {\n      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;\n    }\n\n    100% {\n      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n    }\n  }\n`;\n"],"names":["style","faviconBg","window","btoa","decodeURIComponent","favicon","replace","css"],"mappings":"wGAOaA,6CAAAA,qBAPO,4BACA,8CAEdC,EAAY,CAAC,0BAA0B,EAAEC,OAAOC,IAAI,CACxDC,mBAAmBC,SAAO,CAACC,OAAO,CAAC,sBAAuB,MAC1D,CAAC,CAEUN,EAAQO,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAmCH,EAAEN,EAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BlC,CAAC"}
+{"version":3,"sources":["../../components/avatar/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nimport favicon from './favicon.svg';\n\nexport const style = css`\n  .avatar {\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    inline-size: 32px;\n    block-size: 32px;\n    transition: transform var(--transition-duration);\n    cursor: pointer;\n    user-select: none;\n    animation: avatar-morph-effect 8s var(--transition-timing-function) infinite;\n    background-image: linear-gradient(\n      45deg,\n      var(--primary-outline) 0%,\n      var(--success-outline) 100%\n    );\n\n    &::before,\n    &::after {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      display: block;\n      inline-size: 100%;\n      block-size: 100%;\n      content: '';\n      pointer-events: none;\n    }\n\n    &::before {\n      clip-path: url('#clipPathAvatar');\n    }\n\n    &::after {\n      background: url(${favicon}) no-repeat center/contain;\n    }\n\n    &:hover {\n      transform: scale(1.2);\n    }\n\n    img {\n      position: absolute;\n      inset-inline-start: 0;\n      inline-size: 100%;\n      block-size: 100%;\n      clip-path: url('#clipPathAvatar');\n    }\n  }\n\n  @keyframes avatar-morph-effect {\n    0% {\n      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n    }\n\n    50% {\n      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;\n    }\n\n    100% {\n      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n    }\n  }\n`;\n"],"names":["style","css","favicon"],"mappings":"wGAIaA,6CAAAA,qBAJO,4BAEA,8CAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAmCH,EAAEC,SAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BhC,CAAC"}

package/lib/back-top/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 通用
+title: 回到顶部
+subtitle: n-back-top
+icon: ⇪
+---
+
+# BackTop 回到顶部
+
+> 返回页面顶部的操作按钮。

package/lib/back-top/examples/basic.md

@@ -0,0 +1,19 @@
+---
+title: 最简单的用法
+description: 最简单的用法
+order: 1
+---
+
+```html
+<div style="width:100%;">
+  <n-back-top css=":host{float:right;}"></n-back-top>
+  根据 window 滚动浮现在
+</div>
+```
+
+```jsx
+<div style={{ width: '100%' }}>
+  根据 window 滚动浮现在
+  <n-back-top css=":host{float:right;}" />
+</div>
+```

package/lib/back-top/examples/mount.md

@@ -0,0 +1,36 @@
+---
+title: 指定挂载位置
+description: 指定返回顶部的按钮挂载位置, 默认为 n-back-top 所在位置的 shadowRoot 中
+order: 2
+---
+
+```html
+<p>这里返回顶部的按钮挂载到 body 上, 根据 window 滚动浮现在左下角</p>
+<n-back-top></n-back-top>
+<script>
+  var el = container.querySelector('n-back-top');
+
+  el.mount = document.body;
+  el.css = `.back-top {
+        position: fixed;
+        right: unset;
+        left: 300px;
+      }`;
+</script>
+```
+
+```jsx
+<p>
+  这里返回顶部的按钮挂载到 body 上, 根据 window 滚动浮现在左下角
+  <n-back-top
+    css={`
+      .back-top {
+        position: fixed;
+        right: unset;
+        left: 300px;
+      }
+    `}
+    mount={() => document.body}
+  />
+</p>
+```

package/lib/back-top/examples/target.md

@@ -0,0 +1,46 @@
+---
+title: 指定滚动容器
+description: 通过 `target` 属性设置滚动容器, 通过 `visibility-height` 属性设置容器滚动到 200 时出现返回顶部
+order: 3
+---
+
+```html
+<div
+  id="custom-back-top-target"
+  style="height: 200px; width: 100%; overflow: auto; position: relative;"
+>
+  <div>
+    <p style="height: 100px;">1</p>
+    <p style="height: 100px;">2</p>
+    <p style="height: 100px;">3</p>
+    <p style="height: 100px;">4</p>
+  </div>
+  <n-back-top visibility-height="200"></n-back-top>
+</div>
+<script>
+  const el = container.querySelector('n-back-top');
+
+  el.target = container.getElementById('custom-back-top-target');
+</script>
+```
+
+```jsx
+let el: HTMLDivElement;
+
+render(
+  <div
+    ref={(e) => {
+      el = e;
+    }}
+    style={{ height: '200px', width: '100%', overflow: 'auto', position: 'relative' }}
+  >
+    <div>
+      <p style="height: 100px;">1</p>
+      <p style="height: 100px;">2</p>
+      <p style="height: 100px;">3</p>
+      <p style="height: 100px;">4</p>
+    </div>
+    <n-back-top visibility-height={200} target={() => el} />
+  </div>
+);
+```

package/lib/back-top/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return p}});const e=require("solid-js/web"),t=require("solid-js"),r=c(require("@moneko/common/lib/getMaxZindex")),n=c(require("@moneko/common/lib/getScrollTop")),o=c(require("@moneko/common/lib/isFunction")),i=require("@moneko/css"),s=require("solid-element"),l=require("./style"),u=c(require("../theme"));function c(e){return e&&e.__esModule?e:{default:e}}const a=(0,e.template)("<style> "),d=(0,e.template)("<style>"),m=(0,e.template)("<div>");function g(s){let{baseStyle:c,isDark:g}=u.default,p=(0,t.mergeProps)({target:window,visibilityHeight:400},s),[f,b]=(0,t.splitProps)(p,["class","target","mount","css","visibilityHeight"]),[v,h]=(0,t.createSignal)(null),y=(0,t.createMemo)(()=>(0,o.default)(f.target)?f.target():f.target),k=(0,t.createMemo)(()=>{let e=g()?"rgb(255 255 255 / 45%)":"var(--primary-border)";return`:host {--back-top-bg: ${e};}`});function q(){y()?.scrollTo({top:0,behavior:"smooth"})}function x(){!1===v()&&h(null)}function C(e){e.preventDefault();let t=0,r=0,o=y();o&&(t=(0,n.default)(o),r=o.offsetHeight||0);let i=t>r/3||t>f.visibilityHeight;return!!v()!==i&&h(i),!1}return(0,t.onMount)(()=>{y().addEventListener("scroll",C,!1)}),(0,t.onCleanup)(()=>{y().removeEventListener("scroll",C,!1)}),(0,e.createComponent)(t.Show,{get when(){return null!==v()},get children(){return(0,e.createComponent)(e.Portal,{useShadow:!0,get mount(){return f.mount},get children(){return[(()=>{let t=a(),r=t.firstChild;return(0,e.effect)(()=>r.data=c()),t})(),(()=>{let t=a(),r=t.firstChild;return(0,e.effect)(()=>r.data=k()),t})(),(()=>{let e=d();return e.textContent=l.style,e})(),(0,e.createComponent)(t.Show,{get when(){return f.css},get children(){let t=a(),r=t.firstChild;return(0,e.effect)(()=>r.data=(0,i.css)(f.css)),t}}),(()=>{let t=m();return(0,e.addEventListener)(t,"click",q,!0),(0,e.addEventListener)(t,"animationend",x),(0,e.spread)(t,(0,e.mergeProps)({get class(){return(0,i.cx)("back-top",f.class)},get classList(){return{"back-top-out":!1===v()}},get style(){return{"z-index":(0,r.default)().toString()}}},b),!1,!1),t})()]}})}})}(0,s.customElement)("n-back-top",{class:void 0,css:void 0,visibilityHeight:void 0,mount:void 0,target:void 0},(r,n)=>{let o=n.element;o.mount||(o.style.position="sticky",o.style.bottom="24px",o.style.right="24px",o.style.display="block",o.style.pointerEvents="none");let i=(0,t.mergeProps)({css:o.css,visibilityHeight:o.visibilityHeight,mount:o.renderRoot,target:o.target},r);return(0,t.createEffect)(()=>{o.removeAttribute("css")}),(0,e.createComponent)(g,i)});const p=g;(0,e.delegateEvents)(["click"]);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return p}});const e=require("solid-js/web"),t=require("solid-js"),r=c(require("@moneko/common/lib/getMaxZindex")),n=c(require("@moneko/common/lib/getScrollTop")),o=c(require("@moneko/common/lib/isFunction")),i=require("@moneko/css"),s=require("solid-element"),l=c(require("../theme")),u=require("./style");function c(e){return e&&e.__esModule?e:{default:e}}const a=(0,e.template)("<style> "),d=(0,e.template)("<style>"),m=(0,e.template)("<div>");function g(s){let{baseStyle:c,isDark:g}=l.default,p=(0,t.mergeProps)({target:window,visibilityHeight:400},s),[f,b]=(0,t.splitProps)(p,["class","target","mount","css","visibilityHeight"]),[v,h]=(0,t.createSignal)(null),y=(0,t.createMemo)(()=>(0,o.default)(f.target)?f.target():f.target),k=(0,t.createMemo)(()=>{let e=g()?"rgb(255 255 255 / 45%)":"var(--primary-border)";return`:host {--back-top-bg: ${e};}`});function q(){y()?.scrollTo({top:0,behavior:"smooth"})}function x(){!1===v()&&h(null)}function C(e){e.preventDefault();let t=0,r=0,o=y();o&&(t=(0,n.default)(o),r=o.offsetHeight||0);let i=t>r/3||t>f.visibilityHeight;return!!v()!==i&&h(i),!1}return(0,t.onMount)(()=>{y()?.addEventListener("scroll",C,!1)}),(0,t.onCleanup)(()=>{y()?.removeEventListener("scroll",C,!1)}),(0,e.createComponent)(t.Show,{get when(){return null!==v()},get children(){return(0,e.createComponent)(e.Portal,{useShadow:!0,get mount(){return f.mount},get children(){return[(()=>{let t=a(),r=t.firstChild;return(0,e.effect)(()=>r.data=c()),t})(),(()=>{let t=a(),r=t.firstChild;return(0,e.effect)(()=>r.data=k()),t})(),(()=>{let e=d();return e.textContent=u.style,e})(),(0,e.createComponent)(t.Show,{get when(){return f.css},get children(){let t=a(),r=t.firstChild;return(0,e.effect)(()=>r.data=(0,i.css)(f.css)),t}}),(()=>{let t=m();return(0,e.addEventListener)(t,"click",q,!0),(0,e.addEventListener)(t,"animationend",x),(0,e.spread)(t,(0,e.mergeProps)({get class(){return(0,i.cx)("back-top",f.class)},get classList(){return{"back-top-out":!1===v()}},get style(){return{"z-index":(0,r.default)().toString()}}},b),!1,!1),t})()]}})}})}(0,s.customElement)("n-back-top",{class:void 0,css:void 0,visibilityHeight:void 0,mount:void 0,target:void 0},(r,n)=>{let o=n.element;o.mount||(o.style.position="sticky",o.style.bottom="24px",o.style.right="24px",o.style.display="block",o.style.pointerEvents="none");let i=(0,t.mergeProps)({css:o.css,visibilityHeight:o.visibilityHeight,mount:o.renderRoot,target:o.target},r);return(0,t.createEffect)(()=>{o.removeAttribute("css")}),(0,e.createComponent)(g,i)});const p=g;(0,e.delegateEvents)(["click"]);
 //# sourceMappingURL=index.js.map

package/lib/back-top/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/back-top/index.tsx"],"sourcesContent":["import {\n  Show,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  splitProps,\n} from 'solid-js';\nimport { getMaxZindex, getScrollTop, isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Portal } from 'solid-js/web';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface BackTopProps {\n  /** 设置需要监听其滚动事件的元素\n   * @default window\n   */\n  target?: HTMLElement | (() => HTMLElement);\n  /** 挂载到指定的元素\n   * @default body\n   */\n  mount?: HTMLElement;\n  /** 滚动高度达到此参数值才出现 BackTop */\n  visibilityHeight?: number;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n}\n\nfunction BackTop(_: BackTopProps) {\n  const { baseStyle, isDark } = theme;\n  const props = mergeProps({ target: window as unknown as HTMLElement, visibilityHeight: 400 }, _);\n  const [local, other] = splitProps(props, ['class', 'target', 'mount', 'css', 'visibilityHeight']);\n  const [show, setShow] = createSignal<boolean | null>(null);\n  const target = createMemo(() => (isFunction(local.target) ? local.target() : local.target));\n\n  const themeStyle = createMemo(() => {\n    const bg = isDark() ? 'rgb(255 255 255 / 45%)' : 'var(--primary-border)';\n\n    return `:host {--back-top-bg: ${bg};}`;\n  });\n\n  function handleBackTop() {\n    target()?.scrollTo({\n      top: 0,\n      behavior: 'smooth',\n    });\n  }\n  function exit() {\n    if (show() === false) {\n      setShow(null);\n    }\n  }\n  function handleScrollY(e: Event) {\n    e.preventDefault();\n    let scrollTop = 0;\n    let offsetHeight = 0;\n    const _target = target();\n\n    if (_target) {\n      scrollTop = getScrollTop(_target);\n      offsetHeight = _target.offsetHeight || 0;\n    }\n    const nextShow = scrollTop > offsetHeight / 3 || scrollTop > local.visibilityHeight;\n\n    if (Boolean(show()) !== nextShow) {\n      setShow(nextShow);\n    }\n    return false;\n  }\n\n  onMount(() => {\n    target().addEventListener('scroll', handleScrollY, false);\n  });\n  onCleanup(() => {\n    target().removeEventListener('scroll', handleScrollY, false);\n  });\n  return (\n    <Show when={show() !== null}>\n      <Portal useShadow mount={local.mount}>\n        <style textContent={baseStyle()} />\n        <style textContent={themeStyle()} />\n        <style textContent={style} />\n        <Show when={local.css}>\n          <style textContent={css(local.css)} />\n        </Show>\n        <div\n          onAnimationEnd={exit}\n          class={cx('back-top', local.class)}\n          classList={{\n            'back-top-out': show() === false,\n          }}\n          onClick={handleBackTop}\n          style={{ 'z-index': getMaxZindex().toString() }}\n          {...other}\n        />\n      </Portal>\n    </Show>\n  );\n}\n\nexport type BackTopElement = CustomElement<BackTopProps>;\n\ncustomElement<BackTopProps>(\n  'n-back-top',\n  {\n    class: void 0,\n    css: void 0,\n    visibilityHeight: void 0,\n    mount: void 0,\n    target: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n\n    if (!el.mount) {\n      el.style.position = 'sticky';\n      el.style.bottom = '24px';\n      el.style.right = '24px';\n      el.style.display = 'block';\n      el.style.pointerEvents = 'none';\n    }\n    const props = mergeProps(\n      {\n        css: el.css,\n        visibilityHeight: el.visibilityHeight,\n        mount: el.renderRoot as HTMLElement,\n        target: el.target,\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('css');\n    });\n    return <BackTop {...props} />;\n  },\n);\nexport default BackTop;\n"],"names":["BackTop","_","baseStyle","isDark","theme","props","mergeProps","target","window","visibilityHeight","local","other","splitProps","show","setShow","createSignal","createMemo","isFunction","themeStyle","bg","handleBackTop","scrollTo","top","behavior","exit","handleScrollY","e","preventDefault","scrollTop","offsetHeight","_target","getScrollTop","nextShow","Boolean","onMount","addEventListener","onCleanup","removeEventListener","Show","Portal","mount","style","css","cx","class","getMaxZindex","toString","customElement","opt","el","element","position","bottom","right","display","pointerEvents","renderRoot","createEffect","removeAttribute"],"mappings":"kGAgJA,+CAAA,qBAnIuB,0BAJhB,wBACgD,gDAAA,gDAAA,4CAC/B,yBACM,2BAER,uBACJ,yJAoBlB,SAASA,EAAQC,CAAe,EAC9B,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGC,SAAK,CAC7BC,EAAQC,GAAAA,YAAU,EAAC,CAAEC,OAAQC,OAAkCC,iBAAkB,GAAI,EAAGR,GACxF,CAACS,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACP,EAAO,CAAC,QAAS,SAAU,QAAS,MAAO,mBAAmB,EAC1F,CAACQ,EAAMC,EAAQ,CAAGC,GAAAA,cAAY,EAAiB,MAC/CR,EAASS,GAAAA,YAAU,EAAC,IAAOC,GAAAA,SAAU,EAACP,EAAMH,MAAM,EAAIG,EAAMH,MAAM,GAAKG,EAAMH,MAAM,EAEnFW,EAAaF,GAAAA,YAAU,EAAC,KAC5B,IAAMG,EAAKhB,IAAW,yBAA2B,wBAEjD,MAAO,CAAC,sBAAsB,EAAEgB,EAAG,EAAE,CAAC,AACxC,GAEA,SAASC,IACPb,KAAUc,SAAS,CACjBC,IAAK,EACLC,SAAU,QACZ,EACF,CACA,SAASC,IACQ,CAAA,IAAXX,KACFC,EAAQ,KAEZ,CACA,SAASW,EAAcC,CAAQ,EAC7BA,EAAEC,cAAc,GAChB,IAAIC,EAAY,EACZC,EAAe,EACbC,EAAUvB,IAEZuB,IACFF,EAAYG,GAAAA,SAAY,EAACD,GACzBD,EAAeC,EAAQD,YAAY,EAAI,GAEzC,IAAMG,EAAWJ,EAAYC,EAAe,GAAKD,EAAYlB,EAAMD,gBAAgB,CAKnF,MAHIwB,CAAAA,CAAQpB,MAAYmB,GACtBlB,EAAQkB,GAEH,CAAA,CACT,CAQA,MANAE,GAAAA,SAAO,EAAC,KACN3B,IAAS4B,gBAAgB,CAAC,SAAUV,EAAe,CAAA,EACrD,GACAW,GAAAA,WAAS,EAAC,KACR7B,IAAS8B,mBAAmB,CAAC,SAAUZ,EAAe,CAAA,EACxD,yBAEGa,MAAI,oBAAOzB,AAAW,OAAXA,gDACT0B,QAAM,kCAAkB7B,EAAM8B,KAAK,qFACdtC,wEACAgB,gDACAuB,OAAK,6BACxBH,MAAI,oBAAO5B,EAAMgC,GAAG,wEACCA,GAAAA,KAAG,EAAChC,EAAMgC,GAAG,+DAQxBtB,8CALOI,sDACTmB,GAAAA,IAAE,EAAC,WAAYjC,EAAMkC,KAAK,yBACtB,CACT,eAAgB/B,AAAW,CAAA,IAAXA,GAClB,qBAEO,CAAE,UAAWgC,GAAAA,SAAY,IAAGC,QAAQ,EAAG,IAC1CnC,sBAKd,CAIAoC,GAAAA,eAAa,EACX,aACA,CACEH,MAAO,KAAK,EACZF,IAAK,KAAK,EACVjC,iBAAkB,KAAK,EACvB+B,MAAO,KAAK,EACZjC,OAAQ,KAAK,CACf,EACA,CAACN,EAAG+C,KACF,IAAMC,EAAKD,EAAIE,OAAO,AAEjBD,CAAAA,EAAGT,KAAK,GACXS,EAAGR,KAAK,CAACU,QAAQ,CAAG,SACpBF,EAAGR,KAAK,CAACW,MAAM,CAAG,OAClBH,EAAGR,KAAK,CAACY,KAAK,CAAG,OACjBJ,EAAGR,KAAK,CAACa,OAAO,CAAG,QACnBL,EAAGR,KAAK,CAACc,aAAa,CAAG,QAE3B,IAAMlD,EAAQC,GAAAA,YAAU,EACtB,CACEoC,IAAKO,EAAGP,GAAG,CACXjC,iBAAkBwC,EAAGxC,gBAAgB,CACrC+B,MAAOS,EAAGO,UAAU,CACpBjD,OAAQ0C,EAAG1C,MAAM,AACnB,EACAN,GAMF,MAHAwD,GAAAA,cAAY,EAAC,KACXR,EAAGS,eAAe,CAAC,MACrB,yBACQ1D,EAAYK,EACtB,SAEF,EAAeL"}
+{"version":3,"sources":["../../components/back-top/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  Show,\n  splitProps,\n} from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { getMaxZindex, getScrollTop, isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport theme from '../theme';\n\nimport { style } from './style';\n\nexport interface BackTopProps {\n  /** 设置需要监听其滚动事件的元素\n   * @default window\n   */\n  target?: HTMLElement | (() => HTMLElement | undefined);\n  /** 挂载到指定的元素\n   * @default body\n   */\n  mount?: HTMLElement;\n  /** 滚动高度达到此参数值才出现 BackTop */\n  visibilityHeight?: number;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n}\n\nfunction BackTop(_: BackTopProps) {\n  const { baseStyle, isDark } = theme;\n  const props = mergeProps({ target: window as unknown as HTMLElement, visibilityHeight: 400 }, _);\n  const [local, other] = splitProps(props, ['class', 'target', 'mount', 'css', 'visibilityHeight']);\n  const [show, setShow] = createSignal<boolean | null>(null);\n  const target = createMemo(() => (isFunction(local.target) ? local.target() : local.target));\n\n  const themeStyle = createMemo(() => {\n    const bg = isDark() ? 'rgb(255 255 255 / 45%)' : 'var(--primary-border)';\n\n    return `:host {--back-top-bg: ${bg};}`;\n  });\n\n  function handleBackTop() {\n    target()?.scrollTo({\n      top: 0,\n      behavior: 'smooth',\n    });\n  }\n  function exit() {\n    if (show() === false) {\n      setShow(null);\n    }\n  }\n  function handleScrollY(e: Event) {\n    e.preventDefault();\n    let scrollTop = 0;\n    let offsetHeight = 0;\n    const _target = target();\n\n    if (_target) {\n      scrollTop = getScrollTop(_target);\n      offsetHeight = _target.offsetHeight || 0;\n    }\n    const nextShow = scrollTop > offsetHeight / 3 || scrollTop > local.visibilityHeight;\n\n    if (Boolean(show()) !== nextShow) {\n      setShow(nextShow);\n    }\n    return false;\n  }\n\n  onMount(() => {\n    target()?.addEventListener('scroll', handleScrollY, false);\n  });\n  onCleanup(() => {\n    target()?.removeEventListener('scroll', handleScrollY, false);\n  });\n  return (\n    <Show when={show() !== null}>\n      <Portal useShadow mount={local.mount}>\n        <style textContent={baseStyle()} />\n        <style textContent={themeStyle()} />\n        <style textContent={style} />\n        <Show when={local.css}>\n          <style textContent={css(local.css)} />\n        </Show>\n        <div\n          onAnimationEnd={exit}\n          class={cx('back-top', local.class)}\n          classList={{\n            'back-top-out': show() === false,\n          }}\n          onClick={handleBackTop}\n          style={{ 'z-index': getMaxZindex().toString() }}\n          {...other}\n        />\n      </Portal>\n    </Show>\n  );\n}\n\nexport type BackTopElement = CustomElement<BackTopProps>;\n\ncustomElement<BackTopProps>(\n  'n-back-top',\n  {\n    class: void 0,\n    css: void 0,\n    visibilityHeight: void 0,\n    mount: void 0,\n    target: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n\n    if (!el.mount) {\n      el.style.position = 'sticky';\n      el.style.bottom = '24px';\n      el.style.right = '24px';\n      el.style.display = 'block';\n      el.style.pointerEvents = 'none';\n    }\n    const props = mergeProps(\n      {\n        css: el.css,\n        visibilityHeight: el.visibilityHeight,\n        mount: el.renderRoot as HTMLElement,\n        target: el.target,\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('css');\n    });\n    return <BackTop {...props} />;\n  },\n);\nexport default BackTop;\n"],"names":["BackTop","_","baseStyle","isDark","theme","props","mergeProps","target","window","visibilityHeight","local","other","splitProps","show","setShow","createSignal","createMemo","isFunction","themeStyle","bg","handleBackTop","scrollTo","top","behavior","exit","handleScrollY","e","preventDefault","scrollTop","offsetHeight","_target","getScrollTop","nextShow","Boolean","onMount","addEventListener","onCleanup","removeEventListener","Show","Portal","mount","style","css","cx","class","getMaxZindex","toString","customElement","opt","el","element","position","bottom","right","display","pointerEvents","renderRoot","createEffect","removeAttribute"],"mappings":"kGAkJA,+CAAA,qBAxIuB,0BADhB,wBAEgD,gDAAA,gDAAA,4CAC/B,yBACM,6BAGZ,uBAEI,uJAmBtB,SAASA,EAAQC,CAAe,EAC9B,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGC,SAAK,CAC7BC,EAAQC,GAAAA,YAAU,EAAC,CAAEC,OAAQC,OAAkCC,iBAAkB,GAAI,EAAGR,GACxF,CAACS,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACP,EAAO,CAAC,QAAS,SAAU,QAAS,MAAO,mBAAmB,EAC1F,CAACQ,EAAMC,EAAQ,CAAGC,GAAAA,cAAY,EAAiB,MAC/CR,EAASS,GAAAA,YAAU,EAAC,IAAOC,GAAAA,SAAU,EAACP,EAAMH,MAAM,EAAIG,EAAMH,MAAM,GAAKG,EAAMH,MAAM,EAEnFW,EAAaF,GAAAA,YAAU,EAAC,KAC5B,IAAMG,EAAKhB,IAAW,yBAA2B,wBAEjD,MAAO,CAAC,sBAAsB,EAAEgB,EAAG,EAAE,CAAC,AACxC,GAEA,SAASC,IACPb,KAAUc,SAAS,CACjBC,IAAK,EACLC,SAAU,QACZ,EACF,CACA,SAASC,IACQ,CAAA,IAAXX,KACFC,EAAQ,KAEZ,CACA,SAASW,EAAcC,CAAQ,EAC7BA,EAAEC,cAAc,GAChB,IAAIC,EAAY,EACZC,EAAe,EACbC,EAAUvB,IAEZuB,IACFF,EAAYG,GAAAA,SAAY,EAACD,GACzBD,EAAeC,EAAQD,YAAY,EAAI,GAEzC,IAAMG,EAAWJ,EAAYC,EAAe,GAAKD,EAAYlB,EAAMD,gBAAgB,CAKnF,MAHIwB,CAAAA,CAAQpB,MAAYmB,GACtBlB,EAAQkB,GAEH,CAAA,CACT,CAQA,MANAE,GAAAA,SAAO,EAAC,KACN3B,KAAU4B,iBAAiB,SAAUV,EAAe,CAAA,EACtD,GACAW,GAAAA,WAAS,EAAC,KACR7B,KAAU8B,oBAAoB,SAAUZ,EAAe,CAAA,EACzD,yBAEGa,MAAI,oBAAOzB,AAAW,OAAXA,gDACT0B,QAAM,kCAAkB7B,EAAM8B,KAAK,qFACdtC,wEACAgB,gDACAuB,OAAK,6BACxBH,MAAI,oBAAO5B,EAAMgC,GAAG,wEACCA,GAAAA,KAAG,EAAChC,EAAMgC,GAAG,+DAQxBtB,8CALOI,sDACTmB,GAAAA,IAAE,EAAC,WAAYjC,EAAMkC,KAAK,yBACtB,CACT,eAAgB/B,AAAW,CAAA,IAAXA,GAClB,qBAEO,CAAE,UAAWgC,GAAAA,SAAY,IAAGC,QAAQ,EAAG,IAC1CnC,sBAKd,CAIAoC,GAAAA,eAAa,EACX,aACA,CACEH,MAAO,KAAK,EACZF,IAAK,KAAK,EACVjC,iBAAkB,KAAK,EACvB+B,MAAO,KAAK,EACZjC,OAAQ,KAAK,CACf,EACA,CAACN,EAAG+C,KACF,IAAMC,EAAKD,EAAIE,OAAO,AAEjBD,CAAAA,EAAGT,KAAK,GACXS,EAAGR,KAAK,CAACU,QAAQ,CAAG,SACpBF,EAAGR,KAAK,CAACW,MAAM,CAAG,OAClBH,EAAGR,KAAK,CAACY,KAAK,CAAG,OACjBJ,EAAGR,KAAK,CAACa,OAAO,CAAG,QACnBL,EAAGR,KAAK,CAACc,aAAa,CAAG,QAE3B,IAAMlD,EAAQC,GAAAA,YAAU,EACtB,CACEoC,IAAKO,EAAGP,GAAG,CACXjC,iBAAkBwC,EAAGxC,gBAAgB,CACrC+B,MAAOS,EAAGO,UAAU,CACpBjD,OAAQ0C,EAAG1C,MAAM,AACnB,EACAN,GAMF,MAHAwD,GAAAA,cAAY,EAAC,KACXR,EAAGS,eAAe,CAAC,MACrB,yBACQ1D,EAAYK,EACtB,SAEF,EAAeL"}

package/lib/basic-config/README.mdx

@@ -0,0 +1,11 @@
+---
+type: 全局
+title: 通用配置项
+subtitle: Basic Config
+icon: ⚙️
+order: 0
+---
+
+# 通用配置项
+
+> 组件继承的类型你都可以在这里找到对应的描述

package/lib/button/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 通用
+title: 按钮
+subtitle: n-button
+icon: 💠
+---
+
+# 按钮
+
+按钮用于开始一个即时操作，响应用户点击行为，触发相应的业务逻辑。

package/lib/button/examples/basic.md

@@ -0,0 +1,21 @@
+---
+title: 基本使用
+description: 内置 5 种类型：`default`、`primary`、`success`、`warning`、`error`。
+order: 1
+---
+
+```html
+<n-button>按钮</n-button>
+<n-button type="primary">按钮</n-button>
+<n-button type="success">按钮</n-button>
+<n-button type="warning">按钮</n-button>
+<n-button type="error">按钮</n-button>
+```
+
+```jsx
+<n-button>按钮</n-button>
+<n-button type="primary">按钮</n-button>
+<n-button type="success">按钮</n-button>
+<n-button type="warning">按钮</n-button>
+<n-button type="error">按钮</n-button>
+```

package/lib/button/examples/block.md

@@ -0,0 +1,33 @@
+---
+title: 块状按钮
+description: 添加 `block` 属性将使按钮适合其父宽度。
+order: 6
+---
+
+```html
+<n-button block="true">一行</n-button>
+<n-button type="primary" block="true">一行</n-button>
+<n-button type="success" block="true">一行</n-button>
+<n-button type="warning" block="true">一行</n-button>
+<n-button type="error" block="true">一行</n-button>
+<n-button link="true" block="true">一行</n-button>
+```
+
+```jsx
+<n-button block>一行</n-button>
+<n-button type="primary" block>
+  一行
+</n-button>
+<n-button type="success" block>
+  一行
+</n-button>
+<n-button type="error" block>
+  一行
+</n-button>
+<n-button type="warning" block>
+  一行
+</n-button>
+<n-button link block>
+  一行
+</n-button>
+```