@bagelink/vue 0.0.378 → 0.0.384

package/dist/plugins/modal.d.ts

@@ -5,6 +5,7 @@ export interface ModalOptions {
     title?: string;
     dismissable?: boolean;
     side?: boolean;
+    width?: string;
     actions?: BtnOptions[];
     class?: string;
     visible?: boolean;
@@ -13,6 +14,7 @@ export interface ModalFormOptions {
     side?: boolean;
     title?: string;
     visible?: boolean;
+    width?: string;
     dismissable?: boolean;
     schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT;
     onSubmit?: (formData: any) => any;

package/dist/plugins/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/plugins/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACf,MAAM,KAAK,CAAC;AACb,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhE,MAAM,WAAW,YAAY;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,GAAG,cAAc,CAAA;IACrE,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,WAAW,mBAAmB;IACnC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,WAAW,CAAC;IACjC,YAAY,EAAE,YAAY,GAAG,gBAAgB,CAAA;CAC7C;AACD,MAAM,WAAW,uBAAuB;IACvC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,EAAE,WAAW,CAAC;IACvB,YAAY,EAAE,gBAAgB,CAAA;CAC9B;AACD,MAAM,WAAW,QAAQ;IACxB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,uBAAuB,GAAG,SAAS,CAAC;IAC/G,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,WAAW,EAAE,YAAY,CAAC,QAAQ,CAAmB,CAAC;AAEnE,eAAO,MAAM,QAAQ,QAAO,QAI3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAyCzB,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/plugins/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACf,MAAM,KAAK,CAAC;AACb,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhE,MAAM,WAAW,YAAY;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,GAAG,cAAc,CAAA;IACrE,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,WAAW,mBAAmB;IACnC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,WAAW,CAAC;IACjC,YAAY,EAAE,YAAY,GAAG,gBAAgB,CAAA;CAC7C;AACD,MAAM,WAAW,uBAAuB;IACvC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,EAAE,WAAW,CAAC;IACvB,YAAY,EAAE,gBAAgB,CAAA;CAC9B;AACD,MAAM,WAAW,QAAQ;IACxB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,uBAAuB,GAAG,SAAS,CAAC;IAC/G,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,WAAW,EAAE,YAAY,CAAC,QAAQ,CAAmB,CAAC;AAEnE,eAAO,MAAM,QAAQ,QAAO,QAI3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAyCzB,CAAC"}

package/dist/style.css

@@ -376,161 +376,161 @@ a[data-v-d09a83c5] {
   filter: brightness(80%);
 }
 .bg-dark {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.7);
-  z-index: 999;
-  pointer-events: none;
-  opacity: 0;
-  transition: all ease-in-out 0.3s;
-  max-height: 100vh;
-  overflow: auto;
-  margin: 0 auto;
-  width: 100%;
-  text-align: center;
-  display: grid;
-  align-items: center;
+	position: fixed;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.7);
+	z-index: 999;
+	pointer-events: none;
+	opacity: 0;
+	transition: all ease-in-out 0.3s;
+	max-height: 100vh;
+	overflow: auto;
+	margin: 0 auto;
+	width: 100%;
+	text-align: center;
+	display: grid;
+	align-items: center;
 }
 
 .bg-lignt {
-  background-color: var(--bgl-white);
+	background-color: var(--bgl-white);
 }
 
 .modal {
-  width: 96%;
-  max-width: 680px;
-  transform: scale(0.5);
-  opacity: 0;
-  transition: all ease-in-out 0.15s;
-  margin-left: auto;
-  margin-right: auto;
-  height: fit-content;
+	width: 96%;
+	max-width: 720px;
+	transform: scale(0.5);
+	opacity: 0;
+	transition: all ease-in-out 0.15s;
+	margin-left: auto;
+	margin-right: auto;
+	height: fit-content;
 }
 
 .small-modal .modal {
-  max-width: 300px;
-  text-align: center;
+	max-width: 300px;
+	text-align: center;
 }
 
 .tool-bar {
-  margin: -2rem -1rem 1rem;
-  display: flex;
-  justify-content: space-between;
-  position: -webkit-sticky;
-  position: sticky;
-  padding-top: 1rem;
-  top: 0rem;
-  z-index: 3;
-  background: var(--bgl-white);
+	margin: -2rem -1rem 1rem;
+	display: flex;
+	justify-content: space-between;
+	position: -webkit-sticky;
+	position: sticky;
+	padding-top: 1rem;
+	top: 0rem;
+	z-index: 3;
+	background: var(--bgl-white);
 }
 
 .modal-size {
-  cursor: pointer;
+	cursor: pointer;
 }
 
 .is-side .modal {
-  inset-inline-end: -600px;
-  transform: scale(1);
-  opacity: 1;
-  /* position: fixed; */
-  /* top: 20px; */
-  /* bottom: 20px; */
-  max-width: 600px;
-  width: 90%;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  margin-inline-start: auto;
-  margin-inline-end: 20px;
-  min-height: calc(100vh - 40px);
-  transform: translateX(100%);
+	inset-inline-end: -600px;
+	transform: scale(1);
+	opacity: 1;
+	/* position: fixed; */
+	/* top: 20px; */
+	/* bottom: 20px; */
+	max-width: 600px;
+	width: 90%;
+	margin-top: 20px;
+	margin-bottom: 20px;
+	margin-inline-start: auto;
+	margin-inline-end: 20px;
+	min-height: calc(100vh - 40px);
+	transform: translateX(100%);
 }
 
 .is-active .modal {
-  transform: scale(1);
-  opacity: 1;
-  box-shadow: 6px 6px 20px 20px #0000001c;
+	transform: scale(1);
+	opacity: 1;
+	box-shadow: 6px 6px 20px 20px #0000001c;
 }
 
 .bg-lignt .modal {
-  transform: scale(1);
-  border: 1px solid var(--border-color);
+	transform: scale(1);
+	border: 1px solid var(--border-color);
 }
 
 .bg-lignt.is-active .modal {
-  box-shadow: none;
+	box-shadow: none;
 }
 
 .is-active.is-side .modal {
-  inset-inline-end: 20px;
-  transform: translateX(0%);
+	inset-inline-end: 20px;
+	transform: translateX(0%);
 }
 
 .bg-dark.is-active {
-  opacity: 1;
-  pointer-events: all;
+	opacity: 1;
+	pointer-events: all;
 }
 
 .is-side.bg-dark.is-active {
-  opacity: 1;
-  align-items: stretch;
+	opacity: 1;
+	align-items: stretch;
 }
 
 .is-side.is-active .modal {
-  pointer-events: all;
+	pointer-events: all;
 }
 
 @media screen and (max-width: 910px) {
-  .tool-bar {
-    margin: -1rem 0rem 1rem;
-    padding-bottom: 1rem;
-    align-items: center;
-  }
+	.tool-bar {
+		margin: -1rem 0rem 1rem;
+		padding-bottom: 1rem;
+		align-items: center;
+	}
 
-  .is-active.is-side .modal {
-    margin-inline-end: 5%;
-    margin-inline-start: 5%;
-  }
+	.is-active.is-side .modal {
+		margin-inline-end: 5%;
+		margin-inline-start: 5%;
+	}
 }
 
 .modal-title {
-  text-align: center;
-  font-weight: 600;
-  font-size: 20px;
-  margin-top: 0.5rem;
-  margin-bottom: 0 !important;
-  width: 100%;
-  -webkit-padding-end: 40px;
-  padding-inline-end: 40px;
-  line-height: 2;
-  display: -webkit-box;
-  max-width: 100%;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
+	text-align: center;
+	font-weight: 600;
+	font-size: 20px;
+	margin-top: 0.5rem;
+	margin-bottom: 0 !important;
+	width: 100%;
+	-webkit-padding-end: 40px;
+	padding-inline-end: 40px;
+	line-height: 2;
+	display: -webkit-box;
+	max-width: 100%;
+	-webkit-line-clamp: 1;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 .modal-footer {
-  gap: 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+	gap: 1rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 }
-.modal-footer>div {
-  gap: 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0;
+.modal-footer > div {
+	gap: 1rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 0;
 }
 
-.modal-title[data-v-7e6899c7] {
+.modal-title[data-v-204f5236] {
 	margin-top: 0.5rem;
 }
 @media screen and (max-width: 910px) {
-.modal-title[data-v-7e6899c7] {
+.modal-title[data-v-204f5236] {
 		margin-top: 1rem;
 }
 }
@@ -879,11 +879,15 @@ display: block;
     color: var(--bgl-red);
 }
 
-.bgl_vid iframe[data-v-23835d69],
-.bgl_vid video[data-v-23835d69] {
-  width: 100%;
-  height: auto;
-  display: block
+.bgl_vid iframe[data-v-bbfc4353],
+.bgl_vid video[data-v-bbfc4353] {
+	width: 100%;
+	height: auto;
+	display: block;
+}
+.bgl_vid.vid_empty[data-v-bbfc4353] {
+	padding-top: 56.25%;
+	background: #f0f0f0;
 }
 
 .blocker[data-v-068aa914] {
@@ -1477,7 +1481,7 @@ display: block;
   color: var(--bgl-white);
 }
 
-.bagel-input .fileUploadWrap[data-v-3bb24b0c] {
+.bagel-input .fileUploadWrap[data-v-0dbacaa0] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -1487,7 +1491,7 @@ display: block;
 	height: 132px;
 	font-size: var(--input-font-size);
 }
-.previewName[data-v-3bb24b0c] {
+.previewName[data-v-0dbacaa0] {
 	padding: 0.5rem;
 	text-align: start;
 	color: var(--input-color);
@@ -1496,37 +1500,37 @@ display: block;
 	align-items: center;
 	padding-inline: 14px;
 }
-.previewName p[data-v-3bb24b0c] {
+.previewName p[data-v-0dbacaa0] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.imagePreviewWrap[data-v-3bb24b0c] {
+.imagePreviewWrap[data-v-0dbacaa0] {
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
 	height: 90px;
 	padding: 5px;
 }
-img.preview[data-v-3bb24b0c] {
+img.preview[data-v-0dbacaa0] {
 	height: 80px;
 	border-radius: var(--input-border-radius);
 	object-fit: contain;
 }
-.fileUploadWrap.dragover[data-v-3bb24b0c],
-.fileUploadWrap[data-v-3bb24b0c]:hover {
+.fileUploadWrap.dragover[data-v-0dbacaa0],
+.fileUploadWrap[data-v-0dbacaa0]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-3bb24b0c] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-0dbacaa0] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	color: var(--bgl-gray);
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-3bb24b0c]:after {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-0dbacaa0]:after {
 	content: 'Drop files here or click to upload';
 }
-.pie[data-v-3bb24b0c] {
+.pie[data-v-0dbacaa0] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -1534,7 +1538,7 @@ img.preview[data-v-3bb24b0c] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-3bb24b0c]:before {
+.pie[data-v-0dbacaa0]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -1552,26 +1556,26 @@ img.preview[data-v-3bb24b0c] {
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-3bb24b0c] {
+.pie .success[data-v-0dbacaa0] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-3bb24b0c] {
+.pie .progress[data-v-0dbacaa0] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-3bb24b0c] {
+.pie.complete .progress[data-v-0dbacaa0] {
 	display: none;
 }
-.pie.complete .success[data-v-3bb24b0c] {
+.pie.complete .success[data-v-0dbacaa0] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-3bb24b0c]:before {
+.pie.complete[data-v-0dbacaa0]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-3bb24b0c] {
+.pie.complete[data-v-0dbacaa0] {
 	color: var(--bgl-green);
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.378",
+  "version": "0.0.384",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -61,6 +61,8 @@
     "@vuepic/vue-datepicker": "^8.0.0",
     "@tiptap/pm": "^2.2.4",
     "@tiptap/starter-kit": "^2.2.4",
+    "@tiptap/extension-image": "^2.2.4",
+    "@tiptap/extension-youtube": "^2.2.4",
     "@tiptap/vue-3": "^2.2.4",
     "vue": "*",
     "vue-draggable-next": "^2.2.1",

package/src/components/BglVideo.vue

@@ -1,57 +1,58 @@
 <template>
-	<div class="bgl_vid">
+	<div class="bgl_vid" :class="{ vid_empty: !src }">
 		<iframe
 			v-if="embedType"
 			:src="videoUrl"
 			:style="{ aspectRatio }"
 			frameborder="0"
 			allowfullscreen
-			title="Video"
-		/>
+			title="Video" />
 		<video
-			v-else
+			v-else-if="src"
 			:src="src"
 			:autoplay="autoplay"
 			:muted="mute"
 			:loop="loop"
 			:style="{ aspectRatio }"
 			:controls="controls"
-			playsinline
-		/>
+			playsinline />
 	</div>
 </template>
 
 <script setup lang="ts">
 type Props = {
-  src: string;
-  autoplay: boolean;
-  mute: boolean;
-  aspectRatio: string;
-  controls: boolean;
-  loop: boolean;
+	src?: string;
+	autoplay?: boolean;
+	mute?: boolean;
+	aspectRatio?: string;
+	controls?: boolean;
+	loop?: boolean;
 };
 
 const props = defineProps<Props>();
 
-const aspectRatio = $computed(() => props.aspectRatio.replace(':', '/'));
+const aspectRatio = $computed(
+	() => props.aspectRatio?.replace(':', '/') || '16/9'
+);
 
 const embedType = $computed<'YouTube' | 'Vimeo' | null>(() => {
 	const youtubeRegex = /youtube\.com|youtu\.be/;
-	if (youtubeRegex.test(props.src)) return 'YouTube';
+	if (youtubeRegex.test(props.src || '')) return 'YouTube';
 	const vimeoRegex = /vimeo\.com/;
-	if (vimeoRegex.test(props.src)) return 'Vimeo';
+	if (vimeoRegex.test(props.src || '')) return 'Vimeo';
 	return null;
 });
 
 const videoUrl = $computed(() => {
 	if (embedType) {
 		if (embedType === 'YouTube') {
-			const videoId = props.src.split(/v=|youtu\.be\//)?.[1]?.split('&')?.[0];
+			const videoId = props.src?.split(/v=|youtu\.be\//)?.[1]?.split('&')?.[0];
 			return `https://www.youtube.com/embed/${videoId}`;
 		}
 		if (embedType === 'Vimeo') {
-			const vimeoRegex = /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/)?(\d+)(?:$|\/|\?)/;
-			const videoId = props.src.match(vimeoRegex)?.[3];
+			const vimeoRegex =
+				/vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/)?(\d+)(?:$|\/|\?)/;
+			const videoId = props.src?.match(vimeoRegex)?.[3];
 			return `https://player.vimeo.com/video/${videoId}`;
 		}
 	}
@@ -64,8 +65,13 @@ console.log('Video URL:', videoUrl);
 <style scoped>
 .bgl_vid iframe,
 .bgl_vid video {
-  width: 100%;
-  height: auto;
-  display: block
+	width: 100%;
+	height: auto;
+	display: block;
+}
+
+.bgl_vid.vid_empty {
+	padding-top: 56.25%;
+	background: #f0f0f0;
 }
 </style>

package/src/components/Modal.vue

@@ -1,17 +1,27 @@
 <template>
 	<div
-		class="bg-dark" :class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
-		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal"
-	>
-		<Card class="modal" @click.stop>
+		class="bg-dark"
+		:class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
+		@click="() => (dismissable ? closeModal() : '')"
+		@keydown.esc="closeModal">
+		<Card class="modal" @click.stop :style="{ ...maxWidth }">
 			<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" />
 				<Title class="modal-title" tag="h3" v-if="title" :label="title" />
 			</header>
 			<slot />
 			<footer class="modal-footer mt-3">
-				<Btn v-for="(action, i) in actions" :key="i" @click="closeModal" color="gray" v-bind="action" />
+				<Btn
+					v-for="(action, i) in actions"
+					:key="i"
+					@click="closeModal"
+					color="gray"
+					v-bind="action" />
 				<slot name="footer" />
 			</footer>
 		</Card>
@@ -20,26 +30,36 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, watch } from 'vue';
-import {
-	type BtnOptions, Btn, useEscape, Title, Card,
-} from '@bagelink/vue';
+import { type BtnOptions, Btn, useEscape, Title, Card } from '@bagelink/vue';
 import '../styles/modal.css';
 
 const props = defineProps<{
-  side?: boolean;
-  title?: string;
-  dismissable?: boolean;
-  actions?: BtnOptions[];
-  visible?: boolean;
+	side?: boolean;
+	title?: string;
+	width?: string;
+	dismissable?: boolean;
+	actions?: BtnOptions[];
+	visible?: boolean;
 }>();
 
 let isVisible = $ref<boolean>(false);
 
-watch(() => props.visible, (val) => {
-	if (val === isVisible || val === undefined) return;
-	if (val) openModal();
-	else closeModal();
-}, { immediate: true });
+watch(
+	() => props.visible,
+	(val) => {
+		if (val === isVisible || val === undefined) return;
+		if (val) openModal();
+		else closeModal();
+	},
+	{ immediate: true }
+);
+
+const maxWidth = $computed(() => {
+	const { width } = props;
+	if (width?.match(/px|em|rem|vw|vh|%/)) return { 'max-width': width };
+	if (width?.match(/\d+/)) return { 'max-width': `${width}px` };
+	return { 'max-width': '720px' };
+});
 
 const emit = defineEmits(['update:visible']);
 
@@ -50,10 +70,11 @@ const closeModal = () => {
 
 defineExpose({ closeModal });
 
-const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e, () => closeModal());
+const escapeKeyClose = (e: KeyboardEvent) =>
+	props?.dismissable && useEscape(e, () => closeModal());
 
 function openModal() {
-	setTimeout(() => isVisible = true, 1);
+	setTimeout(() => (isVisible = true), 1);
 }
 
 onMounted(() => document.addEventListener('keydown', escapeKeyClose));
@@ -65,35 +86,35 @@ onUnmounted(() => {
 
 <style>
 .modal-title {
-  text-align: center;
-  font-weight: 600;
-  font-size: 20px;
-  margin-top: 0.5rem;
-  margin-bottom: 0 !important;
-  width: 100%;
-  -webkit-padding-end: 40px;
-  padding-inline-end: 40px;
-  line-height: 2;
-  display: -webkit-box;
-  max-width: 100%;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
+	text-align: center;
+	font-weight: 600;
+	font-size: 20px;
+	margin-top: 0.5rem;
+	margin-bottom: 0 !important;
+	width: 100%;
+	-webkit-padding-end: 40px;
+	padding-inline-end: 40px;
+	line-height: 2;
+	display: -webkit-box;
+	max-width: 100%;
+	-webkit-line-clamp: 1;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .modal-footer {
-  gap: 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+	gap: 1rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 }
 
-.modal-footer>div {
-  gap: 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0;
+.modal-footer > div {
+	gap: 1rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 0;
 }
 </style>