@bagelink/vue 0.0.819 → 0.0.823

package/package.json

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

package/src/components/Carousel.vue

@@ -25,6 +25,7 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:index'])
 const bglSlider = $ref<HTMLElement>()
+let itemCount = $ref(props.items)
 let activeSlideIndex = $ref(0)
 let isDragging = $ref(false)
 let startX = $ref(0)
@@ -55,6 +56,7 @@ function evalHeight() {
 
 function scrollEase(target: number, duration: number = 500) {
 	if (!bglSlider) return
+	if (isPressed) return
 	const start = bglSlider.scrollLeft
 	const change = target - start
 	const startTime = performance.now()
@@ -103,23 +105,29 @@ watch(
 		emit('update:index', activeSlideIndex) }
 )
 
-function scrollEnd() {
-	const slider = bglSlider
-	if (!slider || props.items !== 1) return
-	const nextSlide = Math.round(slider.scrollLeft / slider.offsetWidth)
+function goToSlideScrollEnd() {
+	if (!bglSlider) return
+	const isDragForward = startX > bglSlider.offsetLeft
+	if (itemCount === 1) {
+		if (isDragForward) activeSlideIndex = Math.ceil(bglSlider.scrollLeft / bglSlider.offsetWidth)
+		else activeSlideIndex = Math.floor(bglSlider.scrollLeft / bglSlider.offsetWidth)
+	} else {
+		activeSlideIndex = Math.round(bglSlider.scrollLeft / bglSlider.offsetWidth)
+	}
+	startX = 0
+	const nextSlide = Math.round(bglSlider.scrollLeft / bglSlider.offsetWidth)
 	goToSlide(nextSlide)
 }
 
+let timeout: any = null
+
+function scrollEnd() {
+	if (timeout) clearTimeout(timeout)
+	timeout = setTimeout(goToSlideScrollEnd, 400)
+}
+
 function stopDragging(e: MouseEvent) {
 	isPressed = false
-	const slider = bglSlider
-	if (!slider) return
-	const isDragForward = startX > e.pageX + slider.offsetLeft
-	if (isDragForward)
-		activeSlideIndex = Math.ceil(slider.scrollLeft / slider.offsetWidth)
-	else activeSlideIndex = Math.floor(slider.scrollLeft / slider.offsetWidth)
-	if (props.items === 1) goToSlide(activeSlideIndex)
-	startX = 0
 	document.removeEventListener('mousemove', move)
 	document.removeEventListener('mouseup', stopDragging)
 	document.removeEventListener('dragend', stopDragging)
@@ -143,7 +151,7 @@ function startDragging(e: MouseEvent) {
 	isPressed = true
 	document.addEventListener('mousemove', move)
 	document.addEventListener('mouseup', stopDragging)
-	document.addEventListener('dragend', stopDragging)
+	// document.addEventListener('dragend', stopDragging)
 }
 
 function next() {
@@ -163,12 +171,18 @@ function prev() {
 
 function evalWidth() {
 	if (!bglSlider) return
+	if (window.innerWidth < 600) itemCount = 1
+	else if (window.innerWidth < 991) itemCount = Math.min(props.items, 2)
+	else if (window.innerWidth < 1280) itemCount = Math.min(props.items, 3)
+	else itemCount = props.items
+	console.log(itemCount, window.innerWidth)
 	goToSlide(activeSlideIndex)
 }
 
 onMounted(() => {
 	window.addEventListener('resize', evalWidth)
 	evalHeight()
+	evalWidth()
 	disableDrag()
 })
 
@@ -182,10 +196,15 @@ onUnmounted(() => { window.removeEventListener('resize', evalWidth) })
 			:class="{
 				dragging: isDragging,
 				clicking: isPressed,
-				[`slides-${items}`]: true,
 				allowScroll,
+				odd: itemCount % 2 !== 0,
+				[`slides-${itemCount}`]: itemCount === 1,
 			}"
 			class="bgl-slider"
+			:style="{
+				'--item-count': itemCount,
+			}"
+			@scroll.active="scrollEnd"
 			@mousedown="startDragging"
 		>
 			<div v-if="isDragging" class="blocker" />
@@ -230,33 +249,18 @@ onUnmounted(() => { window.removeEventListener('resize', evalWidth) })
 	overflow-x: scroll;
 }
 
-.bgl-slider.slides-6 {
-	grid-auto-columns: 15.9%;
-	gap: 1%;
-}
-
-.bgl-slider.slides-5 {
-	grid-auto-columns: 19.3%;
-	gap: 1%;
-}
-
-.bgl-slider.slides-4 {
-	grid-auto-columns: 24.3%;
-	gap: 1%;
-}
-
-.bgl-slider.slides-3 {
-	grid-auto-columns: 33%;
+.bgl-slider {
+	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 1) * 1%);
 	gap: 1%;
 }
 
-.bgl-slider.slides-2 {
-	grid-auto-columns: 50%;
-	gap: 1%;
+.bgl-slider.odd {
+	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 2) * 1%);
 }
 
 .bgl-slider.slides-1 {
 	grid-auto-columns: 100%;
+	gap: 0;
 }
 
 .bgl-slider::-webkit-scrollbar {
@@ -282,21 +286,10 @@ onUnmounted(() => { window.removeEventListener('resize', evalWidth) })
 	user-select: none;
 }
 
-@media screen and (max-width: 1280px) {
-	.bgl-slider.slides-4 {
-		grid-auto-columns: 33%;
-	}
-}
-
-@media screen and (max-width: 991px) {
-	.bgl-slider.slides-4 {
-		grid-auto-columns: 50%;
-	}
-}
-
 @media screen and (max-width: 600px) {
-	.bgl-slider.slides-4 {
-		grid-auto-columns: 100%;
+	.bgl-slider.slides-1  * {
+		margin-inline-start: 1%;
 	}
+
 }
 </style>

package/src/components/Pill.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { MaterialIcons, ThemeType } from '@bagelink/vue'
 import { Btn, MaterialIcon } from '@bagelink/vue'
 import { useSlots } from 'vue'
+import type { MaterialIcons, ThemeType } from '@bagelink/vue'
 
 interface BtnProp {
 	icon: MaterialIcons

package/src/components/TableSchema.vue

@@ -8,7 +8,7 @@ import {
 	useBglSchema,
 } from '@bagelink/vue'
 import { useVirtualList } from '@vueuse/core'
-import { computed, useSlots, watch } from 'vue'
+import { computed, useSlots, watch, onMounted, onUnmounted } from 'vue'
 
 export type SortDirectionsT = 'ASC' | 'DESC'
 export type EmitOrderT = `${string} ${SortDirectionsT}`
@@ -17,6 +17,7 @@ const {
 	data,
 	schema,
 	showFields,
+	onLastItemVisible,
 	useServerSort = false,
 	selectable = false
 } = defineProps<{
@@ -25,6 +26,7 @@ const {
 	showFields?: string[]
 	useServerSort?: boolean
 	selectable?: boolean
+	onLastItemVisible?: () => void
 }>()
 
 const emit = defineEmits<{
@@ -141,7 +143,7 @@ const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
 watch(
 	() => computedData.value.length,
 	(newLength, oldLength) => {
-		if (newLength === oldLength) return
+		if (newLength === oldLength || onLastItemVisible !== undefined) return
 		scrollTo(0)
 	}
 )
@@ -183,6 +185,18 @@ function toggleSelectAll(event: Event) {
 	selectedItems.value = value ? computedData.value.map((d: any) => d.id) : []
 }
 // #endregion ? SELECT COLUMN
+const lastItem = $ref<HTMLTableRowElement | null>()
+let observer: IntersectionObserver | undefined
+
+onMounted(() => {
+	if (onLastItemVisible === undefined) return
+	observer = new IntersectionObserver(([entry]) => {
+		if (entry.isIntersecting && computedData.value.length) onLastItemVisible()
+	})
+	if (lastItem) observer.observe(lastItem)
+})
+
+onUnmounted(() => { observer?.disconnect() })
 </script>
 
 <template>
@@ -266,6 +280,7 @@ function toggleSelectAll(event: Event) {
 							</div>
 						</td>
 					</tr>
+					<tr v-if="onLastItemVisible !== undefined" ref="lastItem" />
 				</tbody>
 			</table>
 		</div>

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

@@ -270,7 +270,16 @@ function drop(e: DragEvent) {
 						class="single-image-item-preview"
 						:class="{ 'bgl_fill-image': fill }"
 					>
-						<img v-if="isImage(file.extension || file.url)" v-lightbox class="single-preview" :src="file.url" alt="">
+						<div v-if="isImage(file.extension || file.url)" class="h-100">
+							<img v-lightbox class="single-preview" :src="file.url" alt="">
+							<div class="position-start m-05 gap-025 flex">
+								<Btn v-tooltip="'Delete'" color="gray" thin icon="delete" @click.stop="removeFile(file)" />
+								<Btn
+									v-tooltip="'Replace'" color="gray" thin icon="autorenew"
+									@click="browse"
+								/>
+							</div>
+						</div>
 						<Icon v-else :size="4" weight="2" icon="draft" class="color-primary w-100" />
 					</div>
 
@@ -407,8 +416,21 @@ function drop(e: DragEvent) {
 	height: calc(100% - 2rem);
 	object-fit: cover;
 	background: var(--bgl-gray-light);
-	box-shadow: 0 0 10px #00000012;
 }
+.single-image-item-preview:hover::after{
+	content: "zoom_in";
+	font-size: 32px;
+	font-family: "Material Symbols Outlined", serif;
+	position: absolute;
+	border-radius: 100%;
+	color: var(--bgl-white);
+	z-index: 9;
+	pointer-events: none;
+}
+.single-image-item-preview:hover img{
+	filter: brightness(70%);
+}
+
 .bgl_fill-image.single-image-item-preview {
 	height: 100%;
 }

package/src/components/layout/Skeleton.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+const {
+	count = 1,
+	height = '50px',
+	width = 'auto',
+	borderRadius = 'var(--skeleton-radius)',
+} = defineProps<{
+	count?: number
+	height?: string
+	width?: string
+	borderRadius?: string
+}>()
+import { useSlots } from 'vue'
+
+const slots = useSlots()
+</script>
+
+<template>
+	<template v-for="i in count" :key="i">
+		<div v-if="slots.default" class="skeleton-wrap">
+			<slot />
+		</div>
+		<div v-else class="skeleton" :style="{ height, width, borderRadius }" />
+	</template>
+</template>
+
+<style scoped>
+.skeleton-wrap {
+	--skeleton-radius: 0.25rem;
+	--skeleton-bg: #f0f0f0;
+	--skeleton-margin: 1rem;
+	margin-bottom: var(--skeleton-margin);
+}
+.skeleton {
+	animation: skeleton 2s infinite;
+	background-color: var(--skeleton-bg);
+	border-radius: var(--bg-card-radius);
+	margin-bottom: 0.25em;
+}
+
+@keyframes skeleton {
+	0% {
+		opacity: 0.5;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0.5;
+	}
+}
+</style>

package/src/components/layout/index.ts

@@ -1,6 +1,7 @@
 export { default as BottomMenu } from './BottomMenu.vue'
 export { default as Layout } from './Layout.vue'
 export { default as SidebarMenu } from './SidebarMenu.vue'
+export { default as Skeleton } from './Skeleton.vue'
 export { default as TabbedLayout } from './TabbedLayout.vue'
 export { default as Tabs } from './Tabs.vue'
 export { default as TabsBody } from './TabsBody.vue'

package/src/utils/index.ts

@@ -1,24 +1,34 @@
 import type { Attributes, BglFormSchemaT } from '@bagelink/vue'
 
-export function debounce<T extends (...args: any[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void {
-	let timeoutId: ReturnType<typeof setTimeout> | undefined
-
-	return function (...args: Parameters<T>) {
-		if (timeoutId) {
-			clearTimeout(timeoutId)
+export function debounce<T extends (...args: Parameters<T>) => ReturnType<T>>(
+	callback: T,
+	wait: number,
+	immediate?: boolean
+): (...args: Parameters<T>) => void {
+	let timeout: NodeJS.Timeout | undefined
+
+	return function (this: ThisParameterType<T>, ...args: Parameters<T>): void {
+		const later = () => {
+			timeout = undefined
+			if (!immediate) callback.apply(this, args)
 		}
 
-		timeoutId = setTimeout(() => {
-			func(...args)
-		}, wait)
+		const callNow = immediate && timeout === undefined
+		clearTimeout(timeout)
+		timeout = setTimeout(later, wait)
+
+		if (callNow) callback.apply(this, args)
 	}
 }
 
 export function keyToLabel(key?: string): string | undefined {
 	if (key === undefined) return key
-	return key.split('_')
-		.map(k => k.charAt(0).toUpperCase() + k.slice(1))
-		.join(' ') || key
+	return (
+		key
+			.split('_')
+			.map(k => k.charAt(0).toUpperCase() + k.slice(1))
+			.join(' ') || key
+	)
 }
 
 export async function copyText(text: string, cb?: (msg: string) => void) {
@@ -38,19 +48,27 @@ export function useEscape(event: KeyboardEvent, closeModel: () => void) {
 }
 
 export function classify(fieldVal?: any, row?: any, ...classes: any[]) {
-	return classes.map((cls) => {
-		if (typeof cls === 'function') return cls(fieldVal, row)
-		return cls
-	}).join(' ')
+	return classes
+		.map((cls) => {
+			if (typeof cls === 'function') return cls(fieldVal, row)
+			return cls
+		})
+		.join(' ')
 }
 
-export function bindAttrs<T = { [key: string]: any }>(attrs?: Attributes, fieldVal?: any, row?: T) {
+export function bindAttrs<T = { [key: string]: any }>(
+	attrs?: Attributes,
+	fieldVal?: any,
+	row?: T
+) {
 	if (!attrs) return {}
 	const exclude = ['class']
-	const arr = Object.entries(attrs).filter(([key]) => !exclude.includes(key)).map(([key, value]) => [
-		key,
-		typeof value === 'function' ? value(fieldVal, row) : value,
-	])
+	const arr = Object.entries(attrs)
+		.filter(([key]) => !exclude.includes(key))
+		.map(([key, value]) => [
+			key,
+			typeof value === 'function' ? value(fieldVal, row) : value,
+		])
 
 	const resolvedAttrs = Object.fromEntries(arr)
 	return resolvedAttrs
@@ -60,7 +78,8 @@ export function iffer(field: any, itemData: any) {
 	if (field['v-if'] === undefined) return true
 	if (typeof field['v-if'] === 'boolean') return field['v-if']
 	if (typeof field['v-if'] === 'string') return true
-	if (typeof field['v-if'] === 'function') return field['v-if']?.(itemData?.[field.id], itemData)
+	if (typeof field['v-if'] === 'function')
+		return field['v-if']?.(itemData?.[field.id], itemData)
 	return true
 }
 
@@ -77,22 +96,25 @@ export { useLang } from './lang'
 
 export { formatString } from './strings'
 
-export function getFallbackSchema<T>(data?: any[], showFields?: string[]): BglFormSchemaT<T> {
+export function getFallbackSchema<T>(
+	data?: any[],
+	showFields?: string[]
+): BglFormSchemaT<T> {
 	const keys = Array.from(new Set((data ?? []).flatMap(Object.keys)))
 
-	const schema: BglFormSchemaT<T> = keys.map(
-		id => ({
-			id,
-			label: keyToLabel(id),
-		})
-	)
+	const schema: BglFormSchemaT<T> = keys.map(id => ({
+		id,
+		label: keyToLabel(id),
+	}))
 
 	return showFields
 		? schema.filter(f => showFields.includes(f.id as string) || !f.id)
 		: schema
 }
 
-export const sleep = (ms: number = 100) => new Promise(resolve => setTimeout(resolve, ms))
+export function sleep(ms: number = 100) {
+	return new Promise(resolve => setTimeout(resolve, ms))
+}
 
 export function appendScript(src: string): Promise<void> {
 	return new Promise((resolve, reject) => {
@@ -102,7 +124,9 @@ export function appendScript(src: string): Promise<void> {
 		}
 		const script = document.createElement('script')
 		script.src = src
-		script.onload = () => { resolve() }
+		script.onload = () => {
+			resolve()
+		}
 		script.onerror = reject
 		document.head.append(script)
 	})