grav-svelte 0.0.20 → 0.0.22

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 (18) hide show
  1. package/dist/Inputs/InputFormBool.svelte +58 -20
  2. package/dist/Inputs/InputFormColor.svelte +97 -19
  3. package/dist/Inputs/InputFormColor.svelte.d.ts +3 -2
  4. package/dist/Inputs/InputFormDate.svelte +96 -15
  5. package/dist/Inputs/InputFormDate.svelte.d.ts +2 -1
  6. package/dist/Inputs/InputFormDateAndHours.svelte +99 -21
  7. package/dist/Inputs/InputFormDateAndHours.svelte.d.ts +2 -1
  8. package/dist/Inputs/InputFormNumber.svelte +99 -21
  9. package/dist/Inputs/InputFormNumber.svelte.d.ts +2 -1
  10. package/dist/Inputs/InputFormPassword.svelte +79 -9
  11. package/dist/Inputs/InputFormSelect.svelte +17 -2
  12. package/dist/Inputs/InputFormText.svelte +79 -9
  13. package/dist/Inputs/index.d.ts +0 -1
  14. package/dist/Inputs/index.js +0 -1
  15. package/dist/Sidebar/SidebarItem.svelte +1 -1
  16. package/package.json +1 -1
  17. package/dist/Inputs/InputFormTextWithSlide.svelte +0 -37
  18. package/dist/Inputs/InputFormTextWithSlide.svelte.d.ts +0 -20
package/dist/Inputs/InputFormBool.svelte CHANGED
@@ -1,24 +1,62 @@
1
1
  <script>
2
- export let valueVar = false;
3
- export let label;
4
- export let disabled = false;
2
+ export let valueVar = false;
3
+ export let label;
4
+ export let disabled = false;
5
5
  </script>
6
6
 
7
- <div class="flex items-center mt-2">
8
- {#if valueVar}
9
- <button
10
- {disabled}
11
- on:click={() => (valueVar = false)}
12
- class=" mr-2 bg-black border h-8 w-8 border-black"
13
- >
14
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
15
- <polyline points="20 6 9 17 4 12"></polyline>
16
- </svg>
17
- </button>
18
- {:else}
19
- <button {disabled} on:click={() => (valueVar = true)} class=" mr-2 border h-8 w-8 border-black"
20
- >-
21
- </button>
22
- {/if}
23
- <h1>{label}</h1>
7
+ <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
+ {disabled}
20
+ on:click={() => (valueVar = true)}
21
+ class="checkbox-button"
22
+ >
23
+ -
24
+ </button>
25
+ {/if}
26
+ <h1 class="label">{label}</h1>
24
27
  </div>
28
+
29
+ <style>
30
+ .input-container {
31
+ display: flex;
32
+ align-items: center;
33
+ margin-top: 0.5rem;
34
+ }
35
+
36
+ .checkbox-button {
37
+ margin-right: 0.5rem;
38
+ height: 2rem;
39
+ width: 2rem;
40
+ border: 1px solid black;
41
+ background: white;
42
+ cursor: pointer;
43
+ }
44
+
45
+ .checkbox-button.checked {
46
+ background: black;
47
+ }
48
+
49
+ .checkwhite {
50
+ color: white;
51
+ }
52
+
53
+ .label {
54
+ font-size: 1rem;
55
+ margin: 0;
56
+ }
57
+
58
+ button:disabled {
59
+ opacity: 0.5;
60
+ cursor: not-allowed;
61
+ }
62
+ </style>
package/dist/Inputs/InputFormColor.svelte CHANGED
@@ -1,25 +1,103 @@
1
1
  <script lang="ts">
2
- export let valueVar: string;
3
- export let label;
2
+ export let valueVar: string = "";
3
+ export let label: string;
4
4
  export let disabled = false;
5
5
  export let obligatory = false;
6
+ export let icon: string | null = null;
6
7
  </script>
7
8
 
8
- <div class="relative z-0 mt-4 w-full">
9
- <input
10
- {disabled}
11
- name={valueVar}
12
- id={valueVar}
13
- type="color"
14
- bind:value={valueVar}
15
- class="block px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-black peer"
16
- />
17
- <label
18
- for={valueVar}
19
- class="absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-2.5 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-gray-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
20
- >{label}
21
- {#if obligatory}
22
- <span class="text-red-600"> *</span>
23
- {/if}</label
24
- >
9
+ <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
+ >
30
+ </div>
25
31
  </div>
32
+
33
+ <style>
34
+ .input-container {
35
+ display: flex;
36
+ align-items: center;
37
+ margin-top: 0.75rem;
38
+ border: 0;
39
+ border-bottom: 2px solid #9ca3af;
40
+ }
41
+
42
+ .icon-wrapper {
43
+ width: 1rem;
44
+ position: relative;
45
+ margin-right: 0.5rem;
46
+ }
47
+
48
+ .icon {
49
+ position: absolute;
50
+ top: -0.25rem;
51
+ left: 0.25rem;
52
+ }
53
+
54
+ .input-wrapper {
55
+ position: relative;
56
+ z-index: 0;
57
+ width: 100%;
58
+ }
59
+
60
+ .input-field {
61
+ display: block;
62
+ padding-top: 0.625rem;
63
+ padding-left: 0;
64
+ padding-right: 0;
65
+ width: 100%;
66
+ font-size: 1rem;
67
+ color: #111827;
68
+ background: transparent;
69
+ appearance: none;
70
+ }
71
+
72
+ .input-field:focus {
73
+ outline: none;
74
+ border-color: black;
75
+ }
76
+
77
+ .input-label {
78
+ position: absolute;
79
+ font-size: 1rem;
80
+ text-align: left;
81
+ color: black;
82
+ transition: all 0.3s;
83
+ top: 0.625rem;
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
+ color: #4b5563;
92
+ translate: 0rem -1.25rem;
93
+ scale: 0.75;
94
+ }
95
+
96
+ .input-field:placeholder-shown + .input-label {
97
+ transform: translateY(0) scale(1);
98
+ }
99
+
100
+ .required-mark {
101
+ color: #dc2626;
102
+ }
103
+ </style>
package/dist/Inputs/InputFormColor.svelte.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
- valueVar: string;
5
- label: any;
4
+ valueVar?: string;
5
+ label: string;
6
6
  disabled?: boolean;
7
7
  obligatory?: boolean;
8
+ icon?: string | null;
8
9
  };
9
10
  events: {
10
11
  [evt: string]: CustomEvent<any>;
package/dist/Inputs/InputFormDate.svelte CHANGED
@@ -1,22 +1,103 @@
1
1
  <script lang="ts">
2
- export let valueVar: string | null = null;
2
+ export let valueVar: string = "";
3
3
  export let label: string;
4
4
  export let disabled = false;
5
5
  export let obligatory = false;
6
+ export let icon: string | null = null;
6
7
  </script>
7
8
 
8
- <div class="relative z-0 mt-6">
9
- <input
10
- {disabled}
11
- type="date"
12
- bind:value={valueVar}
13
- class="block px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-black peer"
14
- />
15
- <label
16
- class="absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-2.5 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-gray-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
17
- >{label}
18
- {#if obligatory}
19
- <span class="text-red-600"> *</span>
20
- {/if}</label
21
- >
9
+ <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="date"
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
+ >
30
+ </div>
22
31
  </div>
32
+
33
+ <style>
34
+ .input-container {
35
+ display: flex;
36
+ align-items: center;
37
+ margin-top: 0.75rem;
38
+ border: 0;
39
+ border-bottom: 2px solid #9ca3af;
40
+ }
41
+
42
+ .icon-wrapper {
43
+ width: 1rem;
44
+ position: relative;
45
+ margin-right: 0.5rem;
46
+ }
47
+
48
+ .icon {
49
+ position: absolute;
50
+ top: -0.25rem;
51
+ left: 0.25rem;
52
+ }
53
+
54
+ .input-wrapper {
55
+ position: relative;
56
+ z-index: 0;
57
+ width: 100%;
58
+ }
59
+
60
+ .input-field {
61
+ display: block;
62
+ padding-top: 0.625rem;
63
+ padding-left: 0;
64
+ padding-right: 0;
65
+ width: 100%;
66
+ font-size: 1rem;
67
+ color: #111827;
68
+ background: transparent;
69
+ appearance: none;
70
+ }
71
+
72
+ .input-field:focus {
73
+ outline: none;
74
+ border-color: black;
75
+ }
76
+
77
+ .input-label {
78
+ position: absolute;
79
+ font-size: 1rem;
80
+ text-align: left;
81
+ color: black;
82
+ transition: all 0.3s;
83
+ top: 0.625rem;
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
+ color: #4b5563;
92
+ translate: 0rem -1.25rem;
93
+ scale: 0.75;
94
+ }
95
+
96
+ .input-field:placeholder-shown + .input-label {
97
+ transform: translateY(0) scale(1);
98
+ }
99
+
100
+ .required-mark {
101
+ color: #dc2626;
102
+ }
103
+ </style>
package/dist/Inputs/InputFormDate.svelte.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
- valueVar?: string | null;
4
+ valueVar?: string;
5
5
  label: string;
6
6
  disabled?: boolean;
7
7
  obligatory?: boolean;
8
+ icon?: string | null;
8
9
  };
9
10
  events: {
10
11
  [evt: string]: CustomEvent<any>;
package/dist/Inputs/InputFormDateAndHours.svelte CHANGED
@@ -1,25 +1,103 @@
1
1
  <script lang="ts">
2
- export let valueVar: string | null = null;
3
- export let label: string;
4
- export let disabled = false;
5
- export let obligatory = false;
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;
6
7
  </script>
7
8
 
8
- <div class="relative z-0 mt-6">
9
- <input
10
- {disabled}
11
- name={valueVar}
12
- id={valueVar}
13
- type="datetime-local"
14
- bind:value={valueVar}
15
- class="block px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-black peer"
16
- />
17
- <label
18
- for={valueVar}
19
- class="absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-2.5 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-gray-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
20
- >
21
- {label} {#if obligatory}
22
- <span class="text-red-600"> *</span>
23
- {/if}
24
- </label>
9
+ <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="datetime-local"
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
+ >
30
+ </div>
25
31
  </div>
32
+
33
+ <style>
34
+ .input-container {
35
+ display: flex;
36
+ align-items: center;
37
+ margin-top: 0.75rem;
38
+ border: 0;
39
+ border-bottom: 2px solid #9ca3af;
40
+ }
41
+
42
+ .icon-wrapper {
43
+ width: 1rem;
44
+ position: relative;
45
+ margin-right: 0.5rem;
46
+ }
47
+
48
+ .icon {
49
+ position: absolute;
50
+ top: -0.25rem;
51
+ left: 0.25rem;
52
+ }
53
+
54
+ .input-wrapper {
55
+ position: relative;
56
+ z-index: 0;
57
+ width: 100%;
58
+ }
59
+
60
+ .input-field {
61
+ display: block;
62
+ padding-top: 0.625rem;
63
+ padding-left: 0;
64
+ padding-right: 0;
65
+ width: 100%;
66
+ font-size: 1rem;
67
+ color: #111827;
68
+ background: transparent;
69
+ appearance: none;
70
+ }
71
+
72
+ .input-field:focus {
73
+ outline: none;
74
+ border-color: black;
75
+ }
76
+
77
+ .input-label {
78
+ position: absolute;
79
+ font-size: 1rem;
80
+ text-align: left;
81
+ color: black;
82
+ transition: all 0.3s;
83
+ top: 0.625rem;
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
+ color: #4b5563;
92
+ translate: 0rem -1.25rem;
93
+ scale: 0.75;
94
+ }
95
+
96
+ .input-field:placeholder-shown + .input-label {
97
+ transform: translateY(0) scale(1);
98
+ }
99
+
100
+ .required-mark {
101
+ color: #dc2626;
102
+ }
103
+ </style>
package/dist/Inputs/InputFormDateAndHours.svelte.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
- valueVar?: string | null;
4
+ valueVar?: string;
5
5
  label: string;
6
6
  disabled?: boolean;
7
7
  obligatory?: boolean;
8
+ icon?: string | null;
8
9
  };
9
10
  events: {
10
11
  [evt: string]: CustomEvent<any>;
package/dist/Inputs/InputFormNumber.svelte CHANGED
@@ -1,25 +1,103 @@
1
1
  <script lang="ts">
2
- export let valueVar: number | null = null;
3
- export let label: string;
4
- export let disabled = false;
5
- export let obligatory = false;
2
+ export let valueVar: number = 0;
3
+ export let label: string;
4
+ export let disabled = false;
5
+ export let obligatory = false;
6
+ export let icon: string | null = null;
6
7
  </script>
7
8
 
8
- <div class="relative z-0 mt-4">
9
- <input
10
- {disabled}
11
- name={valueVar?.toString()}
12
- id={valueVar?.toString()}
13
- type="number"
14
- bind:value={valueVar}
15
- placeholder=""
16
- class="block pt-2.5 px-0 w-full text-base text-gray-900 bg-transparent border-0 border-b-2 border-gray appearance-none focus:outline-none focus:ring-0 focus:border-black peer"
17
- />
18
- <label
19
- for={valueVar?.toString()}
20
- class="absolute text-base text-left text-black duration-300 transform -translate-y-6 scale-75 top-2.5 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-gray-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
21
- >{label} {#if obligatory}
22
- <span class="text-red-600"> *</span>
23
- {/if}</label
24
- >
9
+ <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="number"
19
+ bind:value={valueVar}
20
+ placeholder=" "
21
+ class="input-field"
22
+ />
23
+
24
+ <label for="input-number" class="input-label"
25
+ >{label}
26
+ {#if obligatory}
27
+ <span class="required-mark"> *</span>
28
+ {/if}</label
29
+ >
30
+ </div>
25
31
  </div>
32
+
33
+ <style>
34
+ .input-container {
35
+ display: flex;
36
+ align-items: center;
37
+ margin-top: 0.75rem;
38
+ border: 0;
39
+ border-bottom: 2px solid #9ca3af;
40
+ }
41
+
42
+ .icon-wrapper {
43
+ width: 1rem;
44
+ position: relative;
45
+ margin-right: 0.5rem;
46
+ }
47
+
48
+ .icon {
49
+ position: absolute;
50
+ top: -0.25rem;
51
+ left: 0.25rem;
52
+ }
53
+
54
+ .input-wrapper {
55
+ position: relative;
56
+ z-index: 0;
57
+ width: 100%;
58
+ }
59
+
60
+ .input-field {
61
+ display: block;
62
+ padding-top: 0.625rem;
63
+ padding-left: 0;
64
+ padding-right: 0;
65
+ width: 100%;
66
+ font-size: 1rem;
67
+ color: #111827;
68
+ background: transparent;
69
+ appearance: none;
70
+ }
71
+
72
+ .input-field:focus {
73
+ outline: none;
74
+ border-color: black;
75
+ }
76
+
77
+ .input-label {
78
+ position: absolute;
79
+ font-size: 1rem;
80
+ text-align: left;
81
+ color: black;
82
+ transition: all 0.3s;
83
+ top: 0.625rem;
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
+ color: #4b5563;
92
+ translate: 0rem -1.25rem;
93
+ scale: 0.75;
94
+ }
95
+
96
+ .input-field:placeholder-shown + .input-label {
97
+ transform: translateY(0) scale(1);
98
+ }
99
+
100
+ .required-mark {
101
+ color: #dc2626;
102
+ }
103
+ </style>
package/dist/Inputs/InputFormNumber.svelte.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
- valueVar?: number | null;
4
+ valueVar?: number;
5
5
  label: string;
6
6
  disabled?: boolean;
7
7
  obligatory?: boolean;
8
+ icon?: string | null;
8
9
  };
9
10
  events: {
10
11
  [evt: string]: CustomEvent<any>;
package/dist/Inputs/InputFormPassword.svelte CHANGED
@@ -6,28 +6,98 @@
6
6
  export let icon: string | null = null;
7
7
  </script>
8
8
 
9
- <div class="flex items-center mt-3 border-0 border-b-2 border-gray-400">
9
+ <div class="input-container">
10
10
  {#if icon}
11
- <div class="w-4 relative mr-2">
12
- <i class="{icon} absolute -top-1 left-1"></i>
11
+ <div class="icon-wrapper">
12
+ <i class="{icon} icon"></i>
13
13
  </div>
14
14
  {/if}
15
- <div class="relative z-0 w-full">
15
+ <div class="input-wrapper">
16
16
  <input
17
17
  {disabled}
18
18
  type="password"
19
19
  bind:value={valueVar}
20
20
  placeholder=" "
21
- class="block pt-2.5 px-0 w-full text-base text-gray-900 bg-transparent appearance-none focus:outline-none focus:ring-0 focus:border-black peer"
21
+ class="input-field"
22
22
  />
23
23
 
24
- <label
25
- for={valueVar}
26
- class="absolute text-base text-left text-black duration-300 transform -translate-y-5 scale-75 top-2.5 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-gray-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-5"
24
+ <label for={valueVar} class="input-label"
27
25
  >{label}
28
26
  {#if obligatory}
29
- <span class="text-red-600"> *</span>
27
+ <span class="required-mark"> *</span>
30
28
  {/if}</label
31
29
  >
32
30
  </div>
33
31
  </div>
32
+
33
+ <style>
34
+ .input-container {
35
+ display: flex;
36
+ align-items: center;
37
+ margin-top: 0.75rem;
38
+ border: 0;
39
+ border-bottom: 2px solid #9ca3af;
40
+ }
41
+
42
+ .icon-wrapper {
43
+ width: 1rem;
44
+ position: relative;
45
+ margin-right: 0.5rem;
46
+ }
47
+
48
+ .icon {
49
+ position: absolute;
50
+ top: -0.25rem;
51
+ left: 0.25rem;
52
+ }
53
+
54
+ .input-wrapper {
55
+ position: relative;
56
+ z-index: 0;
57
+ width: 100%;
58
+ }
59
+
60
+ .input-field {
61
+ display: block;
62
+ padding-top: 0.625rem;
63
+ padding-left: 0;
64
+ padding-right: 0;
65
+ width: 100%;
66
+ font-size: 1rem;
67
+ color: #111827;
68
+ background: transparent;
69
+ appearance: none;
70
+ }
71
+
72
+ .input-field:focus {
73
+ outline: none;
74
+ border-color: black;
75
+ }
76
+
77
+ .input-label {
78
+ position: absolute;
79
+ font-size: 1rem;
80
+ text-align: left;
81
+ color: black;
82
+ transition: all 0.3s;
83
+ top: 0.625rem;
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
+ color: #4b5563;
92
+ translate: 0rem -1.25rem;
93
+ scale: 0.75;
94
+ }
95
+
96
+ .input-field:placeholder-shown + .input-label {
97
+ transform: translateY(0) scale(1);
98
+ }
99
+
100
+ .required-mark {
101
+ color: #dc2626;
102
+ }
103
+ </style>
package/dist/Inputs/InputFormSelect.svelte CHANGED
@@ -17,8 +17,8 @@
17
17
  export let label = "";
18
18
  </script>
19
19
 
20
- <div class=" flex flex-col border-b w-full mt-1">
21
- <p class=" text-sm text-gray-800">{label}</p>
20
+ <div class="select-container">
21
+ <p class="select-label">{label}</p>
22
22
  <Select
23
23
  items={res}
24
24
  name="inCbArea"
@@ -34,3 +34,18 @@
34
34
  showChevron
35
35
  />
36
36
  </div>
37
+
38
+ <style>
39
+ .select-container {
40
+ display: flex;
41
+ flex-direction: column;
42
+ border-bottom: 1px solid;
43
+ width: 100%;
44
+ margin-top: 0.25rem;
45
+ }
46
+
47
+ .select-label {
48
+ font-size: 0.875rem;
49
+ color: #1f2937; /* equivalent to text-gray-800 */
50
+ }
51
+ </style>
package/dist/Inputs/InputFormText.svelte CHANGED
@@ -6,28 +6,98 @@
6
6
  export let icon: string | null = null;
7
7
  </script>
8
8
 
9
- <div class="flex items-center mt-3 border-0 border-b-2 border-gray-400">
9
+ <div class="input-container">
10
10
  {#if icon}
11
- <div class="w-4 relative mr-2">
12
- <i class="{icon} absolute -top-1 left-1"></i>
11
+ <div class="icon-wrapper">
12
+ <i class="{icon} icon"></i>
13
13
  </div>
14
14
  {/if}
15
- <div class="relative z-0 w-full">
15
+ <div class="input-wrapper">
16
16
  <input
17
17
  {disabled}
18
18
  type="text"
19
19
  bind:value={valueVar}
20
20
  placeholder=" "
21
- class="block pt-2.5 px-0 w-full text-base text-gray-900 bg-transparent appearance-none focus:outline-none focus:ring-0 focus:border-black peer"
21
+ class="input-field"
22
22
  />
23
23
 
24
- <label
25
- for={valueVar}
26
- class="absolute text-base text-left text-black duration-300 transform -translate-y-5 scale-75 top-2.5 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-gray-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-5"
24
+ <label for={valueVar} class="input-label"
27
25
  >{label}
28
26
  {#if obligatory}
29
- <span class="text-red-600"> *</span>
27
+ <span class="required-mark"> *</span>
30
28
  {/if}</label
31
29
  >
32
30
  </div>
33
31
  </div>
32
+
33
+ <style>
34
+ .input-container {
35
+ display: flex;
36
+ align-items: center;
37
+ margin-top: 0.75rem;
38
+ border: 0;
39
+ border-bottom: 2px solid #9ca3af;
40
+ }
41
+
42
+ .icon-wrapper {
43
+ width: 1rem;
44
+ position: relative;
45
+ margin-right: 0.5rem;
46
+ }
47
+
48
+ .icon {
49
+ position: absolute;
50
+ top: -0.25rem;
51
+ left: 0.25rem;
52
+ }
53
+
54
+ .input-wrapper {
55
+ position: relative;
56
+ z-index: 0;
57
+ width: 100%;
58
+ }
59
+
60
+ .input-field {
61
+ display: block;
62
+ padding-top: 0.625rem;
63
+ padding-left: 0;
64
+ padding-right: 0;
65
+ width: 100%;
66
+ font-size: 1rem;
67
+ color: #111827;
68
+ background: transparent;
69
+ appearance: none;
70
+ }
71
+
72
+ .input-field:focus {
73
+ outline: none;
74
+ border-color: black;
75
+ }
76
+
77
+ .input-label {
78
+ position: absolute;
79
+ font-size: 1rem;
80
+ text-align: left;
81
+ color: black;
82
+ transition: all 0.3s;
83
+ top: 0.625rem;
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
+ color: #4b5563;
92
+ translate: 0rem -1.25rem;
93
+ scale: 0.75;
94
+ }
95
+
96
+ .input-field:placeholder-shown + .input-label {
97
+ transform: translateY(0) scale(1);
98
+ }
99
+
100
+ .required-mark {
101
+ color: #dc2626;
102
+ }
103
+ </style>
package/dist/Inputs/index.d.ts CHANGED
@@ -9,4 +9,3 @@ export { default as InputFormSelect } from './InputFormSelect.svelte';
9
9
  export { default as InputFormText } from './InputFormText.svelte';
10
10
  export { default as InputFormPassword } from './InputFormPassword.svelte';
11
11
  export { default as InputFormTextArea } from './InputFormTextArea.svelte';
12
- export { default as InputFormTextWithSlide } from './InputFormTextWithSlide.svelte';
package/dist/Inputs/index.js CHANGED
@@ -9,4 +9,3 @@ export { default as InputFormSelect } from './InputFormSelect.svelte';
9
9
  export { default as InputFormText } from './InputFormText.svelte';
10
10
  export { default as InputFormPassword } from './InputFormPassword.svelte';
11
11
  export { default as InputFormTextArea } from './InputFormTextArea.svelte';
12
- export { default as InputFormTextWithSlide } from './InputFormTextWithSlide.svelte';
package/dist/Sidebar/SidebarItem.svelte CHANGED
@@ -11,7 +11,7 @@
11
11
  {#if permiso == true}
12
12
  <div class="sidebar-item">
13
13
  <a
14
- href="{base}/administracion/{nombreRuta}"
14
+ href="{base}/{nombreRuta}"
15
15
  class="sidebar-link"
16
16
  >
17
17
  <i class="sidebar-icon {nombreIcono}"></i>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "grav-svelte",
3
- "version": "0.0.20",
3
+ "version": "0.0.22",
4
4
  "description": "A collection of Svelte components",
5
5
  "license": "MIT",
6
6
  "scripts": {
package/dist/Inputs/InputFormTextWithSlide.svelte DELETED
@@ -1,37 +0,0 @@
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 multiline = false; // Nuevo: controla si usar textarea
7
- </script>
8
-
9
- <div class="relative z-0 my-auto mt-4">
10
- {#if multiline}
11
- <textarea
12
- {disabled}
13
- bind:value={valueVar}
14
- placeholder=" "
15
- rows="3"
16
- class="block pt-2.5 px-0 w-full text-base text-gray-900 bg-transparent border-0 border-b-2 border-gray appearance-none focus:outline-none focus:ring-0 focus:border-black peer resize-none"
17
- ></textarea>
18
- {:else}
19
- <input
20
- {disabled}
21
- type="text"
22
- bind:value={valueVar}
23
- placeholder=" "
24
- class="block pt-2.5 px-0 w-full text-base text-gray-900 bg-transparent border-0 border-b-2 border-gray appearance-none focus:outline-none focus:ring-0 focus:border-black peer"
25
- />
26
- {/if}
27
-
28
- <label
29
- for={valueVar}
30
- class="absolute text-base text-left text-black duration-300 transform -translate-y-8 scale-75 top-2.5 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-gray-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
31
- >
32
- {label}
33
- {#if obligatory}
34
- <span class="text-red-600"> *</span>
35
- {/if}
36
- </label>
37
- </div>
package/dist/Inputs/InputFormTextWithSlide.svelte.d.ts DELETED
@@ -1,20 +0,0 @@
1
- import { SvelteComponentTyped } from "svelte";
2
- declare const __propDef: {
3
- props: {
4
- valueVar?: string;
5
- label: string;
6
- disabled?: boolean;
7
- obligatory?: boolean;
8
- multiline?: boolean;
9
- };
10
- events: {
11
- [evt: string]: CustomEvent<any>;
12
- };
13
- slots: {};
14
- };
15
- export type InputFormTextWithSlideProps = typeof __propDef.props;
16
- export type InputFormTextWithSlideEvents = typeof __propDef.events;
17
- export type InputFormTextWithSlideSlots = typeof __propDef.slots;
18
- export default class InputFormTextWithSlide extends SvelteComponentTyped<InputFormTextWithSlideProps, InputFormTextWithSlideEvents, InputFormTextWithSlideSlots> {
19
- }
20
- export {};