@firstnoodle-ui/bui 0.0.27 → 0.0.28

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

@@ -0,0 +1 @@
+export { default as BDeleteButton } from "./DeleteButton.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/filter-chip/FilterChip.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { BDeleteButton } from "../delete-button";
+
+const { count = 0, deletable = false } = defineProps<{
+  label: string;
+  active: boolean;
+  deletable?: boolean;
+  count?: number;
+}>();
+defineEmits(["click", "delete"]);
+</script>
+
+<template>
+  <button
+    class="h-6 py-2 rounded-md flex items-center gap-1 cursor-pointer"
+    :class="{
+      'px-2 border border-default text-tertiary hover:bg-secondary hover:text-secondary hover:border-strong active:bg-tertiary active:text-primary active:border-strong': !active,
+      'border border-transparent text-white bg-cyan-600 hover:bg-cyan-700 active:bg-cyan-800': active,
+      'pl-2 pr-1': active && deletable,
+      'px-2': active && !deletable,
+    }"
+    @click="$emit('click')"
+  >
+    <span class="text-sm">{{ label }}</span>
+    <span v-if="active && count" class="h-4 px-1 min-w-4 flex items-center justify-center rounded-full text-xs font-medium bg-black/15 ">{{ count }}</span>
+    <BDeleteButton v-if="deletable && active" data-theme="dark" @click="$emit('delete')" />
+  </button>
+</template>

package/src/components/filter-chip/index.ts

@@ -0,0 +1 @@
+export { default as BFilterChip } from "./FilterChip.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: var(--color-bg-tertiary);
+    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: var(--color-bg-tertiary); }
+    5% { background-color: var(--color-bg-tertiary); }
+    25% { background-color: var(--color-bg-secondary); }
+    45% { background-color: var(--color-bg-tertiary); }
+    100% { background-color: var(--color-bg-tertiary); }
+}

package/src/components/flexbox/Flexbox.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { TAlignment, TJustification } from "../types";
+import { computed } from "vue";
+
+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 = computed(() => ([
+  props.inline ? "inline-flex" : "flex",
+  props.col ? "flex-col items-stretch" : "",
+  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,114 @@
+<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: 1000,
+    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
+    key="aside"
+    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 bg-primary"
+      :class="classes"
+    >
+      <slot />
+      <button
+        v-if="props.draggable"
+        class="absolute top-0 h-full w-1 hover:border-action hover:bg-tertiary cursor-ew-resize"
+        :class="[
+          props.side === 'left' ? 'right-0 border-r' : 'left-0 border-l',
+          dragging ? 'border-action bg-tertiary' : '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: false,
+    asideLeftWidth: 256,
+    asideRightBgColorClass: "",
+    asideRightDraggable: false,
+    asideRightVisible: false,
+    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.asideRightWidth);
+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";