@baklavue/ui 1.0.0-preview.4 → 1.0.1

package/src/stepper/Stepper.vue

@@ -1,100 +0,0 @@
-<script setup lang="ts">
-/**
- * Stepper Component
- *
- * A Vue UI kit component for Baklava's `bl-stepper` web component for step indicators.
- * Displays progress through a sequence of steps. Use the `steps` prop for declarative
- * configuration or the default slot for custom step content.
- *
- * @component
- * @example
- * ```vue
- * <template>
- *   <BvStepper v-model:current-step="currentStep" :steps="steps" />
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <template>
- *   <BvStepper :steps="['Step 1', 'Step 2', 'Step 3']" />
- * </template>
- * ```
- */
-import { onMounted } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { StepperProps, StepperStep } from "./stepper.types";
-
-/**
- * Component props with default values.
- */
-const props = withDefaults(defineProps<StepperProps>(), {
-  currentStep: undefined,
-  steps: undefined,
-  orientation: undefined,
-  showLabels: undefined,
-});
-
-/**
- * Component events.
- */
-const emit = defineEmits<{
-  /**
-   * Emitted when the current step changes (for v-model:currentStep).
-   *
-   * @param {number} step - The new current step index.
-   */
-  "update:currentStep": [step: number];
-  /**
-   * Emitted when the user selects a different step.
-   *
-   * @param {CustomEvent} event - The native bl-stepper-change event from bl-stepper.
-   */
-  "step-change": [event: CustomEvent];
-}>();
-
-/**
- * Returns the variant for a step based on its index and the current step.
- */
-const getStepVariant = (index: number): "default" | "active" | "success" | "error" => {
-  const current = props.currentStep ?? 0;
-  const step = props.steps?.[index];
-  if (step?.error) return "error";
-  if (index < current) return "success";
-  if (index === current) return "active";
-  return "default";
-};
-
-/**
- * Handles the bl-stepper-change event from the underlying web component.
- */
-const handleStepChange = (event: CustomEvent<{ activeStep: number; totalSteps: number }>) => {
-  emit("step-change", event);
-  const step = event.detail?.activeStep;
-  if (step !== undefined) emit("update:currentStep", step);
-};
-
-onMounted(() => {
-  loadBaklavaResources();
-});
-</script>
-
-<template>
-  <bl-stepper
-    :direction="orientation ?? 'horizontal'"
-    @bl-stepper-change="handleStepChange"
-  >
-    <template v-if="steps">
-      <bl-stepper-item
-        v-for="(step, index) in steps"
-        :key="index"
-        :id="`step-${index}`"
-        :title="showLabels !== false ? step.label : ''"
-        :description="showLabels !== false && step.description ? step.description : ''"
-        :variant="getStepVariant(index)"
-        :disabled="step.disabled"
-      />
-    </template>
-    <slot />
-  </bl-stepper>
-</template>

package/src/stepper/index.ts

@@ -1,2 +0,0 @@
-export { default as BvStepper } from "./Stepper.vue";
-export type { StepperProps, StepperStep } from "./stepper.types";

package/src/stepper/stepper.types.ts

@@ -1,29 +0,0 @@
-/**
- * Configuration for a single step in the stepper.
- */
-export interface StepperStep {
-  /** Step label */
-  label: string;
-  /** Optional step description */
-  description?: string;
-  /** Whether the step is completed */
-  completed?: boolean;
-  /** Whether the step has an error state */
-  error?: boolean;
-  /** Whether the step is disabled */
-  disabled?: boolean;
-}
-
-/**
- * Props for the Stepper component.
- */
-export interface StepperProps {
-  /** Current step index (0-based). Use with v-model:currentStep */
-  currentStep?: number;
-  /** Array of step configurations */
-  steps?: StepperStep[];
-  /** Layout direction (horizontal, vertical) */
-  orientation?: string;
-  /** Whether to show step labels */
-  showLabels?: boolean;
-}

package/src/switch/Switch.vue

@@ -1,80 +0,0 @@
-<script setup lang="ts">
-/**
- * Switch Component
- *
- * A Vue UI kit component for Baklava's `bl-switch` web component with v-model support.
- * A toggle switch for boolean states. Supports v-model:checked for two-way binding.
- *
- * @component
- * @example
- * ```vue
- * <template>
- *   <BvSwitch v-model:checked="enabled" label="Enable notifications" />
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <template>
- *   <BvSwitch :checked="isOn" @change="handleChange" />
- * </template>
- * ```
- */
-import { onMounted } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { SwitchProps } from "./switch.types";
-
-/**
- * Component props with default values.
- */
-const props = withDefaults(defineProps<SwitchProps>(), {
-  checked: undefined,
-  disabled: undefined,
-  label: undefined,
-  size: undefined,
-});
-
-/**
- * Component events.
- */
-const emit = defineEmits<{
-  /**
-   * Emitted when the checked state changes (for v-model:checked).
-   *
-   * @param {boolean} checked - The new checked state.
-   */
-  "update:checked": [checked: boolean];
-  /**
-   * Emitted when the user toggles the switch.
-   *
-   * @param {CustomEvent} event - The native change event from bl-switch.
-   */
-  change: [event: CustomEvent];
-  /**
-   * Emitted on user input (mirrors native input event).
-   *
-   * @param {CustomEvent} event - The native input event from bl-switch.
-   */
-  input: [event: CustomEvent];
-}>();
-
-onMounted(() => {
-  loadBaklavaResources();
-});
-</script>
-
-<template>
-  <bl-switch
-    v-bind="{
-      ...props,
-      checked: props.checked === true ? true : props.checked === false ? false : undefined,
-      disabled: props.disabled === true ? true : undefined,
-    }"
-    @bl-switch-toggle="
-      emit('change', $event);
-      emit('update:checked', $event.detail);
-    "
-  >
-    <slot>{{ label }}</slot>
-  </bl-switch>
-</template>

package/src/switch/index.ts

@@ -1,2 +0,0 @@
-export { default as BvSwitch } from "./Switch.vue";
-export type { SwitchProps } from "./switch.types";

package/src/switch/switch.types.ts

@@ -1,13 +0,0 @@
-/**
- * Props for the Switch component.
- */
-export interface SwitchProps {
-  /** Checked state. Use with v-model:checked */
-  checked?: boolean;
-  /** Whether the switch is disabled */
-  disabled?: boolean;
-  /** Label for the switch */
-  label?: string;
-  /** Switch size (small, medium, large) */
-  size?: string;
-}

package/src/tab/Tab.vue

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

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

package/src/tab/tab.types.ts

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

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

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

package/src/table/table.types.ts

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