neko-ui 2.8.21 → 2.8.23

package/lib/button/examples/circle.md

@@ -0,0 +1,21 @@
+---
+title: 圆形按钮
+description: 添加 `circle` 属性将按钮设置成圆形，通常在只有图标的按钮上使用
+order: 5
+---
+
+```html
+<n-button circle="true">🤔</n-button>
+<n-button type="primary" circle="true">🤔</n-button>
+<n-button type="success" circle="true">🤔</n-button>
+<n-button type="warning" circle="true">🤔</n-button>
+<n-button type="error" circle="true">🤔</n-button>
+```
+
+```jsx
+<n-button circle>🤔</n-button>
+<n-button type="primary" circle>🤔</n-button>
+<n-button type="success" circle>🤔</n-button>
+<n-button type="warning" circle>🤔</n-button>
+<n-button type="error" circle>🤔</n-button>
+```

package/lib/button/examples/danger.md

@@ -0,0 +1,23 @@
+---
+title: 危险按钮
+description: 添加 `danger` 属性将按钮标记为危险操作
+order: 8
+---
+
+```html
+<n-button danger="true">default</n-button>
+<n-button fill="true" danger="true"> fill </n-button>
+<n-button dashed="true" danger="true"> dashed </n-button>
+<n-button ghost="true" danger="true"> ghost </n-button>
+<n-button flat="true" danger="true"> flat </n-button>
+<n-button link="true" danger="true"> link </n-button>
+```
+
+```jsx
+<n-button danger>default</n-button>
+<n-button fill danger>fill</n-button>
+<n-button dashed danger>dashed</n-button>
+<n-button ghost danger>ghost</n-button>
+<n-button flat danger>flat</n-button>
+<n-button link danger>link</n-button>
+```

package/lib/button/examples/dashed.md

@@ -0,0 +1,21 @@
+---
+title: 虚线按钮
+description: 添加 `dashed` 属性将按钮的边框设置成虚线
+order: 9
+---
+
+```html
+<n-button dashed="true" ghost="true">虚线</n-button>
+<n-button type="primary" dashed="true" ghost="true">虚线</n-button>
+<n-button type="success" dashed="true" ghost="true">虚线</n-button>
+<n-button type="warning" dashed="true" ghost="true">虚线</n-button>
+<n-button type="error" dashed="true" ghost="true">虚线</n-button>
+```
+
+```jsx
+<n-button dashed ghost>虚线</n-button>
+<n-button type="primary" dashed ghost>虚线</n-button>
+<n-button type="success" dashed ghost>虚线</n-button>
+<n-button type="warning" dashed ghost>虚线</n-button>
+<n-button type="error" dashed ghost>虚线</n-button>
+```

package/lib/button/examples/disabled.md

@@ -0,0 +1,35 @@
+---
+title: 不可用状态
+description: 添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变
+order: 11
+---
+
+```html
+<n-button disabled="true">normal [disabled]</n-button>
+<n-button type="primary" disabled="true"> primary </n-button>
+<n-button disabled="true" fill="true"> fill </n-button>
+<n-button disabled="true" link="true"> link </n-button>
+<n-button disabled="true" type="primary" flat="true"> flat </n-button>
+<n-button disabled="true" dashed="true"> dashed </n-button>
+<div style="background-color: #827f7f; padding: 8px;">
+  <n-button type="primary" disabled="true" ghost="true">
+    ghost
+    <!-- 注释 -->
+  </n-button>
+</div>
+```
+
+```jsx
+<n-button disabled>normal [disabled]</n-button>
+<n-button type="primary" disabled> primary </n-button>
+<n-button disabled fill> fill </n-button>
+<n-button disabled link> link </n-button>
+<n-button disabled type="primary" flat> flat </n-button>
+<n-button disabled dashed> dashed </n-button>
+<div style={{ 'background-color': '#827f7f', padding: '8px' }}>
+  <n-button type="primary" disabled ghost>
+    ghost
+    {/* 注释 */}
+  </n-button>
+</div>
+```

package/lib/button/examples/fill.md

@@ -0,0 +1,21 @@
+---
+title: 填充背景
+description: 添加 `fill` 属性使按钮更加注目
+order: 3
+---
+
+```html
+<n-button fill="true">实底</n-button>
+<n-button type="primary" fill="true">实底</n-button>
+<n-button type="success" fill="true">实底</n-button>
+<n-button type="warning" fill="true">实底</n-button>
+<n-button type="error" fill="true">实底</n-button>
+```
+
+```jsx
+<n-button fill>实底</n-button>
+<n-button type="primary" fill> 实底 </n-button>
+<n-button type="success" fill> 实底 </n-button>
+<n-button type="warning" fill> 实底 </n-button>
+<n-button type="error" fill> 实底 </n-button>
+```

package/lib/button/examples/flat.md

@@ -0,0 +1,21 @@
+---
+title: 扁平按钮
+description: 添加 `flat` 属性将其设置为扁平按钮。
+order: 4
+---
+
+```html
+<n-button flat="true">按钮</n-button>
+<n-button type="primary" flat="true"> 按钮 </n-button>
+<n-button type="success" flat="true"> 按钮 </n-button>
+<n-button type="warning" flat="true"> 按钮 </n-button>
+<n-button type="error" flat="true"> 按钮 </n-button>
+```
+
+```jsx
+<n-button flat>按钮</n-button>
+<n-button type="primary" flat> 按钮 </n-button>
+<n-button type="success" flat> 按钮 </n-button>
+<n-button type="warning" flat> 按钮 </n-button>
+<n-button type="error" flat> 按钮 </n-button>
+```

package/lib/button/examples/ghost.md

@@ -0,0 +1,21 @@
+---
+title: 幽灵按钮
+description: 将按钮的内容反色，背景变为透明，常用在有色背景上。
+order: 10
+---
+
+```html
+<n-button ghost="true">ghost</n-button>
+<n-button type="primary" ghost="true">ghost</n-button>
+<n-button type="success" ghost="true">ghost</n-button>
+<n-button type="warning" ghost="true">ghost</n-button>
+<n-button type="error" ghost="true">ghost</n-button>
+```
+
+```jsx
+<n-button ghost>ghost</n-button>
+<n-button type="primary" ghost> ghost </n-button>
+<n-button type="success" ghost> ghost </n-button>
+<n-button type="warning" ghost> ghost </n-button>
+<n-button type="error" ghost> ghost </n-button>
+```

package/lib/button/examples/icon.md

@@ -0,0 +1,30 @@
+---
+title: 图标
+description: 在文字前面添加图标
+order: 12
+---
+
+```html
+<n-button icon="😂">按钮</n-button>
+<n-button type="primary" size="small" icon="😂">按钮</n-button>
+<n-button type="success" size="large" icon="😂">按钮</n-button>
+<n-button type="warning">按钮</n-button>
+<script>
+  const el = container.querySelectorAll('n-button');
+
+  el[3].icon = function () {
+    const b = document.createElement('b');
+
+    b.style.color = 'red';
+    b.textContent = 'icon';
+    return b;
+  };
+</script>
+```
+
+```jsx
+<n-button icon="😂">按钮</n-button>
+<n-button type="primary" size="small" icon="😂">按钮</n-button>
+<n-button type="success" size="large" icon="😂">按钮</n-button>
+<n-button type="warning" icon={() => <b style={{color:'red'}}>icon</b>}>按钮</n-button>
+```

package/lib/button/examples/link.md

@@ -0,0 +1,21 @@
+---
+title: 链接按钮
+description: 添加 `link` 属性将其设置为链接按钮，并渲染为 a 标签
+order: 7
+---
+
+```html
+<n-button link="true">链接</n-button>
+<n-button type="primary" link="true">链接</n-button>
+<n-button type="success" link="true">链接</n-button>
+<n-button type="warning" link="true">链接</n-button>
+<n-button type="error" link="true">链接</n-button>
+```
+
+```jsx
+<n-button link>链接</n-button>
+<n-button type="primary" link>链接</n-button>
+<n-button type="success" link>链接</n-button>
+<n-button type="warning" link>链接</n-button>
+<n-button type="error" link>链接</n-button>
+```

package/lib/button/examples/size.md

@@ -0,0 +1,23 @@
+---
+title: 不同尺寸
+description: 按钮有大、中、小三种尺寸。通过设置 `size` 为 `large`、`small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
+order: 2
+---
+
+```html
+<n-button type="primary" size="small">小按钮</n-button>
+<n-button type="primary">默认按钮</n-button>
+<n-button type="primary" size="large">大按钮</n-button>
+<n-button type="success" size="small" circle="true">🤔</n-button>
+<n-button type="success" circle="true">🤔</n-button>
+<n-button type="success" size="large" circle="true">🤔</n-button>
+```
+
+```jsx
+<n-button type="primary" size="small"> 小按钮 </n-button>
+<n-button type="primary">默认按钮</n-button>
+<n-button type="primary" size="large"> 大按钮 </n-button>
+<n-button type="success" size="small" circle> 🤔 </n-button>
+<n-button type="success" circle> 🤔 </n-button>
+<n-button type="success" size="large" circle> 🤔 </n-button>
+```

package/lib/button/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"),n=s(require("@moneko/common/lib/isFunction")),r=require("@moneko/css"),i=require("solid-element"),l=require("./style"),o=s(require("../theme"));function s(e){return e&&e.__esModule?e:{default:e}}const c=(0,e.template)("<style> "),d=(0,e.template)("<style>"),a=(0,e.template)('<span class="icon" part="icon">'),u=(0,e.template)('<span class="label" part="label">');function f(i){let s;let{baseStyle:f}=o.default,p=(0,t.mergeProps)({size:"normal",type:"default"},i),[m,b]=(0,t.splitProps)(p,["ghost","fill","circle","dashed","flat","link","danger","children","block","size","type","class","icon","css","disabled","tag"]),[g,h]=(0,t.createSignal)(!1),v=(0,t.createMemo)(()=>(0,n.default)(m.icon)?m.icon():m.icon);return[(()=>{let t=c(),n=t.firstChild;return(0,e.effect)(()=>n.data=f()),t})(),(()=>{let e=d();return e.textContent=l.style,e})(),(0,e.createComponent)(t.Show,{get when(){return m.css},get children(){let t=c(),n=t.firstChild;return(0,e.effect)(()=>n.data=(0,r.css)(m.css)),t}}),(0,e.createComponent)(e.Dynamic,(0,e.mergeProps)({ref(e){let t=s;"function"==typeof t?t(e):s=e},get component(){return m.link?"a":m.tag||"button"},class:"btn",get classList(){return{[m.type]:!0,[m.size]:!0,danger:m.danger,block:m.block,fill:m.fill,circle:m.circle,flat:m.flat,dashed:m.dashed,ghost:m.ghost,link:m.link,disabled:m.disabled,without:g()}},part:"button",onClick:function(){m.disabled||h(!0)},onAnimationEnd:function(){h(!1)},get disabled(){return m.disabled},role:"button"},b,{get children(){return[(0,e.createComponent)(t.Show,{get when(){return m.icon},get children(){let t=a();return(0,e.insert)(t,v),t}}),(()=>{let t=u();return(0,e.insert)(t,()=>m.children),t})()]}}))]}(0,i.customElement)("n-button",{class:void 0,css:void 0,type:void 0,ghost:void 0,fill:void 0,circle:void 0,dashed:void 0,flat:void 0,disabled:void 0,block:void 0,link:void 0,danger:void 0,size:void 0,icon:void 0,tag:void 0},(n,r)=>{let i=r.element,l=(0,t.mergeProps)({css:i.css,children:[...i.childNodes.values()]},n);return(0,t.createEffect)(()=>{i.replaceChildren(),i.removeAttribute("css")}),(0,e.createComponent)(f,l)});const p=f;
+"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"),n=s(require("@moneko/common/lib/isFunction")),r=require("@moneko/css"),i=require("solid-element"),l=s(require("../theme")),o=require("./style");function s(e){return e&&e.__esModule?e:{default:e}}const c=(0,e.template)("<style> "),d=(0,e.template)("<style>"),a=(0,e.template)('<span class="icon" part="icon">'),u=(0,e.template)('<span class="label" part="label">');function f(i){let s;let{baseStyle:f}=l.default,p=(0,t.mergeProps)({size:"normal",type:"default"},i),[m,b]=(0,t.splitProps)(p,["ghost","fill","circle","dashed","flat","link","danger","children","block","size","type","class","icon","css","disabled","tag"]),[g,h]=(0,t.createSignal)(!1),v=(0,t.createMemo)(()=>(0,n.default)(m.icon)?m.icon():m.icon);return[(()=>{let t=c(),n=t.firstChild;return(0,e.effect)(()=>n.data=f()),t})(),(()=>{let e=d();return e.textContent=o.style,e})(),(0,e.createComponent)(t.Show,{get when(){return m.css},get children(){let t=c(),n=t.firstChild;return(0,e.effect)(()=>n.data=(0,r.css)(m.css)),t}}),(0,e.createComponent)(e.Dynamic,(0,e.mergeProps)({ref(e){let t=s;"function"==typeof t?t(e):s=e},get component(){return m.link?"a":m.tag||"button"},class:"btn",get classList(){return{[m.type]:!0,[m.size]:!0,danger:m.danger,block:m.block,fill:m.fill,circle:m.circle,flat:m.flat,dashed:m.dashed,ghost:m.ghost,link:m.link,disabled:m.disabled,without:g()}},part:"button",onClick:function(){m.disabled||h(!0)},onAnimationEnd:function(){h(!1)},get disabled(){return m.disabled},role:"button"},b,{get children(){return[(0,e.createComponent)(t.Show,{get when(){return m.icon},get children(){let t=a();return(0,e.insert)(t,v),t}}),(()=>{let t=u();return(0,e.insert)(t,()=>m.children),t})()]}}))]}(0,i.customElement)("n-button",{class:void 0,css:void 0,type:void 0,ghost:void 0,fill:void 0,circle:void 0,dashed:void 0,flat:void 0,disabled:void 0,block:void 0,link:void 0,danger:void 0,size:void 0,icon:void 0,tag:void 0},(n,r)=>{let i=r.element,l=(0,t.mergeProps)({css:i.css,children:[...i.childNodes.values()]},n);return(0,t.createEffect)(()=>{i.replaceChildren(),i.removeAttribute("css")}),(0,e.createComponent)(f,l)});const p=f;
 //# sourceMappingURL=index.js.map

package/lib/button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/button/index.tsx"],"sourcesContent":["import { Show, createEffect, createMemo, createSignal, mergeProps, splitProps } from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Dynamic } from 'solid-js/web';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement } from '..';\n\nexport interface ButtonProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 按钮类型 */\n  type?: 'success' | 'error' | 'primary' | 'warning' | 'default';\n  /** 透明背景 */\n  ghost?: boolean;\n  /** 实色背景 */\n  fill?: boolean;\n  /** 圆形按钮 */\n  circle?: boolean;\n  /** 虚线按钮 */\n  dashed?: boolean;\n  /** 扁平按钮 */\n  flat?: boolean;\n  /** 禁用按钮 */\n  disabled?: boolean;\n  /** 块按钮 */\n  block?: boolean;\n  /** 链接按钮 */\n  link?: boolean;\n  /** 危险按钮 */\n  danger?: boolean;\n  /** 自定义 tag\n   * @since 2.1.0\n   */\n  tag?: string;\n  /** 按钮尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 按钮前面添加一个图标 */\n  icon?: (() => JSX.Element) | JSX.Element;\n  children?: JSX.Element;\n  onClick?(e: Event): void;\n}\nexport type ButtonElement = CustomElement<ButtonProps>;\n\nfunction Button(_: ButtonProps) {\n  const { baseStyle } = theme;\n  const _props = mergeProps({ size: 'normal', type: 'default' }, _);\n  const [local, other] = splitProps(_props, [\n    'ghost',\n    'fill',\n    'circle',\n    'dashed',\n    'flat',\n    'link',\n    'danger',\n    'children',\n    'block',\n    'size',\n    'type',\n    'class',\n    'icon',\n    'css',\n    'disabled',\n    'tag',\n  ]);\n  let ref: HTMLButtonElement | undefined;\n  const [animating, setAnimating] = createSignal(false);\n\n  function handleClick() {\n    if (!local.disabled) {\n      setAnimating(true);\n    }\n  }\n  function handleAnimationEnd() {\n    setAnimating(false);\n  }\n  const icon = createMemo(() => (isFunction(local.icon) ? local.icon() : local.icon));\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <Dynamic\n        ref={ref}\n        component={local.link ? 'a' : local.tag || 'button'}\n        class=\"btn\"\n        classList={{\n          [local.type]: true,\n          [local.size]: true,\n          danger: local.danger,\n          block: local.block,\n          fill: local.fill,\n          circle: local.circle,\n          flat: local.flat,\n          dashed: local.dashed,\n          ghost: local.ghost,\n          link: local.link,\n          disabled: local.disabled,\n          without: animating(),\n        }}\n        part=\"button\"\n        onClick={handleClick}\n        onAnimationEnd={handleAnimationEnd}\n        disabled={local.disabled}\n        role=\"button\"\n        {...other}\n      >\n        <Show when={local.icon}>\n          <span class=\"icon\" part=\"icon\">\n            {icon()}\n          </span>\n        </Show>\n        <span class=\"label\" part=\"label\">\n          {local.children}\n        </span>\n      </Dynamic>\n    </>\n  );\n}\n\ncustomElement<ButtonProps>(\n  'n-button',\n  {\n    class: void 0,\n    css: void 0,\n    type: void 0,\n    ghost: void 0,\n    fill: void 0,\n    circle: void 0,\n    dashed: void 0,\n    flat: void 0,\n    disabled: void 0,\n    block: void 0,\n    link: void 0,\n    danger: void 0,\n    size: void 0,\n    icon: void 0,\n    tag: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        children: [...el.childNodes.values()],\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n      el.removeAttribute('css');\n    });\n\n    return <Button {...props} />;\n  },\n);\nexport default Button;\n"],"names":["Button","_","ref","baseStyle","theme","_props","mergeProps","size","type","local","other","splitProps","animating","setAnimating","createSignal","icon","createMemo","isFunction","style","Show","css","Dynamic","link","tag","danger","block","fill","circle","flat","dashed","ghost","disabled","without","children","customElement","class","opt","el","element","props","childNodes","values","createEffect","replaceChildren","removeAttribute"],"mappings":"kGAqKA,+CAAA,qBAjKwB,0BAJ6D,wBAC1D,4CACP,yBACU,2BAER,uBACJ,yOA2ClB,SAASA,EAAOC,CAAc,MAqBxBC,EApBJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CACrBC,EAASC,GAAAA,YAAU,EAAC,CAAEC,KAAM,SAAUC,KAAM,SAAU,EAAGP,GACzD,CAACQ,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACN,EAAQ,CACxC,QACA,OACA,SACA,SACA,OACA,OACA,SACA,WACA,QACA,OACA,OACA,QACA,OACA,MACA,WACA,MACD,EAEK,CAACO,EAAWC,EAAa,CAAGC,GAAAA,cAAY,EAAC,CAAA,GAUzCC,EAAOC,GAAAA,YAAU,EAAC,IAAOC,GAAAA,SAAU,EAACR,EAAMM,IAAI,EAAIN,EAAMM,IAAI,GAAKN,EAAMM,IAAI,EAEjF,oEAEwBZ,gDACAe,OAAK,6BACxBC,MAAI,oBAAOV,EAAMW,GAAG,wEACCA,GAAAA,KAAG,EAACX,EAAMW,GAAG,8BAElCC,SAAO,gCACDnB,4BAAAA,4BACMO,EAAMa,IAAI,CAAG,IAAMb,EAAMc,GAAG,EAAI,4CAEhC,CACT,CAACd,EAAMD,IAAI,CAAC,CAAE,CAAA,EACd,CAACC,EAAMF,IAAI,CAAC,CAAE,CAAA,EACdiB,OAAQf,EAAMe,MAAM,CACpBC,MAAOhB,EAAMgB,KAAK,CAClBC,KAAMjB,EAAMiB,IAAI,CAChBC,OAAQlB,EAAMkB,MAAM,CACpBC,KAAMnB,EAAMmB,IAAI,CAChBC,OAAQpB,EAAMoB,MAAM,CACpBC,MAAOrB,EAAMqB,KAAK,CAClBR,KAAMb,EAAMa,IAAI,CAChBS,SAAUtB,EAAMsB,QAAQ,CACxBC,QAASpB,GACX,yBAlCN,WACOH,EAAMsB,QAAQ,EACjBlB,EAAa,CAAA,EAEjB,iBACA,WACEA,EAAa,CAAA,EACf,wBA+BgBJ,EAAMsB,QAAQ,iBAEpBrB,+CAEHS,MAAI,oBAAOV,EAAMM,IAAI,gDAEjBA,iDAIFN,EAAMwB,QAAQ,aAKzB,CAEAC,GAAAA,eAAa,EACX,WACA,CACEC,MAAO,KAAK,EACZf,IAAK,KAAK,EACVZ,KAAM,KAAK,EACXsB,MAAO,KAAK,EACZJ,KAAM,KAAK,EACXC,OAAQ,KAAK,EACbE,OAAQ,KAAK,EACbD,KAAM,KAAK,EACXG,SAAU,KAAK,EACfN,MAAO,KAAK,EACZH,KAAM,KAAK,EACXE,OAAQ,KAAK,EACbjB,KAAM,KAAK,EACXQ,KAAM,KAAK,EACXQ,IAAK,KAAK,CACZ,EACA,CAACtB,EAAGmC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBC,EAAQjC,GAAAA,YAAU,EACtB,CACEc,IAAKiB,EAAGjB,GAAG,CACXa,SAAU,IAAII,EAAGG,UAAU,CAACC,MAAM,GAAG,AACvC,EACAxC,GAQF,MALAyC,GAAAA,cAAY,EAAC,KACXL,EAAGM,eAAe,GAClBN,EAAGO,eAAe,CAAC,MACrB,yBAEQ5C,EAAWuC,EACrB,SAEF,EAAevC"}
+{"version":3,"sources":["../../components/button/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, mergeProps, Show, splitProps } from 'solid-js';\nimport { Dynamic } from 'solid-js/web';\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 { style } from './style';\n\nexport interface ButtonProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 按钮类型 */\n  type?: 'success' | 'error' | 'primary' | 'warning' | 'default';\n  /** 透明背景 */\n  ghost?: boolean;\n  /** 实色背景 */\n  fill?: boolean;\n  /** 圆形按钮 */\n  circle?: boolean;\n  /** 虚线按钮 */\n  dashed?: boolean;\n  /** 扁平按钮 */\n  flat?: boolean;\n  /** 禁用按钮 */\n  disabled?: boolean;\n  /** 块按钮 */\n  block?: boolean;\n  /** 链接按钮 */\n  link?: boolean;\n  /** 危险按钮 */\n  danger?: boolean;\n  /** 自定义 tag\n   * @since 2.1.0\n   */\n  tag?: string;\n  /** 按钮尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 按钮前面添加一个图标 */\n  icon?: (() => JSX.Element) | JSX.Element;\n  children?: JSX.Element;\n  onClick?(e: Event): void;\n}\nexport type ButtonElement = CustomElement<ButtonProps>;\n\nfunction Button(_: ButtonProps) {\n  const { baseStyle } = theme;\n  const _props = mergeProps({ size: 'normal', type: 'default' }, _);\n  const [local, other] = splitProps(_props, [\n    'ghost',\n    'fill',\n    'circle',\n    'dashed',\n    'flat',\n    'link',\n    'danger',\n    'children',\n    'block',\n    'size',\n    'type',\n    'class',\n    'icon',\n    'css',\n    'disabled',\n    'tag',\n  ]);\n  let ref: HTMLButtonElement | undefined;\n  const [animating, setAnimating] = createSignal(false);\n\n  function handleClick() {\n    if (!local.disabled) {\n      setAnimating(true);\n    }\n  }\n  function handleAnimationEnd() {\n    setAnimating(false);\n  }\n  const icon = createMemo(() => (isFunction(local.icon) ? local.icon() : local.icon));\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <Dynamic\n        ref={ref}\n        component={local.link ? 'a' : local.tag || 'button'}\n        class=\"btn\"\n        classList={{\n          [local.type]: true,\n          [local.size]: true,\n          danger: local.danger,\n          block: local.block,\n          fill: local.fill,\n          circle: local.circle,\n          flat: local.flat,\n          dashed: local.dashed,\n          ghost: local.ghost,\n          link: local.link,\n          disabled: local.disabled,\n          without: animating(),\n        }}\n        part=\"button\"\n        onClick={handleClick}\n        onAnimationEnd={handleAnimationEnd}\n        disabled={local.disabled}\n        role=\"button\"\n        {...other}\n      >\n        <Show when={local.icon}>\n          <span class=\"icon\" part=\"icon\">\n            {icon()}\n          </span>\n        </Show>\n        <span class=\"label\" part=\"label\">\n          {local.children}\n        </span>\n      </Dynamic>\n    </>\n  );\n}\n\ncustomElement<ButtonProps>(\n  'n-button',\n  {\n    class: void 0,\n    css: void 0,\n    type: void 0,\n    ghost: void 0,\n    fill: void 0,\n    circle: void 0,\n    dashed: void 0,\n    flat: void 0,\n    disabled: void 0,\n    block: void 0,\n    link: void 0,\n    danger: void 0,\n    size: void 0,\n    icon: void 0,\n    tag: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        children: [...el.childNodes.values()],\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n      el.removeAttribute('css');\n    });\n\n    return <Button {...props} />;\n  },\n);\nexport default Button;\n"],"names":["Button","_","ref","baseStyle","theme","_props","mergeProps","size","type","local","other","splitProps","animating","setAnimating","createSignal","icon","createMemo","isFunction","style","Show","css","Dynamic","link","tag","danger","block","fill","circle","flat","dashed","ghost","disabled","without","children","customElement","class","opt","el","element","props","childNodes","values","createEffect","replaceChildren","removeAttribute"],"mappings":"kGAuKA,+CAAA,qBAtKwB,0BAD6D,wBAE1D,4CACP,yBACU,6BAGZ,uBAEI,uOA0CtB,SAASA,EAAOC,CAAc,MAqBxBC,EApBJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CACrBC,EAASC,GAAAA,YAAU,EAAC,CAAEC,KAAM,SAAUC,KAAM,SAAU,EAAGP,GACzD,CAACQ,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACN,EAAQ,CACxC,QACA,OACA,SACA,SACA,OACA,OACA,SACA,WACA,QACA,OACA,OACA,QACA,OACA,MACA,WACA,MACD,EAEK,CAACO,EAAWC,EAAa,CAAGC,GAAAA,cAAY,EAAC,CAAA,GAUzCC,EAAOC,GAAAA,YAAU,EAAC,IAAOC,GAAAA,SAAU,EAACR,EAAMM,IAAI,EAAIN,EAAMM,IAAI,GAAKN,EAAMM,IAAI,EAEjF,oEAEwBZ,gDACAe,OAAK,6BACxBC,MAAI,oBAAOV,EAAMW,GAAG,wEACCA,GAAAA,KAAG,EAACX,EAAMW,GAAG,8BAElCC,SAAO,gCACDnB,4BAAAA,4BACMO,EAAMa,IAAI,CAAG,IAAMb,EAAMc,GAAG,EAAI,4CAEhC,CACT,CAACd,EAAMD,IAAI,CAAC,CAAE,CAAA,EACd,CAACC,EAAMF,IAAI,CAAC,CAAE,CAAA,EACdiB,OAAQf,EAAMe,MAAM,CACpBC,MAAOhB,EAAMgB,KAAK,CAClBC,KAAMjB,EAAMiB,IAAI,CAChBC,OAAQlB,EAAMkB,MAAM,CACpBC,KAAMnB,EAAMmB,IAAI,CAChBC,OAAQpB,EAAMoB,MAAM,CACpBC,MAAOrB,EAAMqB,KAAK,CAClBR,KAAMb,EAAMa,IAAI,CAChBS,SAAUtB,EAAMsB,QAAQ,CACxBC,QAASpB,GACX,yBAlCN,WACOH,EAAMsB,QAAQ,EACjBlB,EAAa,CAAA,EAEjB,iBACA,WACEA,EAAa,CAAA,EACf,wBA+BgBJ,EAAMsB,QAAQ,iBAEpBrB,+CAEHS,MAAI,oBAAOV,EAAMM,IAAI,gDAEjBA,iDAIFN,EAAMwB,QAAQ,aAKzB,CAEAC,GAAAA,eAAa,EACX,WACA,CACEC,MAAO,KAAK,EACZf,IAAK,KAAK,EACVZ,KAAM,KAAK,EACXsB,MAAO,KAAK,EACZJ,KAAM,KAAK,EACXC,OAAQ,KAAK,EACbE,OAAQ,KAAK,EACbD,KAAM,KAAK,EACXG,SAAU,KAAK,EACfN,MAAO,KAAK,EACZH,KAAM,KAAK,EACXE,OAAQ,KAAK,EACbjB,KAAM,KAAK,EACXQ,KAAM,KAAK,EACXQ,IAAK,KAAK,CACZ,EACA,CAACtB,EAAGmC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBC,EAAQjC,GAAAA,YAAU,EACtB,CACEc,IAAKiB,EAAGjB,GAAG,CACXa,SAAU,IAAII,EAAGG,UAAU,CAACC,MAAM,GAAG,AACvC,EACAxC,GAQF,MALAyC,GAAAA,cAAY,EAAC,KACXL,EAAGM,eAAe,GAClBN,EAAGO,eAAe,CAAC,MACrB,yBAEQ5C,EAAWuC,EACrB,SAEF,EAAevC"}

package/lib/button/style.js

@@ -134,6 +134,7 @@
     --btn-hover-color: var(--primary-hover);
     --btn-active-color: var(--primary-active);
   }
+
   ${o("primary")}
   ${o("error")}
   ${o("success")}

package/lib/button/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/button/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\nimport type { ButtonProps } from '.';\n\nfunction btnColor(type: ButtonProps['type']): string {\n  let _cls = `.${type}`,\n    fillCls = `.${type}.fill`;\n\n  if (type === 'error') {\n    _cls = `.${type},.danger`;\n    fillCls = `.${type}.fill,.danger.fill`;\n  }\n\n  return css`\n    ${_cls}:not(.disabled) {\n      --btn-border: var(--${type}-border);\n      --btn-bg: var(--${type}-selection);\n      --btn-hover-bg: var(--btn-bg);\n      --btn-hover-color: var(--${type}-hover);\n      --btn-active-color: var(--${type}-active);\n      --btn-outline-color: var(--${type}-outline);\n      --btn-color: var(--${type}-color);\n    }\n    ${fillCls} {\n      --btn-bg: var(--${type}-color);\n      --btn-border: var(--${type}-color);\n      --btn-hover-bg: var(--${type}-hover);\n      --btn-active-bg: var(--${type}-active);\n    }\n  `;\n}\n\nexport const style = css`\n  .btn,\n  .label {\n    transition-duration: var(--transition-duration);\n  }\n\n  .label {\n    display: block;\n    line-height: normal;\n    overflow: hidden;\n    text-align: center;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    transition-property: color;\n  }\n\n  .btn {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--btn-border);\n    border-radius: var(--border-radius);\n    padding: 0 16px;\n    inline-size: fit-content;\n    min-inline-size: var(--btn-size);\n    block-size: fit-content;\n    min-block-size: var(--btn-size);\n    font-size: var(--font-size);\n    color: var(--btn-color);\n    background-color: var(--btn-bg);\n    outline-offset: 4px;\n    gap: 3px;\n    line-height: 1;\n    cursor: pointer;\n    transition-property: color, background-color, border-color, width, height, transform;\n    touch-action: manipulation;\n    box-sizing: border-box;\n    user-select: none;\n    outline: none;\n\n    &:has(.icon) {\n      padding: 4px 10px;\n    }\n\n    &:not(.disabled) {\n      &:active {\n        transform: scale(0.98);\n\n        .label {\n          color: var(--btn-active-color);\n        }\n\n        &:not(.link, .flat) {\n          border-color: var(--btn-active-color);\n        }\n\n        &:not(.link) {\n          background-color: var(--btn-hover-bg);\n        }\n      }\n\n      &:hover:not(.link) {\n        background-color: var(--btn-hover-bg);\n      }\n\n      &:hover:not(.link, .flat),\n      &:focus:not(.link, .flat) {\n        border-color: var(--btn-hover-color);\n      }\n\n      &:hover .label,\n      &:focus .label {\n        color: var(--btn-hover-color);\n      }\n    }\n\n    &.disabled {\n      --btn-color: var(--disable-color);\n      --btn-bg: var(--disable-bg);\n      --btn-border: var(--disable-border);\n\n      cursor: not-allowed;\n    }\n  }\n\n  .normal {\n    --btn-size: 32px;\n  }\n\n  .small {\n    --btn-size: 24px;\n\n    gap: 2px;\n    padding: 0 7px;\n    font-size: var(--font-size-xs);\n\n    &:has(.icon) {\n      padding: 4px 5px;\n    }\n  }\n\n  .large {\n    --btn-size: 40px;\n\n    font-size: var(--font-size-lg);\n    gap: 4px;\n\n    &:has(.icon) {\n      padding: 4px 12px;\n    }\n  }\n\n  .default:not(.disabled) {\n    --btn-outline-color: var(--primary-outline);\n    --btn-color: var(--text-color);\n    --btn-bg: var(--component-bg);\n    --btn-border: var(--border-color);\n    --btn-hover-color: var(--primary-hover);\n    --btn-active-color: var(--primary-active);\n  }\n  ${btnColor('primary')}\n  ${btnColor('error')}\n  ${btnColor('success')}\n  ${btnColor('warning')}\n  .fill {\n    &:not(.disabled, .default) {\n      .label {\n        color: #fff !important;\n      }\n\n      &:hover {\n        --btn-bg: var(--btn-hover-color) !important;\n      }\n\n      &:active {\n        --btn-bg: var(--btn-active-color) !important;\n      }\n    }\n  }\n\n  .fill.danger.default {\n    .label {\n      color: #fff !important;\n    }\n  }\n\n  .dashed {\n    border-style: dashed;\n  }\n\n  .link {\n    --btn-bg: transparent !important;\n    --btn-border: transparent !important;\n\n    border-color: transparent !important;\n    background-color: transparent !important;\n\n    &::after {\n      content: none;\n    }\n  }\n\n  .flat {\n    --btn-border: transparent !important;\n\n    background-color: transparent;\n\n    &:not(.disabled, .link).default {\n      --btn-hover-bg: rgb(0 0 0 / 6%);\n    }\n  }\n\n  .ghost {\n    background-color: transparent !important;\n  }\n\n  .circle {\n    border-radius: 50% !important;\n    padding: 0;\n    min-inline-size: var(--btn-size);\n    max-inline-size: var(--btn-size);\n    min-block-size: var(--btn-size);\n    max-block-size: var(--btn-size);\n    text-align: center;\n    line-height: var(--btn-size);\n  }\n\n  .block {\n    inline-size: 100%;\n  }\n\n  .without:not(.link, .flat)::before {\n    animation: btn-wave-effect var(--transition-duration) cubic-bezier(1, 1, 1, 1);\n    position: absolute;\n    z-index: -1;\n    display: block;\n    border-radius: inherit;\n    opacity: 0.2;\n    box-shadow: 0 0 0 0 var(--btn-outline-color);\n    inset: 0;\n    animation-fill-mode: forwards;\n    content: '';\n    pointer-events: none;\n  }\n\n  @keyframes btn-wave-effect {\n    0% {\n      opacity: 1;\n      box-shadow: 0 0 0 var(--btn-hover-color);\n    }\n\n    /* 25% {\n      opacity: 1;\n      box-shadow: 0 0 0 4px var(--btn-hover-color);\n    } */\n\n    100% {\n      opacity: 0;\n      box-shadow: 0 0 0 6px var(--btn-outline-color);\n    }\n  }\n`;\n"],"names":["style","btnColor","type","_cls","fillCls","css"],"mappings":"kGA+BaA,6CAAAA,qBA/BO,eAGpB,SAASC,EAASC,CAAyB,EACzC,IAAIC,EAAO,CAAC,CAAC,EAAED,EAAK,CAAC,CACnBE,EAAU,CAAC,CAAC,EAAEF,EAAK,KAAK,CAAC,CAO3B,MALa,UAATA,IACFC,EAAO,CAAC,CAAC,EAAED,EAAK,QAAQ,CAAC,CACzBE,EAAU,CAAC,CAAC,EAAEF,EAAK,kBAAkB,CAAC,EAGjCG,GAAAA,KAAG,CAAA,CAAC;IACT,EAAEF,EAAK;0BACe,EAAED,EAAK;sBACX,EAAEA,EAAK;;+BAEE,EAAEA,EAAK;gCACN,EAAEA,EAAK;iCACN,EAAEA,EAAK;yBACf,EAAEA,EAAK;;IAE5B,EAAEE,EAAQ;sBACQ,EAAEF,EAAK;0BACH,EAAEA,EAAK;4BACL,EAAEA,EAAK;6BACN,EAAEA,EAAK;;EAElC,CAAC,AACH,CAEO,MAAMF,EAAQK,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwHvB,EAAEJ,EAAS,WAAW;EACtB,EAAEA,EAAS,SAAS;EACpB,EAAEA,EAAS,WAAW;EACtB,EAAEA,EAAS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGxB,CAAC"}
+{"version":3,"sources":["../../components/button/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nimport type { ButtonProps } from '.';\n\nfunction btnColor(type: ButtonProps['type']): string {\n  let _cls = `.${type}`,\n    fillCls = `.${type}.fill`;\n\n  if (type === 'error') {\n    _cls = `.${type},.danger`;\n    fillCls = `.${type}.fill,.danger.fill`;\n  }\n\n  return css`\n    ${_cls}:not(.disabled) {\n      --btn-border: var(--${type}-border);\n      --btn-bg: var(--${type}-selection);\n      --btn-hover-bg: var(--btn-bg);\n      --btn-hover-color: var(--${type}-hover);\n      --btn-active-color: var(--${type}-active);\n      --btn-outline-color: var(--${type}-outline);\n      --btn-color: var(--${type}-color);\n    }\n    ${fillCls} {\n      --btn-bg: var(--${type}-color);\n      --btn-border: var(--${type}-color);\n      --btn-hover-bg: var(--${type}-hover);\n      --btn-active-bg: var(--${type}-active);\n    }\n  `;\n}\n\nexport const style = css`\n  .btn,\n  .label {\n    transition-duration: var(--transition-duration);\n  }\n\n  .label {\n    display: block;\n    line-height: normal;\n    overflow: hidden;\n    text-align: center;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    transition-property: color;\n  }\n\n  .btn {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--btn-border);\n    border-radius: var(--border-radius);\n    padding: 0 16px;\n    inline-size: fit-content;\n    min-inline-size: var(--btn-size);\n    block-size: fit-content;\n    min-block-size: var(--btn-size);\n    font-size: var(--font-size);\n    color: var(--btn-color);\n    background-color: var(--btn-bg);\n    outline-offset: 4px;\n    gap: 3px;\n    line-height: 1;\n    cursor: pointer;\n    transition-property: color, background-color, border-color, width, height, transform;\n    touch-action: manipulation;\n    box-sizing: border-box;\n    user-select: none;\n    outline: none;\n\n    &:has(.icon) {\n      padding: 4px 10px;\n    }\n\n    &:not(.disabled) {\n      &:active {\n        transform: scale(0.98);\n\n        .label {\n          color: var(--btn-active-color);\n        }\n\n        &:not(.link, .flat) {\n          border-color: var(--btn-active-color);\n        }\n\n        &:not(.link) {\n          background-color: var(--btn-hover-bg);\n        }\n      }\n\n      &:hover:not(.link) {\n        background-color: var(--btn-hover-bg);\n      }\n\n      &:hover:not(.link, .flat),\n      &:focus:not(.link, .flat) {\n        border-color: var(--btn-hover-color);\n      }\n\n      &:hover .label,\n      &:focus .label {\n        color: var(--btn-hover-color);\n      }\n    }\n\n    &.disabled {\n      --btn-color: var(--disable-color);\n      --btn-bg: var(--disable-bg);\n      --btn-border: var(--disable-border);\n\n      cursor: not-allowed;\n    }\n  }\n\n  .normal {\n    --btn-size: 32px;\n  }\n\n  .small {\n    --btn-size: 24px;\n\n    gap: 2px;\n    padding: 0 7px;\n    font-size: var(--font-size-xs);\n\n    &:has(.icon) {\n      padding: 4px 5px;\n    }\n  }\n\n  .large {\n    --btn-size: 40px;\n\n    font-size: var(--font-size-lg);\n    gap: 4px;\n\n    &:has(.icon) {\n      padding: 4px 12px;\n    }\n  }\n\n  .default:not(.disabled) {\n    --btn-outline-color: var(--primary-outline);\n    --btn-color: var(--text-color);\n    --btn-bg: var(--component-bg);\n    --btn-border: var(--border-color);\n    --btn-hover-color: var(--primary-hover);\n    --btn-active-color: var(--primary-active);\n  }\n\n  ${btnColor('primary')}\n  ${btnColor('error')}\n  ${btnColor('success')}\n  ${btnColor('warning')}\n  .fill {\n    &:not(.disabled, .default) {\n      .label {\n        color: #fff !important;\n      }\n\n      &:hover {\n        --btn-bg: var(--btn-hover-color) !important;\n      }\n\n      &:active {\n        --btn-bg: var(--btn-active-color) !important;\n      }\n    }\n  }\n\n  .fill.danger.default {\n    .label {\n      color: #fff !important;\n    }\n  }\n\n  .dashed {\n    border-style: dashed;\n  }\n\n  .link {\n    --btn-bg: transparent !important;\n    --btn-border: transparent !important;\n\n    border-color: transparent !important;\n    background-color: transparent !important;\n\n    &::after {\n      content: none;\n    }\n  }\n\n  .flat {\n    --btn-border: transparent !important;\n\n    background-color: transparent;\n\n    &:not(.disabled, .link).default {\n      --btn-hover-bg: rgb(0 0 0 / 6%);\n    }\n  }\n\n  .ghost {\n    background-color: transparent !important;\n  }\n\n  .circle {\n    border-radius: 50% !important;\n    padding: 0;\n    min-inline-size: var(--btn-size);\n    max-inline-size: var(--btn-size);\n    min-block-size: var(--btn-size);\n    max-block-size: var(--btn-size);\n    text-align: center;\n    line-height: var(--btn-size);\n  }\n\n  .block {\n    inline-size: 100%;\n  }\n\n  .without:not(.link, .flat)::before {\n    animation: btn-wave-effect var(--transition-duration) cubic-bezier(1, 1, 1, 1);\n    position: absolute;\n    z-index: -1;\n    display: block;\n    border-radius: inherit;\n    opacity: 0.2;\n    box-shadow: 0 0 0 0 var(--btn-outline-color);\n    inset: 0;\n    animation-fill-mode: forwards;\n    content: '';\n    pointer-events: none;\n  }\n\n  @keyframes btn-wave-effect {\n    0% {\n      opacity: 1;\n      box-shadow: 0 0 0 var(--btn-hover-color);\n    }\n\n    /* 25% {\n      opacity: 1;\n      box-shadow: 0 0 0 4px var(--btn-hover-color);\n    } */\n\n    100% {\n      opacity: 0;\n      box-shadow: 0 0 0 6px var(--btn-outline-color);\n    }\n  }\n`;\n"],"names":["style","btnColor","type","_cls","fillCls","css"],"mappings":"kGAgCaA,6CAAAA,qBAhCO,eAIpB,SAASC,EAASC,CAAyB,EACzC,IAAIC,EAAO,CAAC,CAAC,EAAED,EAAK,CAAC,CACnBE,EAAU,CAAC,CAAC,EAAEF,EAAK,KAAK,CAAC,CAO3B,MALa,UAATA,IACFC,EAAO,CAAC,CAAC,EAAED,EAAK,QAAQ,CAAC,CACzBE,EAAU,CAAC,CAAC,EAAEF,EAAK,kBAAkB,CAAC,EAGjCG,GAAAA,KAAG,CAAA,CAAC;IACT,EAAEF,EAAK;0BACe,EAAED,EAAK;sBACX,EAAEA,EAAK;;+BAEE,EAAEA,EAAK;gCACN,EAAEA,EAAK;iCACN,EAAEA,EAAK;yBACf,EAAEA,EAAK;;IAE5B,EAAEE,EAAQ;sBACQ,EAAEF,EAAK;0BACH,EAAEA,EAAK;4BACL,EAAEA,EAAK;6BACN,EAAEA,EAAK;;EAElC,CAAC,AACH,CAEO,MAAMF,EAAQK,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyHvB,EAAEJ,EAAS,WAAW;EACtB,EAAEA,EAAS,SAAS;EACpB,EAAEA,EAAS,WAAW;EACtB,EAAEA,EAAS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGxB,CAAC"}

package/lib/capture-screen/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 通用
+title: 捕获屏幕
+subtitle: n-capture-screen
+icon: 🍀
+---
+
+# 捕获、录制屏幕
+
+> 捕获、录制屏幕

package/lib/capture-screen/examples/basic.md

@@ -0,0 +1,13 @@
+---
+title: 直接使用
+description: 最简单的使用方式
+order: 1
+---
+
+```html
+<n-capture-screen></n-capture-screen>
+```
+
+```jsx
+<n-capture-screen />
+```

package/lib/capture-screen/examples/custom-save.md

@@ -0,0 +1,30 @@
+---
+title: 自定义保存录制视频方法
+description: 如果需要自定义保存视频或者对录制内容进行修改，可以通过 `onSaveRecorder` 回调函数进行操作
+order: 4
+---
+
+```html
+<n-capture-screen recorder="true" filename="自定义保存录制视频文件名"></n-capture-screen>
+<script>
+  const el = container.querySelector('n-capture-screen');
+
+  el.addEventListener('saverecorder', function (e) {
+    const { blob, fileName } = e.detail;
+    console.log('停止录制', fileName, 'size:', (blob.size / 1048576).toFixed(2) + 'mb');
+    // save event
+  });
+</script>
+```
+
+```jsx
+<n-capture-screen
+  recorder
+  filename="自定义保存录制视频文件名"
+  onSaveRecorder={(e) => {
+    const { blob, fileName } = e.detail;
+    console.log('停止录制', fileName, 'size:', (blob.size / 1048576).toFixed(2) + 'mb');
+    // save event
+  }}
+/>
+```

package/lib/capture-screen/examples/preview.md

@@ -0,0 +1,13 @@
+---
+title: 捕获屏幕时预览
+description: 要想在预览捕获的图像，可以设置 `preview`属性;
+order: 2
+---
+
+```html
+<n-capture-screen preview="true"></n-capture-screen>
+```
+
+```jsx
+<n-capture-screen preview />
+```

package/lib/capture-screen/examples/recorder-save.md

@@ -0,0 +1,13 @@
+---
+title: 录制屏幕并保存到本地
+description: 设置 `recorder`属性, 可以在捕获时进行录制，停止录制将文件保存到本地
+order: 3
+---
+
+```html
+<n-capture-screen recorder="true"></n-capture-screen>
+```
+
+```jsx
+<n-capture-screen recorder />
+```

package/lib/capture-screen/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return h}});const e=require("solid-js/web"),t=require("solid-js"),r=s(require("@moneko/common/lib/downloadBlob")),o=s(require("@moneko/common/lib/isFunction")),n=require("@moneko/css"),a=require("solid-element"),c=require("./style");require("../button");const i=s(require("../theme"));function s(e){return e&&e.__esModule?e:{default:e}}const d=(0,e.template)("<style> "),l=(0,e.template)("<style>"),u=(0,e.template)('<n-button class="btn">',!0,!1),p=(0,e.template)('<n-button type="error" class="btn">',!0,!1),v=(0,e.template)('<div class="record"><n-button class="btn"><span>',!0,!1),m=(0,e.template)('<div class="view"><span></span><video autoplay>'),f=(0,e.template)('<div><div class="controller"><n-button class="btn">',!0,!1),g={video:!0,audio:{echoCancellation:!0,noiseSuppression:!0,sampleRate:44100}},w={inactive:"primary",paused:"warning",recording:"success"};function C(a){let s;let{baseStyle:C}=i.default,h=(0,t.mergeProps)({options:g,captureScreenText:"捕获屏幕",stopCaptureText:"停止捕获",startRecorderText:"开始录制",stopRecorderText:"停止录制",pausedRecorderText:"暂停录制",recorderingText:"录制中",onErrorRecorder:null},a),[S,R]=(0,t.splitProps)(h,["options","preview","controls","recorder","filename","captureScreenText","stopCaptureText","startRecorderText","stopRecorderText","pausedRecorderText","recorderingText","onErrorRecorder","onStopRecorder","onStartRecorder","onStopCapture","onStartCapture","onRecorderDataAvailable","onErrorCapture","onSaveRecorder","class","css"]),E=[],[b,x]=(0,t.createSignal)(null),[T,k]=(0,t.createSignal)(null),[_,y]=(0,t.createSignal)("inactive");function $(){let e=(0,t.untrack)(b);if(e){switch((0,o.default)(S.onStartRecorder)&&S.onStartRecorder(e.state),e.state){case"inactive":e.start();break;case"paused":e.resume();break;default:e.pause()}y(e.state)}}function q(e){E?.push(e.data),S.onRecorderDataAvailable?.(e)}function O(){let e=(0,t.untrack)(b);e&&("inactive"!==e.state&&e.stop(),y(e.state)),S.onStopRecorder?.()}function D(){if(!E?.length)return;let e=new Blob(E,{type:"video/webm"}),t=S.filename||new Date().toISOString(),o=`${t}.webm`;E?.splice(0),S.onSaveRecorder&&S.onSaveRecorder(e,o),(0,r.default)(e,o)}function L(){O();let e=(0,t.untrack)(T);if(e){let t=e.getTracks();t?.forEach(e=>e.stop()),k(null)}S.onStopCapture?.()}async function P(){L();try{let e=await navigator.mediaDevices.getDisplayMedia({...g,...S.options});e&&(e.addEventListener("inactive",L,!1),k(e)),S.onStartCapture?.(e)}catch(e){S.onErrorCapture?.(e)}}(0,t.createEffect)(()=>{let e=T();S.preview&&s&&e&&(s.srcObject=e)}),(0,t.createEffect)(()=>{let e=T();if(e?.active){let t=new MediaRecorder(e);t.onstop=D,t.onerror=S.onErrorRecorder,t.ondataavailable=q,x(t)}else x(null)}),(0,t.onCleanup)(()=>{let e=(0,t.untrack)(b);e&&e?.state!=="inactive"&&e.stop();let r=(0,t.untrack)(T);r&&r.getTracks().forEach(e=>e.stop())});let j=(0,t.createMemo)(()=>({paused:S.pausedRecorderText,recording:S.recorderingText,inactive:S.startRecorderText})[_()]);return[(()=>{let t=d(),r=t.firstChild;return(0,e.effect)(()=>r.data=C()),t})(),(()=>{let e=l();return e.textContent=c.style,e})(),(0,e.createComponent)(t.Show,{get when(){return S.css},get children(){let t=d(),r=t.firstChild;return(0,e.effect)(()=>r.data=(0,n.css)(S.css)),t}}),(()=>{let r=f(),o=r.firstChild,a=o.firstChild;return(0,e.spread)(r,(0,e.mergeProps)({get class(){return(0,n.cx)("capture-screen",S.class)}},R),!1,!0),(0,e.addEventListener)(a,"click",P,!0),a._$owner=(0,e.getOwner)(),(0,e.insert)(a,()=>S.captureScreenText),(0,e.insert)(o,(0,e.createComponent)(t.Show,{get when(){return T()},get children(){return[(()=>{let t=u();return(0,e.addEventListener)(t,"click",L,!0),t.danger=!0,t._$owner=(0,e.getOwner)(),(0,e.insert)(t,()=>S.stopCaptureText),t})(),(0,e.createComponent)(t.Show,{get when(){return S.recorder},get children(){let r=v(),o=r.firstChild,n=o.firstChild;return(0,e.addEventListener)(o,"click",$,!0),o._$owner=(0,e.getOwner)(),(0,e.insert)(n,j),(0,e.insert)(r,(0,e.createComponent)(t.Show,{get when(){return"inactive"!==_()},get children(){let t=p();return(0,e.addEventListener)(t,"click",O,!0),t._$owner=(0,e.getOwner)(),(0,e.insert)(t,()=>S.stopRecorderText),t}}),null),(0,e.effect)(()=>o.type=w[_()]),r}})]}}),null),(0,e.insert)(r,(0,e.createComponent)(t.Show,{get when(){return(0,e.memo)(()=>!!S.preview)()&&T()},get children(){let t=m(),r=t.firstChild,o=r.nextSibling,n=s;return"function"==typeof n?(0,e.use)(n,o):s=o,(0,e.effect)(e=>{let t=!("recording"!==_()),n=!("paused"!==_()),a=S.controls&&null!==T();return t!==e._v$&&r.classList.toggle("recording",e._v$=t),n!==e._v$2&&r.classList.toggle("paused",e._v$2=n),a!==e._v$3&&(o.controls=e._v$3=a),e},{_v$:void 0,_v$2:void 0,_v$3:void 0}),t}}),null),r})()]}(0,a.customElement)("n-capture-screen",{class:void 0,css:void 0,options:void 0,preview:void 0,controls:void 0,recorder:void 0,filename:void 0,captureScreenText:void 0,stopCaptureText:void 0,startRecorderText:void 0,stopRecorderText:void 0,pausedRecorderText:void 0,recorderingText:void 0,onErrorRecorder:void 0,onStopRecorder:void 0,onStartRecorder:void 0,onRecorderDataAvailable:void 0,onErrorCapture:void 0,onStopCapture:void 0,onStartCapture:void 0,onSaveRecorder:void 0},(r,o)=>{let n=o.element,a=(0,t.mergeProps)({onErrorRecorder(e){n.dispatchEvent(new CustomEvent("errorrecorder",{detail:e}))},onStopRecorder(){n.dispatchEvent(new CustomEvent("stoprecorder",{detail:void 0}))},onStartRecorder(e){n.dispatchEvent(new CustomEvent("startrecorder",{detail:e}))},onRecorderDataAvailable(e){n.dispatchEvent(new CustomEvent("recorderdataavailable",{detail:e}))},onErrorCapture(e){n.dispatchEvent(new CustomEvent("errorcapture",{detail:e}))},onStopCapture(){n.dispatchEvent(new CustomEvent("stopcapture",{detail:void 0}))},onStartCapture(e){n.dispatchEvent(new CustomEvent("startcapture",{detail:e}))},onSaveRecorder(e,t){n.dispatchEvent(new CustomEvent("saverecorder",{detail:[e,t]}))}},r);return(0,e.createComponent)(C,a)});const h=C;(0,e.delegateEvents)(["click"]);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return h}});const e=require("solid-js/web"),t=require("solid-js"),r=s(require("@moneko/common/lib/downloadBlob")),o=s(require("@moneko/common/lib/isFunction")),n=require("@moneko/css"),a=require("solid-element"),c=s(require("../theme")),i=require("./style");function s(e){return e&&e.__esModule?e:{default:e}}require("../button");const d=(0,e.template)("<style> "),l=(0,e.template)("<style>"),u=(0,e.template)('<n-button class="btn">',!0,!1),p=(0,e.template)('<n-button type="error" class="btn">',!0,!1),v=(0,e.template)('<div class="record"><n-button class="btn"><span>',!0,!1),m=(0,e.template)('<div class="view"><span></span><video autoplay>'),f=(0,e.template)('<div><div class="controller"><n-button class="btn">',!0,!1),g={video:!0,audio:{echoCancellation:!0,noiseSuppression:!0,sampleRate:44100}},w={inactive:"primary",paused:"warning",recording:"success"};function C(a){let s;let{baseStyle:C}=c.default,h=(0,t.mergeProps)({options:g,captureScreenText:"捕获屏幕",stopCaptureText:"停止捕获",startRecorderText:"开始录制",stopRecorderText:"停止录制",pausedRecorderText:"暂停录制",recorderingText:"录制中",onErrorRecorder:null},a),[S,R]=(0,t.splitProps)(h,["options","preview","controls","recorder","filename","captureScreenText","stopCaptureText","startRecorderText","stopRecorderText","pausedRecorderText","recorderingText","onErrorRecorder","onStopRecorder","onStartRecorder","onStopCapture","onStartCapture","onRecorderDataAvailable","onErrorCapture","onSaveRecorder","class","css"]),E=[],[b,x]=(0,t.createSignal)(null),[T,k]=(0,t.createSignal)(null),[_,y]=(0,t.createSignal)("inactive");function $(){let e=(0,t.untrack)(b);if(e){switch((0,o.default)(S.onStartRecorder)&&S.onStartRecorder(e.state),e.state){case"inactive":e.start();break;case"paused":e.resume();break;default:e.pause()}y(e.state)}}function q(e){E.push(e.data),S.onRecorderDataAvailable?.(e)}function O(){let e=(0,t.untrack)(b);e&&("inactive"!==e.state&&e.stop(),y(e.state)),S.onStopRecorder?.()}function D(){if(!E.length)return;let e=new Blob(E,{type:"video/webm"}),t=S.filename||new Date().toISOString(),o=`${t}.webm`;E.splice(0),S.onSaveRecorder&&S.onSaveRecorder(e,o),(0,r.default)(e,o)}function L(){O();let e=(0,t.untrack)(T);e&&(e.getTracks().forEach(e=>{e.stop()}),k(null)),S.onStopCapture?.()}async function P(){L();try{let e=await navigator.mediaDevices.getDisplayMedia({...g,...S.options});e&&(e.addEventListener("inactive",L,!1),k(e)),S.onStartCapture?.(e)}catch(e){S.onErrorCapture?.(e)}}(0,t.createEffect)(()=>{let e=T();S.preview&&s&&e&&(s.srcObject=e)}),(0,t.createEffect)(()=>{let e=T();if(e?.active){let t=new MediaRecorder(e);t.onstop=D,t.onerror=S.onErrorRecorder,t.ondataavailable=q,x(t)}else x(null)}),(0,t.onCleanup)(()=>{let e=(0,t.untrack)(b);e&&"inactive"!==e.state&&e.stop();let r=(0,t.untrack)(T);r&&r.getTracks().forEach(e=>{e.stop()})});let j=(0,t.createMemo)(()=>({paused:S.pausedRecorderText,recording:S.recorderingText,inactive:S.startRecorderText})[_()]);return[(()=>{let t=d(),r=t.firstChild;return(0,e.effect)(()=>r.data=C()),t})(),(()=>{let e=l();return e.textContent=i.style,e})(),(0,e.createComponent)(t.Show,{get when(){return S.css},get children(){let t=d(),r=t.firstChild;return(0,e.effect)(()=>r.data=(0,n.css)(S.css)),t}}),(()=>{let r=f(),o=r.firstChild,a=o.firstChild;return(0,e.spread)(r,(0,e.mergeProps)({get class(){return(0,n.cx)("capture-screen",S.class)}},R),!1,!0),(0,e.addEventListener)(a,"click",P,!0),a._$owner=(0,e.getOwner)(),(0,e.insert)(a,()=>S.captureScreenText),(0,e.insert)(o,(0,e.createComponent)(t.Show,{get when(){return T()},get children(){return[(()=>{let t=u();return(0,e.addEventListener)(t,"click",L,!0),t.danger=!0,t._$owner=(0,e.getOwner)(),(0,e.insert)(t,()=>S.stopCaptureText),t})(),(0,e.createComponent)(t.Show,{get when(){return S.recorder},get children(){let r=v(),o=r.firstChild,n=o.firstChild;return(0,e.addEventListener)(o,"click",$,!0),o._$owner=(0,e.getOwner)(),(0,e.insert)(n,j),(0,e.insert)(r,(0,e.createComponent)(t.Show,{get when(){return"inactive"!==_()},get children(){let t=p();return(0,e.addEventListener)(t,"click",O,!0),t._$owner=(0,e.getOwner)(),(0,e.insert)(t,()=>S.stopRecorderText),t}}),null),(0,e.effect)(()=>o.type=w[_()]),r}})]}}),null),(0,e.insert)(r,(0,e.createComponent)(t.Show,{get when(){return(0,e.memo)(()=>!!S.preview)()&&T()},get children(){let t=m(),r=t.firstChild,o=r.nextSibling,n=s;return"function"==typeof n?(0,e.use)(n,o):s=o,(0,e.effect)(e=>{let t=!("recording"!==_()),n=!("paused"!==_()),a=S.controls&&null!==T();return t!==e._v$&&r.classList.toggle("recording",e._v$=t),n!==e._v$2&&r.classList.toggle("paused",e._v$2=n),a!==e._v$3&&(o.controls=e._v$3=a),e},{_v$:void 0,_v$2:void 0,_v$3:void 0}),t}}),null),r})()]}(0,a.customElement)("n-capture-screen",{class:void 0,css:void 0,options:void 0,preview:void 0,controls:void 0,recorder:void 0,filename:void 0,captureScreenText:void 0,stopCaptureText:void 0,startRecorderText:void 0,stopRecorderText:void 0,pausedRecorderText:void 0,recorderingText:void 0,onErrorRecorder:void 0,onStopRecorder:void 0,onStartRecorder:void 0,onRecorderDataAvailable:void 0,onErrorCapture:void 0,onStopCapture:void 0,onStartCapture:void 0,onSaveRecorder:void 0},(r,o)=>{let n=o.element,a=(0,t.mergeProps)({onErrorRecorder(e){n.dispatchEvent(new CustomEvent("errorrecorder",{detail:e}))},onStopRecorder(){n.dispatchEvent(new CustomEvent("stoprecorder",{detail:void 0}))},onStartRecorder(e){n.dispatchEvent(new CustomEvent("startrecorder",{detail:e}))},onRecorderDataAvailable(e){n.dispatchEvent(new CustomEvent("recorderdataavailable",{detail:e}))},onErrorCapture(e){n.dispatchEvent(new CustomEvent("errorcapture",{detail:e}))},onStopCapture(){n.dispatchEvent(new CustomEvent("stopcapture",{detail:void 0}))},onStartCapture(e){n.dispatchEvent(new CustomEvent("startcapture",{detail:e}))},onSaveRecorder(e,t){n.dispatchEvent(new CustomEvent("saverecorder",{detail:[e,t]}))}},r);return(0,e.createComponent)(C,a)});const h=C;(0,e.delegateEvents)(["click"]);
 //# sourceMappingURL=index.js.map

package/lib/capture-screen/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/capture-screen/index.tsx"],"sourcesContent":["import {\n  Show,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { downloadBlob, isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport '../button';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\ndeclare interface MediaRecorderDataAvailableEvent extends Event {\n  /** MediaRecorderDataAvailableEvent */\n  data: Any;\n}\n\nexport interface CaptureScreenProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** MediaStreamConstraints */\n  options?: MediaStreamConstraints;\n  /** 是否预览 */\n  preview?: boolean;\n  /** 预览时是否显示控制器 */\n  controls?: boolean;\n  /** 录制时配置项 */\n  recorder?: boolean;\n  /** 录制文件名称 */\n  filename?: string;\n  /** 捕获屏幕按钮文字 */\n  captureScreenText?: string;\n  /** 停止捕获按钮文字 */\n  stopCaptureText?: string;\n  /** 开始录制按钮文字 */\n  startRecorderText?: string;\n  /** 停止录制按钮文字 */\n  stopRecorderText?: string;\n  /** 暂停录制按钮文字 */\n  pausedRecorderText?: string;\n  /** 录制中按钮文字 */\n  recorderingText?: string;\n  /** 录制错误回调方法 */\n  onErrorRecorder?: (e: Event) => void;\n  /** 停止录制回调方法 */\n  onStopRecorder?: () => void;\n  /** 开始录制回调方法 */\n  onStartRecorder?: (state: MediaRecorder['state']) => void;\n  /** 记录媒体时触发 */\n  onRecorderDataAvailable?: (e: MediaRecorderDataAvailableEvent) => void;\n  /** 捕获屏幕错误回调方法 */\n  onErrorCapture?: (err: unknown) => void;\n  /** 停止捕获屏幕回调方法 */\n  onStopCapture?: () => void;\n  /** 开始捕获屏幕回调方法 */\n  onStartCapture?: (stream?: MediaStream) => void;\n  /** 自定义保存录制文件方法 */\n  onSaveRecorder?: (blob: Blob, fileName: string) => void;\n}\nexport type CaptureScreenElement = CustomElement<\n  CaptureScreenProps,\n  | 'onErrorRecorder'\n  | 'onStopRecorder'\n  | 'onStartRecorder'\n  | 'onRecorderDataAvailable'\n  | 'onErrorCapture'\n  | 'onStopCapture'\n  | 'onStartCapture'\n  | 'onSaveRecorder'\n>;\n\nconst displayMediaOptions: MediaStreamConstraints = {\n  video: true,\n  audio: {\n    echoCancellation: true,\n    noiseSuppression: true,\n    sampleRate: 44100,\n  },\n};\n\nconst btnStatusDic: Record<MediaRecorder['state'], 'primary' | 'warning' | 'success'> = {\n  inactive: 'primary',\n  paused: 'warning',\n  recording: 'success',\n};\n\nfunction CaptureScreen(_: CaptureScreenProps) {\n  const { baseStyle } = theme;\n  const _props = mergeProps(\n    {\n      options: displayMediaOptions,\n      captureScreenText: '捕获屏幕',\n      stopCaptureText: '停止捕获',\n      startRecorderText: '开始录制',\n      stopRecorderText: '停止录制',\n      pausedRecorderText: '暂停录制',\n      recorderingText: '录制中',\n      onErrorRecorder: null,\n    },\n    _,\n  );\n  const [local, props] = splitProps(_props, [\n    'options',\n    'preview',\n    'controls',\n    'recorder',\n    'filename',\n    'captureScreenText',\n    'stopCaptureText',\n    'startRecorderText',\n    'stopRecorderText',\n    'pausedRecorderText',\n    'recorderingText',\n    'onErrorRecorder',\n    'onStopRecorder',\n    'onStartRecorder',\n    'onStopCapture',\n    'onStartCapture',\n    'onRecorderDataAvailable',\n    'onErrorCapture',\n    'onSaveRecorder',\n    'class',\n    'css',\n  ]);\n  let videoElem: HTMLVideoElement | undefined;\n  const chunks: Blob[] = [];\n  const [mediaRecorder, setMediaRecorder] = createSignal<MediaRecorder | null>(null);\n  const [mediaStream, setMediaStream] = createSignal<MediaStream | null>(null);\n  const [recordState, setRecordState] = createSignal<MediaRecorder['state']>('inactive');\n\n  // 开始录制\n  function handleStartRecorder() {\n    const mr = untrack(mediaRecorder);\n\n    if (mr) {\n      if (isFunction(local.onStartRecorder)) {\n        local.onStartRecorder(mr.state);\n      }\n      switch (mr.state) {\n        case 'inactive': // 不活跃\n          mr.start();\n          break;\n        case 'paused': // 暂停\n          mr.resume();\n          break;\n        // case 'recording': // 录制中\n        default:\n          mr.pause();\n          break;\n      }\n      setRecordState(mr.state);\n    }\n  }\n  function handleRecorderDataAvailable(e: MediaRecorderDataAvailableEvent) {\n    chunks?.push(e.data as Blob);\n    local.onRecorderDataAvailable?.(e);\n  }\n  // 停止录制\n  function stopRecorder() {\n    const mr = untrack(mediaRecorder);\n\n    // 未录制时不需要停止\n    if (mr) {\n      if (mr.state !== 'inactive') {\n        mr.stop();\n      }\n      setRecordState(mr.state);\n    }\n    local.onStopRecorder?.();\n  }\n  function handleSaveRecorder() {\n    if (!chunks?.length) return;\n    // 将录制内容保存到本地\n    const blob: Blob = new Blob(chunks, {\n      type: 'video/webm',\n    });\n    const name = local.filename || new Date().toISOString();\n    const fileName = `${name}.webm`;\n\n    chunks?.splice(0);\n    if (local.onSaveRecorder) {\n      local.onSaveRecorder(blob, fileName);\n    }\n    // 保存文件\n    downloadBlob(blob, fileName);\n  }\n\n  // 停止捕获屏幕\n  function stopCapture() {\n    // 如果在录制则先停止\n    stopRecorder();\n    const ms = untrack(mediaStream);\n\n    if (ms) {\n      const tracks = ms.getTracks();\n\n      tracks?.forEach((track: MediaStreamTrack) => track.stop());\n      setMediaStream(null);\n    }\n    local.onStopCapture?.();\n  }\n\n  // 开始捕获屏幕\n  async function startCapture() {\n    stopCapture();\n    try {\n      const stream = await navigator.mediaDevices.getDisplayMedia({\n        ...displayMediaOptions,\n        ...local.options,\n      });\n\n      if (stream) {\n        // 监听停止捕获屏幕\n        stream.addEventListener('inactive', stopCapture, false);\n        setMediaStream(stream);\n      }\n      local.onStartCapture?.(stream);\n    } catch (err) {\n      local.onErrorCapture?.(err);\n    }\n  }\n\n  createEffect(() => {\n    const ms = mediaStream();\n\n    if (local.preview && videoElem && ms) {\n      videoElem.srcObject = ms;\n    }\n  });\n\n  createEffect(() => {\n    const ms = mediaStream();\n\n    if (ms?.active) {\n      const recorderInstance = new MediaRecorder(ms);\n\n      recorderInstance.onstop = handleSaveRecorder;\n      recorderInstance.onerror = local.onErrorRecorder;\n      // 每次timeslice记录毫秒级媒体时（或未记录整个媒体时，如果timeslice未指定）定期触发\n      recorderInstance.ondataavailable = handleRecorderDataAvailable;\n      setMediaRecorder(recorderInstance);\n    } else {\n      setMediaRecorder(null);\n    }\n  });\n\n  onCleanup(() => {\n    const mr = untrack(mediaRecorder);\n\n    // 未录制时不需要停止\n    if (mr && mr?.state !== 'inactive') {\n      mr.stop();\n    }\n    const ms = untrack(mediaStream);\n\n    if (ms) {\n      const tracks = ms.getTracks();\n\n      tracks.forEach((track: MediaStreamTrack) => track.stop());\n    }\n  });\n  const recorderText = createMemo(() => {\n    return {\n      paused: local.pausedRecorderText,\n      recording: local.recorderingText,\n      inactive: local.startRecorderText,\n    }[recordState()];\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <div class={cx('capture-screen', local.class)} {...props}>\n        <div class=\"controller\">\n          <n-button onClick={startCapture} class=\"btn\">\n            {local.captureScreenText}\n          </n-button>\n          <Show when={mediaStream()}>\n            <>\n              <n-button danger={true} onClick={stopCapture} class=\"btn\">\n                {local.stopCaptureText}\n              </n-button>\n              <Show when={local.recorder}>\n                <div class=\"record\">\n                  <n-button\n                    type={btnStatusDic[recordState()]}\n                    onClick={handleStartRecorder}\n                    class=\"btn\"\n                  >\n                    <span>{recorderText()}</span>\n                  </n-button>\n                  <Show when={recordState() !== 'inactive'}>\n                    <n-button type=\"error\" onClick={stopRecorder} class=\"btn\">\n                      {local.stopRecorderText}\n                    </n-button>\n                  </Show>\n                </div>\n              </Show>\n            </>\n          </Show>\n        </div>\n        <Show when={local.preview && mediaStream()}>\n          <div class=\"view\">\n            <span\n              classList={{\n                recording: recordState() === 'recording',\n                paused: recordState() === 'paused',\n              }}\n            />\n            <video ref={videoElem} autoplay controls={local.controls && mediaStream() !== null} />\n          </div>\n        </Show>\n      </div>\n    </>\n  );\n}\n\ncustomElement<CaptureScreenProps>(\n  'n-capture-screen',\n  {\n    class: void 0,\n    css: void 0,\n    options: void 0,\n    preview: void 0,\n    controls: void 0,\n    recorder: void 0,\n    filename: void 0,\n    captureScreenText: void 0,\n    stopCaptureText: void 0,\n    startRecorderText: void 0,\n    stopRecorderText: void 0,\n    pausedRecorderText: void 0,\n    recorderingText: void 0,\n    onErrorRecorder: void 0,\n    onStopRecorder: void 0,\n    onStartRecorder: void 0,\n    onRecorderDataAvailable: void 0,\n    onErrorCapture: void 0,\n    onStopCapture: void 0,\n    onStartCapture: void 0,\n    onSaveRecorder: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onErrorRecorder(e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('errorrecorder', {\n              detail: e,\n            }),\n          );\n        },\n        onStopRecorder() {\n          el.dispatchEvent(\n            new CustomEvent('stoprecorder', {\n              detail: void 0,\n            }),\n          );\n        },\n        onStartRecorder(state: MediaRecorder['state']) {\n          el.dispatchEvent(\n            new CustomEvent('startrecorder', {\n              detail: state,\n            }),\n          );\n        },\n        onRecorderDataAvailable(e: MediaRecorderDataAvailableEvent) {\n          el.dispatchEvent(\n            new CustomEvent('recorderdataavailable', {\n              detail: e,\n            }),\n          );\n        },\n        onErrorCapture(e: unknown) {\n          el.dispatchEvent(\n            new CustomEvent('errorcapture', {\n              detail: e,\n            }),\n          );\n        },\n        onStopCapture() {\n          el.dispatchEvent(\n            new CustomEvent('stopcapture', {\n              detail: void 0,\n            }),\n          );\n        },\n        onStartCapture(stream?: MediaStream) {\n          el.dispatchEvent(\n            new CustomEvent('startcapture', {\n              detail: stream,\n            }),\n          );\n        },\n        onSaveRecorder(blob: Blob, fileName: string) {\n          el.dispatchEvent(\n            new CustomEvent('saverecorder', {\n              detail: [blob, fileName],\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    return <CaptureScreen {...props} />;\n  },\n);\n\nexport default CaptureScreen;\n"],"names":["displayMediaOptions","video","audio","echoCancellation","noiseSuppression","sampleRate","btnStatusDic","inactive","paused","recording","CaptureScreen","_","videoElem","baseStyle","theme","_props","mergeProps","options","captureScreenText","stopCaptureText","startRecorderText","stopRecorderText","pausedRecorderText","recorderingText","onErrorRecorder","local","props","splitProps","chunks","mediaRecorder","setMediaRecorder","createSignal","mediaStream","setMediaStream","recordState","setRecordState","handleStartRecorder","mr","untrack","isFunction","onStartRecorder","state","start","resume","pause","handleRecorderDataAvailable","e","push","data","onRecorderDataAvailable","stopRecorder","stop","onStopRecorder","handleSaveRecorder","length","blob","Blob","type","name","filename","Date","toISOString","fileName","splice","onSaveRecorder","downloadBlob","stopCapture","ms","tracks","getTracks","forEach","track","onStopCapture","startCapture","stream","navigator","mediaDevices","getDisplayMedia","addEventListener","onStartCapture","err","onErrorCapture","createEffect","preview","srcObject","active","recorderInstance","MediaRecorder","onstop","onerror","ondataavailable","onCleanup","recorderText","createMemo","style","Show","css","cx","class","recorder","controls","customElement","opt","el","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}
+{"version":3,"sources":["../../components/capture-screen/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  Show,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { downloadBlob, 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\nimport '../button';\n\ndeclare interface MediaRecorderDataAvailableEvent extends Event {\n  /** MediaRecorderDataAvailableEvent */\n  data: Any;\n}\n\nexport interface CaptureScreenProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** MediaStreamConstraints */\n  options?: MediaStreamConstraints;\n  /** 是否预览 */\n  preview?: boolean;\n  /** 预览时是否显示控制器 */\n  controls?: boolean;\n  /** 录制时配置项 */\n  recorder?: boolean;\n  /** 录制文件名称 */\n  filename?: string;\n  /** 捕获屏幕按钮文字 */\n  captureScreenText?: string;\n  /** 停止捕获按钮文字 */\n  stopCaptureText?: string;\n  /** 开始录制按钮文字 */\n  startRecorderText?: string;\n  /** 停止录制按钮文字 */\n  stopRecorderText?: string;\n  /** 暂停录制按钮文字 */\n  pausedRecorderText?: string;\n  /** 录制中按钮文字 */\n  recorderingText?: string;\n  /** 录制错误回调方法 */\n  onErrorRecorder?: (e: Event) => void;\n  /** 停止录制回调方法 */\n  onStopRecorder?: () => void;\n  /** 开始录制回调方法 */\n  onStartRecorder?: (state: MediaRecorder['state']) => void;\n  /** 记录媒体时触发 */\n  onRecorderDataAvailable?: (e: MediaRecorderDataAvailableEvent) => void;\n  /** 捕获屏幕错误回调方法 */\n  onErrorCapture?: (err: unknown) => void;\n  /** 停止捕获屏幕回调方法 */\n  onStopCapture?: () => void;\n  /** 开始捕获屏幕回调方法 */\n  onStartCapture?: (stream?: MediaStream) => void;\n  /** 自定义保存录制文件方法 */\n  onSaveRecorder?: (blob: Blob, fileName: string) => void;\n}\nexport type CaptureScreenElement = CustomElement<\n  CaptureScreenProps,\n  | 'onErrorRecorder'\n  | 'onStopRecorder'\n  | 'onStartRecorder'\n  | 'onRecorderDataAvailable'\n  | 'onErrorCapture'\n  | 'onStopCapture'\n  | 'onStartCapture'\n  | 'onSaveRecorder'\n>;\n\nconst displayMediaOptions: MediaStreamConstraints = {\n  video: true,\n  audio: {\n    echoCancellation: true,\n    noiseSuppression: true,\n    sampleRate: 44100,\n  },\n};\n\nconst btnStatusDic: Record<MediaRecorder['state'], 'primary' | 'warning' | 'success'> = {\n  inactive: 'primary',\n  paused: 'warning',\n  recording: 'success',\n};\n\nfunction CaptureScreen(_: CaptureScreenProps) {\n  const { baseStyle } = theme;\n  const _props = mergeProps(\n    {\n      options: displayMediaOptions,\n      captureScreenText: '捕获屏幕',\n      stopCaptureText: '停止捕获',\n      startRecorderText: '开始录制',\n      stopRecorderText: '停止录制',\n      pausedRecorderText: '暂停录制',\n      recorderingText: '录制中',\n      onErrorRecorder: null,\n    },\n    _,\n  );\n  const [local, props] = splitProps(_props, [\n    'options',\n    'preview',\n    'controls',\n    'recorder',\n    'filename',\n    'captureScreenText',\n    'stopCaptureText',\n    'startRecorderText',\n    'stopRecorderText',\n    'pausedRecorderText',\n    'recorderingText',\n    'onErrorRecorder',\n    'onStopRecorder',\n    'onStartRecorder',\n    'onStopCapture',\n    'onStartCapture',\n    'onRecorderDataAvailable',\n    'onErrorCapture',\n    'onSaveRecorder',\n    'class',\n    'css',\n  ]);\n  let videoElem: HTMLVideoElement | undefined;\n  const chunks: Blob[] = [];\n  const [mediaRecorder, setMediaRecorder] = createSignal<MediaRecorder | null>(null);\n  const [mediaStream, setMediaStream] = createSignal<MediaStream | null>(null);\n  const [recordState, setRecordState] = createSignal<MediaRecorder['state']>('inactive');\n\n  // 开始录制\n  function handleStartRecorder() {\n    const mr = untrack(mediaRecorder);\n\n    if (mr) {\n      if (isFunction(local.onStartRecorder)) {\n        local.onStartRecorder(mr.state);\n      }\n      switch (mr.state) {\n        case 'inactive': // 不活跃\n          mr.start();\n          break;\n        case 'paused': // 暂停\n          mr.resume();\n          break;\n        // case 'recording': // 录制中\n        default:\n          mr.pause();\n          break;\n      }\n      setRecordState(mr.state);\n    }\n  }\n  function handleRecorderDataAvailable(e: MediaRecorderDataAvailableEvent) {\n    chunks.push(e.data as Blob);\n    local.onRecorderDataAvailable?.(e);\n  }\n  // 停止录制\n  function stopRecorder() {\n    const mr = untrack(mediaRecorder);\n\n    // 未录制时不需要停止\n    if (mr) {\n      if (mr.state !== 'inactive') {\n        mr.stop();\n      }\n      setRecordState(mr.state);\n    }\n    local.onStopRecorder?.();\n  }\n  function handleSaveRecorder() {\n    if (!chunks.length) return;\n    // 将录制内容保存到本地\n    const blob: Blob = new Blob(chunks, {\n      type: 'video/webm',\n    });\n    const name = local.filename || new Date().toISOString();\n    const fileName = `${name}.webm`;\n\n    chunks.splice(0);\n    if (local.onSaveRecorder) {\n      local.onSaveRecorder(blob, fileName);\n    }\n    // 保存文件\n    downloadBlob(blob, fileName);\n  }\n\n  // 停止捕获屏幕\n  function stopCapture() {\n    // 如果在录制则先停止\n    stopRecorder();\n    const ms = untrack(mediaStream);\n\n    if (ms) {\n      const tracks = ms.getTracks();\n\n      tracks.forEach((track: MediaStreamTrack) => {\n        track.stop();\n      });\n      setMediaStream(null);\n    }\n    local.onStopCapture?.();\n  }\n\n  // 开始捕获屏幕\n  async function startCapture() {\n    stopCapture();\n    try {\n      const stream = await navigator.mediaDevices.getDisplayMedia({\n        ...displayMediaOptions,\n        ...local.options,\n      });\n\n      if (stream) {\n        // 监听停止捕获屏幕\n        stream.addEventListener('inactive', stopCapture, false);\n        setMediaStream(stream);\n      }\n      local.onStartCapture?.(stream);\n    } catch (err) {\n      local.onErrorCapture?.(err);\n    }\n  }\n\n  createEffect(() => {\n    const ms = mediaStream();\n\n    if (local.preview && videoElem && ms) {\n      videoElem.srcObject = ms;\n    }\n  });\n\n  createEffect(() => {\n    const ms = mediaStream();\n\n    if (ms?.active) {\n      const recorderInstance = new MediaRecorder(ms);\n\n      recorderInstance.onstop = handleSaveRecorder;\n      recorderInstance.onerror = local.onErrorRecorder;\n      // 每次timeslice记录毫秒级媒体时（或未记录整个媒体时，如果timeslice未指定）定期触发\n      recorderInstance.ondataavailable = handleRecorderDataAvailable;\n      setMediaRecorder(recorderInstance);\n    } else {\n      setMediaRecorder(null);\n    }\n  });\n\n  onCleanup(() => {\n    const mr = untrack(mediaRecorder);\n\n    // 未录制时不需要停止\n    if (mr && mr.state !== 'inactive') {\n      mr.stop();\n    }\n    const ms = untrack(mediaStream);\n\n    if (ms) {\n      const tracks = ms.getTracks();\n\n      tracks.forEach((track: MediaStreamTrack) => {\n        track.stop();\n      });\n    }\n  });\n  const recorderText = createMemo(() => {\n    return {\n      paused: local.pausedRecorderText,\n      recording: local.recorderingText,\n      inactive: local.startRecorderText,\n    }[recordState()];\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <div class={cx('capture-screen', local.class)} {...props}>\n        <div class=\"controller\">\n          <n-button onClick={startCapture} class=\"btn\">\n            {local.captureScreenText}\n          </n-button>\n          <Show when={mediaStream()}>\n            <>\n              <n-button danger={true} onClick={stopCapture} class=\"btn\">\n                {local.stopCaptureText}\n              </n-button>\n              <Show when={local.recorder}>\n                <div class=\"record\">\n                  <n-button\n                    type={btnStatusDic[recordState()]}\n                    onClick={handleStartRecorder}\n                    class=\"btn\"\n                  >\n                    <span>{recorderText()}</span>\n                  </n-button>\n                  <Show when={recordState() !== 'inactive'}>\n                    <n-button type=\"error\" onClick={stopRecorder} class=\"btn\">\n                      {local.stopRecorderText}\n                    </n-button>\n                  </Show>\n                </div>\n              </Show>\n            </>\n          </Show>\n        </div>\n        <Show when={local.preview && mediaStream()}>\n          <div class=\"view\">\n            <span\n              classList={{\n                recording: recordState() === 'recording',\n                paused: recordState() === 'paused',\n              }}\n            />\n            <video ref={videoElem} autoplay controls={local.controls && mediaStream() !== null} />\n          </div>\n        </Show>\n      </div>\n    </>\n  );\n}\n\ncustomElement<CaptureScreenProps>(\n  'n-capture-screen',\n  {\n    class: void 0,\n    css: void 0,\n    options: void 0,\n    preview: void 0,\n    controls: void 0,\n    recorder: void 0,\n    filename: void 0,\n    captureScreenText: void 0,\n    stopCaptureText: void 0,\n    startRecorderText: void 0,\n    stopRecorderText: void 0,\n    pausedRecorderText: void 0,\n    recorderingText: void 0,\n    onErrorRecorder: void 0,\n    onStopRecorder: void 0,\n    onStartRecorder: void 0,\n    onRecorderDataAvailable: void 0,\n    onErrorCapture: void 0,\n    onStopCapture: void 0,\n    onStartCapture: void 0,\n    onSaveRecorder: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onErrorRecorder(e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('errorrecorder', {\n              detail: e,\n            }),\n          );\n        },\n        onStopRecorder() {\n          el.dispatchEvent(\n            new CustomEvent('stoprecorder', {\n              detail: void 0,\n            }),\n          );\n        },\n        onStartRecorder(state: MediaRecorder['state']) {\n          el.dispatchEvent(\n            new CustomEvent('startrecorder', {\n              detail: state,\n            }),\n          );\n        },\n        onRecorderDataAvailable(e: MediaRecorderDataAvailableEvent) {\n          el.dispatchEvent(\n            new CustomEvent('recorderdataavailable', {\n              detail: e,\n            }),\n          );\n        },\n        onErrorCapture(e: unknown) {\n          el.dispatchEvent(\n            new CustomEvent('errorcapture', {\n              detail: e,\n            }),\n          );\n        },\n        onStopCapture() {\n          el.dispatchEvent(\n            new CustomEvent('stopcapture', {\n              detail: void 0,\n            }),\n          );\n        },\n        onStartCapture(stream?: MediaStream) {\n          el.dispatchEvent(\n            new CustomEvent('startcapture', {\n              detail: stream,\n            }),\n          );\n        },\n        onSaveRecorder(blob: Blob, fileName: string) {\n          el.dispatchEvent(\n            new CustomEvent('saverecorder', {\n              detail: [blob, fileName],\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    return <CaptureScreen {...props} />;\n  },\n);\n\nexport default CaptureScreen;\n"],"names":["displayMediaOptions","video","audio","echoCancellation","noiseSuppression","sampleRate","btnStatusDic","inactive","paused","recording","CaptureScreen","_","videoElem","baseStyle","theme","_props","mergeProps","options","captureScreenText","stopCaptureText","startRecorderText","stopRecorderText","pausedRecorderText","recorderingText","onErrorRecorder","local","props","splitProps","chunks","mediaRecorder","setMediaRecorder","createSignal","mediaStream","setMediaStream","recordState","setRecordState","handleStartRecorder","mr","untrack","isFunction","onStartRecorder","state","start","resume","pause","handleRecorderDataAvailable","e","push","data","onRecorderDataAvailable","stopRecorder","stop","onStopRecorder","handleSaveRecorder","length","blob","Blob","type","name","filename","Date","toISOString","fileName","splice","onSaveRecorder","downloadBlob","stopCapture","ms","tracks","getTracks","forEach","track","onStopCapture","startCapture","stream","navigator","mediaDevices","getDisplayMedia","addEventListener","onStartCapture","err","onErrorCapture","createEffect","preview","srcObject","active","recorderInstance","MediaRecorder","onstop","onerror","ondataavailable","onCleanup","recorderText","createMemo","style","Show","css","cx","class","recorder","controls","customElement","opt","el","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}

package/lib/carousel/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 数据展示
+title: 走马灯
+subtitle: n-carousel
+icon: 🎨
+---
+
+# 走马灯
+
+> 一组轮播的区域

package/lib/carousel/examples/autoplay.md

@@ -0,0 +1,21 @@
+---
+title: 自动切换
+description: 定时切换下一张。
+order: 2
+---
+
+```html
+<n-carousel dots="true" autoplay="3000">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</n-carousel>
+```
+
+```jsx
+<n-carousel dots autoplay={3000}>
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</n-carousel>
+```

package/lib/carousel/examples/basic.md

@@ -0,0 +1,23 @@
+---
+title: 最简单的用法
+description: 最简单的用法
+order: 1
+---
+
+```html
+<n-carousel offset="2">
+  <div>3 / 1</div>
+  <div>3 / 2</div>
+  <div>3 / 3</div>
+</n-carousel>
+```
+
+```jsx
+<n-carousel offset="2">
+  {Array(100)
+    .fill(0)
+    .map((_, i) => {
+      return <div>100 / {i + 1}</div>;
+    })}
+</n-carousel>
+```