@baklavue/ui 1.0.0 → 1.0.2-preview.1

package/src/drawer/Drawer.spec.ts

@@ -1,102 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-import BvDrawer from "./Drawer.vue";
-
-describe("BvDrawer", () => {
-  it("renders with default props", () => {
-    const wrapper = mount(BvDrawer);
-    expect(wrapper.find("bl-drawer").exists()).toBe(true);
-  });
-
-  it("passes caption and open to bl-drawer", () => {
-    const wrapper = mount(BvDrawer, {
-      props: { caption: "Title", open: true },
-      slots: { default: "Content" },
-    });
-    const el = wrapper.find("bl-drawer").element;
-    expect(el.getAttribute("caption")).toBe("Title");
-  });
-
-  it("emits update:open and open when bl-drawer fires bl-drawer-open", async () => {
-    const wrapper = mount(BvDrawer, { slots: { default: "Content" } });
-    wrapper.find("bl-drawer").element.dispatchEvent(
-      new CustomEvent("bl-drawer-open", { bubbles: true }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("update:open")).toEqual([[true]]);
-    expect(wrapper.emitted("open")).toHaveLength(1);
-  });
-
-  it("emits update:open and close when bl-drawer fires bl-drawer-close", async () => {
-    const wrapper = mount(BvDrawer, {
-      props: { open: true },
-      slots: { default: "Content" },
-    });
-    wrapper.find("bl-drawer").element.dispatchEvent(
-      new CustomEvent("bl-drawer-close", { bubbles: true }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("update:open")).toEqual([[false]]);
-    expect(wrapper.emitted("close")).toHaveLength(1);
-  });
-
-  it("passes width for size preset", () => {
-    const wrapper = mount(BvDrawer, { props: { width: "small" } });
-    const el = wrapper.find("bl-drawer").element;
-    expect(el.getAttribute("width")).toBe("320px");
-  });
-
-  it("maps medium width preset to 424px", () => {
-    const wrapper = mount(BvDrawer, { props: { width: "medium" } });
-    expect(wrapper.find("bl-drawer").element.getAttribute("width")).toBe("424px");
-  });
-
-  it("maps large width preset to 560px", () => {
-    const wrapper = mount(BvDrawer, { props: { width: "large" } });
-    expect(wrapper.find("bl-drawer").element.getAttribute("width")).toBe("560px");
-  });
-
-  it("passes custom CSS width through unchanged", () => {
-    const wrapper = mount(BvDrawer, { props: { width: "500px" } });
-    expect(wrapper.find("bl-drawer").element.getAttribute("width")).toBe("500px");
-  });
-
-  it("passes embedUrl and externalLink to bl-drawer", () => {
-    const wrapper = mount(BvDrawer, {
-      props: { embedUrl: "https://example.com", externalLink: "https://link.com" },
-    });
-    const el = wrapper.find("bl-drawer").element;
-    expect(el.getAttribute("embed-url")).toBe("https://example.com");
-    expect(el.getAttribute("external-link")).toBe("https://link.com");
-  });
-
-  it("exposes open and close methods", () => {
-    const wrapper = mount(BvDrawer);
-    const vm = wrapper.vm as unknown as { open: () => void; close: () => void };
-    expect(typeof vm.open).toBe("function");
-    expect(typeof vm.close).toBe("function");
-  });
-
-  it("open() exposed method sets open property on the element", () => {
-    const wrapper = mount(BvDrawer);
-    const vm = wrapper.vm as unknown as { open: () => void };
-    vm.open();
-    const el = wrapper.find("bl-drawer").element as unknown as { open: boolean };
-    expect(el.open).toBe(true);
-  });
-
-  it("close() exposed method sets open property to false on the element", () => {
-    const wrapper = mount(BvDrawer, { props: { open: true } });
-    const vm = wrapper.vm as unknown as { close: () => void };
-    vm.close();
-    const el = wrapper.find("bl-drawer").element as unknown as { open: boolean };
-    expect(el.open).toBe(false);
-  });
-
-  it("syncs open prop change to the underlying element", async () => {
-    const wrapper = mount(BvDrawer, { props: { open: false } });
-    await wrapper.setProps({ open: true });
-    const el = wrapper.find("bl-drawer").element as unknown as { open: boolean };
-    expect(el.open).toBe(true);
-  });
-});

package/src/drawer/Drawer.vue

@@ -1,162 +0,0 @@
-<script setup lang="ts">
-/**
- * Drawer Component
- *
- * A Vue UI kit component for Baklava's `bl-drawer` web component.
- * Provides a side drawer for supplemental content with support for caption,
- * embedded iframe content, external link, and programmable width.
- *
- * @component
- * @example
- * ```vue
- * <!-- Basic usage -->
- * <template>
- *   <BvButton @click="showDrawer = true">Open Drawer</BvButton>
- *   <BvDrawer v-model:open="showDrawer">
- *     <p>Drawer content goes here.</p>
- *   </BvDrawer>
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- With caption -->
- * <template>
- *   <BvDrawer v-model:open="showDrawer" caption="Drawer Title">
- *     <p>Content with title.</p>
- *   </BvDrawer>
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- With embed URL (iframe) -->
- * <template>
- *   <BvDrawer v-model:open="showDrawer" embed-url="https://example.com" />
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- With width -->
- * <template>
- *   <BvDrawer v-model:open="showDrawer" width="large" caption="Wide Drawer">
- *     <p>Wider drawer content.</p>
- *   </BvDrawer>
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- Programmatic control via ref -->
- * <template>
- *   <BvButton @click="drawerRef?.open()">Open</BvButton>
- *   <BvButton @click="drawerRef?.close()">Close</BvButton>
- *   <BvDrawer ref="drawerRef" caption="Programmatic">
- *     <p>Opened and closed via ref methods.</p>
- *   </BvDrawer>
- * </template>
- * ```
- */
-import { computed, onMounted, ref, watch } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { DrawerProps } from "./drawer.types";
-
-const WIDTH_TO_PX: Record<string, string> = {
-  small: "320px",
-  medium: "424px",
-  large: "560px",
-};
-
-const props = withDefaults(defineProps<DrawerProps>(), {
-  open: false,
-  caption: undefined,
-  embedUrl: undefined,
-  externalLink: undefined,
-  width: undefined,
-});
-
-const emit = defineEmits<{
-  /** Emitted when visibility changes. Use for two-way binding. */
-  "update:open": [open: boolean];
-  /** Emitted when the drawer is opened. */
-  open: [];
-  /** Emitted when the drawer is closed. */
-  close: [];
-}>();
-
-/** Reference to the underlying bl-drawer element. */
-const drawerRef = ref<HTMLElement | null>(null);
-
-/** Computed width for bl-drawer. Maps small/medium/large to px or passes CSS value. */
-const drawerWidth = computed(() => {
-  if (!props.width) return undefined;
-  const key = props.width.toLowerCase();
-  return WIDTH_TO_PX[key] ?? props.width;
-});
-
-/** Handles bl-drawer-open event. Syncs state and emits. */
-const handleOpen = () => {
-  emit("update:open", true);
-  emit("open");
-};
-
-/** Handles bl-drawer-close event. Syncs state and emits. */
-const handleClose = () => {
-  emit("update:open", false);
-  emit("close");
-};
-
-/** Syncs props.open to the bl-drawer element's open property. */
-function getBlDrawer(el: HTMLElement | null): { open: boolean } | null {
-  return el as unknown as { open: boolean } | null;
-}
-
-watch(
-  () => props.open,
-  (newValue) => {
-    const blDrawer = getBlDrawer(drawerRef.value);
-    if (blDrawer && blDrawer.open !== newValue) {
-      blDrawer.open = newValue;
-    }
-  },
-  { immediate: true },
-);
-
-onMounted(() => {
-  loadBaklavaResources();
-
-  const blDrawer = getBlDrawer(drawerRef.value);
-  if (blDrawer && blDrawer.open !== props.open) {
-    blDrawer.open = props.open;
-  }
-});
-
-defineExpose({
-  /** Opens the drawer programmatically. */
-  open: () => {
-    const blDrawer = getBlDrawer(drawerRef.value);
-    if (blDrawer) blDrawer.open = true;
-  },
-  /** Closes the drawer programmatically. */
-  close: () => {
-    const blDrawer = getBlDrawer(drawerRef.value);
-    if (blDrawer) blDrawer.open = false;
-  },
-});
-</script>
-
-<template>
-  <bl-drawer
-    ref="drawerRef"
-    :open="open"
-    :caption="caption"
-    :embed-url="embedUrl"
-    :external-link="externalLink"
-    :width="drawerWidth"
-    @bl-drawer-open="handleOpen"
-    @bl-drawer-close="handleClose"
-  >
-    <slot />
-  </bl-drawer>
-</template>

package/src/drawer/drawer.types.ts

@@ -1,17 +0,0 @@
-/**
- * Props for the Drawer component.
- *
- * @interface DrawerProps
- */
-export interface DrawerProps {
-  /** Whether the drawer is visible. */
-  open?: boolean;
-  /** Drawer title. Maps to bl-drawer's caption attribute. */
-  caption?: string;
-  /** Iframe URL for embedded content. When set, drawer shows iframe instead of slot. */
-  embedUrl?: string;
-  /** External link URL - adds a button in the header. */
-  externalLink?: string;
-  /** Drawer width. Accepts "small", "medium", "large" or CSS value (e.g. "424px"). */
-  width?: string;
-}

package/src/drawer/index.ts

@@ -1,2 +0,0 @@
-export { default as BvDrawer } from "./Drawer.vue";
-export type { DrawerProps } from "./drawer.types";

package/src/dropdown/Dropdown.spec.ts

@@ -1,207 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { nextTick } from "vue";
-import { describe, expect, it } from "vitest";
-import BvDropdown from "./Dropdown.vue";
-
-describe("BvDropdown", () => {
-  it("renders with label and items", () => {
-    const wrapper = mount(BvDropdown, {
-      props: {
-        label: "Menu",
-        items: [
-          { value: "a", caption: "Option A" },
-          { value: "b", caption: "Option B" },
-        ],
-      },
-      slots: { item: ({ item }: { item: { caption: string } }) => item.caption },
-    });
-    expect(wrapper.find("bl-dropdown").exists()).toBe(true);
-    expect(wrapper.text()).toContain("Option A");
-    expect(wrapper.text()).toContain("Option B");
-  });
-
-  it("passes disabled to bl-dropdown", () => {
-    const wrapper = mount(BvDropdown, {
-      props: { label: "Menu", disabled: true, items: [] },
-    });
-    expect(wrapper.find("bl-dropdown").element.hasAttribute("disabled")).toBe(
-      true,
-    );
-  });
-
-  it("emits update:open and open when bl-dropdown fires bl-dropdown-open", async () => {
-    const wrapper = mount(BvDropdown, {
-      props: { label: "Menu", items: [] },
-    });
-    wrapper.find("bl-dropdown").element.dispatchEvent(
-      new CustomEvent("bl-dropdown-open", { bubbles: true }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("update:open")).toEqual([[true]]);
-    expect(wrapper.emitted("open")).toHaveLength(1);
-  });
-
-  it("emits update:open and close when bl-dropdown fires bl-dropdown-close", async () => {
-    const wrapper = mount(BvDropdown, {
-      props: { label: "Menu", items: [], open: true },
-    });
-    wrapper.find("bl-dropdown").element.dispatchEvent(
-      new CustomEvent("bl-dropdown-close", { bubbles: true }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("update:open")).toEqual([[false]]);
-    expect(wrapper.emitted("close")).toHaveLength(1);
-  });
-
-  it("emits select when dropdown item is clicked", async () => {
-    const wrapper = mount(BvDropdown, {
-      props: {
-        label: "Menu",
-        items: [{ value: "a", caption: "Option A" }],
-      },
-      slots: { item: ({ item }: { item: { caption: string } }) => item.caption },
-    });
-    const item = wrapper.find("bl-dropdown-item");
-    const event = new CustomEvent("bl-dropdown-item-click", { bubbles: true });
-    item.element.dispatchEvent(event);
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("select")).toHaveLength(1);
-    expect(wrapper.emitted("select")![0][0]).toBe(event);
-  });
-
-  it("renders items with groups when groupCaption is set", () => {
-    const wrapper = mount(BvDropdown, {
-      props: {
-        label: "Menu",
-        items: [
-          { value: "a", caption: "Option A", groupCaption: "Group 1" },
-          { value: "b", caption: "Option B", groupCaption: "Group 1" },
-        ],
-      },
-      slots: { item: ({ item }: { item: { caption: string } }) => item.caption },
-    });
-    const group = wrapper.find("bl-dropdown-group");
-    expect(group.exists()).toBe(true);
-    expect(group.attributes("caption")).toBe("Group 1");
-  });
-
-  it("exposes open, close, and toggle methods", () => {
-    const wrapper = mount(BvDropdown, {
-      props: { label: "Menu", items: [] },
-    });
-    const vm = wrapper.vm as unknown as {
-      open: () => void;
-      close: () => void;
-      toggle: () => void;
-    };
-    expect(typeof vm.open).toBe("function");
-    expect(typeof vm.close).toBe("function");
-    expect(typeof vm.toggle).toBe("function");
-  });
-
-  it("calls open on bl-dropdown when exposed open is invoked", () => {
-    const wrapper = mount(BvDropdown, {
-      props: { label: "Menu", items: [] },
-    });
-    const vm = wrapper.vm as unknown as { open: () => void };
-    const blDropdown = wrapper.find("bl-dropdown").element as unknown as {
-      opened?: boolean;
-      open: () => void;
-    };
-    vm.open();
-    expect(blDropdown.opened).toBe(true);
-  });
-
-  it("calls close on bl-dropdown when exposed close is invoked", () => {
-    const wrapper = mount(BvDropdown, {
-      props: { label: "Menu", items: [], open: true },
-    });
-    const vm = wrapper.vm as unknown as { close: () => void };
-    const blDropdown = wrapper.find("bl-dropdown").element as unknown as {
-      opened?: boolean;
-      close: () => void;
-    };
-    vm.close();
-    expect(blDropdown.opened).toBe(false);
-  });
-
-  it("syncs open state via watch when prop changes from false to true", async () => {
-    const wrapper = mount(BvDropdown, {
-      props: { label: "Menu", items: [], open: false },
-    });
-    const blDropdown = wrapper.find("bl-dropdown").element as unknown as {
-      opened?: boolean;
-    };
-    expect(blDropdown.opened).toBe(false);
-    await wrapper.setProps({ open: true });
-    expect(blDropdown.opened).toBe(true);
-  });
-
-  it("syncs open state via watch when prop changes from true to false", async () => {
-    const wrapper = mount(BvDropdown, {
-      props: { label: "Menu", items: [], open: false },
-    });
-    const blDropdown = wrapper.find("bl-dropdown").element as unknown as {
-      opened?: boolean;
-    };
-    // First open it
-    await wrapper.setProps({ open: true });
-    expect(blDropdown.opened).toBe(true);
-    // Then close it
-    await wrapper.setProps({ open: false });
-    expect(blDropdown.opened).toBe(false);
-  });
-
-  it("toggle closes when dropdown is opened", () => {
-    const wrapper = mount(BvDropdown, {
-      props: { label: "Menu", items: [] },
-    });
-    const vm = wrapper.vm as unknown as {
-      open: () => void;
-      toggle: () => void;
-    };
-    const blDropdown = wrapper.find("bl-dropdown").element as unknown as {
-      opened?: boolean;
-    };
-    // Open first
-    vm.open();
-    expect(blDropdown.opened).toBe(true);
-    // Toggle should close
-    vm.toggle();
-    expect(blDropdown.opened).toBe(false);
-  });
-
-  it("toggle opens when dropdown is closed", () => {
-    const wrapper = mount(BvDropdown, {
-      props: { label: "Menu", items: [] },
-    });
-    const vm = wrapper.vm as unknown as { toggle: () => void };
-    const blDropdown = wrapper.find("bl-dropdown").element as unknown as {
-      opened?: boolean;
-    };
-    expect(blDropdown.opened).toBe(false);
-    vm.toggle();
-    expect(blDropdown.opened).toBe(true);
-  });
-
-  it("renders item captions via default fallback when no item slot provided", () => {
-    const wrapper = mount(BvDropdown, {
-      props: {
-        label: "Menu",
-        items: [
-          { value: "x", caption: "Fallback Caption" },
-        ],
-      },
-    });
-    expect(wrapper.text()).toContain("Fallback Caption");
-  });
-
-  it("renders slot mode content when no items provided", () => {
-    const wrapper = mount(BvDropdown, {
-      props: { label: "Menu" },
-      slots: { default: '<div class="custom-content">Custom</div>' },
-    });
-    expect(wrapper.find(".custom-content").exists()).toBe(true);
-    expect(wrapper.text()).toContain("Custom");
-  });
-});