@bagelink/vue 0.0.316 → 0.0.322

package/src/components/Carousel.vue

@@ -1,19 +1,19 @@
 <template>
-	<div class="BglCarousel" :style="{ height: yHeight }" :class="{ autoHeight }">
-		<div :class="{ dragging: isDragging, clicking: isPressed, [`slides-${items}`]: true, allowScroll }"
-			@scrollend="scrollEnd" @mousedown="startDragging" class="bgl-slider" ref="bglSlider">
-			<div v-if="isDragging" class="blocker" />
-			<slot />
-		</div>
-		<div class="Handlers">
-			<span @click="prev">
-				<slot name="prev" />
-			</span>
-			<span @click="next">
-				<slot name="next" />
-			</span>
-		</div>
-	</div>
+  <div class="BglCarousel" :style="{ height: yHeight }" :class="{ autoHeight }">
+    <div :class="{ dragging: isDragging, clicking: isPressed, [`slides-${items}`]: true, allowScroll }"
+      @scrollend="scrollEnd" @mousedown="startDragging" class="bgl-slider" ref="bglSlider">
+      <div v-if="isDragging" class="blocker" />
+      <slot />
+    </div>
+    <div class="Handlers">
+      <span @click="prev">
+        <slot name="prev" />
+      </span>
+      <span @click="next">
+        <slot name="next" />
+      </span>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -29,55 +29,55 @@ let isPressed = $ref(false);
 const emit = defineEmits(['update:index']);
 
 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,
+  },
 });
 
 const 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());
-	}
+  for (const e of bglSlider?.children as any[] | undefined || []) {
+    e.setAttribute('draggable', 'false');
+    e.addEventListener('click', (e: any) => e.preventDefault());
+  }
 };
 
 let yHeight = $ref('auto');
 const evalHeight = () => {
-	if (!props.autoHeight || !bglSlider) return;
-	const slidChildren = bglSlider.children[activeSlideIndex].children;
-	const height = Array.from(slidChildren).map((el) => el.clientHeight).reduce((a, b) => a + b, 0);
+  if (!props.autoHeight || !bglSlider) return;
+  const slidChildren = bglSlider.children[activeSlideIndex].children;
+  const height = Array.from(slidChildren).map((el) => el.clientHeight).reduce((a, b) => a + b, 0);
 
-	yHeight = `${height}px`;
+  yHeight = `${height}px`;
 };
 
 const goToSlide = (index: number) => {
-	if (!bglSlider || index < 0 || index > bglSlider.children.length - 1) return;
+  if (!bglSlider || index < 0 || index > bglSlider.children.length - 1) return;
 
-	const slider = bglSlider;
-	const scrollX = slider.offsetWidth * index;
-	slider.scrollTo({ left: scrollX, behavior: 'smooth' });
+  const slider = bglSlider;
+  const scrollX = slider.offsetWidth * index;
+  slider.scrollTo({ left: scrollX, behavior: 'smooth' });
 
-	activeSlideIndex = index;
-	evalHeight();
+  activeSlideIndex = index;
+  evalHeight();
 };
 
 watch(() => props.index, goToSlide);
@@ -85,74 +85,74 @@ watch(() => props.index, goToSlide);
 watch(activeSlideIndex, (index) => emit('update:index', index));
 
 const scrollEnd = () => {
-	const slider = bglSlider;
-	if (!slider || props.items !== 1) return;
-	const nextSlide = Math.round(slider.scrollLeft / slider.offsetWidth);
-	goToSlide(nextSlide);
+  const slider = bglSlider;
+  if (!slider || props.items !== 1) return;
+  const nextSlide = Math.round(slider.scrollLeft / slider.offsetWidth);
+  goToSlide(nextSlide);
 };
 
 const 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);
-	setTimeout(() => isDragging = false, 100);
+  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);
+  setTimeout(() => isDragging = false, 100);
 };
 
 const move = (e: MouseEvent) => {
-	if (!bglSlider) return;
-	const x = e.pageX - bglSlider.offsetLeft;
-	const walk = x - startX;
-	if (walk > 20 || walk < -20) isDragging = true;
-	if (!isDragging) return;
-	const scroll = x - startX;
-	bglSlider.scrollLeft = scrollLeft - scroll;
+  if (!bglSlider) return;
+  const x = e.pageX - bglSlider.offsetLeft;
+  const walk = x - startX;
+  if (walk > 20 || walk < -20) isDragging = true;
+  if (!isDragging) return;
+  const scroll = x - startX;
+  bglSlider.scrollLeft = scrollLeft - scroll;
 };
 
 // eslint-disable-next-line no-unused-vars
 const startDragging = (e: MouseEvent) => {
-	if (e.button !== 0 || !props.freeDrag || !bglSlider) return;
-	startX = e.pageX - bglSlider.offsetLeft;
-	scrollLeft = bglSlider.scrollLeft;
-	isPressed = true;
-	document.addEventListener('mousemove', move);
-	document.addEventListener('mouseup', stopDragging);
-	document.addEventListener('dragend', stopDragging);
+  if (e.button !== 0 || !props.freeDrag || !bglSlider) return;
+  startX = e.pageX - bglSlider.offsetLeft;
+  scrollLeft = bglSlider.scrollLeft;
+  isPressed = true;
+  document.addEventListener('mousemove', move);
+  document.addEventListener('mouseup', stopDragging);
+  document.addEventListener('dragend', stopDragging);
 };
 
 // eslint-disable-next-line no-unused-vars
 const next = () => {
-	if (!bglSlider) return;
-	const slideCount = bglSlider.children.length;
-	const isLastSlide = activeSlideIndex >= slideCount - 1;
-	if (isLastSlide) goToSlide(0);
-	else goToSlide(activeSlideIndex + 1);
+  if (!bglSlider) return;
+  const slideCount = bglSlider.children.length;
+  const isLastSlide = activeSlideIndex >= slideCount - 1;
+  if (isLastSlide) goToSlide(0);
+  else goToSlide(activeSlideIndex + 1);
 };
 
 // eslint-disable-next-line no-unused-vars
 const prev = () => {
-	if (!bglSlider) return;
-	const slideCount = bglSlider.children.length;
-	if (activeSlideIndex === 0) goToSlide(slideCount - 1);
-	else goToSlide(activeSlideIndex - 1);
+  if (!bglSlider) return;
+  const slideCount = bglSlider.children.length;
+  if (activeSlideIndex === 0) goToSlide(slideCount - 1);
+  else goToSlide(activeSlideIndex - 1);
 };
 
 const evalWidth = () => {
-	if (!bglSlider) return;
-	goToSlide(activeSlideIndex);
+  if (!bglSlider) return;
+  goToSlide(activeSlideIndex);
 };
 
 onMounted(() => {
-	window.addEventListener('resize', evalWidth);
-	evalHeight();
-	disableDrag();
+  window.addEventListener('resize', evalWidth);
+  evalHeight();
+  disableDrag();
 });
 
 onUnmounted(() => window.removeEventListener('resize', evalWidth));
@@ -160,99 +160,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: 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: start;
+  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/ComboBox.vue

@@ -1,26 +1,33 @@
 <template>
-  <Dropdown placement="auto-start" class="bagel-input combobox">
-    <button type="button" class="combobox-btn" @click="toggle">
-      {{ valueToLabel(selectedItem) || placeholder || 'Select' }}
-      <MaterialIcon v-bind="{ 'icon': open ? 'unfold_less' : 'unfold_more' }" />
-    </button>
-    <input style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1;" v-if="required"
-      v-model="selectedItem" required>
-    <template #popper="{ hide }">
-      <Card thin class="combobox-options">
-        <TextInput v-if="searchable" ref="searchInput" dense :placeholder="'Search'" icon="search" v-model="search" />
-        <div class="combobox-option" v-for="(option, i) in filteredOptions" :key="`${option}${i}`" @click="() => {
-          select(option)
-          hide();
-        }" :class="{ selected: option === selectedItem }">
-          <span>
-            {{ label(option) }}
-          </span>
-          <Icon v-if="isSelected(option)" icon="check" />
-        </div>
-      </Card>
-    </template>
-  </Dropdown>
+	<Dropdown placement="bottom-start" class="bagel-input combobox">
+		<label>
+			{{ label  }}
+			<button type="button" class="combobox-btn" @click="toggle">
+				{{ valueToLabel(selectedItem) || placeholder || 'Select' }}
+				<MaterialIcon v-bind="{ 'icon': open ? 'unfold_less' : 'unfold_more' }" />
+			</button>
+			<input
+				style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1;" v-if="required"
+				v-model="selectedItem" required
+			>
+		</label>
+		<template #popper="{ hide }">
+			<Card thin class="combobox-options" :style="{width: fullWidth?'100%':'auto'}">
+				<TextInput v-if="searchable" ref="searchInput" dense :placeholder="'Search'" icon="search" v-model="search" />
+				<div
+					class="combobox-option" v-for="(option, i) in filteredOptions" :key="`${option}${i}`" @click="() => {
+						select(option); hide();
+					}" :class="{ selected: option === selectedItem }"
+				>
+					<span>
+						{{ getLabel(option) }}
+					</span>
+					<Icon v-if="isSelected(option)" icon="check" />
+				</div>
+				<slot name="last" />
+			</Card>
+		</template>
+	</Dropdown>
 </template>
 
 <script lang="ts" setup>
@@ -28,7 +35,7 @@ import { watch } from 'vue';
 import { Dropdown } from 'floating-vue';
 import 'floating-vue/style.css';
 import {
-  TextInput, Card, Icon, MaterialIcon,
+	TextInput, Card, Icon, MaterialIcon,
 } from '@bagelink/vue';
 
 type Option = string | number | Record<string, any> | { label: string, value: string | number };
@@ -43,56 +50,58 @@ const props = defineProps<{
   modelValue?: Option;
   searchable?: boolean;
   required?: boolean;
+	label?: string;
+	fullWidth?: boolean;
 }>();
 let selectedItem = $ref<Option>();
 let search = $ref('');
 
 const toggle = () => {
-  open = !open;
-  if (!open) search = '';
-  if (open) setTimeout(() => (searchInput as any)?.$el?.querySelector('input')?.focus(), 100);
+	open = !open;
+	if (!open) search = '';
+	if (open) setTimeout(() => (searchInput as any)?.$el?.querySelector('input')?.focus(), 100);
 };
 
 const valueToLabel = (value?: Option) => {
-  if (!value) return '';
-  const option = props.options.find((option) => {
-    if (typeof option === 'string' || typeof option === 'number') return option === value;
-    return option.value === value;
-  });
-  if (!option) return value;
-  return label(option);
+	if (!value) return '';
+	const option = props.options.find((option) => {
+		if (typeof option === 'string' || typeof option === 'number') return option === value;
+		return option.value === value;
+	});
+	if (!option) return value;
+	return getLabel(option);
 };
 
 const emit = defineEmits(['update:modelValue']);
 
-const label = (option: Option) => {
-  if (typeof option === 'string') return option;
-  if (typeof option === 'number') return `${option}`;
-  return option.label;
+const getLabel = (option: Option) => {
+	if (typeof option === 'string') return option;
+	if (typeof option === 'number') return `${option}`;
+	return option.label;
 };
 
 const isSelected = (option: Option) => {
-  if (typeof option === 'string' || typeof option === 'number') return option === selectedItem;
-  return option.value === selectedItem;
+	if (typeof option === 'string' || typeof option === 'number') return option === selectedItem;
+	return option.value === selectedItem;
 };
 
 const filteredOptions = $computed(() => props.options.filter((option) => {
-  const searchTerm = new RegExp(search, 'gi');
-  if (typeof option === 'string') return option.match(searchTerm);
-  if (typeof option === 'number') return `${option}`.match(searchTerm);
-  return option.label.match(searchTerm);
+	const searchTerm = new RegExp(search, 'gi');
+	if (typeof option === 'string') return option.match(searchTerm);
+	if (typeof option === 'number') return `${option}`.match(searchTerm);
+	return option.label.match(searchTerm);
 }));
 
 const select = (option: Option) => {
-  if (typeof option === 'string') selectedItem = option;
-  else if (typeof option === 'number') selectedItem = option;
-  else selectedItem = option.value;
-  emit('update:modelValue', selectedItem);
-  open = false;
+	if (typeof option === 'string') selectedItem = option;
+	else if (typeof option === 'number') selectedItem = option;
+	else selectedItem = option.value;
+	emit('update:modelValue', selectedItem);
+	open = false;
 };
 
 watch(() => props.modelValue, (value) => {
-  if (value !== selectedItem) selectedItem = value;
+	if (value !== selectedItem) selectedItem = value;
 }, { immediate: true });
 </script>
 
@@ -122,12 +131,26 @@ watch(() => props.modelValue, (value) => {
 </style>
 
 <style>
+.bagel-input label {
+  font-size: var(--label-font-size);
+}
 .combobox-btn {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: var(--input-height);
   border-radius: var(--input-border-radius);
+  border: none;
+  background: var(--input-bg);
+  padding: 0.7rem;
+  color: var(--input-color);
+  width: 100%;
+  font-family: inherit;
+}
+
+.combobox-btn:focus {
+  outline: none;
+  box-shadow: inset 0 0 10px #00000012;
 }
 
 .v-popper__arrow-container {

package/src/components/ListView.vue

@@ -1,8 +1,9 @@
 <template>
 	<div class="list-wrap bgl_card thin grid overflow-hidden h-100 p-0">
 		<div class="p-1">
-			<slot  name="header" />
-		</div>		<div class="list-content auto-flow-rows align-items-start overflow-y h-100">
+			<slot name="header" />
+		</div>
+		<div class="list-content auto-flow-rows align-items-start overflow-y h-100">
 			<slot />
 		</div>
 	</div>
@@ -14,46 +15,46 @@ import Card from './Card.vue';
 </script>
 
 <style>
-.list-wrap{
-    grid-template-rows: auto 1fr;
+.list-wrap {
+  grid-template-rows: auto 1fr;
 }
 
 .list-item {
-    padding: 0.5rem 1rem;
-    min-height: -webkit-fit-content;
-    min-height: -moz-fit-content;
-    min-height: fit-content;
-    margin: 0.25rem 0;
-    border-radius: 10px;
-    cursor: pointer;
-    transition: var(--bgl-transition);
-    color: var(--bgl-black);
-    text-decoration: none;
-    position: relative;
+  padding: 0.5rem 1rem;
+  min-height: -webkit-fit-content;
+  min-height: -moz-fit-content;
+  min-height: fit-content;
+  margin: 0.25rem 0;
+  cursor: pointer;
+  transition: var(--bgl-transition);
+  color: var(--bgl-black);
+  text-decoration: none;
+  position: relative;
 }
 
 .list-item::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -0.15rem;
-    border-bottom: 1px solid var(--border-color);
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -0.15rem;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .list-item:hover,
 .list-item.router-link-active {
-    background-color: var(--bgl-blue-light);
+  background-color: var(--bgl-blue-light);
 }
 
 .list-item:active {
-    -webkit-filter: var(--bgl-hover-filter);
-    filter: var(--bgl-hover-filter);
+  -webkit-filter: var(--bgl-hover-filter);
+  filter: var(--bgl-hover-filter);
 }
+
 @media screen and (max-width: 910px) {
 
-.list-item {
-        padding: 0.5rem;
-    }
+  .list-item {
+    padding: 0.5rem;
+  }
 }
 </style>