@bagelink/vue 1.15.283 → 1.15.285

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.283",
+  "version": "1.15.285",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/form/inputs/TextInput.vue

@@ -31,6 +31,7 @@ export interface TextInputProps extends ValidateInputBaseT, BagelInputShellProps
 	nativeInputAttrs?: { [key: string]: any }
 	icon?: IconType
 	iconStart?: IconType
+	iconColor?: string
 	multiline?: boolean
 	autoheight?: boolean
 	code?: boolean
@@ -166,6 +167,7 @@ onMounted(async () => {
 				underlined,
 				'textInputIconWrap': icon,
 				'txtInputIconStart': iconStart,
+				'multiline-field': autoheight || inputRows >= 2,
 				'has-error': !!error,
 				'has-value': hasValue,
 			},
@@ -173,21 +175,22 @@ onMounted(async () => {
 	>
 		<label :for="id">
 			<span v-if="label || (underlined && placeholder)" class="label-text">{{ resolveI18n(label) || resolveI18n(placeholder) }}<span v-if="required"> *</span></span>
-
-		<input
-			v-if="!autoheight && inputRows < 2" :id ref="input" v-model.trim="inputVal"
-				:name :title :autocomplete :type :rows="1"
-				:placeholder="underlined ? ' ' : (resolveI18n(placeholder) || resolveI18n(label))"
-				:disabled :required v-bind="nativeInputAttrs" :pattern="normalizedPattern" @focusout="onFocusout"
-				@focus="onFocus" @input="updateInputVal"
-			>
-			<textarea
-				v-else :id ref="input" v-model="inputVal" :name :title :type :rows="inputRows"
-				:placeholder="underlined ? ' ' : (resolveI18n(placeholder) || resolveI18n(label))" :disabled :required
-				v-bind="nativeInputAttrs" :pattern="normalizedPattern" @input="updateInputVal" @focusout="onFocusout"
-			/>
-			<Icon v-if="iconStart" :class="{ ' -top-025 line-height-0 ': underlined }" class="iconStart" :icon="iconStart" />
-			<Icon v-if="icon" :class="{ ' -top-025 line-height-0 ': underlined }" :icon />
+			<span class="input-field">
+				<input
+				v-if="!autoheight && inputRows < 2" :id ref="input" v-model.trim="inputVal"
+					:name :title :autocomplete :type :rows="1"
+					:placeholder="underlined ? ' ' : (resolveI18n(placeholder) || resolveI18n(label))"
+					:disabled :required v-bind="nativeInputAttrs" :pattern="normalizedPattern" @focusout="onFocusout"
+					@focus="onFocus" @input="updateInputVal"
+				>
+				<textarea
+					v-else :id ref="input" v-model="inputVal" :name :title :type :rows="inputRows"
+					:placeholder="underlined ? ' ' : (resolveI18n(placeholder) || resolveI18n(label))" :disabled :required
+					v-bind="nativeInputAttrs" :pattern="normalizedPattern" @input="updateInputVal" @focusout="onFocusout"
+				/>
+				<Icon v-if="iconStart" :class="{ ' -top-025 line-height-0 ': underlined }" class="iconStart" :icon="iconStart" :color="iconColor" />
+				<Icon v-if="icon" :class="{ ' -top-025 line-height-0 ': underlined }" :icon :color="iconColor" />
+			</span>
 		</label>
 		<p v-if="helptext" class="helptext">{{ helptext }}</p>
 		<div v-if="error" class="error-message">
@@ -269,20 +272,15 @@ gap: 0.5rem;
 background: var(--input-disabled-bg);
 }
 
-/* Icon centering.
-   The icon is absolutely positioned inside the <label>, whose only positioned ancestor
-   is `.bagel-input`. In the DEFAULT variant the label text is in normal flow and pushes
-   the input DOWN, but the old `top: input-height/2` was measured from the component top —
-   so with a label the icon rode up onto the label text (the misalignment).
-
-   Fix: make the <label> the containing block and anchor the icon into a band the height
-   of the input row pinned to the BOTTOM of the label (the input is the last row), then
-   flex-center it. Bottom-anchored + fixed band height ⇒ centered on the input regardless
-   of a label above, and in dense/small modes. Scoped to :not(.underlined) because the
-   underlined variant floats its label as an overlay (input isn't pushed down). */
+/* Keep icon positioning relative to the native field, not the optional label. */
+.input-field {
+position: relative;
+display: block;
+width: 100%;
+}
+
 .bagel-input:not(.underlined).textInputIconWrap > label,
 .bagel-input:not(.underlined).txtInputIconStart > label {
-position: relative;
 display: block;
 }
 
@@ -293,6 +291,14 @@ bottom: calc(var(--bgl-input-height) / 2);
 transform: translateY(50%);
 }
 
+/* In a textarea, align icons with the first line instead of the field's bottom. */
+.bagel-input.multiline-field:not(.underlined).textInputIconWrap .bgl_icon-font,
+.bagel-input.multiline-field:not(.underlined).txtInputIconStart .iconStart {
+top: calc(0.7rem + var(--bgl-input-font-size) / 2);
+bottom: auto;
+transform: translateY(-50%);
+}
+
 /* underlined: label floats as an overlay, so the original top-center is correct */
 .underlined.textInputIconWrap .bgl_icon-font,
 .underlined.txtInputIconStart .iconStart {
@@ -300,6 +306,11 @@ top: calc(var(--bgl-input-height) / 2);
 transform: translateY(-50%);
 }
 
+.underlined.multiline-field.textInputIconWrap .bgl_icon-font,
+.underlined.multiline-field.txtInputIconStart .iconStart {
+top: calc(1.4rem + var(--bgl-input-font-size) / 2);
+}
+
 .textInputIconWrap .bgl_icon-font,
 .txtInputIconStart .iconStart {
 color: var(--bgl-input-color);