@bagelink/vue 0.0.331 → 0.0.337

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

@@ -1,527 +1,206 @@
 <template>
-	<div>
-		<label class="txt-start" :for="id">
+	<Dropdown ref="dropdown" placement="bottom-start" class="bagel-input selectinput">
+		<label>
 			{{ 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"> -->
+			<button :disabled="disabled" type="button" class="selectinput-btn">
+				{{ selecteLabel }}
+				<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="selectedItems" required>
 		</label>
-	</div>
+		<template #popper="{ hide }">
+			<Card class="selectinput-options p-05" :style="{ width: fullWidth ? '100%' : 'auto' }">
+				<TextInput v-if="searchable" ref="searchInput" dense :placeholder="'Search'" icon="search" v-model="search" />
+				<div class="selectinput-option hover  gap-1" v-for="(option, i) in filteredOptions" :key="`${option}${i}`"
+					@click="select(option)" :class="{ selected: isSelected(option) }">
+					<Icon v-if="isSelected(option)" icon="check" />
+					<Icon class="opacity-3" v-if="!isSelected(option)" icon="fiber_manual_record" />
+					<span>
+						{{ getLabel(option) }}
+					</span>
+				</div>
+				<slot name="last" />
+			</Card>
+		</template>
+	</Dropdown>
 </template>
 
 <script lang="ts" setup>
 import { watch } from 'vue';
-import Multiselect from 'vue-multiselect';
+import { Dropdown } from 'floating-vue';
+import 'floating-vue/style.css';
+import {
+	TextInput, Card, Icon, MaterialIcon,
+} from '@bagelink/vue';
 
-type Option = {
-  label: string;
-  value: string | number;
-};
-type RawOption = Option | string | number;
+type Option = string | number | Record<string, any> | { label: string, value: string | number };
+let open = $ref(false);
+
+const searchInput = $ref<HTMLInputElement | null>(null);
 
 const props = defineProps<{
-  required?: boolean,
-  label?: string,
-  id?: string,
-  modelValue?: string | number,
-  placeholder?: string,
-  defaultValue?: string | number,
-  options: RawOption[] | string
-  extraProps?: Record<string, any>
+	options: Option[];
+	placeholder?: string;
+	disabled?: boolean;
+	modelValue?: Option;
+	searchable?: boolean;
+	required?: boolean;
+	label?: string;
+	fullWidth?: boolean;
+	multiselect?: boolean;
 }>();
+const selectedItems = $ref<Option[]>([]);
+let search = $ref('');
 
-let dataValue = $ref<string | number | undefined>(props.modelValue || props.defaultValue);
-const multiselect = $ref<Multiselect>();
-const emit = defineEmits(['update:modelValue']);
-const optionList = $ref<Option[]>([]);
+const dropdown = $ref<InstanceType<typeof Dropdown> | null>(null);
 
-const seletValue = $computed({
-	get: () => optionList.find((opt) => opt.value === dataValue),
-	set: (val?: Option) => {
-		dataValue = val?.value;
-		emit('update:modelValue', dataValue);
-	},
-});
+const toggle = () => {
+	dropdown?.hide();
+	open = !open;
+	if (!open) search = '';
+	if (open) setTimeout(() => (searchInput as any)?.$el?.querySelector('input')?.focus(), 100);
+};
 
-function optnToValueLabel(option: RawOption): Option {
-	if (typeof option === 'string' || typeof option === 'number') {
-		return { label: `${option}`, value: option };
+const selecteLabel = $computed(() => {
+	if (selectedItems.length === 0) return props.placeholder || 'Select';
+	if (selectedItems.length > 4) {
+		const str = selectedItems.slice(0, 4).map((item) => getLabel(item)).join(', ');
+		return `${str}... +${selectedItems.length - 4}`;
 	}
-	return option;
-}
-
-function updateOptionList() {
-	const { options } = props;
-	const optnLst = typeof options === 'string' ? options.split('\n|,') : options || [];
-	optionList.push(...optnLst.map(optnToValueLabel));
-}
-
-watch(() => props.options, updateOptionList, { immediate: true });
-</script>
-
-<style>
-fieldset[disabled] .multiselect {
-  pointer-events: none;
-}
-
-.multiselect__spinner {
-  position: absolute;
-  right: 1px;
-  top: 1px;
-  width: 40px;
-  height: 38px;
-  background: #fff;
-  display: block;
-}
-
-.multiselect__spinner::before,
-.multiselect__spinner::after {
-  position: absolute;
-  content: "";
-  top: 50%;
-  left: 50%;
-  margin: -8px 0 0 -8px;
-  width: 16px;
-  height: 16px;
-  border-radius: 100%;
-  border-color: var(--bgl-primary-tint) transparent transparent;
-  border-style: solid;
-  border-width: 2px;
-  box-shadow: 0 0 0 1px transparent;
-}
-
-.multiselect__spinner::before {
-  animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
-  animation-iteration-count: infinite;
-}
-
-.multiselect__spinner::after {
-  animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
-  animation-iteration-count: infinite;
-}
-
-.multiselect__loading-enter-active,
-.multiselect__loading-leave-active {
-  transition: opacity 0.4s ease-in-out;
-  opacity: 1;
-}
-
-.multiselect__loading-enter,
-.multiselect__loading-leave-active {
-  opacity: 0;
-}
-
-.multiselect,
-.multiselect__input,
-.multiselect__single {
-  font-family: inherit;
-  font-size: var(--input-font-size);
-  touch-action: manipulation;
-}
-
-.multiselect {
-  box-sizing: content-box;
-  display: block;
-  position: relative;
-  width: 100%;
-  min-height: var(--input-height);
-  text-align: left;
-  color: var(--input-color);
-}
-
-.multiselect * {
-  box-sizing: border-box;
-}
-
-.multiselect:focus {
-  outline: none;
-}
-
-.multiselect--disabled {
-  background: #ededed;
-  pointer-events: none;
-  opacity: 0.6;
-}
-
-.multiselect--active {
-  z-index: 50;
-}
-
-.multiselect--active:not(.multiselect--above) .multiselect__current,
-.multiselect--active:not(.multiselect--above) .multiselect__input,
-.multiselect--active:not(.multiselect--above) .multiselect__tags {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.multiselect--active:not(.multiselect--above) .multiselect__tags {
-  box-shadow: inset 0 0 10px #00000012;
-}
-
-.multiselect--active .multiselect__select {
-  transform: rotateZ(180deg);
-}
-
-.multiselect--above.multiselect--active .multiselect__current,
-.multiselect--above.multiselect--active .multiselect__input,
-.multiselect--above.multiselect--active .multiselect__tags {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.multiselect__input,
-.multiselect__single {
-  position: relative;
-  display: inline-block;
-  border: none;
-  background: var(--input-bg);
-  width: calc(100%);
-  transition: border 0.1s ease;
-  box-sizing: border-box;
-  vertical-align: top;
-  font-size: var(--input-font-size);
-  padding-inline-start: 0rem;
-}
-
-.multiselect--active .multiselect__input {
-  margin-top: -0.6rem;
-}
-
-.multiselect__input::placeholder {
-  color: var(--input-color);
-}
-
-.multiselect__tag~.multiselect__input,
-.multiselect__tag~.multiselect__single {
-  width: auto;
-}
-
-.multiselect__input:hover,
-.multiselect__single:hover {
-  border-color: #cfcfcf;
-}
-
-.multiselect__input:focus,
-.multiselect__single:focus {
-  border-color: #a8a8a8;
-  outline: none;
-}
-
-.multiselect__single {
-  /* padding-left: 5px; */
-  margin-bottom: 8px;
-}
-
-.multiselect__tags-wrap {
-  display: inline;
-}
-
-.multiselect__tags {
-  /* min-height: 40px; */
-  display: block;
-  /* padding: 0.7rem 40px 0.7rem 8px; */
-  border-radius: var(--input-border-radius);
-  background: var(--input-bg);
-  font-size: var(--input-font-size);
-  height: var(--input-height);
-  line-height: 0;
-  padding: calc(var(--input-height) / 2);
-  padding-inline-end: 40px;
-  padding-inline-start: 0.7rem;
-}
-
-.multiselect__tag {
-  position: relative;
-  display: inline-block;
-  padding: 4px 26px 4px 10px;
-  border-radius: 5px;
-  margin-right: 10px;
-  color: #fff;
-  line-height: 1;
-  background: var(--bgl-primary-tint);
-  margin-bottom: 5px;
-  white-space: nowrap;
-  overflow: hidden;
-  max-width: 100%;
-  text-overflow: ellipsis;
-}
-
-.multiselect__tag-icon {
-  cursor: pointer;
-  margin-left: 7px;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  font-weight: 700;
-  font-style: initial;
-  width: 22px;
-  text-align: center;
-  line-height: 22px;
-  transition: all 0.2s ease;
-  border-radius: 5px;
-}
-
-.multiselect__tag-icon::after {
-  content: "×";
-  color: #266d4d;
-  font-size: 14px;
-}
-
-/* // Remove these lines to avoid green closing button
-  //.multiselect__tag-icon:focus,
-  //.multiselect__tag-icon:hover {
-  //  background: #369a6e;
-  //} */
-
-.multiselect__tag-icon:focus::after,
-.multiselect__tag-icon:hover::after {
-  color: white;
-}
-
-.multiselect__current {
-  line-height: 16px;
-  min-height: 40px;
-  box-sizing: border-box;
-  display: block;
-  overflow: hidden;
-  padding: 8px 12px 0;
-  padding-right: 30px;
-  white-space: nowrap;
-  margin: 0;
-  text-decoration: none;
-  border-radius: 5px;
-  /* border: 1px solid #e8e8e8; */
-  cursor: pointer;
-}
-
-.multiselect__select {
-  line-height: 16px;
-  display: block;
-  position: absolute;
-  box-sizing: border-box;
-  /* width: 40px; */
-  /* height: 38px; */
-  right: 1px;
-  top: 1px;
-  padding: 4px 8px;
-  margin: 0;
-  text-decoration: none;
-  text-align: center;
-  cursor: pointer;
-  transition: transform 0.2s ease;
-  padding-top: calc(var(--input-height) / 2 - 0.7rem);
-
-}
-
-.multiselect__select::before {
-  position: relative;
-  background-size: contain;
-  transform: scale(0.5);
-  color: var(--bgl-black);
-  content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23b7b7b7' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/></svg>");
-}
-
-.multiselect__placeholder {
-  color: var(--placeholder-color);
-  display: inline-block;
-  margin-bottom: 10px;
-
-}
-
-.multiselect--active .multiselect__placeholder {
-  display: none;
-}
-
-.multiselect__content-wrapper {
-  position: absolute;
-  display: block;
-  background: #fff;
-  width: 100%;
-  max-height: 240px;
-  overflow: auto;
-  box-shadow: 0 0 10px #00000012;
-  border-top: none;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-  z-index: 150;
-  -webkit-overflow-scrolling: touch;
-}
-
-.multiselect__content {
-  list-style: none;
-  display: inline-block;
-  padding: 0;
-  margin: 0;
-  min-width: 100%;
-  vertical-align: top;
-}
-
-.multiselect--above .multiselect__content-wrapper {
-  bottom: 100%;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  border-bottom: none;
-  border-top: 1px solid #e8e8e8;
-}
-
-.multiselect__content::-webkit-scrollbar {
-  display: none;
-}
-
-.multiselect__element {
-  display: block;
-}
-
-.multiselect__option {
-  display: block;
-  padding-inline-start: 12px;
-  min-height: calc(var(--input-height) * 0.8);
-  line-height: calc(var(--input-height) * 0.8);
-  text-decoration: none;
-  text-transform: none;
-  position: relative;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.multiselect__option::after {
-  top: 0;
-  right: 0;
-  position: absolute;
-  width: calc(var(--input-height) * 0.8);
-  height: calc(var(--input-height) * 0.8);
-  ;
-  text-align: center;
-  font-size: 13px;
-}
-
-.multiselect__option--highlight {
-  background: var(--bgl-primary-light);
-  outline: none;
-  color: var(--bgl-primary);
-}
-
-.multiselect__option--selected {
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
-  font-weight: bold;
-}
-
-.multiselect__option--selected.multiselect__option--highlight {
-  filter: brightness(0.9);
-  color: #fff;
-}
-
-.multiselect__option--selected.multiselect__option--highlight::after {
-  content: "✕";
-  color: var(--bgl-white);
-}
-
-.multiselect--disabled .multiselect__current,
-.multiselect--disabled .multiselect__select {
-  background: #ededed;
-  color: #a6a6a6;
-}
-
-.multiselect__option--disabled {
-  background: #ededed !important;
-  color: #a6a6a6 !important;
-  cursor: text;
-  pointer-events: none;
-}
+	return selectedItems.map((item) => getLabel(item)).join(', ');
+});
 
-.multiselect__option--group {
-  background: #ededed;
-  color: var(--input-color);
-}
+const emit = defineEmits(['update:modelValue']);
 
-.multiselect__option--group.multiselect__option--highlight {
-  background: var(--input-color);
-  color: #fff;
-}
+const getLabel = (option: Option) => {
+	if (typeof option === 'string') return option;
+	if (typeof option === 'number') return `${option}`;
+	return option.label;
+};
 
-.multiselect__option--group.multiselect__option--highlight::after {
-  background: var(--input-color);
-}
+const getValue = (option: Option) => {
+	if (typeof option === 'string') return option;
+	if (typeof option === 'number') return option;
+	return option.value;
+};
 
-.multiselect__option--disabled.multiselect__option--highlight {
-  background: #dedede;
-}
+const isSelected = (option: Option) => selectedItems.includes(getValue(option));
+
+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) => {
+	const existingIndex = selectedItems.findIndex((item) => {
+		if (typeof item === 'string' || typeof item === 'number') return item === option;
+		return item.value === option;
+	});
+	if (existingIndex > -1) selectedItems.splice(existingIndex, 1);
+	else if (props.multiselect) {
+		selectedItems.push(getValue(option));
+	} else {
+		selectedItems.splice(0, selectedItems.length, getValue(option));
+		toggle();
+	}
+	emitUpdate();
+};
 
-.multiselect__option--group-selected.multiselect__option--highlight {
-  background: var(--bgl-red);
-  color: #fff;
+function emitUpdate() {
+	if (props.multiselect) {
+		emit('update:modelValue', selectedItems);
+	} else {
+		selectedItems.splice(1, selectedItems.length);
+		emit('update:modelValue', selectedItems[0]);
+	}
 }
 
-.multiselect__option--group-selected.multiselect__option--highlight::after {
-  background: var(--bgl-red);
-  content: attr(data-deselect);
-  color: #fff;
+function compareArrays(arr1: Option[], arr2: Option[]) {
+	const isSame = arr1.every((item: Option) => arr2.map((a) => getValue(a)).includes(getValue(item)));
+	return isSame;
 }
 
-.multiselect-enter-active,
-.multiselect-leave-active {
-  transition: all 0.15s ease;
-}
+watch(
+	() => props.modelValue,
+	(newVal: Option | Option[]) => {
+		if (!newVal) return;
+		if (!props.multiselect) {
+			if (!isSelected(newVal)) selectedItems.splice(0, selectedItems.length, newVal);
+		} else {
+			const isSame = compareArrays([newVal].flat(), selectedItems);
+			if (!isSame) selectedItems.splice(0, selectedItems.length, [newVal].flat());
+		}
+	},
+	{ immediate: true },
+);
+</script>
 
-.multiselect-enter,
-.multiselect-leave-active {
-  opacity: 0;
+<style scoped>
+.selectinput {
+	width: 100%;
 }
 
-.multiselect__strong {
-  margin-bottom: 8px;
-  line-height: 20px;
-  display: inline-block;
-  vertical-align: top;
+.selectinput-option {
+	padding: 6px 12px;
+	cursor: pointer;
+	border-radius: 5px;
+	transition: all 0.2s;
+	display: grid;
+	grid-template-columns: 10px 1fr;
+	justify-content: space-between;
+	width: 100%;
+	font-size: var(--input-font-size);
 }
 
-*[dir="rtl"] .multiselect {
-  text-align: right;
+.selectinput-options {
+	max-height: 300px;
+	overflow-y: auto;
 }
 
-*[dir="rtl"] .multiselect__select {
-  right: auto;
-  left: 1px;
+.selectinput-option:hover {
+	background: var(--bgl-gray-20);
 }
+</style>
 
-*[dir="rtl"] .multiselect__tags {
-  padding: calc(var(--input-height) / 2);
-  padding-inline-end: 40px;
-  padding-inline-start: 0.7rem;
+<style>
+.bagel-input label {
+	font-size: var(--label-font-size);
 }
 
-*[dir="rtl"] .multiselect__content {
-  text-align: right;
+.selectinput-btn {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: var(--input-height);
+	border-radius: var(--input-border-radius);
+	border: none;
+	background: var(--input-bg);
+	padding: 0.7rem;
+	color: var(--input-color);
+	width: 100%;
+	font-family: inherit;
 }
 
-*[dir="rtl"] .multiselect__option::after {
-  right: auto;
-  left: 0;
+.selectinput-btn:disabled {
+	background: var(--input-disabled-bg);
+	color: var(--input-disabled-color);
 }
 
-*[dir="rtl"] .multiselect__clear {
-  right: auto;
-  left: 12px;
+.selectinput-btn:focus {
+	outline: none;
+	box-shadow: inset 0 0 10px #00000012;
 }
 
-*[dir="rtl"] .multiselect__spinner {
-  right: auto;
-  left: 1px;
+.v-popper__arrow-container {
+	display: none;
 }
 
-@keyframes spinning {
-  from {
-    transform: rotate(0);
-  }
-
-  to {
-    transform: rotate(2turn);
-  }
+.v-popper--theme-dropdown .v-popper__inner {
+	border: none;
+	background: transparent;
+	border-radius: var(--card-border-radius);
 }
 </style>

package/src/components/index.ts

@@ -8,7 +8,6 @@ export { default as ModalForm } from './ModalForm.vue';
 export { default as AccordionItem } from './AccordionItem.vue';
 export { default as ListView } from './ListView.vue';
 export { default as ListItem } from './ListItem.vue';
-export { default as TabbedLayout } from './TabbedLayout.vue';
 export { default as Comments } from './Comments.vue';
 export { default as PageTitle } from './PageTitle.vue';
 export { default as TableSchema } from './TableSchema.vue';
@@ -19,7 +18,6 @@ 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 { default as Alert } from './Alert.vue';
 export { default as Badge } from './Badge.vue';
 export { default as BglVideo } from './BglVideo.vue';