@bagelink/vue 0.0.236-beta.0 → 0.0.239

package/src/components/Modal.vue

@@ -1,27 +1,28 @@
 <template>
-	<div class="bg-dark" :class="{ 'is-side': side, 'is-active': isActive }"
-		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal">
-
-		<div class="card modal" @click.stop>
+	<div
+		class="bg-dark" :class="{ 'is-side': side, 'is-active': isActive }"
+		@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" />
-				<h3 class="modal-title">
-					{{ title }}
-				</h3>
+				<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>
-		</div>
+		</Card>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted } from 'vue';
-import { type BtnOptions, Btn, useEscape } from '@bagelink/vue';
+import {
+	type BtnOptions, Btn, useEscape, Title, Card,
+} from '@bagelink/vue';
 import '../styles/modal.css';
 
 const props = defineProps<{
@@ -37,27 +38,18 @@ const emit = defineEmits(['update:isModalVisible']);
 
 const closeModal = () => {
 	isActive = false;
-	setTimeout(() => {
-		emit('update:isModalVisible', false);
-	}, 200);
+	setTimeout(() => emit('update:isModalVisible', false), 200);
 };
 
+defineExpose({ closeModal });
+
 const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e, () => closeModal());
 
 onMounted(() => {
-	setTimeout(() => {
-		isActive = true;
-	}, 1);
-
-	document.addEventListener(
-		'keydown',
-		escapeKeyClose,
-	);
+	setTimeout(() => isActive = true, 1);
+	document.addEventListener('keydown', escapeKeyClose);
 });
 onUnmounted(() => {
-	document.removeEventListener(
-		'keydown',
-		escapeKeyClose,
-	);
+	document.removeEventListener('keydown', escapeKeyClose);
 });
 </script>

package/src/components/ModalForm.vue

@@ -1,60 +1,49 @@
 <template>
-	<div class="bg-dark" :class="{ 'is-side': side, 'is-active': isActive }"
-		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal">
-		<div class="card modal" @click.stop>
-			<header class="tool-bar">
-				<slot name="toolbar" />
-				<Btn :style="{ float: side ? 'left' : 'right' }" flat icon="close" @click="closeModal" />
-				<h3 class="modal-title">
-					{{ title }}
-				</h3>
-			</header>
-			<BglForm :onDelete="onDelete ? runDelete : undefined" :modelValue="modelValue" @update:modelValue="handleEmit"
-				@submit="runSubmit" :schema="props.schema" />
-		</div>
-	</div>
+	<Modal :side="side" ref="modal" :dismissable="dismissable" :title="title">
+		<BagelForm 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 { onMounted, onUnmounted } from 'vue';
 import {
-	Btn, BtnOptions, useEscape,
+	Modal,
+	Btn,
+	BagelForm, type BglFormSchemaT, type BtnOptions,
 } from '@bagelink/vue';
-import '../styles/modal.css';
-import { BglForm, BglFormSchemaT } from 'dist';
-
-// import { BagelField } from '@bagelink/vue';
 
 const props = defineProps<{
 	side?: boolean;
 	title?: string;
 	dismissable?: boolean;
 	actions?: BtnOptions[];
-	schema: BglFormSchemaT;
-	modelValue?: Record<string, any>;
+	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);
 }>();
 
-let isActive = $ref<boolean>(false);
+const modal = $ref<InstanceType<typeof Modal>>();
 
-const emit = defineEmits(['update:isModalVisible', 'update:modelValue']);
-const handleEmit = (value: any) => {
-	emit('update:modelValue', value);
-};
+const computedFormSchema = $computed(() => {
+	if (typeof props.schema === 'function') return props.schema();
+	return props.schema;
+});
 
-const closeModal = () => {
-	isActive = false;
-	setTimeout(() => {
-		emit('update:isModalVisible', false);
-	}, 200);
-};
+const formData = defineModel<Record<string, any>>('modelValue', { default: {} });
+
+const closeModal = () => modal?.closeModal();
 
-const runSubmit = async (formData: any) => {
+const runSubmit = async () => {
 	try {
-		await props.onSubmit?.(formData);
+		await props.onSubmit?.(formData.value);
 		closeModal();
 	} catch (err) {
 		console.error(err);
@@ -62,28 +51,9 @@ const runSubmit = async (formData: any) => {
 };
 
 const runDelete = () => {
-	props.onDelete?.(props.modelValue?.id);
+	props.onDelete?.(formData.value?.id);
 	closeModal();
 };
-
-const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e, () => closeModal());
-
-onMounted(() => {
-	setTimeout(() => {
-		isActive = true;
-	}, 1);
-
-	document.addEventListener(
-		'keydown',
-		escapeKeyClose,
-	);
-});
-onUnmounted(() => {
-	document.removeEventListener(
-		'keydown',
-		escapeKeyClose,
-	);
-});
 </script>
 
 <style scoped>

package/src/components/TableSchema.vue

@@ -2,62 +2,21 @@
 	<div class="table-list-wrap h-100">
 		<table class="infinite-wrapper">
 			<thead class="row first-row">
-				<th
-					class="col"
-					v-for="field in computedSchema"
-					:key="field.id"
-					@click="sort(field?.id || '')"
-				>
+				<th class="col" v-for="field in computedSchema" :key="field.id" @click="sort(field?.id || '')">
 					<div class="flex">
 						{{ field.id }}
-						<div
-							class="list-arrows"
-							:class="{ sorted: sortField === field.id }"
-						>
-							<MaterialIcon
-								:class="{ desc: sortDirection === 'DESC' }"
-								icon="keyboard_arrow_up"
-							/>
+						<div class="list-arrows" :class="{ sorted: sortField === field.id }">
+							<MaterialIcon :class="{ desc: sortDirection === 'DESC' }" icon="keyboard_arrow_up" />
 						</div>
 					</div>
 				</th>
 			</thead>
-			<tbody
-				ref="infinite"
-				class="rows infinite"
-				:class="{ loading }"
-			>
-				<tr
-					@click="selectElement(row)"
-					class="row row-item position-relative"
-					v-for="row in data"
-					:key="row.id"
-				>
-					<td
-						class="col"
-						v-for="field in computedSchema"
-						:key="`${field.id}-${row.id}`"
-					>
-						<slot
-							v-if="field.id && slots[field.id]"
-							:name="field.id"
-							:row="row"
-							:field="field"
-						/>
+			<tbody ref="infinite" class="rows infinite" :class="{ loading }">
+				<tr v-for="row in data" :key="row.id" @click="selectElement(row)" class="row row-item position-relative">
+					<td class="col" v-for="field in computedSchema" :key="`${field.id}-${row.id}`">
+						<slot v-if="field.id && slots[field.id]" :name="field.id" :row="row" :field="field" />
 						<div v-else>
-							<component
-								:is="field.$el || 'div'"
-								v-if="iffer(field, row)"
-								v-bind="bindAttrs(field.attrs, denullify(row, field.id), row)"
-								:class="classify(denullify(row, field.id), row, field.class, field.attrs?.class)"
-								:src="field.$el === 'img' && field.id ? row[field.id]?.url : ''"
-								:modelValue="field.id ? row[field.id] : ''"
-								@update:modelValue="($event: any) => field?.onUpdate?.($event, denullify(row, field.id), row)"
-							>
-								{{
-									field?.transform?.(denullify(row, field.id), row) || denullify(row, field.id) || ""
-								}}
-							</component>
+							<BglField :field="field" :modelValue="row" />
 						</div>
 					</td>
 				</tr>
@@ -71,11 +30,8 @@
 import { useSlots } from 'vue';
 import {
 	type BglFormSchemaT,
-	bindAttrs,
-	classify,
-	denullify,
 	MaterialIcon,
-	iffer,
+	BglField,
 } from '@bagelink/vue';
 
 const slots = useSlots();
@@ -93,7 +49,7 @@ const computedSchema = $computed(() => {
 	return props.schema;
 });
 
-const emit = defineEmits(['select']);
+const emit = defineEmits(['select', 'orderBy']);
 
 const selectElement = (data: Record<string, any>) => emit('select', data);
 
@@ -108,6 +64,7 @@ const sort = (fieldname: string) => {
 		sortField = fieldname;
 		sortDirection = 'ASC';
 	}
+	emit('orderBy', `${fieldname} ${sortDirection}`.trim());
 };
 </script>
 

package/src/components/Title.vue

@@ -1,12 +1,16 @@
 <template>
 	<component :is="tag">
 		<slot />
-		{{ label }}
+		{{ label || value }}
 	</component>
 </template>
 
 <script lang="ts" setup>
 defineProps({
+	value: {
+		type: String,
+		default: '',
+	},
 	label: {
 		type: String,
 		default: '',

package/src/components/form/BglField.vue

@@ -1,15 +1,17 @@
 <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" :hint="field.hint">
+		: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"
+		@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" />
 	</component>
 </template>
 
 <script lang="ts" setup>
 import {
-	type Field, bindAttrs, classify, SelectInput, TextInput, ToggleInput, CheckInput,
+	type Field, bindAttrs, classify, SelectInput, TextInput, ToggleInput, CheckInput, iffer, denullify,
 } from '@bagelink/vue';
 
 const props = withDefaults(defineProps<{
@@ -43,12 +45,4 @@ const fieldData = $computed({
 	},
 	get: () => (props.field.id ? props.modelValue[props.field.id] : ''),
 });
-
-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 !!props.modelValue.value[props.field['v-if']];
-	if (typeof props.field['v-if'] === 'function') return props.field['v-if']!(fieldData.value, props.modelValue);
-	return true;
-});
 </script>

package/src/components/form/BglForm.vue

@@ -23,7 +23,7 @@ const props = withDefaults(
 	defineProps<{
 		label?: string;
 		id?: string;
-		schema: BglFormSchemaT;
+		schema: BglFormSchemaT<any>;
 		modelValue?: Record<string, any>;
 		onDelete?: ((id: string) => void);
 		onSubmit?: ((data: any) => void);

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

@@ -3,7 +3,7 @@
 		<label v-if="label">
 			{{ label }}
 		</label>
-		<VDatepicker ref="datePicker" :auto-apply="true" v-model="date" :enable-time-picker="enableTime"/>
+		<VDatepicker ref="datePicker" :auto-apply="true" v-model="date" :enable-time-picker="enableTime" />
 	</div>
 </template>
 
@@ -45,7 +45,7 @@ let date = $computed<string | Date>({
 });
 
 onMounted(() => {
-	if (props.defaultValue)	date = props.defaultValue;
+	if (props.defaultValue) date = props.defaultValue;
 });
 </script>
 
@@ -53,4 +53,8 @@ onMounted(() => {
 .dp__input_wrap input {
 	padding-inline-start: 2rem !important;
 }
+
+.dp__calendar_row>div:last-child {
+	pointer-events: auto !important;
+}
 </style>

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

@@ -20,8 +20,8 @@ type RawOption = Option | string | number;
 
 const props = defineProps<{
 	required?: boolean,
-	label: string,
-	id: string,
+	label?: string,
+	id?: string,
 	modelValue?: string | number,
 	placeholder?: string,
 	defaultValue?: string | number,

package/src/components/index.ts

@@ -4,14 +4,13 @@ export { default as MaterialIcon } from './MaterialIcon.vue';
 export { default as NavBar } from './NavBar.vue';
 export { default as Btn } from './Btn.vue';
 export { default as Modal } from './Modal.vue';
-export { default as ModalBglForm } from './ModalBglForm.vue';
+export { default as ModalForm } from './ModalForm.vue';
 export { default as AccordionItem } from './AccordionItem.vue';
 export { default as ListView } from './ListView.vue';
 export { default as ListItem } from './ListItem.vue';
 export { default as TabbedLayout } from './TabbedLayout.vue';
 export { default as Comments } from './Comments.vue';
 export { default as PageTitle } from './PageTitle.vue';
-export { default as FormSchema } from './FormSchema.vue';
 export { default as TableSchema } from './TableSchema.vue';
 export { default as TopBar } from './TopBar.vue';
 export { default as RouterWrapper } from './RouterWrapper.vue';

package/src/components/whatsapp/form/MsgTemplate.vue

@@ -4,16 +4,9 @@
 		<div class="view-wrapper card thin">
 			<div class="whatsapp-wrap">
 				<div class="create-template-form">
-					<FormSchema
-						:schema="whatsappTemplateSchema()"
-						v-model="localWhatsappData"
-						@submit="upsertTemplate"
-					/>
+					<BagelForm :schema="whatsappTemplateSchema" v-model="localWhatsappData" @submit="upsertTemplate" />
 				</div>
-				<div
-					class="whatsapp-preview"
-					:class="{ whatsappHebrew: localWhatsappData?.language === 'he' }"
-				>
+				<div class="whatsapp-preview" :class="{ whatsappHebrew: localWhatsappData?.language === 'he' }">
 					{{ previewLabel }}
 					<div class="whatsapp-msg">
 						<b>{{
@@ -35,9 +28,10 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 
-import type { FormKitSchemaDefinition } from '@formkit/core';
 import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
-import { useBagel, PageTitle, FormSchema } from '@bagelink/vue';
+import {
+	useBagel, PageTitle, BagelForm, BglFormSchemaT,
+} from '@bagelink/vue';
 import {
 	BodyComponent,
 	HeaderComponent,
@@ -48,7 +42,7 @@ import {
 
 const props = withDefaults(
 	defineProps<{
-		whatsappTemplateSchema: () => FormKitSchemaDefinition;
+		whatsappTemplateSchema: BglFormSchemaT<LocalTemplateData>;
 		router: Router;
 		route: RouteLocationNormalizedLoaded;
 		previewLabel?: string;

package/src/plugins/modal.ts

@@ -3,7 +3,7 @@ import {
 } from 'vue';
 import type { Plugin } from 'vue';
 import type { BglFormSchemaT, BtnOptions } from '@bagelink/vue';
-import { Modal, ModalBglForm } from '@bagelink/vue';
+import { Modal, ModalForm } from '@bagelink/vue';
 
 interface ModalOptions {
 	title?: string;
@@ -84,12 +84,9 @@ export const ModalPlugin: Plugin = {
 			},
 			render() {
 				return modalStack.map((modal, index) => {
-					let renderComponent;
-					if (modal.modalType === 'modalForm') renderComponent = ModalBglForm;
-					else renderComponent = Modal;
-
+					const renderComponent = modal.modalType === 'modalForm' ? ModalForm : Modal;
 					return h(
-						renderComponent,
+						renderComponent as any,
 						{
 							...modal.modalOptions,
 							'onUpdate:isModalVisible': () => hideModal(index),

package/src/styles/theme.css

@@ -97,6 +97,14 @@
   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;
 }
 
 * {
@@ -467,7 +475,7 @@
 
 .list-view {
   grid-area: list-view;
-  grid-template-areas: "list-header" "list-content";
+  grid-template-areas: "list-header""list-content";
   grid-template-columns: 1fr;
   overflow-y: auto;
   grid-template-rows: -webkit-max-content 1fr;
@@ -497,7 +505,7 @@
   opacity: 0;
 }
 
-.grid > * {
+.grid>* {
   min-height: 0;
 }
 
@@ -605,4 +613,4 @@
     -webkit-margin-start: 0.5rem;
     margin-inline-start: 0.5rem;
   }
-}
+}

package/src/utils/index.ts

@@ -39,7 +39,7 @@ export function classify(fieldVal?: any, row?: any, ...classes: any[]) {
 
 export function bindAttrs<T = Record<string, any>>(attrs?: Attributes, fieldVal?: any, row?: T) {
 	if (!attrs) return {};
-	const exclude = ['class', 'style'];
+	const exclude = ['class'];
 	const arr = Object.entries(attrs).filter(([key]) => !exclude.includes(key)).map(([key, value]) => [
 		key,
 		typeof value === 'function' ? value(fieldVal, row) : value,
@@ -49,10 +49,11 @@ export function bindAttrs<T = Record<string, any>>(attrs?: Attributes, fieldVal?
 }
 
 export const iffer = (field: any, itemData: any) => {
-	if (field['v-if'] && typeof field['v-if'] === 'function') {
-		return field['v-if'](field.id ? itemData[field.id] : '', itemData);
-	}
-	return field['v-if'] || true;
+	if (field['v-if'] === undefined) return true;
+	if (typeof field['v-if'] === 'boolean') return field['v-if'];
+	if (typeof field['v-if'] === 'string') return !!itemData.value[field['v-if']];
+	if (typeof field['v-if'] === 'function') return field['v-if']!(itemData?.[field.id], itemData);
+	return true;
 };
 
 export const denullify = (itemData?: Record<string, any>, fieldID?: string) => (fieldID && itemData ? itemData[fieldID] : null);

package/tsconfig.json

@@ -1,8 +1,9 @@
 {
+
 	"compilerOptions": {
 		"target": "ESNext",
 		"baseUrl": ".",
-		"rootDir": ".",
+		"rootDir": "..",
 		"module": "ESNext",
 		"strict": true,
 		"jsx": "preserve",
@@ -29,6 +30,9 @@
 			"@vue-macros/reactivity-transform/macros-global"
 		],
 		"paths": {
+			"@bagelink/sdk": [
+				"../sdk/src/index.ts"
+			],
 			"@bagelink/vue": [
 				"./src/index.ts"
 			],
@@ -41,6 +45,6 @@
 		"**/**/*.ts",
 		"**/**/*.vue",
 		"**/**/*.d.ts",
-		"./vite.config.ts",
-	]
+		"./vite.config.ts"
+	],
 }