@firstnoodle-ui/bui 0.0.13 → 0.0.14

package/src/components/pagination/Pagination.vue

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

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

package/src/components/pill/Pill.vue

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

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

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

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

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

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

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

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

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

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, 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

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

@@ -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-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>