@firstnoodle-ui/bui 0.0.28 → 0.0.32

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firstnoodle-ui/bui",
   "type": "module",
-  "version": "0.0.28",
+  "version": "0.0.32",
   "private": false,
   "repository": {
     "type": "git",
@@ -10,18 +10,29 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.mjs"
     },
-    "./bui.css": {
-      "default": "./dist/bui.css"
-    }
+    "./components/*": {
+      "types": "./dist/components/*/index.d.ts",
+      "import": "./dist/components/*/index.d.ts"
+    },
+    "./composables/*": {
+      "types": "./dist/composables/*.d.ts",
+      "import": "./dist/composables/*.d.ts"
+    },
+    "./utils/*": {
+      "types": "./dist/utils/*.d.ts",
+      "import": "./dist/utils/*.d.ts"
+    },
+    "./bui.css": "./dist/bui.css",
+    "./package.json": "./package.json"
   },
   "main": "./dist/index.mjs",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
-    "dist",
-    "dist/bui.css",
-    "src"
+    "dist"
   ],
   "peerDependencies": {
     "tailwindcss": "^4.1.1",
@@ -60,14 +71,14 @@
     "tailwindcss": "^4.1.1",
     "typescript": "^5.8.2",
     "vite": "^6.2.4",
-    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.13",
     "vue-tsc": "^2.2.8"
   },
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly -p tsconfig.app.json",
     "typecheck": "vue-tsc -p tsconfig.app.json --noEmit",
     "watch": "vite build --watch",
-    "release:publish": "pnpm publish --access public --otp=753040 --no-git-checks"
+    "release:publish": "pnpm publish --access public --otp=729736 --no-git-checks"
   }
 }

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,246 +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 { ButtonLabel, LeftGroup, NotificationBadge } from "./components";
-
-const props = withDefaults(
-  defineProps<{
-    variant?: ButtonVariant;
-    classes?: string;
-    disabled?: boolean;
-    fullwidth?: boolean;
-    spaceBetween?: 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,
-    spaceBetween: 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 = ["z-0 relative inline-flex items-center gap-1 leading-none border focus:z-10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-black dark:focus-visible:outline-white"];
-
-  // 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 text-xs") : result.push("h-8 text-sm");
-
-  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");
-  result.push(props.spaceBetween ? "justify-between" : "justify-center");
-
-  if (props.rounded) result.push("rounded-full");
-  else result.push(props.small ? "rounded" : "rounded-lg");
-
-  switch (props.variant) {
-    case "fill":
-      result.push(
-        ...(props.focus
-          ? ["text-white bg-blue-700 border-blue-700 dark:bg-blue-500 dark:border-blue-500"]
-          : [
-              "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
-          ? ["bg-blue-200 border-blue-700 text-blue-700 dark:bg-blue-700 dark:border-blue-600 dark:text-white"]
-          : [
-              "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
-          ? ["bg-slate-200 border-stone-500 text-slate-900 dark:bg-neutral-600 dark:border-stone-500 dark:text-white"]
-          : [
-              "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
-          ? ["border-none bg-blue-200 text-blue-700 dark:bg-blue-700 dark:text-white"]
-          : [
-              "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
-          ? ["border-none 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="buttonClasses"
-      :disabled="disabled || loading"
-      :style="disabledStyle"
-      @click="onClick"
-      @blur="emit('blur')"
-    >
-      <LeftGroup>
-        <BLoadSpinner v-if="loading" :class="loadSpinnerClass" />
-        <BIcon v-else-if="icon" :name="icon" />
-        <ButtonLabel v-if="label" :label="label" />
-      </LeftGroup>
-      <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="buttonClasses"
-    :disabled="disabled || loading"
-    :style="disabledStyle"
-    @click="onClick"
-    @blur="emit('blur')"
-  >
-    <LeftGroup>
-      <BLoadSpinner v-if="loading" :class="loadSpinnerClass" />
-      <BIcon v-else-if="icon" :name="icon" />
-      <ButtonLabel v-if="label" :label="label" />
-    </LeftGroup>
-    <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 dark:border-[var(--color-bg-primary)]" />
-  </div>
-</template>

package/src/components/button/components/button-label/ButtonLabel.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-defineProps<{ label: string }>();
-</script>
-
-<template>
-  <div class="py-1 min-w-0 leading-none truncate">
-    {{ label }}
-  </div>
-</template>

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

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

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

@@ -1,3 +0,0 @@
-export * from "./button-label";
-export * from "./left-group";
-export * from "./notification-badge";

package/src/components/button/components/left-group/LeftGroup.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="flex items-center gap-1 overflow-hidden">
-    <slot />
-  </div>
-</template>

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

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

package/src/components/button/components/notification-badge/NotificationBadge.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { BNotificationBadge } from "../../../notification-badge";
-
-defineProps<{ inside?: boolean }>();
-</script>
-
-<template>
-  <div
-    class="absolute"
-    :style="{
-      top: inside ? '0.15em' : '-0.3em',
-      right: inside ? '0.15em' : '-0.3em',
-    }"
-  >
-    <BNotificationBadge />
-  </div>
-</template>

package/src/components/button/components/notification-badge/index.ts

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

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/calendar-view/CalendarView.vue

@@ -1,106 +0,0 @@
-<script setup lang="ts">
-import type { CalendarGridItem } from "./utils/types.ts";
-import type { ReadableDateFormat } from "./utils/utils/format.ts";
-import { ref, toRef, watch } from "vue";
-import { loopRange } from "../../utils/array.ts";
-import { BButton } from "../button/index.ts";
-import DecadeView from "./components/DecadeView.vue";
-import MonthView from "./components/MonthView.vue";
-import YearView from "./components/YearView.vue";
-import { useCalendar, ViewType } from "./composables/useCalendar.ts";
-
-import { Weekday } from "./utils/enums.ts";
-import { formatDate } from "./utils/utils/format.ts";
-
-const props = withDefaults(defineProps<{
-  value?: string | Date | null;
-  clearable?: boolean;
-  type?: "date" | "datetime";
-  format?: ReadableDateFormat;
-  weekStart?: number;
-  disabledDates?: ((date: Date) => boolean)[];
-}>(), {
-  value: null,
-  clearable: false,
-  type: "date",
-  format: "readableDateWithDay",
-  weekStart: 1,
-});
-
-const emit = defineEmits(["change"]);
-
-const {
-  viewData,
-  viewType,
-  viewMonth,
-  viewYear,
-  changeView,
-  moveViewDate,
-  setSelectedDate,
-  setViewDateAndChangeView,
-} = useCalendar(props.value, { weekStart: props.weekStart, disabledDates: props.disabledDates });
-
-watch(() => props.value, newValue => setSelectedDate(newValue));
-
-const currentMonth = toRef(viewMonth);
-
-// 'rotate' the weekdays to start on the weekStart day
-const weekdays = ref(Object.values(Weekday).map((_day, index) => {
-  return Object.values(Weekday)[
-    loopRange(index + props.weekStart, Object.values(Weekday).length)
-  ];
-}));
-
-const onDateClick = (date: CalendarGridItem | null) => {
-  if (!date) {
-    emit("change", null);
-    return;
-  }
-
-  if (date.disabled) return;
-  if (!date.date) return;
-
-  emit("change", formatDate[props.format](date.date));
-};
-</script>
-
-<template>
-  <section class="flex flex-col">
-    <main class="p-4">
-      <MonthView
-        v-if="viewType === ViewType.MONTH"
-        :current-month="currentMonth"
-        :current-year="viewYear"
-        :view-data="viewData"
-        :weekdays="weekdays"
-        @move="moveViewDate"
-        @change-view="changeView"
-        @select="onDateClick"
-      />
-      <YearView
-        v-if="viewType === ViewType.YEAR"
-        :current-year="viewYear"
-        :view-data="viewData"
-        @move="moveViewDate"
-        @select="setViewDateAndChangeView"
-      />
-      <DecadeView
-        v-if="viewType === ViewType.DECADE"
-        :view-data="viewData"
-        @move="moveViewDate"
-        @select="setViewDateAndChangeView"
-      />
-    </main>
-    <footer v-if="clearable" class="flex items-center justify-end p-4 border-t border-default">
-      <BButton
-        square
-        size="tiny"
-        variant="outlineSubtle"
-        leading-icon="trash"
-        label="Clear"
-        :disabled="!value"
-        @click="onDateClick(null)"
-      />
-    </footer>
-  </section>
-</template>

package/src/components/calendar-view/components/DateButton.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { CalendarGridItem } from "../utils/types";
-
-defineProps<{ date: CalendarGridItem }>();
-const emit = defineEmits(["click"]);
-</script>
-
-<template>
-  <button
-    class="flex items-center justify-center w-8 h-8 rounded text-sm font-medium cursor-pointer"
-    :class="{
-      'bg-secondary text-tertiary rounded-none cursor-not-allowed': date.disabled,
-      'text-muted hover:text-secondary hover:bg-tertiary': date.inactive,
-      'bg-action text-white': date.selected,
-      'text-primary hover:bg-tertiary active:bg-tertiary focus:outline-none focus:shadow-outline focus:bg-blue-200': !date.selected && !date.disabled && !date.inactive,
-      'text-xs text-primary': date.current && !date.selected,
-      'text-xs font-bold text-white': date.current && date.selected,
-    }"
-    @click.stop="emit('click', date)"
-  >
-    {{ date.label }}
-  </button>
-</template>