@firstnoodle-ui/bui 0.0.13

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/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-light",
+    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,221 @@
+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 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 directions = ["up", "down", "left", "right"] as const;
+export type TScrollDirection = (typeof directions)[number];
+
+export type TScrollTrigger = {
+  px: number;
+  callback: (trigger: TScrollTrigger, direction: TScrollDirection) => void;
+};
+
+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-left-double",
+  "chevron-left",
+  "chevron-right-double",
+  "chevron-right",
+  "chevron-up",
+  "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",
+  "megaphone",
+  "message",
+  "microscope",
+  "moon",
+  "new-document",
+  "news",
+  "numbered-list",
+  "open-link",
+  "options",
+  "page",
+  "paper-plane",
+  "paper",
+  "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",
+  "sort-down",
+  "sort-up",
+  "sort",
+  "square-solid",
+  "star-solid",
+  "star",
+  "stop-watch",
+  "structure",
+  "sun",
+  "table",
+  "tag",
+  "team",
+  "telescope",
+  "trash",
+  "triangle-angle",
+  "triangle-side",
+  "underline",
+  "undo",
+  "user",
+  "venn",
+  "video",
+  "visibility-off-alt",
+  "visibility-off",
+  "visibility-on",
+  "warning",
+] 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";

package/src/main.css

@@ -0,0 +1,116 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+body {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  display: flex;
+  height: 100vh;
+}
+
+@layer base {
+  h1 {
+    @apply text-2xl font-bold;
+  }
+  h2 {
+    @apply text-xl font-bold;
+  }
+  h3 {
+    @apply text-lg font-bold;
+  }
+  h4 {
+    @apply text-base font-bold;
+  }
+
+  /* Shared in both themes */
+  :root {
+    --color-action: var(--color-blue-500);
+    --color-action-hover: var(--color-blue-600);
+    --color-action-active: var(--color-blue-700);
+    --color-destructive: var(--color-red-500);
+    --color-destructive-hover: var(--color-red-600);
+    --color-destructive-active: var(--color-red-700);
+  }
+
+  [data-theme="light"] {
+    --color-bg-primary: var(--color-white);
+    --color-bg-secondary: var(--color-stone-100);
+    --color-bg-tertiary: var(--color-stone-200);
+
+    --color-border-weak: var(--color-stone-200);
+    --color-border-default: var(--color-stone-300);
+    --color-border-strong: var(--color-stone-400);
+
+    --color-text-primary: var(--color-slate-900);
+    --color-text-secondary: var(--color-slate-700);
+    --color-text-tertiary: var(--color-slate-500);
+    --color-text-muted: var(--color-slate-300);
+  }
+  [data-theme="dark"] {
+    --color-bg-primary: #212121;
+    --color-bg-secondary: var(--color-neutral-800);
+    --color-bg-tertiary: #333333;
+
+    --color-border-weak: var(--color-neutral-800);
+    --color-border-default: var(--color-neutral-700);
+    --color-border-strong: var(--color-neutral-600);
+
+    --color-text-primary: var(--color-stone-100);
+    --color-text-secondary: var(--color-stone-300);
+    --color-text-tertiary: var(--color-stone-400);
+    --color-text-muted: var(--color-stone-500);
+  }
+}
+
+/* @utility content-auto {
+  content-visibility: auto;
+} */
+
+@utility bg-primary {
+  background-color: var(--color-bg-primary);
+}
+@utility bg-secondary {
+  background-color: var(--color-bg-secondary);
+}
+@utility bg-tertiary {
+  background-color: var(--color-bg-tertiary);
+}
+@utility bg-action {
+  background-color: var(--color-action);
+}
+
+@utility border-weak {
+  border-color: var(--color-border-weak);
+}
+@utility border-default {
+  border-color: var(--color-border-default);
+}
+@utility border-strong {
+  border-color: var(--color-border-strong);
+}
+@utility border-action {
+  border-color: var(--color-action);
+}
+
+@utility text-primary {
+  color: var(--color-text-primary);
+}
+@utility text-secondary {
+  color: var(--color-text-secondary);
+}
+@utility text-tertiary {
+  color: var(--color-text-tertiary);
+}
+@utility text-muted {
+  color: var(--color-text-muted);
+}