lyco 1.2.2 → 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.
- package/dist/index.cjs.js +321 -309
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js +357 -345
- package/dist/index.es.js.map +1 -1
- package/dist/types/components/Style.d.ts +7 -0
- package/dist/types/components/core.d.ts +68 -1
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{html as
|
|
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,107 +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
|
-
${
|
|
13
|
+
${n(r)}
|
|
14
14
|
</div>
|
|
15
|
-
`}function
|
|
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
|
-
${
|
|
20
|
+
${e?.space?`gap: ${e.space};`:``}
|
|
21
21
|
"
|
|
22
22
|
>
|
|
23
|
-
${n
|
|
23
|
+
${r(n)}
|
|
24
24
|
</div>
|
|
25
|
-
`}function
|
|
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
|
-
${
|
|
31
|
-
${
|
|
32
|
-
${
|
|
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
|
-
${
|
|
35
|
+
${n(r)}
|
|
36
36
|
</div>
|
|
37
|
-
`}function
|
|
37
|
+
`}function h(e){return t`
|
|
38
38
|
<div style="break-inside: avoid; margin-bottom: 16px;">
|
|
39
|
-
${
|
|
39
|
+
${n(e)}
|
|
40
40
|
</div>
|
|
41
|
-
`}function
|
|
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
|
-
${
|
|
46
|
+
${e?.gap?`gap: ${e.gap};`:``}
|
|
47
47
|
"
|
|
48
48
|
>
|
|
49
|
-
${n
|
|
49
|
+
${r(n)}
|
|
50
50
|
</div>
|
|
51
|
-
`}function
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
>
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
style="
|
|
68
|
-
display: grid;
|
|
69
|
-
grid-auto-flow: row;
|
|
70
|
-
${n?.gap?`row-gap: ${n.gap};`:``}
|
|
71
|
-
"
|
|
72
|
-
>
|
|
73
|
-
${t(r)}
|
|
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
|
+
display: grid;
|
|
54
|
+
grid-auto-flow: column;
|
|
55
|
+
${o}
|
|
56
|
+
}
|
|
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)}
|
|
74
67
|
</div>
|
|
75
|
-
`}function
|
|
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} {
|
|
70
|
+
display: grid;
|
|
71
|
+
grid-auto-flow: row;
|
|
72
|
+
${o}
|
|
73
|
+
}
|
|
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`
|
|
76
82
|
<div
|
|
77
83
|
style="
|
|
78
84
|
display: flex;
|
|
79
85
|
flex-direction: row;
|
|
80
|
-
${
|
|
86
|
+
${e?.space?`gap: ${e.space};`:``}
|
|
81
87
|
"
|
|
82
88
|
>
|
|
83
|
-
${n
|
|
84
|
-
</div>
|
|
85
|
-
`}function
|
|
86
|
-
<
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
89
|
+
${r(n)}
|
|
90
|
+
</div>
|
|
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>
|
|
98
105
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
<div>1</div>
|
|
103
|
-
<div>2</div>
|
|
104
|
-
<div>3</div>
|
|
105
|
-
<div>4</div>
|
|
106
|
-
<div>5</div>
|
|
107
|
-
<div>6</div>
|
|
108
|
-
<div>7</div>
|
|
109
|
-
<div>8</div>
|
|
110
|
-
<div>9</div>
|
|
111
|
-
<div>10</div>
|
|
112
|
-
</div>
|
|
113
|
-
`;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?.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`
|
|
114
109
|
<div
|
|
115
110
|
style="
|
|
116
111
|
display: flex;
|
|
@@ -123,7 +118,7 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
|
|
|
123
118
|
<div style="flex: 0 0 ${a}; overflow: auto;">${o}</div>
|
|
124
119
|
<div style="flex: 1 1 auto; overflow: auto;">${s}</div>
|
|
125
120
|
</div>
|
|
126
|
-
`}function
|
|
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`
|
|
127
122
|
<div
|
|
128
123
|
style="
|
|
129
124
|
display: flex;
|
|
@@ -136,28 +131,30 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
|
|
|
136
131
|
<div style="flex: 0 0 ${a}; overflow: auto;">${o}</div>
|
|
137
132
|
<div style="flex: 1 1 auto; overflow: auto;">${s}</div>
|
|
138
133
|
</div>
|
|
139
|
-
`}function
|
|
140
|
-
<
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
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`
|
|
161
158
|
<div
|
|
162
159
|
style="
|
|
163
160
|
display: flex;
|
|
@@ -170,173 +167,175 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
|
|
|
170
167
|
<div style="flex: 0 0 ${i}; overflow: auto;">${s}</div>
|
|
171
168
|
<div style="flex: 1 1 auto; overflow: auto;">${c}</div>
|
|
172
169
|
</div>
|
|
173
|
-
`}function
|
|
174
|
-
<div class="${
|
|
175
|
-
${Array.from({length:
|
|
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`
|
|
176
173
|
<button
|
|
177
|
-
class="${n===
|
|
178
|
-
@click=${()=>
|
|
174
|
+
class="${n===M()?`active`:``}"
|
|
175
|
+
@click=${()=>P(n)}
|
|
179
176
|
></button>
|
|
180
177
|
`)}
|
|
181
178
|
</div>
|
|
182
|
-
`,
|
|
183
|
-
<div class="${
|
|
184
|
-
<span class="current">${
|
|
179
|
+
`,G=t`
|
|
180
|
+
<div class="${k} fraction">
|
|
181
|
+
<span class="current">${M()+1}</span>
|
|
185
182
|
<span class="separator">/</span>
|
|
186
|
-
<span class="total">${
|
|
183
|
+
<span class="total">${j}</span>
|
|
187
184
|
</div>
|
|
188
|
-
`,
|
|
189
|
-
<div class="${
|
|
185
|
+
`,K=t`
|
|
186
|
+
<div class="${k} progressbar">
|
|
190
187
|
<div
|
|
191
188
|
class="progress"
|
|
192
|
-
style="width: ${
|
|
189
|
+
style="width: ${j>1?M()/(j-1)*100:0}%"
|
|
193
190
|
></div>
|
|
194
191
|
</div>
|
|
195
|
-
`,
|
|
196
|
-
<div class="${
|
|
197
|
-
<button class="prev" @click=${
|
|
198
|
-
<button class="next" @click=${
|
|
199
|
-
</div>
|
|
200
|
-
`;return
|
|
201
|
-
<
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
192
|
+
`,q=t`
|
|
193
|
+
<div class="${O}">
|
|
194
|
+
<button class="prev" @click=${I}>◀</button>
|
|
195
|
+
<button class="next" @click=${F}>▶</button>
|
|
196
|
+
</div>
|
|
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
|
+
}
|
|
208
206
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
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
|
+
}
|
|
220
218
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
219
|
+
.${D} {
|
|
220
|
+
scroll-snap-align: ${p};
|
|
221
|
+
flex-shrink: 0;
|
|
222
|
+
}
|
|
225
223
|
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
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
|
+
}
|
|
237
235
|
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
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
|
+
}
|
|
252
250
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
251
|
+
.${O} button:hover {
|
|
252
|
+
background-color: rgba(0, 0, 0, 0.8);
|
|
253
|
+
}
|
|
256
254
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
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
|
+
}
|
|
280
278
|
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
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
|
+
}
|
|
292
290
|
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
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>
|
|
307
305
|
|
|
308
|
-
<div class="${C}">
|
|
309
306
|
<div class="${w}">
|
|
310
|
-
${
|
|
311
|
-
|
|
312
|
-
${
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
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>
|
|
316
314
|
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
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`
|
|
323
322
|
<div
|
|
324
323
|
class="${p}"
|
|
325
324
|
style="
|
|
326
325
|
position: absolute;
|
|
327
|
-
${
|
|
326
|
+
${i} ${o} ${s} ${c}
|
|
328
327
|
${l} ${u}
|
|
329
328
|
${d}
|
|
330
329
|
${f}
|
|
331
330
|
"
|
|
332
331
|
>
|
|
333
|
-
${
|
|
332
|
+
${n(e)}
|
|
334
333
|
</div>
|
|
335
|
-
`;return
|
|
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`
|
|
336
335
|
<div
|
|
337
336
|
style="
|
|
338
337
|
position: fixed;
|
|
339
|
-
top: ${
|
|
338
|
+
top: ${a};
|
|
340
339
|
bottom: ${s};
|
|
341
340
|
left: ${c};
|
|
342
341
|
right: ${l};
|
|
@@ -354,9 +353,9 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
|
|
|
354
353
|
flex-direction: column;
|
|
355
354
|
"
|
|
356
355
|
>
|
|
357
|
-
${
|
|
356
|
+
${e}
|
|
358
357
|
</div>
|
|
359
|
-
`;return
|
|
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`
|
|
360
359
|
<div
|
|
361
360
|
style="
|
|
362
361
|
position: relative;
|
|
@@ -376,20 +375,23 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
|
|
|
376
375
|
height: 100%;
|
|
377
376
|
"
|
|
378
377
|
>
|
|
379
|
-
${n
|
|
378
|
+
${r(n)}
|
|
380
379
|
</div>
|
|
381
380
|
</div>
|
|
382
|
-
`}function
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
>
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
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} {
|
|
383
|
+
display: grid;
|
|
384
|
+
grid-template-columns: repeat(auto-fit, minmax(${e.minItemWidth}, 1fr));
|
|
385
|
+
gap: ${o};
|
|
386
|
+
}
|
|
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`
|
|
393
395
|
<div
|
|
394
396
|
style="
|
|
395
397
|
width: ${i};
|
|
@@ -401,15 +403,15 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
|
|
|
401
403
|
box-sizing: content-box;
|
|
402
404
|
"
|
|
403
405
|
>
|
|
404
|
-
${
|
|
406
|
+
${e}
|
|
405
407
|
</div>
|
|
406
|
-
`;return
|
|
408
|
+
`;return t`
|
|
407
409
|
<div style="display: flex; align-items: center;">
|
|
408
|
-
${n
|
|
410
|
+
${r(n,o)}
|
|
409
411
|
</div>
|
|
410
|
-
`}function
|
|
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`
|
|
411
413
|
<div style="position: relative; display: inline-block;">
|
|
412
|
-
${
|
|
414
|
+
${n(r)}
|
|
413
415
|
<div
|
|
414
416
|
style="
|
|
415
417
|
position: absolute;
|
|
@@ -429,10 +431,10 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
|
|
|
429
431
|
transform: translate(${d===`0`?`-50%`:`0`}, ${c===`0`?`-50%`:`0`});
|
|
430
432
|
"
|
|
431
433
|
>
|
|
432
|
-
${
|
|
434
|
+
${e?.content??``}
|
|
433
435
|
</div>
|
|
434
436
|
</div>
|
|
435
|
-
`}function
|
|
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`
|
|
436
438
|
<div
|
|
437
439
|
style="
|
|
438
440
|
background: ${s};
|
|
@@ -442,9 +444,9 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
|
|
|
442
444
|
box-sizing: border-box;
|
|
443
445
|
"
|
|
444
446
|
>
|
|
445
|
-
${n
|
|
447
|
+
${r(n)}
|
|
446
448
|
</div>
|
|
447
|
-
`}function
|
|
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`
|
|
448
450
|
<div
|
|
449
451
|
style="
|
|
450
452
|
display: flex;
|
|
@@ -453,9 +455,9 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
|
|
|
453
455
|
${i} ${a} ${o}
|
|
454
456
|
"
|
|
455
457
|
>
|
|
456
|
-
${
|
|
458
|
+
${n(r)}
|
|
457
459
|
</div>
|
|
458
|
-
`}function
|
|
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`
|
|
459
461
|
<div
|
|
460
462
|
style="
|
|
461
463
|
width: 100%;
|
|
@@ -468,9 +470,9 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
|
|
|
468
470
|
box-sizing: border-box;
|
|
469
471
|
"
|
|
470
472
|
>
|
|
471
|
-
${n
|
|
473
|
+
${r(n)}
|
|
472
474
|
</div>
|
|
473
|
-
`}function
|
|
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`
|
|
474
476
|
<div
|
|
475
477
|
style="
|
|
476
478
|
width: 100%;
|
|
@@ -486,28 +488,30 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
|
|
|
486
488
|
gap: ${a};
|
|
487
489
|
"
|
|
488
490
|
>
|
|
489
|
-
${
|
|
491
|
+
${n(r)}
|
|
490
492
|
</div>
|
|
491
493
|
<div style="text-align: center; margin-top: 24px; color: #666;">
|
|
492
494
|
© ${new Date().getFullYear()} Your Company. All rights reserved.
|
|
493
495
|
</div>
|
|
494
496
|
</div>
|
|
495
|
-
`}function
|
|
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])=>`
|
|
496
498
|
@media ${e} {
|
|
497
499
|
.${s} { grid-template-columns: repeat(${t}, 1fr); }
|
|
498
500
|
}
|
|
499
501
|
`).join(`
|
|
500
|
-
`);return
|
|
501
|
-
<
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
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`
|
|
511
515
|
<div
|
|
512
516
|
style="
|
|
513
517
|
position: relative;
|
|
@@ -541,40 +545,44 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
|
|
|
541
545
|
box-sizing: border-box;
|
|
542
546
|
"
|
|
543
547
|
>
|
|
544
|
-
${n
|
|
548
|
+
${r(n)}
|
|
545
549
|
</div>
|
|
546
550
|
</div>
|
|
547
|
-
`}function
|
|
548
|
-
@media not ${
|
|
549
|
-
<
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
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`
|
|
578
586
|
<div
|
|
579
587
|
style="
|
|
580
588
|
position: ${o?`fixed`:`absolute`};
|
|
@@ -586,9 +594,9 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
|
|
|
586
594
|
align-items: center;
|
|
587
595
|
"
|
|
588
596
|
>
|
|
589
|
-
${n
|
|
597
|
+
${r(n)}
|
|
590
598
|
</div>
|
|
591
|
-
`}function
|
|
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`
|
|
592
600
|
<div
|
|
593
601
|
style="
|
|
594
602
|
position: relative;
|
|
@@ -596,25 +604,27 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
|
|
|
596
604
|
overflow: hidden;
|
|
597
605
|
"
|
|
598
606
|
>
|
|
599
|
-
${
|
|
607
|
+
${n(r)}
|
|
600
608
|
</div>
|
|
601
|
-
`}function
|
|
602
|
-
<
|
|
603
|
-
|
|
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
|
+
${`
|
|
604
613
|
@keyframes ${c+`-shimmer`} {
|
|
605
614
|
0% { background-color: #eee; }
|
|
606
615
|
50% { background-color: #ddd; }
|
|
607
616
|
100% { background-color: #eee; }
|
|
608
617
|
}
|
|
609
618
|
`}
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
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`
|
|
618
628
|
<div
|
|
619
629
|
style="
|
|
620
630
|
position: sticky;
|
|
@@ -622,50 +632,52 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
|
|
|
622
632
|
${o}
|
|
623
633
|
"
|
|
624
634
|
>
|
|
625
|
-
${
|
|
635
|
+
${n(r)}
|
|
626
636
|
</div>
|
|
627
|
-
`}function
|
|
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?`
|
|
628
638
|
.${a} tr:nth-child(even) { background: #f9f9f9; }
|
|
629
|
-
`:``,s=
|
|
639
|
+
`:``,s=e?.hover?`
|
|
630
640
|
.${a} tr:hover { background: #f1f1f1; }
|
|
631
|
-
`:``,c=
|
|
641
|
+
`:``,c=e?.bordered?`
|
|
632
642
|
.${a}, .${a} th, .${a} td { border: 1px solid #ddd; }
|
|
633
|
-
`:``;return
|
|
634
|
-
<
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
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>
|
|
649
660
|
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
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`
|
|
656
668
|
<div
|
|
657
669
|
style="
|
|
658
670
|
display: flex;
|
|
659
671
|
flex-direction: ${i};
|
|
660
672
|
flex-wrap: wrap;
|
|
661
|
-
${
|
|
662
|
-
${
|
|
663
|
-
${
|
|
673
|
+
${e?.gap?`gap: ${e.gap};`:``}
|
|
674
|
+
${e?.align?`align-items: ${e.align};`:``}
|
|
675
|
+
${e?.justify?`justify-content: ${e.justify};`:``}
|
|
664
676
|
"
|
|
665
677
|
>
|
|
666
|
-
${n
|
|
678
|
+
${r(n)}
|
|
667
679
|
</div>
|
|
668
|
-
`}function
|
|
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`
|
|
669
681
|
<div
|
|
670
682
|
style="
|
|
671
683
|
position: relative;
|
|
@@ -675,7 +687,7 @@ import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``
|
|
|
675
687
|
${i} ${a} ${o}
|
|
676
688
|
"
|
|
677
689
|
>
|
|
678
|
-
${n
|
|
690
|
+
${r(n)}
|
|
679
691
|
</div>
|
|
680
|
-
`}export{
|
|
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};
|
|
681
693
|
//# sourceMappingURL=index.es.js.map
|