@baklavue/ui 1.0.0-preview.4 → 1.0.1

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.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";

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";