@bagelink/vue 0.0.564 → 0.0.566

package/src/components/TableSchema.vue

@@ -5,8 +5,10 @@ import {
 	MaterialIcon,
 	isDate,
 	keyToLabel,
+	useBglSchema,
 } from '@bagelink/vue'
-import { useSlots } from 'vue'
+import { computed, useSlots, watch } from 'vue'
+import { useVirtualList } from '@vueuse/core'
 
 const props = defineProps<{
 	selectedItems?: string[]
@@ -14,51 +16,29 @@ const props = defineProps<{
 	schema?: BglFormSchemaT | (() => BglFormSchemaT)
 	showFields?: string[]
 }>()
+
 const emit = defineEmits(['update:selectedItems', 'orderBy', 'select'])
 const slots = useSlots()
-const loading = $ref(true)
-
-let selectedItems = $ref<string[]>(props.selectedItems || [])
-let selected = $computed({
-	get: () => selectedItems,
-	set: (value: string[]) => {
-		selectedItems = value
-		emit('update:selectedItems', value)
-	},
-})
+const loading = defineModel('loading', { default: false })
 
-function selectElement(item: Record<string, any>) { emit('select', item) }
+const itemHeight = defineModel('itemHeight', { default: 50 })
+const computedItemHiehgt = $computed(() => `${itemHeight.value}px`)
 
-let sortDirection = $ref('ASC')
 let sortField = $ref('')
+let sortDirection = $ref('ASC')
+let selectedItems = $ref<string[]>(props.selectedItems || [])
+
+const isSelectable = $computed(() => Array.isArray(props.selectedItems))
 
 const computedSortField = $computed(() => `_transformed_${sortField}`)
 
-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()
-})
+const computedSchema = $computed(
+	() => useBglSchema({
+		schema: props.schema,
+		showFields: props.showFields,
+		data: props.data,
+	})
+)
 
 function transform(rowData: any) {
 	const obj: Record<string, any> = { ...rowData }
@@ -71,13 +51,13 @@ function transform(rowData: any) {
 
 		Object.assign(obj, {
 			[`${field.id}`]: fieldData,
-			[`_transformed_${field.id}`]: newFieldVal
+			[`_transformed_${field.id}`]: newFieldVal,
 		})
 	}
 	return obj
 }
 
-const computedData = $computed(() => {
+const computedData = computed(() => {
 	const dta = [...props.data].map(transform)
 	if (sortField as string) {
 		return dta.sort((a, b) => {
@@ -110,15 +90,6 @@ const computedData = $computed(() => {
 	return dta
 })
 
-function _unused_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'
@@ -129,67 +100,193 @@ function sort(fieldname: string) {
 	}
 	emit('orderBy', `${fieldname} ${sortDirection}`.trim())
 }
+
+// #region ? VIRTUAL LIST
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
+	computedData,
+	{
+		itemHeight: itemHeight.value,
+		overscan: 10,
+	}
+)
+
+watch(
+	() => computedData.value.length,
+	(newLength, oldLength) => {
+		if (newLength === oldLength) return
+		scrollTo(0)
+	}
+)
+// #endregion ? VIRTUAL LIST
+
+// #region ? SELECT COLUMN
+const allSelector = $ref<HTMLInputElement | null>(null)
+let computedSelectedItems = $computed({
+	get: () => selectedItems,
+	set: (value: string[]) => {
+		selectedItems = value
+		emit('update:selectedItems', value)
+		updateAllSelectorState()
+	},
+})
+
+function updateAllSelectorState() {
+	if (!allSelector) return
+	const allSelected
+		= computedData.value.length === computedSelectedItems.length
+		&& computedData.value.every((s: any) => computedSelectedItems.includes(s.id))
+	allSelector.checked = allSelected
+	allSelector.indeterminate = !allSelected && computedSelectedItems.length > 0
+}
+
+function toggleSelectItem(item: Record<string, any>) {
+	if (!computedSelectedItems.length) {
+		emit('select', item)
+		return
+	}
+	const index = computedSelectedItems.indexOf(item.id)
+	if (index > -1) {
+		computedSelectedItems.splice(index, 1)
+	} else {
+		computedSelectedItems.push(item.id)
+	}
+}
+
+function toggleSelectAll(event: Event) {
+	const value = (event.target as HTMLInputElement).checked
+	computedSelectedItems = value ? computedData.value.map((d: any) => d.id) : []
+}
+// #endregion ? SELECT COLUMN
 </script>
 
 <template>
-	<div class="table-list-wrap h-100">
-		<table class="infinite-wrapper">
-			<thead class="row first-row">
-				<th
-					v-for="field in computedSchema"
-					:key="field.id"
-					class="col"
-					@click="sort(field?.id || '')"
-				>
-					<div class="flex">
-						{{ field.label || keyToLabel(field.id) }}
-						<div
-							class="list-arrows"
-							:class="{ sorted: sortField === field.id }"
+	<div
+		class="table-list-wrap h-100"
+		v-bind="containerProps"
+		:class="{ 'loading-table': loading }"
+	>
+		<div
+			v-if="loading"
+			class="loading-table-wrapper z-99 h-100 w-100 absolute inset"
+		>
+			<div class="loading-table-animation absolute oval" />
+		</div>
+		<div
+			v-else
+			v-bind="wrapperProps"
+		>
+			<table class="infinite-wrapper">
+				<thead class="row first-row">
+					<th v-if="isSelectable">
+						<input
+							ref="allSelector"
+							type="checkbox"
+							@click.stop
+							@change="toggleSelectAll"
 						>
-							<MaterialIcon
-								:class="{ desc: sortDirection === 'DESC' }"
-								icon="keyboard_arrow_up"
-							/>
-						</div>
-					</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"
-					class="row row-item position-relative"
-					@click="selectElement(row)"
-				>
-					<td
+					</th>
+					<th
 						v-for="field in computedSchema"
-						:key="`${field.id}-${row.id}`"
+						:key="field.id"
 						class="col"
+						@click="sort(field?.id || '')"
+					>
+						<div class="flex">
+							{{ field.label || keyToLabel(field.id) }}
+							<div
+								class="list-arrows"
+								:class="{ sorted: sortField === field.id }"
+							>
+								<MaterialIcon
+									:class="{ desc: sortDirection === 'DESC' }"
+									icon="keyboard_arrow_up"
+								/>
+							</div>
+						</div>
+					</th>
+				</thead>
+				<tbody>
+					<tr
+						v-for="{ data: row } in list"
+						:key="row.id"
+						class="row row-item position-relative"
+						:class="{ selected: computedSelectedItems.includes(row.id) }"
+						@click="toggleSelectItem(row)"
 					>
-						<slot
-							v-if="field.id && slots[field.id]"
-							:name="field.id"
-							:row
-							:field
-						/>
-						<div v-else>
-							<BglField
-								class="embedded-field"
+						<td v-if="isSelectable">
+							<div @click.stop>
+								<input
+									v-model="computedSelectedItems"
+									type="checkbox"
+									:value="row.id"
+								>
+							</div>
+						</td>
+						<td
+							v-for="field in computedSchema"
+							:key="`${field.id}-${row.id}`"
+							class="col"
+						>
+							<slot
+								v-if="field.id && slots[field.id]"
+								:name="field.id"
+								:row
 								:field
-								:modelValue="row"
-								label=""
 							/>
-						</div>
-					</td>
-				</tr>
-			</tbody>
-		</table>
+							<div v-else>
+								<BglField
+									class="embedded-field"
+									:field
+									:modelValue="row"
+									label=""
+								/>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
 	</div>
 </template>
 
 <style scoped>
+.selected {
+	background: var(--bgl-primary-tint);
+}
+
+tbody tr.selected:hover {
+	background: var(--bgl-primary-light);
+}
+
+.loading-table {
+	position: relative;
+}
+
+.inset {
+	inset: 0;
+}
+
+.loading-table-animation {
+	--size: 60px;
+	top: 30vh;
+	inset-inline-start: calc(50% - var(--size));
+	border: 3px solid var(--bgl-gray-20);
+	border-top: 4px solid var(--bgl-primary);
+	width: var(--size);
+	height: var(--size);
+	animation: loading-table 1s linear infinite;
+}
+
+@keyframes loading-table {
+	0% {
+		transform: translate(-50%, -50%) rotate(0deg);
+	}
+
+	100% {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
+}
+
 .list-arrows {
 	opacity: 0;
 }
@@ -217,10 +314,20 @@ table {
 	border-collapse: separate;
 	border-spacing: 0 15px;
 	border-collapse: collapse;
+	width: 100%;
 }
 
 th {
+	font-size: 0.8rem;
+	color: var(--bgl-black-tint);
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	background: var(--bgl-white);
+	height: v-bind(computedItemHiehgt);
+	vertical-align: bottom;
 	font-weight: 400;
+	text-align: start;
 }
 
 .embedded-field {
@@ -240,12 +347,8 @@ th {
 	top: 0;
 	z-index: 2;
 	background: var(--bgl-white);
-	/* height: 50px; */
 	vertical-align: bottom;
 }
-.row.first-row input[type=checkbox]{
-	margin-bottom: 0.7rem;
-}
 
 .row.first-row::after {
 	content: '';
@@ -268,11 +371,12 @@ th {
 	line-height: 1;
 	align-items: center;
 }
+
 .col:has(.bagel-input) {
 	padding: 0rem 0.25rem;
 }
 
-.col > div {
+.col>div {
 	display: flex;
 	gap: 0.5rem;
 }
@@ -312,14 +416,15 @@ th {
 }
 
 .row-item {
-	height: 50px;
+	height: v-bind(computedItemHiehgt);
 	transition: all 200ms ease;
 }
 
 .row-item:hover {
 	background: var(--bgl-gray-light);
 }
-.row-item input[type=checkbox]{
+
+.row-item input[type='checkbox'] {
 	margin-top: 0.45rem !important;
 	accent-color: var(--bgl-primary);
 }
@@ -328,4 +433,78 @@ th {
 	overflow-y: auto;
 	width: 100%;
 }
+
+input[type='checkbox'] {
+	margin-top: 0.3rem !important;
+	accent-color: var(--bgl-primary);
+	transform: scale(1.2);
+	position: relative;
+	cursor: pointer;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 0.85rem;
+	width: 0.85rem;
+}
+
+input[type='checkbox']::before {
+	content: '';
+	height: 0.85rem;
+	width: 0.85rem;
+	background: var(--bgl-primary);
+	display: block;
+	text-align: center;
+	border-radius: 100%;
+	opacity: 0;
+	transition: all 200ms ease;
+	transform: scale(1);
+	position: absolute;
+}
+
+input[type='checkbox']:hover::before {
+	opacity: 0.2;
+	transform: scale(2);
+}
+
+[lang='he'] [dir='ltr'] {
+	text-align: right;
+}
+
+th input[type='checkbox'] {
+	transform: translateY(0.2rem) scale(1.2);
+	accent-color: var(--bgl-primary);
+}
+
+th::after {
+	content: '';
+	border-bottom: 1px solid var(--border-color);
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: -1px;
+}
+
+tr {
+	border-bottom: 1px solid var(--border-color);
+	cursor: pointer;
+	align-items: center;
+}
+
+td,
+th {
+	white-space: nowrap;
+	padding: 0.75rem 0.65rem;
+	transition: var(--bgl-transition);
+	line-height: 1;
+}
+
+tbody tr {
+	font-size: 0.88em;
+	height: v-bind(computedItemHiehgt);
+	transition: all 200ms ease;
+}
+
+tbody tr:hover {
+	background: var(--bgl-gray-light);
+}
 </style>

package/src/components/form/BglFieldSet.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { defineExpose } from 'vue'
-
 const fieldSet = $ref<HTMLFieldSetElement | null>(null)
 const isDirty = $ref(false)
 const validateForm = () => fieldSet?.reportValidity()

package/src/components/form/BglForm.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import { BglField, type BglFormSchemaT, Title, useModal } from '@bagelink/vue'
 import { useSlots, watch } from 'vue'
-import { BglField, Title, useModal } from '@bagelink/vue'
 
-import type { BglFormSchemaT } from '@bagelink/vue'
+type FormStatus = 'idle' | 'loading' | 'success' | 'error'
 
 const props = withDefaults(
 	defineProps<{
@@ -46,8 +46,6 @@ const validateForm = () => form?.reportValidity()
 
 const clearForm = () => (data = {})
 
-type FormStatus = 'idle' | 'loading' | 'success' | 'error'
-
 watch(
 	() => props.status,
 	(status) => {

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

@@ -1,27 +1,34 @@
 <script setup lang="ts">
-const props = defineProps<{
+import { onMounted } from 'vue'
+
+const props = withDefaults(defineProps<{
 	label?: string
 	id?: string
 	title?: string
 	small?: boolean
 	required?: boolean
-}>()
+	defaultValue?: boolean
+}>(), { defaultValue: false })
+
+const inputId = $computed(() => props.id || Math.random().toString(36).substring(7))
 
-const inputId = $ref(props.id || Math.random().toString(36).substring(7))
+const checked = defineModel<boolean | undefined>('modelValue', { default: undefined })
 
-const checked = defineModel<boolean>('modelValue', { default: false })
+onMounted(() => {
+	if (checked.value === undefined) checked.value = props.defaultValue
+})
 </script>
 
 <template>
 	<div
 		class="bagel-input bgl-checkbox align-items-center ps-025"
-		:title="title"
+		:title
 		:class="{ small }"
 	>
 		<input
 			:id="inputId"
 			v-model="checked"
-			:required="required"
+			:required
 			type="checkbox"
 			class="me-05"
 		>

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

@@ -5,6 +5,7 @@ import { onMounted } from 'vue'
 
 const props = withDefaults(
 	defineProps<{
+		required?: boolean
 		label?: string
 		editMode?: boolean
 		small?: boolean
@@ -61,6 +62,7 @@ onMounted(() => {
 		<VDatepicker
 			ref="datePicker"
 			v-model="date"
+			:required="required"
 			:auto-apply="true"
 			:enable-time-picker="enableTime"
 			:allowed-dates="allowedDates"