@firstnoodle-ui/bui 0.0.28 → 0.0.32

package/src/components/modal/Modal.vue

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

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

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

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

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

package/src/components/notification/Notification.vue

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

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

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

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

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

package/src/components/pagination/Pagination.vue

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

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

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

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

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

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

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