@bagelink/vue 0.0.1147 → 0.0.1155

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'