@bagelink/vue 0.0.239 → 0.0.243

package/src/components/Avatar.vue

@@ -1,11 +1,7 @@
 <template>
-	<div class="avatar">
-		<img
-			v-if="src"
-			:src="src"
-			:alt="name"
-		>
-		<p v-else>
+	<div class="avatar" :style="{ width: `${size}px`, height: `${size}px` }">
+		<img v-if="src" :src="src" :alt="name">
+		<p v-else :style="{ 'line-height': `${size * 0.9}px` }">
 			{{ fallback || initials(name || '') }}
 		</p>
 	</div>
@@ -14,22 +10,23 @@
 <script setup lang="ts">
 import { initials } from '@bagelink/vue';
 
-defineProps<{
-  fallback?: string;
-  src?: string;
-  name?: string;
-}>();
+withDefaults(defineProps<{
+	fallback?: string;
+	src?: string;
+	name?: string;
+	size?: number;
+}>(), { size: 50 });
 </script>
 
 <style scoped>
-.avatar{
+.avatar {
 	border-radius: 100%;
-	width: 50px;
-	height: 50px;
-	background-color: var(--bgl-primary-tint);
+	background-color: var(--bgl-gray-20);
+	border: 0.5px solid var(--border-color);
 	overflow: hidden;
 	text-align: center;
 	padding: none;
+
 }
 
 .avatar p {
@@ -39,7 +36,7 @@ defineProps<{
 	font-weight: 200;
 }
 
-.avatar img{
+.avatar img {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;

package/src/components/ListItem.vue

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

package/src/components/Modal.vue

@@ -1,8 +1,6 @@
 <template>
-	<div
-		class="bg-dark" :class="{ 'is-side': side, 'is-active': isActive }"
-		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal"
-	>
+	<div class="bg-dark" :class="{ 'is-side': side, 'is-active': isActive, 'bg-lignt': false }"
+		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal">
 		<Card class="modal" @click.stop>
 			<header class="tool-bar">
 				<slot name="toolbar" />

package/src/components/ModalForm.vue

@@ -1,6 +1,7 @@
 <template>
-	<Modal :side="side" ref="modal" :dismissable="dismissable" :title="title">
-		<BagelForm v-model="formData" :schema="computedFormSchema" />
+	<Modal @onUpdate:isModalVisible="props['onUpdate:isModalVisible']" :side="side" ref="modal" :dismissable="dismissable"
+		:title="title">
+		<BagelForm ref="form" v-model="formData" :schema="computedFormSchema" />
 		<template #footer v-if="onDelete || onSubmit">
 			<div>
 				<Btn thin flat value="Cancel" @click="closeModal()" />
@@ -28,6 +29,8 @@ const props = defineProps<{
 	onSubmit?: ((formData: any) => Promise<void>);
 	// eslint-disable-next-line no-unused-vars
 	onDelete?: ((id: string) => void);
+	// eslint-disable-next-line no-unused-vars
+	'onUpdate:isModalVisible'?: ((visible: boolean) => void);
 }>();
 
 const modal = $ref<InstanceType<typeof Modal>>();
@@ -38,10 +41,11 @@ const computedFormSchema = $computed(() => {
 });
 
 const formData = defineModel<Record<string, any>>('modelValue', { default: {} });
-
+const form = $ref<InstanceType<typeof BagelForm>>();
 const closeModal = () => modal?.closeModal();
 
 const runSubmit = async () => {
+	if (form?.validateForm?.() === false) return;
 	try {
 		await props.onSubmit?.(formData.value);
 		closeModal();

package/src/components/form/BglField.vue

@@ -2,7 +2,7 @@
 	<component :required="field.required" v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
 		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)" v-if="iffer(field, fieldData)" :is="is"
 		:label="field.label" :id="field.id" :placeholder="field.placeholder || field.label" v-model="fieldData"
-		:defaultValue="field.defaultValue" :options="field.options" :hint="field.hint"
+		:defaultValue="field.defaultValue" :options="field.options" :helptext="field.helptext"
 		@update:modelValue="($event: any) => field?.onUpdate?.($event, denullify(fieldData, field.id), formData)">
 		{{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
 		<BglField v-model="formData" v-for="(child, ii) in field.children" :key="child.id || ii" :field="child" />

package/src/components/form/BglForm.vue

@@ -2,19 +2,15 @@
 	<component :is="id?'div':'form'" ref="form" @submit.prevent="runSubmit">
 		<Title tag="h4" :label="label" v-if="label" />
 		<BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
-		<Btn class="del-top" v-if="data?.id && onDelete" @click="runDelete" value="Delete" flat icon="delete" color="red"
-			thin />
-		<Btn v-if="!$slots.submit && onSubmit" value="Submit" type="submit" thin />
-		<div v-else>
-			<slot name="submit" />
-		</div>
+		<slot name="submit" />
 	</component>
 </template>
 
 <script lang="ts" setup>
 import {
-	Btn, useModal, BglField, Title,
+	useModal, BglField, Title,
 } from '@bagelink/vue';
+
 import { type BglFormSchemaT } from '@bagelink/vue';
 
 const { showModal } = useModal();
@@ -33,10 +29,17 @@ const props = withDefaults(
 	},
 );
 
-const emit = defineEmits(['update:modelValue', 'submit']);
+const timeSinceInst = () => new Date().getTime() - instAt.getTime();
 
+const emit = defineEmits(['update:modelValue', 'submit', 'dirty']);
+const instAt = new Date();
+let isDirty = $ref(false);
 const data = $computed({
 	set: (val: any) => {
+		if (timeSinceInst() > 100) {
+			emit('dirty');
+			isDirty = true;
+		}
 		emit('update:modelValue', val);
 	},
 	get: () => props.modelValue || {},
@@ -45,8 +48,6 @@ const form = $ref<HTMLFormElement>();
 
 const validateForm = () => form?.reportValidity?.();
 
-defineExpose({ validateForm });
-
 const clearForm = () => Object.assign(data, {});
 
 const runSubmit = () => {
@@ -57,7 +58,7 @@ const runSubmit = () => {
 
 const i18nT = (val: string) => val;
 
-const runDelete = () => {
+const deleteItem = () => {
 	showModal(
 		{
 			class: 'small-modal',
@@ -74,6 +75,8 @@ const runDelete = () => {
 		{ default: i18nT('form.deleteMessage') },
 	);
 };
+
+defineExpose({ validateForm, deleteItem, isDirty });
 </script>
 
 <style>

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

@@ -1,59 +1,22 @@
 <template>
-	<div
-		class="bagel-input text-input"
+	<div class="bagel-input text-input"
 		:class="{ small, shrink, toggleEdit, editMode, textInputIconWrap: icon, txtInputIconStart: iconStart, code }"
-		:title="title"
-	>
+		:title="title">
 		<label :for="id">
 			{{ label }}
-			<input
-				:autocomplete="autocomplete"
-				v-if="!multiline && !autoheight && !code"
-				:id="id"
-				v-model="inputVal"
-				:type="type"
-				:rows="1"
-				ref="input"
-				:placeholder="placeholder || label"
-				:disabled="!editMode"
-				:required="required"
-				:pattern="pattern"
-				v-bind="nativeInputAttrs"
-				@dblclick="toggleEditAction"
-			>
-			<textarea
-				v-else
-				:id="id"
-				v-model="inputVal"
-				:type="type"
-				:rows="rows"
-				ref="input"
-				:placeholder="placeholder || label"
-				:disabled="!editMode"
-				:required="required"
-				:pattern="pattern"
-				v-bind="nativeInputAttrs"
-				@dblclick="toggleEditAction"
-			/>
+			<input :autocomplete="autocomplete" v-if="!multiline && !autoheight && !code" :id="id" v-model="inputVal"
+				:type="type" :rows="1" ref="input" :placeholder="placeholder || label" :disabled="!editMode"
+				:required="required" :pattern="pattern" v-bind="nativeInputAttrs" @dblclick="toggleEditAction">
+			<textarea v-else :id="id" v-model="inputVal" :type="type" :rows="rows" ref="input"
+				:placeholder="placeholder || label" :disabled="!editMode" :required="required" :pattern="pattern"
+				v-bind="nativeInputAttrs" @dblclick="toggleEditAction" />
+			<p v-if="helptext">{{ helptext }}</p>
 		</label>
 
-		<MaterialIcon
-			class="iconStart"
-			v-if="iconStart"
-			:icon="iconStart"
-		/>
-		<MaterialIcon
-			v-if="icon"
-			:icon="icon"
-		/>
-		<Btn
-			class="toggleEditBtn"
-			v-if="toggleEdit"
-			thin
-			@click="toggleEditAction"
-			:icon="editMode ? 'check' : 'edit'"
-			flat
-		/>
+		<MaterialIcon class="iconStart" v-if="iconStart" :icon="iconStart" />
+		<MaterialIcon v-if="icon" :icon="icon" />
+		<Btn class="toggleEditBtn" v-if="toggleEdit" thin @click="toggleEditAction" :icon="editMode ? 'check' : 'edit'"
+			flat />
 	</div>
 </template>
 
@@ -68,6 +31,7 @@ const props = withDefaults(
 	defineProps<{
 		id?: string;
 		title?: string;
+		helptext?: string;
 		placeholder?: string;
 		modelValue?: string | number;
 		label?: string;
@@ -80,8 +44,8 @@ const props = withDefaults(
 		nativeInputAttrs?: Record<string, any>;
 		icon?: MaterialIcons;
 		iconStart?: MaterialIcons;
-    multiline?: boolean;
-    autoheight?: boolean;
+		multiline?: boolean;
+		autoheight?: boolean;
 		code?: boolean;
 		lines?: number;
 		autocomplete?: string;
@@ -144,17 +108,20 @@ watch(
 </style>
 
 <style scoped>
-.bagel-input textarea{
-  min-height: unset;
+.bagel-input textarea {
+	min-height: unset;
 }
-.bagel-input.text-input textarea{
-  resize: none;
+
+.bagel-input.text-input textarea {
+	resize: none;
 }
-.code textarea{
-  font-family: 'Inconsolata', monospace;
-  background: var(--bgl-black) !important;
-  color: var(--bgl-white) !important;
+
+.code textarea {
+	font-family: 'Inconsolata', monospace;
+	background: var(--bgl-black) !important;
+	color: var(--bgl-white) !important;
 }
+
 .bagel-input.toggleEdit:hover {
 	background-color: var(--input-bg);
 }

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

@@ -1,59 +1,48 @@
 <template>
-	<div
-		class="bagel-input bgl-checkbox"
-		:title="title"
-		:class="{ small: small, 'no-edit': !editMode }"
-	>
-		<div class="switch">
-			<input
-				:id="id"
-				type="checkbox"
-				v-model="inputVal"
-				:class="{ 'no-edit': !editMode }"
-			>
-			<span class="slider round" />
-		</div>
-		<label :for="id">
-			{{ label }}
-		</label>
-	</div>
+  <div class="bagel-input bgl-checkbox justify-content-center gap-3" :title="title" :class="{ small: small }">
+    <div class="switch" :class="{ checked }">
+      <span class="slider round" />
+    </div>
+    <label>
+      {{ label }}
+      <input :id="id" type="checkbox" v-model="checked">
+    </label>
+  </div>
 </template>
 
 <script setup lang="ts">
-withDefaults(
-	defineProps<{
-    label: string;
-    id?: string;
-    title?: string;
-    editMode?: boolean;
-    small?: boolean;
-  }>(),
-	{
-		editMode: true,
-		id: Math.random().toString(36).substring(7),
-	},
-);
+defineProps<{
+  label: string;
+  id?: string;
+  title?: string;
+  small?: boolean;
+}>();
 
-const inputVal = defineModel<boolean>('modelValue', { default: false });
+const checked = defineModel<boolean>('modelValue', { default: false });
 </script>
 
 <style scoped>
-.bgl-checkbox{
+.bgl-checkbox {
   position: relative;
 }
-.bgl-checkbox input[type=checkbox]{
+
+.bgl-checkbox input[type=checkbox] {
   display: none;
 }
-.bgl-checkbox label{
+
+.bgl-checkbox label {
   padding-inline-start: calc(var(--input-height) + 0.25rem);
   transition: var(--bgl-transition);
   cursor: pointer;
   user-select: none;
+  line-height: var(--input-height);
 }
-.bgl-checkbox:hover{
+
+.bgl-checkbox:hover {
   filter: brightness(90%);
 }
-.bgl-checkbox:active{
+
+.bgl-checkbox:active {
   filter: var(--bgl-active-filter);
 }
 
@@ -64,7 +53,7 @@ const inputVal = defineModel<boolean>('modelValue', { default: false });
   width: var(--input-height);
   border-radius: var(--input-height);
   background: var(--bgl-gray);
-  outline: 1px solid var(--bgl-black);
+  outline: 1px solid var(--border-color);
   margin-top: 0.15rem;
   pointer-events: none;
 }
@@ -102,11 +91,11 @@ const inputVal = defineModel<boolean>('modelValue', { default: false });
   transition: 0.4s;
 }
 
-input:checked + .slider {
+.checked .slider {
   background: var(--bgl-primary);
 }
 
-input:checked + .slider:before {
+.checked .slider:before {
   transform: translateX(calc(var(--input-height) / 2));
 }
 </style>

package/src/plugins/modal.ts

@@ -13,26 +13,20 @@ interface ModalOptions {
 	class?: string;
 }
 
-interface ModalFormOptions extends ModalOptions {
-	modelValue?: any;
-	// eslint-disable-next-line no-unused-vars
-	'onUpdate:modelValue'?: (val: any) => void;
-	// eslint-disable-next-line no-unused-vars
-	onSubmit: (val: any) => void;
-	// eslint-disable-next-line no-unused-vars
-	onDelete?: (id: string) => void;
-	schema: BglFormSchemaT<any> | (() => BglFormSchemaT<any>);
-
+interface ModalFormOptions {
+	side?: boolean;
+	title?: string;
+	dismissable?: boolean;
+	schema: BglFormSchemaT<any> | (() => BglFormSchemaT);
+	modelValue?: Record<string, any>;
+	onSubmit?: (formData: any) => Promise<any>;
+	onDelete?: (id: string) => Promise<void>;
 }
 
 interface ModalApi {
-	// eslint-disable-next-line no-unused-vars
 	showModal: (options: ModalOptions, slots?: Record<string, any>) => void;
-	// eslint-disable-next-line no-unused-vars
 	showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => void;
-	// eslint-disable-next-line no-unused-vars
 	hideModal: (index?: number) => void;
-	// modalOptions: Ref<ModalOptions | ModalFormOptions>;
 }
 
 export const ModalSymbol: InjectionKey<ModalApi> = Symbol('modal');
@@ -77,22 +71,12 @@ export const ModalPlugin: Plugin = {
 		});
 
 		const ModalComponent = defineComponent({
-			data() {
-				return {
-					modalStack,
-				};
-			},
+			data: () => ({ modalStack }),
 			render() {
 				return modalStack.map((modal, index) => {
-					const renderComponent = modal.modalType === 'modalForm' ? ModalForm : Modal;
-					return h(
-						renderComponent as any,
-						{
-							...modal.modalOptions,
-							'onUpdate:isModalVisible': () => hideModal(index),
-						},
-						modal.componentSlots,
-					);
+					const props = { ...modal.modalOptions, 'onUpdate:isModalVisible': () => hideModal(index) };
+					if (modal.modalType === 'modalForm') return h(ModalForm, props as ModalFormOptions, modal.componentSlots);
+					return h(Modal, props, modal.componentSlots);
 				});
 			},
 		});