@firstnoodle-ui/bui 0.0.27 → 0.0.28

package/src/components/modal/Modal.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { Slots } from "vue";
+import type { TOverlayType } from "../types";
+import { onMounted, ref, useSlots } from "vue";
+import { BButton, BFadeInUp, BScreenOverlay, BVerticalLayout, BWindowFrame } from "../";
+import { useEscapeKey } from "../../composables";
+
+const props = withDefaults(
+  defineProps<{
+    closeable?: boolean;
+    expandVertically?: boolean;
+    overlayType?: TOverlayType;
+    target?: string;
+    title?: string;
+    widthClass?:
+      | "max-w-xs"
+      | "max-w-sm"
+      | "max-w-md"
+      | "max-w-lg"
+      | "max-w-xl"
+      | "max-w-2xl"
+      | "max-w-3xl"
+      | "max-w-4xl"
+      | "max-w-5xl"
+      | "max-w-6xl"
+      | "max-w-7xl"
+      | "max-w-8xl"
+      | "max-w-full";
+  }>(),
+  {
+    closeable: true,
+    expandVertically: false,
+    overlayType: "default",
+    target: "#modals",
+    widthClass: "max-w-2xl",
+  },
+);
+
+const emit = defineEmits(["close", "ready"]);
+
+const slots: Slots = useSlots();
+const windowRef = ref<typeof BWindowFrame>();
+const show = ref(false);
+
+onMounted(() => {
+  if (slots.default && (props.title || slots.header || slots.main || slots.footer)) {
+    console.warn(
+      "You are using named slots (or props.title) and default slot at the same time. This is not supported. Please use either named slots (and props.title) or the default slot.",
+    );
+  }
+  // when component is mounted start the transition
+  show.value = true;
+});
+
+const close = () => (show.value = false);
+const onClose = () => props.closeable && close();
+props.closeable && useEscapeKey(onClose);
+
+const onTransitionAfterEnter = () => {
+  // windowRef.value!.trapFocus();
+  emit("ready");
+};
+
+defineExpose({ close });
+</script>
+
+<template>
+  <Teleport :to="target">
+    <BScreenOverlay
+      :show="show"
+      :type="overlayType"
+      :class="props.expandVertically ? 'p-2 md:p-12' : 'p-2 md:pt-32'"
+      @click="onClose"
+      @close="emit('close')"
+    >
+      <BFadeInUp @transition-after-enter="onTransitionAfterEnter">
+        <BWindowFrame
+          v-show="show"
+          ref="windowRef"
+          class="h-full"
+          :class="[
+            props.widthClass,
+            {
+              'px-8 py-6': !slots.default,
+              'md:h-auto': !props.expandVertically,
+            },
+          ]"
+        >
+          <slot v-if="$slots.default" />
+          <BVerticalLayout v-else>
+            <template v-if="props.title || $slots.header" #header>
+              <header v-if="props.title" class="flex items-center justify-between h-12 w-full mb-4">
+                <h4>{{ props.title }}</h4>
+                <BButton v-if="closeable" icon="close" variant="textSubtle" @click="onClose" />
+              </header>
+              <slot name="header" />
+            </template>
+            <template #main>
+              <slot name="main" />
+            </template>
+            <template v-if="$slots.footer" #footer>
+              <footer class="flex items-center h-full">
+                <slot name="footer" />
+              </footer>
+            </template>
+          </BVerticalLayout>
+        </BWindowFrame>
+      </BFadeInUp>
+    </BScreenOverlay>
+  </Teleport>
+</template>

package/src/components/modal/index.ts

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

package/src/components/nav-item/NavItem.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { TIcon } from "../types";
+import { BIcon } from "../";
+
+withDefaults(
+  defineProps<{
+    exact?: boolean;
+    icon?: TIcon;
+    orientation?: "horizontal" | "vertical";
+    to: string | { name?: string; path?: string; params?: Record<string, number | string | null>; query?: Record<string, number | string | null> };
+    isActive?: boolean;
+    isExactActive?: boolean;
+    href?: string;
+  }>(),
+  {
+    exact: false,
+    orientation: "horizontal",
+    isActive: false,
+    isExactActive: false,
+    href: "/",
+  },
+);
+
+const emit = defineEmits<{
+  (e: "navigate", to: string): void;
+}>();
+</script>
+
+<template>
+  <template v-if="orientation === 'horizontal'">
+    <a class="group h-full cursor-pointer py-2" @click="emit('navigate', href)">
+      <div
+        class="h-full flex items-center space-x-2 px-4 rounded-lg group-hover:opacity-100"
+        :class="{
+          'bg-secondary text-primary opacity-100': isActive || isExactActive,
+          'bg-primary text-secondary opacity-50 hover:bg-secondary': !(isActive || isExactActive),
+        }"
+      >
+        <BIcon v-if="icon" :name="icon" />
+        <span class="text-sm tracking-wide">
+          <slot />
+        </span>
+      </div>
+    </a>
+  </template>
+  <template v-else>
+    <a class="group h-full cursor-pointer py-2" @click="emit('navigate', href)">
+      <div
+        class="h-10 flex items-center space-x-2 px-4 rounded-lg group-hover:opacity-100"
+        :class="{
+          'bg-action text-white font-medium opacity-100': isActive || isExactActive,
+          'bg-primary text-secondary opacity-50 hover:bg-secondary active:bg-tertiary': !(isActive || isExactActive),
+        }"
+      >
+        <BIcon v-if="icon" :name="icon" />
+        <span class="text-sm tracking-wide">
+          <slot />
+        </span>
+      </div>
+    </a>
+  </template>
+</template>

package/src/components/nav-item/index.ts

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

package/src/components/notification/Notification.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { BButton, BFlexbox, BIcon } from "../";
+
+const { type = "default" } = defineProps<{
+  showDetailsButton?: boolean;
+  text: string;
+  type?: "default" | "error" | "warning" | "success";
+}>();
+
+const emit = defineEmits(["close", "show-details"]);
+
+const icon = computed(() => {
+  if (type === "default") return "information";
+  if (type === "error") return "error";
+  if (type === "warning") return "warning";
+  return "check-circled";
+});
+</script>
+
+<template>
+  <div data-theme="dark" class="inline-flex items-stretch h-10 px-1 rounded-xl bg-black shadow-xl pointer-events-auto">
+    <BFlexbox
+      class="gap-2 px-3 rounded-l-lg"
+      :class="{
+        'text-stone-300': type === 'default',
+        'text-amber-300': type === 'warning',
+        'text-red-300': type === 'error',
+        'text-emerald-300': type === 'success',
+      }"
+    >
+      <BIcon :name="icon" />
+      <span class="text-sm cursor-default">{{ text }}</span>
+    </BFlexbox>
+    <BFlexbox class="px-2">
+      <BButton
+        v-if="showDetailsButton"
+        small
+        variant="outline"
+        label="Details"
+        @click="emit('show-details')"
+      />
+    </BFlexbox>
+    <BFlexbox class="px-1">
+      <BButton
+        small
+        variant="textSubtle"
+        icon="close"
+        @click="emit('close')"
+      />
+    </BFlexbox>
+  </div>
+</template>

package/src/components/notification/index.ts

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

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

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+defineProps<{ inside?: boolean }>();
+</script>
+
+<template>
+  <div class="w-3 h-3 bg-orange-500 rounded-full border border-white dark:border-[var(--color-bg-primary)]" />
+</template>

package/src/components/notification-badge/index.ts

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

package/src/components/pagination/Pagination.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { TPopSelectOption } from "../types";
+import { computed, ref } from "vue";
+import { BButton, BPopSelect } from "../";
+import { range } from "../../utils";
+
+const { borders = false, currentPage, lastPage, orientation = "horizontal" } = defineProps<{
+  borders?: boolean;
+  currentPage: number;
+  lastPage: number;
+  orientation?: "horizontal" | "vertical";
+}>();
+
+const emit = defineEmits(["change"]);
+const navRef = ref<HTMLElement>();
+
+const pageOptions = computed((): TPopSelectOption[] => {
+  return range(0, lastPage).map((num: number) => ({ label: `${num + 1}` }));
+});
+const prevStyle = borders ? { borderRadius: "8px 0 0 8px" } : undefined;
+const nextStyle = borders ? { borderRadius: "0px 8px 8px 0px" } : undefined;
+const midStyle = borders ? { borderRadius: "0" } : undefined;
+const variant = borders ? "outlineSubtle" : "textSubtle";
+
+const onChange = (direction: -1 | 1) => {
+  let targetPage = currentPage + direction;
+  if (targetPage > lastPage) targetPage = 1;
+  if (targetPage < 1) targetPage = lastPage;
+  emit("change", targetPage);
+};
+
+const onPageSelect = (pageOption: TPopSelectOption) => {
+  emit("change", pageOption.label);
+};
+</script>
+
+<template>
+  <nav ref="navRef" class="relative z-0 inline-flex">
+    <BButton
+      :variant="variant"
+      :icon="orientation === 'horizontal' ? 'chevron-left' : 'chevron-up'"
+      :style="prevStyle"
+      class="z-0 hover:z-10 focus:z-10 active:z-10"
+      @click="onChange(-1)"
+    />
+    <BPopSelect :same-width-as-element="navRef" placement="bottom" :value="currentPage" :options="pageOptions" @select="onPageSelect">
+      <template #trigger="slotProps">
+        <BButton
+          :variant="variant"
+          :label="`${currentPage} / ${lastPage}`"
+          :style="midStyle"
+          :focus="slotProps && slotProps.visible"
+          class="z-0 hover:z-10 focus:z-10 active:z-10 -ml-px"
+        />
+      </template>
+    </BPopSelect>
+    <BButton
+      :variant="variant"
+      :icon="orientation === 'horizontal' ? 'chevron-right' : 'chevron-down'"
+      :style="nextStyle"
+      class="z-0 hover:z-10 focus:z-10 active:z-10 -ml-px"
+      @click="onChange(1)"
+    />
+  </nav>
+</template>

package/src/components/pagination/index.ts

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

package/src/components/pop-confirm/PopConfirm.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { Placement } from "@floating-ui/dom";
+import type { ConfirmCancelProps } from "../confirm-cancel/types";
+import type { ButtonVariant, TIcon } from "../types";
+import { nextTick, ref } from "vue";
+import { BConfirmCancel, BPopper, BPopperContent } from "../";
+import { useTrapFocus } from "../../";
+
+withDefaults(
+  defineProps<ConfirmCancelProps & {
+    title?: string;
+    description?: string;
+    placement?: Placement;
+    tagName?: string;
+  }>(),
+  {
+    placement: "bottom",
+    tagName: "span",
+  },
+);
+
+const emit = defineEmits(["cancel", "close", "confirm"]);
+
+const popperRef = ref<typeof BPopper>();
+const contentRef = ref<HTMLDivElement>();
+const { trapFocus } = useTrapFocus(contentRef);
+
+const close = () => {
+  emit("close");
+  popperRef.value && popperRef.value.close();
+};
+
+const onOpen = () => nextTick(trapFocus);
+
+const onCancel = () => {
+  close();
+  emit("cancel");
+};
+
+const onConfirm = () => {
+  close();
+  emit("confirm");
+};
+</script>
+
+<template>
+  <BPopper ref="popperRef" trigger="click" :placement="placement" @open="onOpen" @close="close">
+    <template #default="slotProps">
+      <div class="inline-flex">
+        <slot name="trigger" :visible="slotProps && slotProps.visible" />
+      </div>
+    </template>
+    <template #content>
+      <BPopperContent>
+        <div
+          ref="contentRef"
+          class="flex flex-col max-w-72"
+          :class="{
+            'p-4 gap-4': title || description,
+            'p-2': !(title || description),
+          }"
+        >
+          <section v-if="title || description" class="flex flex-col gap-0">
+            <h5>{{ title }}</h5>
+            <p class="text-sm text-secondary">
+              {{ description }}
+            </p>
+          </section>
+          <BConfirmCancel
+            :vertical="!(title || description)"
+            :small="small"
+            :cancel-variant="(cancelVariant as ButtonVariant)"
+            :confirm-variant="(confirmVariant as ButtonVariant)"
+            :confirm-icon="(confirmIcon as TIcon)"
+            :cancel-icon="(cancelIcon as TIcon)"
+            :confirm-label="confirmLabel"
+            :cancel-label="cancelLabel"
+            :confirm-disabled="confirmDisabled"
+            :cancel-disabled="cancelDisabled"
+            :fill-container="fillContainer || Boolean(title || description)"
+            :loading="loading"
+            order="confirm-last"
+            @cancel="onCancel"
+            @confirm="onConfirm"
+          />
+        </div>
+      </BPopperContent>
+    </template>
+  </BPopper>
+</template>

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

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

package/src/components/pop-select/FooterButton.vue

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