neko-ui 2.9.2 → 2.9.4

package/es/typography/index.js.map

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

package/lib/avatar/group.js

@@ -1,4 +1,20 @@
-"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return h}});const t=require("solid-js/web"),r=require("solid-js"),n=require("@moneko/css"),a=require("solid-element"),s=require("../basic-config"),i=(e=require("../popover"))&&e.__esModule?e:{default:e},o=require("../theme");require("../avatar");const l=(0,t.template)("<style>"),c=(0,t.template)("<style> "),u=(0,t.template)("<n-avatar>",!0,!1),p=(0,t.template)("<div>"),d=(0,t.template)('<div class="more">'),m=(0,n.css)`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return h}});const e=require("solid-js/web"),t=require("solid-js"),r=require("@moneko/css"),n=require("solid-element"),a=require("../basic-config"),i=o(require("../popover")),s=require("../theme");function o(e){return e&&e.__esModule?e:{default:e}}require("../avatar");const l=(0,e.template)("<style>"),c=(0,e.template)("<style> "),u=(0,e.template)("<n-avatar>",!0,!1),p=(0,e.template)("<div>"),d=(0,e.template)('<div class="more">'),m=(0,r.css)`
+  .more {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow-y: auto;
+    padding: 8px;
+    max-inline-size: 60vi;
+    max-block-size: 80vb;
+    gap: 8px;
+    flex-wrap: wrap;
+
+    > n-avatar {
+      display: flex;
+    }
+  }
+`,g=(0,r.css)`
   .group {
     display: inline-flex;
     align-items: center;
@@ -22,21 +38,4 @@
       }
     }
   }
-`,g=(0,n.css)`
-  .more {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow-y: auto;
-    padding: 8px;
-    max-inline-size: 60vi;
-    max-block-size: 80vb;
-    gap: 8px;
-    flex-wrap: wrap;
-
-    & > n-avatar {
-      display: flex;
-    }
-  }
-`,v={data:[],size:void 0,class:void 0,maxCount:void 0,css:void 0};function f(e){let a=(0,r.mergeProps)(v,e),[s,o]=(0,r.splitProps)(a,["data","maxCount","class","size","css"]),f=(0,r.createMemo)(()=>s.data||[]),h=(0,r.createMemo)(()=>f().slice(0,s.maxCount)),x=(0,r.createMemo)(()=>{let e=f(),t=e.length-(s.maxCount||e.length);return t>0?e.slice(-t):[]});return[(()=>{let e=l();return e.textContent=m,e})(),(0,t.createComponent)(r.Show,{get when(){return s.css},get children(){let e=c(),r=e.firstChild;return(0,t.effect)(()=>r.data=(0,n.css)(s.css)),e}}),(()=>{let e=p();return(0,t.spread)(e,(0,t.mergeProps)(o,{get class(){return(0,n.cx)("group",s.class)}}),!1,!0),(0,t.insert)(e,(0,t.createComponent)(r.For,{get each(){return h()},children:e=>(()=>{let r=u();return(0,t.spread)(r,(0,t.mergeProps)(e,{get size(){return s.size}}),!1,!1),r._$owner=(0,t.getOwner)(),r})()}),null),(0,t.insert)(e,(0,t.createComponent)(r.Show,{get when(){return x().length},get children(){return(0,t.createComponent)(i.default,{arrow:!0,trigger:"click",popupCss:g,get content(){return(()=>{let e=d();return(0,t.insert)(e,(0,t.createComponent)(r.For,{get each(){return x()},children:e=>(()=>{let r=u();return(0,t.spread)(r,(0,t.mergeProps)(e,{get size(){return s.size}}),!1,!1),r._$owner=(0,t.getOwner)(),r})()})),e})()},get children(){let e=u();return e._$owner=(0,t.getOwner)(),(0,t.effect)(t=>{let r=s.size,n=`+${x().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})()]}(0,a.customElement)("n-avatar-group",v,(e,n)=>{let a=n.element;return(0,r.createEffect)(()=>{(0,s.clearAttribute)(a,["css","data"])}),[(()=>{let e=l();return e.textContent=o.inline,e})(),(0,t.createComponent)(f,e)]});const h=f;
-//# sourceMappingURL=group.js.map
+`,v={data:[],size:void 0,class:void 0,maxCount:void 0,css:void 0};function f(n){let a=(0,t.mergeProps)(v,n),[s,o]=(0,t.splitProps)(a,["data","maxCount","class","size","css"]),f=(0,t.createMemo)(()=>s.data||[]),h=(0,t.createMemo)(()=>f().slice(0,s.maxCount)),x=(0,t.createMemo)(()=>{let e=f(),t=e.length-(s.maxCount||e.length);return t>0?e.slice(-t):[]});return[(()=>{let e=l();return e.textContent=g,e})(),(0,e.createComponent)(t.Show,{get when(){return s.css},get children(){let t=c(),n=t.firstChild;return(0,e.effect)(()=>n.data=(0,r.css)(s.css)),t}}),(()=>{let n=p();return(0,e.spread)(n,(0,e.mergeProps)(o,{get class(){return(0,r.cx)("group",s.class)}}),!1,!0),(0,e.insert)(n,(0,e.createComponent)(t.For,{get each(){return h()},children:t=>(()=>{let r=u();return(0,e.spread)(r,(0,e.mergeProps)(t,{get size(){return s.size}}),!1,!1),r._$owner=(0,e.getOwner)(),r})()}),null),(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return x().length},get children(){return(0,e.createComponent)(i.default,{arrow:!0,trigger:"click",popupCss:m,get content(){return(()=>{let r=d();return(0,e.insert)(r,(0,e.createComponent)(t.For,{get each(){return x()},children:t=>(()=>{let r=u();return(0,e.spread)(r,(0,e.mergeProps)(t,{get size(){return s.size}}),!1,!1),r._$owner=(0,e.getOwner)(),r})()})),r})()},get children(){let t=u();return t._$owner=(0,e.getOwner)(),(0,e.effect)(e=>{let r=s.size,n=`+${x().length}`;return r!==e._v$&&(t.size=e._v$=r),n!==e._v$2&&(t.username=e._v$2=n),e},{_v$:void 0,_v$2:void 0}),t}})}}),null),n})()]}(0,n.customElement)("n-avatar-group",v,(r,n)=>{let i=n.element;return(0,t.createEffect)(()=>{(0,a.clearAttribute)(i,["css","data"])}),[(()=>{let e=l();return e.textContent=s.inline,e})(),(0,e.createComponent)(f,r)]});const h=f;

package/lib/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 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\nconst moreCss = css`\n  .more {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow-y: auto;\n    padding: 8px;\n    max-inline-size: 60vi;\n    max-block-size: 80vb;\n    gap: 8px;\n    flex-wrap: wrap;\n\n    & > n-avatar {\n      display: flex;\n    }\n  }\n`;\n\nexport interface AvatarGroupProps {\n  /** 头像数据 */\n  data?: Omit<AvatarProps, 'size'>[];\n  /** 头像尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 最多显示个数 */\n  maxCount?: number;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n}\nexport type AvatarGroupElement = CustomElement<AvatarGroupProps>;\n\nconst defaultProps: AvatarGroupProps = {\n  data: [],\n  size: void 0,\n  class: void 0,\n  maxCount: void 0,\n  css: void 0,\n};\n\nfunction AvatarGroup(_props: AvatarGroupProps) {\n  const props = mergeProps(defaultProps, _props);\n  const [local, other] = splitProps(props, ['data', 'maxCount', 'class', 'size', 'css']);\n  const data = createMemo(() => local.data || []);\n  const showAvatar = createMemo(() => data().slice(0, local.maxCount));\n  const more = createMemo(() => {\n    const _data = data();\n    const len = _data.length - (local.maxCount || _data.length);\n\n    if (len > 0) {\n      return _data.slice(-len);\n    }\n    return [];\n  });\n\n  return (\n    <>\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <div {...other} class={cx('group', local.class)}>\n        <For each={showAvatar()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n        <Show when={more().length}>\n          <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":["style","css","moreCss","defaultProps","data","size","class","maxCount","AvatarGroup","_props","props","mergeProps","local","other","splitProps","createMemo","showAvatar","slice","more","_data","len","length","Show","cx","For","a","Popover","customElement","opt","el","element","createEffect","clearAttribute","inline"],"mappings":"wGAuIA,+CAAA,+CAvI4E,sBACpD,yBACM,2BAGC,gCACX,qDACG,oBAEhB,kLAEDA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AAwBlB,CAAC,CAEKC,EAAUD,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;AAgBpB,CAAC,CAkBKE,EAAiC,CACrCC,KAAM,EAAE,CACRC,KAAM,KAAK,EACXC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfN,IAAK,KAAK,CACZ,EAEA,SAASO,EAAYC,CAAwB,EAC3C,IAAMC,EAAQC,GAAAA,YAAU,EAACR,EAAcM,GACjC,CAACG,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACJ,EAAO,CAAC,OAAQ,WAAY,QAAS,OAAQ,MAAM,EAC/EN,EAAOW,GAAAA,YAAU,EAAC,IAAMH,EAAMR,IAAI,EAAI,EAAE,EACxCY,EAAaD,GAAAA,YAAU,EAAC,IAAMX,IAAOa,KAAK,CAAC,EAAGL,EAAML,QAAQ,GAC5DW,EAAOH,GAAAA,YAAU,EAAC,KACtB,IAAMI,EAAQf,IACRgB,EAAMD,EAAME,MAAM,CAAIT,CAAAA,EAAML,QAAQ,EAAIY,EAAME,MAAM,AAAD,SAEzD,AAAID,EAAM,EACDD,EAAMF,KAAK,CAAC,CAACG,GAEf,EAAE,AACX,GAEA,4CAEwBpB,8BACnBsB,MAAI,oBAAOV,EAAMX,GAAG,wEACCA,GAAAA,KAAG,EAACW,EAAMX,GAAG,8DAE1BY,qBAAcU,GAAAA,IAAE,EAAC,QAASX,EAAMN,KAAK,iDAC3CkB,KAAG,oBAAOR,cAAe,AAACS,yDAAoBA,qBAASb,EAAMP,IAAI,yFACjEiB,MAAI,oBAAOJ,IAAOG,MAAM,6CACtBK,SAAO,QACC,CAAA,2BAEGxB,iFAGLsB,KAAG,oBAAON,cAAS,AAACO,yDAAoBA,qBAASb,EAAMP,IAAI,wIAIhDO,EAAMP,IAAI,GAAY,CAAC,CAAC,EAAEa,IAAOG,MAAM,CAAC,CAAC,uHAMrE,CAEAM,GAAAA,eAAa,EAAmB,iBAAkBxB,EAAc,CAACO,EAAOkB,KACtE,IAAMC,EAAKD,EAAIE,OAAO,CAKtB,MAHAC,GAAAA,cAAY,EAAC,KACXC,GAAAA,gBAAc,EAACH,EAAI,CAAC,MAAO,OAAO,CACpC,yCAGwBI,QAAM,6BACzBzB,EAAgBE,GAGvB,SAEA,EAAeF"}
+{"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":["moreCss","css","style","defaultProps","data","size","class","maxCount","AvatarGroup","_props","props","mergeProps","local","other","splitProps","createMemo","showAvatar","slice","more","_data","len","length","Show","cx","For","a","Popover","customElement","opt","el","element","createEffect","clearAttribute","inline"],"mappings":"kGAsIA,+CAAA,+CAtI4E,sBACpD,yBACM,2BAGC,+BACX,yBACG,uEAEhB,kLAEDA,EAAUC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;AAgBpB,CAAC,CACKC,EAAQD,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AAwBlB,CAAC,CAkBKE,EAAiC,CACrCC,KAAM,EAAE,CACRC,KAAM,KAAK,EACXC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfN,IAAK,KAAK,CACZ,EAEA,SAASO,EAAYC,CAAwB,EAC3C,IAAMC,EAAQC,GAAAA,YAAU,EAACR,EAAcM,GACjC,CAACG,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACJ,EAAO,CAAC,OAAQ,WAAY,QAAS,OAAQ,MAAM,EAC/EN,EAAOW,GAAAA,YAAU,EAAC,IAAMH,EAAMR,IAAI,EAAI,EAAE,EACxCY,EAAaD,GAAAA,YAAU,EAAC,IAAMX,IAAOa,KAAK,CAAC,EAAGL,EAAML,QAAQ,GAC5DW,EAAOH,GAAAA,YAAU,EAAC,KACtB,IAAMI,EAAQf,IACRgB,EAAMD,EAAME,MAAM,CAAIT,CAAAA,EAAML,QAAQ,EAAIY,EAAME,MAAM,AAAD,SAEzD,AAAID,EAAM,EACDD,EAAMF,KAAK,CAAC,CAACG,GAEf,EAAE,AACX,GAEA,4CAEwBlB,8BACnBoB,MAAI,oBAAOV,EAAMX,GAAG,wEACCA,GAAAA,KAAG,EAACW,EAAMX,GAAG,8DAE1BY,qBAAcU,GAAAA,IAAE,EAAC,QAASX,EAAMN,KAAK,iDAC3CkB,KAAG,oBAAOR,cAAe,AAACS,yDAAoBA,qBAASb,EAAMP,IAAI,yFACjEiB,MAAI,oBAAOJ,IAAOG,MAAM,6CACtBK,SAAO,QACC,CAAA,2BAEG1B,iFAGLwB,KAAG,oBAAON,cAAS,AAACO,yDAAoBA,qBAASb,EAAMP,IAAI,wIAIhDO,EAAMP,IAAI,GAAY,CAAC,CAAC,EAAEa,IAAOG,MAAM,CAAC,CAAC,uHAMrE,CAEAM,GAAAA,eAAa,EAAmB,iBAAkBxB,EAAc,CAACO,EAAOkB,KACtE,IAAMC,EAAKD,EAAIE,OAAO,CAKtB,MAHAC,GAAAA,cAAY,EAAC,KACXC,GAAAA,gBAAc,EAACH,EAAI,CAAC,MAAO,OAAO,CACpC,yCAGwBI,QAAM,6BACzBzB,EAAgBE,GAGvB,SAEA,EAAeF"}

package/lib/avatar/index.js

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

package/lib/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":["Avatar","_","box","label","avatarSize","small","normal","large","props","mergeProps","size","local","other","splitProps","scale","setScale","createSignal","_style","createMemo","css","color","createEffect","clientWidth","style","Show","cx","class","Switch","Match","src","Img","alt","username","customElement","opt","baseStyle","theme","el","element","clearAttribute","inline"],"mappings":"wGAyJA,+CAAA,+CAhJO,sBACiB,yBACM,2BAEC,gCACf,6fAEc,uBAER,uoEAsBtB,SAASA,EAAOC,CAAc,MAiBxBC,EACAC,EAjBJ,IAAMC,EAAqC,CACzCC,MAAO,OACPC,OAAQ,OACRC,MAAO,MACT,EAEMC,EAAQC,GAAAA,YAAU,EAAC,CAAEC,KAAM,EAAG,EAAGT,GACjC,CAACU,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACL,EAAO,CACvC,QACA,MACA,MACA,MACA,OACA,QACA,WACD,EAGK,CAACM,EAAOC,EAAS,CAAGC,GAAAA,cAAY,EAAC,GAEjCC,EAASC,GAAAA,YAAU,EAAC,KACxB,IAAMR,EAAON,CAAU,CAACO,EAAMD,IAAI,CAAC,EAAI,CAAC,EAAEC,EAAMD,IAAI,CAAC,EAAE,CAAC,CAExD,MAAOS,GAAAA,KAAG,CAAA,CAAC;;wBAES,EAAER,EAAMS,KAAK,CAAC;;qBAEjB,EAAEV,EAAK;oBACR,EAAEA,EAAK;;IAEvB,CAAC,AACH,GAUA,MARAW,GAAAA,cAAY,EAAC,KACPlB,GAASD,GACPC,EAAMmB,WAAW,CAAG,EAAIpB,EAAIoB,WAAW,EACzCP,EAAS,AAACb,CAAAA,EAAIoB,WAAW,CAAG,CAAA,EAAKnB,EAAMmB,WAAW,CAGxD,yCAIwBC,OAAK,oEACLN,iCACnBO,MAAI,oBAAOb,EAAMQ,GAAG,wEACCA,GAAAA,KAAG,EAACR,EAAMQ,GAAG,0BAEzBjB,4CAAAA,uDAAYuB,GAAAA,IAAE,EAAC,SAAUd,EAAMe,KAAK,IAAOd,+CAClDe,QAAM,8CACJC,OAAK,mBAAO,AAAqB,UAArB,OAAOjB,EAAMkB,GAAG,6CAC1BC,SAAG,mBAAMnB,EAAMkB,GAAG,mBAAOlB,EAAMoB,GAAG,QAAS,CAAE,UAAW,IAAK,6BAE/DH,OAAK,oBAAOjB,EAAMqB,QAAQ,6BACd7B,4CAAAA,uBACRQ,EAAMqB,QAAQ,oBAD8BlB,oCAAT,CAAC,MAAM,EAAEA,IAAQ,CAAC,CAAC,+OA6BrE,CAEAmB,GAAAA,eAAa,EACX,WACA,CACEd,IAAK,KAAK,EACVT,KAAM,KAAK,EACXmB,IAAK,KAAK,EACVE,IAAK,KAAK,EACVC,SAAU,KAAK,EACfZ,MAAO,KAAK,EACZM,MAAO,KAAK,CACd,EACA,CAAClB,EAAO0B,KACN,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CACrBC,EAAKH,EAAII,OAAO,CAKtB,MAHAjB,GAAAA,cAAY,EAAC,KACXkB,GAAAA,gBAAc,EAACF,EAAI,CAAC,MAAM,CAC5B,yCAGwBG,QAAM,oEACNL,iCACnBnC,EAAWQ,GAGlB,SAEF,EAAeR"}
+{"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":["Avatar","_","box","label","avatarSize","small","normal","large","props","mergeProps","size","local","other","splitProps","scale","setScale","createSignal","_style","createMemo","css","color","createEffect","clientWidth","style","Show","cx","class","Switch","Match","src","Img","alt","username","customElement","opt","baseStyle","theme","el","element","clearAttribute","inline"],"mappings":"kGAyJA,+CAAA,+CAhJO,sBACiB,yBACM,2BAEC,+BACf,uBAEc,uBAER,soFAsBtB,SAASA,EAAOC,CAAc,MAiBxBC,EACAC,EAjBJ,IAAMC,EAAqC,CACzCC,MAAO,OACPC,OAAQ,OACRC,MAAO,MACT,EAEMC,EAAQC,GAAAA,YAAU,EAAC,CAAEC,KAAM,EAAG,EAAGT,GACjC,CAACU,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACL,EAAO,CACvC,QACA,MACA,MACA,MACA,OACA,QACA,WACD,EAGK,CAACM,EAAOC,EAAS,CAAGC,GAAAA,cAAY,EAAC,GAEjCC,EAASC,GAAAA,YAAU,EAAC,KACxB,IAAMR,EAAON,CAAU,CAACO,EAAMD,IAAI,CAAC,EAAI,CAAC,EAAEC,EAAMD,IAAI,CAAC,EAAE,CAAC,CAExD,MAAOS,GAAAA,KAAG,CAAA,CAAC;;wBAES,EAAER,EAAMS,KAAK,CAAC;;qBAEjB,EAAEV,EAAK;oBACR,EAAEA,EAAK;;IAEvB,CAAC,AACH,GAUA,MARAW,GAAAA,cAAY,EAAC,KACPlB,GAASD,GACPC,EAAMmB,WAAW,CAAG,EAAIpB,EAAIoB,WAAW,EACzCP,EAAS,AAACb,CAAAA,EAAIoB,WAAW,CAAG,CAAA,EAAKnB,EAAMmB,WAAW,CAGxD,yCAIwBC,OAAK,oEACLN,iCACnBO,MAAI,oBAAOb,EAAMQ,GAAG,wEACCA,GAAAA,KAAG,EAACR,EAAMQ,GAAG,0BAEzBjB,4CAAAA,uDAAYuB,GAAAA,IAAE,EAAC,SAAUd,EAAMe,KAAK,IAAOd,+CAClDe,QAAM,8CACJC,OAAK,mBAAO,AAAqB,UAArB,OAAOjB,EAAMkB,GAAG,6CAC1BC,SAAG,mBAAMnB,EAAMkB,GAAG,mBAAOlB,EAAMoB,GAAG,QAAS,CAAE,UAAW,IAAK,6BAE/DH,OAAK,oBAAOjB,EAAMqB,QAAQ,6BACd7B,4CAAAA,uBACRQ,EAAMqB,QAAQ,oBAD8BlB,oCAAT,CAAC,MAAM,EAAEA,IAAQ,CAAC,CAAC,+OA6BrE,CAEAmB,GAAAA,eAAa,EACX,WACA,CACEd,IAAK,KAAK,EACVT,KAAM,KAAK,EACXmB,IAAK,KAAK,EACVE,IAAK,KAAK,EACVC,SAAU,KAAK,EACfZ,MAAO,KAAK,EACZM,MAAO,KAAK,CACd,EACA,CAAClB,EAAO0B,KACN,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CACrBC,EAAKH,EAAII,OAAO,CAKtB,MAHAjB,GAAAA,cAAY,EAAC,KACXkB,GAAAA,gBAAc,EAACF,EAAI,CAAC,MAAM,CAC5B,yCAGwBG,QAAM,oEACNL,iCACnBnC,EAAWQ,GAGlB,SAEF,EAAeR"}

package/lib/avatar/style.js

@@ -1,4 +1,4 @@
-"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"style",{enumerable:!0,get:function(){return r}});const t=require("@moneko/css"),i=(e=require("./favicon.svg"))&&e.__esModule?e:{default:e},r=(0,t.css)`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"style",{enumerable:!0,get:function(){return r}});const e=require("@moneko/css"),t=i(require("./favicon.svg"));function i(e){return e&&e.__esModule?e:{default:e}}const r=(0,e.css)`
   .avatar {
     position: relative;
     display: inline-flex;
@@ -33,7 +33,7 @@
     }
 
     &::after {
-      background: url(${i.default}) no-repeat center/contain;
+      background: url(${t.default}) no-repeat center/contain;
     }
 
     &:hover {
@@ -62,5 +62,4 @@
       border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
     }
   }
-`;
-//# sourceMappingURL=style.js.map
+`;

package/lib/avatar/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/avatar/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nimport favicon from './favicon.svg';\n\nexport const style = css`\n  .avatar {\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    inline-size: 32px;\n    block-size: 32px;\n    transition: transform var(--transition-duration);\n    cursor: pointer;\n    user-select: none;\n    animation: avatar-morph-effect 8s var(--transition-timing-function) infinite;\n    background-image: linear-gradient(\n      45deg,\n      var(--primary-outline) 0%,\n      var(--success-outline) 100%\n    );\n\n    &::before,\n    &::after {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      display: block;\n      inline-size: 100%;\n      block-size: 100%;\n      content: '';\n      pointer-events: none;\n    }\n\n    &::before {\n      clip-path: url('#clipPathAvatar');\n    }\n\n    &::after {\n      background: url(${favicon}) no-repeat center/contain;\n    }\n\n    &:hover {\n      transform: scale(1.2);\n    }\n\n    img {\n      position: absolute;\n      inset-inline-start: 0;\n      inline-size: 100%;\n      block-size: 100%;\n      clip-path: url('#clipPathAvatar');\n    }\n  }\n\n  @keyframes avatar-morph-effect {\n    0% {\n      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n    }\n\n    50% {\n      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;\n    }\n\n    100% {\n      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n    }\n  }\n`;\n"],"names":["style","css","favicon"],"mappings":"wGAIaA,6CAAAA,qBAJO,4BAEA,8CAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAmCH,EAAEC,SAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BhC,CAAC"}
+{"version":3,"sources":["components/avatar/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nimport favicon from './favicon.svg';\n\nexport const style = css`\n  .avatar {\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    inline-size: 32px;\n    block-size: 32px;\n    transition: transform var(--transition-duration);\n    cursor: pointer;\n    user-select: none;\n    animation: avatar-morph-effect 8s var(--transition-timing-function) infinite;\n    background-image: linear-gradient(\n      45deg,\n      var(--primary-outline) 0%,\n      var(--success-outline) 100%\n    );\n\n    &::before,\n    &::after {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      display: block;\n      inline-size: 100%;\n      block-size: 100%;\n      content: '';\n      pointer-events: none;\n    }\n\n    &::before {\n      clip-path: url('#clipPathAvatar');\n    }\n\n    &::after {\n      background: url(${favicon}) no-repeat center/contain;\n    }\n\n    &:hover {\n      transform: scale(1.2);\n    }\n\n    img {\n      position: absolute;\n      inset-inline-start: 0;\n      inline-size: 100%;\n      block-size: 100%;\n      clip-path: url('#clipPathAvatar');\n    }\n  }\n\n  @keyframes avatar-morph-effect {\n    0% {\n      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n    }\n\n    50% {\n      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;\n    }\n\n    100% {\n      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n    }\n  }\n`;\n"],"names":["style","css","favicon"],"mappings":"kGAIaA,6CAAAA,qBAJO,2BAEA,qEAEb,MAAMA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAmCH,EAAEC,SAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BhC,CAAC"}

package/lib/back-top/index.js

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

package/lib/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":["BackTop","_","baseStyle","isDark","theme","props","mergeProps","target","window","visibilityHeight","local","other","splitProps","show","setShow","createSignal","createMemo","isFunction","themeStyle","bg","handleBackTop","scrollTo","top","behavior","exit","handleScrollY","e","preventDefault","scrollTop","offsetHeight","_target","getScrollTop","nextShow","Boolean","onMount","addEventListener","onCleanup","removeEventListener","Show","Portal","mount","style","css","cx","class","getMaxZindex","toString","customElement","opt","el","element","position","bottom","right","display","pointerEvents","renderRoot","createEffect","clearAttribute","inline"],"mappings":"kGAwJA,+CAAA,qBA9IuB,0BADhB,wBAEgD,gDAAA,gDAAA,4CAC/B,yBACM,2BAGC,yeACD,uBAER,sRAmBtB,SAASA,EAAQC,CAAe,EAC9B,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGC,SAAK,CAC7BC,EAAQC,GAAAA,YAAU,EAAC,CAAEC,OAAQC,OAAkCC,iBAAkB,GAAI,EAAGR,GACxF,CAACS,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACP,EAAO,CAAC,QAAS,SAAU,QAAS,MAAO,mBAAmB,EAC1F,CAACQ,EAAMC,EAAQ,CAAGC,GAAAA,cAAY,EAAiB,MAC/CR,EAASS,GAAAA,YAAU,EAAC,IAAOC,GAAAA,SAAU,EAACP,EAAMH,MAAM,EAAIG,EAAMH,MAAM,GAAKG,EAAMH,MAAM,EAEnFW,EAAaF,GAAAA,YAAU,EAAC,KAC5B,IAAMG,EAAKhB,IAAW,yBAA2B,wBAEjD,MAAO,CAAC,sBAAsB,EAAEgB,EAAG,EAAE,CAAC,AACxC,GAEA,SAASC,IACPb,KAAUc,SAAS,CACjBC,IAAK,EACLC,SAAU,QACZ,EACF,CACA,SAASC,IACQ,CAAA,IAAXX,KACFC,EAAQ,KAEZ,CACA,SAASW,EAAcC,CAAQ,EAC7BA,EAAEC,cAAc,GAChB,IAAIC,EAAY,EACZC,EAAe,EACbC,EAAUvB,IAEZuB,IACFF,EAAYG,GAAAA,SAAY,EAACD,GACzBD,EAAeC,EAAQD,YAAY,EAAI,GAEzC,IAAMG,EAAWJ,EAAYC,EAAe,GAAKD,EAAYlB,EAAMD,gBAAgB,CAKnF,MAHIwB,CAAAA,CAAQpB,MAAYmB,GACtBlB,EAAQkB,GAEH,CAAA,CACT,CAQA,MANAE,GAAAA,SAAO,EAAC,KACN3B,KAAU4B,iBAAiB,SAAUV,EAAe,CAAA,EACtD,GACAW,GAAAA,WAAS,EAAC,KACR7B,KAAU8B,oBAAoB,SAAUZ,EAAe,CAAA,EACzD,yBAEGa,MAAI,oBAAOzB,AAAW,OAAXA,gDACT0B,QAAM,kCAAkB7B,EAAM8B,KAAK,qFACdtC,wEACAgB,gDACAuB,OAAK,6BACxBH,MAAI,oBAAO5B,EAAMgC,GAAG,wEACCA,GAAAA,KAAG,EAAChC,EAAMgC,GAAG,+DAQxBtB,8CALOI,sDACTmB,GAAAA,IAAE,EAAC,WAAYjC,EAAMkC,KAAK,yBACtB,CACT,eAAgB/B,AAAW,CAAA,IAAXA,GAClB,qBAEO,CAAE,UAAWgC,GAAAA,SAAY,IAAGC,QAAQ,EAAG,IAC1CnC,sBAKd,CAIAoC,GAAAA,eAAa,EACX,aACA,CACEH,MAAO,KAAK,EACZF,IAAK,KAAK,EACVjC,iBAAkB,KAAK,EACvB+B,MAAO,KAAK,EACZjC,OAAQ,KAAK,CACf,EACA,CAACN,EAAG+C,KACF,IAAMC,EAAKD,EAAIE,OAAO,AAEjBD,CAAAA,EAAGT,KAAK,GACXS,EAAGR,KAAK,CAACU,QAAQ,CAAG,SACpBF,EAAGR,KAAK,CAACW,MAAM,CAAG,OAClBH,EAAGR,KAAK,CAACY,KAAK,CAAG,OACjBJ,EAAGR,KAAK,CAACa,OAAO,CAAG,QACnBL,EAAGR,KAAK,CAACc,aAAa,CAAG,QAE3B,IAAMlD,EAAQC,GAAAA,YAAU,EACtB,CACEoC,IAAKO,EAAGP,GAAG,CACXjC,iBAAkBwC,EAAGxC,gBAAgB,CACrC+B,MAAOS,EAAGO,UAAU,CACpBjD,OAAQ0C,EAAG1C,MAAM,AACnB,EACAN,GAMF,MAHAwD,GAAAA,cAAY,EAAC,KACXC,GAAAA,gBAAc,EAACT,EAAI,CAAC,MAAM,CAC5B,yCAGwBU,QAAM,6BACzB3D,EAAYK,GAGnB,SAEF,EAAeL"}
+{"version":3,"sources":["components/back-top/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  Show,\n  splitProps,\n} from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { getMaxZindex, getScrollTop, isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { 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":["BackTop","_","baseStyle","isDark","theme","props","mergeProps","target","window","visibilityHeight","local","other","splitProps","show","setShow","createSignal","createMemo","isFunction","themeStyle","bg","handleBackTop","scrollTo","top","behavior","exit","handleScrollY","e","preventDefault","scrollTop","offsetHeight","_target","getScrollTop","nextShow","Boolean","onMount","addEventListener","onCleanup","removeEventListener","Show","Portal","mount","style","css","cx","class","getMaxZindex","toString","customElement","opt","el","element","position","bottom","right","display","pointerEvents","renderRoot","createEffect","clearAttribute","inline"],"mappings":"kGAwJA,+CAAA,qBA9IuB,0BADhB,wBAEgD,gDAAA,gDAAA,4CAC/B,yBACM,2BAGC,+BACD,uBAER,kuBAmBtB,SAASA,EAAQC,CAAe,EAC9B,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGC,SAAK,CAC7BC,EAAQC,GAAAA,YAAU,EAAC,CAAEC,OAAQC,OAAkCC,iBAAkB,GAAI,EAAGR,GACxF,CAACS,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACP,EAAO,CAAC,QAAS,SAAU,QAAS,MAAO,mBAAmB,EAC1F,CAACQ,EAAMC,EAAQ,CAAGC,GAAAA,cAAY,EAAiB,MAC/CR,EAASS,GAAAA,YAAU,EAAC,IAAOC,GAAAA,SAAU,EAACP,EAAMH,MAAM,EAAIG,EAAMH,MAAM,GAAKG,EAAMH,MAAM,EAEnFW,EAAaF,GAAAA,YAAU,EAAC,KAC5B,IAAMG,EAAKhB,IAAW,yBAA2B,wBAEjD,MAAO,CAAC,sBAAsB,EAAEgB,EAAG,EAAE,CAAC,AACxC,GAEA,SAASC,IACPb,KAAUc,SAAS,CACjBC,IAAK,EACLC,SAAU,QACZ,EACF,CACA,SAASC,IACQ,CAAA,IAAXX,KACFC,EAAQ,KAEZ,CACA,SAASW,EAAcC,CAAQ,EAC7BA,EAAEC,cAAc,GAChB,IAAIC,EAAY,EACZC,EAAe,EACbC,EAAUvB,IAEZuB,IACFF,EAAYG,GAAAA,SAAY,EAACD,GACzBD,EAAeC,EAAQD,YAAY,EAAI,GAEzC,IAAMG,EAAWJ,EAAYC,EAAe,GAAKD,EAAYlB,EAAMD,gBAAgB,CAKnF,MAHIwB,CAAAA,CAAQpB,MAAYmB,GACtBlB,EAAQkB,GAEH,CAAA,CACT,CAQA,MANAE,GAAAA,SAAO,EAAC,KACN3B,KAAU4B,iBAAiB,SAAUV,EAAe,CAAA,EACtD,GACAW,GAAAA,WAAS,EAAC,KACR7B,KAAU8B,oBAAoB,SAAUZ,EAAe,CAAA,EACzD,yBAEGa,MAAI,oBAAOzB,AAAW,OAAXA,gDACT0B,QAAM,kCAAkB7B,EAAM8B,KAAK,qFACdtC,wEACAgB,gDACAuB,OAAK,6BACxBH,MAAI,oBAAO5B,EAAMgC,GAAG,wEACCA,GAAAA,KAAG,EAAChC,EAAMgC,GAAG,+DAQxBtB,8CALOI,sDACTmB,GAAAA,IAAE,EAAC,WAAYjC,EAAMkC,KAAK,yBACtB,CACT,eAAgB/B,AAAW,CAAA,IAAXA,GAClB,qBAEO,CAAE,UAAWgC,GAAAA,SAAY,IAAGC,QAAQ,EAAG,IAC1CnC,sBAKd,CAIAoC,GAAAA,eAAa,EACX,aACA,CACEH,MAAO,KAAK,EACZF,IAAK,KAAK,EACVjC,iBAAkB,KAAK,EACvB+B,MAAO,KAAK,EACZjC,OAAQ,KAAK,CACf,EACA,CAACN,EAAG+C,KACF,IAAMC,EAAKD,EAAIE,OAAO,AAEjBD,CAAAA,EAAGT,KAAK,GACXS,EAAGR,KAAK,CAACU,QAAQ,CAAG,SACpBF,EAAGR,KAAK,CAACW,MAAM,CAAG,OAClBH,EAAGR,KAAK,CAACY,KAAK,CAAG,OACjBJ,EAAGR,KAAK,CAACa,OAAO,CAAG,QACnBL,EAAGR,KAAK,CAACc,aAAa,CAAG,QAE3B,IAAMlD,EAAQC,GAAAA,YAAU,EACtB,CACEoC,IAAKO,EAAGP,GAAG,CACXjC,iBAAkBwC,EAAGxC,gBAAgB,CACrC+B,MAAOS,EAAGO,UAAU,CACpBjD,OAAQ0C,EAAG1C,MAAM,AACnB,EACAN,GAMF,MAHAwD,GAAAA,cAAY,EAAC,KACXC,GAAAA,gBAAc,EAACT,EAAI,CAAC,MAAM,CAC5B,yCAGwBU,QAAM,6BACzB3D,EAAYK,GAGnB,SAEF,EAAeL"}

package/lib/back-top/style.js

@@ -73,5 +73,4 @@
       opacity: 0;
     }
   }
-`;
-//# sourceMappingURL=style.js.map
+`;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../components/back-top/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  :host {\n    --back-top-color: var(--on-primary-selection);\n    --back-top-hover-bg: var(--primary-hover);\n  }\n\n  .back-top {\n    position: sticky;\n    z-index: 9;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    color: var(--back-top-color);\n    background-color: var(--back-top-bg);\n    box-shadow:\n      0 3px 6px -4px var(--primary-shadow),\n      0 6px 16px 0 var(--primary-shadow-1),\n      0 9px 28px 8px var(--primary-shadow-2);\n    transition:\n      background-color var(--transition-duration),\n      color var(--transition-duration);\n    inset-block-end: 50px;\n    inset-inline-start: calc(100% - 100px);\n    inline-size: 40px;\n    min-inline-size: 40px;\n    block-size: 40px;\n    min-block-size: 40px;\n    cursor: pointer;\n    animation: back-top-fade-in 1s forwards;\n    backdrop-filter: blur(10px);\n    pointer-events: all;\n\n    &::before {\n      content: '';\n      display: block;\n      inline-size: 16px;\n      block-size: 8px;\n      background-color: var(--back-top-color);\n      clip-path: polygon(0 100%, 50% 0, 100% 100%);\n    }\n\n    &:hover {\n      background-color: var(--back-top-hover-bg);\n    }\n  }\n\n  .back-top-out {\n    animation: back-top-fade-out 1s forwards;\n  }\n\n  @keyframes back-top-fade-in {\n    from {\n      transform: translate3d(0, 16px, 0) scale(1);\n      opacity: 0;\n    }\n\n    to {\n      transform: translate3d(0, 0, 0) scale(1);\n      opacity: 1;\n    }\n  }\n\n  @keyframes back-top-fade-out {\n    0%,\n    20% {\n      transform: translate3d(0, 0, 0);\n      opacity: 1;\n    }\n\n    100% {\n      transform: translate3d(0, 16px, 0);\n      opacity: 0;\n    }\n  }\n`;\n"],"names":["style","css"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EzB,CAAC"}
+{"version":3,"sources":["components/back-top/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  :host {\n    --back-top-color: var(--on-primary-selection);\n    --back-top-hover-bg: var(--primary-hover);\n  }\n\n  .back-top {\n    position: sticky;\n    z-index: 9;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    color: var(--back-top-color);\n    background-color: var(--back-top-bg);\n    box-shadow:\n      0 3px 6px -4px var(--primary-shadow),\n      0 6px 16px 0 var(--primary-shadow-1),\n      0 9px 28px 8px var(--primary-shadow-2);\n    transition:\n      background-color var(--transition-duration),\n      color var(--transition-duration);\n    inset-block-end: 50px;\n    inset-inline-start: calc(100% - 100px);\n    inline-size: 40px;\n    min-inline-size: 40px;\n    block-size: 40px;\n    min-block-size: 40px;\n    cursor: pointer;\n    animation: back-top-fade-in 1s forwards;\n    backdrop-filter: blur(10px);\n    pointer-events: all;\n\n    &::before {\n      content: '';\n      display: block;\n      inline-size: 16px;\n      block-size: 8px;\n      background-color: var(--back-top-color);\n      clip-path: polygon(0 100%, 50% 0, 100% 100%);\n    }\n\n    &:hover {\n      background-color: var(--back-top-hover-bg);\n    }\n  }\n\n  .back-top-out {\n    animation: back-top-fade-out 1s forwards;\n  }\n\n  @keyframes back-top-fade-in {\n    from {\n      transform: translate3d(0, 16px, 0) scale(1);\n      opacity: 0;\n    }\n\n    to {\n      transform: translate3d(0, 0, 0) scale(1);\n      opacity: 1;\n    }\n  }\n\n  @keyframes back-top-fade-out {\n    0%,\n    20% {\n      transform: translate3d(0, 0, 0);\n      opacity: 1;\n    }\n\n    100% {\n      transform: translate3d(0, 16px, 0);\n      opacity: 0;\n    }\n  }\n`;\n"],"names":["style","css"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EzB,CAAC"}

package/lib/basic-config/index.js

@@ -1,2 +1 @@
-"use strict";var e,r,n,t,i,o;function a(e){return e.replace(/([A-Z])/g,"-$1").toLowerCase()}function l(e,r){r.forEach(r=>{let n=e[r];e.removeAttribute(a(r)),e[r]=n})}Object.defineProperty(exports,"__esModule",{value:!0}),function(e,r){for(var n in r)Object.defineProperty(e,n,{enumerable:!0,get:r[n]})}(exports,{FieldName:function(){return n},Size:function(){return e},Status:function(){return r},camelToKebab:function(){return a},clearAttribute:function(){return l}}),(t=e||(e={})).small="small",t.normal="normal",t.large="large",(i=r||(r={})).normal="normal",i.success="success",i.warning="warning",i.error="error",i.info="info",i.primary="primary",(o=n||(n={})).label="label",o.value="value",o.options="options",o.children="children",o.icon="icon",o.suffix="suffix",o.title="title",o.subTitle="subTitle",o.key="key",o.name="name";
-//# sourceMappingURL=index.js.map
+"use strict";var e,n,r;function t(e,n){for(var r in n)Object.defineProperty(e,r,{enumerable:!0,get:n[r]})}function i(e){return e.replace(/([A-Z])/g,"-$1").toLowerCase()}function o(e,n){n.forEach(n=>{let r=e[n];e.removeAttribute(i(n)),e[n]=r})}Object.defineProperty(exports,"__esModule",{value:!0}),t(exports,{FieldName:function(){return r},Size:function(){return e},Status:function(){return n},camelToKebab:function(){return i},clearAttribute:function(){return o}}),function(e){e.small="small",e.normal="normal",e.large="large"}(e||(e={})),function(e){e.normal="normal",e.success="success",e.warning="warning",e.error="error",e.info="info",e.primary="primary"}(n||(n={})),function(e){e.label="label",e.value="value",e.options="options",e.children="children",e.icon="icon",e.suffix="suffix",e.title="title",e.subTitle="subTitle",e.key="key",e.name="name"}(r||(r={}));

package/lib/basic-config/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/basic-config/index.ts"],"sourcesContent":["export interface BasicConfig {\n  /** 组件状态\n   * @default 'normal'\n   */\n  status: keyof typeof Status;\n  /** 组件尺寸\n   * @default 'normal'\n   */\n  size: keyof typeof Size;\n  /** 自定义 'label'、'value'、'options' 等映射的key */\n  fieldName: Partial<{ [key in keyof typeof FieldName]: string }>;\n}\n\nexport enum Size {\n  /** 小 */\n  small = 'small',\n  /** 默认: 中 */\n  normal = 'normal',\n  /** 大 */\n  large = 'large',\n}\n\nexport enum Status {\n  /** 默认 */\n  normal = 'normal',\n  /** 成功 */\n  success = 'success',\n  /** 警告 */\n  warning = 'warning',\n  /** 错误 */\n  error = 'error',\n  /** 详细 */\n  info = 'info',\n  /** 主要 */\n  primary = 'primary',\n}\n\nexport interface BaseOption {\n  /** 图标 */\n  icon?: JSX.Element;\n  /** 值 */\n  value?: string | number;\n  /** 标题 */\n  label?: JSX.Element;\n  /** 不可用状态 */\n  disabled?: boolean;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式 */\n  style?: Record<string, unknown>;\n  /** 选项状态\n   * @default 'normal'\n   */\n  status?: Status;\n  /** 分组子选项 */\n  options?: (BaseOption | string)[];\n  [key: string]: Any;\n}\n\nexport enum FieldName {\n  /** 标题 */\n  label = 'label',\n  /** 值 */\n  value = 'value',\n  /** 分组子选项 */\n  options = 'options',\n  /** 子选项 */\n  children = 'children',\n  /** 图标 */\n  icon = 'icon',\n  /** 后缀图标 */\n  suffix = 'suffix',\n  /** 标题 */\n  title = 'title',\n  /** 副标题 */\n  subTitle = 'subTitle',\n  /** 键 */\n  key = 'key',\n  /** 名称 */\n  name = 'name',\n}\n\nexport function camelToKebab(str: string) {\n  return str\n    .replace(/([A-Z])/g, '-$1') // 在大写字母前添加 \"-\"\n    .toLowerCase(); // 转为小写\n}\nexport function clearAttribute(el: HTMLElement | ICustomElement, fields: string[]) {\n  fields.forEach((key) => {\n    const field = key as 'className';\n    const prev = el[field];\n\n    el.removeAttribute(camelToKebab(field));\n    el[field] = prev;\n  });\n}\n"],"names":["Size","Status","FieldName","camelToKebab","str","replace","toLowerCase","clearAttribute","el","fields","forEach","key","prev","removeAttribute"],"mappings":"uBAaYA,EASAC,EAqCAC,EAuBL,SAASC,EAAaC,CAAW,EACtC,OAAOA,EACJC,OAAO,CAAC,WAAY,OACpBC,WAAW,EAChB,CACO,SAASC,EAAeC,CAAgC,CAAEC,CAAgB,EAC/EA,EAAOC,OAAO,CAAC,AAACC,IAEd,IAAMC,EAAOJ,CAAE,CADDG,EACQ,CAEtBH,EAAGK,eAAe,CAACV,EAHLQ,IAIdH,CAAE,CAJYG,EAIL,CAAGC,CACd,EACF,wOAbgBT,YAAY,mBAAZA,GAKAI,cAAc,mBAAdA,MA1EJP,EAAAA,IAAAA,wDASAC,EAAAA,IAAAA,kHAqCAC,EAAAA,IAAAA"}
+{"version":3,"sources":["components/basic-config/index.ts"],"sourcesContent":["export interface BasicConfig {\n  /** 组件状态\n   * @default 'normal'\n   */\n  status: keyof typeof Status;\n  /** 组件尺寸\n   * @default 'normal'\n   */\n  size: keyof typeof Size;\n  /** 自定义 'label'、'value'、'options' 等映射的key */\n  fieldName: Partial<{ [key in keyof typeof FieldName]: string }>;\n}\n\nexport enum Size {\n  /** 小 */\n  small = 'small',\n  /** 默认: 中 */\n  normal = 'normal',\n  /** 大 */\n  large = 'large',\n}\n\nexport enum Status {\n  /** 默认 */\n  normal = 'normal',\n  /** 成功 */\n  success = 'success',\n  /** 警告 */\n  warning = 'warning',\n  /** 错误 */\n  error = 'error',\n  /** 详细 */\n  info = 'info',\n  /** 主要 */\n  primary = 'primary',\n}\n\nexport interface BaseOption {\n  /** 图标 */\n  icon?: JSX.Element;\n  /** 值 */\n  value?: string | number;\n  /** 标题 */\n  label?: JSX.Element;\n  /** 不可用状态 */\n  disabled?: boolean;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式 */\n  style?: Record<string, unknown>;\n  /** 选项状态\n   * @default 'normal'\n   */\n  status?: Status;\n  /** 分组子选项 */\n  options?: (BaseOption | string)[];\n  [key: string]: Any;\n}\n\nexport enum FieldName {\n  /** 标题 */\n  label = 'label',\n  /** 值 */\n  value = 'value',\n  /** 分组子选项 */\n  options = 'options',\n  /** 子选项 */\n  children = 'children',\n  /** 图标 */\n  icon = 'icon',\n  /** 后缀图标 */\n  suffix = 'suffix',\n  /** 标题 */\n  title = 'title',\n  /** 副标题 */\n  subTitle = 'subTitle',\n  /** 键 */\n  key = 'key',\n  /** 名称 */\n  name = 'name',\n}\n\nexport function camelToKebab(str: string) {\n  return str\n    .replace(/([A-Z])/g, '-$1') // 在大写字母前添加 \"-\"\n    .toLowerCase(); // 转为小写\n}\nexport function clearAttribute(el: HTMLElement | ICustomElement, fields: string[]) {\n  fields.forEach((key) => {\n    const field = key as 'className';\n    const prev = el[field];\n\n    el.removeAttribute(camelToKebab(field));\n    el[field] = prev;\n  });\n}\n"],"names":["camelToKebab","str","replace","toLowerCase","clearAttribute","el","fields","forEach","key","prev","removeAttribute","Size","Status","FieldName"],"mappings":"0GAkFO,SAASA,EAAaC,CAAW,EACtC,OAAOA,EACJC,OAAO,CAAC,WAAY,OACpBC,WAAW,EAChB,CACO,SAASC,EAAeC,CAAgC,CAAEC,CAAgB,EAC/EA,EAAOC,OAAO,CAAC,AAACC,IAEd,IAAMC,EAAOJ,CAAE,CADDG,EACQ,CAEtBH,EAAGK,eAAe,CAACV,EAHLQ,IAIdH,CAAE,CAJYG,EAIL,CAAGC,CACd,EACF,wJAbgBT,YAAY,mBAAZA,GAKAI,cAAc,mBAAdA,cA1EJO,sDAAAA,IAAAA,gBASAC,gHAAAA,IAAAA,gBAqCAC,8KAAAA,IAAAA"}

package/lib/button/index.js

@@ -1,2 +1 @@
-"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return g}});const t=require("solid-js/web"),r=require("solid-js"),n=(e=require("@moneko/common/lib/isFunction"))&&e.__esModule?e:{default:e},i=require("@moneko/css"),o=require("solid-element"),l=require("../basic-config"),s=function(e,t){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=a(void 0);if(r&&r.has(e))return r.get(e);var n={__proto__:null},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if("default"!==o&&Object.prototype.hasOwnProperty.call(e,o)){var l=i?Object.getOwnPropertyDescriptor(e,o):null;l&&(l.get||l.set)?Object.defineProperty(n,o,l):n[o]=e[o]}return n.default=e,r&&r.set(e,n),n}(require("../theme")),c=require("./style");function a(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(a=function(e){return e?r:t})(e)}const d=(0,t.template)("<style> "),u=(0,t.template)("<style>"),f=(0,t.template)('<span class="icon" part="icon">'),p=(0,t.template)('<span class="label" part="label">');function b(e){let o;let{baseStyle:l}=s.default,a=(0,r.mergeProps)({size:"normal",type:"default"},e),[b,g]=(0,r.splitProps)(a,["ghost","fill","circle","dashed","flat","link","danger","children","block","size","type","class","icon","css","disabled","tag"]),[h,m]=(0,r.createSignal)(!1),v=(0,r.createMemo)(()=>(0,n.default)(b.icon)?b.icon():b.icon);return[(()=>{let e=d(),r=e.firstChild;return(0,t.effect)(()=>r.data=l()),e})(),(()=>{let e=u();return e.textContent=c.style,e})(),(0,t.createComponent)(r.Show,{get when(){return b.css},get children(){let e=d(),r=e.firstChild;return(0,t.effect)(()=>r.data=(0,i.css)(b.css)),e}}),(0,t.createComponent)(t.Dynamic,(0,t.mergeProps)({ref(e){let t=o;"function"==typeof t?t(e):o=e},get component(){return b.link?"a":b.tag||"button"},class:"btn",get classList(){return{[b.type]:!0,[b.size]:!0,danger:b.danger,block:b.block,fill:b.fill,circle:b.circle,flat:b.flat,dashed:b.dashed,ghost:b.ghost,link:b.link,disabled:b.disabled,without:h()}},part:"button",onClick:function(){b.disabled||m(!0)},onAnimationEnd:function(){m(!1)},get disabled(){return b.disabled},role:"button"},g,{get children(){return[(0,t.createComponent)(r.Show,{get when(){return b.icon},get children(){let e=f();return(0,t.insert)(e,v),e}}),(()=>{let e=p();return(0,t.insert)(e,()=>b.children),e})()]}}))]}(0,o.customElement)("n-button",{class:void 0,css:void 0,type:void 0,ghost:void 0,fill:void 0,circle:void 0,dashed:void 0,flat:void 0,disabled:void 0,block:void 0,link:void 0,danger:void 0,size:void 0,icon:void 0,tag:void 0},(e,n)=>{let i=n.element,o=(0,r.mergeProps)({css:i.css,children:[...i.childNodes.values()]},e);return(0,r.createEffect)(()=>{(0,l.clearAttribute)(i,["css"]),i.replaceChildren()}),[(()=>{let e=u();return e.textContent=s.inline,e})(),(0,t.createComponent)(b,o)]});const g=b;
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return h}});const e=require("solid-js/web"),t=require("solid-js"),r=c(require("@moneko/common/lib/isFunction")),n=require("@moneko/css"),i=require("solid-element"),o=require("../basic-config"),l=d(require("../theme")),s=require("./style");function c(e){return e&&e.__esModule?e:{default:e}}function a(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(a=function(e){return e?r:t})(e)}function d(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=a(t);if(r&&r.has(e))return r.get(e);var n={__proto__:null},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if("default"!==o&&Object.prototype.hasOwnProperty.call(e,o)){var l=i?Object.getOwnPropertyDescriptor(e,o):null;l&&(l.get||l.set)?Object.defineProperty(n,o,l):n[o]=e[o]}return n.default=e,r&&r.set(e,n),n}const u=(0,e.template)("<style> "),f=(0,e.template)("<style>"),p=(0,e.template)('<span class="icon" part="icon">'),b=(0,e.template)('<span class="label" part="label">');function g(i){let o;let{baseStyle:c}=l.default,a=(0,t.mergeProps)({size:"normal",type:"default"},i),[d,g]=(0,t.splitProps)(a,["ghost","fill","circle","dashed","flat","link","danger","children","block","size","type","class","icon","css","disabled","tag"]),[h,m]=(0,t.createSignal)(!1),v=(0,t.createMemo)(()=>(0,r.default)(d.icon)?d.icon():d.icon);return[(()=>{let t=u(),r=t.firstChild;return(0,e.effect)(()=>r.data=c()),t})(),(()=>{let e=f();return e.textContent=s.style,e})(),(0,e.createComponent)(t.Show,{get when(){return d.css},get children(){let t=u(),r=t.firstChild;return(0,e.effect)(()=>r.data=(0,n.css)(d.css)),t}}),(0,e.createComponent)(e.Dynamic,(0,e.mergeProps)({ref(e){let t=o;"function"==typeof t?t(e):o=e},get component(){return d.link?"a":d.tag||"button"},class:"btn",get classList(){return{[d.type]:!0,[d.size]:!0,danger:d.danger,block:d.block,fill:d.fill,circle:d.circle,flat:d.flat,dashed:d.dashed,ghost:d.ghost,link:d.link,disabled:d.disabled,without:h()}},part:"button",onClick:function(){d.disabled||m(!0)},onAnimationEnd:function(){m(!1)},get disabled(){return d.disabled},role:"button"},g,{get children(){return[(0,e.createComponent)(t.Show,{get when(){return d.icon},get children(){let t=p();return(0,e.insert)(t,v),t}}),(()=>{let t=b();return(0,e.insert)(t,()=>d.children),t})()]}}))]}(0,i.customElement)("n-button",{class:void 0,css:void 0,type:void 0,ghost:void 0,fill:void 0,circle:void 0,dashed:void 0,flat:void 0,disabled:void 0,block:void 0,link:void 0,danger:void 0,size:void 0,icon:void 0,tag:void 0},(r,n)=>{let i=n.element,s=(0,t.mergeProps)({css:i.css,children:[...i.childNodes.values()]},r);return(0,t.createEffect)(()=>{(0,o.clearAttribute)(i,["css"]),i.replaceChildren()}),[(()=>{let e=f();return e.textContent=l.inline,e})(),(0,e.createComponent)(g,s)]});const h=g;

package/lib/button/index.js.map

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

package/lib/button/style.js

@@ -238,5 +238,4 @@
       box-shadow: 0 0 0 6px var(--btn-outline-color);
     }
   }
-`;
-//# sourceMappingURL=style.js.map
+`;

package/lib/button/style.js.map

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

package/lib/capture-screen/index.js

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