@baklavue/ui 1.0.0 → 1.0.1

package/src/scroll-to-top/scroll-to-top.types.ts

@@ -1,42 +0,0 @@
-import type { ButtonSize, ButtonVariant } from "@trendyol/baklava/dist/components/button/bl-button";
-
-/**
- * Position of the scroll-to-top button.
- */
-export type ScrollToTopPosition =
-  | "bottom-right"
-  | "bottom-left"
-  | "top-right"
-  | "top-left";
-
-export interface ScrollToTopProps {
-  /**
-   * Scroll threshold in pixels. Button becomes visible when user scrolls past this.
-   * @default 300
-   */
-  threshold?: number;
-
-  /**
-   * Fixed position of the button.
-   * @default "bottom-right"
-   */
-  position?: ScrollToTopPosition;
-
-  /**
-   * Accessible label for screen readers.
-   * @default "Scroll to top"
-   */
-  label?: string;
-
-  /**
-   * Button size.
-   * @default "medium"
-   */
-  size?: ButtonSize;
-
-  /**
-   * Button variant.
-   * @default "primary"
-   */
-  variant?: ButtonVariant;
-}

package/src/select/Select.spec.ts

@@ -1,47 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-import BvSelect from "./Select.vue";
-
-describe("BvSelect", () => {
-  it("renders with default props", () => {
-    const wrapper = mount(BvSelect);
-    expect(wrapper.find("bl-select").exists()).toBe(true);
-  });
-
-  it("passes label and placeholder to bl-select", () => {
-    const wrapper = mount(BvSelect, {
-      props: { label: "Choose", placeholder: "Select..." },
-    });
-    const el = wrapper.find("bl-select").element;
-    expect(el.getAttribute("label")).toBe("Choose");
-    expect(el.getAttribute("placeholder")).toBe("Select...");
-  });
-
-  it("emits update:modelValue when bl-select fires bl-change", async () => {
-    const wrapper = mount(BvSelect);
-    const el = wrapper.find("bl-select").element as HTMLElement & { value?: string };
-    el.value = "option1";
-    el.dispatchEvent(
-      new CustomEvent("bl-change", {
-        bubbles: true,
-        detail: { target: el },
-      }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("update:modelValue")).toEqual([["option1"]]);
-  });
-
-  it("renders options from options prop", () => {
-    const wrapper = mount(BvSelect, {
-      props: {
-        options: [
-          { value: "a", label: "Option A" },
-          { value: "b", label: "Option B" },
-        ],
-      },
-    });
-    expect(wrapper.findAll("bl-select-option")).toHaveLength(2);
-    expect(wrapper.text()).toContain("Option A");
-    expect(wrapper.text()).toContain("Option B");
-  });
-});

package/src/select/Select.vue

@@ -1,147 +0,0 @@
-<script setup lang="ts">
-/**
- * Select Component
- *
- * A Vue UI kit component for Baklava's `bl-select` web component with v-model support.
- * Supports both slot-based options and the `options` prop for programmatic rendering.
- *
- * @component
- * @example
- * ```vue
- * <!-- Basic single select with slot -->
- * <template>
- *   <BvSelect v-model="selected" label="Choose an option">
- *     <bl-select-option value="a">Option A</bl-select-option>
- *     <bl-select-option value="b">Option B</bl-select-option>
- *   </BvSelect>
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- Options array -->
- * <template>
- *   <BvSelect v-model="country" label="Country" :options="countries" />
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- Multiple select -->
- * <template>
- *   <BvSelect v-model="selected" label="Select multiple" :multiple="true" :options="items" />
- * </template>
- * ```
- */
-import { computed, onMounted } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { SelectProps } from "./select.types";
-
-/**
- * Component props with default values.
- */
-const props = withDefaults(defineProps<SelectProps>(), {
-  modelValue: undefined,
-  options: undefined,
-  label: undefined,
-  placeholder: undefined,
-  name: undefined,
-  required: undefined,
-  disabled: undefined,
-  multiple: undefined,
-  size: undefined,
-  clearable: undefined,
-  helpText: undefined,
-  customInvalidText: undefined,
-  searchBar: undefined,
-  searchBarPlaceholder: undefined,
-});
-
-/**
- * Component events.
- */
-const emit = defineEmits<{
-  /**
-   * Emitted when the selection changes. Use with v-model.
-   *
-   * @param {string | string[] | null} value - The selected value(s). Array when multiple.
-   */
-  "update:modelValue": [value: string | string[] | null];
-  /**
-   * Emitted when selection changes (bl-change event).
-   *
-   * @param {CustomEvent} event - The native bl-change event from bl-select.
-   */
-  change: [event: CustomEvent];
-  /**
-   * Emitted on input (bl-input event).
-   *
-   * @param {CustomEvent} event - The native bl-input event from bl-select.
-   */
-  input: [event: CustomEvent];
-}>();
-
-/**
- * Handles the bl-change event from the underlying bl-select component.
- * Syncs v-model and forwards the change event.
- * The bl-select element (event.target) exposes a .value property for the selected value.
- *
- * @param {CustomEvent} event - The bl-change event from bl-select.
- */
-const handleChange = (event: CustomEvent) => {
-  emit("change", event);
-  const target = event.target as HTMLSelectElement & {
-    value?: string | string[] | null;
-  };
-  emit("update:modelValue", target?.value ?? null);
-};
-
-/**
- * Lifecycle hook: Component mounted.
- *
- * Loads Baklava resources when the component is mounted.
- */
-/**
- * Props to pass to bl-select. Excludes modelValue (we use :value) and options
- * (we render bl-select-option children from options in the template).
- */
-const selectProps = computed(() => {
-  const { modelValue: _, options: __, ...rest } = props;
-  return {
-    ...rest,
-    disabled: rest.disabled === true ? true : undefined,
-    multiple: rest.multiple === true ? true : undefined,
-    "help-text": rest.helpText ?? undefined,
-    "invalid-text": rest.customInvalidText ?? undefined,
-    "search-bar": rest.searchBar === true ? true : undefined,
-    "search-bar-placeholder": rest.searchBarPlaceholder ?? undefined,
-  };
-});
-
-onMounted(() => {
-  loadBaklavaResources();
-});
-</script>
-
-<template>
-  <bl-select
-    v-bind="selectProps"
-    :value="props.modelValue"
-    @bl-change="handleChange"
-    @bl-input="emit('input', $event)"
-  >
-    <!-- Render options from options prop when provided -->
-    <template v-if="options">
-      <bl-select-option
-        v-for="option in options"
-        :key="option.value"
-        :value="option.value"
-        :disabled="option.disabled"
-      >
-        {{ option.label }}
-      </bl-select-option>
-    </template>
-    <!-- Default slot for custom bl-select-option children -->
-    <slot />
-  </bl-select>
-</template>

package/src/select/index.ts

@@ -1,2 +0,0 @@
-export { default as BvSelect } from "./Select.vue";
-export type { SelectProps, SelectOption, SelectSize } from "./select.types";

package/src/select/select.types.ts

@@ -1,53 +0,0 @@
-/**
- * Size variants for the Select component.
- * @see {@link https://baklavastyle.trendyol.com/components/select | Baklava Select}
- */
-export type SelectSize = "small" | "medium" | "large";
-
-/**
- * Option shape for the Select component's `options` prop.
- * Each option can have a value, display label, and optional disabled state.
- */
-export interface SelectOption {
-  /** The value submitted with the form or bound via v-model */
-  value: string;
-  /** The label displayed to the user */
-  label: string;
-  /** Whether the option is disabled */
-  disabled?: boolean;
-}
-
-/**
- * Props for the Select Vue UI kit component.
- * Wraps Baklava's `bl-select` web component with v-model support.
- */
-export interface SelectProps {
-  /** Selected value(s) - use with v-model. Single value or array when multiple. */
-  modelValue?: string | string[] | null;
-  /** Array of options for programmatic option rendering. Alternative to default slot. */
-  options?: SelectOption[];
-  /** Label displayed above or as placeholder for the select */
-  label?: string;
-  /** Placeholder text when no value is selected */
-  placeholder?: string;
-  /** Select name attribute for form submission */
-  name?: string;
-  /** Whether the select is required (shows error state when empty) */
-  required?: boolean;
-  /** Whether the select is disabled */
-  disabled?: boolean;
-  /** Whether multiple options can be selected */
-  multiple?: boolean;
-  /** Size of the select: small, medium, or large */
-  size?: SelectSize;
-  /** Whether the selected value can be cleared */
-  clearable?: boolean;
-  /** Help text displayed below the select */
-  helpText?: string;
-  /** Custom error message for validation */
-  customInvalidText?: string;
-  /** Enable search/filter for options in the dropdown */
-  searchBar?: boolean;
-  /** Placeholder text for the search input */
-  searchBarPlaceholder?: string;
-}

package/src/skeleton/Skeleton.spec.ts

@@ -1,28 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-import BvSkeleton from "./Skeleton.vue";
-
-describe("BvSkeleton", () => {
-  it("renders with default props", () => {
-    const wrapper = mount(BvSkeleton);
-    expect(wrapper.find(".skeleton-wrapper").exists()).toBe(true);
-    expect(wrapper.findAll(".skeleton")).toHaveLength(1);
-  });
-
-  it("renders multiple skeletons when count > 1", () => {
-    const wrapper = mount(BvSkeleton, { props: { count: 3 } });
-    expect(wrapper.findAll(".skeleton")).toHaveLength(3);
-  });
-
-  it("applies variant class", () => {
-    const wrapper = mount(BvSkeleton, { props: { variant: "circle" } });
-    expect(wrapper.find(".skeleton--circle").exists()).toBe(true);
-  });
-
-  it("has aria-label for accessibility", () => {
-    const wrapper = mount(BvSkeleton);
-    expect(wrapper.find(".skeleton-wrapper").element.getAttribute("aria-label")).toBe(
-      "Loading",
-    );
-  });
-});

package/src/skeleton/Skeleton.vue

@@ -1,115 +0,0 @@
-<script setup lang="ts">
-/**
- * Skeleton Component
- *
- * Animated placeholder for content loading states.
- * Displays a shimmer effect with configurable variants.
- *
- * @component
- * @example
- * ```vue
- * <template>
- *   <BvSkeleton />
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <template>
- *   <BvSkeleton variant="text" :count="3" />
- * </template>
- * ```
- */
-import { computed, onMounted } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { SkeletonProps } from "./skeleton.types";
-
-const props = withDefaults(defineProps<SkeletonProps>(), {
-  variant: "rectangle",
-  width: undefined,
-  height: undefined,
-  count: 1,
-});
-
-const effectiveWidth = computed(() => {
-  if (props.width) return props.width;
-  if (props.variant === "circle") return "40px";
-  return "100%";
-});
-
-const effectiveHeight = computed(() => {
-  if (props.height) return props.height;
-  if (props.variant === "circle") return "40px";
-  return "1rem";
-});
-
-
-onMounted(() => {
-  loadBaklavaResources();
-});
-</script>
-
-<template>
-  <div
-    class="skeleton-wrapper"
-    :class="`skeleton-wrapper--${props.variant}`"
-    role="status"
-    aria-label="Loading"
-  >
-    <div
-      v-for="n in count"
-      :key="n"
-      class="skeleton"
-      :class="['skeleton--' + props.variant]"
-      :style="{
-        width: effectiveWidth,
-        height: effectiveHeight,
-      }"
-    />
-  </div>
-</template>
-
-<style scoped>
-.skeleton-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.skeleton {
-  background: var(--bl-color-neutral-light, #e5e7eb);
-  border-radius: var(--bl-border-radius-s, 0.25rem);
-  position: relative;
-  overflow: hidden;
-}
-
-.skeleton::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(255, 255, 255, 0.4) 50%,
-    transparent 100%
-  );
-  animation: skeleton-shimmer 1.5s ease-in-out infinite;
-}
-
-.skeleton--circle {
-  border-radius: var(--bl-border-radius-circle, 50%);
-}
-
-.skeleton--text {
-  height: 1rem;
-}
-
-@keyframes skeleton-shimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-</style>

package/src/skeleton/index.ts

@@ -1,2 +0,0 @@
-export { default as BvSkeleton } from "./Skeleton.vue";
-export type { SkeletonProps, SkeletonVariant } from "./skeleton.types";

package/src/skeleton/skeleton.types.ts

@@ -1,33 +0,0 @@
-/**
- * Skeleton shape variant.
- */
-export type SkeletonVariant = "text" | "rectangle" | "circle";
-
-export interface SkeletonProps {
-  /**
-   * Shape variant of the skeleton.
-   * - text: Line shape for text placeholders
-   * - rectangle: Default block shape
-   * - circle: Circular shape for avatars
-   * @default "rectangle"
-   */
-  variant?: SkeletonVariant;
-
-  /**
-   * Width as CSS value (e.g. "100%", "200px", "5rem").
-   * @default "100%" for text/rectangle, "40px" for circle
-   */
-  width?: string;
-
-  /**
-   * Height as CSS value (e.g. "1rem", "20px").
-   * @default "1rem" for text, "1rem" for rectangle, "40px" for circle
-   */
-  height?: string;
-
-  /**
-   * Number of skeleton elements to render (for text lines).
-   * @default 1
-   */
-  count?: number;
-}

package/src/spinner/Spinner.spec.ts

@@ -1,28 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-import BvSpinner from "./Spinner.vue";
-
-describe("BvSpinner", () => {
-  it("renders with default props", () => {
-    const wrapper = mount(BvSpinner);
-    const blSpinner = wrapper.find("bl-spinner");
-    expect(blSpinner.exists()).toBe(true);
-  });
-
-  it("passes size and variant to bl-spinner", () => {
-    const wrapper = mount(BvSpinner, {
-      props: { size: "large", variant: "primary" },
-    });
-    const blSpinner = wrapper.find("bl-spinner").element;
-    expect(blSpinner.getAttribute("size")).toBe("large");
-    expect(blSpinner.getAttribute("variant")).toBe("primary");
-  });
-
-  it("passes aria-label for accessibility", () => {
-    const wrapper = mount(BvSpinner, {
-      props: { label: "Loading..." },
-    });
-    const blSpinner = wrapper.find("bl-spinner").element;
-    expect(blSpinner.getAttribute("aria-label")).toBe("Loading...");
-  });
-});

package/src/spinner/Spinner.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-/**
- * Spinner Component
- *
- * A Vue UI kit component for Baklava's `bl-spinner` web component for loading indicators.
- * Displays an animated spinner with configurable size and variant.
- *
- * @component
- * @example
- * ```vue
- * <template>
- *   <BvSpinner />
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <template>
- *   <BvSpinner size="large" label="Loading..." />
- * </template>
- * ```
- */
-import { computed, onMounted } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { SpinnerProps } from "./spinner.types";
-
-/**
- * Component props with default values.
- */
-const props = withDefaults(defineProps<SpinnerProps>(), {
-  size: undefined,
-  variant: undefined,
-  label: undefined,
-});
-
-/** Props to pass to bl-spinner (excludes label, which is used for aria-label) */
-const spinnerProps = computed(() => {
-  const { label: _, ...rest } = props;
-  return rest;
-});
-
-onMounted(() => {
-  loadBaklavaResources();
-});
-</script>
-
-<template>
-  <bl-spinner v-bind="spinnerProps" :aria-label="label" />
-</template>

package/src/spinner/index.ts

@@ -1,2 +0,0 @@
-export { default as BvSpinner } from "./Spinner.vue";
-export type { SpinnerProps } from "./spinner.types";

package/src/spinner/spinner.types.ts

@@ -1,11 +0,0 @@
-/**
- * Props for the Spinner component.
- */
-export interface SpinnerProps {
-  /** Spinner size (e.g. CSS variable or length like var(--bl-font-size-m)) */
-  size?: string;
-  /** Spinner variant/style */
-  variant?: string;
-  /** Accessible label for screen readers */
-  label?: string;
-}

package/src/split-button/SplitButton.spec.ts

@@ -1,24 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-import BvSplitButton from "./SplitButton.vue";
-
-describe("BvSplitButton", () => {
-  it("renders with label", () => {
-    const wrapper = mount(BvSplitButton, {
-      props: { label: "Actions" },
-    });
-    expect(wrapper.find("bl-split-button").exists()).toBe(true);
-    expect(wrapper.find("bl-split-button").element.getAttribute("label")).toBe(
-      "Actions",
-    );
-  });
-
-  it("emits click when bl-split-button fires bl-click", async () => {
-    const wrapper = mount(BvSplitButton, { props: { label: "Save" } });
-    wrapper.find("bl-split-button").element.dispatchEvent(
-      new CustomEvent("bl-click", { bubbles: true }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("click")).toHaveLength(1);
-  });
-});

package/src/split-button/SplitButton.vue

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-/**
- * SplitButton Component
- *
- * A Vue UI kit component for Baklava's `bl-split-button` web component.
- * A button with a primary action and a dropdown for secondary actions.
- * Dropdown content is provided via the `dropdown-content` slot.
- *
- * @component
- * @example
- * ```vue
- * <template>
- *   <BvSplitButton label="Actions" @click="handleClick">
- *     <template #dropdown-content>
- *       <bl-dropdown-item>Action 1</bl-dropdown-item>
- *       <bl-dropdown-item>Action 2</bl-dropdown-item>
- *     </template>
- *   </BvSplitButton>
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <template>
- *   <BvSplitButton label="Save" icon="check" variant="primary" @click="save" />
- * </template>
- * ```
- */
-import { onMounted } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { SplitButtonProps } from "./split-button.types";
-
-const props = defineProps<SplitButtonProps>();
-
-/**
- * Component events.
- */
-const emit = defineEmits<{
-  /**
-   * Emitted when the main button is clicked.
-   *
-   * @param {CustomEvent} event - The native click event from bl-split-button.
-   */
-  click: [event: CustomEvent];
-  /**
-   * Emitted when the dropdown button is clicked.
-   *
-   * @param {CustomEvent} event - The native dropdown-click event from bl-split-button.
-   */
-  "dropdown-click": [event: CustomEvent];
-}>();
-
-onMounted(() => {
-  loadBaklavaResources();
-});
-</script>
-
-<template>
-  <bl-split-button
-    v-bind="{
-      variant: props.variant,
-      size: props.size,
-      disabled: props.disabled === true ? true : undefined,
-      loading: props.loading === true ? true : undefined,
-      label: props.label,
-      icon: props.icon,
-    }"
-    @bl-click="emit('click', $event)"
-    @bl-dropdown-click="emit('dropdown-click', $event)"
-  >
-    <slot v-if="$slots['dropdown-content']" name="dropdown-content" />
-  </bl-split-button>
-</template>

package/src/split-button/index.ts

@@ -1,2 +0,0 @@
-export { default as BvSplitButton } from "./SplitButton.vue";
-export type { SplitButtonProps } from "./split-button.types";