@baklavue/ui 1.0.0 → 1.0.1

package/src/accordion/accordion.types.ts

@@ -1,109 +0,0 @@
-import type { BaklavaIcon } from "@trendyol/baklava-icons";
-
-/**
- * Properties for a single accordion item when used in group mode.
- *
- * @interface AccordionItem
- */
-export interface AccordionItem {
-  /**
-   * Whether the accordion is open/expanded.
-   *
-   * @default false
-   */
-  open?: boolean;
-
-  /**
-   * The caption text displayed in the accordion header.
-   */
-  caption?: string;
-
-  /**
-   * Icon configuration for the accordion header.
-   * Can be a boolean to show/hide default icon, or a specific BaklavaIcon.
-   */
-  icon?: boolean | BaklavaIcon;
-
-  /**
-   * Whether the accordion is disabled.
-   *
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Duration of the expand/collapse animation in milliseconds.
-   *
-   * @default 250
-   */
-  animationDuration?: number;
-
-  /**
-   * Additional custom data for use in the #item scoped slot.
-   * Content is provided via the #item slot, not via a property.
-   */
-  [key: string]: unknown;
-}
-
-/**
- * Props for the Accordion component.
- *
- * When `multiple` prop is provided, the component acts as an accordion group container.
- * Otherwise, it acts as a single accordion.
- *
- * @interface AccordionProps
- */
-export interface AccordionProps {
-  /**
-   * Whether the accordion is open/expanded.
-   * Only used when component is in single accordion mode.
-   *
-   * @default false
-   */
-  open?: boolean;
-
-  /**
-   * The caption text displayed in the accordion header.
-   * Only used when component is in single accordion mode.
-   */
-  caption?: string;
-
-  /**
-   * Icon configuration for the accordion header.
-   * Can be a boolean to show/hide default icon, or a specific BaklavaIcon.
-   * Only used when component is in single accordion mode.
-   */
-  icon?: boolean | BaklavaIcon;
-
-  /**
-   * Whether the accordion is disabled.
-   * Only used when component is in single accordion mode.
-   *
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Duration of the expand/collapse animation in milliseconds.
-   * Only used when component is in single accordion mode.
-   *
-   * @default 250
-   */
-  animationDuration?: number;
-
-  /**
-   * Allow multiple accordions to be open at once.
-   * When this prop is provided, the component acts as an accordion group container.
-   * When not provided, the component acts as a single accordion.
-   *
-   * @default false (when used as group)
-   */
-  multiple?: boolean;
-
-  /**
-   * Array of accordion items to render when in group mode.
-   * Each item will be rendered as a bl-accordion element.
-   * Only used when component is in group mode.
-   */
-  items?: AccordionItem[];
-}

package/src/accordion/index.ts

@@ -1,3 +0,0 @@
-// Component exports must use the "Bv-" prefix
-export { default as BvAccordion } from "./Accordion.vue";
-export type { AccordionProps, AccordionItem } from "./accordion.types";

package/src/alert/Alert.spec.ts

@@ -1,38 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-import BvAlert from "./Alert.vue";
-
-describe("BvAlert", () => {
-  it("renders with default props", () => {
-    const wrapper = mount(BvAlert);
-    expect(wrapper.find("bl-alert").exists()).toBe(true);
-  });
-
-  it("passes variant and description to bl-alert", () => {
-    const wrapper = mount(BvAlert, {
-      props: { variant: "success", description: "Done" },
-    });
-    const el = wrapper.find("bl-alert").element;
-    expect(el.getAttribute("variant")).toBe("success");
-    expect(el.getAttribute("description")).toBe("Done");
-  });
-
-  it("emits close when bl-alert fires bl-close", async () => {
-    const wrapper = mount(BvAlert, { props: { closable: true } });
-    wrapper.find("bl-alert").element.dispatchEvent(
-      new CustomEvent("bl-close", { bubbles: true }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("close")).toHaveLength(1);
-  });
-
-  it("exposes open and close methods", async () => {
-    const wrapper = mount(BvAlert, { props: { closable: true } });
-    const vm = wrapper.vm as unknown as { open: () => Promise<void>; close: () => Promise<void> };
-    expect(typeof vm.open).toBe("function");
-    expect(typeof vm.close).toBe("function");
-    await vm.close();
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("close")).toHaveLength(1);
-  });
-});

package/src/alert/Alert.vue

@@ -1,199 +0,0 @@
-<script setup lang="ts">
-/**
- * Alert Component
- *
- * A Vue UI kit component for Baklava's `bl-alert` web component.
- * Displays contextual feedback messages with variants (info, success, warning, danger).
- *
- * @component
- * @example
- * ```vue
- * <!-- Basic alert -->
- * <template>
- *   <BvAlert variant="info" description="This is an informational message" />
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- Closable alert with controlled state -->
- * <template>
- *   <BvAlert
- *     variant="warning"
- *     caption="Warning"
- *     closable
- *     :closed="isClosed"
- *     @close="isClosed = true"
- *   >
- *     <p>You can close this alert.</p>
- *   </BvAlert>
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- Programmatic control via ref -->
- * <template>
- *   <BvAlert ref="alertRef" variant="success" closable>
- *     <p>Content</p>
- *   </BvAlert>
- *   <button @click="alertRef?.close()">Close</button>
- * </template>
- * ```
- */
-import { nextTick, onMounted, ref, watch } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { AlertProps, BlAlertElement } from "./alert.types";
-
-/**
- * Component props with default values.
- */
-const props = withDefaults(defineProps<AlertProps>(), {
-  variant: "info",
-  description: undefined,
-  icon: undefined,
-  closable: false,
-  caption: undefined,
-  closed: false,
-});
-
-const emit = defineEmits<{
-  /**
-   * Emitted when the close button is clicked (only when closable is true).
-   */
-  close: [];
-}>();
-
-/**
- * Reference to the underlying bl-alert element.
- */
-const alertRef = ref<HTMLElement | null>(null);
-
-/**
- * Safely casts an HTMLElement to BlAlertElement.
- *
- * @param el - The element to cast.
- * @returns The element typed as BlAlertElement, or null.
- */
-function asBlAlert(el: HTMLElement | null): BlAlertElement | null {
-  return el as BlAlertElement | null;
-}
-
-/**
- * Waits for the bl-alert custom element to be defined.
- * Used when Baklava script loads asynchronously.
- */
-async function waitForBlAlert(): Promise<void> {
-  if (!customElements.get("bl-alert")) {
-    await customElements.whenDefined("bl-alert");
-  }
-}
-
-/**
- * Syncs the `closed` prop state with the underlying bl-alert web component.
- * Calls open() or close() on the element when prop and element state differ.
- *
- * @param el - The bl-alert element to sync.
- */
-function syncWithBlAlert(el: HTMLElement): void {
-  const blAlert = asBlAlert(el);
-  if (!blAlert || typeof blAlert.close !== "function" || typeof blAlert.open !== "function") {
-    return;
-  }
-  if (props.closed && !blAlert.closed) {
-    blAlert.close();
-  } else if (!props.closed && blAlert.closed) {
-    blAlert.open();
-  }
-}
-
-/**
- * Calls open or close on the bl-alert element when available.
- *
- * @param method - The method to call ("open" or "close").
- */
-function callBlAlertMethod(method: "open" | "close"): void {
-  const el = asBlAlert(alertRef.value);
-  if (el && typeof el[method] === "function") {
-    el[method]!();
-  }
-}
-
-/**
- * Watches for changes to the closed prop and syncs with the web component.
- */
-watch(
-  () => props.closed,
-  () => {
-    if (alertRef.value) {
-      syncWithBlAlert(alertRef.value);
-    }
-  },
-);
-
-/**
- * Handles the bl-close event from the underlying web component.
- * Forwards it to the component's emit.
- */
-function handleClose(): void {
-  emit("close");
-}
-
-/**
- * Lifecycle hook: Component mounted.
- *
- * Loads Baklava resources, waits for bl-alert to be defined,
- * then syncs the initial closed state with the web component.
- */
-onMounted(async () => {
-  loadBaklavaResources();
-
-  await nextTick();
-  await waitForBlAlert();
-
-  if (alertRef.value) {
-    syncWithBlAlert(alertRef.value);
-  }
-});
-
-/**
- * Exposed methods for programmatic control of the alert.
- */
-defineExpose({
-  /**
-   * Opens the alert programmatically.
-   *
-   * @public
-   */
-  open: async (): Promise<void> => {
-    await nextTick();
-    callBlAlertMethod("open");
-  },
-
-  /**
-   * Closes the alert programmatically.
-   *
-   * @public
-   */
-  close: async (): Promise<void> => {
-    await nextTick();
-    callBlAlertMethod("close");
-  },
-});
-</script>
-
-<template>
-  <bl-alert
-    ref="alertRef"
-    v-bind="{
-      ...props,
-      closable: props.closable === true ? true : undefined,
-      closed: props.closed,
-    }"
-    @bl-close="handleClose"
-  >
-    <slot v-if="$slots['caption']" name="caption" />
-    <slot v-if="$slots['default']" />
-    <slot v-if="$slots['action']" name="action" />
-  </bl-alert>
-</template>

package/src/alert/alert.types.ts

@@ -1,58 +0,0 @@
-import type { BaklavaIcon } from "@trendyol/baklava-icons";
-import type { AlertVariant } from "@trendyol/baklava/dist/components/alert/bl-alert";
-
-/**
- * Interface for the bl-alert custom element.
- * Extends HTMLElement with Baklava Alert API.
- *
- * @interface BlAlertElement
- */
-export interface BlAlertElement extends HTMLElement {
-  closed?: boolean;
-  open?: () => void;
-  close?: () => void;
-}
-
-/**
- * Props for the Alert component.
- * Wraps Baklava's bl-alert web component.
- *
- * @interface AlertProps
- */
-export interface AlertProps {
-  /**
-   * Alert variant (success, danger, info, warning).
-   *
-   * @default "info"
-   */
-  variant?: AlertVariant;
-
-  /**
-   * Alert description text.
-   */
-  description?: string;
-
-  /**
-   * Icon configuration: boolean to show/hide default icon, or a specific BaklavaIcon.
-   */
-  icon?: boolean | BaklavaIcon;
-
-  /**
-   * Whether to show the close button.
-   *
-   * @default false
-   */
-  closable?: boolean;
-
-  /**
-   * Alert caption text.
-   */
-  caption?: string;
-
-  /**
-   * Whether the alert is closed/collapsed.
-   *
-   * @default false
-   */
-  closed?: boolean;
-}

package/src/alert/index.ts

@@ -1,2 +0,0 @@
-export { default as BvAlert } from "./Alert.vue";
-export type { AlertProps, BlAlertElement } from "./alert.types";

package/src/badge/Badge.spec.ts

@@ -1,28 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-import BvBadge from "./Badge.vue";
-
-describe("BvBadge", () => {
-  it("renders with default props", () => {
-    const wrapper = mount(BvBadge);
-    const blBadge = wrapper.find("bl-badge");
-    expect(blBadge.exists()).toBe(true);
-  });
-
-  it("passes size to bl-badge", () => {
-    const wrapper = mount(BvBadge, {
-      props: { size: "small" },
-    });
-    const blBadge = wrapper.find("bl-badge").element;
-    expect(blBadge.getAttribute("size")).toBe("small");
-  });
-
-  it("renders slot content", () => {
-    const wrapper = mount(BvBadge, {
-      slots: {
-        default: "Badge content",
-      },
-    });
-    expect(wrapper.text()).toContain("Badge content");
-  });
-});

package/src/badge/Badge.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { onMounted } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { BadgeProps } from "./badge.types";
-
-const props = withDefaults(defineProps<BadgeProps>(), {
-  size: "medium",
-  icon: undefined,
-});
-
-onMounted(() => {
-  loadBaklavaResources();
-});
-</script>
-
-<template>
-  <bl-badge v-bind="props">
-    <slot />
-  </bl-badge>
-</template>

package/src/badge/badge.types.ts

@@ -1,7 +0,0 @@
-import type { BaklavaIcon } from "@trendyol/baklava-icons";
-import type { BadgeSize } from "@trendyol/baklava/dist/components/badge/bl-badge";
-
-export interface BadgeProps {
-  size?: BadgeSize;
-  icon?: BaklavaIcon;
-}

package/src/badge/index.ts

@@ -1,2 +0,0 @@
-export { default as BvBadge } from "./Badge.vue";
-export type { BadgeProps } from "./badge.types";

package/src/banner/Banner.spec.ts

@@ -1,111 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { nextTick } from "vue";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import BvBanner from "./Banner.vue";
-
-describe("BvBanner", () => {
-  afterEach(() => {
-    localStorage.clear();
-  });
-
-  it("renders with title", () => {
-    const wrapper = mount(BvBanner, {
-      props: { title: "Important message" },
-    });
-    expect(wrapper.text()).toContain("Important message");
-  });
-
-  it("emits close when close button is clicked", async () => {
-    const wrapper = mount(BvBanner, {
-      props: { title: "Message", close: true },
-    });
-    const closeBtn = wrapper.find(".bv-banner__close-btn");
-    await closeBtn.trigger("click");
-    expect(wrapper.emitted("close")).toHaveLength(1);
-  });
-
-  it("applies color variant via inline style", () => {
-    const wrapper = mount(BvBanner, {
-      props: { title: "Test", color: "success" },
-    });
-    const banner = wrapper.find(".bv-banner").element;
-    expect(banner.getAttribute("style")).toContain("bl-color-success");
-  });
-
-  it("renders action buttons when actions prop provided", async () => {
-    const onClick = () => {};
-    const wrapper = mount(BvBanner, {
-      props: {
-        title: "Actions",
-        actions: [{ label: "Action 1", onClick }],
-      },
-    });
-    expect(wrapper.find(".bv-banner__actions").exists()).toBe(true);
-    await wrapper.find(".bv-banner__action-btn").trigger("click");
-  });
-
-  it("renders as link when to prop provided", () => {
-    const wrapper = mount(BvBanner, {
-      props: { title: "Link", to: "/page" },
-    });
-    expect(wrapper.find(".bv-banner__inner--link").exists()).toBe(true);
-    expect(wrapper.find("bl-link").attributes("href")).toBe("/page");
-  });
-
-  it("renders icon when icon prop is provided", () => {
-    const wrapper = mount(BvBanner, {
-      props: { title: "With icon", icon: "info" },
-    });
-    expect(wrapper.find(".bv-banner__icon").exists()).toBe(true);
-  });
-
-  it("dismisses on mount when localStorage has 'true' for banner id", async () => {
-    localStorage.setItem("banner-test-banner", "true");
-    const wrapper = mount(BvBanner, {
-      props: { title: "Persisted", close: true, id: "test-banner" },
-    });
-    await nextTick();
-    expect(wrapper.find(".bv-banner").exists()).toBe(false);
-  });
-
-  it("persists dismissal to localStorage when closing a banner with id", async () => {
-    const wrapper = mount(BvBanner, {
-      props: { title: "Persist close", close: true, id: "persist-id" },
-    });
-    const closeBtn = wrapper.find(".bv-banner__close-btn");
-    await closeBtn.trigger("click");
-    expect(localStorage.getItem("banner-persist-id")).toBe("true");
-    expect(wrapper.emitted("close")).toHaveLength(1);
-  });
-
-  it("does not persist when id sanitizes to empty string", async () => {
-    const wrapper = mount(BvBanner, {
-      props: { title: "Bad id", close: true, id: "!!!" },
-    });
-    const closeBtn = wrapper.find(".bv-banner__close-btn");
-    await closeBtn.trigger("click");
-    expect(wrapper.emitted("close")).toHaveLength(1);
-    // No key written because sanitized id is empty
-    expect(localStorage.length).toBe(0);
-  });
-
-  it("handles action button without an onClick handler", async () => {
-    const wrapper = mount(BvBanner, {
-      props: {
-        title: "No handler",
-        actions: [{ label: "NoOp" }],
-      },
-    });
-    // Should not throw when clicking an action with no onClick
-    await wrapper.find(".bv-banner__action-btn").trigger("click");
-    expect(wrapper.find(".bv-banner__actions").exists()).toBe(true);
-  });
-
-  it("falls back to primary color when unknown color is given", () => {
-    const wrapper = mount(BvBanner, {
-      props: { title: "Unknown", color: "custom-unknown" as any },
-    });
-    const banner = wrapper.find(".bv-banner").element;
-    expect(banner.getAttribute("style")).toContain("bl-color-primary");
-  });
-});