@likable-hair/svelte 0.0.35 → 0.0.36
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/forms/Textfield.svelte +70 -32
- package/forms/Textfield.svelte.d.ts +1 -0
- package/package.json +1 -1
package/forms/Textfield.svelte
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<script >export let label = "", placeholder = "", color = "", value = "", variant = 'outlined', width = "100%", textColor = "balck", borderWeight = "2px", borderRadius = "5px", borderColor = undefined, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = undefined, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined;
|
|
1
|
+
<script >export let label = "", placeholder = "", color = "", value = "", variant = 'outlined', width = "100%", textColor = "balck", borderWeight = "2px", borderRadius = "5px", borderColor = undefined, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = undefined, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, type = 'text';
|
|
2
2
|
import { v4 as uuidv4 } from 'uuid';
|
|
3
3
|
import { onMount } from 'svelte';
|
|
4
4
|
let inputId = uuidv4(), focused = false, legendWidth = 0, labelElement = undefined;
|
|
@@ -148,14 +148,78 @@ $: if (!!labelElement) {
|
|
|
148
148
|
<div>
|
|
149
149
|
<slot name="prepend-inner"></slot>
|
|
150
150
|
</div>
|
|
151
|
-
|
|
151
|
+
{#if type == 'password'}
|
|
152
|
+
<input
|
|
153
|
+
style:background-color={backgroundColor}
|
|
154
|
+
style:color={textColor}
|
|
155
|
+
style:font-size={fontSize}
|
|
156
|
+
id={inputId}
|
|
157
|
+
class="input-outlined"
|
|
158
|
+
type="password"
|
|
159
|
+
placeholder={placeholder}
|
|
160
|
+
bind:value={value}
|
|
161
|
+
on:change
|
|
162
|
+
on:input
|
|
163
|
+
on:focus={handleFocus}
|
|
164
|
+
on:focus
|
|
165
|
+
on:blur={handleBlur}
|
|
166
|
+
on:blur
|
|
167
|
+
/>
|
|
168
|
+
{:else if type == 'text'}
|
|
169
|
+
<input
|
|
170
|
+
style:background-color={backgroundColor}
|
|
171
|
+
style:color={textColor}
|
|
172
|
+
style:font-size={fontSize}
|
|
173
|
+
id={inputId}
|
|
174
|
+
class="input-outlined"
|
|
175
|
+
type="text"
|
|
176
|
+
placeholder={placeholder}
|
|
177
|
+
bind:value={value}
|
|
178
|
+
on:change
|
|
179
|
+
on:input
|
|
180
|
+
on:focus={handleFocus}
|
|
181
|
+
on:focus
|
|
182
|
+
on:blur={handleBlur}
|
|
183
|
+
on:blur
|
|
184
|
+
/>
|
|
185
|
+
{/if}
|
|
186
|
+
<div>
|
|
187
|
+
<slot name="append-inner"></slot>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
{:else if variant == 'boxed'}
|
|
191
|
+
<div
|
|
192
|
+
style:display="flex"
|
|
193
|
+
>
|
|
194
|
+
<div>
|
|
195
|
+
<slot name="prepend-inner"></slot>
|
|
196
|
+
</div>
|
|
197
|
+
{#if type == 'password'}
|
|
198
|
+
<input
|
|
152
199
|
style:background-color={backgroundColor}
|
|
153
200
|
style:color={textColor}
|
|
154
201
|
style:font-size={fontSize}
|
|
155
|
-
id={inputId}
|
|
156
|
-
class="input-
|
|
202
|
+
id={inputId}
|
|
203
|
+
class="input-boxed"
|
|
204
|
+
type="password"
|
|
205
|
+
placeholder={placeholder || label}
|
|
206
|
+
bind:value={value}
|
|
207
|
+
on:change
|
|
208
|
+
on:input
|
|
209
|
+
on:focus={handleFocus}
|
|
210
|
+
on:focus
|
|
211
|
+
on:blur={handleBlur}
|
|
212
|
+
on:blur
|
|
213
|
+
/>
|
|
214
|
+
{:else if type == 'text'}
|
|
215
|
+
<input
|
|
216
|
+
style:background-color={backgroundColor}
|
|
217
|
+
style:color={textColor}
|
|
218
|
+
style:font-size={fontSize}
|
|
219
|
+
id={inputId}
|
|
220
|
+
class="input-boxed"
|
|
157
221
|
type="text"
|
|
158
|
-
placeholder={placeholder}
|
|
222
|
+
placeholder={placeholder || label}
|
|
159
223
|
bind:value={value}
|
|
160
224
|
on:change
|
|
161
225
|
on:input
|
|
@@ -164,33 +228,7 @@ $: if (!!labelElement) {
|
|
|
164
228
|
on:blur={handleBlur}
|
|
165
229
|
on:blur
|
|
166
230
|
/>
|
|
167
|
-
|
|
168
|
-
<slot name="append-inner"></slot>
|
|
169
|
-
</div>
|
|
170
|
-
</div>
|
|
171
|
-
{:else if variant == 'boxed'}
|
|
172
|
-
<div
|
|
173
|
-
style:display="flex"
|
|
174
|
-
>
|
|
175
|
-
<div>
|
|
176
|
-
<slot name="prepend-inner"></slot>
|
|
177
|
-
</div>
|
|
178
|
-
<input
|
|
179
|
-
style:background-color={backgroundColor}
|
|
180
|
-
style:color={textColor}
|
|
181
|
-
style:font-size={fontSize}
|
|
182
|
-
id={inputId}
|
|
183
|
-
class="input-boxed"
|
|
184
|
-
type="text"
|
|
185
|
-
placeholder={placeholder || label}
|
|
186
|
-
bind:value={value}
|
|
187
|
-
on:change
|
|
188
|
-
on:input
|
|
189
|
-
on:focus={handleFocus}
|
|
190
|
-
on:focus
|
|
191
|
-
on:blur={handleBlur}
|
|
192
|
-
on:blur
|
|
193
|
-
/>
|
|
231
|
+
{/if}
|
|
194
232
|
<div>
|
|
195
233
|
<slot name="append-inner"></slot>
|
|
196
234
|
</div>
|