grav-svelte 0.0.84 → 0.0.85

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.
Files changed (23) hide show
  1. package/dist/Inputs/InputFormBool.svelte +59 -57
  2. package/dist/Inputs/InputFormCascade.svelte +94 -93
  3. package/dist/Inputs/InputFormColor.svelte +107 -105
  4. package/dist/Inputs/InputFormColor.svelte.d.ts +1 -0
  5. package/dist/Inputs/InputFormColorPicker.svelte +281 -261
  6. package/dist/Inputs/InputFormColorPicker.svelte.d.ts +1 -0
  7. package/dist/Inputs/InputFormDate.svelte +122 -120
  8. package/dist/Inputs/InputFormDate.svelte.d.ts +1 -0
  9. package/dist/Inputs/InputFormDateAndHours.svelte +122 -120
  10. package/dist/Inputs/InputFormDateAndHours.svelte.d.ts +1 -0
  11. package/dist/Inputs/InputFormImage.svelte +195 -203
  12. package/dist/Inputs/InputFormImage.svelte.d.ts +1 -0
  13. package/dist/Inputs/InputFormNumber.svelte +101 -98
  14. package/dist/Inputs/InputFormNumber.svelte.d.ts +1 -0
  15. package/dist/Inputs/InputFormPassword.svelte +159 -149
  16. package/dist/Inputs/InputFormPassword.svelte.d.ts +1 -0
  17. package/dist/Inputs/InputFormSelect.svelte +104 -91
  18. package/dist/Inputs/InputFormSelect.svelte.d.ts +1 -0
  19. package/dist/Inputs/InputFormText.svelte +102 -99
  20. package/dist/Inputs/InputFormText.svelte.d.ts +1 -0
  21. package/dist/Inputs/InputFormTextArea.svelte +103 -100
  22. package/dist/Inputs/InputFormTextArea.svelte.d.ts +1 -0
  23. package/package.json +1 -1
package/dist/Inputs/InputFormBool.svelte CHANGED
@@ -1,71 +1,73 @@
1
1
  <script>
2
- export let valueVar = false;
3
- export let label;
4
- export let disabled = false;
2
+ import "../typography.css";
3
+
4
+ export let valueVar = false;
5
+ export let label;
6
+ export let disabled = false;
5
7
  </script>
6
8
 
7
9
  <div class="input-container">
8
- {#if valueVar}
9
- <button
10
- aria-label="checkbox"
11
- {disabled}
12
- on:click={() => (valueVar = false)}
13
- class="checkbox-button checked"
14
- >
15
- <i class="fas fa-check checkwhite"></i>
16
- </button>
17
- {:else}
18
- <button
19
- aria-label="checkbox"
20
- {disabled}
21
- on:click={() => (valueVar = true)}
22
- class="checkbox-button"
23
- >
24
- <i class="fas fa-minus"></i>
25
- </button>
26
- {/if}
27
- <h1 class="label">{label}</h1>
10
+ {#if valueVar}
11
+ <button
12
+ aria-label="checkbox"
13
+ {disabled}
14
+ on:click={() => (valueVar = false)}
15
+ class="checkbox-button checked"
16
+ >
17
+ <i class="fas fa-check checkwhite"></i>
18
+ </button>
19
+ {:else}
20
+ <button
21
+ aria-label="checkbox"
22
+ {disabled}
23
+ on:click={() => (valueVar = true)}
24
+ class="checkbox-button"
25
+ >
26
+ <i class="fas fa-minus"></i>
27
+ </button>
28
+ {/if}
29
+ <h1 class="label">{label}</h1>
28
30
  </div>
29
31
 
30
32
  <style>
31
- .input-container {
32
- display: flex;
33
- align-items: center;
33
+ .input-container {
34
+ display: flex;
35
+ align-items: center;
34
36
 
35
- height: fit-content;
37
+ height: fit-content;
36
38
 
37
- margin-top: 1.95rem;
38
- }
39
+ margin-top: 1.95rem;
40
+ }
39
41
 
40
- .checkbox-button {
41
- margin-right: 0.5rem;
42
- height: 2.7rem;
43
- width: 2.7rem;
44
- background: transparent;
45
- border: var(--grav-crud-input-border-width) solid
46
- var(--grav-crud-color-neutral);
47
- color: var(--grav-crud-color-neutral);
48
- cursor: pointer;
49
- border-radius: 0.5rem;
50
- padding-left: 0.5rem;
51
- padding-right: 0.5rem;
52
- padding-top: 0.2rem;
53
- padding-bottom: 0.2rem;
54
- }
42
+ .checkbox-button {
43
+ margin-right: 0.5rem;
44
+ height: 2.7rem;
45
+ width: 2.7rem;
46
+ background: transparent;
47
+ border: var(--grav-crud-input-border-width) solid
48
+ var(--grav-crud-color-neutral);
49
+ color: var(--grav-crud-color-neutral);
50
+ cursor: pointer;
51
+ border-radius: 0.5rem;
52
+ padding-left: 0.5rem;
53
+ padding-right: 0.5rem;
54
+ padding-top: 0.2rem;
55
+ padding-bottom: 0.2rem;
56
+ }
55
57
 
56
- .checkbox-button.checked {
57
- background-color: var(--grav-crud-color-primary);
58
- color: var(--grav-crud-color-icon);
59
- }
58
+ .checkbox-button.checked {
59
+ background-color: var(--grav-crud-color-primary);
60
+ color: var(--grav-crud-color-icon);
61
+ }
60
62
 
61
- .label {
62
- font-size: 1rem;
63
- margin: 0;
64
- color: var(--grav-crud-color-neutral);
65
- }
63
+ .label {
64
+ font-size: 1rem;
65
+ margin: 0;
66
+ color: var(--grav-crud-color-neutral);
67
+ }
66
68
 
67
- button:disabled {
68
- opacity: 0.5;
69
- cursor: not-allowed;
70
- }
69
+ button:disabled {
70
+ opacity: 0.5;
71
+ cursor: not-allowed;
72
+ }
71
73
  </style>
package/dist/Inputs/InputFormCascade.svelte CHANGED
@@ -1,108 +1,109 @@
1
1
  <script>
2
- import { onMount } from 'svelte';
3
- import InputFormSelect from './InputFormSelect.svelte';
2
+ import "../typography.css";
3
+ import { onMount } from "svelte";
4
+ import InputFormSelect from "./InputFormSelect.svelte";
4
5
 
5
- export let levels = []; // [{ label, fetchFn, default, field, showPlusIcon?, onPlusClick? }]
6
- // Cargar datos iniciales para el primer nivel
7
- let varS = false;
8
- let fetchFnCloned = [];
9
- export let selectedValues = {};
6
+ export let levels = []; // [{ label, fetchFn, default, field, showPlusIcon?, onPlusClick? }]
7
+ // Cargar datos iniciales para el primer nivel
8
+ let varS = false;
9
+ let fetchFnCloned = [];
10
+ export let selectedValues = {};
10
11
 
11
- onMount(async () => {
12
- varS = false;
12
+ onMount(async () => {
13
+ varS = false;
13
14
 
14
- // Clonar las funciones fetch
15
- levels.forEach((item) => {
16
- fetchFnCloned.push({ fetchFn: item.fetchFn });
17
- });
15
+ // Clonar las funciones fetch
16
+ levels.forEach((item) => {
17
+ fetchFnCloned.push({ fetchFn: item.fetchFn });
18
+ });
18
19
 
19
- // Si hay valores iniciales, cargar y establecer los objetos Select completos
20
- for (let i = 0; i < levels.length; i++) {
21
- const level = levels[i];
22
- const initialValue = selectedValues[level.field];
20
+ // Si hay valores iniciales, cargar y establecer los objetos Select completos
21
+ for (let i = 0; i < levels.length; i++) {
22
+ const level = levels[i];
23
+ const initialValue = selectedValues[level.field];
23
24
 
24
- if (initialValue) {
25
- // Cargar las opciones para este nivel
26
- let options = [];
27
- if (i === 0) {
28
- options = await fetchFnCloned[i].fetchFn();
29
- } else {
30
- // Para niveles subsecuentes, necesitamos el valor del nivel anterior
31
- const parentValue = selectedValues[levels[i - 1].field];
32
- if (parentValue) {
33
- options = await fetchFnCloned[i].fetchFn(parentValue);
34
- }
35
- }
25
+ if (initialValue) {
26
+ // Cargar las opciones para este nivel
27
+ let options = [];
28
+ if (i === 0) {
29
+ options = await fetchFnCloned[i].fetchFn();
30
+ } else {
31
+ // Para niveles subsecuentes, necesitamos el valor del nivel anterior
32
+ const parentValue = selectedValues[levels[i - 1].field];
33
+ if (parentValue) {
34
+ options = await fetchFnCloned[i].fetchFn(parentValue);
35
+ }
36
+ }
36
37
 
37
- // Buscar el objeto Select que coincida con el valor inicial
38
- const selectedOption = options.find(opt => opt.value == initialValue);
39
- if (selectedOption) {
40
- levels[i].default = selectedOption;
41
- cacheResults[i] = options; // Cachear los resultados
42
- }
43
- } else {
44
- selectedValues[level.field] = level.default?.value;
45
- }
46
- }
38
+ // Buscar el objeto Select que coincida con el valor inicial
39
+ const selectedOption = options.find((opt) => opt.value == initialValue);
40
+ if (selectedOption) {
41
+ levels[i].default = selectedOption;
42
+ cacheResults[i] = options; // Cachear los resultados
43
+ }
44
+ } else {
45
+ selectedValues[level.field] = level.default?.value;
46
+ }
47
+ }
47
48
 
48
- varS = true;
49
- });
49
+ varS = true;
50
+ });
50
51
 
51
- let cacheResults = {};
52
- // Función para actualizar valores y cargar el siguiente nivel
53
- let ultimoIndexActualizado = 0;
54
- function handleChange(index, value, field) {
55
- levels[index].default = value;
56
- for (let i = index + 1; i < levels.length; i++) {
57
- levels[i].default = null;
58
- selectedValues[levels[i].field] = null;
59
- }
60
- selectedValues[field] = value?.value;
61
- ultimoIndexActualizado = index;
52
+ let cacheResults = {};
53
+ // Función para actualizar valores y cargar el siguiente nivel
54
+ let ultimoIndexActualizado = 0;
55
+ function handleChange(index, value, field) {
56
+ levels[index].default = value;
57
+ for (let i = index + 1; i < levels.length; i++) {
58
+ levels[i].default = null;
59
+ selectedValues[levels[i].field] = null;
60
+ }
61
+ selectedValues[field] = value?.value;
62
+ ultimoIndexActualizado = index;
62
63
 
63
- console.log(cacheResults);
64
- }
64
+ console.log(cacheResults);
65
+ }
65
66
  </script>
66
67
 
67
68
  {#if varS}
68
- {#each levels as level, i}
69
- {#if i == 0}
70
- {#await fetchFnCloned[0].fetchFn()}
71
- cargando {level.label}...
72
- {:then res}
73
- <InputFormSelect
74
- value={level?.default}
75
- label={level.label}
76
- {res}
77
- changeFunction={(e) => handleChange(0, e.detail, level.field)}
78
- onClear={() => handleChange(0, null, level.field)}
79
- showPlusIcon={level.showPlusIcon ?? false}
80
- onPlusClick={level.onPlusClick ?? (() => {})}
81
- />
82
- {/await}
83
- {/if}
69
+ {#each levels as level, i}
70
+ {#if i == 0}
71
+ {#await fetchFnCloned[0].fetchFn()}
72
+ cargando {level.label}...
73
+ {:then res}
74
+ <InputFormSelect
75
+ value={level?.default}
76
+ label={level.label}
77
+ {res}
78
+ changeFunction={(e) => handleChange(0, e.detail, level.field)}
79
+ onClear={() => handleChange(0, null, level.field)}
80
+ showPlusIcon={level.showPlusIcon ?? false}
81
+ onPlusClick={level.onPlusClick ?? (() => {})}
82
+ />
83
+ {/await}
84
+ {/if}
84
85
 
85
- {#if i > 0}
86
- {#if levels[i - 1]?.default?.value}
87
- {#await ultimoIndexActualizado >= i ? cacheResults[i] : fetchFnCloned[i].fetchFn(levels[i - 1]?.default?.value)}
88
- cargando {level.label}...
89
- {:then res}
90
- <div class=" hidden">
91
- {(cacheResults[i] = res)}
92
- </div>
93
- <InputFormSelect
94
- value={level?.default}
95
- label={level.label}
96
- {res}
97
- changeFunction={(e) => handleChange(i, e.detail, level.field)}
98
- onClear={() => handleChange(i, null, level.field)}
99
- showPlusIcon={level.showPlusIcon ?? false}
100
- onPlusClick={level.onPlusClick ?? (() => {})}
101
- />
102
- {/await}
103
- {:else}
104
- <h1>Selecciona {level.label}</h1>
105
- {/if}
106
- {/if}
107
- {/each}
86
+ {#if i > 0}
87
+ {#if levels[i - 1]?.default?.value}
88
+ {#await ultimoIndexActualizado >= i ? cacheResults[i] : fetchFnCloned[i].fetchFn(levels[i - 1]?.default?.value)}
89
+ cargando {level.label}...
90
+ {:then res}
91
+ <div class=" hidden">
92
+ {(cacheResults[i] = res)}
93
+ </div>
94
+ <InputFormSelect
95
+ value={level?.default}
96
+ label={level.label}
97
+ {res}
98
+ changeFunction={(e) => handleChange(i, e.detail, level.field)}
99
+ onClear={() => handleChange(i, null, level.field)}
100
+ showPlusIcon={level.showPlusIcon ?? false}
101
+ onPlusClick={level.onPlusClick ?? (() => {})}
102
+ />
103
+ {/await}
104
+ {:else}
105
+ <h1>Selecciona {level.label}</h1>
106
+ {/if}
107
+ {/if}
108
+ {/each}
108
109
  {/if}
package/dist/Inputs/InputFormColor.svelte CHANGED
@@ -1,114 +1,116 @@
1
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;
2
+ import "../typography.css";
3
+
4
+ export let valueVar: string = "";
5
+ export let label: string;
6
+ export let disabled = false;
7
+ export let obligatory = false;
8
+ export let icon: string | null = null;
7
9
  </script>
8
10
 
9
11
  <div class="input-container">
10
- {#if icon}
11
- <div class="icon-wrapper">
12
- <i class="{icon} icon"></i>
13
- </div>
14
- {/if}
15
- <div class="input-wrapper">
16
- <input
17
- {disabled}
18
- type="color"
19
- bind:value={valueVar}
20
- placeholder=" "
21
- class="input-field"
22
- />
23
-
24
- <label for={valueVar} class="input-label"
25
- >{label}
26
- {#if obligatory}
27
- <span class="required-mark"> *</span>
28
- {/if}</label
29
- >
12
+ {#if icon}
13
+ <div class="icon-wrapper">
14
+ <i class="{icon} icon"></i>
30
15
  </div>
16
+ {/if}
17
+ <div class="input-wrapper">
18
+ <input
19
+ {disabled}
20
+ type="color"
21
+ bind:value={valueVar}
22
+ placeholder=" "
23
+ class="input-field"
24
+ />
25
+
26
+ <label for={valueVar} class="input-label"
27
+ >{label}
28
+ {#if obligatory}
29
+ <span class="required-mark"> *</span>
30
+ {/if}</label
31
+ >
32
+ </div>
31
33
  </div>
32
34
 
33
35
  <style>
34
- .input-container {
35
- display: flex;
36
- align-items: center;
37
-
38
- height: fit-content;
39
-
40
- margin-top: 1.95rem;
41
- }
42
-
43
- .icon-wrapper {
44
- width: 1rem;
45
- position: relative;
46
- margin-right: 0.5rem;
47
- }
48
-
49
- .icon {
50
- position: absolute;
51
- top: -0.4rem;
52
- left: 0.25rem;
53
- }
54
-
55
- .input-wrapper {
56
- position: relative;
57
- z-index: 0;
58
- width: 100%;
59
- }
60
-
61
- .input-field {
62
- display: block;
63
- width: 100%;
64
- font-size: 1rem;
65
- height: 1.8rem;
66
- color: var(--grav-crud-color-neutral);
67
- background: transparent;
68
- appearance: none;
69
- }
70
-
71
- .input-field:focus {
72
- outline: none;
73
- border-color: black;
74
- }
75
-
76
- .input-label {
77
- position: absolute;
78
- font-size: 1rem;
79
- text-align: left;
80
- color: var(--grav-crud-color-neutral);
81
- transition: all 0.3s;
82
- top: 0.25rem;
83
- left: 0.25rem;
84
- z-index: -10;
85
- transform-origin: left;
86
- }
87
-
88
- .input-field:focus + .input-label,
89
- .input-field:not(:placeholder-shown) + .input-label {
90
- left: 0;
91
- top: 0;
92
- color: var(--grav-crud-color-neutral);
93
- translate: -0.6rem -2.05rem;
94
- scale: 1;
95
- }
96
-
97
- .input-field:placeholder-shown + .input-label {
98
- transform: translateY(0) scale(1);
99
- }
100
-
101
- .required-mark {
102
- color: #dc2626;
103
- }
104
-
105
- .no-margin {
106
- margin-top: 0;
107
- }
108
-
109
- .no-margin .input-field:focus + .input-label,
110
- .no-margin .input-field:not(:placeholder-shown) + .input-label {
111
- translate: -0.6rem -1.4rem;
112
- font-size: 0.7rem;
113
- }
36
+ .input-container {
37
+ display: flex;
38
+ align-items: center;
39
+
40
+ height: fit-content;
41
+
42
+ margin-top: 1.95rem;
43
+ }
44
+
45
+ .icon-wrapper {
46
+ width: 1rem;
47
+ position: relative;
48
+ margin-right: 0.5rem;
49
+ }
50
+
51
+ .icon {
52
+ position: absolute;
53
+ top: -0.4rem;
54
+ left: 0.25rem;
55
+ }
56
+
57
+ .input-wrapper {
58
+ position: relative;
59
+ z-index: 0;
60
+ width: 100%;
61
+ }
62
+
63
+ .input-field {
64
+ display: block;
65
+ width: 100%;
66
+ font-size: 1rem;
67
+ height: 1.8rem;
68
+ color: var(--grav-crud-color-neutral);
69
+ background: transparent;
70
+ appearance: none;
71
+ }
72
+
73
+ .input-field:focus {
74
+ outline: none;
75
+ border-color: black;
76
+ }
77
+
78
+ .input-label {
79
+ position: absolute;
80
+ font-size: 1rem;
81
+ text-align: left;
82
+ color: var(--grav-crud-color-neutral);
83
+ transition: all 0.3s;
84
+ top: 0.25rem;
85
+ left: 0.25rem;
86
+ z-index: -10;
87
+ transform-origin: left;
88
+ }
89
+
90
+ .input-field:focus + .input-label,
91
+ .input-field:not(:placeholder-shown) + .input-label {
92
+ left: 0;
93
+ top: 0;
94
+ color: var(--grav-crud-color-neutral);
95
+ translate: -0.6rem -2.05rem;
96
+ scale: 1;
97
+ }
98
+
99
+ .input-field:placeholder-shown + .input-label {
100
+ transform: translateY(0) scale(1);
101
+ }
102
+
103
+ .required-mark {
104
+ color: #dc2626;
105
+ }
106
+
107
+ .no-margin {
108
+ margin-top: 0;
109
+ }
110
+
111
+ .no-margin .input-field:focus + .input-label,
112
+ .no-margin .input-field:not(:placeholder-shown) + .input-label {
113
+ translate: -0.6rem -1.4rem;
114
+ font-size: 0.7rem;
115
+ }
114
116
  </style>
package/dist/Inputs/InputFormColor.svelte.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
+ import "../typography.css";
2
3
  declare const __propDef: {
3
4
  props: {
4
5
  valueVar?: string;