lyco 1.2.3 → 1.2.4

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.
Files changed (7) hide show
  1. package/dist/index.cjs.js +307 -298
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.es.js +352 -343
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/types/components/Style.d.ts +7 -0
  6. package/dist/types/components/core.d.ts +9 -1
  7. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``}function n(n,r){let i=r??(e=>e);if(n===void 0)return e``;if(Array.isArray(n))return n.map((e,n)=>i(t(e),n,!0,!1));if(typeof n!=`function`)return i(t(n),void 0,!1,!1);let a=n();return Array.isArray(a)?a.map((e,n)=>i(t(e),n,!0,!1)):i(t(a),void 0,!1,!0)}function r(e){let t=Math.random().toString(36).substring(2,15);return e?`lyco-${e}-${t}`:`lyco-${t}`}function i(e,n){let r=n??(e=>e),i=e=>r(t(e));return e?i(e):i}function a(e,t,r){let i=t??(e=>e),a=e=>i(n(e,r));return e?a(e):a}const o=e=>({init:!1,prefix:e,className:`___LYCO_NULL___`}),s={"GridBreakpoint::grid-breakpoint":o(`grid-breakpoint`),"Hidden::hidden-container":o(`hidden-container`),"ListGroup::list-group":o(`list-group`),"ScrollBar::scrollbar-container":o(`scrollbar-container`),"SkeletonLoader::skeleton-shimmer":o(`skeleton-shimmer`),"Swiper::swiper":o(`swiper`),"Table::table":o(`table`),"WaterFlow::waterflow":o(`waterflow`),"AutoFitGrid::auto-fit-grid":o(`auto-fit-grid`),"GridCol::grid-col":o(`grid-col`),"GridRow::grid-row":o(`grid-row`)};function c(e){let t=s[e];return t.init||(s[e].init=!0,s[e].className=r(t.prefix)),s[e].className===`___LYCO_NULL___`?r(t.prefix):s[e].className}function l(n,r){if(r===void 0){let t=t=>l(n,t??e``);return t.html=(t,...r)=>l(n,e(t,...r)),t}let i=n?.fadeBg??`rgba(0,0,0,0.7)`,a=n?.zIndex??2e3;return e`
1
+ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`function`?e():e:t``}function r(e,r){let i=r??(e=>e);if(e===void 0)return t``;if(Array.isArray(e))return e.map((e,t)=>i(n(e),t,!0,!1));if(typeof e!=`function`)return i(n(e),void 0,!1,!1);let a=e();return Array.isArray(a)?a.map((e,t)=>i(n(e),t,!0,!1)):i(n(a),void 0,!1,!0)}function i(e){let t=Math.random().toString(36).substring(2,15);return e?`lyco-${e}-${t}`:`lyco-${t}`}function a(e,t){let r=t??(e=>e),i=e=>r(n(e));return e?i(e):i}function o(e,t,n){let i=t??(e=>e),a=e=>i(r(e,n));return e?a(e):a}const s=e=>({init:!1,prefix:e,className:`___LYCO_NULL___`}),c={"GridBreakpoint::grid-breakpoint":s(`grid-breakpoint`),"Hidden::hidden-container":s(`hidden-container`),"ListGroup::list-group":s(`list-group`),"ScrollBar::scrollbar-container":s(`scrollbar-container`),"SkeletonLoader::skeleton-shimmer":s(`skeleton-shimmer`),"Swiper::swiper":s(`swiper`),"Table::table":s(`table`),"WaterFlow::waterflow":s(`waterflow`),"AutoFitGrid::auto-fit-grid":s(`auto-fit-grid`),"GridCol::grid-col":s(`grid-col`),"GridRow::grid-row":s(`grid-row`)};function l(e){let t=c[e];return t.init||(c[e].init=!0,c[e].className=i(t.prefix)),c[e].className===`___LYCO_NULL___`?i(t.prefix):c[e].className}const u={value:0};var d=class extends e{constructor(){super(),this.shadowRoot=this.attachShadow({mode:`closed`}),u.value++}render(){return t` <slot></slot> `}};customElements.define(`lyco-component`,d);function f(e,r){if(r===void 0){let n=n=>f(e,n??t``);return n.html=(n,...r)=>f(e,t(n,...r)),n}let i=e?.fadeBg??`rgba(0,0,0,0.7)`,a=e?.zIndex??2e3;return t`
2
2
  <div
3
3
  style="
4
4
  position: fixed;
@@ -10,109 +10,102 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
10
10
  align-items: center;
11
11
  "
12
12
  >
13
- ${t(r)}
13
+ ${n(r)}
14
14
  </div>
15
- `}function u(t,r){return r===void 0?n=>u(t,n??[e``]):e`
15
+ `}function p(e,n){return n===void 0?n=>p(e,n??[t``]):t`
16
16
  <div
17
17
  style="
18
18
  display: flex;
19
19
  flex-direction: column;
20
- ${t?.space?`gap: ${t.space};`:``}
20
+ ${e?.space?`gap: ${e.space};`:``}
21
21
  "
22
22
  >
23
- ${n(r)}
23
+ ${r(n)}
24
24
  </div>
25
- `}function d(n,r){if(r===void 0){let t=t=>d(n,t??e``);return t.html=(t,...r)=>d(n,e(t,...r)),t}let i=n?.direction??`row`;return e`
25
+ `}function m(e,r){if(r===void 0){let n=n=>m(e,n??t``);return n.html=(n,...r)=>m(e,t(n,...r)),n}let i=e?.direction??`row`;return t`
26
26
  <div
27
27
  style="
28
28
  display: flex;
29
29
  flex-direction: ${i};
30
- ${n?.justify?`justify-content: ${n.justify};`:``}
31
- ${n?.align?`align-items: ${n.align};`:``}
32
- ${n?.gap?`gap: ${n.gap};`:``}
30
+ ${e?.justify?`justify-content: ${e.justify};`:``}
31
+ ${e?.align?`align-items: ${e.align};`:``}
32
+ ${e?.gap?`gap: ${e.gap};`:``}
33
33
  "
34
34
  >
35
- ${t(r)}
35
+ ${n(r)}
36
36
  </div>
37
- `}function f(n){return e`
37
+ `}function h(e){return t`
38
38
  <div style="break-inside: avoid; margin-bottom: 16px;">
39
- ${t(n)}
39
+ ${n(e)}
40
40
  </div>
41
- `}function p(t,r){if(r===void 0)return n=>p(t,n??[e``]);let i=t?.columns??1;return e`
41
+ `}function g(e,n){if(n===void 0)return n=>g(e,n??[t``]);let i=e?.columns??1;return t`
42
42
  <div
43
43
  style="
44
44
  display: grid;
45
45
  grid-template-columns: repeat(${i}, 1fr);
46
- ${t?.gap?`gap: ${t.gap};`:``}
46
+ ${e?.gap?`gap: ${e.gap};`:``}
47
47
  "
48
48
  >
49
- ${n(r)}
49
+ ${r(n)}
50
50
  </div>
51
- `}function m(n,r){if(r===void 0){let t=t=>m(n,t??e``);return t.html=(t,...r)=>m(n,e(t,...r)),t}let i=c(`GridCol::grid-col`),a=n?.gap?`column-gap: ${n.gap};`:``,o=`
52
- .${i} {
51
+ `}function _(e,r){if(r===void 0){let n=n=>_(e,n??t``);return n.html=(n,...r)=>_(e,t(n,...r)),n}let i=u.value,a=l(`GridCol::grid-col`)+ +`-lyco-now-${i}`,o=e?.gap?`column-gap: ${e.gap};`:``,s=`
52
+ .${a} {
53
53
  display: grid;
54
54
  grid-auto-flow: column;
55
- ${a}
55
+ ${o}
56
56
  }
57
- `;return e`
58
- <style>
59
- ${o}
60
- </style>
61
- <div class="${i}">${t(r)}</div>
62
- `}function h(n,r){if(r===void 0){let t=t=>h(n,t??e``);return t.html=(t,...r)=>h(n,e(t,...r)),t}return e`
63
- <div style="${n?.span?`grid-column: span ${n.span};`:``}">
64
- ${t(r)}
57
+ `;return t`
58
+ <lyco-component name="GridCol">
59
+ <style>
60
+ ${s}
61
+ </style>
62
+ <div class="${a}">${n(r)}</div>
63
+ </lyco-component>
64
+ `}function v(e,r){if(r===void 0){let n=n=>v(e,n??t``);return n.html=(n,...r)=>v(e,t(n,...r)),n}return t`
65
+ <div style="${e?.span?`grid-column: span ${e.span};`:``}">
66
+ ${n(r)}
65
67
  </div>
66
- `}function g(n,r){if(r===void 0){let t=t=>g(n,t??e``);return t.html=(t,...r)=>g(n,e(t,...r)),t}let i=c(`GridRow::grid-row`),a=n?.gap?`row-gap: ${n.gap};`:``,o=`
67
- .${i} {
68
+ `}function y(e,r){if(r===void 0){let n=n=>y(e,n??t``);return n.html=(n,...r)=>y(e,t(n,...r)),n}let i=u.value,a=l(`GridRow::grid-row`)+`-lyco-now-${i}`,o=e?.gap?`row-gap: ${e.gap};`:``,s=`
69
+ .${a} {
68
70
  display: grid;
69
71
  grid-auto-flow: row;
70
- ${a}
72
+ ${o}
71
73
  }
72
- `;return e`
73
- <style>
74
- ${o}
75
- </style>
76
- <div class="${i}">${t(r)}</div>
77
- `}function _(t,r){return r===void 0?n=>_(t,n??[e``]):e`
74
+ `;return t`
75
+ <lyco-component name="GridRow">
76
+ <style>
77
+ ${s}
78
+ </style>
79
+ <div class="${a}">${n(r)}</div>
80
+ </lyco-component>
81
+ `}function b(e,n){return n===void 0?n=>b(e,n??[t``]):t`
78
82
  <div
79
83
  style="
80
84
  display: flex;
81
85
  flex-direction: row;
82
- ${t?.space?`gap: ${t.space};`:``}
86
+ ${e?.space?`gap: ${e.space};`:``}
83
87
  "
84
88
  >
85
- ${n(r)}
89
+ ${r(n)}
86
90
  </div>
87
- `}function v(n,r){if(r===void 0){let t=t=>v(n,t??e``);return t.html=(t,...r)=>v(n,e(t,...r)),t}let i=n?.columnCount??3,a=n?.gap??`16px`,o=c(`WaterFlow::waterflow`);return e`
88
- <style>
89
- /* 使用 CSS 类来控制多列布局 */
90
- .${o} {
91
- column-count: ${i};
92
- column-gap: ${typeof a==`number`?`${a}px`:a};
93
- }
94
- /* 子元素如果是块级元素，需要让它们适应多列流式布局 */
95
- .${o} > * {
96
- display: inline-block;
97
- width: 100%;
98
- }
99
- </style>
91
+ `}function x(e,r){if(r===void 0){let n=n=>x(e,n??t``);return n.html=(n,...r)=>x(e,t(n,...r)),n}let i=e?.columnCount??3,a=e?.gap??`16px`,o=u.value,s=l(`WaterFlow::waterflow`)+`-lyco-now-${o}`;return t`
92
+ <lyco-component name="WaterFlow">
93
+ <style>
94
+ /* 使用 CSS 类来控制多列布局 */
95
+ .${s} {
96
+ column-count: ${i};
97
+ column-gap: ${typeof a==`number`?`${a}px`:a};
98
+ }
99
+ /* 子元素如果是块级元素，需要让它们适应多列流式布局 */
100
+ .${s} > * {
101
+ display: inline-block;
102
+ width: 100%;
103
+ }
104
+ </style>
100
105
 
101
- <div class="${o}">${t(r)}</div>
102
- `}v().html`
103
- <div>
104
- <div>1</div>
105
- <div>2</div>
106
- <div>3</div>
107
- <div>4</div>
108
- <div>5</div>
109
- <div>6</div>
110
- <div>7</div>
111
- <div>8</div>
112
- <div>9</div>
113
- <div>10</div>
114
- </div>
115
- `;function y(n,r){if(r===void 0){let t=t=>y(n,t??e``);return t.html=(t,...r)=>y(n,e(t,...r)),t}let i=n?.gap??`0px`,a=n?.firstHeight??`50%`,o=e``,s=e``;if(typeof r==`function`){var c;let t=(c=r.call)?.call(r,null)??[];o=t[0]??e``,s=t[1]??e``}else o=t(r);return e`
106
+ <div class="${s}">${n(r)}</div>
107
+ </lyco-component>
108
+ `}function S(e,r){if(r===void 0){let n=n=>S(e,n??t``);return n.html=(n,...r)=>S(e,t(n,...r)),n}let i=e?.gap??`0px`,a=e?.firstHeight??`50%`,o=t``,s=t``;if(typeof r==`function`){var c;let e=(c=r.call)?.call(r,null)??[];o=e[0]??t``,s=e[1]??t``}else o=n(r);return t`
116
109
  <div
117
110
  style="
118
111
  display: flex;
@@ -125,7 +118,7 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
125
118
  <div style="flex: 0 0 ${a}; overflow: auto;">${o}</div>
126
119
  <div style="flex: 1 1 auto; overflow: auto;">${s}</div>
127
120
  </div>
128
- `}function b(n,r){if(r===void 0){let t=t=>b(n,t??e``);return t.html=(t,...r)=>b(n,e(t,...r)),t}let i=n?.gap??`0px`,a=n?.firstWidth??`50%`,o=e``,s=e``;if(typeof r==`function`){var c;let t=(c=r.call)?.call(r,null)??[];o=t[0]??e``,s=t[1]??e``}else o=t(r);return e`
121
+ `}function C(e,r){if(r===void 0){let n=n=>C(e,n??t``);return n.html=(n,...r)=>C(e,t(n,...r)),n}let i=e?.gap??`0px`,a=e?.firstWidth??`50%`,o=t``,s=t``;if(typeof r==`function`){var c;let e=(c=r.call)?.call(r,null)??[];o=e[0]??t``,s=e[1]??t``}else o=n(r);return t`
129
122
  <div
130
123
  style="
131
124
  display: flex;
@@ -138,28 +131,30 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
138
131
  <div style="flex: 0 0 ${a}; overflow: auto;">${o}</div>
139
132
  <div style="flex: 1 1 auto; overflow: auto;">${s}</div>
140
133
  </div>
141
- `}function x(n,r){if(r===void 0){let t=t=>x(n,t??e``);return t.html=(t,...r)=>x(n,e(t,...r)),t}let i=n?.direction??`vertical`,a=n?.height??`100%`,o=n?.width??`100%`,s=n?.customCss??``,l=n?.className??c(`ScrollBar::scrollbar-container`),u=i===`horizontal`?`overflow-x: auto; overflow-y: hidden`:`overflow-y: auto; overflow-x: hidden`;return e`
142
- <style>
143
- .${l} {
144
- ${u};
145
- width: ${o};
146
- height: ${a};
147
- }
148
- .${l}::-webkit-scrollbar {
149
- width: 8px;
150
- height: 8px;
151
- }
152
- .${l}::-webkit-scrollbar-thumb {
153
- background-color: rgba(0, 0, 0, 0.2);
154
- border-radius: 4px;
155
- }
156
- .${l}::-webkit-scrollbar-track {
157
- background: rgba(0, 0, 0, 0.05);
158
- }
159
- ${s}
160
- </style>
161
- <div class="${l}">${t(r)}</div>
162
- `}function S(t,r){if(r===void 0)return n=>S(t,n??[e``]);let i=t?.sidebarWidth??`240px`,a=t?.sidebarPosition??`left`,o=t?.gap??`0px`,s=e``,c=e``;if(typeof r==`function`){var l;let t=(l=r.call)?.call(r,null)??[];s=t[0]??e``,c=t[1]??e``}else c=n(r);return e`
134
+ `}function w(e,r){if(r===void 0){let n=n=>w(e,n??t``);return n.html=(n,...r)=>w(e,t(n,...r)),n}let i=e?.direction??`vertical`,a=e?.height??`100%`,o=e?.width??`100%`,s=e?.customCss??``,c=u.value,d=e?.className??l(`ScrollBar::scrollbar-container`)+`-lyco-now-${c}`,f=i===`horizontal`?`overflow-x: auto; overflow-y: hidden`:`overflow-y: auto; overflow-x: hidden`;return t`
135
+ <lyco-component name="ScrollBar">
136
+ <style>
137
+ .${d} {
138
+ ${f};
139
+ width: ${o};
140
+ height: ${a};
141
+ }
142
+ .${d}::-webkit-scrollbar {
143
+ width: 8px;
144
+ height: 8px;
145
+ }
146
+ .${d}::-webkit-scrollbar-thumb {
147
+ background-color: rgba(0, 0, 0, 0.2);
148
+ border-radius: 4px;
149
+ }
150
+ .${d}::-webkit-scrollbar-track {
151
+ background: rgba(0, 0, 0, 0.05);
152
+ }
153
+ ${s}
154
+ </style>
155
+ <div class="${d}">${n(r)}</div>
156
+ </lyco-component>
157
+ `}function T(e,n){if(n===void 0)return n=>T(e,n??[t``]);let i=e?.sidebarWidth??`240px`,a=e?.sidebarPosition??`left`,o=e?.gap??`0px`,s=t``,c=t``;if(typeof n==`function`){var l;let e=(l=n.call)?.call(n,null)??[];s=e[0]??t``,c=e[1]??t``}else c=r(n);return t`
163
158
  <div
164
159
  style="
165
160
  display: flex;
@@ -172,173 +167,175 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
172
167
  <div style="flex: 0 0 ${i}; overflow: auto;">${s}</div>
173
168
  <div style="flex: 1 1 auto; overflow: auto;">${c}</div>
174
169
  </div>
175
- `}function C(t={},n){if(n===void 0)return n=>C(t,n??[e``]);let{gap:r=`8px`,snapType:i=`mandatory`,height:a=`auto`,width:o=`100%`,className:s=c(`Swiper::swiper`),direction:l=`x`,scrollBehavior:u=`smooth`,align:d=`start`,showNavigation:f=!0,navigationPosition:p=`inside`,showPagination:m=!0,paginationType:h=`dots`,autoPlay:g=!1,interval:_=3e3,loop:v=!1,touchEnabled:y=!0,mouseWheel:b=!1,onSlideChange:x}=t,S=s,w=S+`-container`,T=S+`-slide`,E=S+`-navigation`,D=S+`-pagination`,O;O=n?typeof n==`function`?n():n:[];let k=O.length,[A,j]=(()=>{let e={value:0};return[()=>e.value,t=>{let n=Math.max(0,Math.min(t,k-1));e.value!==n&&(e.value=n,x?.(n))}]})(),M=e=>{let t=typeof document<`u`?document.querySelector(`.${w}`):null;if(!t)return;let n=t.querySelectorAll(`.${T}`);if(e<0||e>=n.length)return;let r=n[e],i=r.getBoundingClientRect(),a=t.getBoundingClientRect(),o;l===`x`?(o=r.offsetLeft-t.offsetLeft,d===`center`?o-=(a.width-i.width)/2:d===`end`&&(o-=a.width-i.width),t.scrollTo({left:o,behavior:u})):(o=r.offsetTop-t.offsetTop,d===`center`?o-=(a.height-i.height)/2:d===`end`&&(o-=a.height-i.height),t.scrollTo({top:o,behavior:u})),j(e)},N=()=>{let e=A()+1>=k?v?0:A():A()+1;M(e)},P=()=>{let e=A()-1<0?v?k-1:A():A()-1;M(e)},F=()=>{let e=typeof document<`u`?document.querySelector(`.${w}`):null;if(!e)return;let t=e.querySelectorAll(`.${T}`),n=0,r=1/0;t.forEach((t,i)=>{let a=t.getBoundingClientRect(),o=e.getBoundingClientRect(),s;if(l===`x`){let e=a.left+a.width/2-(o.left+o.width/2);s=Math.abs(e)}else{let e=a.top+a.height/2-(o.top+o.height/2);s=Math.abs(e)}s<r&&(r=s,n=i)}),j(n)},I=e=>{if(!y)return;let t=e.touches[0],n=e.currentTarget;n.dataset.touchStartX=t.clientX.toString(),n.dataset.touchStartY=t.clientY.toString()},L=e=>{if(!y)return;let t=e.touches[0],n=e.currentTarget,r=parseFloat(n.dataset.touchStartX||`0`),i=parseFloat(n.dataset.touchStartY||`0`),a=t.clientX-r,o=t.clientY-i;(Math.abs(a)>Math.abs(o)||l===`x`)&&e.preventDefault()},R=e=>{if(!y)return;let t=e.currentTarget,n=parseFloat(t.dataset.touchStartX||`0`),r=parseFloat(t.dataset.touchStartY||`0`);if(!n&&!r)return;let i=e.changedTouches[0],a=i.clientX-n,o=i.clientY-r,s=Math.max(Math.abs(a),Math.abs(o))>30;s&&(l===`x`?a>0?P():N():o>0?P():N()),delete t.dataset.touchStartX,delete t.dataset.touchStartY},z=e=>{b&&(e.preventDefault(),e.deltaY>0?N():P())},B=e=>{if(!g||!e)return;let t,n=()=>{t=setInterval(N,_)},r=()=>{clearInterval(t)};return e.addEventListener(`mouseenter`,r),e.addEventListener(`mouseleave`,n),n(),()=>{clearInterval(t),e.removeEventListener(`mouseenter`,r),e.removeEventListener(`mouseleave`,n)}},V=()=>{let e=typeof document<`u`?document.querySelector(`.${w}`):null;if(!e)return;let t=[];e.addEventListener(`scroll`,F),t.push(()=>e.removeEventListener(`scroll`,F)),y&&(e.addEventListener(`touchstart`,I),e.addEventListener(`touchmove`,L,{passive:!1}),e.addEventListener(`touchend`,R),t.push(()=>e.removeEventListener(`touchstart`,I)),t.push(()=>e.removeEventListener(`touchmove`,L)),t.push(()=>e.removeEventListener(`touchend`,R))),b&&(e.addEventListener(`wheel`,z,{passive:!1}),t.push(()=>e.removeEventListener(`wheel`,z)));let n=B(e);return n&&t.push(n),M(0),()=>t.forEach(e=>e())};typeof window<`u`&&typeof document<`u`&&setTimeout(V,0);let H=e`
176
- <div class="${D}">
177
- ${Array.from({length:k},(t,n)=>e`
170
+ `}function E(e={},n){if(n===void 0)return n=>E(e,n??[t``]);let r=u.value,{gap:i=`8px`,snapType:a=`mandatory`,height:o=`auto`,width:s=`100%`,className:c=l(`Swiper::swiper`)+`-lyco-now-${r}`,direction:d=`x`,scrollBehavior:f=`smooth`,align:p=`start`,showNavigation:m=!0,navigationPosition:h=`inside`,showPagination:g=!0,paginationType:_=`dots`,autoPlay:v=!1,interval:y=3e3,loop:b=!1,touchEnabled:x=!0,mouseWheel:S=!1,onSlideChange:C}=e,w=c,T=w+`-container`,D=w+`-slide`,O=w+`-navigation`,k=w+`-pagination`,A;A=n?typeof n==`function`?n():n:[];let j=A.length,[M,N]=(()=>{let e={value:0};return[()=>e.value,t=>{let n=Math.max(0,Math.min(t,j-1));e.value!==n&&(e.value=n,C?.(n))}]})(),P=e=>{let t=typeof document<`u`?document.querySelector(`.${T}`):null;if(!t)return;let n=t.querySelectorAll(`.${D}`);if(e<0||e>=n.length)return;let r=n[e],i=r.getBoundingClientRect(),a=t.getBoundingClientRect(),o;d===`x`?(o=r.offsetLeft-t.offsetLeft,p===`center`?o-=(a.width-i.width)/2:p===`end`&&(o-=a.width-i.width),t.scrollTo({left:o,behavior:f})):(o=r.offsetTop-t.offsetTop,p===`center`?o-=(a.height-i.height)/2:p===`end`&&(o-=a.height-i.height),t.scrollTo({top:o,behavior:f})),N(e)},F=()=>{let e=M()+1>=j?b?0:M():M()+1;P(e)},I=()=>{let e=M()-1<0?b?j-1:M():M()-1;P(e)},L=()=>{let e=typeof document<`u`?document.querySelector(`.${T}`):null;if(!e)return;let t=e.querySelectorAll(`.${D}`),n=0,r=1/0;t.forEach((t,i)=>{let a=t.getBoundingClientRect(),o=e.getBoundingClientRect(),s;if(d===`x`){let e=a.left+a.width/2-(o.left+o.width/2);s=Math.abs(e)}else{let e=a.top+a.height/2-(o.top+o.height/2);s=Math.abs(e)}s<r&&(r=s,n=i)}),N(n)},R=e=>{if(!x)return;let t=e.touches[0],n=e.currentTarget;n.dataset.touchStartX=t.clientX.toString(),n.dataset.touchStartY=t.clientY.toString()},z=e=>{if(!x)return;let t=e.touches[0],n=e.currentTarget,r=parseFloat(n.dataset.touchStartX||`0`),i=parseFloat(n.dataset.touchStartY||`0`),a=t.clientX-r,o=t.clientY-i;(Math.abs(a)>Math.abs(o)||d===`x`)&&e.preventDefault()},B=e=>{if(!x)return;let t=e.currentTarget,n=parseFloat(t.dataset.touchStartX||`0`),r=parseFloat(t.dataset.touchStartY||`0`);if(!n&&!r)return;let i=e.changedTouches[0],a=i.clientX-n,o=i.clientY-r,s=Math.max(Math.abs(a),Math.abs(o))>30;s&&(d===`x`?a>0?I():F():o>0?I():F()),delete t.dataset.touchStartX,delete t.dataset.touchStartY},V=e=>{S&&(e.preventDefault(),e.deltaY>0?F():I())},H=e=>{if(!v||!e)return;let t,n=()=>{t=setInterval(F,y)},r=()=>{clearInterval(t)};return e.addEventListener(`mouseenter`,r),e.addEventListener(`mouseleave`,n),n(),()=>{clearInterval(t),e.removeEventListener(`mouseenter`,r),e.removeEventListener(`mouseleave`,n)}},U=()=>{let e=typeof document<`u`?document.querySelector(`.${T}`):null;if(!e)return;let t=[];e.addEventListener(`scroll`,L),t.push(()=>e.removeEventListener(`scroll`,L)),x&&(e.addEventListener(`touchstart`,R),e.addEventListener(`touchmove`,z,{passive:!1}),e.addEventListener(`touchend`,B),t.push(()=>e.removeEventListener(`touchstart`,R)),t.push(()=>e.removeEventListener(`touchmove`,z)),t.push(()=>e.removeEventListener(`touchend`,B))),S&&(e.addEventListener(`wheel`,V,{passive:!1}),t.push(()=>e.removeEventListener(`wheel`,V)));let n=H(e);return n&&t.push(n),P(0),()=>t.forEach(e=>e())};typeof window<`u`&&typeof document<`u`&&setTimeout(U,0);let W=t`
171
+ <div class="${k}">
172
+ ${Array.from({length:j},(e,n)=>t`
178
173
  <button
179
- class="${n===A()?`active`:``}"
180
- @click=${()=>M(n)}
174
+ class="${n===M()?`active`:``}"
175
+ @click=${()=>P(n)}
181
176
  ></button>
182
177
  `)}
183
178
  </div>
184
- `,U=e`
185
- <div class="${D} fraction">
186
- <span class="current">${A()+1}</span>
179
+ `,G=t`
180
+ <div class="${k} fraction">
181
+ <span class="current">${M()+1}</span>
187
182
  <span class="separator">/</span>
188
- <span class="total">${k}</span>
183
+ <span class="total">${j}</span>
189
184
  </div>
190
- `,W=e`
191
- <div class="${D} progressbar">
185
+ `,K=t`
186
+ <div class="${k} progressbar">
192
187
  <div
193
188
  class="progress"
194
- style="width: ${k>1?A()/(k-1)*100:0}%"
189
+ style="width: ${j>1?M()/(j-1)*100:0}%"
195
190
  ></div>
196
191
  </div>
197
- `,G=e`
198
- <div class="${E}">
199
- <button class="prev" @click=${P}>◀</button>
200
- <button class="next" @click=${N}>▶</button>
192
+ `,q=t`
193
+ <div class="${O}">
194
+ <button class="prev" @click=${I}>◀</button>
195
+ <button class="next" @click=${F}>▶</button>
201
196
  </div>
202
- `;return e`
203
- <style>
204
- .${S} {
205
- position: relative;
206
- overflow: hidden;
207
- width: ${o};
208
- height: ${a};
209
- }
197
+ `;return t`
198
+ <lyco-component name="Swiper">
199
+ <style>
200
+ .${w} {
201
+ position: relative;
202
+ overflow: hidden;
203
+ width: ${s};
204
+ height: ${o};
205
+ }
210
206
 
211
- .${w} {
212
- width: 100%;
213
- height: 100%;
214
- overflow: auto;
215
- scroll-snap-type: ${l+` `+i};
216
- -webkit-overflow-scrolling: touch;
217
- scroll-behavior: ${u};
218
- gap: ${r};
219
- display: flex;
220
- flex-direction: ${l===`x`?`row`:`column`};
221
- }
207
+ .${T} {
208
+ width: 100%;
209
+ height: 100%;
210
+ overflow: auto;
211
+ scroll-snap-type: ${d+` `+a};
212
+ -webkit-overflow-scrolling: touch;
213
+ scroll-behavior: ${f};
214
+ gap: ${i};
215
+ display: flex;
216
+ flex-direction: ${d===`x`?`row`:`column`};
217
+ }
222
218
 
223
- .${T} {
224
- scroll-snap-align: ${d};
225
- flex-shrink: 0;
226
- }
219
+ .${D} {
220
+ scroll-snap-align: ${p};
221
+ flex-shrink: 0;
222
+ }
227
223
 
228
- .${E} {
229
- position: absolute;
230
- top: 50%;
231
- left: 0;
232
- right: 0;
233
- transform: translateY(-50%);
234
- display: flex;
235
- justify-content: space-between;
236
- pointer-events: none;
237
- padding: ${p===`outside`?`0 1rem`:`0 0.5rem`};
238
- }
224
+ .${O} {
225
+ position: absolute;
226
+ top: 50%;
227
+ left: 0;
228
+ right: 0;
229
+ transform: translateY(-50%);
230
+ display: flex;
231
+ justify-content: space-between;
232
+ pointer-events: none;
233
+ padding: ${h===`outside`?`0 1rem`:`0 0.5rem`};
234
+ }
239
235
 
240
- .${E} button {
241
- width: 2.5rem;
242
- height: 2.5rem;
243
- border-radius: 50%;
244
- background-color: rgba(0, 0, 0, 0.5);
245
- color: white;
246
- border: none;
247
- display: flex;
248
- align-items: center;
249
- justify-content: center;
250
- cursor: pointer;
251
- pointer-events: auto;
252
- transition: background-color 0.3s;
253
- }
236
+ .${O} button {
237
+ width: 2.5rem;
238
+ height: 2.5rem;
239
+ border-radius: 50%;
240
+ background-color: rgba(0, 0, 0, 0.5);
241
+ color: white;
242
+ border: none;
243
+ display: flex;
244
+ align-items: center;
245
+ justify-content: center;
246
+ cursor: pointer;
247
+ pointer-events: auto;
248
+ transition: background-color 0.3s;
249
+ }
254
250
 
255
- .${E} button:hover {
256
- background-color: rgba(0, 0, 0, 0.8);
257
- }
251
+ .${O} button:hover {
252
+ background-color: rgba(0, 0, 0, 0.8);
253
+ }
258
254
 
259
- .${D} {
260
- position: absolute;
261
- bottom: 1rem;
262
- left: 0;
263
- right: 0;
264
- display: flex;
265
- justify-content: center;
266
- gap: 0.5rem;
267
- align-items: center;
268
- }
269
- .${D} button {
270
- width: 0.75rem;
271
- height: 0.75rem;
272
- border-radius: 50%;
273
- background-color: rgba(255, 255, 255, 0.5);
274
- border: none;
275
- cursor: pointer;
276
- transition: background-color 0.3s, transform 0.3s;
277
- }
278
- .${D} button.active {
279
- background-color: white;
280
- transform: scale(1.2);
281
- }
255
+ .${k} {
256
+ position: absolute;
257
+ bottom: 1rem;
258
+ left: 0;
259
+ right: 0;
260
+ display: flex;
261
+ justify-content: center;
262
+ gap: 0.5rem;
263
+ align-items: center;
264
+ }
265
+ .${k} button {
266
+ width: 0.75rem;
267
+ height: 0.75rem;
268
+ border-radius: 50%;
269
+ background-color: rgba(255, 255, 255, 0.5);
270
+ border: none;
271
+ cursor: pointer;
272
+ transition: background-color 0.3s, transform 0.3s;
273
+ }
274
+ .${k} button.active {
275
+ background-color: white;
276
+ transform: scale(1.2);
277
+ }
282
278
 
283
- .${D}.fraction {
284
- position: absolute;
285
- bottom: 1rem;
286
- left: 50%;
287
- transform: translateX(-50%);
288
- color: white;
289
- font-size: 1rem;
290
- display: flex;
291
- align-items: center;
292
- gap: 0.25rem;
293
- }
279
+ .${k}.fraction {
280
+ position: absolute;
281
+ bottom: 1rem;
282
+ left: 50%;
283
+ transform: translateX(-50%);
284
+ color: white;
285
+ font-size: 1rem;
286
+ display: flex;
287
+ align-items: center;
288
+ gap: 0.25rem;
289
+ }
294
290
 
295
- .${D}.progressbar {
296
- position: absolute;
297
- bottom: 0.5rem;
298
- left: 0;
299
- right: 0;
300
- height: 0.25rem;
301
- background-color: rgba(255, 255, 255, 0.2);
302
- }
303
- .${D}.progressbar .progress {
304
- height: 100%;
305
- background-color: white;
306
- transition: width 0.3s;
307
- }
308
- </style>
291
+ .${k}.progressbar {
292
+ position: absolute;
293
+ bottom: 0.5rem;
294
+ left: 0;
295
+ right: 0;
296
+ height: 0.25rem;
297
+ background-color: rgba(255, 255, 255, 0.2);
298
+ }
299
+ .${k}.progressbar .progress {
300
+ height: 100%;
301
+ background-color: white;
302
+ transition: width 0.3s;
303
+ }
304
+ </style>
309
305
 
310
- <div class="${S}">
311
306
  <div class="${w}">
312
- ${O.map((t,n)=>e`
313
- <div class="${T} --slide-${n}" key=${n}>
314
- ${t}
315
- </div>
316
- `)}
317
- </div>
307
+ <div class="${T}">
308
+ ${A.map((e,n)=>t`
309
+ <div class="${D} --slide-${n}" key=${n}>
310
+ ${e}
311
+ </div>
312
+ `)}
313
+ </div>
318
314
 
319
- ${f?G:null}
320
- ${m&&h===`dots`?H:null}
321
- ${m&&h===`fraction`?U:null}
322
- ${m&&h===`progressbar`?W:null}
323
- </div>
324
- `}function w(n,r){let a=n?.top?`top: ${n.top};`:``,o=n?.right?`right: ${n.right};`:``,s=n?.bottom?`bottom: ${n.bottom};`:``,c=n?.left?`left: ${n.left};`:``,l=n?.width?`width: ${n.width};`:``,u=n?.height?`height: ${n.height};`:``,d=typeof n?.zIndex==`number`?`z-index: ${n.zIndex};`:``,f=n?.style?n.style:``,p=n?.className?n.className:``,m=n=>e`
315
+ ${m?q:null}
316
+ ${g&&_===`dots`?W:null}
317
+ ${g&&_===`fraction`?G:null}
318
+ ${g&&_===`progressbar`?K:null}
319
+ </div>
320
+ </lyco-component>
321
+ `}function D(e,r){let i=e?.top?`top: ${e.top};`:``,o=e?.right?`right: ${e.right};`:``,s=e?.bottom?`bottom: ${e.bottom};`:``,c=e?.left?`left: ${e.left};`:``,l=e?.width?`width: ${e.width};`:``,u=e?.height?`height: ${e.height};`:``,d=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``,f=e?.style?e.style:``,p=e?.className?e.className:``,m=e=>t`
325
322
  <div
326
323
  class="${p}"
327
324
  style="
328
325
  position: absolute;
329
- ${a} ${o} ${s} ${c}
326
+ ${i} ${o} ${s} ${c}
330
327
  ${l} ${u}
331
328
  ${d}
332
329
  ${f}
333
330
  "
334
331
  >
335
- ${t(n)}
332
+ ${n(e)}
336
333
  </div>
337
- `;return i(r,m)}function T(t,n){let r=t?.width??`300px`,i=t?.height??`auto`,o=t?.top??`20%`,s=t?.bottom??`auto`,c=t?.left??`50%`,l=t?.right??`auto`,u=c===`auto`?``:`transform: translateX(-50%);`,d=t?.background??`rgba(255, 255, 255, 0.3)`,f=t?.blur??`10px`,p=t?.borderRadius??`12px`,m=t?.padding??`16px`,h=t?.zIndex??1e3,g=t=>e`
334
+ `;return a(r,m)}function O(e,n){let r=e?.width??`300px`,i=e?.height??`auto`,a=e?.top??`20%`,s=e?.bottom??`auto`,c=e?.left??`50%`,l=e?.right??`auto`,u=c===`auto`?``:`transform: translateX(-50%);`,d=e?.background??`rgba(255, 255, 255, 0.3)`,f=e?.blur??`10px`,p=e?.borderRadius??`12px`,m=e?.padding??`16px`,h=e?.zIndex??1e3,g=e=>t`
338
335
  <div
339
336
  style="
340
337
  position: fixed;
341
- top: ${o};
338
+ top: ${a};
342
339
  bottom: ${s};
343
340
  left: ${c};
344
341
  right: ${l};
@@ -356,9 +353,9 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
356
353
  flex-direction: column;
357
354
  "
358
355
  >
359
- ${t}
356
+ ${e}
360
357
  </div>
361
- `;return a(n,void 0,g)}function E(t,r){if(r===void 0)return n=>E(t,n??[e``]);let i=`${100/t.ratio}%`,a=t.maxWidth?`max-width: ${t.maxWidth};`:``,o=t.background?`background: ${t.background};`:``,s=t.overflow??`hidden`;return e`
358
+ `;return o(n,void 0,g)}function k(e,n){if(n===void 0)return n=>k(e,n??[t``]);let i=`${100/e.ratio}%`,a=e.maxWidth?`max-width: ${e.maxWidth};`:``,o=e.background?`background: ${e.background};`:``,s=e.overflow??`hidden`;return t`
362
359
  <div
363
360
  style="
364
361
  position: relative;
@@ -378,21 +375,23 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
378
375
  height: 100%;
379
376
  "
380
377
  >
381
- ${n(r)}
378
+ ${r(n)}
382
379
  </div>
383
380
  </div>
384
- `}function D(n,r){if(r===void 0){let t=e=>D(n,e);return t.html=(t,...r)=>D(n,e(t,...r)),t}let i=c(`AutoFitGrid::auto-fit-grid`),a=n?.gap??`16px`,o=`
385
- .${i} {
381
+ `}function A(e,r){if(r===void 0){let n=t=>A(e,t);return n.html=(n,...r)=>A(e,t(n,...r)),n}let i=u.value,a=l(`AutoFitGrid::auto-fit-grid`)+`-lyco-now-${i}`,o=e?.gap??`16px`,s=`
382
+ .${a} {
386
383
  display: grid;
387
- grid-template-columns: repeat(auto-fit, minmax(${n.minItemWidth}, 1fr));
388
- gap: ${a};
384
+ grid-template-columns: repeat(auto-fit, minmax(${e.minItemWidth}, 1fr));
385
+ gap: ${o};
389
386
  }
390
- `;return e`
391
- <style>
392
- ${o}
393
- </style>
394
- <div class="${i}">${t(r)}</div>
395
- `}function O(t,r){if(r===void 0)return n=>O(t,n??[e``]);let i=t?.size??`32px`,a=t?.overlap??`-8px`,o=(t,n)=>e`
387
+ `;return t`
388
+ <lyco-component name="AutoFitGrid">
389
+ <style>
390
+ ${s}
391
+ </style>
392
+ <div class="${a}">${n(r)}</div>
393
+ </lyco-component>
394
+ `}function j(e,n){if(n===void 0)return n=>j(e,n??[t``]);let i=e?.size??`32px`,a=e?.overlap??`-8px`,o=(e,n)=>t`
396
395
  <div
397
396
  style="
398
397
  width: ${i};
@@ -404,15 +403,15 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
404
403
  box-sizing: content-box;
405
404
  "
406
405
  >
407
- ${t}
406
+ ${e}
408
407
  </div>
409
- `;return e`
408
+ `;return t`
410
409
  <div style="display: flex; align-items: center;">
411
- ${n(r,o)}
410
+ ${r(n,o)}
412
411
  </div>
413
- `}function k(n,r){if(r===void 0){let t=t=>k(n,t??e``);return t.html=(t,...r)=>k(n,e(t,...r)),t}let i=n?.position??`top-right`,a=n?.size??`16px`,o=n?.background??`red`,s=n?.color??`#fff`,[c,l,u,d]=[i.includes(`top`)?`0`:`auto`,i.includes(`right`)?`0`:`auto`,i.includes(`bottom`)?`0`:`auto`,i.includes(`left`)?`0`:`auto`];return e`
412
+ `}function M(e,r){if(r===void 0){let n=n=>M(e,n??t``);return n.html=(n,...r)=>M(e,t(n,...r)),n}let i=e?.position??`top-right`,a=e?.size??`16px`,o=e?.background??`red`,s=e?.color??`#fff`,[c,l,u,d]=[i.includes(`top`)?`0`:`auto`,i.includes(`right`)?`0`:`auto`,i.includes(`bottom`)?`0`:`auto`,i.includes(`left`)?`0`:`auto`];return t`
414
413
  <div style="position: relative; display: inline-block;">
415
- ${t(r)}
414
+ ${n(r)}
416
415
  <div
417
416
  style="
418
417
  position: absolute;
@@ -432,10 +431,10 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
432
431
  transform: translate(${d===`0`?`-50%`:`0`}, ${c===`0`?`-50%`:`0`});
433
432
  "
434
433
  >
435
- ${n?.content??``}
434
+ ${e?.content??``}
436
435
  </div>
437
436
  </div>
438
- `}function A(t,r){if(r===void 0)return n=>A(t,n??[e``]);let i=t?.padding??`16px`,a=t?.borderRadius??`8px`,o=t?.shadow??`0 2px 8px rgba(0,0,0,0.1)`,s=t?.background??`#fff`;return e`
437
+ `}function N(e,n){if(n===void 0)return n=>N(e,n??[t``]);let i=e?.padding??`16px`,a=e?.borderRadius??`8px`,o=e?.shadow??`0 2px 8px rgba(0,0,0,0.1)`,s=e?.background??`#fff`;return t`
439
438
  <div
440
439
  style="
441
440
  background: ${s};
@@ -445,9 +444,9 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
445
444
  box-sizing: border-box;
446
445
  "
447
446
  >
448
- ${n(r)}
447
+ ${r(n)}
449
448
  </div>
450
- `}function j(n,r){if(r===void 0){let t=t=>j(n,t??e``);return t.html=(t,...r)=>j(n,e(t,...r)),t}let i=n?.width?`width: ${n.width};`:``,a=n?.height?`height: ${n.height};`:``,o=n?.background?`background: ${n.background};`:``;return e`
449
+ `}function P(e,r){if(r===void 0){let n=n=>P(e,n??t``);return n.html=(n,...r)=>P(e,t(n,...r)),n}let i=e?.width?`width: ${e.width};`:``,a=e?.height?`height: ${e.height};`:``,o=e?.background?`background: ${e.background};`:``;return t`
451
450
  <div
452
451
  style="
453
452
  display: flex;
@@ -456,9 +455,9 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
456
455
  ${i} ${a} ${o}
457
456
  "
458
457
  >
459
- ${t(r)}
458
+ ${n(r)}
460
459
  </div>
461
- `}function M(t,r){if(r===void 0)return n=>M(t,n??[e``]);let i=t?.maxWidth??`1024px`,a=t?.padding??`0 16px`,o=t?.background?`background: ${t.background};`:``,s=t?.fullHeight?`height: 100%;`:``;return e`
460
+ `}function F(e,n){if(n===void 0)return n=>F(e,n??[t``]);let i=e?.maxWidth??`1024px`,a=e?.padding??`0 16px`,o=e?.background?`background: ${e.background};`:``,s=e?.fullHeight?`height: 100%;`:``;return t`
462
461
  <div
463
462
  style="
464
463
  width: 100%;
@@ -471,9 +470,9 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
471
470
  box-sizing: border-box;
472
471
  "
473
472
  >
474
- ${n(r)}
473
+ ${r(n)}
475
474
  </div>
476
- `}function N(t){let n=t?.orientation??`horizontal`,r=t?.thickness??`1px`,i=t?.color??`#e0e0e0`,a=t?.margin??(n===`horizontal`?`8px 0`:`0 8px`),o=n===`horizontal`?`width: 100%; height: ${r}; background: ${i}; margin: ${a};`:`width: ${r}; height: 100%; background: ${i}; margin: ${a};`;return e`<div style="${o}"></div>`}function P(n,r){if(r===void 0){let t=t=>P(n,t??e``);return t.html=(t,...r)=>P(n,e(t,...r)),t}let i=n?.columns??4,a=n?.gap??`24px`,o=n?.background??`#f8f8f8`,s=n?.padding??`40px 16px`;return e`
475
+ `}function I(e){let n=e?.orientation??`horizontal`,r=e?.thickness??`1px`,i=e?.color??`#e0e0e0`,a=e?.margin??(n===`horizontal`?`8px 0`:`0 8px`),o=n===`horizontal`?`width: 100%; height: ${r}; background: ${i}; margin: ${a};`:`width: ${r}; height: 100%; background: ${i}; margin: ${a};`;return t`<div style="${o}"></div>`}function L(e,r){if(r===void 0){let n=n=>L(e,n??t``);return n.html=(n,...r)=>L(e,t(n,...r)),n}let i=e?.columns??4,a=e?.gap??`24px`,o=e?.background??`#f8f8f8`,s=e?.padding??`40px 16px`;return t`
477
476
  <div
478
477
  style="
479
478
  width: 100%;
@@ -489,28 +488,30 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
489
488
  gap: ${a};
490
489
  "
491
490
  >
492
- ${t(r)}
491
+ ${n(r)}
493
492
  </div>
494
493
  <div style="text-align: center; margin-top: 24px; color: #666;">
495
494
  © ${new Date().getFullYear()} Your Company. All rights reserved.
496
495
  </div>
497
496
  </div>
498
- `}function F(n,r){if(r===void 0){let t=t=>F(n,t??e``);return t.html=(t,...r)=>F(n,e(t,...r)),t}let i=n.defaultColumns??1,a=n.gap??`16px`,o=n.className??c(`GridBreakpoint::grid-breakpoint`),s=Object.entries(n.breakpoints).map(([e,t])=>`
497
+ `}function R(e,r){if(r===void 0){let n=n=>R(e,n??t``);return n.html=(n,...r)=>R(e,t(n,...r)),n}let i=e.defaultColumns??1,a=e.gap??`16px`,o=u.value,s=e.className??l(`GridBreakpoint::grid-breakpoint`)+`-lyco-now-${o}`,c=Object.entries(e.breakpoints).map(([e,t])=>`
499
498
  @media ${e} {
500
- .${o} { grid-template-columns: repeat(${t}, 1fr); }
499
+ .${s} { grid-template-columns: repeat(${t}, 1fr); }
501
500
  }
502
501
  `).join(`
503
- `);return e`
504
- <style>
505
- .${o} {
506
- display: grid;
507
- grid-template-columns: repeat(${i}, 1fr);
508
- gap: ${a};
509
- }
510
- ${s}
511
- </style>
512
- <div class="${o}">${t(r)}</div>
513
- `}function I(t,r){if(r===void 0)return n=>I(t,n??[e``]);let i=t?.backgroundImage?`background-image: url('${t.backgroundImage}');`:``,a=t?.height??`400px`,o=t?.overlayColor??`rgba(0, 0, 0, 0.3)`;return e`
502
+ `);return t`
503
+ <lyco-component name="GridBreakpoint">
504
+ <style>
505
+ .${s} {
506
+ display: grid;
507
+ grid-template-columns: repeat(${i}, 1fr);
508
+ gap: ${a};
509
+ }
510
+ ${c}
511
+ </style>
512
+ <div class="${s}">${n(r)}</div>
513
+ </lyco-component>
514
+ `}function z(e,n){if(n===void 0)return n=>z(e,n??[t``]);let i=e?.backgroundImage?`background-image: url('${e.backgroundImage}');`:``,a=e?.height??`400px`,o=e?.overlayColor??`rgba(0, 0, 0, 0.3)`;return t`
514
515
  <div
515
516
  style="
516
517
  position: relative;
@@ -544,40 +545,44 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
544
545
  box-sizing: border-box;
545
546
  "
546
547
  >
547
- ${n(r)}
548
+ ${r(n)}
548
549
  </div>
549
550
  </div>
550
- `}function L(n,r){if(r===void 0){let t=t=>L(n,t??e``);return t.html=(t,...r)=>L(n,e(t,...r)),t}let i=n?.breakpoint??`(max-width: 600px)`,a=n?.mode??`hide`,o=n?.className??c(`Hidden::hidden-container`),s=a===`hide`?`@media ${i} { .${o} { display: none !important; } }`:`@media ${i} { .${o} { display: block !important; } }
551
- @media not ${i} { .${o} { display: none !important; } }`;return e`
552
- <style>
553
- .${o} {
554
- display: block;
555
- }
556
- ${s}
557
- </style>
558
- <div class="${o}">${t(r)}</div>
559
- `}function R(t,r){let i=t?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,o=t?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,s=t?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,l=t?.className??c(`ListGroup::list-group`),u=(t,n,r,i)=>r?e` <li>${t}</li> `:t,d=r=>e`
560
- <style>
561
- ul.${l} {
562
- list-style: none;
563
- margin: 0;
564
- padding: 0;
565
- ${i};
566
- }
567
- ul.${l} li {
568
- padding: 12px 16px;
569
- ${t?.bordered?`border-bottom: 1px solid #ddd`:``};
570
- }
571
- ul.${l} li:last-child {
572
- ${t?.bordered?`border-bottom: none`:``};
573
- }
574
- ${o}
575
- ${s}
576
- </style>
577
- <ul class="${l}">
578
- ${n(r,u)}
579
- </ul>
580
- `;return a(r,d)}function z(t,r){if(r===void 0)return n=>z(t,n??[e``]);let i=t?.background??`rgba(0, 0, 0, 0.5)`,a=t?.zIndex??1e3,o=t?.fullScreen!==!1;return e`
551
+ `}function B(e,r){if(r===void 0){let n=n=>B(e,n??t``);return n.html=(n,...r)=>B(e,t(n,...r)),n}let i=e?.breakpoint??`(max-width: 600px)`,a=e?.mode??`hide`,o=u.value,s=e?.className??l(`Hidden::hidden-container`)+`-lyco-now-${o}`,c=a===`hide`?`@media ${i} { .${s} { display: none !important; } }`:`@media ${i} { .${s} { display: block !important; } }
552
+ @media not ${i} { .${s} { display: none !important; } }`;return t`
553
+ <lyco-component name="Hidden">
554
+ <style>
555
+ .${s} {
556
+ display: block;
557
+ }
558
+ ${c}
559
+ </style>
560
+ <div class="${s}">${n(r)}</div>
561
+ </lyco-component>
562
+ `}function V(e,n){let i=e?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,a=e?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,s=e?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,c=u.value,d=e?.className??l(`ListGroup::list-group`)+`-lyco-now-${c}`,f=(e,n,r,i)=>r?t` <li>${e}</li> `:e,p=n=>t`
563
+ <lyco-component name="ListGroup">
564
+ <style>
565
+ ul.${d} {
566
+ list-style: none;
567
+ margin: 0;
568
+ padding: 0;
569
+ ${i};
570
+ }
571
+ ul.${d} li {
572
+ padding: 12px 16px;
573
+ ${e?.bordered?`border-bottom: 1px solid #ddd`:``};
574
+ }
575
+ ul.${d} li:last-child {
576
+ ${e?.bordered?`border-bottom: none`:``};
577
+ }
578
+ ${a}
579
+ ${s}
580
+ </style>
581
+ <ul class="${d}">
582
+ ${r(n,f)}
583
+ </ul>
584
+ </lyco-component>
585
+ `;return o(n,p)}function H(e,n){if(n===void 0)return n=>H(e,n??[t``]);let i=e?.background??`rgba(0, 0, 0, 0.5)`,a=e?.zIndex??1e3,o=e?.fullScreen!==!1;return t`
581
586
  <div
582
587
  style="
583
588
  position: ${o?`fixed`:`absolute`};
@@ -589,9 +594,9 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
589
594
  align-items: center;
590
595
  "
591
596
  >
592
- ${n(r)}
597
+ ${r(n)}
593
598
  </div>
594
- `}function B(n,r){if(r===void 0){let t=t=>B(n,t??e``);return t.html=(t,...r)=>B(n,e(t,...r)),t}let i=n?.width?`width: ${n.width};`:``,a=n?.height?`height: ${n.height};`:``,o=n?.background?`background: ${n.background};`:``;return e`
599
+ `}function U(e,r){if(r===void 0){let n=n=>U(e,n??t``);return n.html=(n,...r)=>U(e,t(n,...r)),n}let i=e?.width?`width: ${e.width};`:``,a=e?.height?`height: ${e.height};`:``,o=e?.background?`background: ${e.background};`:``;return t`
595
600
  <div
596
601
  style="
597
602
  position: relative;
@@ -599,25 +604,27 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
599
604
  overflow: hidden;
600
605
  "
601
606
  >
602
- ${t(r)}
607
+ ${n(r)}
603
608
  </div>
604
- `}function V(t){let n=t?.width?`width: ${t.width};`:``,r=t?.height?`height: ${t.height};`:``;return e` <div style="${n} ${r}"></div> `}function H(t){let n=t?.type??`rect`,r=t?.width??`100%`,i=t?.height??`16px`,a=t?.borderRadius??`4px`,o=t?.animation!==!1,s=t?.className??c(`SkeletonLoader::skeleton-shimmer`),l=n===`circle`?`border-radius: 50%; width: ${r}; height: ${r}`:`border-radius: ${a}; width: ${r}; height: ${i}`;return e`
605
- <style>
606
- ${`
607
- @keyframes ${s+`-shimmer`} {
609
+ `}function W(e){let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``;return t` <div style="${n} ${r}"></div> `}function G(e){let n=e?.type??`rect`,r=e?.width??`100%`,i=e?.height??`16px`,a=e?.borderRadius??`4px`,o=e?.animation!==!1,s=u.value,c=e?.className??l(`SkeletonLoader::skeleton-shimmer`)+`-lyco-now-${s}`,d=n===`circle`?`border-radius: 50%; width: ${r}; height: ${r}`:`border-radius: ${a}; width: ${r}; height: ${i}`;return t`
610
+ <lyco-component>
611
+ <style>
612
+ ${`
613
+ @keyframes ${c+`-shimmer`} {
608
614
  0% { background-color: #eee; }
609
615
  50% { background-color: #ddd; }
610
616
  100% { background-color: #eee; }
611
617
  }
612
618
  `}
613
- .${s} {
614
- ${l};
615
- background-color: #eee;
616
- ${o?`animation: ${s+`-shimmer`} 1.2s infinite ease-in-out`:``};
617
- }
618
- </style>
619
- <div class="${s}"></div>
620
- `}function U(){return e`<div style="flex: 1 1 auto;"></div>`}function W(n,r){if(r===void 0){let t=t=>W(n,t??e``);return t.html=(t,...r)=>W(n,e(t,...r)),t}let i=n?.top?`top: ${n.top};`:``,a=n?.bottom?`bottom: ${n.bottom};`:``,o=typeof n?.zIndex==`number`?`z-index: ${n.zIndex};`:``;return e`
619
+ .${c} {
620
+ ${d};
621
+ background-color: #eee;
622
+ ${o?`animation: ${c+`-shimmer`} 1.2s infinite ease-in-out`:``};
623
+ }
624
+ </style>
625
+ <div class="${c}"></div>
626
+ </lyco-component>
627
+ `}function K(){return t`<div style="flex: 1 1 auto;"></div>`}function q(e,r){if(r===void 0){let n=n=>q(e,n??t``);return n.html=(n,...r)=>q(e,t(n,...r)),n}let i=e?.top?`top: ${e.top};`:``,a=e?.bottom?`bottom: ${e.bottom};`:``,o=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``;return t`
621
628
  <div
622
629
  style="
623
630
  position: sticky;
@@ -625,50 +632,52 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
625
632
  ${o}
626
633
  "
627
634
  >
628
- ${t(r)}
635
+ ${n(r)}
629
636
  </div>
630
- `}function G(n,r){if(r===void 0){let t=t=>G(n,t??e``);return t.html=(t,...r)=>G(n,e(t,...r)),t}let i=n?.className??c(`Table::table`),a=n?.striped?`
631
- .${i} tr:nth-child(even) { background: #f9f9f9; }
632
- `:``,o=n?.hover?`
633
- .${i} tr:hover { background: #f1f1f1; }
634
- `:``,s=n?.bordered?`
635
- .${i}, .${i} th, .${i} td { border: 1px solid #ddd; }
636
- `:``;return e`
637
- <style>
638
- /* 将表格包裹在带有 _className 的 div 里，使后续 CSS 作用于该 div 下的 table */
639
- .${i} table {
640
- width: 100%;
641
- border-collapse: collapse;
642
- }
643
- .${i} th,
644
- .${i} td {
645
- padding: 8px 12px;
646
- text-align: left;
647
- }
648
- ${a}
649
- ${o}
650
- ${s}
651
- </style>
637
+ `}function J(e,r){if(r===void 0){let n=n=>J(e,n??t``);return n.html=(n,...r)=>J(e,t(n,...r)),n}let i=u.value,a=e?.className??l(`Table::table`)+`-lyco-now-${i}`,o=e?.striped?`
638
+ .${a} tr:nth-child(even) { background: #f9f9f9; }
639
+ `:``,s=e?.hover?`
640
+ .${a} tr:hover { background: #f1f1f1; }
641
+ `:``,c=e?.bordered?`
642
+ .${a}, .${a} th, .${a} td { border: 1px solid #ddd; }
643
+ `:``;return t`
644
+ <lyco-component name="Table">
645
+ <style>
646
+ /* 将表格包裹在带有 _className 的 div 里，使后续 CSS 作用于该 div 下的 table */
647
+ .${a} table {
648
+ width: 100%;
649
+ border-collapse: collapse;
650
+ }
651
+ .${a} th,
652
+ .${a} td {
653
+ padding: 8px 12px;
654
+ text-align: left;
655
+ }
656
+ ${o}
657
+ ${s}
658
+ ${c}
659
+ </style>
652
660
 
653
- <div class="${i}">
654
- <table>
655
- ${t(r)}
656
- </table>
657
- </div>
658
- `}function K(t,r){let i=t?.direction??`row`;return r===void 0?n=>K(t,n??e``):e`
661
+ <div class="${a}">
662
+ <table>
663
+ ${n(r)}
664
+ </table>
665
+ </div>
666
+ </lyco-component>
667
+ `}function Y(e,n){let i=e?.direction??`row`;return n===void 0?n=>Y(e,n??t``):t`
659
668
  <div
660
669
  style="
661
670
  display: flex;
662
671
  flex-direction: ${i};
663
672
  flex-wrap: wrap;
664
- ${t?.gap?`gap: ${t.gap};`:``}
665
- ${t?.align?`align-items: ${t.align};`:``}
666
- ${t?.justify?`justify-content: ${t.justify};`:``}
673
+ ${e?.gap?`gap: ${e.gap};`:``}
674
+ ${e?.align?`align-items: ${e.align};`:``}
675
+ ${e?.justify?`justify-content: ${e.justify};`:``}
667
676
  "
668
677
  >
669
- ${n(r)}
678
+ ${r(n)}
670
679
  </div>
671
- `}function q(t,r){let i=t?.width?`width: ${t.width};`:``,a=t?.height?`height: ${t.height};`:``,o=t?.background?`background: ${t.background};`:``;if(r===void 0)return n=>q(t,n??[e``]);let s=`flex-start`,c=`flex-start`;switch(t?.align){case`top-right`:s=`flex-end`,c=`flex-start`;break;case`center`:s=`center`,c=`center`;break;case`bottom-left`:s=`flex-start`,c=`flex-end`;break;case`bottom-right`:s=`flex-end`,c=`flex-end`;break;default:s=`flex-start`,c=`flex-start`}return e`
680
+ `}function X(e,n){let i=e?.width?`width: ${e.width};`:``,a=e?.height?`height: ${e.height};`:``,o=e?.background?`background: ${e.background};`:``;if(n===void 0)return n=>X(e,n??[t``]);let s=`flex-start`,c=`flex-start`;switch(e?.align){case`top-right`:s=`flex-end`,c=`flex-start`;break;case`center`:s=`center`,c=`center`;break;case`bottom-left`:s=`flex-start`,c=`flex-end`;break;case`bottom-right`:s=`flex-end`,c=`flex-end`;break;default:s=`flex-start`,c=`flex-start`}return t`
672
681
  <div
673
682
  style="
674
683
  position: relative;
@@ -678,7 +687,7 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
678
687
  ${i} ${a} ${o}
679
688
  "
680
689
  >
681
- ${n(r)}
690
+ ${r(n)}
682
691
  </div>
683
- `}export{w as AbsoluteBox,T as AcrylicBar,E as AspectRatio,D as AutoFitGrid,O as AvatarStack,k as Badge,A as Card,j as Center,u as Column,y as ColumnSplit,M as Container,N as Divider,d as Flex,f as FlowItem,P as FooterLayout,p as Grid,F as GridBreakpoint,m as GridCol,h as GridItem,g as GridRow,I as HeroSection,L as Hidden,l as LightboxContainer,R as ListGroup,z as Overlay,B as PositionContainer,_ as Row,b as RowSplit,x as ScrollBar,S as SideBarContainer,V as SizedBox,H as SkeletonLoader,U as Spacer,W as Sticky,C as Swiper,G as Table,v as WaterFlow,K as Wrap,q as ZStack};
692
+ `}export{D as AbsoluteBox,O as AcrylicBar,k as AspectRatio,A as AutoFitGrid,j as AvatarStack,M as Badge,N as Card,P as Center,p as Column,S as ColumnSplit,F as Container,I as Divider,m as Flex,h as FlowItem,L as FooterLayout,g as Grid,R as GridBreakpoint,_ as GridCol,v as GridItem,y as GridRow,z as HeroSection,B as Hidden,f as LightboxContainer,V as ListGroup,H as Overlay,U as PositionContainer,b as Row,C as RowSplit,w as ScrollBar,T as SideBarContainer,W as SizedBox,G as SkeletonLoader,K as Spacer,q as Sticky,E as Swiper,J as Table,x as WaterFlow,Y as Wrap,X as ZStack};
684
693
  //# sourceMappingURL=index.es.js.map