@bagelink/vue 0.0.282 → 0.0.287

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/ComboBox.vue

@@ -1,137 +1,142 @@
 <template>
-	<Dropdown placement="auto-start" class="bagel-input combobox">
-		<button type="button" class="combobox-btn" @click="toggle">
-			{{ valueToLabel(selectedItem) || placeholder || 'Select' }}
-			<MaterialIcon v-bind="{ 'icon': open ? 'unfold_less' : 'unfold_more' }" />
-		</button>
-		<input style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1;" v-if="required"
-			v-model="selectedItem" required>
-		<template #popper="{ hide }">
-			<Card thin class="combobox-options">
-				<TextInput v-if="searchable" ref="searchInput" dense :placeholder="'Search'" icon="search" v-model="search" />
-				<div class="combobox-option" v-for="(option, i) in filteredOptions" :key="`${option}${i}`" @click="() => {
-					select(option)
-					hide();
-				}" :class="{ selected: option === selectedItem }">
-					<span>
-						{{ label(option) }}
-					</span>
-					<Icon v-if="isSelected(option)" icon="check" />
-				</div>
-			</Card>
-		</template>
-	</Dropdown>
+  <Dropdown placement="auto-start" class="bagel-input combobox">
+    <button type="button" class="combobox-btn" @click="toggle">
+      {{ valueToLabel(selectedItem) || placeholder || 'Select' }}
+      <MaterialIcon v-bind="{ 'icon': open ? 'unfold_less' : 'unfold_more' }" />
+    </button>
+    <input style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1;" v-if="required"
+      v-model="selectedItem" required>
+    <template #popper="{ hide }">
+      <Card thin class="combobox-options">
+        <TextInput v-if="searchable" ref="searchInput" dense :placeholder="'Search'" icon="search" v-model="search" />
+        <div class="combobox-option" v-for="(option, i) in filteredOptions" :key="`${option}${i}`" @click="() => {
+          select(option)
+          hide();
+        }" :class="{ selected: option === selectedItem }">
+          <span>
+            {{ label(option) }}
+          </span>
+          <Icon v-if="isSelected(option)" icon="check" />
+        </div>
+      </Card>
+    </template>
+  </Dropdown>
 </template>
 
 <script lang="ts" setup>
+import { watch } from 'vue';
 import { Dropdown } from 'floating-vue';
 import 'floating-vue/style.css';
 import {
-	TextInput, Card, Icon, MaterialIcon,
+  TextInput, Card, Icon, MaterialIcon,
 } from '@bagelink/vue';
 
 type Option = string | number | Record<string, any> | { label: string, value: string | number };
 let open = $ref(false);
-let selectedItem = $ref<Option>();
 
 const searchInput = $ref<HTMLInputElement | null>(null);
 
 const props = defineProps<{
-	options: Option[];
-	placeholder?: string;
-	disabled?: boolean;
-	modelValue?: Option;
-	searchable?: boolean;
-	required?: boolean;
+  options: Option[];
+  placeholder?: string;
+  disabled?: boolean;
+  modelValue?: Option;
+  searchable?: boolean;
+  required?: boolean;
 }>();
+let selectedItem = $ref<Option>();
 let search = $ref('');
 
 const toggle = () => {
-	open = !open;
-	if (!open) search = '';
-	if (open) setTimeout(() => (searchInput as any)?.$el?.querySelector('input')?.focus(), 100);
+  open = !open;
+  if (!open) search = '';
+  if (open) setTimeout(() => (searchInput as any)?.$el?.querySelector('input')?.focus(), 100);
 };
 
 const valueToLabel = (value?: Option) => {
-	if (!value) return '';
-	const option = props.options.find((option) => {
-		if (typeof option === 'string' || typeof option === 'number') return option === value;
-		return option.value === value;
-	});
-	if (!option) return value;
-	return label(option);
+  if (!value) return '';
+  const option = props.options.find((option) => {
+    if (typeof option === 'string' || typeof option === 'number') return option === value;
+    return option.value === value;
+  });
+  if (!option) return value;
+  return label(option);
 };
 
 const emit = defineEmits(['update:modelValue']);
 
 const label = (option: Option) => {
-	if (typeof option === 'string') return option;
-	if (typeof option === 'number') return `${option}`;
-	return option.label;
+  if (typeof option === 'string') return option;
+  if (typeof option === 'number') return `${option}`;
+  return option.label;
 };
 
 const isSelected = (option: Option) => {
-	if (typeof option === 'string' || typeof option === 'number') return option === selectedItem;
-	return option.value === selectedItem;
+  if (typeof option === 'string' || typeof option === 'number') return option === selectedItem;
+  return option.value === selectedItem;
 };
 
 const filteredOptions = $computed(() => props.options.filter((option) => {
-	const searchTerm = new RegExp(search, 'gi');
-	if (typeof option === 'string') return option.match(searchTerm);
-	if (typeof option === 'number') return `${option}`.match(searchTerm);
-	return option.label.match(searchTerm);
+  const searchTerm = new RegExp(search, 'gi');
+  if (typeof option === 'string') return option.match(searchTerm);
+  if (typeof option === 'number') return `${option}`.match(searchTerm);
+  return option.label.match(searchTerm);
 }));
 
 const select = (option: Option) => {
-	if (typeof option === 'string') selectedItem = option;
-	else if (typeof option === 'number') selectedItem = option;
-	else selectedItem = option.value;
-	emit('update:modelValue', selectedItem);
-	open = false;
+  if (typeof option === 'string') selectedItem = option;
+  else if (typeof option === 'number') selectedItem = option;
+  else selectedItem = option.value;
+  emit('update:modelValue', selectedItem);
+  open = false;
 };
+
+watch(() => props.modelValue, (value) => {
+  if (value !== selectedItem) selectedItem = value;
+}, { immediate: true });
 </script>
 
 <style scoped>
 .combobox {
-	width: 100%;
+  width: 100%;
 }
 
 .combobox-option {
-	padding: 6px 12px;
-	cursor: pointer;
-	border-radius: 5px;
-	transition: all 0.2s;
-	display: flex;
-	justify-content: space-between;
-	width: 100%;
+  padding: 6px 12px;
+  cursor: pointer;
+  border-radius: 5px;
+  transition: all 0.2s;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }
 
 .combobox-options {
-	max-height: 300px;
-	overflow-y: auto;
+  max-height: 300px;
+  overflow-y: auto;
 }
 
 .combobox-option:hover {
-	background: var(--bgl-gray-20);
+  background: var(--bgl-gray-20);
 }
 </style>
 
 <style>
 .combobox-btn {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	height: var(--input-height);
-	border-radius: var(--input-border-radius);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: var(--input-height);
+  border-radius: var(--input-border-radius);
 }
 
 .v-popper__arrow-container {
-	display: none;
+  display: none;
 }
 
 .v-popper--theme-dropdown .v-popper__inner {
-	border: none;
-	background: transparent;
-	border-radius: var(--card-border-radius);
+  border: none;
+  background: transparent;
+  border-radius: var(--card-border-radius);
 }
 </style>

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

@@ -1,12 +1,14 @@
 <template>
-  <div class="pb-1">
-    <label class="txt-start" :for="id">
-      {{ label }}
-      <Multiselect ref="multiselect" :id="id" label="label" trackBy="value" :options="optionList" :required="required"
-        :placeholder="placeholder" v-model="seletValue" :close-on-select="true" v-bind="extraProps" />
-      <!-- <input v-model="dataValue" type="hidden" :name="id" :required v-bind="extraProps"> -->
-    </label>
-  </div>
+	<div>
+		<label class="txt-start" :for="id">
+			{{ label }}
+			<Multiselect
+				ref="multiselect" :id="id" label="label" trackBy="value" :options="optionList" :required="required"
+				:placeholder="placeholder" v-model="seletValue" :close-on-select="true" v-bind="extraProps"
+			/>
+			<!-- <input v-model="dataValue" type="hidden" :name="id" :required v-bind="extraProps"> -->
+		</label>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -36,24 +38,24 @@ const emit = defineEmits(['update:modelValue']);
 const optionList = $ref<Option[]>([]);
 
 const seletValue = $computed({
-  get: () => optionList.find((opt) => opt.value === dataValue),
-  set: (val?: Option) => {
-    dataValue = val?.value;
-    emit('update:modelValue', dataValue);
-  },
+	get: () => optionList.find((opt) => opt.value === dataValue),
+	set: (val?: Option) => {
+		dataValue = val?.value;
+		emit('update:modelValue', dataValue);
+	},
 });
 
 function optnToValueLabel(option: RawOption): Option {
-  if (typeof option === 'string' || typeof option === 'number') {
-    return { label: `${option}`, value: option };
-  }
-  return option;
+	if (typeof option === 'string' || typeof option === 'number') {
+		return { label: `${option}`, value: option };
+	}
+	return option;
 }
 
 function updateOptionList() {
-  const { options } = props;
-  const optnLst = typeof options === 'string' ? options.split('\n|,') : options || [];
-  optionList.push(...optnLst.map(optnToValueLabel));
+	const { options } = props;
+	const optnLst = typeof options === 'string' ? options.split('\n|,') : options || [];
+	optionList.push(...optnLst.map(optnToValueLabel));
 }
 
 watch(() => props.options, updateOptionList, { immediate: true });
@@ -344,7 +346,7 @@ fieldset[disabled] .multiselect {
   border-top: none;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
-  z-index: 50;
+  z-index: 150;
   -webkit-overflow-scrolling: touch;
 }
 

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>

package/src/styles/layout.css

@@ -81,10 +81,6 @@
     grid-auto-columns: max-content;
 }
 
-.w-100 {
-    width: 100%;
-}
-
 .col-gap-1 {
     column-gap: 1rem;
 }
@@ -164,7 +160,12 @@
 .w550,
 .w600,
 .w650,
-.w700 {
+.w700,
+.w770,
+.w900,
+.w970,
+.w1030,
+.w1170 {
     margin-left: auto;
     margin-right: auto;
     width: 98%;
@@ -206,6 +207,26 @@
     max-width: 700px;
 }
 
+.w770 {
+    max-width: 770px;
+}
+
+.w900 {
+    max-width: 900px;
+}
+
+.w970 {
+    max-width: 970px;
+}
+
+.w1030 {
+    max-width: 1030px;
+}
+
+.w1170 {
+    max-width: 1170px;
+}
+
 .gap-1 {
     gap: 0.25rem;
 }

package/src/types/materialIcons.ts

@@ -2745,6 +2745,7 @@ export type MaterialIcons =
     | 'tools_pliers_wire_stripper'
     | 'tools_power_drill'
     | 'tools_wrench'
+    | 'tooltip'
     | 'top_panel_close'
     | 'top_panel_open'
     | 'topic'