neko-ui 2.9.9 → 2.10.0
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/es/button/style.js +2 -2
- package/es/button/style.js.map +1 -1
- package/es/code/index.js +1 -1
- package/es/code/index.js.map +1 -1
- package/es/code/style.js +2 -1
- package/es/code/style.js.map +1 -1
- package/es/color-palette/style.js +2 -1
- package/es/color-palette/style.js.map +1 -1
- package/es/modal/index.d.ts +3 -3
- package/es/modal/index.js +1 -1
- package/es/modal/index.js.map +1 -1
- package/es/popover/index.d.ts +1 -1
- package/es/popover/index.js +1 -1
- package/es/popover/index.js.map +1 -1
- package/eslint.config.mjs +2 -2
- package/lib/button/style.js +2 -2
- package/lib/button/style.js.map +1 -1
- package/lib/code/index.js +1 -1
- package/lib/code/index.js.map +1 -1
- package/lib/code/style.js +2 -1
- package/lib/code/style.js.map +1 -1
- package/lib/color-palette/style.js +2 -1
- package/lib/color-palette/style.js.map +1 -1
- package/lib/modal/index.d.ts +3 -3
- package/lib/modal/index.js +1 -1
- package/lib/modal/index.js.map +1 -1
- package/lib/popover/index.d.ts +1 -1
- package/lib/popover/index.js +1 -1
- package/lib/popover/index.js.map +1 -1
- package/package.json +9 -9
- package/umd/index.js +57 -55
package/es/button/style.js
CHANGED
|
@@ -81,8 +81,8 @@ import{css as o}from"@moneko/css";function r(r){let n=`.${r}`,t=`.${r}.fill`;ret
|
|
|
81
81
|
gap: 3px;
|
|
82
82
|
line-height: 1;
|
|
83
83
|
cursor: pointer;
|
|
84
|
-
transition-property:
|
|
85
|
-
opacity;
|
|
84
|
+
transition-property:
|
|
85
|
+
color, background-color, border-color, width, height, transform, padding, opacity;
|
|
86
86
|
transition-timing-function: linear;
|
|
87
87
|
touch-action: manipulation;
|
|
88
88
|
box-sizing: border-box;
|
package/es/button/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/button/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nimport type { ButtonProps } from '.';\n\nfunction btnColor(type: ButtonProps['type']): string {\n let _cls = `.${type}`,\n fillCls = `.${type}.fill`;\n\n if (type === 'error') {\n _cls = `.${type},.danger`;\n fillCls = `.${type}.fill,.danger.fill`;\n }\n\n return css`\n ${_cls}:not(.disabled) {\n --btn-border: var(--${type}-border);\n --btn-bg: var(--${type}-selection);\n --btn-hover-bg: var(--btn-bg);\n --btn-hover-color: var(--${type}-hover);\n --btn-active-color: var(--${type}-active);\n --btn-outline-color: var(--${type}-outline);\n --btn-color: var(--${type}-color);\n }\n ${fillCls} {\n --btn-bg: var(--${type}-color);\n --btn-border: var(--${type}-color);\n --btn-hover-bg: var(--${type}-hover);\n --btn-active-bg: var(--${type}-active);\n }\n `;\n}\n\nexport const style = css`\n .btn,\n .label,\n .icon {\n transition-duration: var(--transition-duration);\n }\n\n .label {\n display: block;\n line-height: normal;\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n transition-property: color;\n }\n\n .icon {\n display: inline-flex;\n align-items: center;\n color: inherit;\n transition-property: color;\n }\n\n .fill {\n &:not(.disabled, .default) {\n .label,\n .icon {\n color: #fff !important;\n }\n\n &:hover {\n --btn-bg: var(--btn-hover-color) !important;\n }\n\n &:active {\n --btn-bg: var(--btn-active-color) !important;\n }\n }\n }\n\n .fill.danger.default {\n .label,\n .icon {\n color: #fff !important;\n }\n }\n\n .btn {\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--btn-border);\n border-radius: var(--border-radius);\n padding: 0 16px;\n inline-size: fit-content;\n min-inline-size: var(--btn-size);\n block-size: fit-content;\n min-block-size: var(--btn-size);\n font-size: var(--font-size);\n color: var(--btn-color);\n background-color: var(--btn-bg);\n outline-offset: 4px;\n gap: 3px;\n line-height: 1;\n cursor: pointer;\n transition-property
|
|
1
|
+
{"version":3,"sources":["components/button/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nimport type { ButtonProps } from '.';\n\nfunction btnColor(type: ButtonProps['type']): string {\n let _cls = `.${type}`,\n fillCls = `.${type}.fill`;\n\n if (type === 'error') {\n _cls = `.${type},.danger`;\n fillCls = `.${type}.fill,.danger.fill`;\n }\n\n return css`\n ${_cls}:not(.disabled) {\n --btn-border: var(--${type}-border);\n --btn-bg: var(--${type}-selection);\n --btn-hover-bg: var(--btn-bg);\n --btn-hover-color: var(--${type}-hover);\n --btn-active-color: var(--${type}-active);\n --btn-outline-color: var(--${type}-outline);\n --btn-color: var(--${type}-color);\n }\n ${fillCls} {\n --btn-bg: var(--${type}-color);\n --btn-border: var(--${type}-color);\n --btn-hover-bg: var(--${type}-hover);\n --btn-active-bg: var(--${type}-active);\n }\n `;\n}\n\nexport const style = css`\n .btn,\n .label,\n .icon {\n transition-duration: var(--transition-duration);\n }\n\n .label {\n display: block;\n line-height: normal;\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n transition-property: color;\n }\n\n .icon {\n display: inline-flex;\n align-items: center;\n color: inherit;\n transition-property: color;\n }\n\n .fill {\n &:not(.disabled, .default) {\n .label,\n .icon {\n color: #fff !important;\n }\n\n &:hover {\n --btn-bg: var(--btn-hover-color) !important;\n }\n\n &:active {\n --btn-bg: var(--btn-active-color) !important;\n }\n }\n }\n\n .fill.danger.default {\n .label,\n .icon {\n color: #fff !important;\n }\n }\n\n .btn {\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--btn-border);\n border-radius: var(--border-radius);\n padding: 0 16px;\n inline-size: fit-content;\n min-inline-size: var(--btn-size);\n block-size: fit-content;\n min-block-size: var(--btn-size);\n font-size: var(--font-size);\n color: var(--btn-color);\n background-color: var(--btn-bg);\n outline-offset: 4px;\n gap: 3px;\n line-height: 1;\n cursor: pointer;\n transition-property:\n color, background-color, border-color, width, height, transform, padding, opacity;\n transition-timing-function: linear;\n touch-action: manipulation;\n box-sizing: border-box;\n user-select: none;\n outline: none;\n\n &:has(.icon) {\n padding: 0 10px;\n }\n\n &:not(.disabled) {\n &:active {\n transform: scale(0.98);\n\n .label,\n .icon {\n color: var(--btn-active-color);\n }\n\n &:not(.link, .flat) {\n border-color: var(--btn-active-color);\n }\n\n &:not(.link) {\n background-color: var(--btn-hover-bg);\n }\n }\n\n &:hover:not(.link) {\n background-color: var(--btn-hover-bg);\n }\n\n &:hover:not(.link, .flat),\n &:focus:not(.link, .flat) {\n border-color: var(--btn-hover-color);\n }\n\n &:hover .label,\n &:focus .label,\n &:hover .icon,\n &:focus .icon {\n color: var(--btn-hover-color);\n }\n }\n\n &.loading {\n opacity: 0.7;\n cursor: not-allowed;\n }\n\n &.disabled {\n --btn-color: var(--disable-color);\n --btn-bg: var(--disable-bg);\n --btn-border: var(--disable-border);\n\n cursor: not-allowed;\n }\n }\n\n .normal {\n --btn-size: 32px;\n }\n\n .small {\n --btn-size: 24px;\n\n gap: 2px;\n padding: 0 7px;\n font-size: var(--font-size-xs);\n\n &:has(.icon) {\n padding: 0 5px;\n }\n }\n\n .large {\n --btn-size: 40px;\n\n font-size: var(--font-size-lg);\n gap: 4px;\n\n &:has(.icon) {\n padding: 0 12px;\n }\n }\n\n .default:not(.disabled) {\n --btn-outline-color: var(--primary-outline);\n --btn-color: var(--text-color);\n --btn-bg: var(--component-bg);\n --btn-border: var(--border-color);\n --btn-hover-color: var(--primary-hover);\n --btn-active-color: var(--primary-active);\n }\n\n ${btnColor('primary')}\n ${btnColor('error')}\n ${btnColor('success')}\n ${btnColor('warning')}\n \n\n .dashed {\n border-style: dashed;\n }\n\n .link {\n --btn-bg: transparent !important;\n --btn-border: transparent !important;\n\n border-color: transparent !important;\n background-color: transparent !important;\n\n &::after {\n content: none;\n }\n }\n\n .flat {\n --btn-border: transparent !important;\n\n background-color: transparent;\n\n &:not(.disabled, .link).default {\n --btn-hover-bg: rgb(0 0 0 / 6%);\n }\n }\n\n .ghost {\n background-color: transparent !important;\n }\n\n .circle {\n border-radius: 50% !important;\n padding: 0;\n min-inline-size: var(--btn-size);\n max-inline-size: var(--btn-size);\n min-block-size: var(--btn-size);\n max-block-size: var(--btn-size);\n text-align: center;\n line-height: var(--btn-size);\n }\n\n .block {\n display: flex;\n inline-size: 100%;\n }\n\n .without:not(.link, .flat)::before {\n animation: btn-wave-effect var(--transition-duration) cubic-bezier(1, 1, 1, 1);\n position: absolute;\n z-index: -1;\n display: block;\n border-radius: inherit;\n opacity: 0.2;\n box-shadow: 0 0 0 0 var(--btn-outline-color);\n inset: 0;\n animation-fill-mode: forwards;\n content: '';\n pointer-events: none;\n }\n\n @keyframes btn-wave-effect {\n 0% {\n opacity: 1;\n box-shadow: 0 0 0 var(--btn-hover-color);\n }\n\n /* 25% {\n opacity: 1;\n box-shadow: 0 0 0 4px var(--btn-hover-color);\n } */\n\n 100% {\n opacity: 0;\n box-shadow: 0 0 0 6px var(--btn-outline-color);\n }\n }\n`;\n"],"names":["css","btnColor","type","_cls","fillCls","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,CAIlC,SAASC,EAASC,CAAyB,EACzC,IAAIC,EAAO,CAAC,CAAC,EAAED,EAAK,CAAC,CACnBE,EAAU,CAAC,CAAC,EAAEF,EAAK,KAAK,CAAC,CAO3B,MALa,UAATA,IACFC,EAAO,CAAC,CAAC,EAAED,EAAK,QAAQ,CAAC,CACzBE,EAAU,CAAC,CAAC,EAAEF,EAAK,kBAAkB,CAAC,EAGjCF,CAAG,CAAC;IACT,EAAEG,EAAK;0BACe,EAAED,EAAK;sBACX,EAAEA,EAAK;;+BAEE,EAAEA,EAAK;gCACN,EAAEA,EAAK;iCACN,EAAEA,EAAK;yBACf,EAAEA,EAAK;;IAE5B,EAAEE,EAAQ;sBACQ,EAAEF,EAAK;0BACH,EAAEA,EAAK;4BACL,EAAEA,EAAK;6BACN,EAAEA,EAAK;;EAElC,CAAC,AACH,CAEA,OAAO,MAAMG,MAAQL,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoKvB,EAAEC,EAAS,WAAW;EACtB,EAAEA,EAAS,SAAS;EACpB,EAAEA,EAAS,WAAW;EACtB,EAAEA,EAAS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+ExB,CAAC,AAAC"}
|
package/es/code/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function t(t,e,o,i,r,n,l){try{var s=t[n](l),a=s.value}catch(t){o(t);return}s.done?e(a):Promise.resolve(a).then(i,r)}import{use as e}from"solid-js/web";import{template as o}from"solid-js/web";import{setAttribute as i}from"solid-js/web";import{insert as r}from"solid-js/web";import{effect as n}from"solid-js/web";import{delegateEvents as l}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{classList as a}from"solid-js/web";import{addEventListener as d}from"solid-js/web";let c=o("<style> "),h=o("<style>"),m=o('<div class="toolbar">'),u=o("<pre><code>");import{createEffect as g,createMemo as f,createResource as p,createSignal as v,createUniqueId as w,mergeProps as C,onCleanup as b,Show as y,untrack as S}from"solid-js";import k from"@moneko/common/lib/isFunction";import j from"@moneko/common/lib/setClipboard";import{css as $}from"@moneko/css";import{customElement as x}from"solid-element";import{clearAttribute as E}from"../basic-config";import A from"../theme";import{CopyIcon as P}from"./copy-icon";import{darkCss as _,lightCss as z,style as H}from"./style";function T(o){let l,C;let{isDark:x}=A,E=/%[0-9A-Fa-f]{2}/,T=w(),[W,F]=v(""),[L,R]=v();function I(){var e;return e=function*(){return window.Prism?(window.Prism.disableWorkerMessageHandler=!0,window.Prism.manual=!0,window.Prism):(yield import("../prism")).default},(I=function(){var o=this,i=arguments;return new Promise(function(r,n){var l=e.apply(o,i);function s(e){t(l,r,n,s,a,"next",e)}function a(e){t(l,r,n,s,a,"throw",e)}s(void 0)})}).apply(this,arguments)}let[M]=p("prism",function(){return I.apply(this,arguments)}),O=f(()=>{var t;return o.title||(null==(t=o.language)?void 0:t.split(" ").pop())});function U(){j(S(W),l)}g(()=>{let t=o.code||"";E.test(t)&&(t=decodeURIComponent(t)),l.normalize(),t!==l.textContent&&F(t)});let q=function(t){t.target.normalize();let e=t.target.textContent;B(o.language,e,!0),k(o.onChange)&&o.onChange(e)};function B(t="markup",e,o,i={}){C&&(clearTimeout(C),C=void 0);let r=M();e&&r&&(C=setTimeout(()=>{if(clearTimeout(C),CSS.highlights){o&&CSS.highlights.forEach((t,e)=>{e.startsWith(T)&&t.clear()});let n=t.split(" "),s=r.languages[n[0]];s&&function t(e,o,i,r=0){let n=r;if(Array.isArray(o)){for(let r=0,l=o.length;r<l;r++){let l=o[r];if("object"!=typeof l){n+=l.length;continue}n=t(e,l,i,n)}return n}if("object"==typeof o&&o.type&&e.firstChild){var l;let r=(null!=(l=o.alias)?l:o.type).toString(),s=T+r,a=new Range;["deleted","inserted"].includes(r)?a.setStart(e.firstChild,n+2):a.setStart(e.firstChild,n),Array.isArray(o.content)?n=t(e,o.content,i,n):"string"==typeof o.content&&(n+=o.content.length),a.setEnd(e.firstChild,n),function(t,e,o,i){let r=CSS.highlights.get(t);r?r.add(o):CSS.highlights.set(t,new Highlight().add(o)),void 0===i[t]&&(i[t]=`::highlight(${t}){color:var(--${e});background-color:var(--${e}-bg);text-decoration:var(--${e}-text-decoration);text-shadow:var(--${e}-text-shadow);-webkit-text-stroke-width:var(--${e}-stroke-width);-webkit-text-stroke-color:var(--${e}-stroke-color);}`)}(s,r,a,i)}return n}(l,r.tokenize(e,s),i),n.length>1||"git"===n[0]?B(n[1],e,!1,i):R(Object.values(i).join(""))}else throw Error("不支持 CSS Highlights");C=void 0},0))}return g(()=>{B(o.language,W(),!0)}),b(()=>{if(CSS.highlights)for(let t of CSS.highlights.keys())t.startsWith(T)&&CSS.highlights.delete(t)}),[(()=>{let t=c(),e=t.firstChild;return n(()=>e.data=x()?_:z),t})(),(()=>{let t=c(),e=t.firstChild;return n(()=>e.data=L()),t})(),(()=>{let t=h();return t.textContent=H,t})(),s(y,{get when(){return o.css},get children(){let t=c(),e=t.firstChild;return n(()=>e.data=$(o.css)),t}}),(()=>{let t=u(),c=t.firstChild,h=l;return r(t,s(y,{get when(){return o.toolbar},get children(){let t=m();return r(t,s(P,{class:"toolbar-copy",onClick:U})),n(()=>i(t,"data-language",O())),t}}),c),d(c,"input",q,!0),"function"==typeof h?e(h,c):l=c,i(c,"spellcheck",!1),r(c,W),n(e=>{let r={[`language-${o.language}`]:!!o.language,"not-toolbar":!o.toolbar,[o.class]:!o.edit},n=o.edit;return e._v$=a(t,r,e._v$),n!==e._v$2&&i(c,"contenteditable",e._v$2=n),e},{_v$:void 0,_v$2:void 0}),t})()]}x("n-code",{class:void 0,code:void 0,language:void 0,children:void 0,edit:void 0,toolbar:void 0,css:void 0,onChange:void 0,title:void 0},(t,e)=>{let{baseStyle:o}=A,i=e.element,r=C({code:i.textContent,css:i.css,onChange(t){i.dispatchEvent(new CustomEvent("change",{detail:t}))}},t);return g(()=>{E(i,["css","code","title"]),i.replaceChildren()}),[(()=>{let t=c(),e=t.firstChild;return n(()=>e.data=o()),t})(),s(T,r)]});export default T;l(["input"]);
|
|
1
|
+
function t(t,e,o,i,r,n,l){try{var s=t[n](l),a=s.value}catch(t){o(t);return}s.done?e(a):Promise.resolve(a).then(i,r)}import{use as e}from"solid-js/web";import{template as o}from"solid-js/web";import{setAttribute as i}from"solid-js/web";import{insert as r}from"solid-js/web";import{effect as n}from"solid-js/web";import{delegateEvents as l}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{classList as a}from"solid-js/web";import{addEventListener as d}from"solid-js/web";let c=o("<style> "),h=o("<style>"),m=o('<div class="toolbar">'),u=o("<pre><code>");import{createEffect as g,createMemo as f,createResource as p,createSignal as v,createUniqueId as w,mergeProps as C,onCleanup as b,Show as y,untrack as S}from"solid-js";import k from"@moneko/common/lib/isFunction";import j from"@moneko/common/lib/setClipboard";import{css as $}from"@moneko/css";import{customElement as x}from"solid-element";import{clearAttribute as E}from"../basic-config";import A from"../theme";import{CopyIcon as P}from"./copy-icon";import{darkCss as _,lightCss as z,style as H}from"./style";function T(o){let l,C;let{isDark:x}=A,E=/%[0-9A-Fa-f]{2}/,T=w(),[W,F]=v(""),[L,R]=v();function I(){var e;return e=function*(){return window.Prism?(window.Prism.disableWorkerMessageHandler=!0,window.Prism.manual=!0,window.Prism):(yield import("../prism")).default},(I=function(){var o=this,i=arguments;return new Promise(function(r,n){var l=e.apply(o,i);function s(e){t(l,r,n,s,a,"next",e)}function a(e){t(l,r,n,s,a,"throw",e)}s(void 0)})}).apply(this,arguments)}let[M]=p("prism",function(){return I.apply(this,arguments)}),O=f(()=>{var t;return o.title||(null==(t=o.language)?void 0:t.split(" ").pop())});function U(){j(S(W),l)}g(()=>{let t=o.code||"";E.test(t)&&(t=decodeURIComponent(t)),l&&(l.normalize(),t!==l.textContent&&F(t))});let q=function(t){t.target.normalize();let e=t.target.textContent;B(o.language,e,!0),k(o.onChange)&&o.onChange(e)};function B(t="markup",e,o,i={}){C&&(clearTimeout(C),C=void 0);let r=M();e&&r&&(C=setTimeout(()=>{if(clearTimeout(C),CSS.highlights){o&&CSS.highlights.forEach((t,e)=>{e.startsWith(T)&&t.clear()});let n=t.split(" "),s=r.languages[n[0]];s&&l&&function t(e,o,i,r=0){let n=r;if(Array.isArray(o)){for(let r=0,l=o.length;r<l;r++){let l=o[r];if("object"!=typeof l){n+=l.length;continue}n=t(e,l,i,n)}return n}if("object"==typeof o&&o.type&&e.firstChild){var l;let r=(null!=(l=o.alias)?l:o.type).toString(),s=T+r,a=new Range;["deleted","inserted"].includes(r)?a.setStart(e.firstChild,n+2):a.setStart(e.firstChild,n),Array.isArray(o.content)?n=t(e,o.content,i,n):"string"==typeof o.content&&(n+=o.content.length),a.setEnd(e.firstChild,n),function(t,e,o,i){let r=CSS.highlights.get(t);r?r.add(o):CSS.highlights.set(t,new Highlight().add(o)),void 0===i[t]&&(i[t]=`::highlight(${t}){color:var(--${e});background-color:var(--${e}-bg);text-decoration:var(--${e}-text-decoration);text-shadow:var(--${e}-text-shadow);-webkit-text-stroke-width:var(--${e}-stroke-width);-webkit-text-stroke-color:var(--${e}-stroke-color);}`)}(s,r,a,i)}return n}(l,r.tokenize(e,s),i),n.length>1||"git"===n[0]?B(n[1],e,!1,i):R(Object.values(i).join(""))}else throw Error("不支持 CSS Highlights");C=void 0},0))}return g(()=>{B(o.language,W(),!0)}),b(()=>{if(CSS.highlights)for(let t of CSS.highlights.keys())t.startsWith(T)&&CSS.highlights.delete(t)}),[(()=>{let t=c(),e=t.firstChild;return n(()=>e.data=x()?_:z),t})(),(()=>{let t=c(),e=t.firstChild;return n(()=>e.data=L()),t})(),(()=>{let t=h();return t.textContent=H,t})(),s(y,{get when(){return o.css},get children(){let t=c(),e=t.firstChild;return n(()=>e.data=$(o.css)),t}}),(()=>{let t=u(),c=t.firstChild,h=l;return r(t,s(y,{get when(){return o.toolbar},get children(){let t=m();return r(t,s(P,{class:"toolbar-copy",onClick:U})),n(()=>i(t,"data-language",O())),t}}),c),d(c,"input",q,!0),"function"==typeof h?e(h,c):l=c,i(c,"spellcheck",!1),r(c,W),n(e=>{let r={[`language-${o.language}`]:!!o.language,"not-toolbar":!o.toolbar,[o.class]:!o.edit},n=o.edit;return e._v$=a(t,r,e._v$),n!==e._v$2&&i(c,"contenteditable",e._v$2=n),e},{_v$:void 0,_v$2:void 0}),t})()]}x("n-code",{class:void 0,code:void 0,language:void 0,children:void 0,edit:void 0,toolbar:void 0,css:void 0,onChange:void 0,title:void 0},(t,e)=>{let{baseStyle:o}=A,i=e.element,r=C({code:i.textContent,css:i.css,onChange(t){i.dispatchEvent(new CustomEvent("change",{detail:t}))}},t);return g(()=>{E(i,["css","code","title"]),i.replaceChildren()}),[(()=>{let t=c(),e=t.firstChild;return n(()=>e.data=o()),t})(),s(T,r)]});export default T;l(["input"]);
|
package/es/code/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/code/index.tsx"],"sourcesContent":["import {\n createEffect,\n createMemo,\n createResource,\n createSignal,\n createUniqueId,\n type JSX,\n mergeProps,\n onCleanup,\n Show,\n untrack,\n} from 'solid-js';\nimport { isFunction, setClipboard } from '@moneko/common';\nimport { css } from '@moneko/css';\nimport type { TokenStream } from 'prismjs';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport theme from '../theme';\n\nimport { CopyIcon } from './copy-icon';\nimport { darkCss, lightCss, style } from './style';\n\nexport type LanguageBase =\n | 'bash'\n | 'shell'\n | 'sh'\n | 'clike'\n | 'css'\n | 'docker'\n | 'dockerfile'\n | 'git'\n | 'javascript'\n | 'js'\n | 'json'\n | 'webmanifest'\n | 'jsx'\n | 'tsx'\n | 'less'\n | 'html'\n | 'mathml'\n | 'svg'\n | 'xml'\n | 'ssml'\n | 'atom'\n | 'rss'\n | 'regex'\n | 'rust'\n | 'sql'\n | 'swift'\n | 'toml'\n | 'typescript'\n | 'ts'\n | 'yaml'\n | 'yml'\n | 'matlab';\n\ntype ExcludeLanguage<T extends LanguageBase, U extends LanguageBase> = T extends U ? never : T;\n\nexport type Language =\n | LanguageBase\n | {\n [T in LanguageBase]: `${T} ${ExcludeLanguage<LanguageBase, T>}`;\n }[LanguageBase];\nexport interface CodeProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 内容 */\n code?: string;\n /** 语言（支持多种语言配置：如 `html css javascript`）\n * @default 'markup'\n */\n language?: Language;\n /** 支持编辑 */\n edit?: boolean;\n /** 开启代码块工具条 */\n toolbar?: boolean;\n /** 工具条上显示的文字 */\n title?: string;\n /** 编辑修改时的回调 */\n onChange?(code: string): void;\n children?: JSXElement;\n}\nexport type CodeElement = CustomElement<CodeProps>;\n\nfunction Code(props: CodeProps) {\n const { isDark } = theme;\n let codeEl: HTMLPreElement;\n let timer: NodeJS.Timeout | undefined;\n const decoded = /%[0-9A-Fa-f]{2}/;\n const id = createUniqueId();\n const [code, setCode] = createSignal<string>('');\n const [highlightCss, setHighlightCss] = createSignal<string>();\n\n async function fetchPrism() {\n if (!window.Prism) {\n return (await import('../prism')).default;\n }\n window.Prism.disableWorkerMessageHandler = true;\n window.Prism.manual = true;\n return window.Prism;\n }\n const [prismJS] = createResource('prism', fetchPrism);\n const title = createMemo(() => props.title || props.language?.split(' ').pop());\n\n createEffect(() => {\n let _next = props.code || '';\n\n if (decoded.test(_next)) {\n _next = decodeURIComponent(_next);\n }\n codeEl.normalize();\n if (_next !== codeEl.textContent) {\n setCode(_next);\n }\n });\n\n function copy() {\n setClipboard(untrack(code), codeEl);\n }\n const change: JSX.InputEventHandlerUnion<HTMLElement, InputEvent> = function (e) {\n e.target.normalize();\n const next = e.target.textContent;\n\n syntax(props.language, next, true);\n if (isFunction(props.onChange)) {\n props.onChange(next);\n }\n };\n\n function updateRang(\n key: string,\n token: string,\n range: AbstractRange,\n selection: Record<string, string>,\n ) {\n const highlight = CSS.highlights.get(key);\n\n if (highlight) {\n highlight.add(range);\n } else {\n CSS.highlights.set(key, new Highlight().add(range));\n }\n if (selection[key] === void 0) {\n selection[key] =\n `::highlight(${key}){color:var(--${token});background-color:var(--${token}-bg);text-decoration:var(--${token}-text-decoration);text-shadow:var(--${token}-text-shadow);-webkit-text-stroke-width:var(--${token}-stroke-width);-webkit-text-stroke-color:var(--${token}-stroke-color);}`;\n }\n }\n function highlighter(\n el: HTMLPreElement,\n tokenize: TokenStream,\n selection: Record<string, string>,\n start = 0,\n ) {\n let pos = start;\n\n if (Array.isArray(tokenize)) {\n for (let i = 0, len = tokenize.length; i < len; i++) {\n const token = tokenize[i];\n\n if (typeof token !== 'object') {\n pos += token.length;\n continue;\n }\n pos = highlighter(el, token, selection, pos);\n }\n return pos;\n }\n if (typeof tokenize === 'object' && tokenize.type) {\n if (el.firstChild) {\n const token = (tokenize.alias ?? tokenize.type).toString();\n const key = id + token;\n const range = new Range();\n\n if (['deleted', 'inserted'].includes(token)) {\n // diff\n range.setStart(el.firstChild, pos + 2);\n } else {\n range.setStart(el.firstChild, pos);\n }\n if (Array.isArray(tokenize.content)) {\n pos = highlighter(el, tokenize.content, selection, pos);\n } else if (typeof tokenize.content === 'string') {\n pos += tokenize.content.length;\n }\n range.setEnd(el.firstChild, pos);\n updateRang(key, token, range, selection);\n }\n }\n\n return pos;\n }\n function syntax(\n language: Language = 'markup' as Language,\n value: string | null,\n clear?: boolean,\n prevCss = {},\n ) {\n if (timer) {\n clearTimeout(timer);\n timer = void 0;\n }\n const Prism = prismJS();\n\n if (!value || !Prism) return;\n timer = setTimeout(() => {\n clearTimeout(timer);\n if (CSS.highlights) {\n if (clear) {\n CSS.highlights.forEach((highlight, key) => {\n if (key.startsWith(id)) {\n highlight.clear();\n }\n });\n }\n const grammars = language.split(' ') as Language[],\n grammar = Prism.languages[grammars[0]];\n\n if (grammar) {\n highlighter(codeEl, Prism.tokenize(value, grammar), prevCss);\n }\n if (grammars.length > 1 || grammars[0] === 'git') {\n syntax(grammars[1], value, false, prevCss);\n } else {\n setHighlightCss(Object.values(prevCss).join(''));\n }\n } else {\n throw Error('不支持 CSS Highlights');\n }\n timer = void 0;\n }, 0);\n }\n createEffect(() => {\n syntax(props.language, code(), true);\n });\n onCleanup(() => {\n if (CSS.highlights) {\n for (const key of CSS.highlights.keys()) {\n if (key.startsWith(id)) {\n CSS.highlights.delete(key);\n }\n }\n }\n });\n\n return (\n <>\n <style textContent={isDark() ? darkCss : lightCss} />\n <style textContent={highlightCss()} />\n <style textContent={style} />\n <Show when={props.css}>\n <style textContent={css(props.css)} />\n </Show>\n <pre\n classList={{\n [`language-${props.language}`]: !!props.language,\n 'not-toolbar': !props.toolbar,\n [props.class!]: !props.edit,\n }}\n >\n <Show when={props.toolbar}>\n <div class=\"toolbar\" data-language={title()}>\n <CopyIcon class=\"toolbar-copy\" onClick={copy} />\n </div>\n </Show>\n <code ref={codeEl!} contenteditable={props.edit} spellcheck={false} onInput={change}>\n {code()}\n </code>\n </pre>\n </>\n );\n}\n\ncustomElement<CodeProps>(\n 'n-code',\n {\n class: void 0,\n code: void 0,\n language: void 0,\n children: void 0,\n edit: void 0,\n toolbar: void 0,\n css: void 0,\n onChange: void 0,\n title: void 0,\n },\n (_, opt) => {\n const { baseStyle } = theme;\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 clearAttribute(el, ['css', 'code', 'title']);\n el.replaceChildren();\n });\n return (\n <>\n <style textContent={baseStyle()} />\n <Code {...props} />\n </>\n );\n },\n);\nexport default Code;\n"],"names":["createEffect","createMemo","createResource","createSignal","createUniqueId","mergeProps","onCleanup","Show","untrack","isFunction","setClipboard","css","customElement","clearAttribute","theme","CopyIcon","darkCss","lightCss","style","Code","props","codeEl","timer","isDark","decoded","id","code","setCode","highlightCss","setHighlightCss","fetchPrism","window","Prism","disableWorkerMessageHandler","manual","default","prismJS","title","language","split","pop","copy","_next","test","decodeURIComponent","normalize","textContent","change","e","target","next","syntax","onChange","value","clear","prevCss","clearTimeout","setTimeout","CSS","highlights","forEach","highlight","key","startsWith","grammars","grammar","languages","highlighter","el","tokenize","selection","start","pos","Array","isArray","i","len","length","token","type","firstChild","alias","toString","range","Range","includes","setStart","content","setEnd","updateRang","get","add","set","Highlight","Object","values","join","Error","keys","delete","toolbar","class","edit","children","_","opt","baseStyle","element","val","dispatchEvent","CustomEvent","detail","replaceChildren"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["components/code/index.tsx"],"sourcesContent":["import {\n createEffect,\n createMemo,\n createResource,\n createSignal,\n createUniqueId,\n type JSX,\n mergeProps,\n onCleanup,\n Show,\n untrack,\n} from 'solid-js';\nimport { isFunction, setClipboard } from '@moneko/common';\nimport { css } from '@moneko/css';\nimport type { TokenStream } from 'prismjs';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport theme from '../theme';\n\nimport { CopyIcon } from './copy-icon';\nimport { darkCss, lightCss, style } from './style';\n\nexport type LanguageBase =\n | 'bash'\n | 'shell'\n | 'sh'\n | 'clike'\n | 'css'\n | 'docker'\n | 'dockerfile'\n | 'git'\n | 'javascript'\n | 'js'\n | 'json'\n | 'webmanifest'\n | 'jsx'\n | 'tsx'\n | 'less'\n | 'html'\n | 'mathml'\n | 'svg'\n | 'xml'\n | 'ssml'\n | 'atom'\n | 'rss'\n | 'regex'\n | 'rust'\n | 'sql'\n | 'swift'\n | 'toml'\n | 'typescript'\n | 'ts'\n | 'yaml'\n | 'yml'\n | 'matlab';\n\ntype ExcludeLanguage<T extends LanguageBase, U extends LanguageBase> = T extends U ? never : T;\n\nexport type Language =\n | LanguageBase\n | {\n [T in LanguageBase]: `${T} ${ExcludeLanguage<LanguageBase, T>}`;\n }[LanguageBase];\nexport interface CodeProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 内容 */\n code?: string;\n /** 语言（支持多种语言配置：如 `html css javascript`）\n * @default 'markup'\n */\n language?: Language;\n /** 支持编辑 */\n edit?: boolean;\n /** 开启代码块工具条 */\n toolbar?: boolean;\n /** 工具条上显示的文字 */\n title?: string;\n /** 编辑修改时的回调 */\n onChange?(code: string): void;\n children?: JSXElement;\n}\nexport type CodeElement = CustomElement<CodeProps>;\n\nfunction Code(props: CodeProps) {\n const { isDark } = theme;\n let codeEl: HTMLPreElement | undefined;\n let timer: NodeJS.Timeout | undefined;\n const decoded = /%[0-9A-Fa-f]{2}/;\n const id = createUniqueId();\n const [code, setCode] = createSignal<string>('');\n const [highlightCss, setHighlightCss] = createSignal<string>();\n\n async function fetchPrism() {\n if (!window.Prism) {\n return (await import('../prism')).default;\n }\n window.Prism.disableWorkerMessageHandler = true;\n window.Prism.manual = true;\n return window.Prism;\n }\n const [prismJS] = createResource('prism', fetchPrism);\n const title = createMemo(() => props.title || props.language?.split(' ').pop());\n\n createEffect(() => {\n let _next = props.code || '';\n\n if (decoded.test(_next)) {\n _next = decodeURIComponent(_next);\n }\n if (codeEl) {\n codeEl.normalize();\n if (_next !== codeEl.textContent) {\n setCode(_next);\n }\n }\n });\n\n function copy() {\n setClipboard(untrack(code), codeEl);\n }\n const change: JSX.InputEventHandlerUnion<HTMLElement, InputEvent> = function (e) {\n e.target.normalize();\n const next = e.target.textContent;\n\n syntax(props.language, next, true);\n if (isFunction(props.onChange)) {\n props.onChange(next);\n }\n };\n\n function updateRang(\n key: string,\n token: string,\n range: AbstractRange,\n selection: Record<string, string>,\n ) {\n const highlight = CSS.highlights.get(key);\n\n if (highlight) {\n highlight.add(range);\n } else {\n CSS.highlights.set(key, new Highlight().add(range));\n }\n if (selection[key] === void 0) {\n selection[key] =\n `::highlight(${key}){color:var(--${token});background-color:var(--${token}-bg);text-decoration:var(--${token}-text-decoration);text-shadow:var(--${token}-text-shadow);-webkit-text-stroke-width:var(--${token}-stroke-width);-webkit-text-stroke-color:var(--${token}-stroke-color);}`;\n }\n }\n function highlighter(\n el: HTMLPreElement,\n tokenize: TokenStream,\n selection: Record<string, string>,\n start = 0,\n ) {\n let pos = start;\n\n if (Array.isArray(tokenize)) {\n for (let i = 0, len = tokenize.length; i < len; i++) {\n const token = tokenize[i];\n\n if (typeof token !== 'object') {\n pos += token.length;\n continue;\n }\n pos = highlighter(el, token, selection, pos);\n }\n return pos;\n }\n if (typeof tokenize === 'object' && tokenize.type) {\n if (el.firstChild) {\n const token = (tokenize.alias ?? tokenize.type).toString();\n const key = id + token;\n const range = new Range();\n\n if (['deleted', 'inserted'].includes(token)) {\n // diff\n range.setStart(el.firstChild, pos + 2);\n } else {\n range.setStart(el.firstChild, pos);\n }\n if (Array.isArray(tokenize.content)) {\n pos = highlighter(el, tokenize.content, selection, pos);\n } else if (typeof tokenize.content === 'string') {\n pos += tokenize.content.length;\n }\n range.setEnd(el.firstChild, pos);\n updateRang(key, token, range, selection);\n }\n }\n\n return pos;\n }\n function syntax(\n language: Language = 'markup' as Language,\n value: string | null,\n clear?: boolean,\n prevCss = {},\n ) {\n if (timer) {\n clearTimeout(timer);\n timer = void 0;\n }\n const Prism = prismJS();\n\n if (!value || !Prism) return;\n timer = setTimeout(() => {\n clearTimeout(timer);\n if (CSS.highlights) {\n if (clear) {\n CSS.highlights.forEach((highlight, key) => {\n if (key.startsWith(id)) {\n highlight.clear();\n }\n });\n }\n const grammars = language.split(' ') as Language[],\n grammar = Prism.languages[grammars[0]];\n\n if (grammar && codeEl) {\n highlighter(codeEl, Prism.tokenize(value, grammar), prevCss);\n }\n if (grammars.length > 1 || grammars[0] === 'git') {\n syntax(grammars[1], value, false, prevCss);\n } else {\n setHighlightCss(Object.values(prevCss).join(''));\n }\n } else {\n throw Error('不支持 CSS Highlights');\n }\n timer = void 0;\n }, 0);\n }\n createEffect(() => {\n syntax(props.language, code(), true);\n });\n onCleanup(() => {\n if (CSS.highlights) {\n for (const key of CSS.highlights.keys()) {\n if (key.startsWith(id)) {\n CSS.highlights.delete(key);\n }\n }\n }\n });\n\n return (\n <>\n <style textContent={isDark() ? darkCss : lightCss} />\n <style textContent={highlightCss()} />\n <style textContent={style} />\n <Show when={props.css}>\n <style textContent={css(props.css)} />\n </Show>\n <pre\n classList={{\n [`language-${props.language}`]: !!props.language,\n 'not-toolbar': !props.toolbar,\n [props.class!]: !props.edit,\n }}\n >\n <Show when={props.toolbar}>\n <div class=\"toolbar\" data-language={title()}>\n <CopyIcon class=\"toolbar-copy\" onClick={copy} />\n </div>\n </Show>\n <code ref={codeEl} contenteditable={props.edit} spellcheck={false} onInput={change}>\n {code()}\n </code>\n </pre>\n </>\n );\n}\n\ncustomElement<CodeProps>(\n 'n-code',\n {\n class: void 0,\n code: void 0,\n language: void 0,\n children: void 0,\n edit: void 0,\n toolbar: void 0,\n css: void 0,\n onChange: void 0,\n title: void 0,\n },\n (_, opt) => {\n const { baseStyle } = theme;\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 clearAttribute(el, ['css', 'code', 'title']);\n el.replaceChildren();\n });\n return (\n <>\n <style textContent={baseStyle()} />\n <Code {...props} />\n </>\n );\n },\n);\nexport default Code;\n"],"names":["createEffect","createMemo","createResource","createSignal","createUniqueId","mergeProps","onCleanup","Show","untrack","isFunction","setClipboard","css","customElement","clearAttribute","theme","CopyIcon","darkCss","lightCss","style","Code","props","codeEl","timer","isDark","decoded","id","code","setCode","highlightCss","setHighlightCss","fetchPrism","window","Prism","disableWorkerMessageHandler","manual","default","prismJS","title","language","split","pop","copy","_next","test","decodeURIComponent","normalize","textContent","change","e","target","next","syntax","onChange","value","clear","prevCss","clearTimeout","setTimeout","CSS","highlights","forEach","highlight","key","startsWith","grammars","grammar","languages","highlighter","el","tokenize","selection","start","pos","Array","isArray","i","len","length","token","type","firstChild","alias","toString","range","Range","includes","setStart","content","setEnd","updateRang","get","add","set","Highlight","Object","values","join","Error","keys","delete","toolbar","class","edit","children","_","opt","baseStyle","element","val","dispatchEvent","CustomEvent","detail","replaceChildren"],"mappings":"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"}
|
package/es/code/style.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import{css as o}from"@moneko/css";export const style=o`
|
|
2
2
|
:host {
|
|
3
|
-
--code-font-stack:
|
|
3
|
+
--code-font-stack:
|
|
4
|
+
'Liberation Mono', monaco, menlo, consolas, 'Source Code Pro', 'Ubuntu Mono',
|
|
4
5
|
'Microsoft Yahei', '微软雅黑', courier, 'Helvetica Neue', 'Lantinghei SC', stxihei, wenquanyi,
|
|
5
6
|
sans-serif;
|
|
6
7
|
|
package/es/code/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/code/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n --code-font-stack
|
|
1
|
+
{"version":3,"sources":["components/code/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n --code-font-stack:\n 'Liberation Mono', monaco, menlo, consolas, 'Source Code Pro', 'Ubuntu Mono',\n 'Microsoft Yahei', '微软雅黑', courier, 'Helvetica Neue', 'Lantinghei SC', stxihei, wenquanyi,\n sans-serif;\n\n position: relative;\n display: block;\n box-sizing: border-box;\n }\n\n .toolbar::after,\n .toolbar-copy,\n pre,\n code {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n }\n\n [data-copy]::before {\n position: absolute;\n z-index: 1;\n display: inline-block;\n margin: auto;\n border: 1px solid;\n border-radius: var(--border-radius);\n padding: 4px 8px;\n font-size: var(--font-size-sm);\n transition:\n background-color 0.3s,\n color 0.3s,\n border-color 0.3s;\n content: '复制成功';\n inline-size: fit-content;\n animation-fill-mode: forwards;\n inset-block-start: 32px;\n inset-inline: 0;\n }\n\n [data-copy='success']::before {\n border-color: var(--success-border);\n color: var(--success-color);\n background-color: var(--success-bg);\n animation: copy-slide-in var(--transition-duration) var(--transition-timing-function);\n }\n\n [data-copy='failure']::before {\n border-color: var(--error-border);\n color: var(--error-color);\n background-color: var(--error-bg);\n animation:\n copy-slide-in var(--transition-duration) var(--transition-timing-function),\n error 1s var(--transition-timing-function) 1s;\n content: '复制失败';\n }\n\n [data-copy-exit]::before {\n animation: copy-slide-out var(--transition-duration) forwards var(--transition-timing-function);\n }\n\n pre,\n code {\n display: block;\n border: none;\n border-radius: var(--border-radius);\n font-size: var(--font-size);\n font-family: var(--code-font-stack);\n text-align: start;\n white-space: pre-wrap;\n outline: none;\n text-shadow: none;\n overflow-wrap: normal;\n tab-size: 4;\n hyphens: none;\n max-inline-size: 100%;\n line-height: 1.8;\n transition-property: box-shadow, background-color, border-color, color;\n }\n\n pre {\n position: relative;\n overflow: visible;\n margin: auto;\n color: var(--code-color);\n background-color: var(--primary-component-bg);\n box-shadow: 0 2px 8px 0 var(--primary-shadow);\n }\n\n pre > code {\n overflow: auto;\n padding: 32px 16px 8px;\n pointer-events: auto;\n }\n\n pre.language-css,\n pre.language-less,\n pre.language-regex {\n color: var(--code-lang-style-color);\n }\n\n pre > .toolbar::after {\n position: absolute;\n z-index: 2;\n display: block;\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n font-size: var(--font-size);\n font-family: Ubuntu, sans-serif;\n font-weight: bold;\n text-align: center;\n color: var(--text-color);\n background-color: var(--code-toolbar-bg, rgb(220 224 229 / 50%));\n box-shadow: 0 1px 5px rgb(0 0 0 / 10%);\n text-transform: uppercase;\n backdrop-filter: blur(10px);\n content: attr(data-language) '';\n block-size: 24px;\n inline-size: 100%;\n line-height: 24px;\n transition-property: background-color, border-color, color;\n inset-block-start: 0;\n inset-inline-start: 0;\n }\n\n pre > .toolbar::before {\n position: absolute;\n z-index: 3;\n display: inline-block;\n border-radius: var(--border-radius);\n text-align: center;\n background-color: #fc625d;\n box-shadow:\n 0 0 0 4px #fc625d,\n 20px 0 0 4px #fdbc40,\n 40px 0 0 4px #35cd4b;\n cursor: pointer;\n content: '';\n block-size: 4px;\n inline-size: 4px;\n inset-block-start: 10px;\n inset-inline-start: 12px;\n }\n\n pre > .toolbar > .toolbar-copy {\n position: absolute;\n z-index: 3;\n border: none;\n padding: 0;\n font-size: var(--font-size, 14px);\n color: var(--text-color);\n background: none;\n outline: none;\n cursor: pointer;\n inset-block-start: 5px;\n inset-inline-end: 5px;\n }\n\n .toolbar > .toolbar-copy:hover {\n color: var(--primary-color, #5794ff);\n }\n\n pre > .toolbar > .toolbar-copy:active {\n transform: scale(0.95);\n }\n\n .not-toolbar > code {\n padding-block-start: 8px !important;\n }\n\n pre::-webkit-scrollbar {\n block-size: 5px;\n inline-size: 5px;\n }\n\n @keyframes copy-slide-in {\n from {\n opacity: 0;\n transform: translate3d(0, -100%, 0) scale(0);\n }\n\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0) scale(1);\n }\n }\n\n @keyframes copy-slide-out {\n from {\n opacity: 1;\n transform: translate3d(0, 0, 0) scale(1);\n }\n\n to {\n opacity: 0;\n transform: translate3d(0, -100%, 0) scale(0);\n }\n }\n`;\nexport const darkCss = css({\n ':host': {\n '--code-color': '#eee',\n '--code-lang-style-color': '#fd9170',\n '--code-toolbar-bg': 'rgb(63, 63, 63, 0.7)',\n '--atrule': '#c792ea',\n '--attr-name': '#9cdcfe',\n '--attr-value': '#ce9178',\n '--attr-equals': '#ccc',\n '--attribute': '#a5e844',\n '--boolean': '#c792ea',\n '--builtin': '#ffcb6b',\n '--cdata': '#80cbc4',\n '--char': '#80cbc4',\n '--class': '#ffcb6b',\n '--class-name': '#f2ff00',\n '--comment': '#616161',\n '--constant': '#c792ea',\n '--doctype': '#616161',\n '--entity': '#f66',\n '--function': '#dcdcaa',\n '--hexcode': '#f2ff00',\n '--id': '#c792ea',\n '--important': '#c792ea',\n '--keyword': '#c792ea',\n '--number': '#fd9170',\n '--operator': '#569cd6',\n '--prolog': '#616161',\n '--property': '#80cbc4',\n '--pseudo-class': '#a5e844',\n '--pseudo-element': '#a5e844',\n '--punctuation': '#89ddff',\n '--regex': '#f2ff00',\n '--selector': '#f66',\n '--string': '#a5e844',\n '--symbol': '#c792ea',\n '--tag': '#569cd6',\n '--unit': '#fd9170',\n '--url': '#f66',\n '--variable': '#f66',\n '--inserted-bg': 'rgba(0, 255, 128, .15)',\n '--deleted-bg': 'rgba(255, 0, 0, .15)',\n },\n});\nexport const lightCss = css({\n ':host': {\n '--code-color': '#90a4ae',\n '--code-lang-style-color': '#f76d47',\n '--namespace': 'rgba(56, 64, 68, 0.7)',\n '--tag': '#4b69c6',\n '--atrule': '#7c4dff',\n '--attr-name': '#39adb5',\n '--attr-value': '#f6a434',\n '--attr-equals': '#90a4ae',\n '--attribute': '#f6a434',\n '--boolean': '#7c4dff',\n '--builtin': '#39adb5',\n '--cdata': '#39adb5',\n '--char': '#39adb5',\n '--class': '#39adb5',\n '--class-name': '#6182b8',\n '--comment': '#aabfc9',\n '--constant': '#7c4dff',\n '--doctype': '#aabfc9',\n '--entity': '#e53935',\n '--hexcode': '#f76d47',\n '--id': '#7c4dff',\n '--important': '#7c4dff',\n '--keyword': '#7c4dff',\n '--number': '#f76d47',\n '--operator': '#91b3e0',\n '--prolog': '#aabfc9',\n '--property': '#39adb5',\n '--pseudo-class': '#f6a434',\n '--pseudo-element': '#f6a434',\n '--punctuation': '#39adb5',\n '--regex': '#6182b8',\n '--selector': '#e53935',\n '--string': '#f6a434',\n '--symbol': '#7c4dff',\n '--unit': '#f76d47',\n '--url': '#e53935',\n '--variable': '#e53935',\n '--function': '#4078f2',\n '--name': '#39adb5',\n '--prefix-inserted': 'green',\n '--prefix-deleted': 'red',\n '--inserted-bg': 'rgba(0, 255, 128, .1)',\n '--deleted-bg': 'rgba(255, 0, 0, .1)',\n },\n});\n"],"names":["css","style","darkCss","lightCss"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqMzB,CAAC,AAAC,AACF,QAAO,MAAME,QAAUF,EAAI,CACzB,QAAS,CACP,eAAgB,OAChB,0BAA2B,UAC3B,oBAAqB,uBACrB,WAAY,UACZ,cAAe,UACf,eAAgB,UAChB,gBAAiB,OACjB,cAAe,UACf,YAAa,UACb,YAAa,UACb,UAAW,UACX,SAAU,UACV,UAAW,UACX,eAAgB,UAChB,YAAa,UACb,aAAc,UACd,YAAa,UACb,WAAY,OACZ,aAAc,UACd,YAAa,UACb,OAAQ,UACR,cAAe,UACf,YAAa,UACb,WAAY,UACZ,aAAc,UACd,WAAY,UACZ,aAAc,UACd,iBAAkB,UAClB,mBAAoB,UACpB,gBAAiB,UACjB,UAAW,UACX,aAAc,OACd,WAAY,UACZ,WAAY,UACZ,QAAS,UACT,SAAU,UACV,QAAS,OACT,aAAc,OACd,gBAAiB,yBACjB,eAAgB,sBAClB,CACF,EAAG,AACH,QAAO,MAAMG,SAAWH,EAAI,CAC1B,QAAS,CACP,eAAgB,UAChB,0BAA2B,UAC3B,cAAe,wBACf,QAAS,UACT,WAAY,UACZ,cAAe,UACf,eAAgB,UAChB,gBAAiB,UACjB,cAAe,UACf,YAAa,UACb,YAAa,UACb,UAAW,UACX,SAAU,UACV,UAAW,UACX,eAAgB,UAChB,YAAa,UACb,aAAc,UACd,YAAa,UACb,WAAY,UACZ,YAAa,UACb,OAAQ,UACR,cAAe,UACf,YAAa,UACb,WAAY,UACZ,aAAc,UACd,WAAY,UACZ,aAAc,UACd,iBAAkB,UAClB,mBAAoB,UACpB,gBAAiB,UACjB,UAAW,UACX,aAAc,UACd,WAAY,UACZ,WAAY,UACZ,SAAU,UACV,QAAS,UACT,aAAc,UACd,aAAc,UACd,SAAU,UACV,oBAAqB,QACrB,mBAAoB,MACpB,gBAAiB,wBACjB,eAAgB,qBAClB,CACF,EAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/color-palette/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .palette {\n --alpha-gradient: repeating-conic-gradient(#eee 0 25%, transparent 0 50%) 0 / 10px 10px;\n\n inline-size: 100%;\n box-sizing: border-box;\n user-select: none;\n }\n\n .preview,\n .preview::after,\n .color i,\n .color i::before {\n border-radius: var(--border-radius);\n }\n\n .preview {\n margin-inline-start: 6px;\n inline-size: 46px;\n min-block-size: 26px;\n line-height: 1;\n font-family: sans-serif;\n text-align: center;\n color: #fff;\n cursor: pointer;\n background: var(--alpha-gradient);\n\n &::after {\n display: block;\n inline-size: 100%;\n block-size: 100%;\n background-color: var(--c);\n box-shadow:\n rgb(0 0 0 / 10%) 0 0 0 1px inset,\n rgb(0 0 0 / 10%) 0 0 4px inset;\n text-shadow: var(--text-shadow);\n content: '';\n }\n\n &:hover::after {\n font-size: 24px;\n content: '⎘';\n }\n\n &[data-copy='success']::after {\n font-size: 16px;\n line-height: 26px;\n content: '✓';\n }\n }\n\n .form {\n display: flex;\n gap: 6px;\n }\n\n .input {\n flex: 1;\n }\n\n .picker {\n position: relative;\n border-radius: 4px;\n block-size: 150px;\n background:\n linear-gradient(to top, hsl(0deg 0% 0% / calc(var(--a))), transparent) 0 / 100%,\n linear-gradient(\n to left,\n hsl(calc(var(--h)) 100% 50% / calc(var(--a))),\n hsl(0deg 0% 100% / calc(var(--a)))\n )\n 0 / 100%,\n var(--alpha-gradient);\n opacity: 1;\n transition: opacity var(--transition-duration);\n user-select: none;\n cursor: crosshair;\n\n &:active {\n opacity: 0.99;\n }\n\n &::after {\n position: absolute;\n inset-block-start: calc((100 - var(--v)) * 1%);\n inset-inline-start: calc(var(--s) * 1%);\n border-radius: 3px;\n inline-size: 6px;\n block-size: 6px;\n pointer-events: none;\n content: '';\n transform: translate(-50%, -50%);\n box-shadow:\n inset 0 0 0 1px #fff,\n 0 0 1px rgb(0 0 0 / 20%),\n inset 0 0 2.5px 0 rgb(0 0 0 / 20%);\n }\n }\n\n .chooser {\n display: flex;\n padding: 8px 0;\n }\n\n .range {\n display: flex;\n flex-direction: column;\n gap: 6px;\n flex: 1;\n }\n\n .hue {\n background-image: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);\n }\n\n .opacity {\n background
|
|
1
|
+
{"version":3,"sources":["components/color-palette/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .palette {\n --alpha-gradient: repeating-conic-gradient(#eee 0 25%, transparent 0 50%) 0 / 10px 10px;\n\n inline-size: 100%;\n box-sizing: border-box;\n user-select: none;\n }\n\n .preview,\n .preview::after,\n .color i,\n .color i::before {\n border-radius: var(--border-radius);\n }\n\n .preview {\n margin-inline-start: 6px;\n inline-size: 46px;\n min-block-size: 26px;\n line-height: 1;\n font-family: sans-serif;\n text-align: center;\n color: #fff;\n cursor: pointer;\n background: var(--alpha-gradient);\n\n &::after {\n display: block;\n inline-size: 100%;\n block-size: 100%;\n background-color: var(--c);\n box-shadow:\n rgb(0 0 0 / 10%) 0 0 0 1px inset,\n rgb(0 0 0 / 10%) 0 0 4px inset;\n text-shadow: var(--text-shadow);\n content: '';\n }\n\n &:hover::after {\n font-size: 24px;\n content: '⎘';\n }\n\n &[data-copy='success']::after {\n font-size: 16px;\n line-height: 26px;\n content: '✓';\n }\n }\n\n .form {\n display: flex;\n gap: 6px;\n }\n\n .input {\n flex: 1;\n }\n\n .picker {\n position: relative;\n border-radius: 4px;\n block-size: 150px;\n background:\n linear-gradient(to top, hsl(0deg 0% 0% / calc(var(--a))), transparent) 0 / 100%,\n linear-gradient(\n to left,\n hsl(calc(var(--h)) 100% 50% / calc(var(--a))),\n hsl(0deg 0% 100% / calc(var(--a)))\n )\n 0 / 100%,\n var(--alpha-gradient);\n opacity: 1;\n transition: opacity var(--transition-duration);\n user-select: none;\n cursor: crosshair;\n\n &:active {\n opacity: 0.99;\n }\n\n &::after {\n position: absolute;\n inset-block-start: calc((100 - var(--v)) * 1%);\n inset-inline-start: calc(var(--s) * 1%);\n border-radius: 3px;\n inline-size: 6px;\n block-size: 6px;\n pointer-events: none;\n content: '';\n transform: translate(-50%, -50%);\n box-shadow:\n inset 0 0 0 1px #fff,\n 0 0 1px rgb(0 0 0 / 20%),\n inset 0 0 2.5px 0 rgb(0 0 0 / 20%);\n }\n }\n\n .chooser {\n display: flex;\n padding: 8px 0;\n }\n\n .range {\n display: flex;\n flex-direction: column;\n gap: 6px;\n flex: 1;\n }\n\n .hue {\n background-image: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);\n }\n\n .opacity {\n background:\n linear-gradient(\n to right,\n hsl(calc(var(--h)) 100% 50% / 0%),\n hsl(calc(var(--h)) 100% 50% / 100%)\n ),\n var(--alpha-gradient);\n }\n\n .slider {\n flex: 1;\n display: block;\n margin: 0;\n border-radius: 5px;\n inline-size: 100%;\n block-size: 10px;\n outline: 0;\n cursor: pointer;\n pointer-events: all;\n appearance: none;\n\n &::-webkit-slider-runnable-track {\n position: relative;\n display: flex;\n align-items: center;\n }\n\n &::-webkit-slider-thumb {\n appearance: none;\n position: relative;\n border-radius: 50%;\n inline-size: 10px;\n block-size: 10px;\n background: #fff;\n box-shadow: 0 0 10px rgb(0 0 0 / 10%);\n transition: 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);\n transform: scale(1.2);\n }\n\n &::-moz-range-thumb {\n position: relative;\n border: 0;\n border-radius: 50%;\n background: #fff;\n box-shadow: 0 0 10px rgb(0 0 0 / 10%);\n transition: 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);\n inline-size: 10px;\n block-size: 10px;\n transform: scale(1.2);\n box-sizing: border-box;\n pointer-events: none;\n }\n\n &::-webkit-slider-thumb:active,\n &:focus::-webkit-slider-thumb {\n transform: scale(1.5);\n }\n\n &::-moz-range-thumb:active,\n &:focus::-moz-range-thumb {\n transform: scale(1.5);\n }\n }\n\n .color {\n display: flex;\n padding-block-start: 8px;\n gap: 5px 9px;\n flex-wrap: wrap;\n\n i {\n position: relative;\n border: 0;\n font-size: 28px;\n text-align: center;\n background-color: var(--c, transparent);\n outline: 0;\n cursor: pointer;\n inline-size: 20px;\n block-size: 20px;\n font-style: normal;\n line-height: 17px;\n\n &::before,\n &::after {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 100%;\n content: '';\n }\n\n &::before {\n z-index: -1;\n background: var(--alpha-gradient);\n }\n\n &.eye-dropper::before {\n content: '⍝';\n }\n\n &::after {\n border-radius: inherit;\n background-color: var(--c, transparent);\n opacity: 0;\n transition:\n var(--transition-duration) transform var(--transition-timing-function),\n var(--transition-duration) opacity var(--transition-timing-function);\n }\n\n &:hover::after {\n transform: translate3d(2px, 2px, 0);\n opacity: 0.3;\n }\n }\n }\n`;\n\nexport const switchCss = css`\n .switch {\n block-size: 25px;\n line-height: 25px;\n float: inline-start;\n border-radius: var(--border-radius);\n cursor: pointer;\n inline-size: 46px;\n font-size: 12px;\n text-align: center;\n color: var(--on-primary-selection);\n background-color: var(--primary-selection);\n text-transform: uppercase;\n outline-color: var(--primary-outline);\n transition-property: background-color, color, outline-color, border-radius, transform;\n transition-timing-function: var(--transition-timing-function);\n transition-duration: var(--transition-duration);\n\n &:hover {\n color: var(--primary-hover);\n }\n\n &:active {\n color: var(--primary-active);\n transform: scale(0.98);\n }\n }\n`;\n"],"names":["css","style","switchCss"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyOzB,CAAC,AAAC,AAEF,QAAO,MAAME,UAAYF,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2B7B,CAAC,AAAC"}
|
package/es/modal/index.d.ts
CHANGED
|
@@ -21,11 +21,11 @@ export interface ModalProps {
|
|
|
21
21
|
/**
|
|
22
22
|
* 自定义关闭图标, 设置为 null 或 false 时隐藏关闭按钮
|
|
23
23
|
*/
|
|
24
|
-
closeIcon?: JSXElement;
|
|
24
|
+
closeIcon?: JSXElement | (() => JSXElement);
|
|
25
25
|
/** 内容 */
|
|
26
|
-
content?:
|
|
26
|
+
content?: JSXElement | (() => JSXElement);
|
|
27
27
|
/** 标题 */
|
|
28
|
-
title?:
|
|
28
|
+
title?: JSXElement | (() => JSXElement);
|
|
29
29
|
/** 遮罩模糊
|
|
30
30
|
* @default false
|
|
31
31
|
*/
|
package/es/modal/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e;function
|
|
1
|
+
var e;function t(e,t,o,n,r,l,s){try{var i=e[l](s),c=i.value}catch(e){o(e);return}i.done?t(c):Promise.resolve(c).then(n,r)}function o(e){return function(){var o=this,n=arguments;return new Promise(function(r,l){var s=e.apply(o,n);function i(e){t(s,r,l,i,c,"next",e)}function c(e){t(s,r,l,i,c,"throw",e)}i(void 0)})}}function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e}).apply(this,arguments)}import{use as r}from"solid-js/web";import{template as l}from"solid-js/web";import{spread as s}from"solid-js/web";import{mergeProps as i}from"solid-js/web";import{memo as c}from"solid-js/web";import{insert as a}from"solid-js/web";import{getOwner as d}from"solid-js/web";import{effect as m}from"solid-js/web";import{delegateEvents as p}from"solid-js/web";import{createComponent as u}from"solid-js/web";import{addEventListener as v}from"solid-js/web";let f=l('<span class="modal-close">'),g=l('<n-button class="modal-close">',!0,!1),y=l("<style> "),h=l("<style>"),b=l(`<n-button class="modal-close">⛌`,!0,!1),w=l("<n-button>",!0,!1),k=l('<n-button type="primary">',!0,!1),x=l('<div class="modal-footer">'),$=l('<div class="portal"><div class="modal-content"><div class="modal-header"><strong class="modal-title"></strong></div><div class="modal-body">');import{createEffect as C,createMemo as _,createSignal as j,mergeProps as E,onCleanup as L,onMount as O,Show as P,untrack as T}from"solid-js";import{Portal as I}from"solid-js/web";import S from"@moneko/common/lib/isFunction";import B from"@moneko/common/lib/passiveSupported";import{customElement as X}from"solid-element";import{clearAttribute as Y}from"../basic-config";import D from"./hooks";import{defaultPosi as F}from"./posi";import H from"./store";import{style as W}from"./style";export var OpenState;function q(e){let t,l;let p=document.documentElement,{setNum:X}=H,Y=E({okText:"确认",cancelText:"取消"},e),[D,q]=j(!1),[z,A]=j(!1),[G,J]=j("closed"),[K,M]=j(F),N=[0,0],Q=_(()=>{let{x:e,y:t,width:o,height:n}=K();return`.portal { --y: ${-(t-n/2)}px;--x: ${-(e-o/2)}px; --movement-x: ${N[0]}px; --movement-y: ${N[1]}px;}`});function R(e){return U.apply(this,arguments)}function U(){return(U=o(function*(e){if(A(!1),"closeing"===e&&(l.style.removeProperty("--x"),l.style.removeProperty("--y"),S(Y.onCancel)&&(A(!0),!(yield Y.onCancel())))){A(!1);return}J(e),null==Y.onOpenChange||Y.onOpenChange.call(Y,e)})).apply(this,arguments)}function V(e){e.preventDefault()}function Z(e){V(e),"keydown"===e.type?Y.escClosable&&"Escape"===e.key&&R("closeing"):R("closeing")}function ee(){"closeing"===G()&&R("closed")}function et(e){return eo.apply(this,arguments)}function eo(){return(eo=o(function*(e){if(V(e),S(Y.onOk)&&(A(!0),!(yield Y.onOk(e)))){A(!1);return}J("closeing"),null==Y.onOpenChange||Y.onOpenChange.call(Y,"closeing")})).apply(this,arguments)}function en(e){V(e),Y.maskClosable&&e.target===t&&R("closeing")}function er(e){M(t=>n({},t,{x:p.clientWidth/2-e.clientX,y:p.clientHeight/2-e.clientY}))}C(()=>{void 0!==Y.open&&Y.open!==T(G)&&J(Y.open)}),C(()=>{"open"===G()?(X(e=>e+1),p.addEventListener("mousewheel",V,{passive:!1}),Y.escClosable&&p.addEventListener("keydown",Z,!1)):"closeing"===G()?X(e=>e-1):p.addEventListener("click",er,!0),L(()=>{p.removeEventListener("mousewheel",V,!1),p.removeEventListener("keydown",Z,!1),p.removeEventListener("click",er,!0)})});let el=_(()=>null===Y.closeIcon||!1===Y.closeIcon?null:["function","object"].includes(typeof Y.closeIcon)?()=>(()=>{let e=f();return a(e,(()=>{let e=c(()=>!!S(Y.closeIcon));return()=>e()?Y.closeIcon():Y.closeIcon})()),e})():()=>(()=>{let e=g();return v(e,"click",Z,!0),e.danger=!0,e.circle=!0,e.flat=!0,e._$owner=d(),a(e,()=>Y.closeIcon),e})());function es(e){l&&(N[0]=N[0]+e.movementX,N[1]=N[1]+e.movementY,t.style.setProperty("--movement-x",`${N[0]}px`),t.style.setProperty("--movement-y",`${N[1]}px`),l.style.setProperty("--x",`${N[0]}px`),l.style.setProperty("--y",`${N[1]}px`))}function ei(e){q(e.target===l)}function ec(){q(!1)}C(()=>{D()&&document.body.addEventListener("mousemove",es,{passive:B}),L(()=>{document.body.removeEventListener("mousemove",es,!1)})}),O(()=>{document.body.addEventListener("mouseup",ec,{passive:B})}),L(()=>{document.body.removeEventListener("mouseup",ec,!1)});let ea=_(()=>S(Y.title)?Y.title():Y.title),ed=_(()=>S(Y.content)?Y.content():Y.content);return u(P,{get when(){return"closed"!==G()},get children(){return u(I,{useShadow:!0,get children(){return[(()=>{let e=y(),t=e.firstChild;return m(()=>t.data=Q()),e})(),(()=>{let e=h();return e.textContent=W,e})(),(()=>{let e=$(),o=t,n=e.firstChild,c=l,p=n.firstChild,f=p.firstChild,g=p.nextSibling;return v(e,"click",en,!0),v(e,"animationend",ee),"function"==typeof o?r(o,e):t=e,v(n,"mousedown",ei,!0),"function"==typeof c?r(c,n):l=n,a(f,ea),a(n,u(P,{get when(){return void 0===Y.closeIcon},get fallback(){return el()},get children(){let e=b();return v(e,"click",Z,!0),e.danger=!0,e.circle=!0,e.flat=!0,e._$owner=d(),e}}),g),a(g,ed),a(n,u(P,{get when(){return Y.cancelText||Y.okText},get children(){let e=x();return a(e,u(P,{get when(){return Y.cancelText},get children(){let e=w();return s(e,i(()=>Y.cancelProps,{onClick:Z}),!1,!0),e._$owner=d(),a(e,()=>Y.cancelText),e}}),null),a(e,u(P,{get when(){return Y.okText},get children(){let e=k();return e.fill=!0,s(e,i(()=>Y.okProps,{get loading(){return z()},onClick:et}),!1,!0),e._$owner=d(),a(e,()=>Y.okText),e}}),null),e}}),null),m(t=>{let o=!("open"!==G()),r="open"!==G(),l=!!Y.maskBlur,s=!!Y.centered,i=!!D();return o!==t._v$&&e.classList.toggle("open",t._v$=o),r!==t._v$2&&e.classList.toggle("closeing",t._v$2=r),l!==t._v$3&&e.classList.toggle("mask-blur",t._v$3=l),s!==t._v$4&&n.classList.toggle("centered",t._v$4=s),i!==t._v$5&&n.classList.toggle("moveing",t._v$5=i),t},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0,_v$5:void 0}),e})()]}})}})}(e=OpenState||(OpenState={})).closed="closed",e.closeing="closeing",e.open="open",X("n-modal",{open:"closed",maskClosable:!0,escClosable:!0,onOpenChange:void 0,closeIcon:void 0,content:void 0,title:void 0,maskBlur:void 0,okText:void 0,cancelText:void 0,okProps:void 0,cancelProps:void 0,centered:void 0},(e,t)=>{let o=t.element,n=E({onOpenChange(e){t.element.dispatchEvent(new CustomEvent("openchange",{detail:e}))}},e);return C(()=>{Y(o,["content"])}),u(q,n)}),q.open=D;export default q;p(["click","mousedown"]);
|
package/es/modal/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/modal/index.tsx"],"sourcesContent":["import {\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n onCleanup,\n onMount,\n Show,\n untrack,\n} from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { isFunction, passiveSupported } from '@moneko/common';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport type { ButtonProps } from '../button';\n\nimport open from './hooks';\nimport { defaultPosi } from './posi';\nimport modalStore from './store';\nimport { style } from './style';\n\n/**\n * API\n * @since 2.6.0\n */\nexport interface ModalProps {\n /** 是否打开模态框 */\n open?: OpenStateKey;\n /** 开启关闭的回调函数 */\n onOpenChange?: (open: OpenStateKey) => void;\n /** 点击遮罩关闭\n * @default true\n */\n maskClosable?: boolean;\n /** 通过 `esc` 按键关闭\n * @default true\n */\n escClosable?: boolean;\n /**\n * 自定义关闭图标, 设置为 null 或 false 时隐藏关闭按钮\n */\n closeIcon?: JSXElement;\n /** 内容 */\n content?: HTMLElement | string | JSX.Element;\n /** 标题 */\n title?: HTMLElement | string | JSX.Element;\n /** 遮罩模糊\n * @default false\n */\n maskBlur?: boolean;\n okText?: string | false | null;\n cancelText?: string | false | null;\n onCancel?(): Promise<boolean> | boolean;\n onOk?(e: MouseEvent | Event): Promise<boolean> | boolean;\n okProps?: Omit<ButtonProps, 'children' | 'onClick' | 'loading'>;\n cancelProps?: Omit<ButtonProps, 'children' | 'onClick'>;\n centered?: boolean;\n}\n\n/**\n * OpenStateKey\n */\nexport enum OpenState {\n /** 完全关闭 */\n closed = 'closed',\n /** 正在关闭 */\n closeing = 'closeing',\n /** 打开 */\n open = 'open',\n}\nexport type OpenStateKey = keyof typeof OpenState;\nexport type ModalElement = CustomElement<ModalProps, 'onOpenChange'>;\n\nfunction Modal(_: ModalProps) {\n const doc = document.documentElement;\n const { setNum } = modalStore;\n const props = mergeProps(\n {\n okText: '确认',\n cancelText: '取消',\n },\n _,\n );\n const [moveing, setMoveing] = createSignal(false);\n const [loading, setLoading] = createSignal(false);\n const [open, setOpen] = createSignal<OpenStateKey>('closed');\n const [posi, setPosi] = createSignal(defaultPosi);\n const movement = [0, 0];\n let portal: HTMLDivElement | undefined;\n let modal: HTMLDivElement | undefined;\n\n const getCss = createMemo(() => {\n const { x, y, width, height } = posi();\n\n return `.portal { --y: ${-(y - height / 2)}px;--x: ${-(x - width / 2)}px; --movement-x: ${movement[0]}px; --movement-y: ${movement[1]}px;}`;\n });\n\n async function openChange(visi: OpenStateKey) {\n setLoading(false);\n if (visi === OpenState.closeing) {\n modal!.style.removeProperty('--x');\n modal!.style.removeProperty('--y');\n if (isFunction(props.onCancel)) {\n setLoading(true);\n if (!(await props.onCancel())) {\n setLoading(false);\n return;\n }\n }\n }\n setOpen(visi);\n props.onOpenChange?.(visi);\n }\n function preventDefault(e: Event) {\n e.preventDefault();\n }\n function close(e: KeyboardEvent | Event) {\n preventDefault(e);\n if (e.type === 'keydown') {\n if (props.escClosable && (e as KeyboardEvent).key === 'Escape') {\n openChange(OpenState.closeing);\n }\n } else {\n openChange(OpenState.closeing);\n }\n }\n function handleDestroy() {\n if (open() === OpenState.closeing) {\n openChange(OpenState.closed);\n }\n }\n async function handleOk(e: MouseEvent | Event) {\n preventDefault(e);\n if (isFunction(props.onOk)) {\n setLoading(true);\n if (!(await props.onOk(e))) {\n setLoading(false);\n return;\n }\n }\n\n setOpen(OpenState.closeing);\n props.onOpenChange?.(OpenState.closeing);\n }\n function portalClick(e: Event) {\n preventDefault(e);\n if (props.maskClosable && e.target === portal) {\n openChange(OpenState.closeing);\n }\n }\n\n createEffect(() => {\n if (props.open !== void 0 && props.open !== untrack(open)) {\n setOpen(props.open);\n }\n });\n\n function point(e: MouseEvent) {\n setPosi((prev) => ({\n ...prev,\n x: doc.clientWidth / 2 - e.clientX,\n y: doc.clientHeight / 2 - e.clientY,\n }));\n }\n createEffect(() => {\n if (open() === OpenState.open) {\n setNum((prev) => prev + 1);\n doc.addEventListener('mousewheel', preventDefault, {\n passive: false,\n });\n\n if (props.escClosable) {\n doc.addEventListener('keydown', close, false);\n }\n } else if (open() === OpenState.closeing) {\n setNum((prev) => prev - 1);\n } else {\n doc.addEventListener('click', point, true);\n }\n\n onCleanup(() => {\n doc.removeEventListener('mousewheel', preventDefault, false);\n doc.removeEventListener('keydown', close, false);\n doc.removeEventListener('click', point, true);\n });\n });\n const closeIcon = createMemo(() => {\n if (props.closeIcon === null || props.closeIcon === false) {\n return null;\n }\n if (['function', 'object'].includes(typeof props.closeIcon)) {\n return () => <span class=\"modal-close\">{props.closeIcon}</span>;\n }\n return () => (\n <n-button class=\"modal-close\" danger={true} circle={true} flat={true} onClick={close}>\n {props.closeIcon}\n </n-button>\n );\n });\n\n function move(ev: MouseEvent) {\n if (modal) {\n movement[0] = movement[0] + ev.movementX;\n movement[1] = movement[1] + ev.movementY;\n\n portal!.style.setProperty('--movement-x', `${movement[0]}px`);\n portal!.style.setProperty('--movement-y', `${movement[1]}px`);\n modal!.style.setProperty('--x', `${movement[0]}px`);\n modal!.style.setProperty('--y', `${movement[1]}px`);\n }\n }\n\n function mouseDown(e: MouseEvent) {\n setMoveing(e.target === modal);\n }\n function mouseUp() {\n setMoveing(false);\n }\n createEffect(() => {\n if (moveing()) {\n document.body.addEventListener('mousemove', move, {\n passive: passiveSupported,\n });\n }\n onCleanup(() => {\n document.body.removeEventListener('mousemove', move, false);\n });\n });\n\n onMount(() => {\n document.body.addEventListener('mouseup', mouseUp, {\n passive: passiveSupported,\n });\n });\n onCleanup(() => {\n document.body.removeEventListener('mouseup', mouseUp, false);\n });\n\n return (\n <Show when={open() !== OpenState.closed}>\n <Portal useShadow={true}>\n <style textContent={getCss()} />\n <style textContent={style} />\n <div\n ref={portal}\n class=\"portal\"\n classList={{\n open: open() === OpenState.open,\n closeing: open() !== OpenState.open,\n 'mask-blur': props.maskBlur,\n }}\n onAnimationEnd={handleDestroy}\n onClick={portalClick}\n >\n <div\n ref={modal}\n classList={{\n 'modal-content': true,\n centered: props.centered,\n moveing: moveing(),\n }}\n onMouseDown={mouseDown}\n >\n <div class=\"modal-header\">\n <strong class=\"modal-title\">{props.title}</strong>\n </div>\n <Show when={props.closeIcon === void 0} fallback={closeIcon() as JSXElement}>\n <n-button class=\"modal-close\" danger={true} circle={true} flat={true} onClick={close}>\n ⛌\n </n-button>\n </Show>\n <div class=\"modal-body\">{props.content}</div>\n <Show when={props.cancelText || props.okText}>\n <div class=\"modal-footer\">\n <Show when={props.cancelText}>\n <n-button {...props.cancelProps} onClick={close}>\n {props.cancelText}\n </n-button>\n </Show>\n <Show when={props.okText}>\n <n-button\n type=\"primary\"\n fill={true}\n {...props.okProps}\n loading={loading()}\n onClick={handleOk}\n >\n {props.okText}\n </n-button>\n </Show>\n </div>\n </Show>\n </div>\n </div>\n </Portal>\n </Show>\n );\n}\n\ncustomElement<ModalProps>(\n 'n-modal',\n {\n open: 'closed' as OpenStateKey,\n maskClosable: true,\n escClosable: true,\n onOpenChange: void 0,\n closeIcon: void 0,\n content: void 0,\n title: void 0,\n maskBlur: void 0,\n okText: void 0,\n cancelText: void 0,\n okProps: void 0,\n cancelProps: void 0,\n centered: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n onOpenChange(open: OpenStateKey) {\n opt.element.dispatchEvent(\n new CustomEvent('openchange', {\n detail: open,\n }),\n );\n },\n },\n _,\n );\n\n createEffect(() => {\n clearAttribute(el, ['content']);\n });\n return <Modal {...props} />;\n },\n);\n\nModal.open = open;\n\nexport default Modal;\n"],"names":["OpenState","createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","Show","untrack","Portal","isFunction","passiveSupported","customElement","clearAttribute","open","defaultPosi","modalStore","style","Modal","_","portal","modal","doc","document","documentElement","setNum","props","okText","cancelText","moveing","setMoveing","loading","setLoading","setOpen","posi","setPosi","movement","getCss","x","y","width","height","openChange","visi","removeProperty","onCancel","onOpenChange","preventDefault","e","close","type","escClosable","key","handleDestroy","handleOk","onOk","portalClick","maskClosable","target","point","prev","clientWidth","clientX","clientHeight","clientY","addEventListener","passive","removeEventListener","closeIcon","includes","move","ev","movementX","movementY","setProperty","mouseDown","mouseUp","body","title","content","cancelProps","okProps","maskBlur","centered","opt","el","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["components/modal/index.tsx"],"sourcesContent":["import {\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n onCleanup,\n onMount,\n Show,\n untrack,\n} from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { isFunction, passiveSupported } from '@moneko/common';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport type { ButtonProps } from '../button';\n\nimport open from './hooks';\nimport { defaultPosi } from './posi';\nimport modalStore from './store';\nimport { style } from './style';\n\n/**\n * API\n * @since 2.6.0\n */\nexport interface ModalProps {\n /** 是否打开模态框 */\n open?: OpenStateKey;\n /** 开启关闭的回调函数 */\n onOpenChange?: (open: OpenStateKey) => void;\n /** 点击遮罩关闭\n * @default true\n */\n maskClosable?: boolean;\n /** 通过 `esc` 按键关闭\n * @default true\n */\n escClosable?: boolean;\n /**\n * 自定义关闭图标, 设置为 null 或 false 时隐藏关闭按钮\n */\n closeIcon?: JSXElement | (() => JSXElement);\n /** 内容 */\n content?: JSXElement | (() => JSXElement);\n /** 标题 */\n title?: JSXElement | (() => JSXElement);\n /** 遮罩模糊\n * @default false\n */\n maskBlur?: boolean;\n okText?: string | false | null;\n cancelText?: string | false | null;\n onCancel?(): Promise<boolean> | boolean;\n onOk?(e: MouseEvent | Event): Promise<boolean> | boolean;\n okProps?: Omit<ButtonProps, 'children' | 'onClick' | 'loading'>;\n cancelProps?: Omit<ButtonProps, 'children' | 'onClick'>;\n centered?: boolean;\n}\n\n/**\n * OpenStateKey\n */\nexport enum OpenState {\n /** 完全关闭 */\n closed = 'closed',\n /** 正在关闭 */\n closeing = 'closeing',\n /** 打开 */\n open = 'open',\n}\nexport type OpenStateKey = keyof typeof OpenState;\nexport type ModalElement = CustomElement<ModalProps, 'onOpenChange'>;\n\nfunction Modal(_: ModalProps) {\n const doc = document.documentElement;\n const { setNum } = modalStore;\n const props = mergeProps(\n {\n okText: '确认',\n cancelText: '取消',\n },\n _,\n );\n const [moveing, setMoveing] = createSignal(false);\n const [loading, setLoading] = createSignal(false);\n const [open, setOpen] = createSignal<OpenStateKey>('closed');\n const [posi, setPosi] = createSignal(defaultPosi);\n const movement = [0, 0];\n let portal: HTMLDivElement | undefined;\n let modal: HTMLDivElement | undefined;\n\n const getCss = createMemo(() => {\n const { x, y, width, height } = posi();\n\n return `.portal { --y: ${-(y - height / 2)}px;--x: ${-(x - width / 2)}px; --movement-x: ${\n movement[0]\n }px; --movement-y: ${movement[1]}px;}`;\n });\n\n async function openChange(visi: OpenStateKey) {\n setLoading(false);\n if (visi === OpenState.closeing) {\n modal!.style.removeProperty('--x');\n modal!.style.removeProperty('--y');\n if (isFunction(props.onCancel)) {\n setLoading(true);\n if (!(await props.onCancel())) {\n setLoading(false);\n return;\n }\n }\n }\n setOpen(visi);\n props.onOpenChange?.(visi);\n }\n function preventDefault(e: Event) {\n e.preventDefault();\n }\n function close(e: KeyboardEvent | Event) {\n preventDefault(e);\n if (e.type === 'keydown') {\n if (props.escClosable && (e as KeyboardEvent).key === 'Escape') {\n openChange(OpenState.closeing);\n }\n } else {\n openChange(OpenState.closeing);\n }\n }\n function handleDestroy() {\n if (open() === OpenState.closeing) {\n openChange(OpenState.closed);\n }\n }\n async function handleOk(e: MouseEvent | Event) {\n preventDefault(e);\n if (isFunction(props.onOk)) {\n setLoading(true);\n if (!(await props.onOk(e))) {\n setLoading(false);\n return;\n }\n }\n\n setOpen(OpenState.closeing);\n props.onOpenChange?.(OpenState.closeing);\n }\n function portalClick(e: Event) {\n preventDefault(e);\n if (props.maskClosable && e.target === portal) {\n openChange(OpenState.closeing);\n }\n }\n\n createEffect(() => {\n if (props.open !== void 0 && props.open !== untrack(open)) {\n setOpen(props.open);\n }\n });\n\n function point(e: MouseEvent) {\n setPosi((prev) => ({\n ...prev,\n x: doc.clientWidth / 2 - e.clientX,\n y: doc.clientHeight / 2 - e.clientY,\n }));\n }\n createEffect(() => {\n if (open() === OpenState.open) {\n setNum((prev) => prev + 1);\n doc.addEventListener('mousewheel', preventDefault, {\n passive: false,\n });\n\n if (props.escClosable) {\n doc.addEventListener('keydown', close, false);\n }\n } else if (open() === OpenState.closeing) {\n setNum((prev) => prev - 1);\n } else {\n doc.addEventListener('click', point, true);\n }\n\n onCleanup(() => {\n doc.removeEventListener('mousewheel', preventDefault, false);\n doc.removeEventListener('keydown', close, false);\n doc.removeEventListener('click', point, true);\n });\n });\n const closeIcon = createMemo(() => {\n if (props.closeIcon === null || props.closeIcon === false) {\n return null;\n }\n if (['function', 'object'].includes(typeof props.closeIcon)) {\n return () => (\n <span class=\"modal-close\">\n {isFunction(props.closeIcon) ? props.closeIcon() : props.closeIcon}\n </span>\n );\n }\n return () => (\n <n-button class=\"modal-close\" danger={true} circle={true} flat={true} onClick={close}>\n {props.closeIcon}\n </n-button>\n );\n });\n\n function move(ev: MouseEvent) {\n if (modal) {\n movement[0] = movement[0] + ev.movementX;\n movement[1] = movement[1] + ev.movementY;\n\n portal!.style.setProperty('--movement-x', `${movement[0]}px`);\n portal!.style.setProperty('--movement-y', `${movement[1]}px`);\n modal!.style.setProperty('--x', `${movement[0]}px`);\n modal!.style.setProperty('--y', `${movement[1]}px`);\n }\n }\n\n function mouseDown(e: MouseEvent) {\n setMoveing(e.target === modal);\n }\n function mouseUp() {\n setMoveing(false);\n }\n createEffect(() => {\n if (moveing()) {\n document.body.addEventListener('mousemove', move, {\n passive: passiveSupported,\n });\n }\n onCleanup(() => {\n document.body.removeEventListener('mousemove', move, false);\n });\n });\n\n onMount(() => {\n document.body.addEventListener('mouseup', mouseUp, {\n passive: passiveSupported,\n });\n });\n onCleanup(() => {\n document.body.removeEventListener('mouseup', mouseUp, false);\n });\n const title = createMemo(() => (isFunction(props.title) ? props.title() : props.title));\n const content = createMemo(() => (isFunction(props.content) ? props.content() : props.content));\n\n return (\n <Show when={open() !== OpenState.closed}>\n <Portal useShadow={true}>\n <style textContent={getCss()} />\n <style textContent={style} />\n <div\n ref={portal}\n class=\"portal\"\n classList={{\n open: open() === OpenState.open,\n closeing: open() !== OpenState.open,\n 'mask-blur': props.maskBlur,\n }}\n onAnimationEnd={handleDestroy}\n onClick={portalClick}\n >\n <div\n ref={modal}\n classList={{\n 'modal-content': true,\n centered: props.centered,\n moveing: moveing(),\n }}\n onMouseDown={mouseDown}\n >\n <div class=\"modal-header\">\n <strong class=\"modal-title\">{title()}</strong>\n </div>\n <Show when={props.closeIcon === void 0} fallback={closeIcon() as JSXElement}>\n <n-button class=\"modal-close\" danger={true} circle={true} flat={true} onClick={close}>\n ⛌\n </n-button>\n </Show>\n <div class=\"modal-body\">{content()}</div>\n <Show when={props.cancelText || props.okText}>\n <div class=\"modal-footer\">\n <Show when={props.cancelText}>\n <n-button {...props.cancelProps} onClick={close}>\n {props.cancelText}\n </n-button>\n </Show>\n <Show when={props.okText}>\n <n-button\n type=\"primary\"\n fill={true}\n {...props.okProps}\n loading={loading()}\n onClick={handleOk}\n >\n {props.okText}\n </n-button>\n </Show>\n </div>\n </Show>\n </div>\n </div>\n </Portal>\n </Show>\n );\n}\n\ncustomElement<ModalProps>(\n 'n-modal',\n {\n open: 'closed' as OpenStateKey,\n maskClosable: true,\n escClosable: true,\n onOpenChange: void 0,\n closeIcon: void 0,\n content: void 0,\n title: void 0,\n maskBlur: void 0,\n okText: void 0,\n cancelText: void 0,\n okProps: void 0,\n cancelProps: void 0,\n centered: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n onOpenChange(open: OpenStateKey) {\n opt.element.dispatchEvent(\n new CustomEvent('openchange', {\n detail: open,\n }),\n );\n },\n },\n _,\n );\n\n createEffect(() => {\n clearAttribute(el, ['content']);\n });\n return <Modal {...props} />;\n },\n);\n\nModal.open = open;\n\nexport default Modal;\n"],"names":["OpenState","createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","Show","untrack","Portal","isFunction","passiveSupported","customElement","clearAttribute","open","defaultPosi","modalStore","style","Modal","_","portal","modal","doc","document","documentElement","setNum","props","okText","cancelText","moveing","setMoveing","loading","setLoading","setOpen","posi","setPosi","movement","getCss","x","y","width","height","openChange","visi","removeProperty","onCancel","onOpenChange","preventDefault","e","close","type","escClosable","key","handleDestroy","handleOk","onOk","portalClick","maskClosable","target","point","prev","clientWidth","clientX","clientHeight","clientY","addEventListener","passive","removeEventListener","closeIcon","includes","move","ev","movementX","movementY","setProperty","mouseDown","mouseUp","body","title","content","cancelProps","okProps","maskBlur","centered","opt","el","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}
|
package/es/popover/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export interface PopoverProps {
|
|
|
6
6
|
/** 自定义样式表 */
|
|
7
7
|
css?: string;
|
|
8
8
|
/** 内容 */
|
|
9
|
-
content?: JSXElement;
|
|
9
|
+
content?: JSXElement | (() => JSXElement);
|
|
10
10
|
/** 挂载到指定的元素，值为一个返回对应 DOM 元素 默认 document.body */
|
|
11
11
|
getPopupContainer?: (node?: HTMLElement | null) => HTMLElement;
|
|
12
12
|
/** 触发行为
|
package/es/popover/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var t,e;function o(){return(o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t}).apply(this,arguments)}import{use as n}from"solid-js/web";import{template as r}from"solid-js/web";import{spread as i}from"solid-js/web";import{mergeProps as l}from"solid-js/web";import"solid-js/web";import{insert as
|
|
1
|
+
var t,e;function o(){return(o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t}).apply(this,arguments)}import{use as n}from"solid-js/web";import{template as r}from"solid-js/web";import{spread as i}from"solid-js/web";import{mergeProps as l}from"solid-js/web";import{memo as s}from"solid-js/web";import{insert as p}from"solid-js/web";import{effect as a}from"solid-js/web";import{createComponent as d}from"solid-js/web";import{addEventListener as c}from"solid-js/web";let u=r("<style>"),m=r("<style> "),g=r("<span>"),f=r("<div>");import{createEffect as h,createMemo as v,createSignal as w,mergeProps as b,onCleanup as C,onMount as x,Show as y,splitProps as j}from"solid-js";import{Portal as M}from"solid-js/web";import k from"@moneko/common/lib/isElementInside";import L from"@moneko/common/lib/isEqual";import O from"@moneko/common/lib/isFunction";import E from"@moneko/common/lib/passiveSupported";import{css as P,cx as T}from"@moneko/css";import{customElement as R}from"solid-element";import{clearAttribute as $}from"../basic-config";import W from"../empty";import S,{inline as z}from"../theme";import{popoverCss as H,portalCss as I}from"./style";export var TriggerOption;(t=TriggerOption||(TriggerOption={})).hover="hover",t.click="click",t.contextMenu="contextMenu",t.none="none";export var Placement;function B(t){let e,r,R,$;let{isDark:z,baseStyle:B}=S,[D]=j(b({trigger:"hover"},t),["class","css","popupClass","popupCss","size","trigger","open","disabled","onOpenChange","dropdownMatchSelectWidth","destroyInactive","arrow","placement","getPopupContainer","children","content"]),[q,A]=w(null),[F,N]=w({}),[X,Y]=w(!1),[G,J]=w("");function K(t){D.disabled||(D.onOpenChange&&D.onOpenChange(t),void 0===D.open&&A(t))}function Q(){!1===q()&&(A(null),K(null))}function U(t){clearTimeout(R),R=setTimeout(()=>{if(clearTimeout(R),t.target&&"false"===t.target.getAttribute("handle-closed"))return;let o=k(t.target,e);(q()&&!o||o&&"mousedown"!==t.type)&&K(!1)},"hover"===D.trigger?300:0)}h(()=>{void 0!==D.open&&A(D.open)}),h(()=>{q()&&D.dropdownMatchSelectWidth&&r&&J(`.portal {width: ${r.offsetWidth}px;}`)});let V=function(t){clearTimeout($),$=setTimeout(()=>{if(clearTimeout($),!e||!r||!t&&"contextMenu"===D.trigger)return;if((null==t?void 0:t.type)==="scroll"&&"contextMenu"===D.trigger){K(!1);return}let o=r.getBoundingClientRect(),n=e.getBoundingClientRect(),i=n.width/2-o.width/2,l=window.innerHeight-o.bottom,s=D.placement,p=!(null==s?void 0:s.startsWith("top"))&&l>.8*e.offsetHeight&&l>o.top||(null==s?void 0:s.startsWith("bottom")),a=D.arrow?8:4,d={};switch(D.placement){case"bottomLeft":case"left":case"topLeft":d.left=o.left,d["--x"]=-n.width/2+16;break;case"bottomRight":case"right":case"topRight":d.left=o.right-n.width,d["--x"]=n.width/2-16;break;default:d.left=Math.abs(i>o.left?o.left:o.left-i),d["--x"]=-(d.left-o.left+i)}p?d.top=o.bottom+a:d.bottom=window.innerHeight-o.top+a,N(t=>L(t,d)?t:d),Y(t=>!p===t?t:!p)},32)};function Z(t){clearTimeout(R),t.stopPropagation(),"contextMenu"===D.trigger&&"contextmenu"===t.type&&(t.preventDefault(),N(n=>o({},n,{left:t.clientX,top:t.clientY,"--x":-((null==e?void 0:e.getBoundingClientRect().width)||0)/2+16}))),K(!0)}let _=v(()=>O(D.getPopupContainer)?D.getPopupContainer(r):document.body),tt=v(()=>{let t={},e={click:"onMouseDown",hover:"onMouseEnter",contextMenu:"onContextMenu",none:void 0}[D.trigger],o={hover:"onMouseLeave",click:void 0,contextMenu:void 0,none:void 0}[D.trigger];return Object.assign(t,e&&{[e]:Z},o&&{[o]:U}),t}),te=v(()=>{let t=F();return`.portal {${Object.keys(t).map(e=>`${e}:${t[e]}px;`).join("")}z-index: 1;}`}),to=v(()=>T("portal",D.arrow&&"arrow",`${q()?"in":"out"}-${X()?"up":"down"}`,D.size,D.popupClass)),tn=v(()=>`:host {--popover-bg: ${z()?"#1f1f1f":"var(--component-bg)"};--popover-shadow-color: rgb(0 0 0 / 5%);position: absolute;}`);return h(()=>{q()&&(V(),window.addEventListener("scroll",V,{passive:E})),C(()=>{window.removeEventListener("scroll",V,!1)})}),x(()=>{"none"!==D.trigger&&document.documentElement.addEventListener("mousedown",U,!1)}),C(()=>{clearTimeout(R),document.documentElement.removeEventListener("mousedown",U,!1)}),[(()=>{let t=u();return t.textContent=H,t})(),d(y,{get when(){return D.css},get children(){let t=m(),e=t.firstChild;return a(()=>e.data=P(D.css)),t}}),(()=>{let t=g(),e=r;return"function"==typeof e?n(e,t):r=t,i(t,l({get class(){return T("popover",D.size,D.class)}},tt),!1,!0),p(t,()=>D.children),t})(),d(y,{get when(){return null!==q()||!D.destroyInactive},get children(){return d(M,{useShadow:!0,get mount(){return _()},get children(){return[(()=>{let t=m(),e=t.firstChild;return a(()=>e.data=B()),t})(),(()=>{let t=u();return t.textContent=I,t})(),(()=>{let t=m(),e=t.firstChild;return a(()=>e.data=tn()),t})(),(()=>{let t=m(),e=t.firstChild;return a(()=>e.data=te()),t})(),(()=>{let t=m(),e=t.firstChild;return a(()=>e.data=G()),t})(),d(y,{get when(){return D.popupCss},get children(){let t=m(),e=t.firstChild;return a(()=>e.data=P(D.popupCss)),t}}),(()=>{let t=f(),o=e;return c(t,"animationend",Q),"function"==typeof o?n(o,t):e=t,i(t,l({get class(){return to()}},tt),!1,!0),p(t,d(y,{get when(){return D.content},get fallback(){return d(W,{})},get children(){return d(y,{get when(){return"string"==typeof D.content},get fallback(){return s(()=>D.content)},get children(){let t=f();return a(()=>t.innerHTML=D.content),t}})}})),t})()]}})}})]}(e=Placement||(Placement={})).bottomLeft="bottomLeft",e.bottom="bottom",e.bottomRight="bottomRight",e.topLeft="topLeft",e.top="top",e.topRight="topRight",e.left="left",e.right="right";export const defaultProps={class:void 0,css:void 0,content:void 0,getPopupContainer:void 0,trigger:void 0,open:void 0,onOpenChange:void 0,popupClass:void 0,popupCss:void 0,destroyInactive:!0,disabled:void 0,arrow:void 0,placement:void 0,dropdownMatchSelectWidth:void 0};R("n-popover",defaultProps,(t,e)=>{let{baseStyle:o}=S,n=e.element,r=b({onOpenChange(t){n.dispatchEvent(new CustomEvent("openchange",{detail:t}))},children:[...n.childNodes.values()]},t);return h(()=>{$(n,["content","popupCss","css"])}),[(()=>{let t=u();return t.textContent=z,t})(),(()=>{let t=m(),e=t.firstChild;return a(()=>e.data=o()),t})(),d(B,r)]});export default B;
|
package/es/popover/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/popover/index.tsx"],"sourcesContent":["import {\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n onCleanup,\n onMount,\n Show,\n splitProps,\n} from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { isElementInside, isEqual, isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BasicConfig, CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport Empty from '../empty';\nimport theme, { inline } from '../theme';\n\nimport { popoverCss, portalCss } from './style';\n\nexport interface PopoverProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 内容 */\n content?: JSXElement;\n /** 挂载到指定的元素，值为一个返回对应 DOM 元素 默认 document.body */\n getPopupContainer?: (node?: HTMLElement | null) => HTMLElement;\n /** 触发行为\n * @default 'hover'\n */\n trigger?: keyof typeof TriggerOption;\n /** 打开内容气泡 */\n open?: boolean | null;\n /** 内容打开关闭时的回调方法 */\n onOpenChange?: (open: boolean | null) => void;\n /** 气泡的自定义类名 */\n popupClass?: string;\n /** 气泡的自定义样式表 */\n popupCss?: string;\n /** 关闭后是否销毁 */\n destroyInactive?: boolean;\n /** 不可用状态 */\n disabled?: boolean;\n /** 添加一个箭头显示 */\n arrow?: boolean;\n /** 指定气泡显示的方向 */\n placement?: keyof typeof Placement;\n /** 气泡宽度与触发dom一致 */\n dropdownMatchSelectWidth?: boolean;\n /** 尺寸\n * @default 'normal'\n */\n size?: BasicConfig['size'];\n children?: JSXElement;\n}\n\nexport enum TriggerOption {\n /** 鼠标移入 */\n hover = 'hover',\n /** 点击 */\n click = 'click',\n /** 右键 */\n contextMenu = 'contextMenu',\n /** 无 */\n none = 'none',\n}\n\nexport enum Placement {\n /** 左下 */\n bottomLeft = 'bottomLeft',\n /** 下 */\n bottom = 'bottom',\n /** 右下 */\n bottomRight = 'bottomRight',\n /** 左上 */\n topLeft = 'topLeft',\n /** 上 */\n top = 'top',\n /** 右上 */\n topRight = 'topRight',\n /** 左 */\n left = 'left',\n /** 右 */\n right = 'right',\n}\n\ninterface Posi {\n left?: number;\n top?: number;\n right?: number;\n bottom?: number;\n '--x'?: number;\n}\n\ninterface EventMap {\n click?: string;\n hover?: string;\n contextMenu?: string;\n none?: never;\n [key: string]: string | undefined;\n}\nfunction Popover(props: PopoverProps) {\n const { isDark, baseStyle } = theme;\n const mp = mergeProps(\n {\n trigger: 'hover',\n },\n props,\n );\n const [local] = splitProps(mp, [\n 'class',\n 'css',\n 'popupClass',\n 'popupCss',\n 'size',\n 'trigger',\n 'open',\n 'disabled',\n 'onOpenChange',\n 'dropdownMatchSelectWidth',\n 'destroyInactive',\n 'arrow',\n 'placement',\n 'getPopupContainer',\n 'children',\n 'content',\n ]);\n let ref: HTMLDivElement | undefined;\n let childRef: HTMLSpanElement | undefined;\n let closeTimer: NodeJS.Timeout | undefined;\n const [open, setOpen] = createSignal<boolean | null>(null);\n const [posi, setPosi] = createSignal<Posi>({});\n const [up, setUp] = createSignal<boolean>(false);\n const [width, setWidth] = createSignal('');\n\n createEffect(() => {\n if (local.open !== void 0) {\n setOpen(local.open);\n }\n });\n function openChange(next: boolean | null) {\n if (!local.disabled) {\n if (local.onOpenChange) {\n local.onOpenChange(next);\n }\n if (local.open === void 0) {\n setOpen(next);\n }\n }\n }\n function exit() {\n if (open() === false) {\n setOpen(null);\n openChange(null);\n }\n }\n createEffect(() => {\n if (open() && local.dropdownMatchSelectWidth && childRef) {\n setWidth(`.portal {width: ${childRef.offsetWidth}px;}`);\n }\n });\n\n function close(e: MouseEvent | Event) {\n clearTimeout(closeTimer);\n closeTimer = setTimeout(\n () => {\n clearTimeout(closeTimer);\n if (e.target && (e.target as HTMLElement).getAttribute('handle-closed') === 'false') {\n return;\n }\n const isContains = isElementInside(e.target as Element, ref);\n\n if ((open() && !isContains) || (isContains && e.type !== 'mousedown')) {\n openChange(false);\n }\n },\n local.trigger === 'hover' ? 300 : 0,\n );\n }\n let portalTimer: NodeJS.Timeout | undefined;\n const showPortal = function (e?: Event): void {\n clearTimeout(portalTimer);\n portalTimer = setTimeout(() => {\n clearTimeout(portalTimer);\n if (!ref || !childRef || (!e && local.trigger === 'contextMenu')) {\n return;\n }\n if (e?.type === 'scroll' && local.trigger === 'contextMenu') {\n openChange(false);\n return;\n }\n const elRect = childRef.getBoundingClientRect();\n const portalRect = ref.getBoundingClientRect();\n const offsetX = portalRect.width / 2 - elRect.width / 2;\n const margin = window.innerHeight - elRect.bottom;\n const _placement = local.placement;\n\n const _isBottom =\n (!_placement?.startsWith('top') &&\n margin > ref.offsetHeight * 0.8 &&\n margin > elRect.top) ||\n _placement?.startsWith('bottom');\n const arrowHeight = local.arrow ? 8 : 4;\n const _posi: Posi = {};\n\n switch (local.placement) {\n case 'bottomLeft':\n case 'left':\n case 'topLeft':\n _posi.left = elRect.left;\n _posi['--x'] = -portalRect.width / 2 + 16;\n break;\n case 'bottomRight':\n case 'right':\n case 'topRight':\n _posi.left = elRect.right - portalRect.width;\n _posi['--x'] = portalRect.width / 2 - 16;\n break;\n case 'bottom':\n case 'top':\n default:\n _posi.left = Math.abs(offsetX > elRect.left ? elRect.left : elRect.left - offsetX);\n _posi['--x'] = -(_posi.left - elRect.left + offsetX);\n break;\n }\n if (_isBottom) {\n _posi.top = elRect.bottom + arrowHeight;\n } else {\n _posi.bottom = window.innerHeight - elRect.top + arrowHeight;\n }\n setPosi((prev) => {\n return isEqual(prev, _posi) ? prev : _posi;\n });\n setUp((prev) => {\n return prev === !_isBottom ? prev : !_isBottom;\n });\n }, 32);\n };\n\n function handleOpen(e: MouseEvent) {\n clearTimeout(closeTimer);\n e.stopPropagation();\n if (local.trigger === 'contextMenu' && e.type === 'contextmenu') {\n e.preventDefault();\n setPosi((prev) => ({\n ...prev,\n left: e.clientX,\n top: e.clientY,\n ['--x']: -(ref?.getBoundingClientRect().width || 0) / 2 + 16,\n }));\n }\n openChange(true);\n }\n\n const container = createMemo(() => {\n if (isFunction(local.getPopupContainer)) {\n return local.getPopupContainer(childRef);\n }\n return document.body;\n });\n const childrenProps = createMemo(() => {\n const _props: Partial<Record<keyof EventMap, void>> = {};\n\n const openEvent: EventMap = {\n click: 'onMouseDown',\n hover: 'onMouseEnter',\n contextMenu: 'onContextMenu',\n none: void 0,\n };\n const closeEvent: EventMap = {\n hover: 'onMouseLeave',\n click: void 0,\n contextMenu: void 0,\n none: void 0,\n };\n\n const openFn = openEvent[local.trigger];\n const closeFn = closeEvent[local.trigger];\n\n Object.assign(\n _props,\n openFn && {\n [openFn]: handleOpen,\n },\n closeFn && {\n [closeFn]: close,\n },\n );\n\n return _props;\n });\n\n const portalStyle = createMemo(() => {\n const p = posi();\n\n return `.portal {${Object.keys(p)\n .map((k) => `${k}:${p[k as keyof Posi]}px;`)\n .join('')}z-index: 1;}`;\n });\n const portalCls = createMemo(() => {\n return cx(\n 'portal',\n local.arrow && 'arrow',\n `${open() ? 'in' : 'out'}-${up() ? 'up' : 'down'}`,\n local.size,\n local.popupClass,\n );\n });\n const hostStyle = createMemo(() => {\n return `:host {--popover-bg: ${isDark() ? '#1f1f1f' : 'var(--component-bg)'};--popover-shadow-color: rgb(0 0 0 / 5%);position: absolute;}`;\n });\n\n createEffect(() => {\n if (open()) {\n showPortal();\n\n window.addEventListener('scroll', showPortal, {\n passive: passiveSupported,\n });\n }\n onCleanup(() => {\n window.removeEventListener('scroll', showPortal, false);\n });\n });\n onMount(() => {\n if (local.trigger !== 'none') {\n document.documentElement.addEventListener('mousedown', close, false);\n }\n });\n onCleanup(() => {\n clearTimeout(closeTimer);\n document.documentElement.removeEventListener('mousedown', close, false);\n });\n\n return (\n <>\n <style textContent={popoverCss} />\n <Show when={local.css}>\n <style textContent={css(local.css)} />\n </Show>\n <span ref={childRef} class={cx('popover', local.size, local.class)} {...childrenProps()}>\n {local.children}\n </span>\n <Show when={open() !== null || !local.destroyInactive}>\n <Portal useShadow mount={container()}>\n <style textContent={baseStyle()} />\n <style textContent={portalCss} />\n <style textContent={hostStyle()} />\n <style textContent={portalStyle()} />\n <style textContent={width()} />\n <Show when={local.popupCss}>\n <style textContent={css(local.popupCss)} />\n </Show>\n <div ref={ref} onAnimationEnd={exit} class={portalCls()} {...childrenProps()}>\n <Show when={local.content} fallback={<Empty />}>\n <Show when={typeof local.content === 'string'} fallback={local.content}>\n {/* eslint-disable-next-line solid/no-innerhtml */}\n <div innerHTML={local.content as string} />\n </Show>\n </Show>\n </div>\n </Portal>\n </Show>\n </>\n );\n}\n\nexport type PopoverElement = CustomElement<PopoverProps, 'onOpenChange'>;\n\nexport const defaultProps = {\n class: void 0,\n css: void 0,\n content: void 0,\n getPopupContainer: void 0,\n trigger: void 0,\n open: void 0,\n onOpenChange: void 0,\n popupClass: void 0,\n popupCss: void 0,\n destroyInactive: true,\n disabled: void 0,\n arrow: void 0,\n placement: void 0,\n dropdownMatchSelectWidth: void 0,\n};\ncustomElement<PopoverProps>('n-popover', defaultProps, (_, opt) => {\n const { baseStyle } = theme;\n const el = opt.element;\n const props = mergeProps(\n {\n onOpenChange(next: boolean | null) {\n el.dispatchEvent(\n new CustomEvent('openchange', {\n detail: next,\n }),\n );\n },\n children: [...el.childNodes.values()],\n },\n _,\n );\n\n createEffect(() => {\n clearAttribute(el, ['content', 'popupCss', 'css']);\n });\n return (\n <>\n <style textContent={inline} />\n <style textContent={baseStyle()} />\n <Popover {...props} />\n </>\n );\n});\nexport default Popover;\n"],"names":["TriggerOption","Placement","createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","Show","splitProps","Portal","isElementInside","isEqual","isFunction","passiveSupported","css","cx","customElement","clearAttribute","Empty","theme","inline","popoverCss","portalCss","Popover","props","ref","childRef","closeTimer","portalTimer","isDark","baseStyle","local","trigger","open","setOpen","posi","setPosi","up","setUp","width","setWidth","openChange","next","disabled","onOpenChange","exit","close","e","clearTimeout","setTimeout","target","getAttribute","isContains","type","dropdownMatchSelectWidth","offsetWidth","showPortal","elRect","getBoundingClientRect","portalRect","offsetX","margin","window","innerHeight","bottom","_placement","placement","_isBottom","startsWith","offsetHeight","top","arrowHeight","arrow","_posi","left","right","Math","abs","prev","handleOpen","stopPropagation","preventDefault","clientX","clientY","container","getPopupContainer","document","body","childrenProps","_props","openFn","openEvent","click","hover","contextMenu","none","closeFn","closeEvent","Object","assign","portalStyle","p","keys","map","k","join","portalCls","size","popupClass","hostStyle","addEventListener","passive","removeEventListener","documentElement","class","children","destroyInactive","popupCss","content","defaultProps","_","opt","el","element","dispatchEvent","CustomEvent","detail","childNodes","values"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["components/popover/index.tsx"],"sourcesContent":["import {\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n onCleanup,\n onMount,\n Show,\n splitProps,\n} from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { isElementInside, isEqual, isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BasicConfig, CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport Empty from '../empty';\nimport theme, { inline } from '../theme';\n\nimport { popoverCss, portalCss } from './style';\n\nexport interface PopoverProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 内容 */\n content?: JSXElement | (() => JSXElement);\n /** 挂载到指定的元素，值为一个返回对应 DOM 元素 默认 document.body */\n getPopupContainer?: (node?: HTMLElement | null) => HTMLElement;\n /** 触发行为\n * @default 'hover'\n */\n trigger?: keyof typeof TriggerOption;\n /** 打开内容气泡 */\n open?: boolean | null;\n /** 内容打开关闭时的回调方法 */\n onOpenChange?: (open: boolean | null) => void;\n /** 气泡的自定义类名 */\n popupClass?: string;\n /** 气泡的自定义样式表 */\n popupCss?: string;\n /** 关闭后是否销毁 */\n destroyInactive?: boolean;\n /** 不可用状态 */\n disabled?: boolean;\n /** 添加一个箭头显示 */\n arrow?: boolean;\n /** 指定气泡显示的方向 */\n placement?: keyof typeof Placement;\n /** 气泡宽度与触发dom一致 */\n dropdownMatchSelectWidth?: boolean;\n /** 尺寸\n * @default 'normal'\n */\n size?: BasicConfig['size'];\n children?: JSXElement;\n}\n\nexport enum TriggerOption {\n /** 鼠标移入 */\n hover = 'hover',\n /** 点击 */\n click = 'click',\n /** 右键 */\n contextMenu = 'contextMenu',\n /** 无 */\n none = 'none',\n}\n\nexport enum Placement {\n /** 左下 */\n bottomLeft = 'bottomLeft',\n /** 下 */\n bottom = 'bottom',\n /** 右下 */\n bottomRight = 'bottomRight',\n /** 左上 */\n topLeft = 'topLeft',\n /** 上 */\n top = 'top',\n /** 右上 */\n topRight = 'topRight',\n /** 左 */\n left = 'left',\n /** 右 */\n right = 'right',\n}\n\ninterface Posi {\n left?: number;\n top?: number;\n right?: number;\n bottom?: number;\n '--x'?: number;\n}\n\ninterface EventMap {\n click?: string;\n hover?: string;\n contextMenu?: string;\n none?: never;\n [key: string]: string | undefined;\n}\nfunction Popover(props: PopoverProps) {\n const { isDark, baseStyle } = theme;\n const mp = mergeProps(\n {\n trigger: 'hover',\n },\n props,\n );\n const [local] = splitProps(mp, [\n 'class',\n 'css',\n 'popupClass',\n 'popupCss',\n 'size',\n 'trigger',\n 'open',\n 'disabled',\n 'onOpenChange',\n 'dropdownMatchSelectWidth',\n 'destroyInactive',\n 'arrow',\n 'placement',\n 'getPopupContainer',\n 'children',\n 'content',\n ]);\n let ref: HTMLDivElement | undefined;\n let childRef: HTMLSpanElement | undefined;\n let closeTimer: NodeJS.Timeout | undefined;\n const [open, setOpen] = createSignal<boolean | null>(null);\n const [posi, setPosi] = createSignal<Posi>({});\n const [up, setUp] = createSignal<boolean>(false);\n const [width, setWidth] = createSignal('');\n\n createEffect(() => {\n if (local.open !== void 0) {\n setOpen(local.open);\n }\n });\n function openChange(next: boolean | null) {\n if (!local.disabled) {\n if (local.onOpenChange) {\n local.onOpenChange(next);\n }\n if (local.open === void 0) {\n setOpen(next);\n }\n }\n }\n function exit() {\n if (open() === false) {\n setOpen(null);\n openChange(null);\n }\n }\n createEffect(() => {\n if (open() && local.dropdownMatchSelectWidth && childRef) {\n setWidth(`.portal {width: ${childRef.offsetWidth}px;}`);\n }\n });\n\n function close(e: MouseEvent | Event) {\n clearTimeout(closeTimer);\n closeTimer = setTimeout(\n () => {\n clearTimeout(closeTimer);\n if (e.target && (e.target as HTMLElement).getAttribute('handle-closed') === 'false') {\n return;\n }\n const isContains = isElementInside(e.target as Element, ref);\n\n if ((open() && !isContains) || (isContains && e.type !== 'mousedown')) {\n openChange(false);\n }\n },\n local.trigger === 'hover' ? 300 : 0,\n );\n }\n let portalTimer: NodeJS.Timeout | undefined;\n const showPortal = function (e?: Event): void {\n clearTimeout(portalTimer);\n portalTimer = setTimeout(() => {\n clearTimeout(portalTimer);\n if (!ref || !childRef || (!e && local.trigger === 'contextMenu')) {\n return;\n }\n if (e?.type === 'scroll' && local.trigger === 'contextMenu') {\n openChange(false);\n return;\n }\n const elRect = childRef.getBoundingClientRect();\n const portalRect = ref.getBoundingClientRect();\n const offsetX = portalRect.width / 2 - elRect.width / 2;\n const margin = window.innerHeight - elRect.bottom;\n const _placement = local.placement;\n\n const _isBottom =\n (!_placement?.startsWith('top') &&\n margin > ref.offsetHeight * 0.8 &&\n margin > elRect.top) ||\n _placement?.startsWith('bottom');\n const arrowHeight = local.arrow ? 8 : 4;\n const _posi: Posi = {};\n\n switch (local.placement) {\n case 'bottomLeft':\n case 'left':\n case 'topLeft':\n _posi.left = elRect.left;\n _posi['--x'] = -portalRect.width / 2 + 16;\n break;\n case 'bottomRight':\n case 'right':\n case 'topRight':\n _posi.left = elRect.right - portalRect.width;\n _posi['--x'] = portalRect.width / 2 - 16;\n break;\n case 'bottom':\n case 'top':\n default:\n _posi.left = Math.abs(offsetX > elRect.left ? elRect.left : elRect.left - offsetX);\n _posi['--x'] = -(_posi.left - elRect.left + offsetX);\n break;\n }\n if (_isBottom) {\n _posi.top = elRect.bottom + arrowHeight;\n } else {\n _posi.bottom = window.innerHeight - elRect.top + arrowHeight;\n }\n setPosi((prev) => {\n return isEqual(prev, _posi) ? prev : _posi;\n });\n setUp((prev) => {\n return prev === !_isBottom ? prev : !_isBottom;\n });\n }, 32);\n };\n\n function handleOpen(e: MouseEvent) {\n clearTimeout(closeTimer);\n e.stopPropagation();\n if (local.trigger === 'contextMenu' && e.type === 'contextmenu') {\n e.preventDefault();\n setPosi((prev) => ({\n ...prev,\n left: e.clientX,\n top: e.clientY,\n ['--x']: -(ref?.getBoundingClientRect().width || 0) / 2 + 16,\n }));\n }\n openChange(true);\n }\n\n const container = createMemo(() => {\n if (isFunction(local.getPopupContainer)) {\n return local.getPopupContainer(childRef);\n }\n return document.body;\n });\n const childrenProps = createMemo(() => {\n const _props: Partial<Record<keyof EventMap, void>> = {};\n\n const openEvent: EventMap = {\n click: 'onMouseDown',\n hover: 'onMouseEnter',\n contextMenu: 'onContextMenu',\n none: void 0,\n };\n const closeEvent: EventMap = {\n hover: 'onMouseLeave',\n click: void 0,\n contextMenu: void 0,\n none: void 0,\n };\n\n const openFn = openEvent[local.trigger];\n const closeFn = closeEvent[local.trigger];\n\n Object.assign(\n _props,\n openFn && {\n [openFn]: handleOpen,\n },\n closeFn && {\n [closeFn]: close,\n },\n );\n\n return _props;\n });\n\n const portalStyle = createMemo(() => {\n const p = posi();\n\n return `.portal {${Object.keys(p)\n .map((k) => `${k}:${p[k as keyof Posi]}px;`)\n .join('')}z-index: 1;}`;\n });\n const portalCls = createMemo(() => {\n return cx(\n 'portal',\n local.arrow && 'arrow',\n `${open() ? 'in' : 'out'}-${up() ? 'up' : 'down'}`,\n local.size,\n local.popupClass,\n );\n });\n const hostStyle = createMemo(() => {\n return `:host {--popover-bg: ${isDark() ? '#1f1f1f' : 'var(--component-bg)'};--popover-shadow-color: rgb(0 0 0 / 5%);position: absolute;}`;\n });\n\n createEffect(() => {\n if (open()) {\n showPortal();\n\n window.addEventListener('scroll', showPortal, {\n passive: passiveSupported,\n });\n }\n onCleanup(() => {\n window.removeEventListener('scroll', showPortal, false);\n });\n });\n onMount(() => {\n if (local.trigger !== 'none') {\n document.documentElement.addEventListener('mousedown', close, false);\n }\n });\n onCleanup(() => {\n clearTimeout(closeTimer);\n document.documentElement.removeEventListener('mousedown', close, false);\n });\n\n return (\n <>\n <style textContent={popoverCss} />\n <Show when={local.css}>\n <style textContent={css(local.css)} />\n </Show>\n <span ref={childRef} class={cx('popover', local.size, local.class)} {...childrenProps()}>\n {local.children}\n </span>\n <Show when={open() !== null || !local.destroyInactive}>\n <Portal useShadow mount={container()}>\n <style textContent={baseStyle()} />\n <style textContent={portalCss} />\n <style textContent={hostStyle()} />\n <style textContent={portalStyle()} />\n <style textContent={width()} />\n <Show when={local.popupCss}>\n <style textContent={css(local.popupCss)} />\n </Show>\n <div ref={ref} onAnimationEnd={exit} class={portalCls()} {...childrenProps()}>\n <Show when={local.content} fallback={<Empty />}>\n <Show when={typeof local.content === 'string'} fallback={<>{local.content}</>}>\n {/* eslint-disable-next-line solid/no-innerhtml */}\n <div innerHTML={local.content as string} />\n </Show>\n </Show>\n </div>\n </Portal>\n </Show>\n </>\n );\n}\n\nexport type PopoverElement = CustomElement<PopoverProps, 'onOpenChange'>;\n\nexport const defaultProps = {\n class: void 0,\n css: void 0,\n content: void 0,\n getPopupContainer: void 0,\n trigger: void 0,\n open: void 0,\n onOpenChange: void 0,\n popupClass: void 0,\n popupCss: void 0,\n destroyInactive: true,\n disabled: void 0,\n arrow: void 0,\n placement: void 0,\n dropdownMatchSelectWidth: void 0,\n};\ncustomElement<PopoverProps>('n-popover', defaultProps, (_, opt) => {\n const { baseStyle } = theme;\n const el = opt.element;\n const props = mergeProps(\n {\n onOpenChange(next: boolean | null) {\n el.dispatchEvent(\n new CustomEvent('openchange', {\n detail: next,\n }),\n );\n },\n children: [...el.childNodes.values()],\n },\n _,\n );\n\n createEffect(() => {\n clearAttribute(el, ['content', 'popupCss', 'css']);\n });\n return (\n <>\n <style textContent={inline} />\n <style textContent={baseStyle()} />\n <Popover {...props} />\n </>\n );\n});\nexport default Popover;\n"],"names":["TriggerOption","Placement","createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","Show","splitProps","Portal","isElementInside","isEqual","isFunction","passiveSupported","css","cx","customElement","clearAttribute","Empty","theme","inline","popoverCss","portalCss","Popover","props","ref","childRef","closeTimer","portalTimer","isDark","baseStyle","local","trigger","open","setOpen","posi","setPosi","up","setUp","width","setWidth","openChange","next","disabled","onOpenChange","exit","close","e","clearTimeout","setTimeout","target","getAttribute","isContains","type","dropdownMatchSelectWidth","offsetWidth","showPortal","elRect","getBoundingClientRect","portalRect","offsetX","margin","window","innerHeight","bottom","_placement","placement","_isBottom","startsWith","offsetHeight","top","arrowHeight","arrow","_posi","left","right","Math","abs","prev","handleOpen","stopPropagation","preventDefault","clientX","clientY","container","getPopupContainer","document","body","childrenProps","_props","openFn","openEvent","click","hover","contextMenu","none","closeFn","closeEvent","Object","assign","portalStyle","p","keys","map","k","join","portalCls","size","popupClass","hostStyle","addEventListener","passive","removeEventListener","documentElement","class","children","destroyInactive","popupCss","content","defaultProps","_","opt","el","element","dispatchEvent","CustomEvent","detail","childNodes","values"],"mappings":"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"}
|