@firstnoodle-ui/bui 0.0.13 → 0.0.14

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

package/src/components/popper/middleware.ts

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

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

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

package/src/components/scrollbar/Bar.vue

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

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

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