@bagelink/vue 0.0.726 → 0.0.728

package/src/components/lightbox/index.ts

@@ -1,4 +1,4 @@
-import type { App, DirectiveBinding } from 'vue'
+import type { App, Directive, DirectiveBinding } from 'vue'
 import { createApp } from 'vue'
 import { IMAGE_FORMATS_REGEXP, VIDEO_FORMATS_REGEXP } from '@bagelink/vue'
 import Lightbox from './Lightbox.vue'
@@ -6,44 +6,37 @@ import type { LightboxItem } from './lightbox.types'
 
 type OpenFunction = (item: LightboxItem, groupItems?: LightboxItem[]) => void
 const groups: Record<string, LightboxItem[]> = {}
-const lightboxDirective = {
-	mounted(el: HTMLElement, binding: DirectiveBinding) {
-		const lightboxInstance = createLightboxInstance()
-		if (!lightboxInstance || !lightboxInstance.open) return
-		if (binding.value.group) {
-			if (!groups[binding.value.group]) groups[binding.value.group] = []
-			const src = binding.value.src || binding.value || el.getAttribute('src') || ''
-			groups[binding.value.group].push({
-				src,
-				type: binding.value.type || determineFileType(src),
-				name: binding.value.name || ''
-			})
+const lightboxDirective: Directive = {
+	mounted(el: HTMLElement, binding) {
+		el.classList.add('hover')
+		let { group, src, type, name, thumbnail } = binding.value || {}
+		src = src || binding.value || el.getAttribute('src') || ''
+		type = type || determineFileType(src)
+		const item: LightboxItem = { src, type,	name, thumbnail }
+		if (group) {
+			if (!groups[group]) groups[group] = []
+			groups[group].push(item)
 		}
 		el.addEventListener('click', (e) => {
 			e.stopPropagation()
-			const group = binding.value.group || null
-			const item: LightboxItem = {
-				src: binding.value.src || binding.value,
-				type: binding.value.type || determineFileType(binding.value.src || binding.value),
-				name: binding.value.name || '',
-				thumbnail: binding.value.thumbnail || '',
-			}
 			const lightboxInstance = createLightboxInstance()
 			if (!lightboxInstance || !lightboxInstance.open) return
-			if (binding.value.group) {
-				if (!groups[binding.value.group]) groups[binding.value.group] = []
-				groups[binding.value.group].push(item)
-			}
 			const open = lightboxInstance.open as OpenFunction
 			open(item, groups[group])
 		})
 	},
+	unmounted(el: HTMLElement, binding) {
+		// TODO: remove click event handler
+	}
 }
 
+const youtubeRegex = /youtube\.com|youtu\.be/
+const vimeoRegex = /vimeo\.com/
+
 function determineFileType(url: string): string {
 	const extension = url.split('.').pop()?.toLowerCase() || ''
 	if (IMAGE_FORMATS_REGEXP.test(extension)) return 'image'
-	if (VIDEO_FORMATS_REGEXP.test(extension)) return 'video'
+	if (VIDEO_FORMATS_REGEXP.test(extension) || youtubeRegex.test(url) || vimeoRegex.test(url)) return 'video'
 	if (['pdf'].includes(extension)) return 'pdf'
 	return 'unknown'
 }

package/src/styles/modal.css

@@ -34,6 +34,24 @@
     height: fit-content;
 }
 
+.is-active .modal {
+    animation: 200ms ease bgl-modal-animation;
+
+}
+
+@keyframes bgl-modal-animation {
+    from {
+        scale: 0.7;
+        transform: translateY(2rem);
+    }
+
+    to {
+        scale: 1;
+        transform: translateY(0);
+
+    }
+}
+
 .small-modal .modal {
     max-width: 300px;
     text-align: center;