@bagelink/vue 0.0.1145 → 0.0.1151

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1145",
+  "version": "0.0.1151",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/DataPreview.vue

@@ -1,133 +1,62 @@
-<script lang="ts" setup>
-import type { BglFormSchemaT } from '@bagelink/vue'
-import {
-	BglField,
-	Title,
-	getFallbackSchema,
-	iffer,
-	isDate,
-	keyToLabel,
-} from '@bagelink/vue'
-
-const props = defineProps<{
-	showFields?: string[]
-	schema?: BglFormSchemaT
-	title?: string
-	excludeUnset?: boolean
-}>()
-
-const itemData = defineModel<{ [key: string]: any }>('data', { default: {} })
-
-function dataTransform(dataValue: any): any {
-	if (!dataValue) return dataValue
-	if (Array.isArray(dataValue)) return dataValue.map(dataTransform)
-	if (typeof dataValue === 'object') {
-		Object.keys(dataValue).forEach((key) => {
-			dataValue[key] = dataTransform(dataValue[key])
-		})
-	}
-
-	if (isDate(dataValue)) {
-		const date = new Date(dataValue)
-		return date.toDateString()
-	}
-
-	return dataValue
-}
-
-function isUnset(value: any) {
-	if (!props.excludeUnset) return false
-	return (
-		value === undefined || value === null || value === '' || value.length === 0
-	)
-}
-
-const computedSchema = $computed(() => getFallbackSchema([itemData.value], props.showFields))
+<script setup lang="ts" generic="T extends Record<string, any>">
+import type { BaseBagelField } from '@bagelink/vue'
+import type { Slots } from 'vue'
+import type { TableSchemaProps } from '../types/TableSchema'
+import { computed, useSlots } from 'vue'
+import { useSchemaField } from '../composables/useSchemaField'
+import { useTableData } from './DataTable/useTableData'
+
+const props = defineProps<TableSchemaProps<T>>()
+const slots = useSlots() as Slots & Record<string, (props: { row: T, field: BaseBagelField<T> }) => any>
+
+const data = computed(() => Array.isArray(props.data) ? props.data : [props.data])
+
+const {
+	computedSchema,
+	computedData,
+} = useTableData<T>({
+	data,
+	schema: props.schema,
+	showFields: props.showFields,
+	useServerSort: false
+})
+
+const firstItem = computed(() => computedData.value[0] || {} as T)
+
+const { renderField } = useSchemaField<T>({
+	mode: 'preview',
+	getRowData: () => firstItem.value
+})
 </script>
 
 <template>
-	<div v-if="data" class="data">
-		<Title v-if="title" :label="title" />
-		<template v-for="field in schema" :key="field.id">
-			<div v-if="iffer(field, itemData)" class="data-row m_py-05">
-				<div class="key">
-					<p class="m-0">
-						{{ field?.label || keyToLabel(field.id) }}
-					</p>
-				</div>
-				<BglField
-					v-model="itemData"
-					label=""
-					style="width: min-content; min-width: 140px"
-					:field
-				/>
-			</div>
+	<div class="data-preview">
+		<template v-for="field in computedSchema" :key="field.id">
+			<component :is="renderField(field, slots)" />
 		</template>
-		<div v-if="!schema?.length">
-			<template v-for="{ id, label } in computedSchema" :key="id">
-				<div v-if="!isUnset(itemData[id as any])" class="data-row">
-					<div class="key">
-						<p class="m-0">
-							{{ label }}
-						</p>
-					</div>
-					<div>
-						<p v-if="id" class="m-0">
-							{{ dataTransform(itemData[id]) }}
-						</p>
-					</div>
-				</div>
-			</template>
-		</div>
-		<slot name="footer" />
 	</div>
 </template>
 
 <style scoped>
-data {
-	font-size: var(--input-font-size);
-	border: 1.1px solid var(--border-color);
-	padding: 20px;
-	border-radius: var(--input-border-radius);
-}
-
-.data-row {
+.data-preview {
 	display: flex;
-	justify-content: space-between;
-	border-bottom: 1px solid var(--border-color);
-	align-items: center;
-	min-height: 50px;
-}
-.data-row .bagel-input.shrink,
-.data-row .bagel-input.shrink input {
-	min-width: 140px !important;
-	/* margin-top: -0.45rem !important; */
+	flex-direction: column;
+	gap: 0.5rem;
 }
 
-.data-link {
-	display: block;
-	font-size: var(--input-font-size);
-	margin-bottom: 2px;
-	line-height: 1.3;
-	color: var(--input-color);
-}
-@media screen and (max-width: 910px) {
-	.data-row {
-		display: block;
-		/* min-height: 80px; */
-		padding-bottom: 1rem;
-	}
+.preview-field {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
 }
-</style>
 
-<style>
-.data-row .bagel-input,
-.data-row .bagel-input input {
-	min-width: 140px !important;
-	height: calc(var(--input-height) - 0.25rem) !important;
+.field-label {
+	font-size: 0.8rem;
+	color: var(--bgl-black-tint);
+	font-weight: 500;
 }
 
-.data-row .bagel-input.bgl-toggle input {
-	height:20px !important;
+.field-value {
+	font-size: 0.95rem;
 }
 </style>

package/src/components/DataTable/DataTable.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
+import type { BaseBagelField } from '@bagelink/vue'
+import type { Slots } from 'vue'
 import type { TableSchemaProps } from '../../types/TableSchema'
 import {
-	BglComponent,
 	Icon,
 	keyToLabel,
 } from '@bagelink/vue'
-
-import { useSlots, watch, computed } from 'vue'
+import { useSlots, watch, computed, ref } from 'vue'
+import { useSchemaField } from '../../composables/useSchemaField'
 import { useTableData } from './useTableData'
 import { useTableSelection } from './useTableSelection'
 import { useTableVirtualization } from './useTableVirtualization'
@@ -23,7 +24,7 @@ const emit = defineEmits<{
 	'lastItemVisible': []
 }>()
 
-const slots: any = useSlots()
+const slots = useSlots() as Slots & Record<string, (props: { row: T, field: BaseBagelField<T> }) => any>
 
 const loading = defineModel('loading', { default: false })
 const itemHeight = defineModel('itemHeight', { default: 50 })
@@ -36,6 +37,7 @@ const selectedItems = defineModel<string[]>(
 )
 
 const data = computed(() => props.data)
+const currentRowId = ref<string>('')
 
 const {
 	computedSchema,
@@ -82,6 +84,14 @@ const {
 	}
 })
 
+function renderFieldForRow(field: BaseBagelField<T>, row: T) {
+	const { renderField } = useSchemaField<T>({
+		mode: 'table',
+		getRowData: () => row
+	})
+	return renderField(field, slots)
+}
+
 const computedItemHeight = $computed(() => `${itemHeight.value}px`)
 
 watch(
@@ -175,16 +185,12 @@ watch(
 							<slot
 								v-if="field.id && slots[field.id]"
 								:name="field.id"
-								:row
-								:field
+								:row="row"
+								:field="field"
 							/>
 							<div v-else>
-								<BglComponent
-									:id="field.id"
-									class="embedded-field"
-									:field
-									:modelValue="row"
-									label=""
+								<component
+									:is="renderFieldForRow(field, row)"
 								/>
 							</div>
 						</td>

package/src/components/DataTable/useTableData.ts

@@ -4,10 +4,25 @@ import { computed, ref } from 'vue'
 
 const NON_DIGIT_REGEX = /[^\d.-]/g
 
+// Components that should receive their value as a child/slot instead of a prop
+const SLOT_VALUE_COMPONENTS = new Set(['div', 'span', 'p'])
+
+// Components that should receive their value as src attribute
+const SRC_VALUE_COMPONENTS = new Set(['img', 'iframe'])
+
 export interface UseTableDataOptions<T> extends Omit<TableDataOptions<T>, 'sortField' | 'sortDirection'> {
 	onSort?: (field: string, direction: SortDirectionsT) => void
 }
 
+interface TransformedDataBase {
+	[key: `_transformed_${string}`]: any
+	[key: `_slot_${string}`]: boolean
+	[key: `_src_${string}`]: boolean
+	[key: `_original_${string}`]: any
+}
+
+type TransformedData<T> = T & TransformedDataBase
+
 export function useTableData<T extends Record<string, any>>(options: UseTableDataOptions<T>) {
 	// Create reactive reference to data prop
 
@@ -21,19 +36,40 @@ export function useTableData<T extends Record<string, any>>(options: UseTableDat
 		data: options.data.value,
 	}))
 
-	function transform(rowData: T): T {
-		const transformed = { ...rowData }
+	function transform(rowData: T): TransformedData<T> {
+		const transformed = { ...rowData } as TransformedData<T>
 		const schemaFields = computedSchema.value.filter((f: any) => f.id)
 
 		for (const field of schemaFields) {
-			const fieldData = rowData[`${field.id}`]
-			const newFieldVal = field.transform?.(fieldData, rowData)
-			;(transformed as any)[`_transformed_${field.id}`] = newFieldVal
+			const fieldId = field.id as keyof T
+			const fieldData = rowData[fieldId]
+			const transformKey = `_transformed_${String(fieldId)}` as keyof TransformedDataBase
+			const slotKey = `_slot_${String(fieldId)}` as keyof TransformedDataBase
+			const srcKey = `_src_${String(fieldId)}` as keyof TransformedDataBase
+			const originalKey = `_original_${String(fieldId)}` as keyof TransformedDataBase
+
+			// Store the original value
+			;(transformed as TransformedDataBase)[originalKey] = fieldData
+
+			// Determine if this component should receive value as slot or src
+			const isSlotValueComponent = typeof field.$el === 'string' && SLOT_VALUE_COMPONENTS.has(field.$el)
+			const isSrcValueComponent = typeof field.$el === 'string' && SRC_VALUE_COMPONENTS.has(field.$el)
+
+			;(transformed as TransformedDataBase)[slotKey] = isSlotValueComponent
+			;(transformed as TransformedDataBase)[srcKey] = isSrcValueComponent
+
+			if (field.transform) {
+				const newFieldVal = field.transform(fieldData, rowData)
+				// Store transformed value in _transformed_ key but keep original in the main field
+				;(transformed as TransformedDataBase)[transformKey] = newFieldVal
+			} else {
+				;(transformed as TransformedDataBase)[transformKey] = fieldData
+			}
 		}
 		return transformed
 	}
 
-	const computedSortField = computed(() => `_transformed_${sortField.value}`)
+	const computedSortField = computed(() => sortField.value ? `_transformed_${sortField.value}` : '')
 
 	const computedData = computed(() => {
 		const currentData = options.data.value
@@ -44,29 +80,27 @@ export function useTableData<T extends Record<string, any>>(options: UseTableDat
 		return currentData
 			.map(transform)
 			.sort((a, z) => {
-				let aValue = (a as any)[computedSortField.value] ?? a[sortField.value] ?? ''
-				let bValue = (z as any)[computedSortField.value] ?? z[sortField.value] ?? ''
+				const aValue = (a as any)[computedSortField.value] ?? ''
+				const bValue = (z as any)[computedSortField.value] ?? ''
 
 				if (isDate(aValue) && isDate(bValue)) {
-					aValue = new Date(aValue).getTime()
-					bValue = new Date(bValue).getTime()
+					return sortDirection.value === 'ASC'
+						? new Date(aValue).getTime() - new Date(bValue).getTime()
+						: new Date(bValue).getTime() - new Date(aValue).getTime()
 				}
 
 				const numAValue = Number.parseInt(`${aValue}`.replaceAll(NON_DIGIT_REGEX, ''), 10)
 				const numBValue = Number.parseInt(`${bValue}`.replaceAll(NON_DIGIT_REGEX, ''), 10)
 
 				if (!Number.isNaN(numAValue) && !Number.isNaN(numBValue)) {
-					if (sortDirection.value === 'ASC') return numAValue - numBValue
-					return numBValue - numAValue
+					return sortDirection.value === 'ASC' ? numAValue - numBValue : numBValue - numAValue
 				}
 
 				if (typeof aValue === 'string') {
-					if (sortDirection.value === 'ASC') return aValue.localeCompare(bValue)
-					return bValue.localeCompare(aValue)
+					return sortDirection.value === 'ASC' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue)
 				}
 
-				if (sortDirection.value === 'ASC') return aValue < bValue ? -1 : 1
-				return aValue < bValue ? 1 : -1
+				return sortDirection.value === 'ASC' ? (aValue < bValue ? -1 : 1) : (aValue < bValue ? 1 : -1)
 			})
 	})
 

package/src/components/Draggable/Draggable.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { ref, watch, onMounted, nextTick } from 'vue'
+import type { DraggableEvent } from './useDraggable'
+import { useDraggable } from './useDraggable'
+
+const props = withDefaults(defineProps<{
+	modelValue?: any[]
+	group?: string
+	handle?: string
+	mode?: 'ghost' | 'line'
+	disabled?: boolean
+}>(), {
+	mode: 'line',
+	disabled: false
+})
+
+const emit = defineEmits<{
+	'update:modelValue': [value: any[]]
+	'start': [event: MouseEvent]
+	'end': [event: DraggableEvent]
+}>()
+
+const dragContainer = ref<HTMLElement>()
+
+const { initDraggableContainer } = useDraggable({
+	group: props.group,
+	handle: props.handle,
+	mode: props.mode,
+	disabled: props.disabled,
+	items: props.modelValue,
+	onStart: (event) => { emit('start', event) },
+	onEnd: (event: DraggableEvent) => {
+		const newList = [...props.modelValue!]
+		const [removed] = newList.splice(event.oldIndex, 1)
+		newList.splice(event.newIndex, 0, removed)
+		emit('update:modelValue', newList)
+
+		emit('end', event)
+		nextTick(() => {
+			if (dragContainer.value) {
+				initDraggableContainer(dragContainer.value)
+			}
+		})
+	}
+})
+
+watch(() => props.modelValue, () => {
+	if (dragContainer.value) {
+		initDraggableContainer(dragContainer.value)
+	}
+}, { deep: true })
+
+onMounted(() => {
+	if (dragContainer.value) {
+		initDraggableContainer(dragContainer.value)
+	}
+})
+</script>
+
+<template>
+	<div ref="dragContainer">
+		<slot v-for="(item, index) in modelValue" :key="index" :item="item" :index="index" />
+	</div>
+</template>

package/src/components/Draggable/index.ts

@@ -0,0 +1,4 @@
+export { default as Draggable } from './Draggable.vue'
+export { useDraggable } from './useDraggable'
+export type { DraggableEvent, DraggableOptions } from './useDraggable'
+export { vDraggable } from './vDraggable'