@firstnoodle-ui/bui 0.0.13 → 0.0.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firstnoodle-ui/bui",
   "type": "module",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "private": false,
   "repository": {
     "type": "git",
@@ -11,10 +11,17 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"
+    },
+    "./bui.css": {
+      "default": "./dist/bui.css"
     }
   },
   "main": "./dist/index.mjs",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "dist/bui.css"
+  ],
   "peerDependencies": {
     "tailwindcss": "^4.1.1",
     "vue": "^3.5.13"
@@ -60,6 +67,6 @@
     "build": "vite build",
     "typecheck": "vue-tsc -p tsconfig.app.json --noEmit",
     "watch": "vite build --watch",
-    "release:publish": "pnpm publish --access public --otp=533339 --no-git-checks"
+    "release:publish": "pnpm publish --access public --otp=553919 --no-git-checks"
   }
 }

package/dist/components/scrollbar/scrollbarWidth.d.ts

@@ -1 +0,0 @@
-export declare const scrollbarWidth: () => number;

package/src/components/application-wrapper/ApplicationWrapper.vue

@@ -1,8 +0,0 @@
-<template>
-  <main class="fixed top-0 left-0 w-screen h-screen overflow-hidden text-primary">
-    <slot />
-    <div id="modals" class="z-10 fixed w-screen h-screen top-0 left-0 pointer-events-none" />
-    <div id="notifications" class="z-10 fixed w-screen h-screen top-0 left-0 pointer-events-none flex items-end justify-center p-12" />
-    <div id="poppers" class="z-10 fixed w-screen h-screen top-0 left-0 pointer-events-none" />
-  </main>
-</template>

package/src/components/application-wrapper/index.ts

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

package/src/components/aside-section-label/AsideSectionLabel.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-defineProps<{ label: string }>();
-</script>
-
-<template>
-  <section class="w-full space-y-4">
-    <div class="w-full h-12 flex items-center">
-      <p class="flex-none pr-2 text-xs leading-none font-medium text-secondary">
-        {{ label }}
-      </p>
-      <div class="flex-1 h-full">
-        <div class="w-full border-b border-default" style="height: 54%" />
-      </div>
-    </div>
-  </section>
-</template>

package/src/components/aside-section-label/index.ts

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

package/src/components/button/Button.vue

@@ -1,245 +0,0 @@
-<script setup lang="ts">
-import type { Placement } from "@floating-ui/dom";
-import type { ButtonVariant, TIcon } from "../types";
-import { computed, ref } from "vue";
-import { BIcon, BLoadSpinner, BTooltip } from "../";
-import NotificationBadge from "./NotificationBadge.vue";
-
-const props = withDefaults(
-  defineProps<{
-    variant?: ButtonVariant;
-    classes?: string;
-    disabled?: boolean;
-    fullwidth?: boolean;
-    href?: string;
-    icon?: TIcon;
-    iconAfter?: TIcon;
-    label?: string;
-    linkTarget?: string;
-    loading?: boolean;
-    mailto?: string;
-    notification?: boolean;
-    rounded?: boolean;
-    routerLinkTo?: string | { path: string } | { name: string };
-    small?: boolean;
-    focus?: boolean;
-    stopPropagation?: boolean;
-    tooltip?: string;
-    tooltipDelay?: number;
-    tooltipPlacement?: Placement;
-  }>(),
-  {
-    variant: "fill",
-    disabled: false,
-    focus: false,
-    fullwidth: false,
-    loading: false,
-    notification: false,
-    rounded: false,
-    small: false,
-    stopPropagation: false,
-    tooltipDelay: 500,
-    tooltipPlacement: "top",
-  },
-);
-
-const emit = defineEmits(["click", "blur"]);
-
-const component = ref<string>(props.routerLinkTo ? "router-link" : "button");
-const buttonRef = ref<HTMLButtonElement>();
-
-const loadSpinnerClass = computed(() => {
-  const classes = ["w-4 h-4"];
-  if (props.variant === "fill" || props.variant === "destructive") {
-    classes.push("text-light");
-  }
-  else if (props.variant === "outline" || props.variant === "text") {
-    classes.push("text-blue-500");
-  }
-  else if (props.variant === "outlineSubtle" || props.variant === "textSubtle") {
-    classes.push("text-slate-700 dark:text-slate-200");
-  }
-  return classes.join(" ");
-});
-
-const buttonClasses = computed(() => {
-  const result = [];
-
-  // Set padding x.
-  // Add extra if rounded and there is a label
-  props.rounded && props.label
-    ? result.push(props.small ? "px-2" : "px-3")
-    : result.push(props.loading && props.icon && !props.label ? "px-0" : "px-2");
-
-  props.small ? result.push("h-6") : result.push("h-8");
-
-  if (props.icon && !props.label) {
-    props.small ? result.push("w-6") : result.push("w-8");
-  }
-
-  props.disabled ? result.push("opacity-75 cursor-not-allowed") : result.push("cursor-pointer");
-  props.fullwidth && result.push("w-full");
-
-  if (props.rounded) result.push("rounded-full");
-  else result.push("rounded-lg");
-
-  switch (props.variant) {
-    case "fill":
-      result.push(
-        ...(props.focus
-          ? [""]
-          : [
-              "bg-blue-500 hover:bg-blue-600 focus-visible:bg-blue-600 active:bg-blue-700",
-              "border border-blue-500 hover:border-blue-600 focus-visible:border-blue-600 active:border-blue-700",
-              "text-white focus-visible:outline",
-              "dark:bg-blue-700 dark:hover:bg-blue-600 focus-visible:bg-blue-600 dark:active:bg-blue-500",
-              "border dark:border-blue-700 dark:hover:border-blue-600 focus-visible:border-blue-600 dark:active:border-blue-500",
-            ]
-        ),
-      );
-      break;
-    case "outline":
-      result.push(
-        ...(props.focus
-          ? [""]
-          : [
-              "hover:bg-blue-100 focus-visible:bg-blue-100 active:bg-blue-200",
-              "border border-blue-500 hover:border-blue-600 focus-visible:border-blue-600 active:border-blue-700",
-              "text-blue-500 hover:text-blue-600 focus-visible:text-blue-600 active:text-blue-700",
-              "dark:hover:bg-blue-900 dark:focus-visible:bg-blue-900 dark:active:bg-blue-700",
-              "dark:border-blue-500 dark:hover:border-blue-500 dark:focus-visible:border-blue-500 dark:active:border-blue-600",
-              "dark:text-blue-500 dark:hover:text-blue-100 focus-visible:text-blue-100 dark:active:text-white",
-            ]
-        ),
-      );
-      break;
-    case "outlineSubtle":
-      result.push(
-        ...(props.focus
-          ? [""]
-          : [
-              "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 focus-visible:bg-neutral-700 dark:active:bg-neutral-600",
-              "dark:border-stone-700 dark:hover:border-stone-600 focus-visible:border-stone-600 dark:active:border-stone-500",
-              "dark:text-slate-200 dark:hover:text-slate-100 focus-visible:text-slate-100 dark:active:text-white",
-            ]
-        ),
-      );
-      break;
-    case "text":
-      result.push(
-        ...(props.focus
-          ? [""]
-          : [
-              "hover:bg-blue-100 focus-visible:bg-blue-100 active:bg-blue-200",
-              "border-none",
-              "text-blue-500 hover:text-blue-600 focus-visible:text-blue-600 active:text-blue-700",
-              "dark:hover:bg-blue-900 dark:focus-visible:bg-blue-900 dark:active:bg-blue-700",
-              "dark:text-blue-500 dark:hover:text-blue-100 focus-visible:text-blue-100 dark:active:text-white",
-            ]
-        ),
-      );
-      break;
-    case "textSubtle":
-      result.push(
-        ...(props.focus
-          ? ["bg-slate-200 text-slate-900 dark:bg-neutral-600 dark:text-white"]
-          : [
-              "hover:bg-slate-100 focus-visible:bg-slate-100 active:bg-slate-200",
-              "border-none",
-              "text-slate-700 hover:text-slate-800 focus-visible:text-slate-800 active:text-slate-900",
-              "dark:hover:bg-neutral-700 focus-visible:bg-neutral-700 dark:active:bg-neutral-600",
-              "dark:text-slate-200 dark:hover:text-slate-100 focus-visible:text-slate-100 dark:active:text-white",
-            ]
-        ),
-      );
-      break;
-    case "destructive":
-      result.push(
-        ...(props.focus
-          ? ["bg-red-800 border-red-800 text-white"]
-          : [
-              "bg-red-600 hover:bg-red-700 focus-visible:bg-red-700 active:bg-red-800",
-              "border border-red-600 hover:border-red-700 focus-visible:border-red-700 active:border-red-800",
-              "text-white",
-            ]
-        ),
-      );
-      break;
-  }
-
-  if (props.classes) result.push(props.classes);
-
-  return result.filter(i => i).join(" ");
-});
-
-const disabledStyle = computed(() => {
-  if (props.disabled) {
-    return props.variant === "fill" || props.variant === "destructive" ? { filter: "grayscale(50%)" } : { background: "hsl(0 0% 90%)" };
-  }
-  return {};
-});
-
-const onClick = (event: MouseEvent) => {
-  props.stopPropagation && event.stopPropagation();
-
-  if (!props.disabled && !props.loading) {
-    if (props.href) {
-      window.open(props.href, "_blank");
-    }
-    if (props.mailto) window.open(`mailto:${props.mailto}`);
-    emit("click");
-  }
-};
-
-const focus = () => buttonRef.value!.focus();
-
-defineExpose({ focus });
-</script>
-
-<template>
-  <BTooltip v-if="tooltip" hover :text="tooltip" :delay="tooltipDelay" :placement="tooltipPlacement" :trigger-full-width="fullwidth">
-    <component
-      :is="component"
-      ref="buttonRef"
-      :to="routerLinkTo"
-      class="z-0 relative inline-flex items-center justify-center space-x-1 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 || loading"
-      :style="disabledStyle"
-      @click="onClick"
-      @blur="emit('blur')"
-    >
-      <BLoadSpinner v-if="loading" :class="loadSpinnerClass" />
-      <BIcon v-else-if="icon" :name="icon" />
-      <div v-if="label">
-        {{ label }}
-      </div>
-      <BIcon v-if="iconAfter" :name="iconAfter" class="opacity-75" />
-      <NotificationBadge v-if="notification" :inside="variant === 'text' || variant === 'textSubtle'" />
-    </component>
-  </BTooltip>
-  <component
-    :is="component"
-    v-else
-    ref="buttonRef"
-    :to="routerLinkTo"
-    :target="props.linkTarget"
-    class="z-0 relative inline-flex items-center justify-center space-x-1 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 || loading"
-    :style="disabledStyle"
-    @click="onClick"
-    @blur="emit('blur')"
-  >
-    <BLoadSpinner v-if="loading" :class="loadSpinnerClass" />
-    <BIcon v-else-if="icon" :name="icon" />
-    <div v-if="label">
-      {{ label }}
-    </div>
-    <BIcon v-if="iconAfter" :name="iconAfter" />
-    <NotificationBadge v-if="notification" :inside="variant === 'text' || variant === 'textSubtle'" />
-  </component>
-</template>

package/src/components/button/NotificationBadge.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-defineProps<{ inside?: boolean }>();
-</script>
-
-<template>
-  <div
-    class="absolute"
-    :style="{
-      top: inside ? '0.15em' : '-0.3em',
-      right: inside ? '0.15em' : '-0.3em',
-    }"
-  >
-    <div class="w-3 h-3 bg-orange-500 rounded-full border border-white" />
-  </div>
-</template>

package/src/components/button/index.ts

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

package/src/components/button-group/ButtonGroup.vue

@@ -1,97 +0,0 @@
-<script setup lang="ts">
-import type { TButtonGroupOrientation } from "../types";
-import { onMounted, provide, ref } from "vue";
-
-const props = withDefaults(
-  defineProps<{
-    direction?: TButtonGroupOrientation;
-    fullwidth?: boolean;
-  }>(),
-  {
-    direction: "horizontal",
-    fullwidth: false,
-  },
-);
-
-const classes = ref<string>("");
-const buttonGroupRef = ref<HTMLDivElement>();
-
-provide("childOfButtonGroup", true);
-
-/**
- * We need to update (reapply) the classes whenever a button in the group is clicked,
- * as its classes from within the button component might be updated and thus the classes applied here will be overwritten
- */
-const update = () => {
-  const result = [];
-
-  props.fullwidth ? result.push("flex w-full") : result.push("inline-flex");
-
-  if (props.direction === "vertical") {
-    result.push("flex-col items-stretch");
-  }
-  else {
-    result.push("items-center");
-  }
-
-  classes.value = result.join(" ");
-
-  // add classes to immediate children of button group
-  // the buttons inside the group might be wrapped in other elements if tooltip or popper is used
-  if (buttonGroupRef.value) {
-    Array.from(buttonGroupRef.value.children).forEach((child: Element, index: number) => {
-      if (props.direction === "vertical") {
-        child.classList.add("-mt-px");
-        child.classList.add("first:mt-0");
-
-        if (index === 0) {
-          if (child.nodeName === "BUTTON") {
-            child.classList.add("rounded-t-md");
-          }
-          else {
-            child.querySelector("button")?.classList.add("rounded-t-md");
-          }
-        }
-        else if (index === buttonGroupRef.value!.children.length - 1) {
-          if (child.nodeName === "BUTTON") {
-            child.classList.add("rounded-b-md");
-          }
-          else {
-            child.querySelector("button")?.classList.add("rounded-b-md");
-          }
-        }
-      }
-      else {
-        child.classList.add("-ml-px");
-        child.classList.add("first:ml-0");
-
-        // TODO: if child is button, do not query for it
-        if (index === 0) {
-          if (child.nodeName === "BUTTON") {
-            child.classList.add("rounded-l-md");
-          }
-          else {
-            child.querySelector("button")?.classList.add("rounded-l-md");
-          }
-        }
-        else if (index === buttonGroupRef.value!.children.length - 1) {
-          if (child.nodeName === "BUTTON") {
-            child.classList.add("rounded-r-md");
-          }
-          else {
-            child.querySelector("button")?.classList.add("rounded-r-md");
-          }
-        }
-      }
-    });
-  }
-};
-
-onMounted(update);
-</script>
-
-<template>
-  <div ref="buttonGroupRef" :class="classes" @click.stop.prevent="update">
-    <slot />
-  </div>
-</template>

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

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

package/src/components/checkbox/Checkbox.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import CircleIndicator from "./CircleIndicator.vue";
-import DefaultIndicator from "./DefaultIndicator.vue";
-
-withDefaults(
-  defineProps<{
-    button?: boolean;
-    label?: string;
-    type?: "default" | "circle";
-    value?: number;
-    disabled?: boolean;
-  }>(),
-  {
-    button: false,
-    type: "default",
-    value: 0,
-    disabled: false,
-  },
-);
-
-const emit = defineEmits(["click"]);
-</script>
-
-<template>
-  <div
-    class="items-center space-x-2"
-    :class="{
-      'flex': !button,
-      'inline-flex border rounded-md h-8 px-3': button,
-      'border-action': value && !disabled,
-      'border-default': !value && !disabled,
-      'border-subtle cursor-default': disabled,
-      'cursor-pointer': !disabled,
-    }"
-    @click.stop.prevent="!disabled && emit('click')"
-  >
-    <DefaultIndicator v-if="type === 'default'" :value="value" :disabled="disabled" />
-    <CircleIndicator v-else :value="value" :disabled="disabled" />
-    <span
-      v-if="label"
-      class="block text-sm leading-tight select-none"
-      :class="{
-        'text-action': button && value,
-        'text-secondary': button && !value && !disabled,
-        'hover:underline': !button && !disabled,
-        'text-tertiary': disabled,
-      }"
-    >
-      {{ label }}
-    </span>
-  </div>
-</template>

package/src/components/checkbox/CircleIndicator.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import { BIcon } from "../";
-
-const { value, disabled } = defineProps<{ value: number; disabled: boolean }>();
-
-const icon = computed(() => {
-  if (value) {
-    return value === 1 ? "check" : "dash";
-  }
-  return null;
-});
-</script>
-
-<template>
-  <button
-    class="group inline-flex items-center justify-center w-6 h-6 rounded-full border focus:outline-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-black dark:focus-visible:outline-white"
-    :class="{
-      'border-action bg-action text-white': !disabled && value,
-      'border-strong bg-tertiary text-white cursor-default': disabled && value,
-      'border-default bg-secondary hover:bg-secondary cursor-pointer': disabled && !value,
-      'border-default bg-primary hover:bg-amber-300 cursor-pointer': !disabled && !value,
-    }"
-  >
-    <BIcon v-if="icon" :name="icon" class="text-white group-hover:text-muted" />
-  </button>
-</template>

package/src/components/checkbox/DefaultIndicator.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-defineProps<{ value: number; disabled: boolean }>();
-</script>
-
-<template>
-  <button
-    class="flex items-center justify-center w-4 h-4 border rounded focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-black dark:focus-visible:outline-white"
-    :class="{
-      'border-action bg-action': value && !disabled,
-      'bg-primary border-default': !value && !disabled,
-      'border-default bg-secondary': disabled && value,
-      'border-subtle bg-tertiary': disabled && !value,
-      'cursor-default': disabled,
-      'hover:border-action focus:border-actionLightActive focus:outline-hidden': !disabled,
-    }"
-  >
-    <svg v-if="value === 1" width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M8.41166 0.5L10 2.0417L4.01353 7.5L0 3.57411L1.60557 2.04932L4.02897 4.39988L8.41166 0.5Z" fill="white" />
-    </svg>
-    <div v-if="value === 2" class="w-2 bg-primary" style="height: 2px" />
-  </button>
-</template>

package/src/components/checkbox/index.ts

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

package/src/components/collapse/Collapse.vue

@@ -1,120 +0,0 @@
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
-import { BIcon } from "../";
-
-const props = withDefaults(
-  defineProps<{
-    alignment?: "left" | "right";
-    borderClassOpen?: string;
-    borderClassClosed?: string;
-    headerBgClass?: string;
-    id?: string | number;
-    open?: boolean;
-    sticky?: boolean;
-  }>(),
-  {
-    alignment: "right",
-    borderClassOpen: "border-strong",
-    borderClassClosed: "border-default",
-    headerBgClass: "bg-primary",
-    id: "",
-    open: false,
-    sticky: false,
-  },
-);
-
-const emit = defineEmits(["toggle"]);
-
-const buttonRef = ref<HTMLButtonElement>();
-const headerRef = ref<HTMLHeadElement>();
-const isSticky = ref(false);
-
-const styles = computed(() => {
-  return isSticky.value
-    ? {
-        top: "-1px",
-        paddingTop: "1px",
-      }
-    : {};
-});
-
-watch(
-  () => props.open,
-  (newValue) => {
-    if (!newValue) isSticky.value = false;
-  },
-);
-
-watch(isSticky, (newValue) => {
-  if (newValue) buttonRef.value!.blur();
-});
-
-const observer = ref<IntersectionObserver | null>(null);
-onMounted(() => {
-  if (props.sticky) {
-    observer.value = new IntersectionObserver(
-      ([e]) => {
-        if (props.open) {
-          isSticky.value = e.intersectionRatio < 1;
-        }
-      },
-      {
-        threshold: [1],
-      },
-    );
-
-    observer.value.observe(headerRef.value!);
-  }
-});
-onBeforeUnmount(() => {
-  if (observer.value) {
-    observer.value.disconnect();
-  }
-});
-</script>
-
-<template>
-  <section class="w-full">
-    <header
-      ref="headerRef"
-      class="w-full border-b"
-      :style="styles"
-      :class="[
-        {
-          [props.borderClassOpen]: open,
-          [props.borderClassClosed]: !open,
-          'shadow-sm-xs border-brand': isSticky,
-          'sticky z-10': isSticky,
-          'relative': !isSticky,
-        },
-        headerBgClass,
-      ]"
-    >
-      <div class="flex items-center w-full h-10">
-        <div v-if="alignment === 'left'" class="relative flex-1 min-w-0 flex items-center text-sm">
-          <slot name="header" :sticky="isSticky" />
-        </div>
-        <div class="flex-none w-8 h-8 flex items-center justify-center">
-          <button
-            v-if="$slots.content"
-            ref="buttonRef"
-            class="w-6 h-6 flex items-center justify-center rounded-lg hover:bg-black/10 focus:outline-hidden focus-visible:bg-black/10"
-            @click="emit('toggle', id)"
-          >
-            <BIcon
-              :name="alignment === 'right' ? 'chevron-right' : 'chevron-up'"
-              class="transform transition-all duration-100"
-              :class="{ [alignment === 'right' ? 'rotate-90' : 'rotate-180']: open }"
-            />
-          </button>
-        </div>
-        <div v-if="alignment === 'right'" class="relative flex-1 min-w-0 flex items-center text-sm">
-          <slot name="header" :sticky="isSticky" />
-        </div>
-      </div>
-    </header>
-    <main v-if="open" class="relative">
-      <slot name="content" />
-    </main>
-  </section>
-</template>

package/src/components/collapse/index.ts

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