@bagelink/vue 1.4.107 → 1.4.111

package/src/components/analytics/LineChart.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts">
+
+import { computed, onMounted, ref } from 'vue'
+import { Icon } from '@bagelink/vue'
+
+interface DataPoint {
+	date: string
+	value: number
+	label?: string
+}
+
+interface Props {
+	data: DataPoint[]
+	title?: string
+	icon?: string
+	color?: string
+	height?: number
+	showPoints?: boolean
+	currency?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	title: 'Line Chart',
+	icon: 'trending_up',
+	color: 'var(--bgl-primary)',
+	height: 200,
+	showPoints: true,
+	currency: false
+})
+
+const svgRef = ref<SVGElement>()
+const width = ref(600)
+const height = ref(props.height)
+
+const padding = { top: 20, inline_end: 30, bottom: 25, inline_start: 60 }
+const chartWidth = computed(() => width.value - padding.inline_start - padding.inline_end)
+const chartHeight = computed(() => height.value - padding.top - padding.bottom)
+
+// RTL-aware padding calculations
+const paddingLeft = computed(() => {
+	const isRTL = document.documentElement.dir === 'rtl' ||
+		document.documentElement.getAttribute('lang') === 'he'
+	return isRTL ? padding.inline_end : padding.inline_start
+})
+
+// RTL-aware label positioning
+const labelXPosition = computed(() => {
+	const isRTL = document.documentElement.dir === 'rtl' ||
+		document.documentElement.getAttribute('lang') === 'he'
+	return isRTL ? paddingLeft.value + chartWidth.value + 10 : paddingLeft.value - 10
+})
+
+const labelTextAnchor = computed(() => {
+	const isRTL = document.documentElement.dir === 'rtl' ||
+		document.documentElement.getAttribute('lang') === 'he'
+	return isRTL ? 'start' : 'end'
+})
+
+const maxValue = computed(() => Math.max(...props.data.map(d => d.value), 0))
+const minValue = computed(() => Math.min(...props.data.map(d => d.value), 0))
+
+const xScale = computed(() => {
+	const isRTL = document.documentElement.dir === 'rtl' ||
+		document.documentElement.getAttribute('lang') === 'he'
+	const domain = props.data.length - 1
+
+	return (index: number) => {
+		const position = (index / domain) * chartWidth.value
+		// In RTL, reverse the x position so the chart flows from right to left
+		return isRTL ? chartWidth.value - position : position
+	}
+})
+
+const yScale = computed(() => {
+	const range = maxValue.value - minValue.value || 1
+	return (value: number) => chartHeight.value - ((value - minValue.value) / range) * chartHeight.value
+})
+
+const pathData = computed(() => {
+	if (props.data.length === 0) return ''
+
+	const points = props.data.map((d, i) =>
+		`${i === 0 ? 'M' : 'L'} ${paddingLeft.value + xScale.value(i)} ${padding.top + yScale.value(d.value)}`
+	).join(' ')
+
+	return points
+})
+
+const gridLines = computed(() => {
+	const lines = []
+	const step = chartHeight.value / 4
+	for (let i = 0; i <= 4; i++) {
+		const y = i * step
+		const value = maxValue.value - (i / 4) * (maxValue.value - minValue.value)
+		lines.push({ y, value })
+	}
+	return lines
+})
+
+function formatValue(value: number): string {
+	if (props.currency) {
+		return new Intl.NumberFormat('he-IL', {
+			style: 'currency',
+			currency: 'ILS',
+			minimumFractionDigits: 0
+		}).format(value)
+	}
+	return value.toLocaleString()
+}
+
+function formatDate(dateStr: string): string {
+	const date = new Date(dateStr)
+	return date.toLocaleDateString('he-IL', { month: 'short', day: 'numeric' })
+}
+
+onMounted(() => {
+	if (svgRef.value) {
+		width.value = svgRef.value.clientWidth || 600
+	}
+})
+</script>
+
+<template>
+	<div class="line-chart h-100p flex column flex-stretch">
+		<div class="flex space-between">
+			<div class="flex align-center gap-05 pb-1">
+				<Icon :name="icon" size="1.2" :color="color" class="line-height-08" />
+				<p class="white-space light m_txt14">
+					{{ title }}
+				</p>
+			</div>
+		</div>
+		<div class="chart-container flex-grow  w-100p relative">
+			<svg
+				ref="svgRef"
+				:width="width"
+				:height="height"
+				class="chart-svg h-100p w-100p"
+			>
+				<!-- Grid lines -->
+				<g class="grid">
+					<line
+						v-for="line in gridLines"
+						:key="line.y"
+						:x1="paddingLeft"
+						:y1="padding.top + line.y"
+						:x2="paddingLeft + chartWidth"
+						:y2="padding.top + line.y"
+						stroke="#e0e0e0"
+						stroke-width="1"
+					/>
+					<!-- Y-axis labels -->
+					<text
+						v-for="line in gridLines"
+						:key="`label-${line.y}`"
+						:x="labelXPosition"
+						:y="padding.top + line.y + 4"
+						class="grid-label"
+						:text-anchor="labelTextAnchor"
+					>
+						{{ formatValue(line.value) }}
+					</text>
+				</g>
+
+				<!-- X-axis -->
+				<line
+					:x1="paddingLeft"
+					:y1="padding.top + chartHeight"
+					:x2="paddingLeft + chartWidth"
+					:y2="padding.top + chartHeight"
+					stroke="#ccc"
+					stroke-width="2"
+				/>
+
+				<!-- Y-axis -->
+				<line
+					:x1="paddingLeft"
+					:y1="padding.top"
+					:x2="paddingLeft"
+					:y2="padding.top + chartHeight"
+					stroke="#ccc"
+					stroke-width="2"
+				/>
+
+				<!-- Line path -->
+				<path
+					:d="pathData"
+					:stroke="color"
+					stroke-width="3"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+
+				<!-- Data points -->
+				<g v-if="showPoints">
+					<circle
+						v-for="(point, index) in data"
+						:key="index"
+						:cx="paddingLeft + xScale(index)"
+						:cy="padding.top + yScale(point.value)"
+						r="4"
+						:fill="color"
+						class="data-point"
+					>
+						<title>{{ formatDate(point.date) }}: {{ formatValue(point.value) }}</title>
+					</circle>
+				</g>
+
+				<!-- X-axis labels -->
+				<g class="x-labels">
+					<text
+						v-for="(point, index) in data.filter((_, i) => i % Math.ceil(data.length / 6) === 0)"
+						:key="index"
+						:x="paddingLeft + xScale(data.findIndex(d => d === point))"
+						:y="padding.top + chartHeight + 15"
+						class="axis-label"
+						text-anchor="middle"
+					>
+						{{ formatDate(point.date) }}
+					</text>
+				</g>
+			</svg>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.line-chart, .chart-container {
+	direction: inherit;
+}
+
+.chart-svg {
+	transform-origin: center;
+	display: block; /* Remove any inline spacing */
+}
+
+.chart-container {
+	overflow: hidden; /* Prevent any overflow spacing */
+}
+
+.grid-label,
+.axis-label {
+	fill: var(--bgl-gray) !important;;
+	font-family: system-ui, -apple-system, sans-serif;
+	font-size: 12px;
+	margin: 1rem;
+}
+
+.axis-label {
+	text-anchor: middle;
+}
+
+.data-point {
+	cursor: pointer;
+	transition: r 0.2s ease;
+}
+
+.data-point:hover {
+	r: 6;
+}
+
+[dir="rtl"] .line-chart {
+	text-align: right;
+}
+
+</style>

package/src/components/analytics/PieChart.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Icon } from '@bagelink/vue'
+
+interface PieData {
+	label: string
+	value: number
+	color?: string
+}
+
+interface Props {
+	data: PieData[]
+	title?: string
+	icon?: string
+	color?: string
+	size?: number
+	showLegend?: boolean
+	donut?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	title: 'Pie Chart',
+	icon: 'bx-pie-chart-alt',
+	color: '#3B82F6',
+	size: 200,
+	showLegend: true,
+	donut: false
+})
+
+// Generate colors with different opacity based on the main color
+const colors = computed(() => {
+	const baseColor = props.color
+	const opacities = [1, 0.8, 0.6, 0.4, 0.85, 0.7, 0.5, 0.3, 0.9, 0.75]
+
+	return opacities.map(opacity => {
+		// Convert hex to rgba with opacity
+		const hex = baseColor.replace('#', '')
+		const r = parseInt(hex.substr(0, 2), 16)
+		const g = parseInt(hex.substr(2, 2), 16)
+		const b = parseInt(hex.substr(4, 2), 16)
+
+		return `rgba(${r}, ${g}, ${b}, ${opacity})`
+	})
+})
+
+// RTL detection
+const isRtl = computed(() => {
+	if (typeof document !== 'undefined') {
+		return document.documentElement.dir === 'rtl' || document.body.dir === 'rtl'
+	}
+	return false
+})
+
+const totalValue = computed(() =>
+	props.data.reduce((sum, item) => sum + item.value, 0)
+)
+
+const pieSegments = computed(() => {
+	let cumulativeAngle = 0
+	return props.data.map((item, index) => {
+		const percentage = item.value / totalValue.value
+		const angle = percentage * 360
+		const startAngle = cumulativeAngle
+		const endAngle = cumulativeAngle + angle
+		cumulativeAngle += angle
+
+		const startAngleRad = (startAngle * Math.PI) / 180
+		const endAngleRad = (endAngle * Math.PI) / 180
+
+		const radius = props.size / 2 - 10
+		const innerRadius = props.donut ? radius * 0.6 : 0
+
+		const largeArcFlag = angle > 180 ? 1 : 0
+
+		const pathData = props.donut
+			? createDonutPath(startAngleRad, endAngleRad, radius, innerRadius, largeArcFlag)
+			: createPiePath(startAngleRad, endAngleRad, radius, largeArcFlag)
+
+		return {
+			...item,
+			percentage,
+			angle,
+			startAngle,
+			endAngle,
+			pathData,
+			color: item.color || colors.value[index % colors.value.length]
+		}
+	})
+})
+
+function createPiePath(startAngle: number, endAngle: number, radius: number, largeArcFlag: number): string {
+	const x1 = Math.cos(startAngle) * radius
+	const y1 = Math.sin(startAngle) * radius
+	const x2 = Math.cos(endAngle) * radius
+	const y2 = Math.sin(endAngle) * radius
+
+	return `M 0 0 L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2} Z`
+}
+
+function createDonutPath(startAngle: number, endAngle: number, outerRadius: number, innerRadius: number, largeArcFlag: number): string {
+	const x1Outer = Math.cos(startAngle) * outerRadius
+	const y1Outer = Math.sin(startAngle) * outerRadius
+	const x2Outer = Math.cos(endAngle) * outerRadius
+	const y2Outer = Math.sin(endAngle) * outerRadius
+
+	const x1Inner = Math.cos(startAngle) * innerRadius
+	const y1Inner = Math.sin(startAngle) * innerRadius
+	const x2Inner = Math.cos(endAngle) * innerRadius
+	const y2Inner = Math.sin(endAngle) * innerRadius
+
+	return `M ${x1Outer} ${y1Outer} A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 1 ${x2Outer} ${y2Outer} L ${x2Inner} ${y2Inner} A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${x1Inner} ${y1Inner} Z`
+}
+
+function formatValue(value: number): string {
+	return value.toLocaleString()
+}
+
+function formatPercentage(percentage: number): string {
+	return `${(percentage * 100).toFixed(1)}%`
+}
+</script>
+
+<template>
+	<div class="h-100p flex column flex-stretch">
+		<div class="flex space-between">
+			<div class="flex align-center gap-05 pb-1">
+				<Icon :name="icon" size="1.2" :color="color" class="line-height-08" />
+				<p class="white-space light m_txt14">
+					{{ title }}
+				</p>
+			</div>
+		</div>
+		<div class="chart-container flex space-between gap-1 flex-wrap" :class="{ 'with-legend': showLegend }">
+			<svg
+				:width="size"
+				:height="size"
+				class="chart-svg mx-auto flex-shrink-0"
+			>
+				<g :transform="`translate(${size / 2}, ${size / 2})`">
+					<path
+						v-for="(segment, index) in pieSegments"
+						:key="index"
+						:d="segment.pathData"
+						:fill="segment.color"
+						class="pie-segment"
+						stroke="white"
+						stroke-width="2"
+					>
+						<title>{{ segment.label }}: {{ formatValue(segment.value) }} ({{ formatPercentage(segment.percentage) }})</title>
+					</path>
+				</g>
+			</svg>
+
+			<div v-if="showLegend" class="legend mx-auto display-flex column gap-05 min-w-100px">
+				<div
+					v-for="(segment, index) in pieSegments"
+					:key="index"
+					class="gap-1 flex align-items-center txt14 justify-content-start"
+				>
+					<div
+						class="legend-color flex-shrink-0 radius-05"
+						:style="{ backgroundColor: segment.color }"
+					/>
+					<span v-if="segment.label" class="flex-shrink-1 flex-grow-1">{{ segment.label }}</span>
+					<span class="bold">{{ formatValue(segment.value) }}</span>
+					<span class="opacity-6 txt12">({{ formatPercentage(segment.percentage) }})</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+[dir="rtl"] .chart-container.with-legend {
+	flex-direction: row-reverse;
+}
+.pie-segment {
+	cursor: pointer;
+	transition: opacity 0.2s ease;
+}
+
+.pie-segment:hover {
+	opacity: 0.8;
+}
+
+/* RTL support for legend */
+[dir="rtl"] .legend-item {
+	flex-direction: row-reverse;
+}
+
+.legend-color {
+	width: 12px;
+	height: 12px;
+}
+
+</style>

package/src/components/analytics/index.ts

@@ -0,0 +1,4 @@
+export { default as BarChart } from './BarChart.vue'
+export { default as LineChart } from './LineChart.vue'
+export { default as KpiCard } from './KpiCard.vue'
+export { default as PieChart } from './PieChart.vue'

package/src/components/form/BagelForm.vue

@@ -43,6 +43,7 @@ const isDirty = computed(() => {
 // Initialize on mount
 onMounted(() => {
 	if (props.modelValue) initialFormData.value = clone(props.modelValue)
+	applyDefaultValues()
 })
 
 // Watch for model changes
@@ -50,6 +51,29 @@ watch(() => props.modelValue, (val) => {
 	if (val !== undefined) formData.value = clone(val)
 }, { immediate: true, deep: true })
 
+function applyDefaultValues() {
+	const schema = resolvedSchema.value as unknown as Array<BaseBagelField<T, any>> | undefined
+	if (!schema) return
+
+	const walk = (nodes: any[]) => {
+		for (const node of nodes) {
+			if (!node || typeof node !== 'object') continue
+			const hasId = typeof node.id === 'string' && node.id.length > 0
+			const hasDefault = Object.prototype.hasOwnProperty.call(node, 'defaultValue') && node.defaultValue !== undefined
+			if (hasId && hasDefault) {
+				const current = getNestedValue(formData.value as any, node.id as string, undefined)
+				if (current === undefined || current === '') {
+					updateFormData({ fieldId: node.id, value: node.defaultValue })
+				}
+			}
+			if (Array.isArray(node.children) && node.children.length) walk(node.children)
+		}
+	}
+	walk(schema as any[])
+}
+
+watch(resolvedSchema, () => { applyDefaultValues() }, { deep: true })
+
 // Update form data
 function updateFormData({ fieldId, value }: { fieldId?: string, value: any }) {
 	const keys = fieldId?.split('.') || []

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

@@ -15,12 +15,13 @@ const props = withDefaults(
 		locale?: string
 		enableTime?: boolean
 		highlightedDates?: MaybeRefOrGetter<(string | Date)[]>
+		autoSize?: boolean
 	}>(),
 	{
 		mode: () => ({ mode: 'day' }),
 		firstDayOfWeek: WEEK_START_DAY.SUNDAY,
 		locale: '',
-		enableTime: false
+		enableTime: false,
 	},
 )
 
@@ -309,7 +310,7 @@ function selectDate(date: Date | null) {
 </script>
 
 <template>
-	<div class="ltr flex gap-075 m_flex-wrap calendar-container justify-content-center h-100p">
+	<div class="ltr gap-075 m_flex-wrap calendar-container justify-content-center h-100p" :class="{ 'flex': !autoSize }">
 		<div class="calendar-section m_border-none px-05 m_p-0">
 			<div class="flex space-between pb-1">
 				<template v-if="currentView === 'days'">

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

@@ -1,5 +1,6 @@
 <script setup lang="ts" generic="ContextObjType extends { [key: string]: any }">
 import { Btn } from '@bagelink/vue'
+import { watch } from 'vue'
 
 export interface RadioOption<T> {
 	imgAlt?: string
@@ -11,15 +12,26 @@ export interface RadioOption<T> {
 	value: any
 }
 
-const props = defineProps<{
-	id?: string
-	groupName?: string
-	options: RadioOption<ContextObjType>[]
-	deletable?: boolean
-	required?: boolean
-	error?: string
-	disabled?: boolean
-}>()
+type RadioOptionsSource<T> = RadioOption<T>[] | (() => Promise<RadioOption<T>[]>)
+
+const props = withDefaults(
+	defineProps<{
+		id?: string
+		groupName?: string
+		options: RadioOptionsSource<ContextObjType>
+		deletable?: boolean
+		required?: boolean
+		error?: string
+		disabled?: boolean
+		thin?: boolean
+		flat?: boolean
+		invertedActive?: boolean
+		align?: 'start' | 'center' | 'end' | 'top' | 'bottom'
+	}>(),
+	{
+		align: 'center'
+	}
+)
 
 const emit = defineEmits(['delete', 'focus', 'blur', 'change'])
 
@@ -31,6 +43,23 @@ const name = $computed(
 	)
 )
 const selectedOption = defineModel('modelValue')
+let loadedOptions = $ref<any[]>([])
+const visibleOptions = $computed(() => Array.isArray(props.options) ? (props.options as any[]) : (loadedOptions as any[]))
+
+async function loadOptionsIfNeeded() {
+	if (typeof props.options === 'function') {
+		try {
+			loadedOptions = await props.options()
+		} catch {
+			loadedOptions = []
+		}
+	}
+}
+
+watch(() => props.options, () => {
+	loadedOptions = []
+	loadOptionsIfNeeded()
+}, { immediate: true, deep: true })
 let isFocused = $ref(false)
 
 const containerClasses = $computed(() => ({
@@ -57,60 +86,56 @@ function handleChange() {
 <template>
 	<div :class="containerClasses">
 		<label
-			v-for="(opt, index) in options"
-			:key="opt.id || `${name}-${index}`"
-			class="border rounded p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover"
+			v-for="(opt, index) in visibleOptions" :key="opt.id || `${name}-${index}`"
+			class="border rounded flex mb-05 active-list-item hover"
 			:for="opt.id || `${name}-${index}`"
+			:class="{ 'p-05 gap-025': thin, 'py-1 gap-075': !thin, 'bg-gray-light': !flat, 'align-items-start': align === 'start' || align === 'top', 'align-items-center': align === 'center', 'align-items-end': align === 'end' || align === 'bottom', invertedActive }"
 		>
 			<input
-				:id="opt.id || `${name}-${index}`"
-				v-model="selectedOption"
-				:disabled
-				class="radio-input-list"
-				type="radio"
-				:name
-				:value="opt.value"
-				:required="required"
-				@focus="handleFocus"
-				@blur="handleBlur"
+				:id="opt.id || `${name}-${index}`" v-model="selectedOption" :disabled class="radio-input-list"
+				type="radio" :name :value="opt.value" :required="required" @focus="handleFocus" @blur="handleBlur"
 				@change="handleChange"
+				:class="{
+	'mt-025': align === 'start' || align === 'top',
+	'mb-025': align === 'end' || align === 'bottom'
+				}"
 			>
 			<div class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025">
 				<img
-					v-if="opt.imgSrc"
-					class="bg-popup shadow-light py-025 radius-05 m_w40"
-					width="60"
-					:src="opt.imgSrc"
+					v-if="opt.imgSrc" class="bg-popup shadow-light py-025 radius-05 m_w40" height="40" :src="opt.imgSrc"
 					:alt="opt.imgAlt"
 				>
 				<div class="">
-					<p v-if="opt.label" class="m-0 m_txt-14">{{ opt.label }}</p>
+					<p v-if="opt.label" class="m-0 m_txt-14 line-height-14 pb-025">{{ opt.label }}</p>
 					<p v-if="opt.subLabel" class="txt-gray txt-12 m-0">{{ opt.subLabel }}</p>
 				</div>
 				<slot name="radioItem" v-bind="opt" />
 			</div>
-			<Btn
-				v-if="deletable"
-				class="ms-auto"
-				flat thin icon="delete"
-				@click="$emit('delete', opt)"
-			/>
+			<Btn v-if="deletable" class="ms-auto" flat thin icon="delete" @click="$emit('delete', opt)" />
 		</label>
 	</div>
 </template>
 
 <style scoped>
-.radio-input-list{
+.radio-input-list {
 	width: auto;
 	transform: scale(1.4);
 	margin-inline-end: 0.6rem;
 
 }
-.active-list-item:has(:checked){
+
+.active-list-item:has(:checked) {
 	background: var(--bgl-primary-light) !important;
 	border-color: var(--bgl-primary) !important;
 	accent-color: var(--bgl-accent-color);
 }
+.invertedActive:has(:checked) {
+	background: var(--bgl-primary) !important;
+	border-color: var(--bgl-primary) !important;
+	color: var(--bgl-white);
+	accent-color: var(--bgl-white);
+
+}
 
 .has-error .active-list-item {
 	border-color: var(--bgl-red) !important;