@bagelink/vue 0.0.466 → 0.0.473

package/src/components/Carousel.vue

@@ -1,41 +1,5 @@
-<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 :prev :index="activeSlideIndex" name="prev" />
-			</span>
-			<span @click="next">
-				<slot :next :index="activeSlideIndex" 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']);
+import { onMounted, onUnmounted, watch } from 'vue'
 
 const props = defineProps({
 	autoHeight: {
@@ -58,122 +22,154 @@ const props = defineProps({
 		type: Number,
 		default: 0,
 	},
-});
-
-const disableDrag = () => {
+})
+const emit = defineEmits(['update:index'])
+const bglSlider = $ref<HTMLElement>()
+let activeSlideIndex = $ref(0)
+let isDragging = $ref(false)
+let startX = $ref(0)
+let scrollLeft = $ref(0)
+let isPressed = $ref(false)
+
+function disableDrag() {
 	bglSlider
 		?.querySelectorAll('img')
-		.forEach((e) => e.setAttribute('draggable', 'false'));
+		.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.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;
+let yHeight = $ref('auto')
+function 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);
+		.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;
-	const slider = bglSlider;
-	const isRTL = getComputedStyle(bglSlider).direction === 'rtl';
-	const scrollX = slider.offsetWidth * index * (isRTL ? -1 : 1);
-	slider.scrollTo({ left: scrollX, behavior: 'smooth' });
-	activeSlideIndex = index;
-	evalHeight();
-};
+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 = slider.offsetWidth * index * (isRTL ? -1 : 1)
+	slider.scrollTo({ left: scrollX, behavior: 'smooth' })
+	activeSlideIndex = index
+	evalHeight()
+}
 
-watch(() => props.index, goToSlide);
+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;
+	(index) => { emit('update:index', index) }
+)
+
+function scrollEnd() {
+	const slider = bglSlider
+	if (!slider || props.items !== 1) return
+	const nextSlide = Math.round(slider.scrollLeft / slider.offsetWidth)
+	goToSlide(nextSlide)
+}
+
+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);
-	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);
-};
+		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)
+}
+
+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 (!isDragging) return
+	const scroll = x - startX
+	bglSlider.scrollLeft = scrollLeft - scroll
+}
+
+function 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)
+}
+
+function next() {
+	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) return
+	const slideCount = bglSlider.children.length
+	if (activeSlideIndex === 0) goToSlide(slideCount - 1)
+	else goToSlide(activeSlideIndex - 1)
+}
+
+function evalWidth() {
+	if (!bglSlider) return
+	goToSlide(activeSlideIndex)
+}
 
 onMounted(() => {
-	window.addEventListener('resize', evalWidth);
-	evalHeight();
-	disableDrag();
-});
+	window.addEventListener('resize', evalWidth)
+	evalHeight()
+	disableDrag()
+})
 
-onUnmounted(() => window.removeEventListener('resize', evalWidth));
+onUnmounted(() => { window.removeEventListener('resize', evalWidth) })
 </script>
 
+<template>
+	<div class="BglCarousel" :style="{ height: yHeight }" :class="{ autoHeight }">
+		<div
+			ref="bglSlider"
+			:class="{
+				dragging: isDragging,
+				clicking: isPressed,
+				[`slides-${items}`]: true,
+				allowScroll,
+			}"
+			class="bgl-slider"
+			@scrollend="scrollEnd"
+			@mousedown="startDragging"
+		>
+			<div v-if="isDragging" class="blocker" />
+			<slot />
+		</div>
+		<div class="Handlers">
+			<span @click="prev">
+				<slot :prev :index="activeSlideIndex" name="prev" />
+			</span>
+			<span @click="next">
+				<slot :next :index="activeSlideIndex" name="next" />
+			</span>
+		</div>
+	</div>
+</template>
+
 <style scoped>
 .blocker {
 	position: fixed;

package/src/components/DataPreview.vue

@@ -1,16 +1,43 @@
+<script lang="ts" setup>
+import {
+	BglField,
+	type BglFormSchemaT,
+	Title,
+	iffer,
+	keyToLabel,
+} from '@bagelink/vue'
+
+const props = defineProps<{
+	showFields?: string[]
+	schema?: BglFormSchemaT
+	title?: string
+}>()
+
+const itemData = defineModel<Record<string, any>>('data', { default: {} })
+const computedSchema = $computed(() => {
+	console.log(itemData.value)
+	const schema = Object.keys(itemData.value)
+	if (props.showFields && props.showFields.length) {
+		return schema.filter((field: any) => props.showFields?.includes(field))
+	}
+	console.log(schema)
+	return schema
+})
+</script>
+
 <template>
 	<div v-if="data" class="data">
 		<Title v-if="title" :label="title" />
 		<template v-for="field in schema" :key="field.id">
-			<div class="data-row" v-if="iffer(field, itemData)">
+			<div v-if="iffer(field, itemData)" class="data-row">
 				<div class="key">
 					{{ field?.label || keyToLabel(field.id) }}
 				</div>
-				<BglField label="" style="width: min-content; min-width: 140px" :field="field" v-model="itemData" />
+				<BglField v-model="itemData" label="" style="width: min-content; min-width: 140px" :field="field" />
 			</div>
 		</template>
 		<div v-if="!schema?.length">
-			<div class="data-row" v-for="key in computedSchema" :key>
+			<div v-for="key in computedSchema" :key class="data-row">
 				<div class="key">
 					{{ keyToLabel(key) }}
 				</div>
@@ -23,33 +50,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import {
-	type BglFormSchemaT,
-	keyToLabel,
-	iffer,
-	Title,
-	BglField,
-} from '@bagelink/vue';
-
-const props = defineProps<{
-	showFields?: string[],
-	schema?: BglFormSchemaT,
-	title?: string,
-}>();
-
-const itemData = defineModel<Record<string, any>>('data', { default: {} });
-const computedSchema = $computed(() => {
-	console.log(itemData.value);
-	const schema = Object.keys(itemData.value);
-	if (props.showFields && props.showFields.length) {
-		return schema?.filter((field:any) => props.showFields?.includes(field));
-	}
-	console.log(schema);
-	return schema;
-});
-</script>
-
 <style scoped>
 .data {
 	border: 1.1px solid var(--border-color);

package/src/components/Flag.vue

@@ -1,37 +1,37 @@
-<template>
-	<span
-		class="fi"
-		:style="{ height, backgroundImage }"
-		:class="{ fis, circle }"
-	/>
-</template>
-
 <script lang="ts" setup>
-import { CountryCode } from 'libphonenumber-js';
+import type { CountryCode } from 'libphonenumber-js'
 
-type FlagProps = {
-	country: CountryCode;
-	size?: number | string;
-	circle?: boolean;
-	square?: boolean;
-};
-const props = defineProps<FlagProps>();
+interface FlagProps {
+	country: CountryCode
+	size?: number | string
+	circle?: boolean
+	square?: boolean
+}
+const props = defineProps<FlagProps>()
 
 const fis = $computed(() => {
-	if (props.circle || props.square) return true;
-	return false;
-});
-const height = $computed(() => `${props.size || 1}rem`);
+	if (props.circle || props.square) return true
+	return false
+})
+const height = $computed(() => `${props.size || 1}rem`)
 
 const backgroundImage = $computed(() => {
-	let country = props.country.toLowerCase();
-	if (country === 'ac') country = 'sh-ac';
-	const baseURL = 'https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/flags';
-	if (fis) return `url(${baseURL}/1x1/${country.toLowerCase()}.svg)`;
-	return `url(${baseURL}/4x3/${country.toLowerCase()}.svg)`;
-});
+	let country = props.country.toLowerCase()
+	if (country === 'ac') country = 'sh-ac'
+	const baseURL = 'https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/flags'
+	if (fis) return `url(${baseURL}/1x1/${country.toLowerCase()}.svg)`
+	return `url(${baseURL}/4x3/${country.toLowerCase()}.svg)`
+})
 </script>
 
+<template>
+	<span
+		class="fi"
+		:style="{ height, backgroundImage }"
+		:class="{ fis, circle }"
+	/>
+</template>
+
 <style scoped>
  .fi{
 	background-size:contain;

package/src/components/ListItem.vue

@@ -1,6 +1,18 @@
+<script lang="ts" setup>
+import { Avatar } from '@bagelink/vue'
+
+defineProps<{
+	src?: string
+	showAvatar?: boolean
+	to?: string
+	title?: string
+	subtitle?: string
+}>()
+</script>
+
 <template>
 	<component :is="to ? 'RouterLink' : 'div'" :to="to" class="flex list-item gap-1">
-		<Avatar style="flex-basis: 1;" :name="title" :src="src" v-if="src || showAvatar" :size="40" />
+		<Avatar v-if="src || showAvatar" style="flex-basis: 1;" :name="title" :src="src" :size="40" />
 		<div>
 			<p class="txt16 no-margin ellipsis">
 				{{ title }}
@@ -13,15 +25,3 @@
 		</div>
 	</component>
 </template>
-
-<script lang="ts" setup>
-import { Avatar } from '@bagelink/vue';
-
-defineProps<{
-	src?: string;
-	showAvatar?: boolean;
-	to?: string;
-	title?: string;
-	subtitle?: string;
-}>();
-</script>

package/src/components/ListView.vue

@@ -1,3 +1,5 @@
+<script lang="ts" setup></script>
+
 <template>
 	<div class="list-wrap bgl_card thin grid overflow-hidden h-100 p-0">
 		<div class="p-1">
@@ -9,8 +11,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup></script>
-
 <style>
 .list-wrap {
 	grid-template-rows: auto 1fr;

package/src/components/MapEmbed.vue

@@ -1,58 +1,58 @@
-<template>
-	<div class="map-test"/>
-	<div class="map" id="map" :style="{height: `${height || 400}px`}"/>
-</template>
-
 <script setup lang="ts">
-import L from 'leaflet';
-import type { LatLngExpression, Map, Marker } from 'leaflet';
-import 'leaflet/dist/leaflet.css';
-import { onMounted, watch } from 'vue';
-
-type MapProps = {
-	center?: LatLngExpression;
-	zoom?: number;
-	height?: number;
-	address?: string;
-};
+import L from 'leaflet'
+import type { LatLngExpression, Map, Marker } from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { onMounted, watch } from 'vue'
+
+interface MapProps {
+	center?: LatLngExpression
+	zoom?: number
+	height?: number
+	address?: string
+}
 
-const props = defineProps<MapProps>();
+const props = defineProps<MapProps>()
 
-let map = $ref<Map>();
-const markers = $ref<Marker[]>([]);
+let map = $ref<Map>()
+const markers = $ref<Marker[]>([])
 
 function initializeMap() {
 	map = L.map('map', {
 		center: props.center || [31.7683, 35.2137],
 		zoom: props.zoom || 13,
-	});
-	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map);
+	})
+	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map)
 }
 
-onMounted(initializeMap);
-const markerSVG = '<svg width="199" height="284" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M29.859 29.266A99 99 0 0 1 198.862 99.27c0 74.25-99 183.857-99 183.857s-99-109.607-99-183.858A99 99 0 0 1 29.86 29.266Zm70.004 118.961c25.513 0 46.195-20.683 46.195-46.196 0-25.513-20.682-46.195-46.195-46.195S53.667 76.518 53.667 102.03s20.683 46.196 46.196 46.196Z" fill="#F04033"/></svg>';
+onMounted(initializeMap)
+const markerSVG = '<svg width="199" height="284" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M29.859 29.266A99 99 0 0 1 198.862 99.27c0 74.25-99 183.857-99 183.857s-99-109.607-99-183.858A99 99 0 0 1 29.86 29.266Zm70.004 118.961c25.513 0 46.195-20.683 46.195-46.196 0-25.513-20.682-46.195-46.195-46.195S53.667 76.518 53.667 102.03s20.683 46.196 46.196 46.196Z" fill="#F04033"/></svg>'
 
 function addMarker(latlng: LatLngExpression) {
 	const customIcon = L.icon({
 		iconUrl: `data:image/svg+xml;utf8,${encodeURIComponent(markerSVG)}`,
 		iconSize: [32, 32],
-	});
-	const marker = L.marker(latlng, { icon: customIcon }).addTo(map);
-	markers.push(marker);
+	})
+	const marker = L.marker(latlng, { icon: customIcon }).addTo(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() || [];
-	data.forEach((element) => addMarker([element.lat, element.lon]));
+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() || []
+	data.forEach((element) => { addMarker([element.lat, element.lon]) })
 }
 
 watch(() => props.address, (address) => {
-	if (address) geocodeAddress(address).catch(console.error);
-}, { immediate: true });
+	if (address) geocodeAddress(address).catch(console.error)
+}, { immediate: true })
 </script>
 
+<template>
+	<div class="map-test" />
+	<div id="map" class="map" :style="{ height: `${height || 400}px` }" />
+</template>
+
   <style>
   #map {
     height: 100%;

package/src/components/MaterialIcon.vue

@@ -1,18 +1,18 @@
-<template>
-  <div class="bgl_icon-font" :style="{ fontSize: `${size}rem`, color }">
-    {{ icon || name }}
-  </div>
-</template>
-
 <script setup lang="ts">
-import type { MaterialIcons } from '@bagelink/vue';
+import type { MaterialIcons } from '@bagelink/vue'
 
 defineProps<{
-  icon?: MaterialIcons;
-  name?: MaterialIcons;
-  size?: number;
-  color?: string;
-}>();
+	icon?: MaterialIcons
+	name?: MaterialIcons
+	size?: number
+	color?: string
+}>()
 </script>
 
+<template>
+	<div class="bgl_icon-font" :style="{ fontSize: `${size}rem`, color }">
+		{{ icon || name }}
+	</div>
+</template>
+
 <style scoped></style>