neko-ui 2.8.0 → 2.8.2

package/es/typography/index.js.map

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

package/lib/back-top/index.js

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

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

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

package/lib/back-top/style.js

@@ -13,7 +13,10 @@
     border-radius: 50%;
     color: var(--back-top-color);
     background-color: var(--back-top-bg);
-    box-shadow: var(--box-shadow-base);
+    box-shadow:
+      0 3px 6px -4px var(--primary-shadow),
+      0 6px 16px 0 var(--primary-shadow-1),
+      0 9px 28px 8px var(--primary-shadow-2);
     transition:
       background-color var(--transition-duration),
       color var(--transition-duration);

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: var(--box-shadow-base);\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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEzB,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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EzB,CAAC"}

package/lib/button/index.d.ts

@@ -35,6 +35,7 @@ export interface ButtonProps {
     /** 按钮前面添加一个图标 */
     icon?: (() => JSX.Element) | JSX.Element;
     children?: JSX.Element;
+    onClick?(e: Event): void;
 }
 export type ButtonElement = CustomElement<ButtonProps>;
 declare function Button(_: ButtonProps): import("solid-js").JSX.Element;

package/lib/button/index.js

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

package/lib/button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/button/index.tsx"],"sourcesContent":["import {\n  Show,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  splitProps,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Dynamic } from 'solid-js/web';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement } from '..';\n\nexport interface ButtonProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 按钮类型 */\n  type?: 'success' | 'error' | 'primary' | 'warning' | 'default';\n  /** 透明背景 */\n  ghost?: boolean;\n  /** 实色背景 */\n  fill?: boolean;\n  /** 圆形按钮 */\n  circle?: boolean;\n  /** 虚线按钮 */\n  dashed?: boolean;\n  /** 扁平按钮 */\n  flat?: boolean;\n  /** 禁用按钮 */\n  disabled?: boolean;\n  /** 块按钮 */\n  block?: boolean;\n  /** 链接按钮 */\n  link?: boolean;\n  /** 危险按钮 */\n  danger?: boolean;\n  /** 自定义 tag\n   * @since 2.1.0\n   */\n  tag?: string;\n  /** 按钮尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 按钮前面添加一个图标 */\n  icon?: (() => JSX.Element) | JSX.Element;\n  children?: JSX.Element;\n}\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>\n        {baseStyle()}\n        {style}\n        {css(local.css)}\n      </style>\n      <Dynamic\n        ref={ref}\n        component={local.link ? 'a' : local.tag || 'button'}\n        class={cx(\n          'btn',\n          local.type,\n          local.size,\n          local.danger && 'danger',\n          local.block && 'block',\n          local.fill && 'fill',\n          local.circle && 'circle',\n          local.flat && 'flat',\n          local.dashed && 'dashed',\n          local.ghost && 'ghost',\n          local.link && 'link',\n          local.disabled && 'disabled',\n          animating() && 'without',\n        )}\n        part=\"button\"\n        onClick={handleClick}\n        onAnimationEnd={handleAnimationEnd}\n        disabled={local.disabled}\n        role=\"button\"\n        {...other}\n      >\n        <Show when={local.icon}>\n          <span class=\"icon\" part=\"icon\">\n            {icon()}\n          </span>\n        </Show>\n        <span class=\"label\" part=\"label\">\n          {local.children}\n        </span>\n      </Dynamic>\n    </>\n  );\n}\n\ncustomElement<ButtonProps>(\n  'n-button',\n  {\n    class: void 0,\n    css: void 0,\n    type: void 0,\n    ghost: void 0,\n    fill: void 0,\n    circle: void 0,\n    dashed: void 0,\n    flat: void 0,\n    disabled: void 0,\n    block: void 0,\n    link: void 0,\n    danger: void 0,\n    size: void 0,\n    icon: void 0,\n    tag: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        children: [...el.childNodes.values()],\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n      el.removeAttribute('css');\n    });\n\n    return createComponent(Button, props);\n  },\n);\nexport default Button;\n"],"names":["Button","_","ref","baseStyle","theme","_props","mergeProps","size","type","local","other","splitProps","animating","setAnimating","createSignal","icon","createMemo","isFunction","style","css","Dynamic","link","tag","cx","danger","block","fill","circle","flat","dashed","ghost","disabled","Show","children","customElement","class","opt","el","element","props","childNodes","values","createEffect","replaceChildren","removeAttribute","createComponent"],"rangeMappings":"","mappings":"kGA4KA,+CAAA,qBAhKwB,0BAJjB,wBACoB,4CACH,yBACM,2BAER,uBACJ,4MA0ClB,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,4CAGOZ,uBACAe,OAAK,0BACLC,GAAAA,KAAG,EAACV,EAAMU,GAAG,oCAEfC,SAAO,gCACDlB,4BAAAA,4BACMO,EAAMY,IAAI,CAAG,IAAMZ,EAAMa,GAAG,EAAI,4BACpCC,GAAAA,IAAE,EACP,MACAd,EAAMD,IAAI,CACVC,EAAMF,IAAI,CACVE,EAAMe,MAAM,EAAI,SAChBf,EAAMgB,KAAK,EAAI,QACfhB,EAAMiB,IAAI,EAAI,OACdjB,EAAMkB,MAAM,EAAI,SAChBlB,EAAMmB,IAAI,EAAI,OACdnB,EAAMoB,MAAM,EAAI,SAChBpB,EAAMqB,KAAK,EAAI,QACfrB,EAAMY,IAAI,EAAI,OACdZ,EAAMsB,QAAQ,EAAI,WAClBnB,KAAe,kCAjCvB,WACOH,EAAMsB,QAAQ,EACjBlB,EAAa,CAAA,EAEjB,iBACA,WACEA,EAAa,CAAA,EACf,wBA+BgBJ,EAAMsB,QAAQ,iBAEpBrB,+CAEHsB,MAAI,oBAAOvB,EAAMM,IAAI,gDAEjBA,iDAIFN,EAAMwB,QAAQ,aAKzB,CAEAC,GAAAA,eAAa,EACX,WACA,CACEC,MAAO,KAAK,EACZhB,IAAK,KAAK,EACVX,KAAM,KAAK,EACXsB,MAAO,KAAK,EACZJ,KAAM,KAAK,EACXC,OAAQ,KAAK,EACbE,OAAQ,KAAK,EACbD,KAAM,KAAK,EACXG,SAAU,KAAK,EACfN,MAAO,KAAK,EACZJ,KAAM,KAAK,EACXG,OAAQ,KAAK,EACbjB,KAAM,KAAK,EACXQ,KAAM,KAAK,EACXO,IAAK,KAAK,CACZ,EACA,CAACrB,EAAGmC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBC,EAAQjC,GAAAA,YAAU,EACtB,CACEa,IAAKkB,EAAGlB,GAAG,CACXc,SAAU,IAAII,EAAGG,UAAU,CAACC,MAAM,GAAG,AACvC,EACAxC,GAQF,MALAyC,GAAAA,cAAY,EAAC,KACXL,EAAGM,eAAe,GAClBN,EAAGO,eAAe,CAAC,MACrB,GAEOC,GAAAA,iBAAe,EAAC7C,EAAQuC,EACjC,SAEF,EAAevC"}
+{"version":3,"sources":["../../components/button/index.tsx"],"sourcesContent":["import { Show, createEffect, createMemo, createSignal, mergeProps, splitProps } from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Dynamic } from 'solid-js/web';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement } from '..';\n\nexport interface ButtonProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 按钮类型 */\n  type?: 'success' | 'error' | 'primary' | 'warning' | 'default';\n  /** 透明背景 */\n  ghost?: boolean;\n  /** 实色背景 */\n  fill?: boolean;\n  /** 圆形按钮 */\n  circle?: boolean;\n  /** 虚线按钮 */\n  dashed?: boolean;\n  /** 扁平按钮 */\n  flat?: boolean;\n  /** 禁用按钮 */\n  disabled?: boolean;\n  /** 块按钮 */\n  block?: boolean;\n  /** 链接按钮 */\n  link?: boolean;\n  /** 危险按钮 */\n  danger?: boolean;\n  /** 自定义 tag\n   * @since 2.1.0\n   */\n  tag?: string;\n  /** 按钮尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 按钮前面添加一个图标 */\n  icon?: (() => JSX.Element) | JSX.Element;\n  children?: JSX.Element;\n  onClick?(e: Event): void;\n}\nexport type ButtonElement = CustomElement<ButtonProps>;\n\nfunction Button(_: ButtonProps) {\n  const { baseStyle } = theme;\n  const _props = mergeProps({ size: 'normal', type: 'default' }, _);\n  const [local, other] = splitProps(_props, [\n    'ghost',\n    'fill',\n    'circle',\n    'dashed',\n    'flat',\n    'link',\n    'danger',\n    'children',\n    'block',\n    'size',\n    'type',\n    'class',\n    'icon',\n    'css',\n    'disabled',\n    'tag',\n  ]);\n  let ref: HTMLButtonElement | undefined;\n  const [animating, setAnimating] = createSignal(false);\n\n  function handleClick() {\n    if (!local.disabled) {\n      setAnimating(true);\n    }\n  }\n  function handleAnimationEnd() {\n    setAnimating(false);\n  }\n  const icon = createMemo(() => (isFunction(local.icon) ? local.icon() : local.icon));\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(local.css)}\n      </style>\n      <Dynamic\n        ref={ref}\n        component={local.link ? 'a' : local.tag || 'button'}\n        class=\"btn\"\n        classList={{\n          [local.type]: true,\n          [local.size]: true,\n          danger: local.danger,\n          block: local.block,\n          fill: local.fill,\n          circle: local.circle,\n          flat: local.flat,\n          dashed: local.dashed,\n          ghost: local.ghost,\n          link: local.link,\n          disabled: local.disabled,\n          without: animating(),\n        }}\n        part=\"button\"\n        onClick={handleClick}\n        onAnimationEnd={handleAnimationEnd}\n        disabled={local.disabled}\n        role=\"button\"\n        {...other}\n      >\n        <Show when={local.icon}>\n          <span class=\"icon\" part=\"icon\">\n            {icon()}\n          </span>\n        </Show>\n        <span class=\"label\" part=\"label\">\n          {local.children}\n        </span>\n      </Dynamic>\n    </>\n  );\n}\n\ncustomElement<ButtonProps>(\n  'n-button',\n  {\n    class: void 0,\n    css: void 0,\n    type: void 0,\n    ghost: void 0,\n    fill: void 0,\n    circle: void 0,\n    dashed: void 0,\n    flat: void 0,\n    disabled: void 0,\n    block: void 0,\n    link: void 0,\n    danger: void 0,\n    size: void 0,\n    icon: void 0,\n    tag: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        children: [...el.childNodes.values()],\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n      el.removeAttribute('css');\n    });\n\n    return <Button {...props} />;\n  },\n);\nexport default Button;\n"],"names":["Button","_","ref","baseStyle","theme","_props","mergeProps","size","type","local","other","splitProps","animating","setAnimating","createSignal","icon","createMemo","isFunction","style","css","Dynamic","link","tag","danger","block","fill","circle","flat","dashed","ghost","disabled","without","Show","children","customElement","class","opt","el","element","props","childNodes","values","createEffect","replaceChildren","removeAttribute"],"rangeMappings":"","mappings":"kGAqKA,+CAAA,qBAjKwB,0BAJ6D,wBAC1D,4CACP,yBACU,2BAER,uBACJ,4MA2ClB,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,4CAGOZ,uBACAe,OAAK,0BACLC,GAAAA,KAAG,EAACV,EAAMU,GAAG,oCAEfC,SAAO,gCACDlB,4BAAAA,4BACMO,EAAMY,IAAI,CAAG,IAAMZ,EAAMa,GAAG,EAAI,4CAEhC,CACT,CAACb,EAAMD,IAAI,CAAC,CAAE,CAAA,EACd,CAACC,EAAMF,IAAI,CAAC,CAAE,CAAA,EACdgB,OAAQd,EAAMc,MAAM,CACpBC,MAAOf,EAAMe,KAAK,CAClBC,KAAMhB,EAAMgB,IAAI,CAChBC,OAAQjB,EAAMiB,MAAM,CACpBC,KAAMlB,EAAMkB,IAAI,CAChBC,OAAQnB,EAAMmB,MAAM,CACpBC,MAAOpB,EAAMoB,KAAK,CAClBR,KAAMZ,EAAMY,IAAI,CAChBS,SAAUrB,EAAMqB,QAAQ,CACxBC,QAASnB,GACX,yBAlCN,WACOH,EAAMqB,QAAQ,EACjBjB,EAAa,CAAA,EAEjB,iBACA,WACEA,EAAa,CAAA,EACf,wBA+BgBJ,EAAMqB,QAAQ,iBAEpBpB,+CAEHsB,MAAI,oBAAOvB,EAAMM,IAAI,gDAEjBA,iDAIFN,EAAMwB,QAAQ,aAKzB,CAEAC,GAAAA,eAAa,EACX,WACA,CACEC,MAAO,KAAK,EACZhB,IAAK,KAAK,EACVX,KAAM,KAAK,EACXqB,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,EACbhB,KAAM,KAAK,EACXQ,KAAM,KAAK,EACXO,IAAK,KAAK,CACZ,EACA,CAACrB,EAAGmC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBC,EAAQjC,GAAAA,YAAU,EACtB,CACEa,IAAKkB,EAAGlB,GAAG,CACXc,SAAU,IAAII,EAAGG,UAAU,CAACC,MAAM,GAAG,AACvC,EACAxC,GAQF,MALAyC,GAAAA,cAAY,EAAC,KACXL,EAAGM,eAAe,GAClBN,EAAGO,eAAe,CAAC,MACrB,yBAEQ5C,EAAWuC,EACrB,SAEF,EAAevC"}

package/lib/capture-screen/index.js

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

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

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

package/lib/carousel/index.js

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

package/lib/carousel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/carousel/index.tsx"],"sourcesContent":["import {\n  Index,\n  Show,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface CarouselProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 轮播的内容 */\n  children?: JSX.Element[];\n  /** 当前内容的位置\n   * @default 0\n   */\n  offset?: number;\n  /** 开启指示器 */\n  dots?: boolean;\n  /** 设置自动播放时长, 不设置时不自动播放 */\n  autoplay?: number;\n  /** 自定义头部 */\n  header?: (current: number) => JSX.Element | ((current: number) => JSX.Element);\n  /** 切换显示的位置时的回调方法 */\n  onChange?: (e: number) => void;\n}\nexport type CarouselElement = CustomElement<CarouselProps>;\n\nfunction Carousel(_props: CarouselProps) {\n  const { baseStyle } = theme;\n  const props = mergeProps({ autoplay: -1, children: [] }, _props);\n  const [left, setLeft] = createSignal(0);\n  const [right, setRight] = createSignal(1);\n  const [offset, setOffset] = createSignal(0);\n  const [direction, setDirection] = createSignal<1 | -1 | 0>(0);\n  let playTimer: NodeJS.Timeout | undefined;\n\n  function onOffsetChange() {\n    const _dir = direction();\n\n    if (_dir === -1) {\n      setOffset(left());\n    } else if (_dir === 1) {\n      setOffset(right());\n    }\n    setDirection(0);\n    if (isFunction(props.onChange)) {\n      props.onChange(offset());\n    }\n  }\n  function handlePrev() {\n    setDirection(-1);\n  }\n  function handleNext() {\n    setDirection(1);\n  }\n  function handleDot(idx: number, e: Event) {\n    e.stopPropagation();\n    const _offset = offset();\n    const _current = Math.floor(_offset / 20) * 20 + idx;\n\n    if (_current > _offset) {\n      setDirection(1);\n      setRight(_current);\n    } else if (_current < _offset) {\n      setDirection(-1);\n      setLeft(_current);\n    }\n  }\n  function getPrevNext(idx: number, arr: JSX.Element[]) {\n    let _prev = idx - 1,\n      _next = idx + 1;\n\n    if (_prev < 0) {\n      _prev = arr.length - 1;\n    }\n    if (_next > arr.length - 1) {\n      _next = 0;\n    }\n    return [_prev, _next];\n  }\n  const list = createMemo(() => [...props.children]);\n  const dotLen = createMemo(() => Array(list().length > 20 ? 20 : list().length).fill(null));\n\n  createEffect(() => {\n    if (props.offset !== void 0) {\n      setOffset(Number(props.offset));\n    }\n  });\n  createEffect(() => {\n    const [_prev, _next] = getPrevNext(offset(), list());\n\n    setLeft(_prev);\n    setRight(_next);\n  });\n  createEffect(() => {\n    clearInterval(playTimer);\n    const autoplay = Number(props.autoplay);\n\n    if (autoplay > 0) {\n      playTimer = setInterval(() => {\n        if (autoplay < 1) {\n          clearInterval(playTimer);\n        }\n        handleNext();\n      }, autoplay);\n    }\n  });\n\n  onCleanup(() => {\n    clearInterval(playTimer);\n  });\n  const header = createMemo(() =>\n    isFunction(props.header) ? props.header(offset()) : props.header,\n  );\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(props.css)}\n      </style>\n      <section class={cx('carousel', props.class)}>\n        <section class=\"list\" data-dir={direction()}>\n          <div class=\"item\">{list()[left()]}</div>\n          <div class=\"item\" onAnimationEnd={onOffsetChange}>\n            {list()[offset()]}\n          </div>\n          <div class=\"item\">{list()[right()]}</div>\n        </section>\n        <slot name=\"header\" />\n        <Show when={header()}>\n          <section class=\"header\">{header()}</section>\n        </Show>\n        <div class=\"prev\" onClick={handlePrev} />\n        <div class=\"next\" onClick={handleNext} />\n        <Show when={props.dots}>\n          <div class=\"dots\">\n            <Index each={dotLen()}>\n              {(_, idx) => {\n                return (\n                  <i\n                    class={cx('dot', idx === (offset() % 20) + direction() && 'active')}\n                    onClick={handleDot.bind(null, idx)}\n                  />\n                );\n              }}\n            </Index>\n          </div>\n        </Show>\n      </section>\n    </>\n  );\n}\n\ncustomElement<CarouselProps>(\n  'n-carousel',\n  {\n    children: void 0,\n    autoplay: void 0,\n    class: void 0,\n    css: void 0,\n    offset: void 0,\n    dots: void 0,\n    header: void 0,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(key: number) {\n          el.offset = key;\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: key,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n    });\n    return createComponent(Carousel, props);\n  },\n);\nexport default Carousel;\n"],"names":["Carousel","_props","playTimer","baseStyle","theme","props","mergeProps","autoplay","children","left","setLeft","createSignal","right","setRight","offset","setOffset","direction","setDirection","onOffsetChange","_dir","isFunction","onChange","handlePrev","handleNext","handleDot","idx","e","stopPropagation","_offset","_current","Math","floor","list","createMemo","dotLen","Array","length","fill","createEffect","Number","arr","_prev","_next","clearInterval","setInterval","onCleanup","header","style","css","Show","dots","Index","_","bind","cx","class","customElement","opt","el","element","key","dispatchEvent","CustomEvent","detail","replaceChildren","createComponent"],"rangeMappings":"","mappings":"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"}
+{"version":3,"sources":["../../components/carousel/index.tsx"],"sourcesContent":["import {\n  Index,\n  Show,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface CarouselProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 轮播的内容 */\n  children?: JSX.Element[];\n  /** 当前内容的位置\n   * @default 0\n   */\n  offset?: number;\n  /** 开启指示器 */\n  dots?: boolean;\n  /** 设置自动播放时长, 不设置时不自动播放 */\n  autoplay?: number;\n  /** 自定义头部 */\n  header?: (current: number) => JSX.Element | ((current: number) => JSX.Element);\n  /** 切换显示的位置时的回调方法 */\n  onChange?: (e: number) => void;\n}\nexport type CarouselElement = CustomElement<CarouselProps>;\n\nfunction Carousel(_props: CarouselProps) {\n  const { baseStyle } = theme;\n  const props = mergeProps({ autoplay: -1, children: [] }, _props);\n  const [left, setLeft] = createSignal(0);\n  const [right, setRight] = createSignal(1);\n  const [offset, setOffset] = createSignal(0);\n  const [direction, setDirection] = createSignal<1 | -1 | 0>(0);\n  let playTimer: NodeJS.Timeout | undefined;\n\n  function onOffsetChange() {\n    const _dir = direction();\n\n    if (_dir === -1) {\n      setOffset(left());\n    } else if (_dir === 1) {\n      setOffset(right());\n    }\n    setDirection(0);\n    if (isFunction(props.onChange)) {\n      props.onChange(offset());\n    }\n  }\n  function handlePrev() {\n    setDirection(-1);\n  }\n  function handleNext() {\n    setDirection(1);\n  }\n  function handleDot(idx: number, e: Event) {\n    e.stopPropagation();\n    const _offset = offset();\n    const _current = Math.floor(_offset / 20) * 20 + idx;\n\n    if (_current > _offset) {\n      setDirection(1);\n      setRight(_current);\n    } else if (_current < _offset) {\n      setDirection(-1);\n      setLeft(_current);\n    }\n  }\n  function getPrevNext(idx: number, arr: JSX.Element[]) {\n    let _prev = idx - 1,\n      _next = idx + 1;\n\n    if (_prev < 0) {\n      _prev = arr.length - 1;\n    }\n    if (_next > arr.length - 1) {\n      _next = 0;\n    }\n    return [_prev, _next];\n  }\n  const list = createMemo(() => [...props.children]);\n  const dotLen = createMemo(() => Array(list().length > 20 ? 20 : list().length).fill(null));\n\n  createEffect(() => {\n    if (props.offset !== void 0) {\n      setOffset(Number(props.offset));\n    }\n  });\n  createEffect(() => {\n    const [_prev, _next] = getPrevNext(offset(), list());\n\n    setLeft(_prev);\n    setRight(_next);\n  });\n  createEffect(() => {\n    clearInterval(playTimer);\n    const autoplay = Number(props.autoplay);\n\n    if (autoplay > 0) {\n      playTimer = setInterval(() => {\n        if (autoplay < 1) {\n          clearInterval(playTimer);\n        }\n        handleNext();\n      }, autoplay);\n    }\n  });\n\n  onCleanup(() => {\n    clearInterval(playTimer);\n  });\n  const header = createMemo(() =>\n    isFunction(props.header) ? props.header(offset()) : props.header,\n  );\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(props.css)}\n      </style>\n      <section class={cx('carousel', props.class)}>\n        <section class=\"list\" data-dir={direction()}>\n          <div class=\"item\">{list()[left()]}</div>\n          <div class=\"item\" onAnimationEnd={onOffsetChange}>\n            {list()[offset()]}\n          </div>\n          <div class=\"item\">{list()[right()]}</div>\n        </section>\n        <slot name=\"header\" />\n        <Show when={header()}>\n          <section class=\"header\">{header()}</section>\n        </Show>\n        <div class=\"prev\" onClick={handlePrev} />\n        <div class=\"next\" onClick={handleNext} />\n        <Show when={props.dots}>\n          <div class=\"dots\">\n            <Index each={dotLen()}>\n              {(_, idx) => {\n                return (\n                  <i\n                    class=\"dot\"\n                    classList={{\n                      active: idx === (offset() % 20) + direction(),\n                    }}\n                    onClick={handleDot.bind(null, idx)}\n                  />\n                );\n              }}\n            </Index>\n          </div>\n        </Show>\n      </section>\n    </>\n  );\n}\n\ncustomElement<CarouselProps>(\n  'n-carousel',\n  {\n    children: void 0,\n    autoplay: void 0,\n    class: void 0,\n    css: void 0,\n    offset: void 0,\n    dots: void 0,\n    header: void 0,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(key: number) {\n          el.offset = key;\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: key,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n    });\n    return <Carousel {...props} />;\n  },\n);\nexport default Carousel;\n"],"names":["Carousel","_props","playTimer","baseStyle","theme","props","mergeProps","autoplay","children","left","setLeft","createSignal","right","setRight","offset","setOffset","direction","setDirection","onOffsetChange","_dir","isFunction","onChange","handlePrev","handleNext","handleDot","idx","e","stopPropagation","_offset","_current","Math","floor","list","createMemo","dotLen","Array","length","fill","createEffect","Number","arr","_prev","_next","clearInterval","setInterval","onCleanup","header","style","css","Show","dots","Index","_","bind","cx","class","customElement","opt","el","element","key","dispatchEvent","CustomEvent","detail","replaceChildren"],"rangeMappings":"","mappings":"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"}

package/lib/checkbox/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return f}});const e=require("solid-js/web"),t=require("solid-js"),n=require("@moneko/css"),i=require("solid-element"),l=require("./style"),r=require("../basic-config"),a=o(require("../get-options")),s=o(require("../theme"));function o(e){return e&&e.__esModule?e:{default:e}}const u=(0,e.template)("<style>"),d=(0,e.template)("<section>"),c=(0,e.template)('<span><input class="checkbox" type="checkbox"><label>');function v(i){let{baseStyle:o}=s.default,[v,f]=(0,t.createSignal)([]),m=(0,t.createMemo)(()=>Object.assign({},r.FieldName,i.fieldNames));(0,t.createEffect)(()=>{let e=void 0===i.value?i.defaultValue:i.value,t=[];Array.isArray(e)?t=e:void 0!==e&&(t=[e]),f(t)});let b=(0,t.createMemo)(()=>{let e=m();if(void 0===i.options)return(0,a.default)([{value:1}],e);let t=[{[e.value]:"all",[e.label]:"全选",indeterminate:!1}];return(i.checkAll?t:[]).concat((0,a.default)(i.options||[],e))}),p=(0,t.createMemo)(()=>{let e=[],t=m();return b().forEach(n=>{"indeterminate"in n||void 0===n[t.value]||e.push(n[t.value])}),e}),h=(0,t.createMemo)(()=>{let e=!0,t=p();for(let n=0,i=t.length;n<i;n++)if(!v().includes(t[n])){e=!1;break}return e});function g(e){if(!i.disabled&&!e.disabled){let t="indeterminate"in e,n=t?[]:[...v()],l=e[m().value];if(t)h()||(n=p());else{let e=n.indexOf(l);-1!==e?n.splice(e,1):n.push(l)}void 0===i.value&&f(n),i.onChange?.(void 0===i.options?!!n[0]:n)}}function y(e,t){t.preventDefault(),"Enter"===t.key&&g(e)}return[(()=>{let t=u();return(0,e.insert)(t,o,null),(0,e.insert)(t,l.style,null),(0,e.insert)(t,()=>(0,n.css)(i.css),null),t})(),(()=>{let l=d();return(0,e.insert)(l,(0,e.createComponent)(t.For,{get each(){return b()},children:l=>{let r=i.disabled||l.disabled,a=m(),s=l[a.value];return"indeterminate"in l&&(0,t.createEffect)(()=>{let e;l.ref.indeterminate=(e=!1,p().forEach(t=>{v().length&&!v().includes(t)&&(e=!0)}),e)}),(()=>{let t=c(),o=t.firstChild,u=l.ref,d=o.nextSibling;return(0,e.addEventListener)(t,"click",g.bind(null,l),!0),(0,e.addEventListener)(t,"keyup",y.bind(null,l),!0),(0,e.setAttribute)(t,"aria-disabled",r),(0,e.setAttribute)(t,"tabindex",r?-1:0),(0,e.addEventListener)(o,"change",g.bind(null,l)),"function"==typeof u?(0,e.use)(u,o):l.ref=o,o.value=s,o.disabled=r,(0,e.insert)(d,()=>l[a.label]),(0,e.effect)(r=>{let a=(0,n.cx)("item",l.class,l.status),s=i.name;return a!==r._v$&&(0,e.className)(t,r._v$=a),s!==r._v$2&&(0,e.setAttribute)(o,"name",r._v$2=s),r},{_v$:void 0,_v$2:void 0}),(0,e.effect)(()=>o.checked="indeterminate"in l?h():v().includes(s)),t})()}})),(0,e.effect)(()=>(0,e.className)(l,(0,n.cx)("box",i.layout,i.class))),l})()]}(0,i.customElement)("n-checkbox",{class:void 0,css:void 0,name:void 0,disabled:void 0,value:void 0,defaultValue:void 0,options:void 0,onChange:void 0,fieldNames:void 0,checkAll:void 0,layout:void 0},(e,n)=>{let i=n.element,l=(0,t.mergeProps)({layout:i.layout||"horizontal",onChange(e){i.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return(0,t.createEffect)(()=>{i.removeAttribute("options"),i.removeAttribute("field-names"),i.removeAttribute("css")}),(0,t.createComponent)(v,l)});const f=v;(0,e.delegateEvents)(["click","keyup"]);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return f}});const e=require("solid-js/web"),t=require("solid-js"),n=require("@moneko/css"),i=require("solid-element"),l=require("./style"),r=require("../basic-config"),a=o(require("../get-options")),s=o(require("../theme"));function o(e){return e&&e.__esModule?e:{default:e}}const u=(0,e.template)("<style>"),d=(0,e.template)("<section>"),c=(0,e.template)('<span><input class="checkbox" type="checkbox"><label>');function v(i){let{baseStyle:o}=s.default,[v,f]=(0,t.createSignal)([]),m=(0,t.createMemo)(()=>Object.assign({},r.FieldName,i.fieldNames));(0,t.createEffect)(()=>{let e=void 0===i.value?i.defaultValue:i.value,t=[];Array.isArray(e)?t=e:void 0!==e&&(t=[e]),f(t)});let b=(0,t.createMemo)(()=>{let e=m();if(void 0===i.options)return(0,a.default)([{value:1}],e);let t=[{[e.value]:"all",[e.label]:"全选",indeterminate:!1}];return(i.checkAll?t:[]).concat((0,a.default)(i.options||[],e))}),p=(0,t.createMemo)(()=>{let e=[],t=m();return b().forEach(n=>{"indeterminate"in n||void 0===n[t.value]||e.push(n[t.value])}),e}),h=(0,t.createMemo)(()=>{let e=!0,t=p();for(let n=0,i=t.length;n<i;n++)if(!v().includes(t[n])){e=!1;break}return e});function g(e){if(!i.disabled&&!e.disabled){let t="indeterminate"in e,n=t?[]:[...v()],l=e[m().value];if(t)h()||(n=p());else{let e=n.indexOf(l);-1!==e?n.splice(e,1):n.push(l)}void 0===i.value&&f(n),i.onChange?.(void 0===i.options?!!n[0]:n)}}function y(e,t){t.preventDefault(),"Enter"===t.key&&g(e)}return[(()=>{let t=u();return(0,e.insert)(t,o,null),(0,e.insert)(t,l.style,null),(0,e.insert)(t,()=>(0,n.css)(i.css),null),t})(),(()=>{let l=d();return(0,e.insert)(l,(0,e.createComponent)(t.For,{get each(){return b()},children:l=>{let r=i.disabled||l.disabled,a=m(),s=l[a.value];return"indeterminate"in l&&(0,t.createEffect)(()=>{let e;l.ref.indeterminate=(e=!1,p().forEach(t=>{v().length&&!v().includes(t)&&(e=!0)}),e)}),(()=>{let t=c(),o=t.firstChild,u=l.ref,d=o.nextSibling;return(0,e.addEventListener)(t,"click",g.bind(null,l),!0),(0,e.addEventListener)(t,"keyup",y.bind(null,l),!0),(0,e.setAttribute)(t,"aria-disabled",r),(0,e.setAttribute)(t,"tabindex",r?-1:0),(0,e.addEventListener)(o,"change",g.bind(null,l)),"function"==typeof u?(0,e.use)(u,o):l.ref=o,o.value=s,o.disabled=r,(0,e.insert)(d,()=>l[a.label]),(0,e.effect)(r=>{let a=(0,n.cx)("item",l.class,l.status),s=i.name;return a!==r._v$&&(0,e.className)(t,r._v$=a),s!==r._v$2&&(0,e.setAttribute)(o,"name",r._v$2=s),r},{_v$:void 0,_v$2:void 0}),(0,e.effect)(()=>o.checked="indeterminate"in l?h():v().includes(s)),t})()}})),(0,e.effect)(()=>(0,e.className)(l,(0,n.cx)("box",i.layout,i.class))),l})()]}(0,i.customElement)("n-checkbox",{class:void 0,css:void 0,name:void 0,disabled:void 0,value:void 0,defaultValue:void 0,options:void 0,onChange:void 0,fieldNames:void 0,checkAll:void 0,layout:void 0},(n,i)=>{let l=i.element,r=(0,t.mergeProps)({layout:l.layout||"horizontal",onChange(e){l.dispatchEvent(new CustomEvent("change",{detail:e}))}},n);return(0,t.createEffect)(()=>{l.removeAttribute("options"),l.removeAttribute("field-names"),l.removeAttribute("css")}),(0,e.createComponent)(v,r)});const f=v;(0,e.delegateEvents)(["click","keyup"]);
 //# sourceMappingURL=index.js.map

package/lib/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/checkbox/index.tsx"],"sourcesContent":["import { For, createComponent, createEffect, createMemo, createSignal, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport { FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\n\n/** 通用API\n * @since 1.0.0\n */\nexport interface CheckboxBaseProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** input[type=\"checkbox\"] 的 name 属性 */\n  name?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 选项排列方式\n   * @default 'horizontal'\n   */\n  layout?: 'vertical' | 'horizontal';\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n}\n/** 复选框API */\nexport interface CheckboxBoolProps extends CheckboxBaseProps {\n  /** 一个 bool 值; */\n  value?: boolean;\n  /** 默认值 */\n  defaultValue?: boolean;\n  /** 值修改时的回调方法 */\n  onChange?: (val: boolean) => void;\n  checkAll?: never;\n  options?: never;\n}\n/** 通过数据渲染一组复选框按钮的API */\nexport interface CheckboxGroupProps extends CheckboxBaseProps {\n  /** 全选 */\n  checkAll?: boolean;\n  /** 值;\n   * 当设置了value时, 将是受控模式;\n   * 受控模式可通过 onChange 事件更新 value\n   **/\n  value?: (string | number)[];\n  /** 默认值 */\n  defaultValue?: (string | number)[];\n  /** 渲染选项所使用的数据,\n   * 当没有设置该值时, 将渲染一个切换 bool 值的按钮\n   * */\n  options?: (CheckboxOption | string)[];\n  /** 值修改时的回调方法 */\n  onChange?: (val: (string | number)[]) => void;\n}\n/** 复选框选项\n * @since 1.0.0\n */\nexport interface CheckboxOption extends BaseOption {\n  /** 不确定状态 */\n  indeterminate?: boolean;\n}\n\nfunction Checkbox(props: CheckboxBoolProps | CheckboxGroupProps) {\n  const { baseStyle } = theme;\n  const [value, setValue] = createSignal<(string | number)[]>([]);\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n\n  createEffect(() => {\n    const _val = typeof props.value === 'undefined' ? props.defaultValue : props.value;\n    let val: (string | number)[] = [];\n\n    if (Array.isArray(_val)) {\n      val = _val;\n    } else if (typeof _val !== 'undefined') {\n      val = [_val as unknown as string];\n    }\n\n    setValue(val);\n  });\n  const options = createMemo(() => {\n    const fieldName = fieldNames();\n\n    if (typeof props.options === 'undefined') {\n      return getOptions([{ value: 1 } as CheckboxOption], fieldName);\n    }\n    const checkAll: CheckboxOption[] = [\n      { [fieldName.value]: 'all', [fieldName.label]: '全选', indeterminate: false },\n    ];\n    const arr = props.checkAll ? checkAll : [];\n\n    return arr.concat(getOptions(props.options || [], fieldName));\n  });\n\n  const all = createMemo(() => {\n    const allVal: (string | number)[] = [];\n    const fieldName = fieldNames();\n\n    options().forEach((item) => {\n      if (!('indeterminate' in item) && typeof item[fieldName.value] !== 'undefined') {\n        allVal.push(item[fieldName.value]!);\n      }\n    });\n\n    return allVal;\n  });\n\n  function getIndeterminate() {\n    let _indeterminate = false;\n\n    all().forEach((v) => {\n      if (value().length && !value().includes(v)) {\n        _indeterminate = true;\n      }\n    });\n    return _indeterminate;\n  }\n  const checkedAll = createMemo(() => {\n    let checked = true;\n    const alls = all();\n\n    for (let i = 0, len = alls.length; i < len; i++) {\n      if (!value().includes(alls[i])) {\n        checked = false;\n        break;\n      }\n    }\n    return checked;\n  });\n\n  function onChange(item: CheckboxOption) {\n    if (!props.disabled && !item.disabled) {\n      const isIndeterminate = 'indeterminate' in item;\n      let newVal = isIndeterminate ? [] : [...value()];\n      const val = item[fieldNames().value]!;\n\n      if (isIndeterminate) {\n        if (!checkedAll()) {\n          newVal = all();\n        }\n      } else {\n        const idx = newVal.indexOf(val);\n\n        if (idx !== -1) {\n          newVal.splice(idx, 1);\n        } else {\n          newVal.push(val);\n        }\n      }\n      if (typeof props.value === 'undefined') {\n        setValue(newVal);\n      }\n      props.onChange?.((typeof props.options === 'undefined' ? !!newVal[0] : newVal) as never);\n    }\n  }\n  function onKeyUp(item: CheckboxOption, e: KeyboardEvent) {\n    e.preventDefault();\n    if (e.key === 'Enter') {\n      onChange(item);\n    }\n  }\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(props.css)}\n      </style>\n      <section class={cx('box', props.layout, props.class)}>\n        <For each={options()}>\n          {(item) => {\n            const readOnly = props.disabled || item.disabled;\n            const fieldName = fieldNames();\n            const realVal = item[fieldName.value]!;\n\n            if ('indeterminate' in item) {\n              createEffect(() => {\n                item.ref.indeterminate = getIndeterminate();\n              });\n            }\n            return (\n              <span\n                class={cx('item', item.class, item.status)}\n                aria-disabled={readOnly}\n                tabindex={readOnly ? -1 : 0}\n                onKeyUp={onKeyUp.bind(null, item)}\n                onClick={onChange.bind(null, item)}\n              >\n                <input\n                  ref={item.ref}\n                  class=\"checkbox\"\n                  type=\"checkbox\"\n                  name={props.name}\n                  value={realVal as string}\n                  disabled={readOnly}\n                  checked={'indeterminate' in item ? checkedAll() : value().includes(realVal)}\n                  onChange={onChange.bind(null, item)}\n                />\n                <label>{item[fieldName.label]}</label>\n              </span>\n            );\n          }}\n        </For>\n      </section>\n    </>\n  );\n}\n\nexport type CheckboxGroupElement = CustomElement<CheckboxGroupProps>;\nexport type CheckboxBoolElement = CustomElement<CheckboxBoolProps>;\n\ncustomElement<CheckboxBoolProps | CheckboxGroupProps>(\n  'n-checkbox',\n  {\n    class: void 0,\n    css: void 0,\n    name: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    options: void 0,\n    onChange: void 0,\n    fieldNames: void 0,\n    checkAll: void 0,\n    layout: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        layout: el.layout || 'horizontal',\n        onChange(next: (string | number)[] | boolean) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: next,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('options');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return createComponent(Checkbox, props);\n  },\n);\nexport default Checkbox;\n"],"names":["Checkbox","props","baseStyle","theme","value","setValue","createSignal","fieldNames","createMemo","Object","assign","FieldName","createEffect","_val","defaultValue","val","Array","isArray","options","fieldName","getOptions","checkAll","label","indeterminate","arr","concat","all","allVal","forEach","item","push","checkedAll","checked","alls","i","len","length","includes","onChange","disabled","isIndeterminate","newVal","idx","indexOf","splice","onKeyUp","e","preventDefault","key","style","css","For","readOnly","realVal","_indeterminate","ref","v","bind","cx","class","status","name","layout","customElement","_","opt","el","element","mergeProps","next","dispatchEvent","CustomEvent","detail","removeAttribute","createComponent"],"rangeMappings":"","mappings":"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"}
+{"version":3,"sources":["../../components/checkbox/index.tsx"],"sourcesContent":["import { For, createEffect, createMemo, createSignal, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport { FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\n\n/** 通用API\n * @since 1.0.0\n */\nexport interface CheckboxBaseProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** input[type=\"checkbox\"] 的 name 属性 */\n  name?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 选项排列方式\n   * @default 'horizontal'\n   */\n  layout?: 'vertical' | 'horizontal';\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n}\n/** 复选框API */\nexport interface CheckboxBoolProps extends CheckboxBaseProps {\n  /** 一个 bool 值; */\n  value?: boolean;\n  /** 默认值 */\n  defaultValue?: boolean;\n  /** 值修改时的回调方法 */\n  onChange?: (val: boolean) => void;\n  checkAll?: never;\n  options?: never;\n}\n/** 通过数据渲染一组复选框按钮的API */\nexport interface CheckboxGroupProps extends CheckboxBaseProps {\n  /** 全选 */\n  checkAll?: boolean;\n  /** 值;\n   * 当设置了value时, 将是受控模式;\n   * 受控模式可通过 onChange 事件更新 value\n   **/\n  value?: (string | number)[];\n  /** 默认值 */\n  defaultValue?: (string | number)[];\n  /** 渲染选项所使用的数据,\n   * 当没有设置该值时, 将渲染一个切换 bool 值的按钮\n   * */\n  options?: (CheckboxOption | string)[];\n  /** 值修改时的回调方法 */\n  onChange?: (val: (string | number)[]) => void;\n}\n/** 复选框选项\n * @since 1.0.0\n */\nexport interface CheckboxOption extends BaseOption {\n  /** 不确定状态 */\n  indeterminate?: boolean;\n}\n\nfunction Checkbox(props: CheckboxBoolProps | CheckboxGroupProps) {\n  const { baseStyle } = theme;\n  const [value, setValue] = createSignal<(string | number)[]>([]);\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n\n  createEffect(() => {\n    const _val = typeof props.value === 'undefined' ? props.defaultValue : props.value;\n    let val: (string | number)[] = [];\n\n    if (Array.isArray(_val)) {\n      val = _val;\n    } else if (typeof _val !== 'undefined') {\n      val = [_val as unknown as string];\n    }\n\n    setValue(val);\n  });\n  const options = createMemo(() => {\n    const fieldName = fieldNames();\n\n    if (typeof props.options === 'undefined') {\n      return getOptions([{ value: 1 } as CheckboxOption], fieldName);\n    }\n    const checkAll: CheckboxOption[] = [\n      { [fieldName.value]: 'all', [fieldName.label]: '全选', indeterminate: false },\n    ];\n    const arr = props.checkAll ? checkAll : [];\n\n    return arr.concat(getOptions(props.options || [], fieldName));\n  });\n\n  const all = createMemo(() => {\n    const allVal: (string | number)[] = [];\n    const fieldName = fieldNames();\n\n    options().forEach((item) => {\n      if (!('indeterminate' in item) && typeof item[fieldName.value] !== 'undefined') {\n        allVal.push(item[fieldName.value]!);\n      }\n    });\n\n    return allVal;\n  });\n\n  function getIndeterminate() {\n    let _indeterminate = false;\n\n    all().forEach((v) => {\n      if (value().length && !value().includes(v)) {\n        _indeterminate = true;\n      }\n    });\n    return _indeterminate;\n  }\n  const checkedAll = createMemo(() => {\n    let checked = true;\n    const alls = all();\n\n    for (let i = 0, len = alls.length; i < len; i++) {\n      if (!value().includes(alls[i])) {\n        checked = false;\n        break;\n      }\n    }\n    return checked;\n  });\n\n  function onChange(item: CheckboxOption) {\n    if (!props.disabled && !item.disabled) {\n      const isIndeterminate = 'indeterminate' in item;\n      let newVal = isIndeterminate ? [] : [...value()];\n      const val = item[fieldNames().value]!;\n\n      if (isIndeterminate) {\n        if (!checkedAll()) {\n          newVal = all();\n        }\n      } else {\n        const idx = newVal.indexOf(val);\n\n        if (idx !== -1) {\n          newVal.splice(idx, 1);\n        } else {\n          newVal.push(val);\n        }\n      }\n      if (typeof props.value === 'undefined') {\n        setValue(newVal);\n      }\n      props.onChange?.((typeof props.options === 'undefined' ? !!newVal[0] : newVal) as never);\n    }\n  }\n  function onKeyUp(item: CheckboxOption, e: KeyboardEvent) {\n    e.preventDefault();\n    if (e.key === 'Enter') {\n      onChange(item);\n    }\n  }\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(props.css)}\n      </style>\n      <section class={cx('box', props.layout, props.class)}>\n        <For each={options()}>\n          {(item) => {\n            const readOnly = props.disabled || item.disabled;\n            const fieldName = fieldNames();\n            const realVal = item[fieldName.value]!;\n\n            if ('indeterminate' in item) {\n              createEffect(() => {\n                item.ref.indeterminate = getIndeterminate();\n              });\n            }\n            return (\n              <span\n                class={cx('item', item.class, item.status)}\n                aria-disabled={readOnly}\n                tabindex={readOnly ? -1 : 0}\n                onKeyUp={onKeyUp.bind(null, item)}\n                onClick={onChange.bind(null, item)}\n              >\n                <input\n                  ref={item.ref}\n                  class=\"checkbox\"\n                  type=\"checkbox\"\n                  name={props.name}\n                  value={realVal as string}\n                  disabled={readOnly}\n                  checked={'indeterminate' in item ? checkedAll() : value().includes(realVal)}\n                  onChange={onChange.bind(null, item)}\n                />\n                <label>{item[fieldName.label]}</label>\n              </span>\n            );\n          }}\n        </For>\n      </section>\n    </>\n  );\n}\n\nexport type CheckboxGroupElement = CustomElement<CheckboxGroupProps>;\nexport type CheckboxBoolElement = CustomElement<CheckboxBoolProps>;\n\ncustomElement<CheckboxBoolProps | CheckboxGroupProps>(\n  'n-checkbox',\n  {\n    class: void 0,\n    css: void 0,\n    name: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    options: void 0,\n    onChange: void 0,\n    fieldNames: void 0,\n    checkAll: void 0,\n    layout: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        layout: el.layout || 'horizontal',\n        onChange(next: (string | number)[] | boolean) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: next,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('options');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return <Checkbox {...props} />;\n  },\n);\nexport default Checkbox;\n"],"names":["Checkbox","props","baseStyle","theme","value","setValue","createSignal","fieldNames","createMemo","Object","assign","FieldName","createEffect","_val","defaultValue","val","Array","isArray","options","fieldName","getOptions","checkAll","label","indeterminate","arr","concat","all","allVal","forEach","item","push","checkedAll","checked","alls","i","len","length","includes","onChange","disabled","isIndeterminate","newVal","idx","indexOf","splice","onKeyUp","e","preventDefault","key","style","css","For","readOnly","realVal","_indeterminate","ref","v","bind","cx","class","status","name","layout","customElement","_","opt","el","element","mergeProps","next","dispatchEvent","CustomEvent","detail","removeAttribute"],"rangeMappings":"","mappings":"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"}

package/lib/code/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return f}});const e=require("solid-js/web"),t=require("solid-js"),n=c(require("@moneko/common/lib/isFunction")),r=c(require("@moneko/common/lib/setClipboard")),l=require("@moneko/css"),i=require("solid-element"),o=require("./style"),a=c(require("../prism/css"));require("../prism/prism.js");const s=c(require("../theme"));function c(e){return e&&e.__esModule?e:{default:e}}const u=(0,e.template)('<div class="toolbar"><button class="toolbar-copy">'),d=(0,e.template)("<pre><code>"),m=(0,e.template)("<style>"),v=(0,e.template)("<div><textarea>");function g(i){let c;let{baseStyle:g}=s.default,[f,p]=(0,t.createSignal)(""),[h,b]=(0,t.createSignal)(20);function $(){(0,r.default)((0,t.untrack)(f),c)}function _(){return(()=>{let n=d(),r=n.firstChild,o=c;return(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return i.toolbar},get children(){let t=u(),n=t.firstChild;return(0,e.addEventListener)(n,"click",$,!0),(0,e.effect)(()=>(0,e.setAttribute)(t,"data-lang",i.lang?.split(" ")[0])),t}}),r),"function"==typeof o?(0,e.use)(o,r):c=r,(0,e.effect)(t=>{let o=(0,l.cx)(`language-${i.lang}`,i.lineNumber&&"line-numbers",!i.toolbar&&"not-toolbar",!i.edit&&i.class),a=`language-${i.lang}`;return o!==t._v$&&(0,e.className)(n,t._v$=o),a!==t._v$2&&(0,e.className)(r,t._v$2=a),t},{_v$:void 0,_v$2:void 0}),n})()}function w({target:e}){let t=`${e.value}${/\n$/.test(e.value)?"​":""}`;p(t),(0,n.default)(i.onChange)&&i.onChange(t)}return(0,t.createEffect)(()=>{if(i.code){let e=i.code.replace(/^\n/,"");try{p(decodeURIComponent(e))}catch(t){p(e)}}else p("")}),(0,t.createEffect)(()=>{!function(e){var t;if(!e.code)return;let n=e.lang||"markup";/^diff-([\w-]+)/i.test(n)&&(window.Prism.languages[n]=window.Prism.languages.diff);let r=window.Prism.languages[n]||window.Prism.languages.markup;t={data:window.Prism.highlight(e.code,r,n)},c.innerHTML=t.data,b(c.getBoundingClientRect().height-(i.toolbar?40:16))}({lang:i.lang,code:f()})}),[(()=>{let t=m();return(0,e.insert)(t,g,null),(0,e.insert)(t,a.default,null),(0,e.insert)(t,o.style,null),(0,e.insert)(t,()=>(0,l.css)(i.css),null),t})(),(0,e.createComponent)(t.Show,{get when(){return i.edit},get fallback(){return _()},get children(){let t=v(),n=t.firstChild;return(0,e.addEventListener)(n,"input",w,!0),(0,e.insert)(t,_,null),(0,e.effect)(r=>{let o=(0,l.cx)("n-editor",i.class),a=(0,l.cx)(i.lineNumber&&"line-numbers",!i.toolbar&&"not-toolbar"),s=`${h()}px`;return o!==r._v$3&&(0,e.className)(t,r._v$3=o),a!==r._v$4&&(0,e.className)(n,r._v$4=a),s!==r._v$5&&(null!=(r._v$5=s)?n.style.setProperty("height",s):n.style.removeProperty("height")),r},{_v$3:void 0,_v$4:void 0,_v$5:void 0}),(0,e.effect)(()=>n.value=f()),t}})]}(0,i.customElement)("n-code",{class:void 0,code:void 0,lang:void 0,children:void 0,edit:void 0,toolbar:void 0,css:void 0,lineNumber:void 0,onChange:void 0},(e,n)=>{let r=n.element,l=(0,t.mergeProps)({code:r.textContent,css:r.css,onChange(e){r.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return(0,t.createEffect)(()=>{r.replaceChildren(),r.removeAttribute("css")}),(0,t.createComponent)(g,l)});const f=g;(0,e.delegateEvents)(["click","input"]);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return p}});const e=require("solid-js/web"),t=require("solid-js"),n=c(require("@moneko/common/lib/isFunction")),r=c(require("@moneko/common/lib/setClipboard")),l=require("@moneko/css"),o=require("solid-element"),i=require("./style"),s=c(require("../prism/css"));require("../prism/prism.js");const a=c(require("../theme"));function c(e){return e&&e.__esModule?e:{default:e}}const u=(0,e.template)('<div class="toolbar"><button class="toolbar-copy">'),d=(0,e.template)("<pre><code>"),g=(0,e.template)("<style>"),v=(0,e.template)("<div><textarea>"),m=/^diff-([\w-]+)/i;function f(o){let c;let{baseStyle:f}=a.default,[p,b]=(0,t.createSignal)(""),[h,$]=(0,t.createSignal)(20),[_,C]=(0,t.createSignal)(!1),y=new IntersectionObserver(e=>{C(e[0].isIntersecting)});function P(){(0,r.default)((0,t.untrack)(p),c)}function q(){return(()=>{let n=d(),r=n.firstChild,l=c;return(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return o.toolbar},get children(){let t=u(),n=t.firstChild;return(0,e.addEventListener)(n,"click",P,!0),(0,e.effect)(()=>(0,e.setAttribute)(t,"data-lang",o.lang?.split(" ")[0])),t}}),r),"function"==typeof l?(0,e.use)(l,r):c=r,(0,e.effect)(t=>{let l={[`language-${o.lang}`]:!!o.lang,"line-numbers":o.lineNumber,"not-toolbar":!o.toolbar,[o.class]:!o.edit},i=`language-${o.lang}`;return t._v$=(0,e.classList)(n,l,t._v$),i!==t._v$2&&(0,e.className)(r,t._v$2=i),t},{_v$:void 0,_v$2:void 0}),n})()}function k({target:e}){let t=`${e.value}${/\n$/.test(e.value)?"​":""}`;b(t),(0,n.default)(o.onChange)&&o.onChange(t)}return(0,t.createEffect)(()=>{if(o.code){let e=o.code.replace(/^\n/,"");try{b(decodeURIComponent(e))}catch(t){b(e)}}else b("")}),(0,t.createEffect)(()=>{!function(e){if(!e.code||!_())return;y.unobserve(c),y.disconnect(),m.test(e.lang)&&!Prism.languages[e.lang]&&(Prism.languages[e.lang]=Prism.languages.diff);let t=Prism.languages[e.lang]||Prism.languages.markup;c.innerHTML=Prism.highlight(e.code,t,e.lang),$(c.getBoundingClientRect().height-(o.toolbar?40:16))}({lang:o.lang||"markup",code:p()})}),(0,t.onMount)(()=>{y.observe(c)}),(0,t.onCleanup)(()=>{y.unobserve(c),y.disconnect()}),[(()=>{let t=g();return(0,e.insert)(t,f,null),(0,e.insert)(t,s.default,null),(0,e.insert)(t,i.style,null),(0,e.insert)(t,()=>(0,l.css)(o.css),null),t})(),(0,e.createComponent)(t.Show,{get when(){return o.edit},get fallback(){return q()},get children(){let t=v(),n=t.firstChild;return(0,e.addEventListener)(n,"input",k,!0),(0,e.insert)(t,q,null),(0,e.effect)(r=>{let i=(0,l.cx)("n-editor",o.class),s=!!o.lineNumber,a=!o.toolbar,c=`${h()}px`;return i!==r._v$3&&(0,e.className)(t,r._v$3=i),s!==r._v$4&&n.classList.toggle("line-numbers",r._v$4=s),a!==r._v$5&&n.classList.toggle("not-toolbar",r._v$5=a),c!==r._v$6&&(null!=(r._v$6=c)?n.style.setProperty("height",c):n.style.removeProperty("height")),r},{_v$3:void 0,_v$4:void 0,_v$5:void 0,_v$6:void 0}),(0,e.effect)(()=>n.value=p()),t}})]}(0,o.customElement)("n-code",{class:void 0,code:void 0,lang:void 0,children:void 0,edit:void 0,toolbar:void 0,css:void 0,lineNumber:void 0,onChange:void 0},(n,r)=>{let l=r.element,o=(0,t.mergeProps)({code:l.textContent,css:l.css,onChange(e){l.dispatchEvent(new CustomEvent("change",{detail:e}))}},n);return(0,t.createEffect)(()=>{l.replaceChildren(),l.removeAttribute("css")}),(0,e.createComponent)(f,o)});const p=f;(0,e.delegateEvents)(["click","input"]);
 //# sourceMappingURL=index.js.map

package/lib/code/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/code/index.tsx"],"sourcesContent":["import { Show, createComponent, createEffect, createSignal, mergeProps, untrack } from 'solid-js';\nimport { isFunction, setClipboard } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport prismCss from '../prism/css';\nimport '../prism/prism.js';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface CodeProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 内容 */\n  code?: string;\n  /** 语言 */\n  lang?: string;\n  /** 显示代码行号 */\n  lineNumber?: boolean;\n  /** 支持编辑 */\n  edit?: boolean;\n  /** 开启代码块工具条 */\n  toolbar?: boolean;\n  /** 编辑修改时的回调 */\n  onChange?: (code: string) => void;\n  children?: JSX.Element;\n}\n\nexport type CodeElement = CustomElement<CodeProps>;\n\nfunction Code(props: CodeProps) {\n  const { baseStyle } = theme;\n  let codeEl: HTMLPreElement;\n  const [code, setCode] = createSignal<string>('');\n  const [hei, setHei] = createSignal(20);\n\n  function copy() {\n    setClipboard(untrack(code), codeEl);\n  }\n  function pre() {\n    return (\n      <pre\n        class={cx(\n          `language-${props.lang}`,\n          props.lineNumber && 'line-numbers',\n          !props.toolbar && 'not-toolbar',\n          !props.edit && props.class,\n        )}\n      >\n        <Show when={props.toolbar}>\n          <div class=\"toolbar\" data-lang={props.lang?.split(' ')[0]}>\n            <button class=\"toolbar-copy\" onClick={copy} />\n          </div>\n        </Show>\n        <code ref={codeEl} class={`language-${props.lang}`} />\n      </pre>\n    );\n  }\n  function change({ target }: { target: HTMLTextAreaElement }) {\n    const c = `${target.value}${/\\n$/.test(target.value) ? '\\u200b' : ''}`;\n\n    setCode(c);\n    if (isFunction(props.onChange)) {\n      props.onChange(c);\n    }\n  }\n  function update(e: { data: string }) {\n    codeEl.innerHTML = e.data;\n    setHei(codeEl.getBoundingClientRect().height - (props.toolbar ? 40 : 16));\n  }\n  function postMessage(opt: { lang?: string; code?: string }) {\n    if (!opt.code) return;\n    const _lang = opt.lang || 'markup';\n\n    if (/^diff-([\\w-]+)/i.test(_lang)) {\n      window.Prism.languages[_lang] = window.Prism.languages.diff;\n    }\n    const language = window.Prism.languages[_lang] || window.Prism.languages.markup;\n\n    update({\n      data: window.Prism.highlight(opt.code, language, _lang),\n    });\n  }\n\n  // const work = new Worker(new URL(\"./worker.ts\", import.meta.url), {\n  //   name: \"wastedTime\",\n  //   /* webpackEntryOptions: { filename: \"workers/[name].js\" } */\n  // });\n  // work.addEventListener('message', update);\n\n  // work.postMessage({\n  //   lang: props.lang,\n  //   code: code(),\n  // });\n  // onCleanup(() => {\n  //   work.terminate();\n  // });\n  createEffect(() => {\n    if (props.code) {\n      const _code = props.code.replace(/^\\n/, '');\n\n      try {\n        setCode(decodeURIComponent(_code));\n      } catch (error) {\n        setCode(_code);\n      }\n    } else {\n      setCode('');\n    }\n  });\n  createEffect(() => {\n    postMessage({\n      lang: props.lang,\n      code: code(),\n    });\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {prismCss()}\n        {style}\n        {css(props.css)}\n      </style>\n      <Show when={props.edit} fallback={pre()}>\n        <div class={cx('n-editor', props.class)}>\n          <textarea\n            value={code()}\n            class={cx(props.lineNumber && 'line-numbers', !props.toolbar && 'not-toolbar')}\n            style={{ height: `${hei()}px` }}\n            onInput={change}\n          />\n          {pre()}\n        </div>\n      </Show>\n    </>\n  );\n}\n\ncustomElement<CodeProps>(\n  'n-code',\n  {\n    class: void 0,\n    code: void 0,\n    lang: void 0,\n    children: void 0,\n    edit: void 0,\n    toolbar: void 0,\n    css: void 0,\n    lineNumber: void 0,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        code: el.textContent,\n        css: el.css,\n        onChange(val: string) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: val,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n      el.removeAttribute('css');\n    });\n\n    return createComponent(Code, props);\n  },\n);\nexport default Code;\n"],"names":["Code","props","codeEl","baseStyle","theme","code","setCode","createSignal","hei","setHei","copy","setClipboard","untrack","pre","Show","toolbar","lang","split","cx","lineNumber","edit","class","change","target","c","value","test","isFunction","onChange","createEffect","_code","replace","decodeURIComponent","error","postMessage","opt","e","_lang","window","Prism","languages","diff","language","markup","data","highlight","innerHTML","getBoundingClientRect","height","prismCss","style","css","customElement","children","_","el","element","mergeProps","textContent","val","dispatchEvent","CustomEvent","detail","replaceChildren","removeAttribute","createComponent"],"rangeMappings":"","mappings":"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"}
+{"version":3,"sources":["../../components/code/index.tsx"],"sourcesContent":["import {\n  Show,\n  createEffect,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  untrack,\n} from 'solid-js';\nimport { isFunction, setClipboard } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport prismCss from '../prism/css';\nimport '../prism/prism.js';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\ndeclare const Prism: {\n  disableWorkerMessageHandler: boolean;\n  languages: Record<string, unknown>;\n  highlight(code: string, langs: unknown, lang: string): string;\n};\n\nexport interface CodeProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 内容 */\n  code?: string;\n  /** 语言 */\n  lang?: string;\n  /** 显示代码行号 */\n  lineNumber?: boolean;\n  /** 支持编辑 */\n  edit?: boolean;\n  /** 开启代码块工具条 */\n  toolbar?: boolean;\n  /** 编辑修改时的回调 */\n  onChange?: (code: string) => void;\n  children?: JSX.Element;\n}\n\nexport type CodeElement = CustomElement<CodeProps>;\n\nconst diffLang = /^diff-([\\w-]+)/i;\n\nfunction Code(props: CodeProps) {\n  const { baseStyle } = theme;\n  let codeEl: HTMLPreElement;\n  const [code, setCode] = createSignal<string>('');\n  const [hei, setHei] = createSignal(20);\n  const [isIntersecting, setIsIntersecting] = createSignal(false);\n  const observer = new IntersectionObserver((entries) => {\n    setIsIntersecting(entries[0].isIntersecting);\n  });\n\n  function copy() {\n    setClipboard(untrack(code), codeEl);\n  }\n  function pre() {\n    return (\n      <pre\n        classList={{\n          [`language-${props.lang}`]: !!props.lang,\n          'line-numbers': props.lineNumber,\n          'not-toolbar': !props.toolbar,\n          [props.class as string]: !props.edit,\n        }}\n      >\n        <Show when={props.toolbar}>\n          <div class=\"toolbar\" data-lang={props.lang?.split(' ')[0]}>\n            <button class=\"toolbar-copy\" onClick={copy} />\n          </div>\n        </Show>\n        <code ref={codeEl} class={`language-${props.lang}`} />\n      </pre>\n    );\n  }\n  function change({ target }: { target: HTMLTextAreaElement }) {\n    const c = `${target.value}${/\\n$/.test(target.value) ? '\\u200b' : ''}`;\n\n    setCode(c);\n    if (isFunction(props.onChange)) {\n      props.onChange(c);\n    }\n  }\n  function postMessage(opt: { lang: string; code?: string }) {\n    if (!opt.code || !isIntersecting()) return;\n    observer.unobserve(codeEl);\n    observer.disconnect();\n    if (diffLang.test(opt.lang) && !Prism.languages[opt.lang]) {\n      Prism.languages[opt.lang] = Prism.languages.diff;\n    }\n    const language = Prism.languages[opt.lang] || Prism.languages.markup;\n\n    codeEl.innerHTML = Prism.highlight(opt.code, language, opt.lang);\n    setHei(codeEl.getBoundingClientRect().height - (props.toolbar ? 40 : 16));\n  }\n\n  // const work = new Worker(new URL(\"./worker.ts\", import.meta.url), {\n  //   name: \"wastedTime\",\n  //   /* webpackEntryOptions: { filename: \"workers/[name].js\" } */\n  // });\n  // work.addEventListener('message', update);\n\n  // work.postMessage({\n  //   lang: props.lang,\n  //   code: code(),\n  // });\n  // onCleanup(() => {\n  //   work.terminate();\n  // });\n  createEffect(() => {\n    if (props.code) {\n      const _code = props.code.replace(/^\\n/, '');\n\n      try {\n        setCode(decodeURIComponent(_code));\n      } catch (error) {\n        setCode(_code);\n      }\n    } else {\n      setCode('');\n    }\n  });\n  createEffect(() => {\n    postMessage({\n      lang: props.lang || 'markup',\n      code: code(),\n    });\n  });\n  onMount(() => {\n    // 开始观察目标元素\n    observer.observe(codeEl);\n  });\n  onCleanup(() => {\n    // 停止观察目标元素\n    observer.unobserve(codeEl);\n    observer.disconnect();\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {prismCss()}\n        {style}\n        {css(props.css)}\n      </style>\n      <Show when={props.edit} fallback={pre()}>\n        <div class={cx('n-editor', props.class)}>\n          <textarea\n            value={code()}\n            classList={{\n              'line-numbers': props.lineNumber,\n              'not-toolbar': !props.toolbar,\n            }}\n            style={{ height: `${hei()}px` }}\n            onInput={change}\n          />\n          {pre()}\n        </div>\n      </Show>\n    </>\n  );\n}\n\ncustomElement<CodeProps>(\n  'n-code',\n  {\n    class: void 0,\n    code: void 0,\n    lang: void 0,\n    children: void 0,\n    edit: void 0,\n    toolbar: void 0,\n    css: void 0,\n    lineNumber: void 0,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        code: el.textContent,\n        css: el.css,\n        onChange(val: string) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: val,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n      el.removeAttribute('css');\n    });\n\n    return <Code {...props} />;\n  },\n);\nexport default Code;\n"],"names":["diffLang","Code","props","codeEl","baseStyle","theme","code","setCode","createSignal","hei","setHei","isIntersecting","setIsIntersecting","observer","IntersectionObserver","entries","copy","setClipboard","untrack","pre","Show","toolbar","lang","split","lineNumber","class","edit","change","target","c","value","test","isFunction","onChange","createEffect","_code","replace","decodeURIComponent","error","postMessage","opt","unobserve","disconnect","Prism","languages","diff","language","markup","innerHTML","highlight","getBoundingClientRect","height","onMount","observe","onCleanup","prismCss","style","css","cx","customElement","children","_","el","element","mergeProps","textContent","val","dispatchEvent","CustomEvent","detail","replaceChildren","removeAttribute"],"rangeMappings":"","mappings":"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"}