grav-svelte 0.0.64 → 0.0.66
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.
|
@@ -0,0 +1,287 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
export let valueVar: string = "";
|
|
3
|
+
export let label: string;
|
|
4
|
+
export let disabled = false;
|
|
5
|
+
export let obligatory = false;
|
|
6
|
+
export let icon: string | null = null;
|
|
7
|
+
|
|
8
|
+
// Preset colors - 8 distinct colors
|
|
9
|
+
const presetColors = [
|
|
10
|
+
"#3B82F6", // Blue
|
|
11
|
+
"#10B981", // Green
|
|
12
|
+
"#8B5CF6", // Purple
|
|
13
|
+
"#F59E0B", // Amber
|
|
14
|
+
"#EF4444", // Red
|
|
15
|
+
"#EC4899", // Pink
|
|
16
|
+
"#06B6D4", // Cyan
|
|
17
|
+
"#84CC16", // Lime
|
|
18
|
+
];
|
|
19
|
+
|
|
20
|
+
function selectColor(color: string) {
|
|
21
|
+
if (!disabled) {
|
|
22
|
+
valueVar = color;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function handleHexInput(event: Event) {
|
|
27
|
+
const target = event.target as HTMLInputElement;
|
|
28
|
+
let value = target.value;
|
|
29
|
+
|
|
30
|
+
// Auto-add # if not present
|
|
31
|
+
if (value && !value.startsWith("#")) {
|
|
32
|
+
value = "#" + value;
|
|
33
|
+
target.value = value;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Validate hex format
|
|
37
|
+
if (value.match(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/)) {
|
|
38
|
+
valueVar = value;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
</script>
|
|
42
|
+
|
|
43
|
+
<div class="color-picker-container">
|
|
44
|
+
{#if icon}
|
|
45
|
+
<div class="icon-wrapper">
|
|
46
|
+
<i class="{icon} icon"></i>
|
|
47
|
+
</div>
|
|
48
|
+
{/if}
|
|
49
|
+
|
|
50
|
+
<div class="color-picker-wrapper">
|
|
51
|
+
<!-- Label -->
|
|
52
|
+
<label class="main-label">
|
|
53
|
+
{label}
|
|
54
|
+
{#if obligatory}
|
|
55
|
+
<span class="required-mark"> *</span>
|
|
56
|
+
{/if}
|
|
57
|
+
</label>
|
|
58
|
+
|
|
59
|
+
<!-- Preset Colors Section -->
|
|
60
|
+
<div class="section-label">Colores predefinidos</div>
|
|
61
|
+
<div class="preset-colors-grid">
|
|
62
|
+
{#each presetColors as color}
|
|
63
|
+
<button
|
|
64
|
+
type="button"
|
|
65
|
+
class="color-swatch"
|
|
66
|
+
class:selected={valueVar.toUpperCase() === color.toUpperCase()}
|
|
67
|
+
style="background-color: {color};"
|
|
68
|
+
on:click={() => selectColor(color)}
|
|
69
|
+
{disabled}
|
|
70
|
+
aria-label="Select {color}"
|
|
71
|
+
>
|
|
72
|
+
{#if valueVar.toUpperCase() === color.toUpperCase()}
|
|
73
|
+
<svg class="checkmark" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
74
|
+
<path d="M5 13l4 4L19 7" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
75
|
+
</svg>
|
|
76
|
+
{/if}
|
|
77
|
+
</button>
|
|
78
|
+
{/each}
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<!-- Custom Color Section -->
|
|
82
|
+
<div class="section-label custom-section">Color personalizado</div>
|
|
83
|
+
<div class="custom-color-picker">
|
|
84
|
+
<button
|
|
85
|
+
type="button"
|
|
86
|
+
class="color-preview"
|
|
87
|
+
style="background-color: {valueVar};"
|
|
88
|
+
on:click={() => !disabled && document.getElementById('color-input-' + label)?.click()}
|
|
89
|
+
{disabled}
|
|
90
|
+
aria-label="Open color picker"
|
|
91
|
+
>
|
|
92
|
+
<input
|
|
93
|
+
id="color-input-{label}"
|
|
94
|
+
{disabled}
|
|
95
|
+
type="color"
|
|
96
|
+
bind:value={valueVar}
|
|
97
|
+
class="hidden-color-input"
|
|
98
|
+
/>
|
|
99
|
+
</button>
|
|
100
|
+
<input
|
|
101
|
+
type="text"
|
|
102
|
+
class="hex-input"
|
|
103
|
+
value={valueVar.toUpperCase()}
|
|
104
|
+
on:input={handleHexInput}
|
|
105
|
+
placeholder="#3B82F6"
|
|
106
|
+
{disabled}
|
|
107
|
+
maxlength="7"
|
|
108
|
+
/>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<style>
|
|
114
|
+
.color-picker-container {
|
|
115
|
+
display: flex;
|
|
116
|
+
align-items: flex-start;
|
|
117
|
+
width: 100%;
|
|
118
|
+
margin-top: 1rem;
|
|
119
|
+
gap: 0.5rem;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.icon-wrapper {
|
|
123
|
+
width: 1rem;
|
|
124
|
+
position: relative;
|
|
125
|
+
margin-top: 0.5rem;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.icon {
|
|
129
|
+
position: absolute;
|
|
130
|
+
top: 0;
|
|
131
|
+
left: 0.25rem;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.color-picker-wrapper {
|
|
135
|
+
flex: 1;
|
|
136
|
+
width: 100%;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.main-label {
|
|
140
|
+
display: block;
|
|
141
|
+
font-size: 1.1rem;
|
|
142
|
+
font-weight: 600;
|
|
143
|
+
color: var(--grav-crud-color-neutral, #374151);
|
|
144
|
+
margin-bottom: 1rem;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.section-label {
|
|
148
|
+
font-size: 0.95rem;
|
|
149
|
+
font-weight: 500;
|
|
150
|
+
color: var(--grav-crud-color-neutral, #4B5563);
|
|
151
|
+
margin-bottom: 0.75rem;
|
|
152
|
+
margin-top: 1.25rem;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.section-label:first-of-type {
|
|
156
|
+
margin-top: 0;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.preset-colors-grid {
|
|
160
|
+
display: grid;
|
|
161
|
+
grid-template-columns: repeat(4, 1fr);
|
|
162
|
+
gap: 0.5rem;
|
|
163
|
+
max-width: 140px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.color-swatch {
|
|
167
|
+
aspect-ratio: 1;
|
|
168
|
+
border-radius: 0.625rem;
|
|
169
|
+
border: 2px solid transparent;
|
|
170
|
+
cursor: pointer;
|
|
171
|
+
transition: all 0.2s ease;
|
|
172
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
173
|
+
display: flex;
|
|
174
|
+
align-items: center;
|
|
175
|
+
justify-content: center;
|
|
176
|
+
position: relative;
|
|
177
|
+
min-height: 20px;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.color-swatch:hover:not(:disabled) {
|
|
181
|
+
transform: scale(1.05);
|
|
182
|
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.color-swatch.selected {
|
|
186
|
+
border-color: #1F2937;
|
|
187
|
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.color-swatch:disabled {
|
|
191
|
+
cursor: not-allowed;
|
|
192
|
+
opacity: 0.5;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.checkmark {
|
|
196
|
+
width: 12px;
|
|
197
|
+
height: 12px;
|
|
198
|
+
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.custom-color-picker {
|
|
202
|
+
display: flex;
|
|
203
|
+
align-items: center;
|
|
204
|
+
gap: 0.75rem;
|
|
205
|
+
max-width: 600px;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.color-preview {
|
|
209
|
+
width: 50px;
|
|
210
|
+
height: 50px;
|
|
211
|
+
border-radius: 0.75rem;
|
|
212
|
+
border: 2px solid #E5E7EB;
|
|
213
|
+
cursor: pointer;
|
|
214
|
+
transition: all 0.2s ease;
|
|
215
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
216
|
+
flex-shrink: 0;
|
|
217
|
+
position: relative;
|
|
218
|
+
overflow: hidden;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.color-preview:hover:not(:disabled) {
|
|
222
|
+
transform: scale(1.05);
|
|
223
|
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.color-preview:disabled {
|
|
227
|
+
cursor: not-allowed;
|
|
228
|
+
opacity: 0.5;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.hidden-color-input {
|
|
232
|
+
position: absolute;
|
|
233
|
+
width: 100%;
|
|
234
|
+
height: 100%;
|
|
235
|
+
opacity: 0;
|
|
236
|
+
cursor: pointer;
|
|
237
|
+
border: none;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.hex-input {
|
|
241
|
+
flex: 1;
|
|
242
|
+
padding: 0.625rem 0.875rem;
|
|
243
|
+
font-size: 0.95rem;
|
|
244
|
+
border: 2px solid #E5E7EB;
|
|
245
|
+
border-radius: 0.75rem;
|
|
246
|
+
background: #F9FAFB;
|
|
247
|
+
color: var(--grav-crud-color-neutral, #1F2937);
|
|
248
|
+
font-weight: 500;
|
|
249
|
+
transition: all 0.2s ease;
|
|
250
|
+
text-transform: uppercase;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.hex-input:focus {
|
|
254
|
+
outline: none;
|
|
255
|
+
border-color: #000000;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.hex-input:disabled {
|
|
259
|
+
cursor: not-allowed;
|
|
260
|
+
opacity: 0.5;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.required-mark {
|
|
264
|
+
color: #dc2626;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
@media (max-width: 640px) {
|
|
268
|
+
.preset-colors-grid {
|
|
269
|
+
grid-template-columns: repeat(4, 1fr);
|
|
270
|
+
gap: 0.4rem;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.color-swatch {
|
|
274
|
+
min-height: 18px;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.color-preview {
|
|
278
|
+
width: 45px;
|
|
279
|
+
height: 45px;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.hex-input {
|
|
283
|
+
font-size: 0.875rem;
|
|
284
|
+
padding: 0.625rem 0.75rem;
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
</style>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
valueVar?: string;
|
|
5
|
+
label: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
obligatory?: boolean;
|
|
8
|
+
icon?: string | null;
|
|
9
|
+
};
|
|
10
|
+
events: {
|
|
11
|
+
[evt: string]: CustomEvent<any>;
|
|
12
|
+
};
|
|
13
|
+
slots: {};
|
|
14
|
+
};
|
|
15
|
+
export type InputFormColorPickerProps = typeof __propDef.props;
|
|
16
|
+
export type InputFormColorPickerEvents = typeof __propDef.events;
|
|
17
|
+
export type InputFormColorPickerSlots = typeof __propDef.slots;
|
|
18
|
+
export default class InputFormColorPicker extends SvelteComponentTyped<InputFormColorPickerProps, InputFormColorPickerEvents, InputFormColorPickerSlots> {
|
|
19
|
+
}
|
|
20
|
+
export {};
|
package/dist/Inputs/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { default as InputFormBool } from './InputFormBool.svelte';
|
|
2
2
|
export { default as InputFormCascade } from './InputFormCascade.svelte';
|
|
3
3
|
export { default as InputFormColor } from './InputFormColor.svelte';
|
|
4
|
+
export { default as InputFormColorPicker } from './InputFormColorPicker.svelte';
|
|
4
5
|
export { default as InputFormDate } from './InputFormDate.svelte';
|
|
5
6
|
export { default as InputFormDateAndHours } from './InputFormDateAndHours.svelte';
|
|
6
7
|
export { default as InputFormImage } from './InputFormImage.svelte';
|
package/dist/Inputs/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { default as InputFormBool } from './InputFormBool.svelte';
|
|
2
2
|
export { default as InputFormCascade } from './InputFormCascade.svelte';
|
|
3
3
|
export { default as InputFormColor } from './InputFormColor.svelte';
|
|
4
|
+
export { default as InputFormColorPicker } from './InputFormColorPicker.svelte';
|
|
4
5
|
export { default as InputFormDate } from './InputFormDate.svelte';
|
|
5
6
|
export { default as InputFormDateAndHours } from './InputFormDateAndHours.svelte';
|
|
6
7
|
export { default as InputFormImage } from './InputFormImage.svelte';
|