@bagelink/vue 0.0.466 → 0.0.473

package/src/components/Alert.vue

@@ -1,23 +1,13 @@
-<template>
-	<div class="alert" :class="[type]" v-if="!isDismissed" :dismissable="dismissable" >
-		<Icon v-if="icon !== 'none'" class="alert_icon" :icon="icon || type" :size="2" :color="color[type]"/>
-		<p class="m-0">
-			{{ message }}
-		</p>
-		<Btn  @click="isDismissed = true" flat thin class="alert_close" icon="close"/>
-	</div>
-</template>
-
 <script setup lang="ts">
-import { Icon } from '@bagelink/vue';
-import type { MaterialIcons } from '@bagelink/vue';
-import Btn from './Btn.vue';
+import { Icon } from '@bagelink/vue'
+import type { MaterialIcons } from '@bagelink/vue'
+import Btn from './Btn.vue'
 
-type Props = {
-  message: string;
-  dismissable?: boolean;
-  type?: 'info' | 'warning' | 'error';
-  icon?: MaterialIcons | 'none';
+interface Props {
+	message: string
+	dismissable?: boolean
+	type?: 'info' | 'warning' | 'error'
+	icon?: MaterialIcons | 'none'
 }
 
 withDefaults(
@@ -25,17 +15,27 @@ withDefaults(
 	{
 		type: 'info',
 	},
-);
+)
 
-const isDismissed = $ref(false);
+const isDismissed = $ref(false)
 
 const color = {
 	info: 'var(--bgl-primary)',
 	warning: 'var(--bgl-yellow)',
 	error: 'var(--bgl-red)',
-};
+}
 </script>
 
+<template>
+	<div v-if="!isDismissed" class="alert" :class="[type]" :dismissable="dismissable">
+		<Icon v-if="icon !== 'none'" class="alert_icon" :icon="icon || type" :size="2" :color="color[type]" />
+		<p class="m-0">
+			{{ message }}
+		</p>
+		<Btn flat thin class="alert_close" icon="close" @click="isDismissed = true" />
+	</div>
+</template>
+
 <style scoped>
 .alert {
   padding: var(--btn-padding);

package/src/components/Avatar.vue

@@ -1,23 +1,23 @@
-<template>
-  <div class="avatar flex justify-content-center" :style="{ width: `${size}px`, height: `${size}px` }">
-    <img v-if="src" :src="src" :alt="name">
-    <p v-else :style="{ 'line-height': `${size}px`, 'font-size': `calc(1.5rem * ${size} / 50)` }">
-      {{ fallback || initials(name || '') }}
-    </p>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { initials } from '@bagelink/vue';
+import { initials } from '@bagelink/vue'
 
 withDefaults(defineProps<{
-  fallback?: string;
-  src?: string;
-  name?: string;
-  size?: number;
-}>(), { size: 50 });
+	fallback?: string
+	src?: string
+	name?: string
+	size?: number
+}>(), { size: 50 })
 </script>
 
+<template>
+	<div class="avatar flex justify-content-center" :style="{ width: `${size}px`, height: `${size}px` }">
+		<img v-if="src" :src="src" :alt="name">
+		<p v-else :style="{ 'line-height': `${size}px`, 'font-size': `calc(1.5rem * ${size} / 50)` }">
+			{{ fallback || initials(name || '') }}
+		</p>
+	</div>
+</template>
+
 <style scoped>
 .avatar {
   border-radius: 100%;

package/src/components/Badge.vue

@@ -1,31 +1,32 @@
+<script setup lang="ts">
+import { Icon } from '@bagelink/vue'
+import type { MaterialIcons } from '@bagelink/vue'
+
+interface Props {
+	'color'?: 'green' | 'red' | 'blue' | 'light' | 'gray'
+	'size'?: string
+	'text': string
+	'icon'?: MaterialIcons
+	'icon.end'?: MaterialIcons
+}
+
+const props = defineProps<Props>()
+</script>
+
 <template>
 	<div class="pill" :class="[color]">
 		<Icon v-if="icon" class="inline" :icon="icon" />
 		{{ text }}
-		<Icon class="inline" v-if="props['icon.end']" :icon="props['icon.end']" />
+		<Icon v-if="props['icon.end']" class="inline" :icon="props['icon.end']" />
 	</div>
 </template>
 
-<script setup lang="ts">
-import { Icon } from '@bagelink/vue';
-import type { MaterialIcons } from '@bagelink/vue';
-
-type Props = {
-	'color'?: 'green' | 'red' | 'blue' | 'light' | 'gray';
-	'size'?: string;
-	'text': string;
-	'icon'?: MaterialIcons;
-	'icon.end'?: MaterialIcons;
-};
-
-const props = defineProps<Props>();
-</script>
-
 <style scoped>
 .inline {
 	display: inline;
 }
 </style>
+
 <style>
 .pill {
 	border-radius: 10px;

package/src/components/BglVideo.vue

@@ -1,3 +1,46 @@
+<script setup lang="ts">
+interface Props {
+	src?: string
+	autoplay?: boolean
+	mute?: boolean
+	aspectRatio?: string
+	controls?: boolean
+	loop?: boolean
+}
+
+const props = defineProps<Props>()
+
+const aspectRatio = $computed(
+	() => props.aspectRatio?.replace(':', '/') || '16/9',
+)
+
+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 (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>
+
 <template>
 	<div class="bgl_vid" :class="{ vid_empty: !src }">
 		<iframe
@@ -21,49 +64,6 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-type Props = {
-	src?: string;
-	autoplay?: boolean;
-	mute?: boolean;
-	aspectRatio?: string;
-	controls?: boolean;
-	loop?: boolean;
-};
-
-const props = defineProps<Props>();
-
-const aspectRatio = $computed(
-	() => props.aspectRatio?.replace(':', '/') || '16/9',
-);
-
-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 (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>
 .bgl_vid iframe,
 .bgl_vid video {

package/src/components/Btn.vue

@@ -1,53 +1,29 @@
-<template>
-	<component
-		:is="to ? 'router-link' : is" :to="to" @click.stop="onClick" :type="type" :role="role" :disabled="disabled"
-		:class="{
-			'bgl_btn-icon': icon && !slots['default'] && !value,
-			bgl_btn: !icon || slots['default'] || value,
-			thin,
-			round,
-			'bgl_flatBtn': flat,
-			'bgl_btn-border': border
-		}"
-	>
-		<div class="loading" v-if="loading" />
-		<div v-else class="bgl_btn-flex">
-			<MaterialIcon v-if="icon" :icon="icon" />
-			<slot />
-			<template v-if="!slots['default'] && value">
-				{{ value }}
-			</template>
-			<MaterialIcon v-if="props['icon.end']" :icon="props['icon.end']" />
-		</div>
-	</component>
-</template>
-
 <script setup lang="ts">
-import { useSlots } from 'vue';
-
-const slots = useSlots();
-import type { MaterialIcons, ThemeType } from '@bagelink/vue';
-import { MaterialIcon } from '@bagelink/vue';
+import { useSlots } from 'vue'
+import type { MaterialIcons, ThemeType } from '@bagelink/vue'
+import { MaterialIcon } from '@bagelink/vue'
 
 const props = withDefaults(
 	defineProps<{
-    disabled?: boolean;
-    icon?: MaterialIcons;
-    'icon.end'?: MaterialIcons;
-    color?: ThemeType;
-    theme?: ThemeType;
-    flat?: boolean;
-    border?: boolean;
-    thin?: boolean;
-    type?: 'button' | 'submit' | 'reset';
-    loading?: boolean;
-    role?: string;
-    value?: string;
-    to?: string;
-    round?: boolean;
-    is?: string;
-    onClick?: (e: MouseEvent) => void;
-  }>(),
+		'disabled'?: boolean
+		'icon'?: MaterialIcons
+		// eslint-disable-next-line vue/prop-name-casing TODO: remove/deprecate
+		'icon.end'?: MaterialIcons
+		'icon-end'?: MaterialIcons
+		'color'?: ThemeType
+		'theme'?: ThemeType
+		'flat'?: boolean
+		'border'?: boolean
+		'thin'?: boolean
+		'type'?: 'button' | 'submit' | 'reset'
+		'loading'?: boolean
+		'role'?: string
+		'value'?: string
+		'to'?: string
+		'round'?: boolean
+		'is'?: string
+		'onClick'?: (e: MouseEvent) => void
+	}>(),
 	{
 		onClick: () => '',
 		loading: false,
@@ -58,21 +34,23 @@ const props = withDefaults(
 		is: 'button',
 		border: false,
 	},
-);
+)
+
+const slots = useSlots()
 
 const computedTheme = $computed(
 	() => {
-		if (props.disabled) return 'gray-light';
-		return (props?.color || props?.theme);
+		if (props.disabled) return 'gray-light'
+		return (props.color || props.theme)
 	},
-);
+)
 
 const computedDefaultColors = $computed(
 	() => ({
 		backgroundColor: 'var(--bgl-primary)',
 		color: props.flat ? 'var(--bgl-black)' : 'var(--bgl-white)',
 	}),
-);
+)
 
 function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof computedDefaultColors {
 	return ({
@@ -81,30 +59,54 @@ function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof co
 		color: props.flat
 			? theme.backgroundColor as string
 			: theme.color as string,
-	});
+	})
 }
 
 const themes: { [key in ThemeType]: typeof computedDefaultColors } = {
-	red: getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
-	white: getThemeColors({ backgroundColor: 'var(--bgl-white)' }),
-	black: getThemeColors({ backgroundColor: 'var(--bgl-black)' }),
-	green: getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
-	primary: getThemeColors({ backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' }),
-	gray: getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
-	light: getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
+	'red': getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
+	'white': getThemeColors({ backgroundColor: 'var(--bgl-white)' }),
+	'black': getThemeColors({ backgroundColor: 'var(--bgl-black)' }),
+	'green': getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
+	'primary': getThemeColors({ backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' }),
+	'gray': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
+	'light': getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
 	'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' }),
-	blue: getThemeColors({}),
-};
+	'blue': getThemeColors({}),
+}
 
 const cumputedTextColor = $computed(
-	() => (themes?.[computedTheme as ThemeType]?.color || computedDefaultColors.color),
-);
+	() => (themes[computedTheme as Partial<ThemeType>].color || computedDefaultColors.color),
+)
 
 const computedBackgroundColor = $computed(
-	() => (themes?.[computedTheme as ThemeType]?.backgroundColor || computedDefaultColors.backgroundColor),
-);
+	() => (themes[computedTheme as Partial<ThemeType>].backgroundColor || computedDefaultColors.backgroundColor),
+)
 </script>
 
+<template>
+	<component
+		:is="to ? 'router-link' : is" :to="to" :type="type" :role="role" :disabled="disabled" :class="{
+			'bgl_btn-icon': icon && !slots.default && !value,
+			'bgl_btn': !icon || slots.default || value,
+			thin,
+			round,
+			'bgl_flatBtn': flat,
+			'bgl_btn-border': border,
+		}"
+		@click.stop="onClick"
+	>
+		<div v-if="loading" class="loading" />
+		<div v-else class="bgl_btn-flex">
+			<MaterialIcon v-if="icon" :icon="icon" />
+			<slot />
+			<template v-if="!slots.default && value">
+				{{ value }}
+			</template>
+			<MaterialIcon v-if="props['icon.end']" :icon="props['icon.end']" />
+		</div>
+	</component>
+</template>
+
 <style scoped>
 a {
   text-decoration: none;

package/src/components/Card.vue

@@ -1,3 +1,29 @@
+<script setup lang="ts">
+const props = defineProps<{
+	label?: string
+	thin?: boolean
+	outline?: boolean
+	h100?: boolean
+	to?: string
+	overflowX?: boolean
+	overflowY?: boolean
+	bg?:
+		| 'gray'
+		| 'light'
+		| 'dark'
+		| 'primary'
+		| 'secondary'
+		| 'success'
+		| 'danger'
+		| 'warning'
+		| 'info'
+		| 'white'
+		| 'transparent'
+}>()
+
+const is = $computed(() => (props.to ? 'router-link' : 'div'))
+</script>
+
 <template>
 	<component
 		:is="is"
@@ -19,32 +45,6 @@
 	</component>
 </template>
 
-<script setup lang="ts">
-const props = defineProps<{
-	label?: string;
-	thin?: boolean;
-	outline?: boolean;
-	h100?: boolean;
-	to?: string;
-	overflowX?: boolean;
-	overflowY?: boolean;
-	bg?:
-		| 'gray'
-		| 'light'
-		| 'dark'
-		| 'primary'
-		| 'secondary'
-		| 'success'
-		| 'danger'
-		| 'warning'
-		| 'info'
-		| 'white'
-		| 'transparent';
-}>();
-
-const is = $computed(() => (props.to ? 'router-link' : 'div'));
-</script>
-
 <style>
 .card_label {
 	font-size: 1rem;