neko-ui 2.10.1 → 2.10.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.
|
@@ -5,4 +5,4 @@ import{use as t}from"solid-js/web";import{template as e}from"solid-js/web";impor
|
|
|
5
5
|
white-space: break-spaces;
|
|
6
6
|
cursor: auto;
|
|
7
7
|
}
|
|
8
|
-
`;function b(t,e,i,r,l){let s=new RegExp(i,r).exec(l);if(s){let i;let r=new Range;i=0+s.index,t.firstChild&&(r.setStart(t.firstChild,i),i+=s[0].length,r.setEnd(t.firstChild,i));let l=CSS.highlights.get(e);l?l.add(r):CSS.highlights.set(e,new Highlight().add(r))}}function S(e){let f;let{baseStyle:x}=w,u=d(),C=a(()=>{var t;return`${e.text}${null!=(t=e.extra)?t:""}`});return g(()=>{if(f&&e.highlight){if(Array.isArray(e.highlight))for(let t=0,i=e.highlight.length;t<i;t++){let i=e.highlight[t],r="string"==typeof i,l=r?i:i.highlight;l.length&&b(f,u,l,r?e.flag:i.flag,C())}else e.highlight.length&&b(f,u,e.highlight,e.flag,C())}}),g(()=>{if(f&&"string"==typeof e.extra){var t;let i=new Range,r=(null==(t=e.text)?void 0:t.length)||0;f.firstChild&&(i.setStart(f.firstChild,r),r+=e.extra.length,i.setEnd(f.firstChild,r));let l=CSS.highlights.get(u);l?l.add(i):CSS.highlights.set(u,new Highlight().add(i))}}),[(()=>{let t=h(),e=t.firstChild;return r(()=>e.data=x()),t})(),(()=>{let t=o();return t.textContent=v,t})(),(()=>{let t=o();return t.textContent=`::highlight(${u}) {color: var(--primary-color, #5794ff);}`,t})(),l(m,{get when(){return e.css},get children(){return c(e.css)}}),(()=>{let l=n(),h=f;return"function"==typeof h?t(h,l):f=l,i(l,C),r(()=>s(l,p("text",e.class))),l})()]}x("n-highlight-text",{class:void 0,css:void 0,text:void 0,highlight:void 0,flag:void 0,extra:void 0,children:void 0},(t,e)=>{let i=e.element,r=f({text:i.textContent,css:i.css},t);return g(()=>{u(i,["css","text","highlight","extra"]),i.replaceChildren()}),[(()=>{let t=o();return t.textContent=C,t})(),l(S,r)]});export default S;
|
|
8
|
+
`;function b(t,e,i,r,l){let s=new RegExp(i,r).exec(l);if(s){let i;let r=new Range;i=0+s.index,t.firstChild&&(r.setStart(t.firstChild,i),i+=s[0].length,r.setEnd(t.firstChild,i));let l=CSS.highlights.get(e);l?l.add(r):CSS.highlights.set(e,new Highlight().add(r))}}function S(e){let f;let{baseStyle:x}=w,u=d(),C=a(()=>{var t;return`${e.text}${null!=(t=e.extra)?t:""}`});return g(()=>{if(f&&e.highlight){if(Array.isArray(e.highlight))for(let t=0,i=e.highlight.length;t<i;t++){let i=e.highlight[t],r="string"==typeof i,l=r?i:i.highlight;l.length&&b(f,u,l,r?e.flag:i.flag,C())}else e.highlight.length&&b(f,u,e.highlight,e.flag,C())}}),g(()=>{if(f&&"string"==typeof e.extra){var t;let i=new Range,r=(null==(t=e.text)?void 0:t.length)||0;f.firstChild&&(i.setStart(f.firstChild,r),r+=e.extra.length,i.setEnd(f.firstChild,r));let l=CSS.highlights.get(u);l?l.add(i):CSS.highlights.set(u,new Highlight().add(i))}}),[(()=>{let t=h(),e=t.firstChild;return r(()=>e.data=x()),t})(),(()=>{let t=o();return t.textContent=v,t})(),(()=>{let t=o();return t.textContent=`::highlight(${u}) {color: var(--primary-color, #5794ff);}`,t})(),l(m,{get when(){return e.css},get children(){let t=h(),i=t.firstChild;return r(()=>i.data=c(e.css)),t}}),(()=>{let l=n(),h=f;return"function"==typeof h?t(h,l):f=l,i(l,C),r(()=>s(l,p("text",e.class))),l})()]}x("n-highlight-text",{class:void 0,css:void 0,text:void 0,highlight:void 0,flag:void 0,extra:void 0,children:void 0},(t,e)=>{let i=e.element,r=f({text:i.textContent,css:i.css},t);return g(()=>{u(i,["css","text","highlight","extra"]),i.replaceChildren()}),[(()=>{let t=o();return t.textContent=C,t})(),l(S,r)]});export default S;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/highlight-text/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createUniqueId, mergeProps, Show } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { inline } from '../theme';\n\nconst style = css`\n .text {\n word-break: break-word;\n word-wrap: break-word;\n white-space: break-spaces;\n cursor: auto;\n }\n`;\n\nfunction highlight(\n box: HTMLDivElement,\n id: string,\n regExp: string,\n flag: HighlightRule['flag'],\n text: string,\n) {\n const regex = new RegExp(regExp, flag);\n const match = regex.exec(text);\n\n if (match) {\n const range = new Range();\n let pos = 0;\n\n pos += match.index;\n if (box.firstChild) {\n range.setStart(box.firstChild, pos);\n pos += match[0].length;\n range.setEnd(box.firstChild, pos);\n }\n const highlight = CSS.highlights.get(id);\n\n if (highlight) {\n highlight.add(range);\n } else {\n CSS.highlights.set(id, new Highlight().add(range));\n }\n }\n}\n\nexport type HighlightTextJson =\n | {\n highlight?: boolean;\n text: string;\n }[]\n | null;\nexport interface HighlightTextProps {\n /** 自定义样式表 */\n css?: string;\n /** 自定义类名 */\n class?: string;\n /** 内容 */\n text?: string;\n /** 需要高亮的内容 */\n highlight?: string | (HighlightRule | string)[];\n /** RegExp flag */\n flag?: HighlightRule['flag'];\n /** 额外需要高亮的内容 */\n extra?: string;\n children?: string;\n}\n\ninterface HighlightRule {\n /** 需要高亮的内容 */\n highlight: string;\n /** RegExp flag */\n flag?: 'g' | 'i' | 'm' | 'u' | 'y';\n}\n\nexport interface Highlight {\n /** 命中高亮 */\n hit?: boolean;\n /** 内容 */\n text: string;\n}\n\nfunction HighlightText(props: HighlightTextProps) {\n const { baseStyle } = theme;\n let box: HTMLDivElement | undefined;\n const id = createUniqueId();\n const text = createMemo(() => `${props.text}${props.extra ?? ''}`);\n\n createEffect(() => {\n if (box && props.highlight) {\n if (Array.isArray(props.highlight)) {\n for (let i = 0, len = props.highlight.length; i < len; i++) {\n const item = props.highlight[i];\n const isOne = typeof item === 'string';\n const hitStr = isOne ? item : item.highlight;\n\n if (hitStr.length) {\n highlight(box, id, hitStr, isOne ? props.flag : item.flag, text());\n }\n }\n } else if (props.highlight.length) {\n highlight(box, id, props.highlight, props.flag, text());\n }\n }\n });\n createEffect(() => {\n if (box && typeof props.extra === 'string') {\n const range = new Range();\n let pos = props.text?.length || 0;\n\n if (box.firstChild) {\n range.setStart(box.firstChild, pos);\n pos += props.extra.length;\n range.setEnd(box.firstChild, pos);\n }\n const highlight = CSS.highlights.get(id);\n\n if (highlight) {\n highlight.add(range);\n } else {\n CSS.highlights.set(id, new Highlight().add(range));\n }\n }\n });\n\n return (\n <>\n <style textContent={baseStyle()} />\n <style textContent={style} />\n <style textContent={`::highlight(${id}) {color: var(--primary-color, #5794ff);}`} />\n <Show when={props.css}
|
|
1
|
+
{"version":3,"sources":["components/highlight-text/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createUniqueId, mergeProps, Show } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { inline } from '../theme';\n\nconst style = css`\n .text {\n word-break: break-word;\n word-wrap: break-word;\n white-space: break-spaces;\n cursor: auto;\n }\n`;\n\nfunction highlight(\n box: HTMLDivElement,\n id: string,\n regExp: string,\n flag: HighlightRule['flag'],\n text: string,\n) {\n const regex = new RegExp(regExp, flag);\n const match = regex.exec(text);\n\n if (match) {\n const range = new Range();\n let pos = 0;\n\n pos += match.index;\n if (box.firstChild) {\n range.setStart(box.firstChild, pos);\n pos += match[0].length;\n range.setEnd(box.firstChild, pos);\n }\n const highlight = CSS.highlights.get(id);\n\n if (highlight) {\n highlight.add(range);\n } else {\n CSS.highlights.set(id, new Highlight().add(range));\n }\n }\n}\n\nexport type HighlightTextJson =\n | {\n highlight?: boolean;\n text: string;\n }[]\n | null;\nexport interface HighlightTextProps {\n /** 自定义样式表 */\n css?: string;\n /** 自定义类名 */\n class?: string;\n /** 内容 */\n text?: string;\n /** 需要高亮的内容 */\n highlight?: string | (HighlightRule | string)[];\n /** RegExp flag */\n flag?: HighlightRule['flag'];\n /** 额外需要高亮的内容 */\n extra?: string;\n children?: string;\n}\n\ninterface HighlightRule {\n /** 需要高亮的内容 */\n highlight: string;\n /** RegExp flag */\n flag?: 'g' | 'i' | 'm' | 'u' | 'y';\n}\n\nexport interface Highlight {\n /** 命中高亮 */\n hit?: boolean;\n /** 内容 */\n text: string;\n}\n\nfunction HighlightText(props: HighlightTextProps) {\n const { baseStyle } = theme;\n let box: HTMLDivElement | undefined;\n const id = createUniqueId();\n const text = createMemo(() => `${props.text}${props.extra ?? ''}`);\n\n createEffect(() => {\n if (box && props.highlight) {\n if (Array.isArray(props.highlight)) {\n for (let i = 0, len = props.highlight.length; i < len; i++) {\n const item = props.highlight[i];\n const isOne = typeof item === 'string';\n const hitStr = isOne ? item : item.highlight;\n\n if (hitStr.length) {\n highlight(box, id, hitStr, isOne ? props.flag : item.flag, text());\n }\n }\n } else if (props.highlight.length) {\n highlight(box, id, props.highlight, props.flag, text());\n }\n }\n });\n createEffect(() => {\n if (box && typeof props.extra === 'string') {\n const range = new Range();\n let pos = props.text?.length || 0;\n\n if (box.firstChild) {\n range.setStart(box.firstChild, pos);\n pos += props.extra.length;\n range.setEnd(box.firstChild, pos);\n }\n const highlight = CSS.highlights.get(id);\n\n if (highlight) {\n highlight.add(range);\n } else {\n CSS.highlights.set(id, new Highlight().add(range));\n }\n }\n });\n\n return (\n <>\n <style textContent={baseStyle()} />\n <style textContent={style} />\n <style textContent={`::highlight(${id}) {color: var(--primary-color, #5794ff);}`} />\n <Show when={props.css}>\n <style textContent={css(props.css)} />\n </Show>\n <div ref={box} class={cx('text', props.class)}>\n {text()}\n </div>\n </>\n );\n}\n\nexport type HighlightTextElement = CustomElement<HighlightTextProps>;\ncustomElement<HighlightTextProps>(\n 'n-highlight-text',\n {\n class: void 0,\n css: void 0,\n text: void 0,\n highlight: void 0,\n flag: void 0,\n extra: void 0,\n children: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n text: el.textContent,\n css: el.css,\n },\n _,\n );\n\n createEffect(() => {\n clearAttribute(el, ['css', 'text', 'highlight', 'extra']);\n el.replaceChildren();\n });\n return (\n <>\n <style textContent={inline} />\n <HighlightText {...props} />\n </>\n );\n },\n);\nexport default HighlightText;\n"],"names":["createEffect","createMemo","createUniqueId","mergeProps","Show","css","cx","customElement","clearAttribute","theme","inline","style","highlight","box","id","regExp","flag","text","match","regex","RegExp","exec","pos","range","Range","index","firstChild","setStart","length","setEnd","CSS","highlights","get","add","set","Highlight","HighlightText","props","baseStyle","extra","Array","isArray","i","len","item","isOne","hitStr","class","children","_","opt","el","element","textContent","replaceChildren"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return d}});const e=require("solid-js/web"),t=require("solid-js"),r=require("@moneko/css"),i=require("solid-element"),n=require("../basic-config"),l=o(require("../theme"));function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(s=function(e){return e?r:t})(e)}function o(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=s(t);if(r&&r.has(e))return r.get(e);var i={__proto__:null},n=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&Object.prototype.hasOwnProperty.call(e,l)){var o=n?Object.getOwnPropertyDescriptor(e,l):null;o&&(o.get||o.set)?Object.defineProperty(i,l,o):i[l]=e[l]}return i.default=e,r&&r.set(e,i),i}const h=(0,e.template)("<style> "),a=(0,e.template)("<style>"),c=(0,e.template)("<div>"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return d}});const e=require("solid-js/web"),t=require("solid-js"),r=require("@moneko/css"),i=require("solid-element"),n=require("../basic-config"),l=o(require("../theme"));function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(s=function(e){return e?r:t})(e)}function o(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=s(t);if(r&&r.has(e))return r.get(e);var i={__proto__:null},n=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&Object.prototype.hasOwnProperty.call(e,l)){var o=n?Object.getOwnPropertyDescriptor(e,l):null;o&&(o.get||o.set)?Object.defineProperty(i,l,o):i[l]=e[l]}return i.default=e,r&&r.set(e,i),i}const h=(0,e.template)("<style> "),a=(0,e.template)("<style>"),c=(0,e.template)("<div>"),f=(0,r.css)`
|
|
2
2
|
.text {
|
|
3
3
|
word-break: break-word;
|
|
4
4
|
word-wrap: break-word;
|
|
5
5
|
white-space: break-spaces;
|
|
6
6
|
cursor: auto;
|
|
7
7
|
}
|
|
8
|
-
`;function
|
|
8
|
+
`;function g(e,t,r,i,n){let l=new RegExp(r,i).exec(n);if(l){let r;let i=new Range;r=0+l.index,e.firstChild&&(i.setStart(e.firstChild,r),r+=l[0].length,i.setEnd(e.firstChild,r));let n=CSS.highlights.get(t);n?n.add(i):CSS.highlights.set(t,new Highlight().add(i))}}function u(i){let n;let{baseStyle:s}=l.default,o=(0,t.createUniqueId)(),u=(0,t.createMemo)(()=>`${i.text}${i.extra??""}`);return(0,t.createEffect)(()=>{if(n&&i.highlight){if(Array.isArray(i.highlight))for(let e=0,t=i.highlight.length;e<t;e++){let t=i.highlight[e],r="string"==typeof t,l=r?t:t.highlight;l.length&&g(n,o,l,r?i.flag:t.flag,u())}else i.highlight.length&&g(n,o,i.highlight,i.flag,u())}}),(0,t.createEffect)(()=>{if(n&&"string"==typeof i.extra){let e=new Range,t=i.text?.length||0;n.firstChild&&(e.setStart(n.firstChild,t),t+=i.extra.length,e.setEnd(n.firstChild,t));let r=CSS.highlights.get(o);r?r.add(e):CSS.highlights.set(o,new Highlight().add(e))}}),[(()=>{let t=h(),r=t.firstChild;return(0,e.effect)(()=>r.data=s()),t})(),(()=>{let e=a();return e.textContent=f,e})(),(()=>{let e=a();return e.textContent=`::highlight(${o}) {color: var(--primary-color, #5794ff);}`,e})(),(0,e.createComponent)(t.Show,{get when(){return i.css},get children(){let t=h(),n=t.firstChild;return(0,e.effect)(()=>n.data=(0,r.css)(i.css)),t}}),(()=>{let t=c(),l=n;return"function"==typeof l?(0,e.use)(l,t):n=t,(0,e.insert)(t,u),(0,e.effect)(()=>(0,e.className)(t,(0,r.cx)("text",i.class))),t})()]}(0,i.customElement)("n-highlight-text",{class:void 0,css:void 0,text:void 0,highlight:void 0,flag:void 0,extra:void 0,children:void 0},(r,i)=>{let s=i.element,o=(0,t.mergeProps)({text:s.textContent,css:s.css},r);return(0,t.createEffect)(()=>{(0,n.clearAttribute)(s,["css","text","highlight","extra"]),s.replaceChildren()}),[(()=>{let e=a();return e.textContent=l.inline,e})(),(0,e.createComponent)(u,o)]});const d=u;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/highlight-text/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createUniqueId, mergeProps, Show } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { inline } from '../theme';\n\nconst style = css`\n .text {\n word-break: break-word;\n word-wrap: break-word;\n white-space: break-spaces;\n cursor: auto;\n }\n`;\n\nfunction highlight(\n box: HTMLDivElement,\n id: string,\n regExp: string,\n flag: HighlightRule['flag'],\n text: string,\n) {\n const regex = new RegExp(regExp, flag);\n const match = regex.exec(text);\n\n if (match) {\n const range = new Range();\n let pos = 0;\n\n pos += match.index;\n if (box.firstChild) {\n range.setStart(box.firstChild, pos);\n pos += match[0].length;\n range.setEnd(box.firstChild, pos);\n }\n const highlight = CSS.highlights.get(id);\n\n if (highlight) {\n highlight.add(range);\n } else {\n CSS.highlights.set(id, new Highlight().add(range));\n }\n }\n}\n\nexport type HighlightTextJson =\n | {\n highlight?: boolean;\n text: string;\n }[]\n | null;\nexport interface HighlightTextProps {\n /** 自定义样式表 */\n css?: string;\n /** 自定义类名 */\n class?: string;\n /** 内容 */\n text?: string;\n /** 需要高亮的内容 */\n highlight?: string | (HighlightRule | string)[];\n /** RegExp flag */\n flag?: HighlightRule['flag'];\n /** 额外需要高亮的内容 */\n extra?: string;\n children?: string;\n}\n\ninterface HighlightRule {\n /** 需要高亮的内容 */\n highlight: string;\n /** RegExp flag */\n flag?: 'g' | 'i' | 'm' | 'u' | 'y';\n}\n\nexport interface Highlight {\n /** 命中高亮 */\n hit?: boolean;\n /** 内容 */\n text: string;\n}\n\nfunction HighlightText(props: HighlightTextProps) {\n const { baseStyle } = theme;\n let box: HTMLDivElement | undefined;\n const id = createUniqueId();\n const text = createMemo(() => `${props.text}${props.extra ?? ''}`);\n\n createEffect(() => {\n if (box && props.highlight) {\n if (Array.isArray(props.highlight)) {\n for (let i = 0, len = props.highlight.length; i < len; i++) {\n const item = props.highlight[i];\n const isOne = typeof item === 'string';\n const hitStr = isOne ? item : item.highlight;\n\n if (hitStr.length) {\n highlight(box, id, hitStr, isOne ? props.flag : item.flag, text());\n }\n }\n } else if (props.highlight.length) {\n highlight(box, id, props.highlight, props.flag, text());\n }\n }\n });\n createEffect(() => {\n if (box && typeof props.extra === 'string') {\n const range = new Range();\n let pos = props.text?.length || 0;\n\n if (box.firstChild) {\n range.setStart(box.firstChild, pos);\n pos += props.extra.length;\n range.setEnd(box.firstChild, pos);\n }\n const highlight = CSS.highlights.get(id);\n\n if (highlight) {\n highlight.add(range);\n } else {\n CSS.highlights.set(id, new Highlight().add(range));\n }\n }\n });\n\n return (\n <>\n <style textContent={baseStyle()} />\n <style textContent={style} />\n <style textContent={`::highlight(${id}) {color: var(--primary-color, #5794ff);}`} />\n <Show when={props.css}
|
|
1
|
+
{"version":3,"sources":["components/highlight-text/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createUniqueId, mergeProps, Show } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { inline } from '../theme';\n\nconst style = css`\n .text {\n word-break: break-word;\n word-wrap: break-word;\n white-space: break-spaces;\n cursor: auto;\n }\n`;\n\nfunction highlight(\n box: HTMLDivElement,\n id: string,\n regExp: string,\n flag: HighlightRule['flag'],\n text: string,\n) {\n const regex = new RegExp(regExp, flag);\n const match = regex.exec(text);\n\n if (match) {\n const range = new Range();\n let pos = 0;\n\n pos += match.index;\n if (box.firstChild) {\n range.setStart(box.firstChild, pos);\n pos += match[0].length;\n range.setEnd(box.firstChild, pos);\n }\n const highlight = CSS.highlights.get(id);\n\n if (highlight) {\n highlight.add(range);\n } else {\n CSS.highlights.set(id, new Highlight().add(range));\n }\n }\n}\n\nexport type HighlightTextJson =\n | {\n highlight?: boolean;\n text: string;\n }[]\n | null;\nexport interface HighlightTextProps {\n /** 自定义样式表 */\n css?: string;\n /** 自定义类名 */\n class?: string;\n /** 内容 */\n text?: string;\n /** 需要高亮的内容 */\n highlight?: string | (HighlightRule | string)[];\n /** RegExp flag */\n flag?: HighlightRule['flag'];\n /** 额外需要高亮的内容 */\n extra?: string;\n children?: string;\n}\n\ninterface HighlightRule {\n /** 需要高亮的内容 */\n highlight: string;\n /** RegExp flag */\n flag?: 'g' | 'i' | 'm' | 'u' | 'y';\n}\n\nexport interface Highlight {\n /** 命中高亮 */\n hit?: boolean;\n /** 内容 */\n text: string;\n}\n\nfunction HighlightText(props: HighlightTextProps) {\n const { baseStyle } = theme;\n let box: HTMLDivElement | undefined;\n const id = createUniqueId();\n const text = createMemo(() => `${props.text}${props.extra ?? ''}`);\n\n createEffect(() => {\n if (box && props.highlight) {\n if (Array.isArray(props.highlight)) {\n for (let i = 0, len = props.highlight.length; i < len; i++) {\n const item = props.highlight[i];\n const isOne = typeof item === 'string';\n const hitStr = isOne ? item : item.highlight;\n\n if (hitStr.length) {\n highlight(box, id, hitStr, isOne ? props.flag : item.flag, text());\n }\n }\n } else if (props.highlight.length) {\n highlight(box, id, props.highlight, props.flag, text());\n }\n }\n });\n createEffect(() => {\n if (box && typeof props.extra === 'string') {\n const range = new Range();\n let pos = props.text?.length || 0;\n\n if (box.firstChild) {\n range.setStart(box.firstChild, pos);\n pos += props.extra.length;\n range.setEnd(box.firstChild, pos);\n }\n const highlight = CSS.highlights.get(id);\n\n if (highlight) {\n highlight.add(range);\n } else {\n CSS.highlights.set(id, new Highlight().add(range));\n }\n }\n });\n\n return (\n <>\n <style textContent={baseStyle()} />\n <style textContent={style} />\n <style textContent={`::highlight(${id}) {color: var(--primary-color, #5794ff);}`} />\n <Show when={props.css}>\n <style textContent={css(props.css)} />\n </Show>\n <div ref={box} class={cx('text', props.class)}>\n {text()}\n </div>\n </>\n );\n}\n\nexport type HighlightTextElement = CustomElement<HighlightTextProps>;\ncustomElement<HighlightTextProps>(\n 'n-highlight-text',\n {\n class: void 0,\n css: void 0,\n text: void 0,\n highlight: void 0,\n flag: void 0,\n extra: void 0,\n children: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n text: el.textContent,\n css: el.css,\n },\n _,\n );\n\n createEffect(() => {\n clearAttribute(el, ['css', 'text', 'highlight', 'extra']);\n el.replaceChildren();\n });\n return (\n <>\n <style textContent={inline} />\n <HighlightText {...props} />\n </>\n );\n },\n);\nexport default HighlightText;\n"],"names":["style","css","highlight","box","id","regExp","flag","text","match","regex","RegExp","exec","pos","range","Range","index","firstChild","setStart","length","setEnd","CSS","highlights","get","add","set","Highlight","HighlightText","props","baseStyle","theme","createUniqueId","createMemo","extra","createEffect","Array","isArray","i","len","item","isOne","hitStr","Show","cx","class","customElement","children","_","opt","el","element","mergeProps","textContent","clearAttribute","replaceChildren","inline"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "neko-ui",
|
|
3
|
-
"version": "2.10.
|
|
3
|
+
"version": "2.10.2",
|
|
4
4
|
"description": "WebComponents UI Libraries",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -16,10 +16,13 @@
|
|
|
16
16
|
"scripts": {
|
|
17
17
|
"build": "mo build library solid",
|
|
18
18
|
"changelog": "mo changelog CHANGELOG.md && git add CHANGELOG.md",
|
|
19
|
+
"lint:commit": "pure-lint mode=commit && npm run changelog",
|
|
20
|
+
"lint:ci": "pure-lint mode=ci",
|
|
19
21
|
"lint": "mo eslint [components,site] --fix",
|
|
20
|
-
"postlint": "
|
|
22
|
+
"postlint": "jest --coverage",
|
|
23
|
+
"postlint2": "mo stylelint [components,site] --fix && jest --coverage",
|
|
21
24
|
"precommit": "npm run lint && npm run changelog",
|
|
22
|
-
"prepare": "mo githooks pre-commit=\"npm run
|
|
25
|
+
"prepare": "mo githooks pre-commit=\"npm run lint:commit\" commit-msg=\"npx --no -- commitlint --edit ${1}\"",
|
|
23
26
|
"start": "mo start library solid",
|
|
24
27
|
"test": "jest --coverage --watchAll"
|
|
25
28
|
},
|
|
@@ -53,9 +56,9 @@
|
|
|
53
56
|
"devDependencies": {
|
|
54
57
|
"@commitlint/cli": "19.8.0",
|
|
55
58
|
"@commitlint/config-conventional": "19.8.0",
|
|
56
|
-
"@moneko/core": "3.
|
|
57
|
-
"@moneko/eslint": "1.1
|
|
58
|
-
"@moneko/stylelint": "1.0
|
|
59
|
+
"@moneko/core": "3.35.5",
|
|
60
|
+
"@moneko/eslint": "1.2.1",
|
|
61
|
+
"@moneko/stylelint": "1.2.0",
|
|
59
62
|
"@moneko/solid": "1.11.0",
|
|
60
63
|
"@solidjs/testing-library": "0.8.10",
|
|
61
64
|
"@swc/jest": "0.2.37",
|
|
@@ -71,7 +74,7 @@
|
|
|
71
74
|
"shadow-dom-testing-library": "1.12.0"
|
|
72
75
|
},
|
|
73
76
|
"dependencies": {
|
|
74
|
-
"@moneko/common": "1.7.
|
|
77
|
+
"@moneko/common": "1.7.6",
|
|
75
78
|
"@moneko/css": "1.1.5",
|
|
76
79
|
"custom-element-type": "1.0.6",
|
|
77
80
|
"dayjs": "1.11.13",
|