@bagelink/vue 0.0.270 → 0.0.280

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.280",
   "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,138 @@
+<template>
+  <Dropdown placement="auto-start" class="bagel-input combobox">
+    <button class="combobox-btn" @click="toggle">
+      {{
+        valueToLabel(selectedItem) ||
+        placeholder || 'Select' }}
+      <MaterialIcon v-bind="{ 'icon': open ? 'unfold_less' : 'unfold_more' }" />
+    </button>
+    <input type="hidden" v-if="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 { Dropdown } from 'floating-vue';
+import 'floating-vue/style.css';
+import {
+  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;
+}>();
+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: 100%;
+}
+
+.combobox-options {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.combobox-option:hover {
+  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);
+}
+
+.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/form/inputs/CheckInput.vue

@@ -1,95 +1,97 @@
 <template>
-	<div class="bagel-input bgl-checkbox" :title="title" :class="{ small: small }">
-		<div class="check-square" :class="{ checked: checked }" @click="checked = !checked">
-			<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-				<path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
-			</svg>
-		</div>
-		<label>
-			<input :required="required" :id="id" type="checkbox" v-model="checked">
-			{{ label }}
-		</label>
-	</div>
+  <div class="bagel-input bgl-checkbox" :title="title" :class="{ small: small }">
+    <div class="check-square" :class="{ checked: checked }" @click="checked = !checked">
+      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+        <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
+      </svg>
+    </div>
+    <label>
+      <input :required="required" :id="id" type="checkbox" v-model="checked">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </label>
+  </div>
 </template>
 
 <script setup lang="ts">
 defineProps<{
-	label: string;
-	id?: string;
-	title?: string;
-	small?: boolean;
-	required?: boolean
+  label?: string;
+  id?: string;
+  title?: string;
+  small?: boolean;
+  required?: boolean
 }>();
 
 const checked = defineModel<boolean>('modelValue', { default: false });
 </script>
 <style>
 :root {
-	--bgl-white: #fff;
-	--input-height: 40px;
-	--input-border-radius: 7px;
-	--bgl-transition: all 200ms ease;
-	--bgl-primary: #19b8ea;
+  --bgl-white: #fff;
+  --input-height: 40px;
+  --input-border-radius: 7px;
+  --bgl-transition: all 200ms ease;
+  --bgl-primary: #19b8ea;
 
 }
 </style>
 <style scoped>
 .bgl-checkbox {
-	position: relative;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .bgl-checkbox input[type=checkbox] {
-	position: absolute;
-	opacity: 0;
-	z-index: -1;
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
 }
 
 .bgl-checkbox label {
-	padding-inline-start: 0.5rem;
-	transition: var(--bgl-transition);
-	cursor: pointer;
-	user-select: none;
+  padding-inline-start: 0.5rem;
+  transition: var(--bgl-transition);
+  cursor: pointer;
+  user-select: none;
 }
 
 .bgl-checkbox:hover {
-	filter: brightness(95%);
+  filter: brightness(95%);
 }
 
 .bgl-checkbox:active {
-	filter: var(--bgl-active-filter);
+  filter: var(--bgl-active-filter);
 }
 
 .bgl-checkbox .check-square {
-	width: calc(var(--input-height) / 2.5);
-	height: calc(var(--input-height) / 2.5);
-	background: var(--bgl-white);
-	border-radius: calc(var(--input-border-radius) / 2);
-	border: var(--bgl-primary) 1px solid;
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+  width: calc(var(--input-height) / 2.5);
+  height: calc(var(--input-height) / 2.5);
+  background: var(--bgl-white);
+  border-radius: calc(var(--input-border-radius) / 2);
+  border: var(--bgl-primary) 1px solid;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .check-square.checked {
-	background: var(--bgl-primary);
+  background: var(--bgl-primary);
 }
 
 .bgl-checkbox svg {
-	width: calc(var(--input-height) / 2.5);
-	height: calc(var(--input-height) / 2.5);
-	position: absolute;
-	z-index: 2;
-	fill: var(--bgl-white);
-	pointer-events: none;
-	transform: scale(0);
-	transition: var(--bgl-transition);
+  width: calc(var(--input-height) / 2.5);
+  height: calc(var(--input-height) / 2.5);
+  position: absolute;
+  z-index: 2;
+  fill: var(--bgl-white);
+  pointer-events: none;
+  transform: scale(0);
+  transition: var(--bgl-transition);
 }
 
 .check-square.checked svg {
-	transform: scale(1);
+  transform: scale(1);
 }
 </style>