@bagelink/vue 1.9.136 → 1.9.140

package/package.json

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

package/src/components/Avatar.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { initials } from '@bagelink/vue'
+import type { IconType } from '@bagelink/vue'
+import { initials, Icon } from '@bagelink/vue'
+import Image from './Image.vue'
 
 withDefaults(defineProps<{
 	fallback?: string
 	src?: string
 	name?: string
+	icon?: IconType
 	alt?: string
 	size?: number
 }>(), { size: 50 })
@@ -15,7 +18,8 @@ withDefaults(defineProps<{
 		class="round overflow-hidden txt-center p-0 avatar flex justify-content-center"
 		:style="{ width: `${size}px`, height: `${size}px` }"
 	>
-		<img v-if="src" :src="src" :alt="alt || name">
+		<Image v-if="src" :src="src" :alt="alt || name" />
+		<Icon v-else-if="icon" :icon="icon" :size="size / 40" />
 		<p v-else :style="{ 'line-height': `${size}px`, 'font-size': `calc(1.5rem * ${size} / 50)` }">
 			{{ (fallback || initials(name || '')).toUpperCase() }}
 		</p>
@@ -24,21 +28,21 @@ withDefaults(defineProps<{
 
 <style scoped>
 .avatar {
-  background-color: var(--bgl-gray-tint);
-  border: 0.5px solid var(--border-color);
-  flex-shrink: 0;
+	background-color: var(--bgl-gray-tint);
+	border: 0.5px solid var(--border-color);
+	flex-shrink: 0;
 }
 
 .avatar p {
-  font-size: 1.5rem;
-  line-height: 50px;
-  margin: 0;
-  font-weight: 200;
+	font-size: 1.5rem;
+	line-height: 50px;
+	margin: 0;
+	font-weight: 200;
 }
 
 .avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
 }
 </style>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T = unknown">
 import type { Ref, WritableComputedRef } from 'vue'
 
-import { Btn, resolveI18n } from '@bagelink/vue'
+import { Btn, resolveI18n, useI18n } from '@bagelink/vue'
 import { computed, ref, watch } from 'vue'
 
 const props = defineProps<{
@@ -13,15 +13,17 @@ const props = defineProps<{
 	allowReorder?: boolean
 	addText?: string
 	deleteTooltip?: string
+	itemLabel?: string
 	collapsible?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])
-
 defineSlots<{
 	default: (props: { item: WritableComputedRef<T>, index: number }) => unknown
 }>()
 
+const { locale } = useI18n()
+
 const items = ref(Array.isArray(props.modelValue) ? [...props.modelValue] : []) as Ref<T[]>
 const minimizedItems = ref(Array.from({ length: items.value.length }, () => true))
 const draggingIndex = ref<number | null>(null)
@@ -29,11 +31,28 @@ 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'
+})
+
 function nextItemKey() {
 	keySeed.value += 1
 	return `array-item-${keySeed.value}`
 }
 
+function getItemLabel(index: number) {
+	return `${itemLabelPrefix.value} ${index + 1}`
+}
+
 watch(
 	() => props.modelValue,
 	(newVal) => {
@@ -163,7 +182,7 @@ function getItemRef(i: number) {
 			>
 				<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="resolveI18n(`Item ${i + 1}`)" @click="toggleItem(i)" />
+					<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">

package/src/components/form/inputs/RichText/index.vue

@@ -3804,6 +3804,11 @@ const imgTransform = computed({
 	min-width: 32px;
 	height: 32px;
 	padding: 0;
+	transform: rotate(0) !important;
+	}
+
+	[dir="rtl"] .inline-toolbar-content .bgl_btn-icon {
+		transform: rotate(0) !important;
 }
 
 .inline-toolbar-content .btn.active {

package/src/form-flow/form-flow.ts

@@ -279,8 +279,8 @@ export const $ = {
 	},
 
 	richtext(
-		labelOrConfig?: string | (BaseFieldConfig & { autoheight?: boolean }),
-		config?: BaseFieldConfig & { autoheight?: boolean }
+		labelOrConfig?: string | (BaseFieldConfig & { autoheight?: boolean, basic?: boolean }),
+		config?: BaseFieldConfig & { autoheight?: boolean, basic?: boolean }
 	): FieldBuilder<string> {
 		return new Field('richtext', parseArgs(labelOrConfig, config))
 	},
@@ -367,6 +367,7 @@ export const $ = {
 			placeholder?: string
 			noFilePlaceholder?: string
 			btnPlaceholder?: string
+			style?: string
 		}),
 		config?: BaseFieldConfig & {
 			multiple?: boolean
@@ -382,6 +383,7 @@ export const $ = {
 			placeholder?: string
 			noFilePlaceholder?: string
 			btnPlaceholder?: string
+			style?: string
 		}
 	): FieldBuilder<string | string[]> {
 		return new Field('upload', parseArgs(labelOrConfig, config))