@bagelink/vue 1.9.142 → 1.9.148

package/package.json

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

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

@@ -22,7 +22,7 @@ defineSlots<{
 	default: (props: { item: WritableComputedRef<T>, index: number }) => unknown
 }>()
 
-const { locale } = useI18n()
+const { $t } = useI18n()
 
 const items = ref(Array.isArray(props.modelValue) ? [...props.modelValue] : []) as Ref<T[]>
 const minimizedItems = ref(Array.from({ length: items.value.length }, () => true))
@@ -31,17 +31,12 @@ const dragOverIndex = ref<number | null>(null)
 const keySeed = ref(0)
 const itemKeys = ref(Array.from({ length: items.value.length }, () => nextItemKey()))
 
-const isHebrewUi = computed(() => {
-	const localeValue = locale.value.toLowerCase()
-	return localeValue.startsWith('he')
-})
-
 const itemLabelPrefix = computed(() => {
 	const resolvedCustomLabel = resolveI18n(props.itemLabel)
 	if (typeof resolvedCustomLabel === 'string' && resolvedCustomLabel.length > 0) {
 		return resolvedCustomLabel
 	}
-	return isHebrewUi.value ? 'פריט' : 'Item'
+	return $t('arrayInput.item')
 })
 
 function nextItemKey() {
@@ -49,8 +44,28 @@ function nextItemKey() {
 	return `array-item-${keySeed.value}`
 }
 
+const IDENTIFIER_FIELDS = ['title', 'name', 'label', 'displayName', 'display_name', 'heading', 'caption', 'text']
+
+function getItemIdentifier(item: T): string | null {
+	if (typeof item === 'string' && item.trim().length > 0) {
+		return item.trim()
+	}
+	if (item !== null && item !== undefined && typeof item === 'object') {
+		for (const field of IDENTIFIER_FIELDS) {
+			const val = (item as Record<string, unknown>)[field]
+			if (typeof val === 'string' && val.trim().length > 0) {
+				return val.trim()
+			}
+		}
+	}
+	return null
+}
+
 function getItemLabel(index: number) {
-	return `${itemLabelPrefix.value} ${index + 1}`
+	const identifier = getItemIdentifier(items.value[index])
+	return identifier != null
+		? `${index + 1}. ${identifier}`
+		: `${itemLabelPrefix.value} ${index + 1}`
 }
 
 watch(
@@ -167,23 +182,32 @@ function getItemRef(i: number) {
 		<template v-if="!collapsible">
 			<div v-for="(_, i) in items" :key="i" class="array-input-row grid gap-05 align-items-center">
 				<slot :item="getItemRef(i)" :index="i" />
-				<Btn v-if="allowDelete" v-tooltip="resolveI18n(deleteTooltip || 'Delete')" flat icon="delete" @click="deleteItem(i)" />
+				<Btn
+					v-if="allowDelete" v-tooltip="resolveI18n(deleteTooltip || 'Delete')" flat icon="delete"
+					@click="deleteItem(i)"
+				/>
 			</div>
 		</template>
 		<TransitionGroup v-if="collapsible" name="array-list" tag="div" class="grid gap-05  mb-05">
 			<div
-				v-for="(_, i) in items"
-				:key="itemKeys[i]"
-				class="border radius-1 p-05"
+				v-for="(_, i) in items" :key="itemKeys[i]" class="border radius-1"
 				:class="{ 'array-item-drag-over1 bg-gray-light border border-primary ': allowReorder && dragOverIndex === i && draggingIndex !== null && draggingIndex !== i }"
-				@dragover.prevent
-				@dragenter.prevent="onDragEnter(i)"
-				@drop.prevent="onDrop(i)"
+				@dragover.prevent @dragenter.prevent="onDragEnter(i)" @drop.prevent="onDrop(i)"
 			>
 				<div class="flex space-between gap-05">
-					<Btn v-if="allowReorder" v-tooltip="resolveI18n('Drag to reorder')" flat thin icon="drag_indicator" class="grab" draggable="true" @dragstart="onDragStart($event, i)" @dragend="onDragEnd" />
-					<Btn full-width align-txt="start" class="px-05" flat :icon="minimizedItems[i] ? 'expand_more' : 'expand_less'" :value="getItemLabel(i)" @click="toggleItem(i)" />
-					<Btn v-if="allowDelete" v-tooltip="resolveI18n(deleteTooltip || 'Delete')" flat icon="delete" :confirm="resolveI18n('Are you sure you want to delete this item?')" @click="deleteItem(i)" />
+					<Btn
+						v-if="allowReorder" v-tooltip="resolveI18n('Drag to reorder')" flat thin icon="drag_indicator"
+						class="grab" draggable="true" @dragstart="onDragStart($event, i)" @dragend="onDragEnd"
+					/>
+					<Btn
+						full-width align-txt="start" class="px-05" flat
+						:icon="minimizedItems[i] ? 'expand_more' : 'expand_less'" :value="getItemLabel(i)"
+						@click="toggleItem(i)"
+					/>
+					<Btn
+						v-if="allowDelete" v-tooltip="resolveI18n(deleteTooltip || 'Delete')" flat icon="delete"
+						:confirm="resolveI18n('Are you sure you want to delete this item?')" @click="deleteItem(i)"
+					/>
 				</div>
 				<Transition name="array-collapse">
 					<div v-if="!minimizedItems[i]" class="array-input-row grid gap-05 align-items-center">
@@ -192,7 +216,7 @@ function getItemRef(i: number) {
 				</Transition>
 			</div>
 		</TransitionGroup>
-		<Btn v-if="allowAdd" icon="add" :value="resolveI18n(addText || 'Add')" @click="addItem" />
+		<Btn v-if="allowAdd" thin icon="add" :value="resolveI18n(addText || 'Add')" @click="addItem" />
 	</div>
 </template>
 
@@ -200,6 +224,7 @@ function getItemRef(i: number) {
 .array-input-row {
 	grid-template-columns: 1fr auto;
 }
+
 .array-collapse-enter-active,
 .array-collapse-leave-active {
 	overflow: hidden;

package/src/components/layout/SidebarMenu.vue

@@ -67,14 +67,6 @@ const toggleMenu = useDebounceFn(() => {
 </template>
 
 <style>
-.v-popper--theme-tooltip .v-popper__inner {
-	background: rgb(255, 255, 255) !important;
-	color: var(--bgl-primary) !important;
-	font-size: 15px;
-	padding: 0.5rem 1rem;
-	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-}
-
 .nav-button.router-link-active {
 	background: var(--bgl-popup-bg) !important;
 	color: var(--bgl-primary);

package/src/form-flow/FormFlow.vue

@@ -216,6 +216,7 @@ function validateField(key: string, field: FieldBuilder): boolean {
 
 	if (field._config.required === true) {
 		const isEmpty = value == null || value === '' || (Array.isArray(value) && value.length === 0)
+			|| (field._type === 'tel' && typeof value === 'string' && /^\+\d+$/.test(value))
 		if (isEmpty) {
 			validationErrors.value = { ...validationErrors.value, [key]: field._config.requiredMessage || $t('form.required') }
 			return false
@@ -358,6 +359,7 @@ function validateAll(): boolean {
 		// Check required fields first
 		if (field._config.required === true) {
 			const isEmpty = value == null || value === '' || (Array.isArray(value) && value.length === 0)
+				|| (field._type === 'tel' && typeof value === 'string' && /^\+\d+$/.test(value))
 			if (isEmpty) {
 				newErrors[key] = field._config.requiredMessage || $t('form.required')
 				isValid = false

package/src/i18n/locales/en.json

@@ -46,6 +46,9 @@
   "fieldArray": {
     "loadDefault": "Load Default {label}"
   },
+  "arrayInput": {
+    "item": "Item"
+  },
   "btn": {
     "loading": "Loading..."
   },

package/src/i18n/locales/es.json

@@ -46,6 +46,9 @@
   "fieldArray": {
     "loadDefault": "Cargar {label} predeterminado"
   },
+  "arrayInput": {
+    "item": "Elemento"
+  },
   "btn": {
     "loading": "Cargando..."
   },

package/src/i18n/locales/fr.json

@@ -46,6 +46,9 @@
   "fieldArray": {
     "loadDefault": "Charger {label} par défaut"
   },
+  "arrayInput": {
+    "item": "Élément"
+  },
   "btn": {
     "loading": "Chargement..."
   },

package/src/i18n/locales/he.json

@@ -46,6 +46,9 @@
   "fieldArray": {
     "loadDefault": "טען {label} ברירת מחדל"
   },
+  "arrayInput": {
+    "item": "פריט"
+  },
   "btn": {
     "loading": "טוען..."
   },

package/src/i18n/locales/it.json

@@ -46,6 +46,9 @@
   "fieldArray": {
     "loadDefault": "Carica {label} predefinito"
   },
+  "arrayInput": {
+    "item": "Elemento"
+  },
   "btn": {
     "loading": "Caricamento..."
   },

package/src/i18n/locales/ru.json

@@ -46,6 +46,9 @@
   "fieldArray": {
     "loadDefault": "Загрузить {label} по умолчанию"
   },
+  "arrayInput": {
+    "item": "Элемент"
+  },
   "btn": {
     "loading": "Загрузка..."
   },

package/src/styles/appearance.css

@@ -321,6 +321,18 @@
     mix-blend-mode: normal;
 }
 
+.v-popper--theme-tooltip .v-popper__inner {
+    background: var(--bgl-tooltip-bg) !important;
+    color: var(--bgl-tooltip-color) !important;
+    font-size: var(--bgl-tooltip-font-size);
+    padding: var(--bgl-tooltip-padding);
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+}
+
+.v-popper--theme-tooltip .v-popper__arrow-outer {
+    border-color: var(--bgl-tooltip-arrow-color) !important;
+}
+
 @media screen and (max-width: 910px) {
     .m_scrollbar-gutter {
         scrollbar-gutter: stable;

package/src/styles/base-colors.css

@@ -76,6 +76,7 @@
     color: var(--bgl-white);
     border-color: var(--bgl-primary);
 }
+
 .pair-default {
     background-color: var(--bgl-primary);
     color: var(--bgl-white);