@bagelink/vue 0.0.518 → 0.0.524

package/src/components/Carousel.vue

@@ -2,70 +2,78 @@
 import { onMounted, onUnmounted, watch } from 'vue'
 
 const props = defineProps({
-	autoHeight: { type: Boolean, default: false },
-	allowScroll: { type: Boolean, default: true },
-	freeDrag: { type: Boolean, default: true },
-	items: { type: Number, default: 4 },
-	index: { type: Number, default: 0 },
-	autoplay: { type: Boolean, default: false },
-	autoplaySpeed: { type: Number, default: 3000 },
-	loop: { type: Boolean, default: false },
+	autoHeight: {
+		type: Boolean,
+		default: false,
+	},
+	allowScroll: {
+		type: Boolean,
+		default: true,
+	},
+	freeDrag: {
+		type: Boolean,
+		default: true,
+	},
+	items: {
+		type: Number,
+		default: 4,
+	},
+	index: {
+		type: Number,
+		default: 0,
+	},
 })
-
 const emit = defineEmits(['update:index'])
-
-const bglSlider = $ref<HTMLElement | null>(null)
+const bglSlider = $ref<HTMLElement>()
 let activeSlideIndex = $ref(0)
 let isDragging = $ref(false)
 let startX = $ref(0)
 let scrollLeft = $ref(0)
 let isPressed = $ref(false)
-let yHeight = $ref('auto')
-let autoplayInterval = $ref<ReturnType<typeof setInterval> | null>(null)
-let originalSlideCount = $ref(0)
 
 function disableDrag() {
-	bglSlider?.querySelectorAll('img').forEach((e) => { e.setAttribute('draggable', 'false') })
+	bglSlider
+		?.querySelectorAll('img')
+		.forEach((e) => { e.setAttribute('draggable', 'false') })
+
 	for (const e of (bglSlider?.children as any[] | undefined) || []) {
 		e.setAttribute('draggable', 'false')
-		e.addEventListener('click', (el: any) => el.preventDefault())
+		e.addEventListener('click', (e: any) => e.preventDefault())
 	}
 }
 
+let yHeight = $ref('auto')
 function evalHeight() {
 	if (!props.autoHeight || !bglSlider) return
-	const height = Array.from(bglSlider.children[activeSlideIndex].children)
+	const slidChildren = bglSlider.children[activeSlideIndex].children
+	const height = Array.from(slidChildren)
 		.map(el => el.clientHeight)
 		.reduce((a, b) => a + b, 0)
+
 	yHeight = `${height}px`
 }
 
-function goToSlide(index: number, behavior: ScrollBehavior = 'smooth') {
-	if (!bglSlider) return
-	if (props.loop) {
-		if (index >= originalSlideCount) {
-			index = index % originalSlideCount
-			behavior = 'auto'
-		} else if (index < 0) {
-			index = originalSlideCount - (-index % originalSlideCount)
-			behavior = 'auto'
-		}
-	}
-
+function goToSlide(index: number) {
+	if (!bglSlider || index < 0 || index > bglSlider.children.length - 1) return
+	const slider = bglSlider
 	const isRTL = getComputedStyle(bglSlider).direction === 'rtl'
-	const scrollX = bglSlider.offsetWidth * index * (isRTL ? -1 : 1)
-	bglSlider.scrollTo({ left: scrollX, behavior })
+	const scrollX = slider.offsetWidth * index * (isRTL ? -1 : 1)
+	slider.scrollTo({ left: scrollX, behavior: 'smooth' })
 	activeSlideIndex = index
 	evalHeight()
 }
 
-watch(() => props.index, (index) => { goToSlide(index) })
+watch(() => props.index, goToSlide)
 
-watch(() => activeSlideIndex, (index) => { emit('update:index', index) })
+watch(
+	() => activeSlideIndex,
+	(index) => { emit('update:index', index) }
+)
 
 function scrollEnd() {
-	if (props.items !== 1 || !bglSlider) return
-	const nextSlide = Math.round(bglSlider.scrollLeft / bglSlider.offsetWidth)
+	const slider = bglSlider
+	if (!slider || props.items !== 1) return
+	const nextSlide = Math.round(slider.scrollLeft / slider.offsetWidth)
 	goToSlide(nextSlide)
 }
 
@@ -74,10 +82,11 @@ function stopDragging(e: MouseEvent) {
 	const slider = bglSlider
 	if (!slider) return
 	const isDragForward = startX > e.pageX + slider.offsetLeft
-	activeSlideIndex = isDragForward
-		? Math.ceil(slider.scrollLeft / slider.offsetWidth)
-		: Math.floor(slider.scrollLeft / slider.offsetWidth)
+	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)
@@ -87,9 +96,11 @@ function stopDragging(e: MouseEvent) {
 function move(e: MouseEvent) {
 	if (!bglSlider) return
 	const x = e.pageX - bglSlider.offsetLeft
-	if (Math.abs(x - startX) > 20) isDragging = true
+	const walk = x - startX
+	if (walk > 20 || walk < -20) isDragging = true
 	if (!isDragging) return
-	bglSlider.scrollLeft = scrollLeft - (x - startX)
+	const scroll = x - startX
+	bglSlider.scrollLeft = scrollLeft - scroll
 }
 
 function startDragging(e: MouseEvent) {
@@ -103,85 +114,57 @@ function startDragging(e: MouseEvent) {
 }
 
 function next() {
-	if (bglSlider) {
-		goToSlide(activeSlideIndex + 1)
-	}
+	if (!bglSlider) return
+	const slideCount = bglSlider.children.length
+	const isLastSlide = activeSlideIndex >= slideCount - 1
+	if (isLastSlide) goToSlide(0)
+	else goToSlide(activeSlideIndex + 1)
 }
 
 function prev() {
-	if (bglSlider) {
-		goToSlide(activeSlideIndex - 1)
-	}
+	if (!bglSlider) return
+	const slideCount = bglSlider.children.length
+	if (activeSlideIndex === 0) goToSlide(slideCount - 1)
+	else goToSlide(activeSlideIndex - 1)
 }
 
 function evalWidth() {
-	if (bglSlider) goToSlide(activeSlideIndex)
-}
-
-function startAutoplay() {
-	if (props.autoplay) {
-		autoplayInterval = setInterval(next, props.autoplaySpeed)
-	}
-}
-
-function stopAutoplay() {
-	if (autoplayInterval) {
-		clearInterval(autoplayInterval)
-		autoplayInterval = null
-	}
-}
-
-function cloneSlides() {
-	if (!bglSlider || !props.loop) return
-	const slides = Array.from(bglSlider.children)
-	originalSlideCount = slides.length
-	slides.forEach((slide) => {
-		const clone = slide.cloneNode(true) as HTMLElement
-		bglSlider.appendChild(clone)
-	})
-	slides.forEach((slide) => {
-		const clone = slide.cloneNode(true) as HTMLElement
-		bglSlider.insertBefore(clone, bglSlider.firstChild)
-	})
+	if (!bglSlider) return
+	goToSlide(activeSlideIndex)
 }
 
 onMounted(() => {
-	cloneSlides()
 	window.addEventListener('resize', evalWidth)
 	evalHeight()
 	disableDrag()
-	startAutoplay()
 })
 
-onUnmounted(() => {
-	window.removeEventListener('resize', evalWidth)
-	stopAutoplay()
-})
+onUnmounted(() => { window.removeEventListener('resize', evalWidth) })
 </script>
 
 <template>
-	<div class="BglCarousel" :style="{ height: yHeight }" :class="{ autoHeight: props.autoHeight }">
+	<div class="BglCarousel" :style="{ height: yHeight }" :class="{ autoHeight }">
 		<div
 			ref="bglSlider"
-			class="bgl-slider" :class="[
-				{ dragging: isDragging, clicking: isPressed, [`slides-${props.items}`]: true, allowScroll: props.allowScroll },
-			]"
+			:class="{
+				dragging: isDragging,
+				clicking: isPressed,
+				[`slides-${items}`]: true,
+				allowScroll,
+			}"
+			class="bgl-slider"
 			@scrollend="scrollEnd"
 			@mousedown="startDragging"
-			@mouseenter="stopAutoplay"
-			@mouseleave="startAutoplay"
-			@focusin="stopAutoplay"
-			@focusout="startAutoplay"
 		>
 			<div v-if="isDragging" class="blocker" />
 			<slot />
 		</div>
 		<div class="Handlers">
 			<span @click="prev">
-				<slot name="prev" :index="activeSlideIndex" />
+				<slot :prev :index="activeSlideIndex" name="prev" />
 			</span>
 			<span @click="next">
-				<slot name="next" :index="activeSlideIndex" />
+				<slot :next :index="activeSlideIndex" name="next" />
 			</span>
 		</div>
 	</div>
@@ -189,99 +172,99 @@ onUnmounted(() => {
 
 <style scoped>
 .blocker {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 100;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 100;
 }
 
 .bgl-slider {
-  display: grid;
-  position: relative;
-  scroll-behavior: smooth;
-  grid-auto-flow: column;
-  grid-auto-columns: 100%;
-  scroll-snap-type: x mandatory;
-  overflow-x: hidden;
+	display: grid;
+	position: relative;
+	scroll-behavior: smooth;
+	grid-auto-flow: column;
+	grid-auto-columns: 100%;
+	scroll-snap-type: x mandatory;
+	overflow-x: hidden;
 }
 
 .autoHeight {
-  transition: height ease 0.7s;
+	transition: height ease 0.7s;
 }
 
 .bgl-slider.allowScroll {
-  overflow-x: scroll;
+	overflow-x: scroll;
 }
 
 .bgl-slider.slides-6 {
-  grid-auto-columns: 15.9%;
-  gap: 1%;
+	grid-auto-columns: 15.9%;
+	gap: 1%;
 }
 
 .bgl-slider.slides-5 {
-  grid-auto-columns: 19.3%;
-  gap: 1%;
+	grid-auto-columns: 19.3%;
+	gap: 1%;
 }
 
 .bgl-slider.slides-4 {
-  grid-auto-columns: 25%;
-  gap: 1%;
- }
+	grid-auto-columns: 24.3%;
+	gap: 1%;
+}
 
 .bgl-slider.slides-3 {
-  grid-auto-columns: 33%;
-  gap: 1%;
+	grid-auto-columns: 33%;
+	gap: 1%;
 }
 
 .bgl-slider.slides-2 {
-  grid-auto-columns: 50%;
-  gap: 1%;
+	grid-auto-columns: 50%;
+	gap: 1%;
 }
 
 .bgl-slider.slides-1 {
-  grid-auto-columns: 100%;
+	grid-auto-columns: 100%;
 }
 
 .bgl-slider::-webkit-scrollbar {
-  display: none;
+	display: none;
 }
 
 .bgl-slider * {
-  scroll-snap-align: center;
+	scroll-snap-align: start;
 }
 
 .dragging.bgl-slider {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-  scroll-snap-type: unset;
+	cursor: grabbing;
+	cursor: -webkit-grabbing;
+	scroll-snap-type: unset;
 }
 
 .clicking.bgl-slider {
-  scroll-behavior: unset;
+	scroll-behavior: unset;
 }
 
 .dragging.bgl-slider * {
-  scroll-snap-align: unset;
-  user-select: none;
+	scroll-snap-align: unset;
+	user-select: none;
 }
 
 @media screen and (max-width: 1280px) {
-  .bgl-slider.slides-4 {
-    grid-auto-columns: 33%;
-  }
+	.bgl-slider.slides-4 {
+		grid-auto-columns: 33%;
+	}
 }
 
 @media screen and (max-width: 991px) {
-  .bgl-slider.slides-4 {
-    grid-auto-columns: 50%;
-  }
+	.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-4 {
+		grid-auto-columns: 100%;
+	}
 }
 </style>

package/src/components/ListItem.vue

@@ -14,7 +14,7 @@ defineProps<{
 	<component :is="to ? 'RouterLink' : 'div'" :to="to" class="flex list-item gap-1">
 		<Avatar v-if="src || showAvatar" style="flex-basis: 1;" :name="title" :src="src" :size="40" />
 		<div>
-			<p class="no-margin ellipsis line-height-14">
+			<p class="no-margin ellipsis line-height-14 pb-025">
 				{{ title }}
 				<slot />
 			</p>

package/src/components/ListView.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
-	<div class="list-wrap bgl_card thin grid overflow-hidden h-100 p-0">
+	<div class="list-wrap bgl_card thin grid overflow-hidden h-100 pt-0 pb-05 px-0">
 		<div class="p-1">
 			<slot name="header" />
 		</div>

package/src/components/TableSchema.vue

@@ -96,7 +96,7 @@ const computedData = $computed(() => {
 	return dta
 })
 
-function selectAll(event: PointerEvent) {
+function _unused_SelectAll(event: PointerEvent) {
 	const value = (event.target as HTMLInputElement).checked
 	if (!value) {
 		selected = []
@@ -229,7 +229,7 @@ th {
 	top: 0;
 	z-index: 2;
 	background: var(--bgl-white);
-	height: 50px;
+	/* height: 50px; */
 	vertical-align: bottom;
 }
 .row.first-row input[type=checkbox]{
@@ -252,7 +252,7 @@ th {
 
 .col {
 	white-space: nowrap;
-	padding: 0.75rem 0.5rem;
+	padding: 0.75rem 1rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 	align-items: center;

package/src/styles/appearance.css

@@ -431,6 +431,39 @@
     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
 }
 
+.border-bottom {
+    border-bottom: 1px solid var(--border-color)
+}
+
+.border-top {
+    border-top: 1px solid var(--border-color)
+}
+
+.border-start {
+    border-inline-start: 1px solid var(--border-color)
+}
+
+.border-end {
+    border-inline-end: 1px solid var(--border-color)
+}
+
+.border-inner-bottom>* {
+    border-bottom: 1px solid var(--border-color)
+}
+
+.border-inner-top>* {
+    border-top: 1px solid var(--border-color)
+}
+
+.border-inner-start>* {
+    border-inline-start: 1px solid var(--border-color)
+}
+
+.border-inner-end>* {
+    border-inline-end: 1px solid var(--border-color)
+}
+
+
 
 @media screen and (max-width: 910px) {
     .m_opacity-0 {
@@ -862,4 +895,37 @@
         box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
     }
 
+    .m_border-bottom {
+        border-bottom: 1px solid var(--border-color)
+    }
+
+    .m_border-top {
+        border-top: 1px solid var(--border-color)
+    }
+
+    .m_border-start {
+        border-inline-start: 1px solid var(--border-color)
+    }
+
+    .m_border-end {
+        border-inline-end: 1px solid var(--border-color)
+    }
+
+    .m_border-inner-bottom>* {
+        border-bottom: 1px solid var(--border-color)
+    }
+
+    .m_border-inner-top>* {
+        border-top: 1px solid var(--border-color)
+    }
+
+    .m_border-inner-start>* {
+        border-inline-start: 1px solid var(--border-color)
+    }
+
+    .m_border-inner-end>* {
+        border-inline-end: 1px solid var(--border-color)
+    }
+
+
 }

package/src/styles/scrollbar.css

@@ -7,7 +7,7 @@
 
 ::-webkit-scrollbar-thumb {
     background-color: var(--bgl-gray);
-    border-radius: 12px;
+    border-radius: 1rem;
 }
 
 ::-webkit-scrollbar-corner {

package/src/utils/BagelFormUtils.ts

@@ -15,6 +15,8 @@ interface InputOptions {
 	helptext?: string
 }
 
+type DateOptions = InputOptions
+
 interface TextInputOptions extends InputOptions {
 	type?: 'text' | 'tel' | 'email'
 	pattern?: string
@@ -61,6 +63,7 @@ export function txtField(
 		required: options?.required,
 		id,
 		label,
+		disabled: options?.disabled,
 		placeholder: options?.placeholder,
 		defaultValue: options?.defaultValue,
 		attrs: {
@@ -108,6 +111,25 @@ export function checkField(
 	}
 }
 
+export function dateField(
+	id: string,
+	label?: string,
+	options?: DateOptions,
+): Field {
+	return {
+		$el: 'date',
+		class: options?.class,
+		required: options?.required,
+		id,
+		disabled: options?.disabled,
+		label,
+		defaultValue: options?.defaultValue,
+		attrs: {
+			disabled: options?.disabled,
+		},
+	}
+}
+
 export function numField(
 	id: string,
 	label?: string,
@@ -120,6 +142,7 @@ export function numField(
 		defaultValue: options?.defaultValue,
 		id,
 		label,
+		disabled: options?.disabled,
 		placeholder: options?.placeholder,
 		helptext: options?.helptext,
 		attrs: {