@baklavue/ui 1.0.0-preview.4 → 1.0.1

package/src/scroll-to-top/ScrollToTop.vue

@@ -1,130 +0,0 @@
-<script setup lang="ts">
-/**
- * ScrollToTop Component
- *
- * A floating button that appears when the user scrolls past a threshold.
- * Clicking it scrolls smoothly to the top of the page.
- *
- * @component
- * @example
- * ```vue
- * <template>
- *   <BvScrollToTop />
- * </template>
- * ```
- */
-import { onMounted, onUnmounted, ref } from "vue";
-import BvButton from "../button/Button.vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { ScrollToTopProps } from "./scroll-to-top.types";
-
-const props = withDefaults(defineProps<ScrollToTopProps>(), {
-  threshold: 300,
-  position: "bottom-right",
-  label: "Scroll to top",
-  size: "medium",
-  variant: "primary",
-});
-
-const emit = defineEmits<{
-  click: [];
-}>();
-
-const isVisible = ref(false);
-let rafId: number | null = null;
-
-const checkVisibility = () => {
-  isVisible.value = window.scrollY > props.threshold;
-};
-
-const handleScroll = () => {
-  if (rafId !== null) return;
-  rafId = requestAnimationFrame(() => {
-    checkVisibility();
-    rafId = null;
-  });
-};
-
-const scrollToTop = () => {
-  window.scrollTo({ top: 0, behavior: "smooth" });
-  emit("click");
-};
-
-const positionClasses: Record<
-  NonNullable<ScrollToTopProps["position"]>,
-  string
-> = {
-  "bottom-right": "scroll-to-top--bottom-right",
-  "bottom-left": "scroll-to-top--bottom-left",
-  "top-right": "scroll-to-top--top-right",
-  "top-left": "scroll-to-top--top-left",
-};
-
-onMounted(() => {
-  loadBaklavaResources();
-  checkVisibility();
-  window.addEventListener("scroll", handleScroll, { passive: true });
-});
-
-onUnmounted(() => {
-  window.removeEventListener("scroll", handleScroll);
-  if (rafId !== null) cancelAnimationFrame(rafId);
-});
-</script>
-
-<template>
-  <Transition name="scroll-to-top-fade">
-    <div
-      v-show="isVisible"
-      :class="['scroll-to-top', positionClasses[position]]"
-      role="complementary"
-      aria-label="Scroll to top"
-    >
-      <BvButton
-        :variant="variant"
-        :size="size"
-        :label="label"
-        icon="arrow_up"
-        @click="scrollToTop"
-      >
-        <template #default></template>
-      </BvButton>
-    </div>
-  </Transition>
-</template>
-
-<style scoped>
-.scroll-to-top {
-  position: fixed;
-  z-index: 1000;
-}
-
-.scroll-to-top--bottom-right {
-  bottom: 1.5rem;
-  right: 1.5rem;
-}
-
-.scroll-to-top--bottom-left {
-  bottom: 1.5rem;
-  left: 1.5rem;
-}
-
-.scroll-to-top--top-right {
-  top: 1.5rem;
-  right: 1.5rem;
-}
-
-.scroll-to-top--top-left {
-  top: 1.5rem;
-  left: 1.5rem;
-}
-
-.scroll-to-top-fade-enter-active,
-.scroll-to-top-fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-.scroll-to-top-fade-enter-from,
-.scroll-to-top-fade-leave-to {
-  opacity: 0;
-}
-</style>

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

@@ -1,2 +0,0 @@
-export { default as BvScrollToTop } from "./ScrollToTop.vue";
-export type { ScrollToTopProps, ScrollToTopPosition } from "./scroll-to-top.types";

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.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.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.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.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";

package/src/split-button/split-button.types.ts

@@ -1,19 +0,0 @@
-import type { BaklavaIcon } from "@trendyol/baklava-icons";
-
-/**
- * Props for the SplitButton component.
- */
-export interface SplitButtonProps {
-  /** Button variant (primary, secondary) */
-  variant?: string;
-  /** Button size (small, medium, large) */
-  size?: string;
-  /** Whether the main button is disabled */
-  disabled?: boolean;
-  /** Loading state of the main button */
-  loading?: boolean;
-  /** Button label */
-  label?: string;
-  /** Icon name for the main button */
-  icon?: BaklavaIcon;
-}