@hashrytech/quick-components-kit 0.19.1 → 0.19.3
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/CHANGELOG.md +12 -0
- package/dist/components/text-input/TextInput.svelte +17 -11
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -102,15 +102,21 @@
|
|
|
102
102
|
* - "lg": h-[2.8rem] text-lg placeholder:text-lg
|
|
103
103
|
*/
|
|
104
104
|
let sizeStyle: Record<TextInputSize, string> = {
|
|
105
|
-
sm: "text-sm placeholder:text-sm",
|
|
106
|
-
md: "text-sm placeholder:text-sm",
|
|
107
|
-
lg: "text-base placeholder:text-base"
|
|
105
|
+
sm: "text-sm placeholder:text-sm px-2.5",
|
|
106
|
+
md: "text-sm placeholder:text-sm px-2.5",
|
|
107
|
+
lg: "text-base placeholder:text-base px-3"
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
let iconStyle: Record<TextInputSize, string> = {
|
|
111
|
+
sm: "pl-2.5",
|
|
112
|
+
md: "px-2.5",
|
|
113
|
+
lg: "text-base placeholder:text-base px-3"
|
|
108
114
|
};
|
|
109
115
|
|
|
110
116
|
let textBoxStyle: Record<TextInputSize, string> = {
|
|
111
|
-
sm: "h-[2.05rem]
|
|
112
|
-
md: "h-[2.375rem]
|
|
113
|
-
lg: "h-[2.8rem]
|
|
117
|
+
sm: "h-[2.05rem]",
|
|
118
|
+
md: "h-[2.375rem]",
|
|
119
|
+
lg: "h-[2.8rem]"
|
|
114
120
|
};
|
|
115
121
|
|
|
116
122
|
const directionClass = {
|
|
@@ -122,7 +128,7 @@
|
|
|
122
128
|
|
|
123
129
|
// --- Debounce logic ---
|
|
124
130
|
let localValue = value; // local for immediate typing
|
|
125
|
-
let debounceTimer: ReturnType<typeof setTimeout>;
|
|
131
|
+
let debounceTimer: ReturnType<typeof setTimeout>;
|
|
126
132
|
|
|
127
133
|
function handleInput(e: Event) {
|
|
128
134
|
localValue = (e.target as HTMLInputElement).value;
|
|
@@ -142,15 +148,15 @@
|
|
|
142
148
|
{#if !label && labelText}<label for={id} class={twMerge("text-sm font-medium text-primary-label-text ml-1", labelClass)}>{labelText}</label>{/if}
|
|
143
149
|
|
|
144
150
|
<!-- Text Box -->
|
|
145
|
-
<div class={twMerge("flex flex-row items-center rounded-primary border border-primary-input-border
|
|
151
|
+
<div class={twMerge("flex flex-row items-center rounded-primary border border-primary-input-border focus-within:ring focus-within:border-primary-focus focus-within:ring-primary-focus has-[input:disabled]:bg-neutral-300/30 has-[input:disabled]:border-neutral-300/30",
|
|
146
152
|
error ? "bg-red-50 border-red-300" : "", textBoxStyle[size], thirdDivClass)}>
|
|
147
153
|
|
|
148
|
-
{#if leftIcon}<div class="h-full flex flex-col items-center justify-center">{@render leftIcon()}</div>{/if}
|
|
154
|
+
{#if leftIcon}<div class="h-full flex flex-col items-center justify-center {size == 'lg' ? 'pl-3' : 'pl-2.5'}">{@render leftIcon()}</div>{/if}
|
|
149
155
|
|
|
150
156
|
<input {disabled} {required} {type} {id} name={name ? name: id} {placeholder} {onmouseup} bind:value {autocomplete} {inputmode} {min} {max} oninput={handleInput}
|
|
151
|
-
class={twMerge("border-0 focus:border-0 focus:ring-0 active:border-0 outline-none p-0 bg-transparent placeholder:text-neutral-600/50 h-full w-full", sizeStyle[size], restProps.class)} />
|
|
157
|
+
class={twMerge("border-0 focus:border-0 focus:ring-0 active:border-0 outline-none p-0 bg-transparent placeholder:text-neutral-600/50 h-full w-full rounded-primary", sizeStyle[size], restProps.class)} />
|
|
152
158
|
|
|
153
|
-
{#if rightIcon}<div class="h-full flex flex-col items-center justify-center">{@render rightIcon()}</div>{/if}
|
|
159
|
+
{#if rightIcon}<div class="h-full flex flex-col items-center justify-center {size == 'lg' ? 'pr-3' : 'pr-2.5'}">{@render rightIcon()}</div>{/if}
|
|
154
160
|
</div>
|
|
155
161
|
|
|
156
162
|
</div>
|