@bagelink/vue 0.0.232-beta.0 → 0.0.233-beta.0

package/dist/types/BagelForm.d.ts

@@ -1,10 +1,9 @@
-import type { RequireAllOrNone } from 'type-fest';
 export type AttributeValue = string | number | boolean | null | undefined | Record<string, any>;
 export type AttributeFn<T = Record<string, any>> = (field: any, row: T) => AttributeValue;
 export interface Attributes<T = any> {
     [key: string]: AttributeValue | AttributeFn<T>;
 }
-export type Field<T = Record<string, any>> = RequireAllOrNone<{
+export type Field<T = Record<string, any>> = {
     $el?: any;
     id?: string;
     label?: string;
@@ -22,7 +21,7 @@ export type Field<T = Record<string, any>> = RequireAllOrNone<{
     transform?: (val?: any, rowData?: Record<string, any>) => any;
     onUpdate?: (val: any, fieldData?: any, rowData?: Record<string, any>) => void;
     'v-if'?: string | boolean | ((val: any, row: T) => boolean);
-}, 'id' | '$el'>;
+};
 export interface SelectBagelField {
     inputType: 'SelectField';
     options: string | {

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,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,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,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,gBAAgB,CAAC;IAC5D,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,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAC,MAAM,GAAC,MAAM,CAAC,EAAE,CAAC;IAC/E,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,EAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,GAAG,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,SAAS,CAAC,EAAC,GAAG,EAAE,OAAO,CAAC,EAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC5E,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC;CAC7D,EACD,IAAI,GAAG,KAAK,CACX,CAAA;AAED,MAAM,WAAW,gBAAgB;IAChC,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;CAC9D;AAED,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,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,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAC3C,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,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACnF,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,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,gBAAgB;IAC/B,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;CAC/D;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.232-beta.0",
+  "version": "0.0.233-beta.0",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/AccordionItem.vue

@@ -1,14 +1,16 @@
 <template>
 	<div class="accordion-item">
-		<div class="accordion-title" @click="toggle()">
+		<div class="accordion-head" @click="toggle()">
 			{{ label }}
 			<div class="accordion-icon" :class="{open}" >
-				<MaterialIcon icon="keyboard_arrow_down" />
+				<MaterialIcon icon="expand_more" />
 			</div>
 		</div>
-		<div v-if="open" class="accordion-content" >
-			<slot />
-		</div>
+		<Transition name="expand">
+			<div v-if="open" class="accordion-body">
+				<slot />
+			</div>
+		</Transition>
 	</div>
 </template>
 
@@ -29,36 +31,13 @@ function toggle() {
 
 <style scoped>
 .accordion-item {
-  border-top: 1px solid var(--bgl-gray);
-  border-bottom: 1px solid var(--bgl-gray);
-  width: 100%;
-  max-width: 100%;
-  margin: -1 auto 0;
-  border-radius: 0;
-  background: transparent;
-  color: #000;
-  font-size: 1rem;
-  font-weight: 400;
-  text-align: left;
+  border-bottom: 1px solid var(--border-color);
   transition: all 0.2s ease;
+  cursor: pointer;
   overflow: hidden;
 }
 
-.accordion-title {
-  width: 100%;
-  max-width: 100%;
-  margin: 0 auto;
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  color: #000;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-  text-align: left;
-  transition: all 0.2s ease;
-  cursor: pointer;
+.accordion-head {
   height: var( --input-height);
   display: flex;
   align-items: center;
@@ -71,30 +50,23 @@ function toggle() {
 .accordion-icon.open {
   transform: rotate(180deg);
 }
+</style>
 
-.accordion-content {
-  width: 100%;
-  max-width: 100%;
-  margin: 0 auto;
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  color: #000;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-  text-align: left;
-  transition: all 0.2s ease;
+<style>
+.expand-enter-active,
+.expand-leave-active {
+  transition: all 0.5s;
+}
+
+.expand-enter-from,
+.expand-leave-to {
   max-height: 0;
-  animation: expand 1s ease forwards;
+  opacity: 0.5;
 }
-@keyframes expand {
-  0% {
-    max-height: 0;
-  }
-  100% {
-    max-height: 100vh;
-  }
+
+.expand-enter-to,
+.expand-leave-from {
+  max-height: 100vh;
+  opacity: 1;
 }
 </style>

package/src/components/Card.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="card" :class="{thin, border, 'h-100':h100}">
+	<div class="card" :class="{thin, border, 'h-100':h100, [bg||'']: bg}">
 		<slot/>
 	</div>
 </template>
@@ -9,5 +9,6 @@ defineProps<{
   thin?: boolean;
   border?: boolean;
   h100?: boolean;
+  bg?: 'gray' | 'light' | 'dark' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'white' | 'transparent';
 }>();
 </script>

package/src/components/ModalBglForm.vue

@@ -1,32 +1,16 @@
 <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">
+		<div class="card modal" @click.stop>
 			<header class="tool-bar">
 				<slot name="toolbar" />
-				<Btn
-					:style="{ float: side ? 'left' : 'right' }"
-					flat
-					icon="close"
-					@click="closeModal"
-				/>
+				<Btn :style="{ float: side ? 'left' : 'right' }" flat icon="close" @click="closeModal" />
 				<h3 class="modal-title">
 					{{ title }}
 				</h3>
 			</header>
-			<BagelForm
-				:onDelete="onDelete ? runDelete : undefined"
-				v-model="formData"
-				@submit="runSubmit"
-				:schema="computedFormSchema"
-			/>
+			<BagelForm :onDelete="onDelete ? runDelete : undefined" v-model="formData" @submit="runSubmit"
+				:schema="computedFormSchema" />
 		</div>
 	</div>
 </template>

package/src/components/TableSchema.vue

@@ -86,9 +86,7 @@ defineProps<{
 	schema: BglFormSchemaT;
 }>();
 
-const emit = defineEmits<{
-	select: [Record<string, any>];
-}>();
+const emit = defineEmits(['select']);
 
 const selectElement = (data: Record<string, any>) => emit('select', data);
 

package/src/components/form/BglField.vue

@@ -1,13 +1,16 @@
 <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="field.$el || 'div'"
-		:label="field.label" :id="field.id" :placeholder="field.placeholder || field.label" v-model="fieldData">
+		: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">
 		<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 } from '@bagelink/vue';
+import {
+	type Field, bindAttrs, classify, SelectInput, TextInput, ToggleInput, CheckInput,
+} from '@bagelink/vue';
 
 const props = withDefaults(defineProps<{
 	field: Field
@@ -15,6 +18,15 @@ const props = withDefaults(defineProps<{
 }>(), {
 	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';
+});
+
 const emit = defineEmits(['update:modelValue']);
 
 const formData = $computed({

package/src/components/form/BglForm.vue

@@ -1,32 +1,33 @@
 <template>
-	<form ref="form" @submit.prevent="runSubmit">
-		<BglField
-			v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data"
-		/>
-		<Btn
-			class="del-top" v-if="data?.id && onDelete" @click="runDelete" value="Delete" flat icon="delete"
-			color="red" thin
-		/>
+	<component :is="id?'div':'form'" 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" />
+		<Btn class="del-top" v-if="data?.id && onDelete" @click="runDelete" value="Delete" flat icon="delete" color="red"
+			thin />
 		<Btn v-if="!$slots.submit && onSubmit" value="Submit" type="submit" thin />
 		<div v-else>
-			<slot name="submit"/>
+			<slot name="submit" />
 		</div>
-	</form>
+	</component>
 </template>
 
 <script lang="ts" setup>
-import { Btn, useModal, BglField } from '@bagelink/vue';
+import {
+	Btn, useModal, BglField, Title,
+} from '@bagelink/vue';
 import { type BglFormSchemaT } from '@bagelink/vue';
 
 const { showModal } = useModal();
 
 const props = withDefaults(
 	defineProps<{
-	schema: BglFormSchemaT;
-	modelValue?: Record<string, any>;
-	onDelete?: ((id: string) => void);
-	onSubmit?: ((data: any) => void);
-}>(),
+		label?: string;
+		id?: string;
+		schema: BglFormSchemaT;
+		modelValue?: Record<string, any>;
+		onDelete?: ((id: string) => void);
+		onSubmit?: ((data: any) => void);
+	}>(),
 	{
 		modelValue: () => ({}),
 	},
@@ -46,11 +47,11 @@ const validateForm = () => form?.reportValidity?.();
 
 defineExpose({ validateForm });
 
-const clearForm = () => Object.assign(data.value, {});
+const clearForm = () => Object.assign(data, {});
 
 const runSubmit = () => {
 	validateForm();
-	emit('submit', data.value);
+	emit('submit', data);
 	clearForm();
 };
 

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

@@ -2,15 +2,9 @@
 	<div
 		class="bagel-input bgl-checkbox"
 		:title="title"
-		:class="{ small: small, 'no-edit': !editMode }"
+		:class="{ small: small}"
 	>
-		<input
-			:id="id"
-			type="checkbox"
-			v-model="inputVal"
-			:class="{ 'no-edit': !editMode }"
-		>
-		<div class="check-square">
+		<div class="check-square" :class="{checked:checked}" @click="checked = !checked">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				height="24" viewBox="0 -960 960 960"
@@ -18,28 +12,26 @@
 			>
 				<path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
 		</div>
-		<label :for="id">
+		<label>
+			<input
+				:id="id"
+				type="checkbox"
+				v-model="checked"
+			>
 			{{ label }}
 		</label>
 	</div>
 </template>
 
 <script setup lang="ts">
-withDefaults(
-	defineProps<{
+defineProps<{
     label: string;
     id?: string;
     title?: string;
-    editMode?: boolean;
     small?: boolean;
-  }>(),
-	{
-		editMode: true,
-		id: Math.random().toString(36).substring(7),
-	},
-);
+  }>();
 
-const inputVal = defineModel<boolean>('modelValue', { default: false });
+const checked = defineModel<boolean>('modelValue', { default: false });
 </script>
 <style>
 :root {
@@ -68,7 +60,7 @@ const inputVal = defineModel<boolean>('modelValue', { default: false });
   user-select: none;
 }
 .bgl-checkbox:hover{
-  filter: brightness(90%);
+  filter: brightness(95%);
 }
 .bgl-checkbox:active{
   filter: var(--bgl-active-filter);
@@ -85,7 +77,7 @@ const inputVal = defineModel<boolean>('modelValue', { default: false });
   justify-content: center;
 }
 
-input:checked ~ .check-square{
+.check-square.checked{
   background: var(--bgl-primary);
 }
 .bgl-checkbox svg{
@@ -94,10 +86,11 @@ input:checked ~ .check-square{
   position: absolute;
   z-index: 2;
   fill: var(--bgl-white);
-  opacity: 0;
   pointer-events: none;
+  transform: scale(0);
+  transition: var(--bgl-transition);
 }
-input:checked ~ .check-square svg{
-  opacity: 1;
+.check-square.checked svg{
+  transform: scale(1);
 }
 </style>

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

@@ -8,33 +8,12 @@
 </template>
 
 <script setup lang="ts">
-import { watch } from 'vue';
 import { MaterialIcon } from '@bagelink/vue';
 
-const props = defineProps({
-	modelValue: Boolean,
+const val = defineModel('modelValue', {
+	type: Boolean,
+	default: false,
 });
-
-const emits = defineEmits(['update:modelValue']);
-
-let val = $ref<boolean>();
-
-watch(
-	() => props.modelValue,
-	(v: boolean) => {
-		if (v === undefined || v === val) return;
-		console.log('v', v);
-		val = v;
-	},
-	{ immediate: true },
-);
-
-watch(
-	() => val,
-	(v) => {
-		if (v !== props.modelValue) emits('update:modelValue', v);
-	},
-);
 </script>
 
 <style scoped>

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

@@ -1,33 +1,22 @@
 <template>
-	<div
-		class="bagel-input"
-		:class="{ small }"
-		:title="field.description"
-		v-if="field.id"
-	>
-		<label :for="field.id">
-			{{ field.label }}
-			<input
-				:id="field.id"
-				v-model="inputVal"
-				type="color"
-				:placeholder="field?.placeholder || field.label"
-				:class="{ 'no-edit': !editMode }"
-				:required="required"
-				v-bind="nativeInputAttrs"
-			>
+	<div class="bagel-input" :class="{ small }" :title="label" v-if="id">
+		<label>
+			{{ label }}
+			<input :id="id" v-model="inputVal" type="color" :placeholder="placeholder || label"
+				:class="{ 'no-edit': !editMode }" :required="required" v-bind="nativeInputAttrs">
 		</label>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { watch } from 'vue';
-import { type BagelField } from '@bagelink/vue';
 
 const emits = defineEmits(['update:modelValue']);
 const props = withDefaults(
 	defineProps<{
-		field: BagelField;
+		label?: string;
+		id?: string;
+		placeholder?: string;
 		modelValue: any;
 		editMode?: boolean;
 		small?: boolean;

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

@@ -10,15 +10,18 @@
 <script setup lang="ts">
 import VDatepicker, { DatePickerInstance } from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
+import { onMounted } from 'vue';
 
 const datePicker = $ref<DatePickerInstance>();
 
-withDefaults(
+const props = withDefaults(
 	defineProps<{
 		label?: string;
 		editMode?: boolean;
 		small?: boolean;
 		enableTime?: boolean;
+		modelValue?: string | Date;
+		defaultValue?: string | Date;
 	}>(),
 	{
 		enableTime: false,
@@ -27,7 +30,23 @@ withDefaults(
 	},
 );
 
-const date = defineModel<string | Date>('modelValue', { default: '' });
+const emit = defineEmits(['update:modelValue']);
+
+let date = $computed<string | Date>({
+	get: () => props.modelValue || '',
+	set: (val) => {
+		const d = typeof val === 'string' ? new Date(val) : val;
+		if (props.enableTime) {
+			emit('update:modelValue', d.toISOString());
+		} else {
+			emit('update:modelValue', d.toISOString().split('T')[0]);
+		}
+	},
+});
+
+onMounted(() => {
+	if (props.defaultValue)	date = props.defaultValue;
+});
 </script>
 
 <style>

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

@@ -3,11 +3,9 @@
 		<label>
 			{{ label }}
 		</label>
-		<div
-			@click="browse" @dragover="dragover" @drop="drop" @dragleave="dragleave" class="fileUploadWrap"
-			:class="{ fileDropZone: !storageFiles.length && !fileQueue.length, dragover: isDragOver }"
-		>
-			<template  v-for="file in storageFiles" :key="file.id">
+		<div @click="browse" @dragover="dragover" @drop="drop" @dragleave="dragleave" class="fileUploadWrap"
+			:class="{ fileDropZone: !storageFiles.length && !fileQueue.length, dragover: isDragOver }">
+			<template v-for="file in storageFiles" :key="file.id">
 				<div class="imagePreviewWrap" v-if="!multiple">
 					<img class="preview" :src="file.url" alt="">
 				</div>
@@ -28,22 +26,12 @@
 					<p class="no-margin">
 						{{ fileQ.name }}
 					</p>
-					<div
-						class="pie"
-						:style="`--p:${fileQ.progress}`"
-						style="--b: 2px"
-						:class="{ complete: fileQ.progress === 100 }"
-					>
-						<span
-							class="progress"
-							v-if="fileQ.progress < 100"
-						>
-							{{`${fileQ.progress.toFixed(0)}`}}
+					<div class="pie" :style="`--p:${fileQ.progress}`" style="--b: 2px"
+						:class="{ complete: fileQ.progress === 100 }">
+						<span class="progress" v-if="fileQ.progress < 100">
+							{{ `${fileQ.progress.toFixed(0)}` }}
 						</span>
-						<MaterialIcon
-							class="success"
-							icon="check"
-						/>
+						<MaterialIcon class="success" icon="check" />
 					</div>
 				</div>
 			</template>
@@ -79,7 +67,7 @@ watch(() => props.files, (newFiles) => {
 }, { immediate: true });
 
 watch(() => storageFiles, (newFiles) => {
-	let idValue:string[] | string = '';
+	let idValue: string[] | string = '';
 	if (props.multiple) idValue = newFiles.map((f) => f.id || '');
 	else idValue = newFiles[0]?.id || '';
 	if (!compareIds(file_ids?.value, idValue)) file_ids.value = idValue;
@@ -116,7 +104,7 @@ const browse = () => {
 	input.onchange = (e: Event) => {
 		const target = e?.target as HTMLInputElement;
 		if (target?.files) {
-			Array.from(target.files).forEach((file:File) => fileQueue.push({ name: file.name, file, progress: 0 }));
+			Array.from(target.files).forEach((file: File) => fileQueue.push({ name: file.name, file, progress: 0 }));
 		}
 		flushQueue();
 	};
@@ -138,7 +126,7 @@ const dragover = (e: DragEvent) => {
 const drop = (e: DragEvent) => {
 	preventDefault(e);
 	if (e.dataTransfer) {
-		Array.from(e.dataTransfer.files).forEach((file:File) => fileQueue.push({ name: file.name, file, progress: 0 }));
+		Array.from(e.dataTransfer.files).forEach((file: File) => fileQueue.push({ name: file.name, file, progress: 0 }));
 	}
 	isDragOver = false;
 	flushQueue();

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

@@ -2,10 +2,8 @@
 	<div class="pb-1">
 		<label :for="id">
 			{{ label }}
-			<Multiselect
-				ref="multiselect" :closeOnSelect="true" :id="id" label="label" trackBy="value" :options="optionList"
-				:required="required" :placeholder="placeholder" v-model="seletValue"
-			/>
+			<Multiselect ref="multiselect" :id="id" label="label" trackBy="value" :options="optionList" :required="required"
+				:placeholder="placeholder" v-model="seletValue" />
 		</label>
 	</div>
 </template>
@@ -40,7 +38,7 @@ const seletValue = $computed({
 	set: (val?: Option) => {
 		dataValue = val?.value;
 		emit('update:modelValue', dataValue);
-		multiselect?.deactivate();
+		setTimeout(() => multiselect?.deactivate(), 1);
 	},
 });
 
@@ -309,12 +307,11 @@ fieldset[disabled] .multiselect {
 
 .multiselect__select::before {
 	position: relative;
-	right: 0;
-	top: calc(var(--input-height) / 2 - var(--input-font-size));
+	background-size: contain;
+	transform: scale(0.5);
+	top: 4px;
 	color: var(--bgl-black);
-	content: "expand_more";
-	font-family: "Material Icons";
-	font-size: var(--input-font-size);
+	content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23b7b7b7' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/></svg>")
 }
 
 .multiselect__placeholder {
@@ -387,7 +384,8 @@ fieldset[disabled] .multiselect {
 	right: 0;
 	position: absolute;
 	width: calc(var(--input-height) * 0.8);
-	height: calc(var(--input-height) * 0.8);;
+	height: calc(var(--input-height) * 0.8);
+	;
 	text-align: center;
 	font-size: 13px;
 }