@baklavue/ui 1.0.0 → 1.0.1

package/src/table/Table.spec.ts

@@ -1,185 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-import BvTable from "./Table.vue";
-
-describe("BvTable", () => {
-  const columns = [
-    { key: "name", label: "Name" },
-    { key: "age", label: "Age" },
-  ];
-  const data = [
-    { id: 1, name: "Alice", age: 30 },
-    { id: 2, name: "Bob", age: 25 },
-  ];
-
-  it("renders table with columns and data", () => {
-    const wrapper = mount(BvTable, {
-      props: { columns, data },
-    });
-    expect(wrapper.find("bl-table").exists()).toBe(true);
-    expect(wrapper.text()).toContain("Alice");
-    expect(wrapper.text()).toContain("Bob");
-  });
-
-  it("shows loading state when isLoading is true", () => {
-    const wrapper = mount(BvTable, {
-      props: { columns, data, isLoading: true },
-    });
-    expect(wrapper.find("bl-table").exists()).toBe(true);
-    expect(wrapper.text()).toContain("Loading");
-  });
-
-  it("shows empty state when data is empty", () => {
-    const wrapper = mount(BvTable, {
-      props: { columns, data: [] },
-      slots: { "empty-state": "No data found" },
-    });
-    expect(wrapper.text()).toContain("No data found");
-  });
-
-  it("renders title and header-actions slot", () => {
-    const wrapper = mount(BvTable, {
-      props: { columns, data, title: "My Table" },
-      slots: { "header-actions": "<button>Action</button>" },
-    });
-    expect(wrapper.find(".header").exists()).toBe(true);
-    expect(wrapper.find(".--title").text()).toBe("My Table");
-    expect(wrapper.text()).toContain("Action");
-  });
-
-  it("shows custom loadingText", () => {
-    const wrapper = mount(BvTable, {
-      props: { columns, data, isLoading: true, loadingText: "Please wait" },
-    });
-    expect(wrapper.text()).toContain("Please wait");
-  });
-
-  it("selectable with selected array maps ids to strings", () => {
-    const wrapper = mount(BvTable, {
-      props: { columns, data, selectable: true, selected: [1, 2] },
-    });
-    const blTable = wrapper.find("bl-table");
-    expect(blTable.exists()).toBe(true);
-    // selectable attribute should be set
-    expect(blTable.attributes("selectable")).toBeDefined();
-  });
-
-  it("selectable without selected prop returns empty (s == null branch)", () => {
-    const wrapper = mount(BvTable, {
-      props: { columns, data, selectable: true },
-    });
-    const blTable = wrapper.find("bl-table");
-    expect(blTable.exists()).toBe(true);
-    expect(blTable.attributes("selectable")).toBeDefined();
-  });
-
-  it("emits sort on bl-sort event", async () => {
-    const wrapper = mount(BvTable, {
-      props: { columns, data, sortable: true },
-    });
-    wrapper.find("bl-table").element.dispatchEvent(
-      new CustomEvent("bl-sort", { bubbles: true, detail: { sortKey: "name", sortDirection: "asc" } }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("sort")).toHaveLength(1);
-  });
-
-  it("emits select on bl-row-select event", async () => {
-    const wrapper = mount(BvTable, {
-      props: { columns, data, selectable: true, selected: [1] },
-    });
-    wrapper.find("bl-table").element.dispatchEvent(
-      new CustomEvent("bl-row-select", { bubbles: true, detail: { selectedRows: [1, 2] } }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("select")).toHaveLength(1);
-  });
-
-  it("renders pagination and emits change on bl-change", async () => {
-    const wrapper = mount(BvTable, {
-      props: {
-        columns,
-        data,
-        pagination: {
-          currentPage: 1,
-          totalItems: 50,
-          itemsPerPage: 10,
-          hasJumper: true,
-          jumperLabel: "Jump",
-          hasSelect: true,
-          selectLabel: "Per page",
-        },
-      },
-    });
-    expect(wrapper.find(".pagination-wrapper").exists()).toBe(true);
-    const blPagination = wrapper.find("bl-pagination");
-    expect(blPagination.exists()).toBe(true);
-    blPagination.element.dispatchEvent(
-      new CustomEvent("bl-change", { bubbles: true, detail: { selectedPage: 2 } }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("change")).toHaveLength(1);
-  });
-
-  it("uses getColumnLabel fallbacks: name > label > key", () => {
-    const mixedColumns = [
-      { key: "a", name: "ColName" },
-      { key: "b", label: "ColLabel" },
-      { key: "c" },
-    ];
-    const mixedData = [{ id: 1, a: "v1", b: "v2", c: "v3" }];
-    const wrapper = mount(BvTable, {
-      props: { columns: mixedColumns, data: mixedData },
-    });
-    expect(wrapper.text()).toContain("ColName");
-    expect(wrapper.text()).toContain("ColLabel");
-    expect(wrapper.text()).toContain("c");
-  });
-
-  it("uses index as row key when row has no id", () => {
-    const noIdData = [
-      { name: "NoId1", age: 20 },
-      { name: "NoId2", age: 22 },
-    ];
-    const wrapper = mount(BvTable, {
-      props: { columns, data: noIdData },
-    });
-    expect(wrapper.text()).toContain("NoId1");
-    expect(wrapper.text()).toContain("NoId2");
-  });
-
-  it("sortable table with column.sortable false omits sort-key", () => {
-    const sortColumns = [
-      { key: "name", label: "Name", sortable: true },
-      { key: "age", label: "Age", sortable: false },
-    ];
-    const wrapper = mount(BvTable, {
-      props: { columns: sortColumns, data, sortable: true },
-    });
-    const headerCells = wrapper.findAll("bl-table-header-cell");
-    expect(headerCells[0].attributes("sort-key")).toBe("name");
-    expect(headerCells[1].attributes("sort-key")).toBeUndefined();
-  });
-
-  it("applies headerOptions sticky and minCellWidth", () => {
-    const wrapper = mount(BvTable, {
-      props: {
-        columns,
-        data,
-        headerOptions: { sticky: true, minCellWidth: "150px" },
-      },
-    });
-    const header = wrapper.find("bl-table-header");
-    expect(header.attributes("sticky")).toBeDefined();
-    const cell = wrapper.find("bl-table-header-cell");
-    expect(cell.attributes("style")).toContain("150px");
-  });
-
-  it("renders with multiple prop", () => {
-    const wrapper = mount(BvTable, {
-      props: { columns, data, selectable: true, multiple: true, selected: [1] },
-    });
-    const blTable = wrapper.find("bl-table");
-    expect(blTable.attributes("multiple")).toBeDefined();
-  });
-});

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;
-}

package/src/tag/Tag.spec.ts

@@ -1,84 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-import BvTag from "./Tag.vue";
-
-describe("BvTag", () => {
-  it("renders with default props", () => {
-    const wrapper = mount(BvTag);
-    expect(wrapper.find("bl-tag").exists()).toBe(true);
-  });
-
-  it("passes variant and size to bl-tag", () => {
-    const wrapper = mount(BvTag, {
-      props: { variant: "selectable", size: "small" },
-    });
-    const el = wrapper.find("bl-tag").element;
-    expect(el.getAttribute("variant")).toBe("selectable");
-    expect(el.getAttribute("size")).toBe("small");
-  });
-
-  it("emits close when closable tag receives bl-tag-click", async () => {
-    const wrapper = mount(BvTag, { props: { closable: true } });
-    wrapper.find("bl-tag").element.dispatchEvent(
-      new CustomEvent("bl-tag-click", {
-        bubbles: true,
-        detail: { value: null, selected: false },
-      }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("close")).toHaveLength(1);
-  });
-
-  it("renders slot content", () => {
-    const wrapper = mount(BvTag, { slots: { default: "Tag label" } });
-    expect(wrapper.text()).toContain("Tag label");
-  });
-
-  it("maps closable prop to variant='removable' on bl-tag", () => {
-    const wrapper = mount(BvTag, { props: { closable: true } });
-    const el = wrapper.find("bl-tag").element;
-    expect(el.getAttribute("variant")).toBe("removable");
-  });
-
-  it("emits update:selected when selectable tag receives bl-tag-click", async () => {
-    const wrapper = mount(BvTag, { props: { variant: "selectable" } });
-    wrapper.find("bl-tag").element.dispatchEvent(
-      new CustomEvent("bl-tag-click", {
-        bubbles: true,
-        detail: { value: "tag1", selected: true },
-      }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("update:selected")).toEqual([[true]]);
-  });
-
-  it("does not emit close or update:selected for non-closable non-selectable tag click", async () => {
-    const wrapper = mount(BvTag);
-    wrapper.find("bl-tag").element.dispatchEvent(
-      new CustomEvent("bl-tag-click", {
-        bubbles: true,
-        detail: { value: null, selected: false },
-      }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("close")).toBeUndefined();
-    expect(wrapper.emitted("update:selected")).toBeUndefined();
-  });
-
-  it("renders icon slot when provided", () => {
-    const wrapper = mount(BvTag, {
-      slots: { icon: "<span class=\"test-icon\">icon</span>", default: "Label" },
-    });
-    expect(wrapper.find(".test-icon").exists()).toBe(true);
-  });
-
-  it("passes disabled, selected, and value props through to bl-tag", () => {
-    const wrapper = mount(BvTag, {
-      props: { disabled: true, selected: true, value: "my-val" },
-    });
-    const el = wrapper.find("bl-tag").element;
-    expect(el.getAttribute("disabled")).toBe("true");
-    expect(el.getAttribute("selected")).toBe("true");
-    expect(el.getAttribute("value")).toBe("my-val");
-  });
-});

package/src/tag/Tag.vue

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

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