@bagelink/vue 1.2.139 → 1.2.143

package/src/components/BglVideo.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { useIntersectionObserver } from '@vueuse/core'
 import { watch } from 'vue'
 
+type Autoplay = boolean | 'visible'
 interface Props {
 	src?: string
-	autoplay?: boolean
+	autoplay?: Autoplay
 	mute?: boolean
 	aspectRatio?: string
 	controls?: boolean
@@ -16,8 +18,17 @@ const props = defineProps<Props>()
 
 const videoFormat = $computed(() => props.src?.split('.').pop()?.split('?').shift()?.toLowerCase() || 'mp4')
 
+const videoContainer = $ref<HTMLElement | null>()
+
+const isYoutubeShort = $computed(() => {
+	return props.src?.includes('youtube.com/shorts/') || false
+})
+
 const aspectRatio = $computed(
-	() => props.aspectRatio?.replace(':', '/') || '16/9',
+	() => {
+		if (isYoutubeShort) return '9/16' // Vertical aspect ratio for Shorts
+		return props.aspectRatio?.replace(':', '/') || '16/9'
+	}
 )
 
 const video = $ref<HTMLVideoElement | null>()
@@ -30,6 +41,21 @@ function pause() {
 	video?.pause()
 }
 
+// Setup intersection observer for autoplay="visible"
+if (props.autoplay === 'visible') {
+	useIntersectionObserver(
+		videoContainer,
+		([{ isIntersecting }]) => {
+			if (isIntersecting) {
+				play()
+			} else {
+				pause()
+			}
+		},
+		{ threshold: 0.3 } // Start playing when 30% of the video is visible
+	)
+}
+
 watch(() => props.status, (status) => {
 	if (status === 'play') play()
 	if (status === 'pause') pause()
@@ -47,7 +73,14 @@ const embedType = $computed<'YouTube' | 'Vimeo' | undefined>(() => {
 const videoUrl = $computed(() => {
 	if (embedType) {
 		if (embedType === 'YouTube') {
-			const videoId = props.src?.split(/v=|youtu\.be\//)[1]?.split('&')?.[0]
+			// Extract video ID from YouTube regular or Shorts URL
+			let videoId = ''
+			if (props.src?.includes('youtube.com/shorts/')) {
+				videoId = props.src.split('/shorts/')[1]?.split('?')[0] || ''
+			} else {
+				videoId = props.src?.split(/v=|youtu\.be\//)[1]?.split('&')?.[0] || ''
+			}
+
 			const queryParams = new URLSearchParams({
 				autoplay: props.autoplay ? '1' : '0',
 				controls: '0',
@@ -69,7 +102,7 @@ const videoUrl = $computed(() => {
 </script>
 
 <template>
-	<div class="bgl_vid" :class="{ vid_empty: !src }">
+	<div ref="videoContainer" class="bgl_vid" :class="{ vid_empty: !src, vid_short: isYoutubeShort }">
 		<iframe
 			v-if="embedType"
 			:src="videoUrl"
@@ -82,7 +115,7 @@ const videoUrl = $computed(() => {
 		<video
 			v-else-if="src"
 			ref="video"
-			:autoplay="autoplay"
+			:autoplay="autoplay === true"
 			:muted="mute"
 			:loop="loop"
 			:style="{ aspectRatio }"
@@ -109,4 +142,9 @@ const videoUrl = $computed(() => {
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
 }
+
+.bgl_vid.vid_short {
+	max-width: 56.25vh; /* Limit width for shorts to maintain aspect ratio */
+	margin: 0 auto;
+}
 </style>

package/src/components/NavBar.vue

@@ -39,7 +39,7 @@ onMounted(calcIsOpen)
 
 <template>
 	<div :class="{ open: isOpen, closed: !isOpen }">
-		<slot name="top" :isOpen />
+		<slot name="top" :isOpen="isOpen" />
 		<div
 			class="nav-expend"
 			role="button"

package/src/components/form/BagelForm.vue

@@ -141,9 +141,9 @@ defineExpose({ form, isDirty, validateForm, checkValidity })
 			<slot
 				name="submit"
 				:submit="handleSubmit"
-				:isDirty
-				:validateForm
-				:formState
+				:isDirty="isDirty"
+				:validateForm="validateForm"
+				:formState="formState"
 			/>
 		</form>
 

package/src/components/form/inputs/TextInput.vue

@@ -103,18 +103,18 @@ onMounted(() => {
 
 			<input
 				v-if="!multiline && !autoheight && !code && inputRows < 2"
-				:id
+				:id="id"
 				ref="input"
 				v-model.trim="inputVal"
-				:name
-				:title
-				:autocomplete
+				:name="name"
+				:title="title"
+				:autocomplete="autocomplete"
 				:type="type"
 				:rows="1"
 				:placeholder="placeholder || label"
-				:disabled
-				:required
-				:pattern
+				:disabled="disabled"
+				:required="required"
+				:pattern="pattern"
 				v-bind="nativeInputAttrs"
 				@focusout="onFocusout"
 				@focus="onFocus"
@@ -122,17 +122,17 @@ onMounted(() => {
 			>
 			<textarea
 				v-else
-				:id
+				:id="id"
 				ref="input"
 				v-model="inputVal"
-				:name
-				:title
-				:type
+				:name="name"
+				:title="title"
+				:type="type"
 				:rows="inputRows"
 				:placeholder="placeholder || label"
-				:disabled
-				:required
-				:pattern
+				:disabled="disabled"
+				:required="required"
+				:pattern="pattern"
 				v-bind="nativeInputAttrs"
 				@input="updateInputVal"
 				@focusout="onFocusout"
@@ -145,7 +145,7 @@ onMounted(() => {
 			/>
 			<Icon
 				v-if="icon"
-				:icon
+				:icon="icon"
 			/>
 		</label>
 	</div>

package/src/components/layout/Tabs.vue

@@ -41,7 +41,7 @@ const tabComponent = defineComponent({
 
 z
 <template>
-	<TabsNav v-model="slctTab" :flat :tabs :group class="mb-05" />
+	<TabsNav v-model="slctTab" :flat="flat" :tabs="tabs" :group class="mb-05" />
 	<div v-if="currentTab">
 		<template v-if="slots[currentTab]">
 			<slot :name="currentTab" />

package/src/components/lightbox/Lightbox.vue

@@ -200,6 +200,9 @@ defineExpose({ open, close })
 .bgl-lightbox:has(.bgl_vid) {
 	width: 90vw;
 }
+.bgl-lightbox:has(.vid_short) {
+	width: unset;
+}
 .lightbox-image{
 	object-fit: contain;
 }

package/dist/components/Icon.vue.d.ts

@@ -1,16 +0,0 @@
-import { IconType } from '..';
-type __VLS_Props = {
-    icon?: IconType;
-    name?: IconType;
-    size?: number | string;
-    color?: string;
-    round?: boolean;
-    weight?: number | string;
-    fontAwesome?: boolean;
-    fill?: boolean;
-};
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;
-//# sourceMappingURL=Icon.vue.d.ts.map

package/dist/components/Icon.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon.vue.d.ts","sourceRoot":"","sources":["../../src/components/Icon.vue"],"names":[],"mappings":"AAoIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAK7C,KAAK,WAAW,GAAG;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;CACd,CAAC;;UANM,MAAM,GAAG,MAAM;;AAgIvB,wBAOG"}

package/dist/components/form/BglFieldSet.vue.d.ts

@@ -1,25 +0,0 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        fieldSet: HTMLFieldSetElement;
-    };
-    rootEl: HTMLFieldSetElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {
-    validateForm: () => boolean | undefined;
-    isDirty: import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<false> | import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<true>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
-    fieldSet: HTMLFieldSetElement;
-}, HTMLFieldSetElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=BglFieldSet.vue.d.ts.map

package/dist/components/form/BglFieldSet.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BglFieldSet.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BglFieldSet.vue"],"names":[],"mappings":"AAsBA,iBAAS,cAAc;WA0BT,OAAO,IAA6B;;yBAXrB,GAAG;;;;;;EAgB/B;AAQD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;uBAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAEpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}