neko-ui 2.5.2 → 2.6.0-beta.1
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/carousel/style.js +3 -5
- package/es/carousel/style.js.map +1 -1
- package/es/checkbox/style.js +2 -4
- package/es/checkbox/style.js.map +1 -1
- package/es/code/index.js +4 -1
- package/es/code/index.js.map +1 -1
- package/es/code/style.js +3 -6
- package/es/code/style.js.map +1 -1
- package/es/md/style.js +1 -2
- package/es/md/style.js.map +1 -1
- package/es/md/worker.js +1 -1
- package/es/md/worker.js.map +1 -1
- package/es/pagination/styles.js +2 -4
- package/es/pagination/styles.js.map +1 -1
- package/es/popover/style.js +1 -2
- package/es/popover/style.js.map +1 -1
- package/es/prism/css.js +1 -2
- package/es/prism/css.js.map +1 -1
- package/es/radio/style.js +2 -4
- package/es/radio/style.js.map +1 -1
- package/es/spin/index.js +4 -6
- package/es/spin/index.js.map +1 -1
- package/es/switch/style.js +1 -2
- package/es/switch/style.js.map +1 -1
- package/es/table/styles.js +1 -2
- package/es/table/styles.js.map +1 -1
- package/es/tabs/style.js +1 -2
- package/es/tabs/style.js.map +1 -1
- package/lib/carousel/style.js +3 -5
- package/lib/carousel/style.js.map +1 -1
- package/lib/checkbox/style.js +2 -4
- package/lib/checkbox/style.js.map +1 -1
- package/lib/code/index.js +4 -1
- package/lib/code/index.js.map +1 -1
- package/lib/code/style.js +3 -6
- package/lib/code/style.js.map +1 -1
- package/lib/md/style.js +1 -2
- package/lib/md/style.js.map +1 -1
- package/lib/md/worker.js +1 -1
- package/lib/md/worker.js.map +1 -1
- package/lib/pagination/styles.js +2 -4
- package/lib/pagination/styles.js.map +1 -1
- package/lib/popover/style.js +1 -2
- package/lib/popover/style.js.map +1 -1
- package/lib/prism/css.js +1 -2
- package/lib/prism/css.js.map +1 -1
- package/lib/radio/style.js +2 -4
- package/lib/radio/style.js.map +1 -1
- package/lib/spin/index.js +4 -6
- package/lib/spin/index.js.map +1 -1
- package/lib/switch/style.js +1 -2
- package/lib/switch/style.js.map +1 -1
- package/lib/table/styles.js +1 -2
- package/lib/table/styles.js.map +1 -1
- package/lib/tabs/style.js +1 -2
- package/lib/tabs/style.js.map +1 -1
- package/package.json +11 -11
- package/umd/index.js +1 -1
package/es/carousel/style.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{css as
|
|
1
|
+
import{css as e}from"@moneko/css";export const style=e`
|
|
2
2
|
:host {
|
|
3
3
|
inline-size: 100%;
|
|
4
4
|
}
|
|
@@ -57,8 +57,7 @@ import{css as n}from"@moneko/css";export const style=n`
|
|
|
57
57
|
font-size: 16px;
|
|
58
58
|
font-weight: bold;
|
|
59
59
|
transition: transform var(--transition-duration);
|
|
60
|
-
inset-block
|
|
61
|
-
inset-block-end: 0;
|
|
60
|
+
inset-block: 0 0;
|
|
62
61
|
inline-size: fit-content;
|
|
63
62
|
block-size: fit-content;
|
|
64
63
|
line-height: 1;
|
|
@@ -90,9 +89,8 @@ import{css as n}from"@moneko/css";export const style=n`
|
|
|
90
89
|
|
|
91
90
|
.dots {
|
|
92
91
|
position: absolute;
|
|
93
|
-
inset-inline
|
|
92
|
+
inset-inline: 0 0;
|
|
94
93
|
inset-block-end: 16px;
|
|
95
|
-
inset-inline-start: 0;
|
|
96
94
|
z-index: 1;
|
|
97
95
|
display: flex;
|
|
98
96
|
overflow: hidden;
|
package/es/carousel/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/carousel/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n inline-size: 100%;\n }\n\n .carousel {\n position: relative;\n display: block;\n overflow: hidden;\n border-radius: var(--border-radius);\n inline-size: 100%;\n block-size: 200px;\n color: #fff;\n user-select: none;\n line-height: normal;\n background-color: rgb(0 0 0 / 20%);\n\n & ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .item {\n display: flex;\n justify-content: center;\n align-items: center;\n inline-size: 100%;\n min-inline-size: 100%;\n block-size: 100%;\n min-block-size: 100%;\n content-visibility: auto;\n transform: translate3d(-100%, 0, 0);\n }\n\n .list {\n display: flex;\n border-radius: inherit;\n inline-size: 100%;\n block-size: 100%;\n transform: translate3d(0, 0, 0);\n\n &[data-dir='-1'] .item {\n animation: carousel-prev 500ms forwards;\n }\n\n &[data-dir='1'] .item {\n animation: carousel-next 500ms forwards;\n }\n }\n\n .prev,\n .next {\n position: absolute;\n z-index: 1;\n margin: auto;\n border-radius: var(--border-radius);\n font-size: 16px;\n font-weight: bold;\n transition: transform var(--transition-duration);\n inset-block
|
|
1
|
+
{"version":3,"sources":["../../components/carousel/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n inline-size: 100%;\n }\n\n .carousel {\n position: relative;\n display: block;\n overflow: hidden;\n border-radius: var(--border-radius);\n inline-size: 100%;\n block-size: 200px;\n color: #fff;\n user-select: none;\n line-height: normal;\n background-color: rgb(0 0 0 / 20%);\n\n & ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .item {\n display: flex;\n justify-content: center;\n align-items: center;\n inline-size: 100%;\n min-inline-size: 100%;\n block-size: 100%;\n min-block-size: 100%;\n content-visibility: auto;\n transform: translate3d(-100%, 0, 0);\n }\n\n .list {\n display: flex;\n border-radius: inherit;\n inline-size: 100%;\n block-size: 100%;\n transform: translate3d(0, 0, 0);\n\n &[data-dir='-1'] .item {\n animation: carousel-prev 500ms forwards;\n }\n\n &[data-dir='1'] .item {\n animation: carousel-next 500ms forwards;\n }\n }\n\n .prev,\n .next {\n position: absolute;\n z-index: 1;\n margin: auto;\n border-radius: var(--border-radius);\n font-size: 16px;\n font-weight: bold;\n transition: transform var(--transition-duration);\n inset-block: 0 0;\n inline-size: fit-content;\n block-size: fit-content;\n line-height: 1;\n cursor: pointer;\n\n &::before {\n display: inline-block;\n transform: rotate(90deg);\n }\n }\n\n .prev {\n inset-inline-start: 4px;\n transform: translateX(-32px) scaleY(0);\n\n &::before {\n content: '﹀';\n }\n }\n\n .next {\n inset-inline-end: 4px;\n transform: translateX(32px) scaleY(0);\n\n &::before {\n content: '︿';\n }\n }\n\n .dots {\n position: absolute;\n inset-inline: 0 0;\n inset-block-end: 16px;\n z-index: 1;\n display: flex;\n overflow: hidden;\n margin: 0 auto;\n inline-size: fit-content;\n max-inline-size: calc(100% - 42px);\n transition:\n transform var(--transition-duration) linear,\n opacity var(--transition-duration) linear;\n gap: 4px;\n }\n\n .dot {\n --offset: 0;\n\n border-radius: 2px;\n inline-size: 16px;\n min-inline-size: 8px;\n block-size: 3px;\n background-color: rgb(255 255 255 / 80%);\n transition: background-color var(--transition-duration) linear;\n cursor: pointer;\n\n &:hover,\n &.active {\n background-color: var(--primary-color);\n }\n }\n\n .header {\n position: absolute;\n inset-block-start: 0;\n z-index: 1;\n display: flex;\n inline-size: 100%;\n transition: transform var(--transition-duration);\n transform: translate3d(0, -100%, 0);\n }\n\n .carousel:hover {\n .prev,\n .next {\n &:not([data-show='false']) {\n transform: translateX(0) scaleY(1.5);\n }\n }\n\n .header {\n transform: translate3d(0, 0, 0);\n }\n }\n\n @keyframes carousel-prev {\n 0% {\n transform: translate3d(-100%, 0, 0);\n }\n\n 100% {\n transform: translate3d(0, 0, 0);\n }\n }\n\n @keyframes carousel-next {\n 0% {\n transform: translate3d(-100%, 0, 0);\n }\n\n 100% {\n transform: translate3d(-200%, 0, 0);\n }\n }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoKzB,CAAC,AAAC"}
|
package/es/checkbox/style.js
CHANGED
|
@@ -67,10 +67,8 @@ import{css as r}from"@moneko/css";export const style=r`
|
|
|
67
67
|
transition-timing-function: var(--transition-timing-function);
|
|
68
68
|
transition-property: background-color, transform, border-color, height;
|
|
69
69
|
box-sizing: border-box;
|
|
70
|
-
inset-block
|
|
71
|
-
inset-
|
|
72
|
-
inset-inline-start: 0;
|
|
73
|
-
inset-inline-end: 0;
|
|
70
|
+
inset-block: 0 0;
|
|
71
|
+
inset-inline: 0 0;
|
|
74
72
|
content: '';
|
|
75
73
|
inline-size: 10px;
|
|
76
74
|
block-size: 10px;
|
package/es/checkbox/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/checkbox/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .box {\n display: flex;\n flex-wrap: wrap;\n gap: 8px 16px;\n }\n\n .horizontal {\n flex-direction: row;\n }\n\n .vertical {\n flex-direction: column;\n }\n\n .item {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n box-sizing: border-box;\n gap: 6px;\n outline: 0;\n\n label {\n color: var(--text-color);\n cursor: pointer;\n }\n\n .checkbox {\n position: relative;\n display: inline-block;\n margin: 0;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n background-color: var(--component-bg);\n outline: 0 solid transparent;\n box-shadow: inset 0 0 0 var(--shadow-w, 0) var(--primary-color);\n transition:\n 0.3s border-color var(--transition-timing-function),\n 0.3s box-shadow var(--transition-timing-function),\n 0.3s outline var(--transition-timing-function);\n appearance: none;\n inline-size: 16px;\n block-size: 16px;\n pointer-events: none;\n user-select: none;\n\n &:active {\n --primary-color: var(--primary-active);\n --border-color: var(--primary-active);\n }\n\n &:disabled {\n --border-color: var(--disable-border);\n --primary-color: var(--disable-border);\n }\n\n &::before {\n position: absolute;\n display: block;\n margin: auto;\n border-style: solid;\n border-width: 0 0 2px 2px;\n border-color: transparent;\n transition-duration: 0.3s;\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, transform, border-color, height;\n box-sizing: border-box;\n inset-block
|
|
1
|
+
{"version":3,"sources":["../../components/checkbox/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .box {\n display: flex;\n flex-wrap: wrap;\n gap: 8px 16px;\n }\n\n .horizontal {\n flex-direction: row;\n }\n\n .vertical {\n flex-direction: column;\n }\n\n .item {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n box-sizing: border-box;\n gap: 6px;\n outline: 0;\n\n label {\n color: var(--text-color);\n cursor: pointer;\n }\n\n .checkbox {\n position: relative;\n display: inline-block;\n margin: 0;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n background-color: var(--component-bg);\n outline: 0 solid transparent;\n box-shadow: inset 0 0 0 var(--shadow-w, 0) var(--primary-color);\n transition:\n 0.3s border-color var(--transition-timing-function),\n 0.3s box-shadow var(--transition-timing-function),\n 0.3s outline var(--transition-timing-function);\n appearance: none;\n inline-size: 16px;\n block-size: 16px;\n pointer-events: none;\n user-select: none;\n\n &:active {\n --primary-color: var(--primary-active);\n --border-color: var(--primary-active);\n }\n\n &:disabled {\n --border-color: var(--disable-border);\n --primary-color: var(--disable-border);\n }\n\n &::before {\n position: absolute;\n display: block;\n margin: auto;\n border-style: solid;\n border-width: 0 0 2px 2px;\n border-color: transparent;\n transition-duration: 0.3s;\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, transform, border-color, height;\n box-sizing: border-box;\n inset-block: 0 0;\n inset-inline: 0 0;\n content: '';\n inline-size: 10px;\n block-size: 10px;\n transform: scale(0);\n }\n\n &:checked {\n --shadow-w: 16px;\n --border-color: var(--primary-color);\n\n &::before {\n block-size: 5px;\n border-color: var(--primary-outline);\n transform: rotate(-55deg) translateY(-10%) translateX(5%) scale(1);\n }\n\n & + label {\n --text-color: var(--primary-color);\n }\n }\n\n &:indeterminate:not(:checked) {\n &::before {\n border-radius: 2px;\n background-color: var(--primary-color);\n transform: scale(1);\n }\n }\n\n &:not(:disabled, :checked):hover {\n --primary-color: var(--primary-hover);\n --border-color: var(--primary-hover);\n }\n }\n\n &:not([aria-disabled]:not([aria-disabled='false'])):focus .checkbox {\n outline: 3px solid var(--primary-outline);\n\n &:not(:checked) {\n border-color: var(--primary-hover);\n }\n }\n\n &[aria-disabled]:not([aria-disabled='false']) {\n cursor: not-allowed;\n\n & > label {\n --text-color: var(--disable-color);\n\n cursor: not-allowed;\n }\n }\n\n &:last-child {\n margin-inline-end: 16px;\n }\n }\n\n ${['success', 'error', 'warning']\n .map(\n (s) =>\n `.${s} {--border-color: var(--${s}-border);--primary-hover: var(--${s}-hover);--primary-outline: var(--${s}-outline);--primary-color: var(--${s}-color);--primary-active: var(--${s}-active);--component-bg: var(--${s}-bg);}`,\n )\n .join('')}\n`;\n"],"names":["css","style","map","s","join"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiIvB,EAAE,CAAC,UAAW,QAAS,UAAU,CAC9BE,GAAG,CACF,AAACC,GACC,CAAC,CAAC,EAAEA,EAAE,wBAAwB,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,+BAA+B,EAAEA,EAAE,MAAM,CAAC,EAEjOC,IAAI,CAAC,IAAI;AACd,CAAC,AAAC"}
|
package/es/code/index.js
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as o}from"solid-js/web";import{insert as r}from"solid-js/web";import{effect as i}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as l}from"solid-js/web";import{className as s}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=/*#__PURE__*/t('<div class="toolbar"><button class="toolbar-copy">'),m=/*#__PURE__*/t("<pre><code>"),u=/*#__PURE__*/t("<style>"),c=/*#__PURE__*/t("<div><textarea>");import{Show as v,createComponent as p,createEffect as f,createSignal as g,mergeProps as b,untrack as h}from"solid-js";import w from"@moneko/common/lib/isFunction";import $ from"@moneko/common/lib/setClipboard";import{css as _,cx as C}from"@moneko/css";import{customElement as j}from"solid-element";import{style as y}from"./style";import k from"../prism/css";import"../prism/prism.js";import P from"../theme";function x(t){let n;let{baseStyle:p}=P,[b,j]=g(""),[x,E]=g(20);function N(){$(h(b),n)}function A(){return(()=>{let u=m(),c=u.firstChild,p=n;return r(u,l(v,{get when(){return t.toolbar},get children(){let e=d(),r=e.firstChild;return a(r,"click",N,!0),i(()=>{var r;return o(e,"data-lang",null==(r=t.lang)?void 0:r.split(" ")[0])}),e}}),c),"function"==typeof p?e(p,c):n=c,i(e=>{let o=C(`language-${t.lang}`,t.lineNumber&&"line-numbers",!t.toolbar&&"not-toolbar",!t.edit&&t.class),r=`language-${t.lang}`;return o!==e._v$&&s(u,e._v$=o),r!==e._v$2&&s(c,e._v$2=r),e},{_v$:void 0,_v$2:void 0}),u})()}function L({target:e}){let o=`${e.value}${/\n$/.test(e.value)?"":""}`;j(o),w(t.onChange)&&t.onChange(o)}return(// const work = new Worker(new URL(
|
|
1
|
+
import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as o}from"solid-js/web";import{insert as r}from"solid-js/web";import{effect as i}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as l}from"solid-js/web";import{className as s}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=/*#__PURE__*/t('<div class="toolbar"><button class="toolbar-copy">'),m=/*#__PURE__*/t("<pre><code>"),u=/*#__PURE__*/t("<style>"),c=/*#__PURE__*/t("<div><textarea>");import{Show as v,createComponent as p,createEffect as f,createSignal as g,mergeProps as b,untrack as h}from"solid-js";import w from"@moneko/common/lib/isFunction";import $ from"@moneko/common/lib/setClipboard";import{css as _,cx as C}from"@moneko/css";import{customElement as j}from"solid-element";import{style as y}from"./style";import k from"../prism/css";import"../prism/prism.js";import P from"../theme";function x(t){let n;let{baseStyle:p}=P,[b,j]=g(""),[x,E]=g(20);function N(){$(h(b),n)}function A(){return(()=>{let u=m(),c=u.firstChild,p=n;return r(u,l(v,{get when(){return t.toolbar},get children(){let e=d(),r=e.firstChild;return a(r,"click",N,!0),i(()=>{var r;return o(e,"data-lang",null==(r=t.lang)?void 0:r.split(" ")[0])}),e}}),c),"function"==typeof p?e(p,c):n=c,i(e=>{let o=C(`language-${t.lang}`,t.lineNumber&&"line-numbers",!t.toolbar&&"not-toolbar",!t.edit&&t.class),r=`language-${t.lang}`;return o!==e._v$&&s(u,e._v$=o),r!==e._v$2&&s(c,e._v$2=r),e},{_v$:void 0,_v$2:void 0}),u})()}function L({target:e}){let o=`${e.value}${/\n$/.test(e.value)?"":""}`;j(o),w(t.onChange)&&t.onChange(o)}return(// const work = new Worker(new URL("./worker.ts", import.meta.url), {
|
|
2
|
+
// name: "wastedTime",
|
|
3
|
+
// /* webpackEntryOptions: { filename: "workers/[name].js" } */
|
|
4
|
+
// });
|
|
2
5
|
// work.addEventListener('message', update);
|
|
3
6
|
// work.postMessage({
|
|
4
7
|
// lang: props.lang,
|
package/es/code/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/code/index.tsx"],"sourcesContent":["import { Show, createComponent, createEffect, createSignal, mergeProps, untrack } from 'solid-js';\nimport { isFunction, setClipboard } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport prismCss from '../prism/css';\nimport '../prism/prism.js';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface CodeProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 内容 */\n code?: string;\n /** 语言 */\n lang?: string;\n /** 显示代码行号 */\n lineNumber?: boolean;\n /** 支持编辑 */\n edit?: boolean;\n /** 开启代码块工具条 */\n toolbar?: boolean;\n /** 编辑修改时的回调 */\n onChange?: (code: string) => void;\n children?: JSX.Element;\n}\n\nexport type CodeElement = CustomElement<CodeProps>;\n\nfunction Code(props: CodeProps) {\n const { baseStyle } = theme;\n let codeEl: HTMLPreElement;\n const [code, setCode] = createSignal<string>('');\n const [hei, setHei] = createSignal(20);\n\n function copy() {\n setClipboard(untrack(code), codeEl);\n }\n function pre() {\n return (\n <pre\n class={cx(\n `language-${props.lang}`,\n props.lineNumber && 'line-numbers',\n !props.toolbar && 'not-toolbar',\n !props.edit && props.class,\n )}\n >\n <Show when={props.toolbar}>\n <div class=\"toolbar\" data-lang={props.lang?.split(' ')[0]}>\n <button class=\"toolbar-copy\" onClick={copy} />\n </div>\n </Show>\n <code ref={codeEl} class={`language-${props.lang}`} />\n </pre>\n );\n }\n function change({ target }: { target: HTMLTextAreaElement }) {\n const c = `${target.value}${/\\n$/.test(target.value) ? '\\u200b' : ''}`;\n\n setCode(c);\n if (isFunction(props.onChange)) {\n props.onChange(c);\n }\n }\n function update(e: { data: string }) {\n codeEl.innerHTML = e.data;\n setHei(codeEl.getBoundingClientRect().height - (props.toolbar ? 40 : 16));\n }\n function postMessage(opt: { lang?: string; code?: string }) {\n if (!opt.code) return;\n const _lang = opt.lang || 'markup';\n\n if (/^diff-([\\w-]+)/i.test(_lang)) {\n window.Prism.languages[_lang] = window.Prism.languages.diff;\n }\n update({\n data: window.Prism.highlight(opt.code, window.Prism.languages[_lang], _lang),\n });\n }\n\n // const work = new Worker(new URL(
|
|
1
|
+
{"version":3,"sources":["../../components/code/index.tsx"],"sourcesContent":["import { Show, createComponent, createEffect, createSignal, mergeProps, untrack } from 'solid-js';\nimport { isFunction, setClipboard } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport prismCss from '../prism/css';\nimport '../prism/prism.js';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface CodeProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 内容 */\n code?: string;\n /** 语言 */\n lang?: string;\n /** 显示代码行号 */\n lineNumber?: boolean;\n /** 支持编辑 */\n edit?: boolean;\n /** 开启代码块工具条 */\n toolbar?: boolean;\n /** 编辑修改时的回调 */\n onChange?: (code: string) => void;\n children?: JSX.Element;\n}\n\nexport type CodeElement = CustomElement<CodeProps>;\n\nfunction Code(props: CodeProps) {\n const { baseStyle } = theme;\n let codeEl: HTMLPreElement;\n const [code, setCode] = createSignal<string>('');\n const [hei, setHei] = createSignal(20);\n\n function copy() {\n setClipboard(untrack(code), codeEl);\n }\n function pre() {\n return (\n <pre\n class={cx(\n `language-${props.lang}`,\n props.lineNumber && 'line-numbers',\n !props.toolbar && 'not-toolbar',\n !props.edit && props.class,\n )}\n >\n <Show when={props.toolbar}>\n <div class=\"toolbar\" data-lang={props.lang?.split(' ')[0]}>\n <button class=\"toolbar-copy\" onClick={copy} />\n </div>\n </Show>\n <code ref={codeEl} class={`language-${props.lang}`} />\n </pre>\n );\n }\n function change({ target }: { target: HTMLTextAreaElement }) {\n const c = `${target.value}${/\\n$/.test(target.value) ? '\\u200b' : ''}`;\n\n setCode(c);\n if (isFunction(props.onChange)) {\n props.onChange(c);\n }\n }\n function update(e: { data: string }) {\n codeEl.innerHTML = e.data;\n setHei(codeEl.getBoundingClientRect().height - (props.toolbar ? 40 : 16));\n }\n function postMessage(opt: { lang?: string; code?: string }) {\n if (!opt.code) return;\n const _lang = opt.lang || 'markup';\n\n if (/^diff-([\\w-]+)/i.test(_lang)) {\n window.Prism.languages[_lang] = window.Prism.languages.diff;\n }\n update({\n data: window.Prism.highlight(opt.code, window.Prism.languages[_lang], _lang),\n });\n }\n\n // const work = new Worker(new URL(\"./worker.ts\", import.meta.url), {\n // name: \"wastedTime\",\n // /* webpackEntryOptions: { filename: \"workers/[name].js\" } */\n // });\n // work.addEventListener('message', update);\n\n // work.postMessage({\n // lang: props.lang,\n // code: code(),\n // });\n // onCleanup(() => {\n // work.terminate();\n // });\n createEffect(() => {\n if (props.code) {\n const _code = props.code.replace(/^\\n/, '');\n\n try {\n setCode(decodeURIComponent(_code));\n } catch (error) {\n setCode(_code);\n }\n } else {\n setCode('');\n }\n });\n createEffect(() => {\n postMessage({\n lang: props.lang,\n code: code(),\n });\n });\n\n return (\n <>\n <style>\n {baseStyle()}\n {prismCss()}\n {style}\n {css(props.css)}\n </style>\n <Show when={props.edit} fallback={pre()}>\n <div class={cx('n-editor', props.class)}>\n <textarea\n value={code()}\n class={cx(props.lineNumber && 'line-numbers', !props.toolbar && 'not-toolbar')}\n style={{ height: `${hei()}px` }}\n onInput={change}\n />\n {pre()}\n </div>\n </Show>\n </>\n );\n}\n\ncustomElement<CodeProps>(\n 'n-code',\n {\n class: void 0,\n code: void 0,\n lang: void 0,\n children: void 0,\n edit: void 0,\n toolbar: void 0,\n css: void 0,\n lineNumber: void 0,\n onChange: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n code: el.textContent,\n css: el.css,\n onChange(val: string) {\n el.dispatchEvent(\n new CustomEvent('change', {\n detail: val,\n }),\n );\n },\n },\n _,\n );\n\n createEffect(() => {\n el.replaceChildren();\n el.removeAttribute('css');\n });\n\n return createComponent(Code, props);\n },\n);\nexport default Code;\n"],"names":["Show","createComponent","createEffect","createSignal","mergeProps","untrack","isFunction","setClipboard","css","cx","customElement","style","prismCss","theme","Code","props","codeEl","baseStyle","code","setCode","hei","setHei","copy","pre","toolbar","lang","split","lineNumber","edit","class","change","target","c","value","test","onChange","_code","replace","decodeURIComponent","error","postMessage","opt","e","_lang","window","Prism","languages","diff","data","highlight","innerHTML","getBoundingClientRect","height","children","_","el","element","textContent","val","dispatchEvent","CustomEvent","detail","replaceChildren","removeAttribute"],"mappings":"miBAAA,QAASA,QAAAA,CAAI,CAAEC,mBAAAA,CAAe,CAAEC,gBAAAA,CAAY,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,WAAAA,CAAO,KAAQ,UAAW,AAClG,QAASC,MAAgC,+BAAiB,AAA1D,QAAqBC,MAAoB,iCAAiB,AAC1D,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAAOC,MAAc,cAAe,AACpC,OAAO,mBAAoB,AAC3B,QAAOC,MAAW,UAAW,CAyB7B,SAASC,EAAKC,CAAgB,MAExBC,EADJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGJ,EAEhB,CAACK,EAAMC,EAAQ,CAAGhB,EAAqB,IACvC,CAACiB,EAAKC,EAAO,CAAGlB,EAAa,IAEnC,SAASmB,IACPf,EAAaF,EAAQa,GAAOF,EAC9B,CACA,SAASO,IACP,uCAceP,eALVhB,qBAAWe,EAAMS,OAAO,6DAEiBF,iBADRP,gCAAAA,EAAAA,EAAMU,IAAI,SAAVV,EAAYW,KAAK,CAAC,IAAI,CAAC,EAAE,wCAIhDV,gBAZJP,EACL,CAAC,SAAS,EAAEM,EAAMU,IAAI,CAAC,CAAC,CACxBV,EAAMY,UAAU,EAAI,eACpB,CAACZ,EAAMS,OAAO,EAAI,cAClB,CAACT,EAAMa,IAAI,EAAIb,EAAMc,KAAK,IAQF,CAAC,SAAS,EAAEd,EAAMU,IAAI,CAAC,CAAC,4FAGxD,CACA,SAASK,EAAO,CAAEC,OAAAA,CAAM,CAAmC,EACzD,IAAMC,EAAI,CAAC,EAAED,EAAOE,KAAK,CAAC,EAAE,MAAMC,IAAI,CAACH,EAAOE,KAAK,EAAI,IAAW,GAAG,CAAC,CAEtEd,EAAQa,GACJ1B,EAAWS,EAAMoB,QAAQ,GAC3BpB,EAAMoB,QAAQ,CAACH,EAEnB,CAkDA,OAjCA,qEAAqE;AACrE,wBAAwB;AACxB,iEAAiE;AACjE,MAAM;AACN,4CAA4C;AAE5C,qBAAqB;AACrB,sBAAsB;AACtB,kBAAkB;AAClB,MAAM;AACN,oBAAoB;AACpB,sBAAsB;AACtB,MAAM;AACN9B,EAAa,KACX,GAAIa,EAAMG,IAAI,CAAE,CACd,IAAMkB,EAAQrB,EAAMG,IAAI,CAACmB,OAAO,CAAC,MAAO,IAExC,GAAI,CACFlB,EAAQmB,mBAAmBF,GAC7B,CAAE,MAAOG,EAAO,CACdpB,EAAQiB,EACV,CACF,MACEjB,EAAQ,GAEZ,GACAjB,EAAa,MACXsC,AAvCF,SAAqBC,CAAqC,MAJ1CC,EAKd,GAAI,CAACD,EAAIvB,IAAI,CAAE,OACf,IAAMyB,EAAQF,EAAIhB,IAAI,EAAI,SAEtB,kBAAkBS,IAAI,CAACS,IACzBC,CAAAA,OAAOC,KAAK,CAACC,SAAS,CAACH,EAAM,CAAGC,OAAOC,KAAK,CAACC,SAAS,CAACC,IAAI,AAAD,EAT9CL,EAWP,CACLM,KAAMJ,OAAOC,KAAK,CAACI,SAAS,CAACR,EAAIvB,IAAI,CAAE0B,OAAOC,KAAK,CAACC,SAAS,CAACH,EAAM,CAAEA,EACxE,EAZA3B,EAAOkC,SAAS,CAAGR,EAAEM,IAAI,CACzB3B,EAAOL,EAAOmC,qBAAqB,GAAGC,MAAM,CAAIrC,CAAAA,EAAMS,OAAO,CAAG,GAAK,EAAC,EAYxE,EA6Bc,CACVC,KAAMV,EAAMU,IAAI,CAChBP,KAAMA,GACR,EACF,+BAKOD,YACAL,YACAD,gBACAH,EAAIO,EAAMP,GAAG,gBAEfR,qBAAWe,EAAMa,IAAI,wBAAYL,gEAMnBO,UAEVP,oBAPSd,EAAG,WAAYM,EAAMc,KAAK,IAG3BpB,EAAGM,EAAMY,UAAU,EAAI,eAAgB,CAACZ,EAAMS,OAAO,EAAI,iBAC/C,CAAC,EAAEJ,IAAM,EAAE,CAAC,oNAFtBF,WAUnB,CAEAR,EACE,SACA,CACEmB,MAAO,KAAK,EACZX,KAAM,KAAK,EACXO,KAAM,KAAK,EACX4B,SAAU,KAAK,EACfzB,KAAM,KAAK,EACXJ,QAAS,KAAK,EACdhB,IAAK,KAAK,EACVmB,WAAY,KAAK,EACjBQ,SAAU,KAAK,CACjB,EACA,CAACmB,EAAGb,KACF,IAAMc,EAAKd,EAAIe,OAAO,CAChBzC,EAAQX,EACZ,CACEc,KAAMqC,EAAGE,WAAW,CACpBjD,IAAK+C,EAAG/C,GAAG,CACX2B,SAASuB,CAAW,EAClBH,EAAGI,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQH,CACV,GAEJ,CACF,EACAJ,GAQF,OALApD,EAAa,KACXqD,EAAGO,eAAe,GAClBP,EAAGQ,eAAe,CAAC,MACrB,GAEO9D,EAAgBa,EAAMC,EAC/B,EAEF,gBAAeD,CAAK"}
|
package/es/code/style.js
CHANGED
|
@@ -26,18 +26,15 @@ import{css as n}from"@moneko/css";export const style=n`
|
|
|
26
26
|
outline: none;
|
|
27
27
|
resize: none;
|
|
28
28
|
box-sizing: border-box;
|
|
29
|
-
inset-block
|
|
30
|
-
inset-inline
|
|
31
|
-
inset-inline-end: 16px;
|
|
32
|
-
inset-block-end: 8px;
|
|
29
|
+
inset-block: 32px 8px;
|
|
30
|
+
inset-inline: 16px 16px;
|
|
33
31
|
min-block-size: 64px;
|
|
34
32
|
caret-color: var(--text-color);
|
|
35
33
|
block-size: fit-content;
|
|
36
34
|
line-height: inherit !important;
|
|
37
35
|
|
|
38
36
|
&.line-numbers {
|
|
39
|
-
inset-inline
|
|
40
|
-
inset-inline-end: 10px;
|
|
37
|
+
inset-inline: 54px 10px;
|
|
41
38
|
}
|
|
42
39
|
|
|
43
40
|
&.not-toolbar {
|
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 .not-toolbar code {\n padding-block-start: 8px !important;\n\n .line-numbers-rows {\n padding-block-start: 8px !important;\n }\n }\n\n .n-editor {\n --font-size: 13px;\n\n margin-block-start: 0;\n position: relative;\n\n textarea {\n position: absolute;\n z-index: 1;\n margin: 0;\n border: none;\n padding: 0;\n font-size: var(--font-size);\n white-space: inherit;\n color: transparent;\n background-color: transparent;\n outline: none;\n resize: none;\n box-sizing: border-box;\n inset-block
|
|
1
|
+
{"version":3,"sources":["../../components/code/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .not-toolbar code {\n padding-block-start: 8px !important;\n\n .line-numbers-rows {\n padding-block-start: 8px !important;\n }\n }\n\n .n-editor {\n --font-size: 13px;\n\n margin-block-start: 0;\n position: relative;\n\n textarea {\n position: absolute;\n z-index: 1;\n margin: 0;\n border: none;\n padding: 0;\n font-size: var(--font-size);\n white-space: inherit;\n color: transparent;\n background-color: transparent;\n outline: none;\n resize: none;\n box-sizing: border-box;\n inset-block: 32px 8px;\n inset-inline: 16px 16px;\n min-block-size: 64px;\n caret-color: var(--text-color);\n block-size: fit-content;\n line-height: inherit !important;\n\n &.line-numbers {\n inset-inline: 54px 10px;\n }\n\n &.not-toolbar {\n inset-block-start: 8px;\n min-block-size: 20px;\n }\n }\n\n pre {\n margin-block-start: 0 !important;\n pointer-events: none;\n inline-size: 100%;\n block-size: 100%;\n min-block-size: 65px;\n line-height: inherit !important;\n\n &.not-toolbar {\n min-block-size: 36px;\n }\n\n .toolbar {\n pointer-events: all;\n }\n\n code {\n line-height: inherit !important;\n }\n }\n }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEzB,CAAC,AAAC"}
|
package/es/md/style.js
CHANGED
|
@@ -225,8 +225,7 @@ import{css as o}from"@moneko/css";export const style=o`
|
|
|
225
225
|
h3,
|
|
226
226
|
h4,
|
|
227
227
|
h5 {
|
|
228
|
-
margin-block
|
|
229
|
-
margin-block-end: 1em;
|
|
228
|
+
margin-block: 1em;
|
|
230
229
|
font-weight: 500;
|
|
231
230
|
color: var(--text-heading);
|
|
232
231
|
transition-duration: var(--transition-duration);
|
package/es/md/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/md/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host,\n :root {\n --table-heading-bg: var(--border-color);\n }\n\n .n-photo-header > span,\n .n-md-body,\n .n-md-toc {\n backdrop-filter: blur(16px);\n /* stylelint-disable-next-line */\n -webkit-backdrop-filter: blur(16px);\n }\n\n .n-md-box:not(.site-doc-main) {\n position: relative;\n display: flex;\n margin: 0 auto;\n max-inline-size: 1280px;\n flex-direction: row-reverse;\n gap: 16px;\n }\n\n .n-md-toc,\n .n-md-body {\n background-color: var(--component-bg);\n box-shadow: 0 2px 8px 0 var(--primary-shadow);\n }\n\n .n-md-body {\n overflow: hidden;\n margin: 0 auto 24px;\n border-radius: var(--border-radius);\n padding: 24px;\n color: var(--text-color);\n max-inline-size: 100%;\n box-sizing: border-box;\n overflow-wrap: break-word;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color;\n flex: 1;\n }\n\n .n-md-body .n-md-body,\n .n-md-body n-md {\n overflow: visible;\n margin: 0;\n padding: 0;\n background-color: unset;\n backdrop-filter: none;\n box-shadow: none;\n }\n\n .n-md-body:has(div:only-child:empty) {\n margin: 0;\n padding: 0;\n background-color: unset;\n backdrop-filter: none;\n box-shadow: none;\n }\n\n a {\n position: relative;\n text-decoration: none;\n color: var(--text-color);\n }\n\n a:visited {\n color: var(--text-secondary);\n }\n\n a:hover {\n color: var(--primary-hover, #80b3ff);\n }\n\n p {\n padding: 0;\n font-size: var(--font-size);\n line-height: 1.8;\n vertical-align: baseline;\n word-wrap: break-word;\n word-break: break-word;\n content-visibility: auto;\n contain-intrinsic-size: 32px;\n margin-block-end: 1em;\n }\n\n ol {\n margin: 0;\n padding: 0 0 0 24px;\n font-size: var(--font-size);\n }\n\n .n-md-toc {\n position: sticky;\n inset-block-start: 24px;\n inset-inline-end: 0;\n z-index: 10;\n display: block;\n overflow-y: auto;\n margin: 0 0 24px;\n border-radius: var(--border-radius);\n padding: 16px;\n max-inline-size: 200px;\n block-size: fit-content;\n max-block-size: calc(100vb - 132px);\n box-sizing: border-box;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: border-color, background-color, box-shadow;\n }\n\n .n-md-toc li,\n .n-md-toc ol {\n display: grid;\n inline-size: fit-content;\n max-inline-size: 100%;\n font-size: var(--font-size-sm);\n list-style: none;\n }\n\n .n-md-toc li a {\n overflow: hidden;\n max-inline-size: 100%;\n font-size: var(--font-size-sm);\n text-overflow: ellipsis;\n text-decoration: none;\n white-space: nowrap;\n color: var(--text-color);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: color;\n }\n\n .n-md-toc .active,\n .n-md-toc .active a {\n color: var(--primary-color, #5794ff);\n text-shadow: 0 1px var(--primary-shadow);\n }\n\n .n-md-toc a[href^='http'],\n .n-md-toc a[href^='\\/\\/'],\n .n-md-body table a[href^='http'] {\n &:not(:has(img, n-img))::after {\n content: ' ⎋';\n opacity: 0.3;\n }\n }\n\n a[href^='mailto:']::after {\n content: ' 📧';\n opacity: 0.4;\n }\n\n a[href]::before {\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 2px;\n background-color: var(--primary-hover, #80b3ff);\n transform: scaleX(0);\n transform-origin: center;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: transform, background-color;\n opacity: 0.5;\n content: '';\n }\n\n a[href]:has(img, n-img)::before {\n content: none !important;\n }\n\n a:hover::before {\n transform: scaleX(1);\n }\n\n th img[src*='browser-logos'] {\n display: block;\n inline-size: 32px;\n block-size: 32px;\n }\n\n h1::before,\n h2::before,\n h3::before,\n h4::before,\n h5::before,\n h6::before {\n color: var(--primary-color, #5794ff);\n content: attr(data-prefix);\n }\n\n h1[data-prefix]::before,\n h2[data-prefix]::before,\n h3[data-prefix]::before,\n h4[data-prefix]::before,\n h5[data-prefix]::before,\n h6[data-prefix]::before {\n color: var(--primary-color, #5794ff);\n content: attr(data-prefix) !important;\n }\n\n code:not([class]),\n mark {\n border-radius: var(--border-radius);\n padding: 2px 7px;\n font-size: 90%;\n color: var(--primary-heading);\n background-color: var(--text-selection);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, color;\n }\n\n [data-prefix] code,\n [data-prefix] mark {\n font-size: 60%;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5 {\n margin-block-start: 1em;\n margin-block-end: 1em;\n font-weight: 500;\n color: var(--text-heading);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: border-color, background-color, box-shadow, color;\n }\n\n table,\n tr th,\n tr td,\n blockquote,\n blockquote::after,\n blockquote::before,\n blockquote p {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n }\n\n dl {\n padding: 0;\n margin-block-end: 1em;\n }\n\n h1 {\n font-size: 1.6em;\n line-height: 54px;\n }\n\n h2 {\n font-size: 1.5em;\n line-height: 42px;\n counter-increment: section;\n }\n\n h2::before {\n content: counter(section) '. ';\n }\n\n h1,\n h2 {\n border-block-end: 1px dotted var(--border-color);\n padding-block-end: 10px;\n }\n\n h3 {\n font-size: 1.4em;\n line-height: 30px;\n }\n\n h4 {\n font-size: 1.3em;\n line-height: 28px;\n }\n\n h5 {\n font-size: 1.2em;\n list-style: none;\n }\n\n hr {\n margin: 16px 0;\n border: 0 none;\n padding: 0;\n block-size: 2px;\n text-align: start;\n color: var(--text-color);\n background-color: var(--border-color);\n }\n\n p img,\n p n-img {\n position: relative;\n display: flex;\n overflow: hidden;\n margin: auto;\n border-radius: var(--border-radius);\n max-inline-size: 100%;\n inline-size: fit-content;\n cursor: pointer;\n }\n\n ul {\n font-size: var(--font-size);\n }\n\n dl dt {\n margin-block-start: 16px;\n padding: 10px 0;\n font-size: 1em;\n font-weight: bold;\n font-style: italic;\n }\n\n dl dd {\n margin-block-end: 16px;\n margin-inline-start: 0;\n padding: 0 16px;\n }\n\n table {\n overflow: hidden;\n margin-block-end: 16px;\n border-block-end: 1px solid var(--table-heading-bg);\n inline-size: 100%;\n max-inline-size: 100%;\n border-spacing: 0;\n transition-property: border-color;\n word-break: break-all;\n }\n\n table:last-child {\n margin-block-end: 0;\n }\n\n table tbody tr:nth-child(2n) {\n background-color: var(--primary-details-bg);\n }\n\n table tbody tr:hover {\n background-color: var(--primary-selection);\n }\n\n table tr th {\n font-weight: 500;\n min-inline-size: 54px;\n color: var(--text-heading);\n background-color: var(--table-heading-bg);\n transition-property: background-color, color;\n }\n\n table tr th,\n table td {\n padding: 8px 16px;\n }\n\n tr:first-child th:first-child {\n border-start-start-radius: var(--border-radius);\n }\n\n tr:first-child th:last-child {\n border-start-end-radius: var(--border-radius);\n }\n\n blockquote {\n position: relative;\n margin: 30px 48px;\n border-radius: var(--border-radius);\n padding: 16px;\n font-weight: 500;\n background-color: var(--primary-selection);\n transition-property: background-color;\n }\n\n blockquote::before,\n blockquote::after {\n position: absolute;\n font-size: 56px;\n font-family: sans-serif;\n color: var(--primary-active);\n transition-property: color;\n content: '❞';\n line-height: 1;\n }\n\n blockquote::before {\n inset-block-start: -8px;\n inset-inline-start: 0;\n transform: translateX(-44px) rotate(180deg);\n }\n\n blockquote::after {\n inset-inline-end: 0;\n inset-block-end: -8px;\n transform: translateX(44px);\n }\n\n blockquote.n-tip {\n margin: 16px 0 16px 8px;\n border-inline-start: 4px solid var(--primary-color, #5794ff);\n }\n\n blockquote.n-tip::after {\n content: none;\n }\n\n blockquote.n-tip::before {\n inset-block-start: 18px;\n inset-inline-start: -12px;\n border-radius: 100%;\n inline-size: 20px;\n block-size: 20px;\n font-size: 14px;\n font-weight: bold;\n text-align: center;\n color: #fff;\n background-color: var(--primary-color, #5794ff);\n transform: none;\n content: '!';\n line-height: 20px;\n }\n\n blockquote cite {\n font-size: var(--font-size);\n color: var(--cite-color, #bfbfbf);\n line-height: 20px;\n }\n\n blockquote cite::before {\n content: '\\\\2014 \\\\00A0';\n }\n\n blockquote p {\n margin: auto 0;\n font-size: var(--font-size);\n line-height: 24px;\n transition-property: color;\n }\n\n details {\n overflow: hidden;\n border-inline-start: 5px solid var(--primary-hover, #5794ff);\n border-radius: var(--border-radius);\n padding: 12px 24px;\n background: var(--primary-details-bg);\n box-sizing: border-box;\n user-select: none;\n box-shadow: 0 2px 8px 0 var(--primary-shadow, rgb(0 0 0 / 5%));\n }\n\n details,\n details summary {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, transform, border-color;\n }\n\n details:not(:last-of-type) {\n margin-block-end: 16px;\n }\n\n details > summary,\n details > summary ~ * {\n font-size: var(--font-size);\n font-weight: normal;\n font-style: normal;\n line-height: 1.4;\n transition-property: background-color, transform, border-color, margin;\n }\n\n details > summary:not(:last-of-type) details > summary ~ *:not(:last-of-type) {\n margin-block-end: 16px;\n }\n\n details > summary {\n font-weight: 500;\n outline: none;\n cursor: pointer;\n transform: translateX(-18px);\n }\n\n details > summary::-webkit-details-marker,\n details > summary::marker {\n display: none;\n color: transparent;\n }\n\n details > summary::before {\n display: inline-block;\n margin-inline-end: 4px;\n inline-size: 14px;\n font-weight: lighter;\n text-align: center;\n opacity: 0.5;\n content: '⛌';\n transform: rotate(45deg);\n }\n\n details[open] {\n user-select: auto;\n }\n\n details[open] > details {\n margin-block-start: 10px;\n }\n\n details[open] > summary {\n margin-block-end: 10px;\n }\n\n details[open] > summary::before {\n transform: rotate(0);\n }\n\n .katex-display {\n overflow-x: auto;\n }\n\n .n-photo-header {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 16px;\n }\n\n .n-photo-header > span {\n border-radius: 8px;\n padding: 4px 10px;\n font-size: 14px;\n font-weight: lighter;\n background-color: rgb(0 0 0 / 20%);\n }\n\n .n-code {\n display: block;\n margin-block-end: 16px;\n }\n\n .n-code:last-child {\n margin-block-end: 0;\n }\n\n @media screen and (width <= 1100px) {\n .n-md-box,\n .n-md-box:not(.site-doc-main),\n .n-md-body {\n max-inline-size: auto;\n }\n\n .n-md-toc {\n position: fixed;\n inset-inline-end: 16px;\n transform: translateX(100%);\n transition: transform var(--transition-duration) var(--transition-timing-function);\n\n &:hover {\n transform: translateX(0);\n }\n }\n }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwjBzB,CAAC,AAAC"}
|
|
1
|
+
{"version":3,"sources":["../../components/md/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host,\n :root {\n --table-heading-bg: var(--border-color);\n }\n\n .n-photo-header > span,\n .n-md-body,\n .n-md-toc {\n backdrop-filter: blur(16px);\n /* stylelint-disable-next-line */\n -webkit-backdrop-filter: blur(16px);\n }\n\n .n-md-box:not(.site-doc-main) {\n position: relative;\n display: flex;\n margin: 0 auto;\n max-inline-size: 1280px;\n flex-direction: row-reverse;\n gap: 16px;\n }\n\n .n-md-toc,\n .n-md-body {\n background-color: var(--component-bg);\n box-shadow: 0 2px 8px 0 var(--primary-shadow);\n }\n\n .n-md-body {\n overflow: hidden;\n margin: 0 auto 24px;\n border-radius: var(--border-radius);\n padding: 24px;\n color: var(--text-color);\n max-inline-size: 100%;\n box-sizing: border-box;\n overflow-wrap: break-word;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color;\n flex: 1;\n }\n\n .n-md-body .n-md-body,\n .n-md-body n-md {\n overflow: visible;\n margin: 0;\n padding: 0;\n background-color: unset;\n backdrop-filter: none;\n box-shadow: none;\n }\n\n .n-md-body:has(div:only-child:empty) {\n margin: 0;\n padding: 0;\n background-color: unset;\n backdrop-filter: none;\n box-shadow: none;\n }\n\n a {\n position: relative;\n text-decoration: none;\n color: var(--text-color);\n }\n\n a:visited {\n color: var(--text-secondary);\n }\n\n a:hover {\n color: var(--primary-hover, #80b3ff);\n }\n\n p {\n padding: 0;\n font-size: var(--font-size);\n line-height: 1.8;\n vertical-align: baseline;\n word-wrap: break-word;\n word-break: break-word;\n content-visibility: auto;\n contain-intrinsic-size: 32px;\n margin-block-end: 1em;\n }\n\n ol {\n margin: 0;\n padding: 0 0 0 24px;\n font-size: var(--font-size);\n }\n\n .n-md-toc {\n position: sticky;\n inset-block-start: 24px;\n inset-inline-end: 0;\n z-index: 10;\n display: block;\n overflow-y: auto;\n margin: 0 0 24px;\n border-radius: var(--border-radius);\n padding: 16px;\n max-inline-size: 200px;\n block-size: fit-content;\n max-block-size: calc(100vb - 132px);\n box-sizing: border-box;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: border-color, background-color, box-shadow;\n }\n\n .n-md-toc li,\n .n-md-toc ol {\n display: grid;\n inline-size: fit-content;\n max-inline-size: 100%;\n font-size: var(--font-size-sm);\n list-style: none;\n }\n\n .n-md-toc li a {\n overflow: hidden;\n max-inline-size: 100%;\n font-size: var(--font-size-sm);\n text-overflow: ellipsis;\n text-decoration: none;\n white-space: nowrap;\n color: var(--text-color);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: color;\n }\n\n .n-md-toc .active,\n .n-md-toc .active a {\n color: var(--primary-color, #5794ff);\n text-shadow: 0 1px var(--primary-shadow);\n }\n\n .n-md-toc a[href^='http'],\n .n-md-toc a[href^='\\/\\/'],\n .n-md-body table a[href^='http'] {\n &:not(:has(img, n-img))::after {\n content: ' ⎋';\n opacity: 0.3;\n }\n }\n\n a[href^='mailto:']::after {\n content: ' 📧';\n opacity: 0.4;\n }\n\n a[href]::before {\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 2px;\n background-color: var(--primary-hover, #80b3ff);\n transform: scaleX(0);\n transform-origin: center;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: transform, background-color;\n opacity: 0.5;\n content: '';\n }\n\n a[href]:has(img, n-img)::before {\n content: none !important;\n }\n\n a:hover::before {\n transform: scaleX(1);\n }\n\n th img[src*='browser-logos'] {\n display: block;\n inline-size: 32px;\n block-size: 32px;\n }\n\n h1::before,\n h2::before,\n h3::before,\n h4::before,\n h5::before,\n h6::before {\n color: var(--primary-color, #5794ff);\n content: attr(data-prefix);\n }\n\n h1[data-prefix]::before,\n h2[data-prefix]::before,\n h3[data-prefix]::before,\n h4[data-prefix]::before,\n h5[data-prefix]::before,\n h6[data-prefix]::before {\n color: var(--primary-color, #5794ff);\n content: attr(data-prefix) !important;\n }\n\n code:not([class]),\n mark {\n border-radius: var(--border-radius);\n padding: 2px 7px;\n font-size: 90%;\n color: var(--primary-heading);\n background-color: var(--text-selection);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, color;\n }\n\n [data-prefix] code,\n [data-prefix] mark {\n font-size: 60%;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5 {\n margin-block: 1em;\n font-weight: 500;\n color: var(--text-heading);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: border-color, background-color, box-shadow, color;\n }\n\n table,\n tr th,\n tr td,\n blockquote,\n blockquote::after,\n blockquote::before,\n blockquote p {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n }\n\n dl {\n padding: 0;\n margin-block-end: 1em;\n }\n\n h1 {\n font-size: 1.6em;\n line-height: 54px;\n }\n\n h2 {\n font-size: 1.5em;\n line-height: 42px;\n counter-increment: section;\n }\n\n h2::before {\n content: counter(section) '. ';\n }\n\n h1,\n h2 {\n border-block-end: 1px dotted var(--border-color);\n padding-block-end: 10px;\n }\n\n h3 {\n font-size: 1.4em;\n line-height: 30px;\n }\n\n h4 {\n font-size: 1.3em;\n line-height: 28px;\n }\n\n h5 {\n font-size: 1.2em;\n list-style: none;\n }\n\n hr {\n margin: 16px 0;\n border: 0 none;\n padding: 0;\n block-size: 2px;\n text-align: start;\n color: var(--text-color);\n background-color: var(--border-color);\n }\n\n p img,\n p n-img {\n position: relative;\n display: flex;\n overflow: hidden;\n margin: auto;\n border-radius: var(--border-radius);\n max-inline-size: 100%;\n inline-size: fit-content;\n cursor: pointer;\n }\n\n ul {\n font-size: var(--font-size);\n }\n\n dl dt {\n margin-block-start: 16px;\n padding: 10px 0;\n font-size: 1em;\n font-weight: bold;\n font-style: italic;\n }\n\n dl dd {\n margin-block-end: 16px;\n margin-inline-start: 0;\n padding: 0 16px;\n }\n\n table {\n overflow: hidden;\n margin-block-end: 16px;\n border-block-end: 1px solid var(--table-heading-bg);\n inline-size: 100%;\n max-inline-size: 100%;\n border-spacing: 0;\n transition-property: border-color;\n word-break: break-all;\n }\n\n table:last-child {\n margin-block-end: 0;\n }\n\n table tbody tr:nth-child(2n) {\n background-color: var(--primary-details-bg);\n }\n\n table tbody tr:hover {\n background-color: var(--primary-selection);\n }\n\n table tr th {\n font-weight: 500;\n min-inline-size: 54px;\n color: var(--text-heading);\n background-color: var(--table-heading-bg);\n transition-property: background-color, color;\n }\n\n table tr th,\n table td {\n padding: 8px 16px;\n }\n\n tr:first-child th:first-child {\n border-start-start-radius: var(--border-radius);\n }\n\n tr:first-child th:last-child {\n border-start-end-radius: var(--border-radius);\n }\n\n blockquote {\n position: relative;\n margin: 30px 48px;\n border-radius: var(--border-radius);\n padding: 16px;\n font-weight: 500;\n background-color: var(--primary-selection);\n transition-property: background-color;\n }\n\n blockquote::before,\n blockquote::after {\n position: absolute;\n font-size: 56px;\n font-family: sans-serif;\n color: var(--primary-active);\n transition-property: color;\n content: '❞';\n line-height: 1;\n }\n\n blockquote::before {\n inset-block-start: -8px;\n inset-inline-start: 0;\n transform: translateX(-44px) rotate(180deg);\n }\n\n blockquote::after {\n inset-inline-end: 0;\n inset-block-end: -8px;\n transform: translateX(44px);\n }\n\n blockquote.n-tip {\n margin: 16px 0 16px 8px;\n border-inline-start: 4px solid var(--primary-color, #5794ff);\n }\n\n blockquote.n-tip::after {\n content: none;\n }\n\n blockquote.n-tip::before {\n inset-block-start: 18px;\n inset-inline-start: -12px;\n border-radius: 100%;\n inline-size: 20px;\n block-size: 20px;\n font-size: 14px;\n font-weight: bold;\n text-align: center;\n color: #fff;\n background-color: var(--primary-color, #5794ff);\n transform: none;\n content: '!';\n line-height: 20px;\n }\n\n blockquote cite {\n font-size: var(--font-size);\n color: var(--cite-color, #bfbfbf);\n line-height: 20px;\n }\n\n blockquote cite::before {\n content: '\\\\2014 \\\\00A0';\n }\n\n blockquote p {\n margin: auto 0;\n font-size: var(--font-size);\n line-height: 24px;\n transition-property: color;\n }\n\n details {\n overflow: hidden;\n border-inline-start: 5px solid var(--primary-hover, #5794ff);\n border-radius: var(--border-radius);\n padding: 12px 24px;\n background: var(--primary-details-bg);\n box-sizing: border-box;\n user-select: none;\n box-shadow: 0 2px 8px 0 var(--primary-shadow, rgb(0 0 0 / 5%));\n }\n\n details,\n details summary {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, transform, border-color;\n }\n\n details:not(:last-of-type) {\n margin-block-end: 16px;\n }\n\n details > summary,\n details > summary ~ * {\n font-size: var(--font-size);\n font-weight: normal;\n font-style: normal;\n line-height: 1.4;\n transition-property: background-color, transform, border-color, margin;\n }\n\n details > summary:not(:last-of-type) details > summary ~ *:not(:last-of-type) {\n margin-block-end: 16px;\n }\n\n details > summary {\n font-weight: 500;\n outline: none;\n cursor: pointer;\n transform: translateX(-18px);\n }\n\n details > summary::-webkit-details-marker,\n details > summary::marker {\n display: none;\n color: transparent;\n }\n\n details > summary::before {\n display: inline-block;\n margin-inline-end: 4px;\n inline-size: 14px;\n font-weight: lighter;\n text-align: center;\n opacity: 0.5;\n content: '⛌';\n transform: rotate(45deg);\n }\n\n details[open] {\n user-select: auto;\n }\n\n details[open] > details {\n margin-block-start: 10px;\n }\n\n details[open] > summary {\n margin-block-end: 10px;\n }\n\n details[open] > summary::before {\n transform: rotate(0);\n }\n\n .katex-display {\n overflow-x: auto;\n }\n\n .n-photo-header {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 16px;\n }\n\n .n-photo-header > span {\n border-radius: 8px;\n padding: 4px 10px;\n font-size: 14px;\n font-weight: lighter;\n background-color: rgb(0 0 0 / 20%);\n }\n\n .n-code {\n display: block;\n margin-block-end: 16px;\n }\n\n .n-code:last-child {\n margin-block-end: 0;\n }\n\n @media screen and (width <= 1100px) {\n .n-md-box,\n .n-md-box:not(.site-doc-main),\n .n-md-body {\n max-inline-size: auto;\n }\n\n .n-md-toc {\n position: fixed;\n inset-inline-end: 16px;\n transform: translateX(100%);\n transition: transform var(--transition-duration) var(--transition-timing-function);\n\n &:hover {\n transform: translateX(0);\n }\n }\n }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAujBzB,CAAC,AAAC"}
|
package/es/md/worker.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e}from"@swc/helpers/_/_extends";import{_ as t}from"@swc/helpers/_/_object_without_properties_loose";self.importScripts(new URL("
|
|
1
|
+
import{_ as e}from"@swc/helpers/_/_extends";import{_ as t}from"@swc/helpers/_/_object_without_properties_loose";self.importScripts(new URL("marked-completed/marked.min.js",import.meta.url).toString());let r=new self.marked.Renderer;function n(e,t,r){return`<img role="img" src="${e}" alt="${r}" ${t?`title="${t}"`:""}></img>`}function a(e,t,r){return`<n-img role="img" src="${e}" alt="${r}" ${t?`title="${t}"`:""}></n-img>`}r.katexBlock=function(e){return`<n-katex display-mode="true">${e}</n-katex>`},r.katexInline=function(e){return`<n-katex>${e}</n-katex>`},self.addEventListener("message",function(o){let i;try{let l=o.data,{text:s,pictureViewer:m}=l,c=t(l,["text","pictureViewer"]),d=c.langLineNumber;r.image=m?a:n,r.code=function(e,t){var r;if("treeview"===t)return`<n-tree data="${e}" />`;let n=!!(null==(r=c.langToolbar)?void 0:r.length);return`<n-code class="n-code" toolbar="${n}" lang="${t}" ${d?'line-number="true"':""}>${encodeURIComponent(e)}</n-code>`},i=self.marked(s,e({renderer:r,langToolbar:!1,headerPrefix:"# ",breaks:!0,pedantic:!1,smartLists:!0,smartypants:!0,xhtml:!0},c))}catch(e){i=e}self.postMessage(i)},!1);
|
|
2
2
|
//# sourceMappingURL=worker.js.map
|
package/es/md/worker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/md/worker.ts"],"sourcesContent":["self.importScripts(
|
|
1
|
+
{"version":3,"sources":["../../components/md/worker.ts"],"sourcesContent":["self.importScripts(new URL('marked-completed/marked.min.js', import.meta.url).toString());\n\nconst renderer = new self.marked.Renderer();\n\nrenderer.katexBlock = function (code: string) {\n return `<n-katex display-mode=\"true\">${code}</n-katex>`;\n};\nrenderer.katexInline = function (code: string) {\n return `<n-katex>${code}</n-katex>`;\n};\nfunction img(src: string, title: string, alt: string) {\n return `<img role=\"img\" src=\"${src}\" alt=\"${alt}\" ${title ? `title=\"${title}\"` : ''}></img>`;\n}\nfunction nImg(src: string, title: string, alt: string) {\n return `<n-img role=\"img\" src=\"${src}\" alt=\"${alt}\" ${title ? `title=\"${title}\"` : ''}></n-img>`;\n}\nself.addEventListener(\n 'message',\n function (e) {\n let result;\n\n try {\n const { text, pictureViewer, ...options } = e.data;\n const langLineNumber = options.langLineNumber;\n\n renderer.image = pictureViewer ? nImg : img;\n renderer.code = function (code: string, lang: string) {\n if (lang === 'treeview') {\n return `<n-tree data=\"${code}\" />`;\n }\n const toolbar = !!options.langToolbar?.length;\n\n return `<n-code class=\"n-code\" toolbar=\"${toolbar}\" lang=\"${lang}\" ${\n langLineNumber ? 'line-number=\"true\"' : ''\n }>${encodeURIComponent(code)}</n-code>`;\n };\n result = self.marked(text, {\n renderer: renderer,\n langToolbar: false,\n headerPrefix: '# ',\n breaks: true,\n pedantic: false,\n smartLists: true,\n smartypants: true,\n xhtml: true,\n ...options,\n });\n } catch (error) {\n result = error;\n }\n self.postMessage(result);\n },\n false,\n);\n"],"names":["self","importScripts","URL","url","toString","renderer","marked","Renderer","img","src","title","alt","nImg","katexBlock","code","katexInline","addEventListener","e","result","data","text","pictureViewer","options","langLineNumber","image","lang","toolbar","langToolbar","length","encodeURIComponent","headerPrefix","breaks","pedantic","smartLists","smartypants","xhtml","error","postMessage"],"mappings":"gHAAAA,KAAKC,aAAa,CAAC,IAAIC,IAAI,iCAAkC,YAAYC,GAAG,EAAEC,QAAQ,IAEtF,IAAMC,EAAW,IAAIL,KAAKM,MAAM,CAACC,QAAQ,CAQzC,SAASC,EAAIC,CAAW,CAAEC,CAAa,CAAEC,CAAW,EAClD,MAAO,CAAC,qBAAqB,EAAEF,EAAI,OAAO,EAAEE,EAAI,EAAE,EAAED,EAAQ,CAAC,OAAO,EAAEA,EAAM,CAAC,CAAC,CAAG,GAAG,OAAO,CAAC,AAC9F,CACA,SAASE,EAAKH,CAAW,CAAEC,CAAa,CAAEC,CAAW,EACnD,MAAO,CAAC,uBAAuB,EAAEF,EAAI,OAAO,EAAEE,EAAI,EAAE,EAAED,EAAQ,CAAC,OAAO,EAAEA,EAAM,CAAC,CAAC,CAAG,GAAG,SAAS,CAAC,AAClG,CAXAL,EAASQ,UAAU,CAAG,SAAUC,CAAY,EAC1C,MAAO,CAAC,6BAA6B,EAAEA,EAAK,UAAU,CAAC,AACzD,EACAT,EAASU,WAAW,CAAG,SAAUD,CAAY,EAC3C,MAAO,CAAC,SAAS,EAAEA,EAAK,UAAU,CAAC,AACrC,EAOAd,KAAKgB,gBAAgB,CACnB,UACA,SAAUC,CAAC,EACT,IAAIC,EAEJ,GAAI,CACF,IAA4CD,EAAAA,EAAEE,IAAI,CAA5C,CAAEC,KAAAA,CAAI,CAAEC,cAAAA,CAAa,CAAc,CAAGJ,EAAZK,IAAYL,GAApCG,OAAMC,kBACRE,EAAiBD,EAAQC,cAAc,AAE7ClB,CAAAA,EAASmB,KAAK,CAAGH,EAAgBT,EAAOJ,EACxCH,EAASS,IAAI,CAAG,SAAUA,CAAY,CAAEW,CAAY,MAIhCH,EAHlB,GAAIG,AAAS,aAATA,EACF,MAAO,CAAC,cAAc,EAAEX,EAAK,IAAI,CAAC,CAEpC,IAAMY,EAAU,CAAC,SAACJ,EAAAA,EAAQK,WAAW,SAAnBL,EAAqBM,MAAM,EAE7C,MAAO,CAAC,gCAAgC,EAAEF,EAAQ,QAAQ,EAAED,EAAK,EAAE,EACjEF,EAAiB,qBAAuB,GACzC,CAAC,EAAEM,mBAAmBf,GAAM,SAAS,CAAC,AACzC,EACAI,EAASlB,KAAKM,MAAM,CAACc,EAAM,GACzBf,SAAUA,EACVsB,YAAa,CAAA,EACbG,aAAc,KACdC,OAAQ,CAAA,EACRC,SAAU,CAAA,EACVC,WAAY,CAAA,EACZC,YAAa,CAAA,EACbC,MAAO,CAAA,GACJb,GAEP,CAAE,MAAOc,EAAO,CACdlB,EAASkB,CACX,CACApC,KAAKqC,WAAW,CAACnB,EACnB,EACA,CAAA"}
|
package/es/pagination/styles.js
CHANGED
|
@@ -41,10 +41,8 @@ import{css as t}from"@moneko/css";export const styles=t`
|
|
|
41
41
|
inline-size: fit-content;
|
|
42
42
|
block-size: fit-content;
|
|
43
43
|
line-height: inherit;
|
|
44
|
-
inset-block
|
|
45
|
-
inset-
|
|
46
|
-
inset-inline-start: 0;
|
|
47
|
-
inset-inline-end: 0;
|
|
44
|
+
inset-block: 0 0;
|
|
45
|
+
inset-inline: 0 0;
|
|
48
46
|
content: '⋯';
|
|
49
47
|
pointer-events: none;
|
|
50
48
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/pagination/styles.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const styles = css`\n .pagination {\n ul {\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n gap: 4px;\n }\n }\n\n .pagination-item::part(button) {\n padding: 0 6px;\n }\n\n .pagination-prev {\n &::part(label) {\n transform: translateX(-25%);\n }\n }\n\n .pagination-next {\n &::part(label) {\n transform: translateX(25%);\n }\n }\n\n .pagination-p,\n .pagination-n {\n &::part(button) {\n position: relative;\n\n &::after {\n position: absolute;\n display: inline-block;\n margin: auto;\n font-size: inherit;\n font-weight: bold;\n opacity: 0.5;\n inline-size: fit-content;\n block-size: fit-content;\n line-height: inherit;\n inset-block
|
|
1
|
+
{"version":3,"sources":["../../components/pagination/styles.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const styles = css`\n .pagination {\n ul {\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n gap: 4px;\n }\n }\n\n .pagination-item::part(button) {\n padding: 0 6px;\n }\n\n .pagination-prev {\n &::part(label) {\n transform: translateX(-25%);\n }\n }\n\n .pagination-next {\n &::part(label) {\n transform: translateX(25%);\n }\n }\n\n .pagination-p,\n .pagination-n {\n &::part(button) {\n position: relative;\n\n &::after {\n position: absolute;\n display: inline-block;\n margin: auto;\n font-size: inherit;\n font-weight: bold;\n opacity: 0.5;\n inline-size: fit-content;\n block-size: fit-content;\n line-height: inherit;\n inset-block: 0 0;\n inset-inline: 0 0;\n content: '⋯';\n pointer-events: none;\n }\n }\n\n &::part(label) {\n opacity: 0;\n }\n\n &:hover::part(button)::after {\n content: var(--content);\n font-weight: inherit;\n }\n }\n\n .pagination-p {\n --content: '《';\n\n &:hover {\n &::part(button)::after {\n transform: translateX(-25%);\n }\n }\n }\n\n .pagination-n {\n --content: '》';\n\n &:hover {\n &::part(button)::after {\n transform: translateX(25%);\n }\n }\n }\n`;\n"],"names":["css","styles"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,OAASD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+E1B,CAAC,AAAC"}
|
package/es/popover/style.js
CHANGED
|
@@ -42,9 +42,8 @@ import{css as o}from"@moneko/css";export const popoverCss=o`
|
|
|
42
42
|
.arrow {
|
|
43
43
|
&::before {
|
|
44
44
|
position: absolute;
|
|
45
|
-
inset-inline
|
|
45
|
+
inset-inline: 0;
|
|
46
46
|
inset-block-end: 0;
|
|
47
|
-
inset-inline-start: 0;
|
|
48
47
|
margin: auto;
|
|
49
48
|
inline-size: 12px;
|
|
50
49
|
block-size: 8px;
|
package/es/popover/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/popover/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const popoverCss = css`\n .popover {\n position: relative;\n display: inline-block;\n box-sizing: border-box;\n\n &::-webkit-scrollbar {\n inline-size: 1px;\n }\n }\n`;\nexport const portalCss = css`\n .container {\n overflow-y: auto;\n /* stylelint-disable-next-line */\n max-block-size: -webkit-fill-available;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .portal {\n --direction: 1;\n\n position: fixed;\n display: inline-block;\n border-radius: var(--border-radius);\n padding: 4px;\n font-size: var(--font-size);\n color: var(--text-color);\n background-color: var(--popover-bg);\n filter: drop-shadow(0.5px calc(var(--direction) * 1px) 4px var(--popover-shadow-color))\n drop-shadow(1px calc(var(--direction) * 2px) 8px var(--popover-shadow-color))\n drop-shadow(2px calc(var(--direction) * 4px) 16px var(--popover-shadow-color));\n min-inline-size: 100px;\n backdrop-filter: blur(16px);\n /* stylelint-disable-next-line */\n -webkit-backdrop-filter: blur(16px);\n box-sizing: border-box;\n }\n\n .arrow {\n &::before {\n position: absolute;\n inset-inline
|
|
1
|
+
{"version":3,"sources":["../../components/popover/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const popoverCss = css`\n .popover {\n position: relative;\n display: inline-block;\n box-sizing: border-box;\n\n &::-webkit-scrollbar {\n inline-size: 1px;\n }\n }\n`;\nexport const portalCss = css`\n .container {\n overflow-y: auto;\n /* stylelint-disable-next-line */\n max-block-size: -webkit-fill-available;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .portal {\n --direction: 1;\n\n position: fixed;\n display: inline-block;\n border-radius: var(--border-radius);\n padding: 4px;\n font-size: var(--font-size);\n color: var(--text-color);\n background-color: var(--popover-bg);\n filter: drop-shadow(0.5px calc(var(--direction) * 1px) 4px var(--popover-shadow-color))\n drop-shadow(1px calc(var(--direction) * 2px) 8px var(--popover-shadow-color))\n drop-shadow(2px calc(var(--direction) * 4px) 16px var(--popover-shadow-color));\n min-inline-size: 100px;\n backdrop-filter: blur(16px);\n /* stylelint-disable-next-line */\n -webkit-backdrop-filter: blur(16px);\n box-sizing: border-box;\n }\n\n .arrow {\n &::before {\n position: absolute;\n inset-inline: 0;\n inset-block-end: 0;\n margin: auto;\n inline-size: 12px;\n block-size: 8px;\n background: inherit;\n content: '';\n clip-path: polygon(0% 0%, 50% 100%, 100% 0%);\n transform: translate3d(var(--x, 0), 100%, 0);\n }\n }\n\n .in-up {\n --direction: -1;\n\n animation: popover-up-in-effect var(--transition-duration) forwards;\n transform: scaleY(1);\n }\n\n .out-up {\n --direction: -1;\n\n animation: popover-up-out-effect var(--transition-duration) forwards;\n transform: scaleY(1);\n }\n\n .in-down {\n --direction: 1;\n\n animation: popover-down-in-effect var(--transition-duration) forwards;\n transform: scaleY(1);\n\n &::before {\n inset-block-end: unset;\n inset-block-start: 0;\n transform: translate3d(var(--x, 0), -100%, 0) rotate(180deg);\n }\n }\n\n .out-down {\n --direction: 1;\n\n animation: popover-down-out-effect var(--transition-duration) forwards;\n transform: scaleY(1);\n\n &::before {\n inset-block-end: unset;\n inset-block-start: 0;\n transform: translate3d(var(--x, 0), -100%, 0) rotate(180deg);\n }\n }\n\n @keyframes popover-down-in-effect {\n 0% {\n transform: scaleY(0.8);\n transform-origin: 0% 0%;\n opacity: 0;\n }\n\n 100% {\n transform: scaleY(1);\n transform-origin: 0% 0%;\n opacity: 1;\n }\n }\n\n @keyframes popover-down-out-effect {\n 0% {\n transform: scaleY(1);\n transform-origin: 0% 0%;\n opacity: 1;\n pointer-events: none;\n }\n\n 100% {\n transform: scaleY(0.8);\n transform-origin: 0% 0%;\n opacity: 0;\n pointer-events: none;\n }\n }\n\n @keyframes popover-up-in-effect {\n 0% {\n transform: scaleY(0.8);\n transform-origin: 100% 100%;\n opacity: 0;\n }\n\n 100% {\n transform: scaleY(1);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n }\n\n @keyframes popover-up-out-effect {\n 0% {\n transform: scaleY(1);\n transform-origin: 100% 100%;\n opacity: 1;\n pointer-events: none;\n }\n\n 100% {\n transform: scaleY(0.8);\n transform-origin: 100% 100%;\n opacity: 0;\n pointer-events: none;\n }\n }\n`;\n"],"names":["css","popoverCss","portalCss"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,WAAaD,CAAG,CAAC;;;;;;;;;;AAU9B,CAAC,AAAC,AACF,QAAO,MAAME,UAAYF,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiJ7B,CAAC,AAAC"}
|
package/es/prism/css.js
CHANGED
|
@@ -2,8 +2,7 @@ import{createMemo as o,createRoot as e,getOwner as r}from"solid-js";import{css a
|
|
|
2
2
|
[data-copy]::before {
|
|
3
3
|
position: absolute;
|
|
4
4
|
inset-block-start: 32px;
|
|
5
|
-
inset-inline
|
|
6
|
-
inset-inline-start: 0;
|
|
5
|
+
inset-inline: 0;
|
|
7
6
|
z-index: 1;
|
|
8
7
|
display: inline-block;
|
|
9
8
|
margin: auto;
|
package/es/prism/css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/prism/css.ts"],"sourcesContent":["import { createMemo, createRoot, getOwner } from 'solid-js';\nimport { css } from '@moneko/css';\nimport theme from '../theme';\n\nconst prismCss = createRoot(() => {\n const { isDark } = theme;\n const baseCss = css`\n [data-copy]::before {\n position: absolute;\n inset-block-start: 32px;\n inset-inline-end: 0;\n inset-inline-start: 0;\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 inline-size: fit-content;\n font-size: var(--font-size-sm);\n transition:\n background-color 0.3s,\n color 0.3s,\n border-color 0.3s;\n animation-fill-mode: forwards;\n content: '复制成功';\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 content: '复制成功';\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\n var(--transition-timing-function);\n }\n\n @keyframes copy-slide-in {\n from {\n transform: translate3d(0, -100%, 0) scale(0);\n opacity: 0;\n }\n\n to {\n transform: translate3d(0, 0, 0) scale(1);\n opacity: 1;\n }\n }\n\n @keyframes copy-slide-out {\n from {\n transform: translate3d(0, 0, 0) scale(1);\n opacity: 1;\n }\n\n to {\n transform: translate3d(0, -100%, 0) scale(0);\n opacity: 0;\n }\n }\n\n pre > code {\n display: block;\n overflow: auto;\n margin: 0 16px 8px;\n padding: 32px 0 8px;\n max-inline-size: 100%;\n font-size: var(--font-size);\n white-space: pre;\n line-height: 1.8;\n pointer-events: auto;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: box-shadow, background-color, border-color, color;\n }\n\n code[class*='language-'],\n pre[class*='language-'] {\n color: var(--code-color, #90a4ae);\n\n &::selection,\n & ::selection {\n background-color: var(--text-selection);\n text-shadow: 0 1px var(--primary-shadow);\n }\n }\n\n .language-css > code,\n .language-sass > code,\n .language-scss > code {\n color: var(--code-lang-style-color, #f76d47);\n }\n\n .line-numbers-rows,\n .toolbar::after,\n .toolbar-copy::after,\n pre {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n }\n\n [class*='language-'] .namespace {\n opacity: 0.7;\n }\n\n .tag {\n color: var(--token-tag, #e53935);\n }\n\n .atrule {\n color: var(--token-atrule, #7c4dff);\n }\n\n .attr-name {\n color: var(--token-attr-name, #39adb5);\n }\n\n .attr-value {\n color: var(--token-attr-value, #f6a434);\n }\n\n .attribute {\n color: var(--token-attribute, #f6a434);\n }\n\n .boolean {\n color: var(--token-boolean, #7c4dff);\n }\n\n .builtin {\n color: var(--token-builtin, #39adb5);\n }\n\n .cdata {\n color: var(--token-cdata, #39adb5);\n }\n\n .char {\n color: var(--token-char, #39adb5);\n }\n\n .class {\n color: var(--token-class, #39adb5);\n }\n\n .class-name,\n .maybe-class-name {\n color: var(--token-class-name, #6182b8);\n }\n\n .comment {\n color: var(--token-comment, #aabfc9);\n }\n\n .constant {\n color: var(--token-constant, #7c4dff);\n }\n\n .deleted {\n color: var(--token-deleted, #e53935);\n }\n\n .doctype {\n color: var(--token-doctype, #aabfc9);\n }\n\n .entity {\n color: var(--token-entity, #e53935);\n }\n\n .function {\n color: var(--token-function, #7c4dff);\n }\n\n .hexcode {\n color: var(--token-hexcode, #f76d47);\n }\n\n .id {\n font-weight: bold;\n color: var(--token-id, #7c4dff);\n }\n\n .important {\n font-weight: bold;\n color: var(--token-important, #7c4dff);\n }\n\n .inserted {\n color: var(--token-inserted, #39adb5);\n }\n\n .keyword {\n color: var(--token-keyword, #7c4dff);\n }\n\n .number {\n color: var(--token-number, #f76d47);\n }\n\n .operator {\n color: var(--token-operator, #39adb5);\n }\n\n .prolog {\n color: var(--token-prolog, #aabfc9);\n }\n\n .property {\n color: var(--token-property, #39adb5);\n }\n\n .pseudo-class {\n color: var(--token-pseudo-class, #f6a434);\n }\n\n .pseudo-element {\n color: var(--token-pseudo-element, #f6a434);\n }\n\n .punctuation {\n color: var(--token-punctuation, #39adb5);\n }\n\n .regex {\n color: var(--token-regex, #6182b8);\n }\n\n .selector {\n color: var(--token-selector, #e53935);\n }\n\n .string {\n color: var(--token-string, #f6a434);\n }\n\n .symbol {\n color: var(--token-symbol, #7c4dff);\n }\n\n .unit {\n color: var(--token-unit, #f76d47);\n }\n\n .url {\n color: var(--token-url, #e53935);\n }\n\n .variable {\n color: var(--token-variable, #e53935);\n }\n\n code[class*='language-'],\n pre,\n .n-editor textarea {\n font-family: 'Liberation Mono', Monaco, Menlo, Consolas, 'Source Code Pro', 'Ubuntu Mono',\n 'Microsoft Yahei', '微软雅黑', Courier, 'Helvetica Neue', 'Lantinghei SC', STXihei,\n WenQuanYi, sans-serif;\n text-align: start;\n white-space: pre;\n word-wrap: normal;\n word-break: normal;\n word-spacing: normal;\n tab-size: 4;\n hyphens: none;\n }\n\n .deleted:not(.prefix) {\n display: block;\n color: inherit;\n background-color: rgb(255 0 0 / 10%);\n }\n\n .inserted:not(.prefix) {\n display: block;\n color: inherit;\n background-color: rgb(0 255 128 / 10%);\n }\n\n span .inline-color-wrapper {\n display: inline-block;\n overflow: hidden;\n margin: 0 0.333ch;\n border: var(--border-base);\n background: repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%) 0 / 10px 10px;\n outline: 1px solid rgb(0 0 0 / 50%);\n inline-size: 1.333ch;\n block-size: 1.333ch;\n box-sizing: border-box;\n }\n\n span .inline-color {\n display: block;\n inline-size: 120%;\n block-size: 120%;\n }\n\n pre,\n .n-editor {\n position: relative;\n display: block;\n overflow: visible;\n margin: auto;\n border-radius: var(--border-radius);\n max-inline-size: 100%;\n font-size: var(--font-size);\n white-space: pre-wrap;\n background-color: var(--primary-component-bg);\n box-shadow: 0 2px 8px 0 var(--primary-shadow);\n line-height: 20px;\n transition-property: color, background-color, box-shadow;\n }\n\n pre .toolbar::after {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n z-index: 1;\n display: block;\n overflow: hidden;\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n inline-size: 100%;\n block-size: 24px;\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 line-height: 24px;\n text-transform: uppercase;\n backdrop-filter: blur(16px);\n /* stylelint-disable-next-line */\n -webkit-backdrop-filter: blur(16px);\n content: attr(data-lang) '';\n transition-property: background-color, border-color, color;\n }\n\n pre .toolbar::before {\n position: absolute;\n inset-block-start: 10px;\n inset-inline-start: 12px;\n z-index: 3;\n display: inline-block;\n border-radius: var(--border-radius);\n inline-size: 4px;\n block-size: 4px;\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 }\n\n pre .toolbar .toolbar-copy {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 8px;\n z-index: 3;\n border: none;\n padding: 0;\n background: none;\n outline: none;\n cursor: pointer;\n }\n\n pre .toolbar .toolbar-copy:active {\n transform: scale(0.95);\n }\n\n .toolbar .toolbar-copy::after {\n user-select: none;\n display: block;\n font-size: 24px;\n font-family: sans-serif;\n color: var(--text-color);\n line-height: 24px;\n content: '⎘';\n transition-property: color, transform;\n }\n\n .toolbar .toolbar-copy:hover::after {\n color: var(--primary-color, #5794ff);\n }\n\n pre.line-numbers > code {\n margin: 0 10px 0 54px;\n white-space: inherit;\n counter-reset: linenumber;\n }\n\n pre.line-numbers .line-numbers-rows {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n overflow-y: auto;\n border-inline-end: 1px solid var(--border-color);\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n padding: 32px 0 8px;\n inline-size: 44px;\n max-block-size: inherit;\n font-size: 100%;\n background-color: var(--primary-component-bg);\n letter-spacing: -1px;\n user-select: none;\n pointer-events: none;\n transition-property: background-color, border-color;\n }\n\n .line-numbers-rows > span {\n display: block;\n counter-increment: linenumber;\n }\n\n .line-numbers-rows > span::before {\n display: block;\n padding-inline-end: 0.8em;\n text-align: end;\n color: #999;\n opacity: 0.5;\n content: counter(linenumber);\n }\n\n pre::-webkit-scrollbar,\n pre ::-webkit-scrollbar {\n display: none;\n }\n\n @media print {\n code[class*='language-'],\n pre[class*='language-'] {\n text-shadow: none;\n }\n }\n `;\n const darkCss = css`\n :host {\n --code-color: #eee;\n --code-lang-style-color: #fd9170;\n --code-toolbar-bg: rgb(63 63 63 / 70%);\n --token-atrule: #c792ea;\n --token-attr-name: #ffcb6b;\n --token-attr-value: #a5e844;\n --token-attribute: #a5e844;\n --token-boolean: #c792ea;\n --token-builtin: #ffcb6b;\n --token-cdata: #80cbc4;\n --token-char: #80cbc4;\n --token-class: #ffcb6b;\n --token-class-name: #f2ff00;\n --token-comment: #616161;\n --token-constant: #c792ea;\n --token-deleted: #f66;\n --token-doctype: #616161;\n --token-entity: #f66;\n --token-function: #c792ea;\n --token-hexcode: #f2ff00;\n --token-id: #c792ea;\n --token-important: #c792ea;\n --token-inserted: #80cbc4;\n --token-keyword: #c792ea;\n --token-number: #fd9170;\n --token-operator: #89ddff;\n --token-prolog: #616161;\n --token-property: #80cbc4;\n --token-pseudo-class: #a5e844;\n --token-pseudo-element: #a5e844;\n --token-punctuation: #89ddff;\n --token-regex: #f2ff00;\n --token-selector: #f66;\n --token-string: #a5e844;\n --token-symbol: #c792ea;\n --token-tag: #f66;\n --token-unit: #fd9170;\n --token-url: #f66;\n --token-variable: #f66;\n }\n `;\n\n const style = createMemo(() => `${isDark() ? darkCss : ''}${baseCss}`);\n\n return style;\n}, getOwner());\n\nexport default prismCss;\n"],"names":["createMemo","createRoot","getOwner","css","theme","prismCss","isDark","baseCss","darkCss","style"],"mappings":"AAAA,OAASA,cAAAA,CAAU,CAAEC,cAAAA,CAAU,CAAEC,YAAAA,CAAQ,KAAQ,UAAW,AAC5D,QAASC,OAAAA,CAAG,KAAQ,aAAc,AAClC,QAAOC,MAAW,UAAW,CAE7B,IAAMC,EAAWJ,EAAW,KAC1B,GAAM,CAAEK,OAAAA,CAAM,CAAE,CAAGF,EACbG,EAAUJ,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8bpB,CAAC,CACKK,EAAUL,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CpB,CAAC,CAEKM,EAAQT,EAAW,IAAM,CAAC,EAAEM,IAAWE,EAAU,GAAG,EAAED,EAAQ,CAAC,EAErE,OAAOE,CACT,EAAGP,IAEH,gBAAeG,CAAS"}
|
|
1
|
+
{"version":3,"sources":["../../components/prism/css.ts"],"sourcesContent":["import { createMemo, createRoot, getOwner } from 'solid-js';\nimport { css } from '@moneko/css';\nimport theme from '../theme';\n\nconst prismCss = createRoot(() => {\n const { isDark } = theme;\n const baseCss = css`\n [data-copy]::before {\n position: absolute;\n inset-block-start: 32px;\n inset-inline: 0;\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 inline-size: fit-content;\n font-size: var(--font-size-sm);\n transition:\n background-color 0.3s,\n color 0.3s,\n border-color 0.3s;\n animation-fill-mode: forwards;\n content: '复制成功';\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 content: '复制成功';\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\n var(--transition-timing-function);\n }\n\n @keyframes copy-slide-in {\n from {\n transform: translate3d(0, -100%, 0) scale(0);\n opacity: 0;\n }\n\n to {\n transform: translate3d(0, 0, 0) scale(1);\n opacity: 1;\n }\n }\n\n @keyframes copy-slide-out {\n from {\n transform: translate3d(0, 0, 0) scale(1);\n opacity: 1;\n }\n\n to {\n transform: translate3d(0, -100%, 0) scale(0);\n opacity: 0;\n }\n }\n\n pre > code {\n display: block;\n overflow: auto;\n margin: 0 16px 8px;\n padding: 32px 0 8px;\n max-inline-size: 100%;\n font-size: var(--font-size);\n white-space: pre;\n line-height: 1.8;\n pointer-events: auto;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: box-shadow, background-color, border-color, color;\n }\n\n code[class*='language-'],\n pre[class*='language-'] {\n color: var(--code-color, #90a4ae);\n\n &::selection,\n & ::selection {\n background-color: var(--text-selection);\n text-shadow: 0 1px var(--primary-shadow);\n }\n }\n\n .language-css > code,\n .language-sass > code,\n .language-scss > code {\n color: var(--code-lang-style-color, #f76d47);\n }\n\n .line-numbers-rows,\n .toolbar::after,\n .toolbar-copy::after,\n pre {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n }\n\n [class*='language-'] .namespace {\n opacity: 0.7;\n }\n\n .tag {\n color: var(--token-tag, #e53935);\n }\n\n .atrule {\n color: var(--token-atrule, #7c4dff);\n }\n\n .attr-name {\n color: var(--token-attr-name, #39adb5);\n }\n\n .attr-value {\n color: var(--token-attr-value, #f6a434);\n }\n\n .attribute {\n color: var(--token-attribute, #f6a434);\n }\n\n .boolean {\n color: var(--token-boolean, #7c4dff);\n }\n\n .builtin {\n color: var(--token-builtin, #39adb5);\n }\n\n .cdata {\n color: var(--token-cdata, #39adb5);\n }\n\n .char {\n color: var(--token-char, #39adb5);\n }\n\n .class {\n color: var(--token-class, #39adb5);\n }\n\n .class-name,\n .maybe-class-name {\n color: var(--token-class-name, #6182b8);\n }\n\n .comment {\n color: var(--token-comment, #aabfc9);\n }\n\n .constant {\n color: var(--token-constant, #7c4dff);\n }\n\n .deleted {\n color: var(--token-deleted, #e53935);\n }\n\n .doctype {\n color: var(--token-doctype, #aabfc9);\n }\n\n .entity {\n color: var(--token-entity, #e53935);\n }\n\n .function {\n color: var(--token-function, #7c4dff);\n }\n\n .hexcode {\n color: var(--token-hexcode, #f76d47);\n }\n\n .id {\n font-weight: bold;\n color: var(--token-id, #7c4dff);\n }\n\n .important {\n font-weight: bold;\n color: var(--token-important, #7c4dff);\n }\n\n .inserted {\n color: var(--token-inserted, #39adb5);\n }\n\n .keyword {\n color: var(--token-keyword, #7c4dff);\n }\n\n .number {\n color: var(--token-number, #f76d47);\n }\n\n .operator {\n color: var(--token-operator, #39adb5);\n }\n\n .prolog {\n color: var(--token-prolog, #aabfc9);\n }\n\n .property {\n color: var(--token-property, #39adb5);\n }\n\n .pseudo-class {\n color: var(--token-pseudo-class, #f6a434);\n }\n\n .pseudo-element {\n color: var(--token-pseudo-element, #f6a434);\n }\n\n .punctuation {\n color: var(--token-punctuation, #39adb5);\n }\n\n .regex {\n color: var(--token-regex, #6182b8);\n }\n\n .selector {\n color: var(--token-selector, #e53935);\n }\n\n .string {\n color: var(--token-string, #f6a434);\n }\n\n .symbol {\n color: var(--token-symbol, #7c4dff);\n }\n\n .unit {\n color: var(--token-unit, #f76d47);\n }\n\n .url {\n color: var(--token-url, #e53935);\n }\n\n .variable {\n color: var(--token-variable, #e53935);\n }\n\n code[class*='language-'],\n pre,\n .n-editor textarea {\n font-family: 'Liberation Mono', Monaco, Menlo, Consolas, 'Source Code Pro', 'Ubuntu Mono',\n 'Microsoft Yahei', '微软雅黑', Courier, 'Helvetica Neue', 'Lantinghei SC', STXihei,\n WenQuanYi, sans-serif;\n text-align: start;\n white-space: pre;\n word-wrap: normal;\n word-break: normal;\n word-spacing: normal;\n tab-size: 4;\n hyphens: none;\n }\n\n .deleted:not(.prefix) {\n display: block;\n color: inherit;\n background-color: rgb(255 0 0 / 10%);\n }\n\n .inserted:not(.prefix) {\n display: block;\n color: inherit;\n background-color: rgb(0 255 128 / 10%);\n }\n\n span .inline-color-wrapper {\n display: inline-block;\n overflow: hidden;\n margin: 0 0.333ch;\n border: var(--border-base);\n background: repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%) 0 / 10px 10px;\n outline: 1px solid rgb(0 0 0 / 50%);\n inline-size: 1.333ch;\n block-size: 1.333ch;\n box-sizing: border-box;\n }\n\n span .inline-color {\n display: block;\n inline-size: 120%;\n block-size: 120%;\n }\n\n pre,\n .n-editor {\n position: relative;\n display: block;\n overflow: visible;\n margin: auto;\n border-radius: var(--border-radius);\n max-inline-size: 100%;\n font-size: var(--font-size);\n white-space: pre-wrap;\n background-color: var(--primary-component-bg);\n box-shadow: 0 2px 8px 0 var(--primary-shadow);\n line-height: 20px;\n transition-property: color, background-color, box-shadow;\n }\n\n pre .toolbar::after {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n z-index: 1;\n display: block;\n overflow: hidden;\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n inline-size: 100%;\n block-size: 24px;\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 line-height: 24px;\n text-transform: uppercase;\n backdrop-filter: blur(16px);\n /* stylelint-disable-next-line */\n -webkit-backdrop-filter: blur(16px);\n content: attr(data-lang) '';\n transition-property: background-color, border-color, color;\n }\n\n pre .toolbar::before {\n position: absolute;\n inset-block-start: 10px;\n inset-inline-start: 12px;\n z-index: 3;\n display: inline-block;\n border-radius: var(--border-radius);\n inline-size: 4px;\n block-size: 4px;\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 }\n\n pre .toolbar .toolbar-copy {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 8px;\n z-index: 3;\n border: none;\n padding: 0;\n background: none;\n outline: none;\n cursor: pointer;\n }\n\n pre .toolbar .toolbar-copy:active {\n transform: scale(0.95);\n }\n\n .toolbar .toolbar-copy::after {\n user-select: none;\n display: block;\n font-size: 24px;\n font-family: sans-serif;\n color: var(--text-color);\n line-height: 24px;\n content: '⎘';\n transition-property: color, transform;\n }\n\n .toolbar .toolbar-copy:hover::after {\n color: var(--primary-color, #5794ff);\n }\n\n pre.line-numbers > code {\n margin: 0 10px 0 54px;\n white-space: inherit;\n counter-reset: linenumber;\n }\n\n pre.line-numbers .line-numbers-rows {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n overflow-y: auto;\n border-inline-end: 1px solid var(--border-color);\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n padding: 32px 0 8px;\n inline-size: 44px;\n max-block-size: inherit;\n font-size: 100%;\n background-color: var(--primary-component-bg);\n letter-spacing: -1px;\n user-select: none;\n pointer-events: none;\n transition-property: background-color, border-color;\n }\n\n .line-numbers-rows > span {\n display: block;\n counter-increment: linenumber;\n }\n\n .line-numbers-rows > span::before {\n display: block;\n padding-inline-end: 0.8em;\n text-align: end;\n color: #999;\n opacity: 0.5;\n content: counter(linenumber);\n }\n\n pre::-webkit-scrollbar,\n pre ::-webkit-scrollbar {\n display: none;\n }\n\n @media print {\n code[class*='language-'],\n pre[class*='language-'] {\n text-shadow: none;\n }\n }\n `;\n const darkCss = css`\n :host {\n --code-color: #eee;\n --code-lang-style-color: #fd9170;\n --code-toolbar-bg: rgb(63 63 63 / 70%);\n --token-atrule: #c792ea;\n --token-attr-name: #ffcb6b;\n --token-attr-value: #a5e844;\n --token-attribute: #a5e844;\n --token-boolean: #c792ea;\n --token-builtin: #ffcb6b;\n --token-cdata: #80cbc4;\n --token-char: #80cbc4;\n --token-class: #ffcb6b;\n --token-class-name: #f2ff00;\n --token-comment: #616161;\n --token-constant: #c792ea;\n --token-deleted: #f66;\n --token-doctype: #616161;\n --token-entity: #f66;\n --token-function: #c792ea;\n --token-hexcode: #f2ff00;\n --token-id: #c792ea;\n --token-important: #c792ea;\n --token-inserted: #80cbc4;\n --token-keyword: #c792ea;\n --token-number: #fd9170;\n --token-operator: #89ddff;\n --token-prolog: #616161;\n --token-property: #80cbc4;\n --token-pseudo-class: #a5e844;\n --token-pseudo-element: #a5e844;\n --token-punctuation: #89ddff;\n --token-regex: #f2ff00;\n --token-selector: #f66;\n --token-string: #a5e844;\n --token-symbol: #c792ea;\n --token-tag: #f66;\n --token-unit: #fd9170;\n --token-url: #f66;\n --token-variable: #f66;\n }\n `;\n\n const style = createMemo(() => `${isDark() ? darkCss : ''}${baseCss}`);\n\n return style;\n}, getOwner());\n\nexport default prismCss;\n"],"names":["createMemo","createRoot","getOwner","css","theme","prismCss","isDark","baseCss","darkCss","style"],"mappings":"AAAA,OAASA,cAAAA,CAAU,CAAEC,cAAAA,CAAU,CAAEC,YAAAA,CAAQ,KAAQ,UAAW,AAC5D,QAASC,OAAAA,CAAG,KAAQ,aAAc,AAClC,QAAOC,MAAW,UAAW,CAE7B,IAAMC,EAAWJ,EAAW,KAC1B,GAAM,CAAEK,OAAAA,CAAM,CAAE,CAAGF,EACbG,EAAUJ,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6bpB,CAAC,CACKK,EAAUL,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CpB,CAAC,CAEKM,EAAQT,EAAW,IAAM,CAAC,EAAEM,IAAWE,EAAU,GAAG,EAAED,EAAQ,CAAC,EAErE,OAAOE,CACT,EAAGP,IAEH,gBAAeG,CAAS"}
|
package/es/radio/style.js
CHANGED
|
@@ -39,10 +39,8 @@ import{css as r}from"@moneko/css";export const style=r`
|
|
|
39
39
|
margin: auto;
|
|
40
40
|
border-radius: 50%;
|
|
41
41
|
box-shadow: inset 0 0 0 8px var(--primary-color);
|
|
42
|
-
inset-block
|
|
43
|
-
inset-
|
|
44
|
-
inset-inline-start: 0;
|
|
45
|
-
inset-inline-end: 0;
|
|
42
|
+
inset-block: 0 0;
|
|
43
|
+
inset-inline: 0 0;
|
|
46
44
|
content: '';
|
|
47
45
|
inline-size: 10px;
|
|
48
46
|
block-size: 10px;
|
package/es/radio/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/radio/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .box {\n display: flex;\n flex-wrap: wrap;\n gap: 8px 16px;\n\n .item,\n .item .label {\n display: inline-flex;\n gap: 6px;\n justify-content: flex-start;\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n inline-size: fit-content;\n }\n\n .item {\n outline: 0;\n\n .radio {\n position: relative;\n display: inline-block;\n margin: 0;\n border: 1px solid var(--border-color);\n border-radius: 50%;\n background-color: var(--component-bg);\n outline: none;\n transition: 120ms border-color linear;\n appearance: none;\n inline-size: 16px;\n block-size: 16px;\n pointer-events: none;\n user-select: none;\n\n &::before {\n position: absolute;\n display: inline-block;\n margin: auto;\n border-radius: 50%;\n box-shadow: inset 0 0 0 8px var(--primary-color);\n inset-block
|
|
1
|
+
{"version":3,"sources":["../../components/radio/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .box {\n display: flex;\n flex-wrap: wrap;\n gap: 8px 16px;\n\n .item,\n .item .label {\n display: inline-flex;\n gap: 6px;\n justify-content: flex-start;\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n inline-size: fit-content;\n }\n\n .item {\n outline: 0;\n\n .radio {\n position: relative;\n display: inline-block;\n margin: 0;\n border: 1px solid var(--border-color);\n border-radius: 50%;\n background-color: var(--component-bg);\n outline: none;\n transition: 120ms border-color linear;\n appearance: none;\n inline-size: 16px;\n block-size: 16px;\n pointer-events: none;\n user-select: none;\n\n &::before {\n position: absolute;\n display: inline-block;\n margin: auto;\n border-radius: 50%;\n box-shadow: inset 0 0 0 8px var(--primary-color);\n inset-block: 0 0;\n inset-inline: 0 0;\n content: '';\n inline-size: 10px;\n block-size: 10px;\n transform: scale(0);\n transition: 120ms transform var(--transition-timing-function);\n }\n\n &:active {\n border-color: var(--primary-active);\n\n &::before {\n --primary-color: var(--primary-active);\n }\n }\n\n &:checked {\n border-color: var(--primary-color);\n\n &::before {\n transform: scale(1);\n }\n }\n\n &:disabled {\n border-color: var(--disable-border);\n\n &::before {\n --primary-color: var(--disable-border);\n }\n }\n\n &:not(:disabled, :checked):hover {\n border-color: var(--primary-hover);\n\n &::before {\n --primary-color: var(--primary-hover);\n }\n }\n }\n\n .label {\n color: var(--text-color);\n outline: 0;\n cursor: inherit;\n }\n\n &:has(:checked) {\n --text-color: var(--primary-color);\n }\n\n &:not([aria-disabled]:not([aria-disabled='false'])):focus .radio {\n box-shadow: 0 0 0 3px var(--primary-outline);\n\n &:not(:checked) {\n border-color: var(--primary-hover);\n }\n }\n\n &[aria-disabled]:not([aria-disabled='false']) {\n --text-color: var(--disable-color);\n\n cursor: not-allowed;\n }\n }\n }\n\n .horizontal {\n flex-direction: row;\n }\n\n .vertical {\n flex-direction: column;\n }\n\n ${['success', 'error', 'warning']\n .map(\n (s) =>\n `.${s} {--border-color: var(--${s}-border);--primary-hover: var(--${s}-hover);--primary-outline: var(--${s}-outline);--primary-color: var(--${s}-color);--primary-active: var(--${s}-active);--component-bg: var(--${s}-bg);}`,\n )\n .join('')}\n`;\n"],"names":["css","style","map","s","join"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqHvB,EAAE,CAAC,UAAW,QAAS,UAAU,CAC9BE,GAAG,CACF,AAACC,GACC,CAAC,CAAC,EAAEA,EAAE,wBAAwB,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,+BAA+B,EAAEA,EAAE,MAAM,CAAC,EAEjOC,IAAI,CAAC,IAAI;AACd,CAAC,AAAC"}
|
package/es/spin/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{template as e}from"solid-js/web";import{insert as t}from"solid-js/web";import{effect as o}from"solid-js/web";import{className as i}from"solid-js/web";let n=/*#__PURE__*/e("<style>"),
|
|
1
|
+
import{template as e}from"solid-js/web";import{insert as t}from"solid-js/web";import{effect as o}from"solid-js/web";import{className as i}from"solid-js/web";let n=/*#__PURE__*/e("<style>"),r=/*#__PURE__*/e('<div><div class="content">');import{createComponent as s,mergeProps as l}from"solid-js";import{css as a,cx as c}from"@moneko/css";import{customElement as d}from"solid-element";import p from"../theme";let m=a`
|
|
2
2
|
.box {
|
|
3
3
|
position: relative;
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -31,10 +31,8 @@ import{template as e}from"solid-js/web";import{insert as t}from"solid-js/web";im
|
|
|
31
31
|
text-align: center;
|
|
32
32
|
inline-size: 32px;
|
|
33
33
|
block-size: 32px;
|
|
34
|
-
inset-block
|
|
35
|
-
inset-
|
|
36
|
-
inset-inline-start: 0;
|
|
37
|
-
inset-inline-end: 0;
|
|
34
|
+
inset-block: 0 0;
|
|
35
|
+
inset-inline: 0 0;
|
|
38
36
|
box-sizing: border-box;
|
|
39
37
|
content: '✲';
|
|
40
38
|
animation: spin-rotate-effect 1s infinite;
|
|
@@ -50,5 +48,5 @@ import{template as e}from"solid-js/web";import{insert as t}from"solid-js/web";im
|
|
|
50
48
|
transform: rotate(360deg);
|
|
51
49
|
}
|
|
52
50
|
}
|
|
53
|
-
`;function f(e){let{baseStyle:
|
|
51
|
+
`;function f(e){let{baseStyle:s}=p;return[(()=>{let o=n();return t(o,s,null),t(o,m,null),t(o,()=>a(e.css),null),o})(),(()=>{let n=r(),s=n.firstChild;return t(s,()=>e.children),o(()=>i(n,c("box",e.spin&&"spin",e.class))),n})()]}d("n-spin",{class:void 0,css:void 0,spin:void 0},(e,t)=>{let o=t.element,i=l({children:[...o.childNodes.values()]},e);return s(f,i)});export default f;
|
|
54
52
|
//# sourceMappingURL=index.js.map
|
package/es/spin/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/spin/index.tsx"],"sourcesContent":["import { createComponent, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nconst style = css`\n .box {\n position: relative;\n box-sizing: border-box;\n }\n\n .content {\n opacity: 1;\n transition: opacity var(--transition-duration);\n }\n\n .spin {\n cursor: not-allowed;\n\n .content {\n opacity: 0.3;\n pointer-events: none;\n user-select: none;\n }\n\n &::before {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: auto;\n border: 1px solid;\n border-color: var(--text-secondary) transparent;\n border-radius: 16px;\n font-size: large;\n text-align: center;\n inline-size: 32px;\n block-size: 32px;\n inset-block
|
|
1
|
+
{"version":3,"sources":["../../components/spin/index.tsx"],"sourcesContent":["import { createComponent, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nconst style = css`\n .box {\n position: relative;\n box-sizing: border-box;\n }\n\n .content {\n opacity: 1;\n transition: opacity var(--transition-duration);\n }\n\n .spin {\n cursor: not-allowed;\n\n .content {\n opacity: 0.3;\n pointer-events: none;\n user-select: none;\n }\n\n &::before {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: auto;\n border: 1px solid;\n border-color: var(--text-secondary) transparent;\n border-radius: 16px;\n font-size: large;\n text-align: center;\n inline-size: 32px;\n block-size: 32px;\n inset-block: 0 0;\n inset-inline: 0 0;\n box-sizing: border-box;\n content: '✲';\n animation: spin-rotate-effect 1s infinite;\n }\n }\n\n @keyframes spin-rotate-effect {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n`;\n\nexport interface SpinProps {\n /** 自定义样式表 */\n css?: string;\n /** 自定义类名 */\n class?: string;\n /** 加载状态 */\n spin?: boolean;\n /** 内容 */\n children?: JSX.Element | JSX.Element[];\n}\n\nfunction Spin(props: SpinProps) {\n const { baseStyle } = theme;\n\n return (\n <>\n <style>\n {baseStyle()}\n {style}\n {css(props.css)}\n </style>\n <div class={cx('box', props.spin && 'spin', props.class)}>\n <div class=\"content\">{props.children}</div>\n </div>\n </>\n );\n}\n\nexport type SpinElement = CustomElement<SpinProps>;\n\ncustomElement<SpinProps>('n-spin', { class: void 0, css: void 0, spin: void 0 }, (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n children: [...el.childNodes.values()],\n },\n _,\n );\n\n return createComponent(Spin, props);\n});\nexport default Spin;\n"],"names":["createComponent","mergeProps","css","cx","customElement","theme","style","Spin","props","baseStyle","children","spin","class","_","opt","el","element","childNodes","values"],"mappings":"2OAAA,QAASA,mBAAAA,CAAe,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACvD,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAAOC,MAAW,UAAW,CAG7B,IAAMC,EAAQJ,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDlB,CAAC,CAaD,SAASK,EAAKC,CAAgB,EAC5B,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGJ,EAEtB,kCAGOI,YACAH,gBACAJ,EAAIM,EAAMN,GAAG,4DAGQM,EAAME,QAAQ,YAD1BP,EAAG,MAAOK,EAAMG,IAAI,EAAI,OAAQH,EAAMI,KAAK,UAK7D,CAIAR,EAAyB,SAAU,CAAEQ,MAAO,KAAK,EAAGV,IAAK,KAAK,EAAGS,KAAM,KAAK,CAAE,EAAG,CAACE,EAAGC,KACnF,IAAMC,EAAKD,EAAIE,OAAO,CAChBR,EAAQP,EACZ,CACES,SAAU,IAAIK,EAAGE,UAAU,CAACC,MAAM,GAAG,AACvC,EACAL,GAGF,OAAOb,EAAgBO,EAAMC,EAC/B,EACA,gBAAeD,CAAK"}
|
package/es/switch/style.js
CHANGED
|
@@ -47,8 +47,7 @@ import{css as r}from"@moneko/css";export const style=r`
|
|
|
47
47
|
var(--transition-duration) background-color 0.1s,
|
|
48
48
|
var(--transition-duration) border-color;
|
|
49
49
|
outline-offset: -0.05px;
|
|
50
|
-
inset-block
|
|
51
|
-
inset-block-end: 3px;
|
|
50
|
+
inset-block: 3px 3px;
|
|
52
51
|
block-size: 14px;
|
|
53
52
|
min-inline-size: 14px;
|
|
54
53
|
content: '';
|
package/es/switch/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/switch/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .switch {\n position: relative;\n display: inline-block;\n border-radius: 12px;\n padding: 2px;\n font-size: 12px;\n background-color: var(--primary-border);\n opacity: 1;\n outline: 0;\n box-shadow:\n inset 0 0 0 0 var(--primary-color),\n 0 0 0 0 var(--primary-hover),\n 0 0 0 0 var(--primary-border);\n transition:\n 0.4s box-shadow,\n var(--transition-duration) background-color,\n var(--transition-duration) opacity;\n cursor: pointer;\n inline-size: fit-content;\n min-inline-size: 44px;\n block-size: 22px;\n line-height: 18px;\n user-select: none;\n box-sizing: border-box;\n\n &::before {\n color: var(--primary-secondary);\n padding-inline: 20px 8px;\n transition-duration: var(--transition-duration);\n transition-property: color, padding, background-color;\n content: attr(text-off) '';\n }\n\n &::after {\n position: absolute;\n margin: auto;\n border: 1.5px solid #fff;\n border-radius: 12px;\n background-color: #fff;\n outline: 2.05px solid #fff;\n box-shadow: 0 2px 4px 1px var(--primary-shadow);\n transition:\n 0.6s transform ease,\n var(--transition-duration) padding ease,\n var(--transition-duration) inset-inline-start ease,\n var(--transition-duration) background-color 0.1s,\n var(--transition-duration) border-color;\n outline-offset: -0.05px;\n inset-block
|
|
1
|
+
{"version":3,"sources":["../../components/switch/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .switch {\n position: relative;\n display: inline-block;\n border-radius: 12px;\n padding: 2px;\n font-size: 12px;\n background-color: var(--primary-border);\n opacity: 1;\n outline: 0;\n box-shadow:\n inset 0 0 0 0 var(--primary-color),\n 0 0 0 0 var(--primary-hover),\n 0 0 0 0 var(--primary-border);\n transition:\n 0.4s box-shadow,\n var(--transition-duration) background-color,\n var(--transition-duration) opacity;\n cursor: pointer;\n inline-size: fit-content;\n min-inline-size: 44px;\n block-size: 22px;\n line-height: 18px;\n user-select: none;\n box-sizing: border-box;\n\n &::before {\n color: var(--primary-secondary);\n padding-inline: 20px 8px;\n transition-duration: var(--transition-duration);\n transition-property: color, padding, background-color;\n content: attr(text-off) '';\n }\n\n &::after {\n position: absolute;\n margin: auto;\n border: 1.5px solid #fff;\n border-radius: 12px;\n background-color: #fff;\n outline: 2.05px solid #fff;\n box-shadow: 0 2px 4px 1px var(--primary-shadow);\n transition:\n 0.6s transform ease,\n var(--transition-duration) padding ease,\n var(--transition-duration) inset-inline-start ease,\n var(--transition-duration) background-color 0.1s,\n var(--transition-duration) border-color;\n outline-offset: -0.05px;\n inset-block: 3px 3px;\n block-size: 14px;\n min-inline-size: 14px;\n content: '';\n inset-inline-start: 4px;\n box-sizing: border-box;\n }\n\n &:not([aria-disabled]),\n &[aria-disabled='false'] {\n &:not(.loading) {\n &:focus {\n box-shadow:\n inset 0 0 0 0 var(--primary-color),\n 0 0 0 1px var(--primary-hover),\n 0 0 1px 3px var(--primary-border);\n\n &.checked {\n box-shadow:\n inset 0 0 3px 12px var(--primary-color),\n 0 0 0 1px var(--primary-hover),\n 0 0 1px 3px var(--primary-border);\n }\n }\n\n &:hover {\n background-color: var(--primary-secondary-bg);\n }\n\n &:active {\n &::after {\n padding-inline: 10px;\n background-color: var(--primary-hover);\n }\n\n &.checked {\n &::after {\n transform: translateX(-10px);\n }\n }\n }\n }\n }\n\n &.loading,\n &[aria-disabled]:not([aria-disabled='false']) {\n color: var(--disable-color);\n background-color: var(--disable-bg);\n opacity: 0.8;\n cursor: not-allowed;\n }\n }\n\n .checked {\n box-shadow:\n inset 0 0 3px 12px var(--primary-color),\n 0 0 0 0 var(--primary-hover),\n 0 0 0 0 var(--primary-border);\n\n &::before {\n color: #fff;\n padding-inline: 8px 20px;\n content: attr(text-on) '';\n }\n\n &::after {\n inset-inline-start: calc(100% - 18px);\n }\n }\n\n .loading {\n &::after {\n border-block-start-color: var(--primary-color);\n border-block-end-color: var(--primary-color);\n animation: switch-loading 1.5s infinite linear;\n }\n }\n\n @keyframes switch-loading {\n form {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwIzB,CAAC,AAAC"}
|
package/es/table/styles.js
CHANGED
|
@@ -64,8 +64,7 @@ import{css as t}from"@moneko/css";export const styles=t`
|
|
|
64
64
|
display: block;
|
|
65
65
|
margin: auto;
|
|
66
66
|
background-color: var(--text-secondary);
|
|
67
|
-
inset-block
|
|
68
|
-
inset-block-end: 0;
|
|
67
|
+
inset-block: 0 0;
|
|
69
68
|
inset-inline-end: 0;
|
|
70
69
|
content: '';
|
|
71
70
|
block-size: 16px;
|
package/es/table/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/table/styles.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const styles = css`\n :host {\n --table-heading-bg: var(--border-color);\n --distance-horizontal: 16px;\n --distance-vertical: 8px;\n }\n\n .table-cell {\n padding: var(--distance-vertical) var(--distance-horizontal);\n\n n-button::part(button) {\n padding: 0;\n min-block-size: unset;\n }\n }\n\n .small {\n --distance-horizontal: 12px;\n --distance-vertical: 6px;\n }\n\n .large {\n --distance-horizontal: 20px;\n --distance-vertical: 10px;\n }\n\n .table {\n border-collapse: collapse;\n display: table;\n border-block-end: 1px solid var(--table-heading-bg);\n inline-size: 100%;\n max-inline-size: 100%;\n border-spacing: 0;\n transition-property: border-color;\n word-break: break-all;\n\n &:has(.table-foot) {\n border-block-end: none;\n }\n\n .table-title {\n padding-block: var(--distance-vertical);\n font-weight: bold;\n text-align: start;\n }\n\n th {\n font-weight: 500;\n color: var(--text-heading);\n background-color: var(--table-heading-bg);\n transition-property: background-color, color;\n }\n\n .table-head {\n .table-cell {\n min-inline-size: 54px;\n\n &:has(+ .table-cell) {\n position: relative;\n\n &::after {\n position: absolute;\n z-index: 1;\n display: block;\n margin: auto;\n background-color: var(--text-secondary);\n inset-block
|
|
1
|
+
{"version":3,"sources":["../../components/table/styles.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const styles = css`\n :host {\n --table-heading-bg: var(--border-color);\n --distance-horizontal: 16px;\n --distance-vertical: 8px;\n }\n\n .table-cell {\n padding: var(--distance-vertical) var(--distance-horizontal);\n\n n-button::part(button) {\n padding: 0;\n min-block-size: unset;\n }\n }\n\n .small {\n --distance-horizontal: 12px;\n --distance-vertical: 6px;\n }\n\n .large {\n --distance-horizontal: 20px;\n --distance-vertical: 10px;\n }\n\n .table {\n border-collapse: collapse;\n display: table;\n border-block-end: 1px solid var(--table-heading-bg);\n inline-size: 100%;\n max-inline-size: 100%;\n border-spacing: 0;\n transition-property: border-color;\n word-break: break-all;\n\n &:has(.table-foot) {\n border-block-end: none;\n }\n\n .table-title {\n padding-block: var(--distance-vertical);\n font-weight: bold;\n text-align: start;\n }\n\n th {\n font-weight: 500;\n color: var(--text-heading);\n background-color: var(--table-heading-bg);\n transition-property: background-color, color;\n }\n\n .table-head {\n .table-cell {\n min-inline-size: 54px;\n\n &:has(+ .table-cell) {\n position: relative;\n\n &::after {\n position: absolute;\n z-index: 1;\n display: block;\n margin: auto;\n background-color: var(--text-secondary);\n inset-block: 0 0;\n inset-inline-end: 0;\n content: '';\n block-size: 16px;\n inline-size: 1px;\n opacity: 0.5;\n }\n }\n }\n }\n\n :not(tfoot) {\n tr:first-child th:first-child {\n border-start-start-radius: var(--border-radius);\n }\n\n tr:first-child th:last-child {\n border-start-end-radius: var(--border-radius);\n }\n }\n\n .table-body {\n tr:nth-child(2n) {\n background-color: var(--primary-details-bg);\n }\n\n tr:hover {\n background-color: var(--primary-selection);\n }\n }\n\n .table-foot {\n background-color: var(--primary-selection);\n\n tr:last-child th:first-child {\n border-end-start-radius: var(--border-radius);\n }\n\n tr:last-child td:last-child {\n border-end-end-radius: var(--border-radius);\n }\n }\n\n .empty-val {\n opacity: 0.5;\n }\n }\n\n .table-pagination {\n display: block;\n inline-size: fit-content;\n margin-block-start: 16px;\n margin-inline-start: auto;\n }\n`;\n"],"names":["css","styles"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,OAASD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwH1B,CAAC,AAAC"}
|