@bagelink/vue 0.0.322 → 0.0.335

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

@@ -1,527 +1,171 @@
 <template>
-	<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>
+  <Dropdown placement="bottom-start" class="bagel-input selectinput">
+    <label>
+      {{ label }}
+      <button :disabled="disabled" type="button" class="selectinput-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>
+    </label>
+    <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); hide();
+      }" :class="{ selected: option === selectedItem }">
+          <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;
 }>();
+let selectedItem = $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 seletValue = $computed({
-	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;
-}
-
-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;
-}
+const toggle = () => {
+  open = !open;
+  if (!open) search = '';
+  if (open) setTimeout(() => (searchInput as any)?.$el?.querySelector('input')?.focus(), 100);
+};
 
-.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;
-}
+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 getLabel(option);
+};
 
-.multiselect__spinner::before {
-  animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
-  animation-iteration-count: infinite;
-}
+const emit = defineEmits(['update:modelValue']);
 
-.multiselect__spinner::after {
-  animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
-  animation-iteration-count: infinite;
-}
+const getLabel = (option: Option) => {
+  if (typeof option === 'string') return option;
+  if (typeof option === 'number') return `${option}`;
+  return option.label;
+};
 
-.multiselect__loading-enter-active,
-.multiselect__loading-leave-active {
-  transition: opacity 0.4s ease-in-out;
-  opacity: 1;
-}
+const isSelected = (option: Option) => {
+  if (typeof option === 'string' || typeof option === 'number') return option === selectedItem;
+  return option.value === selectedItem;
+};
 
-.multiselect__loading-enter,
-.multiselect__loading-leave-active {
-  opacity: 0;
-}
+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;
+};
 
-.multiselect,
-.multiselect__input,
-.multiselect__single {
-  font-family: inherit;
-  font-size: var(--input-font-size);
-  touch-action: manipulation;
-}
+watch(() => props.modelValue, (value) => {
+  if (value !== selectedItem) selectedItem = value;
+}, { immediate: true });
+</script>
 
-.multiselect {
-  box-sizing: content-box;
-  display: block;
-  position: relative;
+<style scoped>
+.selectinput {
   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;
+.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);
-  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;
+.selectinput-options {
+  max-height: 300px;
+  overflow-y: auto;
 }
 
-.multiselect__input:focus,
-.multiselect__single:focus {
-  border-color: #a8a8a8;
-  outline: none;
-}
-
-.multiselect__single {
-  /* padding-left: 5px; */
-  margin-bottom: 8px;
+.selectinput-option:hover {
+  background: var(--bgl-gray-20);
 }
+</style>
 
-.multiselect__tags-wrap {
-  display: inline;
+<style>
+.bagel-input label {
+  font-size: var(--label-font-size);
 }
 
-.multiselect__tags {
-  /* min-height: 40px; */
-  display: block;
-  /* padding: 0.7rem 40px 0.7rem 8px; */
+.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);
-  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;
+  padding: 0.7rem;
+  color: var(--input-color);
   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;
+  font-family: inherit;
 }
 
-.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;
+.selectinput-btn:disabled {
+  background: var(--input-disabled-bg);
+  color: var(--input-disabled-color);
 }
 
-.multiselect__option--highlight {
-  background: var(--bgl-primary-light);
+.selectinput-btn:focus {
   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;
-}
-
-.multiselect__option--group {
-  background: #ededed;
-  color: var(--input-color);
-}
-
-.multiselect__option--group.multiselect__option--highlight {
-  background: var(--input-color);
-  color: #fff;
-}
-
-.multiselect__option--group.multiselect__option--highlight::after {
-  background: var(--input-color);
-}
-
-.multiselect__option--disabled.multiselect__option--highlight {
-  background: #dedede;
-}
-
-.multiselect__option--group-selected.multiselect__option--highlight {
-  background: var(--bgl-red);
-  color: #fff;
-}
-
-.multiselect__option--group-selected.multiselect__option--highlight::after {
-  background: var(--bgl-red);
-  content: attr(data-deselect);
-  color: #fff;
-}
-
-.multiselect-enter-active,
-.multiselect-leave-active {
-  transition: all 0.15s ease;
-}
-
-.multiselect-enter,
-.multiselect-leave-active {
-  opacity: 0;
-}
-
-.multiselect__strong {
-  margin-bottom: 8px;
-  line-height: 20px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-*[dir="rtl"] .multiselect {
-  text-align: right;
-}
-
-*[dir="rtl"] .multiselect__select {
-  right: auto;
-  left: 1px;
-}
-
-*[dir="rtl"] .multiselect__tags {
-  padding: calc(var(--input-height) / 2);
-  padding-inline-end: 40px;
-  padding-inline-start: 0.7rem;
-}
-
-*[dir="rtl"] .multiselect__content {
-  text-align: right;
-}
-
-*[dir="rtl"] .multiselect__option::after {
-  right: auto;
-  left: 0;
-}
-
-*[dir="rtl"] .multiselect__clear {
-  right: auto;
-  left: 12px;
+  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>