@bagelink/vue 0.0.296 → 0.0.300

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.296",
+  "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';