@firstnoodle-ui/bui 0.0.27 → 0.0.28

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,219 @@
+<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 "./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(6);
+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 scroll-hidden" :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>

package/src/components/scrollbar/enums.ts

@@ -0,0 +1,23 @@
+import type { BarProperties } from "./types";
+
+export const horizontalProperties: BarProperties = {
+  offset: "offsetWidth",
+  scroll: "scrollLeft",
+  scrollSize: "scrollWidth",
+  size: "width",
+  key: "horizontal",
+  axis: "X",
+  client: "clientX",
+  direction: "left",
+};
+
+export const verticalProperties: BarProperties = {
+  offset: "offsetHeight",
+  scroll: "scrollTop",
+  scrollSize: "scrollHeight",
+  size: "height",
+  key: "vertical",
+  axis: "Y",
+  client: "clientY",
+  direction: "top",
+};

package/src/components/scrollbar/index.ts

@@ -0,0 +1,3 @@
+export { default as BScrollbar } from "./Scrollbar.vue";
+export { default as BScrollBottomLoader } from "./ScrollBottomLoader.vue";
+export * from "./types";

package/src/components/scrollbar/style.scss

@@ -0,0 +1,77 @@
+.scrollbar {
+  overflow: hidden;
+  position: relative;
+
+  &:hover,
+  &:active,
+  &:focus {
+    > .scrollbar__bar {
+      opacity: 1;
+      transition: opacity 340ms ease-out;
+    }
+  }
+
+  &__wrap {
+    overflow: auto;
+    height: 100%;
+
+    &.hidden-default {
+      scrollbar-width: none;
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
+    }
+  }
+  // using css to set the width so negative margin can be set in Scrollbar.vue (gutterWidth)
+  &__wrap::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &__view {
+    height: 100%;
+  }
+
+  &__thumb {
+    position: relative;
+    display: block;
+    width: 0;
+    height: 0;
+    cursor: pointer;
+    border-radius: inherit;
+    background-color: #909399; // opacity 0.3
+    transition: .3s background-color;
+
+    &:hover {
+      background-color: #909399; // opacity 0.5
+    }
+  }
+
+  &__bar {
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    z-index: 1;
+    border-radius: 4px;
+    opacity: 0;
+    transition: opacity 120ms ease-out;
+
+    &.is-vertical {
+      width: 6px;
+      top: 2px;
+
+      > div {
+        width: 100%;
+      }
+    }
+
+    &.is-horizontal {
+      height: 6px;
+      left: 2px;
+
+      > div {
+        height: 100%;
+      }
+    }
+  }
+}

package/src/components/scrollbar/types.ts

@@ -0,0 +1,32 @@
+export type BarProperties = {
+  offset: string;
+  scroll: string;
+  scrollSize: string;
+  size: string;
+  key: string;
+  axis: string;
+  client: string;
+  direction: string;
+};
+
+export type ThumbDragEvent = {
+  scrollReference: string;
+  positionPercentage: number;
+  scrollSize: number;
+};
+
+export const egdes = ["top", "bottom", "left", "right"] as const;
+export type ScrollEdge = (typeof egdes)[number];
+
+export type ScrollIntersectionEvent = {
+  edge: ScrollEdge;
+  hit: boolean;
+};
+
+export const scrollDirections = ["up", "down", "left", "right"] as const;
+export type ScrollDirection = (typeof scrollDirections)[number];
+
+export type ScrollTrigger = {
+  px: number;
+  callback: (trigger: ScrollTrigger, direction: ScrollDirection) => void;
+};