neko-ui 2.8.0 → 2.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/es/back-top/index.js +1 -1
- package/es/back-top/index.js.map +1 -1
- package/es/back-top/style.js +4 -1
- package/es/back-top/style.js.map +1 -1
- package/es/button/index.d.ts +1 -0
- package/es/button/index.js +1 -1
- package/es/button/index.js.map +1 -1
- package/es/capture-screen/index.js +1 -1
- package/es/capture-screen/index.js.map +1 -1
- package/es/carousel/index.js +1 -1
- package/es/carousel/index.js.map +1 -1
- package/es/checkbox/index.js +1 -1
- package/es/checkbox/index.js.map +1 -1
- package/es/code/index.js +1 -1
- package/es/code/index.js.map +1 -1
- package/es/color-palette/index.js +1 -1
- package/es/color-palette/index.js.map +1 -1
- package/es/color-picker/index.js +1 -1
- package/es/color-picker/index.js.map +1 -1
- package/es/cron/index.js +1 -1
- package/es/cron/index.js.map +1 -1
- package/es/date-picker/date.js +1 -1
- package/es/date-picker/date.js.map +1 -1
- package/es/date-picker/dayjs.js +1 -1
- package/es/date-picker/dayjs.js.map +1 -1
- package/es/date-picker/index.js +1 -1
- package/es/date-picker/index.js.map +1 -1
- package/es/date-picker/month.js +1 -1
- package/es/date-picker/month.js.map +1 -1
- package/es/date-picker/panel.js +1 -1
- package/es/date-picker/panel.js.map +1 -1
- package/es/date-picker/year.js +1 -1
- package/es/date-picker/year.js.map +1 -1
- package/es/dropdown/index.js +1 -1
- package/es/dropdown/index.js.map +1 -1
- package/es/img/index.d.ts +9 -1
- package/es/img/index.js +1 -1
- package/es/img/index.js.map +1 -1
- package/es/img/style.js +37 -2
- package/es/img/style.js.map +1 -1
- package/es/index.d.ts +2 -2
- package/es/index.js +1 -1
- package/es/index.js.map +1 -1
- package/es/input/index.js +1 -1
- package/es/input/index.js.map +1 -1
- package/es/input-number/index.js +2 -2
- package/es/input-number/index.js.map +1 -1
- package/es/md/index.js +1 -1
- package/es/md/index.js.map +1 -1
- package/es/menu/index.js +1 -1
- package/es/menu/index.js.map +1 -1
- package/es/modal/index.js +1 -1
- package/es/modal/index.js.map +1 -1
- package/es/notification/notification.js +1 -1
- package/es/notification/notification.js.map +1 -1
- package/es/pagination/index.js +1 -1
- package/es/pagination/index.js.map +1 -1
- package/es/popover/index.js +1 -1
- package/es/popover/index.js.map +1 -1
- package/es/provider/index.js +1 -1
- package/es/provider/index.js.map +1 -1
- package/es/radio/index.js +1 -1
- package/es/radio/index.js.map +1 -1
- package/es/segmented/index.js +3 -3
- package/es/segmented/index.js.map +1 -1
- package/es/select/index.js +1 -1
- package/es/select/index.js.map +1 -1
- package/es/skeleton/index.js +3 -3
- package/es/skeleton/index.js.map +1 -1
- package/es/spin/index.js +5 -4
- package/es/spin/index.js.map +1 -1
- package/es/switch/index.js +1 -1
- package/es/switch/index.js.map +1 -1
- package/es/table/index.js +1 -1
- package/es/table/index.js.map +1 -1
- package/es/tabs/index.d.ts +5 -0
- package/es/tabs/index.js +2 -2
- package/es/tabs/index.js.map +1 -1
- package/es/tag/index.js +3 -3
- package/es/tag/index.js.map +1 -1
- package/es/theme/index.d.ts +1 -1
- package/es/theme/index.js +1 -76
- package/es/theme/index.js.map +1 -1
- package/es/tree/index.js +1 -1
- package/es/tree/index.js.map +1 -1
- package/es/tree/register.js +1 -1
- package/es/tree/register.js.map +1 -1
- package/es/tree/type.d.ts +3 -1
- package/es/typography/index.js +3 -3
- package/es/typography/index.js.map +1 -1
- package/lib/back-top/index.js +1 -1
- package/lib/back-top/index.js.map +1 -1
- package/lib/back-top/style.js +4 -1
- package/lib/back-top/style.js.map +1 -1
- package/lib/button/index.d.ts +1 -0
- package/lib/button/index.js +1 -1
- package/lib/button/index.js.map +1 -1
- package/lib/capture-screen/index.js +1 -1
- package/lib/capture-screen/index.js.map +1 -1
- package/lib/carousel/index.js +1 -1
- package/lib/carousel/index.js.map +1 -1
- package/lib/checkbox/index.js +1 -1
- package/lib/checkbox/index.js.map +1 -1
- package/lib/code/index.js +1 -1
- package/lib/code/index.js.map +1 -1
- package/lib/color-palette/index.js +1 -1
- package/lib/color-palette/index.js.map +1 -1
- package/lib/color-picker/index.js +1 -1
- package/lib/color-picker/index.js.map +1 -1
- package/lib/cron/index.js +1 -1
- package/lib/cron/index.js.map +1 -1
- package/lib/date-picker/date.js +1 -1
- package/lib/date-picker/date.js.map +1 -1
- package/lib/date-picker/dayjs.js +1 -1
- package/lib/date-picker/dayjs.js.map +1 -1
- package/lib/date-picker/index.js +1 -1
- package/lib/date-picker/index.js.map +1 -1
- package/lib/date-picker/month.js +1 -1
- package/lib/date-picker/month.js.map +1 -1
- package/lib/date-picker/panel.js +1 -1
- package/lib/date-picker/panel.js.map +1 -1
- package/lib/date-picker/year.js +1 -1
- package/lib/date-picker/year.js.map +1 -1
- package/lib/dropdown/index.js +1 -1
- package/lib/dropdown/index.js.map +1 -1
- package/lib/img/index.d.ts +9 -1
- package/lib/img/index.js +1 -1
- package/lib/img/index.js.map +1 -1
- package/lib/img/style.js +35 -0
- package/lib/img/style.js.map +1 -1
- package/lib/index.d.ts +2 -2
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib/input/index.js +1 -1
- package/lib/input/index.js.map +1 -1
- package/lib/input-number/index.js +1 -1
- package/lib/input-number/index.js.map +1 -1
- package/lib/md/index.js +1 -1
- package/lib/md/index.js.map +1 -1
- package/lib/menu/index.js +1 -1
- package/lib/menu/index.js.map +1 -1
- package/lib/modal/index.js +1 -1
- package/lib/modal/index.js.map +1 -1
- package/lib/notification/notification.js +1 -1
- package/lib/notification/notification.js.map +1 -1
- package/lib/pagination/index.js +1 -1
- package/lib/pagination/index.js.map +1 -1
- package/lib/popover/index.js +1 -1
- package/lib/popover/index.js.map +1 -1
- package/lib/provider/index.js +1 -1
- package/lib/provider/index.js.map +1 -1
- package/lib/radio/index.js +1 -1
- package/lib/radio/index.js.map +1 -1
- package/lib/segmented/index.js +1 -1
- package/lib/segmented/index.js.map +1 -1
- package/lib/select/index.js +1 -1
- package/lib/select/index.js.map +1 -1
- package/lib/skeleton/index.js +4 -4
- package/lib/skeleton/index.js.map +1 -1
- package/lib/spin/index.js +5 -4
- package/lib/spin/index.js.map +1 -1
- package/lib/switch/index.js +1 -1
- package/lib/switch/index.js.map +1 -1
- package/lib/table/index.js +1 -1
- package/lib/table/index.js.map +1 -1
- package/lib/tabs/index.d.ts +5 -0
- package/lib/tabs/index.js +2 -2
- package/lib/tabs/index.js.map +1 -1
- package/lib/tag/index.js +3 -3
- package/lib/tag/index.js.map +1 -1
- package/lib/theme/index.d.ts +1 -1
- package/lib/theme/index.js +1 -76
- package/lib/theme/index.js.map +1 -1
- package/lib/tree/index.js +1 -1
- package/lib/tree/index.js.map +1 -1
- package/lib/tree/register.js +1 -1
- package/lib/tree/register.js.map +1 -1
- package/lib/tree/type.d.ts +3 -1
- package/lib/typography/index.js +1 -1
- package/lib/typography/index.js.map +1 -1
- package/package.json +11 -12
- package/umd/index.js +1 -1
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 { 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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"}
|
|
1
|
+
{"version":3,"sources":["../../components/md/index.tsx"],"sourcesContent":["import { For, Match, Switch, createEffect, mergeProps, onCleanup } from 'solid-js';\nimport { frameCallback } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport marked, { Renderer } 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 MD(_props: MdProps) {\n let ref: HTMLDivElement | undefined;\n const renderer = new Renderer();\n\n renderer.katexBlock = (code: string) => {\n return `<n-katex display-mode=\"true\">${code}</n-katex>`;\n };\n renderer.katexInline = (code: string) => {\n return `<n-katex>${code}</n-katex>`;\n };\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 const tag = pictureViewer ? 'n-img' : 'img';\n\n renderer.image = (src: string, title: string, alt: string) => {\n return `<${tag} role=\"img\" src=\"${src}\" alt=\"${alt}\" ${title ? `title=\"${title}\"` : ''}></${tag}>`;\n };\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 observer = new IntersectionObserver(observerEntry, {\n rootMargin: '-50px 0px',\n threshold: 0.5,\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 <MD {...props} />;\n },\n);\nexport default MD;\n"],"names":["For","Match","Switch","createEffect","mergeProps","onCleanup","frameCallback","css","cx","marked","Renderer","customElement","mdStyle","theme","MD","_props","ref","renderer","katexBlock","code","katexInline","baseStyle","props","pictureViewer","text","tools","getAnchorContainer","window","postMessage","opt","e","langToolbar","options","tag","image","src","title","alt","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/menu/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{spread as s}from"solid-js/web";import{setAttribute as i}from"solid-js/web";import{memo as l}from"solid-js/web";import{insert as o}from"solid-js/web";import{effect as n}from"solid-js/web";import{delegateEvents as r}from"solid-js/web";import{createComponent as a}from"solid-js/web";import{className as u}from"solid-js/web";import{addEventListener as
|
|
1
|
+
import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{spread as s}from"solid-js/web";import{setAttribute as i}from"solid-js/web";import{memo as l}from"solid-js/web";import{insert as o}from"solid-js/web";import{effect as n}from"solid-js/web";import{delegateEvents as r}from"solid-js/web";import{createComponent as a}from"solid-js/web";import{className as u}from"solid-js/web";import{addEventListener as d}from"solid-js/web";let m=t('<span class="menu-icon" part="icon">'),f=t('<span class="menu-suffix" part="suffix">'),c=t('<div class="sub-menu-children" part="sub-menu-children"><div>'),v=t('<div part="sub-menu"><span class="sub-menu-title"><span class="menu-arrow">'),p=t('<div><span class="menu-group-title">'),g=t('<div part="item">'),h=t("<style>"),b=t('<section class="menu" part="menu">');import{For as $,Match as w,Show as N,Switch as y,createEffect as _,createMemo as C,createSignal as j,mergeProps as A,splitProps as k,untrack as T}from"solid-js";import O from"@moneko/common/lib/frameCallback";import x from"@moneko/common/lib/isFunction";import{css as E,cx as H}from"@moneko/css";import{customElement as K}from"solid-element";import{style as L}from"./style";import{FieldName as D}from"../basic-config";import P from"../get-options";import q from"../theme";function F(t){let r;let{isDark:A,baseStyle:K}=q,[F,S]=k(t,["class","css","items","fieldNames","value","disabled","toggle","multiple","onChange","onOpenChange","openKeys"]),[V,z]=j([]),[B,G]=j([]),I=C(()=>`:host {--sub-menu-bg: ${A()?"rgb(255 255 255 / 1%)":"rgb(0 0 0 / 1%)"} ;}`),J=C(()=>Object.assign({},D,F.fieldNames)),M=C(()=>P(F.items,J()));function Q(e){e.preventDefault(),e.stopPropagation()}function R(e,t){if(t.preventDefault(),!e.disabled&&!F.disabled){let t=[...V()],s=e[J().value];if(F.multiple){let e=t.indexOf(s);-1===e?t.push(s):t.splice(e,1)}else t=F.toggle&&t[0]===s?[]:[s];x(F.onChange)&&F.onChange(F.multiple?t:t[0],e),void 0===F.value&&z(t)}}function U(t){return a($,{get each(){return t.list},children:s=>{function r(){return[a(N,{get when(){return s[t.fieldNames.icon]},get children(){let e=m();return o(e,()=>s[t.fieldNames.icon]),e}}),l(()=>s[t.fieldNames.label]),(()=>{let e=f();return o(e,()=>s[t.fieldNames.suffix]),e})()]}function h(){let i=C(()=>B().includes(s[t.fieldNames.value])),[l,m]=j(T(i));function f(e){Q(e);let i=B();i=i.includes(s[t.fieldNames.value])?i.filter(e=>e!==s[t.fieldNames.value]):i.concat(s[t.fieldNames.value]),x(F.onOpenChange)&&F.onOpenChange(i),void 0===F.openKeys&&G(i)}function p(){let l;let[r,u]=j();function f(){i()||m(!1)}return _(()=>{u((null==l?void 0:l.offsetHeight)||0)}),(()=>{let i=c(),u=i.firstChild,m=l;return d(i,"animationend",f),"function"==typeof m?e(m,u):l=u,o(u,a(U,{get fieldNames(){return t.fieldNames},get list(){return s[t.fieldNames.children]}})),n(()=>(r(),i.style.setProperty("--h",`${r()}px`))),i})()}return _(()=>{i()&&m(!0)}),(()=>{let e=v(),t=e.firstChild,m=t.firstChild;return d(e,"mousedown",Q,!0),d(t,"click",f,!0),o(t,a(r,{}),m),o(e,a(N,{get when(){return l()},get children(){return a(p,{})}}),null),n(t=>{let l=H("sub-menu",s.class),o=!!i(),n=!i();return l!==t._v$&&u(e,t._v$=l),o!==t._v$2&&e.classList.toggle("sub-menu-open",t._v$2=o),n!==t._v$3&&e.classList.toggle("sub-menu-close",t._v$3=n),t},{_v$:void 0,_v$2:void 0,_v$3:void 0}),e})()}return a(y,{get fallback(){return(()=>{let e=g();return d(e,"click",R.bind(null,s),!0),d(e,"mousedown",Q,!0),o(e,a(r,{})),n(l=>{let o=H("menu-item",s.class,s.type),n=s.handleClosed,r=F.disabled||s.disabled,a=V().includes(s[t.fieldNames.value]);return o!==l._v$4&&u(e,l._v$4=o),n!==l._v$5&&i(e,"handle-closed",l._v$5=n),r!==l._v$6&&i(e,"aria-disabled",l._v$6=r),a!==l._v$7&&i(e,"aria-selected",l._v$7=a),l},{_v$4:void 0,_v$5:void 0,_v$6:void 0,_v$7:void 0}),e})()},get children(){return[a(w,{get when(){return Array.isArray(s[t.fieldNames.children])},get children(){return a(h,{})}}),a(w,{get when(){return Array.isArray(s[t.fieldNames.options])},get children(){let e=p(),i=e.firstChild;return d(e,"mousedown",Q,!0),o(i,a(r,{})),o(e,a(U,{get fieldNames(){return t.fieldNames},get list(){return s[t.fieldNames.options]}}),null),n(()=>u(e,H("menu-group",s.class))),e}})]}})}})}return _(()=>{void 0!==F.value&&null!==F.value?z(Array.isArray(F.value)?F.value:[F.value]):z([])}),_(()=>{Array.isArray(F.openKeys)&&G(F.openKeys)}),_(()=>{var e;(null==(e=V())?void 0:e.length)&&O(()=>{let e=null==r?void 0:r.querySelector("[aria-selected=true]");if(e&&r){let t=e.offsetTop-r.offsetTop;t<r.scrollTop?r.scrollTo({top:t,behavior:"smooth"}):e.offsetTop+e.offsetHeight>r.scrollTop+r.offsetHeight+r.offsetTop&&r.scrollTo({top:t-r.offsetHeight+e.offsetHeight,behavior:"smooth"})}})}),[(()=>{let e=h();return o(e,K,null),o(e,L,null),o(e,I,null),o(e,()=>E(F.css),null),e})(),(()=>{let t=b(),i=r;return"function"==typeof i?e(i,t):r=t,s(t,S,!1,!0),o(t,a(U,{get fieldNames(){return J()},get list(){return M()}})),t})()]}K("n-menu",{class:void 0,css:void 0,disabled:void 0,value:void 0,defaultValue:void 0,onOpenChange:void 0,openKeys:void 0,fieldNames:void 0,multiple:void 0,toggle:void 0,onChange:void 0,items:[]},(e,t)=>{let s=t.element,i=A({css:s.css,onChange(e,t){s.dispatchEvent(new CustomEvent("change",{detail:[e,t]}))},onOpenChange(e){s.dispatchEvent(new CustomEvent("openchange",{detail:e}))}},e);return _(()=>{s.removeAttribute("items"),s.removeAttribute("field-names"),s.removeAttribute("css")}),a(F,i)});export default F;r(["click","mousedown"]);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
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"],"rangeMappings":"","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../components/menu/index.tsx"],"sourcesContent":["import {\n For,\n Match,\n Show,\n Switch,\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)}\n classList={{\n 'sub-menu-open': isOpen(),\n 'sub-menu-close': !isOpen(),\n }}\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 <Menu {...props} />;\n },\n);\n\nexport default Menu;\n"],"names":["For","Match","Show","Switch","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,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,SACGpD,qBAAUoD,EAAEC,IAAI,WACd,AAACb,IACA,SAASc,IACP,SAEKpD,qBAAWsC,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,wEAsDiB1B,kBAEyB2B,YACnCT,eAGFpD,qBAAW2D,6BACTQ,2BAbIxD,EAAG,WAAY2B,EAAKoC,KAAK,MAEbjB,MACC,CAACA,oMAc3B,CACA,SACGxD,2DAScoC,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,sPAQ3DzB,qBAAY+E,MAAMC,OAAO,CAACzC,CAAI,CAACY,EAAErB,UAAU,CAAC4C,QAAQ,CAAC,2BACnDjB,WAEFzD,qBAAY+E,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,KACQ9E,EAASC,EACnB,EAGF,gBAAeD,CAAK"}
|
package/es/modal/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e;function o(){return(o=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}import{use as t}from"solid-js/web";import{template as n}from"solid-js/web";import"solid-js/web";import{insert as l}from"solid-js/web";import{getOwner as s}from"solid-js/web";import{effect as i}from"solid-js/web";import{delegateEvents as r}from"solid-js/web";import{createComponent as c}from"solid-js/web";import{
|
|
1
|
+
var e;function o(){return(o=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}import{use as t}from"solid-js/web";import{template as n}from"solid-js/web";import"solid-js/web";import{insert as l}from"solid-js/web";import{getOwner as s}from"solid-js/web";import{effect as i}from"solid-js/web";import{delegateEvents as r}from"solid-js/web";import{createComponent as c}from"solid-js/web";import{addEventListener as a}from"solid-js/web";let d=n('<span class="modal-close">'),m=n('<n-button class="modal-close">',!0,!1),p=n("<style>"),u=n(`<n-button class="modal-close">⛌`,!0,!1),v=n('<div class="portal"><div class="modal-content"><div class="modal-header"><strong class="modal-title"></strong></div><div class="modal-body">');import{Show as f,createEffect as g,createMemo as h,createSignal as b,mergeProps as w,onCleanup as k,untrack as y}from"solid-js";import{customElement as j}from"solid-element";import{Portal as C}from"solid-js/web";import $ from"./store";import{style as E}from"./style";import"../button";export var OpenState;function O(e){let n;let r=document.documentElement,{setNum:w}=$,[j,O]=b("closed"),[_,L]=b({x:0,y:0,width:0,height:0}),x=h(()=>{let{x:e,y:o,width:t,height:n}=_();return`.portal { --y: ${-(o-n/2)}px;--x: ${-(e-t/2)}px;}`});function I(o){O(o),null==e.onOpenChange||e.onOpenChange.call(e,o)}function S(e){e.preventDefault()}function B(o){S(o),"keydown"===o.type?e.escClosable&&"Escape"===o.key&&I("closeing"):I("closeing")}function D(){"closeing"===j()&&I("closed")}function H(o){S(o),e.maskClosable&&o.target===n&&I("closeing")}function P(e){L(t=>o({},t,{x:r.clientWidth/2-e.clientX,y:r.clientHeight/2-e.clientY}))}g(()=>{void 0!==e.open&&e.open!==y(j)&&O(e.open)}),g(()=>{"open"===j()?(w(e=>e+1),r.addEventListener("mousewheel",S,{passive:!1}),e.escClosable&&r.addEventListener("keydown",B,!1)):"closeing"===j()?w(e=>e-1):r.addEventListener("click",P,!0),k(()=>{r.removeEventListener("mousewheel",S,!1),r.removeEventListener("keydown",B,!1),r.removeEventListener("click",P,!0)})});let W=h(()=>null===e.closeIcon||!1===e.closeIcon?null:["function","object"].includes(typeof e.closeIcon)?()=>(()=>{let o=d();return l(o,()=>e.closeIcon),o})():()=>(()=>{let o=m();return a(o,"click",B,!0),o.danger=!0,o.circle=!0,o.flat=!0,o._$owner=s(),l(o,()=>e.closeIcon),o})());return c(f,{get when(){return"closed"!==j()},get children(){return c(C,{useShadow:!0,get children(){return[(()=>{let e=p();return l(e,x,null),l(e,E,null),e})(),(()=>{let o=v(),r=n,d=o.firstChild,m=d.firstChild,p=m.firstChild,g=m.nextSibling;return a(o,"click",H,!0),a(o,"animationend",D),"function"==typeof r?t(r,o):n=o,l(p,()=>e.title),l(d,c(f,{get when(){return void 0===e.closeIcon},get fallback(){return W()},get children(){let e=u();return a(e,"click",B,!0),e.danger=!0,e.circle=!0,e.flat=!0,e._$owner=s(),e}}),g),l(g,()=>e.content),i(t=>{let n=!("open"!==j()),l="open"!==j(),s=!!e.maskBlur;return n!==t._v$&&o.classList.toggle("open",t._v$=n),l!==t._v$2&&o.classList.toggle("closeing",t._v$2=l),s!==t._v$3&&o.classList.toggle("mask-blur",t._v$3=s),t},{_v$:void 0,_v$2:void 0,_v$3:void 0}),o})()]}})}})}(e=OpenState||(OpenState={})).closed="closed",e.closeing="closeing",e.open="open",j("n-modal",{open:"closed",maskClosable:!0,escClosable:!0,onOpenChange:void 0,closeIcon:void 0,content:void 0,title:void 0,maskBlur:void 0},(e,o)=>c(O,w({onOpenChange(e){o.element.dispatchEvent(new CustomEvent("openchange",{detail:e}))}},e)));export default O;r(["click"]);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/es/modal/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/modal/index.tsx"],"sourcesContent":["import {\n Show,\n
|
|
1
|
+
{"version":3,"sources":["../../components/modal/index.tsx"],"sourcesContent":["import {\n Show,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n onCleanup,\n untrack,\n} from 'solid-js';\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=\"portal\"\n classList={{\n open: open() === OpenState.open,\n closeing: open() !== OpenState.open,\n 'mask-blur': props.maskBlur,\n }}\n onAnimationEnd={handleDestroy}\n onClick={portalClick}\n >\n <div 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 <Modal {...props} />;\n },\n);\nexport default Modal;\n"],"names":["OpenState","Show","createEffect","createMemo","createSignal","mergeProps","onCleanup","untrack","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":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{template as e}from"solid-js/web";import{insert as t}from"solid-js/web";import{effect as o}from"solid-js/web";import{delegateEvents as r}from"solid-js/web";import{createComponent as l}from"solid-js/web";import{className as i}from"solid-js/web";let n=e("<style>"),s=e('<span class="close">'),m=e('<div><div class="content">');import{For as
|
|
1
|
+
import{template as e}from"solid-js/web";import{insert as t}from"solid-js/web";import{effect as o}from"solid-js/web";import{delegateEvents as r}from"solid-js/web";import{createComponent as l}from"solid-js/web";import{className as i}from"solid-js/web";let n=e("<style>"),s=e('<span class="close">'),m=e('<div><div class="content">');import{For as d,Show as c,createEffect as a,createUniqueId as u}from"solid-js";import{cx as f}from"@moneko/css";import{render as p}from"solid-js/web";import h from"./queque";import{styles as g}from"./styles";import v from"../theme";let w="n-notification-box";export default((e,r,b=3e3,y,j)=>{let $=u(),{list:_,add:k,remove:x}=h,{baseStyle:q}=v,C=document.getElementById(w);if(k({type:e,icon:j,children:r,close:y,uniqueId:$}),b&&b>0){let e=setTimeout(()=>{x($),clearTimeout(e)},b)}if(!C){(C=document.createElement("div")).id=w,C.style.position="fixed",C.style.insetBlockStart="16px",C.style.insetInlineStart="50%",C.style.transform="translateX(-50%)",C.attachShadow({mode:"open"});let e=p(()=>(a(()=>{0===_().length&&(e(),null==C||C.remove())}),l(c,{get when(){return _().length},get children(){return[(()=>{let e=n();return t(e,q,null),t(e,g,null),e})(),l(d,{get each(){return _()},children:e=>(()=>{let r=m(),n=r.firstChild;return t(r,l(c,{get when(){return e.icon},get children(){return e.icon}}),n),t(n,()=>e.children),t(r,l(c,{get when(){return e.close},get children(){let t=s();return t.$$click=()=>x(e.uniqueId),t}}),null),o(t=>{let o=f("notification",e.type),l=!!e.closeing;return o!==t._v$&&i(r,t._v$=o),l!==t._v$2&&r.classList.toggle("closeing",t._v$2=l),t},{_v$:void 0,_v$2:void 0}),r})()})]}})),C.shadowRoot);document.body.appendChild(C)}return $});r(["click"]);
|
|
2
2
|
//# sourceMappingURL=notification.js.map
|
|
@@ -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
|
|
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\n class={cx('notification', item.type)}\n classList={{\n closeing: item.closeing,\n }}\n >\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,oBA4EhB,eA1EqB,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,+CAQKpC,qBAAWoC,EAAKvB,IAAI,wBAAGuB,EAAKvB,IAAI,eACXuB,EAAK1B,QAAQ,QAClCV,qBAAWoC,EAAKxB,KAAK,4CACS,IAAMK,EAAOmB,EAAKtB,QAAQ,yBARlDX,EAAG,eAAgBiC,EAAK3B,IAAI,MAEvB2B,EAAKC,QAAQ,8HAcpClB,EAAOmB,UAAU,EAEpBlB,SAASmB,IAAI,CAACC,WAAW,CAACrB,EAC5B,CACA,OAAOL,CACT,CAAA,CAE4B"}
|
package/es/pagination/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{template as t}from"solid-js/web";import{memo as e}from"solid-js/web";import{insert as i}from"solid-js/web";import{getOwner as o}from"solid-js/web";import{effect as l}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as r}from"solid-js/web";import{
|
|
1
|
+
import{template as t}from"solid-js/web";import{memo as e}from"solid-js/web";import{insert as i}from"solid-js/web";import{getOwner as o}from"solid-js/web";import{effect as l}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as r}from"solid-js/web";import{classList as a}from"solid-js/web";let s=t("<li>"),p=t(`<li><slot name="total-text"><n-typography>共 <!> 项`,!0,!1),m=t("<style>"),v=t(`<nav aria-label="pagination" class="pagination"><ul><li><n-button class="pagination-item pagination-prev">〈</n-button></li><li><n-button class="pagination-item pagination-next">〉`,!0,!1),u=t('<li><n-button class="pagination-item">',!0,!1);import{For as d,Show as c,batch as f,createEffect as g,createMemo as $,createSignal as h,mergeProps as _,splitProps as b,untrack as w}from"solid-js";import x from"@moneko/common/lib/isFunction";import{css as C}from"@moneko/css";import{customElement as y}from"solid-element";import{styles as z}from"./styles";import"../button";import j from"../theme";import"../typography";function S(t){let{baseStyle:n}=j,[_,y]=b(t,["page","pageSize","total","css","totalText"]),[S,T]=h(1),[k,M]=h(20),[E,q]=h(0);g(()=>{f(()=>{"number"==typeof _.page&&_.page!==w(S)&&T(_.page),"number"==typeof _.pageSize&&_.pageSize!==w(k)&&M(_.pageSize),"number"==typeof _.total&&_.total!==w(E)&&q(_.total)})});let A=$(()=>Math.ceil(E()/k())),F=$(()=>{let t=A(),e=[];if(t<=5)for(let i=1;i<=t;i++)e.push(i);else{let i=Math.min(t,Math.max(1,S()-Math.floor(2.5))+5-1);for(let t=i-5+1;t<=i;t++)e.push(t)}if(e.length){let i=e[e.length-1],o=e[0];o>=2&&(2===o?e.splice(0,1,"p"):e.unshift("p"),e.unshift(1),i<t&&(i+=1,e.push(i))),i===t-1?(e.splice(e.length-1,1,"n"),e.push(t)):i<t-1&&(e.push("n"),e.push(t))}return e});function L(t){let e=w(S),i="n"===t?e+5:"p"===t?e-5:t;i<1?i=1:i>w(A)&&(i=w(A)),e!==i&&(void 0===_.page&&T(i),null==y.onChange||y.onChange.call(y,i,w(k)))}let O=()=>{let t=$(()=>[(S()-1)*k()+1,S()*k()]);return r(c,{get when(){return!1!==_.totalText},get children(){let l=s();return i(l,(()=>{let l=e(()=>!!x(_.totalText));return()=>l()?_.totalText(E(),t()):(()=>{let t=p(),e=t.firstChild,l=e.firstChild,n=l.firstChild.nextSibling;return n.nextSibling,e._$owner=o(),l._$owner=o(),i(l,E,n),t})()})()),l}})};return r(c,{get when(){return F().length},get children(){return[(()=>{let t=m();return i(t,n,null),i(t,z,null),i(t,()=>C(_.css),null),t})(),(()=>{let t=v(),e=t.firstChild,n=e.firstChild,s=n.firstChild,p=n.nextSibling,m=p.firstChild;return i(e,r(O,{}),n),s.$$click=()=>L(w(S)-1),s.flat=!0,s.circle=!0,s._$owner=o(),i(e,r(d,{get each(){return F()},children:t=>{let e=$(()=>t===S());return(()=>{let n=u(),r=n.firstChild;return r.$$click=()=>L(t),r.circle="number"!=typeof t,r._$owner=o(),i(r,t),l(i=>{let o={[`pagination-${t}`]:"number"!=typeof t},l=y.size,n=!e(),s=e()?"primary":"default",p=e(),m=e()&&"page";return i._v$5=a(r,o,i._v$5),l!==i._v$6&&(r.size=i._v$6=l),n!==i._v$7&&(r.flat=i._v$7=n),s!==i._v$8&&(r.type=i._v$8=s),p!==i._v$9&&(r.fill=i._v$9=p),m!==i._v$10&&(r.ariaCurrent=i._v$10=m),i},{_v$5:void 0,_v$6:void 0,_v$7:void 0,_v$8:void 0,_v$9:void 0,_v$10:void 0}),n})()}}),p),m.$$click=()=>L(w(S)+1),m.flat=!0,m.circle=!0,m._$owner=o(),l(t=>{let e=y.size,i=1===S(),o=y.size,l=S()===A();return e!==t._v$&&(s.size=t._v$=e),i!==t._v$2&&(s.disabled=t._v$2=i),o!==t._v$3&&(m.size=t._v$3=o),l!==t._v$4&&(m.disabled=t._v$4=l),t},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),t})()]}})}y("n-pagination",{class:void 0,css:void 0,page:void 0,pageSize:void 0,total:0,size:void 0,onChange:void 0,totalText:void 0},(t,e)=>{let i=e.element,o=_({css:i.css,onChange(t,e){i.dispatchEvent(new CustomEvent("change",{detail:[t,e]}))}},t,{totalText:!!i.querySelector("[slot='total-text']")||t.totalText});return g(()=>{i.removeAttribute("css")}),r(S,o)});export default S;n(["click"]);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/pagination/index.tsx"],"sourcesContent":["import {\n For,\n Show,\n batch,\n createComponent,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n splitProps,\n untrack,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { styles } from './styles';\nimport '../button';\nimport theme from '../theme';\nimport '../typography';\nimport type { BasicConfig, CustomElement } from '..';\n\nfunction Pagination(_: PaginationProps) {\n const { baseStyle } = theme;\n const maxCount = 5;\n const [local, other] = splitProps(_, ['page', 'pageSize', 'total', 'css', 'totalText']);\n const [page, setPage] = createSignal(1);\n const [pageSize, setPageSize] = createSignal(20);\n const [total, setTotal] = createSignal(0);\n\n createEffect(() => {\n batch(() => {\n if (typeof local.page === 'number' && local.page !== untrack(page)) {\n setPage(local.page);\n }\n if (typeof local.pageSize === 'number' && local.pageSize !== untrack(pageSize)) {\n setPageSize(local.pageSize);\n }\n if (typeof local.total === 'number' && local.total !== untrack(total)) {\n setTotal(local.total);\n }\n });\n });\n const totalPages = createMemo(() => Math.ceil(total() / pageSize()));\n const pages = createMemo(() => {\n const totals = totalPages();\n const arr: (number | 'p' | 'n')[] = [];\n\n if (totals <= maxCount) {\n for (let i = 1; i <= totals; i++) {\n arr.push(i);\n }\n } else {\n const right = Math.min(totals, Math.max(1, page() - Math.floor(maxCount / 2)) + maxCount - 1);\n\n for (let i = right - maxCount + 1; i <= right; i++) {\n arr.push(i);\n }\n }\n\n if (arr.length) {\n let last = arr[arr.length - 1] as number;\n const fast = arr[0] as number;\n\n if (fast >= 2) {\n if (fast === 2) {\n arr.splice(0, 1, 'p');\n } else {\n arr.unshift('p');\n }\n arr.unshift(1);\n if (last < totals) {\n last += 1;\n arr.push(last);\n }\n }\n if (last === totals - 1) {\n arr.splice(arr.length - 1, 1, 'n');\n arr.push(totals);\n } else if (last < totals - 1) {\n arr.push('n');\n arr.push(totals);\n }\n }\n return arr;\n });\n\n function changePage(curr: number | 'p' | 'n') {\n const p = untrack(page);\n let next = curr === 'n' ? p + maxCount : curr === 'p' ? p - maxCount : curr;\n\n if (next < 1) {\n next = 1;\n } else if (next > untrack(totalPages)) {\n next = untrack(totalPages);\n }\n if (p !== next) {\n if (local.page === void 0) {\n setPage(next);\n }\n other.onChange?.(next, untrack(pageSize));\n }\n }\n const TotalText = () => {\n const ranges = createMemo(() => [(page() - 1) * pageSize() + 1, page() * pageSize()]);\n\n return (\n <Show when={local.totalText !== false}>\n <li>\n {isFunction(local.totalText) ? (\n local.totalText(total(), ranges())\n ) : (\n <li>\n <slot name=\"total-text\">\n <n-typography>共 {total()} 项</n-typography>\n </slot>\n </li>\n )}\n </li>\n </Show>\n );\n };\n\n return (\n <Show when={pages().length}>\n <style>\n {baseStyle()}\n {styles}\n {css(local.css)}\n </style>\n <nav aria-label=\"pagination\" class=\"pagination\">\n <ul>\n <TotalText />\n <li>\n <n-button\n class=\"pagination-item pagination-prev\"\n size={other.size}\n flat={true}\n circle={true}\n disabled={page() === 1}\n onClick={() => changePage(untrack(page) - 1)}\n >\n 〈\n </n-button>\n </li>\n <For each={pages()}>\n {(curr) => {\n const isCurrent = createMemo(() => curr === page());\n\n return (\n <li>\n <n-button\n class={cx('pagination-item', typeof curr !== 'number' && `pagination-${curr}`)}\n size={other.size}\n flat={!isCurrent()}\n circle={typeof curr !== 'number'}\n type={isCurrent() ? 'primary' : 'default'}\n fill={isCurrent()}\n aria-current={isCurrent() && 'page'}\n onClick={() => changePage(curr)}\n >\n {curr}\n </n-button>\n </li>\n );\n }}\n </For>\n <li>\n <n-button\n class=\"pagination-item pagination-next\"\n size={other.size}\n flat={true}\n circle={true}\n disabled={page() === totalPages()}\n onClick={() => changePage(untrack(page) + 1)}\n >\n 〉\n </n-button>\n </li>\n </ul>\n </nav>\n </Show>\n );\n}\n\n/** API */\nexport interface PaginationProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义类名 */\n css?: string;\n /** 当前页数\n * @default 1\n */\n page?: number;\n /** 每页显示的数据条目数量\n * @default 20\n */\n pageSize?: number;\n /** 总数\n * @default 0\n */\n total?: number;\n /** 尺寸\n * @default 'normal'\n */\n size?: BasicConfig['size'];\n /** 用于显示数据总量和当前数据顺序;\n * 支持直接赋值给 'totalText' 属性\n * 或者通过[slot=\"total-text\"]插槽\n * @default true\n */\n totalText?: ((total: number, range: [start: number, end: number]) => JSX.Element) | false;\n /** 值修改时的回调方法 */\n onChange?(page: number, pageSize: number): void;\n children?: JSX.Element;\n}\nexport type PaginationElement = CustomElement<PaginationProps>;\n\ncustomElement<PaginationProps>(\n 'n-pagination',\n {\n class: void 0,\n css: void 0,\n page: void 0,\n pageSize: void 0,\n total: 0,\n size: void 0,\n onChange: void 0,\n totalText: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n css: el.css,\n onChange(page: number, pageSize: number) {\n el.dispatchEvent(\n new CustomEvent('change', {\n detail: [page, pageSize],\n }),\n );\n },\n },\n _,\n {\n totalText: (!!el.querySelector(\"[slot='total-text']\") as false) || _.totalText,\n },\n );\n\n createEffect(() => {\n el.removeAttribute('css');\n });\n return createComponent(Pagination, props);\n },\n);\nexport default Pagination;\n"],"names":["For","Show","batch","createComponent","createEffect","createMemo","createSignal","mergeProps","splitProps","untrack","isFunction","css","cx","customElement","styles","theme","Pagination","_","baseStyle","local","other","page","setPage","pageSize","setPageSize","total","setTotal","totalPages","Math","ceil","pages","totals","arr","i","push","right","min","max","floor","maxCount","length","last","fast","splice","unshift","changePage","curr","p","next","onChange","TotalText","ranges","totalText","isCurrent","size","class","opt","el","element","props","dispatchEvent","CustomEvent","detail","querySelector","removeAttribute"],"rangeMappings":"","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../components/pagination/index.tsx"],"sourcesContent":["import {\n For,\n Show,\n batch,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n splitProps,\n untrack,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { styles } from './styles';\nimport '../button';\nimport theme from '../theme';\nimport '../typography';\nimport type { BasicConfig, CustomElement } from '..';\n\nfunction Pagination(_: PaginationProps) {\n const { baseStyle } = theme;\n const maxCount = 5;\n const [local, other] = splitProps(_, ['page', 'pageSize', 'total', 'css', 'totalText']);\n const [page, setPage] = createSignal(1);\n const [pageSize, setPageSize] = createSignal(20);\n const [total, setTotal] = createSignal(0);\n\n createEffect(() => {\n batch(() => {\n if (typeof local.page === 'number' && local.page !== untrack(page)) {\n setPage(local.page);\n }\n if (typeof local.pageSize === 'number' && local.pageSize !== untrack(pageSize)) {\n setPageSize(local.pageSize);\n }\n if (typeof local.total === 'number' && local.total !== untrack(total)) {\n setTotal(local.total);\n }\n });\n });\n const totalPages = createMemo(() => Math.ceil(total() / pageSize()));\n const pages = createMemo(() => {\n const totals = totalPages();\n const arr: (number | 'p' | 'n')[] = [];\n\n if (totals <= maxCount) {\n for (let i = 1; i <= totals; i++) {\n arr.push(i);\n }\n } else {\n const right = Math.min(totals, Math.max(1, page() - Math.floor(maxCount / 2)) + maxCount - 1);\n\n for (let i = right - maxCount + 1; i <= right; i++) {\n arr.push(i);\n }\n }\n\n if (arr.length) {\n let last = arr[arr.length - 1] as number;\n const fast = arr[0] as number;\n\n if (fast >= 2) {\n if (fast === 2) {\n arr.splice(0, 1, 'p');\n } else {\n arr.unshift('p');\n }\n arr.unshift(1);\n if (last < totals) {\n last += 1;\n arr.push(last);\n }\n }\n if (last === totals - 1) {\n arr.splice(arr.length - 1, 1, 'n');\n arr.push(totals);\n } else if (last < totals - 1) {\n arr.push('n');\n arr.push(totals);\n }\n }\n return arr;\n });\n\n function changePage(curr: number | 'p' | 'n') {\n const p = untrack(page);\n let next = curr === 'n' ? p + maxCount : curr === 'p' ? p - maxCount : curr;\n\n if (next < 1) {\n next = 1;\n } else if (next > untrack(totalPages)) {\n next = untrack(totalPages);\n }\n if (p !== next) {\n if (local.page === void 0) {\n setPage(next);\n }\n other.onChange?.(next, untrack(pageSize));\n }\n }\n const TotalText = () => {\n const ranges = createMemo(() => [(page() - 1) * pageSize() + 1, page() * pageSize()]);\n\n return (\n <Show when={local.totalText !== false}>\n <li>\n {isFunction(local.totalText) ? (\n local.totalText(total(), ranges())\n ) : (\n <li>\n <slot name=\"total-text\">\n <n-typography>共 {total()} 项</n-typography>\n </slot>\n </li>\n )}\n </li>\n </Show>\n );\n };\n\n return (\n <Show when={pages().length}>\n <style>\n {baseStyle()}\n {styles}\n {css(local.css)}\n </style>\n <nav aria-label=\"pagination\" class=\"pagination\">\n <ul>\n <TotalText />\n <li>\n <n-button\n class=\"pagination-item pagination-prev\"\n size={other.size}\n flat={true}\n circle={true}\n disabled={page() === 1}\n onClick={() => changePage(untrack(page) - 1)}\n >\n 〈\n </n-button>\n </li>\n <For each={pages()}>\n {(curr) => {\n const isCurrent = createMemo(() => curr === page());\n\n return (\n <li>\n <n-button\n class=\"pagination-item\"\n classList={{\n [`pagination-${curr}`]: typeof curr !== 'number',\n }}\n size={other.size}\n flat={!isCurrent()}\n circle={typeof curr !== 'number'}\n type={isCurrent() ? 'primary' : 'default'}\n fill={isCurrent()}\n aria-current={isCurrent() && 'page'}\n onClick={() => changePage(curr)}\n >\n {curr}\n </n-button>\n </li>\n );\n }}\n </For>\n <li>\n <n-button\n class=\"pagination-item pagination-next\"\n size={other.size}\n flat={true}\n circle={true}\n disabled={page() === totalPages()}\n onClick={() => changePage(untrack(page) + 1)}\n >\n 〉\n </n-button>\n </li>\n </ul>\n </nav>\n </Show>\n );\n}\n\n/** API */\nexport interface PaginationProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义类名 */\n css?: string;\n /** 当前页数\n * @default 1\n */\n page?: number;\n /** 每页显示的数据条目数量\n * @default 20\n */\n pageSize?: number;\n /** 总数\n * @default 0\n */\n total?: number;\n /** 尺寸\n * @default 'normal'\n */\n size?: BasicConfig['size'];\n /** 用于显示数据总量和当前数据顺序;\n * 支持直接赋值给 'totalText' 属性\n * 或者通过[slot=\"total-text\"]插槽\n * @default true\n */\n totalText?: ((total: number, range: [start: number, end: number]) => JSX.Element) | false;\n /** 值修改时的回调方法 */\n onChange?(page: number, pageSize: number): void;\n children?: JSX.Element;\n}\nexport type PaginationElement = CustomElement<PaginationProps>;\n\ncustomElement<PaginationProps>(\n 'n-pagination',\n {\n class: void 0,\n css: void 0,\n page: void 0,\n pageSize: void 0,\n total: 0,\n size: void 0,\n onChange: void 0,\n totalText: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n css: el.css,\n onChange(page: number, pageSize: number) {\n el.dispatchEvent(\n new CustomEvent('change', {\n detail: [page, pageSize],\n }),\n );\n },\n },\n _,\n {\n totalText: (!!el.querySelector(\"[slot='total-text']\") as false) || _.totalText,\n },\n );\n\n createEffect(() => {\n el.removeAttribute('css');\n });\n return <Pagination {...props} />;\n },\n);\nexport default Pagination;\n"],"names":["For","Show","batch","createEffect","createMemo","createSignal","mergeProps","splitProps","untrack","isFunction","css","customElement","styles","theme","Pagination","_","baseStyle","local","other","page","setPage","pageSize","setPageSize","total","setTotal","totalPages","Math","ceil","pages","totals","arr","i","push","right","min","max","floor","maxCount","length","last","fast","splice","unshift","changePage","curr","p","next","onChange","TotalText","ranges","totalText","isCurrent","size","class","opt","el","element","props","dispatchEvent","CustomEvent","detail","querySelector","removeAttribute"],"rangeMappings":"","mappings":"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"}
|
package/es/popover/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e,t;function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e}).apply(this,arguments)}import{use as n}from"solid-js/web";import{template as r}from"solid-js/web";import{spread as i}from"solid-js/web";import{mergeProps as l}from"solid-js/web";import"solid-js/web";import{insert as s}from"solid-js/web";import{getOwner as p}from"solid-js/web";import{createComponent as a}from"solid-js/web";import{addEventListener as d}from"solid-js/web";let u=r("<style>"),c=r("<span>"),m=r("<div>"),g=r("<n-empty>",!0,!1);import{Show as f,
|
|
1
|
+
var e,t;function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e}).apply(this,arguments)}import{use as n}from"solid-js/web";import{template as r}from"solid-js/web";import{spread as i}from"solid-js/web";import{mergeProps as l}from"solid-js/web";import"solid-js/web";import{insert as s}from"solid-js/web";import{getOwner as p}from"solid-js/web";import{createComponent as a}from"solid-js/web";import{addEventListener as d}from"solid-js/web";let u=r("<style>"),c=r("<span>"),m=r("<div>"),g=r("<n-empty>",!0,!1);import{Show as f,createEffect as h,createMemo as v,createSignal as w,mergeProps as b,onCleanup as C,onMount as x,splitProps as y}from"solid-js";import j from"@moneko/common/lib/isElementInside";import M from"@moneko/common/lib/isEqual";import O from"@moneko/common/lib/isFunction";import k from"@moneko/common/lib/passiveSupported";import{css as E,cx as L}from"@moneko/css";import{customElement as P}from"solid-element";import{Portal as T}from"solid-js/web";import{popoverCss as R,portalCss as $}from"./style";import"../empty";import W from"../theme";export var TriggerOption;(e=TriggerOption||(TriggerOption={})).hover="hover",e.click="click",e.contextMenu="contextMenu",e.none="none";export var Placement;function S(e){let t,r,P,S;let{isDark:z,baseStyle:I}=W,[B]=y(b({trigger:"hover"},e),["class","css","popupClass","popupCss","size","trigger","open","disabled","onOpenChange","dropdownMatchSelectWidth","destroyInactive","arrow","placement","getPopupContainer","children","content"]),[H,A]=w(null),[D,q]=w({}),[F,N]=w(!1),[X,Y]=w("");function _(e){B.disabled||(B.onOpenChange&&B.onOpenChange(e),void 0===B.open&&A(e))}function G(){!1===H()&&(A(null),_(null))}function J(e){clearTimeout(P),P=setTimeout(()=>{var o;if(clearTimeout(P),(null==(o=e.target)?void 0:o.getAttribute("handle-closed"))==="false")return;let n=j(e.target,t);(H()&&!n||n&&"mousedown"!==e.type)&&_(!1)},"hover"===B.trigger?300:0)}h(()=>{void 0!==B.open&&A(B.open)}),h(()=>{H()&&B.dropdownMatchSelectWidth&&r&&Y(`.portal {width: ${r.offsetWidth}px;}`)});let K=function(e){clearTimeout(S),S=setTimeout(()=>{if(clearTimeout(S),!t||!r||!e&&"contextMenu"===B.trigger)return;if((null==e?void 0:e.type)==="scroll"&&"contextMenu"===B.trigger){_(!1);return}let o=r.getBoundingClientRect(),n=t.getBoundingClientRect(),i=n.width/2-o.width/2,l=window.innerHeight-o.bottom,s=B.placement,p=!(null==s?void 0:s.startsWith("top"))&&l>.8*t.offsetHeight&&l>o.top||(null==s?void 0:s.startsWith("bottom")),a=B.arrow?8:4,d={};switch(B.placement){case"bottomLeft":case"left":case"topLeft":d.left=o.left,d["--x"]=-n.width/2+16;break;case"bottomRight":case"right":case"topRight":d.left=o.right-n.width,d["--x"]=n.width/2-16;break;default:d.left=Math.abs(i>o.left?o.left:o.left-i),d["--x"]=-(d.left-o.left+i)}p?d.top=o.bottom+a:d.bottom=window.innerHeight-o.top+a,q(e=>M(e,d)?e:d),N(e=>!p===e?e:!p)},32)};function Q(e){clearTimeout(P),e.stopPropagation(),"contextMenu"===B.trigger&&"contextmenu"===e.type&&(e.preventDefault(),q(n=>o({},n,{left:e.clientX,top:e.clientY,"--x":-((null==t?void 0:t.getBoundingClientRect().width)||0)/2+16}))),_(!0)}let U=v(()=>O(B.getPopupContainer)?B.getPopupContainer(r):document.body),V=v(()=>{let e={},t={click:"onMouseDown",hover:"onMouseEnter",contextMenu:"onContextMenu",none:void 0}[B.trigger],o={hover:"onMouseLeave",click:void 0,contextMenu:void 0,none:void 0}[B.trigger];return Object.assign(e,t&&{[t]:Q},o&&{[o]:J}),e}),Z=v(()=>{let e=D();return`.portal {${Object.keys(e).map(t=>`${t}:${e[t]}px;`).join("")}z-index: 1;}`}),ee=v(()=>L("portal",B.arrow&&"arrow",`${H()?"in":"out"}-${F()?"up":"down"}`,B.size,B.popupClass)),et=v(()=>`:host {--popover-bg: ${z()?"#1f1f1f":"var(--component-bg)"};--popover-shadow-color: rgb(0 0 0 / 5%);}`);return h(()=>{H()&&(K(),window.addEventListener("scroll",K,{passive:k})),C(()=>{window.removeEventListener("scroll",K,!1)})}),x(()=>{"none"!==B.trigger&&document.documentElement.addEventListener("mousedown",J,!1)}),C(()=>{clearTimeout(P),document.documentElement.removeEventListener("mousedown",J,!1)}),[(()=>{let e=u();return s(e,I,null),s(e,R,null),s(e,()=>E(B.css),null),e})(),(()=>{let e=c(),t=r;return"function"==typeof t?n(t,e):r=e,i(e,l({get class(){return L("popover",B.size,B.class)}},V),!1,!0),s(e,()=>B.children),e})(),a(f,{get when(){return null!==H()||!B.destroyInactive},get children(){return a(T,{useShadow:!0,get mount(){return U()},get children(){return[(()=>{let e=u();return s(e,I,null),s(e,$,null),s(e,et,null),s(e,Z,null),s(e,X,null),s(e,()=>E(B.popupCss),null),e})(),(()=>{let e=m(),o=t;return d(e,"animationend",G),"function"==typeof o?n(o,e):t=e,i(e,l({get class(){return ee()}},V),!1,!0),s(e,a(f,{get when(){return B.content},get fallback(){return(()=>{let e=g();return e._$owner=p(),e})()},get children(){return B.content}})),e})()]}})}})]}(t=Placement||(Placement={})).bottomLeft="bottomLeft",t.bottom="bottom",t.bottomRight="bottomRight",t.topLeft="topLeft",t.top="top",t.topRight="topRight",t.left="left",t.right="right";export const defaultProps={class:void 0,css:void 0,content:void 0,getPopupContainer:void 0,trigger:void 0,open:void 0,onOpenChange:void 0,popupClass:void 0,popupCss:void 0,destroyInactive:!0,disabled:void 0,arrow:void 0,placement:void 0,dropdownMatchSelectWidth:void 0};P("n-popover",defaultProps,(e,t)=>{let o=t.element,n=b({onOpenChange(e){o.dispatchEvent(new CustomEvent("openchange",{detail:e}))},children:[...o.childNodes.values()]},e);return h(()=>{o.removeAttribute("css")}),a(S,n)});export default S;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/es/popover/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../components/popover/index.tsx"],"sourcesContent":["import {\n Show,\n createComponent,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n onCleanup,\n onMount,\n splitProps,\n} from 'solid-js';\nimport { isElementInside, isEqual, isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Portal } from 'solid-js/web';\nimport { popoverCss, portalCss } from './style';\nimport '../empty';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement } from '..';\n\nexport interface PopoverProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 内容 */\n content?: (() => JSX.Element) | JSX.Element;\n /** 挂载到指定的元素,值为一个返回对应 DOM 元素 默认 document.body */\n getPopupContainer?: (node?: HTMLElement | null) => HTMLElement;\n /** 触发行为\n * @default 'hover'\n */\n trigger?: keyof typeof TriggerOption;\n /** 打开内容气泡 */\n open?: boolean | null;\n /** 内容打开关闭时的回调方法 */\n onOpenChange?: (open: boolean | null) => void;\n /** 气泡的自定义类名 */\n popupClass?: string;\n /** 气泡的自定义样式表 */\n popupCss?: string;\n /** 关闭后是否销毁 */\n destroyInactive?: boolean;\n /** 不可用状态 */\n disabled?: boolean;\n /** 添加一个箭头显示 */\n arrow?: boolean;\n /** 指定气泡显示的方向 */\n placement?: keyof typeof Placement;\n /** 气泡宽度与触发dom一致 */\n dropdownMatchSelectWidth?: boolean;\n /** 尺寸\n * @default 'normal'\n */\n size?: BasicConfig['size'];\n children?: JSX.Element;\n}\n\nexport enum TriggerOption {\n /** 鼠标移入 */\n hover = 'hover',\n /** 点击 */\n click = 'click',\n /** 右键 */\n contextMenu = 'contextMenu',\n /** 无 */\n none = 'none',\n}\n\nexport enum Placement {\n /** 左下 */\n bottomLeft = 'bottomLeft',\n /** 下 */\n bottom = 'bottom',\n /** 右下 */\n bottomRight = 'bottomRight',\n /** 左上 */\n topLeft = 'topLeft',\n /** 上 */\n top = 'top',\n /** 右上 */\n topRight = 'topRight',\n /** 左 */\n left = 'left',\n /** 右 */\n right = 'right',\n}\n\ntype Posi = {\n left?: number;\n top?: number;\n right?: number;\n bottom?: number;\n '--x'?: number;\n};\n\ntype EventMap = {\n click?: string;\n hover?: string;\n contextMenu?: string;\n none?: never;\n [key: string]: string | undefined;\n};\nfunction Popover(props: PopoverProps) {\n const { isDark, baseStyle } = theme;\n const mp = mergeProps(\n {\n trigger: 'hover',\n },\n props,\n );\n const [local] = splitProps(mp, [\n 'class',\n 'css',\n 'popupClass',\n 'popupCss',\n 'size',\n 'trigger',\n 'open',\n 'disabled',\n 'onOpenChange',\n 'dropdownMatchSelectWidth',\n 'destroyInactive',\n 'arrow',\n 'placement',\n 'getPopupContainer',\n 'children',\n 'content',\n ]);\n let ref: HTMLDivElement | undefined;\n let childRef: HTMLSpanElement | undefined;\n let closeTimer: NodeJS.Timeout | undefined;\n const [open, setOpen] = createSignal<boolean | null>(null);\n const [posi, setPosi] = createSignal<Posi>({});\n const [up, setUp] = createSignal<boolean>(false);\n const [width, setWidth] = createSignal('');\n\n createEffect(() => {\n if (local.open !== void 0) {\n setOpen(local.open);\n }\n });\n function openChange(next: boolean | null) {\n if (!local.disabled) {\n if (local.onOpenChange) {\n local.onOpenChange(next);\n }\n if (local.open === void 0) {\n setOpen(next);\n }\n }\n }\n function exit() {\n if (open() === false) {\n setOpen(null);\n openChange(null);\n }\n }\n createEffect(() => {\n if (open() && local.dropdownMatchSelectWidth && childRef) {\n setWidth(`.portal {width: ${childRef.offsetWidth}px;}`);\n }\n });\n\n function close(e: MouseEvent | Event) {\n clearTimeout(closeTimer);\n closeTimer = setTimeout(\n () => {\n clearTimeout(closeTimer);\n if ((e.target as HTMLElement)?.getAttribute('handle-closed') === 'false') {\n return;\n }\n const isContains = isElementInside(e.target as Element, ref);\n\n if ((open() && !isContains) || (isContains && e.type !== 'mousedown')) {\n openChange(false);\n }\n },\n local.trigger === 'hover' ? 300 : 0,\n );\n }\n let portalTimer: NodeJS.Timeout | undefined;\n const showPortal = function (e?: Event): void {\n clearTimeout(portalTimer);\n portalTimer = setTimeout(() => {\n clearTimeout(portalTimer);\n if (!ref || !childRef || (!e && local.trigger === 'contextMenu')) {\n return;\n }\n if (e?.type === 'scroll' && local.trigger === 'contextMenu') {\n openChange(false);\n return;\n }\n const elRect = childRef!.getBoundingClientRect();\n const portalRect = ref!.getBoundingClientRect();\n const offsetX = portalRect.width / 2 - elRect.width / 2;\n const margin = window.innerHeight - elRect.bottom;\n const _placement = local.placement;\n\n const _isBottom =\n (!_placement?.startsWith('top') &&\n margin > ref!.offsetHeight * 0.8 &&\n margin > elRect.top) ||\n _placement?.startsWith('bottom');\n const arrowHeight = local.arrow ? 8 : 4;\n const _posi: Posi = {};\n\n switch (local.placement) {\n case 'bottomLeft':\n case 'left':\n case 'topLeft':\n _posi.left = elRect.left;\n _posi['--x'] = -portalRect.width / 2 + 16;\n break;\n case 'bottomRight':\n case 'right':\n case 'topRight':\n _posi.left = elRect.right - portalRect.width;\n _posi['--x'] = portalRect.width / 2 - 16;\n break;\n case 'bottom':\n case 'top':\n default:\n _posi.left = Math.abs(offsetX > elRect.left ? elRect.left : elRect.left - offsetX);\n _posi['--x'] = -(_posi.left - elRect.left + offsetX);\n break;\n }\n if (_isBottom) {\n _posi.top = elRect.bottom + arrowHeight;\n } else {\n _posi.bottom = window.innerHeight - elRect.top + arrowHeight;\n }\n setPosi((prev) => {\n return isEqual(prev, _posi) ? prev : _posi;\n });\n setUp((prev) => {\n return prev === !_isBottom ? prev : !_isBottom;\n });\n }, 32);\n };\n\n function handleOpen(e: MouseEvent) {\n clearTimeout(closeTimer);\n e.stopPropagation();\n if (local.trigger === 'contextMenu' && e.type === 'contextmenu') {\n e.preventDefault();\n setPosi((prev) => ({\n ...prev,\n left: e.clientX,\n top: e.clientY,\n ['--x']: -(ref?.getBoundingClientRect().width || 0) / 2 + 16,\n }));\n }\n openChange(true);\n }\n\n const container = createMemo(() => {\n if (isFunction(local.getPopupContainer)) {\n return local.getPopupContainer(childRef);\n }\n return document.body;\n });\n const childrenProps = createMemo(() => {\n const _props: Partial<Record<keyof EventMap, void>> = {};\n\n const openEvent: EventMap = {\n click: 'onMouseDown',\n hover: 'onMouseEnter',\n contextMenu: 'onContextMenu',\n none: void 0,\n };\n const closeEvent: EventMap = {\n hover: 'onMouseLeave',\n click: void 0,\n contextMenu: void 0,\n none: void 0,\n };\n\n const openFn = openEvent[local.trigger];\n const closeFn = closeEvent[local.trigger];\n\n Object.assign(\n _props,\n openFn && {\n [openFn]: handleOpen,\n },\n closeFn && {\n [closeFn]: close,\n },\n );\n\n return _props;\n });\n\n const portalStyle = createMemo(() => {\n const p = posi();\n\n // max-block-size: calc(100vb - ${(up() ? p.bottom : p.top) || 0}px);\n return `.portal {${Object.keys(p)\n .map((k) => `${k}:${p[k as keyof Posi]}px;`)\n .join('')}z-index: 1;}`;\n });\n const portalCls = createMemo(() => {\n return cx(\n 'portal',\n local.arrow && 'arrow',\n `${open() ? 'in' : 'out'}-${up() ? 'up' : 'down'}`,\n local.size,\n local.popupClass,\n );\n });\n const hostStyle = createMemo(() => {\n return `:host {--popover-bg: ${\n isDark() ? '#1f1f1f' : 'var(--component-bg)'\n };--popover-shadow-color: rgb(0 0 0 / 5%);}`;\n });\n\n createEffect(() => {\n if (open()) {\n showPortal();\n\n window.addEventListener('scroll', showPortal, {\n passive: passiveSupported,\n });\n }\n onCleanup(() => {\n window.removeEventListener('scroll', showPortal, false);\n });\n });\n onMount(() => {\n if (local.trigger !== 'none') {\n document.documentElement.addEventListener('mousedown', close, false);\n }\n });\n onCleanup(() => {\n clearTimeout(closeTimer);\n document.documentElement.removeEventListener('mousedown', close, false);\n });\n\n return (\n <>\n <style>\n {baseStyle()}\n {popoverCss}\n {css(local.css)}\n </style>\n <span ref={childRef} class={cx('popover', local.size, local.class)} {...childrenProps()}>\n {local.children}\n </span>\n <Show when={open() !== null || !local.destroyInactive}>\n <Portal useShadow mount={container()}>\n <style>\n {baseStyle()}\n {portalCss}\n {hostStyle()}\n {portalStyle()}\n {width()}\n {css(local.popupCss)}\n </style>\n <div ref={ref} onAnimationEnd={exit} class={portalCls()} {...childrenProps()}>\n <Show when={local.content} fallback={<n-empty />}>\n {local.content as JSX.Element}\n </Show>\n </div>\n </Portal>\n </Show>\n </>\n );\n}\n\nexport type PopoverElement = CustomElement<PopoverProps, 'onOpenChange'>;\n\nexport const defaultProps = {\n class: void 0,\n css: void 0,\n content: void 0,\n getPopupContainer: void 0,\n trigger: void 0,\n open: void 0,\n onOpenChange: void 0,\n popupClass: void 0,\n popupCss: void 0,\n destroyInactive: true,\n disabled: void 0,\n arrow: void 0,\n placement: void 0,\n dropdownMatchSelectWidth: void 0,\n};\ncustomElement<PopoverProps>('n-popover', defaultProps, (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n onOpenChange(next: boolean | null) {\n el.dispatchEvent(\n new CustomEvent('openchange', {\n detail: next,\n }),\n );\n },\n children: [...el.childNodes.values()],\n },\n _,\n );\n\n createEffect(() => {\n el.removeAttribute('css');\n });\n return createComponent(Popover, props);\n});\nexport default Popover;\n"],"names":["TriggerOption","Placement","Show","createComponent","createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","splitProps","isElementInside","isEqual","isFunction","passiveSupported","css","cx","customElement","Portal","popoverCss","portalCss","theme","Popover","props","ref","childRef","closeTimer","portalTimer","isDark","baseStyle","local","trigger","open","setOpen","posi","setPosi","up","setUp","width","setWidth","openChange","next","disabled","onOpenChange","exit","close","e","clearTimeout","setTimeout","target","getAttribute","isContains","type","dropdownMatchSelectWidth","offsetWidth","showPortal","elRect","getBoundingClientRect","portalRect","offsetX","margin","window","innerHeight","bottom","_placement","placement","_isBottom","startsWith","offsetHeight","top","arrowHeight","arrow","_posi","left","right","Math","abs","prev","handleOpen","stopPropagation","preventDefault","clientX","clientY","container","getPopupContainer","document","body","childrenProps","_props","openFn","openEvent","click","hover","contextMenu","none","closeFn","closeEvent","Object","assign","portalStyle","p","keys","map","k","join","portalCls","size","popupClass","hostStyle","addEventListener","passive","removeEventListener","documentElement","class","children","destroyInactive","popupCss","content","defaultProps","_","opt","el","element","dispatchEvent","CustomEvent","detail","childNodes","values","removeAttribute"],"rangeMappings":"","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../components/popover/index.tsx"],"sourcesContent":["import {\n Show,\n createEffect,\n createMemo,\n createSignal,\n mergeProps,\n onCleanup,\n onMount,\n splitProps,\n} from 'solid-js';\nimport { isElementInside, isEqual, isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { Portal } from 'solid-js/web';\nimport { popoverCss, portalCss } from './style';\nimport '../empty';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement } from '..';\n\nexport interface PopoverProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 内容 */\n content?: (() => JSX.Element) | JSX.Element;\n /** 挂载到指定的元素,值为一个返回对应 DOM 元素 默认 document.body */\n getPopupContainer?: (node?: HTMLElement | null) => HTMLElement;\n /** 触发行为\n * @default 'hover'\n */\n trigger?: keyof typeof TriggerOption;\n /** 打开内容气泡 */\n open?: boolean | null;\n /** 内容打开关闭时的回调方法 */\n onOpenChange?: (open: boolean | null) => void;\n /** 气泡的自定义类名 */\n popupClass?: string;\n /** 气泡的自定义样式表 */\n popupCss?: string;\n /** 关闭后是否销毁 */\n destroyInactive?: boolean;\n /** 不可用状态 */\n disabled?: boolean;\n /** 添加一个箭头显示 */\n arrow?: boolean;\n /** 指定气泡显示的方向 */\n placement?: keyof typeof Placement;\n /** 气泡宽度与触发dom一致 */\n dropdownMatchSelectWidth?: boolean;\n /** 尺寸\n * @default 'normal'\n */\n size?: BasicConfig['size'];\n children?: JSX.Element;\n}\n\nexport enum TriggerOption {\n /** 鼠标移入 */\n hover = 'hover',\n /** 点击 */\n click = 'click',\n /** 右键 */\n contextMenu = 'contextMenu',\n /** 无 */\n none = 'none',\n}\n\nexport enum Placement {\n /** 左下 */\n bottomLeft = 'bottomLeft',\n /** 下 */\n bottom = 'bottom',\n /** 右下 */\n bottomRight = 'bottomRight',\n /** 左上 */\n topLeft = 'topLeft',\n /** 上 */\n top = 'top',\n /** 右上 */\n topRight = 'topRight',\n /** 左 */\n left = 'left',\n /** 右 */\n right = 'right',\n}\n\ntype Posi = {\n left?: number;\n top?: number;\n right?: number;\n bottom?: number;\n '--x'?: number;\n};\n\ntype EventMap = {\n click?: string;\n hover?: string;\n contextMenu?: string;\n none?: never;\n [key: string]: string | undefined;\n};\nfunction Popover(props: PopoverProps) {\n const { isDark, baseStyle } = theme;\n const mp = mergeProps(\n {\n trigger: 'hover',\n },\n props,\n );\n const [local] = splitProps(mp, [\n 'class',\n 'css',\n 'popupClass',\n 'popupCss',\n 'size',\n 'trigger',\n 'open',\n 'disabled',\n 'onOpenChange',\n 'dropdownMatchSelectWidth',\n 'destroyInactive',\n 'arrow',\n 'placement',\n 'getPopupContainer',\n 'children',\n 'content',\n ]);\n let ref: HTMLDivElement | undefined;\n let childRef: HTMLSpanElement | undefined;\n let closeTimer: NodeJS.Timeout | undefined;\n const [open, setOpen] = createSignal<boolean | null>(null);\n const [posi, setPosi] = createSignal<Posi>({});\n const [up, setUp] = createSignal<boolean>(false);\n const [width, setWidth] = createSignal('');\n\n createEffect(() => {\n if (local.open !== void 0) {\n setOpen(local.open);\n }\n });\n function openChange(next: boolean | null) {\n if (!local.disabled) {\n if (local.onOpenChange) {\n local.onOpenChange(next);\n }\n if (local.open === void 0) {\n setOpen(next);\n }\n }\n }\n function exit() {\n if (open() === false) {\n setOpen(null);\n openChange(null);\n }\n }\n createEffect(() => {\n if (open() && local.dropdownMatchSelectWidth && childRef) {\n setWidth(`.portal {width: ${childRef.offsetWidth}px;}`);\n }\n });\n\n function close(e: MouseEvent | Event) {\n clearTimeout(closeTimer);\n closeTimer = setTimeout(\n () => {\n clearTimeout(closeTimer);\n if ((e.target as HTMLElement)?.getAttribute('handle-closed') === 'false') {\n return;\n }\n const isContains = isElementInside(e.target as Element, ref);\n\n if ((open() && !isContains) || (isContains && e.type !== 'mousedown')) {\n openChange(false);\n }\n },\n local.trigger === 'hover' ? 300 : 0,\n );\n }\n let portalTimer: NodeJS.Timeout | undefined;\n const showPortal = function (e?: Event): void {\n clearTimeout(portalTimer);\n portalTimer = setTimeout(() => {\n clearTimeout(portalTimer);\n if (!ref || !childRef || (!e && local.trigger === 'contextMenu')) {\n return;\n }\n if (e?.type === 'scroll' && local.trigger === 'contextMenu') {\n openChange(false);\n return;\n }\n const elRect = childRef!.getBoundingClientRect();\n const portalRect = ref!.getBoundingClientRect();\n const offsetX = portalRect.width / 2 - elRect.width / 2;\n const margin = window.innerHeight - elRect.bottom;\n const _placement = local.placement;\n\n const _isBottom =\n (!_placement?.startsWith('top') &&\n margin > ref!.offsetHeight * 0.8 &&\n margin > elRect.top) ||\n _placement?.startsWith('bottom');\n const arrowHeight = local.arrow ? 8 : 4;\n const _posi: Posi = {};\n\n switch (local.placement) {\n case 'bottomLeft':\n case 'left':\n case 'topLeft':\n _posi.left = elRect.left;\n _posi['--x'] = -portalRect.width / 2 + 16;\n break;\n case 'bottomRight':\n case 'right':\n case 'topRight':\n _posi.left = elRect.right - portalRect.width;\n _posi['--x'] = portalRect.width / 2 - 16;\n break;\n case 'bottom':\n case 'top':\n default:\n _posi.left = Math.abs(offsetX > elRect.left ? elRect.left : elRect.left - offsetX);\n _posi['--x'] = -(_posi.left - elRect.left + offsetX);\n break;\n }\n if (_isBottom) {\n _posi.top = elRect.bottom + arrowHeight;\n } else {\n _posi.bottom = window.innerHeight - elRect.top + arrowHeight;\n }\n setPosi((prev) => {\n return isEqual(prev, _posi) ? prev : _posi;\n });\n setUp((prev) => {\n return prev === !_isBottom ? prev : !_isBottom;\n });\n }, 32);\n };\n\n function handleOpen(e: MouseEvent) {\n clearTimeout(closeTimer);\n e.stopPropagation();\n if (local.trigger === 'contextMenu' && e.type === 'contextmenu') {\n e.preventDefault();\n setPosi((prev) => ({\n ...prev,\n left: e.clientX,\n top: e.clientY,\n ['--x']: -(ref?.getBoundingClientRect().width || 0) / 2 + 16,\n }));\n }\n openChange(true);\n }\n\n const container = createMemo(() => {\n if (isFunction(local.getPopupContainer)) {\n return local.getPopupContainer(childRef);\n }\n return document.body;\n });\n const childrenProps = createMemo(() => {\n const _props: Partial<Record<keyof EventMap, void>> = {};\n\n const openEvent: EventMap = {\n click: 'onMouseDown',\n hover: 'onMouseEnter',\n contextMenu: 'onContextMenu',\n none: void 0,\n };\n const closeEvent: EventMap = {\n hover: 'onMouseLeave',\n click: void 0,\n contextMenu: void 0,\n none: void 0,\n };\n\n const openFn = openEvent[local.trigger];\n const closeFn = closeEvent[local.trigger];\n\n Object.assign(\n _props,\n openFn && {\n [openFn]: handleOpen,\n },\n closeFn && {\n [closeFn]: close,\n },\n );\n\n return _props;\n });\n\n const portalStyle = createMemo(() => {\n const p = posi();\n\n // max-block-size: calc(100vb - ${(up() ? p.bottom : p.top) || 0}px);\n return `.portal {${Object.keys(p)\n .map((k) => `${k}:${p[k as keyof Posi]}px;`)\n .join('')}z-index: 1;}`;\n });\n const portalCls = createMemo(() => {\n return cx(\n 'portal',\n local.arrow && 'arrow',\n `${open() ? 'in' : 'out'}-${up() ? 'up' : 'down'}`,\n local.size,\n local.popupClass,\n );\n });\n const hostStyle = createMemo(() => {\n return `:host {--popover-bg: ${\n isDark() ? '#1f1f1f' : 'var(--component-bg)'\n };--popover-shadow-color: rgb(0 0 0 / 5%);}`;\n });\n\n createEffect(() => {\n if (open()) {\n showPortal();\n\n window.addEventListener('scroll', showPortal, {\n passive: passiveSupported,\n });\n }\n onCleanup(() => {\n window.removeEventListener('scroll', showPortal, false);\n });\n });\n onMount(() => {\n if (local.trigger !== 'none') {\n document.documentElement.addEventListener('mousedown', close, false);\n }\n });\n onCleanup(() => {\n clearTimeout(closeTimer);\n document.documentElement.removeEventListener('mousedown', close, false);\n });\n\n return (\n <>\n <style>\n {baseStyle()}\n {popoverCss}\n {css(local.css)}\n </style>\n <span ref={childRef} class={cx('popover', local.size, local.class)} {...childrenProps()}>\n {local.children}\n </span>\n <Show when={open() !== null || !local.destroyInactive}>\n <Portal useShadow mount={container()}>\n <style>\n {baseStyle()}\n {portalCss}\n {hostStyle()}\n {portalStyle()}\n {width()}\n {css(local.popupCss)}\n </style>\n <div ref={ref} onAnimationEnd={exit} class={portalCls()} {...childrenProps()}>\n <Show when={local.content} fallback={<n-empty />}>\n {local.content as JSX.Element}\n </Show>\n </div>\n </Portal>\n </Show>\n </>\n );\n}\n\nexport type PopoverElement = CustomElement<PopoverProps, 'onOpenChange'>;\n\nexport const defaultProps = {\n class: void 0,\n css: void 0,\n content: void 0,\n getPopupContainer: void 0,\n trigger: void 0,\n open: void 0,\n onOpenChange: void 0,\n popupClass: void 0,\n popupCss: void 0,\n destroyInactive: true,\n disabled: void 0,\n arrow: void 0,\n placement: void 0,\n dropdownMatchSelectWidth: void 0,\n};\ncustomElement<PopoverProps>('n-popover', defaultProps, (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n onOpenChange(next: boolean | null) {\n el.dispatchEvent(\n new CustomEvent('openchange', {\n detail: next,\n }),\n );\n },\n children: [...el.childNodes.values()],\n },\n _,\n );\n\n createEffect(() => {\n el.removeAttribute('css');\n });\n return <Popover {...props} />;\n});\nexport default Popover;\n"],"names":["TriggerOption","Placement","Show","createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","splitProps","isElementInside","isEqual","isFunction","passiveSupported","css","cx","customElement","Portal","popoverCss","portalCss","theme","Popover","props","ref","childRef","closeTimer","portalTimer","isDark","baseStyle","local","trigger","open","setOpen","posi","setPosi","up","setUp","width","setWidth","openChange","next","disabled","onOpenChange","exit","close","e","clearTimeout","setTimeout","target","getAttribute","isContains","type","dropdownMatchSelectWidth","offsetWidth","showPortal","elRect","getBoundingClientRect","portalRect","offsetX","margin","window","innerHeight","bottom","_placement","placement","_isBottom","startsWith","offsetHeight","top","arrowHeight","arrow","_posi","left","right","Math","abs","prev","handleOpen","stopPropagation","preventDefault","clientX","clientY","container","getPopupContainer","document","body","childrenProps","_props","openFn","openEvent","click","hover","contextMenu","none","closeFn","closeEvent","Object","assign","portalStyle","p","keys","map","k","join","portalCls","size","popupClass","hostStyle","addEventListener","passive","removeEventListener","documentElement","class","children","destroyInactive","popupCss","content","defaultProps","_","opt","el","element","dispatchEvent","CustomEvent","detail","childNodes","values","removeAttribute"],"rangeMappings":"","mappings":"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"}
|
package/es/provider/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{template as e}from"solid-js/web";import{memo as t}from"solid-js/web";import{insert as m}from"solid-js/web";let
|
|
1
|
+
import{template as e}from"solid-js/web";import{memo as t}from"solid-js/web";import{insert as o}from"solid-js/web";import{createComponent as m}from"solid-js/web";let r=e("<style>");import{createEffect as s,mergeProps as l}from"solid-js";import{customElement as i,noShadowDOM as n}from"solid-element";import p from"../theme";function c(e){let{baseStyle:m,scheme:l,setScheme:i}=p;return n(),s(()=>{null==e.onScheme||e.onScheme.call(e,l())}),s(()=>{e.scheme&&i(e.scheme)}),[(()=>{let e=r();return o(e,m),e})(),t(()=>e.children)]}i("n-provider",(e,t)=>{let o=t.element;return m(c,l({onScheme(e){o.dispatchEvent(new CustomEvent("scheme",{detail:e}))}},e))});export default c;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|