@bagelink/vue 1.12.71 → 1.12.74

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

@@ -2,16 +2,15 @@
 import type { IconType, ValidateInputBaseT } from '@bagelink/vue'
 import {
 	Icon,
-	sleep,
 	useDebounceFn,
 	useValidateFieldValue,
 	resolveI18n,
 } from '@bagelink/vue'
-import { until } from '@vueuse/core'
-
 import { computed, onMounted, ref, watch, nextTick } from 'vue'
+import type { BagelInputShellProps } from './bagelInputShell'
+import { useBagelInputShell } from './bagelInputShell'
 
-export interface TextInputProps extends ValidateInputBaseT {
+export interface TextInputProps extends ValidateInputBaseT, BagelInputShellProps {
 	id?: string
 	title?: string
 	helptext?: string
@@ -48,6 +47,8 @@ const props = withDefaults(defineProps<TextInputProps>(), {
 })
 const emit = defineEmits(['update:modelValue', 'debounce'])
 
+const { shellClass, shellStyle } = useBagelInputShell(props)
+
 // Normalize pattern for HTML5 validation
 const normalizedPattern = computed(() => {
 	if (!props.pattern) return undefined
@@ -130,18 +131,10 @@ const hasFocus = () => document.activeElement === input.value
 const focus = () => input.value?.focus()
 defineExpose({ focus, hasFocus })
 
-const hasValue = computed(() => {
-	const val = inputVal.value
-	return val !== undefined && val !== '' && String(val).length > 0
-})
+const hasValue = computed(() => String(inputVal.value ?? '').length > 0)
 
 onMounted(async () => {
-	if (props.autofocus) {
-		await until(() => input.value).toBeTruthy()
-		await sleep(400)
-		input.value?.focus()
-	}
-	// Don't auto-restore defaultValue - let user control their own content
+	if (props.autofocus) { setTimeout(() => input.value?.focus(), 50) }
 
 	if (props.autoheight) {
 		await nextTick()
@@ -152,23 +145,26 @@ onMounted(async () => {
 
 <template>
 	<div
-		class="bagel-input text-input" :class="{
-			dense,
-			small,
-			shrink,
-			code,
-			underlined,
-			'textInputIconWrap': icon,
-			'txtInputIconStart': iconStart,
-			'has-error': !!error,
-			'has-value': hasValue,
-		}" :title="title"
+		class="bagel-input text-input" :class="[
+			shellClass,
+			{
+				dense,
+				small,
+				shrink,
+				code,
+				underlined,
+				'textInputIconWrap': icon,
+				'txtInputIconStart': iconStart,
+				'has-error': !!error,
+				'has-value': hasValue,
+			},
+		]" :style="shellStyle" :title="title"
 	>
 		<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="!multiline && !autoheight && !code && inputRows < 2" :id ref="input" v-model.trim="inputVal"
+		<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"
@@ -244,10 +240,6 @@ onMounted(async () => {
 	background: #f5f5f5;
 }
 
-.bagel-input label {
-	font-size: var(--label-font-size);
-}
-
 .textInputIconWrap .bgl_icon-font {
 	color: var(--input-color);
 	position: absolute;

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { resolveI18n } from '@bagelink/vue'
 import { computed, onMounted } from 'vue'
+import type { BagelInputShellProps } from './bagelInputShell'
+import { useBagelInputShell } from './bagelInputShell'
 
 const props = withDefaults(defineProps<{
 	label?: string
@@ -9,7 +11,9 @@ const props = withDefaults(defineProps<{
 	small?: boolean
 	required?: boolean
 	defaultValue?: boolean
-}>(), { defaultValue: false })
+} & BagelInputShellProps>(), { defaultValue: false })
+
+const { shellClass, shellStyle } = useBagelInputShell(props)
 
 const inputId = computed(() => props.id || Math.random().toString(36).slice(7))
 
@@ -25,7 +29,7 @@ onMounted(() => {
 	<div
 		class="bagel-input bgl-toggle"
 		:title
-		:class="{ small }"
+		:class="[shellClass, { small, 'has-value': checked }]" :style="shellStyle"
 	>
 		<div class="switch" :class="{ checked }">
 			<span class="slider rounded" />
@@ -116,12 +120,31 @@ onMounted(() => {
     outline-offset: 2px
 }
 .bgl-toggle :checked{
-  background: var(--bgl-primary);
+  background: var(--bgl-input-label-active-color, var(--bgl-primary));
 }
 .bgl-toggle :checked::before{
   margin-inline-start:calc(var(--input-height) / 2 - 2px) ;
 }
 .bgl-toggle input:checked + label {
-    color: var(--bgl-primary) !important;
+    color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
+}
+
+/* ── bgl-outline variant ── */
+.bgl-outline input {
+    outline: 1.5px solid var(--border-color) !important;
+    outline-offset: 2px;
+}
+
+/* ── frame variant ── */
+.frame input {
+    outline: 1.5px solid var(--border-color) !important;
+    outline-offset: 2px;
+    transition: outline-color 0.2s ease, box-shadow 0.2s ease;
+    background: transparent;
+}
+
+.frame input:checked {
+    outline-color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 12%, transparent);
 }
 </style>

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -1,22 +1,23 @@
 <script setup lang="ts">
 import type { UploadInputProps } from '../../../../types/BagelForm'
 import { Btn, IMAGE_FORMATS_REGEXP, Icon, Card, Image, pathKeyToURL, Loading, useI18n, resolveI18n } from '@bagelink/vue'
-import { watch, ref } from 'vue'
-
+import { watch, ref, computed, useSlots } from 'vue'
 import { useFileUpload } from './useFileUpload'
+import { useBagelInputShell } from '../bagelInputShell'
 
-const props = withDefaults(defineProps<UploadInputProps & { showIcon?: boolean, icon?: string }>(), {
+const props = withDefaults(defineProps<UploadInputProps>(), {
 	height: '215px',
 	theme: 'dropzone',
 	accept: '*',
 	showIcon: true,
 	icon: 'upload_2',
+	iconSize: 2.5,
 })
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
 
 const { $t } = useI18n()
-
+const slots = useSlots()
 const {
 	fileQueue,
 	pathKeys,
@@ -41,6 +42,21 @@ const {
 
 watch(() => props.modelValue, val => pk.value = val ? [val].flat().filter(Boolean) : [], { immediate: true })
 
+const { shellClass, shellStyle } = useBagelInputShell(props)
+const hasValue = computed(() => pathKeys.value.length > 0 || fileQueue.value.length > 0)
+
+const dropZoneText = computed(() => {
+	const raw = props.dropPlaceholder ?? props.placeholder
+	if (raw == null) { return $t('upload.dropPlaceholder') }
+	const resolved = resolveI18n(raw)
+	if (resolved != null && resolved !== '') { return resolved }
+	return $t('upload.dropPlaceholder')
+})
+
+const showDropZonePlaceholder = computed(
+	() => (!pathKeys.value.length && !fileQueue.value.length) || !!props.multiple
+)
+
 const isImage = (str: string) => IMAGE_FORMATS_REGEXP.test(str)
 
 const isDragOver = ref(false)
@@ -72,7 +88,10 @@ function fileName(pathKey: string) {
 </script>
 
 <template>
-	<div class="bagel-input" :class="{ 'has-error': !!error }" :data-field="name || id">
+	<div
+		class="bagel-input" :class="[shellClass, { 'has-error': !!error, 'has-value': hasValue }]"
+		:style="shellStyle" :data-field="name || id"
+	>
 		<label v-if="label">{{ label }}<span v-if="required"> *</span></label>
 		<input v-if="required && !pathKeys.length" :name="name || id" placeholder="required" type="text" required class="pixel">
 		<Card
@@ -205,13 +224,29 @@ function fileName(pathKey: string) {
 			</slot>
 
 			<slot
-				v-if="(!pathKeys.length && !fileQueue.length) || multiple" name="placeholder" :files="pathKeys"
-				:fileQueue :browse
+				v-if="showDropZonePlaceholder && slots['drop-placeholder']"
+				name="drop-placeholder"
+				:files="pathKeys"
+				:file-queue="fileQueue"
+				:browse="browse"
+			/>
+			<slot
+				v-else-if="showDropZonePlaceholder"
+				name="placeholder"
+				:files="pathKeys"
+				:file-queue="fileQueue"
+				:browse="browse"
 			>
 				<p class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05 ">
-					<Icon v-if="showIcon" :name="icon" size="2.5" class="user-select-none" />
+					<Icon
+						v-if="showIcon"
+						:icon="icon"
+						:size="iconSize"
+						:mobile-size="iconMobileSize"
+						class="user-select-none line-height-1"
+					/>
 					<span class=" pretty balance user-select-none ">
-						{{ resolveI18n(placeholder) || $t('upload.dropPlaceholder') }}
+						{{ dropZoneText }}
 					</span>
 				</p>
 			</slot>

package/src/components/form/inputs/Upload/upload.css

@@ -269,6 +269,21 @@
     outline-color: var(--bgl-red, #dc3545);
 }
 
+/* ─── Variant: frame ─────────────────────────────────────────────────────── */
+
+.bagel-input.frame .fileUploadWrap,
+.bagel-input.frame .fileUploadWrap.fileDropZone {
+    background: transparent;
+    outline-color: var(--border-color);
+    transition: outline-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.bagel-input.frame .fileUploadWrap:hover,
+.bagel-input.frame .fileUploadWrap:focus-within {
+    outline-color: var(--bgl-input-label-active-color, var(--bgl-primary));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 12%, transparent);
+}
+
 .bagel-input.has-error :deep(.bgl-card) {
     border-color: var(--bgl-red, #dc3545);
 }

package/src/components/form/inputs/bagelInputShell.ts

@@ -0,0 +1,43 @@
+import { computed, toValue, type CSSProperties, type MaybeRefOrGetter } from 'vue'
+
+/** Shared visual props for bagel-input field wrappers. */
+export interface BagelInputShellProps {
+	/** Transparent background with a border that highlights (primary color) on focus. */
+	frame?: boolean
+	/** Adds a simple border (border-color) without changing background or focus styles. */
+	outline?: boolean
+	minWidth?: string
+	maxWidth?: string
+	labelColor?: string
+	labelActiveColor?: string
+}
+
+export function useBagelInputShell(props: MaybeRefOrGetter<BagelInputShellProps>) {
+	const shellClass = computed(() => {
+		const p = toValue(props)
+		return {
+			frame: !!p.frame,
+			'bgl-outline': !!p.outline,
+		}
+	})
+
+	const shellStyle = computed((): CSSProperties | undefined => {
+		const p = toValue(props)
+		const style: Record<string, string> = {}
+		if (p.minWidth) { style.minWidth = p.minWidth }
+		if (p.maxWidth) { style.maxWidth = p.maxWidth }
+		if (p.labelColor) { style['--bgl-input-label-color'] = p.labelColor }
+		if (p.labelActiveColor) { style['--bgl-input-label-active-color'] = p.labelActiveColor }
+		return Object.keys(style).length > 0 ? style : undefined
+	})
+
+	return { shellClass, shellStyle }
+}
+
+export function mergeShellStyle(
+	shellStyle: CSSProperties | undefined,
+	extra?: CSSProperties | undefined,
+): CSSProperties | undefined {
+	if (!shellStyle && !extra) { return undefined }
+	return { ...shellStyle, ...extra }
+}

package/src/components/form/inputs/index.ts

@@ -1,3 +1,4 @@
+export { useBagelInputShell, type BagelInputShellProps } from './bagelInputShell'
 export { default as ArrayInput } from './ArrayInput.vue'
 export { default as Checkbox } from './Checkbox.vue'
 export { default as CheckInput } from './CheckInput.vue'

package/src/components/index.ts

@@ -20,6 +20,7 @@ export { default as DragOver } from './DragOver.vue'
 export { default as Dropdown } from './Dropdown.vue'
 export { default as FieldSetVue } from './FieldSetVue.vue'
 export { default as FilterQuery } from './FilterQuery.vue'
+export type { FilterField, QueryOption } from './FilterQuery.types'
 export { default as Flag } from './Flag.vue'
 export * from './form'
 export { default as Icon } from './Icon/Icon.vue'

package/src/dialog/Dialog.vue

@@ -218,6 +218,12 @@ dialog.dialog-center.is-closing {
 dialog.dialog-right[open] {
 	animation: slide-in-right 0.25s ease-out;
 }
+[dir="rtl"] .dialog-right[open] {
+	animation: slide-in-left 0.25s ease-out;
+}
+[dir="rtl"] .dialog-right.is-closing {
+	animation: slide-out-left 0.2s ease-in forwards;
+}
 
 dialog.dialog-right.is-closing {
 	animation: slide-out-right 0.2s ease-in forwards;
@@ -226,11 +232,16 @@ dialog.dialog-right.is-closing {
 dialog.dialog-left[open] {
 	animation: slide-in-left 0.25s ease-out;
 }
+[dir="rtl"] .dialog-left[open] {
+	animation: slide-in-right 0.25s ease-out;
+}
 
 dialog.dialog-left.is-closing {
 	animation: slide-out-left 0.2s ease-in forwards;
 }
-
+[dir="rtl"] .dialog-left.is-closing {
+	animation: slide-out-right 0.2s ease-in forwards;
+}
 dialog.dialog-top[open] {
 	animation: slide-in-top 0.25s ease-out;
 }

package/src/i18n/locales/en.json

@@ -140,7 +140,10 @@
   },
   "email": {
     "invalidEmail": "Please enter a valid email address",
-    "invalidDomain": "This email domain appears to be invalid"
+    "invalidDomain": "This email domain appears to be invalid",
+    "disposableEmail": "Please use a non-disposable email address",
+    "didYouMean": "did you mean {suggestion}?",
+    "validating": "Validating email..."
   },
   "date": {
     "invalidFormat": "Invalid date format"

package/src/i18n/locales/es.json

@@ -140,7 +140,10 @@
   },
   "email": {
     "invalidEmail": "Introduce un correo electrónico válido",
-    "invalidDomain": "El dominio de este correo electrónico parece no ser válido"
+    "invalidDomain": "El dominio de este correo electrónico parece no ser válido",
+    "disposableEmail": "Por favor, utilice una dirección de correo electrónico que no sea desechable",
+    "didYouMean": "¿Quisiste decir {suggestion}?",
+    "validating": "Validando correo electrónico..."
   },
   "date": {
     "invalidFormat": "Formato de fecha inválido"

package/src/i18n/locales/fr.json

@@ -140,7 +140,10 @@
   },
   "email": {
     "invalidEmail": "Veuillez entrer une adresse email valide",
-    "invalidDomain": "Le domaine de cet email semble invalide"
+    "invalidDomain": "Le domaine de cet email semble invalide",
+    "disposableEmail": "Veuillez utiliser une adresse e-mail non jetable",
+    "didYouMean": "Vouliez-vous dire {suggestion} ?",
+    "validating": "Validation de l'e-mail..."
   },
   "date": {
     "invalidFormat": "Format de date invalide"

package/src/i18n/locales/he.json

@@ -161,7 +161,10 @@
   },
   "email": {
     "invalidEmail": "הזן כתובת אימייל חוקית",
-    "invalidDomain": "נראה שדומיין האימייל אינו חוקי"
+    "invalidDomain": "נראה שדומיין האימייל אינו חוקי",
+    "disposableEmail": "אנא השתמש בכתובת אימייל שאינה חד-פעמית",
+    "didYouMean": "האם התכוונת ל-{suggestion}?",
+    "validating": "מאמת כתובת אימייל..."
   },
   "date": {
     "invalidFormat": "פורמט תאריך לא חוקי"

package/src/i18n/locales/it.json

@@ -140,7 +140,10 @@
   },
   "email": {
     "invalidEmail": "Inserisci un indirizzo email valido",
-    "invalidDomain": "Il dominio di questa email sembra non essere valido"
+    "invalidDomain": "Il dominio di questa email sembra non essere valido",
+    "disposableEmail": "Si prega di utilizzare un indirizzo email non temporaneo",
+    "didYouMean": "Intendevi {suggestion}?",
+    "validating": "Convalida dell'e-mail..."
   },
   "date": {
     "invalidFormat": "Formato data non valido"

package/src/i18n/locales/ru.json

@@ -140,7 +140,10 @@
   },
   "email": {
     "invalidEmail": "Введите действительный адрес электронной почты",
-    "invalidDomain": "Домен этого адреса электронной почты, похоже, недействителен"
+    "invalidDomain": "Домен этого адреса электронной почты, похоже, недействителен",
+    "disposableEmail": "Пожалуйста, используйте постоянный адрес электронной почты",
+    "didYouMean": "Вы имели в виду {suggestion}?",
+    "validating": "Проверка адреса электронной почты..."
   },
   "date": {
     "invalidFormat": "Неверный формат даты"

package/src/styles/input-variants.css

@@ -37,7 +37,7 @@
 .bagel-input.underlined.open .label-text {
 	top: -0.65rem;
 	font-size: 0.65rem;
-	color: var(--bgl-primary);
+	color: var(--bgl-input-label-active-color);
 	opacity: 1;
 }
 
@@ -68,14 +68,13 @@
 .bagel-input.underlined.has-value .label-text {
 	top: -0.65rem;
 	font-size: 0.65rem;
-	color: var(--bgl-text-color, #555);
-	opacity: 0.6;
+	opacity: 1;
 }
 
-/* focused overrides has-value color */
-.bagel-input.underlined:focus-within.has-value .label-text,
-.bagel-input.underlined.open.has-value .label-text {
-	color: var(--bgl-primary);
+/* focused: color the label */
+.bagel-input.underlined:focus-within .label-text,
+.bagel-input.underlined.open .label-text {
+	color: var(--bgl-input-label-active-color);
 	opacity: 1;
 }
 
@@ -106,7 +105,7 @@
 	inset-inline-start: 0;
 	width: 0;
 	height: 2px;
-	background: var(--bgl-primary);
+	background: var(--bgl-input-label-active-color, var(--bgl-primary));
 	transition: width 0.6s ease;
 	pointer-events: none;
 }
@@ -130,7 +129,7 @@
 .bagel-input.underlined textarea:focus {
 	outline: none !important;
 	box-shadow: none !important;
-	border-color: var(--bgl-primary) !important;
+	border-color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
 }
 
 /* label default: sits at placeholder level inside the box */
@@ -143,7 +142,7 @@
 .bagel-input.underlined:focus-within label:has(textarea) .label-text {
 	top: 0.45rem;
 	font-size: 0.65rem;
-	color: var(--bgl-primary);
+	color: var(--bgl-input-label-active-color);
 	opacity: 1;
 }
 
@@ -152,15 +151,15 @@
 	.label-text {
 	top: 0.45rem;
 	font-size: 0.65rem;
-	color: var(--bgl-text-color, #555);
-	opacity: 0.6;
+	color: var(--bgl-input-label-active-color);
+	opacity: 1;
 }
 
 .bagel-input.underlined:focus-within
 	label:has(textarea:not(:placeholder-shown))
 	.label-text {
 	top: 0.45rem;
-	color: var(--bgl-primary);
+	color: var(--bgl-input-label-active-color);
 	opacity: 1;
 }