@bagelink/vue 0.0.530 → 0.0.540

package/dist/style.css

@@ -248,19 +248,19 @@
 }
 }
 
-a[data-v-d5201df6] {
+a[data-v-204e25fe] {
   text-decoration: none;
 }
-.loading[data-v-d5201df6] {
+.loading[data-v-204e25fe] {
   border: 1px solid var(--bgl-white);
   border-bottom: 2px solid var(--bgl-white);
-  animation: spin-d5201df6 1s linear infinite;
+  animation: spin-204e25fe 1s linear infinite;
   border-radius: 100px;
   width: 1rem;
   height: 1rem;
   margin: auto;
 }
-@keyframes spin-d5201df6 {
+@keyframes spin-204e25fe {
 0% {
     transform: rotate(0deg);
 }
@@ -268,7 +268,7 @@ a[data-v-d5201df6] {
     transform: rotate(360deg);
 }
 }
-.bgl_btn-icon[data-v-d5201df6] {
+.bgl_btn-icon[data-v-204e25fe] {
   height: var(--btn-height);
   width: var(--btn-height);
   border-radius: 100%;
@@ -278,101 +278,101 @@ a[data-v-d5201df6] {
   flex-shrink: 0;
   transition: var(--bgl-transition);
 }
-.bgl_btn[data-v-d5201df6] {
+.bgl_btn[data-v-204e25fe] {
   padding-left: var(--btn-padding);
   padding-right: var(--btn-padding);
   transition: var(--bgl-transition);
   text-decoration: none;
 }
-.bgl_btn[disabled="true"][data-v-d5201df6] {
+.bgl_btn[disabled="true"][data-v-204e25fe] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.bgl_btn-flex[data-v-d5201df6] {
+.bgl_btn-flex[data-v-204e25fe] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   justify-content: center;
 }
-.bgl_btn .bgl_.bgl_icon-font[data-v-d5201df6] {
+.bgl_btn .bgl_.bgl_icon-font[data-v-204e25fe] {
   font-size: calc(var(--input-font-size) * 1.3);
 }
-.bgl_btn[data-v-d5201df6],
-.bgl_btn-icon[data-v-d5201df6] {
-  background-color: var(--38764c20);
-  color: var(--63554afb);
+.bgl_btn[data-v-204e25fe],
+.bgl_btn-icon[data-v-204e25fe] {
+  background-color: var(--743a2e01);
+  color: var(--9ec72cc8);
 }
-.bgl_btn[data-v-d5201df6]:hover,
-.bgl_btn-icon[data-v-d5201df6]:hover {
+.bgl_btn[data-v-204e25fe]:hover,
+.bgl_btn-icon[data-v-204e25fe]:hover {
   filter: var(--bgl-hover-filter);
 }
-.bgl_btn[data-v-d5201df6]:active,
-.bgl_btn-icon[data-v-d5201df6]:active {
+.bgl_btn[data-v-204e25fe]:active,
+.bgl_btn-icon[data-v-204e25fe]:active {
   filter: var(--bgl-active-filter);
 }
-.bgl_btn.bgl_flatBtn[data-v-d5201df6] {
+.bgl_btn.bgl_flatBtn[data-v-204e25fe] {
   padding-left: var(--btn-padding);
   padding-right: var(--btn-padding);
   background: transparent;
 }
-.bgl_btn-icon.bgl_flatBtn[data-v-d5201df6] {
+.bgl_btn-icon.bgl_flatBtn[data-v-204e25fe] {
   background: transparent;
 }
-.bgl_btn.bgl_flatBtn[data-v-d5201df6]:hover,
-.bgl_btn-icon.bgl_flatBtn[data-v-d5201df6]:hover {
+.bgl_btn.bgl_flatBtn[data-v-204e25fe]:hover,
+.bgl_btn-icon.bgl_flatBtn[data-v-204e25fe]:hover {
   filter: var(--bgl-active-filter);
 }
-.bgl_btn.bgl_flatBtn[data-v-d5201df6]:active,
-.bgl_btn-icon.bgl_flatBtn[data-v-d5201df6]:active {
+.bgl_btn.bgl_flatBtn[data-v-204e25fe]:active,
+.bgl_btn-icon.bgl_flatBtn[data-v-204e25fe]:active {
   background: var(--bgl-gray);
   filter: var(--bgl-hover-filter);
 }
-.bgl_btn.bgl_flatBtn.red[data-v-d5201df6],
-.bgl_btn-icon.bgl_flatBtn.red[data-v-d5201df6] {
+.bgl_btn.bgl_flatBtn.red[data-v-204e25fe],
+.bgl_btn-icon.bgl_flatBtn.red[data-v-204e25fe] {
   color: var(--bgl-red);
 }
-.bgl_btn.bgl_flatBtn.white[data-v-d5201df6],
-.bgl_btn-icon.bgl_flatBtn.white[data-v-d5201df6] {
+.bgl_btn.bgl_flatBtn.white[data-v-204e25fe],
+.bgl_btn-icon.bgl_flatBtn.white[data-v-204e25fe] {
   color: var(--bgl-white);
 }
-.bgl_btn.bgl_flatBtn.light[data-v-d5201df6],
-.bgl_btn-icon.bgl_flatBtn.light[data-v-d5201df6] {
+.bgl_btn.bgl_flatBtn.light[data-v-204e25fe],
+.bgl_btn-icon.bgl_flatBtn.light[data-v-204e25fe] {
   color: var(--bgl-primary-tint);
 }
-.bgl_btn.bgl_flatBtn.black[data-v-d5201df6],
-.bgl_btn-icon.bgl_flatBtn.black[data-v-d5201df6] {
+.bgl_btn.bgl_flatBtn.black[data-v-204e25fe],
+.bgl_btn-icon.bgl_flatBtn.black[data-v-204e25fe] {
   color: var(--bgl-black);
 }
-.bgl_btn.bgl_flatBtn.gray[data-v-d5201df6],
-.bgl_btn-icon.bgl_flatBtn.gray[data-v-d5201df6] {
+.bgl_btn.bgl_flatBtn.gray[data-v-204e25fe],
+.bgl_btn-icon.bgl_flatBtn.gray[data-v-204e25fe] {
   color: var(--bgl-gray);
 }
-.bgl_btn.thin[data-v-d5201df6] {
+.bgl_btn.thin[data-v-204e25fe] {
   padding-inline: calc(var(--btn-padding) / 3);
   border-radius: calc(var(--btn-border-radius) / 1.5);
 }
-.bgl_btn.round[data-v-d5201df6] {
+.bgl_btn.round[data-v-204e25fe] {
   border-radius: calc(var(--btn-border-radius) * 2);
 }
-.bgl_btn-icon.thin[data-v-d5201df6] {
+.bgl_btn-icon.thin[data-v-204e25fe] {
   height: calc(var(--btn-height) / 1.5);
   width: calc(var(--btn-height) / 1.5);
   line-height: 1;
 }
-[dir="rtl"] .bgl_.bgl_icon-font[data-v-d5201df6] {
+[dir="rtl"] .bgl_.bgl_icon-font[data-v-204e25fe] {
   transform: rotateY(180deg);
 }
-.bgl_btn-border[data-v-d5201df6] {
-  outline: 1px solid var(--38764c20);
-  color: var(--38764c20);
+.bgl_btn-border[data-v-204e25fe] {
+  outline: 1px solid var(--743a2e01);
+  color: var(--743a2e01);
   background: transparent;
 }
-.bgl_btn-border[data-v-d5201df6]:hover {
+.bgl_btn-border[data-v-204e25fe]:hover {
   color: var(--bgl-white);
-  background: var(--38764c20);
+  background: var(--743a2e01);
   filter: brightness(100%);
 }
-.bgl_btn-border[data-v-d5201df6]:active {
+.bgl_btn-border[data-v-204e25fe]:active {
   filter: brightness(80%);
 }
 .bg-dark {
@@ -1694,7 +1694,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	display: none;
 }
 .leaflet-pane.leaflet-marker-pane img{
-	filter: drop-shadow(0px 12px 3px rgba(0, 0, 0, 0.3));
+	filter: drop-shadow(0px 8px 3px rgba(0, 0, 0, 0.2));
 }
 .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
     font-size: var(--input-font-size);
@@ -1803,10 +1803,10 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
-.selectinput[data-v-b8258523] {
+.selectinput[data-v-761f89bf] {
 	width: 100%;
 }
-.selectinput-option[data-v-b8258523] {
+.selectinput-option[data-v-761f89bf] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1817,14 +1817,14 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	width: 100%;
 	font-size: var(--input-font-size);
 }
-.selectinput-options[data-v-b8258523] {
+.selectinput-options[data-v-761f89bf] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-b8258523]:hover {
+.selectinput-option[data-v-761f89bf]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-b8258523] {
+.isEmpty p[data-v-761f89bf] {
 	opacity: 0.3;
 }
 
@@ -7370,6 +7370,30 @@ select {
 .border-inner-end>* {
     border-inline-end: 1px solid var(--border-color)
 }
+.border-bottom-none {
+    border-bottom: none
+}
+.border-top-none {
+    border-top: none
+}
+.border-start-none {
+    border-inline-start: none
+}
+.border-end-none {
+    border-inline-end: none
+}
+.border-inner-bottom-none>* {
+    border-bottom: none
+}
+.border-inner-top-none>* {
+    border-top: none
+}
+.border-inner-start-none>* {
+    border-inline-start: none
+}
+.border-inner-end-none>* {
+    border-inline-end: none
+}
 @media screen and (max-width: 910px) {
     .m_opacity-0 {
         opacity: 0;
@@ -7832,7 +7856,37 @@ select {
         border-inline-end: 1px solid var(--border-color)
     }
 
+    .m_border-bottom-none {
+        border-bottom: none
+    }
+
+    .m_border-top-none {
+        border-top: none
+    }
+
+    .m_border-start-none {
+        border-inline-start: none
+    }
+
+    .m_border-end-none {
+        border-inline-end: none
+    }
+
+    .m_border-inner-bottom-none>* {
+        border-bottom: none
+    }
 
+    .m_border-inner-top-none>* {
+        border-top: none
+    }
+
+    .m_border-inner-start-none>* {
+        border-inline-start: none
+    }
+
+    .m_border-inner-end-none>* {
+        border-inline-end: none
+    }
 }
 /* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;600;700&display=swap"); */
 /*noinspection CssUnknownTarget*/

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.530",
+  "version": "0.0.540",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -52,7 +52,7 @@
   ],
   "devDependencies": {
     "@vue-macros/reactivity-transform": "^0.4.6",
-    "vue": "^3.4.30",
+    "vue": "^3.4.31",
     "@types/leaflet": "^1.9.12",
     "@types/signature_pad": "^2.3.6"
   },
@@ -105,8 +105,8 @@
     "access": "public"
   },
   "dependencies": {
-    "signature_pad": "^5.0.1",
-    "@vuepic/vue-datepicker": "^8.7.0",
+    "signature_pad": "^5.0.2",
+    "@vuepic/vue-datepicker": "^8.8.1",
     "@tiptap/pm": "^2.4.0",
     "@tiptap/starter-kit": "^2.4.0",
     "@tiptap/extension-image": "^2.4.0",
@@ -119,7 +119,7 @@
     "leaflet": "^1.9.4",
     "libphonenumber-js": "1.11.4",
     "floating-vue": "^5.2.2",
-    "type-fest": "^4.20.1",
+    "type-fest": "^4.21.0",
     "axios": "^1.7.2"
   },
   "scripts": {

package/src/components/Btn.vue

@@ -13,6 +13,7 @@ const props = withDefaults(
 		'theme'?: ThemeType
 		'flat'?: boolean
 		'border'?: boolean
+		'outline'?: boolean
 		'thin'?: boolean
 		'type'?: 'button' | 'submit' | 'reset'
 		'loading'?: boolean
@@ -33,6 +34,7 @@ const props = withDefaults(
 		role: 'button',
 		is: 'button',
 		border: false,
+		outline: false
 	},
 )
 
@@ -97,7 +99,7 @@ const computedBackgroundColor = $computed(
 			thin,
 			round,
 			'bgl_flatBtn': flat,
-			'bgl_btn-border': border,
+			'bgl_btn-border': border || outline,
 		}"
 		@click.stop="onClick"
 	>

package/src/components/MapEmbed.vue

@@ -1,31 +1,43 @@
 <script setup lang="ts">
-import L from 'leaflet'
-import type { LatLngExpression, Marker } from 'leaflet'
 import 'leaflet/dist/leaflet.css'
+import type { LatLngExpression, Layer, Marker } from 'leaflet'
 import { onMounted, watch } from 'vue'
+import L from 'leaflet'
 
-interface MapProps {
-	center?: LatLngExpression
-	zoom?: number
-	height?: number
-	address?: string
-}
-
-const props = defineProps<MapProps>()
+const props = withDefaults(defineProps<{
+	center: LatLngExpression
+	zoom: number
+	height: number
+	address: string
+	zoomControl: boolean
+}>(), {
+	center: () => [31.7683, 35.2137],
+	zoom: 13,
+	height: 400,
+	address: '',
+	zoomControl: true
+})
 
 let map = $ref<L.Map>()
 const markers = $ref<Marker[]>([])
+const id = $ref(Math.random().toString(36).substring(2, 10))
 
 function initializeMap() {
-	map = L.map('map', {
-		center: props.center || [31.7683, 35.2137],
-		zoom: props.zoom || 13,
+	if (props.address) {
+		geocodeAddress(props.address).catch(console.error)
+	}
+	console.log(props.zoomControl, props.center)
+	map = L.map(id, {
+		center: props.center,
+		zoom: props.zoom,
+		zoomControl: props.zoomControl
 	})
 	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map)
 }
 
 onMounted(initializeMap)
-const markerSVG = '<svg width="199" height="284" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M29.859 29.266A99 99 0 0 1 198.862 99.27c0 74.25-99 183.857-99 183.857s-99-109.607-99-183.858A99 99 0 0 1 29.86 29.266Zm70.004 118.961c25.513 0 46.195-20.683 46.195-46.196 0-25.513-20.682-46.195-46.195-46.195S53.667 76.518 53.667 102.03s20.683 46.196 46.196 46.196Z" fill="#F04033"/></svg>'
+// eslint-disable-next-line max-len
+const markerSVG = '<svg width="284" height="284" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M29.859 29.266A99 99 0 0 1 198.862 99.27c0 74.25-99 183.857-99 183.857s-99-109.607-99-183.858A99 99 0 0 1 29.86 29.266Zm70.004 118.961c25.513 0 46.195-20.683 46.195-46.196 0-25.513-20.682-46.195-46.195-46.195S53.667 76.518 53.667 102.03s20.683 46.196 46.196 46.196Z" fill="#F04033"/></svg>'
 
 function addMarker(latlng: LatLngExpression) {
 	const customIcon = L.icon({
@@ -42,7 +54,10 @@ async function geocodeAddress(address: string) {
 	const geocodeUrl = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}`
 	const res = await fetch(geocodeUrl)
 	const data: any[] = await res.json() || []
-	data.forEach((element) => { addMarker([element.lat, element.lon]) })
+	data.forEach((element) => {
+		addMarker([element.lat, element.lon])
+	})
+	map?.fitBounds(L.featureGroup(markers as unknown as Layer[]).getBounds())
 }
 
 watch(() => props.address, (address) => {
@@ -52,7 +67,7 @@ watch(() => props.address, (address) => {
 
 <template>
 	<div class="map-test" />
-	<div id="map" class="map" :style="{ height: `${height || 400}px` }" />
+	<div :id class="map" :style="{ height: `${height || 400}px` }" />
 </template>
 
   <style>
@@ -78,7 +93,7 @@ watch(() => props.address, (address) => {
 	display: none;
   }
   .leaflet-pane.leaflet-marker-pane img{
-	filter: drop-shadow(0px 12px 3px rgba(0, 0, 0, 0.3));
+	filter: drop-shadow(0px 8px 3px rgba(0, 0, 0, 0.2));
   }
   .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
     font-size: var(--input-font-size);

package/src/components/MaterialIcon.vue

@@ -4,7 +4,7 @@ import type { MaterialIcons } from '@bagelink/vue'
 defineProps<{
 	icon?: MaterialIcons
 	name?: MaterialIcons
-	size?: number
+	size?: number | string
 	color?: string
 }>()
 </script>

package/src/components/form/BglField.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import {
 	CheckInput,
+	DateInput,
 	type Field,
 	RichText,
 	SelectInput,
@@ -17,7 +18,7 @@ const props = withDefaults(
 	}>(),
 	{
 		modelValue: () => ({}),
-	},
+	}
 )
 
 const emit = defineEmits(['update:modelValue'])
@@ -28,18 +29,21 @@ const is = $computed(() => {
 	if (props.field.$el === 'toggle') return ToggleInput
 	if (props.field.$el === 'check') return CheckInput
 	if (props.field.$el === 'richtext') return RichText
+	if (props.field.$el === 'date') return DateInput
 	return props.field.$el || 'div'
 })
 
 const formData = $computed({
 	get: () => props.modelValue,
-	set: (val: any) => { emit('update:modelValue', val) },
+	set: (val: any) => {
+		emit('update:modelValue', val)
+	},
 })
 
 const fieldData = $computed({
 	set: (val: any) => {
 		if (!props.field.id) return
-		const data = { ...props.modelValue } || {}
+		const data = { ...props.modelValue }
 		data[props.field.id] = val
 		emit('update:modelValue', data)
 	},

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

@@ -93,7 +93,7 @@ const filteredOptions = $computed(() =>	props.options.filter((option) => {
 	return (
 		Boolean(option)
 		&& (searchTerm.every(s => getLabel(option).match(s))
-		|| searchTerm.length === 0)
+		)
 	)
 }))
 

package/src/plugins/modal.ts

@@ -72,7 +72,7 @@ export const ModalPlugin: Plugin = {
 			modalStack.splice(index, 1)
 		}
 
-		const modalConfirm = (options: ConfirmModalUserOptions) => new Promise<boolean>((resolve) => {
+		const modalConfirm = async (options: ConfirmModalUserOptions) => new Promise<boolean>((resolve) => {
 			if (typeof options === 'string') options = { title: options, message: '' }
 			modalStack.push({
 				modalOptions: { ...options, resolve },
@@ -98,7 +98,7 @@ export const ModalPlugin: Plugin = {
 		app.provide(ModalSymbol, {
 			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal('modal', options, slots),
 			showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal('modalForm', options, slots) as ModalFormComponentProps,
-			confirm: (userOptions: ConfirmModalUserOptions) => modalConfirm(userOptions),
+			confirm: async (userOptions: ConfirmModalUserOptions) => modalConfirm(userOptions),
 			hideModal: (index = modalStack.length - 1) => { hideModal(index) },
 		})
 

package/src/styles/appearance.css

@@ -463,6 +463,38 @@
     border-inline-end: 1px solid var(--border-color)
 }
 
+.border-bottom-none {
+    border-bottom: none
+}
+
+.border-top-none {
+    border-top: none
+}
+
+.border-start-none {
+    border-inline-start: none
+}
+
+.border-end-none {
+    border-inline-end: none
+}
+
+.border-inner-bottom-none>* {
+    border-bottom: none
+}
+
+.border-inner-top-none>* {
+    border-top: none
+}
+
+.border-inner-start-none>* {
+    border-inline-start: none
+}
+
+.border-inner-end-none>* {
+    border-inline-end: none
+}
+
 
 
 @media screen and (max-width: 910px) {
@@ -927,5 +959,35 @@
         border-inline-end: 1px solid var(--border-color)
     }
 
+    .m_border-bottom-none {
+        border-bottom: none
+    }
+
+    .m_border-top-none {
+        border-top: none
+    }
+
+    .m_border-start-none {
+        border-inline-start: none
+    }
+
+    .m_border-end-none {
+        border-inline-end: none
+    }
 
+    .m_border-inner-bottom-none>* {
+        border-bottom: none
+    }
+
+    .m_border-inner-top-none>* {
+        border-top: none
+    }
+
+    .m_border-inner-start-none>* {
+        border-inline-start: none
+    }
+
+    .m_border-inner-end-none>* {
+        border-inline-end: none
+    }
 }