@baklavue/ui 1.0.0-preview.4 → 1.0.1

package/src/alert/Alert.vue

@@ -1,199 +0,0 @@
-<script setup lang="ts">
-/**
- * Alert Component
- *
- * A Vue UI kit component for Baklava's `bl-alert` web component.
- * Displays contextual feedback messages with variants (info, success, warning, danger).
- *
- * @component
- * @example
- * ```vue
- * <!-- Basic alert -->
- * <template>
- *   <BvAlert variant="info" description="This is an informational message" />
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- Closable alert with controlled state -->
- * <template>
- *   <BvAlert
- *     variant="warning"
- *     caption="Warning"
- *     closable
- *     :closed="isClosed"
- *     @close="isClosed = true"
- *   >
- *     <p>You can close this alert.</p>
- *   </BvAlert>
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- Programmatic control via ref -->
- * <template>
- *   <BvAlert ref="alertRef" variant="success" closable>
- *     <p>Content</p>
- *   </BvAlert>
- *   <button @click="alertRef?.close()">Close</button>
- * </template>
- * ```
- */
-import { nextTick, onMounted, ref, watch } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { AlertProps, BlAlertElement } from "./alert.types";
-
-/**
- * Component props with default values.
- */
-const props = withDefaults(defineProps<AlertProps>(), {
-  variant: "info",
-  description: undefined,
-  icon: undefined,
-  closable: false,
-  caption: undefined,
-  closed: false,
-});
-
-const emit = defineEmits<{
-  /**
-   * Emitted when the close button is clicked (only when closable is true).
-   */
-  close: [];
-}>();
-
-/**
- * Reference to the underlying bl-alert element.
- */
-const alertRef = ref<HTMLElement | null>(null);
-
-/**
- * Safely casts an HTMLElement to BlAlertElement.
- *
- * @param el - The element to cast.
- * @returns The element typed as BlAlertElement, or null.
- */
-function asBlAlert(el: HTMLElement | null): BlAlertElement | null {
-  return el as BlAlertElement | null;
-}
-
-/**
- * Waits for the bl-alert custom element to be defined.
- * Used when Baklava script loads asynchronously.
- */
-async function waitForBlAlert(): Promise<void> {
-  if (!customElements.get("bl-alert")) {
-    await customElements.whenDefined("bl-alert");
-  }
-}
-
-/**
- * Syncs the `closed` prop state with the underlying bl-alert web component.
- * Calls open() or close() on the element when prop and element state differ.
- *
- * @param el - The bl-alert element to sync.
- */
-function syncWithBlAlert(el: HTMLElement): void {
-  const blAlert = asBlAlert(el);
-  if (!blAlert || typeof blAlert.close !== "function" || typeof blAlert.open !== "function") {
-    return;
-  }
-  if (props.closed && !blAlert.closed) {
-    blAlert.close();
-  } else if (!props.closed && blAlert.closed) {
-    blAlert.open();
-  }
-}
-
-/**
- * Calls open or close on the bl-alert element when available.
- *
- * @param method - The method to call ("open" or "close").
- */
-function callBlAlertMethod(method: "open" | "close"): void {
-  const el = asBlAlert(alertRef.value);
-  if (el && typeof el[method] === "function") {
-    el[method]!();
-  }
-}
-
-/**
- * Watches for changes to the closed prop and syncs with the web component.
- */
-watch(
-  () => props.closed,
-  () => {
-    if (alertRef.value) {
-      syncWithBlAlert(alertRef.value);
-    }
-  },
-);
-
-/**
- * Handles the bl-close event from the underlying web component.
- * Forwards it to the component's emit.
- */
-function handleClose(): void {
-  emit("close");
-}
-
-/**
- * Lifecycle hook: Component mounted.
- *
- * Loads Baklava resources, waits for bl-alert to be defined,
- * then syncs the initial closed state with the web component.
- */
-onMounted(async () => {
-  loadBaklavaResources();
-
-  await nextTick();
-  await waitForBlAlert();
-
-  if (alertRef.value) {
-    syncWithBlAlert(alertRef.value);
-  }
-});
-
-/**
- * Exposed methods for programmatic control of the alert.
- */
-defineExpose({
-  /**
-   * Opens the alert programmatically.
-   *
-   * @public
-   */
-  open: async (): Promise<void> => {
-    await nextTick();
-    callBlAlertMethod("open");
-  },
-
-  /**
-   * Closes the alert programmatically.
-   *
-   * @public
-   */
-  close: async (): Promise<void> => {
-    await nextTick();
-    callBlAlertMethod("close");
-  },
-});
-</script>
-
-<template>
-  <bl-alert
-    ref="alertRef"
-    v-bind="{
-      ...props,
-      closable: props.closable === true ? true : undefined,
-      closed: props.closed,
-    }"
-    @bl-close="handleClose"
-  >
-    <slot v-if="$slots['caption']" name="caption" />
-    <slot v-if="$slots['default']" />
-    <slot v-if="$slots['action']" name="action" />
-  </bl-alert>
-</template>

package/src/alert/alert.types.ts

@@ -1,58 +0,0 @@
-import type { BaklavaIcon } from "@trendyol/baklava-icons";
-import type { AlertVariant } from "@trendyol/baklava/dist/components/alert/bl-alert";
-
-/**
- * Interface for the bl-alert custom element.
- * Extends HTMLElement with Baklava Alert API.
- *
- * @interface BlAlertElement
- */
-export interface BlAlertElement extends HTMLElement {
-  closed?: boolean;
-  open?: () => void;
-  close?: () => void;
-}
-
-/**
- * Props for the Alert component.
- * Wraps Baklava's bl-alert web component.
- *
- * @interface AlertProps
- */
-export interface AlertProps {
-  /**
-   * Alert variant (success, danger, info, warning).
-   *
-   * @default "info"
-   */
-  variant?: AlertVariant;
-
-  /**
-   * Alert description text.
-   */
-  description?: string;
-
-  /**
-   * Icon configuration: boolean to show/hide default icon, or a specific BaklavaIcon.
-   */
-  icon?: boolean | BaklavaIcon;
-
-  /**
-   * Whether to show the close button.
-   *
-   * @default false
-   */
-  closable?: boolean;
-
-  /**
-   * Alert caption text.
-   */
-  caption?: string;
-
-  /**
-   * Whether the alert is closed/collapsed.
-   *
-   * @default false
-   */
-  closed?: boolean;
-}

package/src/alert/index.ts

@@ -1,2 +0,0 @@
-export { default as BvAlert } from "./Alert.vue";
-export type { AlertProps, BlAlertElement } from "./alert.types";

package/src/badge/Badge.vue

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

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

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

package/src/button/Button.vue

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

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

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

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

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

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