@bagelink/vue 0.0.1000 → 0.0.1004

package/dist/style.css

@@ -293,15 +293,15 @@ display: block;
 	color: var(--bgl-red);
 }
 
-.bgl_vid iframe[data-v-30c80244],
-.bgl_vid video[data-v-30c80244] {
+.bgl_vid iframe[data-v-732c510b],
+.bgl_vid video[data-v-732c510b] {
 	width: 100%;
 	height: auto;
 	display: block;
 	margin: auto;
 	border-radius: var(--input-border-radius);
 }
-.bgl_vid.vid_empty[data-v-30c80244] {
+.bgl_vid.vid_empty[data-v-732c510b] {
 	padding-top: 56.25%;
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);

package/package.json

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

package/src/components/BglVideo.vue

@@ -26,13 +26,16 @@ const videoUrl = $computed(() => {
 		if (embedType === 'YouTube') {
 			const videoId = props.src?.split(/v=|youtu\.be\//)[1]?.split('&')?.[0]
 			const queryParams = new URLSearchParams({
-				autoplay: props.autoplay ? '1' : '0'
+				autoplay: props.autoplay ? '1' : '0',
+				controls: '0',
+				showinfo: '0',
+				modestbranding: '1'
 			})
 			return `https://www.youtube.com/embed/${videoId}?${queryParams}`
 		}
 		if (embedType === 'Vimeo') {
 			const vimeoRegex
-				// eslint-disable-next-line regexp/no-unused-capturing-group
+			// 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]
 			return `https://player.vimeo.com/video/${videoId}`

package/src/components/IframeVue.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+interface Message {
+	mesage: string
+	type: string
+}
+defineProps<{
+	src: string
+	title?: string
+	height?: string
+	width?: string
+	name?: string
+	sandbox?: string
+	allow?: string
+	allowfullscreen?: boolean
+	loading?: 'eager' | 'lazy'
+	referrerpolicy?: string
+	marginwidth?: number
+	marginheight?: number
+	scrolling?: 'yes' | 'no' | 'auto'
+	csp?: string
+	srcset?: string
+}>()
+
+const emit = defineEmits<{
+	(message: 'message', payload: Message): void
+	(load: 'load', payload: Event): void
+}>()
+
+import { onBeforeUnmount, onMounted } from 'vue'
+
+const iframe = $ref<HTMLIFrameElement>()
+
+function handleMessage(event: MessageEvent) {
+	emit('message', event.data as Message)
+}
+
+function handleMessageWrapper(event: MessageEvent) {
+	if (event.source === iframe?.contentWindow) {
+		handleMessage(event)
+	}
+}
+
+onMounted(() => {
+	window.addEventListener('message', handleMessageWrapper)
+})
+
+onBeforeUnmount(() => {
+	window.removeEventListener('message', handleMessageWrapper)
+})
+
+const contentWindow = () => iframe?.contentWindow as Window | null
+
+defineExpose({ contentWindow })
+</script>
+
+<template>
+	<iframe
+		ref="iframe"
+		:src
+		:title
+		frameborder="none"
+		:width
+		:height
+		allowpaymentrequest="true"
+		:marginwidth
+		:marginheight
+		:csp
+		:scrolling
+		:srcset
+		@load="$event => emit('load', $event)"
+	/>
+</template>

package/src/components/index.ts

@@ -13,6 +13,7 @@ export { default as DataPreview } from './DataPreview.vue'
 export { default as Dropdown } from './Dropdown.vue'
 export { default as Flag } from './Flag.vue'
 export * from './form'
+export { default as IframeVue } from './IframeVue.vue'
 export { default as Image } from './Image.vue'
 export * from './layout'
 export { default as ListItem } from './ListItem.vue'
@@ -24,8 +25,8 @@ export { default as Icon } from './MaterialIcon.vue'
 export { default as Modal } from './Modal.vue'
 export { default as ModalConfirm } from './ModalConfirm.vue'
 export { default as ModalForm } from './ModalForm.vue'
-export { default as NavBar } from './NavBar.vue'
 
+export { default as NavBar } from './NavBar.vue'
 export { default as PageTitle } from './PageTitle.vue'
 export { default as Pill } from './Pill.vue'
 export { default as RouterWrapper } from './RouterWrapper.vue'