@bagelink/vue 0.0.302 → 0.0.304

package/src/components/Carousel.vue

@@ -0,0 +1,258 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import { onMounted, watch, onUnmounted } from 'vue';
+
+const bglSlider = $ref<HTMLElement>();
+let activeSlideIndex = $ref(0);
+let isDragging = $ref(false);
+let startX = $ref(0);
+let scrollLeft = $ref(0);
+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,
+	},
+});
+
+const disableDrag = () => {
+	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());
+	}
+};
+
+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);
+
+	yHeight = `${height}px`;
+};
+
+const goToSlide = (index: number) => {
+	if (!bglSlider || index < 0 || index > bglSlider.children.length - 1) return;
+
+	const slider = bglSlider;
+	const scrollX = slider.offsetWidth * index;
+	slider.scrollTo({ left: scrollX, behavior: 'smooth' });
+
+	activeSlideIndex = index;
+	evalHeight();
+};
+
+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 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);
+};
+
+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;
+};
+
+// 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);
+};
+
+// 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);
+};
+
+// 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);
+};
+
+const evalWidth = () => {
+	if (!bglSlider) return;
+	goToSlide(activeSlideIndex);
+};
+
+onMounted(() => {
+	window.addEventListener('resize', evalWidth);
+	evalHeight();
+	disableDrag();
+});
+
+onUnmounted(() => window.removeEventListener('resize', evalWidth));
+</script>
+
+<style scoped>
+.blocker {
+	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;
+}
+
+.autoHeight {
+	transition: height ease 0.7s;
+}
+
+.bgl-slider.allowScroll {
+	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%;
+	gap: 1%;
+}
+
+.bgl-slider.slides-2 {
+	grid-auto-columns: 50%;
+	gap: 1%;
+}
+
+.bgl-slider.slides-1 {
+	grid-auto-columns: 100%;
+}
+
+.bgl-slider::-webkit-scrollbar {
+	display: none;
+}
+
+.bgl-slider * {
+	scroll-snap-align: start;
+}
+
+.dragging.bgl-slider {
+	cursor: grabbing;
+	cursor: -webkit-grabbing;
+	scroll-snap-type: unset;
+}
+
+.clicking.bgl-slider {
+	scroll-behavior: unset;
+}
+
+.dragging.bgl-slider * {
+	scroll-snap-align: unset;
+	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%;
+	}
+}
+</style>

package/src/components/ListItem.vue

@@ -6,7 +6,7 @@
 				{{ title }}
 				<slot />
 			</p>
-			<p class="txt14 no-margin txtgray ellipsis">
+			<p class="txt14 no-margin txt-gray ellipsis">
 				{{ subtitle }}
 				<slot name="subtitle" />
 			</p>

package/src/components/ListView.vue

@@ -1,50 +1,59 @@
 <template>
-	<div class="card list-view grid thin">
-		<div class="list-header flex gap-3 align-items-top">
-			<div
-				v-if="enableSearch"
-				class="bagel-input search-wrap"
-			>
-				<input
-					:placeholder="searchPlaceholder"
-					v-model="searchTerm"
-					@input="search()"
-				>
-				<MaterialIcon
-					class="txtgray"
-					icon="search"
-				/>
-			</div>
-			<Btn
-				v-if="enableAdd"
-				icon="add"
-				@click="emit('add')"
-			/>
-		</div>
-		<div class="list-content grid auto-flow-rows align-items-start">
+	<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 />
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { MaterialIcon, Btn, debounce } from '@bagelink/vue';
-
-defineProps<{
-	enableAdd?: boolean;
-	enableSearch?: boolean;
-	searchPlaceholder: string;
-}>();
-const emit = defineEmits(['search', 'add', 'debounce']);
-const searchTerm = $ref('');
-const search = () => {
-	emit('search', searchTerm);
-	debounce(() => emit('debounce', searchTerm));
-};
+import Card from './Card.vue';
+
 </script>
 
 <style>
-.search-wrap {
-	flex-grow: 1;
+.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;
+}
+
+.list-item::after {
+    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);
+}
+
+.list-item:active {
+    -webkit-filter: var(--bgl-hover-filter);
+    filter: var(--bgl-hover-filter);
+}
+@media screen and (max-width: 910px) {
+
+.list-item {
+        padding: 0.5rem;
+    }
 }
 </style>

package/src/components/Modal.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch } from 'vue';
 import {
   type BtnOptions, Btn, useEscape, Title, Card,
 } from '@bagelink/vue';
@@ -52,10 +52,46 @@ const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e,
 
 function openModal() {
   setTimeout(() => isVisible = true, 1);
-  document.addEventListener('keydown', escapeKeyClose);
 }
 
+onMounted(() => document.addEventListener('keydown', escapeKeyClose));
+
 onUnmounted(() => {
   document.removeEventListener('keydown', escapeKeyClose);
 });
 </script>
+
+<style>
+.modal-title {
+  text-align: center;
+  font-weight: 600;
+  font-size: 20px;
+  margin-top: 0.5rem;
+  margin-bottom: 0 !important;
+  width: 100%;
+  -webkit-padding-end: 40px;
+  padding-inline-end: 40px;
+  line-height: 2;
+  display: -webkit-box;
+  max-width: 100%;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.modal-footer {
+  gap: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-footer>div {
+  gap: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0;
+}
+</style>

package/src/components/ModalForm.vue

@@ -1,6 +1,8 @@
 <template>
-	<Modal @onUpdate:isModalVisible="props['onUpdate:isModalVisible']" :side="side" ref="modal" :dismissable="dismissable"
-		:title="title">
+	<Modal
+		@onUpdate:isModalVisible="props['onUpdate:isModalVisible']" :side="side" ref="modal" :dismissable="dismissable"
+		:title="title"
+	>
 		<BagelForm @submit="runSubmit" ref="form" v-model="formData" :schema="computedFormSchema" />
 		<template #footer v-if="onDelete || onSubmit">
 			<div>

package/src/components/NavBar.vue

@@ -1,84 +1,59 @@
 <template>
-	<div :class="{ open: isOpen, closed: !isOpen }">
-		<slot name="top" />
-		<div
-			class="nav-expend"
-			@click="isOpen = !isOpen"
-			@keypress.enter="isOpen = !isOpen"
-			role="button"
-			aria-label="Toggle Navigation"
-			tabindex="0"
-		>
-			<MaterialIcon icon="chevron_right" class="top-arrow" />
-		</div>
-
-		<div class="full-nav">
-			<div class="nav-scroll">
-				<div class="nav-links-wrapper">
-					<component
-						:is="link.to?'router-link':'div'"
-						v-for="link in links"
-						class="nav-button"
-						:to="link.to"
-						:key="link.label"
-						@click="link.onClick?.()"
-					>
-						<MaterialIcon :icon="link.materialIcon" />
-						<div class="tooltip">
-							{{ link.label }}
-						</div>
-					</component>
-				</div>
-			</div>
-
-			<div class="bot-buttons-wrapper">
-				<component
-					:is="link.to?'router-link':'div'"
-					v-for="link in footerLinks"
-					class="nav-button"
-					:to="link.to"
-					@click="link.onClick?.()"
-					:key="link.label"
-				>
-					<MaterialIcon :icon="link.materialIcon" />
-					<div class="tooltip">
-						{{ link.label }}
-					</div>
-				</component>
-				<slot name="floor" />
-			</div>
-		</div>
-	</div>
+  <div :class="{ open: isOpen, closed: !isOpen }">
+    <slot name="top" />
+    <div class="nav-expend" @click="isOpen = !isOpen" @keypress.enter="isOpen = !isOpen" role="button"
+      aria-label="Toggle Navigation" tabindex="0">
+      <MaterialIcon icon="chevron_right" class="top-arrow" />
+    </div>
+
+    <div class="full-nav">
+      <div class="nav-scroll">
+        <div class="nav-links-wrapper">
+          <component :is="link.to?'router-link':'div'" v-for="link in links" class="nav-button" :to="link.to"
+            :key="link.label" @click="link.onClick?.()">
+            <MaterialIcon :icon="link.materialIcon" />
+            <div class="tooltip">
+              {{ link.label }}
+            </div>
+          </component>
+        </div>
+      </div>
+
+      <div class="bot-buttons-wrapper">
+        <component :is="link.to?'router-link':'div'" v-for="link in footerLinks" class="nav-button" :to="link.to"
+          @click="link.onClick?.()" :key="link.label">
+          <MaterialIcon :icon="link.materialIcon" />
+          <div class="tooltip">
+            {{ link.label }}
+          </div>
+        </component>
+        <slot name="floor" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import type { MaterialIcons } from '@bagelink/vue';
+import type { MaterialIcons, NavLink } from '@bagelink/vue';
 import { MaterialIcon } from '@bagelink/vue';
 
 const isOpen = $ref(true);
-export type NavLink = {
-  label: string;
-  to?: string;
-  materialIcon: MaterialIcons;
-  localized?: string;
-  onClick?: () => void;
-}
 
 withDefaults(
-	defineProps<{
+  defineProps<{
     footerLinks?: NavLink[];
-    links?:NavLink[];
+    links?: NavLink[];
     homeIcon?: MaterialIcons;
     homeLabel?: string;
     homeTo?: string;
   }>(),
-	{
-		homeIcon: 'home',
-		homeLabel: 'Home',
-		homeTo: '/',
-		links: () => [],
-		footerLinks: () => [],
-	},
+  {
+    homeIcon: 'home',
+    homeLabel: 'Home',
+    homeTo: '/',
+    links: () => [],
+    footerLinks: () => [],
+  },
 );
 </script>
 

package/src/components/PageTitle.vue

@@ -1,17 +1,39 @@
 <template>
-	<div class="page-top">
-		<h1 class="top-title">
-			<slot />
-			{{ value }}
-		</h1>
-	</div>
+  <div class="page-top">
+    <h1 class="top-title">
+      <slot /> {{ value }}
+    </h1>
+  </div>
 </template>
-
 <script lang="ts" setup>
 defineProps({
-	value: {
-		type: String,
-		default: '',
-	},
+  value: {
+    type: String,
+    default: '',
+  }
+
+  ,
 });
 </script>
+<style>
+.top-title {
+  font-weight: 600;
+  font-size: 20px;
+}
+
+.page-top {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+@media screen and (max-width: 910px) {
+  .top-title {
+    font-size: 1.25em;
+    margin-bottom: 1rem;
+    font-weight: 400;
+    -webkit-margin-start: 0.5rem;
+    margin-inline-start: 0.5rem;
+  }
+}
+</style>

package/src/components/TabbedLayout.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="h-100 grid list-view gap-3" :class="{'side-tabs': sideTabs}">
-		<div class="card tabs-top">
+		<div class="bgl_card tabs-top">
 			<slot name="top-section" />
 			<div class="tabs grid auto-flow-columns fit-content">
 				<div