@firstnoodle-ui/bui 0.0.13 → 0.0.15

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

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

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

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

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

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

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

package/src/components/dialog/Dialog.vue

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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