@baklavue/ui 1.0.0-preview.2

package/src/dialog/Dialog.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+/**
+ * Dialog Component
+ *
+ * A Vue UI kit component for Baklava's `bl-dialog` web component.
+ * Provides a modal overlay for confirmations, forms, and important content
+ * with support for header and footer slots, controllable visibility, and programmatic open/close.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Basic usage with v-model -->
+ * <template>
+ *   <BvButton @click="showDialog = true">Open Dialog</BvButton>
+ *   <BvDialog v-model:open="showDialog" caption="Dialog Title">
+ *     <p>Dialog content goes here.</p>
+ *   </BvDialog>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- With header and footer slots -->
+ * <template>
+ *   <BvDialog v-model:open="showDialog" caption="Confirm Action">
+ *     <p>Are you sure you want to proceed?</p>
+ *     <template #footer>
+ *       <BvButton variant="tertiary" @click="showDialog = false">Cancel</BvButton>
+ *       <BvButton variant="primary" @click="showDialog = false">Confirm</BvButton>
+ *     </template>
+ *   </BvDialog>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Closable with backdrop control -->
+ * <template>
+ *   <BvDialog v-model:open="showDialog" caption="Closable" :closable="true" :backdrop="true">
+ *     <p>This dialog has a close button and backdrop click.</p>
+ *   </BvDialog>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Programmatic control via ref -->
+ * <template>
+ *   <BvButton @click="dialogRef?.open()">Open</BvButton>
+ *   <BvButton @click="dialogRef?.close()">Close</BvButton>
+ *   <BvDialog ref="dialogRef" caption="Programmatic">
+ *     <p>Opened and closed via ref methods.</p>
+ *   </BvDialog>
+ * </template>
+ * ```
+ */
+import { computed, onMounted, ref, watch } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { DialogProps } from "./dialog.types";
+
+const SIZE_TO_WIDTH: Record<string, string> = {
+  small: "320px",
+  medium: "424px",
+  large: "560px",
+};
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  open: false,
+  caption: undefined,
+  closable: undefined,
+  backdrop: undefined,
+  size: undefined,
+});
+
+const emit = defineEmits<{
+  /** Emitted when visibility changes. Use for two-way binding. */
+  "update:open": [open: boolean];
+  /** Emitted when the dialog is opened. */
+  open: [];
+  /** Emitted when the dialog is closed. */
+  close: [];
+}>();
+
+/** Reference to the underlying bl-dialog element. */
+const dialogRef = ref<HTMLElement | null>(null);
+
+/** Computed style for dialog width based on size prop. */
+const dialogStyle = computed(() => {
+  if (!props.size) return undefined;
+  const width = SIZE_TO_WIDTH[props.size.toLowerCase()] ?? props.size;
+  return { "--bl-dialog-width": width };
+});
+
+/** Handles bl-dialog-open event. Syncs state and emits. */
+const handleOpen = () => {
+  emit("update:open", true);
+  emit("open");
+};
+
+/** Handles bl-dialog-close event. Syncs state and emits. */
+const handleClose = () => {
+  emit("update:open", false);
+  emit("close");
+};
+
+/**
+ * Handles bl-dialog-request-close event. Prevents closing when closable or backdrop
+ * is explicitly set to false for the given close source.
+ */
+const handleRequestClose = (
+  e: CustomEvent<{ source: "close-button" | "keyboard" | "backdrop" }>,
+) => {
+  if (props.closable === false && e.detail.source === "close-button") {
+    e.preventDefault();
+  }
+  if (props.backdrop === false && e.detail.source === "backdrop") {
+    e.preventDefault();
+  }
+};
+
+/** Syncs props.open to the bl-dialog element's open property. */
+function getBlDialog(el: HTMLElement | null): { open: boolean } | null {
+  return el as unknown as { open: boolean } | null;
+}
+
+watch(
+  () => props.open,
+  (newValue) => {
+    const blDialog = getBlDialog(dialogRef.value);
+    if (blDialog && blDialog.open !== newValue) {
+      blDialog.open = newValue;
+    }
+  },
+  { immediate: true },
+);
+
+onMounted(() => {
+  loadBaklavaResources();
+
+  const blDialog = getBlDialog(dialogRef.value);
+  if (blDialog && blDialog.open !== props.open) {
+    blDialog.open = props.open;
+  }
+});
+
+defineExpose({
+  /** Opens the dialog programmatically. */
+  open: () => {
+    const blDialog = getBlDialog(dialogRef.value);
+    if (blDialog) blDialog.open = true;
+  },
+  /** Closes the dialog programmatically. */
+  close: () => {
+    const blDialog = getBlDialog(dialogRef.value);
+    if (blDialog) blDialog.open = false;
+  },
+});
+</script>
+
+<template>
+  <bl-dialog
+    ref="dialogRef"
+    :open="open"
+    :caption="caption"
+    :style="dialogStyle"
+    @bl-dialog-open="handleOpen"
+    @bl-dialog-close="handleClose"
+    @bl-dialog-request-close="handleRequestClose"
+  >
+    <div>
+      <slot v-if="$slots['header']" name="header" />
+      <slot />
+    </div>
+    <div v-if="$slots['footer']" slot="secondary-action">
+      <slot name="footer" />
+    </div>
+  </bl-dialog>
+</template>

package/src/dialog/dialog.types.ts

@@ -0,0 +1,17 @@
+/**
+ * Props for the Dialog component.
+ *
+ * @interface DialogProps
+ */
+export interface DialogProps {
+  /** Whether the dialog is visible. */
+  open?: boolean;
+  /** Optional dialog title. Maps to bl-dialog's caption attribute. */
+  caption?: string;
+  /** Whether to show the close button in the header. When false, clicking the X is prevented. */
+  closable?: boolean;
+  /** Whether clicking the backdrop closes the dialog. When false, click-outside is prevented. */
+  backdrop?: boolean;
+  /** Dialog width. Accepts "small", "medium", "large" or a CSS value (e.g. "424px"). */
+  size?: string;
+}

package/src/dialog/index.ts

@@ -0,0 +1,2 @@
+export { default as BvDialog } from "./Dialog.vue";
+export type { DialogProps } from "./dialog.types";

package/src/drawer/Drawer.vue

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

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

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

package/src/dropdown/Dropdown.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+/**
+ * Dropdown Component
+ *
+ * A Vue UI kit component for Baklava's `bl-dropdown`, `bl-dropdown-group`, and `bl-dropdown-item`
+ * web components. Can be used in two modes: slot mode (custom content via slots) or items
+ * mode (declarative menu items with optional grouping).
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Basic usage with label and items -->
+ * <template>
+ *   <BvDropdown label="Actions" :items="menuItems">
+ *     <template #item="{ item }">
+ *       {{ item.caption }}
+ *     </template>
+ *   </BvDropdown>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Items mode with groups -->
+ * <template>
+ *   <BvDropdown label="Menu" :items="groupedItems">
+ *     <template #item="{ item }">
+ *       {{ item.caption }}
+ *     </template>
+ *   </BvDropdown>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Programmatic control via ref -->
+ * <template>
+ *   <BvButton @click="dropdownRef?.open()">Open</BvButton>
+ *   <BvButton @click="dropdownRef?.close()">Close</BvButton>
+ *   <BvDropdown ref="dropdownRef" label="Menu" :items="items">
+ *     <template #item="{ item }">{{ item.caption }}</template>
+ *   </BvDropdown>
+ * </template>
+ * ```
+ */
+import { computed, onMounted, ref, watch } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { DropdownItem, DropdownProps } from "./dropdown.types";
+
+const props = withDefaults(defineProps<DropdownProps>(), {
+  open: false,
+  placement: undefined,
+  disabled: false,
+  trigger: undefined,
+  label: "Menu",
+  variant: undefined,
+  kind: undefined,
+  size: undefined,
+  icon: undefined,
+  items: undefined,
+});
+
+const emit = defineEmits<{
+  /** Emitted when visibility changes. Use for two-way binding. */
+  "update:open": [open: boolean];
+  /** Emitted when the dropdown is opened. */
+  open: [];
+  /** Emitted when the dropdown is closed. */
+  close: [];
+  /** Emitted when a dropdown item is clicked (from bl-dropdown-item-click). */
+  select: [event: CustomEvent];
+}>();
+
+/** Reference to the underlying bl-dropdown element. */
+const dropdownRef = ref<HTMLElement | null>(null);
+
+/** Determines if the component is in items mode (using items prop). */
+const isItemsMode = computed(
+  () => Array.isArray(props.items) && props.items.length > 0,
+);
+
+/** Groups items by groupCaption for rendering bl-dropdown-group. */
+const groupedItems = computed(() => {
+  if (!props.items) return [];
+  const groups = new Map<
+    string | undefined,
+    { item: DropdownItem; index: number }[]
+  >();
+  props.items.forEach((item, index) => {
+    const key = item.groupCaption ?? undefined;
+    const list = groups.get(key) ?? [];
+    list.push({ item, index });
+    groups.set(key, list);
+  });
+  return Array.from(groups.entries()).map(([groupCaption, entries]) => ({
+    groupCaption: groupCaption || undefined,
+    entries,
+  }));
+});
+
+/** Handles bl-dropdown-open event. Syncs state and emits. */
+const handleOpen = () => {
+  emit("update:open", true);
+  emit("open");
+};
+
+/** Handles bl-dropdown-close event. Syncs state and emits. */
+const handleClose = () => {
+  emit("update:open", false);
+  emit("close");
+};
+
+/** Handles bl-dropdown-item-click from items. Bubbles as select event. */
+const handleItemClick = (event: CustomEvent) => {
+  emit("select", event);
+};
+
+type BlDropdownElement = {
+  opened?: boolean;
+  open: () => void;
+  close: () => void;
+};
+
+function getBlDropdown(el: HTMLElement | null): BlDropdownElement | null {
+  return el as unknown as BlDropdownElement | null;
+}
+
+/** Syncs props.open to the bl-dropdown element. */
+watch(
+  () => props.open,
+  (newValue) => {
+    const blDropdown = getBlDropdown(dropdownRef.value);
+    if (blDropdown) {
+      if (newValue && !blDropdown.opened) {
+        blDropdown.open();
+      } else if (!newValue && blDropdown.opened) {
+        blDropdown.close();
+      }
+    }
+  },
+  { immediate: true },
+);
+
+onMounted(() => {
+  loadBaklavaResources();
+
+  const blDropdown = getBlDropdown(dropdownRef.value);
+  if (blDropdown && blDropdown.opened !== props.open) {
+    if (props.open) {
+      blDropdown.open();
+    } else {
+      blDropdown.close();
+    }
+  }
+});
+
+defineExpose({
+  /** Opens the dropdown programmatically. */
+  open: () => {
+    getBlDropdown(dropdownRef.value)?.open();
+  },
+  /** Closes the dropdown programmatically. */
+  close: () => {
+    getBlDropdown(dropdownRef.value)?.close();
+  },
+  /** Toggles the dropdown open/closed state. */
+  toggle: () => {
+    const blDropdown = getBlDropdown(dropdownRef.value);
+    if (blDropdown) {
+      if (blDropdown.opened) {
+        blDropdown.close();
+      } else {
+        blDropdown.open();
+      }
+    }
+  },
+});
+</script>
+
+<template>
+  <bl-dropdown
+    ref="dropdownRef"
+    v-bind="{
+      label: props.label,
+      variant: props.variant,
+      kind: props.kind,
+      size: props.size,
+      icon: props.icon,
+      disabled: props.disabled === true ? true : undefined,
+    }"
+    @bl-dropdown-open="handleOpen"
+    @bl-dropdown-close="handleClose"
+  >
+    <!-- Items mode: render bl-dropdown-group and bl-dropdown-item -->
+    <template v-if="isItemsMode">
+      <template v-for="(group, gi) in groupedItems" :key="gi">
+        <bl-dropdown-group
+          v-if="group.groupCaption"
+          :caption="group.groupCaption"
+        >
+          <bl-dropdown-item
+            v-for="(entry, ii) in group.entries"
+            :key="`${gi}-${ii}`"
+            :icon="entry.item.icon"
+            :disabled="entry.item.disabled === true"
+            @bl-dropdown-item-click="handleItemClick"
+          >
+            <slot name="item" :item="entry.item" :index="entry.index">
+              {{ entry.item.caption }}
+            </slot>
+          </bl-dropdown-item>
+        </bl-dropdown-group>
+        <template v-else>
+          <bl-dropdown-item
+            v-for="(entry, ii) in group.entries"
+            :key="`${gi}-${ii}`"
+            :icon="entry.item.icon"
+            :disabled="entry.item.disabled === true"
+            @bl-dropdown-item-click="handleItemClick"
+          >
+            <slot name="item" :item="entry.item" :index="entry.index">
+              {{ entry.item.caption }}
+            </slot>
+          </bl-dropdown-item>
+        </template>
+      </template>
+    </template>
+    <!-- Slot mode: default slot for custom content -->
+    <slot v-else />
+  </bl-dropdown>
+</template>