@firstnoodle-ui/bui 0.0.26 → 0.0.28

package/src/components/select-list/SelectList.vue

@@ -0,0 +1,476 @@
+<script setup lang="ts" generic="T extends SelectListOption">
+import type { ScrollIntersectionEvent } from "../../components";
+import type { SelectListFilter, SelectListOption, SelectListOptionGroup, SelectListProps, SelectListState } from "./types.ts";
+import debounce from "debounce";
+import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { BButton, BCheckbox, BInput, BScrollbar } from "../..";
+import { useNextFrame } from "../../composables";
+import { scrollIntoView } from "../../utils";
+
+import { BErrorCard, BIdleCard, BLoadingCard, BNoMatchCard } from "./components/status-cards";
+
+const props = withDefaults(defineProps<SelectListProps>(), {
+  identifier: "label",
+  loading: false,
+  placeholder: "Search",
+  small: false,
+  remoteMethod: null,
+});
+
+// TODO:
+// Control fixed height via props. See style attribute in root <div/>
+
+const emit = defineEmits(["escape", "selectQuery", "select"]);
+
+const { nextFrame } = useNextFrame();
+
+const hoveredOption = ref<SelectListOption | null>(null);
+const localOptions = ref<SelectListOption[] | SelectListOptionGroup[]>([]);
+const searchQuery = ref("");
+
+const selectListRef = ref<HTMLDivElement>();
+const optionsRef = ref();
+const scrollbarRef = ref<typeof BScrollbar>();
+const selectedOptionsRef = ref();
+const selectionScrollbarRef = ref<typeof BScrollbar>();
+
+const selectedOptionFilter = ref<SelectListFilter | null>(props.filters ? props.filters[0] : null);
+const selectionOpen = ref(false);
+const selectionOverflow = ref(false);
+const selectionScrollClasses = ref("");
+
+// we need to know if the options passed is an array of options or option groups
+const isOptionGroup = (obj: unknown): obj is SelectListOptionGroup => {
+  if (!Array.isArray(obj)) throw new Error("Item passed must be an Array");
+  if (obj.length === 0) return false;
+  return "options" in obj[0];
+};
+const isGrouped = computed(() => isOptionGroup(props.options));
+const flattenedOptions = computed((): SelectListOption[] => {
+  if (!isGrouped.value) return props.options as SelectListOption[];
+  return (props.options as SelectListOptionGroup[]).flatMap((group: SelectListOptionGroup) => group.options);
+});
+
+const state = computed((): SelectListState => {
+  if (props.loading) return "loading";
+  if (props.errorMessage) return "error";
+  if (searchQuery.value.length && !localOptions.value.length) return "no match";
+  if (localOptions.value.length) return "match";
+  return "idle";
+});
+
+const isMultiselect = computed(() => props.selected && "length" in props.selected);
+
+const selectedCount = computed(() => {
+  if (!props.selected) return 0;
+  return isMultiselect.value ? (props.selected as T[]).length : 1;
+});
+
+const allOptionsSelected = computed(() => {
+  if (!props.selected) return false;
+  // TODO - consider whether or not we should show "all selected" when a filter is applied and all the filtered items has been selected
+  // introduces complexity, as we need to check if exactely the same options are selected and not just the count
+  // plus what if more items are selected than the filtered... this is why I will currently abandon this idea
+
+  if (selectedOptionFilter.value) {
+    return (props.selected as T[]).length >= flattenedOptions.value.filter(selectedOptionFilter.value.execute).length;
+  }
+
+  return isMultiselect.value ? (props.selected as T[]).length === flattenedOptions.value.length : false;
+});
+
+const noSelection = computed(() => {
+  if (!props.selected) return true;
+  return isMultiselect.value ? !(props.selected as T[]).length : !props.selected;
+});
+
+watch(() => props.selected, (newValue: SelectListOption | SelectListOption[] | null) => {
+  if (newValue && selectionOpen.value) {
+    nextFrame(() => {
+      scrollbarRef.value!.update();
+
+      if (isMultiselect.value && selectedCount.value) {
+        const target = selectedOptionsRef.value[selectedOptionsRef.value.length - 1].$el;
+        const scrollView: HTMLElement | null = selectionScrollbarRef.value!.$el.querySelector(".scrollbar__wrap");
+        if (scrollView) {
+          scrollIntoView(scrollView, target);
+          selectionScrollbarRef.value!.handleScroll();
+        }
+      }
+    });
+  }
+});
+
+watch(() => props.options, (newValue: SelectListOption[] | SelectListOptionGroup[]) => {
+  // eslint-disable-next-line ts/no-use-before-define
+  updateLocalOptions(newValue);
+  hoveredOption.value = null;
+});
+
+// eslint-disable-next-line ts/no-use-before-define
+onBeforeMount(() => updateLocalOptions(props.options));
+onMounted(() => {
+  if (!isMultiselect.value && props.selectAll) {
+    console.warn("[SelectList] selectAll prop not allowed when SelectList is not isMultiselect. You need to pass an Array of selected options (or empty) if you want it to be isMultiselect.");
+  }
+
+  nextFrame(() => {
+    if (scrollbarRef.value) scrollbarRef.value!.update();
+    // eslint-disable-next-line ts/no-use-before-define
+    selectListRef.value!.addEventListener("keydown", onKeydown);
+  });
+  // focusSearch();
+});
+
+// eslint-disable-next-line ts/no-use-before-define
+onBeforeUnmount(() => selectListRef.value!.removeEventListener("keydown", onKeydown));
+
+const onKeydown = (event: KeyboardEvent) => {
+  if (event.key === "Enter") {
+    // eslint-disable-next-line ts/no-use-before-define
+    selectOption();
+  }
+  else if (event.key === "Escape") {
+    emit("escape");
+  }
+  else if (event.key === "ArrowDown") {
+    // eslint-disable-next-line ts/no-use-before-define
+    navigateOptions("next");
+  }
+  else if (event.key === "ArrowUp") {
+    // eslint-disable-next-line ts/no-use-before-define
+    navigateOptions("prev");
+  }
+};
+
+const onSelect = (option: SelectListOption) => {
+  if (isMultiselect.value) {
+    const newSelection = (props.selected as T[]).map(i => i.label).includes(option.label)
+      ? [...(props.selected as T[]).filter(i => i.label !== option.label)]
+      : [...(props.selected as T[]), option];
+    emit("select", newSelection);
+  }
+  else {
+    emit("select", option);
+  }
+};
+
+const selectOption = () => {
+  if (hoveredOption.value) {
+    onSelect(hoveredOption.value);
+  }
+  else if (searchQuery.value.length) {
+    emit("selectQuery", searchQuery.value);
+  }
+};
+
+const optionIsSelected = (option: SelectListOption) => {
+  if (!props.selected) return false;
+
+  if (isMultiselect.value) {
+    return (props.selected as T[]).some(o => o[props.identifier] === (option as T)[props.identifier]);
+  }
+
+  return (option as T)[props.identifier] === (props.selected as T)[props.identifier];
+};
+
+const onSearch = async (value: string) => {
+  searchQuery.value = value;
+  hoveredOption.value = null;
+
+  if (props.searchFunction) {
+    await props.searchFunction(value);
+  }
+};
+const debounceOnSearch = props.searchDebounce ? debounce(onSearch, props.searchDebounce) : onSearch;
+
+const updateLocalOptions = (options: SelectListOption[] | SelectListOptionGroup[]) => {
+  if (isGrouped.value) {
+    const groups = options as SelectListOptionGroup[];
+    localOptions.value = groups.map(group => ({
+      ...group,
+      options: selectedOptionFilter.value ? group.options.filter(selectedOptionFilter.value?.execute) : group.options,
+    }));
+  }
+  else {
+    const flatOptions = options as SelectListOption[];
+    localOptions.value = selectedOptionFilter.value ? flatOptions.filter(selectedOptionFilter.value?.execute) : flatOptions;
+  }
+
+  // Update option filter counts
+  // if (props.filters) {
+  //   localOptionFilters.value.forEach((filter) => {
+  //     filter.count = isGrouped.value
+  //       ? options.reduce((acc: number, group: SelectListOptionGroup): number => {
+  //           acc += group.options.filter(filter.execute).length;
+  //           return acc;
+  //         }, 0)
+  //       : options.filter(filter.execute).length;
+  //   });
+  // }
+  // nextFrame(() => scrollbarRef.value!.update());
+};
+
+const onOptionFilterChange = (filter: SelectListFilter) => {
+  selectedOptionFilter.value = filter;
+  updateLocalOptions(props.options);
+  // focusSearch();
+};
+
+const onToggleAll = () => {
+  if (!isMultiselect.value) throw new Error("[SelectList@onToggleAll] method should not be called when \"isMultiselect=false\"");
+
+  // need to do a different check if selectedOptionFilter has a value
+  // then check if "allFilteredOptionsSelected"
+  if (selectedCount.value === 0 || Boolean(selectedCount.value && !allOptionsSelected.value)) {
+    emit("select", selectedOptionFilter.value ? flattenedOptions.value.filter(selectedOptionFilter.value.execute) : flattenedOptions.value);
+  }
+  else {
+    emit("select", []);
+  }
+};
+
+/**
+ * Navigating and highlighting
+ */
+const onOptionHover = (option: T) => hoveredOption.value = flattenedOptions.value.find(o => (o as T)[props.identifier] === option[props.identifier]) || null;
+const allOptionsDisabled = computed(() => {
+  // If options are grouped, flatten them before checking
+  const options = Array.isArray(localOptions.value) && localOptions.value.length > 0 && "options" in localOptions.value[0]
+    ? (localOptions.value as SelectListOptionGroup[]).flatMap(group => group.options)
+    : (localOptions.value as SelectListOption[]);
+  return options.length > 0 && options.every((option: any) => !!option.disabled);
+});
+
+const navigateOptions = async (direction: "next" | "prev") => {
+  if (localOptions.value.length === 0) return;
+
+  let hoverIndex = flattenedOptions.value.findIndex(o => o.label === hoveredOption.value?.label);
+
+  if (!allOptionsDisabled.value) {
+    if (direction === "next") {
+      hoverIndex++;
+      if (hoverIndex === localOptions.value.length) {
+        hoverIndex = 0;
+      }
+    }
+    else if (direction === "prev") {
+      hoverIndex--;
+      if (hoverIndex < 0) {
+        hoverIndex = localOptions.value.length - 1;
+      }
+    }
+    hoveredOption.value = flattenedOptions.value[hoverIndex];
+
+    if (hoveredOption.value.disabled === true) {
+      navigateOptions(direction);
+    }
+
+    await nextTick();
+
+    if (hoveredOption.value) {
+      // eslint-disable-next-line ts/no-use-before-define
+      scrollToOption(hoveredOption.value);
+    }
+  }
+};
+
+const scrollToOption = (_option: SelectListOption) => {
+  if (!optionsRef.value.children.length) return;
+
+  // TODO add data attribute to options and query those within the optionsRef
+
+  const target = null; // optionsRef.value.children[localOptions.value.findIndex(o => o.label === option.label)].$el;
+
+  if (scrollbarRef.value && target) {
+    const scrollView: HTMLElement | null = scrollbarRef.value.$el.querySelector(".scrollbar__wrap");
+    if (scrollView) {
+      scrollIntoView(scrollView, target);
+      scrollbarRef.value.handleScroll();
+    }
+  }
+};
+
+const onToggleSelectionFooter = () => {
+  selectionOpen.value = !selectionOpen.value;
+  selectionScrollbarRef.value!.update();
+};
+const selectionClassesComputed = computed(() => {
+  return selectionOpen.value && selectionOverflow.value ? selectionScrollClasses.value : "border-transparent";
+});
+const onSelectionFooterIntersect = (payload: ScrollIntersectionEvent) => {
+  if (!payload.hit) {
+    selectionScrollClasses.value = "border-y-outline-subtle shadow-scroll-y";
+  }
+  else if (payload.edge === "bottom" && payload.hit) {
+    selectionScrollClasses.value = "border-b-transparent border-t-outline-subtle shadow-scroll-top";
+  }
+  else if (payload.edge === "top" && payload.hit) {
+    selectionScrollClasses.value = "border-t-transparent border-b-outline-subtle shadow-scroll-bottom";
+  }
+};
+const onScrollYActive = (active: boolean) => {
+  selectionOverflow.value = active;
+};
+
+const reset = () => {
+  searchQuery.value = "";
+  props.searchFunction ? props.searchFunction("") : updateLocalOptions([]);
+  selectedOptionFilter.value = props.filters ? props.filters[0] : null;
+};
+
+defineExpose({
+  // focusSearch,
+  isMultiselect,
+  reset,
+  scrollbarRef,
+});
+</script>
+
+<template>
+  <div
+    ref="selectListRef"
+    tabindex="0"
+    class="relative flex flex-col focus:outline-none w-full h-full overflow-hidden"
+    :style="{
+      height: searchFunction ? '640px' : undefined,
+      maxHeight: searchFunction ? undefined : '100%',
+    }"
+  >
+    <header
+      v-if="$slots.header || searchFunction || filters || selectAll"
+      class="flex-0 flex flex-col gap-2 p-2 border-b border-default"
+    >
+      <slot name="header" />
+
+      <section v-if="searchFunction" class="">
+        <BInput
+          class="w-full"
+          clearable
+          :value="searchQuery"
+          :placeholder="placeholder"
+          @change="debounceOnSearch"
+          @clear="onSearch('')"
+        />
+      </section>
+
+      <section v-if="filters" class="flex items-center gap-1">
+        <BButton
+          v-for="filter in filters"
+          :key="filter.name"
+          small
+          variant="textSubtle"
+          :focus="Boolean(selectedOptionFilter && selectedOptionFilter.name === filter.name)"
+          :label="filter.name"
+          @click="onOptionFilterChange(filter)"
+        />
+      </section>
+
+      <button
+        v-if="selectAll"
+        class="cursor-pointer flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-secondary active:bg-tertiary"
+        @click="onToggleAll"
+      >
+        <BCheckbox
+          :indeterminate="Boolean(selectedCount && !allOptionsSelected)"
+          :checked="allOptionsSelected"
+          @click="onToggleAll"
+        />
+        <span class="text-sm text-muted italic">Select/deselect all</span>
+      </button>
+    </header>
+
+    <main class="flex-1 h-full overflow-hidden flex flex-col">
+      <BErrorCard v-if="state === 'error'" :message="errorMessage as string" />
+      <BLoadingCard v-else-if="state === 'loading'" />
+      <BNoMatchCard v-else-if="state === 'no match'" />
+      <BIdleCard v-else-if="state === 'idle'" />
+      <BScrollbar
+        v-else-if="state === 'match'"
+        ref="scrollbarRef"
+        class="flex-1"
+        show
+      >
+        <ul
+          ref="optionsRef"
+          class="px-1"
+          :class="{
+            'py-2': small && isGrouped || !small && !isGrouped,
+            'py-1': small && !isGrouped,
+            'py-4': !small && isGrouped,
+          }"
+        >
+          <slot
+            name="options"
+            :options="localOptions"
+            :hover="onOptionHover"
+            :hovered-option="hoveredOption"
+            :select="onSelect"
+            :get-is-selected="optionIsSelected"
+          />
+        </ul>
+      </BScrollbar>
+    </main>
+
+    <template v-if="$slots.footer">
+      <footer class="flex-initial max-h-72 flex flex-col border-t-1 border-default">
+        <template v-if="showSelection">
+          <header class="flex-none flex items-center justify-between gap-1 px-4 py-1">
+            <BButton
+              square
+              size="tiny"
+              variant="text"
+              class="-ml-4"
+              :label="`${selectionOpen ? 'Hide' : 'Show'} selected items (${selectedCount})`"
+              :trailing-icon="selectionOpen ? 'chevron-down' : 'chevron-up'"
+              @click="onToggleSelectionFooter"
+            />
+          </header>
+          <BScrollbar
+            ref="selectionScrollbarRef"
+            show
+            tag="ul"
+            class="border-y-1"
+            :class="selectionClassesComputed"
+            :view-height-class="selectionOpen ? 'flex-1 max-h-72' : 'flex-none h-0'"
+            @scroll-y-active="onScrollYActive"
+            @intersect="onSelectionFooterIntersect"
+          >
+            <template v-if="selectionOpen">
+              <span v-if="noSelection" class="px-4 h-8 flex items-center text-ui-label-14-regular text-disabled-font">Nothing selected</span>
+              <section class="w-full px-4 flex flex-wrap items-center gap-2">
+                <!-- <NInputChip
+                                    ref="selectedOptionsRef"
+                                    v-if="selected && isMultiselect"
+                                    v-for="option in selected"
+                                    :key="(option as T).id || (option as T).label"
+                                    :selected="optionIsSelected(option as T)"
+                                    :label="(option as T).label"
+                                    shape="squared"
+                                    variant="outline"
+                                    emphasis="strong"
+                                    closable
+                                    @close="onSelect(option as T)"
+                                />
+                                <NInputChip
+                                    ref="selectedOptionsRef"
+                                    v-else-if="selected"
+                                    :selected="true"
+                                    :label="(selected as T).label"
+                                    shape="squared"
+                                    variant="outline"
+                                    emphasis="strong"
+                                    closable
+                                    @close="onSelect(selected as T)"
+                                /> -->
+              </section>
+            </template>
+          </BScrollbar>
+        </template>
+        <footer class="flex-0 px-6 py-4">
+          <slot name="footer" />
+        </footer>
+      </footer>
+    </template>
+  </div>
+</template>

package/src/components/select-list/components/SelectListFilterChip.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const { filterCount, label } = defineProps<{
+  filterCount?: number;
+  label: string;
+  selected: boolean;
+}>();
+</script>
+
+<template>
+  <button
+    class="
+            group
+            flex flex-shrink-0 items-center justify-center gap-1 w-fit h-8 py-2 rounded-x-large
+            text-ui-button-12
+            focus-visible:outline-focus focus-visible:outline focus-visible:outline-offset-[1px]
+        "
+    :class="{
+      'bg-primary hover:bg-primary-hover active:bg-primary-active text-white': selected,
+      'bg-base-light hover:bg-base-medium active:bg-base-heavy text-primary hover:text-primary-hover active:text-primary-active': !selected,
+      'pl-3 pr-1.5': filterCount,
+      'px-3': !filterCount,
+    }"
+  >
+    {{ label }}
+
+    <template v-if="filterCount">
+      <div
+        class="pointer-events-none select-none flex items-center h-5 px-2 rounded-full text-ui-label-12-bold text-white bg-primary-hover group-hover:bg-primary-active"
+      >
+        {{ filterCount }}
+      </div>
+    </template>
+  </button>
+</template>

package/src/components/select-list/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./option-group";
+export * from "./select-list-option";
+export * from "./status-cards";

package/src/components/select-list/components/option-group/OptionGroup.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const { small = false } = defineProps<{ label?: string; small?: boolean }>();
+</script>
+
+<template>
+  <section
+    class="relative w-full border-t border-default"
+    :class="{ 'first:border-t-0 first:pt-0': !label, 'py-2': small, 'py-4': !small }"
+  >
+    <div
+      v-if="label"
+      :style="{ top: small ? '-0.55rem' : '-0.63rem' }"
+      class="absolute bg-primary px-2 font-medium text-tertiary"
+      :class="{ 'text-[10px]': small, 'text-xs': !small }"
+    >
+      {{ label }}
+    </div>
+    <slot />
+  </section>
+</template>

package/src/components/select-list/components/option-group/index.ts

@@ -0,0 +1 @@
+export { default as BSelectListOptionGroup } from "./OptionGroup.vue";

package/src/components/select-list/components/select-list-option/SelectListOption.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { SelectListOption, SelectOptionVariant } from "../../types";
+import { computed } from "vue";
+import { BButton, BCheckbox, BIcon, BTextHighlight } from "../../../";
+
+const { hoveredOption, selected, option, variant = "checkbox", small = false } = defineProps<{
+  hoveredOption?: SelectListOption | null;
+  option: SelectListOption;
+  selected: boolean;
+  search?: string;
+  small?: boolean;
+  variant?: SelectOptionVariant;
+}>();
+
+const emit = defineEmits(["click", "delete", "focus", "hover"]);
+
+const isButton = computed(() => variant === "checkbox" || variant === "single");
+const highlighted = computed(() => {
+  if (hoveredOption) {
+    if ("id" in hoveredOption && "id" in option) {
+      return hoveredOption.id === option.id;
+    }
+    return hoveredOption && hoveredOption.label === option.label;
+  }
+  return false;
+});
+
+const onToggle = () => emit("click");
+</script>
+
+<template>
+  <li class="list-none flex items-center w-full overflow-hidden bg-primary">
+    <component
+      :is="isButton ? 'button' : 'div'"
+      class="cursor-pointer w-full overflow-hidden rounded-lg flex items-center px-2 py-1 gap-2 hover:bg-secondary active:bg-tertiary"
+      :class="{
+        '': variant === 'checkbox',
+        'bg-secondary': highlighted,
+        'h-6 text-xs': small,
+        'h-9 text-sm': !small,
+      }"
+      @click="onToggle"
+      @mouseover="emit('hover', option)"
+      @focus="emit('focus', option)"
+    >
+      <main class="flex-1 w-full overflow-hidden flex items-center gap-2">
+        <BCheckbox
+          v-if="variant === 'checkbox'"
+          :checked="selected"
+          class="flex-0"
+          @click="onToggle"
+        />
+        <BIcon
+          v-if="option.icon"
+          :name="option.icon"
+          class="w-4 h-4 flex-0"
+          :class="{
+            'text-action': selected && variant === 'single',
+          }"
+        />
+        <BTextHighlight
+          background-color="yellow"
+          :value="option.label"
+          :highlight="search"
+          class="flex-1 pl-1 -ml-1 text-left min-w-0 truncate"
+          :class="{
+            'text-action': selected && variant === 'single',
+            'text-xs': small,
+            'text-sm': !small,
+          }"
+        />
+      </main>
+      <span v-if="option.suffix" class="flex-0 text-sm text-secondary" :class="{ 'text-xs': small, 'text-sm': !small }">{{ option.suffix }}</span>
+      <BButton
+        v-if="variant === 'deletable'"
+        small
+        icon="close"
+        variant="text"
+        @click="emit('delete')"
+      />
+    </component>
+  </li>
+</template>

package/src/components/select-list/components/select-list-option/index.ts

@@ -0,0 +1 @@
+export { default as BSelectListOption } from "./SelectListOption.vue";

package/src/components/select-list/components/status-cards/error-card/ErrorCard.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { StatusCard } from "../status-card";
+
+defineProps<{ message: string }>();
+</script>
+
+<template>
+  <StatusCard :status="message" variant="error">
+    <svg width="37" height="50" viewBox="0 0 37 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M15.5369 1.94446C15.5369 1.94446 5.52391 3.36996 1.83341 15.1295C-1.27759 25.042 3.94441 41.9445 23.2614 46.1665" stroke="#C44836" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" />
+      <path d="M25.9997 48.1889C27.5125 48.1889 28.7387 46.9626 28.7387 45.4499C28.7387 43.9372 27.5125 42.7109 25.9997 42.7109C24.487 42.7109 23.2607 43.9372 23.2607 45.4499C23.2607 46.9626 24.487 48.1889 25.9997 48.1889Z" stroke="#C44836" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" />
+      <path d="M14.6998 23.153C17.4629 23.153 19.7028 20.9131 19.7028 18.15C19.7028 15.3869 17.4629 13.147 14.6998 13.147C11.9367 13.147 9.69678 15.3869 9.69678 18.15C9.69678 20.9131 11.9367 23.153 14.6998 23.153Z" stroke="#C44836" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" />
+      <path d="M21.7593 25.4259C21.7593 25.4259 23.8148 28.5369 27.7498 27.7224" stroke="#C44836" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" />
+      <path d="M22.7901 34.6389C29.0291 33.0074 31.2711 28.0774 31.7481 24.8944C31.7841 24.6529 31.9971 24.4779 32.2406 24.4779H34.6821C35.3996 24.4779 35.9811 23.8964 35.9811 23.1789C35.5506 19.5239 32.4851 5.23991 23.6876 2.17041C23.3106 2.03891 22.9346 2.38891 23.0396 2.77441C26.3746 15.0469 19.7031 18.1499 19.7031 18.1499" stroke="#C44836" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" />
+    </svg>
+  </StatusCard>
+</template>

package/src/components/select-list/components/status-cards/error-card/index.ts

@@ -0,0 +1 @@
+export { default as BErrorCard } from "./ErrorCard.vue";

package/src/components/select-list/components/status-cards/idle-card/IdleCard.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { StatusCard } from "../status-card";
+</script>
+
+<template>
+  <StatusCard status="Type to search" variant="idle">
+    <svg width="44" height="36" viewBox="0 0 44 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M15 1C15 0.447715 14.5523 0 14 0C13.4477 0 13 0.447715 13 1L12.9999 1.09744C12.9991 2.0294 12.9979 3.38692 13.6318 4.49614C14.3697 5.78762 15.781 6.5 18 6.5C18.878 6.5 19.4498 6.66469 19.8269 6.87416C20.1933 7.07776 20.435 7.35604 20.6056 7.69721C20.8594 8.2049 20.9503 8.82576 20.9826 9.5H3C1.34315 9.5 0 10.8431 0 12.5V32.5C0 34.1569 1.34315 35.5 3 35.5H41C42.6569 35.5 44 34.1569 44 32.5V12.5C44 10.8431 42.6569 9.5 41 9.5H22.9864C22.9515 8.65934 22.8281 7.67021 22.3944 6.80279C22.065 6.14396 21.5567 5.54724 20.7981 5.12584C20.0502 4.71031 19.122 4.5 18 4.5C16.219 4.5 15.6303 3.96238 15.3682 3.50386C15.0245 2.90238 15 2.06711 15 1ZM22 11.5H3C2.44772 11.5 2 11.9477 2 12.5V15.5H4H5H9H10H36H39H42V12.5C42 11.9477 41.5523 11.5 41 11.5H22ZM8 17.5H9H10H12V21.5H8V17.5ZM2 21.5V17.5H4H5H6V21.5H2ZM32 17.5H36V21.5H32V17.5ZM38 17.5H39H42V21.5H38V17.5ZM2 27.5V23.5H9V27.5H2ZM11 27.5V23.5H15V27.5H11ZM17 27.5H21V23.5H17V27.5ZM27 27.5H23V23.5H27V27.5ZM29 27.5H33V23.5H29V27.5ZM42 27.5H35V23.5H42V27.5ZM14 21.5H18V17.5H14V21.5ZM26 21.5H30V17.5H26V21.5ZM20 21.5H24V17.5H20V21.5ZM2 29.5V32.5C2 33.0523 2.44772 33.5 3 33.5H6V29.5H2ZM8 29.5V33.5H12V29.5H8ZM30 33.5H14V29.5H30V33.5ZM32 33.5H36V29.5H32V33.5ZM41 33.5H38V29.5H42V32.5C42 33.0523 41.5523 33.5 41 33.5ZM39 14.5C39.5523 14.5 40 14.0523 40 13.5C40 12.9477 39.5523 12.5 39 12.5H36C35.4477 12.5 35 12.9477 35 13.5C35 14.0523 35.4477 14.5 36 14.5H39ZM5 14.5C5.55228 14.5 6 14.0523 6 13.5C6 12.9477 5.55228 12.5 5 12.5H4C3.44772 12.5 3 12.9477 3 13.5C3 14.0523 3.44772 14.5 4 14.5H5ZM10 14.5C10.5523 14.5 11 14.0523 11 13.5C11 12.9477 10.5523 12.5 10 12.5H9C8.44771 12.5 8 12.9477 8 13.5C8 14.0523 8.44771 14.5 9 14.5H10Z" fill="#ADA7A1" />
+    </svg>
+  </StatusCard>
+</template>

package/src/components/select-list/components/status-cards/idle-card/index.ts

@@ -0,0 +1 @@
+export { default as BIdleCard } from "./IdleCard.vue";

package/src/components/select-list/components/status-cards/index.ts

@@ -0,0 +1,4 @@
+export * from "./error-card";
+export * from "./idle-card";
+export * from "./loading-card";
+export * from "./no-match-card";