@baklavue/ui 1.0.0-preview.2

package/src/badge/Badge.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { BadgeProps } from "./badge.types";
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  size: "medium",
+  icon: undefined,
+});
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <bl-badge v-bind="props">
+    <slot />
+  </bl-badge>
+</template>

package/src/badge/badge.types.ts

@@ -0,0 +1,7 @@
+import type { BaklavaIcon } from "@trendyol/baklava-icons";
+import type { BadgeSize } from "@trendyol/baklava/dist/components/badge/bl-badge";
+
+export interface BadgeProps {
+  size?: BadgeSize;
+  icon?: BaklavaIcon;
+}

package/src/badge/index.ts

@@ -0,0 +1,2 @@
+export { default as BvBadge } from "./Badge.vue";
+export type { BadgeProps } from "./badge.types";

package/src/button/Button.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { ButtonProps } from "./button.types";
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  variant: "primary",
+  kind: "default",
+  size: "medium",
+  disabled: undefined,
+  loading: undefined,
+  loadingLabel: "...",
+  label: undefined,
+  href: undefined,
+  icon: undefined,
+  target: undefined,
+  type: "button",
+  autofocus: undefined,
+});
+
+const emit = defineEmits<{
+  click: [event: CustomEvent<MouseEvent>];
+}>();
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <bl-button
+    v-bind="{
+      ...props,
+      loading: props.loading === true ? true : undefined,
+    }"
+    :style="{
+      '--bl-color-primary': kind === 'custom' ? customClass?.color : undefined,
+      '--bl-color-primary-highlight':
+        kind === 'custom' ? customClass?.highlightColor : undefined,
+    }"
+    @bl-click="emit('click', $event)"
+  >
+    <slot>{{ label }}</slot>
+  </bl-button>
+</template>

package/src/button/button.types.ts

@@ -0,0 +1,30 @@
+import type { BaklavaIcon } from "@trendyol/baklava-icons";
+import type {
+  ButtonKind as BaseButtonKind,
+  ButtonSize,
+  ButtonVariant,
+  TargetType,
+} from "@trendyol/baklava/dist/components/button/bl-button";
+
+type ButtonKind = BaseButtonKind | "custom";
+
+interface CustomClass {
+  color?: string;
+  highlightColor?: string;
+}
+
+export interface ButtonProps {
+  variant?: ButtonVariant;
+  kind?: ButtonKind;
+  size?: ButtonSize;
+  label?: string;
+  loadingLabel?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  href?: string;
+  icon?: BaklavaIcon;
+  target?: TargetType;
+  type?: HTMLButtonElement["type"];
+  autofocus?: boolean;
+  customClass?: CustomClass;
+}

package/src/button/index.ts

@@ -0,0 +1,3 @@
+// Component exports must use the "Bv-" prefix
+export { default as BvButton } from "./Button.vue";
+export type { ButtonProps } from "./button.types";

package/src/checkbox/Checkbox.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+/**
+ * Checkbox Component
+ *
+ * A Vue UI kit component for Baklava's `bl-checkbox` and `bl-checkbox-group` web components.
+ * Can be used as either a single checkbox or as a group container for multiple checkboxes.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Single checkbox -->
+ * <template>
+ *   <BvCheckbox v-model="checked" label="I agree" />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Checkbox group -->
+ * <template>
+ *   <BvCheckbox v-model="selected" :items="items">
+ *     <template #item="{ item }">{{ item.label }}</template>
+ *   </BvCheckbox>
+ * </template>
+ * ```
+ */
+import { computed, onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { CheckboxProps } from "./checkbox.types";
+
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  modelValue: undefined,
+  disabled: undefined,
+  indeterminate: undefined,
+  value: undefined,
+  name: undefined,
+  label: undefined,
+  items: undefined,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean | (string | number)[]];
+  change: [event: CustomEvent];
+  input: [event: CustomEvent];
+}>();
+
+/**
+ * Determines if the component should act as a group container.
+ * When `items` prop is provided and is an array, it acts as a group.
+ */
+const isGroupMode = computed(
+  () => props.items !== undefined && Array.isArray(props.items),
+);
+
+/**
+ * Normalized model value for group mode (always array).
+ */
+const groupValue = computed(() => {
+  const val = props.modelValue;
+  if (Array.isArray(val)) return val;
+  return [];
+});
+
+/**
+ * Check if an item is selected in group mode.
+ */
+const isItemChecked = (item: { value: string | number }) => {
+  return groupValue.value.includes(item.value);
+};
+
+/**
+ * Handles the change event from the single checkbox.
+ */
+const handleSingleChange = (event: CustomEvent) => {
+  const checked = (event.target as HTMLInputElement & { checked?: boolean })
+    ?.checked;
+  emit("change", event);
+  emit("update:modelValue", checked ?? false);
+};
+
+/**
+ * Handles the change event from the checkbox group.
+ * Normalizes value to array (Baklava may emit array or comma-separated string).
+ */
+const handleGroupChange = (event: CustomEvent) => {
+  emit("change", event);
+  const target = event.target as { value?: unknown };
+  let newValue: (string | number)[];
+  if (Array.isArray(target?.value)) {
+    newValue = target.value as (string | number)[];
+  } else if (typeof target?.value === "string") {
+    newValue = target.value ? target.value.split(",").map((s) => s.trim()) : [];
+  } else {
+    newValue = [];
+  }
+  emit("update:modelValue", newValue);
+};
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <!-- Group mode: render as bl-checkbox-group -->
+  <bl-checkbox-group
+    v-if="isGroupMode"
+    :value="groupValue"
+    @bl-checkbox-group-change="handleGroupChange"
+  >
+    <bl-checkbox
+      v-for="(item, index) in props.items"
+      :key="String(item.value)"
+      v-bind="{
+        value: item.value,
+        checked: isItemChecked(item),
+        disabled: item.disabled === true ? true : undefined,
+        indeterminate: item.indeterminate === true ? true : undefined,
+        name: item.name,
+      }"
+    >
+      <slot name="item" :item="item" :index="index">
+        {{ item.label }}
+      </slot>
+    </bl-checkbox>
+  </bl-checkbox-group>
+
+  <!-- Single checkbox mode: render as bl-checkbox -->
+  <bl-checkbox
+    v-else
+    v-bind="{
+      checked:
+        props.modelValue === true
+          ? true
+          : props.modelValue === false
+            ? false
+            : undefined,
+      disabled: props.disabled === true ? true : undefined,
+      indeterminate: props.indeterminate === true ? true : undefined,
+      value: props.value,
+      name: props.name,
+    }"
+    @bl-change="handleSingleChange"
+    @bl-input="emit('input', $event)"
+  >
+    <slot>{{ label }}</slot>
+  </bl-checkbox>
+</template>

package/src/checkbox/checkbox.types.ts

@@ -0,0 +1,108 @@
+/**
+ * Properties for a single checkbox item when used in group mode.
+ *
+ * @interface CheckboxItem
+ */
+export interface CheckboxItem {
+  /**
+   * The value of the checkbox (used for v-model in group mode).
+   */
+  value: string | number;
+
+  /**
+   * The label text displayed next to the checkbox.
+   */
+  label?: string;
+
+  /**
+   * Whether the checkbox is checked.
+   *
+   * @default false
+   */
+  checked?: boolean;
+
+  /**
+   * Whether the checkbox is disabled.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether the checkbox is in indeterminate state.
+   *
+   * @default false
+   */
+  indeterminate?: boolean;
+
+  /**
+   * The name attribute for the checkbox.
+   */
+  name?: string;
+
+  /**
+   * Additional custom data for use in the #item scoped slot.
+   */
+  [key: string]: unknown;
+}
+
+/**
+ * Props for the Checkbox component.
+ *
+ * When `items` prop is provided, the component acts as a checkbox group container.
+ * Otherwise, it acts as a single checkbox.
+ *
+ * @interface CheckboxProps
+ */
+export interface CheckboxProps {
+  /**
+   * Checked state (single mode) or selected values array (group mode).
+   * Use v-model for two-way binding.
+   * - Single mode: boolean
+   * - Group mode: (string | number)[]
+   */
+  modelValue?: boolean | (string | number)[];
+
+  /**
+   * Whether the checkbox is disabled.
+   * Only used when component is in single checkbox mode.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether the checkbox is in indeterminate state.
+   * Only used when component is in single checkbox mode.
+   *
+   * @default false
+   */
+  indeterminate?: boolean;
+
+  /**
+   * The value of the checkbox (for form submission).
+   * Only used when component is in single checkbox mode.
+   */
+  value?: string | number;
+
+  /**
+   * The name attribute for the checkbox.
+   * Only used when component is in single checkbox mode.
+   */
+  name?: string;
+
+  /**
+   * The label text displayed next to the checkbox.
+   * Only used when component is in single checkbox mode.
+   * Can be overridden by default slot content.
+   */
+  label?: string;
+
+  /**
+   * Array of checkbox items to render when in group mode.
+   * Each item will be rendered as a bl-checkbox element inside bl-checkbox-group.
+   * Only used when component is in group mode.
+   */
+  items?: CheckboxItem[];
+
+}

package/src/checkbox/index.ts

@@ -0,0 +1,2 @@
+export { default as BvCheckbox } from "./Checkbox.vue";
+export type { CheckboxProps, CheckboxItem } from "./checkbox.types";

package/src/datepicker/Datepicker.vue

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

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

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