@baklavue/ui 1.0.0-preview.4 → 1.0.1

package/src/dropdown/Dropdown.vue

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

package/src/dropdown/dropdown.types.ts

@@ -1,110 +0,0 @@
-import type { BaklavaIcon } from "@trendyol/baklava-icons";
-import type {
-  ButtonKind,
-  ButtonSize,
-  ButtonVariant,
-} from "@trendyol/baklava/dist/components/button/bl-button";
-
-/**
- * Properties for a dropdown item when used in items mode.
- *
- * @interface DropdownItem
- */
-export interface DropdownItem {
-  /**
-   * The caption text displayed for the item.
-   */
-  caption?: string;
-
-  /**
-   * Icon name for the item. Shows icon with bl-icon component.
-   */
-  icon?: BaklavaIcon;
-
-  /**
-   * Whether the item is disabled.
-   *
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Optional group caption. Items with the same groupCaption are rendered
-   * inside a bl-dropdown-group with that caption.
-   */
-  groupCaption?: string;
-
-  /**
-   * Additional custom data for use in the #item scoped slot.
-   */
-  [key: string]: unknown;
-}
-
-/**
- * Props for the Dropdown component.
- *
- * When `items` prop is provided, the component acts in items mode using
- * bl-dropdown-group and bl-dropdown-item. Otherwise, it uses slots for
- * trigger and content.
- *
- * @interface DropdownProps
- */
-export interface DropdownProps {
-  /**
-   * Whether the dropdown is open.
-   *
-   * @default false
-   */
-  open?: boolean;
-
-  /**
-   * Placement of the dropdown popover relative to the trigger.
-   * Maps to bl-popover placement.
-   */
-  placement?: string;
-
-  /**
-   * Whether the dropdown trigger is disabled.
-   *
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Reserved for custom trigger configuration.
-   */
-  trigger?: string;
-
-  /**
-   * Label for the built-in dropdown button.
-   * Used when in items mode or when not using trigger slot.
-   */
-  label?: string;
-
-  /**
-   * Button variant for the built-in dropdown button.
-   */
-  variant?: ButtonVariant;
-
-  /**
-   * Button kind for the built-in dropdown button.
-   */
-  kind?: ButtonKind;
-
-  /**
-   * Button size for the built-in dropdown button.
-   */
-  size?: ButtonSize;
-
-  /**
-   * Icon name for the built-in dropdown button.
-   */
-  icon?: string;
-
-  /**
-   * Array of dropdown items to render when in items mode.
-   * Each item will be rendered as a bl-dropdown-item (optionally grouped
-   * via bl-dropdown-group). Content for each item is provided via the #item slot.
-   */
-  items?: DropdownItem[];
-}

package/src/dropdown/index.ts

@@ -1,2 +0,0 @@
-export { default as BvDropdown } from "./Dropdown.vue";
-export type { DropdownProps, DropdownItem } from "./dropdown.types";