@baklavue/ui 1.0.0-preview.2

package/src/dropdown/dropdown.types.ts

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

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

package/src/icon/Icon.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+/**
+ * Icon Component
+ *
+ * A Vue UI kit component for Baklava's `bl-icon` web component.
+ * Provides icon display with support for name, size, color, and custom slot content.
+ * Size and color are applied via CSS (font-size, color) as per Baklava's API.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Basic usage -->
+ * <template>
+ *   <BvIcon name="home" />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- With size -->
+ * <template>
+ *   <BvIcon name="settings" size="24px" />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- With color -->
+ * <template>
+ *   <BvIcon name="info" color="#0066cc" />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Custom slot for custom SVG -->
+ * <template>
+ *   <BvIcon>
+ *     <svg>...</svg>
+ *   </BvIcon>
+ * </template>
+ * ```
+ */
+import { computed, onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { IconProps } from "./icon.types";
+
+/**
+ * Component props with default values.
+ */
+const props = withDefaults(defineProps<IconProps>(), {
+  name: undefined,
+  size: undefined,
+  color: undefined,
+});
+
+/**
+ * Component events.
+ */
+const emit = defineEmits<{
+  /**
+   * Emitted when the SVG icon has loaded.
+   *
+   * @param {string} detail - Event detail from bl-load.
+   */
+  load: [detail: string];
+  /**
+   * Emitted when the SVG icon failed to load.
+   *
+   * @param {string} detail - Event detail from bl-error.
+   */
+  error: [detail: string];
+}>();
+
+/**
+ * Computed style object for size and color.
+ * Maps to Baklava's font-size and color CSS properties.
+ */
+const iconStyle = computed(() => ({
+  ...(props.size && { fontSize: props.size }),
+  ...(props.color && { color: props.color }),
+}));
+
+/**
+ * Lifecycle hook: Component mounted.
+ * Loads Baklava resources (icons, styles).
+ */
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <bl-icon
+    :name="props.name"
+    :style="iconStyle"
+    @bl-load="emit('load', ($event as CustomEvent<string>).detail)"
+    @bl-error="emit('error', ($event as CustomEvent<string>).detail)"
+  >
+    <slot />
+  </bl-icon>
+</template>

package/src/icon/icon.types.ts

@@ -0,0 +1,25 @@
+import type { BaklavaIcon } from "@trendyol/baklava-icons";
+
+/**
+ * Props for the Icon component.
+ * Wraps Baklava's bl-icon web component with Vue-friendly props.
+ */
+export interface IconProps {
+  /**
+   * Icon name from Baklava icons set.
+   * @see https://baklava.trendyol.com for available icons.
+   */
+  name?: BaklavaIcon;
+
+  /**
+   * Icon size as a CSS value (e.g. `"24px"`, `"1.5rem"`).
+   * Maps to the `font-size` CSS property on bl-icon.
+   */
+  size?: string;
+
+  /**
+   * Icon color as a CSS value (e.g. `"#0066cc"`, `"red"`, `"currentColor"`).
+   * Maps to the `color` CSS property on bl-icon.
+   */
+  color?: string;
+}

package/src/icon/index.ts

@@ -0,0 +1,2 @@
+export { default as BvIcon } from "./Icon.vue";
+export type { IconProps } from "./icon.types";

package/src/index.ts

@@ -0,0 +1,37 @@
+/**
+ * Component Exports
+ * 
+ * IMPORTANT: All components MUST be exported with the "Bv-" prefix.
+ * Example: BvButton, BvInput, BvBadge, etc.
+ * 
+ * This convention ensures consistency and prevents naming conflicts.
+ * Each component's index.ts file should export: export { default as Bv[ComponentName] } from "./[ComponentName].vue";
+ */
+
+export * from "./accordion";
+export * from "./alert";
+export * from "./badge";
+export * from "./button";
+export * from "./checkbox";
+export * from "./datepicker";
+export * from "./dialog";
+export * from "./drawer";
+export * from "./dropdown";
+export * from "./icon";
+export * from "./input";
+export * from "./link";
+export * from "./notification";
+export * from "./pagination";
+export * from "./radio";
+export * from "./select";
+export * from "./spinner";
+export * from "./split-button";
+export * from "./stepper";
+export * from "./switch";
+export * from "./tab";
+export * from "./table";
+export * from "./tag";
+export * from "./textarea";
+export * from "./tooltip";
+
+export { loadBaklavaResources } from "./utils/loadBaklavaResources";

package/src/input/Input.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+/**
+ * Input Component
+ *
+ * A Vue UI kit component for Baklava's `bl-input` web component with full v-model support
+ * and TypeScript types. Supports text, email, password, number, date, time, and
+ * other input types with validation, help text, loading state, and icons.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Basic usage -->
+ * <template>
+ *   <BvInput v-model="value" label="Email" placeholder="Enter your email" />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- With validation -->
+ * <template>
+ *   <BvInput
+ *     v-model="email"
+ *     type="email"
+ *     label="Email"
+ *     required
+ *     :invalid-text="emailError"
+ *     @invalid="handleInvalid"
+ *   />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- With icon -->
+ * <template>
+ *   <BvInput v-model="search" label="Search" icon="search" />
+ * </template>
+ * ```
+ */
+import { onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { InputProps } from "./input.types";
+
+/**
+ * Component props with default values.
+ */
+const props = withDefaults(defineProps<InputProps>(), {
+  modelValue: undefined,
+  name: undefined,
+  type: "text",
+  label: undefined,
+  placeholder: undefined,
+  required: undefined,
+  minlength: undefined,
+  maxlength: undefined,
+  min: undefined,
+  max: undefined,
+  pattern: undefined,
+  step: undefined,
+  autocomplete: undefined,
+  inputmode: undefined,
+  autofocus: undefined,
+  icon: undefined,
+  size: "medium",
+  disabled: undefined,
+  readonly: undefined,
+  invalidText: undefined,
+  labelFixed: true,
+  helpText: undefined,
+  loading: undefined,
+  suffixText: undefined,
+});
+
+/**
+ * Component events.
+ */
+const emit = defineEmits<{
+  /**
+   * Emitted when the input value changes. Use with v-model.
+   *
+   * @param {string | number | null} value - The new input value.
+   */
+  "update:modelValue": [value: string | number | null];
+  /**
+   * Emitted when validation fails.
+   *
+   * @param {ValidityState} state - The native ValidityState object.
+   */
+  invalid: [state: ValidityState];
+  /**
+   * Emitted when the input receives focus.
+   *
+   * @param {FocusEvent} event - The native focus event.
+   */
+  focus: [event: FocusEvent];
+  /**
+   * Emitted when the input loses focus.
+   *
+   * @param {FocusEvent} event - The native focus event.
+   */
+  blur: [event: FocusEvent];
+}>();
+
+/**
+ * Triggers the native date/time picker for inputs with type="date", "time",
+ * "datetime-local", etc. Called on click to ensure the picker opens when
+ * the user clicks the input.
+ *
+ * @param {Event} event - The click event.
+ */
+const showPicker = ({ currentTarget }: Event) =>
+  (currentTarget as HTMLInputElement)?.showPicker();
+
+/**
+ * Lifecycle hook: Component mounted.
+ *
+ * Loads Baklava resources when the component is mounted.
+ */
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <bl-input
+    v-bind="{
+      ...props,
+      'label-fixed': props.labelFixed === true ? true : undefined,
+      'help-text': props.helpText ? props.helpText : undefined,
+      'invalid-text': props.invalidText ? props.invalidText : undefined,
+      loading: props.loading ? props.loading : undefined,
+      placeholder: props.placeholder ? props.placeholder : props.label,
+    }"
+    :value="props.modelValue"
+    @bl-input="
+      emit('update:modelValue', ($event.target as HTMLInputElement)?.value)
+    "
+    @bl-invalid="emit('invalid', $event)"
+    @focus="emit('focus', $event)"
+    @blur="emit('blur', $event)"
+    @click="showPicker"
+  >
+    <span v-if="props.suffixText" slot="icon">
+      {{ props.suffixText }}
+    </span>
+  </bl-input>
+</template>

package/src/input/index.ts

@@ -0,0 +1,3 @@
+// Component exports must use the "Bv-" prefix
+export { default as BvInput } from "./Input.vue";
+export type { InputProps } from "./input.types";

package/src/input/input.types.ts

@@ -0,0 +1,156 @@
+import type { BaklavaIcon } from "@trendyol/baklava-icons";
+import type {
+  InputSize,
+  InputType,
+} from "@trendyol/baklava/dist/components/input/bl-input";
+
+/**
+ * Input mode hint for virtual keyboards.
+ *
+ * @typedef InputMode
+ */
+type InputMode =
+  | "none"
+  | "text"
+  | "decimal"
+  | "numeric"
+  | "tel"
+  | "search"
+  | "email"
+  | "url";
+
+/**
+ * Props for the Input component.
+ *
+ * A Vue UI kit component for Baklava's bl-input web component with full v-model support
+ * and TypeScript types.
+ *
+ * @interface InputProps
+ */
+export interface InputProps {
+  /**
+   * Input value (v-model).
+   */
+  modelValue?: string | number | null;
+
+  /**
+   * Input name attribute for form submission.
+   */
+  name?: string;
+
+  /**
+   * Input type (text, email, password, number, date, time, etc.).
+   *
+   * @default "text"
+   */
+  type?: InputType;
+
+  /**
+   * Input label displayed above or beside the input.
+   */
+  label?: string;
+
+  /**
+   * Placeholder text when the input is empty.
+   */
+  placeholder?: string;
+
+  /**
+   * Whether the input is required for form validation.
+   */
+  required?: boolean;
+
+  /**
+   * Minimum character length for validation.
+   */
+  minlength?: number;
+
+  /**
+   * Maximum character length for validation.
+   */
+  maxlength?: number;
+
+  /**
+   * Minimum value for number/date inputs.
+   */
+  min?: number | string;
+
+  /**
+   * Maximum value for number/date inputs.
+   */
+  max?: number | string;
+
+  /**
+   * RegExp pattern for validation.
+   */
+  pattern?: string;
+
+  /**
+   * Step value for number inputs.
+   */
+  step?: number;
+
+  /**
+   * Autocomplete attribute for the input.
+   */
+  autocomplete?: string;
+
+  /**
+   * Input mode hint for virtual keyboards.
+   */
+  inputmode?: InputMode;
+
+  /**
+   * Whether the input should receive focus on mount.
+   */
+  autofocus?: boolean;
+
+  /**
+   * Baklava icon name to display in the input.
+   */
+  icon?: BaklavaIcon;
+
+  /**
+   * Input size (small, medium, large).
+   *
+   * @default "medium"
+   */
+  size?: InputSize;
+
+  /**
+   * Whether the input is disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether the input is readonly.
+   */
+  readonly?: boolean;
+
+  /**
+   * Whether the label has fixed position.
+   *
+   * @default true
+   */
+  labelFixed?: boolean;
+
+  /**
+   * Error message text displayed when validation fails.
+   */
+  invalidText?: string;
+
+  /**
+   * Helper text displayed below the input.
+   */
+  helpText?: string;
+
+  /**
+   * Whether to show loading indicator.
+   */
+  loading?: boolean;
+
+  /**
+   * Suffix text displayed in the icon slot.
+   */
+  suffixText?: string;
+}