neko-ui 2.13.0 → 2.13.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/marquee/index.d.ts +4 -0
- package/es/marquee/index.js +1 -1
- package/es/marquee/index.js.map +1 -1
- package/es/marquee/style.js +27 -20
- package/es/marquee/style.js.map +1 -1
- package/lib/marquee/index.d.ts +4 -0
- package/lib/marquee/index.js +1 -1
- package/lib/marquee/index.js.map +1 -1
- package/lib/marquee/style.js +27 -20
- package/lib/marquee/style.js.map +1 -1
- package/package.json +4 -3
- package/umd/index.js +28 -21
- package/umd/manifest.json +1 -1
package/es/marquee/index.d.ts
CHANGED
package/es/marquee/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{use as e}from"solid-js/web";import{template as
|
|
1
|
+
import{use as e}from"solid-js/web";import{template as r}from"solid-js/web";import{memo as t}from"solid-js/web";import{insert as o}from"solid-js/web";import{effect as s}from"solid-js/web";import{createComponent as i}from"solid-js/web";import{className as l}from"solid-js/web";let m=r("<style> "),n=r("<style>"),a=r("<div>"),d=r('<div class="n-marquee-item">');import{createEffect as u,createSignal as c,For as f,mergeProps as p,Show as h}from"solid-js";import v from"@moneko/common/lib/isFunction";import{css as y,cx as b}from"@moneko/css";import{customElement as j}from"solid-element";import{clearAttribute as w}from"../basic-config";import g,{block as q}from"../theme";import{style as $}from"./style";let k=r=>{let j;let{baseStyle:w}=g,q=p({speed:15,hoverPause:!0,mask:!0},r),[k,_]=c(2);return u(()=>{if(j){let e=j.querySelector(".n-marquee-item");_(Math.ceil(j.offsetWidth/e.offsetWidth)+1)}}),[(()=>{let e=m(),r=e.firstChild;return s(()=>r.data=w()),e})(),(()=>{let e=n();return e.textContent=$,e})(),i(h,{get when(){return q.css},get children(){let e=m(),r=e.firstChild;return s(()=>r.data=y(q.css)),e}}),(()=>{let r=a(),m=j;return"function"==typeof m?e(m,r):j=r,o(r,i(f,{get each(){return Array.from({length:k()})},children:()=>(()=>{let e=d();return o(e,(()=>{let e=t(()=>!!Array.isArray(q.children));return()=>e()?i(f,{get each(){return q.children},children:e=>v(e.cloneNode)?e.cloneNode(!0):e}):q.children})()),e})()})),s(e=>{let t=b("n-marquee",q.mask&&"n-marquee-mask",q.hoverPause&&"n-marquee-hover-pause"),o=`${q.speed}s`;return t!==e._v$&&l(r,e._v$=t),o!==e._v$2&&(null!=(e._v$2=o)?r.style.setProperty("--speed",o):r.style.removeProperty("--speed")),e},{_v$:void 0,_v$2:void 0}),r})()]};k.registry=()=>{j("n-marquee",{class:void 0,css:void 0,speed:15,hoverPause:!0,mask:!0},(e,r)=>{let t=r.element,o=p({children:[...t.childNodes.values()]},e);return u(()=>{w(t,["css"])}),[(()=>{let e=n();return e.textContent=q,e})(),i(k,o)]})};export default k;
|
package/es/marquee/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/marquee/index.tsx"],"sourcesContent":["import { createEffect, createSignal, For, mergeProps, Show } from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport theme, { block } from '../theme';\n\nimport { style } from './style';\n\nexport interface MarqueeProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 是否在 hover 时暂停\n * @default true\n */\n hoverPause?: boolean;\n /** 滚动速度（单位：秒）\n * @default 15\n */\n speed?: number;\n children?: JSXElement | JSXElement[];\n}\n\n/** 跑马灯 */\nconst Marquee = (_: MarqueeProps) => {\n const { baseStyle } = theme;\n let el: HTMLDivElement | undefined;\n const props = mergeProps(\n {\n speed: 15,\n hoverPause: true,\n },\n _,\n );\n const [count, setCount] = createSignal(2);\n\n createEffect(() => {\n if (el) {\n const item = el.querySelector('.item') as HTMLDivElement;\n\n setCount(Math.ceil(el.offsetWidth / item.offsetWidth) + 1);\n }\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 ref={el}\n class={cx('marquee'
|
|
1
|
+
{"version":3,"sources":["components/marquee/index.tsx"],"sourcesContent":["import { createEffect, createSignal, For, mergeProps, Show } from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport theme, { block } from '../theme';\n\nimport { style } from './style';\n\nexport interface MarqueeProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 是否在 hover 时暂停\n * @default true\n */\n hoverPause?: boolean;\n /** 滚动速度（单位：秒）\n * @default 15\n */\n speed?: number;\n /** 是否使用遮罩\n * @default true\n */\n mask?: boolean;\n children?: JSXElement | JSXElement[];\n}\n\n/** 跑马灯 */\nconst Marquee = (_: MarqueeProps) => {\n const { baseStyle } = theme;\n let el: HTMLDivElement | undefined;\n const props = mergeProps(\n {\n speed: 15,\n hoverPause: true,\n mask: true,\n },\n _,\n );\n const [count, setCount] = createSignal(2);\n\n createEffect(() => {\n if (el) {\n const item = el.querySelector('.n-marquee-item') as HTMLDivElement;\n\n setCount(Math.ceil(el.offsetWidth / item.offsetWidth) + 1);\n }\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 ref={el}\n class={cx(\n 'n-marquee',\n props.mask && 'n-marquee-mask',\n props.hoverPause && 'n-marquee-hover-pause',\n )}\n style={{ '--speed': `${props.speed}s` }}\n >\n <For each={Array.from({ length: count() })}>\n {() => (\n <div class=\"n-marquee-item\">\n {Array.isArray(props.children) ? (\n <For each={props.children}>\n {(item) => {\n const node = item as HTMLElement;\n const next = isFunction(node.cloneNode) ? node.cloneNode(true) : node;\n\n return next;\n }}\n </For>\n ) : (\n props.children\n )}\n </div>\n )}\n </For>\n </div>\n </>\n );\n};\n\nexport type MarqueeElement = CustomElement<MarqueeProps>;\n\nMarquee.registry = () => {\n customElement<MarqueeProps>(\n 'n-marquee',\n {\n class: void 0,\n css: void 0,\n speed: 15,\n hoverPause: true,\n mask: true,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n children: [...el.childNodes.values()],\n },\n _,\n );\n\n createEffect(() => {\n clearAttribute(el, ['css']);\n });\n return (\n <>\n <style textContent={block} />\n <Marquee {...props} />\n </>\n );\n },\n );\n};\n\nexport default Marquee;\n"],"names":["createEffect","createSignal","For","mergeProps","Show","isFunction","css","cx","customElement","clearAttribute","theme","block","style","Marquee","_","el","baseStyle","props","speed","hoverPause","mask","count","setCount","item","querySelector","Math","ceil","offsetWidth","Array","from","length","isArray","children","node","cloneNode","registry","class","opt","element","childNodes","values"],"mappings":"sWAAA,QAASA,gBAAAA,CAAY,CAAEC,gBAAAA,CAAY,CAAEC,OAAAA,CAAG,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,KAAQ,UAAW,AAC7E,QAASC,MAAkB,+BAAiB,AAC5C,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAE9C,QAASC,kBAAAA,CAAc,KAAyB,iBAAkB,AAClE,QAAOC,GAASC,SAAAA,CAAK,KAAQ,UAAW,AAExC,QAASC,SAAAA,CAAK,KAAQ,SAAU,CAuBhC,IAAMC,EAAU,AAACC,QAEXC,EADJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGN,EAEhBO,EAAQd,EACZ,CACEe,MAAO,GACPC,WAAY,CAAA,EACZC,KAAM,CAAA,CACR,EACAN,GAEI,CAACO,EAAOC,EAAS,CAAGrB,EAAa,GASvC,OAPAD,EAAa,KACX,GAAIe,EAAI,CACN,IAAMQ,EAAOR,EAAGS,aAAa,CAAC,mBAE9BF,EAASG,KAAKC,IAAI,CAACX,EAAGY,WAAW,CAAGJ,EAAKI,WAAW,EAAI,EAC1D,CACF,uDAGwBX,gDACAJ,UACnBR,qBAAWa,EAAMX,GAAG,8DACCA,EAAIW,EAAMX,GAAG,0BAG5BS,oCAAAA,UAQJb,qBAAU0B,MAAMC,IAAI,CAAC,CAAEC,OAAQT,GAAQ,aACrC,mDAEIO,MAAMG,OAAO,CAACd,EAAMe,QAAQ,aAA5BJ,MACE1B,qBAAUe,EAAMe,QAAQ,WACtB,AAACT,GAEalB,EAAW4B,AADXV,EACgBW,SAAS,EAAID,AAD7BV,EACkCW,SAAS,CAAC,CAAA,GAD5CX,IAOjBN,EAAMe,QAAQ,2BApBfzB,EACL,YACAU,EAAMG,IAAI,EAAI,iBACdH,EAAME,UAAU,EAAI,2BAEF,CAAC,EAAEF,EAAMC,KAAK,CAAC,CAAC,CAAC,qKAuB7C,CAIAL,CAAAA,EAAQsB,QAAQ,CAAG,KACjB3B,EACE,YACA,CACE4B,MAAO,KAAK,EACZ9B,IAAK,KAAK,EACVY,MAAO,GACPC,WAAY,CAAA,EACZC,KAAM,CAAA,CACR,EACA,CAACN,EAAGuB,KACF,IAAMtB,EAAKsB,EAAIC,OAAO,CAChBrB,EAAQd,EACZ,CACE6B,SAAU,IAAIjB,EAAGwB,UAAU,CAACC,MAAM,GAAG,AACvC,EACA1B,GAMF,OAHAd,EAAa,KACXS,EAAeM,EAAI,CAAC,MAAM,CAC5B,yCAGwBJ,UACnBE,EAAYI,GAGnB,EAEJ,CAEA,gBAAeJ,CAAQ"}
|
package/es/marquee/style.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{css as e}from"@moneko/css";export const style=e`
|
|
2
|
-
.marquee {
|
|
2
|
+
.n-marquee {
|
|
3
3
|
--speed: 15s;
|
|
4
4
|
|
|
5
5
|
position: relative;
|
|
@@ -9,35 +9,42 @@ import{css as e}from"@moneko/css";export const style=e`
|
|
|
9
9
|
white-space: nowrap;
|
|
10
10
|
inline-size: 100%;
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
12
|
+
&.n-marquee-mask {
|
|
13
|
+
&::before,
|
|
14
|
+
&::after {
|
|
15
|
+
content: '';
|
|
16
|
+
position: absolute;
|
|
17
|
+
z-index: 1000;
|
|
18
|
+
inset-block-start: 0;
|
|
19
|
+
inset-inline-start: 0;
|
|
20
|
+
inline-size: 15rem;
|
|
21
|
+
max-inline-size: 25%;
|
|
22
|
+
block-size: 100%;
|
|
23
|
+
background-image: linear-gradient(to right, var(--component-bg), transparent);
|
|
24
|
+
pointer-events: none;
|
|
25
|
+
}
|
|
24
26
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
27
|
+
&::after {
|
|
28
|
+
inset-inline: auto 0;
|
|
29
|
+
background-image: linear-gradient(to left, var(--component-bg), transparent);
|
|
30
|
+
}
|
|
28
31
|
}
|
|
29
32
|
}
|
|
30
33
|
|
|
31
|
-
.item {
|
|
34
|
+
.n-marquee-item {
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
line-height: 1;
|
|
38
|
+
gap: 4px;
|
|
32
39
|
animation-duration: var(--speed);
|
|
33
40
|
animation-iteration-count: infinite;
|
|
34
41
|
animation-name: marquee-content;
|
|
35
42
|
animation-timing-function: linear;
|
|
36
|
-
padding:
|
|
43
|
+
padding: 0 24px;
|
|
37
44
|
}
|
|
38
45
|
|
|
39
|
-
.hover-pause {
|
|
40
|
-
&:hover .item {
|
|
46
|
+
.n-marquee-hover-pause {
|
|
47
|
+
&:hover .n-marquee-item {
|
|
41
48
|
animation-play-state: paused;
|
|
42
49
|
}
|
|
43
50
|
}
|
package/es/marquee/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/marquee/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .marquee {\n --speed: 15s;\n\n position: relative;\n display: flex;\n overflow: hidden;\n margin: auto;\n white-space: nowrap;\n inline-size: 100%;\n\n &::before,\n
|
|
1
|
+
{"version":3,"sources":["components/marquee/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .n-marquee {\n --speed: 15s;\n\n position: relative;\n display: flex;\n overflow: hidden;\n margin: auto;\n white-space: nowrap;\n inline-size: 100%;\n\n &.n-marquee-mask {\n &::before,\n &::after {\n content: '';\n position: absolute;\n z-index: 1000;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 15rem;\n max-inline-size: 25%;\n block-size: 100%;\n background-image: linear-gradient(to right, var(--component-bg), transparent);\n pointer-events: none;\n }\n\n &::after {\n inset-inline: auto 0;\n background-image: linear-gradient(to left, var(--component-bg), transparent);\n }\n }\n }\n\n .n-marquee-item {\n display: flex;\n align-items: center;\n line-height: 1;\n gap: 4px;\n animation-duration: var(--speed);\n animation-iteration-count: infinite;\n animation-name: marquee-content;\n animation-timing-function: linear;\n padding: 0 24px;\n }\n\n .n-marquee-hover-pause {\n &:hover .n-marquee-item {\n animation-play-state: paused;\n }\n }\n\n @keyframes marquee-content {\n from {\n transform: translateX(0%);\n }\n\n to {\n transform: translateX(-100%);\n }\n }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DzB,CAAC,AAAC"}
|
package/lib/marquee/index.d.ts
CHANGED
package/lib/marquee/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return y}});const e=require("solid-js/web"),t=require("solid-js"),r=i(require("@moneko/common/lib/isFunction")),n=require("@moneko/css"),o=require("solid-element"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return y}});const e=require("solid-js/web"),t=require("solid-js"),r=i(require("@moneko/common/lib/isFunction")),n=require("@moneko/css"),o=require("solid-element"),s=require("../basic-config"),l=c(require("../theme")),u=require("./style");function i(e){return e&&e.__esModule?e:{default:e}}function a(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(a=function(e){return e?r:t})(e)}function c(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=a(t);if(r&&r.has(e))return r.get(e);var n={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var s in e)if("default"!==s&&Object.prototype.hasOwnProperty.call(e,s)){var l=o?Object.getOwnPropertyDescriptor(e,s):null;l&&(l.get||l.set)?Object.defineProperty(n,s,l):n[s]=e[s]}return n.default=e,r&&r.set(e,n),n}const f=(0,e.template)("<style> "),d=(0,e.template)("<style>"),p=(0,e.template)("<div>"),m=(0,e.template)('<div class="n-marquee-item">'),h=o=>{let s;let{baseStyle:i}=l.default,a=(0,t.mergeProps)({speed:15,hoverPause:!0,mask:!0},o),[c,h]=(0,t.createSignal)(2);return(0,t.createEffect)(()=>{if(s){let e=s.querySelector(".n-marquee-item");h(Math.ceil(s.offsetWidth/e.offsetWidth)+1)}}),[(()=>{let t=f(),r=t.firstChild;return(0,e.effect)(()=>r.data=i()),t})(),(()=>{let e=d();return e.textContent=u.style,e})(),(0,e.createComponent)(t.Show,{get when(){return a.css},get children(){let t=f(),r=t.firstChild;return(0,e.effect)(()=>r.data=(0,n.css)(a.css)),t}}),(()=>{let o=p(),l=s;return"function"==typeof l?(0,e.use)(l,o):s=o,(0,e.insert)(o,(0,e.createComponent)(t.For,{get each(){return Array.from({length:c()})},children:()=>(()=>{let n=m();return(0,e.insert)(n,(()=>{let n=(0,e.memo)(()=>!!Array.isArray(a.children));return()=>n()?(0,e.createComponent)(t.For,{get each(){return a.children},children:e=>(0,r.default)(e.cloneNode)?e.cloneNode(!0):e}):a.children})()),n})()})),(0,e.effect)(t=>{let r=(0,n.cx)("n-marquee",a.mask&&"n-marquee-mask",a.hoverPause&&"n-marquee-hover-pause"),s=`${a.speed}s`;return r!==t._v$&&(0,e.className)(o,t._v$=r),s!==t._v$2&&(null!=(t._v$2=s)?o.style.setProperty("--speed",s):o.style.removeProperty("--speed")),t},{_v$:void 0,_v$2:void 0}),o})()]};h.registry=()=>{(0,o.customElement)("n-marquee",{class:void 0,css:void 0,speed:15,hoverPause:!0,mask:!0},(r,n)=>{let o=n.element,u=(0,t.mergeProps)({children:[...o.childNodes.values()]},r);return(0,t.createEffect)(()=>{(0,s.clearAttribute)(o,["css"])}),[(()=>{let e=d();return e.textContent=l.block,e})(),(0,e.createComponent)(h,u)]})};const y=h;
|
package/lib/marquee/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/marquee/index.tsx"],"sourcesContent":["import { createEffect, createSignal, For, mergeProps, Show } from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport theme, { block } from '../theme';\n\nimport { style } from './style';\n\nexport interface MarqueeProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 是否在 hover 时暂停\n * @default true\n */\n hoverPause?: boolean;\n /** 滚动速度（单位：秒）\n * @default 15\n */\n speed?: number;\n children?: JSXElement | JSXElement[];\n}\n\n/** 跑马灯 */\nconst Marquee = (_: MarqueeProps) => {\n const { baseStyle } = theme;\n let el: HTMLDivElement | undefined;\n const props = mergeProps(\n {\n speed: 15,\n hoverPause: true,\n },\n _,\n );\n const [count, setCount] = createSignal(2);\n\n createEffect(() => {\n if (el) {\n const item = el.querySelector('.item') as HTMLDivElement;\n\n setCount(Math.ceil(el.offsetWidth / item.offsetWidth) + 1);\n }\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 ref={el}\n class={cx('marquee'
|
|
1
|
+
{"version":3,"sources":["components/marquee/index.tsx"],"sourcesContent":["import { createEffect, createSignal, For, mergeProps, Show } from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport { clearAttribute, type JSXElement } from '../basic-config';\nimport theme, { block } from '../theme';\n\nimport { style } from './style';\n\nexport interface MarqueeProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 是否在 hover 时暂停\n * @default true\n */\n hoverPause?: boolean;\n /** 滚动速度（单位：秒）\n * @default 15\n */\n speed?: number;\n /** 是否使用遮罩\n * @default true\n */\n mask?: boolean;\n children?: JSXElement | JSXElement[];\n}\n\n/** 跑马灯 */\nconst Marquee = (_: MarqueeProps) => {\n const { baseStyle } = theme;\n let el: HTMLDivElement | undefined;\n const props = mergeProps(\n {\n speed: 15,\n hoverPause: true,\n mask: true,\n },\n _,\n );\n const [count, setCount] = createSignal(2);\n\n createEffect(() => {\n if (el) {\n const item = el.querySelector('.n-marquee-item') as HTMLDivElement;\n\n setCount(Math.ceil(el.offsetWidth / item.offsetWidth) + 1);\n }\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 ref={el}\n class={cx(\n 'n-marquee',\n props.mask && 'n-marquee-mask',\n props.hoverPause && 'n-marquee-hover-pause',\n )}\n style={{ '--speed': `${props.speed}s` }}\n >\n <For each={Array.from({ length: count() })}>\n {() => (\n <div class=\"n-marquee-item\">\n {Array.isArray(props.children) ? (\n <For each={props.children}>\n {(item) => {\n const node = item as HTMLElement;\n const next = isFunction(node.cloneNode) ? node.cloneNode(true) : node;\n\n return next;\n }}\n </For>\n ) : (\n props.children\n )}\n </div>\n )}\n </For>\n </div>\n </>\n );\n};\n\nexport type MarqueeElement = CustomElement<MarqueeProps>;\n\nMarquee.registry = () => {\n customElement<MarqueeProps>(\n 'n-marquee',\n {\n class: void 0,\n css: void 0,\n speed: 15,\n hoverPause: true,\n mask: true,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n children: [...el.childNodes.values()],\n },\n _,\n );\n\n createEffect(() => {\n clearAttribute(el, ['css']);\n });\n return (\n <>\n <style textContent={block} />\n <Marquee {...props} />\n </>\n );\n },\n );\n};\n\nexport default Marquee;\n"],"names":["Marquee","_","el","baseStyle","theme","props","mergeProps","speed","hoverPause","mask","count","setCount","createSignal","createEffect","item","querySelector","Math","ceil","offsetWidth","style","Show","css","For","Array","from","length","isArray","children","isFunction","node","cloneNode","cx","registry","customElement","class","opt","element","childNodes","values","clearAttribute","block"],"mappings":"kGA4HA,+CAAA,+CA5HkE,wBACvC,4CACH,yBACM,2BAEkB,+BACnB,uBAEP,mxBAuBhBA,EAAU,AAACC,QAEXC,EADJ,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGC,SAAK,CAErBC,EAAQC,GAAAA,YAAU,EACtB,CACEC,MAAO,GACPC,WAAY,CAAA,EACZC,KAAM,CAAA,CACR,EACAR,GAEI,CAACS,EAAOC,EAAS,CAAGC,GAAAA,cAAY,EAAC,GASvC,MAPAC,GAAAA,cAAY,EAAC,KACX,GAAIX,EAAI,CACN,IAAMY,EAAOZ,EAAGa,aAAa,CAAC,mBAE9BJ,EAASK,KAAKC,IAAI,CAACf,EAAGgB,WAAW,CAAGJ,EAAKI,WAAW,EAAI,EAC1D,CACF,iEAGwBf,gDACAgB,OAAK,6BACxBC,MAAI,oBAAOf,EAAMgB,GAAG,wEACCA,GAAAA,KAAG,EAAChB,EAAMgB,GAAG,0BAG5BnB,4CAAAA,yCAQJoB,KAAG,oBAAOC,MAAMC,IAAI,CAAC,CAAEC,OAAQf,GAAQ,aACrC,sEAEIa,MAAMG,OAAO,CAACrB,EAAMsB,QAAQ,aAA5BJ,0BACED,KAAG,oBAAOjB,EAAMsB,QAAQ,WACtB,AAACb,GAEac,GAAAA,SAAU,EAACC,AADXf,EACgBgB,SAAS,EAAID,AAD7Bf,EACkCgB,SAAS,CAAC,CAAA,GAD5ChB,IAOjBT,EAAMsB,QAAQ,sCApBfI,GAAAA,IAAE,EACP,YACA1B,EAAMI,IAAI,EAAI,iBACdJ,EAAMG,UAAU,EAAI,2BAEF,CAAC,EAAEH,EAAME,KAAK,CAAC,CAAC,CAAC,mLAuB7C,CAIAP,CAAAA,EAAQgC,QAAQ,CAAG,KACjBC,GAAAA,eAAa,EACX,YACA,CACEC,MAAO,KAAK,EACZb,IAAK,KAAK,EACVd,MAAO,GACPC,WAAY,CAAA,EACZC,KAAM,CAAA,CACR,EACA,CAACR,EAAGkC,KACF,IAAMjC,EAAKiC,EAAIC,OAAO,CAChB/B,EAAQC,GAAAA,YAAU,EACtB,CACEqB,SAAU,IAAIzB,EAAGmC,UAAU,CAACC,MAAM,GAAG,AACvC,EACArC,GAMF,MAHAY,GAAAA,cAAY,EAAC,KACX0B,GAAAA,gBAAc,EAACrC,EAAI,CAAC,MAAM,CAC5B,yCAGwBsC,OAAK,6BACxBxC,EAAYK,GAGnB,EAEJ,QAEA,EAAeL"}
|
package/lib/marquee/style.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"style",{enumerable:!0,get:function(){return n}});const e=require("@moneko/css"),n=(0,e.css)`
|
|
2
|
-
.marquee {
|
|
2
|
+
.n-marquee {
|
|
3
3
|
--speed: 15s;
|
|
4
4
|
|
|
5
5
|
position: relative;
|
|
@@ -9,35 +9,42 @@
|
|
|
9
9
|
white-space: nowrap;
|
|
10
10
|
inline-size: 100%;
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
12
|
+
&.n-marquee-mask {
|
|
13
|
+
&::before,
|
|
14
|
+
&::after {
|
|
15
|
+
content: '';
|
|
16
|
+
position: absolute;
|
|
17
|
+
z-index: 1000;
|
|
18
|
+
inset-block-start: 0;
|
|
19
|
+
inset-inline-start: 0;
|
|
20
|
+
inline-size: 15rem;
|
|
21
|
+
max-inline-size: 25%;
|
|
22
|
+
block-size: 100%;
|
|
23
|
+
background-image: linear-gradient(to right, var(--component-bg), transparent);
|
|
24
|
+
pointer-events: none;
|
|
25
|
+
}
|
|
24
26
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
27
|
+
&::after {
|
|
28
|
+
inset-inline: auto 0;
|
|
29
|
+
background-image: linear-gradient(to left, var(--component-bg), transparent);
|
|
30
|
+
}
|
|
28
31
|
}
|
|
29
32
|
}
|
|
30
33
|
|
|
31
|
-
.item {
|
|
34
|
+
.n-marquee-item {
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
line-height: 1;
|
|
38
|
+
gap: 4px;
|
|
32
39
|
animation-duration: var(--speed);
|
|
33
40
|
animation-iteration-count: infinite;
|
|
34
41
|
animation-name: marquee-content;
|
|
35
42
|
animation-timing-function: linear;
|
|
36
|
-
padding:
|
|
43
|
+
padding: 0 24px;
|
|
37
44
|
}
|
|
38
45
|
|
|
39
|
-
.hover-pause {
|
|
40
|
-
&:hover .item {
|
|
46
|
+
.n-marquee-hover-pause {
|
|
47
|
+
&:hover .n-marquee-item {
|
|
41
48
|
animation-play-state: paused;
|
|
42
49
|
}
|
|
43
50
|
}
|
package/lib/marquee/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/marquee/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .marquee {\n --speed: 15s;\n\n position: relative;\n display: flex;\n overflow: hidden;\n margin: auto;\n white-space: nowrap;\n inline-size: 100%;\n\n &::before,\n
|
|
1
|
+
{"version":3,"sources":["components/marquee/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .n-marquee {\n --speed: 15s;\n\n position: relative;\n display: flex;\n overflow: hidden;\n margin: auto;\n white-space: nowrap;\n inline-size: 100%;\n\n &.n-marquee-mask {\n &::before,\n &::after {\n content: '';\n position: absolute;\n z-index: 1000;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 15rem;\n max-inline-size: 25%;\n block-size: 100%;\n background-image: linear-gradient(to right, var(--component-bg), transparent);\n pointer-events: none;\n }\n\n &::after {\n inset-inline: auto 0;\n background-image: linear-gradient(to left, var(--component-bg), transparent);\n }\n }\n }\n\n .n-marquee-item {\n display: flex;\n align-items: center;\n line-height: 1;\n gap: 4px;\n animation-duration: var(--speed);\n animation-iteration-count: infinite;\n animation-name: marquee-content;\n animation-timing-function: linear;\n padding: 0 24px;\n }\n\n .n-marquee-hover-pause {\n &:hover .n-marquee-item {\n animation-play-state: paused;\n }\n }\n\n @keyframes marquee-content {\n from {\n transform: translateX(0%);\n }\n\n to {\n transform: translateX(-100%);\n }\n }\n`;\n"],"names":["style","css"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DzB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "neko-ui",
|
|
3
|
-
"version": "2.13.
|
|
3
|
+
"version": "2.13.2",
|
|
4
4
|
"description": "WebComponents UI Libraries",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
]
|
|
16
16
|
},
|
|
17
17
|
"scripts": {
|
|
18
|
+
"pin": "mo pin",
|
|
18
19
|
"build": "mo build library solid",
|
|
19
20
|
"changelog": "mo changelog CHANGELOG.md && git add CHANGELOG.md",
|
|
20
21
|
"lint:commit": "pure-lint mode=commit && npm run changelog",
|
|
@@ -61,10 +62,10 @@
|
|
|
61
62
|
"ui libraries"
|
|
62
63
|
],
|
|
63
64
|
"devDependencies": {
|
|
64
|
-
"@moneko/core": "3.
|
|
65
|
+
"@moneko/core": "3.48.1",
|
|
65
66
|
"@moneko/solid": "1.11.1",
|
|
66
67
|
"@solidjs/testing-library": "0.8.10",
|
|
67
|
-
"@swc/jest": "0.2.
|
|
68
|
+
"@swc/jest": "0.2.39",
|
|
68
69
|
"@testing-library/jest-dom": "6.6.3",
|
|
69
70
|
"@types/jest": "29.5.14",
|
|
70
71
|
"@types/prismjs": "1.26.5",
|
package/umd/index.js
CHANGED
|
@@ -2850,7 +2850,7 @@
|
|
|
2850
2850
|
cursor: auto;
|
|
2851
2851
|
}
|
|
2852
2852
|
`;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)`
|
|
2853
|
-
.marquee {
|
|
2853
|
+
.n-marquee {
|
|
2854
2854
|
--speed: 15s;
|
|
2855
2855
|
|
|
2856
2856
|
position: relative;
|
|
@@ -2860,35 +2860,42 @@
|
|
|
2860
2860
|
white-space: nowrap;
|
|
2861
2861
|
inline-size: 100%;
|
|
2862
2862
|
|
|
2863
|
-
|
|
2864
|
-
|
|
2865
|
-
|
|
2866
|
-
|
|
2867
|
-
|
|
2868
|
-
|
|
2869
|
-
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
|
|
2874
|
-
|
|
2863
|
+
&.n-marquee-mask {
|
|
2864
|
+
&::before,
|
|
2865
|
+
&::after {
|
|
2866
|
+
content: '';
|
|
2867
|
+
position: absolute;
|
|
2868
|
+
z-index: 1000;
|
|
2869
|
+
inset-block-start: 0;
|
|
2870
|
+
inset-inline-start: 0;
|
|
2871
|
+
inline-size: 15rem;
|
|
2872
|
+
max-inline-size: 25%;
|
|
2873
|
+
block-size: 100%;
|
|
2874
|
+
background-image: linear-gradient(to right, var(--component-bg), transparent);
|
|
2875
|
+
pointer-events: none;
|
|
2876
|
+
}
|
|
2875
2877
|
|
|
2876
|
-
|
|
2877
|
-
|
|
2878
|
-
|
|
2878
|
+
&::after {
|
|
2879
|
+
inset-inline: auto 0;
|
|
2880
|
+
background-image: linear-gradient(to left, var(--component-bg), transparent);
|
|
2881
|
+
}
|
|
2879
2882
|
}
|
|
2880
2883
|
}
|
|
2881
2884
|
|
|
2882
|
-
.item {
|
|
2885
|
+
.n-marquee-item {
|
|
2886
|
+
display: flex;
|
|
2887
|
+
align-items: center;
|
|
2888
|
+
line-height: 1;
|
|
2889
|
+
gap: 4px;
|
|
2883
2890
|
animation-duration: var(--speed);
|
|
2884
2891
|
animation-iteration-count: infinite;
|
|
2885
2892
|
animation-name: marquee-content;
|
|
2886
2893
|
animation-timing-function: linear;
|
|
2887
|
-
padding:
|
|
2894
|
+
padding: 0 24px;
|
|
2888
2895
|
}
|
|
2889
2896
|
|
|
2890
|
-
.hover-pause {
|
|
2891
|
-
&:hover .item {
|
|
2897
|
+
.n-marquee-hover-pause {
|
|
2898
|
+
&:hover .n-marquee-item {
|
|
2892
2899
|
animation-play-state: paused;
|
|
2893
2900
|
}
|
|
2894
2901
|
}
|
|
@@ -2902,7 +2909,7 @@
|
|
|
2902
2909
|
transform: translateX(-100%);
|
|
2903
2910
|
}
|
|
2904
2911
|
}
|
|
2905
|
-
`,os=eP("<style> "),oc=eP("<style>"),ou=eP("<div>"),od=eP('<div class="item">'),op=e=>{let t;let{baseStyle:n}=ty,r=ev({speed:15,hoverPause:!0},e),[i,a]=F(2);return H(()=>{if(t){let e=t.querySelector(".item");a(Math.ceil(t.offsetWidth/e.offsetWidth)+1)}}),[(()=>{let e=os(),t=e.firstChild;return j(()=>t.data=n()),e})(),(()=>{let e=oc();return e.textContent=ol,e})(),ep(eC,{get when(){return r.css},get children(){let e=os(),t=e.firstChild;return j(()=>t.data=(0,e6.css)(r.css)),e}}),(()=>{let e=ou(),n=t;return"function"==typeof n?eV(n,e):t=e,eY(e,ep(ew,{get each(){return Array.from({length:i()})},children:()=>(()=>{let e=od();return eY(e,(()=>{let e=B(()=>!!Array.isArray(r.children));return()=>e()?ep(ew,{get each(){return r.children},children:e=>tX(e.cloneNode)?e.cloneNode(!0):e}):r.children})()),e})()})),j(t=>{let n=(0,e6.cx)("marquee",r.hoverPause&&"hover-pause"),i=`${r.speed}s`;return n!==t._v$&&eD(e,t._v$=n),i!==t._v$2&&(null!=(t._v$2=i)?e.style.setProperty("--speed",i):e.style.removeProperty("--speed")),t},{_v$:void 0,_v$2:void 0}),e})()]};op.registry=()=>{ti("n-marquee",{class:void 0,css:void 0,speed:15,hoverPause:!0},(e,t)=>{let n=t.element,r=ev({children:[...n.childNodes.values()]},e);return H(()=>{ta(n,["css"])}),[(()=>{let e=oc();return e.textContent=tm,e})(),ep(op,r)]})};let og=op,of=(0,e6.css)`
|
|
2912
|
+
`,os=eP("<style> "),oc=eP("<style>"),ou=eP("<div>"),od=eP('<div class="n-marquee-item">'),op=e=>{let t;let{baseStyle:n}=ty,r=ev({speed:15,hoverPause:!0,mask:!0},e),[i,a]=F(2);return H(()=>{if(t){let e=t.querySelector(".n-marquee-item");a(Math.ceil(t.offsetWidth/e.offsetWidth)+1)}}),[(()=>{let e=os(),t=e.firstChild;return j(()=>t.data=n()),e})(),(()=>{let e=oc();return e.textContent=ol,e})(),ep(eC,{get when(){return r.css},get children(){let e=os(),t=e.firstChild;return j(()=>t.data=(0,e6.css)(r.css)),e}}),(()=>{let e=ou(),n=t;return"function"==typeof n?eV(n,e):t=e,eY(e,ep(ew,{get each(){return Array.from({length:i()})},children:()=>(()=>{let e=od();return eY(e,(()=>{let e=B(()=>!!Array.isArray(r.children));return()=>e()?ep(ew,{get each(){return r.children},children:e=>tX(e.cloneNode)?e.cloneNode(!0):e}):r.children})()),e})()})),j(t=>{let n=(0,e6.cx)("n-marquee",r.mask&&"n-marquee-mask",r.hoverPause&&"n-marquee-hover-pause"),i=`${r.speed}s`;return n!==t._v$&&eD(e,t._v$=n),i!==t._v$2&&(null!=(t._v$2=i)?e.style.setProperty("--speed",i):e.style.removeProperty("--speed")),t},{_v$:void 0,_v$2:void 0}),e})()]};op.registry=()=>{ti("n-marquee",{class:void 0,css:void 0,speed:15,hoverPause:!0,mask:!0},(e,t)=>{let n=t.element,r=ev({children:[...n.childNodes.values()]},e);return H(()=>{ta(n,["css"])}),[(()=>{let e=oc();return e.textContent=tm,e})(),ep(op,r)]})};let og=op,of=(0,e6.css)`
|
|
2906
2913
|
:host,
|
|
2907
2914
|
:root {
|
|
2908
2915
|
--table-heading-bg: var(--border-color);
|
package/umd/manifest.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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.13.
|
|
1
|
+
{"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.13.2-a6cfb668245d43e7","hash":"a6cfb668245d43e7","content_assets":["index.js"]}
|