neko-ui 2.8.21 → 2.8.23

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

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

package/es/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":["Show","createEffect","createMemo","createSignal","mergeProps","splitProps","isFunction","css","customElement","Dynamic","style","theme","Button","_","ref","baseStyle","local","other","size","type","animating","setAnimating","icon","link","tag","danger","block","fill","circle","flat","dashed","ghost","disabled","without","children","class","opt","el","element","props","childNodes","values","replaceChildren","removeAttribute"],"mappings":"oVAAA,QAASA,QAAAA,CAAI,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAChG,QAASC,MAAkB,+BAAiB,AAC5C,QAASC,OAAAA,CAAG,KAAQ,aAAc,AAClC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,WAAAA,CAAO,KAAQ,cAAe,AACvC,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAAOC,MAAW,UAAW,CA2C7B,SAASC,EAAOC,CAAc,MAqBxBC,EApBJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGJ,EAEhB,CAACK,EAAOC,EAAM,CAAGZ,EADRD,EAAW,CAAEc,KAAM,SAAUC,KAAM,SAAU,EAAGN,GACrB,CACxC,QACA,OACA,SACA,SACA,OACA,OACA,SACA,WACA,QACA,OACA,OACA,QACA,OACA,MACA,WACA,MACD,EAEK,CAACO,EAAWC,EAAa,CAAGlB,EAAa,CAAA,GAUzCmB,EAAOpB,EAAW,IAAOI,EAAWU,EAAMM,IAAI,EAAIN,EAAMM,IAAI,GAAKN,EAAMM,IAAI,EAEjF,0DAEwBP,gDACAL,UACnBV,qBAAWgB,EAAMT,GAAG,8DACCA,EAAIS,EAAMT,GAAG,UAElCE,kBACMK,4BAAAA,4BACME,EAAMO,IAAI,CAAG,IAAMP,EAAMQ,GAAG,EAAI,4CAEhC,CACT,CAACR,EAAMG,IAAI,CAAC,CAAE,CAAA,EACd,CAACH,EAAME,IAAI,CAAC,CAAE,CAAA,EACdO,OAAQT,EAAMS,MAAM,CACpBC,MAAOV,EAAMU,KAAK,CAClBC,KAAMX,EAAMW,IAAI,CAChBC,OAAQZ,EAAMY,MAAM,CACpBC,KAAMb,EAAMa,IAAI,CAChBC,OAAQd,EAAMc,MAAM,CACpBC,MAAOf,EAAMe,KAAK,CAClBR,KAAMP,EAAMO,IAAI,CAChBS,SAAUhB,EAAMgB,QAAQ,CACxBC,QAASb,GACX,yBAlCN,WACOJ,EAAMgB,QAAQ,EACjBX,EAAa,CAAA,EAEjB,iBACA,WACEA,EAAa,CAAA,EACf,wBA+BgBL,EAAMgB,QAAQ,iBAEpBf,2BAEHjB,qBAAWgB,EAAMM,IAAI,sCAEjBA,uCAIFN,EAAMkB,QAAQ,aAKzB,CAEA1B,EACE,WACA,CACE2B,MAAO,KAAK,EACZ5B,IAAK,KAAK,EACVY,KAAM,KAAK,EACXY,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,EACbP,KAAM,KAAK,EACXI,KAAM,KAAK,EACXE,IAAK,KAAK,CACZ,EACA,CAACX,EAAGuB,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBC,EAAQnC,EACZ,CACEG,IAAK8B,EAAG9B,GAAG,CACX2B,SAAU,IAAIG,EAAGG,UAAU,CAACC,MAAM,GAAG,AACvC,EACA5B,GAQF,OALAZ,EAAa,KACXoC,EAAGK,eAAe,GAClBL,EAAGM,eAAe,CAAC,MACrB,KAEQ/B,EAAW2B,EACrB,EAEF,gBAAe3B,CAAO"}
+{"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":["createEffect","createMemo","createSignal","mergeProps","Show","splitProps","Dynamic","isFunction","css","customElement","theme","style","Button","_","ref","baseStyle","local","other","size","type","animating","setAnimating","icon","link","tag","danger","block","fill","circle","flat","dashed","ghost","disabled","without","children","class","opt","el","element","props","childNodes","values","replaceChildren","removeAttribute"],"mappings":"oVAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAChG,QAASC,WAAAA,CAAO,KAAQ,cAAe,AACvC,QAASC,MAAkB,+BAAiB,AAC5C,QAASC,OAAAA,CAAG,KAAQ,aAAc,AAClC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAAOC,MAAW,UAAW,AAE7B,QAASC,SAAAA,CAAK,KAAQ,SAAU,CA0ChC,SAASC,EAAOC,CAAc,MAqBxBC,EApBJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGL,EAEhB,CAACM,EAAOC,EAAM,CAAGZ,EADRF,EAAW,CAAEe,KAAM,SAAUC,KAAM,SAAU,EAAGN,GACrB,CACxC,QACA,OACA,SACA,SACA,OACA,OACA,SACA,WACA,QACA,OACA,OACA,QACA,OACA,MACA,WACA,MACD,EAEK,CAACO,EAAWC,EAAa,CAAGnB,EAAa,CAAA,GAUzCoB,EAAOrB,EAAW,IAAOM,EAAWS,EAAMM,IAAI,EAAIN,EAAMM,IAAI,GAAKN,EAAMM,IAAI,EAEjF,0DAEwBP,gDACAJ,UACnBP,qBAAWY,EAAMR,GAAG,8DACCA,EAAIQ,EAAMR,GAAG,UAElCF,kBACMQ,4BAAAA,4BACME,EAAMO,IAAI,CAAG,IAAMP,EAAMQ,GAAG,EAAI,4CAEhC,CACT,CAACR,EAAMG,IAAI,CAAC,CAAE,CAAA,EACd,CAACH,EAAME,IAAI,CAAC,CAAE,CAAA,EACdO,OAAQT,EAAMS,MAAM,CACpBC,MAAOV,EAAMU,KAAK,CAClBC,KAAMX,EAAMW,IAAI,CAChBC,OAAQZ,EAAMY,MAAM,CACpBC,KAAMb,EAAMa,IAAI,CAChBC,OAAQd,EAAMc,MAAM,CACpBC,MAAOf,EAAMe,KAAK,CAClBR,KAAMP,EAAMO,IAAI,CAChBS,SAAUhB,EAAMgB,QAAQ,CACxBC,QAASb,GACX,yBAlCN,WACOJ,EAAMgB,QAAQ,EACjBX,EAAa,CAAA,EAEjB,iBACA,WACEA,EAAa,CAAA,EACf,wBA+BgBL,EAAMgB,QAAQ,iBAEpBf,2BAEHb,qBAAWY,EAAMM,IAAI,sCAEjBA,uCAIFN,EAAMkB,QAAQ,aAKzB,CAEAzB,EACE,WACA,CACE0B,MAAO,KAAK,EACZ3B,IAAK,KAAK,EACVW,KAAM,KAAK,EACXY,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,EACbP,KAAM,KAAK,EACXI,KAAM,KAAK,EACXE,IAAK,KAAK,CACZ,EACA,CAACX,EAAGuB,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBC,EAAQpC,EACZ,CACEK,IAAK6B,EAAG7B,GAAG,CACX0B,SAAU,IAAIG,EAAGG,UAAU,CAACC,MAAM,GAAG,AACvC,EACA5B,GAQF,OALAb,EAAa,KACXqC,EAAGK,eAAe,GAClBL,EAAGM,eAAe,CAAC,MACrB,KAEQ/B,EAAW2B,EACrB,EAEF,gBAAe3B,CAAO"}

package/es/button/style.js

@@ -134,6 +134,7 @@ import{css as o}from"@moneko/css";function r(r){let n=`.${r}`,t=`.${r}.fill`;ret
     --btn-hover-color: var(--primary-hover);
     --btn-active-color: var(--primary-active);
   }
+
   ${r("primary")}
   ${r("error")}
   ${r("success")}

package/es/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":["css","btnColor","type","_cls","fillCls","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,CAGlC,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,EAGjCF,CAAG,CAAC;IACT,EAAEG,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,CAEA,OAAO,MAAMG,MAAQL,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwHvB,EAAEC,EAAS,WAAW;EACtB,EAAEA,EAAS,SAAS;EACpB,EAAEA,EAAS,WAAW;EACtB,EAAEA,EAAS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGxB,CAAC,AAAC"}
+{"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":["css","btnColor","type","_cls","fillCls","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,CAIlC,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,EAGjCF,CAAG,CAAC;IACT,EAAEG,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,CAEA,OAAO,MAAMG,MAAQL,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyHvB,EAAEC,EAAS,WAAW;EACtB,EAAEA,EAAS,SAAS;EACpB,EAAEA,EAAS,WAAW;EACtB,EAAEA,EAAS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGxB,CAAC,AAAC"}

package/es/capture-screen/README.mdx

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

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

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

package/es/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":["Show","createEffect","createMemo","createSignal","mergeProps","onCleanup","splitProps","untrack","downloadBlob","isFunction","css","cx","customElement","style","theme","displayMediaOptions","video","audio","echoCancellation","noiseSuppression","sampleRate","btnStatusDic","inactive","paused","recording","CaptureScreen","_","videoElem","baseStyle","local","props","options","captureScreenText","stopCaptureText","startRecorderText","stopRecorderText","pausedRecorderText","recorderingText","onErrorRecorder","chunks","mediaRecorder","setMediaRecorder","mediaStream","setMediaStream","recordState","setRecordState","handleStartRecorder","mr","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","stopCapture","ms","tracks","getTracks","forEach","track","onStopCapture","startCapture","stream","navigator","mediaDevices","getDisplayMedia","addEventListener","onStartCapture","err","onErrorCapture","preview","srcObject","active","recorderInstance","MediaRecorder","onstop","onerror","ondataavailable","recorderText","class","recorder","controls","opt","el","element","dispatchEvent","CustomEvent","detail"],"mappings":"gjCAAA,QACEA,QAAAA,CAAI,CACJC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,aAAAA,CAAS,CACTC,cAAAA,CAAU,CACVC,WAAAA,CAAO,KACF,UAAW,AAClB,QAASC,MAAgC,iCAAiB,AAA1D,QAAuBC,MAAkB,+BAAiB,AAC1D,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,OAAO,WAAY,AACnB,QAAOC,MAAW,UAAW,CAgE7B,IAAMC,EAA8C,CAClDC,MAAO,CAAA,EACPC,MAAO,CACLC,iBAAkB,CAAA,EAClBC,iBAAkB,CAAA,EAClBC,WAAY,KACd,CACF,EAEMC,EAAkF,CACtFC,SAAU,UACVC,OAAQ,UACRC,UAAW,SACb,EAEA,SAASC,EAAcC,CAAqB,MAsCtCC,EArCJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGd,EAchB,CAACe,EAAOC,EAAM,CAAGxB,EAbRF,EACb,CACE2B,QAAShB,EACTiB,kBAAmB,OACnBC,gBAAiB,OACjBC,kBAAmB,OACnBC,iBAAkB,OAClBC,mBAAoB,OACpBC,gBAAiB,MACjBC,gBAAiB,IACnB,EACAZ,GAEwC,CACxC,UACA,UACA,WACA,WACA,WACA,oBACA,kBACA,oBACA,mBACA,qBACA,kBACA,kBACA,iBACA,kBACA,gBACA,iBACA,0BACA,iBACA,iBACA,QACA,MACD,EAEKa,EAAiB,EAAE,CACnB,CAACC,EAAeC,EAAiB,CAAGtC,EAAmC,MACvE,CAACuC,EAAaC,EAAe,CAAGxC,EAAiC,MACjE,CAACyC,EAAaC,EAAe,CAAG1C,EAAqC,YAG3E,SAAS2C,IACP,IAAMC,EAAKxC,EAAQiC,GAEnB,GAAIO,EAAI,CAIN,OAHItC,EAAWoB,EAAMmB,eAAe,GAClCnB,EAAMmB,eAAe,CAACD,EAAGE,KAAK,EAExBF,EAAGE,KAAK,EACd,IAAK,WACHF,EAAGG,KAAK,GACR,KACF,KAAK,SACHH,EAAGI,MAAM,GACT,KAEF,SACEJ,EAAGK,KAAK,EAEZ,CACAP,EAAeE,EAAGE,KAAK,CACzB,CACF,CACA,SAASI,EAA4BC,CAAkC,QACrEf,GAAAA,EAAQgB,IAAI,CAACD,EAAEE,IAAI,QACnB3B,EAAM4B,uBAAuB,EAA7B5B,EAAM4B,uBAAuB,MAA7B5B,EAAgCyB,EAClC,CAEA,SAASI,IACP,IAAMX,EAAKxC,EAAQiC,GAGfO,IACe,aAAbA,EAAGE,KAAK,EACVF,EAAGY,IAAI,GAETd,EAAeE,EAAGE,KAAK,SAEzBpB,EAAM+B,cAAc,EAApB/B,EAAM+B,cAAc,MAApB/B,EACF,CACA,SAASgC,IACP,GAAI,QAACtB,SAAAA,EAAQuB,MAAM,EAAE,OAErB,IAAMC,EAAa,IAAIC,KAAKzB,EAAQ,CAClC0B,KAAM,YACR,GACMC,EAAOrC,EAAMsC,QAAQ,EAAI,IAAIC,OAAOC,WAAW,GAC/CC,EAAW,CAAC,EAAEJ,EAAK,KAAK,CAAC,OAE/B3B,GAAAA,EAAQgC,MAAM,CAAC,GACX1C,EAAM2C,cAAc,EACtB3C,EAAM2C,cAAc,CAACT,EAAMO,GAG7B9D,EAAauD,EAAMO,EACrB,CAGA,SAASG,IAEPf,IACA,IAAMgB,EAAKnE,EAAQmC,GAEnB,GAAIgC,EAAI,CACN,IAAMC,EAASD,EAAGE,SAAS,SAE3BD,GAAAA,EAAQE,OAAO,CAAC,AAACC,GAA4BA,EAAMnB,IAAI,IACvDhB,EAAe,KACjB,OACAd,EAAMkD,aAAa,EAAnBlD,EAAMkD,aAAa,MAAnBlD,EACF,UAGemD,WAAAA,iCAAAA,mBAAf,YACEP,IACA,GAAI,CACF,IAAMQ,EAAS,MAAMC,UAAUC,YAAY,CAACC,eAAe,CAAC,KACvDrE,EACAc,EAAME,OAAO,GAGdkD,IAEFA,EAAOI,gBAAgB,CAAC,WAAYZ,EAAa,CAAA,GACjD9B,EAAesC,UAEjBpD,EAAMyD,cAAc,EAApBzD,EAAMyD,cAAc,MAApBzD,EAAuBoD,EACzB,CAAE,MAAOM,EAAK,OACZ1D,EAAM2D,cAAc,EAApB3D,EAAM2D,cAAc,MAApB3D,EAAuB0D,EACzB,CACF,GAjBeP,qMAmBf/E,EAAa,KACX,IAAMyE,EAAKhC,GAEPb,CAAAA,EAAM4D,OAAO,EAAI9D,GAAa+C,GAChC/C,CAAAA,EAAU+D,SAAS,CAAGhB,CAAC,CAE3B,GAEAzE,EAAa,KACX,IAAMyE,EAAKhC,IAEX,SAAIgC,SAAAA,EAAIiB,MAAM,CAAE,CACd,IAAMC,EAAmB,IAAIC,cAAcnB,EAE3CkB,CAAAA,EAAiBE,MAAM,CAAGjC,EAC1B+B,EAAiBG,OAAO,CAAGlE,EAAMS,eAAe,CAEhDsD,EAAiBI,eAAe,CAAG3C,EACnCZ,EAAiBmD,EACnB,MACEnD,EAAiB,KAErB,GAEApC,EAAU,KACR,IAAM0C,EAAKxC,EAAQiC,GAGfO,GAAMA,OAAAA,SAAAA,EAAIE,KAAK,IAAK,YACtBF,EAAGY,IAAI,GAET,IAAMe,EAAKnE,EAAQmC,GAEfgC,GAGFC,AAFeD,EAAGE,SAAS,GAEpBC,OAAO,CAAC,AAACC,GAA4BA,EAAMnB,IAAI,GAE1D,GACA,IAAMsC,EAAe/F,EAAW,IACvB,CAAA,CACLqB,OAAQM,EAAMO,kBAAkB,CAChCZ,UAAWK,EAAMQ,eAAe,CAChCf,SAAUO,EAAMK,iBAAiB,AACnC,CAAA,CAAC,CAACU,IAAc,EAGlB,0DAEwBhB,gDACAf,UACnBb,qBAAW6B,EAAMnB,GAAG,8DACCA,EAAImB,EAAMnB,GAAG,uFAEvBC,EAAG,iBAAkBkB,EAAMqE,KAAK,IAAOpE,sBAE5BkD,4BAChBnD,EAAMG,iBAAiB,QAEzBhC,qBAAW0C,8DAEyB+B,eAAf,CAAA,wBACf5C,EAAMI,eAAe,UAEvBjC,qBAAW6B,EAAMsE,QAAQ,4EAIXrD,wBAGFmD,SAERjG,oBAAW4C,AAAkB,aAAlBA,iDACsBc,4BAC7B7B,EAAMM,gBAAgB,0BARnBd,CAAY,CAACuB,IAAc,uBAgB5C5C,qBAAW6B,QAAAA,EAAM4D,OAAO,KAAI/C,+DAQbf,oCAAAA,kBAJqB,cAAlBiB,SACe,WAAlBA,OAG8Bf,EAAMuE,QAAQ,EAAI1D,AAAkB,OAAlBA,4MAMxE,CAEA9B,EACE,mBACA,CACEsF,MAAO,KAAK,EACZxF,IAAK,KAAK,EACVqB,QAAS,KAAK,EACd0D,QAAS,KAAK,EACdW,SAAU,KAAK,EACfD,SAAU,KAAK,EACfhC,SAAU,KAAK,EACfnC,kBAAmB,KAAK,EACxBC,gBAAiB,KAAK,EACtBC,kBAAmB,KAAK,EACxBC,iBAAkB,KAAK,EACvBC,mBAAoB,KAAK,EACzBC,gBAAiB,KAAK,EACtBC,gBAAiB,KAAK,EACtBsB,eAAgB,KAAK,EACrBZ,gBAAiB,KAAK,EACtBS,wBAAyB,KAAK,EAC9B+B,eAAgB,KAAK,EACrBT,cAAe,KAAK,EACpBO,eAAgB,KAAK,EACrBd,eAAgB,KAAK,CACvB,EACA,CAAC9C,EAAG2E,KACF,IAAMC,EAAKD,EAAIE,OAAO,CA+DtB,SAAQ9E,EA9DMrB,EACZ,CACEkC,gBAAgBgB,CAAQ,EACtBgD,EAAGE,aAAa,CACd,IAAIC,YAAY,gBAAiB,CAC/BC,OAAQpD,CACV,GAEJ,EACAM,iBACE0C,EAAGE,aAAa,CACd,IAAIC,YAAY,eAAgB,CAC9BC,OAAQ,KAAK,CACf,GAEJ,EACA1D,gBAAgBC,CAA6B,EAC3CqD,EAAGE,aAAa,CACd,IAAIC,YAAY,gBAAiB,CAC/BC,OAAQzD,CACV,GAEJ,EACAQ,wBAAwBH,CAAkC,EACxDgD,EAAGE,aAAa,CACd,IAAIC,YAAY,wBAAyB,CACvCC,OAAQpD,CACV,GAEJ,EACAkC,eAAelC,CAAU,EACvBgD,EAAGE,aAAa,CACd,IAAIC,YAAY,eAAgB,CAC9BC,OAAQpD,CACV,GAEJ,EACAyB,gBACEuB,EAAGE,aAAa,CACd,IAAIC,YAAY,cAAe,CAC7BC,OAAQ,KAAK,CACf,GAEJ,EACApB,eAAeL,CAAoB,EACjCqB,EAAGE,aAAa,CACd,IAAIC,YAAY,eAAgB,CAC9BC,OAAQzB,CACV,GAEJ,EACAT,eAAeT,CAAU,CAAEO,CAAgB,EACzCgC,EAAGE,aAAa,CACd,IAAIC,YAAY,eAAgB,CAC9BC,OAAQ,CAAC3C,EAAMO,EAAS,AAC1B,GAEJ,CACF,EACA5C,GAIJ,EAGF,gBAAeD,CAAc"}
+{"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":["createEffect","createMemo","createSignal","mergeProps","onCleanup","Show","splitProps","untrack","downloadBlob","isFunction","css","cx","customElement","theme","style","displayMediaOptions","video","audio","echoCancellation","noiseSuppression","sampleRate","btnStatusDic","inactive","paused","recording","CaptureScreen","_","videoElem","baseStyle","local","props","options","captureScreenText","stopCaptureText","startRecorderText","stopRecorderText","pausedRecorderText","recorderingText","onErrorRecorder","chunks","mediaRecorder","setMediaRecorder","mediaStream","setMediaStream","recordState","setRecordState","handleStartRecorder","mr","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","stopCapture","ms","tracks","getTracks","forEach","track","onStopCapture","startCapture","stream","navigator","mediaDevices","getDisplayMedia","addEventListener","onStartCapture","err","onErrorCapture","preview","srcObject","active","recorderInstance","MediaRecorder","onstop","onerror","ondataavailable","recorderText","class","recorder","controls","opt","el","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}

package/es/carousel/README.mdx

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

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

package/es/carousel/examples/dots.md

@@ -0,0 +1,23 @@
+---
+title: 指示器
+description: 显示当前位置
+order: 3
+---
+
+```html
+<n-carousel dots="true">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</n-carousel>
+```
+
+```jsx
+<n-carousel dots>
+  {Array(100)
+    .fill(0)
+    .map((_, i) => {
+      return <div>100 / {i + 1}</div>;
+    })}
+</n-carousel>
+```

package/es/carousel/examples/header.md

@@ -0,0 +1,38 @@
+---
+title: 添加头部
+order: 4
+---
+
+```html
+<n-carousel dots="true">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</n-carousel>
+<script>
+  const el = container.querySelector('n-carousel');
+  el.header = function (current) {
+    const header = document.createElement('div');
+    header.style.padding = '16px';
+    header.innerHTML = '3 / ' + (current + 1);
+    return header;
+  };
+</script>
+```
+
+```jsx
+const list = Array(10000)
+  .fill(0)
+  .map((_, i) => <div>10000 / {i + 1}</div>);
+
+render(
+  <n-carousel
+    dots
+    header={() => (num: number) => {
+      return <div style="padding: 16px;">10000 / {num + 1}</div>;
+    }}
+  >
+    {list}
+  </n-carousel>
+);
+```

package/es/carousel/index.js

@@ -1,2 +1,2 @@
-import{template as e}from"solid-js/web";import{setAttribute as t}from"solid-js/web";import{insert as i}from"solid-js/web";import{getOwner as l}from"solid-js/web";import{effect as r}from"solid-js/web";import{delegateEvents as o}from"solid-js/web";import{createComponent as n}from"solid-js/web";import{className as s}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=e("<style> "),c=e("<style>"),m=e('<section class="header">'),v=e('<div class="dots">'),f=e('<section><section class="list"><div class="item"></div><div class="item"></div><div class="item"></div></section><slot name="header"></slot><div class="prev"></div><div class="next">'),h=e('<i class="dot">');import{Index as u,Show as g,createEffect as p,createMemo as b,createSignal as w,mergeProps as C,onCleanup as j}from"solid-js";import x from"@moneko/common/lib/isFunction";import{css as y,cx as $}from"@moneko/css";import{customElement as _}from"solid-element";import{style as k}from"./style";import S from"../theme";function E(e){let o;let{baseStyle:_}=S,E=C({autoplay:-1,children:[]},e),[I,N]=w(0),[A,L]=w(1),[F,M]=w(0),[O,P]=w(0);function q(){let e=O();-1===e?M(I()):1===e&&M(A()),P(0),x(E.onChange)&&E.onChange(F())}function z(){P(-1)}function B(){P(1)}function D(e,t){t.stopPropagation();let i=F(),l=20*Math.floor(i/20)+e;l>i?(P(1),L(l)):l<i&&(P(-1),N(l))}let G=b(()=>[...E.children]),H=b(()=>Array(G().length>20?20:G().length).fill(null));p(()=>{void 0!==E.offset&&M(Number(E.offset))}),p(()=>{var e,t;let i,l;let[r,o]=(e=F(),t=G(),i=e-1,l=e+1,i<0&&(i=t.length-1),l>t.length-1&&(l=0),[i,l]);N(r),L(o)}),p(()=>{clearInterval(o);let e=Number(E.autoplay);e>0&&(o=setInterval(()=>{e<1&&clearInterval(o),B()},e))}),j(()=>{clearInterval(o)});let J=b(()=>x(E.header)?E.header(F()):E.header);return[(()=>{let e=d(),t=e.firstChild;return r(()=>t.data=_()),e})(),(()=>{let e=c();return e.textContent=k,e})(),n(g,{get when(){return E.css},get children(){let e=d(),t=e.firstChild;return r(()=>t.data=y(E.css)),e}}),(()=>{let e=f(),o=e.firstChild,d=o.firstChild,c=d.nextSibling,p=c.nextSibling,b=o.nextSibling,w=b.nextSibling,C=w.nextSibling;return i(d,()=>G()[I()]),a(c,"animationend",q),i(c,()=>G()[F()]),i(p,()=>G()[A()]),b._$owner=l(),i(e,n(g,{get when(){return J()},get children(){let e=m();return i(e,J),e}}),w),a(w,"click",z,!0),a(C,"click",B,!0),i(e,n(g,{get when(){return E.dots},get children(){let e=v();return i(e,n(u,{get each(){return H()},children:(e,t)=>(()=>{let e=h();return a(e,"click",D.bind(null,t),!0),r(()=>e.classList.toggle("active",!(t!==F()%20+O()))),e})()})),e}}),null),r(i=>{let l=$("carousel",E.class),r=O();return l!==i._v$&&s(e,i._v$=l),r!==i._v$2&&t(o,"data-dir",i._v$2=r),i},{_v$:void 0,_v$2:void 0}),e})()]}_("n-carousel",{children:void 0,autoplay:void 0,class:void 0,css:void 0,offset:void 0,dots:void 0,header:void 0,onChange:void 0},(e,t)=>{let i=t.element,l=C({onChange(e){i.offset=e,i.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return p(()=>{i.replaceChildren()}),n(E,l)});export default E;o(["click"]);
+import{template as e}from"solid-js/web";import{setAttribute as t}from"solid-js/web";import{insert as i}from"solid-js/web";import{getOwner as l}from"solid-js/web";import{effect as r}from"solid-js/web";import{delegateEvents as o}from"solid-js/web";import{createComponent as n}from"solid-js/web";import{className as s}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=e("<style> "),c=e("<style>"),m=e('<section class="header">'),v=e('<div class="dots">'),f=e('<section><section class="list"><div class="item"></div><div class="item"></div><div class="item"></div></section><slot name="header"></slot><div class="prev"></div><div class="next">'),h=e('<i class="dot">');import{createEffect as u,createMemo as g,createSignal as p,Index as b,mergeProps as w,onCleanup as C,Show as j}from"solid-js";import x from"@moneko/common/lib/isFunction";import{css as y,cx as $}from"@moneko/css";import{customElement as _}from"solid-element";import k from"../theme";import{style as S}from"./style";function E(e){let o;let{baseStyle:_}=k,E=w({autoplay:-1,children:[]},e),[I,N]=p(0),[A,L]=p(1),[F,M]=p(0),[O,P]=p(0);function q(){let e=O();-1===e?M(I()):1===e&&M(A()),P(0),x(E.onChange)&&E.onChange(F())}function z(){P(-1)}function B(){P(1)}function D(e,t){t.stopPropagation();let i=F(),l=20*Math.floor(i/20)+e;l>i?(P(1),L(l)):l<i&&(P(-1),N(l))}let G=g(()=>[...E.children]),H=g(()=>Array(G().length>20?20:G().length).fill(null));u(()=>{void 0!==E.offset&&M(Number(E.offset))}),u(()=>{var e,t;let i,l;let[r,o]=(e=F(),t=G(),i=e-1,l=e+1,i<0&&(i=t.length-1),l>t.length-1&&(l=0),[i,l]);N(r),L(o)}),u(()=>{clearInterval(o);let e=Number(E.autoplay);e>0&&(o=setInterval(()=>{e<1&&clearInterval(o),B()},e))}),C(()=>{clearInterval(o)});let J=g(()=>x(E.header)?E.header(F()):E.header);return[(()=>{let e=d(),t=e.firstChild;return r(()=>t.data=_()),e})(),(()=>{let e=c();return e.textContent=S,e})(),n(j,{get when(){return E.css},get children(){let e=d(),t=e.firstChild;return r(()=>t.data=y(E.css)),e}}),(()=>{let e=f(),o=e.firstChild,d=o.firstChild,c=d.nextSibling,u=c.nextSibling,g=o.nextSibling,p=g.nextSibling,w=p.nextSibling;return i(d,()=>G()[I()]),a(c,"animationend",q),i(c,()=>G()[F()]),i(u,()=>G()[A()]),g._$owner=l(),i(e,n(j,{get when(){return J()},get children(){let e=m();return i(e,J),e}}),p),a(p,"click",z,!0),a(w,"click",B,!0),i(e,n(j,{get when(){return E.dots},get children(){let e=v();return i(e,n(b,{get each(){return H()},children:(e,t)=>(()=>{let e=h();return a(e,"click",D.bind(null,t),!0),r(()=>e.classList.toggle("active",!(t!==F()%20+O()))),e})()})),e}}),null),r(i=>{let l=$("carousel",E.class),r=O();return l!==i._v$&&s(e,i._v$=l),r!==i._v$2&&t(o,"data-dir",i._v$2=r),i},{_v$:void 0,_v$2:void 0}),e})()]}_("n-carousel",{children:void 0,autoplay:void 0,class:void 0,css:void 0,offset:void 0,dots:void 0,header:void 0,onChange:void 0},(e,t)=>{let i=t.element,l=w({onChange(e){i.offset=e,i.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return u(()=>{i.replaceChildren()}),n(E,l)});export default E;o(["click"]);
 //# sourceMappingURL=index.js.map