@firstnoodle-ui/bui 0.0.26 → 0.0.28

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

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

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

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

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

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

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

package/src/components/tooltip/Tooltip.vue

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

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

package/src/components/types.ts

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

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

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

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

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

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

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

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

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

package/src/composables/index.ts

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

package/src/composables/useClickOutside.ts

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

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

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

package/src/composables/useNextFrame.ts

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

package/src/composables/useTrapFocus.ts

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

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