@baklavue/ui 1.0.0-preview.4 → 1.0.1

package/src/link/link.types.ts

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

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

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

package/src/notification/notification.types.ts

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

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

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

package/src/pagination/pagination.types.ts

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

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

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

package/src/radio/radio.types.ts

@@ -1,95 +0,0 @@
-/**
- * Properties for a single radio item when used in group mode.
- *
- * @interface RadioItem
- */
-export interface RadioItem {
-  /**
-   * The value of the radio (used for v-model in group mode).
-   */
-  value: string | number;
-
-  /**
-   * The label text displayed next to the radio.
-   */
-  label?: string;
-
-  /**
-   * Whether the radio is disabled.
-   *
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * The name attribute for the radio group.
-   */
-  name?: string;
-
-  /**
-   * Additional custom data for use in the #item scoped slot.
-   */
-  [key: string]: unknown;
-}
-
-/**
- * Props for the Radio component.
- *
- * When `items` prop is provided, the component acts as a radio group container.
- * Otherwise, it acts as a single radio option.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
- */
-export interface RadioProps {
-  /**
-   * Selected value (single mode or group mode).
-   * Use v-model for two-way binding.
-   * - Single mode: used with value prop for comparison
-   * - Group mode: the selected item's value
-   */
-  modelValue?: string | number;
-
-  /**
-   * This radio option's value. Used for v-model comparison and form submission.
-   * Only used when component is in single radio mode.
-   */
-  value?: string | number;
-
-  /**
-   * Name attribute for the radio group. All radios in the same group must share the same name.
-   * Only used when component is in single radio mode.
-   */
-  name?: string;
-
-  /**
-   * Label text displayed next to the radio. Can be overridden by the default slot.
-   * Only used when component is in single radio mode.
-   */
-  label?: string;
-
-  /**
-   * Boolean to explicitly control checked state.
-   * When provided, overrides modelValue === value logic.
-   * Only used when component is in single radio mode.
-   */
-  checked?: boolean;
-
-  /**
-   * Whether the radio is disabled.
-   * Only used when component is in single radio mode.
-   */
-  disabled?: boolean;
-
-  /**
-   * Whether the radio group is required (for form validation).
-   * Used in group mode on bl-radio-group.
-   */
-  required?: boolean;
-
-  /**
-   * Array of radio items to render when in group mode.
-   * Each item will be rendered as a bl-radio element inside bl-radio-group.
-   * Only used when component is in group mode.
-   */
-  items?: RadioItem[];
-}