@firstnoodle-ui/bui 0.0.13 → 0.0.14

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/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-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

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

package/src/components/types.ts

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

@@ -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";

package/src/main.css

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