@firstnoodle-ui/bui 0.0.13

package/src/components/pagination/Pagination.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { TPopSelectOption } from "../types";
+import { computed } from "vue";
+import { BIcon, BPopSelect, BTooltip } from "../";
+import { range } from "../../utils";
+
+const props = withDefaults(
+  defineProps<{
+    noBorders?: boolean;
+    currentPage: number;
+    lastPage: number;
+  }>(),
+  {
+    noBorders: false,
+  },
+);
+
+const emit = defineEmits(["change"]);
+
+const pageOptions = computed((): TPopSelectOption[] => {
+  return range(0, props.lastPage).map((num: number) => ({ label: `${num + 1}` }));
+});
+
+const shared
+  = "relative inline-flex items-center h-8 bg-primary text-sm text-primary hover:bg-sand-grey-15 focus:z-10 focus:outline-hidden focus-visible:bg-sand-grey-40 active:scale-[0.98]";
+
+const arrowClasses = computed(() => {
+  return props.noBorders
+    ? `${shared} px-2 rounded-lg border border-transparent focus-visible:border-true-blue`
+    : `${shared} px-2 border border-default focus-visible:border-true-blue`;
+});
+const triggerClasses = computed(() => {
+  return props.noBorders ? `${shared} px-3 rounded-lg` : `${shared} -ml-px px-3 border border-default focus-visible:border-true-blue`;
+});
+
+const onChange = (direction: -1 | 1) => {
+  let targetPage = props.currentPage + direction;
+  if (targetPage > props.lastPage) targetPage = 1;
+  if (targetPage < 1) targetPage = props.lastPage;
+  emit("change", targetPage);
+};
+
+const onPageSelect = (pageOption: TPopSelectOption) => {
+  emit("change", pageOption.label);
+};
+</script>
+
+<template>
+  <nav class="relative z-0 inline-flex">
+    <BTooltip text="Previous page" :delay="500">
+      <button rel="prev" aria-label="previous page" class="rounded-l-lg" :class="[arrowClasses]" @click="onChange(-1)">
+        <BIcon name="chevron-left" />
+      </button>
+    </BTooltip>
+    <BPopSelect same-width-as-trigger :value="currentPage" :options="pageOptions" @select="onPageSelect">
+      <template #trigger>
+        <BTooltip text="current / total" :delay="500">
+          <button :class="triggerClasses">
+            <span class="">{{ currentPage }}</span>
+            <span class="px-2">/</span>
+            <span class="">{{ lastPage }}</span>
+          </button>
+        </BTooltip>
+      </template>
+    </BPopSelect>
+    <BTooltip text="Next page" :delay="500">
+      <button rel="next" aria-label="next page" class="-ml-px rounded-r-lg" :class="[arrowClasses]" @click="onChange(1)">
+        <BIcon name="chevron-right" />
+      </button>
+    </BTooltip>
+  </nav>
+</template>

package/src/components/pagination/index.ts

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

package/src/components/pill/Pill.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { BIcon } from "../";
+
+const props = withDefaults(
+  defineProps<{
+    deletable?: boolean;
+    selected?: boolean;
+    stopPropagation?: boolean;
+  }>(),
+  {
+    deletable: false,
+    selected: false,
+    stopPropagation: false,
+  },
+);
+
+const emit = defineEmits(["click", "delete"]);
+
+const onClick = (event: Event) => {
+  if (props.stopPropagation) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  emit("click");
+};
+
+// TODO key.enter event stopPropagation
+</script>
+
+<template>
+  <button
+    class="h-7 px-2 inline-flex items-center space-x-1 rounded-lg focus:outline-hidden border border-transparent focus-visible:border-true-blue"
+    :class="{
+      'bg-light-blue text-white hover:bg-light-blue-darker': selected,
+      'bg-light-blue-40 text-light-blue hover:bg-light-blue-15 hover:text-light-blue-darker': !selected,
+    }"
+    @click="onClick"
+  >
+    <span class="truncate"><slot /></span>
+    <button
+      v-if="deletable"
+      class="w-4 h-4 flex items-center justify-center rounded-md focus:outline-hidden border border-transparent focus-visible:border-true-blue opacity-75 hover:opacity-100"
+      :class="{
+        'hover:bg-black/20 hover:bg-opacity-20': selected,
+        'hover:bg-light-blue hover:text-light-blue-15': !selected,
+      }"
+      @click.stop.prevent="emit('delete')"
+    >
+      <BIcon name="close" />
+    </button>
+  </button>
+</template>

package/src/components/pill/index.ts

@@ -0,0 +1,2 @@
+export * from "./pill-types";
+export { default as BPill } from "./Pill.vue";

package/src/components/pill/pill-types.ts

@@ -0,0 +1,2 @@
+export const LogicOperator = ["=", "!=", "<=", ">="] as const;
+export type TLogicOperator = (typeof LogicOperator)[number];

package/src/components/pop-confirm/PopConfirm.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { Placement } from "@floating-ui/dom";
+import type { TButtonType } from "../types";
+import { nextTick, ref } from "vue";
+import { BButton, BPopper, BPopperContent } from "../";
+import { useTrapFocus } from "../../";
+
+withDefaults(
+  defineProps<{
+    cancelLabel?: string;
+    cancelType?: TButtonType;
+    confirmLabel?: string;
+    confirmType?: TButtonType;
+    disabled?: boolean;
+    placement?: Placement;
+    tagName?: string;
+  }>(),
+  {
+    cancelLabel: "Cancel",
+    cancelType: "primary",
+    confirmLabel: "Confirm",
+    confirmType: "error",
+    disabled: false,
+    placement: "bottom",
+    tagName: "span",
+  },
+);
+
+const emit = defineEmits(["cancel", "close", "confirm"]);
+
+const popperRef = ref<typeof BPopper>();
+const contentRef = ref<HTMLDivElement>();
+const { trapFocus } = useTrapFocus(contentRef);
+
+const close = () => {
+  emit("close");
+  popperRef.value && popperRef.value.close();
+};
+
+const onOpen = () => nextTick(trapFocus);
+
+const onCancel = () => {
+  close();
+  emit("cancel");
+};
+
+const onConfirm = () => {
+  close();
+  emit("confirm");
+};
+</script>
+
+<template>
+  <BPopper ref="popperRef" trigger="click" :placement="placement" @open="onOpen" @close="close">
+    <template #default="slotProps">
+      <div class="inline-flex">
+        <slot name="reference" :visible="slotProps && slotProps.visible" />
+      </div>
+    </template>
+    <template #content>
+      <BPopperContent>
+        <div ref="contentRef" class="flex flex-col px-2 py-2 space-y-2">
+          <BButton bordered :type="cancelType" :label="cancelLabel" @click="onCancel" />
+          <BButton bordered :label="confirmLabel" :type="confirmType" @click="onConfirm" />
+        </div>
+      </BPopperContent>
+    </template>
+  </BPopper>
+</template>

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

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

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

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  To be implemented
+</template>

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, withDefaults } 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-light 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-light 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-light 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-light 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-light 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-light 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-light" />
+        </div>
+
+        <BScrollbar v-else-if="state === State.MATCH" ref="scrollbarRef">
+          <div class="max-h-60 bg-light">
+            <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-light">
+          <slot name="footer" />
+        </footer>
+      </BPopperContent>
+    </template>
+  </BPopper>
+</template>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts" generic="T extends TPopSelectOption">
+import type { TPopSelectOption, TPopSelectResultFilter } from "../types";
+import { BPill } 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">
+    <BPill
+      v-for="filter in filters"
+      :key="filter.name"
+      :selected="Boolean(selected && selected.name === filter.name)"
+      stop-propagation
+      @click="emit('change', filter)"
+    >
+      <span class="flex items-center space-x-1">
+        <span>{{ filter.name }}</span>
+        <span v-if="showCounts && filter.count" class="text-xs opacity-75">{{ `(${filter.count})` }}</span>
+      </span>
+    </BPill>
+  </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-blue-100 focus:bg-blue-100': !disabled && !selected,
+      'cursor-pointer text-light-blue font-medium hover:bg-blue-100 focus:bg-blue-100': selected,
+      'bg-blue-100': highlighted,
+      'bg-light': !highlighted,
+    }"
+    @click="onOptionClick"
+    @keydown.enter.prevent="onOptionClick"
+    @mouseover="emit('hover', label)"
+    @focus="emit('focus', label)"
+  >
+    <slot />
+  </div>
+</template>