@firstnoodle-ui/bui 0.0.26 → 0.0.28

package/src/components/pop-select/PopSelect.vue

@@ -0,0 +1,346 @@
+<script setup lang="ts" generic="T extends TPopSelectOption">
+import type { Placement } from "@floating-ui/dom";
+import type { TIcon, TPopSelectOption, TPopSelectResultFilter } from "../types";
+import { computed, nextTick, onBeforeMount, ref, useSlots, watch } from "vue";
+import { BIcon, BLoadSpinner, BPopper, BPopperContent, BScrollbar, BTextHighlight } from "../";
+import { useNextFrame } from "../../composables";
+import { debounce, scrollIntoView } from "../../utils";
+import { State } from "./enums.ts";
+import PopSelectOption from "./option.vue";
+import ResultFilters from "./ResultFilters.vue";
+
+const props = withDefaults(
+  defineProps<{
+    resetOnClose?: boolean;
+    debounceMs?: number;
+    disabled?: boolean;
+    emptyStateIcon?: TIcon;
+    emptyStateText?: string;
+    filterable?: boolean;
+    fixedHeight?: boolean;
+    keepOpen?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+    options: T[];
+    placeholder?: string;
+    placement?: Placement;
+    popperWidthClass?: string;
+    // eslint-disable-next-line ts/no-unsafe-function-type
+    remoteMethod?: Function | null;
+    resultFilters?: TPopSelectResultFilter<T>[];
+    rootClass?: string;
+    sameWidthAsElement?: HTMLElement;
+    sameWidthAsTrigger?: boolean;
+    selected?: TPopSelectOption | TPopSelectOption[];
+    triggerClass?: string;
+  }>(),
+  {
+    resetOnClose: false,
+    debounceMs: 300,
+    disabled: false,
+    emptyStateIcon: "keyboard",
+    emptyStateText: "Type to search",
+    filterable: false,
+    fixedHeight: false,
+    keepOpen: false,
+    loading: false,
+    loadingText: "Loading...",
+    placeholder: "Search",
+    placement: "bottom-start",
+    remoteMethod: null,
+    sameWidthAsTrigger: false,
+  },
+);
+const emit = defineEmits(["close", "save-custom", "select"]);
+const slots = useSlots() as ReturnType<typeof useSlots>;
+
+const hoveredOption = ref<TPopSelectOption | null>(null);
+const localOptions = ref<TPopSelectOption[]>([]);
+const currentQuery = ref("");
+
+const contentRef = ref<typeof BPopperContent>();
+const errorRef = ref<HTMLElement>();
+const inputRef = ref<HTMLInputElement>();
+const optionsRef = ref();
+const popperRef = ref<typeof BPopper>();
+const scrollbarRef = ref<typeof BScrollbar>();
+
+const localResultFilters = ref<TPopSelectResultFilter<T>[]>(props.resultFilters || []);
+const selectedResultFilter = ref<TPopSelectResultFilter<T> | null>(props.resultFilters ? props.resultFilters[0] : null);
+
+const { nextFrame } = useNextFrame();
+
+const selectedOptions = computed(() => {
+  if (!props.selected) return [];
+  return Array.isArray(props.selected) ? props.selected : [props.selected];
+});
+
+const allOptionsDisabled = computed(() => {
+  return localOptions.value.every((option: TPopSelectOption) => option.disabled as boolean);
+});
+
+const emptyState = computed(() => {
+  return !currentQuery.value.length && !localOptions.value.length;
+});
+
+const noSearchResults = computed(() => {
+  return currentQuery.value.length && !localOptions.value.length;
+});
+
+const state = computed(() => {
+  if (errorRef.value) return State.ERROR;
+  if (props.loading) return State.LOADING;
+  if (noSearchResults.value && !props.loading) return State.NO_MATCH;
+  if (emptyState.value && !props.loading) return State.IDLE;
+  if (localOptions.value.length && !props.loading) return State.MATCH;
+  return undefined;
+});
+
+const updateLocalOptions = (options: T[]) => {
+  localOptions.value = selectedResultFilter.value ? options.filter(selectedResultFilter.value.execute) : options;
+
+  // update counts
+  if (props.resultFilters) {
+    localResultFilters.value.forEach((filter) => {
+      filter.count = options.filter(filter.execute).length;
+    });
+  }
+};
+
+watch(
+  () => props.options,
+  (newValue: T[]) => {
+    updateLocalOptions(newValue);
+    hoveredOption.value = null;
+  },
+);
+
+onBeforeMount(() => {
+  if (props.filterable && props.remoteMethod) {
+    console.warn("[PopSelect] should not have both \"filterable\" and \"remoteMethod\" props at the same time");
+  }
+  updateLocalOptions(props.options);
+});
+
+// triggers onClose event when popper is closed
+const close = () => popperRef.value!.close();
+const focus = () => popperRef.value!.open();
+
+const onOpen = async () => {
+  nextFrame(() => {
+    if (scrollbarRef.value) {
+      nextFrame(() => scrollbarRef.value!.update());
+    }
+    if (inputRef.value) {
+      nextFrame(() => inputRef.value!.focus());
+    }
+  });
+};
+
+const onClose = () => {
+  if (props.keepOpen) return;
+
+  hoveredOption.value = null;
+
+  if (props.resetOnClose) {
+    currentQuery.value = "";
+    props.remoteMethod ? props.remoteMethod("") : updateLocalOptions([]);
+    selectedResultFilter.value = props.resultFilters ? props.resultFilters[0] : null;
+  }
+
+  emit("close");
+};
+
+const onSelect = (option: TPopSelectOption) => {
+  emit("select", option);
+  if (!props.keepOpen) close();
+};
+
+const filterOptions = (query: string) => (localOptions.value = props.options.filter(o => o.label.toLowerCase().includes(query.toLowerCase())));
+
+const onQuery = async (event: Event) => {
+  const query = (event.target as HTMLInputElement).value;
+
+  hoveredOption.value = null;
+
+  if (props.filterable) {
+    filterOptions(query);
+  }
+  else if (props.remoteMethod) {
+    await props.remoteMethod(query);
+  }
+};
+
+const debounceOnQuery = debounce(onQuery, props.debounceMs);
+
+const onOptionHover = (label: string) => {
+  hoveredOption.value = localOptions.value.find(o => o.label === label) || null;
+};
+
+const scrollToOption = (option: TPopSelectOption) => {
+  if (!optionsRef.value.length) return;
+
+  const target = optionsRef.value[localOptions.value.findIndex(o => o.label === option.label)].$el;
+
+  if (scrollbarRef.value && target) {
+    const menu: HTMLElement | null = scrollbarRef.value.$el.querySelector(".scrollbar__wrap");
+    if (menu) {
+      scrollIntoView(menu, target);
+      scrollbarRef.value.handleScroll();
+    }
+  }
+};
+
+const navigateOptions = async (direction: "next" | "prev") => {
+  if (localOptions.value.length === 0) return;
+
+  let hoverIndex = localOptions.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 = localOptions.value[hoverIndex];
+
+    if (hoveredOption.value.disabled === true) {
+      navigateOptions(direction);
+    }
+
+    await nextTick();
+
+    if (hoveredOption.value) {
+      scrollToOption(hoveredOption.value);
+    }
+  }
+};
+
+const selectOption = () => {
+  if (hoveredOption.value) {
+    onSelect(hoveredOption.value);
+  }
+  else if (currentQuery.value.length) {
+    emit("save-custom", currentQuery.value);
+  }
+};
+
+const onResultFilterChange = (filter: TPopSelectResultFilter<T>) => {
+  selectedResultFilter.value = filter;
+  updateLocalOptions(props.options);
+  inputRef.value!.focus();
+};
+
+defineExpose({ close, focus });
+</script>
+
+<template>
+  <BPopper
+    ref="popperRef"
+    trigger="click"
+    :placement="placement"
+    :disabled="disabled"
+    :popper-width-class="popperWidthClass"
+    :same-width-as-element="sameWidthAsElement"
+    :same-width-as-trigger="sameWidthAsTrigger"
+    :root-class="rootClass"
+    :trigger-class="triggerClass"
+    @close="onClose"
+    @open="onOpen"
+  >
+    <template #default="slotProps">
+      <slot name="trigger" :disabled="disabled" :visible="slotProps && slotProps.visible" />
+    </template>
+
+    <template #content>
+      <BPopperContent ref="contentRef" class="flex flex-col" :class="{ 'h-72': fixedHeight }">
+        <header v-if="filterable || remoteMethod || resultFilters" class="border-b border-default">
+          <header v-if="filterable || remoteMethod" class="flex items-center w-full px-3 space-x-2 bg-primary overflow-hidden">
+            <BIcon name="magnifying-glass" class="text-light-blue" />
+            <input
+              ref="inputRef"
+              v-model="currentQuery"
+              type="text"
+              class="w-full h-8 text-sm leading-none bg-primary rounded-tr-lg focus:outline-hidden"
+              :placeholder="placeholder"
+              @click.stop.prevent
+              @input="debounceOnQuery"
+              @keydown.down.prevent="navigateOptions('next')"
+              @keydown.up.prevent="navigateOptions('prev')"
+              @keydown.enter.prevent="selectOption"
+              @keydown.esc.stop.prevent="onClose"
+            >
+          </header>
+          <ResultFilters
+            v-if="resultFilters"
+            show-counts
+            :filters="localResultFilters"
+            :selected="selectedResultFilter"
+            @change="onResultFilterChange"
+          />
+        </header>
+
+        <div v-if="$slots.error" ref="errorRef" class="flex-1 bg-primary h-full">
+          <slot name="error" />
+        </div>
+        <div v-else-if="state === State.LOADING" class="flex-1">
+          <div class="flex items-center space-x-2 bg-primary text-tertiary py-3 px-3">
+            <BLoadSpinner class="w-4 h-4 text-granite-grey" />
+            <span class="italic leading-none text-sm">{{ loadingText }}</span>
+          </div>
+        </div>
+        <div v-else-if="state === State.NO_MATCH" class="flex-1">
+          <div class="flex space-x-2 bg-primary text-tertiary py-3 px-3">
+            <div class="w-4 h-4 text-center leading-none">
+              ...
+            </div>
+            <span class="italic leading-none text-sm">Nothing matches your input</span>
+          </div>
+        </div>
+        <div v-else-if="state === State.IDLE" class="flex-1">
+          <div class="flex items-center space-x-2 bg-primary text-tertiary py-3 px-3">
+            <BIcon :name="emptyStateIcon" />
+            <span class="italic leading-none text-sm">{{ emptyStateText }}</span>
+          </div>
+          <div class="h-8 w-full bg-primary" />
+        </div>
+
+        <BScrollbar v-else-if="state === State.MATCH" ref="scrollbarRef">
+          <div class="max-h-60 bg-primary">
+            <PopSelectOption
+              v-for="option in localOptions"
+              ref="optionsRef"
+              :key="option.id || option.label"
+              :disabled="option.disabled"
+              :label="option.label"
+              :hovered-option="hoveredOption"
+              :selected="selectedOptions.includes(option)"
+              @focus="onOptionHover"
+              @hover="onOptionHover"
+              @click="onSelect(option)"
+            >
+              <div class="flex items-center space-x-2">
+                <BIcon v-if="option.icon" :name="option.icon" />
+                <BTextHighlight bold underline :value="option.label" :highlight="currentQuery" />
+              </div>
+              <div v-if="option.meta" class="text-secondary">
+                {{ option.meta }}
+              </div>
+            </PopSelectOption>
+          </div>
+        </BScrollbar>
+
+        <footer v-if="slots.footer" class="flex-none border-t border-default bg-primary">
+          <slot name="footer" />
+        </footer>
+      </BPopperContent>
+    </template>
+  </BPopper>
+</template>

package/src/components/pop-select/ResultFilters.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts" generic="T extends TPopSelectOption">
+import type { TPopSelectOption, TPopSelectResultFilter } from "../types";
+import { BFilterChip } from "../";
+
+withDefaults(defineProps<{
+  selected: TPopSelectResultFilter<T> | null;
+  showCounts?: boolean;
+  filters: TPopSelectResultFilter<T>[];
+}>(), {
+  showCounts: false,
+});
+
+const emit = defineEmits(["change"]);
+</script>
+
+<template>
+  <section class="flex items-center px-2 pb-2 space-x-2">
+    <BFilterChip
+      v-for="filter in filters"
+      :key="filter.name"
+      :active="Boolean(selected && selected.name === filter.name)"
+      :count="filter.count"
+      :label="filter.name"
+      stop-propagation
+      @click="emit('change', filter)"
+    />
+  </section>
+</template>

package/src/components/pop-select/enums.ts

@@ -0,0 +1,7 @@
+export enum State {
+  ERROR = "error",
+  IDLE = "idle",
+  LOADING = "loading",
+  MATCH = "match",
+  NO_MATCH = "no match",
+}

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

@@ -0,0 +1,2 @@
+export { default as BPopSelectFooterButton } from "./FooterButton.vue";
+export { default as BPopSelect } from "./PopSelect.vue";

package/src/components/pop-select/option.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { TPopSelectOption } from "../types";
+import { computed, ref } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    label: string;
+    disabled?: boolean;
+    hoveredOption: TPopSelectOption | null;
+    selected?: boolean;
+  }>(),
+  {
+    disabled: false,
+    selected: false,
+  },
+);
+
+const emit = defineEmits(["click", "focus", "hover"]);
+
+const root = ref();
+
+const highlighted = computed(() => {
+  return props.hoveredOption && props.hoveredOption.label === props.label;
+});
+
+const onOptionClick = () => {
+  if (props.disabled) return;
+  emit("click");
+};
+</script>
+
+<template>
+  <div
+    ref="root"
+    tabindex="0"
+    class="flex items-center justify-between w-full h-8 px-3 space-x-2 text-sm focus:outline-hidden"
+    :class="{
+      'cursor-not-allowed text-muted ': disabled,
+      'cursor-pointer text-primary hover:bg-secondary focus:bg-secondary active:bg-tertiary': !disabled && !selected,
+      'cursor-pointer text-light-blue font-medium hover:bg-secondary focus:bg-secondary active:bg-tertiary': selected,
+      'bg-secondary': highlighted,
+      'bg-primary': !highlighted,
+    }"
+    @click="onOptionClick"
+    @keydown.enter.prevent="onOptionClick"
+    @mouseover="emit('hover', label)"
+    @focus="emit('focus', label)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/popper/Popper.vue

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import type { Placement } from "@floating-ui/dom";
+import type { TPopperTrigger } from "../types";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import debounce from "debounce";
+import { nextTick, onMounted, onUnmounted, ref, useSlots, watch } from "vue";
+import { useClickOutside, useMounted } from "../../composables";
+import { sameWidthAsElementMiddleware, sameWidthAsTriggerMiddleware } from "./middleware";
+
+const props = withDefaults(
+  defineProps<{
+    closeDelay?: number;
+    disabled?: boolean;
+    offsetMain?: number;
+    offsetCross?: number;
+    openDelay?: number;
+    placement?: Placement;
+    popperWidthClass?: string;
+    rootClass?: string | string[];
+    sameWidthAsElement?: HTMLElement;
+    sameWidthAsTrigger?: boolean;
+    show?: boolean;
+    trigger?: TPopperTrigger;
+    triggerClass?: string | string[];
+    useOverlay?: boolean;
+  }>(),
+  {
+    closeDelay: 20,
+    disabled: false,
+    offsetMain: 0,
+    offsetCross: 0,
+    openDelay: 0,
+    placement: "bottom-start",
+    rootClass: "inline-flex",
+    sameWidthAsTrigger: false,
+    show: false,
+    trigger: "hover",
+    triggerClass: "flex",
+    useOverlay: false,
+  },
+);
+
+const emit = defineEmits(["open", "close", "updateClickOutside"]);
+const slots = useSlots();
+
+// eslint-disable-next-line ts/no-unsafe-function-type
+let cleanup: Function | null;
+
+const containerRef = ref<HTMLDivElement>();
+const popperRef = ref<HTMLDivElement>();
+const triggerRef = ref<HTMLDivElement>();
+const isOpen = ref(false);
+
+const { mounted } = useMounted();
+// eslint-disable-next-line ts/no-use-before-define
+const { disableClickOutside, enableClickOutside, updateClickOutside } = useClickOutside(() => closePopper());
+
+const update = async () => {
+  if (triggerRef.value && popperRef.value) {
+    const middleware = [
+      offset({
+        mainAxis: props.offsetMain,
+        crossAxis: props.offsetCross,
+      }),
+      flip(),
+      shift(),
+    ];
+
+    if (!props.popperWidthClass) {
+      if (props.sameWidthAsTrigger) {
+        middleware.push(sameWidthAsTriggerMiddleware);
+      }
+      else if (props.sameWidthAsElement) {
+        middleware.push(sameWidthAsElementMiddleware(props.sameWidthAsElement));
+      }
+    }
+
+    const position = await computePosition(triggerRef.value, popperRef.value, {
+      placement: props.placement as Placement,
+      middleware,
+    });
+
+    popperRef.value.style.left = `${position.x}px`;
+    popperRef.value.style.top = `${position.y}px`;
+  }
+};
+
+onMounted(() => {
+  const children = slots.default && slots.default({ visible: isOpen.value });
+
+  if (children && children.length > 1) {
+    return console.error(`[Popper]: The <Popper> component expects only one child element at its root. You passed ${children.length} child nodes.`);
+  }
+
+  if (!props.popperWidthClass) {
+    if (props.sameWidthAsElement && props.sameWidthAsTrigger) {
+      console.warn(`[Popper]: The 'sameWidthAsElement' prop will be ignored because 'sameWidthAsTrigger' is set to true`);
+    }
+  }
+  else if (props.sameWidthAsElement || props.sameWidthAsTrigger) {
+    console.warn(`[Popper]: The props 'sameWidthAsElement' or 'sameWidthAsTrigger' will be ignored because the 'popperWidthClass' is set`);
+  }
+
+  if (props.trigger === "manual" && props.show) {
+    // eslint-disable-next-line ts/no-use-before-define
+    openPopperDebounce();
+  }
+});
+
+onUnmounted(() => {
+  // the openDelay might be triggered after the component is onUnmounted
+  // eslint-disable-next-line ts/no-use-before-define
+  openPopperDebounce.clear();
+
+  if (cleanup) {
+    cleanup();
+    cleanup = null;
+  }
+});
+
+const close = () => {
+  if (!isOpen.value) return;
+  isOpen.value = false;
+  emit("close");
+
+  !props.useOverlay && disableClickOutside();
+
+  if (cleanup) {
+    cleanup();
+    cleanup = null;
+  }
+};
+
+const open = async () => {
+  if (isOpen.value) return;
+  isOpen.value = true;
+
+  await nextTick();
+  emit("open", [triggerRef.value, popperRef.value]);
+  cleanup = autoUpdate(triggerRef.value as HTMLElement, popperRef.value as HTMLElement, update);
+
+  !props.useOverlay && popperRef.value && triggerRef.value && enableClickOutside([popperRef.value, triggerRef.value]);
+};
+
+const openPopperDebounce = debounce(open, props.openDelay);
+const closePopperDebounce = debounce(close, props.closeDelay);
+
+const openPopper = async () => {
+  if (props.disabled) return;
+  closePopperDebounce.clear();
+  openPopperDebounce();
+};
+
+const closePopper = async () => {
+  openPopperDebounce.clear();
+  closePopperDebounce();
+};
+
+const onClick = (e: MouseEvent) => {
+  if (props.trigger === "click") {
+    e.preventDefault();
+    e.stopPropagation();
+    // eslint-disable-next-line ts/no-use-before-define
+    togglePopper();
+  }
+};
+
+const updateClickOutsideTargets = (targets: HTMLElement[]) => {
+  if (popperRef.value && triggerRef.value) {
+    updateClickOutside([popperRef.value, triggerRef.value, ...targets]);
+  }
+};
+
+const togglePopper = () => (isOpen.value ? closePopper() : openPopper());
+
+/** If Popper is open, we automatically close it if if becomes disabled */
+watch(
+  () => props.disabled,
+  (newValue: boolean) => isOpen.value && newValue && close(),
+);
+
+/** If trigger is manual, we open/close popper when prop.show changes */
+watch(
+  () => props.show,
+  (newValue: boolean) => {
+    if (props.trigger === "manual") {
+      newValue ? openPopperDebounce() : closePopperDebounce();
+    }
+    else {
+      console.warn(`[Popper]: The 'show' prop is only available when the 'trigger' prop is set to 'manual'`);
+    }
+  },
+);
+
+defineExpose({
+  close,
+  containerRef,
+  open,
+  updateClickOutsideTargets,
+});
+</script>
+
+<template>
+  <div ref="containerRef" :class="rootClass" @mouseleave="trigger === 'hover' && closePopper()">
+    <div
+      ref="triggerRef"
+      :class="triggerClass"
+      @mouseover="trigger === 'hover' && openPopper()"
+      @click="onClick"
+      @focus="trigger === 'focus' && openPopper()"
+      @keyup.esc="closePopper()"
+    >
+      <slot :visible="isOpen" />
+    </div>
+    <Teleport v-if="mounted" to="#poppers">
+      <template v-if="!disabled && isOpen">
+        <div
+          v-if="useOverlay && trigger !== 'hover' && trigger !== 'manual'"
+          class="pointer-events-auto absolute w-screen h-screen top-0 left-0 bg-transparent"
+          @click="closePopper()"
+        >
+          <div v-show="!disabled && isOpen" ref="popperRef" class="absolute" :class="popperWidthClass">
+            <slot name="content" :close="close" :is-open="isOpen" />
+          </div>
+        </div>
+        <div
+          v-else
+          ref="popperRef"
+          class="absolute"
+          :class="popperWidthClass"
+          @mouseover="trigger === 'hover' && openPopper()"
+          @mouseleave="trigger === 'hover' && closePopper()"
+        >
+          <slot name="content" :close="close" :is-open="isOpen" />
+        </div>
+      </template>
+    </Teleport>
+  </div>
+</template>

package/src/components/popper/PopperContent.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="pointer-events-auto rounded-lg overflow-hidden border border-default bg-primary shadow-xl dark:shadow-black/25">
+    <slot />
+  </div>
+</template>

package/src/components/popper/index.ts

@@ -0,0 +1,2 @@
+export { default as BPopper } from "./Popper.vue";
+export { default as BPopperContent } from "./PopperContent.vue";