@bagelink/vue 0.0.284 → 0.0.287

package/dist/style.css

@@ -555,46 +555,46 @@
 }
 }
 
-.accordion-item[data-v-41718a1b] {
-	border-bottom: 1px solid var(--border-color);
-	transition: all 0.2s;
-	cursor: pointer;
-	overflow: hidden;
+.accordion-item[data-v-bf74738b] {
+  border-bottom: 1px solid var(--border-color);
+  transition: all 0.2s;
+  cursor: pointer;
+  overflow: hidden;
 }
-.accordion-head[data-v-41718a1b] {
-	height: var(--input-height);
-	background: transparent;
-	display: flex;
-	width: 100%;
-	align-items: center;
-	justify-content: space-between;
+.accordion-head[data-v-bf74738b] {
+  height: var(--input-height);
+  background: transparent;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
 }
-.accordion-icon[data-v-41718a1b] {
-	transition: all 0.2s ease;
+.accordion-icon[data-v-bf74738b] {
+  transition: all 0.2s ease;
 }
-.accordion-icon.open[data-v-41718a1b] {
-	transform: rotate(180deg);
+.accordion-icon.open[data-v-bf74738b] {
+  transform: rotate(180deg);
 }
-.accordion-label[data-v-41718a1b] {
-	font-weight: bold;
+.accordion-label[data-v-bf74738b] {
+  font-weight: bold;
 }
-.accordion-head:hover .accordion-label[data-v-41718a1b] {
-	text-decoration: underline;
+.accordion-head:hover .accordion-label[data-v-bf74738b] {
+  text-decoration: underline;
 }
-.accordion-body[data-v-41718a1b] {}
+.accordion-body[data-v-bf74738b] {}
 
 .expand-enter-active,
 .expand-leave-active {
-	transition: all 0.5s;
-	transition-delay: 0ms;
+  transition: all 0.5s;
+  transition-delay: 0ms;
 }
 .expand-enter-from,
 .expand-leave-to {
-	max-height: 0;
+  max-height: 0;
 }
 .expand-enter-to,
 .expand-leave-from {
-	max-height: 300px;
+  max-height: 300px;
 }
 
 .search-wrap {
@@ -875,25 +875,24 @@ th[data-v-2137a7a8] {
 	color: var(--input-color);
 }
 
-.avatar[data-v-0441b0b8] {
-	border-radius: 100%;
-	background-color: var(--bgl-gray-20);
-	border: 0.5px solid var(--border-color);
-	overflow: hidden;
-	text-align: center;
-	padding: none;
-	flex: 0 0 40px;
+.avatar[data-v-b46163a3] {
+  border-radius: 100%;
+  background-color: var(--bgl-gray-20);
+  border: 0.5px solid var(--border-color);
+  overflow: hidden;
+  text-align: center;
+  padding: 0;
 }
-.avatar p[data-v-0441b0b8] {
-	font-size: 1.5rem;
-	line-height: 50px;
-	margin: 0;
-	font-weight: 200;
+.avatar p[data-v-b46163a3] {
+  font-size: 1.5rem;
+  line-height: 50px;
+  margin: 0;
+  font-weight: 200;
 }
-.avatar img[data-v-0441b0b8] {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
+.avatar img[data-v-b46163a3] {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
@@ -933,166 +932,6 @@ th[data-v-2137a7a8] {
   border-radius: var(--card-border-radius);
 }
 
-/* .group-wrap * {
-  outline: 1px solid red;
-} */
-.group-wrap[data-v-fe5af582] {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 2px;
-}
-.group-wrap .bar-wrap[data-v-fe5af582] {
-  gap: 2px;
-}
-.group-title[data-v-fe5af582] {
-  font-size: 0.6em;
-  width: 100%;
-}
-.bar-txt[data-v-fe5af582] {
-  font-size: 11px;
-  font-weight: 200;
-  /* max-width: 95%; */
-  width: max-content;
-  height: 20px;
-  line-height: 1.2;
-  margin: 5px auto 0;
-  position: absolute;
-  transform: rotate(300deg);
-  transform-origin: 40px 40px;
-}
-.graph-wrap[data-v-fe5af582] {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  padding: 0 10px;
-}
-.bar-wrap[data-v-fe5af582] {
-  text-align: center;
-  height: 100%;
-  /* flex: 0 1 16.6%; */
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  position: relative;
-}
-.bar[data-v-fe5af582] {
-  background: var(--bgl-primary);
-  position: relative;
-  min-width: 10px;
-  min-height: 5px;
-  width: 4px;
-  margin: 0 auto;
-  transition: all ease-out 0.8s;
-}
-.bar.compare[data-v-fe5af582] {
-  background-color: #cf2135;
-}
-.bar-chart[data-v-fe5af582] {
-  height: calc(100vh - 500px);
-  width: 90%;
-  margin: 30px auto;
-  display: flex;
-  justify-content: space-between;
-  position: relative;
-}
-.graps .bar-chart[data-v-fe5af582] {
-  aspect-ratio: 9/5;
-  height: auto;
-  max-height: calc(100vh - 500px);
-}
-.bar-lines[data-v-fe5af582] {
-  position: absolute;
-  /* font-size: 20px; */
-  display: flex;
-  flex-direction: column-reverse;
-  top: -15px;
-  bottom: -12px;
-  left: -30px;
-  justify-content: space-between;
-  width: calc(100% + 20px);
-  text-align: start;
-}
-.bar-lines p[data-v-fe5af582] {
-  margin: 0;
-  position: relative;
-}
-.bar-lines p[data-v-fe5af582]::after {
-  content: "";
-  background: var(--bgl-primary-tint);
-  height: 1px;
-  position: absolute;
-  width: calc(100% - 20px);
-  margin: 14px 0 0 10px;
-  opacity: 0.5;
-}
-.bar-lines p[data-v-fe5af582]:first-child:after {
-  content: "";
-  background: var(--bgl-primary-tint);
-  height: 1px;
-  position: absolute;
-  width: calc(100% - 10px);
-  margin: 8px 0 0 10px;
-  opacity: 0.5;
-}
-.red-bar[data-v-fe5af582] {
-  background: #cf2135;
-  height: var(--b74eb91e);
-  width: 100%;
-  position: absolute;
-  left: 0px;
-  bottom: 0;
-  opacity: 0.6;
-  transition: all 200ms ease;
-}
-.red-bar.open-redbar[data-v-fe5af582] {
-  height: 7%;
-}
-.factor[data-v-fe5af582] {
-  position: absolute;
-  transform: rotate(270deg);
-  height: 0px;
-  width: 0;
-  left: -60px;
-  font-size: 22px;
-  text-align: center;
-  white-space: nowrap;
-  top: 60%;
-}
-.dash-hor[data-v-fe5af582] {
-  /* border-bottom: 1px dashed white; */
-  position: absolute;
-  background-image: linear-gradient(to right, #cf2134 53%, transparent 0%);
-  height: 10px;
-  bottom: 41.5%;
-  width: 100%;
-  animation: 1s linear 0s infinite dash-fe5af582;
-  background-position: left;
-  background-repeat: repeat-x;
-  background-size: 15px 4px;
-}
-.dash-hor[data-v-fe5af582]::after {
-  content: "Average Speedup = 25x";
-  position: absolute;
-  left: 0;
-  bottom: 10px;
-  font-size: 22px;
-  background: #cf2134;
-  z-index: 2;
-  padding: 1px 4px;
-  border-radius: 3px;
-}
-@keyframes dash-fe5af582 {
-0% {
-    background-position: 0;
-}
-100% {
-    background-position: 15px;
-}
-}
-
 .del-top {
 	transform: translateY(-2.6rem);
 }

package/package.json

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

package/src/components/Accordion.vue

@@ -1,14 +1,14 @@
 <template>
-	<div>
-		<slot />
-	</div>
+  <div>
+    <slot />
+  </div>
 </template>
 
 <script setup lang="ts">
 import { reactive, provide } from 'vue';
 
 const state = reactive({
-	openItem: null as string | null,
+  openItem: null as string | null,
 });
 
 provide('accordionState', state);

package/src/components/AccordionItem.vue

@@ -1,18 +1,18 @@
 <template>
-	<div class="accordion-item">
-		<button @click="toggle()" :aria-expanded="open ? 'true' : 'false'" class="accordion-head"
-			:aria-controls="`accordion-body-${id}`">
-			<span class="accordion-label">{{ label }}</span>
-			<div class="accordion-icon" :class="{ open }">
-				<MaterialIcon icon="expand_more" />
-			</div>
-		</button>
-		<Transition name="expand">
-			<div v-if="open" class="accordion-body" :id="`accordion-body-${id}`" :aria-hidden="open ? 'false' : 'true'">
-				<slot />
-			</div>
-		</Transition>
-	</div>
+  <div class="accordion-item">
+    <button @click="toggle()" :aria-expanded="open ? 'true' : 'false'" class="accordion-head"
+      :aria-controls="`accordion-body-${id}`">
+      <span class="accordion-label">{{ label }}</span>
+      <div class="accordion-icon" :class="{ open }">
+        <MaterialIcon icon="expand_more" />
+      </div>
+    </button>
+    <Transition name="expand">
+      <div v-if="open" class="accordion-body" :id="`accordion-body-${id}`" :aria-hidden="open ? 'false' : 'true'">
+        <slot />
+      </div>
+    </Transition>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -20,58 +20,58 @@ import { MaterialIcon } from '@bagelink/vue';
 import { watch, inject } from 'vue';
 
 const props = defineProps<{
-	label: string,
-	id?: string,
+  label: string,
+  id?: string,
 }>();
 let open = $ref(false);
 
 const accordionState = inject('accordionState') as { openItem: string | null };
 const id = props.id || Math.random().toString(36).substring(7);
 
-watch(() => accordionState.openItem, (currentOpenId) => {
-	if (currentOpenId !== id) {
-		open = false;
-	}
+watch(() => accordionState?.openItem, (currentOpenId) => {
+  if (currentOpenId !== id) {
+    open = false;
+  }
 }, { immediate: true });
 
 function toggle() {
-	open = !open;
-	if (open) accordionState.openItem = id;
-	else if (accordionState.openItem === id) accordionState.openItem = null;
+  open = !open;
+  if (open && accordionState?.openItem) accordionState.openItem = id;
+  else if (accordionState?.openItem === id) accordionState.openItem = null;
 }
 </script>
 
 <style scoped>
 .accordion-item {
-	border-bottom: 1px solid var(--border-color);
-	transition: all 0.2s;
-	cursor: pointer;
-	overflow: hidden;
+  border-bottom: 1px solid var(--border-color);
+  transition: all 0.2s;
+  cursor: pointer;
+  overflow: hidden;
 }
 
 .accordion-head {
-	height: var(--input-height);
-	background: transparent;
-	display: flex;
-	width: 100%;
-	align-items: center;
-	justify-content: space-between;
+  height: var(--input-height);
+  background: transparent;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .accordion-icon {
-	transition: all 0.2s ease;
+  transition: all 0.2s ease;
 }
 
 .accordion-icon.open {
-	transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 
 .accordion-label {
-	font-weight: bold;
+  font-weight: bold;
 }
 
 .accordion-head:hover .accordion-label {
-	text-decoration: underline;
+  text-decoration: underline;
 }
 
 .accordion-body {}
@@ -80,17 +80,17 @@ function toggle() {
 <style>
 .expand-enter-active,
 .expand-leave-active {
-	transition: all 0.5s;
-	transition-delay: 0ms;
+  transition: all 0.5s;
+  transition-delay: 0ms;
 }
 
 .expand-enter-from,
 .expand-leave-to {
-	max-height: 0;
+  max-height: 0;
 }
 
 .expand-enter-to,
 .expand-leave-from {
-	max-height: 300px;
+  max-height: 300px;
 }
 </style>

package/src/components/Avatar.vue

@@ -1,44 +1,43 @@
 <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` }">
-			{{ fallback || initials(name || '') }}
-		</p>
-	</div>
+  <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` }">
+      {{ fallback || initials(name || '') }}
+    </p>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { initials } from '@bagelink/vue';
 
 withDefaults(defineProps<{
-	fallback?: string;
-	src?: string;
-	name?: string;
-	size?: number;
+  fallback?: string;
+  src?: string;
+  name?: string;
+  size?: number;
 }>(), { size: 50 });
 </script>
 
 <style scoped>
 .avatar {
-	border-radius: 100%;
-	background-color: var(--bgl-gray-20);
-	border: 0.5px solid var(--border-color);
-	overflow: hidden;
-	text-align: center;
-	padding: none;
-	flex: 0 0 40px;
+  border-radius: 100%;
+  background-color: var(--bgl-gray-20);
+  border: 0.5px solid var(--border-color);
+  overflow: hidden;
+  text-align: center;
+  padding: 0;
 }
 
 .avatar p {
-	font-size: 1.5rem;
-	line-height: 50px;
-	margin: 0;
-	font-weight: 200;
+  font-size: 1.5rem;
+  line-height: 50px;
+  margin: 0;
+  font-weight: 200;
 }
 
 .avatar img {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 </style>

package/src/components/BglVideo.vue

@@ -0,0 +1,58 @@
+<template>
+	<div>
+		<iframe
+			v-if="isYoutubeOrVimeo"
+			:src="videoUrl"
+			:style="{ aspectRatio }"
+			frameborder="0"
+			allowfullscreen
+			title="Video"
+		/>
+		<video
+			v-else
+			:src="src"
+			:autoplay="autoplay"
+			:muted="mute"
+			:loop="loop"
+			:style="{ aspectRatio }"
+			controls="controllers"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  src: string;
+  autoplay: boolean;
+  mute: boolean;
+  aspectRatio: string;
+  controllers: boolean;
+  loop: boolean;
+};
+
+const props = defineProps<Props>();
+
+const aspectRatio = $computed(() => props.aspectRatio.replace(':', '/'));
+
+const isYoutubeOrVimeo = $computed(() => {
+	const youtubeRegex = /youtube\.com|youtu\.be/;
+	const vimeoRegex = /vimeo\.com/;
+	return youtubeRegex.test(props.src) || vimeoRegex.test(props.src);
+});
+
+const videoUrl = $computed(() => {
+	if (isYoutubeOrVimeo.value) {
+		// Handle YouTube and Vimeo URLs here
+		// For simplicity, returning the URL as is, but you might need to transform it
+		return props.src;
+	}
+	return '';
+});
+</script>
+
+<style scoped>
+iframe, video {
+  width: 100%;
+  height: auto;
+}
+</style>

package/src/components/index.ts

@@ -22,7 +22,6 @@ export { default as Title } from './Title.vue';
 export { default as Accordion } from './Accordion.vue';
 export { default as ComboBox } from './ComboBox.vue';
 
-export * from './charts';
 export * from './form';
 export * from './dashboard';
 export * from './whatsapp';

package/src/components/layout/Column.vue

@@ -0,0 +1,6 @@
+<template>
+	<div/>
+</template>
+
+<style scoped>
+</style>