@firstnoodle-ui/bui 0.0.28 → 0.0.32

package/src/components/text-viewer/TextViewer.vue

@@ -1,5 +0,0 @@
-<template>
-  <section class="ProseMirror">
-    <slot />
-  </section>
-</template>

package/src/components/text-viewer/index.ts

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

package/src/components/toggle-button/ToggleButton.vue

@@ -1,105 +0,0 @@
-<script setup lang="ts">
-import type { Placement } from "@floating-ui/dom";
-import type { TIcon } from "../types";
-import { computed, ref } from "vue";
-import { BIcon, BTooltip } from "../";
-
-const props = withDefaults(
-  defineProps<{
-    active: boolean;
-    disabled?: boolean;
-    icon?: TIcon;
-    label?: string;
-    focus?: boolean;
-    stopPropagation?: boolean;
-    tooltip?: string;
-    tooltipDelay?: number;
-    tooltipPlacement?: Placement;
-  }>(),
-  {
-    disabled: false,
-    focus: false,
-    loading: false,
-    notification: false,
-    stopPropagation: false,
-    tooltipDelay: 500,
-    tooltipPlacement: "top",
-  },
-);
-
-const emit = defineEmits(["click", "blur"]);
-
-const buttonRef = ref<HTMLButtonElement>();
-
-const buttonClasses = computed(() => {
-  const result = [];
-
-  if (props.icon && !props.label) {
-    result.push("w-6");
-  }
-
-  props.disabled ? result.push("opacity-75 cursor-not-allowed") : result.push("cursor-pointer");
-  result.push("rounded-md");
-
-  result.push(
-    ...(props.active
-      ? [
-          "bg-blue-100 hover:bg-blue-200 focus-visible:bg-blue-200 active:bg-blue-300",
-          "border border-action hover:border-action-hover focus-visible:border-action-hover active:border-action-active",
-          "text-action hover:text-action-hover focus-visible:text-action-hover active:text-action-active",
-          "dark:bg-blue-800/25 dark:hover:bg-blue-800/50 dark:focus-visible:bg-blue-800/50 dark:active:bg-blue-800/75",
-          "dark:border-action dark:hover:border-action-hover dark:focus-visible:border-action-hover dark:active:border-action-active",
-          "dark:text-action dark:hover:text-action-hover dark:focus-visible:text-action-hover dark:active:text-action-active",
-        ]
-      : [
-          "hover:bg-slate-100 focus-visible:bg-slate-100 active:bg-slate-200",
-          "border border-stone-300 hover:border-stone-400 focus-visible:border-stone-400 active:border-stone-500",
-          "text-slate-700 hover:text-slate-800 focus-visible:text-slate-800 active:text-slate-900",
-          "dark:hover:bg-neutral-700 dark:focus-visible:bg-neutral-700 dark:active:bg-neutral-600",
-          "dark:border-stone-700 dark:hover:border-stone-600 dark:focus-visible:border-stone-600 dark:active:border-stone-500",
-          "dark:text-slate-200 dark:hover:text-slate-100 dark:focus-visible:text-slate-100 dark:active:text-white",
-        ]
-    ),
-  );
-
-  return result.filter(i => i).join(" ");
-});
-
-const disabledStyle = computed(() => {
-  if (props.disabled) {
-    return { background: "hsl(0 0% 90%)" };
-  }
-  return {};
-});
-
-const onClick = (event: MouseEvent) => {
-  props.stopPropagation && event.stopPropagation();
-
-  if (!props.disabled) {
-    emit("click");
-  }
-};
-
-const focus = () => buttonRef.value!.focus();
-
-defineExpose({ focus });
-</script>
-
-<template>
-  <BTooltip v-if="tooltip" hover :text="tooltip" :delay="tooltipDelay" :placement="tooltipPlacement">
-    <button
-      ref="buttonRef"
-      class="z-0 relative inline-flex items-center justify-center gap-1 h-6 leading-none text-sm border focus:z-10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-black dark:focus-visible:outline-white"
-      :class="buttonClasses"
-      :disabled="disabled"
-      :style="disabledStyle"
-      @click="onClick"
-      @blur="emit('blur')"
-    >
-      <BIcon v-if="icon" :name="icon" />
-      <div v-if="label">
-        {{ label }}
-      </div>
-    </button>
-  </BTooltip>
-</template>

package/src/components/toggle-button/index.ts

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

package/src/components/tooltip/Tooltip.vue

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import type { Placement } from "@floating-ui/dom";
-import type { TPopperTrigger } from "../types";
-import { BPopper } from "../popper";
-
-withDefaults(
-  defineProps<{
-    bgColorClass?: string;
-    delay?: number;
-    forceShow?: boolean;
-    offsetMain?: number;
-    offsetCross?: number;
-    placement?: Placement;
-    text?: string;
-    textColorClass?: string;
-    trigger?: TPopperTrigger;
-    triggerFullWidth?: boolean;
-  }>(),
-  {
-    bgColorClass: "bg-black",
-    delay: 10,
-    forceShow: false,
-    offsetMain: 2,
-    offsetCross: 0,
-    placement: "top",
-    textColorClass: "text-white",
-    trigger: "hover",
-    triggerFullWidth: false,
-  },
-);
-</script>
-
-<template>
-  <BPopper
-    :trigger="trigger"
-    :open-delay="delay"
-    disable-click-outside
-    :offset-main="offsetMain"
-    :offset-cross="offsetCross"
-    :root-class="triggerFullWidth ? 'w-full flex' : 'inline-flex'"
-    :trigger-class="triggerFullWidth ? 'w-full flex' : 'inline-flex'"
-    :placement="placement"
-  >
-    <slot />
-    <template #content>
-      <div class="z-50 min-w-0 px-2 py-1 rounded-md text-sm shadow-sm-md" :class="[bgColorClass, textColorClass]">
-        <span v-if="text">
-          {{ text }}
-        </span>
-        <slot name="content" />
-      </div>
-    </template>
-  </BPopper>
-</template>

package/src/components/tooltip/index.ts

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

package/src/components/types.ts

@@ -1,232 +0,0 @@
-export const buttonVariants = ["fill", "outline", "outlineSubtle", "text", "textSubtle", "destructive"] as const;
-export type ButtonVariant = (typeof buttonVariants)[number];
-
-export const ButtonType = ["default", "primary", "error"] as const;
-export type TButtonType = (typeof ButtonType)[number];
-
-export const checkboxTypes = ["default", "circle"] as const;
-export type TCheckboxType = (typeof checkboxTypes)[number];
-
-export const Orientation = ["horizontal", "vertical"] as const;
-export type TButtonGroupOrientation = (typeof Orientation)[number];
-
-export const Alignments = ["start", "center", "end", "stretch"] as const;
-export type TAlignment = (typeof Alignments)[number];
-
-export const Justifications = [...Alignments, "between", "around", "evenly"] as const;
-export type TJustification = (typeof Justifications)[number];
-
-export type TColumnNavigationOptionBase = {
-  id?: string;
-  label: string;
-  value: string;
-  icon?: string;
-  textClass?: string;
-  disabled?: boolean;
-};
-
-export type TColumnNavigationOptionWithChildren = TColumnNavigationOptionBase & {
-  type?: "withChildren";
-  children?: TColumnNavigationOption[];
-};
-
-export type TColumnNavigationOptionWithDescription = TColumnNavigationOptionBase & {
-  type?: "withDescription";
-  description?: string;
-  component?: string;
-};
-
-export type TColumnNavigationOption = TColumnNavigationOptionWithChildren | TColumnNavigationOptionWithDescription;
-
-export type TColumnNavigationSelection = {
-  path: TColumnNavigationOption[];
-  isLeaf: boolean;
-};
-
-export const OverlayType = ["default", "blurred"] as const;
-export type TOverlayType = (typeof OverlayType)[number];
-
-export const PopperTrigger = ["click", "hover", "focus", "manual"] as const;
-export type TPopperTrigger = (typeof PopperTrigger)[number];
-
-export type TPopSelectOption = {
-  id?: string | number;
-  icon?: TIcon;
-  label: string;
-  disabled?: boolean;
-  meta?: unknown;
-};
-
-export type TPopSelectResultFilter<T> = {
-  name: string;
-  disabled: boolean;
-  execute: (record: T) => boolean;
-  count?: number;
-};
-
-export const statuses = ["Ok", "Not Ok", "Not Applicable"] as const;
-export type TStatusSelectStatus = (typeof statuses)[number];
-
-export type TTreeListNode = {
-  key: string;
-  value: unknown;
-  open: boolean;
-};
-
-export const icons = [
-  "admin",
-  "arrow-deviate",
-  "arrow-down-plus",
-  "arrow-down",
-  "arrow-from",
-  "arrow-left",
-  "arrow-move",
-  "arrow-right",
-  "arrow-sub",
-  "arrow-trend",
-  "arrow-up-plus",
-  "arrow-up",
-  "authority",
-  "beams",
-  "bell",
-  "bold",
-  "box",
-  "building",
-  "bullet-list",
-  "calendar",
-  "camera",
-  "categories",
-  "check-circled",
-  "check-outline",
-  "check",
-  "chevron-down",
-  "chevron-down-small",
-  "chevron-left-double",
-  "chevron-left",
-  "chevron-left-small",
-  "chevron-right-double",
-  "chevron-right",
-  "chevron-right-small",
-  "chevron-up",
-  "chevron-up-small",
-  "clock",
-  "close-outline",
-  "close",
-  "columns",
-  "conclusion",
-  "copy",
-  "crosshair",
-  "dash",
-  "dashboard",
-  "delete",
-  "delta",
-  "download",
-  "drag",
-  "drilldown",
-  "edit",
-  "envelope",
-  "error",
-  "export-document",
-  "filter",
-  "filters",
-  "flag",
-  "folder",
-  "frequency",
-  "fullscreen-off",
-  "fullscreen-on",
-  "graduate",
-  "hamburger",
-  "handshake",
-  "heading-1",
-  "heading-2",
-  "heading",
-  "home",
-  "id-card",
-  "id",
-  "indent-left",
-  "indent-right",
-  "information",
-  "italics",
-  "itenary",
-  "keyboard",
-  "lightning",
-  "link",
-  "list-collapse",
-  "list-expand",
-  "location",
-  "lock-locked",
-  "lock-unlocked",
-  "magnifying-glass",
-  "map",
-  "match-case",
-  "match-diacritics",
-  "match-full-word",
-  "megaphone",
-  "message",
-  "message-question",
-  "microscope",
-  "moon",
-  "new-document",
-  "news",
-  "numbered-list",
-  "open-link",
-  "options",
-  "page",
-  "panel-left-show",
-  "panel-left-hide",
-  "panel-right-show",
-  "panel-right-hide",
-  "paper-plane",
-  "paper",
-  "pdf",
-  "pen-and-paper",
-  "phase",
-  "photo",
-  "pie-chart",
-  "plus",
-  "point-left",
-  "point-up",
-  "popup",
-  "question",
-  "radio-tower",
-  "recycle",
-  "redo",
-  "refresh",
-  "route",
-  "rows",
-  "scope",
-  "settings",
-  "share",
-  "sign-in",
-  "sign-up",
-  "slideshow",
-  "sort-down",
-  "sort-up",
-  "sort",
-  "square-solid",
-  "star-solid",
-  "star",
-  "stop-watch",
-  "structure",
-  "sun",
-  "table",
-  "tag",
-  "team",
-  "telescope",
-  "text-select",
-  "trash",
-  "triangle-angle",
-  "triangle-side",
-  "underline",
-  "undo",
-  "user",
-  "venn",
-  "video",
-  "visibility-off-alt",
-  "visibility-off",
-  "visibility-on",
-  "warning",
-  "zoom",
-] as const;
-
-export type TIcon = (typeof icons)[number];

package/src/components/vertical-layout/RunningSection.vue

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import type { TSectionType } from "./types";
-import { computed, ref } from "vue";
-
-const props = withDefaults(
-  defineProps<{
-    border?: boolean;
-    heightClass?: string;
-    type?: TSectionType;
-  }>(),
-  {
-    border: false,
-    heightClass: "h-12",
-    type: "header",
-  },
-);
-
-const containerRef = ref<HTMLElement>();
-const borderPosition = props.type === "header" ? "border-b" : "border-t";
-
-const classes = computed(() => {
-  return [props.heightClass, props.border ? "border-default" : "border-transparent", props.border ? borderPosition : ""];
-});
-
-const heightStyle = computed(() => {
-  let height;
-
-  // if height is auto we have to use js to calculate and actual height in pixels
-  // otherwise the height can't be animated
-  if (props.heightClass === "h-auto") {
-    if (containerRef.value) {
-      height = 0;
-      for (const child of containerRef.value.children) {
-        height += (child as HTMLElement).offsetHeight;
-      }
-      height = `${height}px`;
-    }
-    return { height };
-  }
-  return {};
-});
-</script>
-
-<template>
-  <component
-    :is="type"
-    ref="containerRef"
-    class="flex-none w-full overflow-hidden transition-height duration-500 ease-in-out"
-    :class="classes"
-    :style="heightStyle"
-  >
-    <slot />
-  </component>
-</template>

package/src/components/vertical-layout/VerticalLayout.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { BFlexbox, BScrollbar } from "../";
-import RunningSection from "./RunningSection.vue";
-
-const props = withDefaults(
-  defineProps<{
-    borders?: boolean;
-    footerHeightClass?: string;
-    headerHeightClass?: string;
-    widthClass?: string;
-    windowFrame?: boolean;
-  }>(),
-  {
-    borders: false,
-    footerHeightClass: "h-content",
-    headerHeightClass: "h-content",
-    widthClass: "w-full",
-    windowFrame: false,
-  },
-);
-
-const classes = [props.widthClass, props.windowFrame ? "px-8 py-6 bg-light shadow-sm-xl rounded-lg" : ""];
-</script>
-
-<template>
-  <BFlexbox col align="stretch" justify="start" class="relative h-full overflow-x-hidden" :class="classes">
-    <RunningSection v-if="$slots.header" type="header" :border="borders" :height-class="headerHeightClass">
-      <slot name="header" />
-    </RunningSection>
-    <BScrollbar window-resize wrap-class="h-full">
-      <slot name="main" />
-    </BScrollbar>
-    <RunningSection v-if="$slots.footer" type="footer" :border="borders" :height-class="footerHeightClass">
-      <slot name="footer" />
-    </RunningSection>
-  </BFlexbox>
-</template>

package/src/components/vertical-layout/index.ts

@@ -1,3 +0,0 @@
-export { default as BRunningSection } from "./RunningSection.vue";
-export * from "./types";
-export { default as BVerticalLayout } from "./VerticalLayout.vue";

package/src/components/vertical-layout/types.ts

@@ -1,2 +0,0 @@
-export const SectionTypes = ["header", "footer"] as const;
-export type TSectionType = (typeof SectionTypes)[number];

package/src/components/window-frame/WindowFrame.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-// import { useTrapFocus } from "@/bui/composables";
-
-const windowRef = ref<HTMLDivElement>();
-// const { trapFocus } = useTrapFocus(windowRef);
-
-// defineExpose({
-//   trapFocus: () => {
-//     Boolean(windowRef.value) && windowRef.value!.focus();
-//     trapFocus();
-//   }
-// });
-</script>
-
-<template>
-  <div ref="windowRef" tabindex="0" class="w-full flex flex-col bg-primary shadow-xl rounded-xl focus:outline-hidden">
-    <slot />
-  </div>
-</template>

package/src/components/window-frame/index.ts

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

package/src/composables/index.ts

@@ -1,5 +0,0 @@
-export * from "./useClickOutside";
-export * from "./useEscapeKey";
-export * from "./useMounted";
-export * from "./useNextFrame";
-export * from "./useTrapFocus";

package/src/composables/useClickOutside.ts

@@ -1,48 +0,0 @@
-import { onBeforeUnmount, unref } from "vue";
-
-// eslint-disable-next-line ts/no-unsafe-function-type
-export function useClickOutside(handler: Function) {
-  const event = "pointerdown";
-  let listener: EventListenerOrEventListenerObject;
-
-  const enableClickOutside = (targets: HTMLElement[]): void => {
-    listener = (event: Event) => {
-      let elements: HTMLElement | HTMLElement[] = unref(targets);
-      if (!elements)
-        return;
-
-      if (!("length" in elements))
-        elements = [elements];
-
-      const hit = elements.some((el: HTMLElement) => {
-        return el === (event.target as HTMLElement) || event.composedPath().includes(el);
-      });
-
-      if (hit)
-        return;
-
-      handler(event);
-    };
-
-    window.addEventListener(event, listener);
-  };
-
-  const disableClickOutside = (): void => {
-    if (!listener)
-      return;
-    window.removeEventListener(event, listener);
-  };
-
-  const updateClickOutside = (targets: HTMLElement[]): void => {
-    disableClickOutside();
-    enableClickOutside(targets);
-  };
-
-  onBeforeUnmount(() => disableClickOutside());
-
-  return {
-    enableClickOutside,
-    disableClickOutside,
-    updateClickOutside,
-  };
-}

package/src/composables/useEscapeKey.ts

@@ -1,12 +0,0 @@
-import { onMounted, onUnmounted } from "vue";
-
-// eslint-disable-next-line ts/no-unsafe-function-type
-export function useEscapeKey(callback: Function) {
-  const onKeydown = (e: KeyboardEvent) => {
-    if (e.key === "Escape")
-      callback();
-  };
-
-  onMounted(() => window.addEventListener("keydown", onKeydown));
-  onUnmounted(() => window.removeEventListener("keydown", onKeydown));
-}

package/src/composables/useMounted.ts

@@ -1,7 +0,0 @@
-import { onMounted, ref } from "vue";
-
-export const useMounted = () => {
-  const mounted = ref(false);
-  onMounted(() => (mounted.value = true));
-  return { mounted };
-};

package/src/composables/useNextFrame.ts

@@ -1,10 +0,0 @@
-// double raf (RequestAnimationFrame) to avoid layout thrashing
-export const useNextFrame = () => {
-  return {
-    nextFrame: (callback: FrameRequestCallback) => {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(callback);
-      });
-    },
-  };
-};

package/src/composables/useTrapFocus.ts

@@ -1,61 +0,0 @@
-import { onUnmounted } from "vue";
-
-/**
- * TrapFocus keeps (loops) the focus inside an element (fx Modal or Dialog), so the user cannot focus on elements outside of it - using the tab key
- *
- * 'trapElement' is the vue ref to the HTML element that we want to trap focus (tabindex) inside
- */
-
-export const useTrapFocus = (trapElement: any, focusFirstElement: boolean = false) => {
-  // add all the elements inside modal which you want to make focusable
-  const focusableElements = "button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
-
-  let firstFocusableElement: HTMLElement;
-  let focusableContent: Element[];
-  let lastFocusableElement: HTMLElement;
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    const isTabPressed = e.key === "Tab";
-
-    if (!isTabPressed)
-      return;
-
-    if (e.shiftKey) {
-      if (firstFocusableElement && lastFocusableElement) {
-        if (document.activeElement === firstFocusableElement) {
-          lastFocusableElement!.focus();
-          e.preventDefault();
-        }
-      }
-    }
-    else {
-      if (firstFocusableElement && lastFocusableElement) {
-        if (document.activeElement === lastFocusableElement) {
-          firstFocusableElement!.focus();
-          e.preventDefault();
-        }
-      }
-    }
-  };
-
-  const trapFocus = () => {
-    if (!trapElement.value) {
-      console.warn("[useTrapFocus] trapElement is not present");
-      return;
-    }
-
-    firstFocusableElement = trapElement.value.querySelectorAll(focusableElements)[0] as HTMLElement;
-    focusableContent = Array.from(trapElement.value.querySelectorAll(focusableElements));
-    lastFocusableElement = focusableContent[focusableElements.length - 1] as HTMLElement;
-
-    document.addEventListener("keydown", handleKeyDown);
-
-    if (firstFocusableElement && focusFirstElement) {
-      firstFocusableElement.focus();
-    }
-  };
-
-  onUnmounted(() => document.removeEventListener("keydown", handleKeyDown));
-
-  return { trapFocus };
-};

package/src/index.ts

@@ -1,5 +0,0 @@
-import "./main.css";
-
-export * from "./components";
-export * from "./composables";
-export * from "./utils";