@bagelink/vue 0.0.318 → 0.0.322

package/src/components/Modal.vue

@@ -1,25 +1,27 @@
 <template>
-  <div class="bg-dark" :class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
-    @click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal">
-    <Card class="modal" @click.stop>
-      <header class="tool-bar">
-        <slot name="toolbar" />
-        <Btn :style="{ float: side ? 'left' : 'right' }" flat icon="close" @click="closeModal" />
-        <Title class="modal-title" tag="h3" v-if="title" :label="title" />
-      </header>
-      <slot />
-      <footer class="modal-footer mt-3">
-        <Btn v-for="(action, i) in actions" :key="i" @click="closeModal" color="gray" v-bind="action" />
-        <slot name="footer" />
-      </footer>
-    </Card>
-  </div>
+	<div
+		class="bg-dark" :class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
+		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal"
+	>
+		<Card class="modal" @click.stop>
+			<header class="tool-bar">
+				<slot name="toolbar" />
+				<Btn :style="{ float: side ? 'left' : 'right' }" flat icon="close" @click="closeModal" />
+				<Title class="modal-title" tag="h3" v-if="title" :label="title" />
+			</header>
+			<slot />
+			<footer class="modal-footer mt-3">
+				<Btn v-for="(action, i) in actions" :key="i" @click="closeModal" color="gray" v-bind="action" />
+				<slot name="footer" />
+			</footer>
+		</Card>
+	</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, watch } from 'vue';
 import {
-  type BtnOptions, Btn, useEscape, Title, Card,
+	type BtnOptions, Btn, useEscape, Title, Card,
 } from '@bagelink/vue';
 import '../styles/modal.css';
 
@@ -34,16 +36,16 @@ const props = defineProps<{
 let isVisible = $ref<boolean>(false);
 
 watch(() => props.visible, (val) => {
-  if (val === isVisible || val === undefined) return;
-  if (val) openModal();
-  else closeModal();
+	if (val === isVisible || val === undefined) return;
+	if (val) openModal();
+	else closeModal();
 }, { immediate: true });
 
 const emit = defineEmits(['update:visible']);
 
 const closeModal = () => {
-  isVisible = false;
-  setTimeout(() => emit('update:visible', false), 200);
+	isVisible = false;
+	setTimeout(() => emit('update:visible', false), 200);
 };
 
 defineExpose({ closeModal });
@@ -51,13 +53,13 @@ defineExpose({ closeModal });
 const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e, () => closeModal());
 
 function openModal() {
-  setTimeout(() => isVisible = true, 1);
+	setTimeout(() => isVisible = true, 1);
 }
 
 onMounted(() => document.addEventListener('keydown', escapeKeyClose));
 
 onUnmounted(() => {
-  document.removeEventListener('keydown', escapeKeyClose);
+	document.removeEventListener('keydown', escapeKeyClose);
 });
 </script>
 

package/src/components/form/BglField.vue

@@ -1,73 +1,58 @@
 <template>
-	<component
-		:required="field.required"
-		v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
-		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)"
-		v-if="vIf"
-		:is="is"
-		:label="field.label"
-		:id="field.id"
-		:placeholder="field.placeholder || field.label"
-		v-model="fieldData"
-		:defaultValue="field.defaultValue"
-		:options="field.options"
-		:helptext="field.helptext"
-		@update:modelValue="($event: any) => field?.onUpdate?.($event, formData)"
-	>
-		{{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
-		<BglField
-			v-model="formData"
-			v-for="(child, ii) in field.children"
-			:key="child.id || ii"
-			:field="child"
-		/>
-	</component>
+  <component :required="field.required" v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
+    :class="classify(fieldData, modelValue, field.class, field.attrs?.class)" v-if="vIf" :is="is" :label="field.label"
+    :id="field.id" :placeholder="field.placeholder || field.label" v-model="fieldData"
+    :defaultValue="field.defaultValue" :options="bindAttrs({ options: field.options }, fieldData, modelValue).options"
+    :helptext="field.helptext" @update:modelValue="($event: any) => field?.onUpdate?.($event, formData)">
+    {{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
+    <BglField v-model="formData" v-for="(child, ii) in field.children" :key="child.id || ii" :field="child" />
+  </component>
 </template>
 
 <script lang="ts" setup>
 import {
-	type Field, bindAttrs, classify, SelectInput, TextInput, ToggleInput, CheckInput,
+  type Field, bindAttrs, classify, ComboBox, TextInput, ToggleInput, CheckInput,
 } from '@bagelink/vue';
 
 const props = withDefaults(defineProps<{
-	field: Field
-	modelValue: Record<string, any>
+  field: Field
+  modelValue: Record<string, any>
 }>(), {
-	modelValue: () => ({}),
+  modelValue: () => ({}),
 });
 
 const is = $computed(() => {
-	if (props.field.$el === 'text') return TextInput;
-	if (props.field.$el === 'select') return SelectInput;
-	if (props.field.$el === 'toggle') return ToggleInput;
-	if (props.field.$el === 'check') return CheckInput;
-	return props.field.$el || 'div';
+  if (props.field.$el === 'text') return TextInput;
+  if (props.field.$el === 'select') return ComboBox;
+  if (props.field.$el === 'toggle') return ToggleInput;
+  if (props.field.$el === 'check') return CheckInput;
+  return props.field.$el || 'div';
 });
 
 const emit = defineEmits(['update:modelValue']);
 
 const formData = $computed({
-	get: () => props.modelValue,
-	set: (val: any) => emit('update:modelValue', val),
+  get: () => props.modelValue,
+  set: (val: any) => emit('update:modelValue', val),
 });
 
 const fieldData = $computed({
-	set: (val: any) => {
-		if (!props.field.id) return;
-		const data = { ...props.modelValue } || {};
-		data[props.field.id] = val;
-		emit('update:modelValue', data);
-	},
-	get: () => (props.field.id ? props.modelValue[props.field.id] : props.field.defaultValue || ''),
+  set: (val: any) => {
+    if (!props.field.id) return;
+    const data = { ...props.modelValue } || {};
+    data[props.field.id] = val;
+    emit('update:modelValue', data);
+  },
+  get: () => (props.field.id ? props.modelValue[props.field.id] : props.field.defaultValue || ''),
 });
 
 const vIf = $computed(() => {
-	if (props.field['v-if'] === undefined) return true;
-	if (typeof props.field['v-if'] === 'boolean') return props.field['v-if'];
-	if (typeof props.field['v-if'] === 'string') return true;
-	if (typeof props.field['v-if'] === 'function') {
-		return props.field['v-if']?.(fieldData, formData);
-	}
-	return true;
+  if (props.field['v-if'] === undefined) return true;
+  if (typeof props.field['v-if'] === 'boolean') return props.field['v-if'];
+  if (typeof props.field['v-if'] === 'string') return true;
+  if (typeof props.field['v-if'] === 'function') {
+    return props.field['v-if']?.(fieldData, formData);
+  }
+  return true;
 });
 </script>

package/src/components/form/BglForm.vue

@@ -2,32 +2,39 @@
 	<template v-if="id">
 		<BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
 	</template>
-	<form v-else ref="form" @submit.prevent="runSubmit">
+	<form v-else-if="(!slots.success || formStatus !== 'success')" 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" />
 		<slot name="submit" />
-		<input type="submit" hidden v-if="onSubmit" />
+		<button @click="runSubmit">
+			Click
+		</button>
 	</form>
+	<slot  v-if="formStatus === 'success'" name="success" />
+	<slot v-if="formStatus === 'error'" name="error" :message="error" />
 </template>
 
 <script lang="ts" setup>
+import { useSlots } from 'vue';
 import {
 	useModal, BglField, Title,
 } from '@bagelink/vue';
 
 import { type BglFormSchemaT } from '@bagelink/vue';
 
+const slots = useSlots();
+
 const { showModal } = useModal();
 
 const props = withDefaults(
 	defineProps<{
-		label?: string;
-		id?: string;
-		schema: BglFormSchemaT<any>;
-		modelValue?: Record<string, any>;
-		onDelete?: ((id: string) => void);
-		onSubmit?: ((data: any) => void);
-	}>(),
+    label?: string;
+    id?: string;
+    schema: BglFormSchemaT<any>;
+    modelValue?: Record<string, any>;
+    onDelete?: ((id: string) => void);
+    onSubmit?: ((data: any) => void);
+  }>(),
 	{
 		modelValue: () => ({}),
 	},
@@ -35,7 +42,7 @@ const props = withDefaults(
 
 const instAt = new Date();
 const timeSinceInst = () => new Date().getTime() - instAt.getTime();
-
+let formData = $ref(props.modelValue);
 const emit = defineEmits(['update:modelValue', 'submit', 'dirty']);
 let isDirty = $ref(false);
 const data = $computed({
@@ -44,9 +51,10 @@ const data = $computed({
 			emit('dirty');
 			isDirty = true;
 		}
+		formData = val;
 		emit('update:modelValue', val);
 	},
-	get: () => props.modelValue || {},
+	get: () => props.modelValue || formData,
 });
 const form = $ref<HTMLFormElement>();
 
@@ -54,10 +62,21 @@ const validateForm = () => form?.reportValidity?.();
 
 const clearForm = () => Object.assign(data, {});
 
+type FormStatus = 'idle' | 'loading' | 'success' | 'error' ;
+
+let formStatus = $ref<FormStatus>('idle');
+
 const runSubmit = () => {
-	validateForm();
-	emit('submit', data);
-	clearForm();
+	console.log('runSubmit');
+	try {
+		validateForm();
+		props.onSubmit(data);
+		// emit('submit', data);
+		clearForm();
+		formStatus = 'success';
+	} catch (e) {
+		formStatus = 'error';
+	}
 };
 
 const i18nT = (val: string) => val;
@@ -85,6 +104,6 @@ defineExpose({ validateForm, deleteItem, isDirty });
 
 <style>
 .del-top {
-	transform: translateY(-2.6rem);
+  transform: translateY(-2.6rem);
 }
 </style>

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

@@ -1,107 +1,65 @@
 <template>
-	<div
-		class="bagel-input text-input"
-		:class="{
-			dense, small, shrink, toggleEdit, editMode, code,
-			textInputIconWrap: icon,
-			txtInputIconStart: iconStart,
-		}"
-		:title="title"
-	>
-		<label :for="id">
-			{{ label }}
-			<input
-				v-if="!multiline && !autoheight && !code"
-				:title="title"
-				:autocomplete="autocomplete"
-				: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
-				:title="title"
-				: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
-		/>
-	</div>
+  <div class="bagel-input text-input" :class="{
+      dense, small, shrink, toggleEdit, editMode, code,
+      textInputIconWrap: icon,
+      txtInputIconStart: iconStart,
+    }" :title="title">
+    <label :for="id">
+      {{ label }}
+      <input v-if="!multiline && !autoheight && !code" :title="title" :autocomplete="autocomplete" :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 :title="title" :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 />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { watch } from 'vue';
+import { onMounted, watch } from 'vue';
 import {
-	debounce, Btn, type MaterialIcons, MaterialIcon,
+  debounce, Btn, type MaterialIcons, MaterialIcon,
 } from '@bagelink/vue';
 
 const emit = defineEmits(['update:modelValue', 'debounce']);
 const props = withDefaults(
-	defineProps<{
-		id?: string;
-		title?: string;
-		helptext?: string;
-		placeholder?: string;
-		modelValue?: string | number;
-		label?: string;
-		small?: boolean;
-		dense?: boolean;
-		required?: boolean;
-		pattern?: string;
-		shrink?: boolean;
-		toggleEdit?: boolean;
-		type?: string;
-		nativeInputAttrs?: Record<string, any>;
-		icon?: MaterialIcons;
-		iconStart?: MaterialIcons;
-		multiline?: boolean;
-		autoheight?: boolean;
-		code?: boolean;
-		lines?: number;
-		autocomplete?: string;
-	}>(),
-	{
-		type: 'text',
-		toggleEdit: false,
-		modelValue: '',
-		autocomplete: 'off',
-	},
+  defineProps<{
+    id?: string;
+    title?: string;
+    helptext?: string;
+    placeholder?: string;
+    modelValue?: string | number;
+    label?: string;
+    small?: boolean;
+    dense?: boolean;
+    required?: boolean;
+    pattern?: string;
+    shrink?: boolean;
+    toggleEdit?: boolean;
+    type?: string;
+    nativeInputAttrs?: Record<string, any>;
+    icon?: MaterialIcons;
+    iconStart?: MaterialIcons;
+    multiline?: boolean;
+    autoheight?: boolean;
+    code?: boolean;
+    lines?: number;
+    autocomplete?: string;
+    autofocus?: boolean;
+  }>(),
+  {
+    type: 'text',
+    toggleEdit: false,
+    modelValue: '',
+    autocomplete: 'off',
+  },
 );
 let inputVal = $ref<string | number>();
 let editMode = $ref<boolean>(!props.toggleEdit);
@@ -109,118 +67,130 @@ let editMode = $ref<boolean>(!props.toggleEdit);
 const input = $ref<HTMLInputElement>();
 
 const toggleEditAction = () => {
-	if (!props.toggleEdit) return;
-	if (editMode) {
-		editMode = false;
-		emit('debounce', inputVal);
-		emit('update:modelValue', inputVal as string);
-	} else {
-		editMode = true;
-		setTimeout(() => input?.focus(), 10);
-	}
+  if (!props.toggleEdit) return;
+  if (editMode) {
+    editMode = false;
+    emit('debounce', inputVal);
+    emit('update:modelValue', inputVal as string);
+  } else {
+    editMode = true;
+    setTimeout(() => input?.focus(), 10);
+  }
 };
 
 const rows = $computed(() => {
-	if (props.lines) return props.lines;
-	if (props.autoheight) return `${inputVal}`?.split('\n').length || 1;
-	if (props.multiline || props.code) return 4;
-	return 1;
+  if (props.lines) return props.lines;
+  if (props.autoheight) return `${inputVal}`?.split('\n').length || 1;
+  if (props.multiline || props.code) return 4;
+  return 1;
 });
 
 watch(
-	() => inputVal,
-	(newVal) => {
-		if (props.toggleEdit) return;
-		if (newVal === props.modelValue) return;
-		emit('update:modelValue', newVal as string);
-		debounce(() => emit('debounce', newVal));
-	},
+  () => inputVal,
+  (newVal) => {
+    if (props.toggleEdit) return;
+    if (newVal === props.modelValue) return;
+    emit('update:modelValue', newVal as string);
+    debounce(() => emit('debounce', newVal));
+  },
 );
 
 watch(
-	() => props.modelValue,
-	(newVal) => {
-		if (newVal !== inputVal) inputVal = newVal;
-	},
-	{ immediate: true },
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal !== inputVal) inputVal = newVal;
+  },
+  { immediate: true },
 );
+
+onMounted(() => {
+  if (props.autofocus) setTimeout(() => input?.focus(), 10);
+});
 </script>
 
 <style>
 .bagel-input.shrink,
 .bagel-input.shrink input {
-	min-width: unset !important;
-	/* width: auto; */
+  min-width: unset !important;
+  /* width: auto; */
+}
+.bagel-input label {
+	font-size: var(--label-font-size);
 }
 </style>
 
 <style scoped>
 .bagel-input textarea {
-	min-height: unset;
+  min-height: unset;
+  font-size: var(--input-font-size);
 }
 
 .bagel-input.text-input textarea {
-	resize: none;
+  resize: none;
 }
 
 .code textarea {
-	font-family: 'Inconsolata', monospace;
-	background: var(--bgl-black) !important;
-	color: var(--bgl-white) !important;
+  font-family: 'Inconsolata', monospace;
+  background: var(--bgl-black) !important;
+  color: var(--bgl-white) !important;
 }
 
 .bagel-input.toggleEdit:hover {
-	background-color: var(--input-bg);
+  background-color: var(--input-bg);
 }
 
 .bagel-input.small {
-	margin-bottom: 0;
-	height: 30px;
+  margin-bottom: 0;
+  height: 30px;
 }
 
 .bagel-input.dense label {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.bagel-input label {
+  font-size: var(--label-font-size);
 }
 
 .toggleEditBtn {
-	position: absolute;
-	right: -24px;
-	top: 4;
-	opacity: 0;
+  position: absolute;
+  right: -24px;
+  top: 4;
+  opacity: 0;
 }
 
 .textInputIconWrap {
-	position: relative;
+  position: relative;
 }
 
 .textInputIconWrap .bgl_icon-font {
-	position: absolute;
-	inset-inline-end: 0.7rem;
-	bottom: 50%;
-	line-height: 0;
-	color: var(--bgl-gray);
+  position: absolute;
+  inset-inline-end: 0.7rem;
+  bottom: 50%;
+  line-height: 0;
+  color: var(--bgl-gray);
 }
 
 .txtInputIconStart .iconStart {
-	position: absolute;
-	inset-inline-start: 0.7rem;
-	top: 50%;
-	line-height: 0;
-	color: var(--bgl-gray);
+  position: absolute;
+  inset-inline-start: 0.7rem;
+  top: 50%;
+  line-height: 0;
+  color: var(--bgl-gray);
 }
 
 .txtInputIconStart textarea {
-	padding-inline-start: 2rem;
+  padding-inline-start: 2rem;
 }
 
 .bagel-input:hover .toggleEditBtn,
 .bagel-input.editMode .toggleEditBtn {
-	opacity: 1;
+  opacity: 1;
 }
 
 .bagel-input.small textarea {
-	height: 30px;
+  height: 30px;
 }
 </style>

package/src/components/index.ts

@@ -27,5 +27,5 @@ export { default as Carousel } from './Carousel.vue';
 
 export * from './form';
 export * from './dashboard';
-export * from './whatsapp';
+// export * from './whatsapp';
 export * from './layout';

package/src/components/layout/SidebarMenu.vue

@@ -6,7 +6,7 @@
 		<slot v-if="isOpen" name="brand-open" />
 		<slot v-if="!navLinks" />
 		<Btn
-			v-for="(nav, i) in navLinks" :key="i" :to="nav.to" class="nav-button"
+			v-for="(nav, i) in navLinks" :key="i" :to="nav.to" class="nav-button px-075"
 			v-tooltip.right="{ content: nav.label, disabled: open, class: ['nav-tooltip'] }"
 		>
 			<template #default >
@@ -50,13 +50,12 @@ function toggleMenu() {
 .wideNav .nav-button .bgl_btn-flex {
   justify-content: flex-start !important;
 }
-</style>
-
-<style scoped>
 .nav-button.router-link-active {
-  background-color: #40b884 !important;
+  background-color: var(--bgl-primary-tint) !important;
 }
+</style>
 
+<style scoped>
 .bgl_sidebar {
   background-color: var(--bgl-primary);
   color: var(--bgl-white);