@firstnoodle-ui/bui 0.0.28 → 0.0.32

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

@@ -1,346 +0,0 @@
-<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

@@ -1,28 +0,0 @@
-<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

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

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

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

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

@@ -1,51 +0,0 @@
-<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

@@ -1,239 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-<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

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