neko-ui 2.10.6 → 2.10.7

package/README.md

@@ -28,6 +28,11 @@
 [![download][download-tag]][npm-url]
 ![x][x-tag]
 
+[![NPM Quality](http://npm.packagequality.com/shield/neko-ui.svg?style=flat-square)](http://packagequality.com/#?package=neko-ui)
+[![GitHub Actions CI](https://github.com/monako97/neko-ui/actions/workflows/cd.yml/badge.svg?style=flat-square)](https://github.com/monako97/neko-ui/actions/workflows/cd.yml)
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fmonako97%2Fneko-ui.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fmonako97%2Fneko-ui?ref=badge_shield)
+
+
 [![neko-ui][install-tag]][npm-url]
 
 ## 安装
@@ -59,6 +64,8 @@ pnpm add neko-ui -S
 
 ## 按需引入
 
+`neko-ui` 默认支持基于 ES modules 的 tree shaking，直接引入 `import { theme } from 'neko-ui';` 就会有按需加载的效果。
+
 ### 手动方式
 
 ```jsx
@@ -79,25 +86,6 @@ function Demo() {
 }
 ```
 
-### 使用 @moneko
-
-```typescript
-// config/index.ts
-import type { ConfigType } from '@moneko/core';
-
-const conf: Partial<ConfigType> = {
-  // 按需引入
-  importOnDemand: {
-    'neko-ui': {
-      transform: 'es/${member}',
-      memberTransformers: ['dashed_case'],
-    },
-  },
-};
-
-export default conf;
-```
-
 > 文档通过 @moneko/core 生成
 
 [![@moneko/core][cli-tag]][cli-url]

package/es/avatar/group.d.ts

@@ -16,4 +16,7 @@ export interface AvatarGroupProps {
 }
 export type AvatarGroupElement = CustomElement<AvatarGroupProps>;
 declare function AvatarGroup(_props: AvatarGroupProps): import("solid-js").JSX.Element;
+declare namespace AvatarGroup {
+    var registry: () => void;
+}
 export default AvatarGroup;

package/es/avatar/group.js

@@ -1,4 +1,4 @@
-import{template as e}from"solid-js/web";import{spread as t}from"solid-js/web";import{mergeProps as r}from"solid-js/web";import{insert as n}from"solid-js/web";import{getOwner as i}from"solid-js/web";import{effect as o}from"solid-js/web";import{createComponent as a}from"solid-js/web";let s=e("<style>"),l=e("<style> "),m=e("<n-avatar>",!0,!1),p=e("<div>"),d=e('<div class="more">');import{createEffect as u,createMemo as c,For as g,mergeProps as v,Show as f,splitProps as h}from"solid-js";import{css as x,cx as w}from"@moneko/css";import{customElement as b}from"solid-element";import{clearAttribute as z}from"../basic-config";import $ from"../popover";import{inline as j}from"../theme";import"../avatar";let C=x`
+import{template as e}from"solid-js/web";import{spread as t}from"solid-js/web";import{mergeProps as r}from"solid-js/web";import{insert as n}from"solid-js/web";import{getOwner as i}from"solid-js/web";import{effect as o}from"solid-js/web";import{createComponent as s}from"solid-js/web";let a=e("<style>"),l=e("<style> "),m=e("<n-avatar>",!0,!1),p=e("<div>"),d=e('<div class="more">');import{createEffect as u,createMemo as c,For as g,mergeProps as v,Show as f,splitProps as h}from"solid-js";import{css as x,cx as w}from"@moneko/css";import{customElement as b}from"solid-element";import{clearAttribute as z}from"../basic-config";import $ from"../popover";import{inline as j}from"../theme";import{registry as y}from"../utils";import"../avatar";let C=x`
   .more {
     display: flex;
     justify-content: center;
@@ -38,4 +38,4 @@ import{template as e}from"solid-js/web";import{spread as t}from"solid-js/web";im
       }
     }
   }
-`,y={data:[],size:void 0,class:void 0,maxCount:void 0,css:void 0};function k(e){let[u,b]=h(v(y,e),["data","maxCount","class","size","css"]),z=c(()=>u.data||[]),j=c(()=>z().slice(0,u.maxCount)),k=c(()=>{let e=z(),t=e.length-(u.maxCount||e.length);return t>0?e.slice(-t):[]});return[(()=>{let e=s();return e.textContent=_,e})(),a(f,{get when(){return u.css},get children(){let e=l(),t=e.firstChild;return o(()=>t.data=x(u.css)),e}}),(()=>{let e=p();return t(e,r(b,{get class(){return w("group",u.class)}}),!1,!0),n(e,a(g,{get each(){return j()},children:e=>(()=>{let n=m();return t(n,r(e,{get size(){return u.size}}),!1,!1),n._$owner=i(),n})()}),null),n(e,a(f,{get when(){return k().length},get children(){return a($,{arrow:!0,trigger:"click",popupCss:C,get content(){return(()=>{let e=d();return n(e,a(g,{get each(){return k()},children:e=>(()=>{let n=m();return t(n,r(e,{get size(){return u.size}}),!1,!1),n._$owner=i(),n})()})),e})()},get children(){let e=m();return e._$owner=i(),o(t=>{let r=u.size,n=`+${k().length}`;return r!==t._v$&&(e.size=t._v$=r),n!==t._v$2&&(e.username=t._v$2=n),t},{_v$:void 0,_v$2:void 0}),e}})}}),null),e})()]}b("n-avatar-group",y,(e,t)=>{let r=t.element;return u(()=>{z(r,["css","data"])}),[(()=>{let e=s();return e.textContent=j,e})(),a(k,e)]});export default k;
+`,k={data:[],size:void 0,class:void 0,maxCount:void 0,css:void 0};function O(e){let[u,b]=h(v(k,e),["data","maxCount","class","size","css"]),z=c(()=>u.data||[]),j=c(()=>z().slice(0,u.maxCount)),y=c(()=>{let e=z(),t=e.length-(u.maxCount||e.length);return t>0?e.slice(-t):[]});return[(()=>{let e=a();return e.textContent=_,e})(),s(f,{get when(){return u.css},get children(){let e=l(),t=e.firstChild;return o(()=>t.data=x(u.css)),e}}),(()=>{let e=p();return t(e,r(b,{get class(){return w("group",u.class)}}),!1,!0),n(e,s(g,{get each(){return j()},children:e=>(()=>{let n=m();return t(n,r(e,{get size(){return u.size}}),!1,!1),n._$owner=i(),n})()}),null),n(e,s(f,{get when(){return y().length},get children(){return s($,{arrow:!0,trigger:"click",popupCss:C,get content(){return(()=>{let e=d();return n(e,s(g,{get each(){return y()},children:e=>(()=>{let n=m();return t(n,r(e,{get size(){return u.size}}),!1,!1),n._$owner=i(),n})()})),e})()},get children(){let e=m();return e._$owner=i(),o(t=>{let r=u.size,n=`+${y().length}`;return r!==t._v$&&(e.size=t._v$=r),n!==t._v$2&&(e.username=t._v$2=n),t},{_v$:void 0,_v$2:void 0}),e}})}}),null),e})()]}O.registry=()=>{b("n-avatar-group",k,(e,t)=>{let r=t.element;return u(()=>{z(r,["css","data"])}),[(()=>{let e=a();return e.textContent=j,e})(),s(O,e)]})},y(O);export default O;

package/es/avatar/group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/avatar/group.tsx"],"sourcesContent":["import { createEffect, createMemo, For, mergeProps, Show, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { AvatarProps, BasicConfig, CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport Popover from '../popover';\nimport { inline } from '../theme';\n\nimport '../avatar';\n\nconst moreCss = css`\n  .more {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow-y: auto;\n    padding: 8px;\n    max-inline-size: 60vi;\n    max-block-size: 80vb;\n    gap: 8px;\n    flex-wrap: wrap;\n\n    > n-avatar {\n      display: flex;\n    }\n  }\n`;\nconst style = css`\n  .group {\n    display: inline-flex;\n    align-items: center;\n\n    & > n-avatar {\n      display: flex;\n    }\n\n    & > n-avatar:not(:first-child),\n    & > .popover {\n      margin-inline-start: -4%;\n      transition: margin-inline-start var(--transition-duration);\n\n      &:hover:not(.popover) {\n        margin-inline-start: 4px;\n\n        &:has(+ n-avatar),\n        &:has(+ .popover) {\n          margin-inline-end: calc(4% + 4px);\n        }\n      }\n    }\n  }\n`;\n\nexport interface AvatarGroupProps {\n  /** 头像数据 */\n  data?: Omit<AvatarProps, 'size'>[];\n  /** 头像尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 最多显示个数 */\n  maxCount?: number;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n}\nexport type AvatarGroupElement = CustomElement<AvatarGroupProps>;\n\nconst defaultProps: AvatarGroupProps = {\n  data: [],\n  size: void 0,\n  class: void 0,\n  maxCount: void 0,\n  css: void 0,\n};\n\nfunction AvatarGroup(_props: AvatarGroupProps) {\n  const props = mergeProps(defaultProps, _props);\n  const [local, other] = splitProps(props, ['data', 'maxCount', 'class', 'size', 'css']);\n  const data = createMemo(() => local.data || []);\n  const showAvatar = createMemo(() => data().slice(0, local.maxCount));\n  const more = createMemo(() => {\n    const _data = data();\n    const len = _data.length - (local.maxCount || _data.length);\n\n    if (len > 0) {\n      return _data.slice(-len);\n    }\n    return [];\n  });\n\n  return (\n    <>\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <div {...other} class={cx('group', local.class)}>\n        <For each={showAvatar()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n        <Show when={more().length}>\n          <Popover\n            arrow={true}\n            trigger=\"click\"\n            popupCss={moreCss}\n            content={\n              <div class=\"more\">\n                <For each={more()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n              </div>\n            }\n          >\n            <n-avatar size={local.size} username={`+${more().length}`} />\n          </Popover>\n        </Show>\n      </div>\n    </>\n  );\n}\n\ncustomElement<AvatarGroupProps>('n-avatar-group', defaultProps, (props, opt) => {\n  const el = opt.element;\n\n  createEffect(() => {\n    clearAttribute(el, ['css', 'data']);\n  });\n  return (\n    <>\n      <style textContent={inline} />\n      <AvatarGroup {...props} />\n    </>\n  );\n});\n\nexport default AvatarGroup;\n"],"names":["createEffect","createMemo","For","mergeProps","Show","splitProps","css","cx","customElement","clearAttribute","Popover","inline","moreCss","style","defaultProps","data","size","class","maxCount","AvatarGroup","_props","local","other","showAvatar","slice","more","_data","len","length","a","props","opt","el","element"],"mappings":"4XAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,OAAAA,CAAG,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACvF,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,MAAa,YAAa,AACjC,QAASC,UAAAA,CAAM,KAAQ,UAAW,AAElC,OAAO,WAAY,CAEnB,IAAMC,EAAUN,CAAG,CAAC;;;;;;;;;;;;;;;;AAgBpB,CAAC,CACKO,EAAQP,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AAwBlB,CAAC,CAkBKQ,EAAiC,CACrCC,KAAM,EAAE,CACRC,KAAM,KAAK,EACXC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfZ,IAAK,KAAK,CACZ,EAEA,SAASa,EAAYC,CAAwB,EAE3C,GAAM,CAACC,EAAOC,EAAM,CAAGjB,EADTF,EAAWW,EAAcM,GACE,CAAC,OAAQ,WAAY,QAAS,OAAQ,MAAM,EAC/EL,EAAOd,EAAW,IAAMoB,EAAMN,IAAI,EAAI,EAAE,EACxCQ,EAAatB,EAAW,IAAMc,IAAOS,KAAK,CAAC,EAAGH,EAAMH,QAAQ,GAC5DO,EAAOxB,EAAW,KACtB,IAAMyB,EAAQX,IACRY,EAAMD,EAAME,MAAM,CAAIP,CAAAA,EAAMH,QAAQ,EAAIQ,EAAME,MAAM,AAAD,SAEzD,AAAID,EAAM,EACDD,EAAMF,KAAK,CAAC,CAACG,GAEf,EAAE,AACX,GAEA,4CAEwBd,UACnBT,qBAAWiB,EAAMf,GAAG,8DACCA,EAAIe,EAAMf,GAAG,qCAE1BgB,sBAAcf,EAAG,QAASc,EAAMJ,KAAK,kBAC3Cf,qBAAUqB,cAAe,AAACM,gCAAoBA,qBAASR,EAAML,IAAI,6CACjEZ,qBAAWqB,IAAOG,MAAM,0BACtBlB,SACQ,CAAA,2BAEGE,mDAGLV,qBAAUuB,cAAS,AAACI,gCAAoBA,qBAASR,EAAML,IAAI,mGAIhDK,EAAML,IAAI,GAAY,CAAC,CAAC,EAAES,IAAOG,MAAM,CAAC,CAAC,uHAMrE,CAEApB,EAAgC,iBAAkBM,EAAc,CAACgB,EAAOC,KACtE,IAAMC,EAAKD,EAAIE,OAAO,CAKtB,OAHAjC,EAAa,KACXS,EAAeuB,EAAI,CAAC,MAAO,OAAO,CACpC,yCAGwBrB,UACnBQ,EAAgBW,GAGvB,EAEA,gBAAeX,CAAY"}
+{"version":3,"sources":["components/avatar/group.tsx"],"sourcesContent":["import { createEffect, createMemo, For, mergeProps, Show, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { AvatarProps, BasicConfig, CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport Popover from '../popover';\nimport { inline } from '../theme';\nimport { registry } from '../utils';\n\nimport '../avatar';\n\nconst moreCss = css`\n  .more {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow-y: auto;\n    padding: 8px;\n    max-inline-size: 60vi;\n    max-block-size: 80vb;\n    gap: 8px;\n    flex-wrap: wrap;\n\n    > n-avatar {\n      display: flex;\n    }\n  }\n`;\nconst style = css`\n  .group {\n    display: inline-flex;\n    align-items: center;\n\n    & > n-avatar {\n      display: flex;\n    }\n\n    & > n-avatar:not(:first-child),\n    & > .popover {\n      margin-inline-start: -4%;\n      transition: margin-inline-start var(--transition-duration);\n\n      &:hover:not(.popover) {\n        margin-inline-start: 4px;\n\n        &:has(+ n-avatar),\n        &:has(+ .popover) {\n          margin-inline-end: calc(4% + 4px);\n        }\n      }\n    }\n  }\n`;\n\nexport interface AvatarGroupProps {\n  /** 头像数据 */\n  data?: Omit<AvatarProps, 'size'>[];\n  /** 头像尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 最多显示个数 */\n  maxCount?: number;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n}\nexport type AvatarGroupElement = CustomElement<AvatarGroupProps>;\n\nconst defaultProps: AvatarGroupProps = {\n  data: [],\n  size: void 0,\n  class: void 0,\n  maxCount: void 0,\n  css: void 0,\n};\n\nfunction AvatarGroup(_props: AvatarGroupProps) {\n  const props = mergeProps(defaultProps, _props);\n  const [local, other] = splitProps(props, ['data', 'maxCount', 'class', 'size', 'css']);\n  const data = createMemo(() => local.data || []);\n  const showAvatar = createMemo(() => data().slice(0, local.maxCount));\n  const more = createMemo(() => {\n    const _data = data();\n    const len = _data.length - (local.maxCount || _data.length);\n\n    if (len > 0) {\n      return _data.slice(-len);\n    }\n    return [];\n  });\n\n  return (\n    <>\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <div {...other} class={cx('group', local.class)}>\n        <For each={showAvatar()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n        <Show when={more().length}>\n          <Popover\n            arrow={true}\n            trigger=\"click\"\n            popupCss={moreCss}\n            content={\n              <div class=\"more\">\n                <For each={more()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n              </div>\n            }\n          >\n            <n-avatar size={local.size} username={`+${more().length}`} />\n          </Popover>\n        </Show>\n      </div>\n    </>\n  );\n}\n\nAvatarGroup.registry = () => {\n  customElement<AvatarGroupProps>('n-avatar-group', defaultProps, (props, opt) => {\n    const el = opt.element;\n\n    createEffect(() => {\n      clearAttribute(el, ['css', 'data']);\n    });\n    return (\n      <>\n        <style textContent={inline} />\n        <AvatarGroup {...props} />\n      </>\n    );\n  });\n};\n\nregistry(AvatarGroup);\nexport default AvatarGroup;\n"],"names":["createEffect","createMemo","For","mergeProps","Show","splitProps","css","cx","customElement","clearAttribute","Popover","inline","registry","moreCss","style","defaultProps","data","size","class","maxCount","AvatarGroup","_props","local","other","showAvatar","slice","more","_data","len","length","a","props","opt","el","element"],"mappings":"4XAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,OAAAA,CAAG,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACvF,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,MAAa,YAAa,AACjC,QAASC,UAAAA,CAAM,KAAQ,UAAW,AAClC,QAASC,YAAAA,CAAQ,KAAQ,UAAW,AAEpC,OAAO,WAAY,CAEnB,IAAMC,EAAUP,CAAG,CAAC;;;;;;;;;;;;;;;;AAgBpB,CAAC,CACKQ,EAAQR,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AAwBlB,CAAC,CAkBKS,EAAiC,CACrCC,KAAM,EAAE,CACRC,KAAM,KAAK,EACXC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfb,IAAK,KAAK,CACZ,EAEA,SAASc,EAAYC,CAAwB,EAE3C,GAAM,CAACC,EAAOC,EAAM,CAAGlB,EADTF,EAAWY,EAAcM,GACE,CAAC,OAAQ,WAAY,QAAS,OAAQ,MAAM,EAC/EL,EAAOf,EAAW,IAAMqB,EAAMN,IAAI,EAAI,EAAE,EACxCQ,EAAavB,EAAW,IAAMe,IAAOS,KAAK,CAAC,EAAGH,EAAMH,QAAQ,GAC5DO,EAAOzB,EAAW,KACtB,IAAM0B,EAAQX,IACRY,EAAMD,EAAME,MAAM,CAAIP,CAAAA,EAAMH,QAAQ,EAAIQ,EAAME,MAAM,AAAD,SAEzD,AAAID,EAAM,EACDD,EAAMF,KAAK,CAAC,CAACG,GAEf,EAAE,AACX,GAEA,4CAEwBd,UACnBV,qBAAWkB,EAAMhB,GAAG,8DACCA,EAAIgB,EAAMhB,GAAG,qCAE1BiB,sBAAchB,EAAG,QAASe,EAAMJ,KAAK,kBAC3ChB,qBAAUsB,cAAe,AAACM,gCAAoBA,qBAASR,EAAML,IAAI,6CACjEb,qBAAWsB,IAAOG,MAAM,0BACtBnB,SACQ,CAAA,2BAEGG,mDAGLX,qBAAUwB,cAAS,AAACI,gCAAoBA,qBAASR,EAAML,IAAI,mGAIhDK,EAAML,IAAI,GAAY,CAAC,CAAC,EAAES,IAAOG,MAAM,CAAC,CAAC,uHAMrE,CAEAT,EAAYR,QAAQ,CAAG,KACrBJ,EAAgC,iBAAkBO,EAAc,CAACgB,EAAOC,KACtE,IAAMC,EAAKD,EAAIE,OAAO,CAKtB,OAHAlC,EAAa,KACXS,EAAewB,EAAI,CAAC,MAAO,OAAO,CACpC,yCAGwBtB,UACnBS,EAAgBW,GAGvB,EACF,EAEAnB,EAASQ,EACT,gBAAeA,CAAY"}

package/es/avatar/index.d.ts

@@ -19,4 +19,7 @@ export interface AvatarProps {
 }
 export type AvatarElement = CustomElement<AvatarProps>;
 declare function Avatar(_: AvatarProps): import("solid-js").JSX.Element;
+declare namespace Avatar {
+    var registry: () => void;
+}
 export default Avatar;

package/es/avatar/index.js

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

package/es/avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/avatar/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  Match,\n  mergeProps,\n  Show,\n  splitProps,\n  Switch,\n} from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport { clearAttribute } from '../basic-config';\nimport Img from '../img';\nimport type { BasicConfig, CustomElement } from '../index';\nimport theme, { inline } from '../theme';\n\nimport { style } from './style';\n\nexport interface AvatarProps {\n  /** 头像 */\n  src?: string;\n  /** 替代文本 */\n  alt?: string;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: number | BasicConfig['size'];\n  /** 用户名 */\n  username?: string;\n  /** 背景颜色 */\n  color?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n}\nexport type AvatarElement = CustomElement<AvatarProps>;\n\nfunction Avatar(_: AvatarProps) {\n  const avatarSize: Record<string, string> = {\n    small: '24px',\n    normal: '32px',\n    large: '40px',\n  };\n\n  const props = mergeProps({ size: 32 }, _);\n  const [local, other] = splitProps(props, [\n    'class',\n    'css',\n    'src',\n    'alt',\n    'size',\n    'color',\n    'username',\n  ]);\n  let box: HTMLDivElement | undefined;\n  let label: HTMLSpanElement | undefined;\n  const [scale, setScale] = createSignal(1);\n\n  const _style = createMemo(() => {\n    const size = avatarSize[local.size] || `${local.size}px`;\n\n    return css`\n      .avatar {\n        --avatar-color: ${local.color};\n\n        inline-size: ${size};\n        block-size: ${size};\n      }\n    `;\n  });\n\n  createEffect(() => {\n    if (label && box) {\n      if (label.clientWidth + 6 > box.clientWidth) {\n        setScale((box.clientWidth - 6) / label.clientWidth);\n      }\n    }\n  });\n\n  return (\n    <>\n      <style textContent={style} />\n      <style textContent={_style()} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <div ref={box} class={cx('avatar', local.class)} {...other}>\n        <Switch>\n          <Match when={typeof local.src === 'string'}>\n            <Img src={local.src} alt={local.alt} style={{ 'z-index': 9999 }} />\n          </Match>\n          <Match when={local.username}>\n            <span ref={label} style={{ transform: `scale(${scale()})` }}>\n              {local.username}\n            </span>\n          </Match>\n        </Switch>\n      </div>\n      <svg\n        viewBox=\"0 0 1 1\"\n        aria-hidden=\"true\"\n        style={{\n          position: 'absolute',\n          width: '0',\n          height: '0',\n          opacity: 0,\n          'pointer-events': 'none',\n        }}\n        overflow=\"hidden\"\n      >\n        <defs>\n          <clipPath id=\"clipPathAvatar\" clipPathUnits=\"objectBoundingBox\">\n            <path\n              d=\"M.395.126H.4A.016.016 0 0 1 .418.14v.002L.42.158a.39.39 0 0 0 .019.12L.44.284l.005.01c.011.026.034.05.05.053h.011a.084.084 0 0 0 .016-.01.115.115 0 0 0 .025-.03.259.259 0 0 0 .033-.14.02.02 0 0 0 0-.008.03.03 0 0 1 0-.01V.145L.584.136h.001C.583.134.591.127.594.126h.024L.63.127l.013.001h.01a.123.123 0 0 0 .021.003h.003L.7.133a.591.591 0 0 1 .046.004L.77.139h.013l.006.002h.009c.01 0 .019.006.036.023a.24.24 0 0 1 .018.02l.004.004a.49.49 0 0 1 .063.094L.927.3a.032.032 0 0 0 .004.007L.932.31l.004.007.007.022a.141.141 0 0 0 .004.008.34.34 0 0 0 .011.037l.002.01A.463.463 0 0 1 .969.46v.013A.358.358 0 0 1 .963.58a.537.537 0 0 1-.064.16.378.378 0 0 1-.096.111.042.042 0 0 1-.014.002L.762.851.732.85A1.092 1.092 0 0 0 .667.845C.641.842.636.84.63.832L.626.825C.624.822.628.814.636.8a.129.129 0 0 0 .01-.022.02.02 0 0 0 .001-.003V.773a.143.143 0 0 0 .009-.02A.149.149 0 0 1 .66.738.028.028 0 0 0 .662.73V.726a.243.243 0 0 1-.106.07.177.177 0 0 1-.121-.003A.25.25 0 0 1 .35.736C.34.726.338.724.337.727A.095.095 0 0 0 .344.75v.003s.001 0 0 0a.316.316 0 0 0 .024.053L.37.811c.005.01.005.013.001.02C.367.837.36.84.345.842A.462.462 0 0 1 .3.847.967.967 0 0 0 .25.85L.224.852.213.853A.027.027 0 0 1 .191.847.438.438 0 0 1 .098.735a.525.525 0 0 1-.065-.19L.032.529V.517a.35.35 0 0 1 0-.052L.034.433.036.421A.288.288 0 0 1 .04.397.173.173 0 0 1 .05.36c0-.003 0-.006.002-.01A.133.133 0 0 0 .057.336L.06.33A.293.293 0 0 1 .084.276L.09.266A.14.14 0 0 1 .1.246L.106.24A.288.288 0 0 1 .142.19a.227.227 0 0 0 .01-.01.17.17 0 0 1 .037-.036A.036.036 0 0 1 .202.14h.023L.228.138h.008L.248.136H.26A.104.104 0 0 0 .28.134a.01.01 0 0 1 .004 0h.003L.289.133h.006A.18.18 0 0 1 .313.131h.011L.327.13H.33L.348.128h.009L.364.127h.004L.37.126h.011L.388.125a.01.01 0 0 0 .003 0h.004z\"\n              fill=\"#7483AB\"\n            />\n          </clipPath>\n        </defs>\n      </svg>\n    </>\n  );\n}\n\ncustomElement<AvatarProps>(\n  'n-avatar',\n  {\n    css: void 0,\n    size: void 0,\n    src: void 0,\n    alt: void 0,\n    username: void 0,\n    color: void 0,\n    class: void 0,\n  },\n  (props, opt) => {\n    const { baseStyle } = theme;\n    const el = opt.element;\n\n    createEffect(() => {\n      clearAttribute(el, ['css']);\n    });\n    return (\n      <>\n        <style textContent={inline} />\n        <style textContent={baseStyle()} />\n        <Avatar {...props} />\n      </>\n    );\n  },\n);\nexport default Avatar;\n"],"names":["createEffect","createMemo","createSignal","Match","mergeProps","Show","splitProps","Switch","css","cx","customElement","clearAttribute","Img","theme","inline","style","Avatar","_","box","label","avatarSize","small","normal","large","local","other","size","scale","setScale","_style","color","clientWidth","class","src","alt","username","props","opt","baseStyle","el","element"],"mappings":"ouEAAA,QACEA,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,SAAAA,CAAK,CACLC,cAAAA,CAAU,CACVC,QAAAA,CAAI,CACJC,cAAAA,CAAU,CACVC,UAAAA,CAAM,KACD,UAAW,AAClB,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAE9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,MAAS,QAAS,AAEzB,QAAOC,GAASC,UAAAA,CAAM,KAAQ,UAAW,AAEzC,QAASC,SAAAA,CAAK,KAAQ,SAAU,CAsBhC,SAASC,EAAOC,CAAc,MAiBxBC,EACAC,EAjBJ,IAAMC,EAAqC,CACzCC,MAAO,OACPC,OAAQ,OACRC,MAAO,MACT,EAGM,CAACC,EAAOC,EAAM,CAAGnB,EADTF,EAAW,CAAEsB,KAAM,EAAG,EAAGT,GACE,CACvC,QACA,MACA,MACA,MACA,OACA,QACA,WACD,EAGK,CAACU,EAAOC,EAAS,CAAG1B,EAAa,GAEjC2B,EAAS5B,EAAW,KACxB,IAAMyB,EAAON,CAAU,CAACI,EAAME,IAAI,CAAC,EAAI,CAAC,EAAEF,EAAME,IAAI,CAAC,EAAE,CAAC,CAExD,OAAOlB,CAAG,CAAC;;wBAES,EAAEgB,EAAMM,KAAK,CAAC;;qBAEjB,EAAEJ,EAAK;oBACR,EAAEA,EAAK;;IAEvB,CAAC,AACH,GAUA,OARA1B,EAAa,KACPmB,GAASD,GACPC,EAAMY,WAAW,CAAG,EAAIb,EAAIa,WAAW,EACzCH,EAAS,AAACV,CAAAA,EAAIa,WAAW,CAAG,CAAA,EAAKZ,EAAMY,WAAW,CAGxD,yCAIwBhB,2DACAc,aACnBxB,qBAAWmB,EAAMhB,GAAG,8DACCA,EAAIgB,EAAMhB,GAAG,0BAEzBU,oCAAAA,8BAAYT,EAAG,SAAUe,EAAMQ,KAAK,IAAOP,gBAClDlB,2BACEJ,oBAAY,AAAqB,UAArB,OAAOqB,EAAMS,GAAG,0BAC1BrB,oBAASY,EAAMS,GAAG,mBAAOT,EAAMU,GAAG,QAAS,CAAE,UAAW,IAAK,SAE/D/B,qBAAYqB,EAAMW,QAAQ,6BACdhB,oCAAAA,YACRK,EAAMW,QAAQ,SAD8BR,oCAAT,CAAC,MAAM,EAAEA,IAAQ,CAAC,CAAC,+OA6BrE,CAEAjB,EACE,WACA,CACEF,IAAK,KAAK,EACVkB,KAAM,KAAK,EACXO,IAAK,KAAK,EACVC,IAAK,KAAK,EACVC,SAAU,KAAK,EACfL,MAAO,KAAK,EACZE,MAAO,KAAK,CACd,EACA,CAACI,EAAOC,KACN,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGzB,EAChB0B,EAAKF,EAAIG,OAAO,CAKtB,OAHAxC,EAAa,KACXW,EAAe4B,EAAI,CAAC,MAAM,CAC5B,yCAGwBzB,2DACAwB,aACnBtB,EAAWoB,GAGlB,EAEF,gBAAepB,CAAO"}
+{"version":3,"sources":["components/avatar/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  Match,\n  mergeProps,\n  Show,\n  splitProps,\n  Switch,\n} from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport { clearAttribute } from '../basic-config';\nimport Img from '../img';\nimport type { BasicConfig, CustomElement } from '../index';\nimport theme, { inline } from '../theme';\nimport { registry } from '../utils';\n\nimport { style } from './style';\n\nexport interface AvatarProps {\n  /** 头像 */\n  src?: string;\n  /** 替代文本 */\n  alt?: string;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: number | BasicConfig['size'];\n  /** 用户名 */\n  username?: string;\n  /** 背景颜色 */\n  color?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n}\nexport type AvatarElement = CustomElement<AvatarProps>;\n\nfunction Avatar(_: AvatarProps) {\n  const avatarSize: Record<string, string> = {\n    small: '24px',\n    normal: '32px',\n    large: '40px',\n  };\n\n  const props = mergeProps({ size: 32 }, _);\n  const [local, other] = splitProps(props, [\n    'class',\n    'css',\n    'src',\n    'alt',\n    'size',\n    'color',\n    'username',\n  ]);\n  let box: HTMLDivElement | undefined;\n  let label: HTMLSpanElement | undefined;\n  const [scale, setScale] = createSignal(1);\n\n  const _style = createMemo(() => {\n    const size = avatarSize[local.size] || `${local.size}px`;\n\n    return css`\n      .avatar {\n        --avatar-color: ${local.color};\n\n        inline-size: ${size};\n        block-size: ${size};\n      }\n    `;\n  });\n\n  createEffect(() => {\n    if (label && box) {\n      if (label.clientWidth + 6 > box.clientWidth) {\n        setScale((box.clientWidth - 6) / label.clientWidth);\n      }\n    }\n  });\n\n  return (\n    <>\n      <style textContent={style} />\n      <style textContent={_style()} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <div ref={box} class={cx('avatar', local.class)} {...other}>\n        <Switch>\n          <Match when={typeof local.src === 'string'}>\n            <Img src={local.src} alt={local.alt} style={{ 'z-index': 9999 }} />\n          </Match>\n          <Match when={local.username}>\n            <span ref={label} style={{ transform: `scale(${scale()})` }}>\n              {local.username}\n            </span>\n          </Match>\n        </Switch>\n      </div>\n      <svg\n        viewBox=\"0 0 1 1\"\n        aria-hidden=\"true\"\n        style={{\n          position: 'absolute',\n          width: '0',\n          height: '0',\n          opacity: 0,\n          'pointer-events': 'none',\n        }}\n        overflow=\"hidden\"\n      >\n        <defs>\n          <clipPath id=\"clipPathAvatar\" clipPathUnits=\"objectBoundingBox\">\n            <path\n              d=\"M.395.126H.4A.016.016 0 0 1 .418.14v.002L.42.158a.39.39 0 0 0 .019.12L.44.284l.005.01c.011.026.034.05.05.053h.011a.084.084 0 0 0 .016-.01.115.115 0 0 0 .025-.03.259.259 0 0 0 .033-.14.02.02 0 0 0 0-.008.03.03 0 0 1 0-.01V.145L.584.136h.001C.583.134.591.127.594.126h.024L.63.127l.013.001h.01a.123.123 0 0 0 .021.003h.003L.7.133a.591.591 0 0 1 .046.004L.77.139h.013l.006.002h.009c.01 0 .019.006.036.023a.24.24 0 0 1 .018.02l.004.004a.49.49 0 0 1 .063.094L.927.3a.032.032 0 0 0 .004.007L.932.31l.004.007.007.022a.141.141 0 0 0 .004.008.34.34 0 0 0 .011.037l.002.01A.463.463 0 0 1 .969.46v.013A.358.358 0 0 1 .963.58a.537.537 0 0 1-.064.16.378.378 0 0 1-.096.111.042.042 0 0 1-.014.002L.762.851.732.85A1.092 1.092 0 0 0 .667.845C.641.842.636.84.63.832L.626.825C.624.822.628.814.636.8a.129.129 0 0 0 .01-.022.02.02 0 0 0 .001-.003V.773a.143.143 0 0 0 .009-.02A.149.149 0 0 1 .66.738.028.028 0 0 0 .662.73V.726a.243.243 0 0 1-.106.07.177.177 0 0 1-.121-.003A.25.25 0 0 1 .35.736C.34.726.338.724.337.727A.095.095 0 0 0 .344.75v.003s.001 0 0 0a.316.316 0 0 0 .024.053L.37.811c.005.01.005.013.001.02C.367.837.36.84.345.842A.462.462 0 0 1 .3.847.967.967 0 0 0 .25.85L.224.852.213.853A.027.027 0 0 1 .191.847.438.438 0 0 1 .098.735a.525.525 0 0 1-.065-.19L.032.529V.517a.35.35 0 0 1 0-.052L.034.433.036.421A.288.288 0 0 1 .04.397.173.173 0 0 1 .05.36c0-.003 0-.006.002-.01A.133.133 0 0 0 .057.336L.06.33A.293.293 0 0 1 .084.276L.09.266A.14.14 0 0 1 .1.246L.106.24A.288.288 0 0 1 .142.19a.227.227 0 0 0 .01-.01.17.17 0 0 1 .037-.036A.036.036 0 0 1 .202.14h.023L.228.138h.008L.248.136H.26A.104.104 0 0 0 .28.134a.01.01 0 0 1 .004 0h.003L.289.133h.006A.18.18 0 0 1 .313.131h.011L.327.13H.33L.348.128h.009L.364.127h.004L.37.126h.011L.388.125a.01.01 0 0 0 .003 0h.004z\"\n              fill=\"#7483AB\"\n            />\n          </clipPath>\n        </defs>\n      </svg>\n    </>\n  );\n}\n\nAvatar.registry = () => {\n  customElement<AvatarProps>(\n    'n-avatar',\n    {\n      css: void 0,\n      size: void 0,\n      src: void 0,\n      alt: void 0,\n      username: void 0,\n      color: void 0,\n      class: void 0,\n    },\n    (props, opt) => {\n      const { baseStyle } = theme;\n      const el = opt.element;\n\n      createEffect(() => {\n        clearAttribute(el, ['css']);\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <style textContent={baseStyle()} />\n          <Avatar {...props} />\n        </>\n      );\n    },\n  );\n};\n\nregistry(Avatar);\nexport default Avatar;\n"],"names":["createEffect","createMemo","createSignal","Match","mergeProps","Show","splitProps","Switch","css","cx","customElement","clearAttribute","Img","theme","inline","registry","style","Avatar","_","box","label","avatarSize","small","normal","large","local","other","size","scale","setScale","_style","color","clientWidth","class","src","alt","username","props","opt","baseStyle","el","element"],"mappings":"ouEAAA,QACEA,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,SAAAA,CAAK,CACLC,cAAAA,CAAU,CACVC,QAAAA,CAAI,CACJC,cAAAA,CAAU,CACVC,UAAAA,CAAM,KACD,UAAW,AAClB,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAE9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,MAAS,QAAS,AAEzB,QAAOC,GAASC,UAAAA,CAAM,KAAQ,UAAW,AACzC,QAASC,YAAAA,CAAQ,KAAQ,UAAW,AAEpC,QAASC,SAAAA,CAAK,KAAQ,SAAU,CAsBhC,SAASC,EAAOC,CAAc,MAiBxBC,EACAC,EAjBJ,IAAMC,EAAqC,CACzCC,MAAO,OACPC,OAAQ,OACRC,MAAO,MACT,EAGM,CAACC,EAAOC,EAAM,CAAGpB,EADTF,EAAW,CAAEuB,KAAM,EAAG,EAAGT,GACE,CACvC,QACA,MACA,MACA,MACA,OACA,QACA,WACD,EAGK,CAACU,EAAOC,EAAS,CAAG3B,EAAa,GAEjC4B,EAAS7B,EAAW,KACxB,IAAM0B,EAAON,CAAU,CAACI,EAAME,IAAI,CAAC,EAAI,CAAC,EAAEF,EAAME,IAAI,CAAC,EAAE,CAAC,CAExD,OAAOnB,CAAG,CAAC;;wBAES,EAAEiB,EAAMM,KAAK,CAAC;;qBAEjB,EAAEJ,EAAK;oBACR,EAAEA,EAAK;;IAEvB,CAAC,AACH,GAUA,OARA3B,EAAa,KACPoB,GAASD,GACPC,EAAMY,WAAW,CAAG,EAAIb,EAAIa,WAAW,EACzCH,EAAS,AAACV,CAAAA,EAAIa,WAAW,CAAG,CAAA,EAAKZ,EAAMY,WAAW,CAGxD,yCAIwBhB,2DACAc,aACnBzB,qBAAWoB,EAAMjB,GAAG,8DACCA,EAAIiB,EAAMjB,GAAG,0BAEzBW,oCAAAA,8BAAYV,EAAG,SAAUgB,EAAMQ,KAAK,IAAOP,gBAClDnB,2BACEJ,oBAAY,AAAqB,UAArB,OAAOsB,EAAMS,GAAG,0BAC1BtB,oBAASa,EAAMS,GAAG,mBAAOT,EAAMU,GAAG,QAAS,CAAE,UAAW,IAAK,SAE/DhC,qBAAYsB,EAAMW,QAAQ,6BACdhB,oCAAAA,YACRK,EAAMW,QAAQ,SAD8BR,oCAAT,CAAC,MAAM,EAAEA,IAAQ,CAAC,CAAC,+OA6BrE,CAEAX,EAAOF,QAAQ,CAAG,KAChBL,EACE,WACA,CACEF,IAAK,KAAK,EACVmB,KAAM,KAAK,EACXO,IAAK,KAAK,EACVC,IAAK,KAAK,EACVC,SAAU,KAAK,EACfL,MAAO,KAAK,EACZE,MAAO,KAAK,CACd,EACA,CAACI,EAAOC,KACN,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAG1B,EAChB2B,EAAKF,EAAIG,OAAO,CAKtB,OAHAzC,EAAa,KACXW,EAAe6B,EAAI,CAAC,MAAM,CAC5B,yCAGwB1B,2DACAyB,aACnBtB,EAAWoB,GAGlB,EAEJ,EAEAtB,EAASE,EACT,gBAAeA,CAAO"}

package/es/back-top/index.d.ts

@@ -16,5 +16,8 @@ export interface BackTopProps {
     css?: string;
 }
 declare function BackTop(_: BackTopProps): import("solid-js").JSX.Element;
+declare namespace BackTop {
+    var registry: () => void;
+}
 export type BackTopElement = CustomElement<BackTopProps>;
 export default BackTop;

package/es/back-top/index.js

@@ -1 +1 @@
-import{template as t}from"solid-js/web";import{spread as e}from"solid-js/web";import{mergeProps as o}from"solid-js/web";import"solid-js/web";import{effect as r}from"solid-js/web";import{delegateEvents as i}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{addEventListener as l}from"solid-js/web";let n=t("<style> "),m=t("<style>"),a=t("<div>");import{createEffect as c,createMemo as d,createSignal as u,mergeProps as p,onCleanup as g,onMount as f,Show as b,splitProps as v}from"solid-js";import{Portal as h}from"solid-js/web";import y from"@moneko/common/lib/getMaxZindex";import w from"@moneko/common/lib/getScrollTop";import k from"@moneko/common/lib/isFunction";import{css as j,cx as x}from"@moneko/css";import{customElement as H}from"solid-element";import{clearAttribute as C}from"../basic-config";import E,{inline as L}from"../theme";import{style as S}from"./style";function T(t){let{baseStyle:i,isDark:c}=E,[H,C]=v(p({target:window,visibilityHeight:400},t),["class","target","mount","css","visibilityHeight"]),[L,T]=u(null),z=d(()=>k(H.target)?H.target():H.target),D=d(()=>{let t=c()?"rgb(255 255 255 / 45%)":"var(--primary-border)";return`:host {--back-top-bg: ${t};}`});function F(){var t;null==(t=z())||t.scrollTo({top:0,behavior:"smooth"})}function M(){!1===L()&&T(null)}function P(t){t.preventDefault();let e=0,o=0,r=z();r&&(e=w(r),o=r.offsetHeight||0);let i=e>o/3||e>H.visibilityHeight;return!!L()!==i&&T(i),!1}return f(()=>{var t;null==(t=z())||t.addEventListener("scroll",P,!1)}),g(()=>{var t;null==(t=z())||t.removeEventListener("scroll",P,!1)}),s(b,{get when(){return null!==L()},get children(){return s(h,{useShadow:!0,get mount(){return H.mount},get children(){return[(()=>{let t=n(),e=t.firstChild;return r(()=>e.data=i()),t})(),(()=>{let t=n(),e=t.firstChild;return r(()=>e.data=D()),t})(),(()=>{let t=m();return t.textContent=S,t})(),s(b,{get when(){return H.css},get children(){let t=n(),e=t.firstChild;return r(()=>e.data=j(H.css)),t}}),(()=>{let t=a();return l(t,"click",F,!0),l(t,"animationend",M),e(t,o({get class(){return x("back-top",H.class)},get classList(){return{"back-top-out":!1===L()}},get style(){return{"z-index":y().toString()}}},C),!1,!1),t})()]}})}})}H("n-back-top",{class:void 0,css:void 0,visibilityHeight:void 0,mount:void 0,target:void 0},(t,e)=>{let o=e.element;o.mount||(o.style.position="sticky",o.style.bottom="24px",o.style.right="24px",o.style.display="block",o.style.pointerEvents="none");let r=p({css:o.css,visibilityHeight:o.visibilityHeight,mount:o.renderRoot,target:o.target},t);return c(()=>{C(o,["css"])}),[(()=>{let t=m();return t.textContent=L,t})(),s(T,r)]});export default T;i(["click"]);
+import{template as t}from"solid-js/web";import{spread as e}from"solid-js/web";import{mergeProps as r}from"solid-js/web";import"solid-js/web";import{effect as o}from"solid-js/web";import{delegateEvents as i}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{addEventListener as l}from"solid-js/web";let n=t("<style> "),m=t("<style>"),a=t("<div>");import{createEffect as c,createMemo as d,createSignal as u,mergeProps as p,onCleanup as g,onMount as f,Show as b,splitProps as v}from"solid-js";import{Portal as h}from"solid-js/web";import y from"@moneko/common/lib/getMaxZindex";import w from"@moneko/common/lib/getScrollTop";import k from"@moneko/common/lib/isFunction";import{css as j,cx as x}from"@moneko/css";import{customElement as H}from"solid-element";import{clearAttribute as C}from"../basic-config";import E,{inline as L}from"../theme";import{registry as S}from"../utils";import{style as T}from"./style";function z(t){let{baseStyle:i,isDark:c}=E,[H,C]=v(p({target:window,visibilityHeight:400},t),["class","target","mount","css","visibilityHeight"]),[L,S]=u(null),z=d(()=>k(H.target)?H.target():H.target),D=d(()=>{let t=c()?"rgb(255 255 255 / 45%)":"var(--primary-border)";return`:host {--back-top-bg: ${t};}`});function F(){var t;null==(t=z())||t.scrollTo({top:0,behavior:"smooth"})}function M(){!1===L()&&S(null)}function P(t){t.preventDefault();let e=0,r=0,o=z();o&&(e=w(o),r=o.offsetHeight||0);let i=e>r/3||e>H.visibilityHeight;return!!L()!==i&&S(i),!1}return f(()=>{var t;null==(t=z())||t.addEventListener("scroll",P,!1)}),g(()=>{var t;null==(t=z())||t.removeEventListener("scroll",P,!1)}),s(b,{get when(){return null!==L()},get children(){return s(h,{useShadow:!0,get mount(){return H.mount},get children(){return[(()=>{let t=n(),e=t.firstChild;return o(()=>e.data=i()),t})(),(()=>{let t=n(),e=t.firstChild;return o(()=>e.data=D()),t})(),(()=>{let t=m();return t.textContent=T,t})(),s(b,{get when(){return H.css},get children(){let t=n(),e=t.firstChild;return o(()=>e.data=j(H.css)),t}}),(()=>{let t=a();return l(t,"click",F,!0),l(t,"animationend",M),e(t,r({get class(){return x("back-top",H.class)},get classList(){return{"back-top-out":!1===L()}},get style(){return{"z-index":y().toString()}}},C),!1,!1),t})()]}})}})}z.registry=()=>{H("n-back-top",{class:void 0,css:void 0,visibilityHeight:void 0,mount:void 0,target:void 0},(t,e)=>{let r=e.element;r.mount||(r.style.position="sticky",r.style.bottom="24px",r.style.right="24px",r.style.display="block",r.style.pointerEvents="none");let o=p({css:r.css,visibilityHeight:r.visibilityHeight,mount:r.renderRoot,target:r.target},t);return c(()=>{C(r,["css"])}),[(()=>{let t=m();return t.textContent=L,t})(),s(z,o)]})},S(z);export default z;i(["click"]);

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

@@ -1 +1 @@
-{"version":3,"sources":["components/back-top/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  Show,\n  splitProps,\n} from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { getMaxZindex, getScrollTop, isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { inline } from '../theme';\n\nimport { style } from './style';\n\nexport interface BackTopProps {\n  /** 设置需要监听其滚动事件的元素\n   * @default window\n   */\n  target?: HTMLElement | (() => HTMLElement | undefined);\n  /** 挂载到指定的元素\n   * @default body\n   */\n  mount?: HTMLElement;\n  /** 滚动高度达到此参数值才出现 BackTop */\n  visibilityHeight?: number;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n}\n\nfunction BackTop(_: BackTopProps) {\n  const { baseStyle, isDark } = theme;\n  const props = mergeProps({ target: window as unknown as HTMLElement, visibilityHeight: 400 }, _);\n  const [local, other] = splitProps(props, ['class', 'target', 'mount', 'css', 'visibilityHeight']);\n  const [show, setShow] = createSignal<boolean | null>(null);\n  const target = createMemo(() => (isFunction(local.target) ? local.target() : local.target));\n\n  const themeStyle = createMemo(() => {\n    const bg = isDark() ? 'rgb(255 255 255 / 45%)' : 'var(--primary-border)';\n\n    return `:host {--back-top-bg: ${bg};}`;\n  });\n\n  function handleBackTop() {\n    target()?.scrollTo({\n      top: 0,\n      behavior: 'smooth',\n    });\n  }\n  function exit() {\n    if (show() === false) {\n      setShow(null);\n    }\n  }\n  function handleScrollY(e: Event) {\n    e.preventDefault();\n    let scrollTop = 0;\n    let offsetHeight = 0;\n    const _target = target();\n\n    if (_target) {\n      scrollTop = getScrollTop(_target);\n      offsetHeight = _target.offsetHeight || 0;\n    }\n    const nextShow = scrollTop > offsetHeight / 3 || scrollTop > local.visibilityHeight;\n\n    if (Boolean(show()) !== nextShow) {\n      setShow(nextShow);\n    }\n    return false;\n  }\n\n  onMount(() => {\n    target()?.addEventListener('scroll', handleScrollY, false);\n  });\n  onCleanup(() => {\n    target()?.removeEventListener('scroll', handleScrollY, false);\n  });\n  return (\n    <Show when={show() !== null}>\n      <Portal useShadow mount={local.mount}>\n        <style textContent={baseStyle()} />\n        <style textContent={themeStyle()} />\n        <style textContent={style} />\n        <Show when={local.css}>\n          <style textContent={css(local.css)} />\n        </Show>\n        <div\n          onAnimationEnd={exit}\n          class={cx('back-top', local.class)}\n          classList={{\n            'back-top-out': show() === false,\n          }}\n          onClick={handleBackTop}\n          style={{ 'z-index': getMaxZindex().toString() }}\n          {...other}\n        />\n      </Portal>\n    </Show>\n  );\n}\n\nexport type BackTopElement = CustomElement<BackTopProps>;\n\ncustomElement<BackTopProps>(\n  'n-back-top',\n  {\n    class: void 0,\n    css: void 0,\n    visibilityHeight: void 0,\n    mount: void 0,\n    target: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n\n    if (!el.mount) {\n      el.style.position = 'sticky';\n      el.style.bottom = '24px';\n      el.style.right = '24px';\n      el.style.display = 'block';\n      el.style.pointerEvents = 'none';\n    }\n    const props = mergeProps(\n      {\n        css: el.css,\n        visibilityHeight: el.visibilityHeight,\n        mount: el.renderRoot as HTMLElement,\n        target: el.target,\n      },\n      _,\n    );\n\n    createEffect(() => {\n      clearAttribute(el, ['css']);\n    });\n    return (\n      <>\n        <style textContent={inline} />\n        <BackTop {...props} />\n      </>\n    );\n  },\n);\nexport default BackTop;\n"],"names":["createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","Show","splitProps","Portal","getMaxZindex","getScrollTop","isFunction","css","cx","customElement","clearAttribute","theme","inline","style","BackTop","_","baseStyle","isDark","local","other","target","window","visibilityHeight","show","setShow","themeStyle","bg","handleBackTop","scrollTo","top","behavior","exit","handleScrollY","e","preventDefault","scrollTop","offsetHeight","_target","nextShow","Boolean","addEventListener","removeEventListener","mount","class","toString","opt","el","element","position","bottom","right","display","pointerEvents","props","renderRoot"],"mappings":"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"}
+{"version":3,"sources":["components/back-top/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  Show,\n  splitProps,\n} from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { getMaxZindex, getScrollTop, isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { inline } from '../theme';\nimport { registry } from '../utils';\n\nimport { style } from './style';\n\nexport interface BackTopProps {\n  /** 设置需要监听其滚动事件的元素\n   * @default window\n   */\n  target?: HTMLElement | (() => HTMLElement | undefined);\n  /** 挂载到指定的元素\n   * @default body\n   */\n  mount?: HTMLElement;\n  /** 滚动高度达到此参数值才出现 BackTop */\n  visibilityHeight?: number;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n}\n\nfunction BackTop(_: BackTopProps) {\n  const { baseStyle, isDark } = theme;\n  const props = mergeProps({ target: window as unknown as HTMLElement, visibilityHeight: 400 }, _);\n  const [local, other] = splitProps(props, ['class', 'target', 'mount', 'css', 'visibilityHeight']);\n  const [show, setShow] = createSignal<boolean | null>(null);\n  const target = createMemo(() => (isFunction(local.target) ? local.target() : local.target));\n\n  const themeStyle = createMemo(() => {\n    const bg = isDark() ? 'rgb(255 255 255 / 45%)' : 'var(--primary-border)';\n\n    return `:host {--back-top-bg: ${bg};}`;\n  });\n\n  function handleBackTop() {\n    target()?.scrollTo({\n      top: 0,\n      behavior: 'smooth',\n    });\n  }\n  function exit() {\n    if (show() === false) {\n      setShow(null);\n    }\n  }\n  function handleScrollY(e: Event) {\n    e.preventDefault();\n    let scrollTop = 0;\n    let offsetHeight = 0;\n    const _target = target();\n\n    if (_target) {\n      scrollTop = getScrollTop(_target);\n      offsetHeight = _target.offsetHeight || 0;\n    }\n    const nextShow = scrollTop > offsetHeight / 3 || scrollTop > local.visibilityHeight;\n\n    if (Boolean(show()) !== nextShow) {\n      setShow(nextShow);\n    }\n    return false;\n  }\n\n  onMount(() => {\n    target()?.addEventListener('scroll', handleScrollY, false);\n  });\n  onCleanup(() => {\n    target()?.removeEventListener('scroll', handleScrollY, false);\n  });\n  return (\n    <Show when={show() !== null}>\n      <Portal useShadow mount={local.mount}>\n        <style textContent={baseStyle()} />\n        <style textContent={themeStyle()} />\n        <style textContent={style} />\n        <Show when={local.css}>\n          <style textContent={css(local.css)} />\n        </Show>\n        <div\n          onAnimationEnd={exit}\n          class={cx('back-top', local.class)}\n          classList={{\n            'back-top-out': show() === false,\n          }}\n          onClick={handleBackTop}\n          style={{ 'z-index': getMaxZindex().toString() }}\n          {...other}\n        />\n      </Portal>\n    </Show>\n  );\n}\n\nexport type BackTopElement = CustomElement<BackTopProps>;\n\nBackTop.registry = () => {\n  customElement<BackTopProps>(\n    'n-back-top',\n    {\n      class: void 0,\n      css: void 0,\n      visibilityHeight: void 0,\n      mount: void 0,\n      target: void 0,\n    },\n    (_, opt) => {\n      const el = opt.element;\n\n      if (!el.mount) {\n        el.style.position = 'sticky';\n        el.style.bottom = '24px';\n        el.style.right = '24px';\n        el.style.display = 'block';\n        el.style.pointerEvents = 'none';\n      }\n      const props = mergeProps(\n        {\n          css: el.css,\n          visibilityHeight: el.visibilityHeight,\n          mount: el.renderRoot as HTMLElement,\n          target: el.target,\n        },\n        _,\n      );\n\n      createEffect(() => {\n        clearAttribute(el, ['css']);\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <BackTop {...props} />\n        </>\n      );\n    },\n  );\n};\n\nregistry(BackTop);\nexport default BackTop;\n"],"names":["createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","Show","splitProps","Portal","getMaxZindex","getScrollTop","isFunction","css","cx","customElement","clearAttribute","theme","inline","registry","style","BackTop","_","baseStyle","isDark","local","other","target","window","visibilityHeight","show","setShow","themeStyle","bg","handleBackTop","scrollTo","top","behavior","exit","handleScrollY","e","preventDefault","scrollTop","offsetHeight","_target","nextShow","Boolean","addEventListener","removeEventListener","mount","class","toString","opt","el","element","position","bottom","right","display","pointerEvents","props","renderRoot"],"mappings":"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"}

package/es/button/index.d.ts

@@ -41,4 +41,7 @@ export interface ButtonProps {
 }
 export type ButtonElement = CustomElement<ButtonProps>;
 declare function Button(_: ButtonProps): import("solid-js").JSX.Element;
+declare namespace Button {
+    var registry: () => void;
+}
 export default Button;

package/es/button/index.js

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

package/es/button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/button/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  Match,\n  mergeProps,\n  Show,\n  splitProps,\n  Switch,\n} from 'solid-js';\nimport { 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 { clearAttribute, type JSXElement } from '../basic-config';\nimport theme, { block, inline } from '../theme';\n\nimport loadingIcon from './loading';\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?: (() => JSXElement) | JSXElement;\n  children?: JSXElement | string;\n  onClick?(e: Event): void;\n  loading?: boolean;\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    'loading',\n  ]);\n  let ref: HTMLButtonElement | undefined;\n  const [animating, setAnimating] = createSignal(false);\n\n  function handleClick() {\n    if (!local.disabled && !local.loading) {\n      setAnimating(true);\n    }\n  }\n  function handleAnimationEnd() {\n    setAnimating(false);\n  }\n  const icon = createMemo(() => (isFunction(local.icon) ? local.icon() : local.icon));\n  const hostStyle = createMemo(() => (local.block ? block : inline));\n\n  return (\n    <>\n      <style textContent={hostStyle()} />\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          loading: local.loading,\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 || local.loading}\n        role=\"button\"\n        {...other}\n      >\n        <Show when={local.icon || local.loading}>\n          <span class=\"icon\" part=\"icon\">\n            <Switch>\n              <Match when={local.icon}>{icon()}</Match>\n              <Match when={local.loading}>{loadingIcon()}</Match>\n            </Switch>\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    loading: 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      clearAttribute(el, ['css']);\n      el.replaceChildren();\n    });\n\n    return <Button {...props} />;\n  },\n);\nexport default Button;\n"],"names":["createEffect","createMemo","createSignal","Match","mergeProps","Show","splitProps","Switch","Dynamic","isFunction","css","customElement","clearAttribute","theme","block","inline","loadingIcon","style","Button","_","ref","baseStyle","local","other","size","type","animating","setAnimating","icon","hostStyle","link","tag","loading","danger","fill","circle","flat","dashed","ghost","disabled","without","children","class","opt","el","element","props","childNodes","values","replaceChildren"],"mappings":"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"}
+{"version":3,"sources":["components/button/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  Match,\n  mergeProps,\n  Show,\n  splitProps,\n  Switch,\n} from 'solid-js';\nimport { 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 { clearAttribute, type JSXElement } from '../basic-config';\nimport theme, { block, inline } from '../theme';\nimport { registry } from '../utils';\n\nimport loadingIcon from './loading';\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?: (() => JSXElement) | JSXElement;\n  children?: JSXElement | string;\n  onClick?(e: Event): void;\n  loading?: boolean;\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    'loading',\n  ]);\n  let ref: HTMLButtonElement | undefined;\n  const [animating, setAnimating] = createSignal(false);\n\n  function handleClick() {\n    if (!local.disabled && !local.loading) {\n      setAnimating(true);\n    }\n  }\n  function handleAnimationEnd() {\n    setAnimating(false);\n  }\n  const icon = createMemo(() => (isFunction(local.icon) ? local.icon() : local.icon));\n  const hostStyle = createMemo(() => (local.block ? block : inline));\n\n  return (\n    <>\n      <style textContent={hostStyle()} />\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          loading: local.loading,\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 || local.loading}\n        role=\"button\"\n        {...other}\n      >\n        <Show when={local.icon || local.loading}>\n          <span class=\"icon\" part=\"icon\">\n            <Switch>\n              <Match when={local.icon}>{icon()}</Match>\n              <Match when={local.loading}>{loadingIcon()}</Match>\n            </Switch>\n          </span>\n        </Show>\n        <span class=\"label\" part=\"label\">\n          {local.children}\n        </span>\n      </Dynamic>\n    </>\n  );\n}\n\nButton.registry = () => {\n  customElement<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      loading: 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        clearAttribute(el, ['css']);\n        el.replaceChildren();\n      });\n\n      return <Button {...props} />;\n    },\n  );\n};\n\nregistry(Button);\nexport default Button;\n"],"names":["createEffect","createMemo","createSignal","Match","mergeProps","Show","splitProps","Switch","Dynamic","isFunction","css","customElement","clearAttribute","theme","block","inline","registry","loadingIcon","style","Button","_","ref","baseStyle","local","other","size","type","animating","setAnimating","icon","hostStyle","link","tag","loading","danger","fill","circle","flat","dashed","ghost","disabled","without","children","class","opt","el","element","props","childNodes","values","replaceChildren"],"mappings":"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"}

package/es/capture-screen/index.d.ts

@@ -50,4 +50,7 @@ export interface CaptureScreenProps {
 }
 export type CaptureScreenElement = CustomElement<CaptureScreenProps, 'onErrorRecorder' | 'onStopRecorder' | 'onStartRecorder' | 'onRecorderDataAvailable' | 'onErrorCapture' | 'onStopCapture' | 'onStartCapture' | 'onSaveRecorder'>;
 declare function CaptureScreen(_: CaptureScreenProps): import("solid-js").JSX.Element;
+declare namespace CaptureScreen {
+    var registry: () => void;
+}
 export default CaptureScreen;

package/es/capture-screen/index.js

@@ -1 +1 @@
-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{clearAttribute as A}from"../basic-config";import L,{inline as P}from"../theme";import{style as B}from"./style";import"../button";let M={video:!0,audio:{echoCancellation:!0,noiseSuppression:!0,sampleRate:44100}},F={inactive:"primary",paused:"warning",recording:"success"};function I(o){let d;let{baseStyle:O}=L,[A,P]=y(E({options:M,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(_(A.onStartRecorder)&&A.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==A.onRecorderDataAvailable||A.onRecorderDataAvailable.call(A,e)}function U(){let e=j(q);e&&("inactive"!==e.state&&e.stop(),K(e.state)),null==A.onStopRecorder||A.onStopRecorder.call(A)}function V(){if(!I.length)return;let e=new Blob(I,{type:"video/webm"}),t=A.filename||new Date().toISOString(),r=`${t}.webm`;I.splice(0),A.onSaveRecorder&&A.onSaveRecorder(e,r),$(e,r)}function W(){U();let e=j(G);e&&(e.getTracks().forEach(e=>{e.stop()}),H(null)),null==A.onStopCapture||A.onStopCapture.call(A)}function X(){return Y.apply(this,arguments)}function Y(){var r;return r=function*(){W();try{let e=yield navigator.mediaDevices.getDisplayMedia(t({},M,A.options));e&&(e.addEventListener("inactive",W,!1),H(e)),null==A.onStartCapture||A.onStartCapture.call(A,e)}catch(e){null==A.onErrorCapture||A.onErrorCapture.call(A,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();A.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=A.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:A.pausedRecorderText,recording:A.recorderingText,inactive:A.startRecorderText})[J()]);return[(()=>{let e=v(),t=e.firstChild;return l(()=>t.data=O()),e})(),(()=>{let e=m();return e.textContent=B,e})(),p(T,{get when(){return A.css},get children(){let e=v(),t=e.firstChild;return l(()=>t.data=k(A.css)),e}}),(()=>{let e=R(),t=e.firstChild,o=t.firstChild;return n(e,a({get class(){return D("capture-screen",A.class)}},P),!1,!0),u(o,"click",X,!0),o._$owner=c(),s(o,()=>A.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,()=>A.stopCaptureText),e})(),p(T,{get when(){return A.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,()=>A.stopRecorderText),e}}),null),l(()=>t.type=F[J()]),e}})]}}),null),s(e,p(T,{get when(){return i(()=>!!A.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=A.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,o=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);return g(()=>{A(r,["css","options"])}),[(()=>{let e=m();return e.textContent=P,e})(),p(I,o)]});export default I;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>'),g=o('<div><div class="controller"><n-button class="btn">',!0,!1);import{createEffect as R,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{clearAttribute as A}from"../basic-config";import L,{inline as P}from"../theme";import{registry as B}from"../utils";import{style as M}from"./style";import"../button";let F={video:!0,audio:{echoCancellation:!0,noiseSuppression:!0,sampleRate:44100}},I={inactive:"primary",paused:"warning",recording:"success"};function q(o){let d;let{baseStyle:O}=L,[A,P]=y(E({options:F,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"]),B=[],[q,z]=S(null),[G,H]=S(null),[J,K]=S("inactive");function N(){let e=j(q);if(e){switch(_(A.onStartRecorder)&&A.onStartRecorder(e.state),e.state){case"inactive":e.start();break;case"paused":e.resume();break;default:e.pause()}K(e.state)}}function Q(e){B.push(e.data),null==A.onRecorderDataAvailable||A.onRecorderDataAvailable.call(A,e)}function U(){let e=j(q);e&&("inactive"!==e.state&&e.stop(),K(e.state)),null==A.onStopRecorder||A.onStopRecorder.call(A)}function V(){if(!B.length)return;let e=new Blob(B,{type:"video/webm"}),t=A.filename||new Date().toISOString(),r=`${t}.webm`;B.splice(0),A.onSaveRecorder&&A.onSaveRecorder(e,r),$(e,r)}function W(){U();let e=j(G);e&&(e.getTracks().forEach(e=>{e.stop()}),H(null)),null==A.onStopCapture||A.onStopCapture.call(A)}function X(){return Y.apply(this,arguments)}function Y(){var r;return r=function*(){W();try{let e=yield navigator.mediaDevices.getDisplayMedia(t({},F,A.options));e&&(e.addEventListener("inactive",W,!1),H(e)),null==A.onStartCapture||A.onStartCapture.call(A,e)}catch(e){null==A.onErrorCapture||A.onErrorCapture.call(A,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)}R(()=>{let e=G();A.preview&&d&&e&&(d.srcObject=e)}),R(()=>{let e=G();if(null==e?void 0:e.active){let t=new MediaRecorder(e);t.onstop=V,t.onerror=A.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:A.pausedRecorderText,recording:A.recorderingText,inactive:A.startRecorderText})[J()]);return[(()=>{let e=v(),t=e.firstChild;return l(()=>t.data=O()),e})(),(()=>{let e=m();return e.textContent=M,e})(),p(T,{get when(){return A.css},get children(){let e=v(),t=e.firstChild;return l(()=>t.data=k(A.css)),e}}),(()=>{let e=g(),t=e.firstChild,o=t.firstChild;return n(e,a({get class(){return D("capture-screen",A.class)}},P),!1,!0),u(o,"click",X,!0),o._$owner=c(),s(o,()=>A.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,()=>A.stopCaptureText),e})(),p(T,{get when(){return A.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,()=>A.stopRecorderText),e}}),null),l(()=>t.type=I[J()]),e}})]}}),null),s(e,p(T,{get when(){return i(()=>!!A.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=A.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})()]}q.registry=()=>{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,o=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);return R(()=>{A(r,["css","options"])}),[(()=>{let e=m();return e.textContent=P,e})(),p(q,o)]})},B(q);export default q;d(["click"]);

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

@@ -1 +1 @@
-{"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 { clearAttribute } from '../basic-config';\nimport theme, { inline } 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    createEffect(() => {\n      clearAttribute(el, ['css', 'options']);\n    });\n    return (\n      <>\n        <style textContent={inline} />\n        <CaptureScreen {...props} />\n      </>\n    );\n  },\n);\n\nexport default CaptureScreen;\n"],"names":["createEffect","createMemo","createSignal","mergeProps","onCleanup","Show","splitProps","untrack","downloadBlob","isFunction","css","cx","customElement","clearAttribute","theme","inline","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":"gjCAAA,QACEA,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,aAAAA,CAAS,CACTC,QAAAA,CAAI,CACJC,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,AAG9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,GAASC,UAAAA,CAAM,KAAQ,UAAW,AAEzC,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAEhC,OAAO,WAAY,CA+DnB,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,CAAGhB,EAchB,CAACiB,EAAOC,EAAM,CAAG1B,EAbRH,EACb,CACE8B,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,CAAGzC,EAAmC,MACvE,CAAC0C,EAAaC,EAAe,CAAG3C,EAAiC,MACjE,CAAC4C,EAAaC,EAAe,CAAG7C,EAAqC,YAG3E,SAAS8C,IACP,IAAMC,EAAK1C,EAAQmC,GAEnB,GAAIO,EAAI,CAIN,OAHIxC,EAAWsB,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,EACrEf,EAAOgB,IAAI,CAACD,EAAEE,IAAI,QAClB3B,EAAM4B,uBAAuB,EAA7B5B,EAAM4B,uBAAuB,MAA7B5B,EAAgCyB,EAClC,CAEA,SAASI,IACP,IAAMX,EAAK1C,EAAQmC,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,CAACtB,EAAOuB,MAAM,CAAE,OAEpB,IAAMC,EAAa,IAAIC,KAAKzB,EAAQ,CAClC0B,KAAM,YACR,GACMC,EAAOrC,EAAMsC,QAAQ,EAAI,IAAIC,OAAOC,WAAW,GAC/CC,EAAW,CAAC,EAAEJ,EAAK,KAAK,CAAC,CAE/B3B,EAAOgC,MAAM,CAAC,GACV1C,EAAM2C,cAAc,EACtB3C,EAAM2C,cAAc,CAACT,EAAMO,GAG7BhE,EAAayD,EAAMO,EACrB,CAGA,SAASG,IAEPf,IACA,IAAMgB,EAAKrE,EAAQqC,GAEfgC,IAGFC,AAFeD,EAAGE,SAAS,GAEpBC,OAAO,CAAC,AAACC,IACdA,EAAMnB,IAAI,EACZ,GACAhB,EAAe,aAEjBd,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,qMAmBflF,EAAa,KACX,IAAM4E,EAAKhC,GAEPb,CAAAA,EAAM4D,OAAO,EAAI9D,GAAa+C,GAChC/C,CAAAA,EAAU+D,SAAS,CAAGhB,CAAC,CAE3B,GAEA5E,EAAa,KACX,IAAM4E,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,GAEAvC,EAAU,KACR,IAAM6C,EAAK1C,EAAQmC,GAGfO,GAAMA,AAAa,aAAbA,EAAGE,KAAK,EAChBF,EAAGY,IAAI,GAET,IAAMe,EAAKrE,EAAQqC,GAEfgC,GAGFC,AAFeD,EAAGE,SAAS,GAEpBC,OAAO,CAAC,AAACC,IACdA,EAAMnB,IAAI,EACZ,EAEJ,GACA,IAAMsC,EAAelG,EAAW,IACvB,CAAA,CACLwB,OAAQM,EAAMO,kBAAkB,CAChCZ,UAAWK,EAAMQ,eAAe,CAChCf,SAAUO,EAAMK,iBAAiB,AACnC,CAAA,CAAC,CAACU,IAAc,EAGlB,0DAEwBhB,gDACAd,UACnBX,qBAAW0B,EAAMrB,GAAG,8DACCA,EAAIqB,EAAMrB,GAAG,uFAEvBC,EAAG,iBAAkBoB,EAAMqE,KAAK,IAAOpE,sBAE5BkD,4BAChBnD,EAAMG,iBAAiB,QAEzB7B,qBAAWuC,8DAEyB+B,eAAf,CAAA,wBACf5C,EAAMI,eAAe,UAEvB9B,qBAAW0B,EAAMsE,QAAQ,4EAIXrD,wBAGFmD,SAER9F,oBAAWyC,AAAkB,aAAlBA,iDACsBc,4BAC7B7B,EAAMM,gBAAgB,0BARnBd,CAAY,CAACuB,IAAc,uBAgB5CzC,qBAAW0B,QAAAA,EAAM4D,OAAO,KAAI/C,+DAQbf,oCAAAA,kBAJqB,cAAlBiB,SACe,WAAlBA,OAG8Bf,EAAMuE,QAAQ,EAAI1D,AAAkB,OAAlBA,4MAMxE,CAEAhC,EACE,mBACA,CACEwF,MAAO,KAAK,EACZ1F,IAAK,KAAK,EACVuB,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,CAChBzE,EAAQ7B,EACZ,CACEqC,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,GAMF,OAHA5B,EAAa,KACXa,EAAe2F,EAAI,CAAC,MAAO,UAAU,CACvC,yCAGwBzF,UACnBY,EAAkBK,GAGzB,EAGF,gBAAeL,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 { clearAttribute } from '../basic-config';\nimport theme, { inline } from '../theme';\nimport { registry } from '../utils';\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\nCaptureScreen.registry = () => {\n  customElement<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      createEffect(() => {\n        clearAttribute(el, ['css', 'options']);\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <CaptureScreen {...props} />\n        </>\n      );\n    },\n  );\n};\nregistry(CaptureScreen);\nexport default CaptureScreen;\n"],"names":["createEffect","createMemo","createSignal","mergeProps","onCleanup","Show","splitProps","untrack","downloadBlob","isFunction","css","cx","customElement","clearAttribute","theme","inline","registry","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/index.d.ts

@@ -22,4 +22,7 @@ export interface CarouselProps {
 }
 export type CarouselElement = CustomElement<CarouselProps>;
 declare function Carousel(_props: CarouselProps): import("solid-js").JSX.Element;
+declare namespace Carousel {
+    var registry: () => void;
+}
 export default Carousel;

package/es/carousel/index.js

@@ -1 +1 @@
-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 r}from"solid-js/web";import{effect as l}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">'),f=e('<div class="dots">'),v=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{clearAttribute as k}from"../basic-config";import S,{block as E}from"../theme";import{style as I}from"./style";function N(e){let o;let{baseStyle:_}=S,k=w({autoplay:-1,children:[]},e),[E,N]=p(0),[A,L]=p(1),[F,M]=p(0),[O,P]=p(0);function q(){let e=O();-1===e?M(E()):1===e&&M(A()),P(0),x(k.onChange)&&k.onChange(F())}function z(){P(-1)}function B(){P(1)}function D(e,t){t.stopPropagation();let i=F(),r=20*Math.floor(i/20)+e;r>i?(P(1),L(r)):r<i&&(P(-1),N(r))}let G=g(()=>[...k.children]),H=g(()=>Array(G().length>20?20:G().length).fill(null));u(()=>{void 0!==k.offset&&M(Number(k.offset))}),u(()=>{var e,t;let i,r;let[l,o]=(e=F(),t=G(),i=e-1,r=e+1,i<0&&(i=t.length-1),r>t.length-1&&(r=0),[i,r]);N(l),L(o)}),u(()=>{clearInterval(o);let e=Number(k.autoplay);e>0&&(o=setInterval(()=>{e<1&&clearInterval(o),B()},e))}),C(()=>{clearInterval(o)});let J=g(()=>x(k.header)?k.header(F()):k.header);return[(()=>{let e=d(),t=e.firstChild;return l(()=>t.data=_()),e})(),(()=>{let e=c();return e.textContent=I,e})(),n(j,{get when(){return k.css},get children(){let e=d(),t=e.firstChild;return l(()=>t.data=y(k.css)),e}}),(()=>{let e=v(),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()[E()]),a(c,"animationend",q),i(c,()=>G()[F()]),i(u,()=>G()[A()]),g._$owner=r(),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 k.dots},get children(){let e=f();return i(e,n(b,{get each(){return H()},children:(e,t)=>(()=>{let e=h();return a(e,"click",D.bind(null,t),!0),l(()=>e.classList.toggle("active",!(t!==F()%20+O()))),e})()})),e}}),null),l(i=>{let r=$("carousel",k.class),l=O();return r!==i._v$&&s(e,i._v$=r),l!==i._v$2&&t(o,"data-dir",i._v$2=l),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,r=w({onChange(e){i.offset=e,i.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return u(()=>{k(i,["css"]),i.replaceChildren()}),[(()=>{let e=c();return e.textContent=E,e})(),n(N,r)]});export default N;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 r}from"solid-js/web";import{effect as l}from"solid-js/web";import{delegateEvents as o}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{className as n}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=e("<style> "),c=e("<style>"),m=e('<section class="header">'),f=e('<div class="dots">'),v=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">'),u=e('<i class="dot">');import{createEffect as h,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{clearAttribute as k}from"../basic-config";import S,{block as E}from"../theme";import{registry as I}from"../utils";import{style as N}from"./style";function A(e){let o;let{baseStyle:_}=S,k=w({autoplay:-1,children:[]},e),[E,I]=p(0),[A,L]=p(1),[F,M]=p(0),[O,P]=p(0);function q(){let e=O();-1===e?M(E()):1===e&&M(A()),P(0),x(k.onChange)&&k.onChange(F())}function z(){P(-1)}function B(){P(1)}function D(e,t){t.stopPropagation();let i=F(),r=20*Math.floor(i/20)+e;r>i?(P(1),L(r)):r<i&&(P(-1),I(r))}let G=g(()=>[...k.children]),H=g(()=>Array(G().length>20?20:G().length).fill(null));h(()=>{void 0!==k.offset&&M(Number(k.offset))}),h(()=>{var e,t;let i,r;let[l,o]=(e=F(),t=G(),i=e-1,r=e+1,i<0&&(i=t.length-1),r>t.length-1&&(r=0),[i,r]);I(l),L(o)}),h(()=>{clearInterval(o);let e=Number(k.autoplay);e>0&&(o=setInterval(()=>{e<1&&clearInterval(o),B()},e))}),C(()=>{clearInterval(o)});let J=g(()=>x(k.header)?k.header(F()):k.header);return[(()=>{let e=d(),t=e.firstChild;return l(()=>t.data=_()),e})(),(()=>{let e=c();return e.textContent=N,e})(),s(j,{get when(){return k.css},get children(){let e=d(),t=e.firstChild;return l(()=>t.data=y(k.css)),e}}),(()=>{let e=v(),o=e.firstChild,d=o.firstChild,c=d.nextSibling,h=c.nextSibling,g=o.nextSibling,p=g.nextSibling,w=p.nextSibling;return i(d,()=>G()[E()]),a(c,"animationend",q),i(c,()=>G()[F()]),i(h,()=>G()[A()]),g._$owner=r(),i(e,s(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,s(j,{get when(){return k.dots},get children(){let e=f();return i(e,s(b,{get each(){return H()},children:(e,t)=>(()=>{let e=u();return a(e,"click",D.bind(null,t),!0),l(()=>e.classList.toggle("active",!(t!==F()%20+O()))),e})()})),e}}),null),l(i=>{let r=$("carousel",k.class),l=O();return r!==i._v$&&n(e,i._v$=r),l!==i._v$2&&t(o,"data-dir",i._v$2=l),i},{_v$:void 0,_v$2:void 0}),e})()]}A.registry=()=>{_("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,r=w({onChange(e){i.offset=e,i.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return h(()=>{k(i,["css"]),i.replaceChildren()}),[(()=>{let e=c();return e.textContent=E,e})(),s(A,r)]})},I(A);export default A;o(["click"]);