@baklavue/ui 1.0.0-preview.2 → 1.0.0-preview.3

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [@baklavue/ui-v1.0.0-preview.3](https://github.com/erbilnas/baklavue/compare/@baklavue/ui-v1.0.0-preview.2...@baklavue/ui-v1.0.0-preview.3) (2026-02-11)
+
+
+### Features
+
+* add new components ([b3c535e](https://github.com/erbilnas/baklavue/commit/b3c535e010e1e43b9b04365df2205b69a0777695))
+* add new composables ([49105ea](https://github.com/erbilnas/baklavue/commit/49105eaa106f1a5b888f9e3f9638ed9776b3d55b))
+
 # [@baklavue/ui-v1.0.0-preview.2](https://github.com/erbilnas/baklavue/compare/@baklavue/ui-v1.0.0-preview.1...@baklavue/ui-v1.0.0-preview.2) (2026-02-11)
 
 

package/README.md

@@ -1,15 +1,77 @@
-# ui
+# @baklavue/ui
 
-To install dependencies:
+Vue 3 UI kit for [Trendyol Baklava](https://github.com/Trendyol/baklava) design system. Vue-friendly wrappers with full `v-model` support, slots, and TypeScript.
+
+## Installation
 
 ```bash
-bun install
+# bun
+bun add @baklavue/ui
+
+# npm
+npm install @baklavue/ui
+
+# pnpm
+pnpm add @baklavue/ui
+
+# yarn
+yarn add @baklavue/ui
 ```
 
-To run:
+Requires Vue 3 and TypeScript 5.9+ (peer dependencies).
 
-```bash
-bun run index.ts
+## Setup
+
+Components load Baklava styles and scripts automatically when mounted. For explicit loading (e.g. before any component mounts), call `loadBaklavaResources()` in `main.ts`:
+
+```ts
+import { loadBaklavaResources } from "@baklavue/ui";
+
+loadBaklavaResources(); // optional
+```
+
+## Usage
+
+```vue
+<template>
+  <BvButton variant="primary" @click="handleClick">Click me</BvButton>
+  <BvInput v-model="email" label="Email" placeholder="Enter your email" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvButton, BvInput } from "@baklavue/ui";
+
+const email = ref("");
+
+const handleClick = () => {
+  console.log("Email:", email.value);
+};
+</script>
 ```
 
-This project was created using `bun init` in bun v1.1.34. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
+## Components
+
+All components use the `Bv-` prefix and support TypeScript, `v-model`, Vue events, reactive props, and slots.
+
+| Category   | Components                                                                 |
+| ---------- | -------------------------------------------------------------------------- |
+| **Form**   | BvButton, BvInput, BvCheckbox, BvRadio, BvSwitch, BvSelect, BvTextarea, BvDatepicker |
+| **Feedback** | BvAlert, BvBadge, BvTag, BvNotification, BvSpinner                         |
+| **Layout** | BvDialog, BvDrawer, BvDropdown, BvTooltip, BvAccordion, BvTab, BvStepper    |
+| **Navigation** | BvLink, BvPagination, BvSplitButton                                         |
+| **Data**   | BvTable, BvIcon                                                             |
+
+## Requirements
+
+- **Vue 3.0+** — Composition API
+- **TypeScript 5.9.2+** (peer dependency)
+
+## Documentation
+
+- [Full docs](https://erbilnas.github.io/baklavue/) — Guide and examples
+- [Components](https://erbilnas.github.io/baklavue/components/) — Component reference
+
+## License
+
+[MIT](LICENSE)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baklavue/ui",
-  "version": "1.0.0-preview.2",
+  "version": "1.0.0-preview.3",
   "description": "Vue 3 UI kit for Trendyol Baklava Design System",
   "author": "erbilnas",
   "license": "MIT",

package/src/index.ts

@@ -23,7 +23,9 @@ export * from "./link";
 export * from "./notification";
 export * from "./pagination";
 export * from "./radio";
+export * from "./scroll-to-top";
 export * from "./select";
+export * from "./skeleton";
 export * from "./spinner";
 export * from "./split-button";
 export * from "./stepper";

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

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

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

@@ -0,0 +1,42 @@
+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/skeleton/Skeleton.vue

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

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

package/src/skeleton/skeleton.types.ts

@@ -0,0 +1,33 @@
+/**
+ * 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;
+}