@bagelink/vue 1.4.77 → 1.4.81

package/dist/utils/elementUtils.d.ts

@@ -0,0 +1,104 @@
+import { BaseBagelField, IconType, Option, Path } from '..';
+export type DefaultPathsOptions = Record<string, any>;
+export type PathsOptions = Record<string, any>;
+export interface BaseElementField<T, P extends Path<T, PO>, PO extends PathsOptions = DefaultPathsOptions> extends Partial<BaseBagelField<T, P, PO>> {
+    $el: string;
+    id?: P;
+    class?: string;
+    vIf?: boolean | (() => boolean);
+    style?: Record<string, any>;
+    attrs?: Record<string, any>;
+    onClick?: () => void;
+    children?: BaseElementField<T, any>[];
+}
+export interface BtnElementOptions<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions> extends Partial<BaseElementField<T, P, PO>> {
+    text?: string;
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: IconType;
+    iconPosition?: 'left' | 'right';
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+}
+export interface TxtElementOptions<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions> extends Partial<BaseElementField<T, P, PO>> {
+    text?: string;
+    tag?: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+    color?: string;
+    align?: 'left' | 'center' | 'right' | 'justify';
+}
+export interface ImgElementOptions<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions> extends Partial<BaseElementField<T, P, PO>> {
+    src?: string;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    loading?: 'lazy' | 'eager';
+    fit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none';
+    rounded?: boolean | 'sm' | 'md' | 'lg' | 'full';
+    fallback?: string;
+}
+export interface DropdownElementOptions<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions> extends Partial<BaseElementField<T, P, PO>> {
+    options?: Option[] | (() => Option[]);
+    placeholder?: string;
+    searchable?: boolean;
+    multiselect?: boolean;
+    clearable?: boolean;
+    onSelect?: (value: any) => void;
+    onSearch?: (search: string) => any;
+}
+export interface ListItemElementOptions<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions> extends Partial<BaseElementField<T, P, PO>> {
+    title?: string;
+    subtitle?: string;
+    icon?: IconType;
+    avatar?: string;
+    badge?: string | number;
+    actions?: Array<{
+        label: string;
+        onClick: () => void;
+        icon?: IconType;
+    }>;
+    clickable?: boolean;
+    divider?: boolean;
+}
+export declare function btn<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(options: BtnElementOptions<T, P, PO>): BaseElementField<T, P, PO>;
+export declare function btn<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id: P): BaseElementField<T, P, PO>;
+export declare function btn<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id: P, text: string): BaseElementField<T, P, PO>;
+export declare function btn<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id: P, icon: IconType): BaseElementField<T, P, PO>;
+export declare function btn<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id: P, text: string, options: BtnElementOptions<T, P, PO>): BaseElementField<T, P, PO>;
+export declare function btn<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id: P, icon: IconType, options: BtnElementOptions<T, P, PO>): BaseElementField<T, P, PO>;
+export declare function btn<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id: P, textOrIcon: string | IconType, options: BtnElementOptions<T, P, PO>): BaseElementField<T, P, PO>;
+export declare function getBaseElementField<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(elementType: string, id?: P, options?: Partial<BaseElementField<T, P, PO>>): BaseElementField<T, P, PO>;
+export declare function iconBtn<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id?: P, icon?: IconType, options?: BtnElementOptions<T, P, PO>): BaseElementField<T, P, PO>;
+export declare function txt<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(options: TxtElementOptions<T, P, PO>): BaseElementField<T, P, PO>;
+export declare function txt<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id: P): BaseElementField<T, P, PO>;
+export declare function txt<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id: P, text: string): BaseElementField<T, P, PO>;
+export declare function txt<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id: P, text: string, tag: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'): BaseElementField<T, P, PO>;
+export declare function txt<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id: P, text: string, options: TxtElementOptions<T, P, PO>): BaseElementField<T, P, PO>;
+export declare function img<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(options: ImgElementOptions<T, P, PO>): BaseElementField<T, P, PO>;
+export declare function img<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id: P): BaseElementField<T, P, PO>;
+export declare function img<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id: P, src: string): BaseElementField<T, P, PO>;
+export declare function img<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id: P, src: string, alt: string): BaseElementField<T, P, PO>;
+export declare function img<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id: P, src: string, options: ImgElementOptions<T, P, PO>): BaseElementField<T, P, PO>;
+export declare function dropdownElement<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id?: P, options?: Option[] | (() => Option[]), config?: DropdownElementOptions<T, P, PO>): BaseElementField<T, P, PO>;
+export declare function listItemElement<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id?: P, title?: string, options?: ListItemElementOptions<T, P, PO>): BaseElementField<T, P, PO>;
+export declare function containerElement<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id?: P, children?: BaseElementField<T, any>[], options?: Partial<BaseElementField<T, P, PO>>): BaseElementField<T, P, PO>;
+export declare function findElementById<T>(id: string, elements: BaseElementField<T, any>[]): BaseElementField<T, any> | undefined;
+export declare function column<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(id?: P, labelOrOptions?: string | Partial<BaseElementField<T, P, PO>>, options?: Partial<BaseElementField<T, P, PO>>): BaseElementField<T, P, PO>;
+export declare const col: typeof column;
+export declare function useElements(): {
+    btn: typeof btn;
+    iconBtn: typeof iconBtn;
+    txt: typeof txt;
+    img: typeof img;
+    dropdownElement: typeof dropdownElement;
+    listItemElement: typeof listItemElement;
+    containerElement: typeof containerElement;
+    findElementById: typeof findElementById;
+    getBaseElementField: typeof getBaseElementField;
+    col: typeof column;
+    column: typeof column;
+};
+//# sourceMappingURL=elementUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"elementUtils.d.ts","sourceRoot":"","sources":["../../src/utils/elementUtils.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.4.77",
+  "version": "1.4.81",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Btn.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { IconType, ThemeType } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
-import { Icon, Loading } from '@bagelink/vue'
+import { Icon, Loading, useModal } from '@bagelink/vue'
 import { useSlots, ref, onMounted, onUnmounted } from 'vue'
 import { RouterLink } from 'vue-router'
 
@@ -28,6 +28,7 @@ const props = withDefaults(
 		is?: string
 		ripple?: boolean
 		onClick?: (e: MouseEvent) => void
+		confirm?: boolean | string
 	}>(),
 	{
 		onClick: () => '',
@@ -43,9 +44,15 @@ const props = withDefaults(
 	},
 )
 
+const emit = defineEmits<{
+	confirmed: [event: MouseEvent]
+}>()
+
+const { confirmModal } = useModal()
+
 const isMobileScreen = ref(false)
 
-const checkMobile = () => {
+function checkMobile() {
 	isMobileScreen.value = window.innerWidth <= 910
 }
 
@@ -58,6 +65,23 @@ onUnmounted(() => {
 	window.removeEventListener('resize', checkMobile)
 })
 
+async function handleClick(event: MouseEvent) {
+	if (props.confirm) {
+		const message = typeof props.confirm === 'string' ? props.confirm : 'Are you sure?'
+		const confirmed = await confirmModal({
+			title: 'Confirm',
+			message
+		})
+
+		if (!confirmed) return
+
+		props.onClick(event)
+		emit('confirmed', event)
+	} else {
+		props.onClick(event)
+	}
+}
+
 const iconSizeComputed = $computed(() => {
 	if (props.iconSize !== undefined) return props.iconSize
 	return isMobileScreen.value ? 1 : 1.2
@@ -86,196 +110,208 @@ const slots: SetupContext['slots'] = useSlots()
 </script>
 
 <template>
-<component :is="isComponent" v-ripple="ripple" v-bind="bind" :disabled="disabled" class="bgl_btn" :class="{
-	'bgl_btn-icon': icon && !slots.default && !value,
-	thin,
-	round,
-	'bgl_btn_flat': flat,
-	'bgl_btn-border': border || outline,
-	[`bgl_btn-${color}`]: color,
-	[`bgl_btn-${theme}`]: theme,
-}" :tabindex="disabled ? -1 : 0" @click.stop="onClick" @keydown.enter="onClick" @keydown.space="onClick">
-	<Loading v-if="loading" class="h-100p" size="15" />
-	<div v-else class="bgl_btn-flex">
-		<Icon v-if="icon" :icon="icon" class="transition-400" :size="iconSizeComputed" :mobile-size="iconMobileSize" />
-		<slot />
-		<template v-if="!slots.default && value">
-			{{ value }}
-		</template>
-		<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" :size="iconSizeComputed" :mobile-size="iconMobileSize" />
-	</div>
-</component>
+	<component
+		:is="isComponent" v-ripple="ripple" v-bind="bind" :disabled="disabled" class="bgl_btn" :class="{
+			'bgl_btn-icon': icon && !slots.default && !value,
+			thin,
+			round,
+			'bgl_btn_flat': flat,
+			'bgl_btn-border': border || outline,
+			[`bgl_btn-${color}`]: color,
+			[`bgl_btn-${theme}`]: theme,
+		}" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick"
+	>
+		<Loading v-if="loading" class="h-100p" size="15" />
+		<div v-else class="bgl_btn-flex">
+			<Icon
+				v-if="icon" :icon="icon" class="transition-400" :size="iconSizeComputed"
+				:mobile-size="iconMobileSize"
+			/>
+			<slot />
+			<template v-if="!slots.default && value">
+				{{ value }}
+			</template>
+			<Icon
+				v-if="iconEnd" :icon="iconEnd" class="transition-400" :size="iconSizeComputed"
+				:mobile-size="iconMobileSize"
+			/>
+		</div>
+	</component>
 </template>
 
 <style scoped>
 .bgl_btn {
-  --btn-bg: var(--bgl-primary);
-  --btn-color: var(--bgl-light-text);
-  --btn-flat-color: var(--bgl-text-color);
+	--btn-bg: var(--bgl-primary);
+	--btn-color: var(--bgl-light-text);
+	--btn-flat-color: var(--bgl-text-color);
 }
 
 .bgl_btn-green {
-  --btn-bg: var(--bgl-green);
-  --btn-color: var(--bgl-light-text);
-  --btn-flat-color: var(--bgl-green);
+	--btn-bg: var(--bgl-green);
+	--btn-color: var(--bgl-light-text);
+	--btn-flat-color: var(--bgl-green);
 }
 
 .bgl_btn-yellow {
-  --btn-bg: var(--bgl-yellow);
-  --btn-color: var(--bgl-black);
-  --btn-flat-color: var(--bgl-yellow);
+	--btn-bg: var(--bgl-yellow);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-yellow);
 }
 
 .bgl_btn-blue {
-  --btn-bg: var(--bgl-blue);
-  --btn-color: var(--bgl-light-text);
-  --btn-flat-color: var(--bgl-blue);
+	--btn-bg: var(--bgl-blue);
+	--btn-color: var(--bgl-light-text);
+	--btn-flat-color: var(--bgl-blue);
 }
 
 .bgl_btn-primary {
-  --btn-bg: var(--bgl-primary);
-  --btn-color: var(--bgl-light-text);
-  --btn-flat-color: var(--bgl-primary);
+	--btn-bg: var(--bgl-primary);
+	--btn-color: var(--bgl-light-text);
+	--btn-flat-color: var(--bgl-primary);
 }
 
 .bgl_btn-red {
-  --btn-bg: var(--bgl-red);
-  --btn-color: var(--bgl-light-text);
-  --btn-flat-color: var(--bgl-red);
+	--btn-bg: var(--bgl-red);
+	--btn-color: var(--bgl-light-text);
+	--btn-flat-color: var(--bgl-red);
 }
 
 .bgl_btn-white {
-  --btn-bg: var(--bgl-white);
-  --btn-color: var(--bgl-black);
-  --btn-flat-color: var(--bgl-white);
+	--btn-bg: var(--bgl-white);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-white);
 }
 
 .bgl_btn-black {
-  --btn-bg: var(--bgl-black);
-  --btn-color: var(--bgl-light-text);
-  --btn-flat-color: var(--bgl-black);
+	--btn-bg: var(--bgl-black);
+	--btn-color: var(--bgl-light-text);
+	--btn-flat-color: var(--bgl-black);
 }
 
 .bgl_btn-gray {
-  --btn-bg: var(--bgl-gray-light);
-  --btn-color: var(--bgl-black);
-  --btn-flat-color: var(--bgl-gray);
+	--btn-bg: var(--bgl-gray-light);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-gray);
 }
 
 .bgl_btn-light {
-  --btn-bg: var(--bgl-primary-light);
-  --btn-color: var(--bgl-primary);
-  --btn-flat-color: var(--bgl-primary-light);
+	--btn-bg: var(--bgl-primary-light);
+	--btn-color: var(--bgl-primary);
+	--btn-flat-color: var(--bgl-primary-light);
 }
 
 .bgl_btn-gray-light {
-  --btn-bg: var(--bgl-gray-light);
-  --btn-color: var(--bgl-gray);
-  --btn-flat-color: var(--bgl-gray-light);
+	--btn-bg: var(--bgl-gray-light);
+	--btn-color: var(--bgl-gray);
+	--btn-flat-color: var(--bgl-gray-light);
 }
 
 .bgl_btn {
-  padding-left: var(--btn-padding);
-  padding-right: var(--btn-padding);
-  transition: var(--bgl-transition);
-  background: var(--btn-bg);
-  color: var(--btn-color);
-  text-decoration: none;
+	padding-left: var(--btn-padding);
+	padding-right: var(--btn-padding);
+	transition: var(--bgl-transition);
+	background: var(--btn-bg);
+	color: var(--btn-color);
+	text-decoration: none;
 }
 
 .bgl_btn.bgl_btn-icon {
-  padding-left: 0;
-  padding-right: 0;
-  height: var(--btn-height);
-  width: var(--btn-height);
-  border-radius: 100%;
-  font-size: 1rem;
-  flex-shrink: 0;
+	padding-left: 0;
+	padding-right: 0;
+	height: var(--btn-height);
+	width: var(--btn-height);
+	border-radius: 100%;
+	font-size: 1rem;
+	flex-shrink: 0;
 }
 
 a {
-  text-decoration: none;
+	text-decoration: none;
 }
 
 .bgl_btn-flex {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  justify-content: center;
-  height: 100%;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	justify-content: center;
+	height: 100%;
 }
 
-.bgl_btn .bgl_btn-icon{
-  font-size: calc(var(--input-font-size) * 1.3);
+.bgl_btn .bgl_btn-icon {
+	font-size: calc(var(--input-font-size) * 1.3);
 }
 
 .bgl_btn:hover,
 .bgl_btn-icon:hover {
-  filter: var(--bgl-hover-filter);
+	filter: var(--bgl-hover-filter);
 }
 
 .bgl_btn:active:not(:disabled),
 .bgl_btn-icon:active:not(:disabled) {
-  filter: var(--bgl-active-filter);
+	filter: var(--bgl-active-filter);
 }
 
 .bgl_btn.bgl_btn_flat {
-  background: transparent;
-  color: var(--btn-flat-color);
+	background: transparent;
+	color: var(--btn-flat-color);
 }
 
 .bgl_btn_flat:hover:not(:disabled),
 .bgl_btn-icon.bgl_btn_flat:hover:not(:disabled) {
-  background: var(--bgl-gray-20);
+	background: var(--bgl-gray-20);
 }
 
 .bgl_btn.bgl_btn_flat:active:not(:disabled),
 .bgl_btn-icon.bgl_btn_flat:active:not(:disabled) {
-  background: var(--bgl-gray-40);
+	background: var(--bgl-gray-40);
 }
 
 .bgl_btn.thin {
-  padding-inline: calc(var(--btn-padding) / 3);
-  border-radius: calc(var(--btn-border-radius) / 1.5);
+	padding-inline: calc(var(--btn-padding) / 3);
+	border-radius: calc(var(--btn-border-radius) / 1.5);
 }
 
 .bgl_btn.round {
-  border-radius: 1000px;
+	border-radius: 1000px;
 }
 
 .bgl_btn-icon.thin {
-  height: calc(var(--btn-height) / 1.5);
-  width: calc(var(--btn-height) / 1.5);
-  line-height: normal;
+	height: calc(var(--btn-height) / 1.5);
+	width: calc(var(--btn-height) / 1.5);
+	line-height: normal;
 }
+
 .bgl_btn-icon.thin .bgl_btn-flex {
 	height: 100%;
 }
 
-[dir="rtl"] .bgl_btn-icon{
-  transform: rotateY(180deg);
+[dir="rtl"] .bgl_btn-icon {
+	transform: rotateY(180deg);
 }
-[dir="rtl"] .ltr .bgl_btn-icon{
-  transform: rotateY(0deg);
+
+[dir="rtl"] .ltr .bgl_btn-icon {
+	transform: rotateY(0deg);
 }
 
-.bgl_btn-border, .bgl_btn-icon.bgl_btn_flat.bgl_btn-border {
-	  border: 1px solid var(--btn-flat-color);
-	  background: transparent;
-	  color: var(--btn-flat-color);
+.bgl_btn-border,
+.bgl_btn-icon.bgl_btn_flat.bgl_btn-border {
+	border: 1px solid var(--btn-flat-color);
+	background: transparent;
+	color: var(--btn-flat-color);
 }
 
 .bgl_btn-border:hover {
-	  color: var(--btn-flat-color);
+	color: var(--btn-flat-color);
 }
 
 .bgl_btn-border:active:not(:disabled) {
-  filter: brightness(80%);
+	filter: brightness(80%);
 }
 
-.bgl_btn:disabled, .bgl_btn[disabled=true] {
-  opacity: 0.7;
-  filter: grayscale(0.3);
-  cursor: not-allowed;
+.bgl_btn:disabled,
+.bgl_btn[disabled=true] {
+	opacity: 0.7;
+	filter: grayscale(0.3);
+	cursor: not-allowed;
 }
 </style>

package/src/components/Card.vue

@@ -5,6 +5,7 @@ const props = defineProps<{
 	outline?: boolean
 	h100?: boolean
 	to?: string
+	href?: string
 	overflowX?: boolean
 	overflowY?: boolean
 	bg?:
@@ -21,16 +22,23 @@ const props = defineProps<{
 		| 'transparent'
 }>()
 
-const is = $computed(() => (props.to ? 'router-link' : 'div'))
+const bind = $computed(() => {
+	const obj: { [key: string]: any } = {}
+	if (props.href) obj.href = props.href
+	else if (props.to) obj.to = props.to
+	return obj
+})
+
+const is = $computed(() => {
+	if (props.href) return 'a'
+	if (props.to) return 'router-link'
+	return 'div'
+})
 </script>
 
 <template>
 	<component
-		:is="is"
-		v-ripple="!!to"
-		:to="to"
-		class="bgl_card"
-		:class="{
+		:is="is" v-ripple="!!to" v-bind="bind" class="bgl_card" :class="{
 			thin,
 			'border': outline,
 			'h-100': h100,
@@ -56,10 +64,11 @@ const is = $computed(() => (props.to ? 'router-link' : 'div'))
 	border-bottom: 1px solid var(--border-color);
 	margin-bottom: 1rem;
 }
+
 .border .card_label {
 	font-size: 0.7rem;
 	font-weight: 300;
-	background:var(--bgl-box-bg);
+	background: var(--bgl-box-bg);
 	padding: 0 0.75rem;
 	position: absolute;
 	top: -0.5rem;
@@ -89,11 +98,13 @@ const is = $computed(() => (props.to ? 'router-link' : 'div'))
 .bgl_card.thin {
 	padding: 1rem 1rem;
 }
+
 .bgl_card.BagelTable {
 	height: 100%;
 	overflow: auto;
 	padding-top: 0;
 }
+
 .bgl_card.thin .tabs {
 	margin-bottom: 1rem;
 }

package/src/components/Modal.vue

@@ -78,22 +78,14 @@ onUnmounted(() => {
 
 <template>
 	<div
-		class="bg-dark"
-		:style="{ zIndex }"
-		:class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
-		@click="() => (dismissable ? closeModal() : '')"
-		@keydown.esc="closeModal"
+		class="bg-dark" :style="{ zIndex }" :class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
+		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal"
 	>
 		<Card class="modal" :style="{ ...maxWidth }" :thin="thin" @click.stop>
 			<header v-if="slots.toolbar || title" class="tool-bar">
 				<slot name="toolbar" />
 				<Btn
-					v-if="dismissable"
-					:style="{ float: side ? 'left' : 'right' }"
-					flat
-					icon="close"
-					thin
-					icon-mobile-size="1.4"
+					v-if="dismissable" :style="{ float: side ? '' : '' }" flat icon="close" thin icon-mobile-size="1.4"
 					@click="closeModal"
 				/>
 				<Title v-if="title" class="modal-title" tag="h3" :label="title" />
@@ -101,25 +93,13 @@ onUnmounted(() => {
 
 			<div v-else class="sticky z-index-999 -mt-1 -ms-1 px-025 h-30px pt-025 modal-no-title">
 				<Btn
-					v-if="dismissable"
-					class="position-start"
-					icon="close"
-					thin
-					round
-					color="white"
-					icon-mobile-size="1.4"
-					@click="closeModal"
+					v-if="dismissable" class="position-start" icon="close" thin round color="white"
+					icon-mobile-size="1.4" @click="closeModal"
 				/>
 			</div>
 			<slot />
 			<footer v-if="slots.footer || actions?.length" class="modal-footer mt-1">
-				<Btn
-					v-for="(action, i) in actions"
-					:key="i"
-					color="gray"
-					v-bind="action"
-					@click="closeModal"
-				/>
+				<Btn v-for="(action, i) in actions" :key="i" color="gray" v-bind="action" @click="closeModal" />
 				<slot name="footer" />
 			</footer>
 		</Card>
@@ -127,11 +107,12 @@ onUnmounted(() => {
 </template>
 
 <style>
-.modal{
+.modal {
 	color: var(--bgl-popup-text);
 	/* display: flex;
 	flex-direction: column; */
 }
+
 .modal-title {
 	text-align: center;
 	font-weight: 600;
@@ -156,13 +137,14 @@ onUnmounted(() => {
 	align-items: center;
 }
 
-.modal-footer > div {
+.modal-footer>div {
 	gap: 1rem;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }
-.modal-no-title{
+
+.modal-no-title {
 	width: calc(100% + 2rem);
 	border-radius: var(--card-border-radius);