neko-ui 2.12.2 → 2.12.4

package/es/glass-panel/index.d.ts

@@ -19,6 +19,11 @@ export interface GlassPanelProps {
      * @default 16
      */
     filterBlur?: number;
+    /**
+     * 亮度
+     * @since 2.12.3
+     */
+    brightness?: number;
     filter?: Omit<JSX.FilterSVGAttributes<SVGFilterElement>, 'id'>;
     feTurbulence?: JSX.FeTurbulanceSVGAttributes<SVGFETurbulenceElement>;
     feDisplacementMap?: JSX.FeDisplacementMapSVGAttributes<SVGFEDisplacementMapElement>;

package/es/glass-panel/index.js

@@ -1,16 +1,16 @@
-import{template as e}from"solid-js/web";import{spread as r}from"solid-js/web";import{setAttribute as t}from"solid-js/web";import{mergeProps as l}from"solid-js/web";import{getOwner as i}from"solid-js/web";import{effect as s}from"solid-js/web";import{createComponent as o}from"solid-js/web";let f=e("<style> "),n=e('<slot id="backdrop-slot">'),a=e('<svg><filter filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency="0.45" numOctaves="1"></feTurbulence><feDisplacementMap in="SourceGraphic" scale="50">'),p=e("<style>");import{createEffect as u,createMemo as c,createUniqueId as d,mergeProps as m,Show as b,splitProps as h}from"solid-js";import{css as w,cx as g}from"@moneko/css";import{customElement as y}from"solid-element";import{clearAttribute as j}from"../basic-config";import{inline as k}from"../theme";let v=e=>{let p=m({filterBlur:16},e),[u]=h(p,["css","filter","feTurbulence","feDisplacementMap","filterBlur"]),y=d(),j=c(()=>w`
+import{template as e}from"solid-js/web";import{spread as r}from"solid-js/web";import{setAttribute as t}from"solid-js/web";import{mergeProps as i}from"solid-js/web";import{getOwner as s}from"solid-js/web";import{effect as l}from"solid-js/web";import{createComponent as o}from"solid-js/web";let n=e("<style> "),f=e('<slot id="backdrop-slot">'),a=e('<svg><filter filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency="0.45" numOctaves="1"></feTurbulence><feDisplacementMap in="SourceGraphic" scale="50">'),p=e("<style>");import{createEffect as d,createMemo as c,createUniqueId as u,mergeProps as m,Show as b,splitProps as h}from"solid-js";import{css as g,cx as w}from"@moneko/css";import{customElement as v}from"solid-element";import{clearAttribute as y}from"../basic-config";import{inline as j}from"../theme";let k=e=>{let p=m({filterBlur:16},e),[d]=h(p,["css","filter","feTurbulence","feDisplacementMap","filterBlur","brightness"]),v=u(),y=c(()=>{let e=w(!!d.brightness&&`brightness(${d.brightness})`,!!d.filterBlur&&`blur(${d.filterBlur}px)`);return g`
       #backdrop-slot {
         display: block;
         overflow: inherit;
         border-radius: inherit;
         inline-size: 100%;
         block-size: 100%;
-        backdrop-filter: blur(${u.filterBlur}px);
+        backdrop-filter: ${e};
       }
 
-      @supports (backdrop-filter: url(#${y})) {
+      @supports (backdrop-filter: url(#${v})) {
         #backdrop-slot {
-          backdrop-filter: ${g(!!u.filterBlur&&`blur(${u.filterBlur}px)`,`url(#${y})`)};
+          backdrop-filter: ${e} url(#${v});
         }
       }
-    `);return[(()=>{let e=f(),r=e.firstChild;return s(()=>r.data=j()),e})(),o(b,{get when(){return p.css},get children(){let e=f(),r=e.firstChild;return s(()=>r.data=w(u.css)),e}}),(()=>{let e=n();return e._$owner=i(),e})(),(()=>{let e=a(),i=e.firstChild,s=i.firstChild,o=s.nextSibling;return e.style.setProperty("display","none"),t(i,"id",y),r(i,l(()=>u.filter),!0,!0),r(s,l(()=>u.feTurbulence),!0,!1),r(o,l(()=>u.feDisplacementMap),!0,!1),e})()]};v.registry=()=>{y("n-glass-panel",{class:void 0,css:void 0,filterBlur:void 0,filter:void 0,feTurbulence:void 0,feDisplacementMap:void 0},(e,r)=>{let t=r.element;return u(()=>{j(t,["css","filterBlur","filter","feTurbulence","feDisplacementMap"])}),[(()=>{let e=p();return e.textContent=k,e})(),o(v,e)]})};export default v;
+    `});return[(()=>{let e=n(),r=e.firstChild;return l(()=>r.data=y()),e})(),o(b,{get when(){return p.css},get children(){let e=n(),r=e.firstChild;return l(()=>r.data=g(d.css)),e}}),(()=>{let e=f();return e._$owner=s(),e})(),(()=>{let e=a(),s=e.firstChild,l=s.firstChild,o=l.nextSibling;return e.style.setProperty("display","none"),t(s,"id",v),r(s,i(()=>d.filter),!0,!0),r(l,i(()=>d.feTurbulence),!0,!1),r(o,i(()=>d.feDisplacementMap),!0,!1),e})()]};k.registry=()=>{v("n-glass-panel",{class:void 0,css:void 0,brightness:void 0,filterBlur:void 0,filter:void 0,feTurbulence:void 0,feDisplacementMap:void 0},(e,r)=>{let t=r.element;return d(()=>{y(t,["css","brightness","filterBlur","filter","feTurbulence","feDisplacementMap"])}),[(()=>{let e=p();return e.textContent=j,e})(),o(k,e)]})};export default k;

package/es/glass-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/glass-panel/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createUniqueId,\n  JSX,\n  mergeProps,\n  Show,\n  splitProps,\n} from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport { inline } from '../theme';\n\nexport interface GlassPanelProps {\n  /**\n   * 子元素\n   */\n  children?: JSXElement;\n  /**\n   * 样式\n   */\n  css?: string;\n  /**\n   * 类名\n   */\n  class?: string;\n  /**\n   * 模糊值 (px)\n   * @default 16\n   */\n  filterBlur?: number;\n  filter?: Omit<JSX.FilterSVGAttributes<SVGFilterElement>, 'id'>;\n  feTurbulence?: JSX.FeTurbulanceSVGAttributes<SVGFETurbulenceElement>;\n  feDisplacementMap?: JSX.FeDisplacementMapSVGAttributes<SVGFEDisplacementMapElement>;\n}\n\nconst GlassPanel = (_: GlassPanelProps) => {\n  const props = mergeProps({ filterBlur: 16 }, _);\n  const [local] = splitProps(props, [\n    'css',\n    'filter',\n    'feTurbulence',\n    'feDisplacementMap',\n    'filterBlur',\n  ]);\n  const id = createUniqueId();\n  const baseCss = createMemo(() => {\n    return css`\n      #backdrop-slot {\n        display: block;\n        overflow: inherit;\n        border-radius: inherit;\n        inline-size: 100%;\n        block-size: 100%;\n        backdrop-filter: blur(${local.filterBlur}px);\n      }\n\n      @supports (backdrop-filter: url(#${id})) {\n        #backdrop-slot {\n          backdrop-filter: ${cx(\n            !!local.filterBlur && `blur(${local.filterBlur}px)`,\n            `url(#${id})`,\n          )};\n        }\n      }\n    `;\n  });\n\n  return (\n    <>\n      <style textContent={baseCss()} />\n      <Show when={props.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <slot id=\"backdrop-slot\" />\n      <svg style={{ display: 'none' }}>\n        <filter\n          id={id}\n          filterUnits=\"objectBoundingBox\"\n          x=\"-5%\"\n          y=\"-5%\"\n          width=\"110%\"\n          height=\"110%\"\n          {...local.filter}\n        >\n          <feTurbulence\n            type=\"fractalNoise\"\n            baseFrequency=\"0.45\"\n            numOctaves=\"1\"\n            {...local.feTurbulence}\n          />\n          <feDisplacementMap in=\"SourceGraphic\" scale=\"50\" {...local.feDisplacementMap} />\n        </filter>\n      </svg>\n    </>\n  );\n};\n\nexport type GlassPanelElement = CustomElement<GlassPanelProps>;\n\nGlassPanel.registry = () => {\n  customElement<GlassPanelProps>(\n    'n-glass-panel',\n    {\n      class: void 0,\n      css: void 0,\n      filterBlur: void 0,\n      filter: void 0,\n      feTurbulence: void 0,\n      feDisplacementMap: void 0,\n    },\n    (props, opt) => {\n      const el = opt.element;\n\n      createEffect(() => {\n        clearAttribute(el, ['css', 'filterBlur', 'filter', 'feTurbulence', 'feDisplacementMap']);\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <GlassPanel {...props} />\n        </>\n      );\n    },\n  );\n};\n\nexport default GlassPanel;\n"],"names":["createEffect","createMemo","createUniqueId","mergeProps","Show","splitProps","css","cx","customElement","clearAttribute","inline","GlassPanel","_","props","filterBlur","local","id","baseCss","filter","feTurbulence","feDisplacementMap","registry","class","opt","el","element"],"mappings":"0kBAAA,QACEA,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,kBAAAA,CAAc,CAEdC,cAAAA,CAAU,CACVC,QAAAA,CAAI,CACJC,cAAAA,CAAU,KACL,UAAW,AAClB,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAyB,iBAAkB,AAClE,QAASC,UAAAA,CAAM,KAAQ,UAAW,CAyBlC,IAAMC,EAAa,AAACC,IAClB,IAAMC,EAAQV,EAAW,CAAEW,WAAY,EAAG,EAAGF,GACvC,CAACG,EAAM,CAAGV,EAAWQ,EAAO,CAChC,MACA,SACA,eACA,oBACA,aACD,EACKG,EAAKd,IACLe,EAAUhB,EAAW,IAClBK,CAAG,CAAC;;;;;;;8BAOe,EAAES,EAAMD,UAAU,CAAC;;;uCAGV,EAAEE,EAAG;;2BAEjB,EAAET,EACjB,CAAC,CAACQ,EAAMD,UAAU,EAAI,CAAC,KAAK,EAAEC,EAAMD,UAAU,CAAC,GAAG,CAAC,CACnD,CAAC,KAAK,EAAEE,EAAG,CAAC,CAAC,EACb;;;IAGR,CAAC,EAGH,0DAEwBC,aACnBb,qBAAWS,EAAMP,GAAG,8DACCA,EAAIS,EAAMT,GAAG,uKAK3BU,aAMAD,EAAMG,MAAM,mBAMVH,EAAMI,YAAY,mBAE6BJ,EAAMK,iBAAiB,eAKtF,CAIAT,CAAAA,EAAWU,QAAQ,CAAG,KACpBb,EACE,gBACA,CACEc,MAAO,KAAK,EACZhB,IAAK,KAAK,EACVQ,WAAY,KAAK,EACjBI,OAAQ,KAAK,EACbC,aAAc,KAAK,EACnBC,kBAAmB,KAAK,CAC1B,EACA,CAACP,EAAOU,KACN,IAAMC,EAAKD,EAAIE,OAAO,CAKtB,OAHAzB,EAAa,KACXS,EAAee,EAAI,CAAC,MAAO,aAAc,SAAU,eAAgB,oBAAoB,CACzF,yCAGwBd,UACnBC,EAAeE,GAGtB,EAEJ,CAEA,gBAAeF,CAAW"}
+{"version":3,"sources":["components/glass-panel/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createUniqueId,\n  JSX,\n  mergeProps,\n  Show,\n  splitProps,\n} from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport { inline } from '../theme';\n\nexport interface GlassPanelProps {\n  /**\n   * 子元素\n   */\n  children?: JSXElement;\n  /**\n   * 样式\n   */\n  css?: string;\n  /**\n   * 类名\n   */\n  class?: string;\n  /**\n   * 模糊值 (px)\n   * @default 16\n   */\n  filterBlur?: number;\n  /**\n   * 亮度\n   * @since 2.12.3\n   */\n  brightness?: number;\n  filter?: Omit<JSX.FilterSVGAttributes<SVGFilterElement>, 'id'>;\n  feTurbulence?: JSX.FeTurbulanceSVGAttributes<SVGFETurbulenceElement>;\n  feDisplacementMap?: JSX.FeDisplacementMapSVGAttributes<SVGFEDisplacementMapElement>;\n}\n\nconst GlassPanel = (_: GlassPanelProps) => {\n  const props = mergeProps({ filterBlur: 16 }, _);\n  const [local] = splitProps(props, [\n    'css',\n    'filter',\n    'feTurbulence',\n    'feDisplacementMap',\n    'filterBlur',\n    'brightness',\n  ]);\n  const id = createUniqueId();\n  const baseCss = createMemo(() => {\n    const normal = cx(\n      !!local.brightness && `brightness(${local.brightness})`,\n      !!local.filterBlur && `blur(${local.filterBlur}px)`,\n    );\n\n    return css`\n      #backdrop-slot {\n        display: block;\n        overflow: inherit;\n        border-radius: inherit;\n        inline-size: 100%;\n        block-size: 100%;\n        backdrop-filter: ${normal};\n      }\n\n      @supports (backdrop-filter: url(#${id})) {\n        #backdrop-slot {\n          backdrop-filter: ${normal} url(#${id});\n        }\n      }\n    `;\n  });\n\n  return (\n    <>\n      <style textContent={baseCss()} />\n      <Show when={props.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <slot id=\"backdrop-slot\" />\n      <svg style={{ display: 'none' }}>\n        <filter\n          id={id}\n          filterUnits=\"objectBoundingBox\"\n          x=\"-5%\"\n          y=\"-5%\"\n          width=\"110%\"\n          height=\"110%\"\n          {...local.filter}\n        >\n          <feTurbulence\n            type=\"fractalNoise\"\n            baseFrequency=\"0.45\"\n            numOctaves=\"1\"\n            {...local.feTurbulence}\n          />\n          <feDisplacementMap in=\"SourceGraphic\" scale=\"50\" {...local.feDisplacementMap} />\n        </filter>\n      </svg>\n    </>\n  );\n};\n\nexport type GlassPanelElement = CustomElement<GlassPanelProps>;\n\nGlassPanel.registry = () => {\n  customElement<GlassPanelProps>(\n    'n-glass-panel',\n    {\n      class: void 0,\n      css: void 0,\n      brightness: void 0,\n      filterBlur: void 0,\n      filter: void 0,\n      feTurbulence: void 0,\n      feDisplacementMap: void 0,\n    },\n    (props, opt) => {\n      const el = opt.element;\n\n      createEffect(() => {\n        clearAttribute(el, [\n          'css',\n          'brightness',\n          'filterBlur',\n          'filter',\n          'feTurbulence',\n          'feDisplacementMap',\n        ]);\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <GlassPanel {...props} />\n        </>\n      );\n    },\n  );\n};\n\nexport default GlassPanel;\n"],"names":["createEffect","createMemo","createUniqueId","mergeProps","Show","splitProps","css","cx","customElement","clearAttribute","inline","GlassPanel","_","props","filterBlur","local","id","baseCss","normal","brightness","filter","feTurbulence","feDisplacementMap","registry","class","opt","el","element"],"mappings":"0kBAAA,QACEA,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,kBAAAA,CAAc,CAEdC,cAAAA,CAAU,CACVC,QAAAA,CAAI,CACJC,cAAAA,CAAU,KACL,UAAW,AAClB,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAyB,iBAAkB,AAClE,QAASC,UAAAA,CAAM,KAAQ,UAAW,CA8BlC,IAAMC,EAAa,AAACC,IAClB,IAAMC,EAAQV,EAAW,CAAEW,WAAY,EAAG,EAAGF,GACvC,CAACG,EAAM,CAAGV,EAAWQ,EAAO,CAChC,MACA,SACA,eACA,oBACA,aACA,aACD,EACKG,EAAKd,IACLe,EAAUhB,EAAW,KACzB,IAAMiB,EAASX,EACb,CAAC,CAACQ,EAAMI,UAAU,EAAI,CAAC,WAAW,EAAEJ,EAAMI,UAAU,CAAC,CAAC,CAAC,CACvD,CAAC,CAACJ,EAAMD,UAAU,EAAI,CAAC,KAAK,EAAEC,EAAMD,UAAU,CAAC,GAAG,CAAC,EAGrD,OAAOR,CAAG,CAAC;;;;;;;yBAOU,EAAEY,EAAO;;;uCAGK,EAAEF,EAAG;;2BAEjB,EAAEE,EAAO,MAAM,EAAEF,EAAG;;;IAG3C,CAAC,AACH,GAEA,0DAEwBC,aACnBb,qBAAWS,EAAMP,GAAG,8DACCA,EAAIS,EAAMT,GAAG,uKAK3BU,aAMAD,EAAMK,MAAM,mBAMVL,EAAMM,YAAY,mBAE6BN,EAAMO,iBAAiB,eAKtF,CAIAX,CAAAA,EAAWY,QAAQ,CAAG,KACpBf,EACE,gBACA,CACEgB,MAAO,KAAK,EACZlB,IAAK,KAAK,EACVa,WAAY,KAAK,EACjBL,WAAY,KAAK,EACjBM,OAAQ,KAAK,EACbC,aAAc,KAAK,EACnBC,kBAAmB,KAAK,CAC1B,EACA,CAACT,EAAOY,KACN,IAAMC,EAAKD,EAAIE,OAAO,CAYtB,OAVA3B,EAAa,KACXS,EAAeiB,EAAI,CACjB,MACA,aACA,aACA,SACA,eACA,oBACD,CACH,yCAGwBhB,UACnBC,EAAeE,GAGtB,EAEJ,CAEA,gBAAeF,CAAW"}

package/es/highlight-text/index.js

@@ -5,4 +5,4 @@ import{use as t}from"solid-js/web";import{template as e}from"solid-js/web";impor
     white-space: break-spaces;
     cursor: auto;
   }
-`;function b(t,e,i,r,l){(function(t,e){let i;let r=[];for(;(i=e.exec(t))&&(r.push(i),e.global););return r})(l,new RegExp(i,r)).forEach(i=>{let r;let l=new Range;r=0+i.index,t.firstChild&&(l.setStart(t.firstChild,r),r+=i[0].length,l.setEnd(t.firstChild,r));let h=CSS.highlights.get(e);h?h.add(l):CSS.highlights.set(e,new Highlight().add(l))})}function S(e){let f;let{baseStyle:p}=C,x=d(),w=a(()=>{var t;return`${e.text}${null!=(t=e.extra)?t:""}`});return n(()=>{if(f&&e.highlight){if(Array.isArray(e.highlight))for(let i=0,r=e.highlight.length;i<r;i++){let r=e.highlight[i],l="object"!=typeof r,h=String(l?r:r.highlight);if(h.length){var t;b(f,x,h,l?e.flag:null!=(t=r.flag)?t:e.flag,w())}}else String(e.highlight).length&&b(f,x,String(e.highlight),e.flag,w())}}),n(()=>{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(x);l?l.add(i):CSS.highlights.set(x,new Highlight().add(i))}}),[(()=>{let t=o(),e=t.firstChild;return r(()=>e.data=p()),t})(),(()=>{let t=s();return t.textContent=v,t})(),(()=>{let t=o(),i=t.firstChild;return r(()=>{var t;return i.data=`::highlight(${x}) {color: var(--primary-color, ${null!=(t=e.highlightColor)?t:"#5794ff"});}`}),t})(),l(m,{get when(){return e.css},get children(){let t=o(),i=t.firstChild;return r(()=>i.data=c(e.css)),t}}),(()=>{let l=g(),o=f;return"function"==typeof o?t(o,l):f=l,i(l,w),r(()=>h(l,u("text",e.class))),l})()]}S.registry=()=>{p("n-highlight-text",{class:void 0,css:void 0,text:void 0,highlight:void 0,flag:void 0,extra:void 0,highlightColor:void 0,children:void 0},(t,e)=>{let i=e.element,r=f({text:i.textContent,css:i.css},t);return n(()=>{x(i,["css","text","highlight","extra","flag"]),i.replaceChildren()}),[(()=>{let t=s();return t.textContent=w,t})(),l(S,r)]})};export default S;
+`;function b(t,e,i,r,l){(function(t,e){let i;let r=[];for(;(i=e.exec(t))&&(r.push(i),e.global););return r})(l,new RegExp(i,r)).forEach(i=>{let r;let l=new Range;r=0+i.index,t.firstChild&&(l.setStart(t.firstChild,r),r+=i[0].length,l.setEnd(t.firstChild,r));let h=CSS.highlights.get(e);h?h.add(l):CSS.highlights.set(e,new Highlight().add(l))})}function S(e){let f;let{baseStyle:p}=C,x=d(),w=a(()=>{var t;return`${e.text}${null!=(t=e.extra)?t:""}`});return n(()=>{if(f&&e.highlight){if(Array.isArray(e.highlight))for(let i=0,r=e.highlight.length;i<r;i++){let r=e.highlight[i],l="object"!=typeof r,h=String(l?r:r.highlight);if(h.length){var t;b(f,x,h,l?e.flag:null!=(t=r.flag)?t:e.flag,w())}}else String(e.highlight).length&&b(f,x,String(e.highlight),e.flag,w())}}),n(()=>{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(x);l?l.add(i):CSS.highlights.set(x,new Highlight().add(i))}}),[(()=>{let t=o(),e=t.firstChild;return r(()=>e.data=p()),t})(),(()=>{let t=s();return t.textContent=v,t})(),(()=>{let t=o(),i=t.firstChild;return r(()=>{var t;return i.data=`::highlight(${x}) {color: ${null!=(t=e.highlightColor)?t:"var(--primary-color, #5794ff)"};}`}),t})(),l(m,{get when(){return e.css},get children(){let t=o(),i=t.firstChild;return r(()=>i.data=c(e.css)),t}}),(()=>{let l=g(),o=f;return"function"==typeof o?t(o,l):f=l,i(l,w),r(()=>h(l,u("text",e.class))),l})()]}S.registry=()=>{p("n-highlight-text",{class:void 0,css:void 0,text:void 0,highlight:void 0,flag:void 0,extra:void 0,highlightColor:void 0,children:void 0},(t,e)=>{let i=e.element,r=f({text:i.textContent,css:i.css},t);return n(()=>{x(i,["css","text","highlight","extra","flag"]),i.replaceChildren()}),[(()=>{let t=s();return t.textContent=w,t})(),l(S,r)]})};export default S;

package/es/highlight-text/index.js.map

@@ -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 execAll(str: string, regex: RegExp) {\n  let lastMatch: RegExpExecArray | null;\n  const matches: RegExpExecArray[] = [];\n\n  while ((lastMatch = regex.exec(str))) {\n    matches.push(lastMatch);\n\n    if (!regex.global) break;\n  }\n\n  return matches;\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\n  execAll(text, regex).forEach((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 cssHighlight = CSS.highlights.get(id);\n\n    if (cssHighlight) {\n      cssHighlight.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   * @default '#5794ff'\n   * @since 2.12.2\n   **/\n  highlightColor?: 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 !== 'object';\n          const hitStr = String(isOne ? item : item.highlight);\n\n          if (hitStr.length) {\n            highlight(box, id, hitStr, isOne ? props.flag : (item.flag ?? props.flag), text());\n          }\n        }\n      } else if (String(props.highlight).length) {\n        highlight(box, id, String(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 cssHighlight = CSS.highlights.get(id);\n\n      if (cssHighlight) {\n        cssHighlight.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\n        textContent={`::highlight(${id}) {color: var(--primary-color, ${\n          props.highlightColor ?? '#5794ff'\n        });}`}\n      />\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>;\n\nHighlightText.registry = () => {\n  customElement<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      highlightColor: 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', 'flag']);\n        el.replaceChildren();\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <HighlightText {...props} />\n        </>\n      );\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","execAll","str","regex","lastMatch","matches","exec","push","global","RegExp","forEach","match","pos","range","Range","index","firstChild","setStart","length","setEnd","cssHighlight","CSS","highlights","get","add","set","Highlight","HighlightText","props","baseStyle","extra","Array","isArray","i","len","item","isOne","hitStr","String","highlightColor","class","registry","children","_","opt","el","element","textContent","replaceChildren"],"mappings":"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"}
+{"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 execAll(str: string, regex: RegExp) {\n  let lastMatch: RegExpExecArray | null;\n  const matches: RegExpExecArray[] = [];\n\n  while ((lastMatch = regex.exec(str))) {\n    matches.push(lastMatch);\n\n    if (!regex.global) break;\n  }\n\n  return matches;\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\n  execAll(text, regex).forEach((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 cssHighlight = CSS.highlights.get(id);\n\n    if (cssHighlight) {\n      cssHighlight.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   * @default '#5794ff'\n   * @since 2.12.2\n   **/\n  highlightColor?: 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 !== 'object';\n          const hitStr = String(isOne ? item : item.highlight);\n\n          if (hitStr.length) {\n            highlight(box, id, hitStr, isOne ? props.flag : (item.flag ?? props.flag), text());\n          }\n        }\n      } else if (String(props.highlight).length) {\n        highlight(box, id, String(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 cssHighlight = CSS.highlights.get(id);\n\n      if (cssHighlight) {\n        cssHighlight.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\n        textContent={`::highlight(${id}) {color: ${props.highlightColor ?? 'var(--primary-color, #5794ff)'};}`}\n      />\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>;\n\nHighlightText.registry = () => {\n  customElement<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      highlightColor: 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', 'flag']);\n        el.replaceChildren();\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <HighlightText {...props} />\n        </>\n      );\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","execAll","str","regex","lastMatch","matches","exec","push","global","RegExp","forEach","match","pos","range","Range","index","firstChild","setStart","length","setEnd","cssHighlight","CSS","highlights","get","add","set","Highlight","HighlightText","props","baseStyle","extra","Array","isArray","i","len","item","isOne","hitStr","String","highlightColor","class","registry","children","_","opt","el","element","textContent","replaceChildren"],"mappings":"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"}

package/es/img/index.d.ts

@@ -1,6 +1,10 @@
 import { type JSX } from 'solid-js';
 import type { CustomElement } from '..';
 export interface ImgProps extends JSX.HTMLAttributes<HTMLImageElement> {
+    /** 自定义样式表 */
+    css?: string;
+    /** 自定义类名 */
+    class?: string;
     /** 图片地址 */
     src?: string;
     /** 查看大图的地址, 默认使用 `src`

package/es/img/index.js

@@ -1 +1 @@
-import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as n}from"solid-js/web";import"solid-js/web";import{effect as o}from"solid-js/web";import{delegateEvents as l}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{addEventListener as i}from"solid-js/web";let r=t("<style> "),a=t("<style>"),d=t('<div class="portal"><span class="close"></span><img class="img">');import{createEffect as m,createSignal as c,mergeProps as u,onCleanup as p,Show as v,untrack as g}from"solid-js";import{Portal as f}from"solid-js/web";import{customElement as b}from"solid-element";import{inline as C}from"../theme";import h from"./lazy";import{imgCss as w,style as $}from"./style";function y(t){let l;let b=u({maskClosable:!0,escClosable:!0,lazy:!0,disabled:!1},t),[C,y]=c(null),[E,k]=c({width:0,height:0,left:0,top:0});function _(e){b.disabled||(y(e),null==b.onOpenChange||b.onOpenChange.call(b,e))}function j(e){e.preventDefault()}function L(e){j(e),"keydown"===e.type?b.escClosable&&"Escape"===e.key&&_(!1):_(!1)}function x(){!1===C()&&_(null)}function z(e){j(e),b.maskClosable&&e.target===l&&_(!1)}return m(()=>{void 0!==b.open&&b.open!==g(C)&&y(b.open)}),m(()=>{!0===C()&&(document.documentElement.addEventListener("mousewheel",j,{passive:!1}),b.escClosable&&document.documentElement.addEventListener("keydown",L,!1)),p(()=>{document.documentElement.removeEventListener("mousewheel",j,!1),document.documentElement.removeEventListener("keydown",L,!1)})}),[s(h,{get src(){return b.src},get alt(){return b.alt},get lazy(){return b.lazy},get classList(){return{none:!!C()}},onClick:function(e){b.disabled||(e.stopPropagation(),j(e),e.target&&k(e.target.getBoundingClientRect()),_(!0))}}),s(v,{get when(){return null!==C()},get children(){return s(f,{useShadow:!0,get children(){return[(()=>{let e=r(),t=e.firstChild;return o(()=>t.data=function(){let{width:e,height:t,top:n,left:o}=E();return`.portal {--img: url(${b.src});inline-size: ${e}px;block-size: ${t}px;inset-block-start: ${n}px;inset-inline-start: ${o}px;}`}()),e})(),(()=>{let e=a();return e.textContent=w,e})(),(()=>{let e=a();return e.textContent=$,e})(),(()=>{let t=d(),s=l,r=t.firstChild,a=r.nextSibling;return i(t,"click",z,!0),i(t,"animationend",x),"function"==typeof s?e(s,t):l=t,i(r,"click",L,!0),o(e=>{let o=!!C(),l=!C(),s=b.srcFull||b.src,i=b.alt;return o!==e._v$&&t.classList.toggle("open",e._v$=o),l!==e._v$2&&t.classList.toggle("closeing",e._v$2=l),s!==e._v$3&&n(a,"src",e._v$3=s),i!==e._v$4&&n(a,"alt",e._v$4=i),e},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),t})()]}})}})]}y.registry=()=>{b("n-img",{src:void 0,srcFull:void 0,alt:void 0,open:null,maskClosable:void 0,escClosable:void 0,onOpenChange:void 0,onLoad:void 0,lazy:void 0,disabled:void 0},(e,t)=>{let n=u({onOpenChange(e){t.element.dispatchEvent(new CustomEvent("openchange",{detail:e}))},onLoad(){t.element.dispatchEvent(new CustomEvent("load"))}},e);return[(()=>{let e=a();return e.textContent=C,e})(),s(y,n)]})};export default y;l(["click"]);
+import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as n}from"solid-js/web";import"solid-js/web";import{effect as o}from"solid-js/web";import{delegateEvents as s}from"solid-js/web";import{createComponent as l}from"solid-js/web";import{addEventListener as i}from"solid-js/web";let r=t("<style> "),a=t("<style>"),d=t('<div class="portal"><span class="close"></span><img class="img">');import{createEffect as c,createSignal as m,mergeProps as u,onCleanup as p,Show as v,untrack as g}from"solid-js";import{Portal as f}from"solid-js/web";import{css as b}from"@moneko/css";import{customElement as h}from"solid-element";import{clearAttribute as C}from"../basic-config";import{inline as w}from"../theme";import y from"./lazy";import{imgCss as $,style as E}from"./style";function k(t){let s;let h=u({maskClosable:!0,escClosable:!0,lazy:!0,disabled:!1},t),[C,w]=m(null),[k,_]=m({width:0,height:0,left:0,top:0});function j(e){h.disabled||(w(e),null==h.onOpenChange||h.onOpenChange.call(h,e))}function L(e){e.preventDefault()}function x(e){L(e),"keydown"===e.type?h.escClosable&&"Escape"===e.key&&j(!1):j(!1)}function z(){!1===C()&&j(null)}function O(e){L(e),h.maskClosable&&e.target===s&&j(!1)}return c(()=>{void 0!==h.open&&h.open!==g(C)&&w(h.open)}),c(()=>{!0===C()&&(document.documentElement.addEventListener("mousewheel",L,{passive:!1}),h.escClosable&&document.documentElement.addEventListener("keydown",x,!1)),p(()=>{document.documentElement.removeEventListener("mousewheel",L,!1),document.documentElement.removeEventListener("keydown",x,!1)})}),[l(v,{get when(){return h.css},get children(){let e=r(),t=e.firstChild;return o(()=>t.data=b(h.css)),e}}),l(y,{get src(){return h.src},get alt(){return h.alt},get lazy(){return h.lazy},get style(){return h.style},get classList(){return{none:!!C()}},onClick:function(e){h.disabled||(e.stopPropagation(),L(e),e.target&&_(e.target.getBoundingClientRect()),j(!0))}}),l(v,{get when(){return null!==C()},get children(){return l(f,{useShadow:!0,get children(){return[(()=>{let e=r(),t=e.firstChild;return o(()=>t.data=function(){let{width:e,height:t,top:n,left:o}=k();return`.portal {--img: url(${h.src});inline-size: ${e}px;block-size: ${t}px;inset-block-start: ${n}px;inset-inline-start: ${o}px;}`}()),e})(),(()=>{let e=a();return e.textContent=$,e})(),(()=>{let e=a();return e.textContent=E,e})(),(()=>{let t=d(),l=s,r=t.firstChild,a=r.nextSibling;return i(t,"click",O,!0),i(t,"animationend",z),"function"==typeof l?e(l,t):s=t,i(r,"click",x,!0),o(e=>{let o=!!C(),s=!C(),l=h.srcFull||h.src,i=h.alt;return o!==e._v$&&t.classList.toggle("open",e._v$=o),s!==e._v$2&&t.classList.toggle("closeing",e._v$2=s),l!==e._v$3&&n(a,"src",e._v$3=l),i!==e._v$4&&n(a,"alt",e._v$4=i),e},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),t})()]}})}})]}k.registry=()=>{h("n-img",{class:void 0,css:void 0,alt:void 0,src:void 0,srcFull:void 0,open:null,maskClosable:void 0,escClosable:void 0,onOpenChange:void 0,onLoad:void 0,lazy:void 0,disabled:void 0},(e,t)=>{let n=t.element,o=u({onOpenChange(e){t.element.dispatchEvent(new CustomEvent("openchange",{detail:e}))},onLoad(){t.element.dispatchEvent(new CustomEvent("load"))}},e);return c(()=>{C(n,["css"])}),[(()=>{let e=a();return e.textContent=w,e})(),l(k,o)]})};export default k;s(["click"]);

package/es/img/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/img/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createSignal,\n  type JSX,\n  mergeProps,\n  onCleanup,\n  Show,\n  untrack,\n} from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { inline } from '../theme';\n\nimport ImgLazy from './lazy';\nimport { imgCss, style } from './style';\n\nexport interface ImgProps extends JSX.HTMLAttributes<HTMLImageElement> {\n  /** 图片地址 */\n  src?: string;\n  /** 查看大图的地址, 默认使用 `src`\n   * @since 2.1.2\n   */\n  srcFull?: string;\n  /** 图片 alt */\n  alt?: string;\n  /** 大图查看 */\n  open?: boolean | null;\n  /** 开启关闭大图的回调函数 */\n  onOpenChange?: (open: boolean | null) => void;\n  /** 图片加载完成 */\n  onLoad?(e: Event): void;\n  /** 点击遮罩关闭\n   * @since 2.0.8\n   * @default true\n   */\n  maskClosable?: boolean;\n  /** 通过 `esc` 按键关闭\n   * @default true\n   */\n  escClosable?: boolean;\n  /**\n   * 懒加载\n   * @since 2.8.1\n   * @default true\n   */\n  lazy?: boolean;\n  /** 禁止点开大图\n   * @since 2.8.3\n   * @default false\n   */\n  disabled?: boolean;\n}\nexport type ImgElement = CustomElement<ImgProps, 'onOpenChange'>;\n\nfunction Img(_: ImgProps) {\n  let portal: HTMLDivElement | undefined;\n  const props = mergeProps(\n    {\n      maskClosable: true,\n      escClosable: true,\n      lazy: true,\n      disabled: false,\n    },\n    _,\n  );\n  const [open, setOpen] = createSignal<boolean | null>(null);\n  const [posi, setPosi] = createSignal({\n    width: 0,\n    height: 0,\n    left: 0,\n    top: 0,\n  });\n\n  function getCss() {\n    const { width, height, top, left } = posi();\n\n    return `.portal {--img: url(${props.src});inline-size: ${width}px;block-size: ${height}px;inset-block-start: ${top}px;inset-inline-start: ${left}px;}`;\n  }\n  function openChange(visi: boolean | null) {\n    if (!props.disabled) {\n      setOpen(visi);\n      props.onOpenChange?.(visi);\n    }\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(false);\n      }\n    } else {\n      openChange(false);\n    }\n  }\n  function handleDestroy() {\n    if (open() === false) {\n      openChange(null);\n    }\n  }\n  function handleOpen(e: MouseEvent) {\n    if (!props.disabled) {\n      e.stopPropagation();\n      preventDefault(e);\n      if (e.target) {\n        setPosi((e.target as HTMLImageElement).getBoundingClientRect());\n      }\n      openChange(true);\n    }\n  }\n  function portalClick(e: Event) {\n    preventDefault(e);\n    if (props.maskClosable && e.target === portal) {\n      openChange(false);\n    }\n  }\n\n  createEffect(() => {\n    if (props.open !== void 0 && props.open !== untrack(open)) {\n      setOpen(props.open);\n    }\n  });\n  createEffect(() => {\n    if (open() === true) {\n      document.documentElement.addEventListener('mousewheel', preventDefault, {\n        passive: false,\n      });\n\n      if (props.escClosable) {\n        document.documentElement.addEventListener('keydown', close, false);\n      }\n    }\n\n    onCleanup(() => {\n      document.documentElement.removeEventListener('mousewheel', preventDefault, false);\n      document.documentElement.removeEventListener('keydown', close, false);\n    });\n  });\n\n  return (\n    <>\n      <ImgLazy\n        src={props.src}\n        alt={props.alt}\n        lazy={props.lazy}\n        classList={{\n          none: !!open(),\n        }}\n        onClick={handleOpen}\n      />\n      <Show when={open() !== null}>\n        <Portal useShadow={true}>\n          <style textContent={getCss()} />\n          <style textContent={imgCss} />\n          <style textContent={style} />\n          <div\n            ref={portal}\n            class=\"portal\"\n            classList={{\n              open: !!open(),\n              closeing: !open(),\n            }}\n            onAnimationEnd={handleDestroy}\n            onClick={portalClick}\n          >\n            <span class=\"close\" onClick={close} />\n            <img class=\"img\" src={props.srcFull || props.src} alt={props.alt} />\n          </div>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nImg.registry = () => {\n  customElement<ImgProps>(\n    'n-img',\n    {\n      src: void 0,\n      srcFull: void 0,\n      alt: void 0,\n      open: null as boolean | null,\n      maskClosable: void 0,\n      escClosable: void 0,\n      onOpenChange: void 0,\n      onLoad: void 0,\n      lazy: void 0,\n      disabled: void 0,\n    },\n    (_, opt) => {\n      const props = mergeProps(\n        {\n          onOpenChange(open: boolean | null) {\n            opt.element.dispatchEvent(\n              new CustomEvent('openchange', {\n                detail: open,\n              }),\n            );\n          },\n          onLoad() {\n            opt.element.dispatchEvent(new CustomEvent('load'));\n          },\n        },\n        _,\n      );\n\n      return (\n        <>\n          <style textContent={inline} />\n          <Img {...props} />\n        </>\n      );\n    },\n  );\n};\nexport default Img;\n"],"names":["createEffect","createSignal","mergeProps","onCleanup","Show","untrack","Portal","customElement","inline","ImgLazy","imgCss","style","Img","_","portal","props","maskClosable","escClosable","lazy","disabled","open","setOpen","posi","setPosi","width","height","left","top","openChange","visi","onOpenChange","preventDefault","e","close","type","key","handleDestroy","portalClick","target","document","documentElement","addEventListener","passive","removeEventListener","src","alt","none","stopPropagation","getBoundingClientRect","getCss","srcFull","registry","onLoad","opt","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}
+{"version":3,"sources":["components/img/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createSignal,\n  type JSX,\n  mergeProps,\n  onCleanup,\n  Show,\n  untrack,\n} from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { css } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport { inline } from '../theme';\n\nimport ImgLazy from './lazy';\nimport { imgCss, style } from './style';\n\nexport interface ImgProps extends JSX.HTMLAttributes<HTMLImageElement> {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 图片地址 */\n  src?: string;\n  /** 查看大图的地址, 默认使用 `src`\n   * @since 2.1.2\n   */\n  srcFull?: string;\n  /** 图片 alt */\n  alt?: string;\n  /** 大图查看 */\n  open?: boolean | null;\n  /** 开启关闭大图的回调函数 */\n  onOpenChange?: (open: boolean | null) => void;\n  /** 图片加载完成 */\n  onLoad?(e: Event): void;\n  /** 点击遮罩关闭\n   * @since 2.0.8\n   * @default true\n   */\n  maskClosable?: boolean;\n  /** 通过 `esc` 按键关闭\n   * @default true\n   */\n  escClosable?: boolean;\n  /**\n   * 懒加载\n   * @since 2.8.1\n   * @default true\n   */\n  lazy?: boolean;\n  /** 禁止点开大图\n   * @since 2.8.3\n   * @default false\n   */\n  disabled?: boolean;\n}\nexport type ImgElement = CustomElement<ImgProps, 'onOpenChange'>;\n\nfunction Img(_: ImgProps) {\n  let portal: HTMLDivElement | undefined;\n  const props = mergeProps(\n    {\n      maskClosable: true,\n      escClosable: true,\n      lazy: true,\n      disabled: false,\n    },\n    _,\n  );\n  const [open, setOpen] = createSignal<boolean | null>(null);\n  const [posi, setPosi] = createSignal({\n    width: 0,\n    height: 0,\n    left: 0,\n    top: 0,\n  });\n\n  function getCss() {\n    const { width, height, top, left } = posi();\n\n    return `.portal {--img: url(${props.src});inline-size: ${width}px;block-size: ${height}px;inset-block-start: ${top}px;inset-inline-start: ${left}px;}`;\n  }\n  function openChange(visi: boolean | null) {\n    if (!props.disabled) {\n      setOpen(visi);\n      props.onOpenChange?.(visi);\n    }\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(false);\n      }\n    } else {\n      openChange(false);\n    }\n  }\n  function handleDestroy() {\n    if (open() === false) {\n      openChange(null);\n    }\n  }\n  function handleOpen(e: MouseEvent) {\n    if (!props.disabled) {\n      e.stopPropagation();\n      preventDefault(e);\n      if (e.target) {\n        setPosi((e.target as HTMLImageElement).getBoundingClientRect());\n      }\n      openChange(true);\n    }\n  }\n  function portalClick(e: Event) {\n    preventDefault(e);\n    if (props.maskClosable && e.target === portal) {\n      openChange(false);\n    }\n  }\n\n  createEffect(() => {\n    if (props.open !== void 0 && props.open !== untrack(open)) {\n      setOpen(props.open);\n    }\n  });\n  createEffect(() => {\n    if (open() === true) {\n      document.documentElement.addEventListener('mousewheel', preventDefault, {\n        passive: false,\n      });\n\n      if (props.escClosable) {\n        document.documentElement.addEventListener('keydown', close, false);\n      }\n    }\n\n    onCleanup(() => {\n      document.documentElement.removeEventListener('mousewheel', preventDefault, false);\n      document.documentElement.removeEventListener('keydown', close, false);\n    });\n  });\n\n  return (\n    <>\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <ImgLazy\n        src={props.src}\n        alt={props.alt}\n        lazy={props.lazy}\n        style={props.style}\n        classList={{\n          none: !!open(),\n        }}\n        onClick={handleOpen}\n      />\n      <Show when={open() !== null}>\n        <Portal useShadow={true}>\n          <style textContent={getCss()} />\n          <style textContent={imgCss} />\n          <style textContent={style} />\n          <div\n            ref={portal}\n            class=\"portal\"\n            classList={{\n              open: !!open(),\n              closeing: !open(),\n            }}\n            onAnimationEnd={handleDestroy}\n            onClick={portalClick}\n          >\n            <span class=\"close\" onClick={close} />\n            <img class=\"img\" src={props.srcFull || props.src} alt={props.alt} />\n          </div>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nImg.registry = () => {\n  customElement<ImgProps>(\n    'n-img',\n    {\n      class: void 0,\n      css: void 0,\n      alt: void 0,\n      src: void 0,\n      srcFull: void 0,\n      open: null as boolean | null,\n      maskClosable: void 0,\n      escClosable: void 0,\n      onOpenChange: void 0,\n      onLoad: void 0,\n      lazy: void 0,\n      disabled: void 0,\n    },\n    (_, opt) => {\n      const el = opt.element;\n      const props = mergeProps(\n        {\n          onOpenChange(open: boolean | null) {\n            opt.element.dispatchEvent(\n              new CustomEvent('openchange', {\n                detail: open,\n              }),\n            );\n          },\n          onLoad() {\n            opt.element.dispatchEvent(new CustomEvent('load'));\n          },\n        },\n        _,\n      );\n\n      createEffect(() => {\n        clearAttribute(el, ['css']);\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <Img {...props} />\n        </>\n      );\n    },\n  );\n};\nexport default Img;\n"],"names":["createEffect","createSignal","mergeProps","onCleanup","Show","untrack","Portal","css","customElement","clearAttribute","inline","ImgLazy","imgCss","style","Img","_","portal","props","maskClosable","escClosable","lazy","disabled","open","setOpen","posi","setPosi","width","height","left","top","openChange","visi","onOpenChange","preventDefault","e","close","type","key","handleDestroy","portalClick","target","document","documentElement","addEventListener","passive","removeEventListener","src","alt","none","stopPropagation","getBoundingClientRect","getCss","srcFull","registry","class","onLoad","opt","el","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}

package/es/img/style.js

@@ -74,22 +74,32 @@ import{css as e}from"@moneko/css";export const imgCss=e`
     &::before {
       position: absolute;
       z-index: -1;
+      margin: auto;
       background: var(--img) center/cover no-repeat;
+      opacity: 0.5;
       content: '';
+      inset-inline-start: 0;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      inset-block-end: 0;
       inline-size: 100%;
       block-size: 100%;
       pointer-events: none;
-      opacity: 0.5;
     }
 
     &::after {
       position: absolute;
       z-index: -1;
       content: '';
-      inline-size: 100%;
-      block-size: 100%;
+      inset-inline-start: -10%;
+      inset-block-start: -10%;
+      inset-inline-end: -10%;
+      inset-block-end: -10%;
+      margin: auto;
+      inline-size: 120%;
+      block-size: 120%;
       pointer-events: none;
-      backdrop-filter: blur(50px);
+      backdrop-filter: blur(10px) brightness(80%);
     }
 
     &:hover {

package/es/img/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/img/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const imgCss = css`\n  .img {\n    max-inline-size: 100%;\n    max-block-size: 100%;\n    object-fit: contain;\n    transition: opacity 0.3s;\n  }\n\n  .none {\n    pointer-events: none;\n    opacity: 0.25;\n  }\n\n  .error {\n    display: inline-block;\n    transform: scale(1);\n    min-block-size: 75px;\n\n    &::before {\n      position: absolute;\n      color: transparent;\n      background: #f5f5f5\n        url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23e6e6e6' d='M304.128 456.192c48.64 0 88.064-39.424 88.064-88.064s-39.424-88.064-88.064-88.064-88.064 39.424-88.064 88.064 39.424 88.064 88.064 88.064zm0-116.224c15.36 0 28.16 12.288 28.16 28.16s-12.288 28.16-28.16 28.16-28.16-12.288-28.16-28.16 12.288-28.16 28.16-28.16z'/%3E%3Cpath fill='%23e6e6e6' d='M887.296 159.744H136.704C96.768 159.744 64 192 64 232.448v559.104c0 39.936 32.256 72.704 72.704 72.704h198.144L500.224 688.64l-36.352-222.72 162.304-130.56-61.44 143.872 92.672 214.016-105.472 171.008h335.36C927.232 864.256 960 832 960 791.552V232.448c0-39.936-32.256-72.704-72.704-72.704zm-138.752 71.68v.512H857.6c16.384 0 30.208 13.312 30.208 30.208v399.872L673.28 408.064l75.264-176.64zM304.64 792.064H165.888c-16.384 0-30.208-13.312-30.208-30.208v-9.728l138.752-164.352 104.96 124.416-74.752 79.872zm81.92-355.84l37.376 228.864-.512.512-142.848-169.984c-3.072-3.584-9.216-3.584-12.288 0L135.68 652.8V262.144c0-16.384 13.312-30.208 30.208-30.208h474.624L386.56 436.224zm501.248 325.632c0 16.896-13.312 30.208-29.696 30.208H680.96l57.344-93.184-87.552-202.24 7.168-7.68 229.888 272.896z'/%3E%3C/svg%3E\")\n        no-repeat center / 50% 50%;\n      content: '';\n      inset-inline-start: 0;\n      inset-block-start: 0;\n      inline-size: 100%;\n      block-size: 100%;\n    }\n\n    &::after {\n      position: absolute;\n      overflow: hidden;\n      font-size: 12px;\n      text-align: center;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      color: white;\n      background-color: rgb(0 0 0 / 50%);\n      content: attr(alt);\n      inset-inline-start: 0;\n      inset-block-end: 0;\n      inline-size: 100%;\n      line-height: 2;\n    }\n  }\n`;\nexport const style = css`\n  .close {\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-end: 0;\n    z-index: 1;\n    color: #fff;\n    transition: transform var(--transition-duration);\n    cursor: pointer;\n    transform: scale(0);\n\n    &::before {\n      padding: 0 16px;\n      font-size: 24px;\n      content: '⛌';\n      line-height: 46px;\n    }\n  }\n\n  .portal {\n    position: fixed;\n    z-index: 99999;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    &::before {\n      position: absolute;\n      z-index: -1;\n      background: var(--img) center/cover no-repeat;\n      content: '';\n      inline-size: 100%;\n      block-size: 100%;\n      pointer-events: none;\n      opacity: 0.5;\n    }\n\n    &::after {\n      position: absolute;\n      z-index: -1;\n      content: '';\n      inline-size: 100%;\n      block-size: 100%;\n      pointer-events: none;\n      backdrop-filter: blur(50px);\n    }\n\n    &:hover {\n      .close {\n        transform: scale(1);\n      }\n    }\n  }\n\n  .open {\n    animation: photo-in var(--transition-duration) forwards;\n  }\n\n  .closeing {\n    animation: photo-out var(--transition-duration) forwards;\n  }\n\n  @keyframes photo-in {\n    0% {\n      pointer-events: none;\n    }\n\n    100% {\n      inline-size: 100vi;\n      block-size: 100vb;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n    }\n  }\n\n  @keyframes photo-out {\n    from {\n      inline-size: 100vi;\n      block-size: 100vb;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n    }\n\n    to {\n      pointer-events: none;\n    }\n  }\n`;\n"],"names":["css","imgCss","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,OAASD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+C1B,CAAC,AAAC,AACF,QAAO,MAAME,MAAQF,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFzB,CAAC,AAAC"}
+{"version":3,"sources":["components/img/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const imgCss = css`\n  .img {\n    max-inline-size: 100%;\n    max-block-size: 100%;\n    object-fit: contain;\n    transition: opacity 0.3s;\n  }\n\n  .none {\n    pointer-events: none;\n    opacity: 0.25;\n  }\n\n  .error {\n    display: inline-block;\n    transform: scale(1);\n    min-block-size: 75px;\n\n    &::before {\n      position: absolute;\n      color: transparent;\n      background: #f5f5f5\n        url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23e6e6e6' d='M304.128 456.192c48.64 0 88.064-39.424 88.064-88.064s-39.424-88.064-88.064-88.064-88.064 39.424-88.064 88.064 39.424 88.064 88.064 88.064zm0-116.224c15.36 0 28.16 12.288 28.16 28.16s-12.288 28.16-28.16 28.16-28.16-12.288-28.16-28.16 12.288-28.16 28.16-28.16z'/%3E%3Cpath fill='%23e6e6e6' d='M887.296 159.744H136.704C96.768 159.744 64 192 64 232.448v559.104c0 39.936 32.256 72.704 72.704 72.704h198.144L500.224 688.64l-36.352-222.72 162.304-130.56-61.44 143.872 92.672 214.016-105.472 171.008h335.36C927.232 864.256 960 832 960 791.552V232.448c0-39.936-32.256-72.704-72.704-72.704zm-138.752 71.68v.512H857.6c16.384 0 30.208 13.312 30.208 30.208v399.872L673.28 408.064l75.264-176.64zM304.64 792.064H165.888c-16.384 0-30.208-13.312-30.208-30.208v-9.728l138.752-164.352 104.96 124.416-74.752 79.872zm81.92-355.84l37.376 228.864-.512.512-142.848-169.984c-3.072-3.584-9.216-3.584-12.288 0L135.68 652.8V262.144c0-16.384 13.312-30.208 30.208-30.208h474.624L386.56 436.224zm501.248 325.632c0 16.896-13.312 30.208-29.696 30.208H680.96l57.344-93.184-87.552-202.24 7.168-7.68 229.888 272.896z'/%3E%3C/svg%3E\")\n        no-repeat center / 50% 50%;\n      content: '';\n      inset-inline-start: 0;\n      inset-block-start: 0;\n      inline-size: 100%;\n      block-size: 100%;\n    }\n\n    &::after {\n      position: absolute;\n      overflow: hidden;\n      font-size: 12px;\n      text-align: center;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      color: white;\n      background-color: rgb(0 0 0 / 50%);\n      content: attr(alt);\n      inset-inline-start: 0;\n      inset-block-end: 0;\n      inline-size: 100%;\n      line-height: 2;\n    }\n  }\n`;\nexport const style = css`\n  .close {\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-end: 0;\n    z-index: 1;\n    color: #fff;\n    transition: transform var(--transition-duration);\n    cursor: pointer;\n    transform: scale(0);\n\n    &::before {\n      padding: 0 16px;\n      font-size: 24px;\n      content: '⛌';\n      line-height: 46px;\n    }\n  }\n\n  .portal {\n    position: fixed;\n    z-index: 99999;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    &::before {\n      position: absolute;\n      z-index: -1;\n      margin: auto;\n      background: var(--img) center/cover no-repeat;\n      opacity: 0.5;\n      content: '';\n      inset-inline-start: 0;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n      inset-block-end: 0;\n      inline-size: 100%;\n      block-size: 100%;\n      pointer-events: none;\n    }\n\n    &::after {\n      position: absolute;\n      z-index: -1;\n      content: '';\n      inset-inline-start: -10%;\n      inset-block-start: -10%;\n      inset-inline-end: -10%;\n      inset-block-end: -10%;\n      margin: auto;\n      inline-size: 120%;\n      block-size: 120%;\n      pointer-events: none;\n      backdrop-filter: blur(10px) brightness(80%);\n    }\n\n    &:hover {\n      .close {\n        transform: scale(1);\n      }\n    }\n  }\n\n  .open {\n    animation: photo-in var(--transition-duration) forwards;\n  }\n\n  .closeing {\n    animation: photo-out var(--transition-duration) forwards;\n  }\n\n  @keyframes photo-in {\n    0% {\n      pointer-events: none;\n    }\n\n    100% {\n      inline-size: 100vi;\n      block-size: 100vb;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n    }\n  }\n\n  @keyframes photo-out {\n    from {\n      inline-size: 100vi;\n      block-size: 100vb;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n    }\n\n    to {\n      pointer-events: none;\n    }\n  }\n`;\n"],"names":["css","imgCss","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,OAASD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+C1B,CAAC,AAAC,AACF,QAAO,MAAME,MAAQF,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGzB,CAAC,AAAC"}

package/es/spin/index.js

@@ -1,4 +1,4 @@
-import{template as e}from"solid-js/web";import{mergeProps as t}from"solid-js/web";import{insert as i}from"solid-js/web";import{effect as n}from"solid-js/web";import{createComponent as o}from"solid-js/web";import{className as r}from"solid-js/web";let s=e("<style> "),l=e("<style>"),a=e('<div><div class="content">');import{createEffect as d,Show as c,splitProps as p}from"solid-js";import{css as m,cx as f}from"@moneko/css";import{customElement as b}from"solid-element";import{clearAttribute as u}from"../basic-config";import g,{inline as v}from"../theme";let x=m`
+import{template as e}from"solid-js/web";import{mergeProps as i}from"solid-js/web";import{insert as t}from"solid-js/web";import{effect as n}from"solid-js/web";import{createComponent as o}from"solid-js/web";import{className as r}from"solid-js/web";let s=e("<style> "),l=e("<style>"),a=e('<div><div class="content">');import{createEffect as c,Show as d,splitProps as m}from"solid-js";import{css as p,cx as f}from"@moneko/css";import{customElement as b}from"solid-element";import{clearAttribute as x}from"../basic-config";import u,{inline as g}from"../theme";let v=p`
   :host {
     display: inline-block;
     box-sizing: border-box;
@@ -16,6 +16,8 @@ import{template as e}from"solid-js/web";import{mergeProps as t}from"solid-js/web
 
   .content {
     display: flex;
+    max-inline-size: 100%;
+    max-block-size: 100%;
     opacity: 1;
     transition: opacity var(--transition-duration);
   }
@@ -61,4 +63,4 @@ import{template as e}from"solid-js/web";import{mergeProps as t}from"solid-js/web
       transform: rotate(360deg);
     }
   }
-`;function h(e){let{baseStyle:t}=g;return[(()=>{let e=s(),i=e.firstChild;return n(()=>i.data=t()),e})(),(()=>{let e=l();return e.textContent=x,e})(),o(c,{get when(){return e.css},get children(){let t=s(),i=t.firstChild;return n(()=>i.data=m(e.css)),t}}),(()=>{let t=a();return i(t.firstChild,()=>e.children),n(i=>{let n=f("spin",e.class),o=!!e.spin;return n!==i._v$&&r(t,i._v$=n),o!==i._v$2&&t.classList.toggle("spining",i._v$2=o),i},{_v$:void 0,_v$2:void 0}),t})()]}h.registry=()=>{b("n-spin",{class:void 0,css:void 0,spin:void 0,children:void 0},(e,i)=>{let n=i.element,r=[...(i.element.childNodes||[]).values()],[,s]=p(e,["children"]);return d(()=>{u(n,["css"]),n.replaceChildren()}),[(()=>{let e=l();return e.textContent=v,e})(),o(h,t(s,{children:r}))]})};export default h;
+`;function h(e){let{baseStyle:i}=u;return[(()=>{let e=s(),t=e.firstChild;return n(()=>t.data=i()),e})(),(()=>{let e=l();return e.textContent=v,e})(),o(d,{get when(){return e.css},get children(){let i=s(),t=i.firstChild;return n(()=>t.data=p(e.css)),i}}),(()=>{let i=a();return t(i.firstChild,()=>e.children),n(t=>{let n=f("spin",e.class),o=!!e.spin;return n!==t._v$&&r(i,t._v$=n),o!==t._v$2&&i.classList.toggle("spining",t._v$2=o),t},{_v$:void 0,_v$2:void 0}),i})()]}h.registry=()=>{b("n-spin",{class:void 0,css:void 0,spin:void 0,children:void 0},(e,t)=>{let n=t.element,r=[...(t.element.childNodes||[]).values()],[,s]=m(e,["children"]);return c(()=>{x(n,["css"]),n.replaceChildren()}),[(()=>{let e=l();return e.textContent=g,e})(),o(h,i(s,{children:r}))]})};export default h;

package/es/spin/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/spin/index.tsx"],"sourcesContent":["import { createEffect, Show, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport theme, { inline } from '../theme';\n\nconst style = css`\n  :host {\n    display: inline-block;\n    box-sizing: border-box;\n  }\n\n  .spin {\n    inline-size: fit-content;\n    inline-size: 100%;\n    block-size: 100%;\n    min-inline-size: 16px;\n    min-block-size: 16px;\n    position: relative;\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: flex;\n    opacity: 1;\n    transition: opacity var(--transition-duration);\n  }\n\n  .spining {\n    cursor: not-allowed;\n\n    .content {\n      opacity: 0.3;\n      pointer-events: none;\n      user-select: none;\n      filter: blur(4px);\n    }\n\n    &::before {\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin: auto;\n      border: 1px solid;\n      border-color: var(--text-secondary) transparent;\n      border-radius: 50%;\n      font-size: large;\n      text-align: center;\n      inline-size: 16px;\n      block-size: 16px;\n      inset-block: 0;\n      inset-inline: 0;\n      box-sizing: border-box;\n      line-height: 1;\n      content: '';\n      animation: spin-rotate-effect 1s infinite;\n    }\n  }\n\n  @keyframes spin-rotate-effect {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nexport interface SpinProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 加载状态 */\n  spin?: boolean;\n  /** 内容 */\n  children?: JSXElement | JSXElement[];\n}\n\nfunction Spin(props: SpinProps) {\n  const { baseStyle } = theme;\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <div\n        class={cx('spin', props.class)}\n        classList={{\n          spining: props.spin,\n        }}\n      >\n        <div class=\"content\">{props.children}</div>\n      </div>\n    </>\n  );\n}\n\nexport type SpinElement = CustomElement<SpinProps>;\n\nSpin.registry = () => {\n  customElement<SpinProps>(\n    'n-spin',\n    { class: void 0, css: void 0, spin: void 0, children: void 0 },\n    (_, opt) => {\n      const el = opt.element;\n      const childNodes = (opt.element.childNodes as NodeList) || [];\n      const nodes = [...childNodes.values()];\n      const [, props] = splitProps(_, ['children']);\n\n      createEffect(() => {\n        clearAttribute(el, ['css']);\n        el.replaceChildren();\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <Spin {...props}>{nodes}</Spin>\n        </>\n      );\n    },\n  );\n};\nexport default Spin;\n"],"names":["createEffect","Show","splitProps","css","cx","customElement","clearAttribute","theme","inline","style","Spin","props","baseStyle","children","class","spin","registry","_","opt","el","element","nodes","childNodes","values","replaceChildren"],"mappings":"0TAAA,QAASA,gBAAAA,CAAY,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAC1D,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAyB,iBAAkB,AAClE,QAAOC,GAASC,UAAAA,CAAM,KAAQ,UAAW,CAEzC,IAAMC,EAAQN,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DlB,CAAC,CAaD,SAASO,EAAKC,CAAgB,EAC5B,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGL,EAEtB,0DAEwBK,gDACAH,UACnBR,qBAAWU,EAAMR,GAAG,8DACCA,EAAIQ,EAAMR,GAAG,kDAQXQ,EAAME,QAAQ,cAL7BT,EAAG,OAAQO,EAAMG,KAAK,MAElBH,EAAMI,IAAI,sHAO7B,CAIAL,EAAKM,QAAQ,CAAG,KACdX,EACE,SACA,CAAES,MAAO,KAAK,EAAGX,IAAK,KAAK,EAAGY,KAAM,KAAK,EAAGF,SAAU,KAAK,CAAE,EAC7D,CAACI,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAEhBC,EAAQ,IAAIC,AADC,CAAA,AAACJ,EAAIE,OAAO,CAACE,UAAU,EAAiB,EAAE,AAAD,EAC/BC,MAAM,GAAG,CAChC,EAAGZ,EAAM,CAAGT,EAAWe,EAAG,CAAC,WAAW,EAM5C,OAJAjB,EAAa,KACXM,EAAea,EAAI,CAAC,MAAM,EAC1BA,EAAGK,eAAe,EACpB,yCAGwBhB,UACnBE,IAASC,YAAQU,KAGxB,EAEJ,CACA,gBAAeX,CAAK"}
+{"version":3,"sources":["components/spin/index.tsx"],"sourcesContent":["import { createEffect, Show, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport theme, { inline } from '../theme';\n\nconst style = css`\n  :host {\n    display: inline-block;\n    box-sizing: border-box;\n  }\n\n  .spin {\n    inline-size: fit-content;\n    inline-size: 100%;\n    block-size: 100%;\n    min-inline-size: 16px;\n    min-block-size: 16px;\n    position: relative;\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: flex;\n    max-inline-size: 100%;\n    max-block-size: 100%;\n    opacity: 1;\n    transition: opacity var(--transition-duration);\n  }\n\n  .spining {\n    cursor: not-allowed;\n\n    .content {\n      opacity: 0.3;\n      pointer-events: none;\n      user-select: none;\n      filter: blur(4px);\n    }\n\n    &::before {\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin: auto;\n      border: 1px solid;\n      border-color: var(--text-secondary) transparent;\n      border-radius: 50%;\n      font-size: large;\n      text-align: center;\n      inline-size: 16px;\n      block-size: 16px;\n      inset-block: 0;\n      inset-inline: 0;\n      box-sizing: border-box;\n      line-height: 1;\n      content: '';\n      animation: spin-rotate-effect 1s infinite;\n    }\n  }\n\n  @keyframes spin-rotate-effect {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nexport interface SpinProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 加载状态 */\n  spin?: boolean;\n  /** 内容 */\n  children?: JSXElement | JSXElement[];\n}\n\nfunction Spin(props: SpinProps) {\n  const { baseStyle } = theme;\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <div\n        class={cx('spin', props.class)}\n        classList={{\n          spining: props.spin,\n        }}\n      >\n        <div class=\"content\">{props.children}</div>\n      </div>\n    </>\n  );\n}\n\nexport type SpinElement = CustomElement<SpinProps>;\n\nSpin.registry = () => {\n  customElement<SpinProps>(\n    'n-spin',\n    { class: void 0, css: void 0, spin: void 0, children: void 0 },\n    (_, opt) => {\n      const el = opt.element;\n      const childNodes = (opt.element.childNodes as NodeList) || [];\n      const nodes = [...childNodes.values()];\n      const [, props] = splitProps(_, ['children']);\n\n      createEffect(() => {\n        clearAttribute(el, ['css']);\n        el.replaceChildren();\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <Spin {...props}>{nodes}</Spin>\n        </>\n      );\n    },\n  );\n};\nexport default Spin;\n"],"names":["createEffect","Show","splitProps","css","cx","customElement","clearAttribute","theme","inline","style","Spin","props","baseStyle","children","class","spin","registry","_","opt","el","element","nodes","childNodes","values","replaceChildren"],"mappings":"0TAAA,QAASA,gBAAAA,CAAY,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAC1D,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAyB,iBAAkB,AAClE,QAAOC,GAASC,UAAAA,CAAM,KAAQ,UAAW,CAEzC,IAAMC,EAAQN,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiElB,CAAC,CAaD,SAASO,EAAKC,CAAgB,EAC5B,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGL,EAEtB,0DAEwBK,gDACAH,UACnBR,qBAAWU,EAAMR,GAAG,8DACCA,EAAIQ,EAAMR,GAAG,kDAQXQ,EAAME,QAAQ,cAL7BT,EAAG,OAAQO,EAAMG,KAAK,MAElBH,EAAMI,IAAI,sHAO7B,CAIAL,EAAKM,QAAQ,CAAG,KACdX,EACE,SACA,CAAES,MAAO,KAAK,EAAGX,IAAK,KAAK,EAAGY,KAAM,KAAK,EAAGF,SAAU,KAAK,CAAE,EAC7D,CAACI,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAEhBC,EAAQ,IAAIC,AADC,CAAA,AAACJ,EAAIE,OAAO,CAACE,UAAU,EAAiB,EAAE,AAAD,EAC/BC,MAAM,GAAG,CAChC,EAAGZ,EAAM,CAAGT,EAAWe,EAAG,CAAC,WAAW,EAM5C,OAJAjB,EAAa,KACXM,EAAea,EAAI,CAAC,MAAM,EAC1BA,EAAGK,eAAe,EACpB,yCAGwBhB,UACnBE,IAASC,YAAQU,KAGxB,EAEJ,CACA,gBAAeX,CAAK"}

package/lib/glass-panel/index.d.ts

@@ -19,6 +19,11 @@ export interface GlassPanelProps {
      * @default 16
      */
     filterBlur?: number;
+    /**
+     * 亮度
+     * @since 2.12.3
+     */
+    brightness?: number;
     filter?: Omit<JSX.FilterSVGAttributes<SVGFilterElement>, 'id'>;
     feTurbulence?: JSX.FeTurbulanceSVGAttributes<SVGFETurbulenceElement>;
     feDisplacementMap?: JSX.FeDisplacementMapSVGAttributes<SVGFEDisplacementMapElement>;

package/lib/glass-panel/index.js

@@ -1,16 +1,16 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return p}});const e=require("solid-js/web"),r=require("solid-js"),t=require("@moneko/css"),l=require("solid-element"),i=require("../basic-config"),s=require("../theme"),n=(0,e.template)("<style> "),o=(0,e.template)('<slot id="backdrop-slot">'),c=(0,e.template)('<svg><filter filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency="0.45" numOctaves="1"></feTurbulence><feDisplacementMap in="SourceGraphic" scale="50">'),u=(0,e.template)("<style>"),a=l=>{let i=(0,r.mergeProps)({filterBlur:16},l),[s]=(0,r.splitProps)(i,["css","filter","feTurbulence","feDisplacementMap","filterBlur"]),u=(0,r.createUniqueId)(),a=(0,r.createMemo)(()=>(0,t.css)`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return p}});const e=require("solid-js/web"),r=require("solid-js"),t=require("@moneko/css"),s=require("solid-element"),i=require("../basic-config"),l=require("../theme"),n=(0,e.template)("<style> "),o=(0,e.template)('<slot id="backdrop-slot">'),c=(0,e.template)('<svg><filter filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency="0.45" numOctaves="1"></feTurbulence><feDisplacementMap in="SourceGraphic" scale="50">'),u=(0,e.template)("<style>"),a=s=>{let i=(0,r.mergeProps)({filterBlur:16},s),[l]=(0,r.splitProps)(i,["css","filter","feTurbulence","feDisplacementMap","filterBlur","brightness"]),u=(0,r.createUniqueId)(),a=(0,r.createMemo)(()=>{let e=(0,t.cx)(!!l.brightness&&`brightness(${l.brightness})`,!!l.filterBlur&&`blur(${l.filterBlur}px)`);return(0,t.css)`
       #backdrop-slot {
         display: block;
         overflow: inherit;
         border-radius: inherit;
         inline-size: 100%;
         block-size: 100%;
-        backdrop-filter: blur(${s.filterBlur}px);
+        backdrop-filter: ${e};
       }
 
       @supports (backdrop-filter: url(#${u})) {
         #backdrop-slot {
-          backdrop-filter: ${(0,t.cx)(!!s.filterBlur&&`blur(${s.filterBlur}px)`,`url(#${u})`)};
+          backdrop-filter: ${e} url(#${u});
         }
       }
-    `);return[(()=>{let r=n(),t=r.firstChild;return(0,e.effect)(()=>t.data=a()),r})(),(0,e.createComponent)(r.Show,{get when(){return i.css},get children(){let r=n(),l=r.firstChild;return(0,e.effect)(()=>l.data=(0,t.css)(s.css)),r}}),(()=>{let r=o();return r._$owner=(0,e.getOwner)(),r})(),(()=>{let r=c(),t=r.firstChild,l=t.firstChild,i=l.nextSibling;return r.style.setProperty("display","none"),(0,e.setAttribute)(t,"id",u),(0,e.spread)(t,(0,e.mergeProps)(()=>s.filter),!0,!0),(0,e.spread)(l,(0,e.mergeProps)(()=>s.feTurbulence),!0,!1),(0,e.spread)(i,(0,e.mergeProps)(()=>s.feDisplacementMap),!0,!1),r})()]};a.registry=()=>{(0,l.customElement)("n-glass-panel",{class:void 0,css:void 0,filterBlur:void 0,filter:void 0,feTurbulence:void 0,feDisplacementMap:void 0},(t,l)=>{let n=l.element;return(0,r.createEffect)(()=>{(0,i.clearAttribute)(n,["css","filterBlur","filter","feTurbulence","feDisplacementMap"])}),[(()=>{let e=u();return e.textContent=s.inline,e})(),(0,e.createComponent)(a,t)]})};const p=a;
+    `});return[(()=>{let r=n(),t=r.firstChild;return(0,e.effect)(()=>t.data=a()),r})(),(0,e.createComponent)(r.Show,{get when(){return i.css},get children(){let r=n(),s=r.firstChild;return(0,e.effect)(()=>s.data=(0,t.css)(l.css)),r}}),(()=>{let r=o();return r._$owner=(0,e.getOwner)(),r})(),(()=>{let r=c(),t=r.firstChild,s=t.firstChild,i=s.nextSibling;return r.style.setProperty("display","none"),(0,e.setAttribute)(t,"id",u),(0,e.spread)(t,(0,e.mergeProps)(()=>l.filter),!0,!0),(0,e.spread)(s,(0,e.mergeProps)(()=>l.feTurbulence),!0,!1),(0,e.spread)(i,(0,e.mergeProps)(()=>l.feDisplacementMap),!0,!1),r})()]};a.registry=()=>{(0,s.customElement)("n-glass-panel",{class:void 0,css:void 0,brightness:void 0,filterBlur:void 0,filter:void 0,feTurbulence:void 0,feDisplacementMap:void 0},(t,s)=>{let n=s.element;return(0,r.createEffect)(()=>{(0,i.clearAttribute)(n,["css","brightness","filterBlur","filter","feTurbulence","feDisplacementMap"])}),[(()=>{let e=u();return e.textContent=l.inline,e})(),(0,e.createComponent)(a,t)]})};const p=a;

package/lib/glass-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/glass-panel/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createUniqueId,\n  JSX,\n  mergeProps,\n  Show,\n  splitProps,\n} from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport { inline } from '../theme';\n\nexport interface GlassPanelProps {\n  /**\n   * 子元素\n   */\n  children?: JSXElement;\n  /**\n   * 样式\n   */\n  css?: string;\n  /**\n   * 类名\n   */\n  class?: string;\n  /**\n   * 模糊值 (px)\n   * @default 16\n   */\n  filterBlur?: number;\n  filter?: Omit<JSX.FilterSVGAttributes<SVGFilterElement>, 'id'>;\n  feTurbulence?: JSX.FeTurbulanceSVGAttributes<SVGFETurbulenceElement>;\n  feDisplacementMap?: JSX.FeDisplacementMapSVGAttributes<SVGFEDisplacementMapElement>;\n}\n\nconst GlassPanel = (_: GlassPanelProps) => {\n  const props = mergeProps({ filterBlur: 16 }, _);\n  const [local] = splitProps(props, [\n    'css',\n    'filter',\n    'feTurbulence',\n    'feDisplacementMap',\n    'filterBlur',\n  ]);\n  const id = createUniqueId();\n  const baseCss = createMemo(() => {\n    return css`\n      #backdrop-slot {\n        display: block;\n        overflow: inherit;\n        border-radius: inherit;\n        inline-size: 100%;\n        block-size: 100%;\n        backdrop-filter: blur(${local.filterBlur}px);\n      }\n\n      @supports (backdrop-filter: url(#${id})) {\n        #backdrop-slot {\n          backdrop-filter: ${cx(\n            !!local.filterBlur && `blur(${local.filterBlur}px)`,\n            `url(#${id})`,\n          )};\n        }\n      }\n    `;\n  });\n\n  return (\n    <>\n      <style textContent={baseCss()} />\n      <Show when={props.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <slot id=\"backdrop-slot\" />\n      <svg style={{ display: 'none' }}>\n        <filter\n          id={id}\n          filterUnits=\"objectBoundingBox\"\n          x=\"-5%\"\n          y=\"-5%\"\n          width=\"110%\"\n          height=\"110%\"\n          {...local.filter}\n        >\n          <feTurbulence\n            type=\"fractalNoise\"\n            baseFrequency=\"0.45\"\n            numOctaves=\"1\"\n            {...local.feTurbulence}\n          />\n          <feDisplacementMap in=\"SourceGraphic\" scale=\"50\" {...local.feDisplacementMap} />\n        </filter>\n      </svg>\n    </>\n  );\n};\n\nexport type GlassPanelElement = CustomElement<GlassPanelProps>;\n\nGlassPanel.registry = () => {\n  customElement<GlassPanelProps>(\n    'n-glass-panel',\n    {\n      class: void 0,\n      css: void 0,\n      filterBlur: void 0,\n      filter: void 0,\n      feTurbulence: void 0,\n      feDisplacementMap: void 0,\n    },\n    (props, opt) => {\n      const el = opt.element;\n\n      createEffect(() => {\n        clearAttribute(el, ['css', 'filterBlur', 'filter', 'feTurbulence', 'feDisplacementMap']);\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <GlassPanel {...props} />\n        </>\n      );\n    },\n  );\n};\n\nexport default GlassPanel;\n"],"names":["GlassPanel","_","props","mergeProps","filterBlur","local","splitProps","id","createUniqueId","baseCss","createMemo","css","cx","Show","filter","feTurbulence","feDisplacementMap","registry","customElement","class","opt","el","element","createEffect","clearAttribute","inline"],"mappings":"kGAkIA,+CAAA,+CA1HO,sBACiB,yBACM,2BAGkB,6BACzB,sWAyBjBA,EAAa,AAACC,IAClB,IAAMC,EAAQC,GAAAA,YAAU,EAAC,CAAEC,WAAY,EAAG,EAAGH,GACvC,CAACI,EAAM,CAAGC,GAAAA,YAAU,EAACJ,EAAO,CAChC,MACA,SACA,eACA,oBACA,aACD,EACKK,EAAKC,GAAAA,gBAAc,IACnBC,EAAUC,GAAAA,YAAU,EAAC,IAClBC,GAAAA,KAAG,CAAA,CAAC;;;;;;;8BAOe,EAAEN,EAAMD,UAAU,CAAC;;;uCAGV,EAAEG,EAAG;;2BAEjB,EAAEK,GAAAA,IAAE,EACnB,CAAC,CAACP,EAAMD,UAAU,EAAI,CAAC,KAAK,EAAEC,EAAMD,UAAU,CAAC,GAAG,CAAC,CACnD,CAAC,KAAK,EAAEG,EAAG,CAAC,CAAC,EACb;;;IAGR,CAAC,EAGH,oEAEwBE,iCACnBI,MAAI,oBAAOX,EAAMS,GAAG,wEACCA,GAAAA,KAAG,EAACN,EAAMM,GAAG,qMAK3BJ,uCAMAF,EAAMS,MAAM,6CAMVT,EAAMU,YAAY,6CAE6BV,EAAMW,iBAAiB,eAKtF,CAIAhB,CAAAA,EAAWiB,QAAQ,CAAG,KACpBC,GAAAA,eAAa,EACX,gBACA,CACEC,MAAO,KAAK,EACZR,IAAK,KAAK,EACVP,WAAY,KAAK,EACjBU,OAAQ,KAAK,EACbC,aAAc,KAAK,EACnBC,kBAAmB,KAAK,CAC1B,EACA,CAACd,EAAOkB,KACN,IAAMC,EAAKD,EAAIE,OAAO,CAKtB,MAHAC,GAAAA,cAAY,EAAC,KACXC,GAAAA,gBAAc,EAACH,EAAI,CAAC,MAAO,aAAc,SAAU,eAAgB,oBAAoB,CACzF,yCAGwBI,QAAM,6BACzBzB,EAAeE,GAGtB,EAEJ,QAEA,EAAeF"}
+{"version":3,"sources":["components/glass-panel/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createUniqueId,\n  JSX,\n  mergeProps,\n  Show,\n  splitProps,\n} from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport { inline } from '../theme';\n\nexport interface GlassPanelProps {\n  /**\n   * 子元素\n   */\n  children?: JSXElement;\n  /**\n   * 样式\n   */\n  css?: string;\n  /**\n   * 类名\n   */\n  class?: string;\n  /**\n   * 模糊值 (px)\n   * @default 16\n   */\n  filterBlur?: number;\n  /**\n   * 亮度\n   * @since 2.12.3\n   */\n  brightness?: number;\n  filter?: Omit<JSX.FilterSVGAttributes<SVGFilterElement>, 'id'>;\n  feTurbulence?: JSX.FeTurbulanceSVGAttributes<SVGFETurbulenceElement>;\n  feDisplacementMap?: JSX.FeDisplacementMapSVGAttributes<SVGFEDisplacementMapElement>;\n}\n\nconst GlassPanel = (_: GlassPanelProps) => {\n  const props = mergeProps({ filterBlur: 16 }, _);\n  const [local] = splitProps(props, [\n    'css',\n    'filter',\n    'feTurbulence',\n    'feDisplacementMap',\n    'filterBlur',\n    'brightness',\n  ]);\n  const id = createUniqueId();\n  const baseCss = createMemo(() => {\n    const normal = cx(\n      !!local.brightness && `brightness(${local.brightness})`,\n      !!local.filterBlur && `blur(${local.filterBlur}px)`,\n    );\n\n    return css`\n      #backdrop-slot {\n        display: block;\n        overflow: inherit;\n        border-radius: inherit;\n        inline-size: 100%;\n        block-size: 100%;\n        backdrop-filter: ${normal};\n      }\n\n      @supports (backdrop-filter: url(#${id})) {\n        #backdrop-slot {\n          backdrop-filter: ${normal} url(#${id});\n        }\n      }\n    `;\n  });\n\n  return (\n    <>\n      <style textContent={baseCss()} />\n      <Show when={props.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <slot id=\"backdrop-slot\" />\n      <svg style={{ display: 'none' }}>\n        <filter\n          id={id}\n          filterUnits=\"objectBoundingBox\"\n          x=\"-5%\"\n          y=\"-5%\"\n          width=\"110%\"\n          height=\"110%\"\n          {...local.filter}\n        >\n          <feTurbulence\n            type=\"fractalNoise\"\n            baseFrequency=\"0.45\"\n            numOctaves=\"1\"\n            {...local.feTurbulence}\n          />\n          <feDisplacementMap in=\"SourceGraphic\" scale=\"50\" {...local.feDisplacementMap} />\n        </filter>\n      </svg>\n    </>\n  );\n};\n\nexport type GlassPanelElement = CustomElement<GlassPanelProps>;\n\nGlassPanel.registry = () => {\n  customElement<GlassPanelProps>(\n    'n-glass-panel',\n    {\n      class: void 0,\n      css: void 0,\n      brightness: void 0,\n      filterBlur: void 0,\n      filter: void 0,\n      feTurbulence: void 0,\n      feDisplacementMap: void 0,\n    },\n    (props, opt) => {\n      const el = opt.element;\n\n      createEffect(() => {\n        clearAttribute(el, [\n          'css',\n          'brightness',\n          'filterBlur',\n          'filter',\n          'feTurbulence',\n          'feDisplacementMap',\n        ]);\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <GlassPanel {...props} />\n        </>\n      );\n    },\n  );\n};\n\nexport default GlassPanel;\n"],"names":["GlassPanel","_","props","mergeProps","filterBlur","local","splitProps","id","createUniqueId","baseCss","createMemo","normal","cx","brightness","css","Show","filter","feTurbulence","feDisplacementMap","registry","customElement","class","opt","el","element","createEffect","clearAttribute","inline"],"mappings":"kGAkJA,+CAAA,+CA1IO,sBACiB,yBACM,2BAGkB,6BACzB,sWA8BjBA,EAAa,AAACC,IAClB,IAAMC,EAAQC,GAAAA,YAAU,EAAC,CAAEC,WAAY,EAAG,EAAGH,GACvC,CAACI,EAAM,CAAGC,GAAAA,YAAU,EAACJ,EAAO,CAChC,MACA,SACA,eACA,oBACA,aACA,aACD,EACKK,EAAKC,GAAAA,gBAAc,IACnBC,EAAUC,GAAAA,YAAU,EAAC,KACzB,IAAMC,EAASC,GAAAA,IAAE,EACf,CAAC,CAACP,EAAMQ,UAAU,EAAI,CAAC,WAAW,EAAER,EAAMQ,UAAU,CAAC,CAAC,CAAC,CACvD,CAAC,CAACR,EAAMD,UAAU,EAAI,CAAC,KAAK,EAAEC,EAAMD,UAAU,CAAC,GAAG,CAAC,EAGrD,MAAOU,GAAAA,KAAG,CAAA,CAAC;;;;;;;yBAOU,EAAEH,EAAO;;;uCAGK,EAAEJ,EAAG;;2BAEjB,EAAEI,EAAO,MAAM,EAAEJ,EAAG;;;IAG3C,CAAC,AACH,GAEA,oEAEwBE,iCACnBM,MAAI,oBAAOb,EAAMY,GAAG,wEACCA,GAAAA,KAAG,EAACT,EAAMS,GAAG,qMAK3BP,uCAMAF,EAAMW,MAAM,6CAMVX,EAAMY,YAAY,6CAE6BZ,EAAMa,iBAAiB,eAKtF,CAIAlB,CAAAA,EAAWmB,QAAQ,CAAG,KACpBC,GAAAA,eAAa,EACX,gBACA,CACEC,MAAO,KAAK,EACZP,IAAK,KAAK,EACVD,WAAY,KAAK,EACjBT,WAAY,KAAK,EACjBY,OAAQ,KAAK,EACbC,aAAc,KAAK,EACnBC,kBAAmB,KAAK,CAC1B,EACA,CAAChB,EAAOoB,KACN,IAAMC,EAAKD,EAAIE,OAAO,CAYtB,MAVAC,GAAAA,cAAY,EAAC,KACXC,GAAAA,gBAAc,EAACH,EAAI,CACjB,MACA,aACA,aACA,SACA,eACA,oBACD,CACH,yCAGwBI,QAAM,6BACzB3B,EAAeE,GAGtB,EAEJ,QAEA,EAAeF"}

package/lib/highlight-text/index.js

@@ -5,4 +5,4 @@
     white-space: break-spaces;
     cursor: auto;
   }
-`;function c(e,t){let r;let i=[];for(;(r=t.exec(e))&&(i.push(r),t.global););return i}function u(e,t,r,i,l){c(l,new RegExp(r,i)).forEach(r=>{let i;let l=new Range;i=0+r.index,e.firstChild&&(l.setStart(e.firstChild,i),i+=r[0].length,l.setEnd(e.firstChild,i));let n=CSS.highlights.get(t);n?n.add(l):CSS.highlights.set(t,new Highlight().add(l))})}function d(i){let l;let{baseStyle:o}=n.default,h=(0,t.createUniqueId)(),c=(0,t.createMemo)(()=>`${i.text}${i.extra??""}`);return(0,t.createEffect)(()=>{if(l&&i.highlight){if(Array.isArray(i.highlight))for(let e=0,t=i.highlight.length;e<t;e++){let t=i.highlight[e],r="object"!=typeof t,n=String(r?t:t.highlight);n.length&&u(l,h,n,r?i.flag:t.flag??i.flag,c())}else String(i.highlight).length&&u(l,h,String(i.highlight),i.flag,c())}}),(0,t.createEffect)(()=>{if(l&&"string"==typeof i.extra){let e=new Range,t=i.text?.length||0;l.firstChild&&(e.setStart(l.firstChild,t),t+=i.extra.length,e.setEnd(l.firstChild,t));let r=CSS.highlights.get(h);r?r.add(e):CSS.highlights.set(h,new Highlight().add(e))}}),[(()=>{let t=s(),r=t.firstChild;return(0,e.effect)(()=>r.data=o()),t})(),(()=>{let e=a();return e.textContent=f,e})(),(()=>{let t=s(),r=t.firstChild;return(0,e.effect)(()=>r.data=`::highlight(${h}) {color: var(--primary-color, ${i.highlightColor??"#5794ff"});}`),t})(),(0,e.createComponent)(t.Show,{get when(){return i.css},get children(){let t=s(),l=t.firstChild;return(0,e.effect)(()=>l.data=(0,r.css)(i.css)),t}}),(()=>{let t=g(),n=l;return"function"==typeof n?(0,e.use)(n,t):l=t,(0,e.insert)(t,c),(0,e.effect)(()=>(0,e.className)(t,(0,r.cx)("text",i.class))),t})()]}d.registry=()=>{(0,i.customElement)("n-highlight-text",{class:void 0,css:void 0,text:void 0,highlight:void 0,flag:void 0,extra:void 0,highlightColor:void 0,children:void 0},(r,i)=>{let o=i.element,h=(0,t.mergeProps)({text:o.textContent,css:o.css},r);return(0,t.createEffect)(()=>{(0,l.clearAttribute)(o,["css","text","highlight","extra","flag"]),o.replaceChildren()}),[(()=>{let e=a();return e.textContent=n.inline,e})(),(0,e.createComponent)(d,h)]})};const p=d;
+`;function c(e,t){let r;let i=[];for(;(r=t.exec(e))&&(i.push(r),t.global););return i}function u(e,t,r,i,l){c(l,new RegExp(r,i)).forEach(r=>{let i;let l=new Range;i=0+r.index,e.firstChild&&(l.setStart(e.firstChild,i),i+=r[0].length,l.setEnd(e.firstChild,i));let n=CSS.highlights.get(t);n?n.add(l):CSS.highlights.set(t,new Highlight().add(l))})}function d(i){let l;let{baseStyle:o}=n.default,h=(0,t.createUniqueId)(),c=(0,t.createMemo)(()=>`${i.text}${i.extra??""}`);return(0,t.createEffect)(()=>{if(l&&i.highlight){if(Array.isArray(i.highlight))for(let e=0,t=i.highlight.length;e<t;e++){let t=i.highlight[e],r="object"!=typeof t,n=String(r?t:t.highlight);n.length&&u(l,h,n,r?i.flag:t.flag??i.flag,c())}else String(i.highlight).length&&u(l,h,String(i.highlight),i.flag,c())}}),(0,t.createEffect)(()=>{if(l&&"string"==typeof i.extra){let e=new Range,t=i.text?.length||0;l.firstChild&&(e.setStart(l.firstChild,t),t+=i.extra.length,e.setEnd(l.firstChild,t));let r=CSS.highlights.get(h);r?r.add(e):CSS.highlights.set(h,new Highlight().add(e))}}),[(()=>{let t=s(),r=t.firstChild;return(0,e.effect)(()=>r.data=o()),t})(),(()=>{let e=a();return e.textContent=f,e})(),(()=>{let t=s(),r=t.firstChild;return(0,e.effect)(()=>r.data=`::highlight(${h}) {color: ${i.highlightColor??"var(--primary-color, #5794ff)"};}`),t})(),(0,e.createComponent)(t.Show,{get when(){return i.css},get children(){let t=s(),l=t.firstChild;return(0,e.effect)(()=>l.data=(0,r.css)(i.css)),t}}),(()=>{let t=g(),n=l;return"function"==typeof n?(0,e.use)(n,t):l=t,(0,e.insert)(t,c),(0,e.effect)(()=>(0,e.className)(t,(0,r.cx)("text",i.class))),t})()]}d.registry=()=>{(0,i.customElement)("n-highlight-text",{class:void 0,css:void 0,text:void 0,highlight:void 0,flag:void 0,extra:void 0,highlightColor:void 0,children:void 0},(r,i)=>{let o=i.element,h=(0,t.mergeProps)({text:o.textContent,css:o.css},r);return(0,t.createEffect)(()=>{(0,l.clearAttribute)(o,["css","text","highlight","extra","flag"]),o.replaceChildren()}),[(()=>{let e=a();return e.textContent=n.inline,e})(),(0,e.createComponent)(d,h)]})};const p=d;

package/lib/highlight-text/index.js.map

@@ -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 execAll(str: string, regex: RegExp) {\n  let lastMatch: RegExpExecArray | null;\n  const matches: RegExpExecArray[] = [];\n\n  while ((lastMatch = regex.exec(str))) {\n    matches.push(lastMatch);\n\n    if (!regex.global) break;\n  }\n\n  return matches;\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\n  execAll(text, regex).forEach((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 cssHighlight = CSS.highlights.get(id);\n\n    if (cssHighlight) {\n      cssHighlight.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   * @default '#5794ff'\n   * @since 2.12.2\n   **/\n  highlightColor?: 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 !== 'object';\n          const hitStr = String(isOne ? item : item.highlight);\n\n          if (hitStr.length) {\n            highlight(box, id, hitStr, isOne ? props.flag : (item.flag ?? props.flag), text());\n          }\n        }\n      } else if (String(props.highlight).length) {\n        highlight(box, id, String(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 cssHighlight = CSS.highlights.get(id);\n\n      if (cssHighlight) {\n        cssHighlight.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\n        textContent={`::highlight(${id}) {color: var(--primary-color, ${\n          props.highlightColor ?? '#5794ff'\n        });}`}\n      />\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>;\n\nHighlightText.registry = () => {\n  customElement<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      highlightColor: 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', 'flag']);\n        el.replaceChildren();\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <HighlightText {...props} />\n        </>\n      );\n    },\n  );\n};\n\nexport default HighlightText;\n"],"names":["style","css","execAll","str","regex","lastMatch","matches","exec","push","global","highlight","box","id","regExp","flag","text","RegExp","forEach","match","pos","range","Range","index","firstChild","setStart","length","setEnd","cssHighlight","CSS","highlights","get","add","set","Highlight","HighlightText","props","baseStyle","theme","createUniqueId","createMemo","extra","createEffect","Array","isArray","i","len","item","isOne","hitStr","String","highlightColor","Show","cx","class","registry","customElement","children","_","opt","el","element","mergeProps","textContent","clearAttribute","replaceChildren","inline"],"mappings":"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"}
+{"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 execAll(str: string, regex: RegExp) {\n  let lastMatch: RegExpExecArray | null;\n  const matches: RegExpExecArray[] = [];\n\n  while ((lastMatch = regex.exec(str))) {\n    matches.push(lastMatch);\n\n    if (!regex.global) break;\n  }\n\n  return matches;\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\n  execAll(text, regex).forEach((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 cssHighlight = CSS.highlights.get(id);\n\n    if (cssHighlight) {\n      cssHighlight.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   * @default '#5794ff'\n   * @since 2.12.2\n   **/\n  highlightColor?: 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 !== 'object';\n          const hitStr = String(isOne ? item : item.highlight);\n\n          if (hitStr.length) {\n            highlight(box, id, hitStr, isOne ? props.flag : (item.flag ?? props.flag), text());\n          }\n        }\n      } else if (String(props.highlight).length) {\n        highlight(box, id, String(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 cssHighlight = CSS.highlights.get(id);\n\n      if (cssHighlight) {\n        cssHighlight.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\n        textContent={`::highlight(${id}) {color: ${props.highlightColor ?? 'var(--primary-color, #5794ff)'};}`}\n      />\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>;\n\nHighlightText.registry = () => {\n  customElement<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      highlightColor: 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', 'flag']);\n        el.replaceChildren();\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <HighlightText {...props} />\n        </>\n      );\n    },\n  );\n};\n\nexport default HighlightText;\n"],"names":["style","css","execAll","str","regex","lastMatch","matches","exec","push","global","highlight","box","id","regExp","flag","text","RegExp","forEach","match","pos","range","Range","index","firstChild","setStart","length","setEnd","cssHighlight","CSS","highlights","get","add","set","Highlight","HighlightText","props","baseStyle","theme","createUniqueId","createMemo","extra","createEffect","Array","isArray","i","len","item","isOne","hitStr","String","highlightColor","Show","cx","class","registry","customElement","children","_","opt","el","element","mergeProps","textContent","clearAttribute","replaceChildren","inline"],"mappings":"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"}

package/lib/img/index.d.ts

@@ -1,6 +1,10 @@
 import { type JSX } from 'solid-js';
 import type { CustomElement } from '..';
 export interface ImgProps extends JSX.HTMLAttributes<HTMLImageElement> {
+    /** 自定义样式表 */
+    css?: string;
+    /** 自定义类名 */
+    class?: string;
     /** 图片地址 */
     src?: string;
     /** 查看大图的地址, 默认使用 `src`

package/lib/img/index.js

@@ -1 +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"),n=require("solid-element"),l=require("../theme"),o=s(require("./lazy")),r=require("./style");function s(e){return e&&e.__esModule?e:{default:e}}const i=(0,e.template)("<style> "),a=(0,e.template)("<style>"),c=(0,e.template)('<div class="portal"><span class="close"></span><img class="img">');function u(n){let l;let s=(0,t.mergeProps)({maskClosable:!0,escClosable:!0,lazy:!0,disabled:!1},n),[u,d]=(0,t.createSignal)(null),[v,m]=(0,t.createSignal)({width:0,height:0,left:0,top:0});function p(e){s.disabled||(d(e),s.onOpenChange?.(e))}function g(e){e.preventDefault()}function f(e){g(e),"keydown"===e.type?s.escClosable&&"Escape"===e.key&&p(!1):p(!1)}function C(){!1===u()&&p(null)}function b(e){g(e),s.maskClosable&&e.target===l&&p(!1)}return(0,t.createEffect)(()=>{void 0!==s.open&&s.open!==(0,t.untrack)(u)&&d(s.open)}),(0,t.createEffect)(()=>{!0===u()&&(document.documentElement.addEventListener("mousewheel",g,{passive:!1}),s.escClosable&&document.documentElement.addEventListener("keydown",f,!1)),(0,t.onCleanup)(()=>{document.documentElement.removeEventListener("mousewheel",g,!1),document.documentElement.removeEventListener("keydown",f,!1)})}),[(0,e.createComponent)(o.default,{get src(){return s.src},get alt(){return s.alt},get lazy(){return s.lazy},get classList(){return{none:!!u()}},onClick:function(e){s.disabled||(e.stopPropagation(),g(e),e.target&&m(e.target.getBoundingClientRect()),p(!0))}}),(0,e.createComponent)(t.Show,{get when(){return null!==u()},get children(){return(0,e.createComponent)(e.Portal,{useShadow:!0,get children(){return[(()=>{let t=i(),n=t.firstChild;return(0,e.effect)(()=>n.data=function(){let{width:e,height:t,top:n,left:l}=v();return`.portal {--img: url(${s.src});inline-size: ${e}px;block-size: ${t}px;inset-block-start: ${n}px;inset-inline-start: ${l}px;}`}()),t})(),(()=>{let e=a();return e.textContent=r.imgCss,e})(),(()=>{let e=a();return e.textContent=r.style,e})(),(()=>{let t=c(),n=l,o=t.firstChild,r=o.nextSibling;return(0,e.addEventListener)(t,"click",b,!0),(0,e.addEventListener)(t,"animationend",C),"function"==typeof n?(0,e.use)(n,t):l=t,(0,e.addEventListener)(o,"click",f,!0),(0,e.effect)(n=>{let l=!!u(),o=!u(),i=s.srcFull||s.src,a=s.alt;return l!==n._v$&&t.classList.toggle("open",n._v$=l),o!==n._v$2&&t.classList.toggle("closeing",n._v$2=o),i!==n._v$3&&(0,e.setAttribute)(r,"src",n._v$3=i),a!==n._v$4&&(0,e.setAttribute)(r,"alt",n._v$4=a),n},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),t})()]}})}})]}u.registry=()=>{(0,n.customElement)("n-img",{src:void 0,srcFull:void 0,alt:void 0,open:null,maskClosable:void 0,escClosable:void 0,onOpenChange:void 0,onLoad:void 0,lazy:void 0,disabled:void 0},(n,o)=>{let r=(0,t.mergeProps)({onOpenChange(e){o.element.dispatchEvent(new CustomEvent("openchange",{detail:e}))},onLoad(){o.element.dispatchEvent(new CustomEvent("load"))}},n);return[(()=>{let e=a();return e.textContent=l.inline,e})(),(0,e.createComponent)(u,r)]})};const d=u;(0,e.delegateEvents)(["click"]);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return v}});const e=require("solid-js/web"),t=require("solid-js"),n=require("@moneko/css"),l=require("solid-element"),r=require("../basic-config"),o=require("../theme"),s=a(require("./lazy")),i=require("./style");function a(e){return e&&e.__esModule?e:{default:e}}const c=(0,e.template)("<style> "),u=(0,e.template)("<style>"),d=(0,e.template)('<div class="portal"><span class="close"></span><img class="img">');function m(l){let r;let o=(0,t.mergeProps)({maskClosable:!0,escClosable:!0,lazy:!0,disabled:!1},l),[a,m]=(0,t.createSignal)(null),[v,p]=(0,t.createSignal)({width:0,height:0,left:0,top:0});function g(e){o.disabled||(m(e),o.onOpenChange?.(e))}function f(e){e.preventDefault()}function C(e){f(e),"keydown"===e.type?o.escClosable&&"Escape"===e.key&&g(!1):g(!1)}function h(){!1===a()&&g(null)}function b(e){f(e),o.maskClosable&&e.target===r&&g(!1)}return(0,t.createEffect)(()=>{void 0!==o.open&&o.open!==(0,t.untrack)(a)&&m(o.open)}),(0,t.createEffect)(()=>{!0===a()&&(document.documentElement.addEventListener("mousewheel",f,{passive:!1}),o.escClosable&&document.documentElement.addEventListener("keydown",C,!1)),(0,t.onCleanup)(()=>{document.documentElement.removeEventListener("mousewheel",f,!1),document.documentElement.removeEventListener("keydown",C,!1)})}),[(0,e.createComponent)(t.Show,{get when(){return o.css},get children(){let t=c(),l=t.firstChild;return(0,e.effect)(()=>l.data=(0,n.css)(o.css)),t}}),(0,e.createComponent)(s.default,{get src(){return o.src},get alt(){return o.alt},get lazy(){return o.lazy},get style(){return o.style},get classList(){return{none:!!a()}},onClick:function(e){o.disabled||(e.stopPropagation(),f(e),e.target&&p(e.target.getBoundingClientRect()),g(!0))}}),(0,e.createComponent)(t.Show,{get when(){return null!==a()},get children(){return(0,e.createComponent)(e.Portal,{useShadow:!0,get children(){return[(()=>{let t=c(),n=t.firstChild;return(0,e.effect)(()=>n.data=function(){let{width:e,height:t,top:n,left:l}=v();return`.portal {--img: url(${o.src});inline-size: ${e}px;block-size: ${t}px;inset-block-start: ${n}px;inset-inline-start: ${l}px;}`}()),t})(),(()=>{let e=u();return e.textContent=i.imgCss,e})(),(()=>{let e=u();return e.textContent=i.style,e})(),(()=>{let t=d(),n=r,l=t.firstChild,s=l.nextSibling;return(0,e.addEventListener)(t,"click",b,!0),(0,e.addEventListener)(t,"animationend",h),"function"==typeof n?(0,e.use)(n,t):r=t,(0,e.addEventListener)(l,"click",C,!0),(0,e.effect)(n=>{let l=!!a(),r=!a(),i=o.srcFull||o.src,c=o.alt;return l!==n._v$&&t.classList.toggle("open",n._v$=l),r!==n._v$2&&t.classList.toggle("closeing",n._v$2=r),i!==n._v$3&&(0,e.setAttribute)(s,"src",n._v$3=i),c!==n._v$4&&(0,e.setAttribute)(s,"alt",n._v$4=c),n},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),t})()]}})}})]}m.registry=()=>{(0,l.customElement)("n-img",{class:void 0,css:void 0,alt:void 0,src:void 0,srcFull:void 0,open:null,maskClosable:void 0,escClosable:void 0,onOpenChange:void 0,onLoad:void 0,lazy:void 0,disabled:void 0},(n,l)=>{let s=l.element,i=(0,t.mergeProps)({onOpenChange(e){l.element.dispatchEvent(new CustomEvent("openchange",{detail:e}))},onLoad(){l.element.dispatchEvent(new CustomEvent("load"))}},n);return(0,t.createEffect)(()=>{(0,r.clearAttribute)(s,["css"])}),[(()=>{let e=u();return e.textContent=o.inline,e})(),(0,e.createComponent)(m,i)]})};const v=m;(0,e.delegateEvents)(["click"]);

package/lib/img/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/img/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createSignal,\n  type JSX,\n  mergeProps,\n  onCleanup,\n  Show,\n  untrack,\n} from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { inline } from '../theme';\n\nimport ImgLazy from './lazy';\nimport { imgCss, style } from './style';\n\nexport interface ImgProps extends JSX.HTMLAttributes<HTMLImageElement> {\n  /** 图片地址 */\n  src?: string;\n  /** 查看大图的地址, 默认使用 `src`\n   * @since 2.1.2\n   */\n  srcFull?: string;\n  /** 图片 alt */\n  alt?: string;\n  /** 大图查看 */\n  open?: boolean | null;\n  /** 开启关闭大图的回调函数 */\n  onOpenChange?: (open: boolean | null) => void;\n  /** 图片加载完成 */\n  onLoad?(e: Event): void;\n  /** 点击遮罩关闭\n   * @since 2.0.8\n   * @default true\n   */\n  maskClosable?: boolean;\n  /** 通过 `esc` 按键关闭\n   * @default true\n   */\n  escClosable?: boolean;\n  /**\n   * 懒加载\n   * @since 2.8.1\n   * @default true\n   */\n  lazy?: boolean;\n  /** 禁止点开大图\n   * @since 2.8.3\n   * @default false\n   */\n  disabled?: boolean;\n}\nexport type ImgElement = CustomElement<ImgProps, 'onOpenChange'>;\n\nfunction Img(_: ImgProps) {\n  let portal: HTMLDivElement | undefined;\n  const props = mergeProps(\n    {\n      maskClosable: true,\n      escClosable: true,\n      lazy: true,\n      disabled: false,\n    },\n    _,\n  );\n  const [open, setOpen] = createSignal<boolean | null>(null);\n  const [posi, setPosi] = createSignal({\n    width: 0,\n    height: 0,\n    left: 0,\n    top: 0,\n  });\n\n  function getCss() {\n    const { width, height, top, left } = posi();\n\n    return `.portal {--img: url(${props.src});inline-size: ${width}px;block-size: ${height}px;inset-block-start: ${top}px;inset-inline-start: ${left}px;}`;\n  }\n  function openChange(visi: boolean | null) {\n    if (!props.disabled) {\n      setOpen(visi);\n      props.onOpenChange?.(visi);\n    }\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(false);\n      }\n    } else {\n      openChange(false);\n    }\n  }\n  function handleDestroy() {\n    if (open() === false) {\n      openChange(null);\n    }\n  }\n  function handleOpen(e: MouseEvent) {\n    if (!props.disabled) {\n      e.stopPropagation();\n      preventDefault(e);\n      if (e.target) {\n        setPosi((e.target as HTMLImageElement).getBoundingClientRect());\n      }\n      openChange(true);\n    }\n  }\n  function portalClick(e: Event) {\n    preventDefault(e);\n    if (props.maskClosable && e.target === portal) {\n      openChange(false);\n    }\n  }\n\n  createEffect(() => {\n    if (props.open !== void 0 && props.open !== untrack(open)) {\n      setOpen(props.open);\n    }\n  });\n  createEffect(() => {\n    if (open() === true) {\n      document.documentElement.addEventListener('mousewheel', preventDefault, {\n        passive: false,\n      });\n\n      if (props.escClosable) {\n        document.documentElement.addEventListener('keydown', close, false);\n      }\n    }\n\n    onCleanup(() => {\n      document.documentElement.removeEventListener('mousewheel', preventDefault, false);\n      document.documentElement.removeEventListener('keydown', close, false);\n    });\n  });\n\n  return (\n    <>\n      <ImgLazy\n        src={props.src}\n        alt={props.alt}\n        lazy={props.lazy}\n        classList={{\n          none: !!open(),\n        }}\n        onClick={handleOpen}\n      />\n      <Show when={open() !== null}>\n        <Portal useShadow={true}>\n          <style textContent={getCss()} />\n          <style textContent={imgCss} />\n          <style textContent={style} />\n          <div\n            ref={portal}\n            class=\"portal\"\n            classList={{\n              open: !!open(),\n              closeing: !open(),\n            }}\n            onAnimationEnd={handleDestroy}\n            onClick={portalClick}\n          >\n            <span class=\"close\" onClick={close} />\n            <img class=\"img\" src={props.srcFull || props.src} alt={props.alt} />\n          </div>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nImg.registry = () => {\n  customElement<ImgProps>(\n    'n-img',\n    {\n      src: void 0,\n      srcFull: void 0,\n      alt: void 0,\n      open: null as boolean | null,\n      maskClosable: void 0,\n      escClosable: void 0,\n      onOpenChange: void 0,\n      onLoad: void 0,\n      lazy: void 0,\n      disabled: void 0,\n    },\n    (_, opt) => {\n      const props = mergeProps(\n        {\n          onOpenChange(open: boolean | null) {\n            opt.element.dispatchEvent(\n              new CustomEvent('openchange', {\n                detail: open,\n              }),\n            );\n          },\n          onLoad() {\n            opt.element.dispatchEvent(new CustomEvent('load'));\n          },\n        },\n        _,\n      );\n\n      return (\n        <>\n          <style textContent={inline} />\n          <Img {...props} />\n        </>\n      );\n    },\n  );\n};\nexport default Img;\n"],"names":["Img","_","portal","props","mergeProps","maskClosable","escClosable","lazy","disabled","open","setOpen","createSignal","posi","setPosi","width","height","left","top","openChange","visi","onOpenChange","preventDefault","e","close","type","key","handleDestroy","portalClick","target","createEffect","untrack","document","documentElement","addEventListener","passive","onCleanup","removeEventListener","ImgLazy","src","alt","none","stopPropagation","getBoundingClientRect","Show","Portal","getCss","imgCss","style","srcFull","registry","customElement","onLoad","opt","element","dispatchEvent","CustomEvent","detail","inline"],"mappings":"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"}
+{"version":3,"sources":["components/img/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createSignal,\n  type JSX,\n  mergeProps,\n  onCleanup,\n  Show,\n  untrack,\n} from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { css } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport { inline } from '../theme';\n\nimport ImgLazy from './lazy';\nimport { imgCss, style } from './style';\n\nexport interface ImgProps extends JSX.HTMLAttributes<HTMLImageElement> {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 图片地址 */\n  src?: string;\n  /** 查看大图的地址, 默认使用 `src`\n   * @since 2.1.2\n   */\n  srcFull?: string;\n  /** 图片 alt */\n  alt?: string;\n  /** 大图查看 */\n  open?: boolean | null;\n  /** 开启关闭大图的回调函数 */\n  onOpenChange?: (open: boolean | null) => void;\n  /** 图片加载完成 */\n  onLoad?(e: Event): void;\n  /** 点击遮罩关闭\n   * @since 2.0.8\n   * @default true\n   */\n  maskClosable?: boolean;\n  /** 通过 `esc` 按键关闭\n   * @default true\n   */\n  escClosable?: boolean;\n  /**\n   * 懒加载\n   * @since 2.8.1\n   * @default true\n   */\n  lazy?: boolean;\n  /** 禁止点开大图\n   * @since 2.8.3\n   * @default false\n   */\n  disabled?: boolean;\n}\nexport type ImgElement = CustomElement<ImgProps, 'onOpenChange'>;\n\nfunction Img(_: ImgProps) {\n  let portal: HTMLDivElement | undefined;\n  const props = mergeProps(\n    {\n      maskClosable: true,\n      escClosable: true,\n      lazy: true,\n      disabled: false,\n    },\n    _,\n  );\n  const [open, setOpen] = createSignal<boolean | null>(null);\n  const [posi, setPosi] = createSignal({\n    width: 0,\n    height: 0,\n    left: 0,\n    top: 0,\n  });\n\n  function getCss() {\n    const { width, height, top, left } = posi();\n\n    return `.portal {--img: url(${props.src});inline-size: ${width}px;block-size: ${height}px;inset-block-start: ${top}px;inset-inline-start: ${left}px;}`;\n  }\n  function openChange(visi: boolean | null) {\n    if (!props.disabled) {\n      setOpen(visi);\n      props.onOpenChange?.(visi);\n    }\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(false);\n      }\n    } else {\n      openChange(false);\n    }\n  }\n  function handleDestroy() {\n    if (open() === false) {\n      openChange(null);\n    }\n  }\n  function handleOpen(e: MouseEvent) {\n    if (!props.disabled) {\n      e.stopPropagation();\n      preventDefault(e);\n      if (e.target) {\n        setPosi((e.target as HTMLImageElement).getBoundingClientRect());\n      }\n      openChange(true);\n    }\n  }\n  function portalClick(e: Event) {\n    preventDefault(e);\n    if (props.maskClosable && e.target === portal) {\n      openChange(false);\n    }\n  }\n\n  createEffect(() => {\n    if (props.open !== void 0 && props.open !== untrack(open)) {\n      setOpen(props.open);\n    }\n  });\n  createEffect(() => {\n    if (open() === true) {\n      document.documentElement.addEventListener('mousewheel', preventDefault, {\n        passive: false,\n      });\n\n      if (props.escClosable) {\n        document.documentElement.addEventListener('keydown', close, false);\n      }\n    }\n\n    onCleanup(() => {\n      document.documentElement.removeEventListener('mousewheel', preventDefault, false);\n      document.documentElement.removeEventListener('keydown', close, false);\n    });\n  });\n\n  return (\n    <>\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <ImgLazy\n        src={props.src}\n        alt={props.alt}\n        lazy={props.lazy}\n        style={props.style}\n        classList={{\n          none: !!open(),\n        }}\n        onClick={handleOpen}\n      />\n      <Show when={open() !== null}>\n        <Portal useShadow={true}>\n          <style textContent={getCss()} />\n          <style textContent={imgCss} />\n          <style textContent={style} />\n          <div\n            ref={portal}\n            class=\"portal\"\n            classList={{\n              open: !!open(),\n              closeing: !open(),\n            }}\n            onAnimationEnd={handleDestroy}\n            onClick={portalClick}\n          >\n            <span class=\"close\" onClick={close} />\n            <img class=\"img\" src={props.srcFull || props.src} alt={props.alt} />\n          </div>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nImg.registry = () => {\n  customElement<ImgProps>(\n    'n-img',\n    {\n      class: void 0,\n      css: void 0,\n      alt: void 0,\n      src: void 0,\n      srcFull: void 0,\n      open: null as boolean | null,\n      maskClosable: void 0,\n      escClosable: void 0,\n      onOpenChange: void 0,\n      onLoad: void 0,\n      lazy: void 0,\n      disabled: void 0,\n    },\n    (_, opt) => {\n      const el = opt.element;\n      const props = mergeProps(\n        {\n          onOpenChange(open: boolean | null) {\n            opt.element.dispatchEvent(\n              new CustomEvent('openchange', {\n                detail: open,\n              }),\n            );\n          },\n          onLoad() {\n            opt.element.dispatchEvent(new CustomEvent('load'));\n          },\n        },\n        _,\n      );\n\n      createEffect(() => {\n        clearAttribute(el, ['css']);\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <Img {...props} />\n        </>\n      );\n    },\n  );\n};\nexport default Img;\n"],"names":["Img","_","portal","props","mergeProps","maskClosable","escClosable","lazy","disabled","open","setOpen","createSignal","posi","setPosi","width","height","left","top","openChange","visi","onOpenChange","preventDefault","e","close","type","key","handleDestroy","portalClick","target","createEffect","untrack","document","documentElement","addEventListener","passive","onCleanup","removeEventListener","Show","css","ImgLazy","src","alt","style","none","stopPropagation","getBoundingClientRect","Portal","getCss","imgCss","srcFull","registry","customElement","class","onLoad","opt","el","element","dispatchEvent","CustomEvent","detail","clearAttribute","inline"],"mappings":"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"}

package/lib/img/style.js

@@ -74,22 +74,32 @@
     &::before {
       position: absolute;
       z-index: -1;
+      margin: auto;
       background: var(--img) center/cover no-repeat;
+      opacity: 0.5;
       content: '';
+      inset-inline-start: 0;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      inset-block-end: 0;
       inline-size: 100%;
       block-size: 100%;
       pointer-events: none;
-      opacity: 0.5;
     }
 
     &::after {
       position: absolute;
       z-index: -1;
       content: '';
-      inline-size: 100%;
-      block-size: 100%;
+      inset-inline-start: -10%;
+      inset-block-start: -10%;
+      inset-inline-end: -10%;
+      inset-block-end: -10%;
+      margin: auto;
+      inline-size: 120%;
+      block-size: 120%;
       pointer-events: none;
-      backdrop-filter: blur(50px);
+      backdrop-filter: blur(10px) brightness(80%);
     }
 
     &:hover {

package/lib/img/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/img/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const imgCss = css`\n  .img {\n    max-inline-size: 100%;\n    max-block-size: 100%;\n    object-fit: contain;\n    transition: opacity 0.3s;\n  }\n\n  .none {\n    pointer-events: none;\n    opacity: 0.25;\n  }\n\n  .error {\n    display: inline-block;\n    transform: scale(1);\n    min-block-size: 75px;\n\n    &::before {\n      position: absolute;\n      color: transparent;\n      background: #f5f5f5\n        url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23e6e6e6' d='M304.128 456.192c48.64 0 88.064-39.424 88.064-88.064s-39.424-88.064-88.064-88.064-88.064 39.424-88.064 88.064 39.424 88.064 88.064 88.064zm0-116.224c15.36 0 28.16 12.288 28.16 28.16s-12.288 28.16-28.16 28.16-28.16-12.288-28.16-28.16 12.288-28.16 28.16-28.16z'/%3E%3Cpath fill='%23e6e6e6' d='M887.296 159.744H136.704C96.768 159.744 64 192 64 232.448v559.104c0 39.936 32.256 72.704 72.704 72.704h198.144L500.224 688.64l-36.352-222.72 162.304-130.56-61.44 143.872 92.672 214.016-105.472 171.008h335.36C927.232 864.256 960 832 960 791.552V232.448c0-39.936-32.256-72.704-72.704-72.704zm-138.752 71.68v.512H857.6c16.384 0 30.208 13.312 30.208 30.208v399.872L673.28 408.064l75.264-176.64zM304.64 792.064H165.888c-16.384 0-30.208-13.312-30.208-30.208v-9.728l138.752-164.352 104.96 124.416-74.752 79.872zm81.92-355.84l37.376 228.864-.512.512-142.848-169.984c-3.072-3.584-9.216-3.584-12.288 0L135.68 652.8V262.144c0-16.384 13.312-30.208 30.208-30.208h474.624L386.56 436.224zm501.248 325.632c0 16.896-13.312 30.208-29.696 30.208H680.96l57.344-93.184-87.552-202.24 7.168-7.68 229.888 272.896z'/%3E%3C/svg%3E\")\n        no-repeat center / 50% 50%;\n      content: '';\n      inset-inline-start: 0;\n      inset-block-start: 0;\n      inline-size: 100%;\n      block-size: 100%;\n    }\n\n    &::after {\n      position: absolute;\n      overflow: hidden;\n      font-size: 12px;\n      text-align: center;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      color: white;\n      background-color: rgb(0 0 0 / 50%);\n      content: attr(alt);\n      inset-inline-start: 0;\n      inset-block-end: 0;\n      inline-size: 100%;\n      line-height: 2;\n    }\n  }\n`;\nexport const style = css`\n  .close {\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-end: 0;\n    z-index: 1;\n    color: #fff;\n    transition: transform var(--transition-duration);\n    cursor: pointer;\n    transform: scale(0);\n\n    &::before {\n      padding: 0 16px;\n      font-size: 24px;\n      content: '⛌';\n      line-height: 46px;\n    }\n  }\n\n  .portal {\n    position: fixed;\n    z-index: 99999;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    &::before {\n      position: absolute;\n      z-index: -1;\n      background: var(--img) center/cover no-repeat;\n      content: '';\n      inline-size: 100%;\n      block-size: 100%;\n      pointer-events: none;\n      opacity: 0.5;\n    }\n\n    &::after {\n      position: absolute;\n      z-index: -1;\n      content: '';\n      inline-size: 100%;\n      block-size: 100%;\n      pointer-events: none;\n      backdrop-filter: blur(50px);\n    }\n\n    &:hover {\n      .close {\n        transform: scale(1);\n      }\n    }\n  }\n\n  .open {\n    animation: photo-in var(--transition-duration) forwards;\n  }\n\n  .closeing {\n    animation: photo-out var(--transition-duration) forwards;\n  }\n\n  @keyframes photo-in {\n    0% {\n      pointer-events: none;\n    }\n\n    100% {\n      inline-size: 100vi;\n      block-size: 100vb;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n    }\n  }\n\n  @keyframes photo-out {\n    from {\n      inline-size: 100vi;\n      block-size: 100vb;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n    }\n\n    to {\n      pointer-events: none;\n    }\n  }\n`;\n"],"names":["imgCss","style","css"],"mappings":"kKAEaA,MAAM,mBAANA,GAgDAC,KAAK,mBAALA,qBAlDO,eAEPD,EAASE,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+C1B,CAAC,CACYD,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFzB,CAAC"}
+{"version":3,"sources":["components/img/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const imgCss = css`\n  .img {\n    max-inline-size: 100%;\n    max-block-size: 100%;\n    object-fit: contain;\n    transition: opacity 0.3s;\n  }\n\n  .none {\n    pointer-events: none;\n    opacity: 0.25;\n  }\n\n  .error {\n    display: inline-block;\n    transform: scale(1);\n    min-block-size: 75px;\n\n    &::before {\n      position: absolute;\n      color: transparent;\n      background: #f5f5f5\n        url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23e6e6e6' d='M304.128 456.192c48.64 0 88.064-39.424 88.064-88.064s-39.424-88.064-88.064-88.064-88.064 39.424-88.064 88.064 39.424 88.064 88.064 88.064zm0-116.224c15.36 0 28.16 12.288 28.16 28.16s-12.288 28.16-28.16 28.16-28.16-12.288-28.16-28.16 12.288-28.16 28.16-28.16z'/%3E%3Cpath fill='%23e6e6e6' d='M887.296 159.744H136.704C96.768 159.744 64 192 64 232.448v559.104c0 39.936 32.256 72.704 72.704 72.704h198.144L500.224 688.64l-36.352-222.72 162.304-130.56-61.44 143.872 92.672 214.016-105.472 171.008h335.36C927.232 864.256 960 832 960 791.552V232.448c0-39.936-32.256-72.704-72.704-72.704zm-138.752 71.68v.512H857.6c16.384 0 30.208 13.312 30.208 30.208v399.872L673.28 408.064l75.264-176.64zM304.64 792.064H165.888c-16.384 0-30.208-13.312-30.208-30.208v-9.728l138.752-164.352 104.96 124.416-74.752 79.872zm81.92-355.84l37.376 228.864-.512.512-142.848-169.984c-3.072-3.584-9.216-3.584-12.288 0L135.68 652.8V262.144c0-16.384 13.312-30.208 30.208-30.208h474.624L386.56 436.224zm501.248 325.632c0 16.896-13.312 30.208-29.696 30.208H680.96l57.344-93.184-87.552-202.24 7.168-7.68 229.888 272.896z'/%3E%3C/svg%3E\")\n        no-repeat center / 50% 50%;\n      content: '';\n      inset-inline-start: 0;\n      inset-block-start: 0;\n      inline-size: 100%;\n      block-size: 100%;\n    }\n\n    &::after {\n      position: absolute;\n      overflow: hidden;\n      font-size: 12px;\n      text-align: center;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      color: white;\n      background-color: rgb(0 0 0 / 50%);\n      content: attr(alt);\n      inset-inline-start: 0;\n      inset-block-end: 0;\n      inline-size: 100%;\n      line-height: 2;\n    }\n  }\n`;\nexport const style = css`\n  .close {\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-end: 0;\n    z-index: 1;\n    color: #fff;\n    transition: transform var(--transition-duration);\n    cursor: pointer;\n    transform: scale(0);\n\n    &::before {\n      padding: 0 16px;\n      font-size: 24px;\n      content: '⛌';\n      line-height: 46px;\n    }\n  }\n\n  .portal {\n    position: fixed;\n    z-index: 99999;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    &::before {\n      position: absolute;\n      z-index: -1;\n      margin: auto;\n      background: var(--img) center/cover no-repeat;\n      opacity: 0.5;\n      content: '';\n      inset-inline-start: 0;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n      inset-block-end: 0;\n      inline-size: 100%;\n      block-size: 100%;\n      pointer-events: none;\n    }\n\n    &::after {\n      position: absolute;\n      z-index: -1;\n      content: '';\n      inset-inline-start: -10%;\n      inset-block-start: -10%;\n      inset-inline-end: -10%;\n      inset-block-end: -10%;\n      margin: auto;\n      inline-size: 120%;\n      block-size: 120%;\n      pointer-events: none;\n      backdrop-filter: blur(10px) brightness(80%);\n    }\n\n    &:hover {\n      .close {\n        transform: scale(1);\n      }\n    }\n  }\n\n  .open {\n    animation: photo-in var(--transition-duration) forwards;\n  }\n\n  .closeing {\n    animation: photo-out var(--transition-duration) forwards;\n  }\n\n  @keyframes photo-in {\n    0% {\n      pointer-events: none;\n    }\n\n    100% {\n      inline-size: 100vi;\n      block-size: 100vb;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n    }\n  }\n\n  @keyframes photo-out {\n    from {\n      inline-size: 100vi;\n      block-size: 100vb;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n    }\n\n    to {\n      pointer-events: none;\n    }\n  }\n`;\n"],"names":["imgCss","style","css"],"mappings":"kKAEaA,MAAM,mBAANA,GAgDAC,KAAK,mBAALA,qBAlDO,eAEPD,EAASE,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+C1B,CAAC,CACYD,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGzB,CAAC"}

package/lib/spin/index.js

@@ -16,6 +16,8 @@
 
   .content {
     display: flex;
+    max-inline-size: 100%;
+    max-block-size: 100%;
     opacity: 1;
     transition: opacity var(--transition-duration);
   }

package/lib/spin/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/spin/index.tsx"],"sourcesContent":["import { createEffect, Show, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport theme, { inline } from '../theme';\n\nconst style = css`\n  :host {\n    display: inline-block;\n    box-sizing: border-box;\n  }\n\n  .spin {\n    inline-size: fit-content;\n    inline-size: 100%;\n    block-size: 100%;\n    min-inline-size: 16px;\n    min-block-size: 16px;\n    position: relative;\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: flex;\n    opacity: 1;\n    transition: opacity var(--transition-duration);\n  }\n\n  .spining {\n    cursor: not-allowed;\n\n    .content {\n      opacity: 0.3;\n      pointer-events: none;\n      user-select: none;\n      filter: blur(4px);\n    }\n\n    &::before {\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin: auto;\n      border: 1px solid;\n      border-color: var(--text-secondary) transparent;\n      border-radius: 50%;\n      font-size: large;\n      text-align: center;\n      inline-size: 16px;\n      block-size: 16px;\n      inset-block: 0;\n      inset-inline: 0;\n      box-sizing: border-box;\n      line-height: 1;\n      content: '';\n      animation: spin-rotate-effect 1s infinite;\n    }\n  }\n\n  @keyframes spin-rotate-effect {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nexport interface SpinProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 加载状态 */\n  spin?: boolean;\n  /** 内容 */\n  children?: JSXElement | JSXElement[];\n}\n\nfunction Spin(props: SpinProps) {\n  const { baseStyle } = theme;\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <div\n        class={cx('spin', props.class)}\n        classList={{\n          spining: props.spin,\n        }}\n      >\n        <div class=\"content\">{props.children}</div>\n      </div>\n    </>\n  );\n}\n\nexport type SpinElement = CustomElement<SpinProps>;\n\nSpin.registry = () => {\n  customElement<SpinProps>(\n    'n-spin',\n    { class: void 0, css: void 0, spin: void 0, children: void 0 },\n    (_, opt) => {\n      const el = opt.element;\n      const childNodes = (opt.element.childNodes as NodeList) || [];\n      const nodes = [...childNodes.values()];\n      const [, props] = splitProps(_, ['children']);\n\n      createEffect(() => {\n        clearAttribute(el, ['css']);\n        el.replaceChildren();\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <Spin {...props}>{nodes}</Spin>\n        </>\n      );\n    },\n  );\n};\nexport default Spin;\n"],"names":["style","css","Spin","props","baseStyle","theme","Show","children","cx","class","spin","registry","customElement","_","opt","el","element","nodes","childNodes","values","splitProps","createEffect","clearAttribute","replaceChildren","inline"],"mappings":"kGAmIA,+CAAA,+CAnI+C,sBACvB,yBACM,2BAGkB,+BAClB,ssBAExBA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DlB,CAAC,CAaD,SAASC,EAAKC,CAAgB,EAC5B,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CAE3B,oEAEwBD,gDACAJ,8BACnBM,MAAI,oBAAOH,EAAMF,GAAG,wEACCA,GAAAA,KAAG,EAACE,EAAMF,GAAG,gEAQXE,EAAMI,QAAQ,yBAL7BC,GAAAA,IAAE,EAAC,OAAQL,EAAMM,KAAK,MAElBN,EAAMO,IAAI,oIAO7B,CAIAR,EAAKS,QAAQ,CAAG,KACdC,GAAAA,eAAa,EACX,SACA,CAAEH,MAAO,KAAK,EAAGR,IAAK,KAAK,EAAGS,KAAM,KAAK,EAAGH,SAAU,KAAK,CAAE,EAC7D,CAACM,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAEhBC,EAAQ,IAAIC,AADC,CAAA,AAACJ,EAAIE,OAAO,CAACE,UAAU,EAAiB,EAAE,AAAD,EAC/BC,MAAM,GAAG,CAChC,EAAGhB,EAAM,CAAGiB,GAAAA,YAAU,EAACP,EAAG,CAAC,WAAW,EAM5C,MAJAQ,GAAAA,cAAY,EAAC,KACXC,GAAAA,gBAAc,EAACP,EAAI,CAAC,MAAM,EAC1BA,EAAGQ,eAAe,EACpB,yCAGwBC,QAAM,6BACzBtB,mBAASC,YAAQc,KAGxB,EAEJ,QACA,EAAef"}
+{"version":3,"sources":["components/spin/index.tsx"],"sourcesContent":["import { createEffect, Show, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport theme, { inline } from '../theme';\n\nconst style = css`\n  :host {\n    display: inline-block;\n    box-sizing: border-box;\n  }\n\n  .spin {\n    inline-size: fit-content;\n    inline-size: 100%;\n    block-size: 100%;\n    min-inline-size: 16px;\n    min-block-size: 16px;\n    position: relative;\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: flex;\n    max-inline-size: 100%;\n    max-block-size: 100%;\n    opacity: 1;\n    transition: opacity var(--transition-duration);\n  }\n\n  .spining {\n    cursor: not-allowed;\n\n    .content {\n      opacity: 0.3;\n      pointer-events: none;\n      user-select: none;\n      filter: blur(4px);\n    }\n\n    &::before {\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin: auto;\n      border: 1px solid;\n      border-color: var(--text-secondary) transparent;\n      border-radius: 50%;\n      font-size: large;\n      text-align: center;\n      inline-size: 16px;\n      block-size: 16px;\n      inset-block: 0;\n      inset-inline: 0;\n      box-sizing: border-box;\n      line-height: 1;\n      content: '';\n      animation: spin-rotate-effect 1s infinite;\n    }\n  }\n\n  @keyframes spin-rotate-effect {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nexport interface SpinProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 加载状态 */\n  spin?: boolean;\n  /** 内容 */\n  children?: JSXElement | JSXElement[];\n}\n\nfunction Spin(props: SpinProps) {\n  const { baseStyle } = theme;\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <div\n        class={cx('spin', props.class)}\n        classList={{\n          spining: props.spin,\n        }}\n      >\n        <div class=\"content\">{props.children}</div>\n      </div>\n    </>\n  );\n}\n\nexport type SpinElement = CustomElement<SpinProps>;\n\nSpin.registry = () => {\n  customElement<SpinProps>(\n    'n-spin',\n    { class: void 0, css: void 0, spin: void 0, children: void 0 },\n    (_, opt) => {\n      const el = opt.element;\n      const childNodes = (opt.element.childNodes as NodeList) || [];\n      const nodes = [...childNodes.values()];\n      const [, props] = splitProps(_, ['children']);\n\n      createEffect(() => {\n        clearAttribute(el, ['css']);\n        el.replaceChildren();\n      });\n      return (\n        <>\n          <style textContent={inline} />\n          <Spin {...props}>{nodes}</Spin>\n        </>\n      );\n    },\n  );\n};\nexport default Spin;\n"],"names":["style","css","Spin","props","baseStyle","theme","Show","children","cx","class","spin","registry","customElement","_","opt","el","element","nodes","childNodes","values","splitProps","createEffect","clearAttribute","replaceChildren","inline"],"mappings":"kGAqIA,+CAAA,+CArI+C,sBACvB,yBACM,2BAGkB,+BAClB,ssBAExBA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiElB,CAAC,CAaD,SAASC,EAAKC,CAAgB,EAC5B,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CAE3B,oEAEwBD,gDACAJ,8BACnBM,MAAI,oBAAOH,EAAMF,GAAG,wEACCA,GAAAA,KAAG,EAACE,EAAMF,GAAG,gEAQXE,EAAMI,QAAQ,yBAL7BC,GAAAA,IAAE,EAAC,OAAQL,EAAMM,KAAK,MAElBN,EAAMO,IAAI,oIAO7B,CAIAR,EAAKS,QAAQ,CAAG,KACdC,GAAAA,eAAa,EACX,SACA,CAAEH,MAAO,KAAK,EAAGR,IAAK,KAAK,EAAGS,KAAM,KAAK,EAAGH,SAAU,KAAK,CAAE,EAC7D,CAACM,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAEhBC,EAAQ,IAAIC,AADC,CAAA,AAACJ,EAAIE,OAAO,CAACE,UAAU,EAAiB,EAAE,AAAD,EAC/BC,MAAM,GAAG,CAChC,EAAGhB,EAAM,CAAGiB,GAAAA,YAAU,EAACP,EAAG,CAAC,WAAW,EAM5C,MAJAQ,GAAAA,cAAY,EAAC,KACXC,GAAAA,gBAAc,EAACP,EAAI,CAAC,MAAM,EAC1BA,EAAGQ,eAAe,EACpB,yCAGwBC,QAAM,6BACzBtB,mBAASC,YAAQc,KAGxB,EAEJ,QACA,EAAef"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neko-ui",
-  "version": "2.12.2",
+  "version": "2.12.4",
   "description": "WebComponents UI Libraries",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -61,7 +61,7 @@
     "ui libraries"
   ],
   "devDependencies": {
-    "@moneko/core": "3.47.4",
+    "@moneko/core": "3.47.7",
     "@moneko/solid": "1.11.1",
     "@solidjs/testing-library": "0.8.10",
     "@swc/jest": "0.2.38",
@@ -79,7 +79,7 @@
   "dependencies": {
     "@moneko/common": "1.8.0",
     "@moneko/css": "1.2.0",
-    "custom-element-type": "1.0.6",
+    "custom-element-type": "1.0.7",
     "dayjs": "1.11.13",
     "prismjs": "1.30.0",
     "solid-element": "1.8.1",

package/umd/index.js

@@ -16,6 +16,8 @@
 
   .content {
     display: flex;
+    max-inline-size: 100%;
+    max-block-size: 100%;
     opacity: 1;
     transition: opacity var(--transition-duration);
   }
@@ -137,22 +139,32 @@
     &::before {
       position: absolute;
       z-index: -1;
+      margin: auto;
       background: var(--img) center/cover no-repeat;
+      opacity: 0.5;
       content: '';
+      inset-inline-start: 0;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      inset-block-end: 0;
       inline-size: 100%;
       block-size: 100%;
       pointer-events: none;
-      opacity: 0.5;
     }
 
     &::after {
       position: absolute;
       z-index: -1;
       content: '';
-      inline-size: 100%;
-      block-size: 100%;
+      inset-inline-start: -10%;
+      inset-block-start: -10%;
+      inset-inline-end: -10%;
+      inset-block-end: -10%;
+      margin: auto;
+      inline-size: 120%;
+      block-size: 120%;
       pointer-events: none;
-      backdrop-filter: blur(50px);
+      backdrop-filter: blur(10px) brightness(80%);
     }
 
     &:hover {
@@ -195,7 +207,7 @@
       pointer-events: none;
     }
   }
-`,tz=eP("<style>"),tA=eP("<img>"),tT=function(e){let t,n;let[r,i]=em(e,["src","lazy","onLoad","onError","classList","class","part","ref"]),[a,o]=F(!1),[l,s]=F(!1),[c,u]=F(!0);function d(e){e&&(n&&e.unobserve(n),e.disconnect())}function p(e){null==r.onError||r.onError.call(r,e),o(!0),u(!1)}function g(e){null==r.onLoad||r.onLoad.call(r,e),u(!1)}return Y(()=>{r.lazy?(t=new IntersectionObserver(e=>{s(e[0].isIntersecting),e[0].isIntersecting&&d(t)}),n&&t.observe(n)):s(!0)}),q(()=>{d(t)}),[(()=>{let e=tz();return e.textContent=t_,e})(),ep(tS,{get spin(){return c()},get children(){let e=tA(),t=n;return"function"==typeof t?eV(t,e):n=e,eU(e,ev(i,{get class(){return r.class},get classList(){return{img:!0,error:a()}},get part(){return r.part||"img"},get src(){return l()?r.src:void 0},onError:p,onLoad:g}),!1,!1),e}})]},tO=eP("<style> "),tL=eP("<style>"),tR=eP('<div class="portal"><span class="close"></span><img class="img">');function tI(e){let t;let n=ev({maskClosable:!0,escClosable:!0,lazy:!0,disabled:!1},e),[r,i]=F(null),[a,o]=F({width:0,height:0,left:0,top:0});function l(e){n.disabled||(i(e),null==n.onOpenChange||n.onOpenChange.call(n,e))}function s(e){e.preventDefault()}function c(e){s(e),"keydown"===e.type?n.escClosable&&"Escape"===e.key&&l(!1):l(!1)}function u(){!1===r()&&l(null)}function d(e){s(e),n.maskClosable&&e.target===t&&l(!1)}return H(()=>{void 0!==n.open&&n.open!==V(r)&&i(n.open)}),H(()=>{!0===r()&&(document.documentElement.addEventListener("mousewheel",s,{passive:!1}),n.escClosable&&document.documentElement.addEventListener("keydown",c,!1)),q(()=>{document.documentElement.removeEventListener("mousewheel",s,!1),document.documentElement.removeEventListener("keydown",c,!1)})}),[ep(tT,{get src(){return n.src},get alt(){return n.alt},get lazy(){return n.lazy},get classList(){return{none:!!r()}},onClick:function(e){n.disabled||(e.stopPropagation(),s(e),e.target&&o(e.target.getBoundingClientRect()),l(!0))}}),ep(eC,{get when(){return null!==r()},get children(){return ep(e4,{useShadow:!0,get children(){return[(()=>{let e=tO(),t=e.firstChild;return j(()=>t.data=function(){let{width:e,height:t,top:r,left:i}=a();return`.portal {--img: url(${n.src});inline-size: ${e}px;block-size: ${t}px;inset-block-start: ${r}px;inset-inline-start: ${i}px;}`}()),e})(),(()=>{let e=tL();return e.textContent=t_,e})(),(()=>{let e=tL();return e.textContent=tE,e})(),(()=>{let e=tR(),i=t,a=e.firstChild,o=a.nextSibling;return ej(e,"click",d,!0),ej(e,"animationend",u),"function"==typeof i?eV(i,e):t=e,ej(a,"click",c,!0),j(t=>{let i=!!r(),a=!r(),l=n.srcFull||n.src,s=n.alt;return i!==t._v$&&e.classList.toggle("open",t._v$=i),a!==t._v$2&&e.classList.toggle("closeing",t._v$2=a),l!==t._v$3&&eF(o,"src",t._v$3=l),s!==t._v$4&&eF(o,"alt",t._v$4=s),t},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),e})()]}})}})]}tI.registry=()=>{ti("n-img",{src:void 0,srcFull:void 0,alt:void 0,open:null,maskClosable:void 0,escClosable:void 0,onOpenChange:void 0,onLoad:void 0,lazy:void 0,disabled:void 0},(e,t)=>{let n=ev({onOpenChange(e){t.element.dispatchEvent(new CustomEvent("openchange",{detail:e}))},onLoad(){t.element.dispatchEvent(new CustomEvent("load"))}},e);return[(()=>{let e=tL();return e.textContent=tv,e})(),ep(tI,n)]})};let tN=tI;eM(["click"]);let tP=(0,e6.css)`
+`,tz=eP("<style>"),tA=eP("<img>"),tT=function(e){let t,n;let[r,i]=em(e,["src","lazy","onLoad","onError","classList","class","part","ref"]),[a,o]=F(!1),[l,s]=F(!1),[c,u]=F(!0);function d(e){e&&(n&&e.unobserve(n),e.disconnect())}function p(e){null==r.onError||r.onError.call(r,e),o(!0),u(!1)}function g(e){null==r.onLoad||r.onLoad.call(r,e),u(!1)}return Y(()=>{r.lazy?(t=new IntersectionObserver(e=>{s(e[0].isIntersecting),e[0].isIntersecting&&d(t)}),n&&t.observe(n)):s(!0)}),q(()=>{d(t)}),[(()=>{let e=tz();return e.textContent=t_,e})(),ep(tS,{get spin(){return c()},get children(){let e=tA(),t=n;return"function"==typeof t?eV(t,e):n=e,eU(e,ev(i,{get class(){return r.class},get classList(){return{img:!0,error:a()}},get part(){return r.part||"img"},get src(){return l()?r.src:void 0},onError:p,onLoad:g}),!1,!1),e}})]},tO=eP("<style> "),tL=eP("<style>"),tR=eP('<div class="portal"><span class="close"></span><img class="img">');function tI(e){let t;let n=ev({maskClosable:!0,escClosable:!0,lazy:!0,disabled:!1},e),[r,i]=F(null),[a,o]=F({width:0,height:0,left:0,top:0});function l(e){n.disabled||(i(e),null==n.onOpenChange||n.onOpenChange.call(n,e))}function s(e){e.preventDefault()}function c(e){s(e),"keydown"===e.type?n.escClosable&&"Escape"===e.key&&l(!1):l(!1)}function u(){!1===r()&&l(null)}function d(e){s(e),n.maskClosable&&e.target===t&&l(!1)}return H(()=>{void 0!==n.open&&n.open!==V(r)&&i(n.open)}),H(()=>{!0===r()&&(document.documentElement.addEventListener("mousewheel",s,{passive:!1}),n.escClosable&&document.documentElement.addEventListener("keydown",c,!1)),q(()=>{document.documentElement.removeEventListener("mousewheel",s,!1),document.documentElement.removeEventListener("keydown",c,!1)})}),[ep(eC,{get when(){return n.css},get children(){let e=tO(),t=e.firstChild;return j(()=>t.data=(0,e6.css)(n.css)),e}}),ep(tT,{get src(){return n.src},get alt(){return n.alt},get lazy(){return n.lazy},get style(){return n.style},get classList(){return{none:!!r()}},onClick:function(e){n.disabled||(e.stopPropagation(),s(e),e.target&&o(e.target.getBoundingClientRect()),l(!0))}}),ep(eC,{get when(){return null!==r()},get children(){return ep(e4,{useShadow:!0,get children(){return[(()=>{let e=tO(),t=e.firstChild;return j(()=>t.data=function(){let{width:e,height:t,top:r,left:i}=a();return`.portal {--img: url(${n.src});inline-size: ${e}px;block-size: ${t}px;inset-block-start: ${r}px;inset-inline-start: ${i}px;}`}()),e})(),(()=>{let e=tL();return e.textContent=t_,e})(),(()=>{let e=tL();return e.textContent=tE,e})(),(()=>{let e=tR(),i=t,a=e.firstChild,o=a.nextSibling;return ej(e,"click",d,!0),ej(e,"animationend",u),"function"==typeof i?eV(i,e):t=e,ej(a,"click",c,!0),j(t=>{let i=!!r(),a=!r(),l=n.srcFull||n.src,s=n.alt;return i!==t._v$&&e.classList.toggle("open",t._v$=i),a!==t._v$2&&e.classList.toggle("closeing",t._v$2=a),l!==t._v$3&&eF(o,"src",t._v$3=l),s!==t._v$4&&eF(o,"alt",t._v$4=s),t},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),e})()]}})}})]}tI.registry=()=>{ti("n-img",{class:void 0,css:void 0,alt:void 0,src:void 0,srcFull:void 0,open:null,maskClosable:void 0,escClosable:void 0,onOpenChange:void 0,onLoad:void 0,lazy:void 0,disabled:void 0},(e,t)=>{let n=t.element,r=ev({onOpenChange(e){t.element.dispatchEvent(new CustomEvent("openchange",{detail:e}))},onLoad(){t.element.dispatchEvent(new CustomEvent("load"))}},e);return H(()=>{ta(n,["css"])}),[(()=>{let e=tL();return e.textContent=tv,e})(),ep(tI,r)]})};let tN=tI;eM(["click"]);let tP=(0,e6.css)`
   .avatar {
     position: relative;
     display: inline-flex;
@@ -2815,29 +2827,29 @@
       background-color: var(--btn-bg);
     }
   }
-`;function aK(){return(aK=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}let aJ=eP('<n-input part="value">',!0,!1),aQ=eP("<style>");function a0(e){let t;let n=ev({type:"date",parser:"YYYY-MM-DD HH:mm:ss"},e),[r,i]=em(n,["class","css","value","defaultValue","onChange","type","content","onOpenChange","open","format","popupCss","trigger","parser","showTime","showHour","showMinute","showSecond","prefixIcon","suffixIcon","placeholder","showToday","showHeader"]),[a,o]=F(null),[l,s]=F(am(r.defaultValue)),c=B(()=>r.format?r.format:r.showTime?"YYYY-MM-DD HH:mm:ss":({month:"YYYY-MM",date:"YYYY-MM-DD",year:"YYYY"})[r.type||"date"]);function u(e){i.disabled||(null==r.onOpenChange||r.onOpenChange.call(r,e),void 0===r.open&&o(e))}function d(e){e.stopPropagation(),e.preventDefault(),u(!0)}function p(){V(a)&&u(!1)}function g(e){var n;e.target===(null==t?void 0:null==(n=t.shadowRoot)?void 0:n.activeElement)&&u(!V(a))}function f(e){void 0===r.value&&s(e),null==n.onChange||n.onChange.call(n,e.format(r.parser),e)}function h(e){if(e.detail){let t=am(e.detail);t.isValid()&&f(t)}}return H(()=>{void 0!==r.open&&r.open!==V(a)&&o(r.open)}),H(()=>{let e=am(r.value||r.defaultValue);void 0!==r.value&&e.isValid()&&s(e)}),ep(nl,ev({trigger:"none",placement:"left",get open(){return a()},onOpenChange:u,get css(){return r.css},popupCss:aZ,get content(){return ep(aX,{get type(){return r.type},get current(){return l()},get open(){return a()},onChange:f,openChange:u,get showHour(){return r.showHour},get showMinute(){return r.showMinute},get showSecond(){return r.showSecond},get showTime(){return r.showTime},get showToday(){return r.showToday},get showHeader(){return r.showHeader}})}},i,{get children(){let e=aJ(),n=t;return ej(e,"change",h),ej(e,"blur",p),ej(e,"focus",d),ej(e,"mousedown",g,!0),"function"==typeof n?eV(n,e):t=e,e._$owner=O,j(t=>{let n=i.disabled,a=r.suffixIcon,o=r.prefixIcon,l=r.placeholder;return n!==t._v$&&(e.disabled=t._v$=n),a!==t._v$2&&(e.suffixIcon=t._v$2=a),o!==t._v$3&&(e.prefixIcon=t._v$3=o),l!==t._v$4&&(e.placeholder=t._v$4=l),t},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),j(()=>e.value=l().format(c())),e}}))}(function(e){e.date="date",e.month="month",e.year="year"})(S||(S={})),a0.registry=()=>{nN.registry(),rM.registry(),ti("n-data-picker",aK({},no,{value:void 0,defaultValue:void 0,disabled:void 0,onChange:void 0,open:void 0,onOpenChange:void 0,type:void 0,format:void 0,parser:void 0,showTime:void 0,suffixIcon:"📅",prefixIcon:void 0,placeholder:void 0,showHour:!0,showMinute:!0,showSecond:!0,showToday:!0,showHeader:!0}),(e,t)=>{let n=t.element,r=ev({css:n.css,onChange(e,t){n.dispatchEvent(new CustomEvent("change",{detail:[e,t]}))},onOpenChange(e){n.dispatchEvent(new CustomEvent("openchange",{detail:e}))}},e);return H(()=>{ta(n,["popupCss","css"])}),[(()=>{let e=aQ();return e.textContent=tv,e})(),ep(a0,r)]})};let a1=a0;function a2(){return(a2=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}eM(["mousedown"]),function(e){e.string="string",e.number="number",e.integer="integer",e.boolean="boolean",e.object="object",e.array="array"}(_||(_={}));let a3=function e(t,n){let r=[],{properties:i}=t;for(let t in i)if(Object.prototype.hasOwnProperty.call(i,t)){let a=i[t],{properties:o,items:l,type:s="string"}=a,c=function(e,t){if(null==e)return{};var n,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(i[n]=e[n]);return i}(a,["properties","items","type"]),u=a2({},c,{name:t,type:s,subTitle:s,key:`${n?`${n}.`:""}${t}`});"object"===s?u.children=e({properties:o},u.key):"array"===s&&(u.children=e({properties:{items:a2({},l,{title:"items",isItems:!0})}},u.key)),r.push(u)}return r},a4=eP("<style> "),a5=eP('<slot id="backdrop-slot">'),a6=eP('<svg><filter filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency="0.45" numOctaves="1"></feTurbulence><feDisplacementMap in="SourceGraphic" scale="50">'),a8=eP("<style>"),a7=e=>{let t=ev({filterBlur:16},e),[n]=em(t,["css","filter","feTurbulence","feDisplacementMap","filterBlur"]),r=ex(),i=B(()=>(0,e6.css)`
+`;function aK(){return(aK=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}let aJ=eP('<n-input part="value">',!0,!1),aQ=eP("<style>");function a0(e){let t;let n=ev({type:"date",parser:"YYYY-MM-DD HH:mm:ss"},e),[r,i]=em(n,["class","css","value","defaultValue","onChange","type","content","onOpenChange","open","format","popupCss","trigger","parser","showTime","showHour","showMinute","showSecond","prefixIcon","suffixIcon","placeholder","showToday","showHeader"]),[a,o]=F(null),[l,s]=F(am(r.defaultValue)),c=B(()=>r.format?r.format:r.showTime?"YYYY-MM-DD HH:mm:ss":({month:"YYYY-MM",date:"YYYY-MM-DD",year:"YYYY"})[r.type||"date"]);function u(e){i.disabled||(null==r.onOpenChange||r.onOpenChange.call(r,e),void 0===r.open&&o(e))}function d(e){e.stopPropagation(),e.preventDefault(),u(!0)}function p(){V(a)&&u(!1)}function g(e){var n;e.target===(null==t?void 0:null==(n=t.shadowRoot)?void 0:n.activeElement)&&u(!V(a))}function f(e){void 0===r.value&&s(e),null==n.onChange||n.onChange.call(n,e.format(r.parser),e)}function h(e){if(e.detail){let t=am(e.detail);t.isValid()&&f(t)}}return H(()=>{void 0!==r.open&&r.open!==V(a)&&o(r.open)}),H(()=>{let e=am(r.value||r.defaultValue);void 0!==r.value&&e.isValid()&&s(e)}),ep(nl,ev({trigger:"none",placement:"left",get open(){return a()},onOpenChange:u,get css(){return r.css},popupCss:aZ,get content(){return ep(aX,{get type(){return r.type},get current(){return l()},get open(){return a()},onChange:f,openChange:u,get showHour(){return r.showHour},get showMinute(){return r.showMinute},get showSecond(){return r.showSecond},get showTime(){return r.showTime},get showToday(){return r.showToday},get showHeader(){return r.showHeader}})}},i,{get children(){let e=aJ(),n=t;return ej(e,"change",h),ej(e,"blur",p),ej(e,"focus",d),ej(e,"mousedown",g,!0),"function"==typeof n?eV(n,e):t=e,e._$owner=O,j(t=>{let n=i.disabled,a=r.suffixIcon,o=r.prefixIcon,l=r.placeholder;return n!==t._v$&&(e.disabled=t._v$=n),a!==t._v$2&&(e.suffixIcon=t._v$2=a),o!==t._v$3&&(e.prefixIcon=t._v$3=o),l!==t._v$4&&(e.placeholder=t._v$4=l),t},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),j(()=>e.value=l().format(c())),e}}))}(function(e){e.date="date",e.month="month",e.year="year"})(S||(S={})),a0.registry=()=>{nN.registry(),rM.registry(),ti("n-data-picker",aK({},no,{value:void 0,defaultValue:void 0,disabled:void 0,onChange:void 0,open:void 0,onOpenChange:void 0,type:void 0,format:void 0,parser:void 0,showTime:void 0,suffixIcon:"📅",prefixIcon:void 0,placeholder:void 0,showHour:!0,showMinute:!0,showSecond:!0,showToday:!0,showHeader:!0}),(e,t)=>{let n=t.element,r=ev({css:n.css,onChange(e,t){n.dispatchEvent(new CustomEvent("change",{detail:[e,t]}))},onOpenChange(e){n.dispatchEvent(new CustomEvent("openchange",{detail:e}))}},e);return H(()=>{ta(n,["popupCss","css"])}),[(()=>{let e=aQ();return e.textContent=tv,e})(),ep(a0,r)]})};let a1=a0;function a2(){return(a2=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}eM(["mousedown"]),function(e){e.string="string",e.number="number",e.integer="integer",e.boolean="boolean",e.object="object",e.array="array"}(_||(_={}));let a3=function e(t,n){let r=[],{properties:i}=t;for(let t in i)if(Object.prototype.hasOwnProperty.call(i,t)){let a=i[t],{properties:o,items:l,type:s="string"}=a,c=function(e,t){if(null==e)return{};var n,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(i[n]=e[n]);return i}(a,["properties","items","type"]),u=a2({},c,{name:t,type:s,subTitle:s,key:`${n?`${n}.`:""}${t}`});"object"===s?u.children=e({properties:o},u.key):"array"===s&&(u.children=e({properties:{items:a2({},l,{title:"items",isItems:!0})}},u.key)),r.push(u)}return r},a4=eP("<style> "),a5=eP('<slot id="backdrop-slot">'),a6=eP('<svg><filter filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency="0.45" numOctaves="1"></feTurbulence><feDisplacementMap in="SourceGraphic" scale="50">'),a8=eP("<style>"),a7=e=>{let t=ev({filterBlur:16},e),[n]=em(t,["css","filter","feTurbulence","feDisplacementMap","filterBlur","brightness"]),r=ex(),i=B(()=>{let e=(0,e6.cx)(!!n.brightness&&`brightness(${n.brightness})`,!!n.filterBlur&&`blur(${n.filterBlur}px)`);return(0,e6.css)`
       #backdrop-slot {
         display: block;
         overflow: inherit;
         border-radius: inherit;
         inline-size: 100%;
         block-size: 100%;
-        backdrop-filter: blur(${n.filterBlur}px);
+        backdrop-filter: ${e};
       }
 
       @supports (backdrop-filter: url(#${r})) {
         #backdrop-slot {
-          backdrop-filter: ${(0,e6.cx)(!!n.filterBlur&&`blur(${n.filterBlur}px)`,`url(#${r})`)};
+          backdrop-filter: ${e} url(#${r});
         }
       }
-    `);return[(()=>{let e=a4(),t=e.firstChild;return j(()=>t.data=i()),e})(),ep(eC,{get when(){return t.css},get children(){let e=a4(),t=e.firstChild;return j(()=>t.data=(0,e6.css)(n.css)),e}}),(()=>{let e=a5();return e._$owner=O,e})(),(()=>{let e=a6(),t=e.firstChild,i=t.firstChild,a=i.nextSibling;return e.style.setProperty("display","none"),eF(t,"id",r),eU(t,ev(()=>n.filter),!0,!0),eU(i,ev(()=>n.feTurbulence),!0,!1),eU(a,ev(()=>n.feDisplacementMap),!0,!1),e})()]};a7.registry=()=>{ti("n-glass-panel",{class:void 0,css:void 0,filterBlur:void 0,filter:void 0,feTurbulence:void 0,feDisplacementMap:void 0},(e,t)=>{let n=t.element;return H(()=>{ta(n,["css","filterBlur","filter","feTurbulence","feDisplacementMap"])}),[(()=>{let e=a8();return e.textContent=tv,e})(),ep(a7,e)]})};let a9=a7,oe=eP("<style> "),ot=eP("<style>"),on=eP("<div>"),or=(0,e6.css)`
+    `});return[(()=>{let e=a4(),t=e.firstChild;return j(()=>t.data=i()),e})(),ep(eC,{get when(){return t.css},get children(){let e=a4(),t=e.firstChild;return j(()=>t.data=(0,e6.css)(n.css)),e}}),(()=>{let e=a5();return e._$owner=O,e})(),(()=>{let e=a6(),t=e.firstChild,i=t.firstChild,a=i.nextSibling;return e.style.setProperty("display","none"),eF(t,"id",r),eU(t,ev(()=>n.filter),!0,!0),eU(i,ev(()=>n.feTurbulence),!0,!1),eU(a,ev(()=>n.feDisplacementMap),!0,!1),e})()]};a7.registry=()=>{ti("n-glass-panel",{class:void 0,css:void 0,brightness:void 0,filterBlur:void 0,filter:void 0,feTurbulence:void 0,feDisplacementMap:void 0},(e,t)=>{let n=t.element;return H(()=>{ta(n,["css","brightness","filterBlur","filter","feTurbulence","feDisplacementMap"])}),[(()=>{let e=a8();return e.textContent=tv,e})(),ep(a7,e)]})};let a9=a7,oe=eP("<style> "),ot=eP("<style>"),on=eP("<div>"),or=(0,e6.css)`
   .text {
     word-break: break-word;
     word-wrap: break-word;
     white-space: break-spaces;
     cursor: auto;
   }
-`;function oi(e,t,n,r,i){(function(e,t){let n;let r=[];for(;(n=t.exec(e))&&(r.push(n),t.global););return r})(i,new RegExp(n,r)).forEach(n=>{let r;let i=new Range;r=0+n.index,e.firstChild&&(i.setStart(e.firstChild,r),r+=n[0].length,i.setEnd(e.firstChild,r));let a=CSS.highlights.get(t);a?a.add(i):CSS.highlights.set(t,new Highlight().add(i))})}function oa(e){let t;let{baseStyle:n}=ty,r=ex(),i=B(()=>{var t;return`${e.text}${null!=(t=e.extra)?t:""}`});return H(()=>{if(t&&e.highlight){if(Array.isArray(e.highlight))for(let a=0,o=e.highlight.length;a<o;a++){let o=e.highlight[a],l="object"!=typeof o,s=String(l?o:o.highlight);if(s.length){var n;oi(t,r,s,l?e.flag:null!=(n=o.flag)?n:e.flag,i())}}else String(e.highlight).length&&oi(t,r,String(e.highlight),e.flag,i())}}),H(()=>{if(t&&"string"==typeof e.extra){var n;let i=new Range,a=(null==(n=e.text)?void 0:n.length)||0;t.firstChild&&(i.setStart(t.firstChild,a),a+=e.extra.length,i.setEnd(t.firstChild,a));let o=CSS.highlights.get(r);o?o.add(i):CSS.highlights.set(r,new Highlight().add(i))}}),[(()=>{let e=oe(),t=e.firstChild;return j(()=>t.data=n()),e})(),(()=>{let e=ot();return e.textContent=or,e})(),(()=>{let t=oe(),n=t.firstChild;return j(()=>{var t;return n.data=`::highlight(${r}) {color: var(--primary-color, ${null!=(t=e.highlightColor)?t:"#5794ff"});}`}),t})(),ep(eC,{get when(){return e.css},get children(){let t=oe(),n=t.firstChild;return j(()=>n.data=(0,e6.css)(e.css)),t}}),(()=>{let n=on(),r=t;return"function"==typeof r?eV(r,n):t=n,eY(n,i),j(()=>eD(n,(0,e6.cx)("text",e.class))),n})()]}oa.registry=()=>{ti("n-highlight-text",{class:void 0,css:void 0,text:void 0,highlight:void 0,flag:void 0,extra:void 0,highlightColor:void 0,children:void 0},(e,t)=>{let n=t.element,r=ev({text:n.textContent,css:n.css},e);return H(()=>{ta(n,["css","text","highlight","extra","flag"]),n.replaceChildren()}),[(()=>{let e=ot();return e.textContent=tv,e})(),ep(oa,r)]})};let oo=oa,ol=(0,e6.css)`
+`;function oi(e,t,n,r,i){(function(e,t){let n;let r=[];for(;(n=t.exec(e))&&(r.push(n),t.global););return r})(i,new RegExp(n,r)).forEach(n=>{let r;let i=new Range;r=0+n.index,e.firstChild&&(i.setStart(e.firstChild,r),r+=n[0].length,i.setEnd(e.firstChild,r));let a=CSS.highlights.get(t);a?a.add(i):CSS.highlights.set(t,new Highlight().add(i))})}function oa(e){let t;let{baseStyle:n}=ty,r=ex(),i=B(()=>{var t;return`${e.text}${null!=(t=e.extra)?t:""}`});return H(()=>{if(t&&e.highlight){if(Array.isArray(e.highlight))for(let a=0,o=e.highlight.length;a<o;a++){let o=e.highlight[a],l="object"!=typeof o,s=String(l?o:o.highlight);if(s.length){var n;oi(t,r,s,l?e.flag:null!=(n=o.flag)?n:e.flag,i())}}else String(e.highlight).length&&oi(t,r,String(e.highlight),e.flag,i())}}),H(()=>{if(t&&"string"==typeof e.extra){var n;let i=new Range,a=(null==(n=e.text)?void 0:n.length)||0;t.firstChild&&(i.setStart(t.firstChild,a),a+=e.extra.length,i.setEnd(t.firstChild,a));let o=CSS.highlights.get(r);o?o.add(i):CSS.highlights.set(r,new Highlight().add(i))}}),[(()=>{let e=oe(),t=e.firstChild;return j(()=>t.data=n()),e})(),(()=>{let e=ot();return e.textContent=or,e})(),(()=>{let t=oe(),n=t.firstChild;return j(()=>{var t;return n.data=`::highlight(${r}) {color: ${null!=(t=e.highlightColor)?t:"var(--primary-color, #5794ff)"};}`}),t})(),ep(eC,{get when(){return e.css},get children(){let t=oe(),n=t.firstChild;return j(()=>n.data=(0,e6.css)(e.css)),t}}),(()=>{let n=on(),r=t;return"function"==typeof r?eV(r,n):t=n,eY(n,i),j(()=>eD(n,(0,e6.cx)("text",e.class))),n})()]}oa.registry=()=>{ti("n-highlight-text",{class:void 0,css:void 0,text:void 0,highlight:void 0,flag:void 0,extra:void 0,highlightColor:void 0,children:void 0},(e,t)=>{let n=t.element,r=ev({text:n.textContent,css:n.css},e);return H(()=>{ta(n,["css","text","highlight","extra","flag"]),n.replaceChildren()}),[(()=>{let e=ot();return e.textContent=tv,e})(),ep(oa,r)]})};let oo=oa,ol=(0,e6.css)`
   :host,
   :root {
     --table-heading-bg: var(--border-color);

package/umd/manifest.json

@@ -1 +1 @@
-{"name":"neko-ui","description":"WebComponents UI Libraries","start_url":"/?source=pwa","display":"standalone","background_color":"#fff","icons":[{"src":"/favicon.ico","sizes":"48x48","type":"image/x-icon"}],"version":"2.12.2-486b2637dfc97985","hash":"486b2637dfc97985","content_assets":["index.js"]}
+{"filename":"manifest.json","name":"neko-ui","description":"WebComponents UI Libraries","start_url":"/?source=pwa","display":"standalone","background_color":"#fff","icons":[{"src":"/favicon.ico","sizes":"48x48","type":"image/x-icon"}],"version":"2.12.4-4dabcaad31c31ad4","hash":"4dabcaad31c31ad4","content_assets":["index.js"]}