@bagelink/vue 0.0.464 → 0.0.471

package/src/components/Modal.vue

@@ -1,3 +1,71 @@
+<script lang="ts" setup>
+import {
+	onMounted,
+	onUnmounted,
+	useSlots,
+	watch,
+} from 'vue'
+import {
+	Btn,
+	type BtnOptions,
+	Card,
+	Title,
+	useEscape,
+} from '@bagelink/vue'
+import '../styles/modal.css'
+
+const props = defineProps<{
+	side?: boolean
+	title?: string
+	width?: string
+	dismissable?: boolean
+	actions?: BtnOptions[]
+	visible?: boolean
+}>()
+
+const emit = defineEmits(['update:visible'])
+
+const slots = useSlots()
+
+let isVisible = $ref<boolean>(false)
+
+watch(
+	() => props.visible,
+	(val) => {
+		if (val === isVisible || val === undefined) return
+		if (val) openModal()
+		else closeModal()
+	},
+	{ immediate: true },
+)
+
+const maxWidth = $computed(() => {
+	const { width } = props
+	if (width?.match(/px|em|rem|vw|vh|%/)) return { 'max-width': width }
+	if (width?.match(/\d+/)) return { 'max-width': `${width}px` }
+	return { 'max-width': '720px' }
+})
+
+function closeModal() {
+	isVisible = false
+	setTimeout(() => { emit('update:visible', false) }, 200)
+}
+
+defineExpose({ closeModal })
+
+const escapeKeyClose = (e: KeyboardEvent) => props.dismissable && useEscape(e, () => { closeModal() })
+
+function openModal() {
+	setTimeout(() => (isVisible = true), 1)
+}
+
+onMounted(() => { document.addEventListener('keydown', escapeKeyClose) })
+
+onUnmounted(() => {
+	document.removeEventListener('keydown', escapeKeyClose)
+})
+</script>
+
 <template>
 	<div
 		class="bg-dark"
@@ -5,8 +73,8 @@
 		@click="() => (dismissable ? closeModal() : '')"
 		@keydown.esc="closeModal"
 	>
-		<Card class="modal" @click.stop :style="{ ...maxWidth }">
-			<header v-if="slots['toolbar'] || title" class="tool-bar">
+		<Card class="modal" :style="{ ...maxWidth }" @click.stop>
+			<header v-if="slots.toolbar || title" class="tool-bar">
 				<slot name="toolbar" />
 				<Btn
 					:style="{ float: side ? 'left' : 'right' }"
@@ -14,7 +82,7 @@
 					icon="close"
 					@click="closeModal"
 				/>
-				<Title class="modal-title" tag="h3" v-if="title" :label="title" />
+				<Title v-if="title" class="modal-title" tag="h3" :label="title" />
 			</header>
 
 			<div v-else class="sticky bg-white z-index-999 -mt-1 -ms-1 px-025 h-30px pt-025 modal-no-title">
@@ -28,13 +96,13 @@
 				/>
 			</div>
 			<slot />
-			<footer v-if="slots['footer'] || actions?.length" class="modal-footer mt-3">
+			<footer v-if="slots.footer || actions?.length" class="modal-footer mt-1">
 				<Btn
 					v-for="(action, i) in actions"
 					:key="i"
-					@click="closeModal"
 					color="gray"
 					v-bind="action"
+					@click="closeModal"
 				/>
 				<slot name="footer" />
 			</footer>
@@ -42,67 +110,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import {
-	onMounted, onUnmounted, watch, useSlots,
-} from 'vue';
-import {
-	type BtnOptions, Btn, useEscape, Title, Card,
-} from '@bagelink/vue';
-import '../styles/modal.css';
-
-const props = defineProps<{
-	side?: boolean;
-	title?: string;
-	width?: string;
-	dismissable?: boolean;
-	actions?: BtnOptions[];
-	visible?: boolean;
-}>();
-
-const slots = useSlots();
-
-let isVisible = $ref<boolean>(false);
-
-watch(
-	() => props.visible,
-	(val) => {
-		if (val === isVisible || val === undefined) return;
-		if (val) openModal();
-		else closeModal();
-	},
-	{ immediate: true },
-);
-
-const maxWidth = $computed(() => {
-	const { width } = props;
-	if (width?.match(/px|em|rem|vw|vh|%/)) return { 'max-width': width };
-	if (width?.match(/\d+/)) return { 'max-width': `${width}px` };
-	return { 'max-width': '720px' };
-});
-
-const emit = defineEmits(['update:visible']);
-
-const closeModal = () => {
-	isVisible = false;
-	setTimeout(() => emit('update:visible', false), 200);
-};
-
-defineExpose({ closeModal });
-
-const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e, () => closeModal());
-
-function openModal() {
-	setTimeout(() => (isVisible = true), 1);
-}
-
-onMounted(() => document.addEventListener('keydown', escapeKeyClose));
-
-onUnmounted(() => {
-	document.removeEventListener('keydown', escapeKeyClose);
-});
-</script>
-
 <style>
 .modal-title {
 	text-align: center;

package/src/components/ModalConfirm.vue

@@ -1,26 +1,26 @@
-<template>
-	<Modal width="380px" :dismissable="false" :title="title">
-		{{ message }}
-		<template #footer>
-			<Btn @click="select(true)" color="primary" value="Confirm" />
-			<Btn @click="select(false)" color="red" value="Cancel" />
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts" setup>
-import { Btn, Modal } from '@bagelink/vue';
+import { Btn, Modal } from '@bagelink/vue'
 
 const props = defineProps<{
-	title: string;
-	message: string;
-	resolve: (value: boolean) => void;
-}>();
+	title: string
+	message: string
+	resolve: (value: boolean) => void
+}>()
 
-const emit = defineEmits(['update:visible']);
+const emit = defineEmits(['update:visible'])
 
 function select(val: boolean) {
-	props.resolve(val);
-	emit('update:visible');
+	props.resolve(val)
+	emit('update:visible')
 }
 </script>
+
+<template>
+	<Modal width="380px" :dismissable="false" :title="title">
+		{{ message }}
+		<template #footer>
+			<Btn color="primary" value="Confirm" @click="select(true)" />
+			<Btn color="red" value="Cancel" @click="select(false)" />
+		</template>
+	</Modal>
+</template>

package/src/components/ModalForm.vue

@@ -1,103 +1,106 @@
-<template>
-	<Modal
-		@update:visible="($event) => emit('update:visible', $event)"
-		:side
-		ref="modal"
-		:width
-		:visible="visible"
-		:dismissable
-		:title >
-		<BagelForm
-			@submit="runSubmit"
-			ref="form"
-			v-model="formData"
-			:schema="computedFormSchema" />
-		<template #footer v-if="onDelete || onSubmit">
-			<div>
-				<Btn thin flat value="Cancel" @click="closeModal" />
-				<Btn
-					thin
-					icon="delete"
-					v-if="onDelete"
-					flat
-					value="Delete"
-					@click="runDelete"
-					color="red" />
-			</div>
-			<Btn value="Submit" @click="runSubmit" />
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts" setup>
 import {
-	Modal,
-	Btn,
 	BagelForm,
 	type BglFormSchemaT,
+	Btn,
 	type BtnOptions,
+	Modal,
 	useBagel,
-} from '@bagelink/vue';
-
-const bagel = useBagel();
+} from '@bagelink/vue'
 
 const props = defineProps<{
-	side?: boolean;
-	title?: string;
-	width?: string;
-	dismissable?: boolean;
-	actions?: BtnOptions[];
-	schema: BglFormSchemaT | (() => BglFormSchemaT);
-	// eslint-disable-next-line no-unused-vars
-	onSubmit?: (formData: any) => Promise<void>;
-	// eslint-disable-next-line no-unused-vars
-	onDelete?: (id: string) => void;
-	// eslint-disable-next-line no-unused-vars
-	visible?: boolean;
-	// eslint-disable-next-line no-unused-vars
-	onError?: (err: any) => void;
-
-	modelValue?: Record<string, any>;
-}>();
-
-const emit = defineEmits(['update:visible']);
-
-const modal = $ref<InstanceType<typeof Modal>>();
+	side?: boolean
+	title?: string
+	width?: string
+	dismissable?: boolean
+	actions?: BtnOptions[]
+	schema: BglFormSchemaT | (() => BglFormSchemaT)
+
+	onSubmit?: (formData: any) => Promise<void>
+
+	onDelete?: (id: string) => void
+
+	visible?: boolean
+
+	onError?: (err: any) => void
+
+	modelValue?: Record<string, any>
+}>()
+
+const emit = defineEmits(['update:visible'])
+
+const bagel = useBagel()
+
+const modal = $ref<InstanceType<typeof Modal>>()
 
 const computedFormSchema = $computed(() => {
-	if (typeof props.schema === 'function') return props.schema();
-	return props.schema;
-});
+	if (typeof props.schema === 'function') return props.schema()
+	return props.schema
+})
 
 const formData = defineModel<Record<string, any>>('modelValue', {
 	default: {},
-});
-const form = $ref<InstanceType<typeof BagelForm>>();
-const closeModal = () => modal?.closeModal();
+})
+const form = $ref<InstanceType<typeof BagelForm>>()
+const closeModal = () => modal?.closeModal()
 
-const runSubmit = async () => {
-	if (form?.validateForm?.() === false) return;
+async function runSubmit() {
+	if (form?.validateForm?.() === false) return
 	try {
-		await props.onSubmit?.(formData.value);
-		closeModal();
+		await props.onSubmit?.(formData.value)
+		closeModal()
 	} catch (err: any) {
-		if (props.onError) props.onError(err);
-		else bagel?.onError?.(err);
+		if (props.onError) props.onError(err)
+		else bagel.onError?.(err)
 	}
-};
+}
 
-const runDelete = () => {
-	props.onDelete?.(formData.value?.id);
-	closeModal();
-};
+function runDelete() {
+	props.onDelete?.(formData.value.id)
+	closeModal()
+}
 
 function setFormValues(values: Record<string, any>) {
-	Object.assign(formData, values);
+	Object.assign(formData, values)
 }
 
-defineExpose({ setFormValues });
+defineExpose({ setFormValues })
 </script>
 
+<template>
+	<Modal
+		ref="modal"
+		:side
+		:width
+		:visible="visible"
+		:dismissable
+		:title
+		@update:visible="($event) => emit('update:visible', $event)"
+	>
+		<BagelForm
+			ref="form"
+			v-model="formData"
+			:schema="computedFormSchema"
+			@submit="runSubmit"
+		/>
+		<template v-if="onDelete || onSubmit" #footer>
+			<div>
+				<Btn thin flat value="Cancel" @click="closeModal" />
+				<Btn
+					v-if="onDelete"
+					thin
+					icon="delete"
+					flat
+					value="Delete"
+					color="red"
+					@click="runDelete"
+				/>
+			</div>
+			<Btn value="Submit" @click="runSubmit" />
+		</template>
+	</Modal>
+</template>
+
 <style scoped>
 .modal-title {
 	margin-top: 0.5rem;

package/src/components/NavBar.vue

@@ -1,13 +1,38 @@
+<script lang="ts" setup>
+import type { MaterialIcons, NavLink } from '@bagelink/vue'
+import { MaterialIcon } from '@bagelink/vue'
+
+withDefaults(
+	defineProps<{
+		footerLinks?: NavLink[]
+		links?: NavLink[]
+		homeIcon?: MaterialIcons
+		homeLabel?: string
+		homeTo?: string
+	}>(),
+	{
+		homeIcon: 'home',
+		homeLabel: 'Home',
+		homeTo: '/',
+		links: () => [],
+		footerLinks: () => [],
+	}
+)
+
+const isOpen = $ref(true)
+</script>
+
 <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">
+			tabindex="0"
+			@click="isOpen = !isOpen"
+			@keypress.enter="isOpen = !isOpen"
+		>
 			<MaterialIcon icon="chevron_right" class="top-arrow" />
 		</div>
 
@@ -17,10 +42,11 @@
 					<component
 						:is="link.to ? 'router-link' : 'div'"
 						v-for="link in links"
+						:key="link.label"
 						class="nav-button"
 						:to="link.to"
-						:key="link.label"
-						@click="link.onClick?.()">
+						@click="link.onClick?.()"
+					>
 						<MaterialIcon :icon="link.icon" />
 						<div class="tooltip">
 							{{ link.label }}
@@ -33,10 +59,11 @@
 				<component
 					:is="link.to ? 'router-link' : 'div'"
 					v-for="link in footerLinks"
+					:key="link.label"
 					class="nav-button"
 					:to="link.to"
 					@click="link.onClick?.()"
-					:key="link.label">
+				>
 					<MaterialIcon :icon="link.icon" />
 					<div class="tooltip">
 						{{ link.label }}
@@ -48,30 +75,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import type { MaterialIcons, NavLink } from '@bagelink/vue';
-import { MaterialIcon } from '@bagelink/vue';
-
-const isOpen = $ref(true);
-
-withDefaults(
-	defineProps<{
-		footerLinks?: NavLink[];
-		links?: NavLink[];
-		homeIcon?: MaterialIcons;
-		homeLabel?: string;
-		homeTo?: string;
-	}>(),
-	{
-		homeIcon: 'home',
-		homeLabel: 'Home',
-		homeTo: '/',
-		links: () => [],
-		footerLinks: () => [],
-	}
-);
-</script>
-
 <style scoped>
 [dir='rtl'] .top-arrow {
 	transform: rotate(180deg);

package/src/components/PageTitle.vue

@@ -1,10 +1,3 @@
-<template>
-	<div class="page-top">
-		<h1 class="top-title m-0">
-			<slot /> {{ value }}
-		</h1>
-	</div>
-</template>
 <script lang="ts" setup>
 defineProps({
 	value: {
@@ -13,8 +6,17 @@ defineProps({
 	}
 
 	,
-});
+})
 </script>
+
+<template>
+	<div class="page-top">
+		<h1 class="top-title m-0">
+			<slot /> {{ value }}
+		</h1>
+	</div>
+</template>
+
 <style>
 .top-title {
   font-weight: 600;