@firstnoodle-ui/bui 0.0.27 → 0.0.28

package/dist/utils/capitalizeFirstLetter.d.ts

@@ -0,0 +1 @@
+export declare function capitalizeFirstLetter(str: string): string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firstnoodle-ui/bui",
   "type": "module",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "private": false,
   "repository": {
     "type": "git",
@@ -20,7 +20,8 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "dist/bui.css"
+    "dist/bui.css",
+    "src"
   ],
   "peerDependencies": {
     "tailwindcss": "^4.1.1",
@@ -67,6 +68,6 @@
     "build": "vite build",
     "typecheck": "vue-tsc -p tsconfig.app.json --noEmit",
     "watch": "vite build --watch",
-    "release:publish": "pnpm publish --access public --otp=419818 --no-git-checks"
+    "release:publish": "pnpm publish --access public --otp=753040 --no-git-checks"
   }
 }

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

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

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

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

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

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

package/src/components/button/Button.vue

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/button/index.ts

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

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

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

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

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

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

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

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { CalendarGridItem } from "../utils/types";
+import { computed } from "vue";
+import { BButton } from "../../button";
+import { TimeUnit } from "../utils/utils/time";
+
+const props = defineProps<{ viewData: CalendarGridItem[] }>();
+const emit = defineEmits(["move", "select"]);
+const label = computed(() => {
+  return `${props.viewData[0].label} - ${props.viewData[props.viewData.length - 1].label}`;
+});
+</script>
+
+<template>
+  <div>
+    <nav class="w-56 grid grid-cols-7">
+      <BButton
+        icon="chevron-left"
+        variant="textSubtle"
+        @click="emit('move', { amount: -10, unit: TimeUnit.YEAR })"
+      />
+      <div class="col-span-5 flex items-center justify-center text-sm">
+        {{ label }}
+      </div>
+      <BButton
+        icon="chevron-right"
+        variant="textSubtle"
+        @click="emit('move', { amount: 10, unit: TimeUnit.YEAR })"
+      />
+    </nav>
+    <main class="w-56 grid grid-cols-2 py-8">
+      <BButton
+        v-for="year in viewData"
+        :key="year.label"
+        :variant="year.selected ? 'fill' : (year.current ? 'text' : 'textSubtle')"
+        :label="year.label.toString()"
+        @mouseup.stop="
+          emit(
+            'select',
+            {
+              value: year.label,
+              unit: TimeUnit.YEAR,
+              view: TimeUnit.MONTH,
+            },
+          )
+        "
+      />
+    </main>
+  </div>
+</template>