@baklavue/ui 1.0.0 → 1.0.2-preview.1

package/src/checkbox/Checkbox.vue

@@ -1,148 +0,0 @@
-<script setup lang="ts">
-/**
- * Checkbox Component
- *
- * A Vue UI kit component for Baklava's `bl-checkbox` and `bl-checkbox-group` web components.
- * Can be used as either a single checkbox or as a group container for multiple checkboxes.
- *
- * @component
- * @example
- * ```vue
- * <!-- Single checkbox -->
- * <template>
- *   <BvCheckbox v-model="checked" label="I agree" />
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- Checkbox group -->
- * <template>
- *   <BvCheckbox v-model="selected" :items="items">
- *     <template #item="{ item }">{{ item.label }}</template>
- *   </BvCheckbox>
- * </template>
- * ```
- */
-import { computed, onMounted } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { CheckboxProps } from "./checkbox.types";
-
-const props = withDefaults(defineProps<CheckboxProps>(), {
-  modelValue: undefined,
-  disabled: undefined,
-  indeterminate: undefined,
-  value: undefined,
-  name: undefined,
-  label: undefined,
-  items: undefined,
-});
-
-const emit = defineEmits<{
-  "update:modelValue": [value: boolean | (string | number)[]];
-  change: [event: CustomEvent];
-  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 (always array).
- */
-const groupValue = computed(() => {
-  const val = props.modelValue;
-  if (Array.isArray(val)) return val;
-  return [];
-});
-
-/**
- * Check if an item is selected in group mode.
- */
-const isItemChecked = (item: { value: string | number }) => {
-  return groupValue.value.includes(item.value);
-};
-
-/**
- * Handles the change event from the single checkbox.
- */
-const handleSingleChange = (event: CustomEvent) => {
-  const checked = (event.target as HTMLInputElement & { checked?: boolean })
-    ?.checked;
-  emit("change", event);
-  emit("update:modelValue", checked ?? false);
-};
-
-/**
- * Handles the change event from the checkbox group.
- * Normalizes value to array (Baklava may emit array or comma-separated string).
- */
-const handleGroupChange = (event: CustomEvent) => {
-  emit("change", event);
-  const target = event.target as { value?: unknown };
-  let newValue: (string | number)[];
-  if (Array.isArray(target?.value)) {
-    newValue = target.value as (string | number)[];
-  } else if (typeof target?.value === "string") {
-    newValue = target.value ? target.value.split(",").map((s) => s.trim()) : [];
-  } else {
-    newValue = [];
-  }
-  emit("update:modelValue", newValue);
-};
-
-onMounted(() => {
-  loadBaklavaResources();
-});
-</script>
-
-<template>
-  <!-- Group mode: render as bl-checkbox-group -->
-  <bl-checkbox-group
-    v-if="isGroupMode"
-    :value="groupValue"
-    @bl-checkbox-group-change="handleGroupChange"
-  >
-    <bl-checkbox
-      v-for="(item, index) in props.items"
-      :key="String(item.value)"
-      v-bind="{
-        value: item.value,
-        checked: isItemChecked(item),
-        disabled: item.disabled === true ? true : undefined,
-        indeterminate: item.indeterminate === true ? true : undefined,
-        name: item.name,
-      }"
-    >
-      <slot name="item" :item="item" :index="index">
-        {{ item.label }}
-      </slot>
-    </bl-checkbox>
-  </bl-checkbox-group>
-
-  <!-- Single checkbox mode: render as bl-checkbox -->
-  <bl-checkbox
-    v-else
-    v-bind="{
-      checked:
-        props.modelValue === true
-          ? true
-          : props.modelValue === false
-            ? false
-            : undefined,
-      disabled: props.disabled === true ? true : undefined,
-      indeterminate: props.indeterminate === true ? true : undefined,
-      value: props.value,
-      name: props.name,
-    }"
-    @bl-change="handleSingleChange"
-    @bl-input="emit('input', $event)"
-  >
-    <slot>{{ label }}</slot>
-  </bl-checkbox>
-</template>

package/src/checkbox/checkbox.types.ts

@@ -1,108 +0,0 @@
-/**
- * Properties for a single checkbox item when used in group mode.
- *
- * @interface CheckboxItem
- */
-export interface CheckboxItem {
-  /**
-   * The value of the checkbox (used for v-model in group mode).
-   */
-  value: string | number;
-
-  /**
-   * The label text displayed next to the checkbox.
-   */
-  label?: string;
-
-  /**
-   * Whether the checkbox is checked.
-   *
-   * @default false
-   */
-  checked?: boolean;
-
-  /**
-   * Whether the checkbox is disabled.
-   *
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Whether the checkbox is in indeterminate state.
-   *
-   * @default false
-   */
-  indeterminate?: boolean;
-
-  /**
-   * The name attribute for the checkbox.
-   */
-  name?: string;
-
-  /**
-   * Additional custom data for use in the #item scoped slot.
-   */
-  [key: string]: unknown;
-}
-
-/**
- * Props for the Checkbox component.
- *
- * When `items` prop is provided, the component acts as a checkbox group container.
- * Otherwise, it acts as a single checkbox.
- *
- * @interface CheckboxProps
- */
-export interface CheckboxProps {
-  /**
-   * Checked state (single mode) or selected values array (group mode).
-   * Use v-model for two-way binding.
-   * - Single mode: boolean
-   * - Group mode: (string | number)[]
-   */
-  modelValue?: boolean | (string | number)[];
-
-  /**
-   * Whether the checkbox is disabled.
-   * Only used when component is in single checkbox mode.
-   *
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Whether the checkbox is in indeterminate state.
-   * Only used when component is in single checkbox mode.
-   *
-   * @default false
-   */
-  indeterminate?: boolean;
-
-  /**
-   * The value of the checkbox (for form submission).
-   * Only used when component is in single checkbox mode.
-   */
-  value?: string | number;
-
-  /**
-   * The name attribute for the checkbox.
-   * Only used when component is in single checkbox mode.
-   */
-  name?: string;
-
-  /**
-   * The label text displayed next to the checkbox.
-   * Only used when component is in single checkbox mode.
-   * Can be overridden by default slot content.
-   */
-  label?: string;
-
-  /**
-   * Array of checkbox items to render when in group mode.
-   * Each item will be rendered as a bl-checkbox element inside bl-checkbox-group.
-   * Only used when component is in group mode.
-   */
-  items?: CheckboxItem[];
-
-}

package/src/checkbox/index.ts

@@ -1,2 +0,0 @@
-export { default as BvCheckbox } from "./Checkbox.vue";
-export type { CheckboxProps, CheckboxItem } from "./checkbox.types";

package/src/chip/Chip.spec.ts

@@ -1,49 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-import BvChip from "./Chip.vue";
-
-describe("BvChip", () => {
-  it("renders in default mode with slot", () => {
-    const wrapper = mount(BvChip, {
-      slots: {
-        default: "Child content",
-      },
-    });
-    expect(wrapper.find(".bv-chip").exists()).toBe(true);
-    expect(wrapper.text()).toContain("Child content");
-  });
-
-  it("renders in standalone mode", () => {
-    const wrapper = mount(BvChip, {
-      props: { standalone: true, text: "5" },
-    });
-    expect(wrapper.find(".bv-chip--standalone").exists()).toBe(true);
-    expect(wrapper.text()).toContain("5");
-  });
-
-  it("applies color and position styles", () => {
-    const wrapper = mount(BvChip, {
-      props: { text: "1", color: "success", position: "top-left" },
-    });
-    const badge = wrapper.find(".bv-chip__badge").element;
-    expect(badge.className).toContain("bv-chip__badge--top-left");
-    expect(badge.getAttribute("style")).toContain("bl-color-success");
-  });
-
-  it("renders slot content over text prop", () => {
-    const wrapper = mount(BvChip, {
-      props: { text: "fallback" },
-      slots: {
-        content: "Custom content",
-      },
-    });
-    expect(wrapper.text()).toContain("Custom content");
-  });
-
-  it("hides badge when show is false", () => {
-    const wrapper = mount(BvChip, {
-      props: { text: "1", show: false },
-    });
-    expect(wrapper.find(".bv-chip__badge").exists()).toBe(false);
-  });
-});

package/src/chip/Chip.vue

@@ -1,237 +0,0 @@
-<script setup lang="ts">
-/**
- * Chip Component
- *
- * A wrapper that displays a badge/indicator (text or number) positioned on top of another element.
- * Similar to Nuxt UI's UChip. Used for notification counts, status indicators, and standalone badges.
- *
- * @component
- * @example
- * ```vue
- * <template>
- *   <BvChip :text="5">
- *     <BvButton icon="mail" />
- *   </BvChip>
- * </template>
- * ```
- */
-import { computed, onMounted } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { ChipProps } from "./chip.types";
-
-const props = withDefaults(defineProps<ChipProps>(), {
-  text: undefined,
-  color: "primary",
-  size: "md",
-  position: "top-right",
-  inset: false,
-  standalone: false,
-  show: true,
-});
-
-const colorStyles = computed(() => {
-  const colorMap: Record<string, { backgroundColor: string; color: string }> = {
-    primary: {
-      backgroundColor: "var(--bl-color-primary)",
-      color: "var(--bl-color-primary-contrast, #fff)",
-    },
-    success: {
-      backgroundColor: "var(--bl-color-success)",
-      color: "var(--bl-color-success-contrast, #fff)",
-    },
-    danger: {
-      backgroundColor: "var(--bl-color-danger)",
-      color: "var(--bl-color-danger-contrast, #fff)",
-    },
-    warning: {
-      backgroundColor: "var(--bl-color-warning)",
-      color: "var(--bl-color-warning-contrast, #fff)",
-    },
-    info: {
-      backgroundColor: "var(--bl-color-info)",
-      color: "var(--bl-color-info-contrast, #fff)",
-    },
-    neutral: {
-      backgroundColor: "var(--bl-color-neutral-darkest)",
-      color: "var(--bl-color-neutral-full, #fff)",
-    },
-  };
-  return colorMap[props.color] ?? colorMap["primary"];
-});
-
-const sizeClass = computed(() => `bv-chip__badge--${props.size}`);
-
-onMounted(() => {
-  loadBaklavaResources();
-});
-</script>
-
-<template>
-  <template v-if="standalone">
-    <span
-      v-if="show"
-      class="bv-chip bv-chip--standalone"
-      :class="sizeClass"
-      :style="colorStyles"
-    >
-      <slot name="content">
-        {{ text }}
-      </slot>
-    </span>
-  </template>
-  <div v-else class="bv-chip" :class="{ 'bv-chip--has-content': $slots['default'] }">
-    <slot />
-    <span
-      v-if="show"
-      class="bv-chip__badge"
-      :class="[sizeClass, `bv-chip__badge--${position}`, { 'bv-chip__badge--inset': inset }]"
-      :style="colorStyles"
-    >
-      <slot name="content">
-        {{ text }}
-      </slot>
-    </span>
-  </div>
-</template>
-
-<style scoped>
-.bv-chip {
-  position: relative;
-  display: inline-flex;
-}
-
-.bv-chip--standalone {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  font-weight: 600;
-  white-space: nowrap;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-.bv-chip--has-content .bv-chip__badge {
-  position: absolute;
-}
-
-.bv-chip__badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.25em;
-  border-radius: 9999px;
-  font-weight: 600;
-  white-space: nowrap;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-/* Position: top-right (default) */
-.bv-chip__badge--top-right {
-  top: 0;
-  right: 0;
-  transform: translate(50%, -50%);
-}
-
-.bv-chip__badge--top-right.bv-chip__badge--inset {
-  top: 2px;
-  right: 2px;
-  transform: translate(50%, -50%);
-}
-
-/* Position: bottom-right */
-.bv-chip__badge--bottom-right {
-  top: 100%;
-  right: 0;
-  transform: translate(50%, 50%);
-}
-
-.bv-chip__badge--bottom-right.bv-chip__badge--inset {
-  top: calc(100% - 2px);
-  right: 2px;
-  transform: translate(50%, 50%);
-}
-
-/* Position: top-left */
-.bv-chip__badge--top-left {
-  top: 0;
-  left: 0;
-  transform: translate(-50%, -50%);
-}
-
-.bv-chip__badge--top-left.bv-chip__badge--inset {
-  top: 2px;
-  left: 2px;
-  transform: translate(-50%, -50%);
-}
-
-/* Position: bottom-left */
-.bv-chip__badge--bottom-left {
-  top: 100%;
-  left: 0;
-  transform: translate(-50%, 50%);
-}
-
-.bv-chip__badge--bottom-left.bv-chip__badge--inset {
-  top: calc(100% - 2px);
-  left: 2px;
-  transform: translate(-50%, 50%);
-}
-
-/* Size variants */
-.bv-chip__badge--xs {
-  font-size: 0.625rem;
-  padding: 0 0.25rem;
-  min-width: 1em;
-  height: 1em;
-}
-
-.bv-chip__badge--sm {
-  font-size: 0.6875rem;
-  padding: 0 0.3125rem;
-  min-width: 1.125em;
-  height: 1.125em;
-}
-
-.bv-chip__badge--md {
-  font-size: 0.75rem;
-  padding: 0 0.375rem;
-  min-width: 1.25em;
-  height: 1.25em;
-}
-
-.bv-chip__badge--lg {
-  font-size: 0.875rem;
-  padding: 0 0.5rem;
-  min-width: 1.5em;
-  height: 1.5em;
-}
-
-/* Standalone size classes */
-.bv-chip--standalone.bv-chip__badge--xs {
-  font-size: 0.625rem;
-  padding: 0 0.25rem;
-  min-width: 1em;
-  height: 1em;
-}
-
-.bv-chip--standalone.bv-chip__badge--sm {
-  font-size: 0.6875rem;
-  padding: 0 0.3125rem;
-  min-width: 1.125em;
-  height: 1.125em;
-}
-
-.bv-chip--standalone.bv-chip__badge--md {
-  font-size: 0.75rem;
-  padding: 0 0.375rem;
-  min-width: 1.25em;
-  height: 1.25em;
-}
-
-.bv-chip--standalone.bv-chip__badge--lg {
-  font-size: 0.875rem;
-  padding: 0 0.5rem;
-  min-width: 1.5em;
-  height: 1.5em;
-}
-</style>

package/src/chip/chip.types.ts

@@ -1,77 +0,0 @@
-/**
- * Chip color variant.
- */
-export type ChipColor =
-  | "primary"
-  | "success"
-  | "danger"
-  | "warning"
-  | "info"
-  | "neutral";
-
-/**
- * Chip size variant.
- */
-export type ChipSize = "xs" | "sm" | "md" | "lg";
-
-/**
- * Chip position relative to wrapped element.
- */
-export type ChipPosition =
-  | "top-right"
-  | "bottom-right"
-  | "top-left"
-  | "bottom-left";
-
-/**
- * Props for the Chip component.
- */
-export interface ChipProps {
-  /**
-   * Display text or number inside the chip.
-   */
-  text?: string | number;
-
-  /**
-   * Color variant.
-   *
-   * @default "primary"
-   */
-  color?: ChipColor;
-
-  /**
-   * Size variant.
-   *
-   * @default "md"
-   */
-  size?: ChipSize;
-
-  /**
-   * Position of the chip relative to the wrapped element.
-   *
-   * @default "top-right"
-   */
-  position?: ChipPosition;
-
-  /**
-   * When true, keep the chip inside the component for rounded elements (e.g. avatar).
-   *
-   * @default false
-   */
-  inset?: boolean;
-
-  /**
-   * When true, render the chip inline without wrapping content.
-   * Use with inset for standalone badges.
-   *
-   * @default false
-   */
-  standalone?: boolean;
-
-  /**
-   * When false, hide the chip.
-   *
-   * @default true
-   */
-  show?: boolean;
-}

package/src/chip/index.ts

@@ -1,2 +0,0 @@
-export { default as BvChip } from "./Chip.vue";
-export type { ChipProps, ChipColor, ChipSize, ChipPosition } from "./chip.types";