@bagelink/vue 0.0.300 → 0.0.304

package/dist/types/NavLink.d.ts

@@ -0,0 +1,9 @@
+import { MaterialIcons } from './materialIcons';
+export type NavLink = {
+    label: string;
+    to?: string;
+    materialIcon: MaterialIcons;
+    localized?: string;
+    onClick?: () => void;
+};
+//# sourceMappingURL=NavLink.d.ts.map

package/dist/types/NavLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../src/types/NavLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.300",
+  "version": "0.0.304",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -52,7 +52,7 @@
   ],
   "devDependencies": {
     "@vue-macros/reactivity-transform": "^0.4.3",
-    "vue": "^3.4.19"
+    "vue": "^3.4.21"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",
@@ -114,7 +114,7 @@
   },
   "dependencies": {
     "floating-vue": "^5.2.2",
-    "type-fest": "^4.10.2",
+    "type-fest": "^4.11.1",
     "vue-multiselect": "3.0.0-beta.3"
   },
   "scripts": {

package/src/components/Alert.vue

@@ -1,40 +1,48 @@
 <template>
-  <div class="alert" :class="[type]">
-    <Icon class="alert_icon" :icon="type" :size="2" :color="color[type]" />
-    {{ message }}
-  </div>
+	<div class="alert" :class="[type]" v-if="!isDismissed" :dismissable="dismissable" >
+		<Icon class="alert_icon" :icon="type" :size="2" :color="color[type]"/>
+		<p>
+			{{ 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 Btn from './Btn.vue';
 
 type Props = {
   message: string;
+  dismissable?: boolean;
   type: 'info' | 'warning' | 'error';
 }
 
 withDefaults(
-  defineProps<Props>(),
-  {
-    type: 'info',
-  },
+	defineProps<Props>(),
+	{
+		type: 'info',
+	},
 );
 
+const isDismissed = $ref(false);
+
 const color = {
-  info: '#739DEF',
-  warning: '#efdb73',
-  error: '#DC3545',
+	info: 'var(--bgl-primary)',
+	warning: 'var(--bgl-yellow)',
+	error: 'var(--bgl-red)',
 };
 </script>
 
 <style scoped>
 .alert {
-  padding: 1rem;
-  border-radius: 10px;
-  background: #739def30;
+  padding: var(--btn-padding);
+  border-radius: var(--card-border-radius);
+  background: var(--bgl-primary-light);
   display: flex;
   align-items: flex-start;
   gap: 1rem;
+  position: relative;
 }
 
 .alert_icon {
@@ -42,10 +50,23 @@ const color = {
 }
 
 .alert.warning {
-  background-color: #efdb7330;
+  background-color: var(--bgl-yellow-light);
 }
 
 .alert.error {
-  background-color: #DC354530;
+  background: var(--bgl-red-tint);
+}
+.alert_close{
+  display: none;
+  position: absolute;
+  inset-inline-end: 1.5rem;
+  top: 2rem;
+}
+
+.alert[dismissable="true"] .alert_close{
+display: block;
+}
+.alert[dismissable="true"] p{
+  width: calc(100% - 5rem);
 }
 </style>

package/src/components/Avatar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="avatar" :style="{ width: `${size}px`, height: `${size}px` }">
     <img v-if="src" :src="src" :alt="name">
-    <p v-else :style="{ 'line-height': `${size * 0.9}px` }">
+    <p v-else :style="{ 'line-height': `${size}px`, 'font-size': `calc(1.5rem * ${size} / 50)` }">
       {{ fallback || initials(name || '') }}
     </p>
   </div>

package/src/components/Badge.vue

@@ -1,9 +1,9 @@
 <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']" />
-  </div>
+	<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']" />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -26,3 +26,48 @@ const props = defineProps<Props>();
   display: inline;
 }
 </style>
+<style>
+.pill {
+    border-radius: 10px;
+    padding: 4px 8px;
+    font-size: 10px;
+    background: var(--bgl-gray-light);
+    white-space: nowrap;
+    display: inline;
+}
+
+.pill.blue {
+    background: var(--bgl-blue-light);
+    color: var(--bgl-primary);
+}
+
+.pill.red {
+    background-color: var(--bgl-red-tint);
+    color: var(--bgl-red);
+}
+
+.pill.green {
+    background-color: var(--bgl-green);
+    color: var(--bgl-white);
+}
+
+.pill.orange {
+    background-color: var(--bgl-yellow);
+    color: var(--bgl-black);
+}
+
+.pill.yellow {
+    background-color: var(--bgl-yellow);
+}
+
+.pill.Paid,
+.pill.Active {
+    background-color: var(--bgl-green);
+    color: white;
+}
+
+.pill.Error {
+    background-color: var(--bgl-red-tint);
+    color: var(--bgl-red);
+}
+</style>

package/src/components/BglVideo.vue

@@ -1,9 +1,24 @@
 <template>
-  <div class="bgl_vid">
-    <iframe v-if="embedType" :src="videoUrl" :style="{ aspectRatio }" frameborder="0" allowfullscreen title="Video" />
-    <video v-else :src="src" :autoplay="autoplay" :muted="mute" :loop="loop" :style="{ aspectRatio }"
-      :controls="controls" />
-  </div>
+	<div class="bgl_vid">
+		<iframe
+			v-if="embedType"
+			:src="videoUrl"
+			:style="{ aspectRatio }"
+			frameborder="0"
+			allowfullscreen
+			title="Video"
+		/>
+		<video
+			v-else
+			:src="src"
+			:autoplay="autoplay"
+			:muted="mute"
+			:loop="loop"
+			:style="{ aspectRatio }"
+			:controls="controls"
+			playsinline
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -21,26 +36,26 @@ const props = defineProps<Props>();
 const aspectRatio = $computed(() => props.aspectRatio.replace(':', '/'));
 
 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 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;
+	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);
@@ -51,5 +66,6 @@ console.log('Video URL:', videoUrl);
 .bgl_vid video {
   width: 100%;
   height: auto;
+  display: block
 }
 </style>

package/src/components/Btn.vue

@@ -1,25 +1,23 @@
 <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>
+  <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">
@@ -30,224 +28,228 @@ 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;
-	}>(),
-	{
-		onClick: () => '',
-		loading: false,
-		round: false,
-		disabled: false,
-		type: 'button',
-		role: 'button',
-		is: 'button',
-		border: false,
-	},
+  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;
+  }>(),
+  {
+    onClick: () => '',
+    loading: false,
+    round: false,
+    disabled: false,
+    type: 'button',
+    role: 'button',
+    is: 'button',
+    border: false,
+  },
 );
 
 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)',
-	}),
+  () => ({
+    backgroundColor: 'var(--bgl-primary)',
+    color: props.flat ? 'var(--bgl-black)' : 'var(--bgl-white)',
+  }),
 );
 
 function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof computedDefaultColors {
-	return ({
-		...computedDefaultColors,
-		...theme,
-		color: props.flat
-			? theme.backgroundColor as string
-			: theme.color as string,
-	});
+  return ({
+    ...computedDefaultColors,
+    ...theme,
+    color: props.flat
+      ? theme.backgroundColor as string
+      : theme.color as string,
+  });
 }
 
 const themes: { [key in ThemeType]: typeof computedDefaultColors } = {
-	red: getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
-	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({}),
+  red: getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
+  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({}),
 };
 
 const cumputedTextColor = $computed(
-	() => (themes?.[computedTheme as ThemeType]?.color || computedDefaultColors.color),
+  () => (themes?.[computedTheme as ThemeType]?.color || computedDefaultColors.color),
 );
 
 const computedBackgroundColor = $computed(
-	() => (themes?.[computedTheme as ThemeType]?.backgroundColor || computedDefaultColors.backgroundColor),
+  () => (themes?.[computedTheme as ThemeType]?.backgroundColor || computedDefaultColors.backgroundColor),
 );
 </script>
 
 <style scoped>
+a {
+  text-decoration: none;
+}
+
 .loading {
-	border: 1px solid var(--bgl-white);
-	border-bottom: 2px solid var(--bgl-white);
-	animation: spin 1s linear infinite;
-	border-radius: 100px;
-	width: 1rem;
-	height: 1rem;
-	margin: auto;
+  border: 1px solid var(--bgl-white);
+  border-bottom: 2px solid var(--bgl-white);
+  animation: spin 1s linear infinite;
+  border-radius: 100px;
+  width: 1rem;
+  height: 1rem;
+  margin: auto;
 }
 
 @keyframes spin {
-	0% {
-		transform: rotate(0deg);
-	}
+  0% {
+    transform: rotate(0deg);
+  }
 
-	100% {
-		transform: rotate(360deg);
-	}
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .bgl_btn-icon {
-	height: var(--btn-height);
-	width: var(--btn-height);
-	border-radius: 100%;
-	font-size: 1rem;
-	background: var(--bgl-primary);
-	color: var(--bgl-white);
-	flex-shrink: 0;
-	transition: var(--bgl-transition);
+  height: var(--btn-height);
+  width: var(--btn-height);
+  border-radius: 100%;
+  font-size: 1rem;
+  background: var(--bgl-primary);
+  color: var(--bgl-white);
+  flex-shrink: 0;
+  transition: var(--bgl-transition);
 }
 
 .bgl_btn {
-	padding-left: var(--btn-padding);
-	padding-right: var(--btn-padding);
-	transition: var(--bgl-transition);
-	text-decoration: none;
+  padding-left: var(--btn-padding);
+  padding-right: var(--btn-padding);
+  transition: var(--bgl-transition);
+  text-decoration: none;
 }
 
 .bgl_btn[disabled="true"] {
-	opacity: 0.5;
-	cursor: not-allowed;
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .bgl_btn-flex {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	justify-content: center;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  justify-content: center;
 }
 
 .bgl_btn .bgl_.bgl_icon-font {
-	font-size: calc(var(--input-font-size) * 1.3);
+  font-size: calc(var(--input-font-size) * 1.3);
 }
 
 .bgl_btn,
 .bgl_btn-icon {
-	background-color: v-bind(computedBackgroundColor);
-	color: v-bind(cumputedTextColor);
+  background-color: v-bind(computedBackgroundColor);
+  color: v-bind(cumputedTextColor);
 }
 
 .bgl_btn:hover,
 .bgl_btn-icon:hover {
-	filter: var(--bgl-hover-filter);
+  filter: var(--bgl-hover-filter);
 }
 
 .bgl_btn:active,
 .bgl_btn-icon:active {
-	filter: var(--bgl-active-filter);
+  filter: var(--bgl-active-filter);
 }
 
 .bgl_btn.bgl_flatBtn {
-	padding-left: var(--btn-padding);
-	padding-right: var(--btn-padding);
-	background: transparent;
+  padding-left: var(--btn-padding);
+  padding-right: var(--btn-padding);
+  background: transparent;
 }
 
 .bgl_btn-icon.bgl_flatBtn {
-	background: transparent;
+  background: transparent;
 }
 
 .bgl_btn.bgl_flatBtn:hover,
 .bgl_btn-icon.bgl_flatBtn:hover {
-	filter: var(--bgl-active-filter);
+  filter: var(--bgl-active-filter);
 }
 
 .bgl_btn.bgl_flatBtn:active,
 .bgl_btn-icon.bgl_flatBtn:active {
-	background: var(--bgl-white);
-	filter: var(--bgl-hover-filter);
+  background: var(--bgl-white);
+  filter: var(--bgl-hover-filter);
 }
 
 .bgl_btn.bgl_flatBtn.red,
 .bgl_btn-icon.bgl_flatBtn.red {
-	color: var(--bgl-red);
+  color: var(--bgl-red);
 }
 
 .bgl_btn.bgl_flatBtn.light,
 .bgl_btn-icon.bgl_flatBtn.light {
-	color: var(--bgl-primary-tint);
+  color: var(--bgl-primary-tint);
 }
 
 .bgl_btn.bgl_flatBtn.black,
 .bgl_btn-icon.bgl_flatBtn.black {
-	color: var(--bgl-black);
+  color: var(--bgl-black);
 }
 
 .bgl_btn.bgl_flatBtn.gray,
 .bgl_btn-icon.bgl_flatBtn.gray {
-	color: var(--bgl-gray);
+  color: var(--bgl-gray);
 }
 
 .bgl_btn.thin {
-	padding-left: calc(var(--btn-padding) / 2);
-	padding-right: calc(var(--btn-padding) / 2);
+  padding-left: calc(var(--btn-padding) / 2);
+  padding-right: calc(var(--btn-padding) / 2);
 }
 
 .bgl_btn.round {
-	border-radius: calc(var(--btn-border-radius) * 2);
+  border-radius: calc(var(--btn-border-radius) * 2);
 }
 
 .bgl_btn-icon.thin {
-	height: calc(var(--btn-height) / 1.5);
-	width: calc(var(--btn-height) / 1.5);
-	line-height: 1;
+  height: calc(var(--btn-height) / 1.5);
+  width: calc(var(--btn-height) / 1.5);
+  line-height: 1;
 }
 
 [dir="rtl"] .bgl_.bgl_icon-font {
-	transform: rotateY(180deg);
+  transform: rotateY(180deg);
 }
 
 .bgl_btn-border {
-	outline: 1px solid v-bind(computedBackgroundColor);
-	color: v-bind(computedBackgroundColor);
-	background: transparent;
+  outline: 1px solid v-bind(computedBackgroundColor);
+  color: v-bind(computedBackgroundColor);
+  background: transparent;
 }
 
 .bgl_btn-border:hover {
-	color: var(--bgl-white);
-	background: v-bind(computedBackgroundColor);
-	filter: brightness(100%);
+  color: var(--bgl-white);
+  background: v-bind(computedBackgroundColor);
+  filter: brightness(100%);
 }
 
 .bgl_btn-border:active {
-	filter: brightness(80%);
+  filter: brightness(80%);
 }
 </style>