@bagelink/vue 0.0.511 → 0.0.518

package/package.json

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

package/src/components/Btn.vue

@@ -19,6 +19,7 @@ const props = withDefaults(
 		'role'?: string
 		'value'?: string
 		'to'?: string
+		'href'?: string
 		'round'?: boolean
 		'is'?: string
 		'onClick'?: (e: MouseEvent) => void
@@ -35,6 +36,12 @@ const props = withDefaults(
 	},
 )
 
+const isComponent = $computed(() => {
+	if (props.to) return 'router-link'
+	if (props.href) return 'a'
+	return props.is
+})
+
 const slots = useSlots()
 
 const computedTheme = $computed(
@@ -84,7 +91,7 @@ const computedBackgroundColor = $computed(
 
 <template>
 	<component
-		:is="to ? 'router-link' : is" :to="to" :type="type" :role="role" :disabled="disabled" :class="{
+		:is="isComponent" :href="href" :to="to" :type="type" :role="role" :disabled="disabled" :class="{
 			'bgl_btn-icon': icon && !slots.default && !value,
 			'bgl_btn': !icon || slots.default || value,
 			thin,

package/src/components/Carousel.vue

@@ -2,78 +2,70 @@
 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,
-	},
+	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 },
 })
+
 const emit = defineEmits(['update:index'])
-const bglSlider = $ref<HTMLElement>()
+
+const bglSlider = $ref<HTMLElement | null>(null)
 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', (e: any) => e.preventDefault())
+		e.addEventListener('click', (el: any) => el.preventDefault())
 	}
 }
 
-let yHeight = $ref('auto')
 function evalHeight() {
 	if (!props.autoHeight || !bglSlider) return
-	const slidChildren = bglSlider.children[activeSlideIndex].children
-	const height = Array.from(slidChildren)
+	const height = Array.from(bglSlider.children[activeSlideIndex].children)
 		.map(el => el.clientHeight)
 		.reduce((a, b) => a + b, 0)
-
 	yHeight = `${height}px`
 }
 
-function goToSlide(index: number) {
-	if (!bglSlider || index < 0 || index > bglSlider.children.length - 1) return
-	const slider = bglSlider
+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'
+		}
+	}
+
 	const isRTL = getComputedStyle(bglSlider).direction === 'rtl'
-	const scrollX = slider.offsetWidth * index * (isRTL ? -1 : 1)
-	slider.scrollTo({ left: scrollX, behavior: 'smooth' })
+	const scrollX = bglSlider.offsetWidth * index * (isRTL ? -1 : 1)
+	bglSlider.scrollTo({ left: scrollX, behavior })
 	activeSlideIndex = index
 	evalHeight()
 }
 
-watch(() => props.index, goToSlide)
+watch(() => props.index, (index) => { goToSlide(index) })
 
-watch(
-	() => activeSlideIndex,
-	(index) => { emit('update:index', index) }
-)
+watch(() => activeSlideIndex, (index) => { emit('update:index', index) })
 
 function scrollEnd() {
-	const slider = bglSlider
-	if (!slider || props.items !== 1) return
-	const nextSlide = Math.round(slider.scrollLeft / slider.offsetWidth)
+	if (props.items !== 1 || !bglSlider) return
+	const nextSlide = Math.round(bglSlider.scrollLeft / bglSlider.offsetWidth)
 	goToSlide(nextSlide)
 }
 
@@ -82,11 +74,10 @@ function stopDragging(e: MouseEvent) {
 	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)
+	activeSlideIndex = isDragForward
+		? Math.ceil(slider.scrollLeft / slider.offsetWidth)
+		: 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)
@@ -96,11 +87,9 @@ function stopDragging(e: MouseEvent) {
 function move(e: MouseEvent) {
 	if (!bglSlider) return
 	const x = e.pageX - bglSlider.offsetLeft
-	const walk = x - startX
-	if (walk > 20 || walk < -20) isDragging = true
+	if (Math.abs(x - startX) > 20) isDragging = true
 	if (!isDragging) return
-	const scroll = x - startX
-	bglSlider.scrollLeft = scrollLeft - scroll
+	bglSlider.scrollLeft = scrollLeft - (x - startX)
 }
 
 function startDragging(e: MouseEvent) {
@@ -114,57 +103,85 @@ function startDragging(e: MouseEvent) {
 }
 
 function next() {
-	if (!bglSlider) return
-	const slideCount = bglSlider.children.length
-	const isLastSlide = activeSlideIndex >= slideCount - 1
-	if (isLastSlide) goToSlide(0)
-	else goToSlide(activeSlideIndex + 1)
+	if (bglSlider) {
+		goToSlide(activeSlideIndex + 1)
+	}
 }
 
 function prev() {
-	if (!bglSlider) return
-	const slideCount = bglSlider.children.length
-	if (activeSlideIndex === 0) goToSlide(slideCount - 1)
-	else goToSlide(activeSlideIndex - 1)
+	if (bglSlider) {
+		goToSlide(activeSlideIndex - 1)
+	}
 }
 
 function evalWidth() {
-	if (!bglSlider) return
-	goToSlide(activeSlideIndex)
+	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)
+	})
 }
 
 onMounted(() => {
+	cloneSlides()
 	window.addEventListener('resize', evalWidth)
 	evalHeight()
 	disableDrag()
+	startAutoplay()
 })
 
-onUnmounted(() => { window.removeEventListener('resize', evalWidth) })
+onUnmounted(() => {
+	window.removeEventListener('resize', evalWidth)
+	stopAutoplay()
+})
 </script>
 
 <template>
-	<div class="BglCarousel" :style="{ height: yHeight }" :class="{ autoHeight }">
+	<div class="BglCarousel" :style="{ height: yHeight }" :class="{ autoHeight: props.autoHeight }">
 		<div
 			ref="bglSlider"
-			:class="{
-				dragging: isDragging,
-				clicking: isPressed,
-				[`slides-${items}`]: true,
-				allowScroll,
-			}"
-			class="bgl-slider"
+			class="bgl-slider" :class="[
+				{ dragging: isDragging, clicking: isPressed, [`slides-${props.items}`]: true, allowScroll: props.allowScroll },
+			]"
 			@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 :prev :index="activeSlideIndex" name="prev" />
+				<slot name="prev" :index="activeSlideIndex" />
 			</span>
 			<span @click="next">
-				<slot :next :index="activeSlideIndex" name="next" />
+				<slot name="next" :index="activeSlideIndex" />
 			</span>
 		</div>
 	</div>
@@ -172,99 +189,99 @@ onUnmounted(() => { window.removeEventListener('resize', evalWidth) })
 
 <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: 24.3%;
-	gap: 1%;
-}
+  grid-auto-columns: 25%;
+  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: start;
+  scroll-snap-align: center;
 }
 
 .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,11 +14,11 @@ 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="txt16 no-margin ellipsis line-height-14">
+			<p class="no-margin ellipsis line-height-14">
 				{{ title }}
 				<slot />
 			</p>
-			<p class="txt14 no-margin txt-gray ellipsis">
+			<p class="txt12 no-margin txt-gray ellipsis">
 				{{ subtitle }}
 				<slot name="subtitle" />
 			</p>

package/src/components/MapEmbed.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import L from 'leaflet'
-import type { LatLngExpression, Map, Marker } from 'leaflet'
+import type { LatLngExpression, Marker } from 'leaflet'
 import 'leaflet/dist/leaflet.css'
 import { onMounted, watch } from 'vue'
 
@@ -13,7 +13,7 @@ interface MapProps {
 
 const props = defineProps<MapProps>()
 
-let map = $ref<Map>()
+let map = $ref<L.Map>()
 const markers = $ref<Marker[]>([])
 
 function initializeMap() {
@@ -32,14 +32,16 @@ function addMarker(latlng: LatLngExpression) {
 		iconUrl: `data:image/svg+xml;utf8,${encodeURIComponent(markerSVG)}`,
 		iconSize: [32, 32],
 	})
-	const marker = L.marker(latlng, { icon: customIcon }).addTo(map)
+
+	if (!map) initializeMap()
+	const marker = L.marker(latlng, { icon: customIcon }).addTo(map as L.Map)
 	markers.push(marker)
 }
 
 async function geocodeAddress(address: string) {
 	const geocodeUrl = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}`
 	const res = await fetch(geocodeUrl)
-	const data = await res.json() || []
+	const data: any[] = await res.json() || []
 	data.forEach((element) => { addMarker([element.lat, element.lon]) })
 }
 

package/src/components/Modal.vue

@@ -87,8 +87,7 @@ onUnmounted(() => {
 
 			<div v-else class="sticky bg-white z-index-999 -mt-1 -ms-1 px-025 h-30px pt-025 modal-no-title">
 				<Btn
-					class="color-black"
-					:style="{ float: side ? 'left' : 'right' }"
+					class="color-black position-start"
 					icon="close"
 					thin
 					color="white"

package/src/components/TableSchema.vue

@@ -285,7 +285,7 @@ th {
 }
 
 .rows {
-	font-size: 0.8125em;
+	font-size: 0.88em;
 }
 
 .table-list {

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
 	label?: string
 	id?: string
 	title?: string
@@ -7,18 +7,25 @@ defineProps<{
 	required?: boolean
 }>()
 
+const inputId = $ref(props.id || Math.random().toString(36).substring(7))
+
 const checked = defineModel<boolean>('modelValue', { default: false })
 </script>
 
 <template>
-	<div class="bagel-input bgl-checkbox" :title="title" :class="{ small }">
-		<div class="check-square" :class="{ checked }" @click="checked = !checked">
-			<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-				<path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
-			</svg>
-		</div>
-		<label>
-			<input :id="id" v-model="checked" :required="required" type="checkbox">
+	<div
+		class="bagel-input bgl-checkbox align-items-center ps-025"
+		:title="title"
+		:class="{ small }"
+	>
+		<input
+			:id="inputId"
+			v-model="checked"
+			:required="required"
+			type="checkbox"
+			class="me-05"
+		>
+		<label :for="inputId">
 			<slot name="label">
 				{{ label }}
 			</slot>
@@ -26,75 +33,44 @@ const checked = defineModel<boolean>('modelValue', { default: false })
 	</div>
 </template>
 
-<style>
-:root {
-  --bgl-white: #fff;
-  --input-height: 40px;
-  --input-border-radius: 7px;
-  --bgl-transition: all 200ms ease;
-  --bgl-primary: #19b8ea;
-
-}
-</style>
-
 <style scoped>
 .bgl-checkbox {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.bgl-checkbox input[type=checkbox] {
-  position: absolute;
-  opacity: 0;
-  z-index: -1;
+	flex-direction: row;
+	cursor: pointer;
 }
-
-.bgl-checkbox label {
-  padding-inline-start: 0.5rem;
-  transition: var(--bgl-transition);
-  cursor: pointer;
-  user-select: none;
-  font-size: var(--input-font-size);
+.bgl-checkbox input[type='checkbox'] {
+	accent-color: var(--bgl-primary);
+	height: calc(var(--input-height) / 2.75);
+	width: calc(var(--input-height) / 2.75);
+	min-width: 0;
 }
-
-.bgl-checkbox:hover {
-  filter: brightness(95%);
+.bgl-checkbox input[type='checkbox']::before {
+	content: '';
+	height: calc(var(--input-height) / 2.75);
+	width: calc(var(--input-height) / 2.75);
+	background: var(--bgl-primary);
+	border-radius: 100%;
+	opacity: 0;
+	transition: all 200ms ease;
+	position: absolute;
 }
-
-.bgl-checkbox:active {
-  filter: var(--bgl-active-filter);
+.bgl-checkbox input[type='checkbox']:hover::before {
+	opacity: 0.2;
+	transform: scale(2);
 }
-
-.bgl-checkbox .check-square {
-  width: calc(var(--input-height) / 2.5);
-  height: calc(var(--input-height) / 2.5);
-  background: var(--bgl-white);
-  border-radius: calc(var(--input-border-radius) / 2);
-  border: var(--bgl-primary) 1px solid;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.bgl-checkbox label {
+	cursor: pointer;
+	user-select: none;
+	font-size: var(--input-font-size);
+	transition: var(--bgl-transition-400);
 }
-
-.check-square.checked {
-  background: var(--bgl-primary);
+.bgl-checkbox:hover label {
+  color: var(--bgl-primary) !important;
 }
-
-.bgl-checkbox svg {
-  width: calc(var(--input-height) / 2.5);
-  height: calc(var(--input-height) / 2.5);
-  position: absolute;
-  z-index: 2;
-  fill: var(--bgl-white);
-  pointer-events: none;
-  transform: scale(0);
-  transition: var(--bgl-transition);
+.bgl-checkbox input:checked + label{
+	color: var(--bgl-primary) !important;
 }
-
-.check-square.checked svg {
-  transform: scale(1);
+.bagel-input:focus-within.bgl-checkbox:not(:checked) label {
+    color: var(--label-color) !important;
 }
 </style>

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

@@ -12,6 +12,10 @@ const props = withDefaults(
 		modelValue?: string | Date
 		defaultValue?: string | Date
 		extraProps?: VueDatePickerProps
+		allowedDates?: string[] | Date[]
+		timePickerInline?: boolean
+		minutesIncrement?: string | number
+		minutesGridIncrement?: string | number
 	}>(),
 	{
 		enableTime: false,
@@ -59,7 +63,12 @@ onMounted(() => {
 			v-model="date"
 			:auto-apply="true"
 			:enable-time-picker="enableTime"
+			:allowed-dates="allowedDates"
 			v-bind="extraProps"
+			:time-picker-inline="timePickerInline"
+			:minutes-increment="minutesIncrement"
+			:minutes-grid-increment="minutesGridIncrement"
+			:start-time="{ hours: 8, minutes: 0 }"
 		/>
 	</div>
 </template>