@firstnoodle-ui/bui 0.0.13

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-sm">
+    <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";

package/src/components/popper/middleware.ts

@@ -0,0 +1,19 @@
+import { size } from "@floating-ui/dom";
+
+export const sameWidthAsTriggerMiddleware = size({
+  apply({ rects, elements }) {
+    Object.assign(elements.floating.style, {
+      width: `${rects.reference.width}px`,
+    });
+  },
+});
+
+export const sameWidthAsElementMiddleware = (element: HTMLElement) => {
+  return size({
+    apply({ elements }) {
+      Object.assign(elements.floating.style, {
+        width: `${element.offsetWidth}px`,
+      });
+    },
+  });
+};

package/src/components/screen-overlay/ScreenOverlay.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { TOverlayType } from "../types";
+import { onBeforeMount, reactive, ref } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    show?: boolean;
+    type?: TOverlayType;
+  }>(),
+  {
+    show: false,
+    type: "default",
+  },
+);
+
+const emit = defineEmits(["click", "close"]);
+
+const classes = ref("");
+const styles = reactive({ backdropFilter: "" });
+
+onBeforeMount(() => {
+  if (props.type === "default") {
+    classes.value = "bg-black/25 dark:bg-black/50";
+    styles.backdropFilter = "";
+  }
+  else if (props.type === "blurred") {
+    classes.value = "bg-black/25";
+    styles.backdropFilter = "blur(3px)";
+  }
+});
+</script>
+
+<template>
+  <transition
+    enter-active-class="transform transition ease-in-out duration-200"
+    enter-from-class="opacity-0"
+    enter-to-class=""
+    leave-active-class="transform transition ease-in-out duration-500"
+    leave-class="translate-y-0 opacity-100"
+    leave-to-class="opacity-0"
+    @after-leave="emit('close')"
+  >
+    <div
+      v-show="show"
+      class="z-40 fixed w-screen h-screen top-0 left-0 flex items-start justify-center pointer-events-auto"
+      :class="classes"
+      :style="styles"
+      @mousedown.self="emit('click')"
+    >
+      <slot />
+    </div>
+  </transition>
+</template>

package/src/components/screen-overlay/index.ts

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

package/src/components/scrollbar/Bar.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { ThumbDragEvent } from "./types";
+import { ref } from "vue";
+import { horizontalProperties, verticalProperties } from "./enums";
+
+const props = defineProps({
+  vertical: Boolean,
+  size: String,
+  move: Number,
+});
+
+const emit = defineEmits(["update"]);
+
+const scrollbarRef = ref<HTMLDivElement>();
+const thumbRef = ref<HTMLDivElement>();
+const dragging = ref(false);
+const bar = props.vertical ? verticalProperties : horizontalProperties;
+const position = ref(0);
+
+const onDocumentMouseMove = (event: MouseEvent) => {
+  if (!dragging.value) return;
+
+  const prevPage = position.value;
+  if (!prevPage) return;
+
+  const rect = scrollbarRef.value!.getBoundingClientRect();
+  if (rect) {
+    const offset = ((rect[bar.direction as keyof DOMRect] as number || 0) - (event[bar.client as keyof MouseEvent] as number || 0)) * -1;
+    const thumbClickPosition = thumbRef.value && typeof thumbRef.value[bar.offset as keyof HTMLDivElement] === "number"
+      ? (thumbRef.value[bar.offset as keyof HTMLDivElement] as number) - prevPage
+      : 0;
+    const scrollbarOffset = scrollbarRef.value ? Number(scrollbarRef.value[bar.offset as keyof HTMLDivElement]) : 0;
+    const thumbPositionPercentage = scrollbarOffset ? ((offset - thumbClickPosition) * 100) / scrollbarOffset : 0;
+
+    emit("update", {
+      scrollReference: bar.scroll,
+      positionPercentage: thumbPositionPercentage,
+      scrollSize: bar.scrollSize,
+    } as unknown as ThumbDragEvent);
+  }
+};
+
+const onDocumentMouseUp = () => {
+  dragging.value = false;
+  position.value = 0;
+  document.removeEventListener("mousemove", onDocumentMouseMove);
+  document.onselectstart = null;
+};
+
+const startDrag = (event: MouseEvent) => {
+  event.stopImmediatePropagation();
+  dragging.value = true;
+  document.addEventListener("mousemove", onDocumentMouseMove);
+  document.addEventListener("mouseup", onDocumentMouseUp);
+  document.onselectstart = () => false;
+};
+
+const onThumbClick = (event: MouseEvent) => {
+  // prevent click event of right button
+  if (event.ctrlKey || event.button === 2) return;
+  startDrag(event);
+
+  if (event.currentTarget) {
+
+    const offset: number = (event.currentTarget as HTMLDivElement)[bar.offset as keyof HTMLDivElement] as number;
+    const axis: number = event[bar.client as keyof MouseEvent] as number;
+    const rect: DOMRect = (event.currentTarget as HTMLDivElement).getBoundingClientRect();
+    const side = rect[bar.direction as keyof DOMRect] as unknown as number;
+    position.value = offset - (axis - side);
+  }
+};
+
+const onTrackClick = (event: MouseEvent) => {
+  const rect = (event.target as HTMLDivElement).getBoundingClientRect();
+  if (rect) {
+    const rectDirection = rect[bar.direction as keyof DOMRect];
+    const eventClient = event[bar.client as keyof MouseEvent];
+    const offset = Math.abs((rectDirection ? Number(rectDirection) : 0) - (eventClient ? Number(eventClient) : 0));
+    const thumbHalf = thumbRef.value![bar.offset as keyof HTMLDivElement] as number / 2;
+    const scrollbarOffset = scrollbarRef.value ? Number(scrollbarRef.value[bar.offset as keyof HTMLDivElement]) : 0;
+    const thumbPositionPercentage = scrollbarOffset ? ((offset - thumbHalf) * 100) / scrollbarOffset : 0;
+
+    emit("update", {
+      scrollReference: bar.scroll,
+      positionPercentage: thumbPositionPercentage,
+      scrollSize: bar.scrollSize,
+    } as unknown as ThumbDragEvent);
+  }
+};
+
+const renderThumbStyle = () => {
+  const translate = `translate${bar.axis}(${props.move}%)`;
+  return {
+    [bar.size]: props.size,
+    transform: translate,
+    msTransform: translate,
+    webkitTransform: translate,
+  };
+};
+</script>
+
+<template>
+  <div ref="scrollbarRef" :class="`scrollbar__bar is-${bar.key}`" @click.stop.prevent @mousedown.stop.prevent="onTrackClick">
+    <div ref="thumbRef" :style="renderThumbStyle()" class="scrollbar__thumb" @click.stop.prevent @mousedown.stop.prevent="onThumbClick" />
+  </div>
+</template>

package/src/components/scrollbar/ScrollBottomLoader.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from "vue";
+import { BLoadSpinner } from "../";
+
+const emit = defineEmits(["intersect"]);
+const triggerRef = ref<HTMLDivElement>();
+const observer = ref<IntersectionObserver | null>(null);
+
+onMounted(() => {
+  observer.value = new IntersectionObserver(
+    ([e]) => e.isIntersecting && emit("intersect"),
+    { threshold: 0.01 },
+  );
+  observer.value.observe(triggerRef.value!);
+});
+
+onUnmounted(() => observer.value && observer.value.disconnect());
+</script>
+
+<template>
+  <div ref="triggerRef" class="w-full h-16 flex items-center justify-center bg-white">
+    <slot v-if="$slots.default" />
+    <BLoadSpinner v-else class="w-6 h-6 text-granite-grey" />
+  </div>
+</template>

package/src/components/scrollbar/Scrollbar.vue

@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import type { ScrollIntersectionEvent, ScrollTrigger, ThumbDragEvent } from "./types";
+import { nextTick, onBeforeUnmount, onMounted, reactive, ref } from "vue";
+import Bar from "./Bar.vue";
+import { scrollbarWidth } from "./scrollbarWidth.ts";
+import "./style.scss";
+
+const props = withDefaults(
+  defineProps<{
+    disableX?: boolean;
+    disableY?: boolean;
+    wrapClass?: string;
+    viewClass?: string;
+    viewHeightClass?: string;
+    noresize?: boolean;
+    show?: boolean;
+    tag?: string;
+    triggers?: ScrollTrigger[];
+    windowResize?: boolean;
+  }>(),
+  {
+    disableX: false,
+    disableY: false,
+    wrapClass: "",
+    viewClass: "h-full",
+    viewHeightClass: "h-full",
+    noresize: false,
+    show: false,
+    tag: "div",
+    windowResize: false,
+  },
+);
+
+const emit = defineEmits<{
+  intersect: [ScrollIntersectionEvent];
+  scroll: [value: number];
+  scrollXActive: [value: boolean];
+  scrollYActive: [value: boolean];
+}>();
+
+let mutationObserver: MutationObserver;
+
+const gutterWidth = ref(scrollbarWidth());
+const moveX = ref(0);
+const moveY = ref(0);
+const previousY = ref(0);
+const sizeHeight = ref("0");
+const sizeWidth = ref("0");
+const wrapStyle = reactive({
+  marginRight: "",
+  marginBottom: "",
+});
+const cachedSizePercentages = { height: 100, width: 100 };
+
+const wrapClasses = ["scrollbar__wrap"];
+!gutterWidth.value && wrapClasses.push("scrollbar__wrap--hidden-default");
+props.wrapClass && wrapClasses.push(props.wrapClass);
+
+const wrapRef = ref();
+const contentRef = ref();
+
+const onScroll = () => {
+  moveY.value = (wrapRef.value.scrollTop * 100) / wrapRef.value.clientHeight;
+  moveX.value = (wrapRef.value.scrollLeft * 100) / wrapRef.value.clientWidth;
+  emit("scroll", wrapRef.value.scrollTop);
+
+  const thumbBottomY = wrapRef.value.scrollTop + wrapRef.value.clientHeight;
+  const scrollBottom = wrapRef.value.scrollHeight;
+
+  if (previousY.value > 0 && wrapRef.value.scrollTop === 0) {
+    emit("intersect", { edge: "top", hit: true });
+  }
+  else if (previousY.value === 0 && wrapRef.value.scrollTop > 0) {
+    emit("intersect", { edge: "top", hit: false });
+  }
+  else if (previousY.value + wrapRef.value.clientHeight < scrollBottom && thumbBottomY === scrollBottom) {
+    emit("intersect", { edge: "bottom", hit: true });
+  }
+  else if (previousY.value + wrapRef.value.clientHeight === scrollBottom && thumbBottomY < scrollBottom) {
+    emit("intersect", { edge: "bottom", hit: false });
+  }
+
+  if (props.triggers) {
+    for (const trigger of props.triggers) {
+      if (previousY.value < trigger.px && wrapRef.value.scrollTop >= trigger.px) {
+        trigger.callback(trigger, "down");
+      }
+      else if (previousY.value > trigger.px && wrapRef.value.scrollTop <= trigger.px) {
+        trigger.callback(trigger, "up");
+      }
+    }
+  }
+
+  previousY.value = wrapRef.value.scrollTop;
+};
+
+const updateSizePercentages = () => {
+  return {
+    heightPercentage: (wrapRef.value.clientHeight * 100) / wrapRef.value.scrollHeight,
+    widthPercentage: (wrapRef.value.clientWidth * 100) / wrapRef.value.scrollWidth,
+  };
+};
+
+const update = async () => {
+  if (!wrapRef.value) return;
+
+  await nextTick();
+
+  const { heightPercentage, widthPercentage } = updateSizePercentages();
+
+  if (!heightPercentage && !widthPercentage) return;
+
+  if (!props.disableX) {
+    if (cachedSizePercentages.width === 100 && widthPercentage < 100) {
+      emit("scrollXActive", true);
+    }
+    else if (widthPercentage === 100 && cachedSizePercentages.width < 100) {
+      emit("scrollXActive", false);
+    }
+
+    if (widthPercentage === 100) {
+      wrapStyle.marginBottom = `0px`;
+    }
+    else {
+      if (gutterWidth.value) {
+        wrapStyle.marginBottom = `-${gutterWidth.value}px`;
+      }
+    }
+    cachedSizePercentages.width = widthPercentage;
+    sizeWidth.value = widthPercentage < 100 ? `${widthPercentage}%` : "";
+  }
+
+  if (!props.disableY) {
+    if (cachedSizePercentages.height === 100 && heightPercentage < 100) {
+      emit("scrollYActive", true);
+    }
+    else if (heightPercentage === 100 && cachedSizePercentages.height < 100) {
+      emit("scrollYActive", false);
+    }
+
+    if (heightPercentage === 100) {
+      wrapStyle.marginRight = `0px`;
+    }
+    else {
+      if (gutterWidth.value) {
+        wrapStyle.marginRight = `-${gutterWidth.value}px`;
+      }
+    }
+    cachedSizePercentages.height = heightPercentage;
+    sizeHeight.value = heightPercentage < 100 ? `${heightPercentage}%` : "";
+  }
+
+  onScroll();
+};
+
+onMounted(async () => {
+  await nextTick(update);
+
+  if (cachedSizePercentages.height === 100) {
+    emit("intersect", { edge: "top", hit: true });
+  }
+
+  props.windowResize && window.addEventListener("resize", update);
+  if (!props.noresize) {
+    mutationObserver = new MutationObserver(update);
+    mutationObserver.observe(contentRef.value, {
+      childList: true,
+      subtree: true,
+    });
+  }
+});
+
+onBeforeUnmount(() => {
+  !props.noresize && mutationObserver.disconnect();
+  props.windowResize && window.removeEventListener("resize", update);
+});
+
+const onBarUpdate = (event: ThumbDragEvent) => {
+  wrapRef.value[event.scrollReference] = (event.positionPercentage * wrapRef.value[event.scrollSize]) / 100;
+};
+
+const scrollToPercentage = (axis: "x" | "y", percentage: number) => {
+  if (axis === "x") {
+    wrapRef.value.scrollTo({ left: (wrapRef.value.scrollWidth * percentage) / 100, behavior: "smooth" });
+  }
+  else {
+    wrapRef.value.scrollTo({ top: (wrapRef.value.scrollHeight * percentage) / 100, behavior: "smooth" });
+  }
+  onScroll();
+};
+
+const jumpToPercentage = (axis: "x" | "y", percentage: number) => {
+  if (axis === "x") {
+    wrapRef.value.scrollLeft = (wrapRef.value.scrollWidth * percentage) / 100;
+  }
+  else {
+    wrapRef.value.scrollTop = (wrapRef.value.scrollHeight * percentage) / 100;
+  }
+  onScroll();
+};
+
+const reset = () => {
+  wrapRef.value.scrollTop = 0;
+  onScroll();
+};
+
+defineExpose({ handleScroll: onScroll, reset, jumpToPercentage, scrollToPercentage, update });
+</script>
+
+<template>
+  <main class="scrollbar" :class="[viewHeightClass, { show }]">
+    <div id="wrapRef" ref="wrapRef" :class="[wrapClasses]" :style="wrapStyle" @scroll="onScroll">
+      <component :is="props.tag" ref="contentRef" class="scrollbar__view" :class="[viewClass]">
+        <slot />
+      </component>
+    </div>
+    <Bar v-if="!disableX" :move="moveX" :size="sizeWidth" @update="onBarUpdate" />
+    <Bar v-if="!disableY" :move="moveY" :size="sizeHeight" vertical @update="onBarUpdate" />
+  </main>
+</template>