lyco 1.0.0
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/LICENSE.txt +21 -0
- package/README.md +65 -0
- package/dist/index.cjs.js +526 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.es.js +526 -0
- package/dist/index.es.js.map +1 -0
- package/dist/types/components/AbsoluteBox.d.ts +10 -0
- package/dist/types/components/AcrylicBar.d.ts +14 -0
- package/dist/types/components/AspectRatio.d.ts +7 -0
- package/dist/types/components/AutoFitGrid.d.ts +5 -0
- package/dist/types/components/AvatarStack.d.ts +5 -0
- package/dist/types/components/Badge.d.ts +8 -0
- package/dist/types/components/Card.d.ts +7 -0
- package/dist/types/components/Center.d.ts +6 -0
- package/dist/types/components/Column.d.ts +4 -0
- package/dist/types/components/ColumnSplit.d.ts +5 -0
- package/dist/types/components/Container.d.ts +7 -0
- package/dist/types/components/Divider.d.ts +6 -0
- package/dist/types/components/Flex.d.ts +7 -0
- package/dist/types/components/FlowItem.d.ts +2 -0
- package/dist/types/components/FooterLayout.d.ts +7 -0
- package/dist/types/components/Grid.d.ts +5 -0
- package/dist/types/components/GridBreakpoint.d.ts +6 -0
- package/dist/types/components/GridCol.d.ts +4 -0
- package/dist/types/components/GridItem.d.ts +4 -0
- package/dist/types/components/GridRow.d.ts +4 -0
- package/dist/types/components/HeroSection.d.ts +6 -0
- package/dist/types/components/Hidden.d.ts +5 -0
- package/dist/types/components/LightboxContainer.d.ts +5 -0
- package/dist/types/components/ListGroup.d.ts +6 -0
- package/dist/types/components/Overlay.d.ts +6 -0
- package/dist/types/components/PositionContainer.d.ts +6 -0
- package/dist/types/components/Row.d.ts +4 -0
- package/dist/types/components/RowSplit.d.ts +5 -0
- package/dist/types/components/ScrollBar.d.ts +7 -0
- package/dist/types/components/SideBarContainer.d.ts +6 -0
- package/dist/types/components/SizedBox.d.ts +4 -0
- package/dist/types/components/SkeletonLoader.d.ts +7 -0
- package/dist/types/components/Spacer.d.ts +1 -0
- package/dist/types/components/Sticky.d.ts +6 -0
- package/dist/types/components/Swiper.d.ts +8 -0
- package/dist/types/components/Table.d.ts +6 -0
- package/dist/types/components/WaterFlow.d.ts +5 -0
- package/dist/types/components/Wrap.d.ts +7 -0
- package/dist/types/components/ZStack.d.ts +7 -0
- package/dist/types/components/core.d.ts +3 -0
- package/dist/types/components/index.d.ts +39 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +44 -0
package/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
MIT License
|
2
|
+
|
3
|
+
Copyright (c) 2025 AnNingUI
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
@@ -0,0 +1,65 @@
|
|
1
|
+
# Lyco
|
2
|
+
|
3
|
+
<p align="center">
|
4
|
+
<a href="./README_EN.md"> English </a> | <span> 简体中文 </span>
|
5
|
+
</p>
|
6
|
+
|
7
|
+
## 基于 Lit 的纯 CSS 布局渲染函数库
|
8
|
+
|
9
|
+
`Lyco` 是一个基于 [Lit](https://lit.dev) 构建的轻量级 CSS 布局库,提供了多种常用的布局组件(如 Row, Column, Flex, Grid 等),帮助开发者更高效地构建响应式网页布局。
|
10
|
+
|
11
|
+
### 特性
|
12
|
+
|
13
|
+
- 🧱 提供丰富的布局组件
|
14
|
+
- 🌐 支持响应式设计
|
15
|
+
- 💡 基于 Lit,性能优异
|
16
|
+
- 🎨 纯 CSS 实现,易于定制
|
17
|
+
|
18
|
+
### 安装
|
19
|
+
|
20
|
+
```bash
|
21
|
+
npm install lyco
|
22
|
+
```
|
23
|
+
|
24
|
+
### 使用示例
|
25
|
+
|
26
|
+
```ts
|
27
|
+
import { html, LitElement } from 'lit';
|
28
|
+
import { Row, Spacer } from 'lyco';
|
29
|
+
|
30
|
+
class MyLayout extends LitElement {
|
31
|
+
render() {
|
32
|
+
return html`
|
33
|
+
${Row({}, () => html`
|
34
|
+
<div>左侧内容</div>
|
35
|
+
${Spacer()}
|
36
|
+
<div>右侧内容</div>
|
37
|
+
`)}
|
38
|
+
`;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
```
|
42
|
+
|
43
|
+
### 组件列表
|
44
|
+
|
45
|
+
以下是一些常用组件:
|
46
|
+
|
47
|
+
| 组件名 | 描述 |
|
48
|
+
| -------------- | -------------- |
|
49
|
+
| Row | 水平布局容器 |
|
50
|
+
| Column | 垂直布局容器 |
|
51
|
+
| Flex | 弹性布局容器 |
|
52
|
+
| Grid | 网格布局容器 |
|
53
|
+
| Card | 卡片式布局 |
|
54
|
+
| Divider | 分隔线 |
|
55
|
+
| AvatarStack | 头像堆叠布局 |
|
56
|
+
| Badge | 徽章组件 |
|
57
|
+
| SkeletonLoader | 骨架屏加载动画 |
|
58
|
+
|
59
|
+
### 贡献
|
60
|
+
|
61
|
+
欢迎提交 PR 或 Issue!更多详情请查看 [贡献指南](https://github.com/AnNingUI/lyco/blob/main/CONTRIBUTING.md)。
|
62
|
+
|
63
|
+
### 许可证
|
64
|
+
|
65
|
+
MIT License. Copyright (c) AnNingUI。
|
@@ -0,0 +1,526 @@
|
|
1
|
+
var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const c=s(require(`lit`));function l(e){return e?typeof e==`function`?e():e:c.html``}function u(e,t){let n=e?.fadeBg??`rgba(0,0,0,0.7)`,r=e?.zIndex??2e3;return c.html`
|
2
|
+
<div
|
3
|
+
style="
|
4
|
+
position: fixed;
|
5
|
+
top: 0; left: 0; right: 0; bottom: 0;
|
6
|
+
background: ${n};
|
7
|
+
z-index: ${r};
|
8
|
+
display: flex;
|
9
|
+
justify-content: center;
|
10
|
+
align-items: center;
|
11
|
+
"
|
12
|
+
>
|
13
|
+
${l(t)}
|
14
|
+
</div>
|
15
|
+
`}function d(e,t){return c.html`
|
16
|
+
<div
|
17
|
+
style="
|
18
|
+
display: flex;
|
19
|
+
flex-direction: column;
|
20
|
+
${e?.space?`gap: ${e.space};`:``}
|
21
|
+
"
|
22
|
+
>
|
23
|
+
${l(t)}
|
24
|
+
</div>
|
25
|
+
`}function f(e,t){let n=e?.direction??`row`;return c.html`
|
26
|
+
<div
|
27
|
+
style="
|
28
|
+
display: flex;
|
29
|
+
flex-direction: ${n};
|
30
|
+
${e?.justify?`justify-content: ${e.justify};`:``}
|
31
|
+
${e?.align?`align-items: ${e.align};`:``}
|
32
|
+
${e?.gap?`gap: ${e.gap};`:``}
|
33
|
+
"
|
34
|
+
>
|
35
|
+
${l(t)}
|
36
|
+
</div>
|
37
|
+
`}function p(e,t){return c.html`
|
38
|
+
<div style="break-inside: avoid; margin-bottom: 16px;">
|
39
|
+
${l(t)}
|
40
|
+
</div>
|
41
|
+
`}function m(e,t){let n=e?.columns??1;return c.html`
|
42
|
+
<div
|
43
|
+
style="
|
44
|
+
display: grid;
|
45
|
+
grid-template-columns: repeat(${n}, 1fr);
|
46
|
+
${e?.gap?`gap: ${e.gap};`:``}
|
47
|
+
"
|
48
|
+
>
|
49
|
+
${l(t)}
|
50
|
+
</div>
|
51
|
+
`}function h(e,t){return c.html`
|
52
|
+
<div
|
53
|
+
style="
|
54
|
+
display: grid;
|
55
|
+
grid-auto-flow: column;
|
56
|
+
${e?.gap?`column-gap: ${e.gap};`:``}
|
57
|
+
"
|
58
|
+
>
|
59
|
+
${l(t)}
|
60
|
+
</div>
|
61
|
+
`}function g(e,t){return c.html`
|
62
|
+
<div style="${e?.span?`grid-column: span ${e.span};`:``}">
|
63
|
+
${l(t)}
|
64
|
+
</div>
|
65
|
+
`}function _(e,t){return c.html`
|
66
|
+
<div
|
67
|
+
style="
|
68
|
+
display: grid;
|
69
|
+
grid-auto-flow: row;
|
70
|
+
${e?.gap?`row-gap: ${e.gap};`:``}
|
71
|
+
"
|
72
|
+
>
|
73
|
+
${l(t)}
|
74
|
+
</div>
|
75
|
+
`}function v(e,t){return c.html`
|
76
|
+
<div
|
77
|
+
style="
|
78
|
+
display: flex;
|
79
|
+
flex-direction: row;
|
80
|
+
${e?.space?`gap: ${e.space};`:``}
|
81
|
+
"
|
82
|
+
>
|
83
|
+
${l(t)}
|
84
|
+
</div>
|
85
|
+
`}function y(e,t){let n=e?.columnCount??3,r=e?.gap??`16px`;return c.html`
|
86
|
+
<div
|
87
|
+
style="
|
88
|
+
column-count: ${n};
|
89
|
+
column-gap: ${r};
|
90
|
+
"
|
91
|
+
>
|
92
|
+
${l(t)}
|
93
|
+
</div>
|
94
|
+
`}function b(e,t){let n=e?.gap??`0px`,r=e?.firstHeight??`50%`,i=c.html``,a=c.html``;if(typeof t==`function`){var o;let e=(o=t.call)?.call(t,null)??[];i=e[0]??c.html``,a=e[1]??c.html``}else i=l(t);return c.html`
|
95
|
+
<div
|
96
|
+
style="
|
97
|
+
display: flex;
|
98
|
+
flex-direction: column;
|
99
|
+
width: 100%;
|
100
|
+
height: 100%;
|
101
|
+
gap: ${n};
|
102
|
+
"
|
103
|
+
>
|
104
|
+
<div style="flex: 0 0 ${r}; overflow: auto;">${i}</div>
|
105
|
+
<div style="flex: 1 1 auto; overflow: auto;">${a}</div>
|
106
|
+
</div>
|
107
|
+
`}function x(e,t){let n=e?.gap??`0px`,r=e?.firstWidth??`50%`,i=c.html``,a=c.html``;if(typeof t==`function`){var o;let e=(o=t.call)?.call(t,null)??[];i=e[0]??c.html``,a=e[1]??c.html``}else i=l(t);return c.html`
|
108
|
+
<div
|
109
|
+
style="
|
110
|
+
display: flex;
|
111
|
+
flex-direction: row;
|
112
|
+
width: 100%;
|
113
|
+
height: 100%;
|
114
|
+
gap: ${n};
|
115
|
+
"
|
116
|
+
>
|
117
|
+
<div style="flex: 0 0 ${r}; overflow: auto;">${i}</div>
|
118
|
+
<div style="flex: 1 1 auto; overflow: auto;">${a}</div>
|
119
|
+
</div>
|
120
|
+
`}function S(e,t){let n=e?.direction??`vertical`,r=e?.height??`100%`,i=e?.width??`100%`,a=e?.customCss??``,o=n===`horizontal`?`overflow-x: auto; overflow-y: hidden`:`overflow-y: auto; overflow-x: hidden`;return c.html`
|
121
|
+
<style>
|
122
|
+
.scrollbar-container {
|
123
|
+
${o};
|
124
|
+
width: ${i};
|
125
|
+
height: ${r};
|
126
|
+
}
|
127
|
+
.scrollbar-container::-webkit-scrollbar {
|
128
|
+
width: 8px;
|
129
|
+
height: 8px;
|
130
|
+
}
|
131
|
+
.scrollbar-container::-webkit-scrollbar-thumb {
|
132
|
+
background-color: rgba(0, 0, 0, 0.2);
|
133
|
+
border-radius: 4px;
|
134
|
+
}
|
135
|
+
.scrollbar-container::-webkit-scrollbar-track {
|
136
|
+
background: rgba(0, 0, 0, 0.05);
|
137
|
+
}
|
138
|
+
${a}
|
139
|
+
</style>
|
140
|
+
<div class="scrollbar-container">${l(t)}</div>
|
141
|
+
`}function C(e,t){let n=e?.sidebarWidth??`240px`,r=e?.sidebarPosition??`left`,i=e?.gap??`0px`,a=c.html``,o=c.html``;if(typeof t==`function`){var s;let e=(s=t.call)?.call(t,null)??[];a=e[0]??c.html``,o=e[1]??c.html``}else o=l(t);return c.html`
|
142
|
+
<div
|
143
|
+
style="
|
144
|
+
display: flex;
|
145
|
+
flex-direction: ${r===`left`?`row`:`row-reverse`};
|
146
|
+
width: 100%;
|
147
|
+
height: 100%;
|
148
|
+
gap: ${i};
|
149
|
+
"
|
150
|
+
>
|
151
|
+
<div style="flex: 0 0 ${n}; overflow: auto;">${a}</div>
|
152
|
+
<div style="flex: 1 1 auto; overflow: auto;">${o}</div>
|
153
|
+
</div>
|
154
|
+
`}function w(e,t){var n;let r=e?.gap??`8px`,i=e?.snapType??`mandatory`,a=e?.height??`auto`,o=e?.width??`100%`,s=[];return typeof t==`function`?s=(n=t.call)?.call(t,null)??[]:t&&(s=[t]),c.html`
|
155
|
+
<style>
|
156
|
+
.swiper-container {
|
157
|
+
width: ${o};
|
158
|
+
height: ${a};
|
159
|
+
overflow-x: auto;
|
160
|
+
overflow-y: hidden;
|
161
|
+
display: flex;
|
162
|
+
scroll-snap-type: x ${i};
|
163
|
+
-webkit-overflow-scrolling: touch;
|
164
|
+
gap: ${(0,c.unsafeCSS)(r)};
|
165
|
+
}
|
166
|
+
.swiper-slide {
|
167
|
+
scroll-snap-align: start;
|
168
|
+
flex-shrink: 0;
|
169
|
+
}
|
170
|
+
</style>
|
171
|
+
<div class="swiper-container">
|
172
|
+
${s.map(e=>c.html` <div class="swiper-slide">${e}</div> `)}
|
173
|
+
</div>
|
174
|
+
`}function T(e,t){let n=e?.top?`top: ${e.top};`:``,r=e?.right?`right: ${e.right};`:``,i=e?.bottom?`bottom: ${e.bottom};`:``,a=e?.left?`left: ${e.left};`:``,o=e?.width?`width: ${e.width};`:``,s=e?.height?`height: ${e.height};`:``,u=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``;return c.html`
|
175
|
+
<div
|
176
|
+
style="
|
177
|
+
position: absolute;
|
178
|
+
${n} ${r} ${i} ${a}
|
179
|
+
${o} ${s}
|
180
|
+
${u}
|
181
|
+
"
|
182
|
+
>
|
183
|
+
${l(t)}
|
184
|
+
</div>
|
185
|
+
`}function E(e,t){let n=e?.width??`300px`,r=e?.height??`auto`,i=e?.top??`20%`,a=e?.bottom??`auto`,o=e?.left??`50%`,s=e?.right??`auto`,u=o===`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;return c.html`
|
186
|
+
<div
|
187
|
+
style="
|
188
|
+
position: fixed;
|
189
|
+
top: ${i};
|
190
|
+
bottom: ${a};
|
191
|
+
left: ${o};
|
192
|
+
right: ${s};
|
193
|
+
${u}
|
194
|
+
width: ${n};
|
195
|
+
height: ${r};
|
196
|
+
background: ${d};
|
197
|
+
backdrop-filter: blur(${f});
|
198
|
+
-webkit-backdrop-filter: blur(${f});
|
199
|
+
border-radius: ${p};
|
200
|
+
padding: ${m};
|
201
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
202
|
+
z-index: ${h};
|
203
|
+
display: flex;
|
204
|
+
flex-direction: column;
|
205
|
+
"
|
206
|
+
>
|
207
|
+
${l(t)}
|
208
|
+
</div>
|
209
|
+
`}function D(e,t){let n=`${100/e.ratio}%`,r=e.maxWidth?`max-width: ${e.maxWidth};`:``,i=e.background?`background: ${e.background};`:``,a=e.overflow??`hidden`;return c.html`
|
210
|
+
<div
|
211
|
+
style="
|
212
|
+
position: relative;
|
213
|
+
width: 100%;
|
214
|
+
${r}
|
215
|
+
${i}
|
216
|
+
overflow: ${a};
|
217
|
+
"
|
218
|
+
>
|
219
|
+
<div style="width: 100%; padding-top: ${n};"></div>
|
220
|
+
<div
|
221
|
+
style="
|
222
|
+
position: absolute;
|
223
|
+
top: 0;
|
224
|
+
left: 0;
|
225
|
+
width: 100%;
|
226
|
+
height: 100%;
|
227
|
+
"
|
228
|
+
>
|
229
|
+
${l(t)}
|
230
|
+
</div>
|
231
|
+
</div>
|
232
|
+
`}function O(e,t){let n=e?.gap??`16px`;return c.html`
|
233
|
+
<div
|
234
|
+
style="
|
235
|
+
display: grid;
|
236
|
+
grid-template-columns: repeat(auto-fit, minmax(${e.minItemWidth}, 1fr));
|
237
|
+
gap: ${n};
|
238
|
+
"
|
239
|
+
>
|
240
|
+
${l(t)}
|
241
|
+
</div>
|
242
|
+
`}function k(e,t){let n=e?.size??`32px`,r=e?.overlap??`-8px`;return c.html`
|
243
|
+
<div style="display: flex; align-items: center;">
|
244
|
+
${typeof t==`function`?t().map((e,t)=>c.html`
|
245
|
+
<div
|
246
|
+
style="
|
247
|
+
width: ${n};
|
248
|
+
height: ${n};
|
249
|
+
border-radius: 50%;
|
250
|
+
overflow: hidden;
|
251
|
+
border: 2px solid #fff;
|
252
|
+
margin-left: ${t===0?`0`:r};
|
253
|
+
box-sizing: content-box;
|
254
|
+
"
|
255
|
+
>
|
256
|
+
${e}
|
257
|
+
</div>
|
258
|
+
`):c.html``}
|
259
|
+
</div>
|
260
|
+
`}function A(e,t){let n=e?.position??`top-right`,r=e?.size??`16px`,i=e?.background??`red`,a=e?.color??`#fff`,[o,s,u,d]=[n.includes(`top`)?`0`:`auto`,n.includes(`right`)?`0`:`auto`,n.includes(`bottom`)?`0`:`auto`,n.includes(`left`)?`0`:`auto`];return c.html`
|
261
|
+
<div style="position: relative; display: inline-block;">
|
262
|
+
${l(t)}
|
263
|
+
<div
|
264
|
+
style="
|
265
|
+
position: absolute;
|
266
|
+
top: ${o};
|
267
|
+
right: ${s};
|
268
|
+
bottom: ${u};
|
269
|
+
left: ${d};
|
270
|
+
width: ${r};
|
271
|
+
height: ${r};
|
272
|
+
background: ${i};
|
273
|
+
color: ${a};
|
274
|
+
font-size: calc(${r} * 0.6);
|
275
|
+
border-radius: 50%;
|
276
|
+
display: flex;
|
277
|
+
justify-content: center;
|
278
|
+
align-items: center;
|
279
|
+
transform: translate(${d===`0`?`-50%`:`0`}, ${o===`0`?`-50%`:`0`});
|
280
|
+
"
|
281
|
+
>
|
282
|
+
${e?.content??``}
|
283
|
+
</div>
|
284
|
+
</div>
|
285
|
+
`}function j(e,t){let n=e?.padding??`16px`,r=e?.borderRadius??`8px`,i=e?.shadow??`0 2px 8px rgba(0,0,0,0.1)`,a=e?.background??`#fff`;return c.html`
|
286
|
+
<div
|
287
|
+
style="
|
288
|
+
background: ${a};
|
289
|
+
border-radius: ${r};
|
290
|
+
box-shadow: ${i};
|
291
|
+
padding: ${n};
|
292
|
+
box-sizing: border-box;
|
293
|
+
"
|
294
|
+
>
|
295
|
+
${l(t)}
|
296
|
+
</div>
|
297
|
+
`}function M(e,t){let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=e?.background?`background: ${e.background};`:``;return c.html`
|
298
|
+
<div
|
299
|
+
style="
|
300
|
+
display: flex;
|
301
|
+
justify-content: center;
|
302
|
+
align-items: center;
|
303
|
+
${n} ${r} ${i}
|
304
|
+
"
|
305
|
+
>
|
306
|
+
${l(t)}
|
307
|
+
</div>
|
308
|
+
`}function N(e,t){let n=e?.maxWidth??`1024px`,r=e?.padding??`0 16px`,i=e?.background?`background: ${e.background};`:``,a=e?.fullHeight?`height: 100%;`:``;return c.html`
|
309
|
+
<div
|
310
|
+
style="
|
311
|
+
width: 100%;
|
312
|
+
max-width: ${n};
|
313
|
+
margin-left: auto;
|
314
|
+
margin-right: auto;
|
315
|
+
padding: ${r};
|
316
|
+
${i}
|
317
|
+
${a}
|
318
|
+
box-sizing: border-box;
|
319
|
+
"
|
320
|
+
>
|
321
|
+
${l(t)}
|
322
|
+
</div>
|
323
|
+
`}function P(e){let t=e?.orientation??`horizontal`,n=e?.thickness??`1px`,r=e?.color??`#e0e0e0`,i=e?.margin??(t===`horizontal`?`8px 0`:`0 8px`),a=t===`horizontal`?`width: 100%; height: ${n}; background: ${r}; margin: ${i};`:`width: ${n}; height: 100%; background: ${r}; margin: ${i};`;return c.html`<div style="${a}"></div>`}function F(e,t){let n=e?.columns??4,r=e?.gap??`24px`,i=e?.background??`#f8f8f8`,a=e?.padding??`40px 16px`;return c.html`
|
324
|
+
<div
|
325
|
+
style="
|
326
|
+
width: 100%;
|
327
|
+
background: ${i};
|
328
|
+
padding: ${a};
|
329
|
+
box-sizing: border-box;
|
330
|
+
"
|
331
|
+
>
|
332
|
+
<div
|
333
|
+
style="
|
334
|
+
display: grid;
|
335
|
+
grid-template-columns: repeat(${n}, 1fr);
|
336
|
+
gap: ${r};
|
337
|
+
"
|
338
|
+
>
|
339
|
+
${l(t)}
|
340
|
+
</div>
|
341
|
+
<div style="text-align: center; margin-top: 24px; color: #666;">
|
342
|
+
© ${new Date().getFullYear()} Your Company. All rights reserved.
|
343
|
+
</div>
|
344
|
+
</div>
|
345
|
+
`}function I(e,t){let n=e.defaultColumns??1,r=e.gap??`16px`,i=Object.entries(e.breakpoints).map(([e,t])=>`
|
346
|
+
@media ${e} {
|
347
|
+
.grid-breakpoint { grid-template-columns: repeat(${t}, 1fr); }
|
348
|
+
}
|
349
|
+
`).join(`
|
350
|
+
`);return c.html`
|
351
|
+
<style>
|
352
|
+
.grid-breakpoint {
|
353
|
+
display: grid;
|
354
|
+
grid-template-columns: repeat(${n}, 1fr);
|
355
|
+
gap: ${r};
|
356
|
+
}
|
357
|
+
${i}
|
358
|
+
</style>
|
359
|
+
<div class="grid-breakpoint">${l(t)}</div>
|
360
|
+
`}function L(e,t){let n=e?.backgroundImage?`background-image: url('${e.backgroundImage}');`:``,r=e?.height??`400px`,i=e?.overlayColor??`rgba(0, 0, 0, 0.3)`;return c.html`
|
361
|
+
<div
|
362
|
+
style="
|
363
|
+
position: relative;
|
364
|
+
width: 100%;
|
365
|
+
height: ${r};
|
366
|
+
${n}
|
367
|
+
background-size: cover;
|
368
|
+
background-position: center;
|
369
|
+
"
|
370
|
+
>
|
371
|
+
<div
|
372
|
+
style="
|
373
|
+
position: absolute;
|
374
|
+
top: 0; left: 0; right: 0; bottom: 0;
|
375
|
+
background: ${i};
|
376
|
+
"
|
377
|
+
></div>
|
378
|
+
<div
|
379
|
+
style="
|
380
|
+
position: relative;
|
381
|
+
z-index: 1;
|
382
|
+
width: 100%;
|
383
|
+
height: 100%;
|
384
|
+
display: flex;
|
385
|
+
flex-direction: column;
|
386
|
+
justify-content: center;
|
387
|
+
align-items: center;
|
388
|
+
color: #fff;
|
389
|
+
text-align: center;
|
390
|
+
padding: 0 16px;
|
391
|
+
box-sizing: border-box;
|
392
|
+
"
|
393
|
+
>
|
394
|
+
${l(t)}
|
395
|
+
</div>
|
396
|
+
</div>
|
397
|
+
`}function R(e,t){let n=e?.breakpoint??`(max-width: 600px)`,r=e?.mode??`hide`,i=r===`hide`?`@media ${n} { .hidden-container { display: none !important; } }`:`@media ${n} { .hidden-container { display: block !important; } }
|
398
|
+
@media not ${n} { .hidden-container { display: none !important; } }`;return c.html`
|
399
|
+
<style>
|
400
|
+
.hidden-container {
|
401
|
+
display: block;
|
402
|
+
}
|
403
|
+
${i}
|
404
|
+
</style>
|
405
|
+
<div class="hidden-container">${l(t)}</div>
|
406
|
+
`}function z(e,t){let n=e?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,r=e?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,i=e?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``;return c.html`
|
407
|
+
<style>
|
408
|
+
ul.list-group {
|
409
|
+
list-style: none;
|
410
|
+
margin: 0;
|
411
|
+
padding: 0;
|
412
|
+
${n};
|
413
|
+
}
|
414
|
+
ul.list-group li {
|
415
|
+
padding: 12px 16px;
|
416
|
+
${e?.bordered?`border-bottom: 1px solid #ddd`:``};
|
417
|
+
}
|
418
|
+
ul.list-group li:last-child {
|
419
|
+
${e?.bordered?`border-bottom: none`:``};
|
420
|
+
}
|
421
|
+
${r}
|
422
|
+
${i}
|
423
|
+
</style>
|
424
|
+
<ul class="list-group">
|
425
|
+
${l(t)}
|
426
|
+
</ul>
|
427
|
+
`}function B(e,t){let n=e?.background??`rgba(0, 0, 0, 0.5)`,r=e?.zIndex??1e3,i=e?.fullScreen!==!1;return c.html`
|
428
|
+
<div
|
429
|
+
style="
|
430
|
+
position: ${i?`fixed`:`absolute`};
|
431
|
+
top: 0; left: 0; right: 0; bottom: 0;
|
432
|
+
background: ${n};
|
433
|
+
z-index: ${r};
|
434
|
+
display: flex;
|
435
|
+
justify-content: center;
|
436
|
+
align-items: center;
|
437
|
+
"
|
438
|
+
>
|
439
|
+
${l(t)}
|
440
|
+
</div>
|
441
|
+
`}function V(e,t){let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=e?.background?`background: ${e.background};`:``;return c.html`
|
442
|
+
<div
|
443
|
+
style="
|
444
|
+
position: relative;
|
445
|
+
${n} ${r} ${i}
|
446
|
+
overflow: hidden;
|
447
|
+
"
|
448
|
+
>
|
449
|
+
${l(t)}
|
450
|
+
</div>
|
451
|
+
`}function H(e){let t=e?.width?`width: ${e.width};`:``,n=e?.height?`height: ${e.height};`:``;return c.html` <div style="${t} ${n}"></div> `}function U(e){let t=e?.type??`rect`,n=e?.width??`100%`,r=e?.height??`16px`,i=e?.borderRadius??`4px`,a=e?.animation!==!1,o=t===`circle`?`border-radius: 50%; width: ${n}; height: ${n}`:`border-radius: ${i}; width: ${n}; height: ${r}`;return c.html`
|
452
|
+
<style>
|
453
|
+
${`
|
454
|
+
@keyframes skeleton-shimmer {
|
455
|
+
0% { background-color: #eee; }
|
456
|
+
50% { background-color: #ddd; }
|
457
|
+
100% { background-color: #eee; }
|
458
|
+
}
|
459
|
+
`}
|
460
|
+
.skeleton {
|
461
|
+
${o};
|
462
|
+
background-color: #eee;
|
463
|
+
${a?`animation: skeleton-shimmer 1.2s infinite ease-in-out`:``};
|
464
|
+
}
|
465
|
+
</style>
|
466
|
+
<div class="skeleton"></div>
|
467
|
+
`}function W(){return c.html`<div style="flex: 1 1 auto;"></div>`}function G(e,t){let n=e?.top?`top: ${e.top};`:``,r=e?.bottom?`bottom: ${e.bottom};`:``,i=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``;return c.html`
|
468
|
+
<div
|
469
|
+
style="
|
470
|
+
position: sticky;
|
471
|
+
${n} ${r}
|
472
|
+
${i}
|
473
|
+
"
|
474
|
+
>
|
475
|
+
${l(t)}
|
476
|
+
</div>
|
477
|
+
`}function K(e,t){let n=e?.striped?`
|
478
|
+
tr:nth-child(even) { background: #f9f9f9; }
|
479
|
+
`:``,r=e?.hover?`
|
480
|
+
tr:hover { background: #f1f1f1; }
|
481
|
+
`:``,i=e?.bordered?`
|
482
|
+
table, th, td { border: 1px solid #ddd; }
|
483
|
+
`:``;return c.html`
|
484
|
+
<style>
|
485
|
+
table {
|
486
|
+
width: 100%;
|
487
|
+
border-collapse: collapse;
|
488
|
+
}
|
489
|
+
th, td {
|
490
|
+
padding: 8px 12px;
|
491
|
+
text-align: left;
|
492
|
+
}
|
493
|
+
${n}
|
494
|
+
${r}
|
495
|
+
${i}
|
496
|
+
</style>
|
497
|
+
<table>
|
498
|
+
${l(t)}
|
499
|
+
</table>
|
500
|
+
`}function q(e,t){let n=e?.direction??`row`;return c.html`
|
501
|
+
<div
|
502
|
+
style="
|
503
|
+
display: flex;
|
504
|
+
flex-direction: ${n};
|
505
|
+
flex-wrap: wrap;
|
506
|
+
${e?.gap?`gap: ${e.gap};`:``}
|
507
|
+
${e?.align?`align-items: ${e.align};`:``}
|
508
|
+
${e?.justify?`justify-content: ${e.justify};`:``}
|
509
|
+
"
|
510
|
+
>
|
511
|
+
${l(t)}
|
512
|
+
</div>
|
513
|
+
`}function J(e,t){let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=e?.background?`background: ${e.background};`:``,a=`flex-start`,o=`flex-start`;switch(e?.align){case`top-right`:a=`flex-end`,o=`flex-start`;break;case`center`:a=`center`,o=`center`;break;case`bottom-left`:a=`flex-start`,o=`flex-end`;break;case`bottom-right`:a=`flex-end`,o=`flex-end`;break;default:a=`flex-start`,o=`flex-start`}return c.html`
|
514
|
+
<div
|
515
|
+
style="
|
516
|
+
position: relative;
|
517
|
+
display: flex;
|
518
|
+
justify-content: ${a};
|
519
|
+
align-items: ${o};
|
520
|
+
${n} ${r} ${i}
|
521
|
+
"
|
522
|
+
>
|
523
|
+
${l(t)}
|
524
|
+
</div>
|
525
|
+
`}exports.AbsoluteBox=T,exports.AcrylicBar=E,exports.AspectRatio=D,exports.AutoFitGrid=O,exports.AvatarStack=k,exports.Badge=A,exports.Card=j,exports.Center=M,exports.Column=d,exports.ColumnSplit=b,exports.Container=N,exports.Divider=P,exports.Flex=f,exports.FlowItem=p,exports.FooterLayout=F,exports.Grid=m,exports.GridBreakpoint=I,exports.GridCol=h,exports.GridItem=g,exports.GridRow=_,exports.HeroSection=L,exports.Hidden=R,exports.LightboxContainer=u,exports.ListGroup=z,exports.Overlay=B,exports.PositionContainer=V,exports.Row=v,exports.RowSplit=x,exports.ScrollBar=S,exports.SideBarContainer=C,exports.SizedBox=H,exports.SkeletonLoader=U,exports.Spacer=W,exports.Sticky=G,exports.Swiper=w,exports.Table=K,exports.WaterFlow=y,exports.Wrap=q,exports.ZStack=J;
|
526
|
+
//# sourceMappingURL=index.cjs.js.map
|