neko-ui 2.8.1 → 2.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/es/back-top/index.js +1 -1
- package/es/back-top/index.js.map +1 -1
- package/es/button/index.d.ts +1 -0
- package/es/button/index.js +1 -1
- package/es/button/index.js.map +1 -1
- package/es/capture-screen/index.js +1 -1
- package/es/capture-screen/index.js.map +1 -1
- package/es/carousel/index.js +1 -1
- package/es/carousel/index.js.map +1 -1
- package/es/checkbox/index.js +1 -1
- package/es/checkbox/index.js.map +1 -1
- package/es/code/index.js +1 -1
- package/es/code/index.js.map +1 -1
- package/es/color-palette/index.js +1 -1
- package/es/color-palette/index.js.map +1 -1
- package/es/color-picker/index.js +1 -1
- package/es/color-picker/index.js.map +1 -1
- package/es/cron/index.js +1 -1
- package/es/cron/index.js.map +1 -1
- package/es/date-picker/date.js +1 -1
- package/es/date-picker/date.js.map +1 -1
- package/es/date-picker/dayjs.js +1 -1
- package/es/date-picker/dayjs.js.map +1 -1
- package/es/date-picker/index.js +1 -1
- package/es/date-picker/index.js.map +1 -1
- package/es/date-picker/month.js +1 -1
- package/es/date-picker/month.js.map +1 -1
- package/es/date-picker/panel.js +1 -1
- package/es/date-picker/panel.js.map +1 -1
- package/es/date-picker/year.js +1 -1
- package/es/date-picker/year.js.map +1 -1
- package/es/dropdown/index.js +1 -1
- package/es/dropdown/index.js.map +1 -1
- package/es/img/index.js +1 -1
- package/es/img/index.js.map +1 -1
- package/es/input/index.js +1 -1
- package/es/input/index.js.map +1 -1
- package/es/input-number/index.js +2 -2
- package/es/input-number/index.js.map +1 -1
- package/es/md/index.js +1 -1
- package/es/md/index.js.map +1 -1
- package/es/menu/index.js +1 -1
- package/es/menu/index.js.map +1 -1
- package/es/modal/index.js +1 -1
- package/es/modal/index.js.map +1 -1
- package/es/notification/notification.js +1 -1
- package/es/notification/notification.js.map +1 -1
- package/es/pagination/index.js +1 -1
- package/es/pagination/index.js.map +1 -1
- package/es/popover/index.js +1 -1
- package/es/popover/index.js.map +1 -1
- package/es/provider/index.js +1 -1
- package/es/provider/index.js.map +1 -1
- package/es/radio/index.js +1 -1
- package/es/radio/index.js.map +1 -1
- package/es/segmented/index.js +3 -3
- package/es/segmented/index.js.map +1 -1
- package/es/select/index.js +1 -1
- package/es/select/index.js.map +1 -1
- package/es/skeleton/index.js +3 -3
- package/es/skeleton/index.js.map +1 -1
- package/es/spin/index.js +2 -2
- package/es/spin/index.js.map +1 -1
- package/es/switch/index.js +1 -1
- package/es/switch/index.js.map +1 -1
- package/es/table/index.js +1 -1
- package/es/table/index.js.map +1 -1
- package/es/tabs/index.d.ts +5 -0
- package/es/tabs/index.js +2 -2
- package/es/tabs/index.js.map +1 -1
- package/es/tag/index.js +3 -3
- package/es/tag/index.js.map +1 -1
- package/es/tree/index.js +1 -1
- package/es/tree/index.js.map +1 -1
- package/es/tree/register.js +1 -1
- package/es/tree/register.js.map +1 -1
- package/es/typography/index.js +3 -3
- package/es/typography/index.js.map +1 -1
- package/lib/back-top/index.js +1 -1
- package/lib/back-top/index.js.map +1 -1
- package/lib/button/index.d.ts +1 -0
- package/lib/button/index.js +1 -1
- package/lib/button/index.js.map +1 -1
- package/lib/capture-screen/index.js +1 -1
- package/lib/capture-screen/index.js.map +1 -1
- package/lib/carousel/index.js +1 -1
- package/lib/carousel/index.js.map +1 -1
- package/lib/checkbox/index.js +1 -1
- package/lib/checkbox/index.js.map +1 -1
- package/lib/code/index.js +1 -1
- package/lib/code/index.js.map +1 -1
- package/lib/color-palette/index.js +1 -1
- package/lib/color-palette/index.js.map +1 -1
- package/lib/color-picker/index.js +1 -1
- package/lib/color-picker/index.js.map +1 -1
- package/lib/cron/index.js +1 -1
- package/lib/cron/index.js.map +1 -1
- package/lib/date-picker/date.js +1 -1
- package/lib/date-picker/date.js.map +1 -1
- package/lib/date-picker/dayjs.js +1 -1
- package/lib/date-picker/dayjs.js.map +1 -1
- package/lib/date-picker/index.js +1 -1
- package/lib/date-picker/index.js.map +1 -1
- package/lib/date-picker/month.js +1 -1
- package/lib/date-picker/month.js.map +1 -1
- package/lib/date-picker/panel.js +1 -1
- package/lib/date-picker/panel.js.map +1 -1
- package/lib/date-picker/year.js +1 -1
- package/lib/date-picker/year.js.map +1 -1
- package/lib/dropdown/index.js +1 -1
- package/lib/dropdown/index.js.map +1 -1
- package/lib/img/index.js +1 -1
- package/lib/img/index.js.map +1 -1
- package/lib/input/index.js +1 -1
- package/lib/input/index.js.map +1 -1
- package/lib/input-number/index.js +1 -1
- package/lib/input-number/index.js.map +1 -1
- package/lib/md/index.js +1 -1
- package/lib/md/index.js.map +1 -1
- package/lib/menu/index.js +1 -1
- package/lib/menu/index.js.map +1 -1
- package/lib/modal/index.js +1 -1
- package/lib/modal/index.js.map +1 -1
- package/lib/notification/notification.js +1 -1
- package/lib/notification/notification.js.map +1 -1
- package/lib/pagination/index.js +1 -1
- package/lib/pagination/index.js.map +1 -1
- package/lib/popover/index.js +1 -1
- package/lib/popover/index.js.map +1 -1
- package/lib/provider/index.js +1 -1
- package/lib/provider/index.js.map +1 -1
- package/lib/radio/index.js +1 -1
- package/lib/radio/index.js.map +1 -1
- package/lib/segmented/index.js +1 -1
- package/lib/segmented/index.js.map +1 -1
- package/lib/select/index.js +1 -1
- package/lib/select/index.js.map +1 -1
- package/lib/skeleton/index.js +4 -4
- package/lib/skeleton/index.js.map +1 -1
- package/lib/spin/index.js +1 -1
- package/lib/spin/index.js.map +1 -1
- package/lib/switch/index.js +1 -1
- package/lib/switch/index.js.map +1 -1
- package/lib/table/index.js +1 -1
- package/lib/table/index.js.map +1 -1
- package/lib/tabs/index.d.ts +5 -0
- package/lib/tabs/index.js +2 -2
- package/lib/tabs/index.js.map +1 -1
- package/lib/tag/index.js +2 -2
- package/lib/tag/index.js.map +1 -1
- package/lib/tree/index.js +1 -1
- package/lib/tree/index.js.map +1 -1
- package/lib/tree/register.js +1 -1
- package/lib/tree/register.js.map +1 -1
- package/lib/typography/index.js +1 -1
- package/lib/typography/index.js.map +1 -1
- package/package.json +10 -11
- package/umd/index.js +1 -1
package/README.md
CHANGED
package/es/back-top/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{template as t}from"solid-js/web";import{spread as e}from"solid-js/web";import{mergeProps as o}from"solid-js/web";import"solid-js/web";import{insert as
|
|
1
|
+
import{template as t}from"solid-js/web";import{spread as e}from"solid-js/web";import{mergeProps as o}from"solid-js/web";import"solid-js/web";import{insert as r}from"solid-js/web";import{delegateEvents as i}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{addEventListener as l}from"solid-js/web";let n=t("<style>"),m=t("<div>");import{Show as a,createEffect as c,createMemo as u,createSignal as p,mergeProps as d,onCleanup as g,onMount as b,splitProps as f}from"solid-js";import v from"@moneko/common/lib/getMaxZindex";import y from"@moneko/common/lib/getScrollTop";import h from"@moneko/common/lib/isFunction";import{css as w,cx as k}from"@moneko/css";import{customElement as j}from"solid-element";import{Portal as H}from"solid-js/web";import{style as x}from"./style";import E from"../theme";function L(t){let{baseStyle:i,isDark:c}=E,[j,L]=f(d({target:window,visibilityHeight:400},t),["class","target","mount","css","visibilityHeight"]),[S,T]=p(null),z=u(()=>h(j.target)?j.target():j.target),A=u(()=>{let t=c()?"rgb(255 255 255 / 45%)":"var(--primary-border)";return`:host {--back-top-bg: ${t};}`});function C(){var t;null==(t=z())||t.scrollTo({top:0,behavior:"smooth"})}function D(){!1===S()&&T(null)}function F(t){t.preventDefault();let e=0,o=0,r=z();r&&(e=y(r),o=r.offsetHeight||0);let i=e>o/3||e>j.visibilityHeight;return!!S()!==i&&T(i),!1}return b(()=>{z().addEventListener("scroll",F,!1)}),g(()=>{z().removeEventListener("scroll",F,!1)}),s(a,{get when(){return null!==S()},get children(){return s(H,{useShadow:!0,get mount(){return j.mount},get children(){return[(()=>{let t=n();return r(t,i,null),r(t,A,null),r(t,x,null),r(t,()=>w(j.css),null),t})(),(()=>{let t=m();return l(t,"click",C,!0),l(t,"animationend",D),e(t,o({get class(){return k("back-top",j.class)},get classList(){return{"back-top-out":!1===S()}},get style(){return{"z-index":v().toString()}}},L),!1,!1),t})()]}})}})}j("n-back-top",{class:void 0,css:void 0,visibilityHeight:void 0,mount:void 0,target:void 0},(t,e)=>{let o=e.element;o.mount||(o.style.position="sticky",o.style.bottom="24px",o.style.right="24px",o.style.display="block",o.style.pointerEvents="none");let r=d({css:o.css,visibilityHeight:o.visibilityHeight,mount:o.renderRoot,target:o.target},t);return c(()=>{o.removeAttribute("css")}),s(L,r)});export default L;i(["click"]);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/es/back-top/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/back-top/index.tsx"],"sourcesContent":["import {\n Show,\n
|
|
1
|
+
{"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":["Show","createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","splitProps","getMaxZindex","getScrollTop","isFunction","css","cx","customElement","Portal","style","theme","BackTop","_","baseStyle","isDark","local","other","target","window","visibilityHeight","show","setShow","themeStyle","bg","handleBackTop","scrollTo","top","behavior","exit","handleScrollY","e","preventDefault","scrollTop","offsetHeight","_target","nextShow","Boolean","addEventListener","removeEventListener","mount","class","toString","opt","el","element","position","bottom","right","display","pointerEvents","props","renderRoot","removeAttribute"],"rangeMappings":"","mappings":"+VAAA,QACEA,QAAAA,CAAI,CACJC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,aAAAA,CAAS,CACTC,WAAAA,CAAO,CACPC,cAAAA,CAAU,KACL,UAAW,AAClB,QAASC,MAA8C,iCAAiB,AAAxE,QAAuBC,MAAgC,iCAAiB,AAAxE,QAAqCC,MAAkB,+BAAiB,AACxE,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,UAAAA,CAAM,KAAQ,cAAe,AACtC,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAAOC,MAAW,UAAW,CAoB7B,SAASC,EAAQC,CAAe,EAC9B,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGJ,EAExB,CAACK,EAAOC,EAAM,CAAGf,EADTH,EAAW,CAAEmB,OAAQC,OAAkCC,iBAAkB,GAAI,EAAGP,GACrD,CAAC,QAAS,SAAU,QAAS,MAAO,mBAAmB,EAC1F,CAACQ,EAAMC,EAAQ,CAAGxB,EAA6B,MAC/CoB,EAASrB,EAAW,IAAOQ,EAAWW,EAAME,MAAM,EAAIF,EAAME,MAAM,GAAKF,EAAME,MAAM,EAEnFK,EAAa1B,EAAW,KAC5B,IAAM2B,EAAKT,IAAW,yBAA2B,wBAEjD,MAAO,CAAC,sBAAsB,EAAES,EAAG,EAAE,CAAC,AACxC,GAEA,SAASC,QACPP,SAAAA,EAAAA,MAAAA,EAAUQ,QAAQ,CAAC,CACjBC,IAAK,EACLC,SAAU,QACZ,EACF,CACA,SAASC,IACQ,CAAA,IAAXR,KACFC,EAAQ,KAEZ,CACA,SAASQ,EAAcC,CAAQ,EAC7BA,EAAEC,cAAc,GAChB,IAAIC,EAAY,EACZC,EAAe,EACbC,EAAUjB,IAEZiB,IACFF,EAAY7B,EAAa+B,GACzBD,EAAeC,EAAQD,YAAY,EAAI,GAEzC,IAAME,EAAWH,EAAYC,EAAe,GAAKD,EAAYjB,EAAMI,gBAAgB,CAKnF,MAHIiB,CAAAA,CAAQhB,MAAYe,GACtBd,EAAQc,GAEH,CAAA,CACT,CAQA,OANAnC,EAAQ,KACNiB,IAASoB,gBAAgB,CAAC,SAAUR,EAAe,CAAA,EACrD,GACA9B,EAAU,KACRkB,IAASqB,mBAAmB,CAAC,SAAUT,EAAe,CAAA,EACxD,KAEGnC,qBAAW0B,AAAW,OAAXA,6BACTZ,mCAAwBO,EAAMwB,KAAK,mDAE/B1B,YACAS,YACAb,gBACAJ,EAAIU,EAAMV,GAAG,iDAQLmB,yBALOI,6BACTtB,EAAG,WAAYS,EAAMyB,KAAK,yBACtB,CACT,eAAgBpB,AAAW,CAAA,IAAXA,GAClB,qBAEO,CAAE,UAAWlB,IAAeuC,QAAQ,EAAG,IAC1CzB,sBAKd,CAIAT,EACE,aACA,CACEiC,MAAO,KAAK,EACZnC,IAAK,KAAK,EACVc,iBAAkB,KAAK,EACvBoB,MAAO,KAAK,EACZtB,OAAQ,KAAK,CACf,EACA,CAACL,EAAG8B,KACF,IAAMC,EAAKD,EAAIE,OAAO,AAEjBD,CAAAA,EAAGJ,KAAK,GACXI,EAAGlC,KAAK,CAACoC,QAAQ,CAAG,SACpBF,EAAGlC,KAAK,CAACqC,MAAM,CAAG,OAClBH,EAAGlC,KAAK,CAACsC,KAAK,CAAG,OACjBJ,EAAGlC,KAAK,CAACuC,OAAO,CAAG,QACnBL,EAAGlC,KAAK,CAACwC,aAAa,CAAG,QAE3B,IAAMC,EAAQpD,EACZ,CACEO,IAAKsC,EAAGtC,GAAG,CACXc,iBAAkBwB,EAAGxB,gBAAgB,CACrCoB,MAAOI,EAAGQ,UAAU,CACpBlC,OAAQ0B,EAAG1B,MAAM,AACnB,EACAL,GAMF,OAHAjB,EAAa,KACXgD,EAAGS,eAAe,CAAC,MACrB,KACQzC,EAAYuC,EACtB,EAEF,gBAAevC,CAAQ"}
|
package/es/button/index.d.ts
CHANGED
|
@@ -35,6 +35,7 @@ export interface ButtonProps {
|
|
|
35
35
|
/** 按钮前面添加一个图标 */
|
|
36
36
|
icon?: (() => JSX.Element) | JSX.Element;
|
|
37
37
|
children?: JSX.Element;
|
|
38
|
+
onClick?(e: Event): void;
|
|
38
39
|
}
|
|
39
40
|
export type ButtonElement = CustomElement<ButtonProps>;
|
|
40
41
|
declare function Button(_: ButtonProps): import("solid-js").JSX.Element;
|
package/es/button/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{template as e}from"solid-js/web";import{mergeProps as o}from"solid-js/web";import"solid-js/web";import{insert as t}from"solid-js/web";import{createComponent as i}from"solid-js/web";let l=e("<style>"),
|
|
1
|
+
import{template as e}from"solid-js/web";import{mergeProps as o}from"solid-js/web";import"solid-js/web";import{insert as t}from"solid-js/web";import{createComponent as i}from"solid-js/web";let l=e("<style>"),s=e('<span class="icon" part="icon">'),n=e('<span class="label" part="label">');import{Show as r,createEffect as d,createMemo as c,createSignal as a,mergeProps as m,splitProps as p}from"solid-js";import f from"@moneko/common/lib/isFunction";import{css as u}from"@moneko/css";import{customElement as b}from"solid-element";import{Dynamic as g}from"solid-js/web";import{style as h}from"./style";import v from"../theme";function k(e){let d;let{baseStyle:b}=v,[k,w]=p(m({size:"normal",type:"default"},e),["ghost","fill","circle","dashed","flat","link","danger","children","block","size","type","class","icon","css","disabled","tag"]),[j,y]=a(!1),z=c(()=>f(k.icon)?k.icon():k.icon);return[(()=>{let e=l();return t(e,b,null),t(e,h,null),t(e,()=>u(k.css),null),e})(),i(g,o({ref(e){let o=d;"function"==typeof o?o(e):d=e},get component(){return k.link?"a":k.tag||"button"},class:"btn",get classList(){return{[k.type]:!0,[k.size]:!0,danger:k.danger,block:k.block,fill:k.fill,circle:k.circle,flat:k.flat,dashed:k.dashed,ghost:k.ghost,link:k.link,disabled:k.disabled,without:j()}},part:"button",onClick:function(){k.disabled||y(!0)},onAnimationEnd:function(){y(!1)},get disabled(){return k.disabled},role:"button"},w,{get children(){return[i(r,{get when(){return k.icon},get children(){let e=s();return t(e,z),e}}),(()=>{let e=n();return t(e,()=>k.children),e})()]}}))]}b("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,o)=>{let t=o.element,l=m({css:t.css,children:[...t.childNodes.values()]},e);return d(()=>{t.replaceChildren(),t.removeAttribute("css")}),i(k,l)});export default k;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/es/button/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/button/index.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../components/button/index.tsx"],"sourcesContent":["import { Show, createEffect, createMemo, createSignal, mergeProps, splitProps } from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Dynamic } from 'solid-js/web';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement } from '..';\n\nexport interface ButtonProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 按钮类型 */\n type?: 'success' | 'error' | 'primary' | 'warning' | 'default';\n /** 透明背景 */\n ghost?: boolean;\n /** 实色背景 */\n fill?: boolean;\n /** 圆形按钮 */\n circle?: boolean;\n /** 虚线按钮 */\n dashed?: boolean;\n /** 扁平按钮 */\n flat?: boolean;\n /** 禁用按钮 */\n disabled?: boolean;\n /** 块按钮 */\n block?: boolean;\n /** 链接按钮 */\n link?: boolean;\n /** 危险按钮 */\n danger?: boolean;\n /** 自定义 tag\n * @since 2.1.0\n */\n tag?: string;\n /** 按钮尺寸\n * @default 'normal'\n */\n size?: BasicConfig['size'];\n /** 按钮前面添加一个图标 */\n icon?: (() => JSX.Element) | JSX.Element;\n children?: JSX.Element;\n onClick?(e: Event): void;\n}\nexport type ButtonElement = CustomElement<ButtonProps>;\n\nfunction Button(_: ButtonProps) {\n const { baseStyle } = theme;\n const _props = mergeProps({ size: 'normal', type: 'default' }, _);\n const [local, other] = splitProps(_props, [\n 'ghost',\n 'fill',\n 'circle',\n 'dashed',\n 'flat',\n 'link',\n 'danger',\n 'children',\n 'block',\n 'size',\n 'type',\n 'class',\n 'icon',\n 'css',\n 'disabled',\n 'tag',\n ]);\n let ref: HTMLButtonElement | undefined;\n const [animating, setAnimating] = createSignal(false);\n\n function handleClick() {\n if (!local.disabled) {\n setAnimating(true);\n }\n }\n function handleAnimationEnd() {\n setAnimating(false);\n }\n const icon = createMemo(() => (isFunction(local.icon) ? local.icon() : local.icon));\n\n return (\n <>\n <style>\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":["Show","createEffect","createMemo","createSignal","mergeProps","splitProps","isFunction","css","customElement","Dynamic","style","theme","Button","_","ref","baseStyle","local","other","size","type","animating","setAnimating","icon","link","tag","danger","block","fill","circle","flat","dashed","ghost","disabled","without","children","class","opt","el","element","props","childNodes","values","replaceChildren","removeAttribute"],"rangeMappings":"","mappings":"8RAAA,QAASA,QAAAA,CAAI,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAChG,QAASC,MAAkB,+BAAiB,AAC5C,QAASC,OAAAA,CAAG,KAAQ,aAAc,AAClC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,WAAAA,CAAO,KAAQ,cAAe,AACvC,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAAOC,MAAW,UAAW,CA2C7B,SAASC,EAAOC,CAAc,MAqBxBC,EApBJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGJ,EAEhB,CAACK,EAAOC,EAAM,CAAGZ,EADRD,EAAW,CAAEc,KAAM,SAAUC,KAAM,SAAU,EAAGN,GACrB,CACxC,QACA,OACA,SACA,SACA,OACA,OACA,SACA,WACA,QACA,OACA,OACA,QACA,OACA,MACA,WACA,MACD,EAEK,CAACO,EAAWC,EAAa,CAAGlB,EAAa,CAAA,GAUzCmB,EAAOpB,EAAW,IAAOI,EAAWU,EAAMM,IAAI,EAAIN,EAAMM,IAAI,GAAKN,EAAMM,IAAI,EAEjF,kCAGOP,YACAL,gBACAH,EAAIS,EAAMT,GAAG,gBAEfE,kBACMK,4BAAAA,4BACME,EAAMO,IAAI,CAAG,IAAMP,EAAMQ,GAAG,EAAI,4CAEhC,CACT,CAACR,EAAMG,IAAI,CAAC,CAAE,CAAA,EACd,CAACH,EAAME,IAAI,CAAC,CAAE,CAAA,EACdO,OAAQT,EAAMS,MAAM,CACpBC,MAAOV,EAAMU,KAAK,CAClBC,KAAMX,EAAMW,IAAI,CAChBC,OAAQZ,EAAMY,MAAM,CACpBC,KAAMb,EAAMa,IAAI,CAChBC,OAAQd,EAAMc,MAAM,CACpBC,MAAOf,EAAMe,KAAK,CAClBR,KAAMP,EAAMO,IAAI,CAChBS,SAAUhB,EAAMgB,QAAQ,CACxBC,QAASb,GACX,yBAlCN,WACOJ,EAAMgB,QAAQ,EACjBX,EAAa,CAAA,EAEjB,iBACA,WACEA,EAAa,CAAA,EACf,wBA+BgBL,EAAMgB,QAAQ,iBAEpBf,2BAEHjB,qBAAWgB,EAAMM,IAAI,sCAEjBA,uCAIFN,EAAMkB,QAAQ,aAKzB,CAEA1B,EACE,WACA,CACE2B,MAAO,KAAK,EACZ5B,IAAK,KAAK,EACVY,KAAM,KAAK,EACXY,MAAO,KAAK,EACZJ,KAAM,KAAK,EACXC,OAAQ,KAAK,EACbE,OAAQ,KAAK,EACbD,KAAM,KAAK,EACXG,SAAU,KAAK,EACfN,MAAO,KAAK,EACZH,KAAM,KAAK,EACXE,OAAQ,KAAK,EACbP,KAAM,KAAK,EACXI,KAAM,KAAK,EACXE,IAAK,KAAK,CACZ,EACA,CAACX,EAAGuB,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBC,EAAQnC,EACZ,CACEG,IAAK8B,EAAG9B,GAAG,CACX2B,SAAU,IAAIG,EAAGG,UAAU,CAACC,MAAM,GAAG,AACvC,EACA5B,GAQF,OALAZ,EAAa,KACXoC,EAAGK,eAAe,GAClBL,EAAGM,eAAe,CAAC,MACrB,KAEQ/B,EAAW2B,EACrB,EAEF,gBAAe3B,CAAO"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function e(e,r,t,o,n,a,i){try{var l=e[a](i),s=l.value}catch(e){t(e);return}l.done?r(s):Promise.resolve(s).then(o,n)}function r(){return(r=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}import{use as t}from"solid-js/web";import{template as o}from"solid-js/web";import{spread as n}from"solid-js/web";import{mergeProps as a}from"solid-js/web";import{memo as i}from"solid-js/web";import{insert as l}from"solid-js/web";import{getOwner as s}from"solid-js/web";import{effect as c}from"solid-js/web";import{delegateEvents as d}from"solid-js/web";import{createComponent as p}from"solid-js/web";import{
|
|
1
|
+
function e(e,r,t,o,n,a,i){try{var l=e[a](i),s=l.value}catch(e){t(e);return}l.done?r(s):Promise.resolve(s).then(o,n)}function r(){return(r=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}import{use as t}from"solid-js/web";import{template as o}from"solid-js/web";import{spread as n}from"solid-js/web";import{mergeProps as a}from"solid-js/web";import{memo as i}from"solid-js/web";import{insert as l}from"solid-js/web";import{getOwner as s}from"solid-js/web";import{effect as c}from"solid-js/web";import{delegateEvents as d}from"solid-js/web";import{createComponent as p}from"solid-js/web";import{addEventListener as u}from"solid-js/web";let v=o("<style>"),m=o('<n-button class="btn">',!0,!1),f=o('<n-button type="error" class="btn">',!0,!1),w=o('<div class="record"><n-button class="btn"><span>',!0,!1),b=o('<div class="view"><span></span><video autoplay>'),R=o('<div><div class="controller"><n-button class="btn">',!0,!1);import{Show as h,createEffect as g,createMemo as C,createSignal as S,mergeProps as E,onCleanup as x,splitProps as T,untrack as y}from"solid-js";import j from"@moneko/common/lib/downloadBlob";import $ from"@moneko/common/lib/isFunction";import{css as _,cx as k}from"@moneko/css";import{customElement as D}from"solid-element";import{style as O}from"./style";import"../button";import A from"../theme";let L={video:!0,audio:{echoCancellation:!0,noiseSuppression:!0,sampleRate:44100}},P={inactive:"primary",paused:"warning",recording:"success"};function B(o){let d;let{baseStyle:D}=A,[B,M]=T(E({options:L,captureScreenText:"捕获屏幕",stopCaptureText:"停止捕获",startRecorderText:"开始录制",stopRecorderText:"停止录制",pausedRecorderText:"暂停录制",recorderingText:"录制中",onErrorRecorder:null},o),["options","preview","controls","recorder","filename","captureScreenText","stopCaptureText","startRecorderText","stopRecorderText","pausedRecorderText","recorderingText","onErrorRecorder","onStopRecorder","onStartRecorder","onStopCapture","onStartCapture","onRecorderDataAvailable","onErrorCapture","onSaveRecorder","class","css"]),F=[],[I,q]=S(null),[z,G]=S(null),[H,J]=S("inactive");function K(){let e=y(I);if(e){switch($(B.onStartRecorder)&&B.onStartRecorder(e.state),e.state){case"inactive":e.start();break;case"paused":e.resume();break;default:e.pause()}J(e.state)}}function N(e){null==F||F.push(e.data),null==B.onRecorderDataAvailable||B.onRecorderDataAvailable.call(B,e)}function Q(){let e=y(I);e&&("inactive"!==e.state&&e.stop(),J(e.state)),null==B.onStopRecorder||B.onStopRecorder.call(B)}function U(){if(!(null==F?void 0:F.length))return;let e=new Blob(F,{type:"video/webm"}),r=B.filename||new Date().toISOString(),t=`${r}.webm`;null==F||F.splice(0),B.onSaveRecorder&&B.onSaveRecorder(e,t),j(e,t)}function V(){Q();let e=y(z);if(e){let r=e.getTracks();null==r||r.forEach(e=>e.stop()),G(null)}null==B.onStopCapture||B.onStopCapture.call(B)}function W(){return X.apply(this,arguments)}function X(){var t;return t=function*(){V();try{let e=yield navigator.mediaDevices.getDisplayMedia(r({},L,B.options));e&&(e.addEventListener("inactive",V,!1),G(e)),null==B.onStartCapture||B.onStartCapture.call(B,e)}catch(e){null==B.onErrorCapture||B.onErrorCapture.call(B,e)}},(X=function(){var r=this,o=arguments;return new Promise(function(n,a){var i=t.apply(r,o);function l(r){e(i,n,a,l,s,"next",r)}function s(r){e(i,n,a,l,s,"throw",r)}l(void 0)})}).apply(this,arguments)}g(()=>{let e=z();B.preview&&d&&e&&(d.srcObject=e)}),g(()=>{let e=z();if(null==e?void 0:e.active){let r=new MediaRecorder(e);r.onstop=U,r.onerror=B.onErrorRecorder,r.ondataavailable=N,q(r)}else q(null)}),x(()=>{let e=y(I);e&&(null==e?void 0:e.state)!=="inactive"&&e.stop();let r=y(z);r&&r.getTracks().forEach(e=>e.stop())});let Y=C(()=>({paused:B.pausedRecorderText,recording:B.recorderingText,inactive:B.startRecorderText})[H()]);return[(()=>{let e=v();return l(e,D,null),l(e,O,null),l(e,()=>_(B.css),null),e})(),(()=>{let e=R(),r=e.firstChild,o=r.firstChild;return n(e,a({get class(){return k("capture-screen",B.class)}},M),!1,!0),u(o,"click",W,!0),o._$owner=s(),l(o,()=>B.captureScreenText),l(r,p(h,{get when(){return z()},get children(){return[(()=>{let e=m();return u(e,"click",V,!0),e.danger=!0,e._$owner=s(),l(e,()=>B.stopCaptureText),e})(),p(h,{get when(){return B.recorder},get children(){let e=w(),r=e.firstChild,t=r.firstChild;return u(r,"click",K,!0),r._$owner=s(),l(t,Y),l(e,p(h,{get when(){return"inactive"!==H()},get children(){let e=f();return u(e,"click",Q,!0),e._$owner=s(),l(e,()=>B.stopRecorderText),e}}),null),c(()=>r.type=P[H()]),e}})]}}),null),l(e,p(h,{get when(){return i(()=>!!B.preview)()&&z()},get children(){let e=b(),r=e.firstChild,o=r.nextSibling,n=d;return"function"==typeof n?t(n,o):d=o,c(e=>{let t=!("recording"!==H()),n=!("paused"!==H()),a=B.controls&&null!==z();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}),e}}),null),e})()]}D("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 t=r.element;return p(B,E({onErrorRecorder(e){t.dispatchEvent(new CustomEvent("errorrecorder",{detail:e}))},onStopRecorder(){t.dispatchEvent(new CustomEvent("stoprecorder",{detail:void 0}))},onStartRecorder(e){t.dispatchEvent(new CustomEvent("startrecorder",{detail:e}))},onRecorderDataAvailable(e){t.dispatchEvent(new CustomEvent("recorderdataavailable",{detail:e}))},onErrorCapture(e){t.dispatchEvent(new CustomEvent("errorcapture",{detail:e}))},onStopCapture(){t.dispatchEvent(new CustomEvent("stopcapture",{detail:void 0}))},onStartCapture(e){t.dispatchEvent(new CustomEvent("startcapture",{detail:e}))},onSaveRecorder(e,r){t.dispatchEvent(new CustomEvent("saverecorder",{detail:[e,r]}))}},e))});export default B;d(["click"]);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +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":["Show","createComponent","createEffect","createMemo","createSignal","mergeProps","onCleanup","splitProps","untrack","downloadBlob","isFunction","css","cx","customElement","style","theme","displayMediaOptions","video","audio","echoCancellation","noiseSuppression","sampleRate","btnStatusDic","inactive","paused","recording","CaptureScreen","_","videoElem","baseStyle","local","props","options","captureScreenText","stopCaptureText","startRecorderText","stopRecorderText","pausedRecorderText","recorderingText","onErrorRecorder","chunks","mediaRecorder","setMediaRecorder","mediaStream","setMediaStream","recordState","setRecordState","handleStartRecorder","mr","onStartRecorder","state","start","resume","pause","handleRecorderDataAvailable","e","push","data","onRecorderDataAvailable","stopRecorder","stop","onStopRecorder","handleSaveRecorder","length","blob","Blob","type","name","filename","Date","toISOString","fileName","splice","onSaveRecorder","stopCapture","ms","tracks","getTracks","forEach","track","onStopCapture","startCapture","stream","navigator","mediaDevices","getDisplayMedia","addEventListener","onStartCapture","err","onErrorCapture","preview","srcObject","active","recorderInstance","MediaRecorder","onstop","onerror","ondataavailable","recorderText","class","recorder","controls","opt","el","element","dispatchEvent","CustomEvent","detail"],"rangeMappings":"","mappings":"ykCAAA,QACEA,QAAAA,CAAI,CACJC,mBAAAA,CAAe,CACfC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,aAAAA,CAAS,CACTC,cAAAA,CAAU,CACVC,WAAAA,CAAO,KACF,UAAW,AAClB,QAASC,MAAgC,iCAAiB,AAA1D,QAAuBC,MAAkB,+BAAiB,AAC1D,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,OAAO,WAAY,AACnB,QAAOC,MAAW,UAAW,CAgE7B,IAAMC,EAA8C,CAClDC,MAAO,CAAA,EACPC,MAAO,CACLC,iBAAkB,CAAA,EAClBC,iBAAkB,CAAA,EAClBC,WAAY,KACd,CACF,EAEMC,EAAkF,CACtFC,SAAU,UACVC,OAAQ,UACRC,UAAW,SACb,EAEA,SAASC,EAAcC,CAAqB,MAsCtCC,EArCJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGd,EAchB,CAACe,EAAOC,EAAM,CAAGxB,EAbRF,EACb,CACE2B,QAAShB,EACTiB,kBAAmB,OACnBC,gBAAiB,OACjBC,kBAAmB,OACnBC,iBAAkB,OAClBC,mBAAoB,OACpBC,gBAAiB,MACjBC,gBAAiB,IACnB,EACAZ,GAEwC,CACxC,UACA,UACA,WACA,WACA,WACA,oBACA,kBACA,oBACA,mBACA,qBACA,kBACA,kBACA,iBACA,kBACA,gBACA,iBACA,0BACA,iBACA,iBACA,QACA,MACD,EAEKa,EAAiB,EAAE,CACnB,CAACC,EAAeC,EAAiB,CAAGtC,EAAmC,MACvE,CAACuC,EAAaC,EAAe,CAAGxC,EAAiC,MACjE,CAACyC,EAAaC,EAAe,CAAG1C,EAAqC,YAG3E,SAAS2C,IACP,IAAMC,EAAKxC,EAAQiC,GAEnB,GAAIO,EAAI,CAIN,OAHItC,EAAWoB,EAAMmB,eAAe,GAClCnB,EAAMmB,eAAe,CAACD,EAAGE,KAAK,EAExBF,EAAGE,KAAK,EACd,IAAK,WACHF,EAAGG,KAAK,GACR,KACF,KAAK,SACHH,EAAGI,MAAM,GACT,KAEF,SACEJ,EAAGK,KAAK,EAEZ,CACAP,EAAeE,EAAGE,KAAK,CACzB,CACF,CACA,SAASI,EAA4BC,CAAkC,QACrEf,GAAAA,EAAQgB,IAAI,CAACD,EAAEE,IAAI,QACnB3B,EAAM4B,uBAAuB,EAA7B5B,EAAM4B,uBAAuB,MAA7B5B,EAAgCyB,EAClC,CAEA,SAASI,IACP,IAAMX,EAAKxC,EAAQiC,GAGfO,IACe,aAAbA,EAAGE,KAAK,EACVF,EAAGY,IAAI,GAETd,EAAeE,EAAGE,KAAK,SAEzBpB,EAAM+B,cAAc,EAApB/B,EAAM+B,cAAc,MAApB/B,EACF,CACA,SAASgC,IACP,GAAI,QAACtB,SAAAA,EAAQuB,MAAM,EAAE,OAErB,IAAMC,EAAa,IAAIC,KAAKzB,EAAQ,CAClC0B,KAAM,YACR,GACMC,EAAOrC,EAAMsC,QAAQ,EAAI,IAAIC,OAAOC,WAAW,GAC/CC,EAAW,CAAC,EAAEJ,EAAK,KAAK,CAAC,OAE/B3B,GAAAA,EAAQgC,MAAM,CAAC,GACX1C,EAAM2C,cAAc,EACtB3C,EAAM2C,cAAc,CAACT,EAAMO,GAG7B9D,EAAauD,EAAMO,EACrB,CAGA,SAASG,IAEPf,IACA,IAAMgB,EAAKnE,EAAQmC,GAEnB,GAAIgC,EAAI,CACN,IAAMC,EAASD,EAAGE,SAAS,SAE3BD,GAAAA,EAAQE,OAAO,CAAC,AAACC,GAA4BA,EAAMnB,IAAI,IACvDhB,EAAe,KACjB,OACAd,EAAMkD,aAAa,EAAnBlD,EAAMkD,aAAa,MAAnBlD,EACF,UAGemD,WAAAA,iCAAAA,mBAAf,YACEP,IACA,GAAI,CACF,IAAMQ,EAAS,MAAMC,UAAUC,YAAY,CAACC,eAAe,CAAC,KACvDrE,EACAc,EAAME,OAAO,GAGdkD,IAEFA,EAAOI,gBAAgB,CAAC,WAAYZ,EAAa,CAAA,GACjD9B,EAAesC,UAEjBpD,EAAMyD,cAAc,EAApBzD,EAAMyD,cAAc,MAApBzD,EAAuBoD,EACzB,CAAE,MAAOM,EAAK,OACZ1D,EAAM2D,cAAc,EAApB3D,EAAM2D,cAAc,MAApB3D,EAAuB0D,EACzB,CACF,GAjBeP,qMAmBf/E,EAAa,KACX,IAAMyE,EAAKhC,GAEPb,CAAAA,EAAM4D,OAAO,EAAI9D,GAAa+C,GAChC/C,CAAAA,EAAU+D,SAAS,CAAGhB,CAAC,CAE3B,GAEAzE,EAAa,KACX,IAAMyE,EAAKhC,IAEX,SAAIgC,SAAAA,EAAIiB,MAAM,CAAE,CACd,IAAMC,EAAmB,IAAIC,cAAcnB,EAE3CkB,CAAAA,EAAiBE,MAAM,CAAGjC,EAC1B+B,EAAiBG,OAAO,CAAGlE,EAAMS,eAAe,CAEhDsD,EAAiBI,eAAe,CAAG3C,EACnCZ,EAAiBmD,EACnB,MACEnD,EAAiB,KAErB,GAEApC,EAAU,KACR,IAAM0C,EAAKxC,EAAQiC,GAGfO,GAAMA,OAAAA,SAAAA,EAAIE,KAAK,IAAK,YACtBF,EAAGY,IAAI,GAET,IAAMe,EAAKnE,EAAQmC,GAEfgC,GAGFC,AAFeD,EAAGE,SAAS,GAEpBC,OAAO,CAAC,AAACC,GAA4BA,EAAMnB,IAAI,GAE1D,GACA,IAAMsC,EAAe/F,EAAW,IACvB,CAAA,CACLqB,OAAQM,EAAMO,kBAAkB,CAChCZ,UAAWK,EAAMQ,eAAe,CAChCf,SAAUO,EAAMK,iBAAiB,AACnC,CAAA,CAAC,CAACU,IAAc,EAGlB,kCAGOhB,YACAf,gBACAH,EAAImB,EAAMnB,GAAG,6FAEJC,EAAG,iBAAkBkB,EAAMqE,KAAK,IAAOpE,sBAE5BkD,4BAChBnD,EAAMG,iBAAiB,QAEzBjC,qBAAW2C,8DAEyB+B,eAAf,CAAA,wBACf5C,EAAMI,eAAe,UAEvBlC,qBAAW8B,EAAMsE,QAAQ,4EAIXrD,wBAGFmD,SAERlG,oBAAW6C,AAAkB,aAAlBA,iDACsBc,4BAC7B7B,EAAMM,gBAAgB,0BARnBd,CAAY,CAACuB,IAAc,uBAgB5C7C,qBAAW8B,QAAAA,EAAM4D,OAAO,KAAI/C,+DAQbf,oCAAAA,gBALHhB,EACLiC,AAAkB,cAAlBA,KAAiC,YACjCA,AAAkB,WAAlBA,KAA8B,YAGQf,EAAMuE,QAAQ,EAAI1D,AAAkB,OAAlBA,mHAMxE,CAEA9B,EACE,mBACA,CACEsF,MAAO,KAAK,EACZxF,IAAK,KAAK,EACVqB,QAAS,KAAK,EACd0D,QAAS,KAAK,EACdW,SAAU,KAAK,EACfD,SAAU,KAAK,EACfhC,SAAU,KAAK,EACfnC,kBAAmB,KAAK,EACxBC,gBAAiB,KAAK,EACtBC,kBAAmB,KAAK,EACxBC,iBAAkB,KAAK,EACvBC,mBAAoB,KAAK,EACzBC,gBAAiB,KAAK,EACtBC,gBAAiB,KAAK,EACtBsB,eAAgB,KAAK,EACrBZ,gBAAiB,KAAK,EACtBS,wBAAyB,KAAK,EAC9B+B,eAAgB,KAAK,EACrBT,cAAe,KAAK,EACpBO,eAAgB,KAAK,EACrBd,eAAgB,KAAK,CACvB,EACA,CAAC9C,EAAG2E,KACF,IAAMC,EAAKD,EAAIE,OAAO,CA+DtB,OAAOvG,EAAgByB,EA9DTrB,EACZ,CACEkC,gBAAgBgB,CAAQ,EACtBgD,EAAGE,aAAa,CACd,IAAIC,YAAY,gBAAiB,CAC/BC,OAAQpD,CACV,GAEJ,EACAM,iBACE0C,EAAGE,aAAa,CACd,IAAIC,YAAY,eAAgB,CAC9BC,OAAQ,KAAK,CACf,GAEJ,EACA1D,gBAAgBC,CAA6B,EAC3CqD,EAAGE,aAAa,CACd,IAAIC,YAAY,gBAAiB,CAC/BC,OAAQzD,CACV,GAEJ,EACAQ,wBAAwBH,CAAkC,EACxDgD,EAAGE,aAAa,CACd,IAAIC,YAAY,wBAAyB,CACvCC,OAAQpD,CACV,GAEJ,EACAkC,eAAelC,CAAU,EACvBgD,EAAGE,aAAa,CACd,IAAIC,YAAY,eAAgB,CAC9BC,OAAQpD,CACV,GAEJ,EACAyB,gBACEuB,EAAGE,aAAa,CACd,IAAIC,YAAY,cAAe,CAC7BC,OAAQ,KAAK,CACf,GAEJ,EACApB,eAAeL,CAAoB,EACjCqB,EAAGE,aAAa,CACd,IAAIC,YAAY,eAAgB,CAC9BC,OAAQzB,CACV,GAEJ,EACAT,eAAeT,CAAU,CAAEO,CAAgB,EACzCgC,EAAGE,aAAa,CACd,IAAIC,YAAY,eAAgB,CAC9BC,OAAQ,CAAC3C,EAAMO,EAAS,AAC1B,GAEJ,CACF,EACA5C,GAIJ,EAGF,gBAAeD,CAAc"}
|
|
1
|
+
{"version":3,"sources":["../../components/capture-screen/index.tsx"],"sourcesContent":["import {\n Show,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n onCleanup,\n splitProps,\n untrack,\n} from 'solid-js';\nimport { downloadBlob, isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport '../button';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\ndeclare interface MediaRecorderDataAvailableEvent extends Event {\n /** MediaRecorderDataAvailableEvent */\n data: Any;\n}\n\nexport interface CaptureScreenProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** MediaStreamConstraints */\n options?: MediaStreamConstraints;\n /** 是否预览 */\n preview?: boolean;\n /** 预览时是否显示控制器 */\n controls?: boolean;\n /** 录制时配置项 */\n recorder?: boolean;\n /** 录制文件名称 */\n filename?: string;\n /** 捕获屏幕按钮文字 */\n captureScreenText?: string;\n /** 停止捕获按钮文字 */\n stopCaptureText?: string;\n /** 开始录制按钮文字 */\n startRecorderText?: string;\n /** 停止录制按钮文字 */\n stopRecorderText?: string;\n /** 暂停录制按钮文字 */\n pausedRecorderText?: string;\n /** 录制中按钮文字 */\n recorderingText?: string;\n /** 录制错误回调方法 */\n onErrorRecorder?: (e: Event) => void;\n /** 停止录制回调方法 */\n onStopRecorder?: () => void;\n /** 开始录制回调方法 */\n onStartRecorder?: (state: MediaRecorder['state']) => void;\n /** 记录媒体时触发 */\n onRecorderDataAvailable?: (e: MediaRecorderDataAvailableEvent) => void;\n /** 捕获屏幕错误回调方法 */\n onErrorCapture?: (err: unknown) => void;\n /** 停止捕获屏幕回调方法 */\n onStopCapture?: () => void;\n /** 开始捕获屏幕回调方法 */\n onStartCapture?: (stream?: MediaStream) => void;\n /** 自定义保存录制文件方法 */\n onSaveRecorder?: (blob: Blob, fileName: string) => void;\n}\nexport type CaptureScreenElement = CustomElement<\n CaptureScreenProps,\n | 'onErrorRecorder'\n | 'onStopRecorder'\n | 'onStartRecorder'\n | 'onRecorderDataAvailable'\n | 'onErrorCapture'\n | 'onStopCapture'\n | 'onStartCapture'\n | 'onSaveRecorder'\n>;\n\nconst displayMediaOptions: MediaStreamConstraints = {\n video: true,\n audio: {\n echoCancellation: true,\n noiseSuppression: true,\n sampleRate: 44100,\n },\n};\n\nconst btnStatusDic: Record<MediaRecorder['state'], 'primary' | 'warning' | 'success'> = {\n inactive: 'primary',\n paused: 'warning',\n recording: 'success',\n};\n\nfunction CaptureScreen(_: CaptureScreenProps) {\n const { baseStyle } = theme;\n const _props = mergeProps(\n {\n options: displayMediaOptions,\n captureScreenText: '捕获屏幕',\n stopCaptureText: '停止捕获',\n startRecorderText: '开始录制',\n stopRecorderText: '停止录制',\n pausedRecorderText: '暂停录制',\n recorderingText: '录制中',\n onErrorRecorder: null,\n },\n _,\n );\n const [local, props] = splitProps(_props, [\n 'options',\n 'preview',\n 'controls',\n 'recorder',\n 'filename',\n 'captureScreenText',\n 'stopCaptureText',\n 'startRecorderText',\n 'stopRecorderText',\n 'pausedRecorderText',\n 'recorderingText',\n 'onErrorRecorder',\n 'onStopRecorder',\n 'onStartRecorder',\n 'onStopCapture',\n 'onStartCapture',\n 'onRecorderDataAvailable',\n 'onErrorCapture',\n 'onSaveRecorder',\n 'class',\n 'css',\n ]);\n let videoElem: HTMLVideoElement | undefined;\n const chunks: Blob[] = [];\n const [mediaRecorder, setMediaRecorder] = createSignal<MediaRecorder | null>(null);\n const [mediaStream, setMediaStream] = createSignal<MediaStream | null>(null);\n const [recordState, setRecordState] = createSignal<MediaRecorder['state']>('inactive');\n\n // 开始录制\n function handleStartRecorder() {\n const mr = untrack(mediaRecorder);\n\n if (mr) {\n if (isFunction(local.onStartRecorder)) {\n local.onStartRecorder(mr.state);\n }\n switch (mr.state) {\n case 'inactive': // 不活跃\n mr.start();\n break;\n case 'paused': // 暂停\n mr.resume();\n break;\n // case 'recording': // 录制中\n default:\n mr.pause();\n break;\n }\n setRecordState(mr.state);\n }\n }\n function handleRecorderDataAvailable(e: MediaRecorderDataAvailableEvent) {\n chunks?.push(e.data as Blob);\n local.onRecorderDataAvailable?.(e);\n }\n // 停止录制\n function stopRecorder() {\n const mr = untrack(mediaRecorder);\n\n // 未录制时不需要停止\n if (mr) {\n if (mr.state !== 'inactive') {\n mr.stop();\n }\n setRecordState(mr.state);\n }\n local.onStopRecorder?.();\n }\n function handleSaveRecorder() {\n if (!chunks?.length) return;\n // 将录制内容保存到本地\n const blob: Blob = new Blob(chunks, {\n type: 'video/webm',\n });\n const name = local.filename || new Date().toISOString();\n const fileName = `${name}.webm`;\n\n chunks?.splice(0);\n if (local.onSaveRecorder) {\n local.onSaveRecorder(blob, fileName);\n }\n // 保存文件\n downloadBlob(blob, fileName);\n }\n\n // 停止捕获屏幕\n function stopCapture() {\n // 如果在录制则先停止\n stopRecorder();\n const ms = untrack(mediaStream);\n\n if (ms) {\n const tracks = ms.getTracks();\n\n tracks?.forEach((track: MediaStreamTrack) => track.stop());\n setMediaStream(null);\n }\n local.onStopCapture?.();\n }\n\n // 开始捕获屏幕\n async function startCapture() {\n stopCapture();\n try {\n const stream = await navigator.mediaDevices.getDisplayMedia({\n ...displayMediaOptions,\n ...local.options,\n });\n\n if (stream) {\n // 监听停止捕获屏幕\n stream.addEventListener('inactive', stopCapture, false);\n setMediaStream(stream);\n }\n local.onStartCapture?.(stream);\n } catch (err) {\n local.onErrorCapture?.(err);\n }\n }\n\n createEffect(() => {\n const ms = mediaStream();\n\n if (local.preview && videoElem && ms) {\n videoElem.srcObject = ms;\n }\n });\n\n createEffect(() => {\n const ms = mediaStream();\n\n if (ms?.active) {\n const recorderInstance = new MediaRecorder(ms);\n\n recorderInstance.onstop = handleSaveRecorder;\n recorderInstance.onerror = local.onErrorRecorder;\n // 每次timeslice记录毫秒级媒体时(或未记录整个媒体时,如果timeslice未指定)定期触发\n recorderInstance.ondataavailable = handleRecorderDataAvailable;\n setMediaRecorder(recorderInstance);\n } else {\n setMediaRecorder(null);\n }\n });\n\n onCleanup(() => {\n const mr = untrack(mediaRecorder);\n\n // 未录制时不需要停止\n if (mr && mr?.state !== 'inactive') {\n mr.stop();\n }\n const ms = untrack(mediaStream);\n\n if (ms) {\n const tracks = ms.getTracks();\n\n tracks.forEach((track: MediaStreamTrack) => track.stop());\n }\n });\n const recorderText = createMemo(() => {\n return {\n paused: local.pausedRecorderText,\n recording: local.recorderingText,\n inactive: local.startRecorderText,\n }[recordState()];\n });\n\n return (\n <>\n <style>\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":["Show","createEffect","createMemo","createSignal","mergeProps","onCleanup","splitProps","untrack","downloadBlob","isFunction","css","cx","customElement","style","theme","displayMediaOptions","video","audio","echoCancellation","noiseSuppression","sampleRate","btnStatusDic","inactive","paused","recording","CaptureScreen","_","videoElem","baseStyle","local","props","options","captureScreenText","stopCaptureText","startRecorderText","stopRecorderText","pausedRecorderText","recorderingText","onErrorRecorder","chunks","mediaRecorder","setMediaRecorder","mediaStream","setMediaStream","recordState","setRecordState","handleStartRecorder","mr","onStartRecorder","state","start","resume","pause","handleRecorderDataAvailable","e","push","data","onRecorderDataAvailable","stopRecorder","stop","onStopRecorder","handleSaveRecorder","length","blob","Blob","type","name","filename","Date","toISOString","fileName","splice","onSaveRecorder","stopCapture","ms","tracks","getTracks","forEach","track","onStopCapture","startCapture","stream","navigator","mediaDevices","getDisplayMedia","addEventListener","onStartCapture","err","onErrorCapture","preview","srcObject","active","recorderInstance","MediaRecorder","onstop","onerror","ondataavailable","recorderText","class","recorder","controls","opt","el","element","dispatchEvent","CustomEvent","detail"],"rangeMappings":"","mappings":"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"}
|
package/es/carousel/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{template as e}from"solid-js/web";import{setAttribute as t}from"solid-js/web";import{insert as
|
|
1
|
+
import{template as e}from"solid-js/web";import{setAttribute as t}from"solid-js/web";import{insert as l}from"solid-js/web";import{getOwner as i}from"solid-js/web";import{effect as o}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as r}from"solid-js/web";import{className as s}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=e("<style>"),c=e('<section class="header">'),m=e('<div class="dots">'),v=e('<section><section class="list"><div class="item"></div><div class="item"></div><div class="item"></div></section><slot name="header"></slot><div class="prev"></div><div class="next">'),f=e('<i class="dot">');import{Index as u,Show as h,createEffect as p,createMemo as g,createSignal as b,mergeProps as w,onCleanup as j}from"solid-js";import C from"@moneko/common/lib/isFunction";import{css as x,cx as $}from"@moneko/css";import{customElement as _}from"solid-element";import{style as k}from"./style";import y from"../theme";function S(e){let n;let{baseStyle:_}=y,S=w({autoplay:-1,children:[]},e),[E,I]=b(0),[N,A]=b(1),[L,F]=b(0),[M,O]=b(0);function P(){let e=M();-1===e?F(E()):1===e&&F(N()),O(0),C(S.onChange)&&S.onChange(L())}function q(){O(-1)}function z(){O(1)}function B(e,t){t.stopPropagation();let l=L(),i=20*Math.floor(l/20)+e;i>l?(O(1),A(i)):i<l&&(O(-1),I(i))}let D=g(()=>[...S.children]),G=g(()=>Array(D().length>20?20:D().length).fill(null));p(()=>{void 0!==S.offset&&F(Number(S.offset))}),p(()=>{var e,t;let l,i;let[o,n]=(e=L(),t=D(),l=e-1,i=e+1,l<0&&(l=t.length-1),i>t.length-1&&(i=0),[l,i]);I(o),A(n)}),p(()=>{clearInterval(n);let e=Number(S.autoplay);e>0&&(n=setInterval(()=>{e<1&&clearInterval(n),z()},e))}),j(()=>{clearInterval(n)});let H=g(()=>C(S.header)?S.header(L()):S.header);return[(()=>{let e=d();return l(e,_,null),l(e,k,null),l(e,()=>x(S.css),null),e})(),(()=>{let e=v(),n=e.firstChild,d=n.firstChild,p=d.nextSibling,g=p.nextSibling,b=n.nextSibling,w=b.nextSibling,j=w.nextSibling;return l(d,()=>D()[E()]),a(p,"animationend",P),l(p,()=>D()[L()]),l(g,()=>D()[N()]),b._$owner=i(),l(e,r(h,{get when(){return H()},get children(){let e=c();return l(e,H),e}}),w),a(w,"click",q,!0),a(j,"click",z,!0),l(e,r(h,{get when(){return S.dots},get children(){let e=m();return l(e,r(u,{get each(){return G()},children:(e,t)=>(()=>{let e=f();return a(e,"click",B.bind(null,t),!0),o(()=>e.classList.toggle("active",!(t!==L()%20+M()))),e})()})),e}}),null),o(l=>{let i=$("carousel",S.class),o=M();return i!==l._v$&&s(e,l._v$=i),o!==l._v$2&&t(n,"data-dir",l._v$2=o),l},{_v$:void 0,_v$2:void 0}),e})()]}_("n-carousel",{children:void 0,autoplay:void 0,class:void 0,css:void 0,offset:void 0,dots:void 0,header:void 0,onChange:void 0},(e,t)=>{let l=t.element,i=w({onChange(e){l.offset=e,l.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return p(()=>{l.replaceChildren()}),r(S,i)});export default S;n(["click"]);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/es/carousel/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/carousel/index.tsx"],"sourcesContent":["import {\n Index,\n Show,\n
|
|
1
|
+
{"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":["Index","Show","createEffect","createMemo","createSignal","mergeProps","onCleanup","isFunction","css","cx","customElement","style","theme","Carousel","_props","playTimer","baseStyle","props","autoplay","children","left","setLeft","right","setRight","offset","setOffset","direction","setDirection","onOffsetChange","_dir","onChange","handlePrev","handleNext","handleDot","idx","e","stopPropagation","_offset","_current","Math","floor","list","dotLen","Array","length","fill","Number","arr","_prev","_next","clearInterval","setInterval","header","dots","_","bind","class","opt","el","element","key","dispatchEvent","CustomEvent","detail","replaceChildren"],"rangeMappings":"","mappings":"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"}
|
package/es/checkbox/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as i}from"solid-js/web";import{insert as l}from"solid-js/web";import{effect as o}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as r}from"solid-js/web";import{className as s}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=t("<style>"),u=t("<section>"),m=t('<span><input class="checkbox" type="checkbox"><label>');import{For as c,
|
|
1
|
+
import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as i}from"solid-js/web";import{insert as l}from"solid-js/web";import{effect as o}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as r}from"solid-js/web";import{className as s}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=t("<style>"),u=t("<section>"),m=t('<span><input class="checkbox" type="checkbox"><label>');import{For as c,createEffect as v,createMemo as f,createSignal as p,mergeProps as b}from"solid-js";import{css as h,cx as g}from"@moneko/css";import{customElement as k}from"solid-element";import{style as y}from"./style";import{FieldName as j}from"../basic-config";import w from"../get-options";import x from"../theme";function A(t){let{baseStyle:n}=x,[b,k]=p([]),A=f(()=>Object.assign({},j,t.fieldNames));v(()=>{let e=void 0===t.value?t.defaultValue:t.value,i=[];Array.isArray(e)?i=e:void 0!==e&&(i=[e]),k(i)});let C=f(()=>{let e=A();if(void 0===t.options)return w([{value:1}],e);let i=[{[e.value]:"all",[e.label]:"全选",indeterminate:!1}];return(t.checkAll?i:[]).concat(w(t.options||[],e))}),E=f(()=>{let e=[],t=A();return C().forEach(i=>{"indeterminate"in i||void 0===i[t.value]||e.push(i[t.value])}),e}),$=f(()=>{let e=!0,t=E();for(let i=0,l=t.length;i<l;i++)if(!b().includes(t[i])){e=!1;break}return e});function _(e){if(!t.disabled&&!e.disabled){let i="indeterminate"in e,l=i?[]:[...b()],o=e[A().value];if(i)$()||(l=E());else{let e=l.indexOf(o);-1!==e?l.splice(e,1):l.push(o)}void 0===t.value&&k(l),null==t.onChange||t.onChange.call(t,void 0===t.options?!!l[0]:l)}}function N(e,t){t.preventDefault(),"Enter"===t.key&&_(e)}return[(()=>{let e=d();return l(e,n,null),l(e,y,null),l(e,()=>h(t.css),null),e})(),(()=>{let n=u();return l(n,r(c,{get each(){return C()},children:n=>{let r=t.disabled||n.disabled,d=A(),u=n[d.value];return"indeterminate"in n&&v(()=>{let e;n.ref.indeterminate=(e=!1,E().forEach(t=>{b().length&&!b().includes(t)&&(e=!0)}),e)}),(()=>{let c=m(),v=c.firstChild,f=n.ref,p=v.nextSibling;return a(c,"click",_.bind(null,n),!0),a(c,"keyup",N.bind(null,n),!0),i(c,"aria-disabled",r),i(c,"tabindex",r?-1:0),a(v,"change",_.bind(null,n)),"function"==typeof f?e(f,v):n.ref=v,v.value=u,v.disabled=r,l(p,()=>n[d.label]),o(e=>{let l=g("item",n.class,n.status),o=t.name;return l!==e._v$&&s(c,e._v$=l),o!==e._v$2&&i(v,"name",e._v$2=o),e},{_v$:void 0,_v$2:void 0}),o(()=>v.checked="indeterminate"in n?$():b().includes(u)),c})()}})),o(()=>s(n,g("box",t.layout,t.class))),n})()]}k("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,t)=>{let i=t.element,l=b({layout:i.layout||"horizontal",onChange(e){i.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return v(()=>{i.removeAttribute("options"),i.removeAttribute("field-names"),i.removeAttribute("css")}),r(A,l)});export default A;n(["click","keyup"]);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/es/checkbox/index.js.map
CHANGED
|
@@ -1 +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":["For","createComponent","createEffect","createMemo","createSignal","mergeProps","css","cx","customElement","style","FieldName","getOptions","theme","Checkbox","props","baseStyle","value","setValue","fieldNames","Object","assign","_val","defaultValue","val","Array","isArray","options","fieldName","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","readOnly","realVal","_indeterminate","ref","v","bind","class","status","name","layout","_","opt","el","element","next","dispatchEvent","CustomEvent","detail","removeAttribute"],"rangeMappings":"","mappings":"ydAAA,QAASA,OAAAA,CAAG,CAAEC,mBAAAA,CAAe,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACpG,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAASC,aAAAA,CAAS,KAAQ,iBAAkB,AAC5C,QAAOC,MAAgB,gBAAiB,AACxC,QAAOC,MAAW,UAAW,CA2D7B,SAASC,EAASC,CAA6C,EAC7D,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGH,EAChB,CAACI,EAAOC,EAAS,CAAGb,EAAkC,EAAE,EACxDc,EAAaf,EAAW,IAAMgB,OAAOC,MAAM,CAAC,CAAC,EAAGV,EAAWI,EAAMI,UAAU,GAEjFhB,EAAa,KACX,IAAMmB,EAAO,AAAuB,KAAA,IAAhBP,EAAME,KAAK,CAAmBF,EAAMQ,YAAY,CAAGR,EAAME,KAAK,CAC9EO,EAA2B,EAAE,CAE7BC,MAAMC,OAAO,CAACJ,GAChBE,EAAMF,EACmB,KAAA,IAATA,GAChBE,CAAAA,EAAM,CAACF,EAA0B,AAAD,EAGlCJ,EAASM,EACX,GACA,IAAMG,EAAUvB,EAAW,KACzB,IAAMwB,EAAYT,IAElB,GAAI,AAAyB,KAAA,IAAlBJ,EAAMY,OAAO,CACtB,OAAOf,EAAW,CAAC,CAAEK,MAAO,CAAE,EAAoB,CAAEW,GAEtD,IAAMC,EAA6B,CACjC,CAAE,CAACD,EAAUX,KAAK,CAAC,CAAE,MAAO,CAACW,EAAUE,KAAK,CAAC,CAAE,KAAMC,cAAe,CAAA,CAAM,EAC3E,CAGD,MAAOC,AAFKjB,CAAAA,EAAMc,QAAQ,CAAGA,EAAW,EAAE,AAAD,EAE9BI,MAAM,CAACrB,EAAWG,EAAMY,OAAO,EAAI,EAAE,CAAEC,GACpD,GAEMM,EAAM9B,EAAW,KACrB,IAAM+B,EAA8B,EAAE,CAChCP,EAAYT,IAQlB,OANAQ,IAAUS,OAAO,CAAC,AAACC,IACX,kBAAmBA,GAAS,AAAiC,KAAA,IAA1BA,CAAI,CAACT,EAAUX,KAAK,CAAC,EAC5DkB,EAAOG,IAAI,CAACD,CAAI,CAACT,EAAUX,KAAK,CAAC,CAErC,GAEOkB,CACT,GAYMI,EAAanC,EAAW,KAC5B,IAAIoC,EAAU,CAAA,EACRC,EAAOP,IAEb,IAAK,IAAIQ,EAAI,EAAGC,EAAMF,EAAKG,MAAM,CAAEF,EAAIC,EAAKD,IAC1C,GAAI,CAACzB,IAAQ4B,QAAQ,CAACJ,CAAI,CAACC,EAAE,EAAG,CAC9BF,EAAU,CAAA,EACV,KACF,CAEF,OAAOA,CACT,GAEA,SAASM,EAAST,CAAoB,EACpC,GAAI,CAACtB,EAAMgC,QAAQ,EAAI,CAACV,EAAKU,QAAQ,CAAE,CACrC,IAAMC,EAAkB,kBAAmBX,EACvCY,EAASD,EAAkB,EAAE,CAAG,IAAI/B,IAAQ,CAC1CO,EAAMa,CAAI,CAAClB,IAAaF,KAAK,CAAC,CAEpC,GAAI+B,EACGT,KACHU,CAAAA,EAASf,GAAI,MAEV,CACL,IAAMgB,EAAMD,EAAOE,OAAO,CAAC3B,EAEvB0B,AAAQ,CAAA,KAARA,EACFD,EAAOG,MAAM,CAACF,EAAK,GAEnBD,EAAOX,IAAI,CAACd,EAEhB,CAC2B,KAAA,IAAhBT,EAAME,KAAK,EACpBC,EAAS+B,SAEXlC,EAAM+B,QAAQ,EAAd/B,EAAM+B,QAAQ,MAAd/B,EAAkB,AAAyB,KAAA,IAAlBA,EAAMY,OAAO,CAAmB,CAAC,CAACsB,CAAM,CAAC,EAAE,CAAGA,EACzE,CACF,CACA,SAASI,EAAQhB,CAAoB,CAAEiB,CAAgB,EACrDA,EAAEC,cAAc,GACF,UAAVD,EAAEE,GAAG,EACPV,EAAST,EAEb,CAEA,kCAGOrB,YACAN,gBACAH,EAAIQ,EAAMR,GAAG,2CAGbN,qBAAU0B,cACR,AAACU,IACA,IAAMoB,EAAW1C,EAAMgC,QAAQ,EAAIV,EAAKU,QAAQ,CAC1CnB,EAAYT,IACZuC,EAAUrB,CAAI,CAACT,EAAUX,KAAK,CAAC,CAOrC,MALI,kBAAmBoB,GACrBlC,EAAa,KArEvB,IAAIwD,CAsEQtB,CAAAA,EAAKuB,GAAG,CAAC7B,aAAa,EAtE9B4B,EAAiB,CAAA,EAErBzB,IAAME,OAAO,CAAC,AAACyB,IACT5C,IAAQ2B,MAAM,EAAI,CAAC3B,IAAQ4B,QAAQ,CAACgB,IACtCF,CAAAA,EAAiB,CAAA,CAAG,CAExB,GACOA,EAgEG,oCAWStB,EAAKuB,GAAG,oCAHNd,EAASgB,IAAI,CAAC,KAAMzB,mBADpBgB,EAAQS,IAAI,CAAC,KAAMzB,2BAFboB,kBACLA,EAAW,GAAK,gBAYdX,EAASgB,IAAI,CAAC,KAAMzB,gCAPzBA,EAAKuB,GAAG,WAINF,aACGD,UAIJpB,CAAI,CAACT,EAAUE,KAAK,CAAC,cAhBtBtB,EAAG,OAAQ6B,EAAK0B,KAAK,CAAE1B,EAAK2B,MAAM,IAUjCjD,EAAMkD,IAAI,8GAGP,kBAAmB5B,EAAOE,IAAetB,IAAQ4B,QAAQ,CAACa,SAM3E,eAjCYlD,EAAG,MAAOO,EAAMmD,MAAM,CAAEnD,EAAMgD,KAAK,UAsCzD,CAKAtD,EACE,aACA,CACEsD,MAAO,KAAK,EACZxD,IAAK,KAAK,EACV0D,KAAM,KAAK,EACXlB,SAAU,KAAK,EACf9B,MAAO,KAAK,EACZM,aAAc,KAAK,EACnBI,QAAS,KAAK,EACdmB,SAAU,KAAK,EACf3B,WAAY,KAAK,EACjBU,SAAU,KAAK,EACfqC,OAAQ,KAAK,CACf,EACA,CAACC,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBvD,EAAQT,EACZ,CACE4D,OAAQG,EAAGH,MAAM,EAAI,aACrBpB,SAASyB,CAAmC,EAC1CF,EAAGG,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQH,CACV,GAEJ,CACF,EACAJ,GAQF,OALAhE,EAAa,KACXkE,EAAGM,eAAe,CAAC,WACnBN,EAAGM,eAAe,CAAC,eACnBN,EAAGM,eAAe,CAAC,MACrB,GACOzE,EAAgBY,EAAUC,EACnC,EAEF,gBAAeD,CAAS"}
|
|
1
|
+
{"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":["For","createEffect","createMemo","createSignal","mergeProps","css","cx","customElement","style","FieldName","getOptions","theme","Checkbox","props","baseStyle","value","setValue","fieldNames","Object","assign","_val","defaultValue","val","Array","isArray","options","fieldName","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","readOnly","realVal","_indeterminate","ref","v","bind","class","status","name","layout","_","opt","el","element","next","dispatchEvent","CustomEvent","detail","removeAttribute"],"rangeMappings":"","mappings":"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"}
|
package/es/code/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as o}from"solid-js/web";import{insert as r}from"solid-js/web";import{effect as n}from"solid-js/web";import{delegateEvents as i}from"solid-js/web";import{createComponent as l}from"solid-js/web";import{className as s}from"solid-js/web";import{
|
|
1
|
+
import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as o}from"solid-js/web";import{insert as r}from"solid-js/web";import{effect as n}from"solid-js/web";import{delegateEvents as i}from"solid-js/web";import{createComponent as l}from"solid-js/web";import{className as s}from"solid-js/web";import{classList as a}from"solid-js/web";import{addEventListener as m}from"solid-js/web";let d=t('<div class="toolbar"><button class="toolbar-copy">'),c=t("<pre><code>"),u=t("<style>"),g=t("<div><textarea>");import{Show as v,createEffect as p,createSignal as f,mergeProps as b,onCleanup as h,onMount as $,untrack as _}from"solid-js";import w from"@moneko/common/lib/isFunction";import C from"@moneko/common/lib/setClipboard";import{css as j,cx as y}from"@moneko/css";import{customElement as k}from"solid-element";import{style as P}from"./style";import L from"../prism/css";import"../prism/prism.js";import x from"../theme";let E=/^diff-([\w-]+)/i;function N(t){let i;let{baseStyle:b}=x,[k,N]=f(""),[I,A]=f(20),[R,B]=f(!1),F=new IntersectionObserver(e=>{B(e[0].isIntersecting)});function H(){C(_(k),i)}function M(){return(()=>{let u=c(),g=u.firstChild,p=i;return r(u,l(v,{get when(){return t.toolbar},get children(){let e=d();return m(e.firstChild,"click",H,!0),n(()=>{var r;return o(e,"data-lang",null==(r=t.lang)?void 0:r.split(" ")[0])}),e}}),g),"function"==typeof p?e(p,g):i=g,n(e=>{let o={[`language-${t.lang}`]:!!t.lang,"line-numbers":t.lineNumber,"not-toolbar":!t.toolbar,[t.class]:!t.edit},r=`language-${t.lang}`;return e._v$=a(u,o,e._v$),r!==e._v$2&&s(g,e._v$2=r),e},{_v$:void 0,_v$2:void 0}),u})()}function O({target:e}){let o=`${e.value}${/\n$/.test(e.value)?"":""}`;N(o),w(t.onChange)&&t.onChange(o)}return p(()=>{if(t.code){let e=t.code.replace(/^\n/,"");try{N(decodeURIComponent(e))}catch(t){N(e)}}else N("")}),p(()=>{!function(e){if(!e.code||!R())return;F.unobserve(i),F.disconnect(),E.test(e.lang)&&!Prism.languages[e.lang]&&(Prism.languages[e.lang]=Prism.languages.diff);let o=Prism.languages[e.lang]||Prism.languages.markup;i.innerHTML=Prism.highlight(e.code,o,e.lang),A(i.getBoundingClientRect().height-(t.toolbar?40:16))}({lang:t.lang||"markup",code:k()})}),$(()=>{F.observe(i)}),h(()=>{F.unobserve(i),F.disconnect()}),[(()=>{let e=u();return r(e,b,null),r(e,L,null),r(e,P,null),r(e,()=>j(t.css),null),e})(),l(v,{get when(){return t.edit},get fallback(){return M()},get children(){let e=g(),o=e.firstChild;return m(o,"input",O,!0),r(e,M,null),n(r=>{let n=y("n-editor",t.class),i=!!t.lineNumber,l=!t.toolbar,a=`${I()}px`;return n!==r._v$3&&s(e,r._v$3=n),i!==r._v$4&&o.classList.toggle("line-numbers",r._v$4=i),l!==r._v$5&&o.classList.toggle("not-toolbar",r._v$5=l),a!==r._v$6&&(null!=(r._v$6=a)?o.style.setProperty("height",a):o.style.removeProperty("height")),r},{_v$3:void 0,_v$4:void 0,_v$5:void 0,_v$6:void 0}),n(()=>o.value=k()),e}})]}k("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,t)=>{let o=t.element,r=b({code:o.textContent,css:o.css,onChange(e){o.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return p(()=>{o.replaceChildren(),o.removeAttribute("css")}),l(N,r)});export default N;i(["click","input"]);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/es/code/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/code/index.tsx"],"sourcesContent":["import {\n Show,\n
|
|
1
|
+
{"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":["Show","createEffect","createSignal","mergeProps","onCleanup","onMount","untrack","isFunction","setClipboard","css","cx","customElement","style","prismCss","theme","diffLang","Code","props","codeEl","baseStyle","code","setCode","hei","setHei","isIntersecting","setIsIntersecting","observer","IntersectionObserver","entries","copy","pre","toolbar","lang","split","lineNumber","class","edit","change","target","c","value","test","onChange","_code","replace","decodeURIComponent","error","postMessage","opt","unobserve","disconnect","Prism","languages","diff","language","markup","innerHTML","highlight","getBoundingClientRect","height","observe","children","_","el","element","textContent","val","dispatchEvent","CustomEvent","detail","replaceChildren","removeAttribute"],"rangeMappings":"","mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function e(e,t,n,r,o,l,i){try{var a=e[l](i),s=a.value}catch(e){n(e);return}a.done?t(s):Promise.resolve(s).then(r,o)}function t(){return(t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}import{use as n}from"solid-js/web";import{template as r}from"solid-js/web";import{spread as o}from"solid-js/web";import{mergeProps as l}from"solid-js/web";import"solid-js/web";import{insert as i}from"solid-js/web";import{getOwner as a}from"solid-js/web";import{effect as s}from"solid-js/web";import{delegateEvents as u}from"solid-js/web";import{createComponent as m}from"solid-js/web";import{className as p}from"solid-js/web";import{addEventListener as c}from"solid-js/web";let d=r("<style>"),v=r("<n-input>",!0,!1),f=r('<i class="eye-dropper">'),g=r('<div><div class="picker"></div><div class="chooser"><div class="range"><input class="slider hue" min="0" max="360" type="range"><input class="slider opacity" min="0" max="1" step="0.01" type="range"></div><div class="preview"></div></div><div class="form"><n-dropdown placement="right" trigger="click"><span class="switch"></span></n-dropdown></div><div class="color">',!0,!1),h=r("<n-input-number>",!0,!1),b=r("<i>");import{For as y,Index as w,Show as C,
|
|
1
|
+
function e(e,t,n,r,o,l,i){try{var a=e[l](i),s=a.value}catch(e){n(e);return}a.done?t(s):Promise.resolve(s).then(r,o)}function t(){return(t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}import{use as n}from"solid-js/web";import{template as r}from"solid-js/web";import{spread as o}from"solid-js/web";import{mergeProps as l}from"solid-js/web";import"solid-js/web";import{insert as i}from"solid-js/web";import{getOwner as a}from"solid-js/web";import{effect as s}from"solid-js/web";import{delegateEvents as u}from"solid-js/web";import{createComponent as m}from"solid-js/web";import{className as p}from"solid-js/web";import{addEventListener as c}from"solid-js/web";let d=r("<style>"),v=r("<n-input>",!0,!1),f=r('<i class="eye-dropper">'),g=r('<div><div class="picker"></div><div class="chooser"><div class="range"><input class="slider hue" min="0" max="360" type="range"><input class="slider opacity" min="0" max="1" step="0.01" type="range"></div><div class="preview"></div></div><div class="form"><n-dropdown placement="right" trigger="click"><span class="switch"></span></n-dropdown></div><div class="color">',!0,!1),h=r("<n-input-number>",!0,!1),b=r("<i>");import{For as y,Index as w,Show as C,createEffect as x,createMemo as j,createSignal as k,mergeProps as E,onCleanup as S,onMount as P,untrack as $}from"solid-js";import B from"@moneko/common/lib/colorParse";import D from"@moneko/common/lib/isFunction";import F from"@moneko/common/lib/passiveSupported";import L from"@moneko/common/lib/setClipboard";import M from"@moneko/common/lib/throttle";import{css as A,cx as H}from"@moneko/css";import{customElement as O}from"solid-element";import{style as R,switchCss as N}from"./style";import"../dropdown";import"../input";import"../input-number";import V from"../theme";function G(r){let u;let{baseStyle:O}=V,G=E({defaultValue:"#5794ff"},r),_=[{label:"RGBA",value:"rgba",handleClosed:!1},{label:"HSLA",value:"hsla",handleClosed:!1},{label:"HEXA",value:"hexa",handleClosed:!1}],z=["#f44336","#E91E63","#9C27B0","#673AB7","#3F51B5","#2196F3","#00BCD4","#009688","#4CAF50","#CDDC39","#FF9800","#795548","#607D8B"],U={class:"input",size:"small",css:".input{text-align:center;font-size:12px;}"},[X,K]=k(B(G.value||G.defaultValue)),[Y,q]=k(!1);function I(e){return e?Number((100*e).toFixed()):e}function J(e){let t=e;return"string"==typeof e&&(t=e.replace(/[^\d]/g,"")),t/100}let Q=j(()=>{var e;let t=X(),n=t[e=t.type,`to${e[0].toUpperCase()+e.slice(1)}`]();return D(G.onChange)&&n.toString()!==G.value&&G.onChange(n.toString()),n});function T(e=G.defaultValue){$(Q).toString()!==e&&K(B(e))}function W(e){e.target&&(e.target.value=e.detail)}function Z(e){var t;(null==(t=e.target)?void 0:t.value)&&T(e.target.value)}function ee(e){var t;"Enter"===e.key&&"string"==typeof(null==(t=e.target)?void 0:t.value)&&T(e.target.value)}function et(e){if(u){let{x:n,y:r,width:o,height:l}=u.getBoundingClientRect(),i=$(X),a=i.value;a[1]=Math.floor(Math.min(Math.max(0,(e.clientX-n)/o*100),100)),a[2]=Math.floor(100-Math.min(Math.max(0,(e.clientY-r)/l*100),100)),K(t({},i,{value:a}))}}function en(e,n,r){if("number"==typeof n){let o=$(X),l=3===e||"hsva"===r,i=l?o.value:$(Q);i[e]=n||0,l?K(t({},o,{value:i})):K(B(i.toString()))}}function er(e){q(!0),et(e)}function eo(){q(!1)}function el(e){K(n=>t({},n,{type:e.detail[0]}))}function ei(e){L($(Q).toString(),e.target)}function ea(){return es.apply(this,arguments)}function es(){var t;return t=function*(){if(window.EyeDropper){let e=yield new window.EyeDropper().open();e.sRGBHex&&T(e.sRGBHex);return}},(es=function(){var n=this,r=arguments;return new Promise(function(o,l){var i=t.apply(n,r);function a(t){e(i,o,l,a,s,"next",t)}function s(t){e(i,o,l,a,s,"throw",t)}a(void 0)})}).apply(this,arguments)}let eu=j(()=>{let e=X(),t=e.value;return`.palette {--c:${e.toRgbaString()};--h:${t[0]};--s:${t[1]};--v:${t[2]};--a:${t[3]};}`});return x(()=>{M(T,8)(G.value)}),x(()=>{Y()&&document.body.addEventListener("mousemove",et,{passive:F}),S(()=>{document.body.removeEventListener("mousemove",et,!1)})}),P(()=>{document.body.addEventListener("mouseup",eo,{passive:F})}),S(()=>{document.body.removeEventListener("mouseup",eo,!1)}),[(()=>{let e=d();return i(e,O,null),i(e,R,null),i(e,eu,null),i(e,()=>A(G.css),null),e})(),(()=>{let e=g(),t=e.firstChild,r=u,d=t.nextSibling,x=d.firstChild,j=x.firstChild,k=j.nextSibling,E=x.nextSibling,S=d.nextSibling,P=S.firstChild,B=P.firstChild,D=S.nextSibling;return c(t,"mousedown",er,!0),"function"==typeof r?n(r,t):u=t,j.$$input=e=>en(0,Number(e.target.value),"hsva"),k.$$input=e=>en(3,Number(e.target.value)),c(E,"click",ei,!0),i(S,m(C,{get when(){return"hexa"===X().type},get fallback(){return m(w,{get each(){return Q()},children:(e,t)=>{let n=Object.assign({},U,3===t&&{step:.01,formatter:I,parse:J});return(()=>{let r=h();return o(r,l(n,{get value(){return e()},get max(){return $(Q).max[t]},min:0,onChange:e=>{en(t,e.detail)}}),!1,!1),r._$owner=a(),r})()}})},get children(){let e=v();return o(e,l(U,{get value(){return X().toHexaString()},onChange:W,onBlur:Z,onKeyUp:ee}),!1,!1),e._$owner=a(),e}}),P),c(P,"change",el),P.css=N,P.items=_,P._$owner=a(),i(B,()=>X().type),i(D,m(C,{get when(){return window.EyeDropper},get fallback(){return(()=>{let e=b();return c(e,"click",T.bind(null,"rgba(168,16,16,0.15)"),!0),e.style.setProperty("--c","rgba(168,16,16,0.15)"),e})()},get children(){let e=f();return c(e,"click",ea,!0),e.style.setProperty("--c","transparent"),e}}),null),i(D,m(y,{each:z,children:e=>(()=>{let t=b();return c(t,"click",T.bind(null,e),!0),null!=e?t.style.setProperty("--c",e):t.style.removeProperty("--c"),t})()}),null),s(()=>p(e,H("palette",G.class))),s(()=>j.value=X().value[0]),s(()=>k.value=X().value[3]),s(()=>P.value=X().type),e})()]}export const defaultColorPaletteProps={class:void 0,style:void 0,css:void 0,value:void 0,defaultValue:void 0,onChange:void 0};O("n-color-palette",defaultColorPaletteProps,(e,t)=>{let n=t.element;return m(G,E({onChange(e){n.dispatchEvent(new CustomEvent("change",{detail:e}))}},e))});export default G;u(["click","input","mousedown"]);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|