@diniz/webcomponents 1.1.6 → 1.1.7
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/README.md +346 -0
- package/dist/README.md +346 -0
- package/dist/button-demo-BcfxxPSq.js +227 -0
- package/dist/card-demo-Cxp-wRGW.js +230 -0
- package/dist/date-picker-demo-B8y3zapN.js +143 -0
- package/dist/form-demo-page-F1iLCgfh.js +351 -0
- package/dist/home-page-XUM8cHP7.js +468 -0
- package/dist/index-DiYekJaQ.js +2424 -0
- package/dist/layout-demo-CJsZ6DI5.js +289 -0
- package/dist/modal-demo-page-YN2KgJ31.js +195 -0
- package/dist/stepper-demo-page-BkcpKk_F.js +312 -0
- package/dist/table-demo-x2ZD8cFh.js +137 -0
- package/dist/tabs-demo-BQBtZzw9.js +76 -0
- package/dist/toast-demo-page-DLVacHXA.js +260 -0
- package/dist/webcomponents.es.js +31 -1912
- package/dist/webcomponents.umd.js +2529 -105
- package/package.json +1 -1
|
@@ -0,0 +1,227 @@
|
|
|
1
|
+
import { B as t } from "./index-DiYekJaQ.js";
|
|
2
|
+
const n = `<h1>🔘 Button Component Demo</h1>
|
|
3
|
+
|
|
4
|
+
<div class="demo-intro">
|
|
5
|
+
<p>A flexible button component with multiple variants, sizes, and icon support.</p>
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
<div class="demo-section">
|
|
9
|
+
<h2>Variants</h2>
|
|
10
|
+
<div class="button-group">
|
|
11
|
+
<div class="button-item">
|
|
12
|
+
<ui-button variant="primary">Primary</ui-button>
|
|
13
|
+
<span class="label">primary</span>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="button-item">
|
|
16
|
+
<ui-button variant="secondary">Secondary</ui-button>
|
|
17
|
+
<span class="label">secondary</span>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="button-item">
|
|
20
|
+
<ui-button variant="ghost">Ghost</ui-button>
|
|
21
|
+
<span class="label">ghost</span>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="button-item">
|
|
24
|
+
<ui-button variant="danger">Danger</ui-button>
|
|
25
|
+
<span class="label">danger</span>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="demo-section">
|
|
31
|
+
<h2>Sizes</h2>
|
|
32
|
+
<div class="button-group">
|
|
33
|
+
<div class="button-item">
|
|
34
|
+
<ui-button size="sm">Small</ui-button>
|
|
35
|
+
<span class="label">size="sm"</span>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="button-item">
|
|
38
|
+
<ui-button size="md">Medium</ui-button>
|
|
39
|
+
<span class="label">size="md" (default)</span>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="button-item">
|
|
42
|
+
<ui-button size="lg">Large</ui-button>
|
|
43
|
+
<span class="label">size="lg"</span>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div class="demo-section">
|
|
49
|
+
<h2>With Icons</h2>
|
|
50
|
+
<div class="button-group">
|
|
51
|
+
<div class="button-item">
|
|
52
|
+
<ui-button icon="check">Save</ui-button>
|
|
53
|
+
<span class="label">icon="check"</span>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="button-item">
|
|
56
|
+
<ui-button icon="trash-2" variant="danger">Delete</ui-button>
|
|
57
|
+
<span class="label">icon="trash-2"</span>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="button-item">
|
|
60
|
+
<ui-button icon="arrow-right" icon-position="right">Next</ui-button>
|
|
61
|
+
<span class="label">icon-position="right"</span>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="button-item">
|
|
64
|
+
<ui-button icon="download">Download</ui-button>
|
|
65
|
+
<span class="label">icon with text</span>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<div class="demo-section">
|
|
71
|
+
<h2>States</h2>
|
|
72
|
+
<div class="button-group">
|
|
73
|
+
<div class="button-item">
|
|
74
|
+
<ui-button variant="primary">Active</ui-button>
|
|
75
|
+
<span class="label">default state</span>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="button-item">
|
|
78
|
+
<ui-button variant="primary" disabled>Disabled</ui-button>
|
|
79
|
+
<span class="label">disabled</span>
|
|
80
|
+
</div>
|
|
81
|
+
<div class="button-item">
|
|
82
|
+
<ui-button variant="secondary" disabled>Disabled</ui-button>
|
|
83
|
+
<span class="label">disabled (secondary)</span>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<div class="demo-section">
|
|
89
|
+
<h2>Button Types</h2>
|
|
90
|
+
<div class="button-group">
|
|
91
|
+
<div class="button-item">
|
|
92
|
+
<ui-button type="button">Button</ui-button>
|
|
93
|
+
<span class="label">type="button"</span>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="button-item">
|
|
96
|
+
<ui-button type="submit" variant="primary">Submit</ui-button>
|
|
97
|
+
<span class="label">type="submit"</span>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="button-item">
|
|
100
|
+
<ui-button type="reset" variant="secondary">Reset</ui-button>
|
|
101
|
+
<span class="label">type="reset"</span>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<div class="demo-section">
|
|
107
|
+
<h2>Combinations</h2>
|
|
108
|
+
<div class="button-group">
|
|
109
|
+
<div class="button-item">
|
|
110
|
+
<ui-button variant="primary" size="lg" icon="zap">Power</ui-button>
|
|
111
|
+
<span class="label">Large + Icon</span>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="button-item">
|
|
114
|
+
<ui-button variant="secondary" size="sm" icon="settings">Config</ui-button>
|
|
115
|
+
<span class="label">Small + Icon</span>
|
|
116
|
+
</div>
|
|
117
|
+
<div class="button-item">
|
|
118
|
+
<ui-button variant="ghost" icon="info">Info</ui-button>
|
|
119
|
+
<span class="label">Ghost + Icon</span>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
`, i = `
|
|
124
|
+
:host {
|
|
125
|
+
display: block;
|
|
126
|
+
color: var(--color-ink);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
h1 {
|
|
130
|
+
font-size: 2.2rem;
|
|
131
|
+
margin-bottom: 0.5rem;
|
|
132
|
+
font-weight: 700;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
h2 {
|
|
136
|
+
font-size: 1.4rem;
|
|
137
|
+
margin: 2rem 0 1.5rem;
|
|
138
|
+
font-weight: 600;
|
|
139
|
+
border-bottom: 2px solid var(--color-primary);
|
|
140
|
+
padding-bottom: 0.5rem;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
p {
|
|
144
|
+
line-height: 1.6;
|
|
145
|
+
color: rgba(15, 23, 42, 0.75);
|
|
146
|
+
margin: 0 0 1rem;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.demo-intro {
|
|
150
|
+
background: linear-gradient(135deg, rgba(36, 236, 113, 0.08) 0%, rgba(52, 168, 235, 0.05) 100%);
|
|
151
|
+
padding: 1.5rem;
|
|
152
|
+
border-radius: 12px;
|
|
153
|
+
border-left: 4px solid var(--color-primary);
|
|
154
|
+
margin-bottom: 2rem;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.demo-section {
|
|
158
|
+
margin-bottom: 3rem;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.button-group {
|
|
162
|
+
display: grid;
|
|
163
|
+
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
164
|
+
gap: 1.5rem;
|
|
165
|
+
margin-top: 1rem;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.button-item {
|
|
169
|
+
display: flex;
|
|
170
|
+
flex-direction: column;
|
|
171
|
+
align-items: center;
|
|
172
|
+
gap: 0.75rem;
|
|
173
|
+
padding: 1.5rem;
|
|
174
|
+
background: var(--color-surface);
|
|
175
|
+
border: 1px solid var(--color-border);
|
|
176
|
+
border-radius: 12px;
|
|
177
|
+
text-align: center;
|
|
178
|
+
transition: all 0.2s ease;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.button-item:hover {
|
|
182
|
+
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
|
|
183
|
+
border-color: var(--color-border-strong);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.label {
|
|
187
|
+
font-size: 0.8rem;
|
|
188
|
+
color: rgba(15, 23, 42, 0.6);
|
|
189
|
+
font-weight: 500;
|
|
190
|
+
text-transform: uppercase;
|
|
191
|
+
letter-spacing: 0.05em;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
@media (max-width: 768px) {
|
|
195
|
+
.button-group {
|
|
196
|
+
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
197
|
+
gap: 1rem;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.button-item {
|
|
201
|
+
padding: 1rem;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
h1 {
|
|
205
|
+
font-size: 1.8rem;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
h2 {
|
|
209
|
+
font-size: 1.2rem;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
`;
|
|
213
|
+
class a extends t {
|
|
214
|
+
connectedCallback() {
|
|
215
|
+
super.connectedCallback();
|
|
216
|
+
}
|
|
217
|
+
render() {
|
|
218
|
+
this.shadowRoot.innerHTML = `
|
|
219
|
+
<style>${i}</style>
|
|
220
|
+
${n}
|
|
221
|
+
`;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
customElements.define("button-demo", a);
|
|
225
|
+
export {
|
|
226
|
+
a as ButtonDemo
|
|
227
|
+
};
|
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
import { B as a } from "./index-DiYekJaQ.js";
|
|
2
|
+
class d extends a {
|
|
3
|
+
render() {
|
|
4
|
+
this.shadowRoot.innerHTML = `
|
|
5
|
+
<style>
|
|
6
|
+
:host {
|
|
7
|
+
display: block;
|
|
8
|
+
width: 100%;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.demo-section {
|
|
12
|
+
margin-bottom: 48px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.demo-section h2 {
|
|
16
|
+
font: 600 24px/1.3 "Sora", system-ui, sans-serif;
|
|
17
|
+
color: #0f172a;
|
|
18
|
+
margin: 0 0 8px 0;
|
|
19
|
+
letter-spacing: -0.02em;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.demo-section p {
|
|
23
|
+
font: 400 14px/1.5 "Inter", system-ui, sans-serif;
|
|
24
|
+
color: #6b7280;
|
|
25
|
+
margin: 0 0 24px 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.card-grid {
|
|
29
|
+
display: grid;
|
|
30
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
31
|
+
gap: 24px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.card-content {
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
gap: 12px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.card-content h3 {
|
|
41
|
+
font: 600 18px/1.3 "Sora", system-ui, sans-serif;
|
|
42
|
+
color: #0f172a;
|
|
43
|
+
margin: 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.card-content p {
|
|
47
|
+
font: 400 14px/1.6 "Inter", system-ui, sans-serif;
|
|
48
|
+
color: #6b7280;
|
|
49
|
+
margin: 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.tag {
|
|
53
|
+
display: inline-block;
|
|
54
|
+
padding: 4px 12px;
|
|
55
|
+
border-radius: 6px;
|
|
56
|
+
font: 500 12px/1.4 "Inter", system-ui, sans-serif;
|
|
57
|
+
background: #f0f9ff;
|
|
58
|
+
color: #0284c7;
|
|
59
|
+
border: 1px solid #bae6fd;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.tag.success {
|
|
63
|
+
background: #f0fdf4;
|
|
64
|
+
color: #15803d;
|
|
65
|
+
border-color: #bbf7d0;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.tag.warning {
|
|
69
|
+
background: #fef3c7;
|
|
70
|
+
color: #ca8a04;
|
|
71
|
+
border-color: #fde68a;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.tag.error {
|
|
75
|
+
background: #fee2e2;
|
|
76
|
+
color: #dc2626;
|
|
77
|
+
border-color: #fecaca;
|
|
78
|
+
}
|
|
79
|
+
</style>
|
|
80
|
+
|
|
81
|
+
<div class="demo-section">
|
|
82
|
+
<h2>Card Component Demo</h2>
|
|
83
|
+
<p>Flexible card component with customizable shadows, colors, and variants.</p>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<div class="demo-section">
|
|
87
|
+
<h2>Default Cards</h2>
|
|
88
|
+
<p>Standard card with minimal shadow.</p>
|
|
89
|
+
<div class="card-grid">
|
|
90
|
+
<ui-card shadow elevation="sm">
|
|
91
|
+
<div class="card-content">
|
|
92
|
+
<h3>Default Card</h3>
|
|
93
|
+
<p>This is a default card with rounded corners and a subtle shadow.</p>
|
|
94
|
+
<span class="tag">Default</span>
|
|
95
|
+
</div>
|
|
96
|
+
</ui-card>
|
|
97
|
+
|
|
98
|
+
<ui-card shadow elevation="md">
|
|
99
|
+
<div class="card-content">
|
|
100
|
+
<h3>Medium Elevation</h3>
|
|
101
|
+
<p>Card with medium elevation for more prominence.</p>
|
|
102
|
+
<span class="tag success">Elevated</span>
|
|
103
|
+
</div>
|
|
104
|
+
</ui-card>
|
|
105
|
+
|
|
106
|
+
<ui-card shadow elevation="lg">
|
|
107
|
+
<div class="card-content">
|
|
108
|
+
<h3>High Elevation</h3>
|
|
109
|
+
<p>High elevation for important content that needs attention.</p>
|
|
110
|
+
<span class="tag warning">Important</span>
|
|
111
|
+
</div>
|
|
112
|
+
</ui-card>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div class="demo-section">
|
|
117
|
+
<h2>Card Variants</h2>
|
|
118
|
+
<p>Different visual styles for various use cases.</p>
|
|
119
|
+
<div class="card-grid">
|
|
120
|
+
<ui-card variant="default" shadow elevation="sm">
|
|
121
|
+
<div class="card-content">
|
|
122
|
+
<h3>Default Variant</h3>
|
|
123
|
+
<p>Standard card style with border and background.</p>
|
|
124
|
+
</div>
|
|
125
|
+
</ui-card>
|
|
126
|
+
|
|
127
|
+
<ui-card variant="elevated" shadow elevation="md">
|
|
128
|
+
<div class="card-content">
|
|
129
|
+
<h3>Elevated Variant</h3>
|
|
130
|
+
<p>Premium look with gradient background and glow effect on hover.</p>
|
|
131
|
+
</div>
|
|
132
|
+
</ui-card>
|
|
133
|
+
|
|
134
|
+
<ui-card variant="bordered" shadow elevation="sm">
|
|
135
|
+
<div class="card-content">
|
|
136
|
+
<h3>Bordered Variant</h3>
|
|
137
|
+
<p>Strong border for emphasis and structure.</p>
|
|
138
|
+
</div>
|
|
139
|
+
</ui-card>
|
|
140
|
+
|
|
141
|
+
<ui-card variant="ghost">
|
|
142
|
+
<div class="card-content">
|
|
143
|
+
<h3>Ghost Variant</h3>
|
|
144
|
+
<p>Subtle dashed border with transparent background.</p>
|
|
145
|
+
</div>
|
|
146
|
+
</ui-card>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
|
|
150
|
+
<div class="demo-section">
|
|
151
|
+
<h2>Custom Shadow Colors</h2>
|
|
152
|
+
<p>Cards with colored shadows for creative effects.</p>
|
|
153
|
+
<div class="card-grid">
|
|
154
|
+
<ui-card shadow shadow-color="99, 102, 241" elevation="lg">
|
|
155
|
+
<div class="card-content">
|
|
156
|
+
<h3>Blue Shadow</h3>
|
|
157
|
+
<p>Card with a blue-tinted shadow for a cool, modern look.</p>
|
|
158
|
+
<span class="tag">RGB: 99, 102, 241</span>
|
|
159
|
+
</div>
|
|
160
|
+
</ui-card>
|
|
161
|
+
|
|
162
|
+
<ui-card shadow shadow-color="236, 72, 153" elevation="lg">
|
|
163
|
+
<div class="card-content">
|
|
164
|
+
<h3>Pink Shadow</h3>
|
|
165
|
+
<p>Vibrant pink shadow creates an energetic, playful aesthetic.</p>
|
|
166
|
+
<span class="tag error">RGB: 236, 72, 153</span>
|
|
167
|
+
</div>
|
|
168
|
+
</ui-card>
|
|
169
|
+
|
|
170
|
+
<ui-card shadow shadow-color="16, 185, 129" elevation="lg">
|
|
171
|
+
<div class="card-content">
|
|
172
|
+
<h3>Green Shadow</h3>
|
|
173
|
+
<p>Fresh green shadow perfect for success states and nature themes.</p>
|
|
174
|
+
<span class="tag success">RGB: 16, 185, 129</span>
|
|
175
|
+
</div>
|
|
176
|
+
</ui-card>
|
|
177
|
+
|
|
178
|
+
<ui-card shadow shadow-color="251, 146, 60" elevation="lg">
|
|
179
|
+
<div class="card-content">
|
|
180
|
+
<h3>Orange Shadow</h3>
|
|
181
|
+
<p>Warm orange shadow adds energy and attention-grabbing appeal.</p>
|
|
182
|
+
<span class="tag warning">RGB: 251, 146, 60</span>
|
|
183
|
+
</div>
|
|
184
|
+
</ui-card>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
<div class="demo-section">
|
|
189
|
+
<h2>Rounded Options</h2>
|
|
190
|
+
<p>Control corner radius with the rounded attribute.</p>
|
|
191
|
+
<div class="card-grid">
|
|
192
|
+
<ui-card rounded="true" shadow elevation="md">
|
|
193
|
+
<div class="card-content">
|
|
194
|
+
<h3>Rounded Card</h3>
|
|
195
|
+
<p>Default rounded corners (16px radius) for a soft, friendly appearance.</p>
|
|
196
|
+
</div>
|
|
197
|
+
</ui-card>
|
|
198
|
+
|
|
199
|
+
<ui-card rounded="false" shadow elevation="md">
|
|
200
|
+
<div class="card-content">
|
|
201
|
+
<h3>Square Card</h3>
|
|
202
|
+
<p>Sharp corners for a modern, geometric aesthetic.</p>
|
|
203
|
+
</div>
|
|
204
|
+
</ui-card>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
|
|
208
|
+
<div class="demo-section">
|
|
209
|
+
<h2>No Shadow</h2>
|
|
210
|
+
<p>Cards without shadow for minimal designs.</p>
|
|
211
|
+
<div class="card-grid">
|
|
212
|
+
<ui-card>
|
|
213
|
+
<div class="card-content">
|
|
214
|
+
<h3>Flat Card</h3>
|
|
215
|
+
<p>Minimal card with no shadow, perfect for clean, flat design systems.</p>
|
|
216
|
+
</div>
|
|
217
|
+
</ui-card>
|
|
218
|
+
|
|
219
|
+
<ui-card rounded="false">
|
|
220
|
+
<div class="card-content">
|
|
221
|
+
<h3>Flat Square Card</h3>
|
|
222
|
+
<p>Flat card with square corners for brutalist or industrial aesthetics.</p>
|
|
223
|
+
</div>
|
|
224
|
+
</ui-card>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
`;
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
customElements.define("card-demo-page", d);
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import { B as o } from "./index-DiYekJaQ.js";
|
|
2
|
+
const c = `<h1>📅 Date Picker Component Demo</h1>
|
|
3
|
+
|
|
4
|
+
<div class="demo-section">
|
|
5
|
+
<h2>Different Date Formats</h2>
|
|
6
|
+
|
|
7
|
+
<div class="picker-row">
|
|
8
|
+
<div class="picker-label">Format: YYYY-MM-DD (ISO)</div>
|
|
9
|
+
<div class="picker-controls">
|
|
10
|
+
<ui-date-picker id="picker1" format="YYYY-MM-DD"></ui-date-picker>
|
|
11
|
+
<ui-button class="clear-btn" data-picker="picker1" variant="secondary">Clear</ui-button>
|
|
12
|
+
</div>
|
|
13
|
+
<div class="output" id="output-picker1">Select a date to see the output</div>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<div class="picker-row">
|
|
17
|
+
<div class="picker-label">Format: DD/MM/YYYY (European)</div>
|
|
18
|
+
<div class="picker-controls">
|
|
19
|
+
<ui-date-picker id="picker2" format="DD/MM/YYYY"></ui-date-picker>
|
|
20
|
+
<ui-button class="clear-btn" data-picker="picker2" variant="secondary">Clear</ui-button>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="output" id="output-picker2">Select a date to see the output</div>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<div class="picker-row">
|
|
26
|
+
<div class="picker-label">Format: MM/DD/YYYY (US)</div>
|
|
27
|
+
<div class="picker-controls">
|
|
28
|
+
<ui-date-picker id="picker3" format="MM/DD/YYYY"></ui-date-picker>
|
|
29
|
+
<ui-button class="clear-btn" data-picker="picker3" variant="secondary">Clear</ui-button>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="output" id="output-picker3">Select a date to see the output</div>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div class="picker-row">
|
|
35
|
+
<div class="picker-label">Format: DD-MM-YYYY</div>
|
|
36
|
+
<div class="picker-controls">
|
|
37
|
+
<ui-date-picker id="picker4" format="DD-MM-YYYY"></ui-date-picker>
|
|
38
|
+
<ui-button class="clear-btn" data-picker="picker4" variant="secondary">Clear</ui-button>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="output" id="output-picker4">Select a date to see the output</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<div class="picker-row">
|
|
44
|
+
<div class="picker-label">Format: MM-DD-YYYY</div>
|
|
45
|
+
<div class="picker-controls">
|
|
46
|
+
<ui-date-picker id="picker5" format="MM-DD-YYYY"></ui-date-picker>
|
|
47
|
+
<ui-button class="clear-btn" data-picker="picker5" variant="secondary">Clear</ui-button>
|
|
48
|
+
</div>
|
|
49
|
+
<div class="output" id="output-picker5">Select a date to see the output</div>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<div class="demo-section">
|
|
54
|
+
<h2>With Constraints</h2>
|
|
55
|
+
|
|
56
|
+
<div class="picker-row">
|
|
57
|
+
<div class="picker-label">With Min and Max Dates</div>
|
|
58
|
+
<div class="picker-controls">
|
|
59
|
+
<ui-date-picker id="picker6" format="DD/MM/YYYY" min="2026-01-01" max="2026-12-31"></ui-date-picker>
|
|
60
|
+
<ui-button class="clear-btn" data-picker="picker6" variant="secondary">Clear</ui-button>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="output" id="output-picker6">Only dates in 2026 are allowed</div>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
<div class="picker-row">
|
|
66
|
+
<div class="picker-label">Disabled State</div>
|
|
67
|
+
<div class="picker-controls">
|
|
68
|
+
<ui-date-picker id="picker7" format="DD/MM/YYYY" disabled></ui-date-picker>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="output" id="output-picker7">This picker is disabled</div>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<div class="picker-row">
|
|
74
|
+
<div class="picker-label">With Initial Value</div>
|
|
75
|
+
<div class="picker-controls">
|
|
76
|
+
<ui-date-picker id="picker8" format="DD/MM/YYYY" value="2026-02-26"></ui-date-picker>
|
|
77
|
+
<ui-button class="clear-btn" data-picker="picker8" variant="secondary">Clear</ui-button>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="output" id="output-picker8">Initial value: 2026-02-26</div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
<div class="demo-section">
|
|
84
|
+
<h2>Usage Example</h2>
|
|
85
|
+
<div class="code-block">
|
|
86
|
+
<code><ui-date-picker
|
|
87
|
+
format="DD/MM/YYYY"
|
|
88
|
+
value="2026-02-26"
|
|
89
|
+
min="2026-01-01"
|
|
90
|
+
max="2026-12-31"
|
|
91
|
+
></ui-date-picker>
|
|
92
|
+
|
|
93
|
+
<script>
|
|
94
|
+
const picker = document.querySelector('ui-date-picker');
|
|
95
|
+
|
|
96
|
+
// Listen to date changes
|
|
97
|
+
picker.addEventListener('date-change', (e) => {
|
|
98
|
+
console.log('ISO Value:', e.detail.value);
|
|
99
|
+
console.log('Formatted Value:', e.detail.formattedValue);
|
|
100
|
+
console.log('Format:', e.detail.format);
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
// Programmatic API
|
|
104
|
+
picker.setValue('2026-03-15');
|
|
105
|
+
console.log(picker.getISOValue()); // "2026-03-15"
|
|
106
|
+
console.log(picker.getFormattedValue()); // "15/03/2026"
|
|
107
|
+
picker.clear();
|
|
108
|
+
</script></code>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
`, d = ":host{display:block;padding:2rem;max-width:1200px;margin:0 auto}h1{font-size:2rem;margin-bottom:2rem;color:var(--color-ink, #0f172a)}h2{font-size:1.5rem;margin-top:2rem;margin-bottom:1rem;color:var(--color-ink, #0f172a)}.demo-section{margin-bottom:3rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.picker-row{margin-bottom:2rem}.picker-label{font-weight:600;margin-bottom:.5rem;color:var(--color-ink, #0f172a)}.picker-controls{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}ui-date-picker{flex:1;min-width:250px}.output{margin-top:1rem;padding:1rem;background:#f8fafc;border-radius:8px;font-family:Courier New,monospace;font-size:.85rem;white-space:pre-wrap;color:#334155}.code-block{background:#f1f5f9;padding:1rem;border-radius:8px;overflow-x:auto;margin:1rem 0}code{font-family:Courier New,monospace;font-size:.9rem;color:#334155}";
|
|
112
|
+
class s extends o {
|
|
113
|
+
connectedCallback() {
|
|
114
|
+
super.connectedCallback(), this.attachEventListeners();
|
|
115
|
+
}
|
|
116
|
+
attachEventListeners() {
|
|
117
|
+
if (!this.shadowRoot) return;
|
|
118
|
+
this.shadowRoot.querySelectorAll("ui-date-picker").forEach((i) => {
|
|
119
|
+
i.addEventListener("date-change", (a) => {
|
|
120
|
+
var e;
|
|
121
|
+
const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(`#output-${i.id}`);
|
|
122
|
+
t && (t.textContent = JSON.stringify(a.detail, null, 2));
|
|
123
|
+
});
|
|
124
|
+
}), this.shadowRoot.addEventListener("click", (i) => {
|
|
125
|
+
var t, e;
|
|
126
|
+
const a = i.target;
|
|
127
|
+
if (a.closest(".clear-btn")) {
|
|
128
|
+
const n = (t = a.closest(".clear-btn")) == null ? void 0 : t.getAttribute("data-picker"), r = (e = this.shadowRoot) == null ? void 0 : e.querySelector(`#${n}`);
|
|
129
|
+
r && r.clear && r.clear();
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
render() {
|
|
134
|
+
this.shadowRoot.innerHTML = `
|
|
135
|
+
<style>${d}</style>
|
|
136
|
+
${c}
|
|
137
|
+
`;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
customElements.define("date-picker-demo", s);
|
|
141
|
+
export {
|
|
142
|
+
s as DatePickerDemo
|
|
143
|
+
};
|