@bagelink/vue 0.0.270 → 0.0.276

package/dist/utils/clickOutside.d.ts

@@ -0,0 +1,7 @@
+import type { DirectiveBinding } from 'vue';
+declare const _default: {
+    beforeMount(el: any, binding: DirectiveBinding): void;
+    unmounted(el: any): void;
+};
+export default _default;
+//# sourceMappingURL=clickOutside.d.ts.map

package/dist/utils/clickOutside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickOutside.d.ts","sourceRoot":"","sources":["../../src/utils/clickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;;oBAG3B,GAAG,WAAW,gBAAgB;kBAQhC,GAAG;;AATlB,wBAYE"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.270",
+  "version": "0.0.276",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -113,6 +113,7 @@
     "access": "public"
   },
   "dependencies": {
+    "floating-vue": "^5.2.2",
     "type-fest": "^4.10.2",
     "vue-multiselect": "3.0.0-beta.3"
   },

package/src/components/Accordion.vue

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

package/src/components/AccordionItem.vue

@@ -1,13 +1,14 @@
 <template>
 	<div class="accordion-item">
-		<div class="accordion-head" @click="toggle()">
-			{{ label }}
-			<div class="accordion-icon" :class="{open}" >
+		<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>
-		</div>
+		</button>
 		<Transition name="expand">
-			<div v-if="open" class="accordion-body">
+			<div v-if="open" class="accordion-body" :id="`accordion-body-${id}`" :aria-hidden="open ? 'false' : 'true'">
 				<slot />
 			</div>
 		</Transition>
@@ -16,57 +17,80 @@
 
 <script lang="ts" setup>
 import { MaterialIcon } from '@bagelink/vue';
+import { watch, inject } from 'vue';
 
-defineProps<{
-    label: string,
+const props = defineProps<{
+	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;
+	}
+}, { immediate: true });
+
 function toggle() {
 	open = !open;
-	console.log('toggle', open);
+	if (open) 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 ease;
-  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);
-  display: flex;
-  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;
+}
+
+.accordion-head:hover .accordion-label {
+	text-decoration: underline;
+}
+
+.accordion-body {}
 </style>
 
 <style>
 .expand-enter-active,
 .expand-leave-active {
-  transition: all 0.5s;
+	transition: all 0.5s;
+	transition-delay: 0ms;
 }
 
 .expand-enter-from,
 .expand-leave-to {
-  max-height: 0;
-  opacity: 0.5;
+	max-height: 0;
 }
 
 .expand-enter-to,
 .expand-leave-from {
-  max-height: 100vh;
-  opacity: 1;
+	max-height: 300px;
 }
 </style>

package/src/components/ComboBox.vue

@@ -0,0 +1,132 @@
+<template>
+	<Dropdown placement="auto-start" class="bagel-input combobox">
+		<Btn class="combobox-btn" border color="black" @click="toggle"
+			v-bind="{ 'icon.end': open ? 'unfold_less' : 'unfold_more' }">
+			{{
+				valueToLabel(selectedItem) ||
+				placeholder || 'Select' }}
+		</Btn>
+		<template #popper="{ hide }">
+			<Card border 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 { Dropdown } from 'floating-vue';
+import 'floating-vue/style.css';
+import {
+	TextInput, Btn, Card, Icon,
+} 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;
+}>();
+let search = $ref('');
+
+const toggle = () => {
+	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);
+};
+
+const emit = defineEmits(['update:modelValue']);
+
+const label = (option: Option) => {
+	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;
+};
+
+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 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;
+};
+</script>
+
+<style scoped>
+.combobox {
+	width: 100%;
+}
+
+.combobox-option {
+	padding: 6px 12px;
+	cursor: pointer;
+	border-radius: 5px;
+	transition: all 0.2s;
+	display: flex;
+	justify-content: space-between;
+	width: 300px;
+}
+
+.combobox-options {
+	max-height: 300px;
+	overflow-y: auto;
+}
+
+.combobox-option:hover {
+	background: var(--bgl-gray-20);
+}
+</style>
+
+<style>
+.combobox-btn .bgl_btn-flex {
+	justify-content: space-between;
+}
+
+.v-popper__arrow-container {
+	display: none;
+}
+
+.v-popper--theme-dropdown .v-popper__inner {
+	border: none;
+	background: transparent;
+	border-radius: var(--card-border-radius);
+}
+</style>

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export { default as LangText } from './LangText.vue';
 export { default as RTXEditor } from './RTXEditor.vue';
 export { default as MaterialIcon } from './MaterialIcon.vue';
+export { default as Icon } from './MaterialIcon.vue';
 export { default as NavBar } from './NavBar.vue';
 export { default as Btn } from './Btn.vue';
 export { default as Modal } from './Modal.vue';
@@ -18,6 +19,8 @@ export { default as DataPreview } from './DataPreview.vue';
 export { default as Card } from './Card.vue';
 export { default as Avatar } from './Avatar.vue';
 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';

package/src/plugins/bagel.ts

@@ -1,6 +1,9 @@
+// import { vTooltip } from 'floating-vue';
+import FloatingVue from 'floating-vue';
 import { inject } from 'vue';
 import type { InjectionKey, Plugin } from 'vue';
 import { Bagel } from '@bagelink/sdk';
+import clickOutside from '../utils/clickOutside';
 
 export const bagelInjectionKey = Symbol('bagel') as InjectionKey<Bagel>;
 export const i18nTInjectionKey = Symbol('bagel') as InjectionKey<
@@ -29,11 +32,20 @@ export interface BagelOptions {
 	// eslint-disable-next-line no-unused-vars
 	i18nT?: (key: string) => string
 }
-
 export const BagelVue: Plugin = {
 	install: (app, options: BagelOptions) => {
 		const bagel = new Bagel({ host: options.host, onError: options.onError });
-
+		app.directive('click-outside', clickOutside);
+
+		app.use(FloatingVue, {
+			themes: {
+				'bgl-theme': {
+					triggers: ['click'],
+					autoHide: true,
+					placement: 'bottom',
+				},
+			},
+		});
 		app.config.globalProperties.$bagel = bagel;
 		app.provide(bagelInjectionKey, bagel);
 		app.config.globalProperties.$i18T = options?.i18nT || ((key?: string) => key);