@bagelink/vue 1.12.67 → 1.12.74

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

@@ -5,8 +5,10 @@ import { onClickOutside } from '@vueuse/core'
 import { ref, computed, onMounted, watch } from 'vue'
 import { WEEK_START_DAY } from '../../../utils/calendar/time'
 import DatePicker from './DatePicker.vue'
+import type { BagelInputShellProps } from './bagelInputShell'
+import { useBagelInputShell } from './bagelInputShell'
 
-export interface DateInputProps {
+export interface DateInputProps extends BagelInputShellProps {
 	required?: boolean
 	label?: string
 	placeholder?: string
@@ -43,6 +45,8 @@ const props = withDefaults(
 
 const { $t } = useI18n()
 
+const { shellClass, shellStyle } = useBagelInputShell(props)
+
 const selectedDate = defineModel<string | Date>()
 const inputValue = ref('')
 const isValid = ref(true)
@@ -193,7 +197,8 @@ onMounted(() => {
 <template>
 	<div
 		class="bagel-input"
-		:class="{ small, 'has-error': !!error || !isValid, underlined, 'has-value': hasValue, 'open': isOpen }"
+		:class="[shellClass, { small, 'has-error': !!error || !isValid, underlined, 'has-value': hasValue, 'open': isOpen }]"
+		:style="shellStyle"
 	>
 		<label>
 			<span v-if="label || (underlined && placeholder)" class="label-text">{{ resolveI18n(label || placeholder)
@@ -206,7 +211,9 @@ onMounted(() => {
 							:placeholder="underlined ? ' ' : (resolveI18n(placeholder) || (enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY'))"
 							:required="underlined ? false : required" :disabled="!editMode"
 							:error="!isValid ? $t('date.invalidFormat') : error" :class="{ 'txt-center': center }"
-							:underlined="underlined" class="date-input m-0" @input="handleInput" @focus="handleFocus"
+							:underlined="underlined" :frame="frame" :outline="outline" :min-width="minWidth"
+							:max-width="maxWidth" :label-color="labelColor" :label-active-color="labelActiveColor"
+							class="date-input m-0" @input="handleInput" @focus="handleFocus"
 							@blur="handleBlur" @click.stop @keydown="handleKeydown" @iconClick="handleIconClick"
 						/>
 					</div>

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

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { IconType, ValidateInputBaseT } from '@bagelink/vue'
 import { Icon, useDebounceFn, useI18n, resolveI18n } from '@bagelink/vue'
-import { computed, onMounted, ref, watch, nextTick } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { EMAIL_REGEX } from '../../../utils/constants'
+import type { BagelInputShellProps } from './bagelInputShell'
+import { useBagelInputShell } from './bagelInputShell'
 
 const props = withDefaults(
 	defineProps<EmailInputProps>(),
@@ -11,15 +13,18 @@ const props = withDefaults(
 		autocorrect: true,
 		serverValidate: false,
 		preventFakeEmails: false,
+		formatValidation: false,
 		pattern: '[a-z0-9._%+\\-]+@[a-z0-9.\\-]+\\.[a-z]{2,}',
 	},
 )
 
 const emit = defineEmits(['update:modelValue', 'debounce'])
 
+const { shellClass, shellStyle } = useBagelInputShell(props)
+
 const { $t } = useI18n()
 
-export interface EmailInputProps extends ValidateInputBaseT {
+export interface EmailInputProps extends ValidateInputBaseT, BagelInputShellProps {
 	id?: string
 	title?: string
 	helptext?: string
@@ -37,7 +42,7 @@ export interface EmailInputProps extends ValidateInputBaseT {
 	nativeInputAttrs?: { [key: string]: any }
 	icon?: IconType
 	iconStart?: IconType
-	autocomplete?: AutoFillField
+	autocomplete?: string
 	autofocus?: boolean
 	error?: string
 	onFocusout?: (e: FocusEvent) => void
@@ -46,6 +51,7 @@ export interface EmailInputProps extends ValidateInputBaseT {
 	autocorrect?: boolean
 	serverValidate?: boolean
 	preventFakeEmails?: boolean
+	formatValidation?: boolean
 }
 
 // Common email providers for autocorrection
@@ -100,7 +106,6 @@ const inputVal = ref<string>('')
 const suggestedCorrection = ref<string | null>(null)
 const validationMessage = ref('')
 const isValidating = ref(false)
-const isValidEmail = ref(true)
 const validatedEmails = new Map<string, boolean>()
 
 const input = ref<HTMLInputElement>()
@@ -120,7 +125,7 @@ function validateEmail(value: string) {
 		if (domain) {
 			const domainLower = domain.toLowerCase()
 			if (FAKE_EMAIL_DOMAINS.includes(domainLower)) {
-				return 'Please use a non-disposable email address'
+				return $t('email.disposableEmail')
 			}
 		}
 	}
@@ -151,9 +156,11 @@ function validateInput() {
 async function validateEmailWithServer(email: string) {
 	if (!props.serverValidate || !email || !EMAIL_REGEX.test(email)) { return }
 
-	// If we've already validated this email, use cached result
 	if (validatedEmails.has(email)) {
-		isValidEmail.value = validatedEmails.get(email) || false
+		if (!validatedEmails.get(email)) {
+			validationMessage.value = $t('email.invalidDomain')
+			input.value?.setCustomValidity(validationMessage.value)
+		}
 		return
 	}
 
@@ -172,7 +179,6 @@ async function validateEmailWithServer(email: string) {
 		const result = await response.json()
 		const isValid = result.status === 'valid' || result.has_mx === true
 
-		isValidEmail.value = isValid
 		validatedEmails.set(email, isValid)
 
 		if (!isValid) {
@@ -271,10 +277,6 @@ const debouncedServerValidate = useDebounceFn(() => validateEmailWithServer(inpu
 function updateInputVal() {
 	if (props.disabled) { return }
 
-	// Remove typo checking while typing - only do this on focusout now
-	// checkForTypos(inputVal.value)
-
-	// Clear any previous suggestions
 	suggestedCorrection.value = null
 
 	validateInput()
@@ -289,7 +291,6 @@ function updateInputVal() {
 }
 
 function handleFocusout(e: FocusEvent) {
-	// Check for typos when the user leaves the field
 	checkForTypos(inputVal.value)
 
 	// Immediately validate on blur
@@ -305,25 +306,23 @@ watch(
 	(newVal) => {
 		if (newVal !== inputVal.value) {
 			inputVal.value = newVal || ''
-			nextTick(() => { validateInput() })
 		}
 	},
 	{ immediate: true },
 )
 
-watch(
-	() => inputVal.value,
-	() => { validateInput() },
-	{ immediate: true }
-)
+watch(() => inputVal.value, () => { validateInput() }, { immediate: true })
 
 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(() => inputVal.value.length > 0)
+
+const formatValidationClass = computed(() => {
+	if (!props.formatValidation) return null
+	if (!hasValue.value) return 'format-empty'
+	return EMAIL_REGEX.test(inputVal.value) ? 'format-valid' : 'format-invalid'
 })
 
 onMounted(() => {
@@ -334,16 +333,20 @@ onMounted(() => {
 
 <template>
 	<div
-		class="bagel-input text-input" :class="{
-			small,
-			shrink,
-			underlined,
-			'textInputIconWrap': icon,
-			'txtInputIconStart': iconStart,
-			'is-validating': isValidating,
-			'has-error': !!error,
-			'has-value': hasValue,
-		}" :title="title"
+		class="bagel-input text-input" :class="[
+			shellClass,
+			formatValidationClass,
+			{
+				small,
+				shrink,
+				underlined,
+				'textInputIconWrap': icon,
+				'txtInputIconStart': iconStart,
+				'is-validating': isValidating,
+				'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>
@@ -353,9 +356,9 @@ onMounted(() => {
 					v-if="suggestedCorrection" class="pointer nowrap inline-block ms-auto color-red txt-10px p-0"
 					@click.prevent="applyCorrection"
 				>
-					did you mean {{ suggestedCorrection }}?
+					{{ $t('email.didYouMean', { suggestion: suggestedCorrection }) }}
 				</span>
-				<span v-if="isValidating" class="validating">Validating email...</span>
+				<span v-if="isValidating" class="validating">{{ $t('email.validating') }}</span>
 			</div>
 			<input
 				:id ref="input" v-model="inputVal" v-pattern:lower class="ltr" :name :title autocomplete="email"
@@ -381,29 +384,61 @@ onMounted(() => {
 .bagel-input label {
 	font-size: var(--label-font-size);
 }
-</style>
 
-<style scoped>
-.bagel-input textarea {
-	min-height: unset;
-	font-size: var(--input-font-size);
+.bagel-input.format-invalid,
+.bagel-input.format-valid,
+.bagel-input.format-empty {
+	position: relative;
 }
 
-.bagel-input.text-input textarea {
-	resize: none;
+.bagel-input.format-invalid::after {
+	content: '';
+	position: absolute;
+	width: 7px;
+	height: 7px;
+	border-radius: 50%;
+	background: var(--bgl-orange);
+	right: 0.6rem;
+	bottom: calc(var(--input-height) / 2 - 3.5px);
+	pointer-events: none;
 }
 
-.code textarea {
-	font-family: 'Inconsolata', monospace;
-	background: var(--bgl-code-bg) !important;
-	color: var(--bgl-light-text) !important;
+.bagel-input.format-invalid.textInputIconWrap::after,
+.bagel-input.format-valid.textInputIconWrap::after,
+.bagel-input.format-empty.textInputIconWrap::after {
+	right: calc(var(--input-height) / 3 + 1.8rem);
 }
 
-.code textarea::placeholder {
-	color: var(--bgl-light-text) !important;
-	opacity: 0.3;
+.bagel-input.format-empty::after {
+	content: '';
+	position: absolute;
+	width: 7px;
+	height: 7px;
+	border-radius: 50%;
+	background: var(--bgl-gray, #aaa);
+	right: 0.6rem;
+	bottom: calc(var(--input-height) / 2 - 3.5px);
+	pointer-events: none;
 }
 
+.bagel-input.format-valid {
+	position: relative;
+}
+
+.bagel-input.format-valid::after {
+	content: '';
+	position: absolute;
+	width: 7px;
+	height: 7px;
+	border-radius: 50%;
+	background: var(--bgl-green);
+	right: 0.6rem;
+	bottom: calc(var(--input-height) / 2 - 3.5px);
+	pointer-events: none;
+}
+</style>
+
+<style scoped>
 .bagel-input.small {
 	margin-bottom: 0;
 	height: 30px;
@@ -423,29 +458,30 @@ onMounted(() => {
 	font-size: var(--label-font-size);
 }
 
+/* email input is always LTR — use physical properties so icons stay in the correct
+   visual position regardless of the document's text direction */
 .textInputIconWrap .bgl_icon-font {
 	color: var(--input-color);
 	position: absolute;
-	inset-inline-end: calc(var(--input-height) / 3 - 0.25rem);
+	right: calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 + 0.1rem);
 	line-height: 0;
 }
 
 .textInputIconWrap input {
-	padding-inline-end: calc(var(--input-height) / 3 + 1.5rem);
+	padding-right: calc(var(--input-height) / 3 + 1.5rem);
 }
 
 .txtInputIconStart .iconStart {
 	color: var(--input-color);
 	position: absolute;
-	inset-inline-start: calc(var(--input-height) / 3 - 0.25rem);
+	left: calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2);
 	line-height: 0;
 }
 
-.txtInputIconStart input,
-.txtInputIconStart textarea {
-	padding-inline-start: calc(var(--input-height) / 3 + 1.5rem);
+.txtInputIconStart input {
+	padding-left: calc(var(--input-height) / 3 + 1.5rem);
 }
 
 .bagel-input.small textarea {

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

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 // const props =
+import { computed } from 'vue'
 import { resolveI18n } from '@bagelink/vue'
+import type { BagelInputShellProps } from './bagelInputShell'
+import { useBagelInputShell } from './bagelInputShell'
 
-withDefaults(
+const props = withDefaults(
 	defineProps<{
 		description?: string
 		label?: string
@@ -10,7 +13,7 @@ withDefaults(
 		placeholder?: string
 		editMode?: boolean
 		small?: boolean
-	}>(),
+	} & BagelInputShellProps>(),
 	{
 		description: '',
 		editMode: true,
@@ -18,7 +21,9 @@ withDefaults(
 		label: '',
 	},
 )
-// TODO: remove this Nati ?
+
+const { shellClass, shellStyle } = useBagelInputShell(props)
+const hasValue = computed(() => props.modelValue != null && String(props.modelValue).length > 0)
 
 const emits = defineEmits(['update:modelValue'])
 function handleInput(e: Event) {
@@ -28,7 +33,10 @@ function handleInput(e: Event) {
 </script>
 
 <template>
-	<div class="bagel-input" :title="description" :class="{ small }">
+	<div
+		class="bagel-input" :title="description"
+		:class="[shellClass, { small, 'has-value': hasValue }]" :style="shellStyle"
+	>
 		<label v-if="label">
 			<LangText :input="label" />
 		</label>

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

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
 import { Btn, TextInput } from '@bagelink/vue'
 import { computed, nextTick, ref } from 'vue'
+import type { BagelInputShellProps } from './bagelInputShell'
+import { useBagelInputShell } from './bagelInputShell'
 
-interface Props {
+interface Props extends BagelInputShellProps {
 	maxLength?: number
 	placeholder?: string
 	label?: string
@@ -10,7 +12,13 @@ interface Props {
 	showFormatting?: boolean
 }
 
-const { maxLength, placeholder = 'Enter Text', label = 'Body', showFormatting = true } = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+	placeholder: 'Enter Text',
+	label: 'Body',
+	showFormatting: true,
+})
+const { maxLength, placeholder, label, showFormatting, rtl } = props
+const { shellClass, shellStyle } = useBagelInputShell(props)
 
 const text = defineModel<string>('modelValue', { default: '' })
 
@@ -85,7 +93,7 @@ defineExpose({	html })
 
 <template>
 	<div class="markdown-editor">
-		<div class="bagel-input mb-0">
+		<div class="bagel-input mb-0" :class="[shellClass, { 'has-value': charCount > 0 }]" :style="shellStyle">
 			<div v-if="maxLength" class="txt10 opacity-6 -mb-1 w100p txt-end">
 				{{ charCount }} / {{ maxLength }}
 			</div>
@@ -102,7 +110,7 @@ defineExpose({	html })
 			/>
 		</div>
 
-		<div v-if="showFormatting" class="flex justify-content-end -mt-025 -mb-05">
+		<div v-if="showFormatting" class="flex justify-content-end -mt-025 -mb-05 ltr">
 			<Btn thin icon-size="0.9" flat icon="format_bold" @click="insertToBody('bold')" />
 			<Btn thin icon-size="0.9" flat icon="format_italic" @click="insertToBody('italic')" />
 			<Btn thin icon-size="0.9" flat icon="format_underlined" @click="insertToBody('underline')" />