@bagelink/vue 0.0.466 → 0.0.471

package/src/components/TableSchema.vue

@@ -1,11 +1,130 @@
+<script setup lang="ts">
+import { useSlots } from 'vue'
+import {
+	BglField,
+	type BglFormSchemaT,
+	MaterialIcon,
+	keyToLabel,
+} from '@bagelink/vue'
+
+const props = defineProps<{
+	selecteItems?: string[]
+	data: any[]
+	schema?: BglFormSchemaT | (() => BglFormSchemaT)
+	showFields?: string[]
+}>()
+const emit = defineEmits(['update:selecteItems', 'orderBy', 'select'])
+const slots = useSlots()
+const loading = $ref(true)
+
+let selecteItems = $ref<string[]>(props.selecteItems || [])
+let selected = $computed({
+	get: () => selecteItems,
+	set: (value: string[]) => {
+		selecteItems = value
+		emit('update:selecteItems', value)
+	},
+})
+
+function selectElement(item: Record<string, any>) { emit('select', item) }
+
+let sortDirection = $ref('ASC')
+let sortField = $ref('')
+
+function getFallbackSchema() {
+	const keys = [
+		...new Set((props.data || []).map(Object.keys).flat()),
+	] as string[]
+	const schema: BglFormSchemaT = keys.map(id => ({
+		id,
+		label: keyToLabel(id),
+	}))
+	return props.showFields
+		? schema.filter(f => props.showFields?.includes(f.id as string) || !f.id)
+		: schema
+}
+
+const computedSchema = $computed(() => {
+	let _schema = props.schema
+	if (typeof _schema === 'function') {
+		_schema = _schema()
+	}
+	if (_schema) {
+		return props.showFields
+			? _schema.filter(f => props.showFields?.includes(f.id as string))
+			: _schema
+	}
+	return getFallbackSchema()
+})
+
+function transform(rowData: any) {
+	const obj: Record<string, any> = { ...rowData }
+	const fields = computedSchema.filter(f => f.id)
+
+	for (const field of fields) {
+		const fieldData = rowData[`${field.id}`]
+
+		const newFieldVal = field.transform?.(fieldData, rowData) || fieldData || ''
+
+		Object.assign(obj, {
+			[`${field.id}`]: newFieldVal
+		})
+	}
+	return obj
+}
+
+const computedData = $computed(() => {
+	const dta = [...props.data].map(transform)
+	if (sortField as string) {
+		return dta.sort((a, b) => {
+			const aValue = a[sortField]
+			const bValue = b[sortField]
+			const numAValue = Number.parseInt(aValue, 10)
+			const numBValue = Number.parseInt(bValue, 10)
+			if (!Number.isNaN(numAValue) && !Number.isNaN(numBValue)) {
+				if (sortDirection === 'ASC') return numAValue - numBValue
+				return numBValue - numAValue
+			}
+			if (typeof aValue === 'string') {
+				if (sortDirection === 'ASC') return aValue.localeCompare(bValue)
+				return bValue.localeCompare(aValue)
+			}
+			if (sortDirection === 'ASC') return aValue < bValue ? -1 : 1
+			return aValue < bValue ? 1 : -1
+		})
+	}
+	return dta
+})
+
+function selectAll(event: PointerEvent) {
+	const value = (event.target as HTMLInputElement).checked
+	if (!value) {
+		selected = []
+		return
+	}
+	selected.push(...computedData.map(d => d.id))
+}
+
+function sort(fieldname: string) {
+	if (sortField === fieldname) {
+		if (sortDirection === 'ASC') sortDirection = 'DESC'
+		else sortField = ''
+	} else {
+		sortField = fieldname
+		sortDirection = 'ASC'
+	}
+	emit('orderBy', `${fieldname} ${sortDirection}`.trim())
+}
+</script>
+
 <template>
 	<div class="table-list-wrap h-100">
 		<table class="infinite-wrapper">
 			<thead class="row first-row">
 				<th
-					class="col"
 					v-for="field in computedSchema"
 					:key="field.id"
+					class="col"
 					@click="sort(field?.id || '')"
 				>
 					<div class="flex">
@@ -22,20 +141,21 @@
 					</div>
 				</th>
 			</thead>
+			<!-- eslint-disable-next-line vue/no-unused-refs TODO: Can we remove the unused ref ??? -->
 			<tbody ref="infinite" class="rows infinite" :class="{ loading }">
 				<tr
 					v-for="row in computedData"
 					:key="row.id"
-					@click="selectElement(row)"
 					class="row row-item position-relative"
+					@click="selectElement(row)"
 				>
 					<td
-						class="col"
 						v-for="field in computedSchema.map((c) => ({
 							...c,
 							transform: undefined,
 						}))"
 						:key="`${field.id}-${row.id}`"
+						class="col"
 					>
 						<slot
 							v-if="field.id && slots[field.id]"
@@ -58,116 +178,6 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-import { useSlots } from 'vue';
-import {
-	type BglFormSchemaT,
-	MaterialIcon,
-	BglField,
-	keyToLabel,
-} from '@bagelink/vue';
-
-const slots = useSlots();
-const loading = $ref(true);
-
-const props = defineProps<{
-	selecteItems?: string[];
-	data: any[];
-	schema?: BglFormSchemaT | (() => BglFormSchemaT);
-	showFields?: string[];
-}>();
-
-const emit = defineEmits(['update:selecteItems', 'orderBy', 'select']);
-
-let selecteItems = $ref<string[]>(props.selecteItems || []);
-let selected = $computed({
-	get: () => selecteItems,
-	set: (value: string[]) => {
-		selecteItems = value;
-		emit('update:selecteItems', value);
-	},
-});
-
-function selectAll(event: PointerEvent) {
-	const value = (event.target as HTMLInputElement).checked;
-	if (!value) {
-		selected = [];
-		return;
-	}
-	selected.push(...computedData.map((d) => d.id));
-}
-
-const computedSchema = $computed(() => {
-	if (typeof props.schema === 'function') {
-		return props.schema();
-	}
-	if (props.schema) {
-		return props.showFields
-			? props.schema.filter((f) => props.showFields?.includes(f.id as string))
-			: props.schema;
-	}
-	const keys = [
-		...new Set((props.data || []).map(Object.keys).flat()),
-	] as string[];
-	const schema: BglFormSchemaT = keys.map((id) => ({
-		id,
-		label: keyToLabel(id),
-	}));
-	return props.showFields
-		? schema.filter((f) => props.showFields?.includes(f.id as string) || !f.id)
-		: schema;
-});
-
-const selectElement = (item: Record<string, any>) => emit('select', item);
-
-let sortDirection = $ref('ASC');
-let sortField = $ref('');
-
-const sort = (fieldname: string) => {
-	if (sortField === fieldname) {
-		if (sortDirection === 'ASC') sortDirection = 'DESC';
-		else sortField = '';
-	} else {
-		sortField = fieldname;
-		sortDirection = 'ASC';
-	}
-	emit('orderBy', `${fieldname} ${sortDirection}`.trim());
-};
-
-const transform = (rowData: any) => {
-	const obj: Record<string, any> = { ...rowData };
-	for (const field of computedSchema.filter((f) => f.id)) {
-		const fieldData = rowData[field.id as string];
-		obj[field.id as string] =
-			field.transform?.(fieldData, rowData) || fieldData || '';
-	}
-	return obj;
-};
-
-const computedData = $computed(() => {
-	const dta = [...props.data].map(transform);
-	if (sortField) {
-		return dta.sort((a, b) => {
-			const aValue = a[sortField];
-			const bValue = b[sortField];
-			const numAValue = parseInt(aValue);
-			const numBValue = parseInt(bValue);
-			if (!isNaN(numAValue) && !isNaN(numBValue)) {
-				if (sortDirection === 'ASC') return numAValue - numBValue;
-				return numBValue - numAValue;
-			}
-			if (typeof aValue === 'string') {
-				if (sortDirection === 'ASC') return aValue.localeCompare(bValue);
-				return bValue.localeCompare(aValue);
-			}
-			if (sortDirection === 'ASC') return aValue < bValue ? -1 : 1;
-			return aValue < bValue ? 1 : -1;
-		});
-	}
-	return dta;
-});
-</script>
-
 <style scoped>
 .list-arrows {
 	opacity: 0;

package/src/components/Title.vue

@@ -1,10 +1,3 @@
-<template>
-	<component :is="tag">
-		{{ label || value }}
-		<slot />
-	</component>
-</template>
-
 <script lang="ts" setup>
 defineProps({
 	value: {
@@ -19,5 +12,12 @@ defineProps({
 		type: String,
 		default: 'h1',
 	},
-});
+})
 </script>
+
+<template>
+	<component :is="tag">
+		{{ label || value }}
+		<slot />
+	</component>
+</template>

package/src/components/dashboard/Lineart.vue

@@ -1,3 +1,106 @@
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from 'vue'
+import {
+	Area,
+	Chart,
+	Grid,
+	Line,
+	Marker,
+	Tooltip,
+} from 'vue3-charts'
+import type { ChartAxis, Data } from 'vue3-charts/dist/types'
+
+const props = defineProps<{ data: Data[], locale: string }>()
+
+const data = $computed(() => (props.locale === 'he' ? [...props.data].reverse() : props.data))
+
+interface Size {
+	width: number
+	height: number
+}
+
+// Computed properties
+const meanValue = $computed(() => {
+	const sum = props.data.reduce((acc, curr) => acc + +curr.total_value, 0)
+	return sum / props.data.length
+})
+
+const axisConfig = $computed<ChartAxis>(() => ({
+	primary: {
+		type: 'band',
+		rotate: true,
+		ticks: 5,
+		domain: ['dataMin', 'dataMax'],
+		tickValues:
+			props.data.length > 100 ? [''] : props.data.map((d: any) => d.date),
+	},
+	secondary: {
+		domain: ['dataMin', 'dataMax * 1.05'],
+		type: 'linear',
+		ticks: 8,
+	},
+}))
+
+// Constants
+const BRAND_COLOR = 'var(--bgl-primary)'
+
+const tooltipConfiguration = {
+	date: { label: 'תאריך' },
+	total_value: {
+		color: BRAND_COLOR,
+		label: 'סכום',
+		format: (v: number) => `₪${v.toLocaleString() || ''}`,
+	},
+	total_count: {
+		label: 'מספר התרומות',
+		format: (v: number) => `${v.toLocaleString() || ''}`,
+	},
+}
+
+// Refs
+let chartSize = $ref<Size | null>(null)
+const chartContainer = $ref<HTMLElement>()
+const displayMarker = $ref(true)
+const chartMargin = $ref({
+	left: 0,
+	top: 0,
+	right: 0,
+	bottom: 0,
+})
+
+// Functions
+function adjustChartSize() {
+	chartSize = null
+	const el = chartContainer
+	if (!el) return
+	const { width, height } = el.getBoundingClientRect()
+	chartSize = { width: width - 5, height: height - 10 }
+	console.log(chartSize)
+}
+
+function handleResize() {
+	setTimeout(adjustChartSize, 300)
+}
+
+// Lifecycle hooks
+onMounted(() => {
+	adjustChartSize()
+	window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+	window.removeEventListener('resize', handleResize)
+})
+
+// Style Configurations
+function dotStyling(ctx: Record<string, any>) {
+	return {
+		r: ctx.active ? 5 : 1,
+		fill: BRAND_COLOR,
+	}
+}
+</script>
+
 <template>
 	<div
 		ref="chartContainer"
@@ -64,102 +167,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
-import {
-	Chart, Grid, Line, Area, Tooltip, Marker,
-} from 'vue3-charts';
-import type { ChartAxis, Data } from 'vue3-charts/dist/types';
-
-const props = defineProps<{ data: Data[]; locale: string }>();
-
-const data = $computed(() => (props.locale === 'he' ? [...props.data].reverse() : props.data));
-
-interface Size {
-	width: number;
-	height: number;
-}
-
-// Computed properties
-const meanValue = $computed(() => {
-	const sum = props.data.reduce((acc, curr) => acc + +curr.total_value, 0);
-	return sum / props.data.length;
-});
-
-const axisConfig = $computed<ChartAxis>(() => ({
-	primary: {
-		type: 'band',
-		rotate: true,
-		ticks: 5,
-		domain: ['dataMin', 'dataMax'],
-		tickValues:
-			props.data?.length > 100 ? [''] : props.data.map((d: any) => d.date),
-	},
-	secondary: {
-		domain: ['dataMin', 'dataMax * 1.05'],
-		type: 'linear',
-		ticks: 8,
-	},
-}));
-
-// Constants
-const BRAND_COLOR = 'var(--bgl-primary)';
-
-const tooltipConfiguration = {
-	date: { label: 'תאריך' },
-	total_value: {
-		color: BRAND_COLOR,
-		label: 'סכום',
-		format: (v: number) => `₪${v?.toLocaleString?.() || ''}`,
-	},
-	total_count: {
-		label: 'מספר התרומות',
-		format: (v: number) => `${v?.toLocaleString?.() || ''}`,
-	},
-};
-
-// Refs
-let chartSize = $ref<Size | null>(null);
-const chartContainer = $ref<HTMLElement>();
-const displayMarker = $ref(true);
-const chartMargin = $ref({
-	left: 0,
-	top: 0,
-	right: 0,
-	bottom: 0,
-});
-
-// Functions
-const adjustChartSize = () => {
-	chartSize = null;
-	const el = chartContainer;
-	if (!el) return;
-	const { width, height } = el.getBoundingClientRect();
-	chartSize = { width: width - 5, height: height - 10 };
-	console.log(chartSize);
-};
-
-const handleResize = () => {
-	setTimeout(adjustChartSize, 300);
-};
-
-// Lifecycle hooks
-onMounted(() => {
-	adjustChartSize();
-	window.addEventListener('resize', handleResize);
-});
-
-onUnmounted(() => {
-	window.removeEventListener('resize', handleResize);
-});
-
-// Style Configurations
-const dotStyling = (ctx: Record<string, any>) => ({
-	r: ctx.active ? 5 : 1,
-	fill: BRAND_COLOR,
-});
-</script>
-
 <style>
 .chart-line {
 	width: 100%;

package/src/components/dashboard/index.ts

@@ -1 +1 @@
-export { default as Lineart } from './Lineart.vue';
+export { default as Lineart } from './Lineart.vue'

package/src/components/form/BglField.vue

@@ -1,90 +1,90 @@
-<template>
-	<component
-		:required="field.required"
-		v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
-		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)"
-		v-if="vIf"
-		:is="is"
-		:label="field.label"
-		:id="field.id"
-		:placeholder="field.placeholder || field.label"
-		v-model="fieldData"
-		:defaultValue="field.defaultValue"
-		:disabled="field.disabled"
-		:options="
-			bindAttrs({ options: field.options }, fieldData, modelValue).options
-		"
-		:helptext="field.helptext"
-		@update:modelValue="($event: any) => field?.onUpdate?.($event, formData)"
-	>
-		{{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
-		<BglField
-			v-model="formData"
-			v-for="(child, ii) in field.children"
-			:key="child.id || ii"
-			:field="child"
-		/>
-	</component>
-</template>
-
 <script lang="ts" setup>
 import {
+	CheckInput,
 	type Field,
-	bindAttrs,
-	classify,
+	RichText,
 	SelectInput,
 	TextInput,
 	ToggleInput,
-	CheckInput,
-	RichText,
-} from '@bagelink/vue';
+	bindAttrs,
+	classify,
+} from '@bagelink/vue'
 
 const props = withDefaults(
 	defineProps<{
-		field: Field;
-		modelValue: Record<string, any>;
+		field: Field
+		modelValue: Record<string, any>
 	}>(),
 	{
 		modelValue: () => ({}),
 	},
-);
+)
 
-const is = $computed(() => {
-	if (props.field.$el === 'text') return TextInput;
-	if (props.field.$el === 'select') return SelectInput;
-	if (props.field.$el === 'toggle') return ToggleInput;
-	if (props.field.$el === 'check') return CheckInput;
-	if (props.field.$el === 'richtext') return RichText;
-	return props.field.$el || 'div';
-});
+const emit = defineEmits(['update:modelValue'])
 
-const emit = defineEmits(['update:modelValue']);
+const is = $computed(() => {
+	if (props.field.$el === 'text') return TextInput
+	if (props.field.$el === 'select') return SelectInput
+	if (props.field.$el === 'toggle') return ToggleInput
+	if (props.field.$el === 'check') return CheckInput
+	if (props.field.$el === 'richtext') return RichText
+	return props.field.$el || 'div'
+})
 
 const formData = $computed({
 	get: () => props.modelValue,
-	set: (val: any) => emit('update:modelValue', val),
-});
+	set: (val: any) => { emit('update:modelValue', val) },
+})
 
 const fieldData = $computed({
 	set: (val: any) => {
-		if (!props.field.id) return;
-		const data = { ...props.modelValue } || {};
-		data[props.field.id] = val;
-		emit('update:modelValue', data);
+		if (!props.field.id) return
+		const data = { ...props.modelValue } || {}
+		data[props.field.id] = val
+		emit('update:modelValue', data)
 	},
 	get: () => {
-		if (props.field.id) return props.modelValue[props.field.id];
-		return props.field.defaultValue || '';
+		if (props.field.id) return props.modelValue[props.field.id]
+		return props.field.defaultValue || ''
 	},
-});
+})
 
 const vIf = $computed(() => {
-	if (props.field['v-if'] === undefined) return true;
-	if (typeof props.field['v-if'] === 'boolean') return props.field['v-if'];
-	if (typeof props.field['v-if'] === 'string') return true;
+	if (props.field['v-if'] === undefined) return true
+	if (typeof props.field['v-if'] === 'boolean') return props.field['v-if']
+	if (typeof props.field['v-if'] === 'string') return true
 	if (typeof props.field['v-if'] === 'function') {
-		return props.field['v-if']?.(fieldData, formData);
+		return props.field['v-if'](fieldData, formData)
 	}
-	return true;
-});
+	return true
+})
 </script>
+
+<template>
+	<component
+		v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
+		:is="is"
+		v-if="vIf"
+		:id="field.id"
+		v-model="fieldData"
+		:required="field.required"
+		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)"
+		:label="field.label"
+		:placeholder="field.placeholder || field.label"
+		:defaultValue="field.defaultValue"
+		:disabled="field.disabled"
+		:options="
+			bindAttrs({ options: field.options }, fieldData, modelValue).options
+		"
+		:helptext="field.helptext"
+		@update:modelValue="($event: any) => field?.onUpdate?.($event, formData)"
+	>
+		{{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
+		<BglField
+			v-for="(child, ii) in field.children"
+			:key="child.id || ii"
+			v-model="formData"
+			:field="child"
+		/>
+	</component>
+</template>

package/src/components/form/BglFieldSet.vue

@@ -1,13 +1,14 @@
+<script lang="ts" setup>
+import { defineExpose } from 'vue'
+
+const fieldSet = $ref<HTMLFieldSetElement | null>(null)
+const isDirty = $ref(false)
+const validateForm = () => fieldSet?.reportValidity()
+defineExpose({ validateForm, isDirty })
+</script>
+
 <template>
 	<fieldset ref="fieldSet">
 		<slot />
 	</fieldset>
 </template>
-<script lang="ts" setup>
-import { defineExpose } from 'vue';
-
-const fieldSet = $ref<HTMLFieldSetElement | null>(null);
-const isDirty = $ref(false);
-const validateForm = () => fieldSet?.reportValidity?.();
-defineExpose({ validateForm, isDirty });
-</script>