@firstnoodle-ui/bui 0.0.28 → 0.0.29

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

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

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

@@ -1 +0,0 @@
-export { default as BFilterChip } from "./FilterChip.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: 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

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

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

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

@@ -1,114 +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: 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

@@ -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: 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

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