snice 1.14.3 → 2.1.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/bin/templates/base/tsconfig.json +5 -4
- package/components/accordion/demo.html +403 -0
- package/components/accordion/snice-accordion-item.css +85 -0
- package/components/accordion/snice-accordion-item.ts +226 -0
- package/components/accordion/snice-accordion.css +31 -0
- package/components/accordion/snice-accordion.ts +182 -0
- package/components/accordion/snice-accordion.types.ts +32 -0
- package/components/alert/demo.html +445 -0
- package/components/alert/snice-alert.css +195 -0
- package/components/alert/snice-alert.ts +141 -0
- package/components/alert/snice-alert.types.ts +12 -0
- package/components/avatar/demo.html +598 -0
- package/components/avatar/snice-avatar.css +131 -0
- package/components/avatar/snice-avatar.ts +136 -0
- package/components/avatar/snice-avatar.types.ts +13 -0
- package/components/badge/demo.html +523 -0
- package/components/badge/snice-badge.css +161 -0
- package/components/badge/snice-badge.ts +117 -0
- package/components/badge/snice-badge.types.ts +16 -0
- package/components/breadcrumbs/demo.html +404 -0
- package/components/breadcrumbs/snice-breadcrumbs.css +133 -0
- package/components/breadcrumbs/snice-breadcrumbs.ts +191 -0
- package/components/breadcrumbs/snice-breadcrumbs.types.ts +26 -0
- package/components/breadcrumbs/snice-crumb.ts +26 -0
- package/components/button/demo.html +42 -0
- package/components/button/snice-button.css +230 -0
- package/components/button/snice-button.ts +169 -0
- package/components/button/snice-button.types.ts +25 -0
- package/components/card/demo.html +525 -0
- package/components/card/snice-card.css +140 -0
- package/components/card/snice-card.ts +102 -0
- package/components/card/snice-card.types.ts +10 -0
- package/components/checkbox/demo.html +253 -0
- package/components/checkbox/snice-checkbox.css +164 -0
- package/components/checkbox/snice-checkbox.ts +223 -0
- package/components/checkbox/snice-checkbox.types.ts +22 -0
- package/components/chip/demo.html +383 -0
- package/components/chip/snice-chip.css +195 -0
- package/components/chip/snice-chip.ts +139 -0
- package/components/chip/snice-chip.types.ts +15 -0
- package/components/date-picker/README.md +233 -0
- package/components/date-picker/demo.html +191 -0
- package/components/date-picker/snice-date-picker.css +330 -0
- package/components/date-picker/snice-date-picker.ts +777 -0
- package/components/date-picker/snice-date-picker.types.ts +83 -0
- package/components/divider/demo.html +233 -0
- package/components/divider/snice-divider.css +155 -0
- package/components/divider/snice-divider.ts +69 -0
- package/components/divider/snice-divider.types.ts +15 -0
- package/components/drawer/demo.html +328 -0
- package/components/drawer/snice-drawer.css +476 -0
- package/components/drawer/snice-drawer.ts +287 -0
- package/components/drawer/snice-drawer.types.ts +17 -0
- package/components/global.d.ts +14 -0
- package/components/input/demo.html +303 -0
- package/components/input/snice-input.css +257 -0
- package/components/input/snice-input.ts +442 -0
- package/components/input/snice-input.types.ts +59 -0
- package/components/input/test.html +77 -0
- package/components/layout/README.md +260 -0
- package/components/layout/demo.html +538 -0
- package/components/layout/snice-layout-blog.css +129 -0
- package/components/layout/snice-layout-blog.ts +48 -0
- package/components/layout/snice-layout-card.css +104 -0
- package/components/layout/snice-layout-card.ts +35 -0
- package/components/layout/snice-layout-centered.css +51 -0
- package/components/layout/snice-layout-centered.ts +22 -0
- package/components/layout/snice-layout-dashboard.css +98 -0
- package/components/layout/snice-layout-dashboard.ts +45 -0
- package/components/layout/snice-layout-fullscreen.css +72 -0
- package/components/layout/snice-layout-fullscreen.ts +34 -0
- package/components/layout/snice-layout-landing.css +92 -0
- package/components/layout/snice-layout-landing.ts +47 -0
- package/components/layout/snice-layout-minimal.css +16 -0
- package/components/layout/snice-layout-minimal.ts +19 -0
- package/components/layout/snice-layout-sidebar.css +117 -0
- package/components/layout/snice-layout-sidebar.ts +48 -0
- package/components/layout/snice-layout-split.css +103 -0
- package/components/layout/snice-layout-split.ts +29 -0
- package/components/layout/snice-layout.css +72 -0
- package/components/layout/snice-layout.ts +35 -0
- package/components/layout/snice-layout.types.ts +5 -0
- package/components/login/demo-auth-controller.ts +185 -0
- package/components/login/demo.html +470 -0
- package/components/login/snice-login.css +204 -0
- package/components/login/snice-login.ts +337 -0
- package/components/login/snice-login.types.ts +34 -0
- package/components/modal/demo.html +291 -0
- package/components/modal/snice-modal.css +203 -0
- package/components/modal/snice-modal.ts +233 -0
- package/components/modal/snice-modal.types.ts +21 -0
- package/components/pagination/demo.html +395 -0
- package/components/pagination/snice-pagination.ts +333 -0
- package/components/pagination/snice-pagination.types.ts +21 -0
- package/components/progress/demo.html +510 -0
- package/components/progress/snice-progress.css +267 -0
- package/components/progress/snice-progress.ts +247 -0
- package/components/progress/snice-progress.types.ts +19 -0
- package/components/radio/demo.html +287 -0
- package/components/radio/snice-radio.css +171 -0
- package/components/radio/snice-radio.ts +218 -0
- package/components/radio/snice-radio.types.ts +21 -0
- package/components/select/demo.html +511 -0
- package/components/select/snice-option.ts +52 -0
- package/components/select/snice-option.types.ts +14 -0
- package/components/select/snice-select.css +392 -0
- package/components/select/snice-select.ts +796 -0
- package/components/select/snice-select.types.ts +55 -0
- package/components/skeleton/demo.html +514 -0
- package/components/skeleton/snice-skeleton.css +109 -0
- package/components/skeleton/snice-skeleton.ts +126 -0
- package/components/skeleton/snice-skeleton.types.ts +11 -0
- package/components/switch/demo.html +284 -0
- package/components/switch/snice-switch.css +221 -0
- package/components/switch/snice-switch.ts +229 -0
- package/components/switch/snice-switch.types.ts +23 -0
- package/components/symbols.ts +23 -0
- package/components/table/demo-table-controller.ts +100 -0
- package/components/table/demo.html +480 -0
- package/components/table/snice-cell-boolean.ts +112 -0
- package/components/table/snice-cell-date.ts +210 -0
- package/components/table/snice-cell-duration.ts +91 -0
- package/components/table/snice-cell-filesize.ts +90 -0
- package/components/table/snice-cell-number.ts +165 -0
- package/components/table/snice-cell-progress.ts +83 -0
- package/components/table/snice-cell-rating.ts +82 -0
- package/components/table/snice-cell-sparkline.ts +253 -0
- package/components/table/snice-cell-text.ts +125 -0
- package/components/table/snice-cell.css +296 -0
- package/components/table/snice-cell.ts +473 -0
- package/components/table/snice-column.ts +353 -0
- package/components/table/snice-header.css +243 -0
- package/components/table/snice-header.ts +261 -0
- package/components/table/snice-progress.ts +66 -0
- package/components/table/snice-rating.ts +45 -0
- package/components/table/snice-row.css +255 -0
- package/components/table/snice-row.ts +331 -0
- package/components/table/snice-table.css +241 -0
- package/components/table/snice-table.ts +737 -0
- package/components/table/snice-table.types.ts +158 -0
- package/components/tabs/demo.html +487 -0
- package/components/tabs/snice-tab-panel.css +264 -0
- package/components/tabs/snice-tab-panel.ts +47 -0
- package/components/tabs/snice-tab.css +96 -0
- package/components/tabs/snice-tab.ts +65 -0
- package/components/tabs/snice-tabs.css +189 -0
- package/components/tabs/snice-tabs.ts +332 -0
- package/components/tabs/snice-tabs.types.ts +28 -0
- package/components/theme/theme.css +234 -0
- package/components/toast/demo.html +329 -0
- package/components/toast/snice-toast-container.ts +256 -0
- package/components/toast/snice-toast.css +213 -0
- package/components/toast/snice-toast.ts +276 -0
- package/components/toast/snice-toast.types.ts +35 -0
- package/components/tooltip/demo.html +350 -0
- package/components/tooltip/snice-tooltip-portal.css +79 -0
- package/components/tooltip/snice-tooltip.css +117 -0
- package/components/tooltip/snice-tooltip.ts +612 -0
- package/components/tooltip/snice-tooltip.types.ts +32 -0
- package/components/transitions.ts +94 -0
- package/components/tsconfig.json +18 -0
- package/dist/index.cjs +441 -329
- package/dist/index.cjs.map +1 -1
- package/dist/index.cjs.min.map +1 -1
- package/dist/index.esm.js +441 -329
- package/dist/index.esm.js.map +1 -1
- package/dist/index.esm.min.js +3 -3
- package/dist/index.esm.min.js.map +1 -1
- package/dist/index.iife.js +441 -329
- package/dist/index.iife.js.map +1 -1
- package/dist/index.iife.min.js +3 -3
- package/dist/index.iife.min.js.map +1 -1
- package/dist/symbols.esm.js +1 -1
- package/dist/transitions.esm.js +1 -1
- package/dist/types/controller.d.ts +1 -1
- package/dist/types/element.d.ts +10 -10
- package/dist/types/events.d.ts +2 -2
- package/dist/types/index.d.ts +1 -1
- package/dist/types/observe.d.ts +1 -1
- package/dist/types/request-response.d.ts +2 -3
- package/dist/types/router.d.ts +1 -1
- package/package.json +9 -3
- package/dist/index.cjs.min +0 -15
- package/dist/symbols.cjs +0 -103
- package/dist/transitions.cjs +0 -219
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
export type DatePickerSize = 'small' | 'medium' | 'large';
|
|
2
|
+
export type DatePickerVariant = 'outlined' | 'filled' | 'underlined';
|
|
3
|
+
export type DateFormat = 'yyyy-mm-dd' | 'mm/dd/yyyy' | 'dd/mm/yyyy' | 'yyyy/mm/dd' | 'dd-mm-yyyy' | 'mm-dd-yyyy' | 'mmmm dd, yyyy';
|
|
4
|
+
|
|
5
|
+
export interface DatePickerValue {
|
|
6
|
+
date: Date | null;
|
|
7
|
+
formatted: string;
|
|
8
|
+
iso: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export interface SniceDatePickerElement extends HTMLElement {
|
|
12
|
+
size: DatePickerSize;
|
|
13
|
+
variant: DatePickerVariant;
|
|
14
|
+
value: string;
|
|
15
|
+
format: DateFormat;
|
|
16
|
+
placeholder: string;
|
|
17
|
+
label: string;
|
|
18
|
+
helperText: string;
|
|
19
|
+
errorText: string;
|
|
20
|
+
disabled: boolean;
|
|
21
|
+
readonly: boolean;
|
|
22
|
+
required: boolean;
|
|
23
|
+
invalid: boolean;
|
|
24
|
+
clearable: boolean;
|
|
25
|
+
min: string;
|
|
26
|
+
max: string;
|
|
27
|
+
name: string;
|
|
28
|
+
showCalendar: boolean;
|
|
29
|
+
firstDayOfWeek: number; // 0 = Sunday, 1 = Monday, etc.
|
|
30
|
+
|
|
31
|
+
// Methods
|
|
32
|
+
focus(): void;
|
|
33
|
+
blur(): void;
|
|
34
|
+
clear(): void;
|
|
35
|
+
open(): void;
|
|
36
|
+
close(): void;
|
|
37
|
+
selectDate(date: Date): void;
|
|
38
|
+
goToMonth(year: number, month: number): void;
|
|
39
|
+
goToToday(): void;
|
|
40
|
+
checkValidity(): boolean;
|
|
41
|
+
reportValidity(): boolean;
|
|
42
|
+
setCustomValidity(message: string): void;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export interface DatePickerChangeDetail {
|
|
46
|
+
value: string;
|
|
47
|
+
date: Date | null;
|
|
48
|
+
formatted: string;
|
|
49
|
+
iso: string;
|
|
50
|
+
datePicker: SniceDatePickerElement;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export interface DatePickerInputDetail {
|
|
54
|
+
value: string;
|
|
55
|
+
datePicker: SniceDatePickerElement;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export interface DatePickerFocusDetail {
|
|
59
|
+
datePicker: SniceDatePickerElement;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
export interface DatePickerBlurDetail {
|
|
63
|
+
datePicker: SniceDatePickerElement;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
export interface DatePickerOpenDetail {
|
|
67
|
+
datePicker: SniceDatePickerElement;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
export interface DatePickerCloseDetail {
|
|
71
|
+
datePicker: SniceDatePickerElement;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
export interface DatePickerClearDetail {
|
|
75
|
+
datePicker: SniceDatePickerElement;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
export interface DatePickerSelectDetail {
|
|
79
|
+
date: Date;
|
|
80
|
+
formatted: string;
|
|
81
|
+
iso: string;
|
|
82
|
+
datePicker: SniceDatePickerElement;
|
|
83
|
+
}
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Snice Divider Demo</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
10
|
+
padding: 40px;
|
|
11
|
+
line-height: 1.6;
|
|
12
|
+
background: #f5f5f5;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.container {
|
|
16
|
+
max-width: 900px;
|
|
17
|
+
margin: 0 auto;
|
|
18
|
+
background: white;
|
|
19
|
+
padding: 40px;
|
|
20
|
+
border-radius: 8px;
|
|
21
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
h1 {
|
|
25
|
+
color: #333;
|
|
26
|
+
border-bottom: 2px solid #e0e0e0;
|
|
27
|
+
padding-bottom: 10px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
h2 {
|
|
31
|
+
color: #555;
|
|
32
|
+
margin-top: 30px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.demo-section {
|
|
36
|
+
margin: 30px 0;
|
|
37
|
+
padding: 20px;
|
|
38
|
+
background: #fafafa;
|
|
39
|
+
border-radius: 4px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.demo-label {
|
|
43
|
+
display: block;
|
|
44
|
+
margin-bottom: 8px;
|
|
45
|
+
font-weight: 500;
|
|
46
|
+
color: #666;
|
|
47
|
+
font-size: 14px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.vertical-demo {
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
height: 100px;
|
|
54
|
+
gap: 20px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.content-block {
|
|
58
|
+
padding: 20px;
|
|
59
|
+
background: #f0f0f0;
|
|
60
|
+
border-radius: 4px;
|
|
61
|
+
margin: 10px 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.flex-container {
|
|
65
|
+
display: flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
gap: 20px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.box {
|
|
71
|
+
width: 100px;
|
|
72
|
+
height: 100px;
|
|
73
|
+
background: #3b82f6;
|
|
74
|
+
color: white;
|
|
75
|
+
display: flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
justify-content: center;
|
|
78
|
+
border-radius: 4px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
code {
|
|
82
|
+
background: #f0f0f0;
|
|
83
|
+
padding: 2px 6px;
|
|
84
|
+
border-radius: 3px;
|
|
85
|
+
font-size: 0.9em;
|
|
86
|
+
}
|
|
87
|
+
</style>
|
|
88
|
+
</head>
|
|
89
|
+
<body>
|
|
90
|
+
<div class="container">
|
|
91
|
+
<h1>Snice Divider Component Demo</h1>
|
|
92
|
+
|
|
93
|
+
<div class="demo-section">
|
|
94
|
+
<h2>Basic Dividers</h2>
|
|
95
|
+
|
|
96
|
+
<div>
|
|
97
|
+
<span class="demo-label">Default Horizontal Divider</span>
|
|
98
|
+
<snice-divider></snice-divider>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<div>
|
|
102
|
+
<span class="demo-label">Horizontal with No Spacing</span>
|
|
103
|
+
<snice-divider spacing="none"></snice-divider>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<div>
|
|
107
|
+
<span class="demo-label">Horizontal with Large Spacing</span>
|
|
108
|
+
<snice-divider spacing="large"></snice-divider>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
|
|
112
|
+
<div class="demo-section">
|
|
113
|
+
<h2>Variants</h2>
|
|
114
|
+
|
|
115
|
+
<div>
|
|
116
|
+
<span class="demo-label">Solid (Default)</span>
|
|
117
|
+
<snice-divider variant="solid"></snice-divider>
|
|
118
|
+
</div>
|
|
119
|
+
|
|
120
|
+
<div>
|
|
121
|
+
<span class="demo-label">Dashed</span>
|
|
122
|
+
<snice-divider variant="dashed"></snice-divider>
|
|
123
|
+
</div>
|
|
124
|
+
|
|
125
|
+
<div>
|
|
126
|
+
<span class="demo-label">Dotted</span>
|
|
127
|
+
<snice-divider variant="dotted"></snice-divider>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
<div class="demo-section">
|
|
132
|
+
<h2>Text Dividers</h2>
|
|
133
|
+
|
|
134
|
+
<div>
|
|
135
|
+
<span class="demo-label">Center Aligned Text</span>
|
|
136
|
+
<snice-divider text="OR" align="center"></snice-divider>
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
<div>
|
|
140
|
+
<span class="demo-label">Start Aligned Text</span>
|
|
141
|
+
<snice-divider text="Section Title" align="start"></snice-divider>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<div>
|
|
145
|
+
<span class="demo-label">End Aligned Text</span>
|
|
146
|
+
<snice-divider text="End of Section" align="end"></snice-divider>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<div>
|
|
150
|
+
<span class="demo-label">Dashed with Text</span>
|
|
151
|
+
<snice-divider text="Choose One" variant="dashed"></snice-divider>
|
|
152
|
+
</div>
|
|
153
|
+
|
|
154
|
+
<div>
|
|
155
|
+
<span class="demo-label">Dotted with Text</span>
|
|
156
|
+
<snice-divider text="Continue" variant="dotted"></snice-divider>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<div class="demo-section">
|
|
161
|
+
<h2>Vertical Dividers</h2>
|
|
162
|
+
|
|
163
|
+
<div class="vertical-demo">
|
|
164
|
+
<div class="box">Item 1</div>
|
|
165
|
+
<snice-divider orientation="vertical"></snice-divider>
|
|
166
|
+
<div class="box">Item 2</div>
|
|
167
|
+
<snice-divider orientation="vertical" variant="dashed"></snice-divider>
|
|
168
|
+
<div class="box">Item 3</div>
|
|
169
|
+
<snice-divider orientation="vertical" variant="dotted"></snice-divider>
|
|
170
|
+
<div class="box">Item 4</div>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<div class="demo-section">
|
|
175
|
+
<h2>In Context</h2>
|
|
176
|
+
|
|
177
|
+
<div class="content-block">
|
|
178
|
+
<h3>Article Title</h3>
|
|
179
|
+
<p>This is the first paragraph of content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
180
|
+
<snice-divider spacing="large"></snice-divider>
|
|
181
|
+
<p>This is the second paragraph after a divider. Sed do eiusmod tempor incididunt ut labore.</p>
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<div class="content-block">
|
|
185
|
+
<h3>Login Form</h3>
|
|
186
|
+
<p>Username: user@example.com</p>
|
|
187
|
+
<p>Password: ********</p>
|
|
188
|
+
<snice-divider text="OR" spacing="large"></snice-divider>
|
|
189
|
+
<p>Sign in with Google</p>
|
|
190
|
+
<p>Sign in with GitHub</p>
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
<div class="content-block">
|
|
194
|
+
<h3>Navigation Menu</h3>
|
|
195
|
+
<div class="flex-container">
|
|
196
|
+
<span>Home</span>
|
|
197
|
+
<snice-divider orientation="vertical" spacing="small"></snice-divider>
|
|
198
|
+
<span>About</span>
|
|
199
|
+
<snice-divider orientation="vertical" spacing="small"></snice-divider>
|
|
200
|
+
<span>Services</span>
|
|
201
|
+
<snice-divider orientation="vertical" spacing="small"></snice-divider>
|
|
202
|
+
<span>Contact</span>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
<div class="demo-section">
|
|
208
|
+
<h2>Custom Styling</h2>
|
|
209
|
+
|
|
210
|
+
<div>
|
|
211
|
+
<span class="demo-label">Custom Color (via CSS variable)</span>
|
|
212
|
+
<snice-divider style="--divider-color: #ef4444;"></snice-divider>
|
|
213
|
+
</div>
|
|
214
|
+
|
|
215
|
+
<div>
|
|
216
|
+
<span class="demo-label">Thick Divider</span>
|
|
217
|
+
<snice-divider style="--divider-thickness: 3px;"></snice-divider>
|
|
218
|
+
</div>
|
|
219
|
+
|
|
220
|
+
<div>
|
|
221
|
+
<span class="demo-label">Custom Text Background</span>
|
|
222
|
+
<div style="background: linear-gradient(to right, #fce7f3, #ddd6fe); padding: 20px;">
|
|
223
|
+
<snice-divider text="Gradient Background" text-background="transparent"></snice-divider>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
<script type="module">
|
|
230
|
+
import './snice-divider.ts';
|
|
231
|
+
</script>
|
|
232
|
+
</body>
|
|
233
|
+
</html>
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
display: block;
|
|
3
|
+
--divider-color: #e5e7eb;
|
|
4
|
+
--divider-thickness: 1px;
|
|
5
|
+
--divider-text-bg: transparent;
|
|
6
|
+
--divider-text-padding: 0 1rem; /* 0 16px */
|
|
7
|
+
--divider-text-gap: 1rem; /* 16px */
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
:host([orientation="vertical"]) {
|
|
11
|
+
display: inline-block;
|
|
12
|
+
height: 100%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.divider {
|
|
16
|
+
background: var(--divider-color);
|
|
17
|
+
width: 100%;
|
|
18
|
+
height: var(--divider-thickness);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Container for text dividers */
|
|
22
|
+
.divider-container {
|
|
23
|
+
display: flex;
|
|
24
|
+
align-items: center;
|
|
25
|
+
width: 100%;
|
|
26
|
+
position: relative;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.divider-text {
|
|
30
|
+
flex-shrink: 0;
|
|
31
|
+
padding: var(--divider-text-padding);
|
|
32
|
+
background: var(--divider-text-bg);
|
|
33
|
+
color: #6b7280;
|
|
34
|
+
font-size: 0.875rem; /* 14px */
|
|
35
|
+
font-weight: 500;
|
|
36
|
+
white-space: nowrap;
|
|
37
|
+
margin: 0 var(--divider-text-gap);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.divider--before,
|
|
41
|
+
.divider--after {
|
|
42
|
+
flex: 1;
|
|
43
|
+
height: var(--divider-thickness);
|
|
44
|
+
background: var(--divider-color);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Align text */
|
|
48
|
+
:host([align="start"]) .divider--before {
|
|
49
|
+
flex: 0 0 2rem; /* 32px */
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
:host([align="end"]) .divider--after {
|
|
53
|
+
flex: 0 0 2rem; /* 32px */
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Vertical override */
|
|
57
|
+
:host([orientation="vertical"]) .divider {
|
|
58
|
+
width: var(--divider-thickness);
|
|
59
|
+
height: 100%;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* Capped ends */
|
|
63
|
+
:host([capped]) .divider {
|
|
64
|
+
border-radius: var(--divider-thickness);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
:host([capped]) .divider--before,
|
|
68
|
+
:host([capped]) .divider--after {
|
|
69
|
+
border-radius: var(--divider-thickness);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Variants */
|
|
73
|
+
:host([variant="solid"]) .divider {
|
|
74
|
+
background: var(--divider-color);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
:host([variant="dashed"]) .divider {
|
|
78
|
+
background: linear-gradient(to right, var(--divider-color) 50%, transparent 50%);
|
|
79
|
+
background-size: 8px var(--divider-thickness);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
:host([variant="dashed"][orientation="vertical"]) .divider {
|
|
83
|
+
background: linear-gradient(to bottom, var(--divider-color) 50%, transparent 50%);
|
|
84
|
+
background-size: var(--divider-thickness) 8px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
:host([variant="dotted"]) .divider {
|
|
88
|
+
background: none;
|
|
89
|
+
background-image: radial-gradient(circle, var(--divider-color) 25%, transparent 25%);
|
|
90
|
+
background-size: 4px 4px;
|
|
91
|
+
background-position: 0 center;
|
|
92
|
+
background-repeat: repeat-x;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
:host([variant="dotted"][orientation="vertical"]) .divider {
|
|
96
|
+
background-image: radial-gradient(circle, var(--divider-color) 25%, transparent 25%);
|
|
97
|
+
background-size: 4px 4px;
|
|
98
|
+
background-position: center 0;
|
|
99
|
+
background-repeat: repeat-y;
|
|
100
|
+
width: var(--divider-thickness);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* Spacing */
|
|
104
|
+
:host([spacing="none"]) {
|
|
105
|
+
margin: 0;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
:host([spacing="small"]) {
|
|
109
|
+
margin: 0.5rem 0; /* 8px 0 */
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
:host([spacing="medium"]) {
|
|
113
|
+
margin: 1rem 0; /* 16px 0 */
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
:host([spacing="large"]) {
|
|
117
|
+
margin: 1.5rem 0; /* 24px 0 */
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
:host([orientation="vertical"][spacing="none"]) {
|
|
121
|
+
margin: 0;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
:host([orientation="vertical"][spacing="small"]) {
|
|
125
|
+
margin: 0 0.5rem; /* 0 8px */
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
:host([orientation="vertical"][spacing="medium"]) {
|
|
129
|
+
margin: 0 1rem; /* 0 16px */
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
:host([orientation="vertical"][spacing="large"]) {
|
|
133
|
+
margin: 0 1.5rem; /* 0 24px */
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/* Text divider variants */
|
|
137
|
+
.divider-container .divider--before,
|
|
138
|
+
.divider-container .divider--after {
|
|
139
|
+
background: var(--divider-color);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
:host([variant="dashed"]) .divider-container .divider--before,
|
|
143
|
+
:host([variant="dashed"]) .divider-container .divider--after {
|
|
144
|
+
background: linear-gradient(to right, var(--divider-color) 50%, transparent 50%);
|
|
145
|
+
background-size: 8px var(--divider-thickness);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
:host([variant="dotted"]) .divider-container .divider--before,
|
|
149
|
+
:host([variant="dotted"]) .divider-container .divider--after {
|
|
150
|
+
background: none;
|
|
151
|
+
background-image: radial-gradient(circle, var(--divider-color) 25%, transparent 25%);
|
|
152
|
+
background-size: 4px 4px;
|
|
153
|
+
background-position: 0 center;
|
|
154
|
+
background-repeat: repeat-x;
|
|
155
|
+
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { element, property, watch, query } from 'snice';
|
|
2
|
+
import css from './snice-divider.css?inline';
|
|
3
|
+
import type { DividerOrientation, DividerVariant, DividerAlign, DividerSpacing, SniceDividerElement } from './snice-divider.types';
|
|
4
|
+
|
|
5
|
+
@element('snice-divider')
|
|
6
|
+
export class SniceDivider extends HTMLElement implements SniceDividerElement {
|
|
7
|
+
@property({ reflect: true })
|
|
8
|
+
orientation: DividerOrientation = 'horizontal';
|
|
9
|
+
|
|
10
|
+
@property({ reflect: true })
|
|
11
|
+
variant: DividerVariant = 'solid';
|
|
12
|
+
|
|
13
|
+
@property({ reflect: true })
|
|
14
|
+
spacing: DividerSpacing = 'medium';
|
|
15
|
+
|
|
16
|
+
@property({ reflect: true })
|
|
17
|
+
align: DividerAlign = 'center';
|
|
18
|
+
|
|
19
|
+
@property({ reflect: true })
|
|
20
|
+
text = '';
|
|
21
|
+
|
|
22
|
+
@property({ attribute: 'text-background', reflect: true })
|
|
23
|
+
textBackground = '';
|
|
24
|
+
|
|
25
|
+
@property({ reflect: true })
|
|
26
|
+
color = '';
|
|
27
|
+
|
|
28
|
+
@property({ type: Boolean, reflect: true })
|
|
29
|
+
capped = false;
|
|
30
|
+
|
|
31
|
+
@query('.divider-text')
|
|
32
|
+
textElement?: HTMLElement;
|
|
33
|
+
|
|
34
|
+
html() {
|
|
35
|
+
if (this.text && this.orientation === 'horizontal') {
|
|
36
|
+
return /*html*/`
|
|
37
|
+
<div class="divider-container" role="separator" aria-orientation="${this.orientation}">
|
|
38
|
+
<div class="divider divider--before"></div>
|
|
39
|
+
<span class="divider-text">${this.text}</span>
|
|
40
|
+
<div class="divider divider--after"></div>
|
|
41
|
+
</div>
|
|
42
|
+
`;
|
|
43
|
+
}
|
|
44
|
+
return /*html*/`<div class="divider" role="separator" aria-orientation="${this.orientation}"></div>`;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
css() {
|
|
48
|
+
return css;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@watch('text')
|
|
52
|
+
updateText() {
|
|
53
|
+
if (this.textElement) {
|
|
54
|
+
this.textElement.textContent = this.text;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@watch('textBackground')
|
|
59
|
+
updateTextBackground() {
|
|
60
|
+
this.style.setProperty('--divider-text-bg', this.textBackground);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@watch('color')
|
|
64
|
+
updateColor() {
|
|
65
|
+
if (this.color) {
|
|
66
|
+
this.style.setProperty('--divider-color', this.color);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export type DividerOrientation = 'horizontal' | 'vertical';
|
|
2
|
+
export type DividerVariant = 'solid' | 'dashed' | 'dotted';
|
|
3
|
+
export type DividerAlign = 'start' | 'center' | 'end';
|
|
4
|
+
export type DividerSpacing = 'none' | 'small' | 'medium' | 'large';
|
|
5
|
+
|
|
6
|
+
export interface SniceDividerElement extends HTMLElement {
|
|
7
|
+
orientation: DividerOrientation;
|
|
8
|
+
variant: DividerVariant;
|
|
9
|
+
spacing: DividerSpacing;
|
|
10
|
+
align: DividerAlign;
|
|
11
|
+
text: string;
|
|
12
|
+
textBackground: string;
|
|
13
|
+
color: string;
|
|
14
|
+
capped: boolean;
|
|
15
|
+
}
|