@firstnoodle-ui/bui 0.0.28 → 0.0.29

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,219 +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 "./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

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

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

package/src/components/scrollbar/style.scss

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

@@ -1,32 +0,0 @@
-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;
-};