neko-ui 2.7.0 → 2.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -6
- package/es/@moneko/coverage/index.js.map +1 -1
- package/es/@moneko/info/index.js.map +1 -1
- package/es/@moneko/locales/index.js.map +1 -1
- package/es/@moneko/routes/index.js.map +1 -1
- package/es/avatar/group.js.map +1 -1
- package/es/avatar/index.js.map +1 -1
- package/es/avatar/style.js.map +1 -1
- package/es/back-top/index.js.map +1 -1
- package/es/back-top/style.js.map +1 -1
- package/es/basic-config/index.js.map +1 -1
- package/es/button/index.js.map +1 -1
- package/es/button/style.js.map +1 -1
- package/es/capture-screen/index.js.map +1 -1
- package/es/capture-screen/style.js.map +1 -1
- package/es/carousel/index.js.map +1 -1
- package/es/carousel/style.js.map +1 -1
- package/es/checkbox/index.js.map +1 -1
- package/es/checkbox/style.js.map +1 -1
- package/es/code/index.js +1 -1
- package/es/code/index.js.map +1 -1
- package/es/code/style.js.map +1 -1
- package/es/code/worker.js +1 -1
- package/es/code/worker.js.map +1 -1
- package/es/color-palette/index.js.map +1 -1
- package/es/color-palette/style.js.map +1 -1
- package/es/color-picker/index.js.map +1 -1
- package/es/color-picker/style.js.map +1 -1
- package/es/cron/begin-interval.js.map +1 -1
- package/es/cron/day.js.map +1 -1
- package/es/cron/hour.js.map +1 -1
- package/es/cron/index.js.map +1 -1
- package/es/cron/item.js.map +1 -1
- package/es/cron/minute.js.map +1 -1
- package/es/cron/month.js.map +1 -1
- package/es/cron/period.js.map +1 -1
- package/es/cron/second.js.map +1 -1
- package/es/cron/some.js.map +1 -1
- package/es/cron/style.js.map +1 -1
- package/es/cron/week.js.map +1 -1
- package/es/cron/year.js.map +1 -1
- package/es/date-picker/date.js.map +1 -1
- package/es/date-picker/dayjs.js.map +1 -1
- package/es/date-picker/index.js.map +1 -1
- package/es/date-picker/month.js.map +1 -1
- package/es/date-picker/panel.js.map +1 -1
- package/es/date-picker/style.js.map +1 -1
- package/es/date-picker/time.js.map +1 -1
- package/es/date-picker/year.js.map +1 -1
- package/es/dropdown/index.js.map +1 -1
- package/es/empty/index.js.map +1 -1
- package/es/from-schema/index.js.map +1 -1
- package/es/get-options/index.js.map +1 -1
- package/es/highlight-text/index.js.map +1 -1
- package/es/img/index.js.map +1 -1
- package/es/img/style.js.map +1 -1
- package/es/index.js.map +1 -1
- package/es/input/index.js.map +1 -1
- package/es/input/style.js.map +1 -1
- package/es/input-number/index.js.map +1 -1
- package/es/katex/index.js.map +1 -1
- package/es/md/index.js +1 -1
- package/es/md/index.js.map +1 -1
- package/es/md/worker.js.map +1 -1
- package/es/md-style/index.js.map +1 -1
- package/es/menu/index.js.map +1 -1
- package/es/menu/style.js.map +1 -1
- package/es/modal/hooks.js.map +1 -1
- package/es/modal/index.js.map +1 -1
- package/es/modal/store.js.map +1 -1
- package/es/modal/style.js.map +1 -1
- package/es/notification/index.js.map +1 -1
- package/es/notification/notification.js.map +1 -1
- package/es/notification/queque.js.map +1 -1
- package/es/notification/styles.js.map +1 -1
- package/es/pagination/index.js.map +1 -1
- package/es/pagination/styles.js.map +1 -1
- package/es/popover/index.js.map +1 -1
- package/es/popover/style.js.map +1 -1
- package/es/prism/css.js.map +1 -1
- package/es/prism/prism.js +1 -1
- package/es/prism/prism.js.map +1 -1
- package/es/provider/index.js.map +1 -1
- package/es/radio/index.js.map +1 -1
- package/es/radio/style.js.map +1 -1
- package/es/segmented/index.js.map +1 -1
- package/es/segmented/style.js.map +1 -1
- package/es/select/index.js.map +1 -1
- package/es/select/style.js.map +1 -1
- package/es/skeleton/index.js.map +1 -1
- package/es/spin/index.js.map +1 -1
- package/es/switch/index.js.map +1 -1
- package/es/switch/style.js.map +1 -1
- package/es/table/index.js.map +1 -1
- package/es/table/styles.js.map +1 -1
- package/es/tabs/index.js.map +1 -1
- package/es/tabs/style.js.map +1 -1
- package/es/tag/index.js.map +1 -1
- package/es/tag/style.js.map +1 -1
- package/es/theme/index.js.map +1 -1
- package/es/tree/index.js.map +1 -1
- package/es/tree/register.js.map +1 -1
- package/es/tree/style.js.map +1 -1
- package/es/tree/type.js.map +1 -1
- package/es/typography/index.js.map +1 -1
- package/lib/@moneko/coverage/index.js.map +1 -1
- package/lib/@moneko/info/index.js.map +1 -1
- package/lib/@moneko/locales/index.js.map +1 -1
- package/lib/@moneko/routes/index.js.map +1 -1
- package/lib/avatar/group.js.map +1 -1
- package/lib/avatar/index.js.map +1 -1
- package/lib/avatar/style.js.map +1 -1
- package/lib/back-top/index.js.map +1 -1
- package/lib/back-top/style.js.map +1 -1
- package/lib/basic-config/index.js.map +1 -1
- package/lib/button/index.js.map +1 -1
- package/lib/button/style.js.map +1 -1
- package/lib/capture-screen/index.js.map +1 -1
- package/lib/capture-screen/style.js.map +1 -1
- package/lib/carousel/index.js.map +1 -1
- package/lib/carousel/style.js.map +1 -1
- package/lib/checkbox/index.js.map +1 -1
- package/lib/checkbox/style.js.map +1 -1
- package/lib/code/index.js +1 -1
- package/lib/code/index.js.map +1 -1
- package/lib/code/style.js.map +1 -1
- package/lib/code/worker.js +1 -1
- package/lib/code/worker.js.map +1 -1
- package/lib/color-palette/index.js.map +1 -1
- package/lib/color-palette/style.js.map +1 -1
- package/lib/color-picker/index.js +1 -1
- package/lib/color-picker/index.js.map +1 -1
- package/lib/color-picker/style.js.map +1 -1
- package/lib/cron/begin-interval.js.map +1 -1
- package/lib/cron/day.js.map +1 -1
- package/lib/cron/hour.js.map +1 -1
- package/lib/cron/index.js.map +1 -1
- package/lib/cron/item.js.map +1 -1
- package/lib/cron/minute.js.map +1 -1
- package/lib/cron/month.js.map +1 -1
- package/lib/cron/period.js.map +1 -1
- package/lib/cron/second.js.map +1 -1
- package/lib/cron/some.js.map +1 -1
- package/lib/cron/style.js.map +1 -1
- package/lib/cron/week.js.map +1 -1
- package/lib/cron/year.js.map +1 -1
- package/lib/date-picker/date.js.map +1 -1
- package/lib/date-picker/dayjs.js.map +1 -1
- package/lib/date-picker/index.js +1 -1
- package/lib/date-picker/index.js.map +1 -1
- package/lib/date-picker/month.js.map +1 -1
- package/lib/date-picker/panel.js.map +1 -1
- package/lib/date-picker/style.js.map +1 -1
- package/lib/date-picker/time.js.map +1 -1
- package/lib/date-picker/year.js.map +1 -1
- package/lib/dropdown/index.js +1 -1
- package/lib/dropdown/index.js.map +1 -1
- package/lib/empty/index.js.map +1 -1
- package/lib/from-schema/index.js.map +1 -1
- package/lib/get-options/index.js.map +1 -1
- package/lib/highlight-text/index.js.map +1 -1
- package/lib/img/index.js.map +1 -1
- package/lib/img/style.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/input/index.js.map +1 -1
- package/lib/input/style.js.map +1 -1
- package/lib/input-number/index.js +1 -1
- package/lib/input-number/index.js.map +1 -1
- package/lib/katex/index.js.map +1 -1
- package/lib/md/index.js +1 -1
- package/lib/md/index.js.map +1 -1
- package/lib/md/worker.js.map +1 -1
- package/lib/md-style/index.js.map +1 -1
- package/lib/menu/index.js.map +1 -1
- package/lib/menu/style.js.map +1 -1
- package/lib/modal/hooks.js.map +1 -1
- package/lib/modal/index.js.map +1 -1
- package/lib/modal/store.js.map +1 -1
- package/lib/modal/style.js.map +1 -1
- package/lib/notification/index.js.map +1 -1
- package/lib/notification/notification.js.map +1 -1
- package/lib/notification/queque.js.map +1 -1
- package/lib/notification/styles.js.map +1 -1
- package/lib/pagination/index.js.map +1 -1
- package/lib/pagination/styles.js.map +1 -1
- package/lib/popover/index.js.map +1 -1
- package/lib/popover/style.js.map +1 -1
- package/lib/prism/css.js.map +1 -1
- package/lib/prism/prism.js +1 -1
- package/lib/prism/prism.js.map +1 -1
- package/lib/provider/index.js.map +1 -1
- package/lib/radio/index.js.map +1 -1
- package/lib/radio/style.js.map +1 -1
- package/lib/segmented/index.js.map +1 -1
- package/lib/segmented/style.js.map +1 -1
- package/lib/select/index.js +1 -1
- package/lib/select/index.js.map +1 -1
- package/lib/select/style.js.map +1 -1
- package/lib/skeleton/index.js.map +1 -1
- package/lib/spin/index.js.map +1 -1
- package/lib/switch/index.js.map +1 -1
- package/lib/switch/style.js.map +1 -1
- package/lib/table/index.js.map +1 -1
- package/lib/table/styles.js.map +1 -1
- package/lib/tabs/index.js.map +1 -1
- package/lib/tabs/style.js.map +1 -1
- package/lib/tag/index.js +2 -2
- package/lib/tag/index.js.map +1 -1
- package/lib/tag/style.js.map +1 -1
- package/lib/theme/index.js.map +1 -1
- package/lib/tree/index.js.map +1 -1
- package/lib/tree/register.js.map +1 -1
- package/lib/tree/style.js.map +1 -1
- package/lib/tree/type.js.map +1 -1
- package/lib/typography/index.js.map +1 -1
- package/package.json +22 -22
- package/umd/index.js +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/input-number/index.tsx"],"sourcesContent":["import { createComponent, createEffect, createSignal, mergeProps, onCleanup } from 'solid-js';\nimport { passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport Input, { defaultInportProps } from '../input';\nimport type { CustomElement, InputProps } from '..';\n\nconst style = css`\n /** 隐藏原生加减控件 */\n .number[type='number'] {\n appearance: textfield;\n }\n\n .number[type='number']::-webkit-inner-spin-button,\n .number[type='number']::-webkit-outer-spin-button {\n appearance: none;\n }\n`;\n\n/** API\n * @since 2.0.0\n */\nexport interface InputNumberProps extends Omit<InputProps, 'value' | 'defaultValue' | 'onChange'> {\n /** 值 */\n value?: number;\n /** 默认值\n * @default 0\n */\n defaultValue?: number;\n /** 最小值\n * @default Number.MIN_SAFE_INTEGER\n */\n min?: number;\n /** 最大值\n * @default Number.MAX_SAFE_INTEGER\n */\n max?: number;\n /** 值变更时触发的函数 */\n onChange?: (value?: number) => void;\n /** 每次改变步数,可以为小数\n * @default 1\n */\n step?: number;\n /** 数值精度\n * @default 2\n */\n precision?: number;\n}\nexport type InputNumberElement = CustomElement<InputNumberProps>;\n\nfunction InputNumber(props: InputNumberProps) {\n const [move, setMove] = createSignal(false);\n\n function onMouseDown(e: MouseEvent) {\n e.stopPropagation();\n setMove(true);\n }\n function onKeyDown(e: KeyboardEvent) {\n switch (e.key) {\n case 'ArrowUp':\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n mouseMove({ movementX: 0, movementY: -1 });\n break;\n case 'ArrowDown':\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n mouseMove({ movementX: 0, movementY: 1 });\n break;\n default:\n break;\n }\n }\n function mouseUp() {\n setMove(false);\n }\n const _ = mergeProps(\n {\n size: 'normal',\n value: '',\n defaultValue: 0,\n type: 'text',\n onKeyDown: onKeyDown,\n onMouseDown: onMouseDown,\n step: 1,\n precision: 2,\n max: Number.MAX_SAFE_INTEGER,\n min: Number.MIN_SAFE_INTEGER,\n },\n props,\n );\n\n function change(val?: string | number) {\n let _val = typeof val === 'string' ? parseFloat(val) : val;\n\n if (isNaN(_val as number)) {\n _val = '' as unknown as number;\n }\n if (typeof _val !== 'undefined') {\n if (_val < (_.min as number)) _val = _.min;\n if ((_val as number) > (_.max as number)) _val = _.max;\n }\n props.onChange?.(_val);\n }\n\n function mouseMove(e: { movementX: number; movementY: number }) {\n const { movementX, movementY } = e;\n const _val = _.value;\n const val = typeof _val === 'number' && !isNaN(_val) ? _val : Number(_val) || 0;\n\n change(Number(Number(val + (movementX - movementY) * (_.step as number)).toFixed(_.precision)));\n }\n\n createEffect(() => {\n if (move()) {\n document.body.addEventListener('mousemove', mouseMove, {\n passive: passiveSupported,\n });\n document.body.addEventListener('mouseup', mouseUp, {\n passive: passiveSupported,\n });\n }\n onCleanup(() => {\n document.body.removeEventListener('mousemove', mouseMove, false);\n document.body.removeEventListener('mouseup', mouseUp, passiveSupported);\n });\n });\n\n return (\n <Input\n {...(_ as InputProps)}\n class={cx('number', props.class)}\n onChange={change}\n css={style + (props.css || '')}\n />\n );\n}\n\ncustomElement<InputNumberProps>(\n 'n-input-number',\n {\n ...defaultInportProps,\n defaultValue: void 0,\n max: void 0,\n min: void 0,\n onChange: void 0,\n step: void 0,\n precision: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n onChange(val?: number | string) {\n el.value = val;\n el.dispatchEvent(\n new CustomEvent('change', {\n detail: val,\n }),\n );\n },\n },\n _,\n );\n\n return createComponent(InputNumber, props);\n },\n);\n\nexport default InputNumber;\n"],"names":["createComponent","createEffect","createSignal","mergeProps","onCleanup","passiveSupported","css","cx","customElement","Input","defaultInportProps","style","InputNumber","props","move","setMove","mouseUp","_","size","value","defaultValue","type","onKeyDown","e","key","mouseMove","movementX","movementY","onMouseDown","stopPropagation","step","precision","max","Number","MAX_SAFE_INTEGER","min","MIN_SAFE_INTEGER","change","val","_val","parseFloat","isNaN","onChange","toFixed","document","body","addEventListener","passive","removeEventListener","class","opt","el","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../components/input-number/index.tsx"],"sourcesContent":["import { createComponent, createEffect, createSignal, mergeProps, onCleanup } from 'solid-js';\nimport { passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport Input, { defaultInportProps } from '../input';\nimport type { CustomElement, InputProps } from '..';\n\nconst style = css`\n /** 隐藏原生加减控件 */\n .number[type='number'] {\n appearance: textfield;\n }\n\n .number[type='number']::-webkit-inner-spin-button,\n .number[type='number']::-webkit-outer-spin-button {\n appearance: none;\n }\n`;\n\n/** API\n * @since 2.0.0\n */\nexport interface InputNumberProps extends Omit<InputProps, 'value' | 'defaultValue' | 'onChange'> {\n /** 值 */\n value?: number;\n /** 默认值\n * @default 0\n */\n defaultValue?: number;\n /** 最小值\n * @default Number.MIN_SAFE_INTEGER\n */\n min?: number;\n /** 最大值\n * @default Number.MAX_SAFE_INTEGER\n */\n max?: number;\n /** 值变更时触发的函数 */\n onChange?: (value?: number) => void;\n /** 每次改变步数,可以为小数\n * @default 1\n */\n step?: number;\n /** 数值精度\n * @default 2\n */\n precision?: number;\n}\nexport type InputNumberElement = CustomElement<InputNumberProps>;\n\nfunction InputNumber(props: InputNumberProps) {\n const [move, setMove] = createSignal(false);\n\n function onMouseDown(e: MouseEvent) {\n e.stopPropagation();\n setMove(true);\n }\n function onKeyDown(e: KeyboardEvent) {\n switch (e.key) {\n case 'ArrowUp':\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n mouseMove({ movementX: 0, movementY: -1 });\n break;\n case 'ArrowDown':\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n mouseMove({ movementX: 0, movementY: 1 });\n break;\n default:\n break;\n }\n }\n function mouseUp() {\n setMove(false);\n }\n const _ = mergeProps(\n {\n size: 'normal',\n value: '',\n defaultValue: 0,\n type: 'text',\n onKeyDown: onKeyDown,\n onMouseDown: onMouseDown,\n step: 1,\n precision: 2,\n max: Number.MAX_SAFE_INTEGER,\n min: Number.MIN_SAFE_INTEGER,\n },\n props,\n );\n\n function change(val?: string | number) {\n let _val = typeof val === 'string' ? parseFloat(val) : val;\n\n if (isNaN(_val as number)) {\n _val = '' as unknown as number;\n }\n if (typeof _val !== 'undefined') {\n if (_val < (_.min as number)) _val = _.min;\n if ((_val as number) > (_.max as number)) _val = _.max;\n }\n props.onChange?.(_val);\n }\n\n function mouseMove(e: { movementX: number; movementY: number }) {\n const { movementX, movementY } = e;\n const _val = _.value;\n const val = typeof _val === 'number' && !isNaN(_val) ? _val : Number(_val) || 0;\n\n change(Number(Number(val + (movementX - movementY) * (_.step as number)).toFixed(_.precision)));\n }\n\n createEffect(() => {\n if (move()) {\n document.body.addEventListener('mousemove', mouseMove, {\n passive: passiveSupported,\n });\n document.body.addEventListener('mouseup', mouseUp, {\n passive: passiveSupported,\n });\n }\n onCleanup(() => {\n document.body.removeEventListener('mousemove', mouseMove, false);\n document.body.removeEventListener('mouseup', mouseUp, passiveSupported);\n });\n });\n\n return (\n <Input\n {...(_ as InputProps)}\n class={cx('number', props.class)}\n onChange={change}\n css={style + (props.css || '')}\n />\n );\n}\n\ncustomElement<InputNumberProps>(\n 'n-input-number',\n {\n ...defaultInportProps,\n defaultValue: void 0,\n max: void 0,\n min: void 0,\n onChange: void 0,\n step: void 0,\n precision: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n onChange(val?: number | string) {\n el.value = val;\n el.dispatchEvent(\n new CustomEvent('change', {\n detail: val,\n }),\n );\n },\n },\n _,\n );\n\n return createComponent(InputNumber, props);\n },\n);\n\nexport default InputNumber;\n"],"names":["createComponent","createEffect","createSignal","mergeProps","onCleanup","passiveSupported","css","cx","customElement","Input","defaultInportProps","style","InputNumber","props","move","setMove","mouseUp","_","size","value","defaultValue","type","onKeyDown","e","key","mouseMove","movementX","movementY","onMouseDown","stopPropagation","step","precision","max","Number","MAX_SAFE_INTEGER","min","MIN_SAFE_INTEGER","change","val","_val","parseFloat","isNaN","onChange","toFixed","document","body","addEventListener","passive","removeEventListener","class","opt","el","element","dispatchEvent","CustomEvent","detail"],"rangeMappings":";;;;;;;;;;","mappings":"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"}
|
package/es/katex/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/katex/index.ts"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"sources":["../../components/katex/index.ts"],"names":[],"rangeMappings":"","mappings":""}
|
package/es/md/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function e(){return(e=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}import{use as t}from"solid-js/web";import{template as r}from"solid-js/web";import{insert as o}from"solid-js/web";import{effect as n}from"solid-js/web";import{createComponent as i}from"solid-js/web";import{className as l}from"solid-js/web";let a=r("<style>"),s=r('<article class="n-md-box" part="box"><div class="n-md-body" part="body">'),c=r('<article part="box">');import{For as d,Match as m,Switch as u,createComponent as f,createEffect as h,mergeProps as p,onCleanup as v}from"solid-js";import{css as
|
|
1
|
+
function e(){return(e=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}import{use as t}from"solid-js/web";import{template as r}from"solid-js/web";import{insert as o}from"solid-js/web";import{effect as n}from"solid-js/web";import{createComponent as i}from"solid-js/web";import{className as l}from"solid-js/web";let a=r("<style>"),s=r('<article class="n-md-box" part="box"><div class="n-md-body" part="body">'),c=r('<article part="box">');import{For as d,Match as m,Switch as u,createComponent as f,createEffect as h,mergeProps as p,onCleanup as v}from"solid-js";import g from"@moneko/common/lib/frameCallback";import{css as b,cx as x}from"@moneko/css";import w from"marked-completed";import{customElement as k}from"solid-element";import"../code";import"../img";import y from"../md-style";import $ from"../theme";function C(e){return`<n-katex display-mode="true">${e}</n-katex>`}function E(e){return`<n-katex>${e}</n-katex>`}function j(e,t,r){return`<img role="img" src="${e}" alt="${r}" ${t?`title="${t}"`:""}></img>`}function L(e,t,r){return`<n-img role="img" src="${e}" alt="${r}" ${t?`title="${t}"`:""}></n-img>`}function A(r){let f;let k=new w.Renderer;k.katexBlock=C,k.katexInline=E;let{baseStyle:A}=$,O=p({pictureViewer:!0,text:"",tools:["copy"],getAnchorContainer:()=>window},r);h(()=>{g(()=>(function(t){var r;let{text:o,pictureViewer:n,langToolbar:i}=t,l=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t.indexOf(r=i[o])>=0||(n[r]=e[r]);return n}(t,["text","pictureViewer","langToolbar"]);k.image=n?L:j;let a=!!(null==i?void 0:i.length);k.code=function(e,t){return"treeview"===t?`<n-tree data="${e}" />`:`<n-code class="n-code" toolbar="${a}" lang="${t}" ${l.langLineNumber?'line-number="true"':""}>${encodeURIComponent(e)}</n-code>`},r={data:w(o,e({renderer:k,langToolbar:i,headerPrefix:"# ",breaks:!0,pedantic:!1,smartLists:!0,smartypants:!0,xhtml:!0},l))},f&&(f.innerHTML=r.data)})({text:O.text,langLineNumber:O.lineNumber,langToolbar:O.tools,pictureViewer:O.pictureViewer}))});let T=[],I=[],V=[];function N(e){e.preventDefault(),e.stopPropagation();let t=e.target;if(t.hash){var r;null==f||null==(r=f.querySelector(decodeURIComponent(t.hash)))||r.scrollIntoView({behavior:"smooth",block:"nearest"}),T.forEach(e=>e.classList.remove("active")),t.classList.add("active")}else window.open(t.href)}function R(e){e.forEach(e=>{let t;let r=e.target.getAttribute("id"),o=e.target.querySelectorAll("a");if(T.forEach(e=>{e.hash===`#${r}`?t=e:e.hash||o.forEach(r=>{r.href===e.href&&(t=e)})}),t){let r=V.indexOf(t);if(V.forEach(e=>{e.classList.remove("active")}),e.isIntersecting?V.push(t):-1!==r&&V.splice(r,1),V[0]){var n;V[0].classList.add("active"),null==(n=V[0].offsetParent)||n.scrollTo({top:V[0].offsetTop})}}})}return h(()=>{var e;let t;f&&(null==(e=O.text)?void 0:e.startsWith("[TOC]"))&&(T=[...f.querySelectorAll(".n-md-toc a[href]")],I=[...f.querySelectorAll("h1, h2, h3, h4, h5, h6")],t=new IntersectionObserver(R,{rootMargin:"-50px 0px",threshold:.5}),I.forEach(e=>t.observe(e)),T.forEach(e=>{e.addEventListener("click",N)})),v(()=>{t&&(I.forEach(e=>t.unobserve(e)),t.disconnect()),T.forEach(e=>{e.removeEventListener("click",N)})})}),[(()=>{let e=a();return o(e,A,null),o(e,y,null),o(e,()=>b(O.css),null),e})(),i(u,{get children(){return[i(m,{get when(){var q;return null==(q=O.children)?void 0:q.length},get children(){let e=s();return o(e.firstChild,i(d,{get each(){return O.children},children:e=>e})),e}}),i(m,{get when(){return O.text},get children(){let e=c(),r=f;return"function"==typeof r?t(r,e):f=e,n(()=>l(e,x("n-md-box",O.class))),e}})]}})]}k("n-md",{class:void 0,pictureViewer:void 0,lineNumber:!0,text:void 0,tools:void 0,getAnchorContainer:void 0,css:void 0,children:void 0,notRender:void 0},(e,t)=>{let r=t.element,o=p({text:!e.notRender&&r.textContent||r.text,css:r.css,tools:r.tools,getAnchorContainer:r.getAnchorContainer},e);return h(()=>{r.removeAttribute("css"),r.replaceChildren()}),f(A,o)});export default A;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/es/md/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/md/index.tsx"],"sourcesContent":["import { For, Match, Switch, createComponent, createEffect, mergeProps, onCleanup } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport marked from 'marked-completed';\nimport { customElement } from 'solid-element';\nimport '../code';\nimport '../img';\nimport mdStyle from '../md-style';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nfunction katexBlock(code: string) {\n return `<n-katex display-mode=\"true\">${code}</n-katex>`;\n}\nfunction katexInline(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}\nfunction MD(_props: MdProps) {\n let ref: HTMLDivElement | undefined;\n const renderer = new marked.Renderer();\n\n renderer.katexBlock = katexBlock;\n renderer.katexInline = katexInline;\n const { baseStyle } = theme;\n const props = mergeProps(\n {\n pictureViewer: true,\n text: '',\n tools: ['copy'],\n getAnchorContainer: () => window as unknown as HTMLElement,\n },\n _props,\n );\n\n function update(e: { data: string }) {\n if (ref) {\n ref.innerHTML = e.data;\n }\n }\n function postMessage(opt: {\n text: string;\n pictureViewer?: boolean;\n langToolbar?: string[];\n langLineNumber?: boolean;\n }) {\n const { text, pictureViewer, langToolbar, ...options } = opt;\n\n renderer.image = pictureViewer ? nImg : img;\n const toolbar = !!langToolbar?.length;\n\n renderer.code = function (code: string, lang: string) {\n if (lang === 'treeview') {\n return `<n-tree data=\"${code}\" />`;\n }\n\n return `<n-code class=\"n-code\" toolbar=\"${toolbar}\" lang=\"${lang}\" ${\n options.langLineNumber ? 'line-number=\"true\"' : ''\n }>${encodeURIComponent(code)}</n-code>`;\n };\n\n update({\n data: marked(text, {\n renderer: renderer,\n langToolbar: langToolbar,\n headerPrefix: '# ',\n breaks: true,\n pedantic: false,\n smartLists: true,\n smartypants: true,\n xhtml: true,\n ...options,\n }),\n });\n }\n // const work = new Worker(new URL('./worker.ts', import.meta.url));\n\n // work.addEventListener('message', update);\n // work.postMessage({\n // text: props.text,\n // langLineNumber: props.lineNumber,\n // langToolbar: props.tools,\n // pictureViewer: props.pictureViewer,\n // });\n // onCleanup(() => {\n // work.terminate();\n // });\n createEffect(() => {\n postMessage({\n text: props.text,\n langLineNumber: props.lineNumber,\n langToolbar: props.tools,\n pictureViewer: props.pictureViewer,\n });\n });\n let list: HTMLAnchorElement[] = [];\n let heading: HTMLHeadingElement[] = [];\n const active: HTMLAnchorElement[] = [];\n\n function handleAnchor(e: Event) {\n e.preventDefault();\n e.stopPropagation();\n const a = e.target as HTMLAnchorElement;\n\n if (a.hash) {\n ref?.querySelector(decodeURIComponent(a.hash))?.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n });\n list.forEach((item) => item.classList.remove('active'));\n a.classList.add('active');\n } else {\n window.open(a.href);\n }\n }\n function observerEntry(entries: IntersectionObserverEntry[]) {\n entries.forEach((entry) => {\n const id = entry.target.getAttribute('id');\n const all = entry.target.querySelectorAll('a');\n let a: HTMLAnchorElement | undefined;\n\n list.forEach((l) => {\n if (l.hash === `#${id}`) {\n a = l;\n } else if (!l.hash) {\n all.forEach((e) => {\n if (e.href === l.href) {\n a = l;\n }\n });\n }\n });\n if (a) {\n const idx = active.indexOf(a);\n\n active.forEach((e) => {\n e.classList.remove('active');\n });\n if (entry.isIntersecting) {\n active.push(a);\n } else if (idx !== -1) {\n active.splice(idx, 1);\n }\n if (active[0]) {\n active[0].classList.add('active');\n active[0].offsetParent?.scrollTo({\n top: active[0].offsetTop,\n });\n }\n }\n });\n }\n createEffect(() => {\n let observer: IntersectionObserver;\n\n if (ref && props.text?.startsWith('[TOC]')) {\n list = [...ref.querySelectorAll<HTMLAnchorElement>('.n-md-toc a[href]')];\n heading = [...ref.querySelectorAll<HTMLHeadingElement>('h1, h2, h3, h4, h5, h6')];\n\n observer = new IntersectionObserver(observerEntry, {\n rootMargin: '-50px 0px',\n threshold: 0.5,\n });\n\n heading.forEach((e) => observer.observe(e));\n list.forEach((e) => {\n e.addEventListener('click', handleAnchor);\n });\n }\n onCleanup(() => {\n if (observer) {\n heading.forEach((e) => observer.unobserve(e));\n observer.disconnect();\n }\n list.forEach((e) => {\n e.removeEventListener('click', handleAnchor);\n });\n });\n });\n\n return (\n <>\n <style>\n {baseStyle()}\n {mdStyle}\n {css(props.css)}\n </style>\n <Switch>\n <Match when={(props.children as [])?.length}>\n <article class=\"n-md-box\" part=\"box\">\n <div class=\"n-md-body\" part=\"body\">\n <For each={props.children as []}>{(e) => <>{e}</>}</For>\n </div>\n </article>\n </Match>\n <Match when={props.text}>\n <article ref={ref} class={cx('n-md-box', props.class)} part=\"box\" />\n </Match>\n </Switch>\n </>\n );\n}\n\nexport interface MdProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** md内容 */\n text?: string;\n /** 开启图片查看器\n * @since 2.0.8\n * @default true\n */\n pictureViewer?: boolean;\n /** 显示代码块行号\n * @default true\n */\n lineNumber?: boolean;\n /** 开启代码块工具条\n * @default ['copy']\n */\n tools?: 'copy'[];\n /** 指定滚动的容器\n * @default () => window\n */\n getAnchorContainer?: () => HTMLElement;\n /** 不进行解析\n * @default false\n */\n notRender?: boolean;\n children?: JSX.Element;\n}\n\nexport type MdElement = CustomElement<MdProps>;\n\ncustomElement<MdProps>(\n 'n-md',\n {\n class: void 0,\n pictureViewer: void 0,\n lineNumber: true,\n text: void 0,\n tools: void 0,\n getAnchorContainer: void 0,\n css: void 0,\n children: void 0,\n notRender: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n text: (!_.notRender && el.textContent) || el.text,\n css: el.css,\n tools: el.tools,\n getAnchorContainer: el.getAnchorContainer,\n },\n _,\n );\n\n createEffect(() => {\n el.removeAttribute('css');\n el.replaceChildren();\n });\n return createComponent(MD, props);\n },\n);\nexport default MD;\n"],"names":["For","Match","Switch","createComponent","createEffect","mergeProps","onCleanup","css","cx","marked","customElement","mdStyle","theme","katexBlock","code","katexInline","img","src","title","alt","nImg","MD","_props","ref","renderer","Renderer","baseStyle","props","pictureViewer","text","tools","getAnchorContainer","window","postMessage","opt","e","langToolbar","options","image","toolbar","length","lang","langLineNumber","encodeURIComponent","data","headerPrefix","breaks","pedantic","smartLists","smartypants","xhtml","innerHTML","lineNumber","list","heading","active","handleAnchor","preventDefault","stopPropagation","a","target","hash","querySelector","decodeURIComponent","scrollIntoView","behavior","block","forEach","item","classList","remove","add","open","href","observerEntry","entries","entry","id","getAttribute","all","querySelectorAll","l","idx","indexOf","isIntersecting","push","splice","offsetParent","scrollTo","top","offsetTop","observer","startsWith","IntersectionObserver","rootMargin","threshold","observe","addEventListener","unobserve","disconnect","removeEventListener","children","class","notRender","_","el","element","textContent","removeAttribute","replaceChildren"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../components/md/index.tsx"],"sourcesContent":["import { For, Match, Switch, createComponent, createEffect, mergeProps, onCleanup } from 'solid-js';\nimport { frameCallback } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport marked from 'marked-completed';\nimport { customElement } from 'solid-element';\nimport '../code';\nimport '../img';\nimport mdStyle from '../md-style';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nfunction katexBlock(code: string) {\n return `<n-katex display-mode=\"true\">${code}</n-katex>`;\n}\nfunction katexInline(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}\nfunction MD(_props: MdProps) {\n let ref: HTMLDivElement | undefined;\n const renderer = new marked.Renderer();\n\n renderer.katexBlock = katexBlock;\n renderer.katexInline = katexInline;\n const { baseStyle } = theme;\n const props = mergeProps(\n {\n pictureViewer: true,\n text: '',\n tools: ['copy'],\n getAnchorContainer: () => window as unknown as HTMLElement,\n },\n _props,\n );\n\n function update(e: { data: string }) {\n if (ref) {\n ref.innerHTML = e.data;\n }\n }\n function postMessage(opt: {\n text: string;\n pictureViewer?: boolean;\n langToolbar?: string[];\n langLineNumber?: boolean;\n }) {\n const { text, pictureViewer, langToolbar, ...options } = opt;\n\n renderer.image = pictureViewer ? nImg : img;\n const toolbar = !!langToolbar?.length;\n\n renderer.code = function (code: string, lang: string) {\n if (lang === 'treeview') {\n return `<n-tree data=\"${code}\" />`;\n }\n\n return `<n-code class=\"n-code\" toolbar=\"${toolbar}\" lang=\"${lang}\" ${\n options.langLineNumber ? 'line-number=\"true\"' : ''\n }>${encodeURIComponent(code)}</n-code>`;\n };\n\n update({\n data: marked(text, {\n renderer: renderer,\n langToolbar: langToolbar,\n headerPrefix: '# ',\n breaks: true,\n pedantic: false,\n smartLists: true,\n smartypants: true,\n xhtml: true,\n ...options,\n }),\n });\n }\n // const work = new Worker(new URL('./worker.ts', import.meta.url));\n\n // work.addEventListener('message', update);\n // work.postMessage({\n // text: props.text,\n // langLineNumber: props.lineNumber,\n // langToolbar: props.tools,\n // pictureViewer: props.pictureViewer,\n // });\n // onCleanup(() => {\n // work.terminate();\n // });\n createEffect(() => {\n const call = () =>\n postMessage({\n text: props.text,\n langLineNumber: props.lineNumber,\n langToolbar: props.tools,\n pictureViewer: props.pictureViewer,\n });\n\n frameCallback(call);\n });\n let list: HTMLAnchorElement[] = [];\n let heading: HTMLHeadingElement[] = [];\n const active: HTMLAnchorElement[] = [];\n\n function handleAnchor(e: Event) {\n e.preventDefault();\n e.stopPropagation();\n const a = e.target as HTMLAnchorElement;\n\n if (a.hash) {\n ref?.querySelector(decodeURIComponent(a.hash))?.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n });\n list.forEach((item) => item.classList.remove('active'));\n a.classList.add('active');\n } else {\n window.open(a.href);\n }\n }\n function observerEntry(entries: IntersectionObserverEntry[]) {\n entries.forEach((entry) => {\n const id = entry.target.getAttribute('id');\n const all = entry.target.querySelectorAll('a');\n let a: HTMLAnchorElement | undefined;\n\n list.forEach((l) => {\n if (l.hash === `#${id}`) {\n a = l;\n } else if (!l.hash) {\n all.forEach((e) => {\n if (e.href === l.href) {\n a = l;\n }\n });\n }\n });\n if (a) {\n const idx = active.indexOf(a);\n\n active.forEach((e) => {\n e.classList.remove('active');\n });\n if (entry.isIntersecting) {\n active.push(a);\n } else if (idx !== -1) {\n active.splice(idx, 1);\n }\n if (active[0]) {\n active[0].classList.add('active');\n active[0].offsetParent?.scrollTo({\n top: active[0].offsetTop,\n });\n }\n }\n });\n }\n createEffect(() => {\n let observer: IntersectionObserver;\n\n if (ref && props.text?.startsWith('[TOC]')) {\n list = [...ref.querySelectorAll<HTMLAnchorElement>('.n-md-toc a[href]')];\n heading = [...ref.querySelectorAll<HTMLHeadingElement>('h1, h2, h3, h4, h5, h6')];\n\n observer = new IntersectionObserver(observerEntry, {\n rootMargin: '-50px 0px',\n threshold: 0.5,\n });\n\n heading.forEach((e) => observer.observe(e));\n list.forEach((e) => {\n e.addEventListener('click', handleAnchor);\n });\n }\n onCleanup(() => {\n if (observer) {\n heading.forEach((e) => observer.unobserve(e));\n observer.disconnect();\n }\n list.forEach((e) => {\n e.removeEventListener('click', handleAnchor);\n });\n });\n });\n\n return (\n <>\n <style>\n {baseStyle()}\n {mdStyle}\n {css(props.css)}\n </style>\n <Switch>\n <Match when={(props.children as [])?.length}>\n <article class=\"n-md-box\" part=\"box\">\n <div class=\"n-md-body\" part=\"body\">\n <For each={props.children as []}>{(e) => e}</For>\n </div>\n </article>\n </Match>\n <Match when={props.text}>\n <article ref={ref} class={cx('n-md-box', props.class)} part=\"box\" />\n </Match>\n </Switch>\n </>\n );\n}\n\nexport interface MdProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** md内容 */\n text?: string;\n /** 开启图片查看器\n * @since 2.0.8\n * @default true\n */\n pictureViewer?: boolean;\n /** 显示代码块行号\n * @default true\n */\n lineNumber?: boolean;\n /** 开启代码块工具条\n * @default ['copy']\n */\n tools?: 'copy'[];\n /** 指定滚动的容器\n * @default () => window\n */\n getAnchorContainer?: () => HTMLElement;\n /** 不进行解析\n * @default false\n */\n notRender?: boolean;\n children?: JSX.Element;\n}\n\nexport type MdElement = CustomElement<MdProps>;\n\ncustomElement<MdProps>(\n 'n-md',\n {\n class: void 0,\n pictureViewer: void 0,\n lineNumber: true,\n text: void 0,\n tools: void 0,\n getAnchorContainer: void 0,\n css: void 0,\n children: void 0,\n notRender: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n text: (!_.notRender && el.textContent) || el.text,\n css: el.css,\n tools: el.tools,\n getAnchorContainer: el.getAnchorContainer,\n },\n _,\n );\n\n createEffect(() => {\n el.removeAttribute('css');\n el.replaceChildren();\n });\n return createComponent(MD, props);\n },\n);\nexport default MD;\n"],"names":["For","Match","Switch","createComponent","createEffect","mergeProps","onCleanup","frameCallback","css","cx","marked","customElement","mdStyle","theme","katexBlock","code","katexInline","img","src","title","alt","nImg","MD","_props","ref","renderer","Renderer","baseStyle","props","pictureViewer","text","tools","getAnchorContainer","window","postMessage","opt","e","langToolbar","options","image","toolbar","length","lang","langLineNumber","encodeURIComponent","data","headerPrefix","breaks","pedantic","smartLists","smartypants","xhtml","innerHTML","lineNumber","list","heading","active","handleAnchor","preventDefault","stopPropagation","a","target","hash","querySelector","decodeURIComponent","scrollIntoView","behavior","block","forEach","item","classList","remove","add","open","href","observerEntry","entries","entry","id","getAttribute","all","querySelectorAll","l","idx","indexOf","isIntersecting","push","splice","offsetParent","scrollTo","top","offsetTop","observer","startsWith","IntersectionObserver","rootMargin","threshold","observe","addEventListener","unobserve","disconnect","removeEventListener","children","class","notRender","_","el","element","textContent","removeAttribute","replaceChildren"],"rangeMappings":"","mappings":"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"}
|
package/es/md/worker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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":"+MAAAA,KAAKC,aAAa,CAAC,IAAIC,IAAI,iCAAkC,YAAYC,GAAG,EAAEC,QAAQ,IAEtF,MAAMC,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,uIAAYL,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"}
|
|
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"],"rangeMappings":"","mappings":"+MAAAA,KAAKC,aAAa,CAAC,IAAIC,IAAI,iCAAkC,YAAYC,GAAG,EAAEC,QAAQ,IAEtF,MAAMC,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,uIAAYL,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/md-style/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/md-style/index.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nconst mdStyle = 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(10px);\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 border-radius: var(--border-radius);\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 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 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]:has(img, n-img)::before {\n content: none !important;\n }\n\n a[href]:not(.site-pagination-link)::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: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\nexport default mdStyle;\n"],"names":["css","mdStyle"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,CAElC,IAAMC,EAAUD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAojBpB,CAAC,AAED,gBAAeC,CAAQ"}
|
|
1
|
+
{"version":3,"sources":["../../components/md-style/index.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nconst mdStyle = 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(10px);\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 border-radius: var(--border-radius);\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 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 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]:has(img, n-img)::before {\n content: none !important;\n }\n\n a[href]:not(.site-pagination-link)::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: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\nexport default mdStyle;\n"],"names":["css","mdStyle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,CAElC,IAAMC,EAAUD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAojBpB,CAAC,AAED,gBAAeC,CAAQ"}
|
package/es/menu/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/menu/index.tsx"],"sourcesContent":["import {\n For,\n Match,\n Show,\n Switch,\n createComponent,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n splitProps,\n untrack,\n} from 'solid-js';\nimport { frameCallback, isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport { FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\n\nfunction Menu(props: MenuProps | MenuMultipleProps) {\n let ref: HTMLDivElement | undefined;\n const { isDark, baseStyle } = theme;\n const [local, other] = splitProps(props, [\n 'class',\n 'css',\n 'items',\n 'fieldNames',\n 'value',\n 'disabled',\n 'toggle',\n 'multiple',\n 'onChange',\n 'onOpenChange',\n 'openKeys',\n ]);\n const [value, setValue] = createSignal<(string | number)[]>([]);\n const [openKeys, setOpenKeys] = createSignal<(string | number)[]>([]);\n const cssVar = createMemo(\n () => `:host {--sub-menu-bg: ${isDark() ? 'rgb(255 255 255 / 1%)' : 'rgb(0 0 0 / 1%)'} ;}`,\n );\n const fieldNames = createMemo(() => Object.assign({}, FieldName, local.fieldNames));\n const options = createMemo(() => getOptions(local.items, fieldNames()));\n\n function preventDefault(e: MouseEvent) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n function change(item: MenuOption, e: MouseEvent) {\n e.preventDefault();\n if (!item.disabled && !local.disabled) {\n let _value = [...value()];\n const key = item[fieldNames().value]!;\n\n if (local.multiple) {\n const idx = _value.indexOf(key);\n\n if (idx === -1) {\n _value.push(key);\n } else {\n _value.splice(idx, 1);\n }\n } else if (local.toggle && _value[0] === key) {\n _value = [];\n } else {\n _value = [key];\n }\n if (isFunction(local.onChange)) {\n local.onChange((local.multiple ? _value : _value[0]) as never, item);\n }\n if (typeof local.value === 'undefined') {\n setValue(_value);\n }\n }\n }\n\n interface RenderMenuProps {\n list: MenuOption[];\n fieldNames: { [key in keyof typeof FieldName]: string };\n }\n function RenderMenu(_: RenderMenuProps) {\n return (\n <For each={_.list}>\n {(item) => {\n function RowTitle() {\n return (\n <>\n <Show when={item[_.fieldNames.icon]}>\n <span class=\"menu-icon\" part=\"icon\">\n {item[_.fieldNames.icon]}\n </span>\n </Show>\n {item[_.fieldNames.label]}\n <span class=\"menu-suffix\" part=\"suffix\">\n {item[_.fieldNames.suffix]}\n </span>\n </>\n );\n }\n\n function SubMenu() {\n const isOpen = createMemo(() => openKeys().includes(item[_.fieldNames.value]!));\n const [show, setShow] = createSignal<boolean>(untrack(isOpen));\n\n createEffect(() => {\n if (isOpen()) {\n setShow(true);\n }\n });\n function handleOpen(e: MouseEvent) {\n preventDefault(e);\n let _openKeys = openKeys();\n\n if (_openKeys.includes(item[_.fieldNames.value]!)) {\n _openKeys = _openKeys.filter((v) => v !== item[_.fieldNames.value]);\n } else {\n _openKeys = _openKeys.concat(item[_.fieldNames.value]!);\n }\n\n if (isFunction(local.onOpenChange)) {\n local.onOpenChange(_openKeys);\n }\n if (local.openKeys === void 0) {\n setOpenKeys(_openKeys);\n }\n }\n function Child() {\n let el: HTMLDivElement | undefined;\n const [hei, setHei] = createSignal();\n\n createEffect(() => {\n setHei(el?.offsetHeight || 0);\n });\n function onAnimationEnd() {\n if (!isOpen()) {\n setShow(false);\n }\n }\n return (\n <div\n class=\"sub-menu-children\"\n part=\"sub-menu-children\"\n style={{\n '--h': `${hei()}px`,\n }}\n onAnimationEnd={onAnimationEnd}\n >\n <div ref={el}>\n <RenderMenu fieldNames={_.fieldNames} list={item[_.fieldNames.children]!} />\n </div>\n </div>\n );\n }\n\n return (\n <div\n class={cx('sub-menu', item.class, `sub-menu-${isOpen() ? 'open' : 'close'}`)}\n part=\"sub-menu\"\n onMouseDown={preventDefault}\n >\n <span class=\"sub-menu-title\" onClick={handleOpen}>\n <RowTitle />\n <span class=\"menu-arrow\" />\n </span>\n <Show when={show()}>\n <Child />\n </Show>\n </div>\n );\n }\n return (\n <Switch\n fallback={\n <div\n class={cx('menu-item', item.class, item.type)}\n part=\"item\"\n handle-closed={item.handleClosed}\n aria-disabled={local.disabled || item.disabled}\n aria-selected={value().includes(item[_.fieldNames.value]!)}\n onMouseDown={preventDefault}\n onClick={change.bind(null, item)}\n >\n <RowTitle />\n </div>\n }\n >\n <Match when={Array.isArray(item[_.fieldNames.children])}>\n <SubMenu />\n </Match>\n <Match when={Array.isArray(item[_.fieldNames.options])}>\n <div class={cx('menu-group', item.class)} onMouseDown={preventDefault}>\n <span class=\"menu-group-title\">\n <RowTitle />\n </span>\n <RenderMenu fieldNames={_.fieldNames} list={item[_.fieldNames.options]!} />\n </div>\n </Match>\n </Switch>\n );\n }}\n </For>\n );\n }\n\n createEffect(() => {\n if (local.value !== void 0 && local.value !== null) {\n setValue(Array.isArray(local.value) ? local.value : [local.value]);\n } else {\n setValue([]);\n }\n });\n createEffect(() => {\n if (Array.isArray(local.openKeys)) {\n setOpenKeys(local.openKeys);\n }\n });\n\n createEffect(() => {\n if (value()?.length) {\n frameCallback(() => {\n const el = ref?.querySelector<HTMLElement>('[aria-selected=true]');\n\n if (el && ref) {\n const next = el.offsetTop - ref.offsetTop;\n\n if (next < ref.scrollTop) {\n ref.scrollTo({\n top: next,\n behavior: 'smooth',\n });\n } else if (\n el.offsetTop + el.offsetHeight >\n ref.scrollTop + ref.offsetHeight + ref.offsetTop\n ) {\n ref.scrollTo({\n top: next - ref.offsetHeight + el.offsetHeight,\n behavior: 'smooth',\n });\n }\n }\n });\n }\n });\n return (\n <>\n <style>\n {baseStyle()}\n {style}\n {cssVar()}\n {css(local.css)}\n </style>\n <section ref={ref} class=\"menu\" part=\"menu\" {...other}>\n <RenderMenu fieldNames={fieldNames()} list={options()} />\n </section>\n </>\n );\n}\n\nexport interface BaseMenuProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 菜单展开的keys */\n openKeys?: (string | number)[];\n /** 菜单展开时触发的方法 */\n onOpenChange?: (keys: (string | number)[]) => void;\n /** 选项数据 */\n items?: (string | MenuOption)[];\n /** 自定义节点 'label'、'value'、'options' 的字段 */\n fieldNames?: BasicConfig['fieldName'];\n /** 不可用状态 */\n disabled?: boolean;\n /** 可以取消 */\n toggle?: boolean;\n}\n\nexport interface MenuProps extends BaseMenuProps {\n /** 值修改时的回调方法 */\n onChange?(val: string | number, item: MenuOption): void;\n /** 值 */\n value?: string | number;\n /** 默认值 */\n defaultValue?: string | number;\n /** 可多选\n * @default false\n */\n multiple?: false | never;\n}\n\nexport interface MenuMultipleProps extends BaseMenuProps {\n /** 可多选\n * @default true\n */\n multiple: true;\n /** 值修改时的回调方法 */\n onChange?(val: (string | number)[], item: MenuOption): void;\n /** 值 */\n value?: (string | number)[];\n /** 默认值 */\n defaultValue?: (string | number)[];\n}\n\n/** 菜单选项 */\nexport interface MenuOption extends Omit<BaseOption, 'children' | 'options'> {\n /** 图标 */\n icon?: JSX.Element;\n /** 内置类型(状态) */\n type?: 'primary' | 'success' | 'error' | 'warning';\n /** 自定义颜色 */\n color?: string;\n /** 子菜单 */\n children?: (string | MenuOption)[];\n /** 分组子选项 */\n options?: (string | MenuOption)[];\n}\n\nexport type MenuElement = CustomElement<MenuProps, 'onChange' | 'onOpenChange'>;\nexport type MenuMultipleElement = CustomElement<MenuMultipleProps, 'onChange' | 'onOpenChange'>;\n\ncustomElement<MenuProps>(\n 'n-menu',\n {\n class: void 0,\n css: void 0,\n disabled: void 0,\n value: void 0,\n defaultValue: void 0,\n onOpenChange: void 0,\n openKeys: void 0,\n fieldNames: void 0,\n multiple: void 0,\n toggle: void 0,\n onChange: void 0,\n items: [],\n },\n (_, opt) => {\n const el = opt.element;\n const defaultProps: Partial<MenuProps> = {\n css: el.css,\n onChange(key, item) {\n el.dispatchEvent(\n new CustomEvent('change', {\n detail: [key, item],\n }),\n );\n },\n onOpenChange(keys) {\n el.dispatchEvent(\n new CustomEvent('openchange', {\n detail: keys,\n }),\n );\n },\n };\n const props = mergeProps(defaultProps, _);\n\n createEffect(() => {\n el.removeAttribute('items');\n el.removeAttribute('field-names');\n el.removeAttribute('css');\n });\n return createComponent(Menu, props);\n },\n);\n\nexport default Menu;\n"],"names":["For","Match","Show","Switch","createComponent","createEffect","createMemo","createSignal","mergeProps","splitProps","untrack","frameCallback","isFunction","css","cx","customElement","style","FieldName","getOptions","theme","Menu","props","ref","isDark","baseStyle","local","other","value","setValue","openKeys","setOpenKeys","cssVar","fieldNames","Object","assign","options","items","preventDefault","e","stopPropagation","change","item","disabled","_value","key","multiple","idx","indexOf","push","splice","toggle","onChange","RenderMenu","_","list","RowTitle","icon","label","suffix","SubMenu","isOpen","includes","show","setShow","handleOpen","_openKeys","filter","v","concat","onOpenChange","Child","el","hei","setHei","onAnimationEnd","offsetHeight","children","class","bind","type","handleClosed","Array","isArray","length","querySelector","next","offsetTop","scrollTop","scrollTo","top","behavior","defaultValue","opt","element","dispatchEvent","CustomEvent","detail","keys","removeAttribute"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../components/menu/index.tsx"],"sourcesContent":["import {\n For,\n Match,\n Show,\n Switch,\n createComponent,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n splitProps,\n untrack,\n} from 'solid-js';\nimport { frameCallback, isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport { FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\n\nfunction Menu(props: MenuProps | MenuMultipleProps) {\n let ref: HTMLDivElement | undefined;\n const { isDark, baseStyle } = theme;\n const [local, other] = splitProps(props, [\n 'class',\n 'css',\n 'items',\n 'fieldNames',\n 'value',\n 'disabled',\n 'toggle',\n 'multiple',\n 'onChange',\n 'onOpenChange',\n 'openKeys',\n ]);\n const [value, setValue] = createSignal<(string | number)[]>([]);\n const [openKeys, setOpenKeys] = createSignal<(string | number)[]>([]);\n const cssVar = createMemo(\n () => `:host {--sub-menu-bg: ${isDark() ? 'rgb(255 255 255 / 1%)' : 'rgb(0 0 0 / 1%)'} ;}`,\n );\n const fieldNames = createMemo(() => Object.assign({}, FieldName, local.fieldNames));\n const options = createMemo(() => getOptions(local.items, fieldNames()));\n\n function preventDefault(e: MouseEvent) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n function change(item: MenuOption, e: MouseEvent) {\n e.preventDefault();\n if (!item.disabled && !local.disabled) {\n let _value = [...value()];\n const key = item[fieldNames().value]!;\n\n if (local.multiple) {\n const idx = _value.indexOf(key);\n\n if (idx === -1) {\n _value.push(key);\n } else {\n _value.splice(idx, 1);\n }\n } else if (local.toggle && _value[0] === key) {\n _value = [];\n } else {\n _value = [key];\n }\n if (isFunction(local.onChange)) {\n local.onChange((local.multiple ? _value : _value[0]) as never, item);\n }\n if (typeof local.value === 'undefined') {\n setValue(_value);\n }\n }\n }\n\n interface RenderMenuProps {\n list: MenuOption[];\n fieldNames: { [key in keyof typeof FieldName]: string };\n }\n function RenderMenu(_: RenderMenuProps) {\n return (\n <For each={_.list}>\n {(item) => {\n function RowTitle() {\n return (\n <>\n <Show when={item[_.fieldNames.icon]}>\n <span class=\"menu-icon\" part=\"icon\">\n {item[_.fieldNames.icon]}\n </span>\n </Show>\n {item[_.fieldNames.label]}\n <span class=\"menu-suffix\" part=\"suffix\">\n {item[_.fieldNames.suffix]}\n </span>\n </>\n );\n }\n\n function SubMenu() {\n const isOpen = createMemo(() => openKeys().includes(item[_.fieldNames.value]!));\n const [show, setShow] = createSignal<boolean>(untrack(isOpen));\n\n createEffect(() => {\n if (isOpen()) {\n setShow(true);\n }\n });\n function handleOpen(e: MouseEvent) {\n preventDefault(e);\n let _openKeys = openKeys();\n\n if (_openKeys.includes(item[_.fieldNames.value]!)) {\n _openKeys = _openKeys.filter((v) => v !== item[_.fieldNames.value]);\n } else {\n _openKeys = _openKeys.concat(item[_.fieldNames.value]!);\n }\n\n if (isFunction(local.onOpenChange)) {\n local.onOpenChange(_openKeys);\n }\n if (local.openKeys === void 0) {\n setOpenKeys(_openKeys);\n }\n }\n function Child() {\n let el: HTMLDivElement | undefined;\n const [hei, setHei] = createSignal();\n\n createEffect(() => {\n setHei(el?.offsetHeight || 0);\n });\n function onAnimationEnd() {\n if (!isOpen()) {\n setShow(false);\n }\n }\n return (\n <div\n class=\"sub-menu-children\"\n part=\"sub-menu-children\"\n style={{\n '--h': `${hei()}px`,\n }}\n onAnimationEnd={onAnimationEnd}\n >\n <div ref={el}>\n <RenderMenu fieldNames={_.fieldNames} list={item[_.fieldNames.children]!} />\n </div>\n </div>\n );\n }\n\n return (\n <div\n class={cx('sub-menu', item.class, `sub-menu-${isOpen() ? 'open' : 'close'}`)}\n part=\"sub-menu\"\n onMouseDown={preventDefault}\n >\n <span class=\"sub-menu-title\" onClick={handleOpen}>\n <RowTitle />\n <span class=\"menu-arrow\" />\n </span>\n <Show when={show()}>\n <Child />\n </Show>\n </div>\n );\n }\n return (\n <Switch\n fallback={\n <div\n class={cx('menu-item', item.class, item.type)}\n part=\"item\"\n handle-closed={item.handleClosed}\n aria-disabled={local.disabled || item.disabled}\n aria-selected={value().includes(item[_.fieldNames.value]!)}\n onMouseDown={preventDefault}\n onClick={change.bind(null, item)}\n >\n <RowTitle />\n </div>\n }\n >\n <Match when={Array.isArray(item[_.fieldNames.children])}>\n <SubMenu />\n </Match>\n <Match when={Array.isArray(item[_.fieldNames.options])}>\n <div class={cx('menu-group', item.class)} onMouseDown={preventDefault}>\n <span class=\"menu-group-title\">\n <RowTitle />\n </span>\n <RenderMenu fieldNames={_.fieldNames} list={item[_.fieldNames.options]!} />\n </div>\n </Match>\n </Switch>\n );\n }}\n </For>\n );\n }\n\n createEffect(() => {\n if (local.value !== void 0 && local.value !== null) {\n setValue(Array.isArray(local.value) ? local.value : [local.value]);\n } else {\n setValue([]);\n }\n });\n createEffect(() => {\n if (Array.isArray(local.openKeys)) {\n setOpenKeys(local.openKeys);\n }\n });\n\n createEffect(() => {\n if (value()?.length) {\n frameCallback(() => {\n const el = ref?.querySelector<HTMLElement>('[aria-selected=true]');\n\n if (el && ref) {\n const next = el.offsetTop - ref.offsetTop;\n\n if (next < ref.scrollTop) {\n ref.scrollTo({\n top: next,\n behavior: 'smooth',\n });\n } else if (\n el.offsetTop + el.offsetHeight >\n ref.scrollTop + ref.offsetHeight + ref.offsetTop\n ) {\n ref.scrollTo({\n top: next - ref.offsetHeight + el.offsetHeight,\n behavior: 'smooth',\n });\n }\n }\n });\n }\n });\n return (\n <>\n <style>\n {baseStyle()}\n {style}\n {cssVar()}\n {css(local.css)}\n </style>\n <section ref={ref} class=\"menu\" part=\"menu\" {...other}>\n <RenderMenu fieldNames={fieldNames()} list={options()} />\n </section>\n </>\n );\n}\n\nexport interface BaseMenuProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 菜单展开的keys */\n openKeys?: (string | number)[];\n /** 菜单展开时触发的方法 */\n onOpenChange?: (keys: (string | number)[]) => void;\n /** 选项数据 */\n items?: (string | MenuOption)[];\n /** 自定义节点 'label'、'value'、'options' 的字段 */\n fieldNames?: BasicConfig['fieldName'];\n /** 不可用状态 */\n disabled?: boolean;\n /** 可以取消 */\n toggle?: boolean;\n}\n\nexport interface MenuProps extends BaseMenuProps {\n /** 值修改时的回调方法 */\n onChange?(val: string | number, item: MenuOption): void;\n /** 值 */\n value?: string | number;\n /** 默认值 */\n defaultValue?: string | number;\n /** 可多选\n * @default false\n */\n multiple?: false | never;\n}\n\nexport interface MenuMultipleProps extends BaseMenuProps {\n /** 可多选\n * @default true\n */\n multiple: true;\n /** 值修改时的回调方法 */\n onChange?(val: (string | number)[], item: MenuOption): void;\n /** 值 */\n value?: (string | number)[];\n /** 默认值 */\n defaultValue?: (string | number)[];\n}\n\n/** 菜单选项 */\nexport interface MenuOption extends Omit<BaseOption, 'children' | 'options'> {\n /** 图标 */\n icon?: JSX.Element;\n /** 内置类型(状态) */\n type?: 'primary' | 'success' | 'error' | 'warning';\n /** 自定义颜色 */\n color?: string;\n /** 子菜单 */\n children?: (string | MenuOption)[];\n /** 分组子选项 */\n options?: (string | MenuOption)[];\n}\n\nexport type MenuElement = CustomElement<MenuProps, 'onChange' | 'onOpenChange'>;\nexport type MenuMultipleElement = CustomElement<MenuMultipleProps, 'onChange' | 'onOpenChange'>;\n\ncustomElement<MenuProps>(\n 'n-menu',\n {\n class: void 0,\n css: void 0,\n disabled: void 0,\n value: void 0,\n defaultValue: void 0,\n onOpenChange: void 0,\n openKeys: void 0,\n fieldNames: void 0,\n multiple: void 0,\n toggle: void 0,\n onChange: void 0,\n items: [],\n },\n (_, opt) => {\n const el = opt.element;\n const defaultProps: Partial<MenuProps> = {\n css: el.css,\n onChange(key, item) {\n el.dispatchEvent(\n new CustomEvent('change', {\n detail: [key, item],\n }),\n );\n },\n onOpenChange(keys) {\n el.dispatchEvent(\n new CustomEvent('openchange', {\n detail: keys,\n }),\n );\n },\n };\n const props = mergeProps(defaultProps, _);\n\n createEffect(() => {\n el.removeAttribute('items');\n el.removeAttribute('field-names');\n el.removeAttribute('css');\n });\n return createComponent(Menu, props);\n },\n);\n\nexport default Menu;\n"],"names":["For","Match","Show","Switch","createComponent","createEffect","createMemo","createSignal","mergeProps","splitProps","untrack","frameCallback","isFunction","css","cx","customElement","style","FieldName","getOptions","theme","Menu","props","ref","isDark","baseStyle","local","other","value","setValue","openKeys","setOpenKeys","cssVar","fieldNames","Object","assign","options","items","preventDefault","e","stopPropagation","change","item","disabled","_value","key","multiple","idx","indexOf","push","splice","toggle","onChange","RenderMenu","_","list","RowTitle","icon","label","suffix","SubMenu","isOpen","includes","show","setShow","handleOpen","_openKeys","filter","v","concat","onOpenChange","Child","el","hei","setHei","onAnimationEnd","offsetHeight","children","class","bind","type","handleClosed","Array","isArray","length","querySelector","next","offsetTop","scrollTop","scrollTo","top","behavior","defaultValue","opt","element","dispatchEvent","CustomEvent","detail","keys","removeAttribute"],"rangeMappings":"","mappings":"wzBAAA,QACEA,OAAAA,CAAG,CACHC,SAAAA,CAAK,CACLC,QAAAA,CAAI,CACJC,UAAAA,CAAM,CACNC,mBAAAA,CAAe,CACfC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,cAAAA,CAAU,CACVC,WAAAA,CAAO,KACF,UAAW,AAClB,QAASC,MAAiC,kCAAiB,AAA3D,QAAwBC,MAAkB,+BAAiB,AAC3D,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAASC,aAAAA,CAAS,KAAQ,iBAAkB,AAC5C,QAAOC,MAAgB,gBAAiB,AACxC,QAAOC,MAAW,UAAW,CAG7B,SAASC,EAAKC,CAAoC,MAC5CC,EACJ,GAAM,CAAEC,OAAAA,CAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGL,EACxB,CAACM,EAAOC,EAAM,CAAGjB,EAAWY,EAAO,CACvC,QACA,MACA,QACA,aACA,QACA,WACA,SACA,WACA,WACA,eACA,WACD,EACK,CAACM,EAAOC,EAAS,CAAGrB,EAAkC,EAAE,EACxD,CAACsB,EAAUC,EAAY,CAAGvB,EAAkC,EAAE,EAC9DwB,EAASzB,EACb,IAAM,CAAC,sBAAsB,EAAEiB,IAAW,wBAA0B,kBAAkB,GAAG,CAAC,EAEtFS,EAAa1B,EAAW,IAAM2B,OAAOC,MAAM,CAAC,CAAC,EAAGjB,EAAWQ,EAAMO,UAAU,GAC3EG,EAAU7B,EAAW,IAAMY,EAAWO,EAAMW,KAAK,CAAEJ,MAEzD,SAASK,EAAeC,CAAa,EACnCA,EAAED,cAAc,GAChBC,EAAEC,eAAe,EACnB,CAEA,SAASC,EAAOC,CAAgB,CAAEH,CAAa,EAE7C,GADAA,EAAED,cAAc,GACZ,CAACI,EAAKC,QAAQ,EAAI,CAACjB,EAAMiB,QAAQ,CAAE,CACrC,IAAIC,EAAS,IAAIhB,IAAQ,CACnBiB,EAAMH,CAAI,CAACT,IAAaL,KAAK,CAAC,CAEpC,GAAIF,EAAMoB,QAAQ,CAAE,CAClB,IAAMC,EAAMH,EAAOI,OAAO,CAACH,EAEvBE,AAAQ,CAAA,KAARA,EACFH,EAAOK,IAAI,CAACJ,GAEZD,EAAOM,MAAM,CAACH,EAAK,EAEvB,MACEH,EADSlB,EAAMyB,MAAM,EAAIP,CAAM,CAAC,EAAE,GAAKC,EAC9B,EAAE,CAEF,CAACA,EAAI,CAEZhC,EAAWa,EAAM0B,QAAQ,GAC3B1B,EAAM0B,QAAQ,CAAE1B,EAAMoB,QAAQ,CAAGF,EAASA,CAAM,CAAC,EAAE,CAAYF,GAEtC,KAAA,IAAhBhB,EAAME,KAAK,EACpBC,EAASe,EAEb,CACF,CAMA,SAASS,EAAWC,CAAkB,EACpC,SACGrD,qBAAUqD,EAAEC,IAAI,WACd,AAACb,IACA,SAASc,IACP,SAEKrD,qBAAWuC,CAAI,CAACY,EAAErB,UAAU,CAACwB,IAAI,CAAC,0CAE9Bf,CAAI,CAACY,EAAErB,UAAU,CAACwB,IAAI,CAAC,aAG3Bf,CAAI,CAACY,EAAErB,UAAU,CAACyB,KAAK,CAAC,iCAEtBhB,CAAI,CAACY,EAAErB,UAAU,CAAC0B,MAAM,CAAC,QAIlC,CAEA,SAASC,IACP,IAAMC,EAAStD,EAAW,IAAMuB,IAAWgC,QAAQ,CAACpB,CAAI,CAACY,EAAErB,UAAU,CAACL,KAAK,CAAC,GACtE,CAACmC,EAAMC,EAAQ,CAAGxD,EAAsBG,EAAQkD,IAOtD,SAASI,EAAW1B,CAAa,EAC/BD,EAAeC,GACf,IAAI2B,EAAYpC,IAGdoC,EADEA,EAAUJ,QAAQ,CAACpB,CAAI,CAACY,EAAErB,UAAU,CAACL,KAAK,CAAC,EACjCsC,EAAUC,MAAM,CAAC,AAACC,GAAMA,IAAM1B,CAAI,CAACY,EAAErB,UAAU,CAACL,KAAK,CAAC,EAEtDsC,EAAUG,MAAM,CAAC3B,CAAI,CAACY,EAAErB,UAAU,CAACL,KAAK,CAAC,EAGnDf,EAAWa,EAAM4C,YAAY,GAC/B5C,EAAM4C,YAAY,CAACJ,GAEE,KAAK,IAAxBxC,EAAMI,QAAQ,EAChBC,EAAYmC,EAEhB,CACA,SAASK,QACHC,EACJ,GAAM,CAACC,EAAKC,EAAO,CAAGlE,IAKtB,SAASmE,IACFd,KACHG,EAAQ,CAAA,EAEZ,CACA,OARA1D,EAAa,KACXoE,EAAOF,OAAAA,SAAAA,EAAII,YAAY,GAAI,EAC7B,oCAecJ,4BAFMG,+BAENH,UACPnB,2BAAuBC,EAAErB,UAAU,oBAAQS,CAAI,CAACY,EAAErB,UAAU,CAAC4C,QAAQ,CAAC,YAL7DJ,8BAAH,CAAC,EAAEA,IAAM,EAAE,CAAC,SAS3B,CAEA,OAlDAnE,EAAa,KACPuD,KACFG,EAAQ,CAAA,EAEZ,wEAkDiB1B,kBAEyB2B,YACnCT,eAGFrD,qBAAW4D,6BACTQ,yBATIxD,EAAG,WAAY2B,EAAKoC,KAAK,CAAE,CAAC,SAAS,EAAEjB,IAAW,OAAS,QAAQ,CAAC,SAajF,CACA,SACGzD,2DAScqC,EAAOsC,IAAI,CAAC,KAAMrC,uBADdJ,YAGZkB,mBARMzC,EAAG,YAAa2B,EAAKoC,KAAK,CAAEpC,EAAKsC,IAAI,IAE7BtC,EAAKuC,YAAY,GACjBvD,EAAMiB,QAAQ,EAAID,EAAKC,QAAQ,GAC/Bf,IAAQkC,QAAQ,CAACpB,CAAI,CAACY,EAAErB,UAAU,CAACL,KAAK,CAAC,mPAQ3D1B,qBAAYgF,MAAMC,OAAO,CAACzC,CAAI,CAACY,EAAErB,UAAU,CAAC4C,QAAQ,CAAC,2BACnDjB,WAEF1D,qBAAYgF,MAAMC,OAAO,CAACzC,CAAI,CAACY,EAAErB,UAAU,CAACG,OAAO,CAAC,kEACIE,YAElDkB,aAEFH,2BAAuBC,EAAErB,UAAU,oBAAQS,CAAI,CAACY,EAAErB,UAAU,CAACG,OAAO,CAAC,oBAJ5DrB,EAAG,aAAc2B,EAAKoC,KAAK,YAS/C,GAGN,CAyCA,OAvCAxE,EAAa,KACPoB,AAAgB,KAAK,IAArBA,EAAME,KAAK,EAAeF,AAAgB,OAAhBA,EAAME,KAAK,CACvCC,EAASqD,MAAMC,OAAO,CAACzD,EAAME,KAAK,EAAIF,EAAME,KAAK,CAAG,CAACF,EAAME,KAAK,CAAC,EAEjEC,EAAS,EAAE,CAEf,GACAvB,EAAa,KACP4E,MAAMC,OAAO,CAACzD,EAAMI,QAAQ,GAC9BC,EAAYL,EAAMI,QAAQ,CAE9B,GAEAxB,EAAa,SACPsB,UAAAA,EAAAA,YAAAA,EAASwD,MAAM,GACjBxE,EAAc,KACZ,IAAM4D,QAAKjD,SAAAA,EAAK8D,aAAa,CAAc,wBAE3C,GAAIb,GAAMjD,EAAK,CACb,IAAM+D,EAAOd,EAAGe,SAAS,CAAGhE,EAAIgE,SAAS,AAErCD,CAAAA,EAAO/D,EAAIiE,SAAS,CACtBjE,EAAIkE,QAAQ,CAAC,CACXC,IAAKJ,EACLK,SAAU,QACZ,GAEAnB,EAAGe,SAAS,CAAGf,EAAGI,YAAY,CAC9BrD,EAAIiE,SAAS,CAAGjE,EAAIqD,YAAY,CAAGrD,EAAIgE,SAAS,EAEhDhE,EAAIkE,QAAQ,CAAC,CACXC,IAAKJ,EAAO/D,EAAIqD,YAAY,CAAGJ,EAAGI,YAAY,CAC9Ce,SAAU,QACZ,EAEJ,CACF,EAEJ,+BAIOlE,YACAR,YACAe,gBACAlB,EAAIY,EAAMZ,GAAG,gCAEFS,oCAAAA,QAAkCI,eAC7C0B,2BAAuBpB,uBAAoBG,cAIpD,CAgEApB,EACE,SACA,CACE8D,MAAO,KAAK,EACZhE,IAAK,KAAK,EACV6B,SAAU,KAAK,EACff,MAAO,KAAK,EACZgE,aAAc,KAAK,EACnBtB,aAAc,KAAK,EACnBxC,SAAU,KAAK,EACfG,WAAY,KAAK,EACjBa,SAAU,KAAK,EACfK,OAAQ,KAAK,EACbC,SAAU,KAAK,EACff,MAAO,EAAE,AACX,EACA,CAACiB,EAAGuC,KACF,IAAMrB,EAAKqB,EAAIC,OAAO,CAkBhBxE,EAAQb,EAjB2B,CACvCK,IAAK0D,EAAG1D,GAAG,CACXsC,SAASP,CAAG,CAAEH,CAAI,EAChB8B,EAAGuB,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQ,CAACpD,EAAKH,EAAK,AACrB,GAEJ,EACA4B,aAAa4B,CAAI,EACf1B,EAAGuB,aAAa,CACd,IAAIC,YAAY,aAAc,CAC5BC,OAAQC,CACV,GAEJ,CACF,EACuC5C,GAOvC,OALAhD,EAAa,KACXkE,EAAG2B,eAAe,CAAC,SACnB3B,EAAG2B,eAAe,CAAC,eACnB3B,EAAG2B,eAAe,CAAC,MACrB,GACO9F,EAAgBgB,EAAMC,EAC/B,EAGF,gBAAeD,CAAK"}
|
package/es/menu/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/menu/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .menu {\n --menu-selection: var(--primary-selection);\n\n max-block-size: 100%;\n display: block;\n overflow-y: auto;\n color: var(--text-color);\n\n ${['primary', 'success', 'error', 'warning']\n .map(\n (s) =>\n `.${s} {--text-color: var(--${s}-color);--text-heading: var(--${s}-color);--text-secondary: var(--${s}-secondary);--component-bg: var(--${s}-details-bg);--menu-selection: var(--${s}-selection);}`,\n )\n .join('')}\n }\n\n .menu-item,\n .menu-group,\n .sub-menu {\n border-radius: calc(var(--border-radius) / 1.5);\n transition:\n 0.3s background-color var(--transition-timing-function),\n 0.3s color var(--transition-timing-function);\n box-sizing: border-box;\n line-height: 1.57;\n }\n\n .menu-icon {\n font-size: var(--font-size);\n }\n\n .menu-group {\n position: relative;\n }\n\n .menu-group-title {\n position: sticky;\n z-index: 1;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 5px;\n font-size: 12px;\n color: var(--text-secondary);\n inset-block-start: -2px;\n column-gap: 5px;\n }\n\n .menu-suffix {\n text-align: end;\n color: var(--text-secondary);\n flex: 1;\n }\n\n .sub-menu-title {\n display: flex;\n align-items: center;\n border-radius: calc(var(--border-radius) / 1.5);\n padding: 5px 12px;\n column-gap: 5px;\n transition: box-shadow var(--transition-duration) var(--transition-timing-function);\n\n &:hover:not(&[aria-disabled]:not([aria-disabled='false'])) {\n &:not([aria-selected='true'], .error) {\n background-color: var(--disable-bg);\n }\n }\n\n > .menu-arrow {\n position: relative;\n display: block;\n inline-size: 12px;\n block-size: 1.5px;\n pointer-events: none;\n color: var(--text-color);\n opacity: 0.5;\n margin-inline-start: 5px;\n\n &::after,\n &::before {\n position: absolute;\n border-radius: 2px;\n background-color: currentcolor;\n transition:\n transform var(--transition-duration) var(--transition-timing-function),\n color var(--transition-duration) var(--transition-timing-function);\n inline-size: 6px;\n block-size: 1.5px;\n content: '';\n }\n }\n }\n\n .sub-menu {\n cursor: pointer;\n\n &:has([aria-selected='true']) > span {\n color: var(--text-heading);\n }\n }\n\n .sub-menu-children {\n border-radius: calc(var(--border-radius) / 1.5);\n background-color: var(--sub-menu-bg);\n transform-origin: top;\n\n > div {\n padding: 5px 12px;\n }\n }\n\n .sub-menu-open {\n > .sub-menu-children {\n animation: menu-open var(--transition-duration) var(--transition-timing-function) forwards;\n }\n\n > span.sub-menu-title {\n box-shadow: 0 10px 5px 0 rgb(0 0 0 / 1%);\n\n > .menu-arrow {\n &::after {\n transform: rotate(-45deg) translate3d(-1.5px, -1px, 1px);\n }\n\n &::before {\n transform: rotate(45deg) translate3d(1.5px, -1px, 1px);\n }\n }\n }\n }\n\n .sub-menu-close {\n > .sub-menu-children {\n animation: menu-close var(--transition-duration) var(--transition-timing-function) forwards;\n }\n\n > span.sub-menu-title {\n box-shadow: 0 0 0 0 rgb(0 0 0 / 0%);\n\n > .menu-arrow {\n &::after {\n transform: rotate(45deg) translate3d(-1px, 2px, 1px);\n }\n\n &::before {\n transform: rotate(-45deg) translate3d(1px, 2px, 1px);\n }\n }\n }\n }\n\n .menu-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 5px 12px;\n cursor: pointer;\n column-gap: 5px;\n color: var(--text-color);\n\n &:hover:not(&[aria-disabled]:not([aria-disabled='false'])) {\n &:not([aria-selected='true']) {\n color: var(--text-heading);\n background-color: var(--disable-bg);\n }\n }\n\n &[aria-disabled]:not([aria-disabled='false']) {\n cursor: not-allowed;\n color: var(--disable-color);\n }\n\n &[aria-selected='true'] {\n color: var(--text-heading);\n background-color: var(--menu-selection);\n\n & + & {\n border-start-end-radius: 0;\n border-start-start-radius: 0;\n }\n\n &:has(+ &[aria-selected='true']) {\n border-end-end-radius: 0;\n border-end-start-radius: 0;\n }\n }\n }\n\n @keyframes menu-open {\n from {\n transform: scaleY(0);\n block-size: 0;\n opacity: 0;\n }\n\n to {\n transform: scaleY(1);\n block-size: var(--h);\n opacity: 1;\n }\n }\n\n @keyframes menu-close {\n from {\n transform: scaleY(1);\n block-size: var(--h);\n opacity: 1;\n }\n\n to {\n transform: scaleY(0);\n block-size: 0;\n opacity: 0;\n }\n }\n`;\n"],"names":["css","style","map","s","join"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;IASrB,EAAE,CAAC,UAAW,UAAW,QAAS,UAAU,CACzCE,GAAG,CACF,AAACC,GACC,CAAC,CAAC,EAAEA,EAAE,sBAAsB,EAAEA,EAAE,8BAA8B,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,kCAAkC,EAAEA,EAAE,qCAAqC,EAAEA,EAAE,aAAa,CAAC,EAEtMC,IAAI,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0MhB,CAAC,AAAC"}
|
|
1
|
+
{"version":3,"sources":["../../components/menu/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .menu {\n --menu-selection: var(--primary-selection);\n\n max-block-size: 100%;\n display: block;\n overflow-y: auto;\n color: var(--text-color);\n\n ${['primary', 'success', 'error', 'warning']\n .map(\n (s) =>\n `.${s} {--text-color: var(--${s}-color);--text-heading: var(--${s}-color);--text-secondary: var(--${s}-secondary);--component-bg: var(--${s}-details-bg);--menu-selection: var(--${s}-selection);}`,\n )\n .join('')}\n }\n\n .menu-item,\n .menu-group,\n .sub-menu {\n border-radius: calc(var(--border-radius) / 1.5);\n transition:\n 0.3s background-color var(--transition-timing-function),\n 0.3s color var(--transition-timing-function);\n box-sizing: border-box;\n line-height: 1.57;\n }\n\n .menu-icon {\n font-size: var(--font-size);\n }\n\n .menu-group {\n position: relative;\n }\n\n .menu-group-title {\n position: sticky;\n z-index: 1;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 5px;\n font-size: 12px;\n color: var(--text-secondary);\n inset-block-start: -2px;\n column-gap: 5px;\n }\n\n .menu-suffix {\n text-align: end;\n color: var(--text-secondary);\n flex: 1;\n }\n\n .sub-menu-title {\n display: flex;\n align-items: center;\n border-radius: calc(var(--border-radius) / 1.5);\n padding: 5px 12px;\n column-gap: 5px;\n transition: box-shadow var(--transition-duration) var(--transition-timing-function);\n\n &:hover:not(&[aria-disabled]:not([aria-disabled='false'])) {\n &:not([aria-selected='true'], .error) {\n background-color: var(--disable-bg);\n }\n }\n\n > .menu-arrow {\n position: relative;\n display: block;\n inline-size: 12px;\n block-size: 1.5px;\n pointer-events: none;\n color: var(--text-color);\n opacity: 0.5;\n margin-inline-start: 5px;\n\n &::after,\n &::before {\n position: absolute;\n border-radius: 2px;\n background-color: currentcolor;\n transition:\n transform var(--transition-duration) var(--transition-timing-function),\n color var(--transition-duration) var(--transition-timing-function);\n inline-size: 6px;\n block-size: 1.5px;\n content: '';\n }\n }\n }\n\n .sub-menu {\n cursor: pointer;\n\n &:has([aria-selected='true']) > span {\n color: var(--text-heading);\n }\n }\n\n .sub-menu-children {\n border-radius: calc(var(--border-radius) / 1.5);\n background-color: var(--sub-menu-bg);\n transform-origin: top;\n\n > div {\n padding: 5px 12px;\n }\n }\n\n .sub-menu-open {\n > .sub-menu-children {\n animation: menu-open var(--transition-duration) var(--transition-timing-function) forwards;\n }\n\n > span.sub-menu-title {\n box-shadow: 0 10px 5px 0 rgb(0 0 0 / 1%);\n\n > .menu-arrow {\n &::after {\n transform: rotate(-45deg) translate3d(-1.5px, -1px, 1px);\n }\n\n &::before {\n transform: rotate(45deg) translate3d(1.5px, -1px, 1px);\n }\n }\n }\n }\n\n .sub-menu-close {\n > .sub-menu-children {\n animation: menu-close var(--transition-duration) var(--transition-timing-function) forwards;\n }\n\n > span.sub-menu-title {\n box-shadow: 0 0 0 0 rgb(0 0 0 / 0%);\n\n > .menu-arrow {\n &::after {\n transform: rotate(45deg) translate3d(-1px, 2px, 1px);\n }\n\n &::before {\n transform: rotate(-45deg) translate3d(1px, 2px, 1px);\n }\n }\n }\n }\n\n .menu-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 5px 12px;\n cursor: pointer;\n column-gap: 5px;\n color: var(--text-color);\n\n &:hover:not(&[aria-disabled]:not([aria-disabled='false'])) {\n &:not([aria-selected='true']) {\n color: var(--text-heading);\n background-color: var(--disable-bg);\n }\n }\n\n &[aria-disabled]:not([aria-disabled='false']) {\n cursor: not-allowed;\n color: var(--disable-color);\n }\n\n &[aria-selected='true'] {\n color: var(--text-heading);\n background-color: var(--menu-selection);\n\n & + & {\n border-start-end-radius: 0;\n border-start-start-radius: 0;\n }\n\n &:has(+ &[aria-selected='true']) {\n border-end-end-radius: 0;\n border-end-start-radius: 0;\n }\n }\n }\n\n @keyframes menu-open {\n from {\n transform: scaleY(0);\n block-size: 0;\n opacity: 0;\n }\n\n to {\n transform: scaleY(1);\n block-size: var(--h);\n opacity: 1;\n }\n }\n\n @keyframes menu-close {\n from {\n transform: scaleY(1);\n block-size: var(--h);\n opacity: 1;\n }\n\n to {\n transform: scaleY(0);\n block-size: 0;\n opacity: 0;\n }\n }\n`;\n"],"names":["css","style","map","s","join"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;IASrB,EAAE,CAAC,UAAW,UAAW,QAAS,UAAU,CACzCE,GAAG,CACF,AAACC,GACC,CAAC,CAAC,EAAEA,EAAE,sBAAsB,EAAEA,EAAE,8BAA8B,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,kCAAkC,EAAEA,EAAE,qCAAqC,EAAEA,EAAE,aAAa,CAAC,EAEtMC,IAAI,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0MhB,CAAC,AAAC"}
|
package/es/modal/hooks.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/modal/hooks.ts"],"sourcesContent":["import { type ModalProps } from '.';\n\nconst open = (options: ModalProps) => {\n // eslint-disable-next-line no-console\n console.log(options);\n};\n\nexport default {\n open: open,\n};\n"],"names":["open","options","console","log"],"mappings":"AAOA,cAAe,CACbA,KANW,AAACC,IAEZC,QAAQC,GAAG,CAACF,EACd,CAIA,CAAE"}
|
|
1
|
+
{"version":3,"sources":["../../components/modal/hooks.ts"],"sourcesContent":["import { type ModalProps } from '.';\n\nconst open = (options: ModalProps) => {\n // eslint-disable-next-line no-console\n console.log(options);\n};\n\nexport default {\n open: open,\n};\n"],"names":["open","options","console","log"],"rangeMappings":"","mappings":"AAOA,cAAe,CACbA,KANW,AAACC,IAEZC,QAAQC,GAAG,CAACF,EACd,CAIA,CAAE"}
|
package/es/modal/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/modal/index.tsx"],"sourcesContent":["import {\n Show,\n createComponent,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n onCleanup,\n untrack,\n} from 'solid-js';\nimport { cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Portal } from 'solid-js/web';\nimport modalStore from './store';\nimport { style } from './style';\nimport '../button';\nimport type { CustomElement } from '..';\n\n/**\n * API\n * @since 2.6.0\n */\nexport interface ModalProps {\n /** 是否打开模态框 */\n open?: OpenStateKey;\n /** 开启关闭的回调函数 */\n onOpenChange?: (open: OpenStateKey) => void;\n /** 点击遮罩关闭\n * @default true\n */\n maskClosable?: boolean;\n /** 通过 `esc` 按键关闭\n * @default true\n */\n escClosable?: boolean;\n /**\n * 自定义关闭图标, 设置为 null 或 false 时隐藏关闭按钮\n */\n closeIcon?: JSX.Element | null;\n /** 内容 */\n content: JSX.Element;\n /** 标题 */\n title?: JSX.Element;\n /** 遮罩模糊\n * @default false\n */\n maskBlur?: boolean;\n}\n\n/**\n * OpenStateKey\n */\nexport enum OpenState {\n /** 完全关闭 */\n closed = 'closed',\n /** 正在关闭 */\n closeing = 'closeing',\n /** 打开 */\n open = 'open',\n}\nexport type OpenStateKey = keyof typeof OpenState;\nexport type ModalElement = CustomElement<ModalProps, 'onOpenChange'>;\n\nfunction Modal(props: ModalProps) {\n const doc = document.documentElement;\n const { setNum } = modalStore;\n const [open, setOpen] = createSignal<OpenStateKey>('closed');\n const [posi, setPosi] = createSignal({\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n });\n let portal: HTMLDivElement | undefined;\n\n const getCss = createMemo(() => {\n const { x, y, width, height } = posi();\n\n return `.portal { --y: ${-(y - height / 2)}px;--x: ${-(x - width / 2)}px;}`;\n });\n\n function openChange(visi: OpenStateKey) {\n setOpen(visi);\n props.onOpenChange?.(visi);\n }\n function preventDefault(e: Event) {\n e.preventDefault();\n }\n function close(e: KeyboardEvent | Event) {\n preventDefault(e);\n if (e.type === 'keydown') {\n if (props.escClosable && (e as KeyboardEvent).key === 'Escape') {\n openChange(OpenState.closeing);\n }\n } else {\n openChange(OpenState.closeing);\n }\n }\n function handleDestroy() {\n if (open() === OpenState.closeing) {\n openChange(OpenState.closed);\n }\n }\n function portalClick(e: Event) {\n preventDefault(e);\n if (props.maskClosable && e.target === portal) {\n openChange(OpenState.closeing);\n }\n }\n\n createEffect(() => {\n if (props.open !== void 0 && props.open !== untrack(open)) {\n setOpen(props.open);\n }\n });\n\n function point(e: MouseEvent) {\n setPosi((prev) => ({\n ...prev,\n x: doc.clientWidth / 2 - e.clientX,\n y: doc.clientHeight / 2 - e.clientY,\n }));\n }\n createEffect(() => {\n if (open() === OpenState.open) {\n setNum((prev) => prev + 1);\n doc.addEventListener('mousewheel', preventDefault, {\n passive: false,\n });\n\n if (props.escClosable) {\n doc.addEventListener('keydown', close, false);\n }\n } else if (open() === OpenState.closeing) {\n setNum((prev) => prev - 1);\n } else {\n doc.addEventListener('click', point, true);\n }\n\n onCleanup(() => {\n doc.removeEventListener('mousewheel', preventDefault, false);\n doc.removeEventListener('keydown', close, false);\n doc.removeEventListener('click', point, true);\n });\n });\n const closeIcon = createMemo(() => {\n if (props.closeIcon === null || props.closeIcon === false) {\n return null;\n }\n if (['function', 'object'].includes(typeof props.closeIcon)) {\n return () => <span class=\"modal-close\">{props.closeIcon}</span>;\n }\n return () => (\n <n-button class=\"modal-close\" danger={true} circle={true} flat={true} onClick={close}>\n {props.closeIcon}\n </n-button>\n );\n });\n\n return (\n <Show when={open() !== OpenState.closed}>\n <Portal useShadow={true}>\n <style>\n {getCss()}\n {style}\n </style>\n <div\n ref={portal}\n class={cx(\n 'portal',\n open() === OpenState.open ? 'open' : 'closeing',\n props.maskBlur && 'mask-blur',\n )}\n onAnimationEnd={handleDestroy}\n onClick={portalClick}\n >\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <strong class=\"modal-title\">{props.title}</strong>\n </div>\n <Show when={props.closeIcon === void 0} fallback={closeIcon() as JSXElement}>\n <n-button class=\"modal-close\" danger={true} circle={true} flat={true} onClick={close}>\n ⛌\n </n-button>\n </Show>\n <div class=\"modal-body\">{props.content}</div>\n {/* <div class=\"modal-footer\">{props.footer}</div> */}\n </div>\n </div>\n </Portal>\n </Show>\n );\n}\n\ncustomElement<ModalProps>(\n 'n-modal',\n {\n open: 'closed' as OpenStateKey,\n maskClosable: true,\n escClosable: true,\n onOpenChange: void 0,\n closeIcon: void 0,\n content: void 0,\n title: void 0,\n maskBlur: void 0,\n },\n (_, opt) => {\n const props = mergeProps(\n {\n onOpenChange(open: OpenStateKey) {\n opt.element.dispatchEvent(\n new CustomEvent('openchange', {\n detail: open,\n }),\n );\n },\n },\n _,\n );\n\n return createComponent(Modal, props);\n },\n);\nexport default Modal;\n"],"names":["OpenState","Show","createComponent","createEffect","createMemo","createSignal","mergeProps","onCleanup","untrack","cx","customElement","Portal","modalStore","style","Modal","props","portal","doc","document","documentElement","setNum","open","setOpen","posi","setPosi","x","y","width","height","getCss","openChange","visi","onOpenChange","preventDefault","e","close","type","escClosable","key","handleDestroy","portalClick","maskClosable","target","point","prev","clientWidth","clientX","clientHeight","clientY","addEventListener","passive","removeEventListener","closeIcon","includes","title","content","maskBlur","_","opt","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../components/modal/index.tsx"],"sourcesContent":["import {\n Show,\n createComponent,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n onCleanup,\n untrack,\n} from 'solid-js';\nimport { cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Portal } from 'solid-js/web';\nimport modalStore from './store';\nimport { style } from './style';\nimport '../button';\nimport type { CustomElement } from '..';\n\n/**\n * API\n * @since 2.6.0\n */\nexport interface ModalProps {\n /** 是否打开模态框 */\n open?: OpenStateKey;\n /** 开启关闭的回调函数 */\n onOpenChange?: (open: OpenStateKey) => void;\n /** 点击遮罩关闭\n * @default true\n */\n maskClosable?: boolean;\n /** 通过 `esc` 按键关闭\n * @default true\n */\n escClosable?: boolean;\n /**\n * 自定义关闭图标, 设置为 null 或 false 时隐藏关闭按钮\n */\n closeIcon?: JSX.Element | null;\n /** 内容 */\n content: JSX.Element;\n /** 标题 */\n title?: JSX.Element;\n /** 遮罩模糊\n * @default false\n */\n maskBlur?: boolean;\n}\n\n/**\n * OpenStateKey\n */\nexport enum OpenState {\n /** 完全关闭 */\n closed = 'closed',\n /** 正在关闭 */\n closeing = 'closeing',\n /** 打开 */\n open = 'open',\n}\nexport type OpenStateKey = keyof typeof OpenState;\nexport type ModalElement = CustomElement<ModalProps, 'onOpenChange'>;\n\nfunction Modal(props: ModalProps) {\n const doc = document.documentElement;\n const { setNum } = modalStore;\n const [open, setOpen] = createSignal<OpenStateKey>('closed');\n const [posi, setPosi] = createSignal({\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n });\n let portal: HTMLDivElement | undefined;\n\n const getCss = createMemo(() => {\n const { x, y, width, height } = posi();\n\n return `.portal { --y: ${-(y - height / 2)}px;--x: ${-(x - width / 2)}px;}`;\n });\n\n function openChange(visi: OpenStateKey) {\n setOpen(visi);\n props.onOpenChange?.(visi);\n }\n function preventDefault(e: Event) {\n e.preventDefault();\n }\n function close(e: KeyboardEvent | Event) {\n preventDefault(e);\n if (e.type === 'keydown') {\n if (props.escClosable && (e as KeyboardEvent).key === 'Escape') {\n openChange(OpenState.closeing);\n }\n } else {\n openChange(OpenState.closeing);\n }\n }\n function handleDestroy() {\n if (open() === OpenState.closeing) {\n openChange(OpenState.closed);\n }\n }\n function portalClick(e: Event) {\n preventDefault(e);\n if (props.maskClosable && e.target === portal) {\n openChange(OpenState.closeing);\n }\n }\n\n createEffect(() => {\n if (props.open !== void 0 && props.open !== untrack(open)) {\n setOpen(props.open);\n }\n });\n\n function point(e: MouseEvent) {\n setPosi((prev) => ({\n ...prev,\n x: doc.clientWidth / 2 - e.clientX,\n y: doc.clientHeight / 2 - e.clientY,\n }));\n }\n createEffect(() => {\n if (open() === OpenState.open) {\n setNum((prev) => prev + 1);\n doc.addEventListener('mousewheel', preventDefault, {\n passive: false,\n });\n\n if (props.escClosable) {\n doc.addEventListener('keydown', close, false);\n }\n } else if (open() === OpenState.closeing) {\n setNum((prev) => prev - 1);\n } else {\n doc.addEventListener('click', point, true);\n }\n\n onCleanup(() => {\n doc.removeEventListener('mousewheel', preventDefault, false);\n doc.removeEventListener('keydown', close, false);\n doc.removeEventListener('click', point, true);\n });\n });\n const closeIcon = createMemo(() => {\n if (props.closeIcon === null || props.closeIcon === false) {\n return null;\n }\n if (['function', 'object'].includes(typeof props.closeIcon)) {\n return () => <span class=\"modal-close\">{props.closeIcon}</span>;\n }\n return () => (\n <n-button class=\"modal-close\" danger={true} circle={true} flat={true} onClick={close}>\n {props.closeIcon}\n </n-button>\n );\n });\n\n return (\n <Show when={open() !== OpenState.closed}>\n <Portal useShadow={true}>\n <style>\n {getCss()}\n {style}\n </style>\n <div\n ref={portal}\n class={cx(\n 'portal',\n open() === OpenState.open ? 'open' : 'closeing',\n props.maskBlur && 'mask-blur',\n )}\n onAnimationEnd={handleDestroy}\n onClick={portalClick}\n >\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <strong class=\"modal-title\">{props.title}</strong>\n </div>\n <Show when={props.closeIcon === void 0} fallback={closeIcon() as JSXElement}>\n <n-button class=\"modal-close\" danger={true} circle={true} flat={true} onClick={close}>\n ⛌\n </n-button>\n </Show>\n <div class=\"modal-body\">{props.content}</div>\n {/* <div class=\"modal-footer\">{props.footer}</div> */}\n </div>\n </div>\n </Portal>\n </Show>\n );\n}\n\ncustomElement<ModalProps>(\n 'n-modal',\n {\n open: 'closed' as OpenStateKey,\n maskClosable: true,\n escClosable: true,\n onOpenChange: void 0,\n closeIcon: void 0,\n content: void 0,\n title: void 0,\n maskBlur: void 0,\n },\n (_, opt) => {\n const props = mergeProps(\n {\n onOpenChange(open: OpenStateKey) {\n opt.element.dispatchEvent(\n new CustomEvent('openchange', {\n detail: open,\n }),\n );\n },\n },\n _,\n );\n\n return createComponent(Modal, props);\n },\n);\nexport default Modal;\n"],"names":["OpenState","Show","createComponent","createEffect","createMemo","createSignal","mergeProps","onCleanup","untrack","cx","customElement","Portal","modalStore","style","Modal","props","portal","doc","document","documentElement","setNum","open","setOpen","posi","setPosi","x","y","width","height","getCss","openChange","visi","onOpenChange","preventDefault","e","close","type","escClosable","key","handleDestroy","portalClick","maskClosable","target","point","prev","clientWidth","clientX","clientHeight","clientY","addEventListener","passive","removeEventListener","closeIcon","includes","title","content","maskBlur","_","opt","element","dispatchEvent","CustomEvent","detail"],"rangeMappings":"","mappings":"IAoDYA,62BApDZ,QACEC,QAAAA,CAAI,CACJC,mBAAAA,CAAe,CACfC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,aAAAA,CAAS,CACTC,WAAAA,CAAO,KACF,UAAW,AAClB,QAASC,MAAAA,CAAE,KAAQ,aAAc,AACjC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,UAAAA,CAAM,KAAQ,cAAe,AACtC,QAAOC,MAAgB,SAAU,AACjC,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,OAAO,WAAY,sBAgDnB,SAASC,EAAMC,CAAiB,MAU1BC,EATJ,IAAMC,EAAMC,SAASC,eAAe,CAC9B,CAAEC,OAAAA,CAAM,CAAE,CAAGR,EACb,CAACS,EAAMC,EAAQ,CAAGjB,EAA2B,UAC7C,CAACkB,EAAMC,EAAQ,CAAGnB,EAAa,CACnCoB,EAAG,EACHC,EAAG,EACHC,MAAO,EACPC,OAAQ,CACV,GAGMC,EAASzB,EAAW,KACxB,GAAM,CAAEqB,EAAAA,CAAC,CAAEC,EAAAA,CAAC,CAAEC,MAAAA,CAAK,CAAEC,OAAAA,CAAM,CAAE,CAAGL,IAEhC,MAAO,CAAC,eAAe,EAAE,CAAEG,CAAAA,EAAIE,EAAS,CAAA,EAAG,QAAQ,EAAE,CAAEH,CAAAA,EAAIE,EAAQ,CAAA,EAAG,IAAI,CAAC,AAC7E,GAEA,SAASG,EAAWC,CAAkB,EACpCT,EAAQS,SACRhB,EAAMiB,YAAY,EAAlBjB,EAAMiB,YAAY,MAAlBjB,EAAqBgB,EACvB,CACA,SAASE,EAAeC,CAAQ,EAC9BA,EAAED,cAAc,EAClB,CACA,SAASE,EAAMD,CAAwB,EACrCD,EAAeC,GACXA,AAAW,YAAXA,EAAEE,IAAI,CACJrB,EAAMsB,WAAW,EAAI,AAA6B,WAA7B,AAACH,EAAoBI,GAAG,EAC/CR,cAGFA,aAEJ,CACA,SAASS,iBACHlB,KACFS,WAEJ,CACA,SAASU,EAAYN,CAAQ,EAC3BD,EAAeC,GACXnB,EAAM0B,YAAY,EAAIP,EAAEQ,MAAM,GAAK1B,GACrCc,aAEJ,CAQA,SAASa,EAAMT,CAAa,EAC1BV,EAAQ,AAACoB,GAAU,KACdA,GACHnB,EAAGR,EAAI4B,WAAW,CAAG,EAAIX,EAAEY,OAAO,CAClCpB,EAAGT,EAAI8B,YAAY,CAAG,EAAIb,EAAEc,OAAO,GAEvC,CAZA7C,EAAa,KACQ,KAAK,IAApBY,EAAMM,IAAI,EAAeN,EAAMM,IAAI,GAAKb,EAAQa,IAClDC,EAAQP,EAAMM,IAAI,CAEtB,GASAlB,EAAa,KACPkB,SAAAA,KACFD,EAAO,AAACwB,GAASA,EAAO,GACxB3B,EAAIgC,gBAAgB,CAAC,aAAchB,EAAgB,CACjDiB,QAAS,CAAA,CACX,GAEInC,EAAMsB,WAAW,EACnBpB,EAAIgC,gBAAgB,CAAC,UAAWd,EAAO,CAAA,IAEhCd,aAAAA,IACTD,EAAO,AAACwB,GAASA,EAAO,GAExB3B,EAAIgC,gBAAgB,CAAC,QAASN,EAAO,CAAA,GAGvCpC,EAAU,KACRU,EAAIkC,mBAAmB,CAAC,aAAclB,EAAgB,CAAA,GACtDhB,EAAIkC,mBAAmB,CAAC,UAAWhB,EAAO,CAAA,GAC1ClB,EAAIkC,mBAAmB,CAAC,QAASR,EAAO,CAAA,EAC1C,EACF,GACA,IAAMS,EAAYhD,EAAW,IAC3B,AAAIW,AAAoB,OAApBA,EAAMqC,SAAS,EAAarC,AAAoB,CAAA,IAApBA,EAAMqC,SAAS,CACtC,KAEL,CAAC,WAAY,SAAS,CAACC,QAAQ,CAAC,OAAOtC,EAAMqC,SAAS,EACjD,mCAAiCrC,EAAMqC,SAAS,QAElD,uCAC0EjB,eAAzC,CAAA,WAAc,CAAA,SAAY,CAAA,wBAC7DpB,EAAMqC,SAAS,SAKtB,SACGnD,oBAAWoB,WAAAA,6BACTV,aAAkB,CAAA,mDAEdkB,YACAhB,gCAGIG,kFAOIwB,yBADOD,+BANXvB,YAW4BD,EAAMuC,KAAK,QAEzCrD,qBAAWc,AAAoB,KAAK,IAAzBA,EAAMqC,SAAS,wBAAuBA,iDAC+BjB,eAAzC,CAAA,WAAc,CAAA,SAAY,CAAA,gCAIzCpB,EAAMwC,OAAO,YAjBjC9C,EACL,SACAY,SAAAA,IAA4B,OAAS,WACrCN,EAAMyC,QAAQ,EAAI,2BAqB9B,EA5IYxD,EAAAA,YAAAA,mEA8IZU,EACE,UACA,CACEW,KAAM,SACNoB,aAAc,CAAA,EACdJ,YAAa,CAAA,EACbL,aAAc,KAAK,EACnBoB,UAAW,KAAK,EAChBG,QAAS,KAAK,EACdD,MAAO,KAAK,EACZE,SAAU,KAAK,CACjB,EACA,CAACC,EAAGC,IAcKxD,EAAgBY,EAbTR,EACZ,CACE0B,aAAaX,CAAkB,EAC7BqC,EAAIC,OAAO,CAACC,aAAa,CACvB,IAAIC,YAAY,aAAc,CAC5BC,OAAQzC,CACV,GAEJ,CACF,EACAoC,IAMN,gBAAe3C,CAAM"}
|
package/es/modal/store.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/modal/store.ts"],"sourcesContent":["import { createEffect, createRoot, createSignal, getOwner } from 'solid-js';\nimport { updateStyleRule } from '@moneko/common';\n\nfunction createModal() {\n const [num, setNum] = createSignal(0);\n\n createEffect(() => {\n const count = num();\n\n if (count === 0) {\n updateStyleRule({ 'overflow-y': '' }, 'body');\n } else if (count === 1) {\n updateStyleRule({ 'overflow-y': 'hidden' }, 'body');\n }\n });\n return {\n num,\n setNum,\n };\n}\n\nexport default createRoot(createModal, getOwner());\n"],"names":["createEffect","createRoot","createSignal","getOwner","updateStyleRule","num","setNum","count"],"mappings":"AAAA,OAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,CAAEC,YAAAA,CAAQ,KAAQ,UAAW,AAC5E,QAASC,MAAuB,oCAAiB,AAoBjD,gBAAeH,EAlBf,WACE,GAAM,CAACI,EAAKC,EAAO,CAAGJ,EAAa,GAWnC,OATAF,EAAa,KACX,IAAMO,EAAQF,GAEVE,AAAU,CAAA,IAAVA,EACFH,EAAgB,CAAE,aAAc,EAAG,EAAG,QACnB,IAAVG,GACTH,EAAgB,CAAE,aAAc,QAAS,EAAG,OAEhD,GACO,CACLC,IAAAA,EACAC,OAAAA,CACF,CACF,EAEuCH,IAAY"}
|
|
1
|
+
{"version":3,"sources":["../../components/modal/store.ts"],"sourcesContent":["import { createEffect, createRoot, createSignal, getOwner } from 'solid-js';\nimport { updateStyleRule } from '@moneko/common';\n\nfunction createModal() {\n const [num, setNum] = createSignal(0);\n\n createEffect(() => {\n const count = num();\n\n if (count === 0) {\n updateStyleRule({ 'overflow-y': '' }, 'body');\n } else if (count === 1) {\n updateStyleRule({ 'overflow-y': 'hidden' }, 'body');\n }\n });\n return {\n num,\n setNum,\n };\n}\n\nexport default createRoot(createModal, getOwner());\n"],"names":["createEffect","createRoot","createSignal","getOwner","updateStyleRule","num","setNum","count"],"rangeMappings":"","mappings":"AAAA,OAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,CAAEC,YAAAA,CAAQ,KAAQ,UAAW,AAC5E,QAASC,MAAuB,oCAAiB,AAoBjD,gBAAeH,EAlBf,WACE,GAAM,CAACI,EAAKC,EAAO,CAAGJ,EAAa,GAWnC,OATAF,EAAa,KACX,IAAMO,EAAQF,GAEVE,AAAU,CAAA,IAAVA,EACFH,EAAgB,CAAE,aAAc,EAAG,EAAG,QACnB,IAAVG,GACTH,EAAgB,CAAE,aAAc,QAAS,EAAG,OAEhD,GACO,CACLC,IAAAA,EACAC,OAAAA,CACF,CACF,EAEuCH,IAAY"}
|
package/es/modal/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/modal/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .portal {\n --opacity: 0;\n --scale: 0;\n --timing: ease-in;\n\n position: fixed;\n box-sizing: border-box;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 100%;\n z-index: 99999;\n display: flex;\n\n &::before {\n position: absolute;\n z-index: -1;\n background-color: var(--mask-bg);\n opacity: var(--opacity);\n transition: opacity 0.2s var(--timing);\n inset-inline-start: 0;\n inset-block-start: 0;\n content: '';\n inline-size: 100%;\n block-size: 100%;\n pointer-events: none;\n }\n }\n\n .mask-blur::before {\n backdrop-filter: blur(10px);\n }\n\n .modal-content {\n margin: auto;\n border-radius: var(--border-radius);\n padding: 20px 24px;\n background-color: var(--modal-component-bg);\n opacity: var(--opacity);\n box-shadow: var(--modal-box-shadow);\n inline-size: 520px;\n max-inline-size: calc(100% - 32px);\n transform: translate3d(var(--x), var(--y), 1px) scale3d(var(--scale), var(--scale), 1);\n transition-property: transform, opacity;\n transition-duration: 0.2s;\n transition-timing-function: var(--timing);\n backdrop-filter: blur(10px);\n }\n\n .open {\n --opacity: 0;\n --timing: ease-in;\n\n animation: zoom-in 0.2s var(--timing) forwards;\n }\n\n .closeing {\n --opacity: 1;\n --timing: ease-out;\n\n animation: zoom-out 0.2s var(--timing) forwards;\n }\n\n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n }\n\n .modal-title {\n flex: 1;\n }\n\n .modal-close {\n position: absolute;\n inset-inline-end: 10px;\n inset-block-start: 10px;\n\n &::part(label) {\n color: var(--text-color);\n }\n }\n\n @keyframes zoom-in {\n 0% {\n --opacity: 0;\n --scale: 0;\n\n pointer-events: none;\n }\n\n 100% {\n --opacity: 1;\n --scale: 1;\n --x: 0;\n --y: 0;\n }\n }\n\n @keyframes zoom-out {\n 0% {\n --opacity: 1;\n --scale: 1;\n --x: 0;\n --y: 0;\n }\n\n 100% {\n --opacity: 0;\n --scale: 0;\n\n pointer-events: none;\n }\n }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHzB,CAAC,AAAC"}
|
|
1
|
+
{"version":3,"sources":["../../components/modal/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .portal {\n --opacity: 0;\n --scale: 0;\n --timing: ease-in;\n\n position: fixed;\n box-sizing: border-box;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 100%;\n z-index: 99999;\n display: flex;\n\n &::before {\n position: absolute;\n z-index: -1;\n background-color: var(--mask-bg);\n opacity: var(--opacity);\n transition: opacity 0.2s var(--timing);\n inset-inline-start: 0;\n inset-block-start: 0;\n content: '';\n inline-size: 100%;\n block-size: 100%;\n pointer-events: none;\n }\n }\n\n .mask-blur::before {\n backdrop-filter: blur(10px);\n }\n\n .modal-content {\n margin: auto;\n border-radius: var(--border-radius);\n padding: 20px 24px;\n background-color: var(--modal-component-bg);\n opacity: var(--opacity);\n box-shadow: var(--modal-box-shadow);\n inline-size: 520px;\n max-inline-size: calc(100% - 32px);\n transform: translate3d(var(--x), var(--y), 1px) scale3d(var(--scale), var(--scale), 1);\n transition-property: transform, opacity;\n transition-duration: 0.2s;\n transition-timing-function: var(--timing);\n backdrop-filter: blur(10px);\n }\n\n .open {\n --opacity: 0;\n --timing: ease-in;\n\n animation: zoom-in 0.2s var(--timing) forwards;\n }\n\n .closeing {\n --opacity: 1;\n --timing: ease-out;\n\n animation: zoom-out 0.2s var(--timing) forwards;\n }\n\n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n }\n\n .modal-title {\n flex: 1;\n }\n\n .modal-close {\n position: absolute;\n inset-inline-end: 10px;\n inset-block-start: 10px;\n\n &::part(label) {\n color: var(--text-color);\n }\n }\n\n @keyframes zoom-in {\n 0% {\n --opacity: 0;\n --scale: 0;\n\n pointer-events: none;\n }\n\n 100% {\n --opacity: 1;\n --scale: 1;\n --x: 0;\n --y: 0;\n }\n }\n\n @keyframes zoom-out {\n 0% {\n --opacity: 1;\n --scale: 1;\n --x: 0;\n --y: 0;\n }\n\n 100% {\n --opacity: 0;\n --scale: 0;\n\n pointer-events: none;\n }\n }\n`;\n"],"names":["css","style"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHzB,CAAC,AAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/notification/index.tsx"],"sourcesContent":["import notification from './notification';\nimport queque, { type NotificationProps } from './queque';\n\nexport type { NotificationType, NotificationProps } from './queque';\n\n/** Api */\ninterface Notification {\n /**\n * 信息\n * @param {String} content - 内容.\n * @param {Number} duration - 显示时间.\n * @param {Boolean} close - 显示关闭按钮.\n * @return {String} id\n */\n info(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n /**\n * 成功\n * @param {String} content - 内容.\n * @param {Number} duration - 显示时间.\n * @param {Boolean} close - 显示关闭按钮.\n * @return {String} id\n */\n success(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n /**\n * 错误\n * @param {String} content - 内容.\n * @param {Number} duration - 显示时间.\n * @param {Boolean} close - 显示关闭按钮.\n * @return {String} id\n */\n error(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n /**\n * 警告\n * @param {String} content - 内容.\n * @param {Number} duration - 显示时间.\n * @param {Boolean} close - 显示关闭按钮.\n * @return {String} id\n */\n warning(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n /**\n * 主要\n * @param {String} content - 内容.\n * @param {Number} duration - 显示时间.\n * @param {Boolean} close - 显示关闭按钮.\n * @return {String} id\n */\n primary(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n /**\n * 更新通知内容\n * @param {String} id 通知id\n * @param {NotificationProps} item 更新内容\n * @constructor\n */\n update(uniqueId: string, item: NotificationProps): void;\n /**\n * 销毁全部通知\n * @constructor\n */\n destory: VoidFunction;\n}\n\nexport default {\n info: notification.bind(null, 'info'),\n success: notification.bind(null, 'success'),\n error: notification.bind(null, 'error'),\n warning: notification.bind(null, 'warning'),\n primary: notification.bind(null, 'primary'),\n update: queque.update,\n destory: queque.clean,\n} as Notification;\n"],"names":["notification","queque","info","bind","success","error","warning","primary","update","destory","clean"],"mappings":"AAAA,OAAOA,MAAkB,gBAAiB,AAC1C,QAAOC,MAAwC,UAAW,AA4D1D,eAAe,CACbC,KAAMF,EAAaG,IAAI,CAAC,KAAM,QAC9BC,QAASJ,EAAaG,IAAI,CAAC,KAAM,WACjCE,MAAOL,EAAaG,IAAI,CAAC,KAAM,SAC/BG,QAASN,EAAaG,IAAI,CAAC,KAAM,WACjCI,QAASP,EAAaG,IAAI,CAAC,KAAM,WACjCK,OAAQP,EAAOO,MAAM,CACrBC,QAASR,EAAOS,KAAK,AACvB,CAAkB"}
|
|
1
|
+
{"version":3,"sources":["../../components/notification/index.tsx"],"sourcesContent":["import notification from './notification';\nimport queque, { type NotificationProps } from './queque';\n\nexport type { NotificationType, NotificationProps } from './queque';\n\n/** Api */\ninterface Notification {\n /**\n * 信息\n * @param {String} content - 内容.\n * @param {Number} duration - 显示时间.\n * @param {Boolean} close - 显示关闭按钮.\n * @return {String} id\n */\n info(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n /**\n * 成功\n * @param {String} content - 内容.\n * @param {Number} duration - 显示时间.\n * @param {Boolean} close - 显示关闭按钮.\n * @return {String} id\n */\n success(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n /**\n * 错误\n * @param {String} content - 内容.\n * @param {Number} duration - 显示时间.\n * @param {Boolean} close - 显示关闭按钮.\n * @return {String} id\n */\n error(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n /**\n * 警告\n * @param {String} content - 内容.\n * @param {Number} duration - 显示时间.\n * @param {Boolean} close - 显示关闭按钮.\n * @return {String} id\n */\n warning(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n /**\n * 主要\n * @param {String} content - 内容.\n * @param {Number} duration - 显示时间.\n * @param {Boolean} close - 显示关闭按钮.\n * @return {String} id\n */\n primary(content: JSX.Element, duration?: number, close?: boolean, icon?: JSX.Element): string;\n /**\n * 更新通知内容\n * @param {String} id 通知id\n * @param {NotificationProps} item 更新内容\n * @constructor\n */\n update(uniqueId: string, item: NotificationProps): void;\n /**\n * 销毁全部通知\n * @constructor\n */\n destory: VoidFunction;\n}\n\nexport default {\n info: notification.bind(null, 'info'),\n success: notification.bind(null, 'success'),\n error: notification.bind(null, 'error'),\n warning: notification.bind(null, 'warning'),\n primary: notification.bind(null, 'primary'),\n update: queque.update,\n destory: queque.clean,\n} as Notification;\n"],"names":["notification","queque","info","bind","success","error","warning","primary","update","destory","clean"],"rangeMappings":"","mappings":"AAAA,OAAOA,MAAkB,gBAAiB,AAC1C,QAAOC,MAAwC,UAAW,AA4D1D,eAAe,CACbC,KAAMF,EAAaG,IAAI,CAAC,KAAM,QAC9BC,QAASJ,EAAaG,IAAI,CAAC,KAAM,WACjCE,MAAOL,EAAaG,IAAI,CAAC,KAAM,SAC/BG,QAASN,EAAaG,IAAI,CAAC,KAAM,WACjCI,QAASP,EAAaG,IAAI,CAAC,KAAM,WACjCK,OAAQP,EAAOO,MAAM,CACrBC,QAASR,EAAOS,KAAK,AACvB,CAAkB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/notification/notification.tsx"],"sourcesContent":["import { For, Show, createEffect, createUniqueId } from 'solid-js';\nimport { cx } from '@moneko/css';\nimport { render } from 'solid-js/web';\nimport queque, { type NotificationType } from './queque';\nimport { styles } from './styles';\nimport theme from '../theme';\n\nconst mountId = 'n-notification-box';\n\nconst notification = (\n type: keyof typeof NotificationType,\n children: JSX.Element,\n duration = 3000,\n close?: boolean,\n icon?: JSX.Element,\n) => {\n const uniqueId = createUniqueId();\n const { list, add, remove } = queque;\n const { baseStyle } = theme;\n let mount = document.getElementById(mountId);\n\n add({\n type,\n icon,\n children,\n close,\n uniqueId,\n });\n if (duration && duration > 0) {\n const timer = setTimeout(() => {\n remove(uniqueId);\n clearTimeout(timer);\n }, duration);\n }\n if (!mount) {\n mount = document.createElement('div');\n mount.id = mountId;\n mount.style.position = 'fixed';\n mount.style.insetBlockStart = '16px';\n mount.style.insetInlineStart = '50%';\n mount.style.transform = 'translateX(-50%)';\n mount.attachShadow({ mode: 'open' });\n\n const unmount = render(() => {\n createEffect(() => {\n if (list().length === 0) {\n unmount();\n mount?.remove();\n }\n });\n return (\n <Show when={list().length}>\n <style>\n {baseStyle()}\n {styles}\n </style>\n <For each={list()}>\n {(item) => {\n return (\n <div class={cx('notification', item.type, item.closeing && 'closeing')}>\n <Show when={item.icon}>{item.icon}</Show>\n <div class=\"content\">{item.children}</div>\n <Show when={item.close}>\n <span class=\"close\" onClick={() => remove(item.uniqueId)} />\n </Show>\n </div>\n );\n }}\n </For>\n </Show>\n );\n }, mount!.shadowRoot!);\n\n document.body.appendChild(mount);\n }\n return uniqueId;\n};\n\nexport default notification;\n"],"names":["For","Show","createEffect","createUniqueId","cx","render","queque","styles","theme","mountId","type","children","duration","close","icon","uniqueId","list","add","remove","baseStyle","mount","document","getElementById","timer","setTimeout","clearTimeout","createElement","id","style","position","insetBlockStart","insetInlineStart","transform","attachShadow","mode","unmount","length","item","closeing","shadowRoot","body","appendChild"],"mappings":"0UAAA,QAASA,OAAAA,CAAG,CAAEC,QAAAA,CAAI,CAAEC,gBAAAA,CAAY,CAAEC,kBAAAA,CAAc,KAAQ,UAAW,AACnE,QAASC,MAAAA,CAAE,KAAQ,aAAc,AACjC,QAASC,UAAAA,CAAM,KAAQ,cAAe,AACtC,QAAOC,MAAuC,UAAW,AACzD,QAASC,UAAAA,CAAM,KAAQ,UAAW,AAClC,QAAOC,MAAW,UAAW,CAE7B,IAAMC,EAAU,oBAuEhB,eArEqB,CAAA,CACnBC,EACAC,EACAC,EAAW,GAAI,CACfC,EACAC,KAEA,IAAMC,EAAWZ,IACX,CAAEa,KAAAA,CAAI,CAAEC,IAAAA,CAAG,CAAEC,OAAAA,CAAM,CAAE,CAAGZ,EACxB,CAAEa,UAAAA,CAAS,CAAE,CAAGX,EAClBY,EAAQC,SAASC,cAAc,CAACb,GASpC,GAPAQ,EAAI,CACFP,KAAAA,EACAI,KAAAA,EACAH,SAAAA,EACAE,MAAAA,EACAE,SAAAA,CACF,GACIH,GAAYA,EAAW,EAAG,CAC5B,IAAMW,EAAQC,WAAW,KACvBN,EAAOH,GACPU,aAAaF,EACf,EAAGX,EACL,CACA,GAAI,CAACQ,EAAO,CAEVA,AADAA,CAAAA,EAAQC,SAASK,aAAa,CAAC,MAAK,EAC9BC,EAAE,CAAGlB,EACXW,EAAMQ,KAAK,CAACC,QAAQ,CAAG,QACvBT,EAAMQ,KAAK,CAACE,eAAe,CAAG,OAC9BV,EAAMQ,KAAK,CAACG,gBAAgB,CAAG,MAC/BX,EAAMQ,KAAK,CAACI,SAAS,CAAG,mBACxBZ,EAAMa,YAAY,CAAC,CAAEC,KAAM,MAAO,GAElC,IAAMC,EAAU9B,EAAO,KACrBH,EAAa,KACW,IAAlBc,IAAOoB,MAAM,GACfD,UACAf,GAAAA,EAAOF,MAAM,GAEjB,KAEGjB,qBAAWe,IAAOoB,MAAM,mDAEpBjB,YACAZ,gBAEFP,qBAAUgB,cACR,AAACqB,+CAGKpC,qBAAWoC,EAAKvB,IAAI,wBAAGuB,EAAKvB,IAAI,eACXuB,EAAK1B,QAAQ,QAClCV,qBAAWoC,EAAKxB,KAAK,4CACS,IAAMK,EAAOmB,EAAKtB,QAAQ,uBAJ/CX,EAAG,eAAgBiC,EAAK3B,IAAI,CAAE2B,EAAKC,QAAQ,EAAI,2BAYpElB,EAAOmB,UAAU,EAEpBlB,SAASmB,IAAI,CAACC,WAAW,CAACrB,EAC5B,CACA,OAAOL,CACT,CAAA,CAE4B"}
|
|
1
|
+
{"version":3,"sources":["../../components/notification/notification.tsx"],"sourcesContent":["import { For, Show, createEffect, createUniqueId } from 'solid-js';\nimport { cx } from '@moneko/css';\nimport { render } from 'solid-js/web';\nimport queque, { type NotificationType } from './queque';\nimport { styles } from './styles';\nimport theme from '../theme';\n\nconst mountId = 'n-notification-box';\n\nconst notification = (\n type: keyof typeof NotificationType,\n children: JSX.Element,\n duration = 3000,\n close?: boolean,\n icon?: JSX.Element,\n) => {\n const uniqueId = createUniqueId();\n const { list, add, remove } = queque;\n const { baseStyle } = theme;\n let mount = document.getElementById(mountId);\n\n add({\n type,\n icon,\n children,\n close,\n uniqueId,\n });\n if (duration && duration > 0) {\n const timer = setTimeout(() => {\n remove(uniqueId);\n clearTimeout(timer);\n }, duration);\n }\n if (!mount) {\n mount = document.createElement('div');\n mount.id = mountId;\n mount.style.position = 'fixed';\n mount.style.insetBlockStart = '16px';\n mount.style.insetInlineStart = '50%';\n mount.style.transform = 'translateX(-50%)';\n mount.attachShadow({ mode: 'open' });\n\n const unmount = render(() => {\n createEffect(() => {\n if (list().length === 0) {\n unmount();\n mount?.remove();\n }\n });\n return (\n <Show when={list().length}>\n <style>\n {baseStyle()}\n {styles}\n </style>\n <For each={list()}>\n {(item) => {\n return (\n <div class={cx('notification', item.type, item.closeing && 'closeing')}>\n <Show when={item.icon}>{item.icon}</Show>\n <div class=\"content\">{item.children}</div>\n <Show when={item.close}>\n <span class=\"close\" onClick={() => remove(item.uniqueId)} />\n </Show>\n </div>\n );\n }}\n </For>\n </Show>\n );\n }, mount!.shadowRoot!);\n\n document.body.appendChild(mount);\n }\n return uniqueId;\n};\n\nexport default notification;\n"],"names":["For","Show","createEffect","createUniqueId","cx","render","queque","styles","theme","mountId","type","children","duration","close","icon","uniqueId","list","add","remove","baseStyle","mount","document","getElementById","timer","setTimeout","clearTimeout","createElement","id","style","position","insetBlockStart","insetInlineStart","transform","attachShadow","mode","unmount","length","item","closeing","shadowRoot","body","appendChild"],"rangeMappings":"","mappings":"0UAAA,QAASA,OAAAA,CAAG,CAAEC,QAAAA,CAAI,CAAEC,gBAAAA,CAAY,CAAEC,kBAAAA,CAAc,KAAQ,UAAW,AACnE,QAASC,MAAAA,CAAE,KAAQ,aAAc,AACjC,QAASC,UAAAA,CAAM,KAAQ,cAAe,AACtC,QAAOC,MAAuC,UAAW,AACzD,QAASC,UAAAA,CAAM,KAAQ,UAAW,AAClC,QAAOC,MAAW,UAAW,CAE7B,IAAMC,EAAU,oBAuEhB,eArEqB,CAAA,CACnBC,EACAC,EACAC,EAAW,GAAI,CACfC,EACAC,KAEA,IAAMC,EAAWZ,IACX,CAAEa,KAAAA,CAAI,CAAEC,IAAAA,CAAG,CAAEC,OAAAA,CAAM,CAAE,CAAGZ,EACxB,CAAEa,UAAAA,CAAS,CAAE,CAAGX,EAClBY,EAAQC,SAASC,cAAc,CAACb,GASpC,GAPAQ,EAAI,CACFP,KAAAA,EACAI,KAAAA,EACAH,SAAAA,EACAE,MAAAA,EACAE,SAAAA,CACF,GACIH,GAAYA,EAAW,EAAG,CAC5B,IAAMW,EAAQC,WAAW,KACvBN,EAAOH,GACPU,aAAaF,EACf,EAAGX,EACL,CACA,GAAI,CAACQ,EAAO,CAEVA,AADAA,CAAAA,EAAQC,SAASK,aAAa,CAAC,MAAK,EAC9BC,EAAE,CAAGlB,EACXW,EAAMQ,KAAK,CAACC,QAAQ,CAAG,QACvBT,EAAMQ,KAAK,CAACE,eAAe,CAAG,OAC9BV,EAAMQ,KAAK,CAACG,gBAAgB,CAAG,MAC/BX,EAAMQ,KAAK,CAACI,SAAS,CAAG,mBACxBZ,EAAMa,YAAY,CAAC,CAAEC,KAAM,MAAO,GAElC,IAAMC,EAAU9B,EAAO,KACrBH,EAAa,KACW,IAAlBc,IAAOoB,MAAM,GACfD,UACAf,GAAAA,EAAOF,MAAM,GAEjB,KAEGjB,qBAAWe,IAAOoB,MAAM,mDAEpBjB,YACAZ,gBAEFP,qBAAUgB,cACR,AAACqB,+CAGKpC,qBAAWoC,EAAKvB,IAAI,wBAAGuB,EAAKvB,IAAI,eACXuB,EAAK1B,QAAQ,QAClCV,qBAAWoC,EAAKxB,KAAK,4CACS,IAAMK,EAAOmB,EAAKtB,QAAQ,uBAJ/CX,EAAG,eAAgBiC,EAAK3B,IAAI,CAAE2B,EAAKC,QAAQ,EAAI,2BAYpElB,EAAOmB,UAAU,EAEpBlB,SAASmB,IAAI,CAACC,WAAW,CAACrB,EAC5B,CACA,OAAOL,CACT,CAAA,CAE4B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/notification/queque.ts"],"sourcesContent":["import { createRoot, createSignal } from 'solid-js';\n\n/** Api\n * @since 2.7.0\n */\nexport interface NotificationProps {\n /** 通知类型 */\n type: keyof typeof NotificationType;\n /** 通知内容 */\n children: JSX.Element;\n /** 图标 */\n icon?: JSX.Element;\n /**\n * 是否显示关闭按钮\n * @default false\n */\n close?: boolean;\n /**\n * 显示通知时间, 到时自动关闭; 当 duration < 1 时不自动关闭\n * @default 3000\n */\n duration?: boolean;\n}\n\n/** 通知类型 */\nexport enum NotificationType {\n /** 详细 */\n info = 'info',\n /** 成功 */\n success = 'success',\n /** 错误 */\n error = 'error',\n /** 警告 */\n warning = 'warning',\n /** 主要 */\n primary = 'primary',\n}\n\ninterface NotificationQueQue extends NotificationProps {\n uniqueId: string;\n closeing?: boolean;\n}\nconst queque = createRoot(() => {\n const [list, setList] = createSignal<NotificationQueQue[]>([]);\n\n function add(item: NotificationQueQue) {\n setList((prev) => [...prev, item]);\n }\n function remove(uniqueId: string) {\n setList((prev) =>\n prev.map((q) => {\n if (q.uniqueId === uniqueId) {\n return { ...q, closeing: true };\n }\n return q;\n }),\n );\n const timer = setTimeout(() => {\n setList((prev) => prev.filter((q) => q.uniqueId !== uniqueId));\n clearTimeout(timer);\n }, 200);\n }\n function update(uniqueId: string, item: NotificationProps) {\n setList((prev) =>\n prev.map((q) => {\n if (q.uniqueId === uniqueId) {\n return { ...q, ...item };\n }\n return q;\n }),\n );\n }\n function clean() {\n setList([]);\n }\n return { list, add, remove, clean, update };\n});\n\nexport default queque;\n"],"names":["NotificationType","createRoot","createSignal","queque","list","setList","add","item","prev","remove","uniqueId","map","q","closeing","timer","setTimeout","filter","clearTimeout","clean","update"],"mappings":"IAyBYA,iNAzBZ,OAASC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,KAAQ,UAAW,8BAyBxCF,EAAAA,mBAAAA,8GAiBZ,IAAMG,EAASF,EAAW,KACxB,GAAM,CAACG,EAAMC,EAAQ,CAAGH,EAAmC,EAAE,EAgC7D,MAAO,CAAEE,KAAAA,EAAME,IA9Bf,SAAaC,CAAwB,EACnCF,EAAQ,AAACG,GAAS,IAAIA,EAAMD,EAAK,CACnC,EA4BoBE,OA3BpB,SAAgBC,CAAgB,EAC9BL,EAAQ,AAACG,GACPA,EAAKG,GAAG,CAAC,AAACC,GACR,AAAIA,EAAEF,QAAQ,GAAKA,EACV,KAAKE,GAAGC,SAAU,CAAA,IAEpBD,IAGX,IAAME,EAAQC,WAAW,KACvBV,EAAQ,AAACG,GAASA,EAAKQ,MAAM,CAAC,AAACJ,GAAMA,EAAEF,QAAQ,GAAKA,IACpDO,aAAaH,EACf,EAAG,IACL,EAc4BI,MAH5B,WACEb,EAAQ,EAAE,CACZ,EACmCc,OAbnC,SAAgBT,CAAgB,CAAEH,CAAuB,EACvDF,EAAQ,AAACG,GACPA,EAAKG,GAAG,CAAC,AAACC,GACR,AAAIA,EAAEF,QAAQ,GAAKA,EACV,KAAKE,EAAML,GAEbK,GAGb,CAI0C,CAC5C,EAEA,gBAAeT,CAAO"}
|
|
1
|
+
{"version":3,"sources":["../../components/notification/queque.ts"],"sourcesContent":["import { createRoot, createSignal } from 'solid-js';\n\n/** Api\n * @since 2.7.0\n */\nexport interface NotificationProps {\n /** 通知类型 */\n type: keyof typeof NotificationType;\n /** 通知内容 */\n children: JSX.Element;\n /** 图标 */\n icon?: JSX.Element;\n /**\n * 是否显示关闭按钮\n * @default false\n */\n close?: boolean;\n /**\n * 显示通知时间, 到时自动关闭; 当 duration < 1 时不自动关闭\n * @default 3000\n */\n duration?: boolean;\n}\n\n/** 通知类型 */\nexport enum NotificationType {\n /** 详细 */\n info = 'info',\n /** 成功 */\n success = 'success',\n /** 错误 */\n error = 'error',\n /** 警告 */\n warning = 'warning',\n /** 主要 */\n primary = 'primary',\n}\n\ninterface NotificationQueQue extends NotificationProps {\n uniqueId: string;\n closeing?: boolean;\n}\nconst queque = createRoot(() => {\n const [list, setList] = createSignal<NotificationQueQue[]>([]);\n\n function add(item: NotificationQueQue) {\n setList((prev) => [...prev, item]);\n }\n function remove(uniqueId: string) {\n setList((prev) =>\n prev.map((q) => {\n if (q.uniqueId === uniqueId) {\n return { ...q, closeing: true };\n }\n return q;\n }),\n );\n const timer = setTimeout(() => {\n setList((prev) => prev.filter((q) => q.uniqueId !== uniqueId));\n clearTimeout(timer);\n }, 200);\n }\n function update(uniqueId: string, item: NotificationProps) {\n setList((prev) =>\n prev.map((q) => {\n if (q.uniqueId === uniqueId) {\n return { ...q, ...item };\n }\n return q;\n }),\n );\n }\n function clean() {\n setList([]);\n }\n return { list, add, remove, clean, update };\n});\n\nexport default queque;\n"],"names":["NotificationType","createRoot","createSignal","queque","list","setList","add","item","prev","remove","uniqueId","map","q","closeing","timer","setTimeout","filter","clearTimeout","clean","update"],"rangeMappings":"","mappings":"IAyBYA,iNAzBZ,OAASC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,KAAQ,UAAW,8BAyBxCF,EAAAA,mBAAAA,8GAiBZ,IAAMG,EAASF,EAAW,KACxB,GAAM,CAACG,EAAMC,EAAQ,CAAGH,EAAmC,EAAE,EAgC7D,MAAO,CAAEE,KAAAA,EAAME,IA9Bf,SAAaC,CAAwB,EACnCF,EAAQ,AAACG,GAAS,IAAIA,EAAMD,EAAK,CACnC,EA4BoBE,OA3BpB,SAAgBC,CAAgB,EAC9BL,EAAQ,AAACG,GACPA,EAAKG,GAAG,CAAC,AAACC,GACR,AAAIA,EAAEF,QAAQ,GAAKA,EACV,KAAKE,GAAGC,SAAU,CAAA,IAEpBD,IAGX,IAAME,EAAQC,WAAW,KACvBV,EAAQ,AAACG,GAASA,EAAKQ,MAAM,CAAC,AAACJ,GAAMA,EAAEF,QAAQ,GAAKA,IACpDO,aAAaH,EACf,EAAG,IACL,EAc4BI,MAH5B,WACEb,EAAQ,EAAE,CACZ,EACmCc,OAbnC,SAAgBT,CAAgB,CAAEH,CAAuB,EACvDF,EAAQ,AAACG,GACPA,EAAKG,GAAG,CAAC,AAACC,GACR,AAAIA,EAAEF,QAAQ,GAAKA,EACV,KAAKE,EAAML,GAEbK,GAGb,CAI0C,CAC5C,EAEA,gBAAeT,CAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/notification/styles.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const styles = css`\n :host {\n display: flex;\n flex-direction: column;\n align-items: center;\n row-gap: 16px;\n pointer-events: none;\n }\n\n .notification {\n inline-size: fit-content;\n display: flex;\n align-items: center;\n border-radius: var(--border-radius);\n padding: 5px 16px;\n background-color: var(--modal-component-bg);\n opacity: var(--opacity);\n box-shadow: var(--notification-box-shadow);\n backdrop-filter: blur(10px);\n gap: 8px;\n pointer-events: all;\n animation: scale-in 0.2s forwards;\n\n &.closeing {\n animation: scale-out 0.2s forwards;\n }\n\n &.error {\n color: var(--error-color);\n background-color: var(--error-notify-bg);\n }\n\n &.success {\n color: var(--success-color);\n background-color: var(--success-notify-bg);\n }\n\n &.warning {\n color: var(--warning-color);\n background-color: var(--warning-notify-bg);\n }\n\n &.primary {\n color: var(--primary-color);\n background-color: var(--primary-notify-bg);\n }\n }\n\n .close {\n border-radius: 16px;\n font-size: 14px;\n text-align: center;\n opacity: 0.8;\n outline: 2px solid transparent;\n transition: transform var(--transition-duration);\n transform: translate3d(50%, 0, 1px);\n cursor: pointer;\n block-size: 14px;\n line-height: 1;\n inline-size: 14px;\n\n &::before {\n content: '⛌';\n }\n\n &:hover {\n opacity: 1;\n }\n }\n\n @keyframes scale-in {\n from {\n transform: translate3d(0, -100%, 1px);\n opacity: 0;\n }\n\n to {\n transform: translate3d(0, 0, 1px);\n opacity: 1;\n }\n }\n\n @keyframes scale-out {\n 0% {\n z-index: -1;\n opacity: 1;\n margin-block-start: 0;\n }\n\n 100% {\n z-index: -1;\n opacity: 0;\n margin-block-start: -50px;\n }\n }\n`;\n"],"names":["css","styles"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,OAASD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+F1B,CAAC,AAAC"}
|
|
1
|
+
{"version":3,"sources":["../../components/notification/styles.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const styles = css`\n :host {\n display: flex;\n flex-direction: column;\n align-items: center;\n row-gap: 16px;\n pointer-events: none;\n }\n\n .notification {\n inline-size: fit-content;\n display: flex;\n align-items: center;\n border-radius: var(--border-radius);\n padding: 5px 16px;\n background-color: var(--modal-component-bg);\n opacity: var(--opacity);\n box-shadow: var(--notification-box-shadow);\n backdrop-filter: blur(10px);\n gap: 8px;\n pointer-events: all;\n animation: scale-in 0.2s forwards;\n\n &.closeing {\n animation: scale-out 0.2s forwards;\n }\n\n &.error {\n color: var(--error-color);\n background-color: var(--error-notify-bg);\n }\n\n &.success {\n color: var(--success-color);\n background-color: var(--success-notify-bg);\n }\n\n &.warning {\n color: var(--warning-color);\n background-color: var(--warning-notify-bg);\n }\n\n &.primary {\n color: var(--primary-color);\n background-color: var(--primary-notify-bg);\n }\n }\n\n .close {\n border-radius: 16px;\n font-size: 14px;\n text-align: center;\n opacity: 0.8;\n outline: 2px solid transparent;\n transition: transform var(--transition-duration);\n transform: translate3d(50%, 0, 1px);\n cursor: pointer;\n block-size: 14px;\n line-height: 1;\n inline-size: 14px;\n\n &::before {\n content: '⛌';\n }\n\n &:hover {\n opacity: 1;\n }\n }\n\n @keyframes scale-in {\n from {\n transform: translate3d(0, -100%, 1px);\n opacity: 0;\n }\n\n to {\n transform: translate3d(0, 0, 1px);\n opacity: 1;\n }\n }\n\n @keyframes scale-out {\n 0% {\n z-index: -1;\n opacity: 1;\n margin-block-start: 0;\n }\n\n 100% {\n z-index: -1;\n opacity: 0;\n margin-block-start: -50px;\n }\n }\n`;\n"],"names":["css","styles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,OAASD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+F1B,CAAC,AAAC"}
|