@baklavue/ui 1.0.0-preview.2

package/src/tab/Tab.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+/**
+ * Tab Component
+ *
+ * A Vue UI kit component for Baklava's `bl-tabs` (bl-tab-group / bl-tab / bl-tab-panel) web components
+ * for tab navigation. Use the `tabs` prop for declarative configuration or the default slot
+ * for custom tab content.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Basic usage with tabs prop -->
+ * <template>
+ *   <BvTab v-model:activeTab="activeTab" :tabs="tabOptions">
+ *     <div v-if="activeTab === 'tab1'">Content 1</div>
+ *     <div v-if="activeTab === 'tab2'">Content 2</div>
+ *   </BvTab>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Custom slots -->
+ * <template>
+ *   <BvTab v-model:activeTab="active">
+ *     <bl-tab value="a">Tab A</bl-tab>
+ *     <bl-tab value="b">Tab B</bl-tab>
+ *     <bl-tab-panel tab="a">Panel A content</bl-tab-panel>
+ *     <bl-tab-panel tab="b">Panel B content</bl-tab-panel>
+ *   </BvTab>
+ * </template>
+ * ```
+ */
+import { onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { TabProps } from "./tab.types";
+
+const props = withDefaults(defineProps<TabProps>(), {
+  activeTab: undefined,
+  tabs: undefined,
+  variant: undefined,
+  orientation: undefined,
+});
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the active tab changes (use with v-model:activeTab).
+   * @param {string} tab - The new active tab value.
+   */
+  "update:activeTab": [tab: string];
+  /**
+   * Emitted when tab selection changes (raw CustomEvent from bl-tabs).
+   * @param {CustomEvent} event - The bl-tab-change event.
+   */
+  "tab-change": [event: CustomEvent];
+}>();
+
+/**
+ * Handles the bl-tab-selected event from the underlying bl-tab-group.
+ * Emits update:activeTab with the new tab value and tab-change with the raw event.
+ *
+ * @param {CustomEvent} event - The bl-tab-selected event from bl-tab (detail is tab name).
+ */
+const handleTabChange = (event: CustomEvent<string>) => {
+  emit("tab-change", event);
+  const tab = event.detail;
+  if (tab !== undefined) emit("update:activeTab", tab);
+};
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <bl-tab-group @bl-tab-selected="handleTabChange">
+    <template v-if="tabs">
+      <bl-tab
+        v-for="tab in tabs"
+        :key="tab.value"
+        slot="tabs"
+        :name="tab.value"
+        :caption="tab.label"
+        :disabled="tab.disabled"
+        :selected="props.activeTab === tab.value"
+      >
+        {{ tab.label }}
+      </bl-tab>
+      <bl-tab-panel
+        v-for="tab in tabs"
+        :key="`panel-${tab.value}`"
+        :tab="tab.value"
+      >
+        <slot />
+      </bl-tab-panel>
+    </template>
+    <slot v-else />
+  </bl-tab-group>
+</template>

package/src/tab/index.ts

@@ -0,0 +1,2 @@
+export { default as BvTab } from "./Tab.vue";
+export type { TabProps, TabOption } from "./tab.types";

package/src/tab/tab.types.ts

@@ -0,0 +1,17 @@
+/** Tab option for the `tabs` prop */
+export interface TabOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface TabProps {
+  /** Currently active tab value (use with v-model:activeTab) */
+  activeTab?: string;
+  /** Array of tab options. When provided, tabs are rendered from this array. */
+  tabs?: TabOption[];
+  /** Tab variant (passed to bl-tabs) */
+  variant?: string;
+  /** Tab orientation: horizontal or vertical */
+  orientation?: string;
+}

package/src/table/Table.vue

@@ -0,0 +1,264 @@
+<script setup lang="ts">
+/**
+ * Table Component
+ *
+ * A Vue UI kit component for Baklava's `bl-table` web component for displaying tabular data.
+ * Supports columns, data, sorting, row selection, loading/empty states, pagination,
+ * and custom slots for header actions, empty state, and per-column cell content.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Basic usage -->
+ * <template>
+ *   <BvTable :columns="columns" :data="tableData" />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- With loading and empty states -->
+ * <template>
+ *   <BvTable
+ *     :columns="columns"
+ *     :data="tableData"
+ *     :is-loading="isLoading"
+ *   >
+ *     <template #empty-state>
+ *       <span>No data found</span>
+ *     </template>
+ *   </BvTable>
+ * </template>
+ * ```
+ */
+import { computed, onMounted, type PropType } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import BvSpinner from "../spinner/Spinner.vue";
+import type {
+  TableColumn,
+  TableRow,
+  TablePaginationProps,
+} from "./table.types";
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps({
+    title: { type: String, default: undefined },
+    headerOptions: {
+      type: Object as PropType<{ sticky?: boolean; minCellWidth?: string }>,
+      default: undefined,
+    },
+    data: { type: Array as PropType<TableRow[]>, default: () => [] },
+    columns: { type: Array as PropType<TableColumn[]>, default: undefined },
+    sortable: { type: Boolean, default: undefined },
+    selectable: { type: Boolean, default: undefined },
+    multiple: { type: Boolean, default: undefined },
+    selected: {
+      type: Array as PropType<(string | number)[]>,
+      default: undefined,
+    },
+    sortKey: { type: String, default: undefined },
+    sortDirection: { type: String, default: undefined },
+    stickyFirstColumn: { type: Boolean, default: undefined },
+    stickyLastColumn: { type: Boolean, default: undefined },
+    isLoading: { type: Boolean, default: undefined },
+    pagination: {
+      type: Object as PropType<TablePaginationProps>,
+      default: undefined,
+    },
+    loadingText: { type: String, default: "Loading..." },
+});
+
+const emit = defineEmits<{
+  /**
+   * Emitted when a row is clicked.
+   * @param {CustomEvent} event - The bl-row-click event.
+   */
+  "row-click": [event: CustomEvent];
+  /**
+   * Emitted when table sort options change.
+   * @param {CustomEvent} event - The bl-sort event.
+   */
+  sort: [event: CustomEvent];
+  /**
+   * Emitted when selected rows change.
+   * @param {CustomEvent} event - The bl-row-select event.
+   */
+  select: [event: CustomEvent];
+  /**
+   * Emitted when pagination changes.
+   * @param {CustomEvent} event - The bl-change event with selectedPage, prevPage, itemsPerPage.
+   */
+  change: [event: CustomEvent];
+}>();
+
+/**
+ * Baklava table expects selected IDs to always be strings,
+ * even when the actual data IDs might be numbers.
+ */
+const selectedIdsAsStrings = computed(() => {
+  const s = props.selected;
+  if (s == null || !Array.isArray(s)) return [];
+  return s.map((id) => String(id));
+});
+
+/** Column header text: prefer name, then label, then key */
+const getColumnLabel = (col: { key: string; label?: string; name?: string }) =>
+  col.name ?? col.label ?? col.key;
+
+/** Row key for :key and selection-key: prefer row.id, fallback to index */
+const getRowKey = (row: Record<string, unknown> & { id?: string | number }, index: number) =>
+  row.id != null ? String(row.id) : String(index);
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <div class="table">
+    <div v-if="props.title" class="header">
+      <span class="--title">{{ props.title }}</span>
+      <slot name="header-actions" />
+    </div>
+
+    <div class="table-content">
+      <!-- Loading state -->
+      <bl-table v-if="props.isLoading">
+        <div class="loading-state">
+          <BvSpinner />
+          <span>{{ props.loadingText }}</span>
+        </div>
+      </bl-table>
+
+      <!-- Empty state -->
+      <bl-table v-else-if="!props.data?.length">
+        <div class="empty-state">
+          <slot name="empty-state" />
+        </div>
+      </bl-table>
+
+      <!-- Data table -->
+      <bl-table
+        v-else
+        v-bind="{
+          sortable: props.sortable === true ? true : undefined,
+          selectable: props.selectable === true ? true : undefined,
+          multiple: props.multiple === true ? true : undefined,
+          ...(props.selectable && { selected: selectedIdsAsStrings }),
+          sortKey: props.sortKey,
+          sortDirection: props.sortDirection,
+          stickyFirstColumn: props.stickyFirstColumn,
+          stickyLastColumn: props.stickyLastColumn,
+        }"
+        @bl-sort="emit('sort', $event)"
+        @bl-row-select="emit('select', $event)"
+      >
+        <bl-table-header :sticky="props.headerOptions?.sticky">
+          <bl-table-row>
+            <bl-table-header-cell
+              v-for="column in props.columns"
+              :key="column.key"
+              :sort-key="
+                props.sortable && column.sortable !== false ? column.key : undefined
+              "
+              :style="{
+                '--bl-table-header-cell-min-width':
+                  props.headerOptions?.minCellWidth || '100px',
+              }"
+            >
+              {{ getColumnLabel(column) }}
+            </bl-table-header-cell>
+          </bl-table-row>
+        </bl-table-header>
+
+        <bl-table-body>
+          <bl-table-row
+            v-for="(row, index) in props.data"
+            :key="getRowKey(row, index)"
+            :selection-key="props.selectable ? getRowKey(row, index) : undefined"
+          >
+            <bl-table-cell v-for="column in props.columns" :key="column.key">
+              <slot
+                :name="column.key"
+                :row="row"
+                :value="row[column.key]"
+              >
+                {{ row[column.key] }}
+              </slot>
+            </bl-table-cell>
+          </bl-table-row>
+        </bl-table-body>
+      </bl-table>
+    </div>
+
+    <div v-if="props.pagination" class="pagination-wrapper">
+      <bl-pagination
+        :current-page="props.pagination!.currentPage"
+        :total-items="props.pagination!.totalItems"
+        :items-per-page="props.pagination!.itemsPerPage"
+        :has-jumper="props.pagination!.hasJumper ?? undefined"
+        :has-select="props.pagination!.hasSelect ?? undefined"
+        :jumper-label="props.pagination!.jumperLabel ?? 'Go to page'"
+        :select-label="props.pagination!.selectLabel ?? 'Items per page'"
+        :items-per-page-options="props.pagination!.itemsPerPageOptions"
+        @bl-change="emit('change', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.table {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.--title {
+  font: var(--bl-font-title-1-medium);
+}
+
+.table-content {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table-content > bl-table {
+  min-width: max-content;
+}
+
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+  gap: 16px;
+}
+
+.loading-state span {
+  font: var(--bl-font-body-2-regular);
+  color: var(--bl-color-primary);
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+  gap: 12px;
+}
+
+.pagination-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

package/src/table/index.ts

@@ -0,0 +1,7 @@
+export { default as BvTable } from "./Table.vue";
+export type {
+  TableProps,
+  TableColumn,
+  TableRow,
+  TablePaginationProps,
+} from "./table.types";

package/src/table/table.types.ts

@@ -0,0 +1,62 @@
+import type { ItemsPerPageOption } from "../pagination/pagination.types";
+
+/** Table column definition */
+export interface TableColumn {
+  key: string;
+  /** Column header text (alias: use `name` or `label`) */
+  label?: string;
+  /** Column header text (alias: use `name` or `label`) */
+  name?: string;
+  sortable?: boolean;
+}
+
+/** Table row data (record of column keys to values). When selectable, rows should have `id`. */
+export type TableRow = Record<string, unknown> & { id?: string | number };
+
+/** Pagination props for table integration */
+export interface TablePaginationProps {
+  currentPage: number;
+  totalItems: number;
+  itemsPerPage: number;
+  hasJumper?: boolean;
+  jumperLabel?: string;
+  hasSelect?: boolean;
+  selectLabel?: string;
+  itemsPerPageOptions?: ItemsPerPageOption[];
+}
+
+export interface TableProps {
+  /** Optional title displayed above the table */
+  title?: string;
+  /** Header options: sticky, minCellWidth */
+  headerOptions?: {
+    sticky?: boolean;
+    minCellWidth?: string;
+  };
+  /** Table data rows */
+  data?: TableRow[];
+  /** Column definitions */
+  columns?: TableColumn[];
+  /** Enable column sorting */
+  sortable?: boolean;
+  /** Enable row selection */
+  selectable?: boolean;
+  /** Enable multiple row selection */
+  multiple?: boolean;
+  /** Selected row selection keys (use with v-model:selected when selectable). Accepts string or number ids. */
+  selected?: (string | number)[];
+  /** Sort key for the sorted column */
+  sortKey?: string;
+  /** Sort direction: '' | 'asc' | 'desc' */
+  sortDirection?: string;
+  /** Make first column sticky */
+  stickyFirstColumn?: boolean;
+  /** Make last column sticky */
+  stickyLastColumn?: boolean;
+  /** Show loading state */
+  isLoading?: boolean;
+  /** Pagination configuration */
+  pagination?: TablePaginationProps;
+  /** Text shown in loading state */
+  loadingText?: string;
+}

package/src/tag/Tag.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+/**
+ * Tag Component
+ *
+ * A Vue UI kit component for Baklava's `bl-tag` web component for displaying tags or labels.
+ * Supports selectable and removable (closable) variants, sizes, and icons.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Basic usage -->
+ * <template>
+ *   <BvTag>Label</BvTag>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Closable tag -->
+ * <template>
+ *   <BvTag closable @close="removeTag">Removable</BvTag>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- With icon -->
+ * <template>
+ *   <BvTag icon="info">With icon</BvTag>
+ * </template>
+ * ```
+ */
+import { onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { TagProps } from "./tag.types";
+
+const props = withDefaults(defineProps<TagProps>(), {
+  variant: undefined,
+  size: undefined,
+  closable: undefined,
+  icon: undefined,
+});
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the close button is clicked (removable/closable variant only).
+   */
+  close: [];
+  /**
+   * Emitted when a selectable tag is clicked. Payload contains the new selected state.
+   */
+  "update:selected": [selected: boolean];
+}>();
+
+/**
+ * Handles bl-tag-click. For removable variant, emit 'close'. For selectable, emit 'update:selected'.
+ */
+const handleTagClick = (event: CustomEvent<{ value: string | null; selected: boolean }>) => {
+  if (props.closable) {
+    emit("close");
+  } else if (props.variant === "selectable" && event.detail) {
+    emit("update:selected", event.detail.selected);
+  }
+};
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <bl-tag
+    v-bind="{
+      ...props,
+      variant: props.closable ? 'removable' : props.variant,
+      closable: undefined,
+    }"
+    @bl-tag-click="handleTagClick"
+  >
+    <slot v-if="$slots['icon']" name="icon" />
+    <slot />
+  </bl-tag>
+</template>

package/src/tag/index.ts

@@ -0,0 +1,2 @@
+export { default as BvTag } from "./Tag.vue";
+export type { TagProps, TagVariant, TagSize } from "./tag.types";

package/src/tag/tag.types.ts

@@ -0,0 +1,24 @@
+import type { BaklavaIcon } from "@trendyol/baklava-icons";
+
+/** Tag variant: selectable (default) or removable (closable) */
+export type TagVariant = "selectable" | "removable";
+
+/** Tag size */
+export type TagSize = "small" | "medium" | "large";
+
+export interface TagProps {
+  /** Tag variant: selectable or removable */
+  variant?: TagVariant;
+  /** Tag size */
+  size?: TagSize;
+  /** When true, shows close button (uses variant="removable" under the hood) */
+  closable?: boolean;
+  /** Icon name from Baklava icons */
+  icon?: BaklavaIcon;
+  /** Selected state (for selectable variant) */
+  selected?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Value for form/selection */
+  value?: string | null;
+}

package/src/textarea/Textarea.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+/**
+ * Textarea Component
+ *
+ * A Vue UI kit component for Baklava's `bl-textarea` web component with v-model support.
+ * Supports label, placeholder, validation, character counter, and help text.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Basic usage with v-model -->
+ * <template>
+ *   <BvTextarea v-model="message" label="Message" placeholder="Enter your message" />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- With validation -->
+ * <template>
+ *   <BvTextarea
+ *     v-model="comment"
+ *     label="Comment"
+ *     :maxlength="500"
+ *     help-text="Max 500 characters"
+ *     invalid-text="Please enter a valid comment"
+ *   />
+ * </template>
+ * ```
+ */
+import { onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { TextareaProps } from "./textarea.types";
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  modelValue: undefined,
+  label: undefined,
+  placeholder: undefined,
+  rows: undefined,
+  maxlength: undefined,
+  disabled: undefined,
+  required: undefined,
+});
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the value changes (use with v-model).
+   * @param {string | null} value - The new textarea value.
+   */
+  "update:modelValue": [value: string | null];
+  /**
+   * Emitted on user input (mirrors native bl-input).
+   * @param {CustomEvent} event - The bl-input event.
+   */
+  input: [event: CustomEvent];
+  /**
+   * Emitted when the value changes (blur or commit).
+   * @param {CustomEvent} event - The bl-change event.
+   */
+  change: [event: CustomEvent];
+}>();
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <bl-textarea
+    v-bind="{
+      ...props,
+      disabled: props.disabled === true ? true : undefined,
+      required: props.required === true ? true : undefined,
+    }"
+    :value="props.modelValue"
+    @bl-input="
+      emit('input', $event);
+      emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value || null);
+    "
+    @bl-change="emit('change', $event)"
+  >
+    <slot />
+  </bl-textarea>
+</template>

package/src/textarea/index.ts

@@ -0,0 +1,2 @@
+export { default as BvTextarea } from "./Textarea.vue";
+export type { TextareaProps, TextareaSize } from "./textarea.types";

package/src/textarea/textarea.types.ts

@@ -0,0 +1,37 @@
+/** Textarea size */
+export type TextareaSize = "small" | "medium" | "large";
+
+export interface TextareaProps {
+  /** Textarea value (use with v-model) */
+  modelValue?: string | null;
+  /** Label text */
+  label?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Number of visible rows */
+  rows?: number;
+  /** Maximum character length */
+  maxlength?: number;
+  /** Minimum character length */
+  minlength?: number;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Required field */
+  required?: boolean;
+  /** Readonly state */
+  readonly?: boolean;
+  /** Help text below the textarea */
+  helpText?: string;
+  /** Custom error/invalid message */
+  invalidText?: string;
+  /** Enable character counter */
+  characterCounter?: boolean;
+  /** Enable auto-expand up to maxRows */
+  expand?: boolean;
+  /** Max rows when expand is true */
+  maxRows?: number;
+  /** Textarea size */
+  size?: TextareaSize;
+  /** Name attribute for forms */
+  name?: string;
+}