@bagelink/vue 0.0.204 → 0.0.211

package/src/components/ModalBglForm.vue

@@ -0,0 +1,121 @@
+<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>
+			<BagelForm
+				:onDelete="onDelete ? runDelete : undefined"
+				:modelValue="modelValue"
+				@update:modelValue="handleEmit"
+				@submit="runSubmit"
+				:schema="computedFormSchema"
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from 'vue';
+import {
+	Btn, BtnOptions, useEscape, BagelForm,
+} from '@bagelink/vue';
+import '../styles/modal.css';
+import { BglFormSchemaT } from 'dist';
+
+const props = defineProps<{
+	side?: boolean;
+	title?: string;
+	dismissable?: boolean;
+	actions?: BtnOptions[];
+	schema: BglFormSchemaT | (() => BglFormSchemaT);
+	modelValue?: Record<string, any>;
+	// eslint-disable-next-line no-unused-vars
+	onSubmit?: ((formData: any) => Promise<void>);
+	// eslint-disable-next-line no-unused-vars
+	onDelete?: ((id: string) => void);
+}>();
+
+const computedFormSchema = $computed(() => {
+	if (typeof props.schema === 'function') {
+		return props.schema();
+	}
+	return props.schema;
+});
+
+let isActive = $ref<boolean>(false);
+
+const emit = defineEmits(['update:isModalVisible', 'update:modelValue']);
+const handleEmit = (value: any) => {
+	emit('update:modelValue', value);
+};
+
+const closeModal = () => {
+	isActive = false;
+	setTimeout(() => {
+		emit('update:isModalVisible', false);
+	}, 200);
+};
+
+const runSubmit = async (formData: any) => {
+	try {
+		await props.onSubmit?.(formData);
+		closeModal();
+	} catch (err) {
+		console.error(err);
+	}
+};
+
+const runDelete = () => {
+	props.onDelete?.(props.modelValue?.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>
+.modal-title {
+	margin-top: 0.5rem;
+}
+
+@media screen and (max-width: 910px) {
+	.modal-title {
+		margin-top: 1rem;
+	}
+}
+</style>

package/src/components/TabbedLayout.vue

@@ -1,65 +1,65 @@
 <template>
-  <div class="h-100 grid list-view gap-3">
-    <div class="card tabs-top">
-      <slot name="top-section" />
-      <div class="tabs grid auto-flow-columns fit-content">
-        <div
-          v-for="tab in tabs"
-          :class="{
-            active:
-              tab === activeTab ||
-              tab === router.currentRoute.value.path.split('/').slice(-1)[0],
-          }"
-          class="tab"
-          :key="tab"
-          @click="changeTab(tab)"
-        >
-          {{ tab }}
-        </div>
-      </div>
-    </div>
-    <!-- <TransitionRouterView v-if="baseRoute" /> -->
-    <div
-      class="list-content"
-      v-for="tab in tabs.filter((item) => item === activeTab)"
-      :key="tab"
-    >
-      <slot :name="tab" :key="tab" />
-    </div>
-  </div>
+	<div class="h-100 grid list-view gap-3" :class="{'side-tabs': sideTabs}">
+		<div class="card tabs-top">
+			<slot name="top-section" />
+			<div class="tabs grid auto-flow-columns fit-content">
+				<div
+					v-for="tab in tabs"
+					:class="{
+						active:
+							tab === activeTab ||
+							tab === router?.currentRoute.value.path.split('/').slice(-1)[0],
+					}"
+					class="tab"
+					:key="tab"
+					@click="changeTab(tab)"
+				>
+					{{ tab }}
+				</div>
+			</div>
+		</div>
+		<div
+			class="list-content"
+			v-for="tab in tabs.filter((item) => item === activeTab)"
+			:key="tab"
+		>
+			<slot :name="tab" :key="tab" />
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from "vue";
-import type { Router } from "vue-router";
+import { onMounted } from 'vue';
+import type { Router } from 'vue-router';
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(['update:modelValue']);
 
 let activeTab = $ref<string>();
 const props = defineProps<{
   title?: string;
   tabs: string[];
   modelValue?: string;
-  router: Router;
+  router?: Router;
+  sideTabs?: boolean;
 }>();
 
 function changeTab(tab: string) {
-  const { router } = props;
-  activeTab = tab;
-  void router.push({
-    path: router.currentRoute.value.path,
-    query: { ...router.currentRoute.value.query, t: tab },
-    hash: router.currentRoute.value.hash,
-  });
-  emit("update:modelValue", activeTab);
+	activeTab = tab;
+	emit('update:modelValue', activeTab);
+	if (!props.router) return;
+	void props.router?.push({
+		path: props.router.currentRoute.value.path,
+		query: { ...props.router.currentRoute.value.query, t: tab },
+		hash: props.router.currentRoute.value.hash,
+	});
 }
 
 onMounted(() => {
-  const firstTab =
+	const firstTab =
     props.modelValue ||
-    props.router.currentRoute.value.query.t ||
+    props.router?.currentRoute.value.query.t ||
     props.tabs[0];
-  activeTab = firstTab as string;
+	activeTab = firstTab as string;
 });
 </script>
 
@@ -68,7 +68,20 @@ onMounted(() => {
   text-transform: capitalize;
 }
 
-.card.tabs-top {
-  /* width: 99%; */
+.side-tabs{
+  display: flex;
+}
+.side-tabs .tabs-top{
+ margin-inline-end: 1rem;
+}
+.side-tabs .tabs{
+  display: block;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+.side-tabs .tab{
+ border: none;
 }
 </style>

package/src/components/form/BglField.vue

@@ -4,6 +4,7 @@
 		v-bind="bindAttrs(field?.attrs||{}, props.modelValue[field.id || ''], props.modelValue,)"
 		:is="field.$el || 'div'"
 		:label="field.label"
+		:id="field.id"
 		:placeholder="field.placeholder || field.label"
 		:modelValue="props.modelValue[field.id || '']"
 		@update:modelValue="($event:any)=>emits('update:modelValue', $event)"

package/src/components/form/index.ts

@@ -2,5 +2,6 @@ export { default as ItemRef } from './ItemRef.vue';
 export { default as MaterialIcon } from './MaterialIcon.vue';
 export { default as PlainInputField } from './PlainInputField.vue';
 export { default as BglForm } from './BglForm.vue';
+export { default as BagelForm } from './BglForm.vue';
 export { default as BglField } from './BglField.vue';
 export * from './inputs';

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

@@ -1,15 +1,20 @@
 <template>
-	<div class="flex gap-2 flex-wrap">
-		<div class="radio-pill" v-for="({id,label,value}, index) in cumputedOptions" :key="index">
-			<input
-				type="radio"
-				:id="id"
-				:name="name"
-				:value="value"
-				:checked="selectedValue === value"
-				@change="handleSelect"
-			>
-			<label :for="id">{{ label }}</label>
+	<div class="bagel-input">
+		<label class="pb-025" >
+			{{ label  }}
+		</label>
+		<div class="flex gap-2 flex-wrap">
+			<div class="radio-pill" v-for="({optioId,label,value}, index) in cumputedOptions" :key="index">
+				<input
+					type="radio"
+					:id="optioId"
+					:name="id"
+					:value="value"
+					:checked="selectedValue === value"
+					@change="handleSelect"
+				>
+				<label :for="optioId">{{ label }}</label>
+			</div>
 		</div>
 	</div>
 </template>
@@ -18,7 +23,7 @@
 import { onMounted, watch } from 'vue';
 
 interface RadioOption {
-	id: string;
+	optioId: string;
 	label: string;
 	value: any;
 }
@@ -28,11 +33,12 @@ const props = defineProps<{
 	options?: RadioOption[],
 	stringOptions: string[],
 	modelValue: any,
-	name: string,
+	id?: string,
+	label?: string,
 }>();
 
 const cumputedOptions = $computed(() => props.options || props.stringOptions.map((v) => ({
-	id: v,
+	optioId: v,
 	label: v,
 	value: v,
 })));

package/src/components/index.ts

@@ -4,6 +4,7 @@ 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 DropDown } from './DropDown.vue';
 export { default as ListView } from './ListView.vue';
 export { default as ListItem } from './ListItem.vue';

package/src/plugins/modal.ts

@@ -3,8 +3,9 @@ import {
 } from 'vue';
 import type { Plugin } from 'vue';
 import type { BtnOptions } from '@bagelink/vue';
-import { Modal, ModalForm } from '@bagelink/vue';
+import { Modal, ModalForm, ModalBglForm } from '@bagelink/vue';
 import type { FormKitSchemaDefinition } from '@formkit/core';
+import { BglFormSchemaT } from 'dist/types';
 
 interface ModalOptions {
 	title?: string;
@@ -22,13 +23,15 @@ interface ModalFormOptions extends ModalOptions {
 	onSubmit: (val: any) => void;
 	// eslint-disable-next-line no-unused-vars
 	onDelete?: (id: string) => void;
-	schema: FormKitSchemaDefinition;
+	schema: FormKitSchemaDefinition | BglFormSchemaT;
 }
 
 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
 	modalForm: (options: ModalFormOptions, slots?: Record<string, any>) => void;
 	// eslint-disable-next-line no-unused-vars
 	hideModal: (index?: number) => void;
@@ -45,7 +48,7 @@ export const useModal = (): ModalApi => {
 
 interface ModalComponentProps {
 	componentSlots: Record<string, any>,
-	isModalForm: boolean,
+	modalType: 0 | 1 | 2,
 	modalOptions: ModalOptions | ModalFormOptions
 }
 
@@ -59,20 +62,21 @@ export const ModalPlugin: Plugin = {
 		};
 
 		const showModal = (
-			isForm: boolean,
+			modalType: 0 | 1 | 2,
 			options: ModalOptions | ModalFormOptions,
 			slots: Record<string, any> = {},
 		) => {
 			modalStack.push({
 				modalOptions: options,
-				isModalForm: isForm,
+				modalType,
 				componentSlots: slots,
 			});
 		};
 
 		app.provide(ModalSymbol, {
-			modalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal(true, options, slots),
-			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal(false, options, slots),
+			modalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal(1, options, slots),
+			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal(0, options, slots),
+			showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal(2, options, slots),
 			hideModal: (index = modalStack.length - 1) => hideModal(index),
 			// modalOptions,
 		});
@@ -85,7 +89,11 @@ export const ModalPlugin: Plugin = {
 			},
 			render() {
 				return modalStack.map((modal, index) => {
-					const renderComponent = modal.isModalForm ? ModalForm : Modal;
+					let renderComponent;
+					if (modal.modalType === 1) renderComponent = ModalForm;
+					else if (modal.modalType === 2) renderComponent = ModalBglForm;
+					else renderComponent = Modal;
+
 					return h(
 						renderComponent,
 						{

package/src/types/BagelForm.ts

@@ -14,6 +14,8 @@ export type Field<T = Record<string, any>> = {
   children?: Field<T>[];
   attrs?: Attributes<T>;
   required?: boolean;
+  hint?: string;
+  'v-if'?: string | boolean | ((val: any, row: T) => boolean);
 }
 
 export interface SelectBagelField {

package/src/types/BtnOptions.ts

@@ -12,5 +12,5 @@ export interface BtnOptions {
 	loading?: boolean;
 	role?: string;
 	value?: string;
-
+	border?: boolean;
 }

package/src/types/materialIcons.ts

@@ -528,6 +528,7 @@ export type MaterialIcons =
     | 'check_in_out'
     | 'check_indeterminate_small'
     | 'check_small'
+    | 'checkbook'
     | 'checklist'
     | 'checklist_rtl'
     | 'checkroom'