@bagelink/vue 0.0.291 → 0.0.300

package/dist/plugins/modal.d.ts

@@ -7,12 +7,12 @@ export interface ModalOptions {
     side?: boolean;
     actions?: BtnOptions[];
     class?: string;
-    visible: boolean;
+    visible?: boolean;
 }
 export interface ModalFormOptions {
     side?: boolean;
     title?: string;
-    visible: boolean;
+    visible?: boolean;
     dismissable?: boolean;
     schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT;
     onSubmit?: (formData: any) => Promise<void>;

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;IAC3B,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,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,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,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,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;CAC5C;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,WAAW,CAAC;IACjC,YAAY,EAAE,YAAY,GAAG,gBAAgB,CAAA;CAC9C;AACD,MAAM,WAAW,uBAAuB;IACtC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,EAAE,WAAW,CAAC;IACvB,YAAY,EAAE,gBAAgB,CAAA;CAC/B;AACD,MAAM,WAAW,QAAQ;IACvB,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;CACrC;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;IAC3B,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;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,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,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,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;CAC5C;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,WAAW,CAAC;IACjC,YAAY,EAAE,YAAY,GAAG,gBAAgB,CAAA;CAC9C;AACD,MAAM,WAAW,uBAAuB;IACtC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,EAAE,WAAW,CAAC;IACvB,YAAY,EAAE,gBAAgB,CAAA;CAC/B;AACD,MAAM,WAAW,QAAQ;IACvB,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;CACrC;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

@@ -932,22 +932,34 @@ th[data-v-2137a7a8] {
   border-radius: var(--card-border-radius);
 }
 
-.alert_icon[data-v-dfb0f29d] {
+.alert[data-v-f5e16fcc] {
+  padding: 1rem;
+  border-radius: 10px;
+  background: #739def30;
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+.alert_icon[data-v-f5e16fcc] {
   line-height: 1;
 }
-.warning[data-v-dfb0f29d] {
-  background-color: #fef9e7;
-  color: #856404;
+.alert.warning[data-v-f5e16fcc] {
+  background-color: #efdb7330;
 }
-.error[data-v-dfb0f29d] {
-  background-color: #f8d7da;
-  color: #721c24;
+.alert.error[data-v-f5e16fcc] {
+  background-color: #DC354530;
 }
 
 .inline[data-v-64e0d988] {
   display: inline;
 }
 
+.bgl_vid iframe[data-v-ba12b0ff],
+.bgl_vid video[data-v-ba12b0ff] {
+  width: 100%;
+  height: auto;
+}
+
 .del-top {
 	transform: translateY(-2.6rem);
 }

package/package.json

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

package/src/components/Alert.vue

@@ -28,17 +28,24 @@ const color = {
 </script>
 
 <style scoped>
+.alert {
+  padding: 1rem;
+  border-radius: 10px;
+  background: #739def30;
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
 .alert_icon {
   line-height: 1;
 }
 
-.warning {
-  background-color: #fef9e7;
-  color: #856404;
+.alert.warning {
+  background-color: #efdb7330;
 }
 
-.error {
-  background-color: #f8d7da;
-  color: #721c24;
+.alert.error {
+  background-color: #DC354530;
 }
 </style>

package/src/components/BglVideo.vue

@@ -1,23 +1,9 @@
 <template>
-	<div>
-		<iframe
-			v-if="isYoutubeOrVimeo"
-			:src="videoUrl"
-			:style="{ aspectRatio }"
-			frameborder="0"
-			allowfullscreen
-			title="Video"
-		/>
-		<video
-			v-else
-			:src="src"
-			:autoplay="autoplay"
-			:muted="mute"
-			:loop="loop"
-			:style="{ aspectRatio }"
-			controls="controllers"
-		/>
-	</div>
+  <div class="bgl_vid">
+    <iframe v-if="embedType" :src="videoUrl" :style="{ aspectRatio }" frameborder="0" allowfullscreen title="Video" />
+    <video v-else :src="src" :autoplay="autoplay" :muted="mute" :loop="loop" :style="{ aspectRatio }"
+      :controls="controls" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -26,7 +12,7 @@ type Props = {
   autoplay: boolean;
   mute: boolean;
   aspectRatio: string;
-  controllers: boolean;
+  controls: boolean;
   loop: boolean;
 };
 
@@ -34,24 +20,35 @@ const props = defineProps<Props>();
 
 const aspectRatio = $computed(() => props.aspectRatio.replace(':', '/'));
 
-const isYoutubeOrVimeo = $computed(() => {
-	const youtubeRegex = /youtube\.com|youtu\.be/;
-	const vimeoRegex = /vimeo\.com/;
-	return youtubeRegex.test(props.src) || vimeoRegex.test(props.src);
+const embedType = $computed<'YouTube' | 'Vimeo' | null>(() => {
+  const youtubeRegex = /youtube\.com|youtu\.be/;
+  if (youtubeRegex.test(props.src)) return 'YouTube';
+  const vimeoRegex = /vimeo\.com/;
+  if (vimeoRegex.test(props.src)) return 'Vimeo';
+  return null;
 });
 
 const videoUrl = $computed(() => {
-	if (isYoutubeOrVimeo.value) {
-		// Handle YouTube and Vimeo URLs here
-		// For simplicity, returning the URL as is, but you might need to transform it
-		return props.src;
-	}
-	return '';
+  if (embedType) {
+    if (embedType === 'YouTube') {
+      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];
+      return `https://player.vimeo.com/video/${videoId}`;
+    }
+  }
+  return props.src;
 });
+
+console.log('Video URL:', videoUrl);
 </script>
 
 <style scoped>
-iframe, video {
+.bgl_vid iframe,
+.bgl_vid video {
   width: 100%;
   height: auto;
 }

package/src/components/index.ts

@@ -23,6 +23,7 @@ export { default as Accordion } from './Accordion.vue';
 export { default as ComboBox } from './ComboBox.vue';
 export { default as Alert } from './Alert.vue';
 export { default as Badge } from './Badge.vue';
+export { default as BglVideo } from './BglVideo.vue';
 
 export * from './form';
 export * from './dashboard';

package/src/plugins/modal.ts

@@ -11,13 +11,13 @@ export interface ModalOptions {
   side?: boolean;
   actions?: BtnOptions[];
   class?: string;
-  visible: boolean;
+  visible?: boolean;
 }
 
 export interface ModalFormOptions {
   side?: boolean;
   title?: string;
-  visible: boolean;
+  visible?: boolean;
   dismissable?: boolean;
   schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT
   onSubmit?: (formData: any) => Promise<void>;