@bagelink/vue 0.0.235-beta.0 → 0.0.237

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 flat value="Cancel" @click="closeModal()" />
+				<Btn 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

@@ -83,7 +83,7 @@ const loading = $ref(true);
 
 const props = defineProps<{
 	data: any[];
-	schema: BglFormSchemaT & (() => BglFormSchemaT);
+	schema: BglFormSchemaT | (() => BglFormSchemaT);
 }>();
 
 const computedSchema = $computed(() => {

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;
@@ -21,7 +21,8 @@ interface ModalFormOptions extends ModalOptions {
 	onSubmit: (val: any) => void;
 	// eslint-disable-next-line no-unused-vars
 	onDelete?: (id: string) => void;
-	schema: BglFormSchemaT<any>;
+	schema: BglFormSchemaT<any> | (() => BglFormSchemaT<any>);
+
 }
 
 interface ModalApi {
@@ -83,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,7 @@
   gap: 1rem;
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 
 * {

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/dist/components/Drop.vue.d.ts

@@ -1,34 +0,0 @@
-type Option = {
-    label: string;
-    value: string;
-} | string | number;
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    modelValue: string | number;
-    options: Option[];
-    placeholder?: string | undefined;
-    label?: string | undefined;
-    id: string;
-    required: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    modelValue: string | number;
-    options: Option[];
-    placeholder?: string | undefined;
-    label?: string | undefined;
-    id: string;
-    required: boolean;
-}>>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-//# sourceMappingURL=Drop.vue.d.ts.map

package/dist/components/Drop.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Drop.vue.d.ts","sourceRoot":"","sources":["../../src/components/Drop.vue"],"names":[],"mappings":"AAcA;AAMA,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,MAAM,GAAG,MAAM,CAAC;;gBA8KN,MAAM,GAAG,MAAM;aAClB,MAAM,EAAE;;;QAGb,MAAM;cACA,OAAO;;;;gBALL,MAAM,GAAG,MAAM;aAClB,MAAM,EAAE;;;QAGb,MAAM;cACA,OAAO;;;;AAXnB,wBAcG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/components/FileUploader.vue.d.ts

@@ -1,60 +0,0 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id?: string | undefined;
-    private?: 0 | 1 | undefined;
-    singleFile?: boolean | undefined;
-    beforeUpload?: (() => Promise<any>) | undefined;
-    dragDropLabel?: string | undefined;
-    browseLabel?: string | undefined;
-}>, {
-    private: number;
-    entity: string;
-    id: string;
-    beforeUpload: () => Promise<void>;
-    dragDropLabel: string;
-    browseLabel: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    done: (...args: any[]) => void;
-    complete: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id?: string | undefined;
-    private?: 0 | 1 | undefined;
-    singleFile?: boolean | undefined;
-    beforeUpload?: (() => Promise<any>) | undefined;
-    dragDropLabel?: string | undefined;
-    browseLabel?: string | undefined;
-}>, {
-    private: number;
-    entity: string;
-    id: string;
-    beforeUpload: () => Promise<void>;
-    dragDropLabel: string;
-    browseLabel: string;
-}>>> & {
-    onDone?: ((...args: any[]) => any) | undefined;
-    onComplete?: ((...args: any[]) => any) | undefined;
-}, {
-    id: string;
-    private: 1 | 0;
-    beforeUpload: () => Promise<any>;
-    dragDropLabel: string;
-    browseLabel: string;
-}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-//# sourceMappingURL=FileUploader.vue.d.ts.map

package/dist/components/FileUploader.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FileUploader.vue.d.ts","sourceRoot":"","sources":["../../src/components/FileUploader.vue"],"names":[],"mappings":"AAiDA;;;;;0BA6YuB,QAAQ,GAAG,CAAC;;;;;;;;;;;;;;;;;0BAAZ,QAAQ,GAAG,CAAC;;;;;;;;;;;;;;QAJ5B,MAAM;aAED,CAAC,GAAG,CAAC;kBAEA,MAAM,QAAQ,GAAG,CAAC;mBACjB,MAAM;iBACR,MAAM;;AARtB,wBAeG;AAGH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}