@bagelink/vue 0.0.268 → 0.0.276

package/dist/types/BagelForm.d.ts

@@ -20,7 +20,7 @@ export type BaseBagelField<T = Record<string, any>> = {
     } | string | number | Record<string, any>)[];
     defaultValue?: any;
     transform?: (val?: any, rowData?: Record<string, any>) => any;
-    onUpdate?: (val: any, fieldData?: any, rowData?: Record<string, any>) => void;
+    onUpdate?: (val: any, rowData?: Record<string, any>) => void;
     'v-if'?: string | boolean | ((val: any, row: T) => boolean);
 };
 export interface InputBagelField<T> extends BaseBagelField<T> {

package/dist/types/BagelForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEhG,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,cAAc,CAAC;AAE1F,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,GAAG;IACjC,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAA;CAC/C;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IACpD,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC;IAC1G,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,GAAG,CAAC;IAC9D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC9E,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC;CAC7D,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAC3D,GAAG,EAAE,MAAM,GAAG,OAAO,SAAS,CAAC;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAC5D,GAAG,EAAE,QAAQ,GAAG,OAAO,WAAW,CAAC;IACnC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,MAAM,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;AAE1G,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC"}
+{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEhG,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,cAAc,CAAC;AAE1F,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,GAAG;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAA;CAC9C;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IACrD,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC;IAC1G,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,GAAG,CAAC;IAC9D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC;CAC5D,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAC5D,GAAG,EAAE,MAAM,GAAG,OAAO,SAAS,CAAC;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAC7D,GAAG,EAAE,QAAQ,GAAG,OAAO,WAAW,CAAC;IACnC,EAAE,EAAE,MAAM,CAAC;CACX;AAED,MAAM,MAAM,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;AAE1G,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC"}

package/dist/utils/clickOutside.d.ts

@@ -0,0 +1,7 @@
+import type { DirectiveBinding } from 'vue';
+declare const _default: {
+    beforeMount(el: any, binding: DirectiveBinding): void;
+    unmounted(el: any): void;
+};
+export default _default;
+//# sourceMappingURL=clickOutside.d.ts.map

package/dist/utils/clickOutside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickOutside.d.ts","sourceRoot":"","sources":["../../src/utils/clickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;;oBAG3B,GAAG,WAAW,gBAAgB;kBAQhC,GAAG;;AATlB,wBAYE"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.268",
+  "version": "0.0.276",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -52,7 +52,7 @@
   ],
   "devDependencies": {
     "@vue-macros/reactivity-transform": "^0.4.3",
-    "vue": "^3.4.15"
+    "vue": "^3.4.19"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",
@@ -113,6 +113,7 @@
     "access": "public"
   },
   "dependencies": {
+    "floating-vue": "^5.2.2",
     "type-fest": "^4.10.2",
     "vue-multiselect": "3.0.0-beta.3"
   },

package/src/components/Accordion.vue

@@ -0,0 +1,15 @@
+<template>
+	<div>
+		<slot />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { reactive, provide } from 'vue';
+
+const state = reactive({
+	openItem: null as string | null,
+});
+
+provide('accordionState', state);
+</script>

package/src/components/AccordionItem.vue

@@ -1,13 +1,14 @@
 <template>
 	<div class="accordion-item">
-		<div class="accordion-head" @click="toggle()">
-			{{ label }}
-			<div class="accordion-icon" :class="{open}" >
+		<button @click="toggle()" :aria-expanded="open ? 'true' : 'false'" class="accordion-head"
+			:aria-controls="`accordion-body-${id}`">
+			<span class="accordion-label">{{ label }}</span>
+			<div class="accordion-icon" :class="{ open }">
 				<MaterialIcon icon="expand_more" />
 			</div>
-		</div>
+		</button>
 		<Transition name="expand">
-			<div v-if="open" class="accordion-body">
+			<div v-if="open" class="accordion-body" :id="`accordion-body-${id}`" :aria-hidden="open ? 'false' : 'true'">
 				<slot />
 			</div>
 		</Transition>
@@ -16,57 +17,80 @@
 
 <script lang="ts" setup>
 import { MaterialIcon } from '@bagelink/vue';
+import { watch, inject } from 'vue';
 
-defineProps<{
-    label: string,
+const props = defineProps<{
+	label: string,
+	id?: string,
 }>();
-
 let open = $ref(false);
 
+const accordionState = inject('accordionState') as { openItem: string | null };
+const id = props.id || Math.random().toString(36).substring(7);
+
+watch(() => accordionState.openItem, (currentOpenId) => {
+	if (currentOpenId !== id) {
+		open = false;
+	}
+}, { immediate: true });
+
 function toggle() {
 	open = !open;
-	console.log('toggle', open);
+	if (open) accordionState.openItem = id;
+	else if (accordionState.openItem === id) accordionState.openItem = null;
 }
 </script>
 
 <style scoped>
 .accordion-item {
-  border-bottom: 1px solid var(--border-color);
-  transition: all 0.2s ease;
-  cursor: pointer;
-  overflow: hidden;
+	border-bottom: 1px solid var(--border-color);
+	transition: all 0.2s;
+	cursor: pointer;
+	overflow: hidden;
 }
 
 .accordion-head {
-  height: var( --input-height);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+	height: var(--input-height);
+	background: transparent;
+	display: flex;
+	width: 100%;
+	align-items: center;
+	justify-content: space-between;
 }
 
 .accordion-icon {
-  transition: all 0.2s ease;
+	transition: all 0.2s ease;
 }
+
 .accordion-icon.open {
-  transform: rotate(180deg);
+	transform: rotate(180deg);
 }
+
+.accordion-label {
+	font-weight: bold;
+}
+
+.accordion-head:hover .accordion-label {
+	text-decoration: underline;
+}
+
+.accordion-body {}
 </style>
 
 <style>
 .expand-enter-active,
 .expand-leave-active {
-  transition: all 0.5s;
+	transition: all 0.5s;
+	transition-delay: 0ms;
 }
 
 .expand-enter-from,
 .expand-leave-to {
-  max-height: 0;
-  opacity: 0.5;
+	max-height: 0;
 }
 
 .expand-enter-to,
 .expand-leave-from {
-  max-height: 100vh;
-  opacity: 1;
+	max-height: 300px;
 }
 </style>

package/src/components/ComboBox.vue

@@ -0,0 +1,132 @@
+<template>
+	<Dropdown placement="auto-start" class="bagel-input combobox">
+		<Btn class="combobox-btn" border color="black" @click="toggle"
+			v-bind="{ 'icon.end': open ? 'unfold_less' : 'unfold_more' }">
+			{{
+				valueToLabel(selectedItem) ||
+				placeholder || 'Select' }}
+		</Btn>
+		<template #popper="{ hide }">
+			<Card border thin class="combobox-options">
+				<TextInput v-if="searchable" ref="searchInput" dense :placeholder="'Search'" icon="search" v-model="search" />
+				<div class="combobox-option" v-for="(option, i) in filteredOptions" :key="`${option}${i}`" @click="() => {
+					select(option)
+					hide();
+				}" :class="{ selected: option === selectedItem }">
+					<span>
+						{{ label(option) }}
+					</span>
+					<Icon v-if="isSelected(option)" icon="check" />
+				</div>
+			</Card>
+		</template>
+	</Dropdown>
+</template>
+
+<script lang="ts" setup>
+import { Dropdown } from 'floating-vue';
+import 'floating-vue/style.css';
+import {
+	TextInput, Btn, Card, Icon,
+} from '@bagelink/vue';
+
+type Option = string | number | Record<string, any> | { label: string, value: string | number };
+let open = $ref(false);
+let selectedItem = $ref<Option>();
+
+const searchInput = $ref<HTMLInputElement | null>(null);
+
+const props = defineProps<{
+	options: Option[];
+	placeholder?: string;
+	disabled?: boolean;
+	modelValue?: Option;
+	searchable?: boolean;
+}>();
+let search = $ref('');
+
+const toggle = () => {
+	open = !open;
+	if (!open) search = '';
+	if (open) setTimeout(() => (searchInput as any)?.$el?.querySelector('input')?.focus(), 100);
+};
+
+const valueToLabel = (value?: Option) => {
+	if (!value) return '';
+	const option = props.options.find((option) => {
+		if (typeof option === 'string' || typeof option === 'number') return option === value;
+		return option.value === value;
+	});
+	if (!option) return value;
+	return label(option);
+};
+
+const emit = defineEmits(['update:modelValue']);
+
+const label = (option: Option) => {
+	if (typeof option === 'string') return option;
+	if (typeof option === 'number') return `${option}`;
+	return option.label;
+};
+
+const isSelected = (option: Option) => {
+	if (typeof option === 'string' || typeof option === 'number') return option === selectedItem;
+	return option.value === selectedItem;
+};
+
+const filteredOptions = $computed(() => props.options.filter((option) => {
+	const searchTerm = new RegExp(search, 'gi');
+	if (typeof option === 'string') return option.match(searchTerm);
+	if (typeof option === 'number') return `${option}`.match(searchTerm);
+	return option.label.match(searchTerm);
+}));
+
+const select = (option: Option) => {
+	if (typeof option === 'string') selectedItem = option;
+	else if (typeof option === 'number') selectedItem = option;
+	else selectedItem = option.value;
+	emit('update:modelValue', selectedItem);
+	open = false;
+};
+</script>
+
+<style scoped>
+.combobox {
+	width: 100%;
+}
+
+.combobox-option {
+	padding: 6px 12px;
+	cursor: pointer;
+	border-radius: 5px;
+	transition: all 0.2s;
+	display: flex;
+	justify-content: space-between;
+	width: 300px;
+}
+
+.combobox-options {
+	max-height: 300px;
+	overflow-y: auto;
+}
+
+.combobox-option:hover {
+	background: var(--bgl-gray-20);
+}
+</style>
+
+<style>
+.combobox-btn .bgl_btn-flex {
+	justify-content: space-between;
+}
+
+.v-popper__arrow-container {
+	display: none;
+}
+
+.v-popper--theme-dropdown .v-popper__inner {
+	border: none;
+	background: transparent;
+	border-radius: var(--card-border-radius);
+}
+</style>

package/src/components/ModalForm.vue

@@ -1,41 +1,13 @@
 <template>
-	<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"
-		>
+	<Modal @onUpdate:isModalVisible="props['onUpdate:isModalVisible']" :side="side" ref="modal" :dismissable="dismissable"
+		:title="title">
+		<BagelForm @submit="runSubmit" ref="form" 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"
-				/>
+				<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"
-			/>
+			<Btn value="Submit" @click="runSubmit" />
 		</template>
 	</Modal>
 </template>

package/src/components/form/BglField.vue

@@ -1,17 +1,32 @@
 <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, denullify(fieldData, field.id), formData)">
+	<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" />
+		<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, denullify,
+	type Field, bindAttrs, classify, SelectInput, TextInput, ToggleInput, CheckInput,
 } from '@bagelink/vue';
 
 const props = withDefaults(defineProps<{

package/src/components/form/BglFieldSet.vue

@@ -0,0 +1,13 @@
+<template>
+	<fieldset ref="fieldSet">
+		<slot />
+	</fieldset>
+</template>
+<script lang="ts" setup>
+import { defineExpose } from 'vue';
+
+const fieldSet = $ref<HTMLFieldSetElement | null>(null);
+const isDirty = $ref(false);
+const validateForm = () => fieldSet?.reportValidity?.();
+defineExpose({ validateForm, isDirty });
+</script>

package/src/components/form/BglForm.vue

@@ -1,29 +1,12 @@
 <template>
 	<template v-if="id">
-		<BglField
-			v-for="(field, i) in schema"
-			:key="field.id || `${i}p`"
-			:field="field"
-			v-model="data"
-		/>
+		<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"
-	>
-		<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"
-		/>
+	<form v-else 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" />
 	</form>
 </template>
 

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

@@ -43,7 +43,7 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue']);
 
-let date = $computed<string | Date>({
+const date = $computed<string | Date>({
 	get: () => props.modelValue || '',
 	set: (val) => {
 		const d = typeof val === 'string' ? new Date(val) : val;
@@ -56,7 +56,11 @@ let date = $computed<string | Date>({
 });
 
 onMounted(() => {
-	if (props.defaultValue) date = props.defaultValue;
+	if (
+		props.defaultValue && date === ''
+	) {
+		Object.assign(date, { date: props.defaultValue });
+	}
 });
 </script>
 

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

@@ -16,13 +16,7 @@
 				v-model="seletValue"
 				v-bind="extraProps"
 			/>
-			<input
-				v-model="seletValue"
-				type="hidden"
-				:name="id"
-				:required
-				v-bind="extraProps"
-			>
+			<!-- <input v-model="dataValue" type="hidden" :name="id" :required v-bind="extraProps"> -->
 		</label>
 	</div>
 </template>
@@ -58,7 +52,6 @@ const seletValue = $computed({
 	set: (val?: Option) => {
 		dataValue = val?.value;
 		emit('update:modelValue', dataValue);
-		setTimeout(() => multiselect?.deactivate(), 1);
 	},
 });
 
@@ -203,7 +196,7 @@ fieldset[disabled] .multiselect {
 }
 
 .multiselect--active .multiselect__input {
-		margin-top: -0.6rem;
+	margin-top: -0.6rem;
 }
 
 .multiselect__input::placeholder {

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

@@ -2,15 +2,13 @@
 	<div
 		class="bagel-input text-input"
 		:class="{
-			dense, small, shrink, toggleEdit, editMode,	code,
+			dense, small, shrink, toggleEdit, editMode, code,
 			textInputIconWrap: icon,
 			txtInputIconStart: iconStart,
 		}"
 		:title="title"
 	>
-		<label
-			:for="id"
-		>
+		<label :for="id">
 			{{ label }}
 			<input
 				v-if="!multiline && !autoheight && !code"
@@ -19,7 +17,8 @@
 				:id="id"
 				v-model="inputVal"
 				:type="type"
-				:rows="1" ref="input"
+				:rows="1"
+				ref="input"
 				:placeholder="placeholder || label"
 				:disabled="!editMode"
 				:required="required"
@@ -33,7 +32,8 @@
 				:id="id"
 				v-model="inputVal"
 				:type="type"
-				:rows="rows" ref="input"
+				:rows="rows"
+				ref="input"
 				:placeholder="placeholder || label"
 				:disabled="!editMode"
 				:required="required"
@@ -45,7 +45,8 @@
 		</label>
 
 		<MaterialIcon
-			class="iconStart" v-if="iconStart"
+			class="iconStart"
+			v-if="iconStart"
 			:icon="iconStart"
 		/>
 		<MaterialIcon
@@ -53,7 +54,10 @@
 			:icon="icon"
 		/>
 		<Btn
-			class="toggleEditBtn" v-if="toggleEdit" thin @click="toggleEditAction"
+			class="toggleEditBtn"
+			v-if="toggleEdit"
+			thin
+			@click="toggleEditAction"
 			:icon="editMode ? 'check'
 				: 'edit'"
 			flat

package/src/components/form/inputs/index.ts

@@ -5,7 +5,6 @@ export { default as SelectInput } from './SelectInput.vue';
 export { default as RichTextEditor } from './RichTextEditor.vue';
 export { default as TableField } from './TableField.vue';
 export { default as TextInput } from './TextInput.vue';
-export { default as TextArea } from './TextArea.vue';
 export { default as Checkbox } from './Checkbox.vue';
 export { default as ColorPicker } from './ColorPicker.vue';
 export { default as DatePicker } from './DatePicker.vue';

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export { default as LangText } from './LangText.vue';
 export { default as RTXEditor } from './RTXEditor.vue';
 export { default as MaterialIcon } from './MaterialIcon.vue';
+export { default as Icon } from './MaterialIcon.vue';
 export { default as NavBar } from './NavBar.vue';
 export { default as Btn } from './Btn.vue';
 export { default as Modal } from './Modal.vue';
@@ -18,6 +19,8 @@ export { default as DataPreview } from './DataPreview.vue';
 export { default as Card } from './Card.vue';
 export { default as Avatar } from './Avatar.vue';
 export { default as Title } from './Title.vue';
+export { default as Accordion } from './Accordion.vue';
+export { default as ComboBox } from './ComboBox.vue';
 
 export * from './charts';
 export * from './form';

package/src/plugins/bagel.ts

@@ -1,6 +1,9 @@
+// import { vTooltip } from 'floating-vue';
+import FloatingVue from 'floating-vue';
 import { inject } from 'vue';
 import type { InjectionKey, Plugin } from 'vue';
 import { Bagel } from '@bagelink/sdk';
+import clickOutside from '../utils/clickOutside';
 
 export const bagelInjectionKey = Symbol('bagel') as InjectionKey<Bagel>;
 export const i18nTInjectionKey = Symbol('bagel') as InjectionKey<
@@ -29,11 +32,20 @@ export interface BagelOptions {
 	// eslint-disable-next-line no-unused-vars
 	i18nT?: (key: string) => string
 }
-
 export const BagelVue: Plugin = {
 	install: (app, options: BagelOptions) => {
 		const bagel = new Bagel({ host: options.host, onError: options.onError });
-
+		app.directive('click-outside', clickOutside);
+
+		app.use(FloatingVue, {
+			themes: {
+				'bgl-theme': {
+					triggers: ['click'],
+					autoHide: true,
+					placement: 'bottom',
+				},
+			},
+		});
 		app.config.globalProperties.$bagel = bagel;
 		app.provide(bagelInjectionKey, bagel);
 		app.config.globalProperties.$i18T = options?.i18nT || ((key?: string) => key);

package/src/plugins/modal.ts

@@ -17,7 +17,7 @@ export interface ModalFormOptions {
 	side?: boolean;
 	title?: string;
 	dismissable?: boolean;
-	schema: BglFormSchemaT<any> | (() => BglFormSchemaT);
+	schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT
 	onSubmit?: (formData: any) => Promise<any>;
 	onDelete?: (id: string) => Promise<void>;
 	onError?: ((err: any) => void);