@bagelink/vue 1.4.56 → 1.4.64

package/package.json

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

package/src/components/BglVideo.vue

@@ -66,7 +66,7 @@ defineExpose({ play, pause })
 const embedType = $computed<'YouTube' | 'Vimeo' | undefined>(() => {
 	const youtubeRegex = /youtube\.com|youtu\.be/
 	if (youtubeRegex.test(props.src || '')) return 'YouTube'
-	const vimeoRegex = /vimeo\.com/
+	const vimeoRegex = /(?:player\.)?vimeo\.com/
 	if (vimeoRegex.test(props.src || '')) return 'Vimeo'
 })
 
@@ -90,10 +90,15 @@ const videoUrl = $computed(() => {
 			return `https://www.youtube.com/embed/${videoId}?${queryParams}`
 		}
 		if (embedType === 'Vimeo') {
-			const vimeoRegex
-			// eslint-disable-next-line regexp/no-unused-capturing-group
-				= /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/)?(\d+)(?:$|\/|\?)/
-			const videoId = props.src?.match(vimeoRegex)?.[3]
+			// Handle both regular Vimeo URLs and player.vimeo.com embed URLs
+			const playerVimeoRegex = /player\.vimeo\.com\/video\/(\d+)/
+			const regularVimeoRegex = /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/)?(\d+)(?:$|\/|\?)/
+
+			const playerMatch = props.src?.match(playerVimeoRegex)
+			const regularMatch = props.src?.match(regularVimeoRegex)
+
+			const videoId = playerMatch?.[1] || regularMatch?.[3]
+			console.log(videoId, { playerMatch, regularMatch })
 			return `https://player.vimeo.com/video/${videoId}`
 		}
 	}
@@ -104,24 +109,13 @@ const videoUrl = $computed(() => {
 <template>
 	<div ref="videoContainer" class="bgl_vid" :class="{ vid_empty: !src, vid_short: isYoutubeShort }">
 		<iframe
-			v-if="embedType"
-			:src="videoUrl"
-			:style="{ aspectRatio }"
-			frameborder="0"
-			title="Video"
+			v-if="embedType" :src="videoUrl" :style="{ aspectRatio }" frameborder="0" title="Video"
 			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-			referrerpolicy="strict-origin-when-cross-origin"
-			allowfullscreen
+			referrerpolicy="strict-origin-when-cross-origin" allowfullscreen
 		/>
 		<video
-			v-else-if="src"
-			ref="video"
-			:autoplay="autoplay === true"
-			:muted="mute"
-			:loop="loop"
-			:style="{ aspectRatio }"
-			:controls="controls"
-			:playsinline="playsinline"
+			v-else-if="src" ref="video" :autoplay="autoplay === true" :muted="mute" :loop="loop"
+			:style="{ aspectRatio }" :controls="controls" :playsinline="playsinline"
 		>
 			<source :src="src" :type="`video/${videoFormat}`">
 		</video>
@@ -145,7 +139,8 @@ const videoUrl = $computed(() => {
 }
 
 .bgl_vid.vid_short {
-	max-width: 56.25vh; /* Limit width for shorts to maintain aspect ratio */
+	max-width: 56.25vh;
+	/* Limit width for shorts to maintain aspect ratio */
 	margin: 0 auto;
 }
 </style>

package/src/components/Rating.vue

@@ -25,33 +25,43 @@ function getFillWidth(n: number): string {
 
 <template>
 	<div class="rating">
-		<Icon
-			v-for="n in totalStars" :key="n" fill :name="iconType" class="star-icon p-0" :size="size" :style="{
-				'gap': `${size * 0.3}rem`,
-				'--gradient-width': getFillWidth(n),
-				'--fill-color': fillColor,
-				'--empty-color': emptyColor,
-			}"
-		/>
+		<template v-if="iconType === 'star'">
+			<span
+				v-for="n in totalStars" :key="n" class="star-icon p-025"
+				:style="{ '--gradient-width': getFillWidth(n), '--fill-color': fillColor, '--empty-color': emptyColor }"
+			>
+				★
+			</span>
+		</template>
+		<template v-else>
+			<Icon
+				v-for="n in totalStars" :key="n" fill :name="iconType" class="star-icon p-0" :size="size" :style="{
+					'gap': `${size * 0.3}rem`,
+					'--gradient-width': getFillWidth(n),
+					'--fill-color': fillColor,
+					'--empty-color': emptyColor,
+				}"
+			/>
+		</template>
 	</div>
 </template>
 
 <style scoped>
 .rating {
-  display: flex;
-  align-items: center;
+	display: flex;
+	align-items: center;
 }
 
 .star-icon {
-  --gradient-width: 0%;
-  --fill-color: #fabf05;
-  --empty-color: lightgray;
-  position: relative;
-  display: inline-block;
-  background: linear-gradient(to right, var(--fill-color) var(--gradient-width), var(--empty-color) 0%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  fill: transparent;
+	--gradient-width: 0%;
+	--fill-color: #fabf05;
+	--empty-color: lightgray;
+	position: relative;
+	display: inline-block;
+	background: linear-gradient(to right, var(--fill-color) var(--gradient-width), var(--empty-color) 0%);
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+	fill: transparent;
 }
 </style>

package/src/styles/layout.css

@@ -3674,6 +3674,11 @@
     flex-wrap: wrap;
 }
 
+.flex-reverse {
+    flex-direction: row-reverse;
+}
+
+
 .column,
 .flex-column {
     flex-direction: column;

package/src/styles/mobilLayout.css

@@ -2954,6 +2954,10 @@
         flex-wrap: wrap;
     }
 
+    .m_flex-reverse {
+        flex-direction: row-reverse;
+    }
+
     .m_column {
         flex-direction: column;
     }