@firstnoodle-ui/bui 0.0.13

package/src/components/collapse/Collapse.vue

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

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

package/src/components/confirm-cancel/ConfirmCancel.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { ButtonVariant, TIcon } from "../types";
+import { computed } from "vue";
+import { BButton, BFlexbox } from "../";
+
+const props = withDefaults(
+  defineProps<{
+    alignment?: "left" | "right";
+    cancelButtonIsText?: boolean;
+    cancelDisabled?: boolean;
+    cancelIcon?: TIcon;
+    cancelLabel?: string;
+    cancelVariant?: ButtonVariant;
+    confirmDisabled?: boolean;
+    confirmIcon?: TIcon;
+    confirmLabel?: string;
+    confirmVariant?: ButtonVariant;
+    fillContainer?: boolean;
+    loading?: boolean;
+    small?: boolean;
+  }>(),
+  {
+    alignment: "left",
+    cancelButtonIsText: false,
+    cancelDisabled: false,
+    cancelLabel: "Cancel",
+    cancelVariant: "outline",
+    confirmDisabled: false,
+    confirmLabel: "Confirm",
+    confirmVariant: "fill",
+    fillContainer: false,
+    loading: false,
+    small: false,
+  },
+);
+
+const emit = defineEmits(["confirm", "cancel"]);
+
+const leftAligned = computed(() => props.alignment === "left");
+</script>
+
+<template>
+  <BFlexbox class="gap-2">
+    <BButton
+      v-if="leftAligned"
+      :small="small"
+      stop-propagation
+      :icon="confirmIcon"
+      :label="confirmLabel"
+      :type="confirmVariant"
+      :disabled="confirmDisabled"
+      :loading="loading"
+      :class="{ 'flex-1': fillContainer }"
+      @click="emit('confirm')"
+    />
+    <BButton
+      :variant="cancelVariant"
+      stop-propagation
+      :disabled="cancelDisabled"
+      :small="small"
+      :icon="cancelIcon"
+      :label="cancelLabel"
+      :class="{ 'flex-1': fillContainer }"
+      @click="emit('cancel')"
+    />
+    <BButton
+      v-if="!leftAligned"
+      :small="small"
+      stop-propagation
+      :icon="confirmIcon"
+      :label="confirmLabel"
+      :variant="confirmVariant"
+      :disabled="confirmDisabled"
+      :loading="loading"
+      :class="{ 'flex-1': fillContainer }"
+      @click="emit('confirm')"
+    />
+  </BFlexbox>
+</template>

package/src/components/confirm-cancel/index.ts

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

package/src/components/data-point/DataPoint.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  To be implemented
+</template>

package/src/components/data-point/index.ts

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

package/src/components/dialog/Dialog.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { TOverlayType } from "../types";
+import { onMounted, ref } from "vue";
+import { BButton, BFadeInUp, BScreenOverlay, BVerticalLayout, BWindowFrame } from "../";
+import { useEscapeKey } from "../../composables";
+
+const props = withDefaults(
+  defineProps<{
+    closeable?: boolean;
+    overlayType?: TOverlayType;
+    target?: string;
+    title?: string;
+  }>(),
+  {
+    closeable: true,
+    overlayType: "default",
+    target: "#modals",
+  },
+);
+
+const emit = defineEmits(["close"]);
+
+const show = ref(false);
+const windowRef = ref<typeof BWindowFrame>();
+
+// when component is mounted start the transition
+onMounted(() => (show.value = true));
+
+const close = () => (show.value = false);
+const onClose = () => props.closeable && close();
+props.closeable && useEscapeKey(onClose);
+
+const onTransitionAfterEnter = () => {
+
+};
+
+defineExpose({ close });
+</script>
+
+<template>
+  <Teleport :to="props.target">
+    <BScreenOverlay :show="show" :type="overlayType" class="p-2 md:pt-32" @click="onClose" @close="emit('close')">
+      <BFadeInUp @transition-after-enter="onTransitionAfterEnter">
+        <BWindowFrame v-show="show" ref="windowRef" class="h-64 max-w-2xl md:w-1/2 md:max-w-lg p-4 md:px-8">
+          <BVerticalLayout>
+            <template #header>
+              <header class="flex items-center justify-between w-full h-12">
+                <h4 v-if="props.title">
+                  {{ props.title }}
+                </h4>
+                <h4 v-else>
+                  <slot name="title" />
+                </h4>
+                <BButton v-if="props.closeable" small icon="close" variant="textSubtle" @click="onClose" />
+              </header>
+            </template>
+            <template #main>
+              <slot name="main" />
+            </template>
+            <template #footer>
+              <footer class="flex items-center h-12">
+                <slot name="footer" />
+              </footer>
+            </template>
+          </BVerticalLayout>
+        </BWindowFrame>
+      </BFadeInUp>
+    </BScreenOverlay>
+  </Teleport>
+</template>

package/src/components/dialog/index.ts

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

package/src/components/fade-in-up/FadeInUp.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const emit = defineEmits(["transition-after-enter"]);
+</script>
+
+<template>
+  <transition
+    enter-active-class="transform transition ease-in-out duration-300 delay-100"
+    enter-from-class="translate-y-2 opacity-0"
+    enter-to-class=""
+    leave-active-class="transform transition ease-in-out duration-100"
+    leave-class="translate-y-0 opacity-100"
+    leave-to-class="translate-y-2 opacity-0"
+    @after-enter="emit('transition-after-enter')"
+  >
+    <slot />
+  </transition>
+</template>

package/src/components/fade-in-up/index.ts

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

package/src/components/first-paint/FirstPaint.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import "./style.scss";
+
+const props = defineProps<{ delayIndex: number }>();
+
+onMounted(() => {
+  if (props.delayIndex < 1 || props.delayIndex > 20) {
+    throw new Error("delayIndex has to be between 1 and 20");
+  }
+});
+</script>
+
+<template>
+  <div class="first-paint rounded" :class="`delay-${delayIndex}`">
+    <div class="opacity-0">
+      <slot v-if="$slots.default" />
+      <span v-else>Some random text</span>
+    </div>
+  </div>
+</template>

package/src/components/first-paint/index.ts

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

package/src/components/first-paint/style.scss

@@ -0,0 +1,23 @@
+$color1: #eee;
+$color2: #bbb;
+
+.first-paint {
+    background-color: $color1;
+    animation-name: fade;
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+
+    @for $i from 1 through 20 {
+        &.delay-#{$i} {
+            animation-delay: $i * 0.1s;
+        }
+    }
+}
+
+@keyframes fade {
+    0% { background-color: $color1; }
+    5% { background-color: $color1; }
+    25% { background-color: $color2; }
+    45% { background-color: $color1; }
+    100% { background-color: $color1; }
+}

package/src/components/flexbox/Flexbox.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { TAlignment, TJustification } from "../types";
+
+const props = withDefaults(
+  defineProps<{
+    align?: TAlignment;
+    col?: boolean;
+    inline?: boolean;
+    justify?: TJustification;
+    tag?: string;
+  }>(),
+  {
+    align: "center",
+    col: false,
+    inline: false,
+    justify: "start",
+    tag: "div",
+  },
+);
+
+const alignmentClasses: Record<TAlignment, string> = {
+  start: "items-start",
+  end: "items-end",
+  center: "items-center",
+  stretch: "items-stretch",
+} as const;
+
+const justificationClasses: Record<TJustification, string> = {
+  around: "justify-around",
+  between: "justify-between",
+  center: "justify-center",
+  end: "justify-end",
+  evenly: "justify-evenly",
+  start: "justify-start",
+  stretch: "justify-stretch",
+} as const;
+
+const classes = [
+  props.inline ? "inline-flex" : "flex",
+  props.col ? "flex-col" : "",
+  props.align ? alignmentClasses[props.align] : "",
+  props.justify ? justificationClasses[props.justify] : "",
+];
+</script>
+
+<template>
+  <component :is="tag" :class="classes">
+    <slot />
+  </component>
+</template>

package/src/components/flexbox/index.ts

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

package/src/components/horizontal-layout/Aside.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { clamp } from "../../utils";
+
+const props = withDefaults(
+  defineProps<{
+    width?: number;
+    border?: boolean;
+    draggable?: boolean;
+    visible?: boolean;
+    side?: "left" | "right";
+    maxWidth?: number;
+    minWidth?: number;
+  }>(),
+  {
+    border: false,
+    draggable: false,
+    visible: true,
+    side: "left",
+    maxWidth: 500,
+    minWidth: 160,
+    width: 256,
+  },
+);
+
+const emit = defineEmits(["resize-start", "resize", "resize-end", "transitioning"]);
+
+const aside = ref<HTMLElement>();
+const classes = computed(() => [
+  props.side === "left" ? "left-0" : "right-0",
+  props.border ? (props.side === "left" ? "border-r border-default" : "border-l border-default") : "",
+]);
+const enterClass = props.side === "left" ? "-translate-x-full" : "translate-x-full";
+const leaveToClass = props.side === "left" ? "-translate-x-full" : "translate-x-full";
+
+let startX: number;
+let startWidth: number;
+const dragging = ref(false);
+const transitioning = ref(false);
+
+function startDrag(event: MouseEvent) {
+  startX = event.pageX;
+  startWidth = props.width;
+  dragging.value = true;
+  window.addEventListener("mouseup", endDrag);
+  window.addEventListener("mousemove", onDrag);
+  emit("resize-start");
+}
+
+function onDrag(event: MouseEvent) {
+  const deltaX = props.side === "left" ? event.pageX - startX : startX - event.pageX;
+
+  const dragTo = startWidth + deltaX;
+  const result = clamp(dragTo, props.minWidth, props.maxWidth);
+
+  if (result !== props.width) {
+    emit("resize", result);
+  }
+}
+
+function endDrag() {
+  dragging.value = false;
+  window.removeEventListener("mouseup", endDrag);
+  window.removeEventListener("mousemove", onDrag);
+  emit("resize-end");
+}
+
+function onTransition(transitionActive: boolean, focusAside: boolean) {
+  if (focusAside && aside.value) {
+    aside.value.focus();
+  }
+  transitioning.value = transitionActive;
+  emit("transitioning", transitioning.value);
+}
+</script>
+
+<template>
+  <transition
+    enter-active-class="transform"
+    :enter-from-class="enterClass"
+    enter-to-class=""
+    leave-active-class="transform"
+    leave-class="translate-x-0"
+    :leave-to-class="leaveToClass"
+    @before-leave="onTransition(true, false)"
+    @after-leave="onTransition(false, false)"
+    @before-enter="onTransition(true, false)"
+    @after-enter="onTransition(false, true)"
+  >
+    <aside
+      v-show="visible"
+      ref="aside"
+      tabindex="0"
+      :style="{
+        width: `${width}px`,
+        transitionProperty: dragging ? 'none' : 'transform, width',
+      }"
+      class="absolute top-0 z-10 h-full overflow-x-hidden duration-500 ease-in-out"
+      :class="classes"
+    >
+      <slot />
+      <button
+        v-if="props.draggable"
+        class="absolute top-0 h-full w-1 hover:border-action hover:bg-actionLight/10 cursor-ew-resize"
+        :class="[
+          props.side === 'left' ? 'right-0 border-r' : 'left-0 border-l',
+          dragging ? 'border-actionLight bg-actionLight/10' : 'border-transparent bg-transparent',
+        ]"
+        @mousedown="startDrag"
+      />
+    </aside>
+  </transition>
+</template>

package/src/components/horizontal-layout/HorizontalLayout.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, useSlots, watch } from "vue";
+import AsideComponent from "./Aside.vue";
+
+const props = withDefaults(
+  defineProps<{
+    asideLeftBgColorClass?: string;
+    asideLeftDraggable?: boolean;
+    asideLeftVisible?: boolean;
+    asideLeftWidth?: number;
+    asideRightBgColorClass?: string;
+    asideRightDraggable?: boolean;
+    asideRightVisible?: boolean;
+    asideRightWidth?: number;
+    borders?: boolean;
+    mainBgColorClass?: string;
+  }>(),
+  {
+    asideLeftBgColorClass: "",
+    asideLeftDraggable: false,
+    asideLeftVisible: true,
+    asideLeftWidth: 256,
+    asideRightBgColorClass: "",
+    asideRightDraggable: false,
+    asideRightVisible: true,
+    asideRightWidth: 256,
+    borders: false,
+    mainBgColorClass: "",
+  },
+);
+
+const emit = defineEmits(["aside-left-transition-end", "aside-right-transition-end"]);
+
+// Resizing is when one of the asides is resized by dragging - then we remove transition classes
+const resizing = ref(false);
+
+// we cannot mutate props, so we create a local copy - TODO... should we not just emit the new value
+const localAsideLeftWidth = ref(props.asideLeftWidth);
+const localAsideRightWidth = ref(props.asideRightVisible ? props.asideRightWidth : 0);
+const paddingLeft = ref(props.asideLeftWidth);
+const paddingRight = ref(props.asideRightWidth);
+const mainStyle = computed(() => ({
+  paddingLeft: `${paddingLeft.value}px`,
+  paddingRight: `${+paddingRight.value}px`,
+}));
+const onAsideLeftResize = (size: number) => (localAsideLeftWidth.value = paddingLeft.value = size);
+const onAsideLeftTransition = (transitioning: boolean) => !transitioning && emit("aside-left-transition-end");
+const onAsideRightResize = (size: number) => (localAsideRightWidth.value = paddingRight.value = size);
+const onAsideRightTransition = (transitioning: boolean) => !transitioning && emit("aside-right-transition-end");
+
+// For transitioning the padding on <main>
+watch(
+  () => props.asideLeftVisible,
+  newValue => (paddingLeft.value = newValue ? localAsideLeftWidth.value : 0),
+);
+watch(
+  () => props.asideRightVisible,
+  newValue => (paddingRight.value = newValue ? localAsideRightWidth.value : 0),
+);
+
+// For triggering transition to a specific width
+watch(
+  () => props.asideLeftWidth,
+  newValue => (localAsideLeftWidth.value = paddingLeft.value = newValue),
+);
+watch(
+  () => props.asideRightWidth,
+  newValue => (localAsideRightWidth.value = paddingRight.value = newValue),
+);
+
+const slots = useSlots();
+
+onMounted(() => {
+  paddingLeft.value = props.asideLeftVisible && slots["aside-left"] ? localAsideLeftWidth.value : 0;
+  paddingRight.value = props.asideRightVisible && slots["aside-right"] ? localAsideRightWidth.value : 0;
+});
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-hidden bg-primary">
+    <AsideComponent
+      v-if="slots['aside-left']"
+      side="left"
+      :border="props.borders"
+      :draggable="asideLeftDraggable"
+      :visible="asideLeftVisible"
+      :width="localAsideLeftWidth"
+      @resize-start="resizing = true"
+      @resize="onAsideLeftResize"
+      @resize-end="resizing = false"
+      @transitioning="onAsideLeftTransition"
+    >
+      <slot name="aside-left" />
+    </AsideComponent>
+    <!-- responsiveness: md and above -->
+    <main
+      class="relative z-0 h-full overflow-x-hidden overflow-y-auto"
+      :class="[props.mainBgColorClass, resizing ? null : 'transition-padding duration-500 ease-in-out']"
+      :style="mainStyle"
+    >
+      <slot name="main" />
+    </main>
+    <AsideComponent
+      v-if="slots['aside-right']"
+      side="right"
+      :border="props.borders"
+      :draggable="asideRightDraggable"
+      :visible="asideRightVisible"
+      :width="localAsideRightWidth"
+      @resize-start="resizing = true"
+      @resize="onAsideRightResize"
+      @resize-end="resizing = false"
+      @transitioning="onAsideRightTransition"
+    >
+      <slot name="aside-right" />
+    </AsideComponent>
+  </div>
+</template>

package/src/components/horizontal-layout/index.ts

@@ -0,0 +1,2 @@
+export { default as BAside } from "./Aside.vue";
+export { default as BHorizontalLayout } from "./HorizontalLayout.vue";