@baklavue/ui 1.0.0 → 1.0.1

package/src/datepicker/Datepicker.spec.ts

@@ -1,129 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-import BvDatepicker from "./Datepicker.vue";
-
-describe("BvDatepicker", () => {
-  it("renders with default props", () => {
-    const wrapper = mount(BvDatepicker);
-    expect(wrapper.find("bl-datepicker").exists()).toBe(true);
-  });
-
-  it("passes label and placeholder to bl-datepicker", () => {
-    const wrapper = mount(BvDatepicker, {
-      props: { label: "Pick date", placeholder: "Select..." },
-    });
-    const el = wrapper.find("bl-datepicker").element;
-    expect(el.getAttribute("label")).toBe("Pick date");
-    expect(el.getAttribute("placeholder")).toBe("Select...");
-  });
-
-  it("passes modelValue to bl-datepicker", async () => {
-    const wrapper = mount(BvDatepicker, {
-      props: { modelValue: "2024-01-15" },
-    });
-    await wrapper.vm.$nextTick();
-    const el = wrapper.find("bl-datepicker").element as HTMLElement & {
-      value?: string;
-    };
-    expect(el.value).toBe("2024-01-15");
-  });
-
-  it("passes disabled and required to bl-datepicker", () => {
-    const wrapper = mount(BvDatepicker, {
-      props: { disabled: true, required: true },
-    });
-    const el = wrapper.find("bl-datepicker").element;
-    expect(el.hasAttribute("disabled")).toBe(true);
-    expect(el.hasAttribute("required")).toBe(true);
-  });
-
-  it("passes min and max as Date objects", () => {
-    const wrapper = mount(BvDatepicker, {
-      props: { min: "2024-01-01", max: "2024-12-31" },
-    });
-    const el = wrapper.find("bl-datepicker").element;
-    expect(el.getAttribute("min-date")).toBeDefined();
-    expect(el.getAttribute("max-date")).toBeDefined();
-  });
-
-  it("emits update:modelValue and change on bl-datepicker-change (single)", async () => {
-    const wrapper = mount(BvDatepicker, { props: { type: "single" } });
-    const date = new Date(2024, 0, 15);
-    wrapper.find("bl-datepicker").element.dispatchEvent(
-      new CustomEvent("bl-datepicker-change", {
-        bubbles: true,
-        detail: [date],
-      }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("update:modelValue")).toEqual([["2024-01-15"]]);
-    expect(wrapper.emitted("change")).toHaveLength(1);
-  });
-
-  it("emits update:modelValue with array for type multiple", async () => {
-    const wrapper = mount(BvDatepicker, { props: { type: "multiple" } });
-    const d1 = new Date(2024, 0, 15);
-    const d2 = new Date(2024, 0, 20);
-    wrapper.find("bl-datepicker").element.dispatchEvent(
-      new CustomEvent("bl-datepicker-change", {
-        bubbles: true,
-        detail: [d1, d2],
-      }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("update:modelValue")).toEqual([
-      [["2024-01-15", "2024-01-20"]],
-    ]);
-  });
-
-  it("emits update:modelValue with range for type range", async () => {
-    const wrapper = mount(BvDatepicker, { props: { type: "range" } });
-    const d1 = new Date(2024, 0, 15);
-    const d2 = new Date(2024, 0, 20);
-    wrapper.find("bl-datepicker").element.dispatchEvent(
-      new CustomEvent("bl-datepicker-change", {
-        bubbles: true,
-        detail: [d1, d2],
-      }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("update:modelValue")).toEqual([
-      [["2024-01-15", "2024-01-20"]],
-    ]);
-  });
-
-  it("emits null when empty for single type", async () => {
-    const wrapper = mount(BvDatepicker, { props: { type: "single" } });
-    wrapper.find("bl-datepicker").element.dispatchEvent(
-      new CustomEvent("bl-datepicker-change", {
-        bubbles: true,
-        detail: [],
-      }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("update:modelValue")).toEqual([[null]]);
-  });
-
-  it("emits empty array when empty for multiple type", async () => {
-    const wrapper = mount(BvDatepicker, { props: { type: "multiple" } });
-    wrapper.find("bl-datepicker").element.dispatchEvent(
-      new CustomEvent("bl-datepicker-change", {
-        bubbles: true,
-        detail: [],
-      }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("update:modelValue")).toEqual([[[]]]);
-  });
-
-  it("converts modelValue array to comma-separated for bl-datepicker", async () => {
-    const wrapper = mount(BvDatepicker, {
-      props: { modelValue: ["2024-01-15", "2024-01-20"] },
-    });
-    await wrapper.vm.$nextTick();
-    const el = wrapper.find("bl-datepicker").element as HTMLElement & {
-      value?: string;
-    };
-    expect(el.value).toBe("2024-01-15,2024-01-20");
-  });
-});

package/src/datepicker/Datepicker.vue

@@ -1,172 +0,0 @@
-<script setup lang="ts">
-/**
- * Datepicker Component
- *
- * A Vue UI kit component for Baklava's `bl-datepicker` web component with v-model support.
- * Provides a calendar picker input for date selection with min/max constraints,
- * placeholder text, and standard form states.
- *
- * Supports single date, multiple dates, and date range selection modes.
- *
- * @component
- * @example
- * ```vue
- * <!-- Basic usage (single) -->
- * <template>
- *   <BvDatepicker v-model="date" label="Select date" />
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- Multiple dates -->
- * <template>
- *   <BvDatepicker v-model="dates" type="multiple" label="Select dates" />
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- Date range -->
- * <template>
- *   <BvDatepicker v-model="range" type="range" label="Select range" />
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- With min/max constraints -->
- * <template>
- *   <BvDatepicker
- *     v-model="date"
- *     label="Date range"
- *     placeholder="Select within range"
- *     :min="minDate"
- *     :max="maxDate"
- *   />
- * </template>
- * ```
- */
-import { computed, nextTick, onMounted, ref, watch } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { DatepickerProps, DatepickerType } from "./datepicker.types";
-
-const props = withDefaults(defineProps<DatepickerProps>(), {
-  modelValue: undefined,
-  type: "single",
-  label: undefined,
-  placeholder: undefined,
-  disabled: undefined,
-  min: undefined,
-  max: undefined,
-  required: undefined,
-  size: undefined,
-  labelFixed: undefined,
-  helpText: undefined,
-});
-
-const emit = defineEmits<{
-  "update:modelValue": [value: string | string[] | [string, string] | null];
-  change: [event: CustomEvent<Date[]>];
-}>();
-
-/**
- * Converts a Date to ISO date string (YYYY-MM-DD) for v-model consistency.
- */
-function toISODateString(date: Date): string {
-  if (Number.isNaN(date.getTime())) return "";
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-}
-
-/**
- * Converts modelValue to Baklava value format (comma-separated string).
- * Baklava expects comma-separated ISO date strings (YYYY-MM-DD).
- */
-const baklavaValue = computed(() => {
-  const val = props.modelValue;
-  if (val == null || (Array.isArray(val) && val.length === 0)) return "";
-  if (Array.isArray(val)) return val.map((d) => String(d)).join(",");
-  return String(val);
-});
-
-/**
- * Handles the bl-datepicker-change event from Baklava.
- * Converts Date[] to the appropriate format based on type and emits update:modelValue.
- */
-const skipNextValueSync = ref(false);
-
-function handleDatepickerChange(event: CustomEvent<Date[]>) {
-  const rawDates = event.detail ?? [];
-  const dates = rawDates.filter(
-    (d) => d instanceof Date && !Number.isNaN(d.getTime()),
-  );
-  const type: DatepickerType = props.type ?? "single";
-
-  let value: string | string[] | [string, string] | null;
-
-  if (dates.length === 0) {
-    value = type === "multiple" ? [] : null;
-  } else if (type === "single") {
-    value = toISODateString(dates[0]);
-  } else if (type === "multiple") {
-    value = dates.map(toISODateString);
-  } else if (type === "range") {
-    value = [
-      toISODateString(dates[0]),
-      toISODateString(dates[1] ?? dates[0]),
-    ] as [string, string];
-  } else {
-    value = null;
-  }
-
-  skipNextValueSync.value = true;
-  emit("change", event);
-  emit("update:modelValue", value);
-  nextTick(() => {
-    skipNextValueSync.value = false;
-  });
-}
-
-const datepickerRef = ref<HTMLElement | null>(null);
-
-// Sync value to web component property when modelValue changes externally.
-// Skip sync when change originated from datepicker to avoid duplicate values in multiple/range mode.
-watch(
-  [datepickerRef, baklavaValue],
-  ([el, val]) => {
-    if (skipNextValueSync.value || !el) return;
-    (el as HTMLUnknownElement & { value?: string }).value = val ?? "";
-  },
-  { immediate: true },
-);
-
-onMounted(async () => {
-  loadBaklavaResources();
-  // Wait for custom element to be defined before value can be set
-  if (!customElements.get("bl-datepicker")) {
-    await customElements.whenDefined("bl-datepicker");
-  }
-});
-</script>
-
-<template>
-  <bl-datepicker
-    ref="datepickerRef"
-    :type="props.type"
-    :label="props.label"
-    :placeholder="props.placeholder"
-    :disabled="props.disabled === true ? true : undefined"
-    :required="props.required === true ? true : undefined"
-    :size="props.size"
-    :label-fixed="props.labelFixed === true ? true : undefined"
-    :help-text="props.helpText"
-    :min-date="props.min ? new Date(props.min) : undefined"
-    :max-date="props.max ? new Date(props.max) : undefined"
-    @bl-datepicker-change="handleDatepickerChange"
-  >
-    <slot />
-  </bl-datepicker>
-</template>

package/src/datepicker/datepicker.types.ts

@@ -1,39 +0,0 @@
-import type { InputSize } from "@trendyol/baklava/dist/components/input/bl-input";
-
-/**
- * Calendar selection type.
- * - single: One date selection
- * - multiple: Multiple dates selection
- * - range: Date range selection (start and end)
- */
-export type DatepickerType = "single" | "multiple" | "range";
-
-/**
- * Props for the BvDatepicker component.
- *
- * @see BvDatepicker
- */
-export interface DatepickerProps {
-  /** Selected date(s) (v-model). For single: ISO string. For multiple: string[]. For range: [start, end]. */
-  modelValue?: string | string[] | [string, string] | null;
-  /** Selection mode: single date, multiple dates, or date range */
-  type?: DatepickerType;
-  /** Datepicker input label */
-  label?: string;
-  /** Placeholder text when no date is selected */
-  placeholder?: string;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Minimum selectable date, ISO format YYYY-MM-DD */
-  min?: string;
-  /** Maximum selectable date, ISO format YYYY-MM-DD */
-  max?: string;
-  /** Required field for form validation */
-  required?: boolean;
-  /** Input size (small, medium, large) */
-  size?: InputSize;
-  /** Makes the label fixed positioned */
-  labelFixed?: boolean;
-  /** Help text displayed below the input */
-  helpText?: string;
-}

package/src/datepicker/index.ts

@@ -1,2 +0,0 @@
-export type { DatepickerProps, DatepickerType } from "./datepicker.types";
-export { default as BvDatepicker } from "./Datepicker.vue";

package/src/dialog/Dialog.spec.ts

@@ -1,111 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-import BvDialog from "./Dialog.vue";
-
-describe("BvDialog", () => {
-  it("renders with default props", () => {
-    const wrapper = mount(BvDialog);
-    expect(wrapper.find("bl-dialog").exists()).toBe(true);
-  });
-
-  it("passes caption and open to bl-dialog", () => {
-    const wrapper = mount(BvDialog, {
-      props: { caption: "Title", open: true },
-    });
-    const el = wrapper.find("bl-dialog").element;
-    expect(el.getAttribute("caption")).toBe("Title");
-  });
-
-  it("emits update:open and open when bl-dialog fires bl-dialog-open", async () => {
-    const wrapper = mount(BvDialog);
-    wrapper.find("bl-dialog").element.dispatchEvent(
-      new CustomEvent("bl-dialog-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-dialog fires bl-dialog-close", async () => {
-    const wrapper = mount(BvDialog, { props: { open: true } });
-    wrapper.find("bl-dialog").element.dispatchEvent(
-      new CustomEvent("bl-dialog-close", { bubbles: true }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("update:open")).toEqual([[false]]);
-    expect(wrapper.emitted("close")).toHaveLength(1);
-  });
-
-  it("prevents close when closable is false and source is close-button", async () => {
-    const wrapper = mount(BvDialog, {
-      props: { open: true, closable: false },
-    });
-    const el = wrapper.find("bl-dialog").element;
-    const event = new CustomEvent("bl-dialog-request-close", {
-      bubbles: true,
-      cancelable: true,
-      detail: { source: "close-button" },
-    });
-    el.dispatchEvent(event);
-    expect(event.defaultPrevented).toBe(true);
-  });
-
-  it("prevents close when backdrop is false and source is backdrop", async () => {
-    const wrapper = mount(BvDialog, {
-      props: { open: true, backdrop: false },
-    });
-    const el = wrapper.find("bl-dialog").element;
-    const event = new CustomEvent("bl-dialog-request-close", {
-      bubbles: true,
-      cancelable: true,
-      detail: { source: "backdrop" },
-    });
-    el.dispatchEvent(event);
-    expect(event.defaultPrevented).toBe(true);
-  });
-
-  it("does not prevent close when source is keyboard", async () => {
-    const wrapper = mount(BvDialog, {
-      props: { open: true, closable: false },
-    });
-    const el = wrapper.find("bl-dialog").element;
-    const event = new CustomEvent("bl-dialog-request-close", {
-      bubbles: true,
-      cancelable: true,
-      detail: { source: "keyboard" },
-    });
-    el.dispatchEvent(event);
-    expect(event.defaultPrevented).toBe(false);
-  });
-
-  it("applies size width via style", () => {
-    const wrapper = mount(BvDialog, { props: { size: "small" } });
-    const el = wrapper.find("bl-dialog").element;
-    expect(el.getAttribute("style")).toContain("--bl-dialog-width");
-  });
-
-  it("exposes open and close methods", () => {
-    const wrapper = mount(BvDialog);
-    const vm = wrapper.vm as unknown as { open: () => void; close: () => void };
-    expect(typeof vm.open).toBe("function");
-    expect(typeof vm.close).toBe("function");
-  });
-
-  it("calls open on bl-dialog when exposed open is invoked", async () => {
-    const wrapper = mount(BvDialog);
-    const blDialog = wrapper.find("bl-dialog").element as { open?: boolean };
-    const vm = wrapper.vm as unknown as { open: () => void };
-    vm.open();
-    await wrapper.vm.$nextTick();
-    expect(blDialog.open).toBe(true);
-  });
-
-  it("calls close on bl-dialog when exposed close is invoked", async () => {
-    const wrapper = mount(BvDialog, { props: { open: true } });
-    const blDialog = wrapper.find("bl-dialog").element as { open?: boolean };
-    const vm = wrapper.vm as unknown as { close: () => void };
-    vm.close();
-    await wrapper.vm.$nextTick();
-    expect(blDialog.open).toBe(false);
-  });
-});

package/src/dialog/Dialog.vue

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

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

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