@baklavue/ui 1.0.0-preview.2

package/src/link/Link.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+/**
+ * Link Component
+ *
+ * A Vue UI kit component for Baklava's `bl-link` web component for navigation links.
+ * Supports inline (text within content) and standalone (button-like) variants with
+ * full TypeScript support and HTML anchor attributes (href, target, rel, etc.).
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Basic usage -->
+ * <template>
+ *   <BvLink href="/about">About</BvLink>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Inline variant (default) -->
+ * <template>
+ *   <p>Visit our <BvLink href="/docs">documentation</BvLink> for more info.</p>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Standalone variant with size -->
+ * <template>
+ *   <BvLink href="/signup" variant="standalone" size="large">
+ *     Sign up
+ *   </BvLink>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- With icon slot -->
+ * <template>
+ *   <BvLink href="/settings" variant="standalone">
+ *     <template #icon><BvIcon name="settings" /></template>
+ *     Settings
+ *   </BvLink>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- External link with target -->
+ * <template>
+ *   <BvLink href="https://example.com" target="_blank" rel="noopener noreferrer">
+ *     External site
+ *   </BvLink>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Disabled state -->
+ * <template>
+ *   <BvLink href="/disabled" :disabled="true">Disabled link</BvLink>
+ * </template>
+ * ```
+ */
+import { computed, onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { LinkProps } from "./link.types";
+
+const props = withDefaults(defineProps<LinkProps>(), {
+  href: undefined,
+  target: undefined,
+  disabled: undefined,
+  variant: undefined,
+  size: undefined,
+  kind: undefined,
+  ariaLabel: undefined,
+  rel: undefined,
+  hreflang: undefined,
+  type: undefined,
+  referrerPolicy: undefined,
+  download: undefined,
+  ping: undefined,
+});
+
+const emit = defineEmits<{
+  /** Emitted when the link is clicked. */
+  click: [event: CustomEvent];
+}>();
+
+/** Props to pass to bl-link. When disabled, omit href so navigation is prevented. */
+const linkBindings = computed(() => {
+  const { disabled, href, ...rest } = props;
+  return {
+    ...rest,
+    href: disabled ? undefined : href,
+    "aria-disabled": disabled ? "true" : undefined,
+    tabindex: disabled ? -1 : undefined,
+  };
+});
+
+/** Prevents navigation and click when disabled. */
+function handleClick(event: CustomEvent) {
+  if (props.disabled) {
+    event.preventDefault();
+    event.stopPropagation();
+    return;
+  }
+  emit("click", event);
+}
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <bl-link
+    v-bind="linkBindings"
+    :class="{ 'bv-link--disabled': disabled }"
+    @bl-click="handleClick"
+  >
+    <slot v-if="$slots['icon']" name="icon" />
+    <slot />
+  </bl-link>
+</template>
+
+<style scoped>
+.bv-link--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>

package/src/link/index.ts

@@ -0,0 +1,2 @@
+export { default as BvLink } from "./Link.vue";
+export type { LinkProps, LinkVariant, LinkSize, LinkKind } from "./link.types";

package/src/link/link.types.ts

@@ -0,0 +1,42 @@
+/** Link variant - inline (text within content) or standalone (button-like). */
+export type LinkVariant = "inline" | "standalone";
+
+/** Link size - only applies to standalone variant. */
+export type LinkSize = "small" | "medium" | "large";
+
+/** Link kind - only applies to standalone variant. */
+export type LinkKind = "primary" | "neutral";
+
+/**
+ * Props for the Link component.
+ *
+ * @interface LinkProps
+ */
+export interface LinkProps {
+  /** URL that the hyperlink points to. */
+  href?: string;
+  /** Where to display the linked URL (e.g. "_self", "_blank"). */
+  target?: string;
+  /** Whether the link is disabled. */
+  disabled?: boolean;
+  /** Link variant - inline or standalone. */
+  variant?: LinkVariant;
+  /** Link size - only applies to standalone variant. */
+  size?: LinkSize;
+  /** Link kind - only applies to standalone variant. */
+  kind?: LinkKind;
+  /** Aria label for the link. */
+  ariaLabel?: string;
+  /** Relationship between the current document and the linked document (e.g. "noopener noreferrer"). */
+  rel?: string;
+  /** Language of the linked document. */
+  hreflang?: string;
+  /** MIME type of the linked document. */
+  type?: string;
+  /** Referrer policy for the link. */
+  referrerPolicy?: string;
+  /** Whether to download the resource instead of navigating to it. */
+  download?: string;
+  /** Ping URLs to be notified when following the link. */
+  ping?: string;
+}

package/src/notification/Notification.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+/**
+ * Notification Component
+ *
+ * A Vue UI kit component for Baklava's `bl-notification` web component for toast notifications.
+ * Place this component once in your app (typically at root or layout level). Notifications
+ * are triggered programmatically via the `useNotification` composable.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Basic usage: place in app root -->
+ * <template>
+ *   <div>
+ *     <RouterView />
+ *     <BvNotification />
+ *   </div>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- With useNotification composable -->
+ * <template>
+ *   <div>
+ *     <BvButton @click="showSuccess">Show Success</BvButton>
+ *     <BvNotification />
+ *   </div>
+ * </template>
+ * ```
+ */
+import { onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { NotificationProps } from "./notification.types";
+
+/**
+ * Component props with default values.
+ */
+const props = withDefaults(defineProps<NotificationProps>(), {
+  duration: 7,
+  noAnimation: false,
+});
+
+/**
+ * Lifecycle hook: Component mounted.
+ * Loads Baklava resources required for the web component.
+ */
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <bl-notification v-bind="props" />
+</template>
+
+<style lang="css" scoped></style>

package/src/notification/index.ts

@@ -0,0 +1,2 @@
+export { default as BvNotification } from "./Notification.vue";
+export type { NotificationProps } from "./notification.types";

package/src/notification/notification.types.ts

@@ -0,0 +1,25 @@
+/**
+ * Props for the Notification component.
+ *
+ * The Notification component is a Vue UI kit component for Baklava's `bl-notification` web component.
+ * It acts as a container for toast notifications triggered via the `useNotification` composable.
+ *
+ * @interface NotificationProps
+ */
+export interface NotificationProps {
+  /**
+   * Default duration of notifications in seconds.
+   * Individual notifications can override this via the `useNotification` options.
+   *
+   * @default 7
+   */
+  duration?: number;
+
+  /**
+   * Whether to disable animations.
+   * Respects user's reduced-motion preferences.
+   *
+   * @default false
+   */
+  noAnimation?: boolean;
+}

package/src/pagination/Pagination.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+/**
+ * Pagination Component
+ *
+ * A Vue UI kit component for Baklava's `bl-pagination` web component for page navigation.
+ * Supports v-model:currentPage for two-way binding and emits change events when
+ * the user navigates to a different page.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Basic pagination -->
+ * <template>
+ *   <BvPagination
+ *     v-model:current-page="currentPage"
+ *     :total-items="100"
+ *     :page-size="10"
+ *     @change="handlePageChange"
+ *   />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- With jumper - jump directly to a page -->
+ * <template>
+ *   <BvPagination
+ *     v-model:current-page="currentPage"
+ *     :total-items="250"
+ *     :page-size="25"
+ *     :has-jumper="true"
+ *     jumper-label="Go to page"
+ *   />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- With items-per-page select -->
+ * <template>
+ *   <BvPagination
+ *     v-model:current-page="currentPage"
+ *     :total-items="100"
+ *     :page-size="10"
+ *     :has-select="true"
+ *     select-label="Items per page"
+ *     :items-per-page-options="[
+ *       { text: '10 Items', value: 10 },
+ *       { text: '25 Items', value: 25 },
+ *       { text: '50 Items', value: 50 }
+ *     ]"
+ *   />
+ * </template>
+ * ```
+ */
+import { onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { PaginationProps } from "./pagination.types";
+
+/**
+ * Component props with default values.
+ */
+const props = withDefaults(defineProps<PaginationProps>(), {
+  currentPage: undefined,
+  totalItems: undefined,
+  pageSize: undefined,
+  hasJumper: false,
+  jumperLabel: undefined,
+  hasSelect: false,
+  selectLabel: undefined,
+  itemsPerPageOptions: undefined,
+});
+
+/**
+ * Component events.
+ */
+const emit = defineEmits<{
+  /**
+   * Emitted when the current page changes.
+   * Use v-model:currentPage for two-way binding.
+   *
+   * @param {number} page - The new current page number.
+   */
+  "update:currentPage": [page: number];
+
+  /**
+   * Emitted when the user navigates to a different page.
+   * Payload contains selectedPage, prevPage, and itemsPerPage.
+   *
+   * @param {CustomEvent<{ selectedPage: number; prevPage: number; itemsPerPage: number }>} event - The change event from bl-pagination.
+   */
+  change: [event: CustomEvent];
+}>();
+
+/**
+ * Handles the bl-change event from the underlying bl-pagination component.
+ * Extracts selectedPage from event.detail and emits update:currentPage and change.
+ *
+ * @param {CustomEvent} event - The bl-change event from bl-pagination.
+ */
+const handleChange = (event: CustomEvent) => {
+  emit("change", event);
+  const detail = event.detail as
+    | { selectedPage?: number; prevPage?: number; itemsPerPage?: number }
+    | undefined;
+  const page = detail?.selectedPage;
+  if (page !== undefined) {
+    emit("update:currentPage", page);
+  }
+};
+
+/**
+ * Lifecycle hook: Component mounted.
+ * Loads Baklava resources required for bl-pagination.
+ */
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <bl-pagination
+    v-bind="{
+      'current-page': props.currentPage,
+      'total-items': props.totalItems,
+      'items-per-page': props.pageSize,
+      'has-jumper': props.hasJumper === true ? true : undefined,
+      'jumper-label': props.jumperLabel,
+      'has-select': props.hasSelect === true ? true : undefined,
+      'select-label': props.selectLabel,
+      'items-per-page-options': props.itemsPerPageOptions,
+    }"
+    @bl-change="handleChange"
+  >
+    <slot />
+  </bl-pagination>
+</template>

package/src/pagination/index.ts

@@ -0,0 +1,2 @@
+export { default as BvPagination } from "./Pagination.vue";
+export type { PaginationProps, ItemsPerPageOption } from "./pagination.types";

package/src/pagination/pagination.types.ts

@@ -0,0 +1,61 @@
+/**
+ * Options for the items-per-page select element.
+ */
+export interface ItemsPerPageOption {
+  /** Display text for the option */
+  text: string;
+  /** Numeric value for the option */
+  value: number;
+}
+
+/**
+ * Props for the Pagination component.
+ * Maps to Baklava's bl-pagination attributes.
+ *
+ * @see https://github.com/Trendyol/baklava
+ */
+export interface PaginationProps {
+  /**
+   * Current page number (1-based).
+   * Supports v-model:currentPage.
+   */
+  currentPage?: number;
+
+  /**
+   * Total number of items to be paginated.
+   * Baklava uses this to compute the total number of pages.
+   */
+  totalItems?: number;
+
+  /**
+   * Number of items per page.
+   * Maps to Baklava's items-per-page attribute.
+   */
+  pageSize?: number;
+
+  /**
+   * When true, adds a jumper input to jump directly to a page.
+   */
+  hasJumper?: boolean;
+
+  /**
+   * Label for the jumper input.
+   */
+  jumperLabel?: string;
+
+  /**
+   * When true, adds a select element to choose items per page.
+   */
+  hasSelect?: boolean;
+
+  /**
+   * Label for the items-per-page select.
+   */
+  selectLabel?: string;
+
+  /**
+   * Options for the items-per-page select element.
+   * Each option has `text` (display) and `value` (number).
+   */
+  itemsPerPageOptions?: ItemsPerPageOption[];
+}

package/src/radio/Radio.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+/**
+ * Radio Component
+ *
+ * A Vue UI kit component for Baklava's `bl-radio` and `bl-radio-group` web components.
+ * Can be used as either a single radio option or as a group container for multiple radios.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Single radio in a group -->
+ * <template>
+ *   <bl-radio-group :value="choice" @bl-radio-change="choice = $event.detail">
+ *     <BvRadio v-model="choice" value="yes" label="Yes" name="choice" />
+ *     <BvRadio v-model="choice" value="no" label="No" name="choice" />
+ *   </bl-radio-group>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Radio group with items -->
+ * <template>
+ *   <BvRadio v-model="choice" :items="items">
+ *     <template #item="{ item }">{{ item.label }}</template>
+ *   </BvRadio>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Explicit checked control -->
+ * <template>
+ *   <BvRadio :checked="isSelected" @update:checked="isSelected = $event" label="Option" />
+ * </template>
+ * ```
+ */
+import { computed, onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { RadioProps } from "./radio.types";
+
+/**
+ * Component props with default values.
+ */
+const props = withDefaults(defineProps<RadioProps>(), {
+  modelValue: undefined,
+  value: undefined,
+  name: undefined,
+  label: undefined,
+  checked: undefined,
+  disabled: undefined,
+  required: undefined,
+  items: undefined,
+});
+
+/**
+ * Component events.
+ */
+const emit = defineEmits<{
+  /**
+   * Emitted when selection changes (for v-model with modelValue).
+   * Payload is this radio's value when it becomes selected (single mode) or the selected value (group mode).
+   *
+   * @param {string | number} value - The selected value.
+   */
+  "update:modelValue": [value: string | number];
+
+  /**
+   * Emitted when checked state changes (for explicit checked control).
+   *
+   * @param {boolean} checked - The new checked state.
+   */
+  "update:checked": [checked: boolean];
+
+  /**
+   * Emitted when the radio state changes (native bl-change / bl-radio-change event).
+   *
+   * @param {CustomEvent} event - The change event from bl-radio or bl-radio-group.
+   */
+  change: [event: CustomEvent];
+
+  /**
+   * Emitted on input (native bl-input event).
+   *
+   * @param {CustomEvent} event - The bl-input event from bl-radio.
+   */
+  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 (string for bl-radio-group).
+ */
+const groupValue = computed(() => {
+  const val = props.modelValue;
+  if (val === undefined || val === null) return "";
+  return String(val);
+});
+
+/**
+ * Computed checked state for bl-radio (single mode).
+ * Uses explicit checked prop when provided, otherwise modelValue === value for v-model.
+ */
+const computedChecked = computed(() => {
+  if (props.checked === true || props.checked === false) {
+    return props.checked;
+  }
+  if (props.modelValue !== undefined && props.value !== undefined) {
+    return String(props.modelValue) === String(props.value);
+  }
+  return undefined;
+});
+
+/**
+ * Handles the bl-change event from the underlying bl-radio (single mode).
+ * Emits update:modelValue with this radio's value when selected, or update:checked.
+ */
+const handleSingleChange = (event: CustomEvent) => {
+  emit("change", event);
+  const target = event.target as { checked?: boolean; value?: string | number };
+  const checked = target?.checked;
+  if (checked === true && props.value !== undefined) {
+    emit("update:modelValue", props.value);
+  }
+  if (checked === true || checked === false) {
+    emit("update:checked", checked);
+  }
+};
+
+/**
+ * Handles the bl-radio-change event from the underlying bl-radio-group (group mode).
+ * Emits update:modelValue with the selected value (preserves original type from items).
+ */
+const handleGroupChange = (event: CustomEvent) => {
+  emit("change", event);
+  const detail = event.detail as string | undefined;
+  if (detail === undefined || detail === "") return;
+  const item = props.items?.find(
+    (i) => String(i.value) === String(detail),
+  );
+  const newValue = item !== undefined ? item.value : detail;
+  emit("update:modelValue", newValue);
+};
+
+/**
+ * Lifecycle hook: Component mounted.
+ * Loads Baklava resources for bl-radio and bl-radio-group.
+ */
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <!-- Group mode: render as bl-radio-group -->
+  <bl-radio-group
+    v-if="isGroupMode"
+    :value="groupValue"
+    :required="props.required === true ? true : undefined"
+    :label="props.label"
+    @bl-radio-change="handleGroupChange"
+  >
+    <bl-radio
+      v-for="(item, index) in props.items"
+      :key="String(item.value)"
+      v-bind="{
+        value: String(item.value),
+        disabled: item.disabled === true ? true : undefined,
+        name: item.name ?? props.name,
+      }"
+    >
+      <slot name="item" :item="item" :index="index">
+        {{ item.label }}
+      </slot>
+    </bl-radio>
+  </bl-radio-group>
+
+  <!-- Single radio mode: render as bl-radio -->
+  <bl-radio
+    v-else
+    v-bind="{
+      value: props.value !== undefined ? String(props.value) : undefined,
+      name: props.name,
+      disabled: props.disabled === true ? true : undefined,
+      required: props.required === true ? true : undefined,
+      checked:
+        computedChecked === true
+          ? true
+          : computedChecked === false
+            ? false
+            : undefined,
+    }"
+    @bl-change="handleSingleChange"
+    @bl-input="emit('input', $event)"
+  >
+    <slot>{{ label }}</slot>
+  </bl-radio>
+</template>

package/src/radio/index.ts

@@ -0,0 +1,2 @@
+export { default as BvRadio } from "./Radio.vue";
+export type { RadioProps, RadioItem } from "./radio.types";