hamzus-ui 0.0.52 → 0.0.54
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/package.json
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
export let onChange = undefined
|
|
9
9
|
export let label = ""
|
|
10
10
|
export let name = ""
|
|
11
|
+
export let variant = "default" // "default" | "collapse"
|
|
11
12
|
export let required = false
|
|
12
13
|
|
|
13
14
|
const monthList = {
|
|
@@ -139,28 +140,30 @@
|
|
|
139
140
|
}
|
|
140
141
|
</script>
|
|
141
142
|
|
|
142
|
-
<div class="date-picker">
|
|
143
|
+
<div class="date-picker {variant}">
|
|
143
144
|
{#if label}
|
|
144
145
|
<h5>{label}</h5>
|
|
145
146
|
{/if}
|
|
146
147
|
<DropdownMenu.Root triggerFullWidth bind:toggleDisplay>
|
|
147
148
|
<DropdownMenu.Trigger slot="trigger">
|
|
148
|
-
<
|
|
149
|
-
<
|
|
150
|
-
|
|
151
|
-
<
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
149
|
+
<div class="date-container">
|
|
150
|
+
<Button variant="outline" style="width:100%">
|
|
151
|
+
<input class="date-input" {required} type="date" {name} {value}>
|
|
152
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
153
|
+
<path d="M8 5.75C7.59 5.75 7.25 5.41 7.25 5V2C7.25 1.59 7.59 1.25 8 1.25C8.41 1.25 8.75 1.59 8.75 2V5C8.75 5.41 8.41 5.75 8 5.75Z" fill="white" />
|
|
154
|
+
<path d="M16 5.75C15.59 5.75 15.25 5.41 15.25 5V2C15.25 1.59 15.59 1.25 16 1.25C16.41 1.25 16.75 1.59 16.75 2V5C16.75 5.41 16.41 5.75 16 5.75Z" fill="white" />
|
|
155
|
+
<path d="M8.5 14.5003C8.37 14.5003 8.24 14.4703 8.12 14.4203C7.99 14.3703 7.89 14.3003 7.79 14.2103C7.61 14.0203 7.5 13.7703 7.5 13.5003C7.5 13.3703 7.53 13.2403 7.58 13.1203C7.63 13.0003 7.7 12.8903 7.79 12.7903C7.89 12.7003 7.99 12.6303 8.12 12.5803C8.48 12.4303 8.93 12.5103 9.21 12.7903C9.39 12.9803 9.5 13.2403 9.5 13.5003C9.5 13.5603 9.49 13.6303 9.48 13.7003C9.47 13.7603 9.45 13.8203 9.42 13.8803C9.4 13.9403 9.37 14.0003 9.33 14.0603C9.3 14.1103 9.25 14.1603 9.21 14.2103C9.02 14.3903 8.76 14.5003 8.5 14.5003Z" fill="white" />
|
|
156
|
+
<path d="M12 14.5008C11.87 14.5008 11.74 14.4709 11.62 14.4209C11.49 14.3709 11.39 14.3008 11.29 14.2108C11.11 14.0208 11 13.7708 11 13.5008C11 13.3708 11.03 13.2408 11.08 13.1208C11.13 13.0008 11.2 12.8909 11.29 12.7909C11.39 12.7009 11.49 12.6308 11.62 12.5808C11.98 12.4208 12.43 12.5109 12.71 12.7909C12.89 12.9809 13 13.2408 13 13.5008C13 13.5608 12.99 13.6309 12.98 13.7009C12.97 13.7609 12.95 13.8209 12.92 13.8809C12.9 13.9409 12.87 14.0008 12.83 14.0608C12.8 14.1108 12.75 14.1608 12.71 14.2108C12.52 14.3908 12.26 14.5008 12 14.5008Z" fill="white" />
|
|
157
|
+
<path d="M15.5 14.5008C15.37 14.5008 15.24 14.4709 15.12 14.4209C14.99 14.3709 14.89 14.3008 14.79 14.2108C14.75 14.1608 14.71 14.1108 14.67 14.0608C14.63 14.0008 14.6 13.9409 14.58 13.8809C14.55 13.8209 14.53 13.7609 14.52 13.7009C14.51 13.6309 14.5 13.5608 14.5 13.5008C14.5 13.2408 14.61 12.9809 14.79 12.7909C14.89 12.7009 14.99 12.6308 15.12 12.5808C15.49 12.4208 15.93 12.5109 16.21 12.7909C16.39 12.9809 16.5 13.2408 16.5 13.5008C16.5 13.5608 16.49 13.6309 16.48 13.7009C16.47 13.7609 16.45 13.8209 16.42 13.8809C16.4 13.9409 16.37 14.0008 16.33 14.0608C16.3 14.1108 16.25 14.1608 16.21 14.2108C16.02 14.3908 15.76 14.5008 15.5 14.5008Z" fill="white" />
|
|
158
|
+
<path d="M8.5 17.9992C8.37 17.9992 8.24 17.9692 8.12 17.9192C8 17.8692 7.89 17.7992 7.79 17.7092C7.61 17.5192 7.5 17.2592 7.5 16.9992C7.5 16.8692 7.53 16.7392 7.58 16.6192C7.63 16.4892 7.7 16.3792 7.79 16.2892C8.16 15.9192 8.84 15.9192 9.21 16.2892C9.39 16.4792 9.5 16.7392 9.5 16.9992C9.5 17.2592 9.39 17.5192 9.21 17.7092C9.02 17.8892 8.76 17.9992 8.5 17.9992Z" fill="white" />
|
|
159
|
+
<path d="M12 17.9992C11.74 17.9992 11.48 17.8892 11.29 17.7092C11.11 17.5192 11 17.2592 11 16.9992C11 16.8692 11.03 16.7392 11.08 16.6192C11.13 16.4892 11.2 16.3792 11.29 16.2892C11.66 15.9192 12.34 15.9192 12.71 16.2892C12.8 16.3792 12.87 16.4892 12.92 16.6192C12.97 16.7392 13 16.8692 13 16.9992C13 17.2592 12.89 17.5192 12.71 17.7092C12.52 17.8892 12.26 17.9992 12 17.9992Z" fill="white" />
|
|
160
|
+
<path d="M15.5 18.0009C15.24 18.0009 14.98 17.8909 14.79 17.7109C14.7 17.6209 14.63 17.5109 14.58 17.3809C14.53 17.2609 14.5 17.1309 14.5 17.0009C14.5 16.8709 14.53 16.7409 14.58 16.6209C14.63 16.4909 14.7 16.3809 14.79 16.2909C15.02 16.0609 15.37 15.9509 15.69 16.0209C15.76 16.0309 15.82 16.0509 15.88 16.0809C15.94 16.1009 16 16.1309 16.06 16.1709C16.11 16.2009 16.16 16.2509 16.21 16.2909C16.39 16.4809 16.5 16.7409 16.5 17.0009C16.5 17.2609 16.39 17.5209 16.21 17.7109C16.02 17.8909 15.76 18.0009 15.5 18.0009Z" fill="white" />
|
|
161
|
+
<path d="M20.5 9.83984H3.5C3.09 9.83984 2.75 9.49984 2.75 9.08984C2.75 8.67984 3.09 8.33984 3.5 8.33984H20.5C20.91 8.33984 21.25 8.67984 21.25 9.08984C21.25 9.49984 20.91 9.83984 20.5 9.83984Z" fill="white" />
|
|
162
|
+
<path d="M16 22.75H8C4.35 22.75 2.25 20.65 2.25 17V8.5C2.25 4.85 4.35 2.75 8 2.75H16C19.65 2.75 21.75 4.85 21.75 8.5V17C21.75 20.65 19.65 22.75 16 22.75ZM8 4.25C5.14 4.25 3.75 5.64 3.75 8.5V17C3.75 19.86 5.14 21.25 8 21.25H16C18.86 21.25 20.25 19.86 20.25 17V8.5C20.25 5.64 18.86 4.25 16 4.25H8Z" fill="white" />
|
|
163
|
+
</svg>
|
|
164
|
+
{labelMonth}
|
|
165
|
+
</Button>
|
|
166
|
+
</div>
|
|
164
167
|
</DropdownMenu.Trigger>
|
|
165
168
|
<DropdownMenu.Content
|
|
166
169
|
slot="content"
|
|
@@ -232,6 +235,24 @@
|
|
|
232
235
|
|
|
233
236
|
</div>
|
|
234
237
|
<style>
|
|
238
|
+
.date-picker.collapse {
|
|
239
|
+
display: flex;
|
|
240
|
+
flex-direction: column;
|
|
241
|
+
padding: var(--pad-s);
|
|
242
|
+
background-color: var(--bg-2);
|
|
243
|
+
border-radius: var(--radius-l);
|
|
244
|
+
|
|
245
|
+
}
|
|
246
|
+
.date-picker.collapse .date-container {
|
|
247
|
+
padding: 0;
|
|
248
|
+
}
|
|
249
|
+
.date-container {
|
|
250
|
+
display: flex;
|
|
251
|
+
flex-direction: column;
|
|
252
|
+
padding: var(--pad-s);
|
|
253
|
+
background-color: var(--bg-2);
|
|
254
|
+
border-radius: var(--radius-l);
|
|
255
|
+
}
|
|
235
256
|
|
|
236
257
|
|
|
237
258
|
.month-selector {
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
export let fullWidth = false;
|
|
22
22
|
export let type = '';
|
|
23
23
|
export let style = '';
|
|
24
|
+
export let step = '';
|
|
24
25
|
export let placeholder = '';
|
|
25
26
|
export let errorMessage = '';
|
|
26
27
|
export let isLoading = false;
|
|
@@ -127,6 +128,7 @@
|
|
|
127
128
|
{value}
|
|
128
129
|
{required}
|
|
129
130
|
disabled={isLoading ? true : disabled}
|
|
131
|
+
{step}
|
|
130
132
|
|
|
131
133
|
/>
|
|
132
134
|
{#if type == 'password'}
|