poe-svelte-ui-lib 1.4.3 → 1.4.5

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 (5) hide show
  1. package/dist/Button/Button.svelte +3 -3
  2. package/dist/Button/ButtonProps.svelte +2 -0
  3. package/dist/Input/Input.svelte +6 -6
  4. package/dist/Select/Select.svelte +18 -43
  5. package/package.json +1 -1
package/dist/Button/Button.svelte CHANGED
@@ -70,9 +70,9 @@
70
70
  id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
71
71
  class="{twMerge(
72
72
  `relative m-0 inline-block w-full items-center rounded-2xl px-2
73
- py-1 font-semibold shadow-sm transition duration-200 select-none
74
- ${content.icon && !content.name ? 'bg-transparent p-0' : 'bg-blue border border-(--bg-color) '}
75
- ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:shadow-md active:scale-97'} `,
73
+ py-1 font-semibold transition duration-200 select-none
74
+ ${content.icon && !content.name ? 'bg-transparent p-0' : 'bg-blue border border-(--bg-color) shadow-sm hover:shadow-md'}
75
+ ${disabled ? 'cursor-not-allowed opacity-50 hover:shadow-none' : 'cursor-pointer active:scale-97'} `,
76
76
  componentClass,
77
77
  )} bg-(--bg-color)"
78
78
  onclick={handleClick}
package/dist/Button/ButtonProps.svelte CHANGED
@@ -100,7 +100,9 @@
100
100
  maxlength={500}
101
101
  onUpdate={(value) => {
102
102
  const parts = (value as string).trim().split(/\s+/)
103
+
103
104
  onPropertyChange({ eventHandler: { Variables: parts } })
105
+ console.log(component.eventHandler)
104
106
  }}
105
107
  />
106
108
  <UI.Select
package/dist/Input/Input.svelte CHANGED
@@ -54,7 +54,7 @@
54
54
  }
55
55
  </script>
56
56
 
57
- <div class={twMerge(`bg-max ${type === 'text-area' ? 'h-full' : ''} relative flex w-full flex-col items-center`, wrapperClass)}>
57
+ <div class={twMerge(`bg-max ${type === 'text-area' ? 'h-full' : ''} relative flex w-full flex-col px-1 items-center`, wrapperClass)}>
58
58
  {#if label.name}
59
59
  <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
60
60
  {/if}
@@ -64,11 +64,11 @@
64
64
  <input
65
65
  bind:value
66
66
  class={twMerge(
67
- `w-full rounded-2xl border px-4 py-1 text-center shadow-sm transition duration-200
68
- outline-none focus:border-blue-400 [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
69
- ${isValid ? 'border-(--border-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)] focus:border-red-400'}
70
- ${disabled ? 'opacity-50' : 'hover:shadow-md'}
71
- ${readonly ? '' : 'hover:shadow-md'}
67
+ `w-full rounded-2xl border px-4 py-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-200
68
+ outline-none focus:shadow-[0_0_6px_var(--blue-color)] focus:border-(--blue-color) [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
69
+ ${isValid ? 'border-(--bg-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)] focus:border-red-400'}
70
+ ${disabled ? 'opacity-50' : 'hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}
71
+ ${readonly ? '' : 'hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}
72
72
  ${help?.info ? 'pl-8' : ''}
73
73
  ${help.copyButton || type === 'password' || (type === 'number' && !readonly) ? 'pr-8' : ''}`,
74
74
  componentClass,
package/dist/Select/Select.svelte CHANGED
@@ -90,7 +90,7 @@
90
90
  }
91
91
  </script>
92
92
 
93
- <div class={twMerge(`bg-max relative flex w-full flex-col items-center `, wrapperClass)} bind:this={dropdownElement}>
93
+ <div class={twMerge(`bg-max relative flex w-full flex-col items-center px-1`, wrapperClass)} bind:this={dropdownElement}>
94
94
  {#if label.name}
95
95
  <h5 class={twMerge(`w-full px-4`, label.class)}>{label.name}</h5>
96
96
  {/if}
@@ -99,18 +99,11 @@
99
99
  id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
100
100
  value={value?.value ? String(value.value) : ''}
101
101
  class={twMerge(
102
- `w-full rounded-2xl border border-(--border-color) p-1 text-center shadow-sm transition-shadow duration-200
103
- ${disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-md'}`,
102
+ `w-full rounded-2xl border border-(--bg-color) p-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition-shadow duration-200
103
+ ${disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}`,
104
104
  value?.class,
105
105
  )}
106
- style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);
107
- {value?.class?.split(' ').find((cls: string) => cls.startsWith('border-'))
108
- ? `border-width: 1px;
109
- border-color: var(--${value.class
110
- ?.split(' ')
111
- .find((cls: string) => cls.startsWith('border-'))
112
- ?.replace('border-', '')}-color)`
113
- : ''}"
106
+ style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%); "
114
107
  onclick={toggleDropdown}
115
108
  aria-haspopup="true"
116
109
  aria-expanded={isDropdownOpen}
@@ -121,7 +114,7 @@
121
114
 
122
115
  {#if isDropdownOpen}
123
116
  <div
124
- class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-2xl border border-t-0 border-(--border-color)"
117
+ class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-2xl border border-t-0 border-(--bg-color) shadow-[0_0_3px_rgb(0_0_0_/0.25)]"
125
118
  style="width: calc(100% - 1.8rem);"
126
119
  transition:slide={{ duration: 250 }}
127
120
  >
@@ -130,20 +123,14 @@
130
123
  id={option.id}
131
124
  value={option?.value ? String(option.value) : ''}
132
125
  class={twMerge(
133
- `flex h-full w-full cursor-pointer items-center justify-center p-1 duration-250 hover:bg-(--field-color)
126
+ `flex h-full w-full cursor-pointer items-center justify-center p-1 inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)] duration-250 hover:bg-(--field-color)!
134
127
  ${index === options.length - 1 ? 'rounded-b-2xl' : ''} `,
135
128
  option.class,
136
129
  )}
137
130
  onclick={(e) => selectOption(option, e)}
138
131
  {disabled}
139
132
  style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);
140
- {option.class?.split(' ').find((cls: string) => cls.startsWith('border-'))
141
- ? `border-width: 1px;
142
- border-color: var(--${option.class
143
- ?.split(' ')
144
- .find((cls: string) => cls.startsWith('border-'))
145
- ?.replace('border-', '')}-color)`
146
- : ''}"
133
+ "
147
134
  >
148
135
  {option.name}
149
136
  </button>
@@ -151,25 +138,17 @@
151
138
  </div>
152
139
  {/if}
153
140
  {:else if type === 'buttons'}
154
- <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="flex h-full w-full flex-row justify-center rounded-full border border-(--bg-color)">
141
+ <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="flex h-full w-full flex-row justify-center rounded-full">
155
142
  {#each options as option, index (option.id)}
156
143
  <button
157
144
  id={option.id}
158
145
  class="{twMerge(
159
- `m-0 inline-block min-w-0 flex-1 items-center px-2 py-1 font-semibold shadow-sm transition-all duration-300 select-none
160
- ${option.disabled || disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-md'}
146
+ `m-0 inline-block min-w-0 flex-1 items-center px-2 py-1 font-semibold shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition-all duration-300 select-none border border-(--bg-color)
147
+ ${option.disabled || disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}
161
148
  ${option.value === value?.value && value !== null ? 'z-10 py-1 shadow-[0_0_10px_var(--shadow-color)] hover:shadow-[0_0_15px_var(--shadow-color)]' : ''}
162
149
  ${options.length > 0 && index === 0 ? 'rounded-l-2xl' : ''} ${index === options.length - 1 ? 'rounded-r-2xl' : ''}`,
163
150
  option.class,
164
151
  )} bg-(--bg-color)"
165
- style="
166
- {option.class?.split(' ').find((cls: string) => cls.startsWith('border-'))
167
- ? `border-width: 1px;
168
- border-color: var(--${option.class
169
- ?.split(' ')
170
- .find((cls: string) => cls.startsWith('border-'))
171
- ?.replace('border-', '')}-color)`
172
- : ''}"
173
152
  onclick={(e) => selectOption(option, e)}
174
153
  disabled={option.disabled}
175
154
  >
@@ -186,10 +165,12 @@
186
165
  {:else if type === 'input'}
187
166
  <input
188
167
  bind:value={searchValue}
189
- class="w-full appearance-none rounded-2xl border px-4 py-1 text-center shadow-sm
190
- transition-shadow duration-200 outline-none focus:border-blue-400
168
+ class="w-full appearance-none rounded-2xl border px-4 py-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)]
169
+ transition-shadow duration-200 outline-none focus:shadow-[0_0_6px_var(--blue-color)]
191
170
  [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
192
- {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text'} border-(--border-color) hover:shadow-md"
171
+ {disabled
172
+ ? 'cursor-not-allowed opacity-50'
173
+ : 'cursor-text'} border-(--bg-color) focus:border-(--blue-color) hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]"
193
174
  style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
194
175
  id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
195
176
  {disabled}
@@ -204,7 +185,7 @@
204
185
 
205
186
  {#if isDropdownOpen}
206
187
  <div
207
- class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-2xl border border-t-0 border-(--border-color)"
188
+ class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-2xl border border-t-0 border-(--bg-color)"
208
189
  style="width: calc(100% - 1.8rem);"
209
190
  transition:slide={{ duration: 250 }}
210
191
  >
@@ -213,20 +194,14 @@
213
194
  id={option.id}
214
195
  value={option?.value ? String(option.value) : ''}
215
196
  class={twMerge(
216
- `flex h-full w-full cursor-pointer items-center justify-center p-1 duration-250 hover:bg-(--field-color)
197
+ `flex h-full w-full cursor-pointer items-center justify-center p-1 inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)] duration-250 hover:bg-(--field-color)!
217
198
  ${index === filteredOptions.length - 1 ? 'rounded-b-2xl' : ''} `,
218
199
  option.class,
219
200
  )}
220
201
  onclick={(e) => selectOption(option, e)}
221
202
  {disabled}
222
203
  style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);
223
- {option.class?.split(' ').find((cls: string) => cls.startsWith('border-'))
224
- ? `border-width: 1px;
225
- border-color: var(--${option.class
226
- ?.split(' ')
227
- .find((cls: string) => cls.startsWith('border-'))
228
- ?.replace('border-', '')}-color)`
229
- : ''}"
204
+ "
230
205
  >
231
206
  {option.name}
232
207
  </button>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "poe-svelte-ui-lib",
3
- "version": "1.4.3",
3
+ "version": "1.4.5",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "scripts": {