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

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [@baklavue/ui-v1.0.0-preview.4](https://github.com/erbilnas/baklavue/compare/@baklavue/ui-v1.0.0-preview.3...@baklavue/ui-v1.0.0-preview.4) (2026-02-11)
+
+
+### Features
+
+* add file upload component ([7aa41b1](https://github.com/erbilnas/baklavue/commit/7aa41b1766c72572be97c84bddc2ca5dccac9be8))
+* add image component ([609eefe](https://github.com/erbilnas/baklavue/commit/609eefe9a4a9f74fc19c7e2a8aa2ab0d7529686f))
+
 # [@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)
 
 

package/package.json

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

package/src/file-upload/FileUpload.vue

@@ -0,0 +1,440 @@
+<script setup lang="ts">
+/**
+ * FileUpload Component
+ *
+ * A custom file upload component with drag-and-drop zone, click-to-browse,
+ * file list with remove, validation (size/type), and optional preview.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Basic usage -->
+ * <template>
+ *   <BvFileUpload v-model="file" label="Upload document" />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Multiple with validation -->
+ * <template>
+ *   <BvFileUpload
+ *     v-model="files"
+ *     multiple
+ *     accept="image/*"
+ *     :max-size="1024 * 1024"
+ *     @invalid="handleInvalid"
+ *   />
+ * </template>
+ * ```
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import BvIcon from "../icon/Icon.vue";
+import BvTag from "../tag/Tag.vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type {
+  FileUploadInvalidEntry,
+  FileUploadProps,
+} from "./file-upload.types";
+
+const props = withDefaults(defineProps<FileUploadProps>(), {
+  modelValue: undefined,
+  multiple: false,
+  accept: undefined,
+  maxSize: undefined,
+  minSize: undefined,
+  maxFiles: undefined,
+  disabled: false,
+  label: undefined,
+  helpText: undefined,
+  invalidText: undefined,
+  showPreview: false,
+  size: "medium",
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: File | File[] | null];
+  invalid: [entries: FileUploadInvalidEntry[]];
+  change: [files: File[]];
+}>();
+
+const inputRef = ref<HTMLInputElement | null>(null);
+const isDragging = ref(false);
+const previewUrls = ref<Map<File, string>>(new Map());
+
+/** Normalize modelValue to File[] */
+const filesList = computed<File[]>(() => {
+  const v = props.modelValue;
+  if (!v) return [];
+  return Array.isArray(v) ? [...v] : [v];
+});
+
+/** Check if file passes accept filter */
+function matchesAccept(file: File): boolean {
+  if (!props.accept) return true;
+  const rules = props.accept.split(",").map((r) => r.trim());
+  const ext = file.name.split(".").pop()?.toLowerCase() ?? "";
+
+  for (const rule of rules) {
+    if (rule.startsWith(".")) {
+      if (ext === rule.slice(1).toLowerCase()) return true;
+    } else {
+      const mime = file.type;
+      if (rule.endsWith("/*")) {
+        const base = rule.slice(0, -1);
+        if (mime.startsWith(base)) return true;
+      } else if (mime === rule) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+/** Validate files and return invalid entries */
+function validateFiles(
+  incoming: File[],
+  existingCount: number,
+): FileUploadInvalidEntry[] {
+  const invalid: FileUploadInvalidEntry[] = [];
+  const maxFiles = props.maxFiles ?? Infinity;
+  let validAdded = 0;
+
+  for (const file of incoming) {
+    if (!matchesAccept(file)) {
+      invalid.push({ file, reason: "type" });
+      continue;
+    }
+    if (props.maxSize !== undefined && file.size > props.maxSize) {
+      invalid.push({ file, reason: "size" });
+      continue;
+    }
+    if (props.minSize !== undefined && file.size < props.minSize) {
+      invalid.push({ file, reason: "size" });
+      continue;
+    }
+    if (props.multiple && existingCount + validAdded >= maxFiles) {
+      invalid.push({ file, reason: "count" });
+      continue;
+    }
+    validAdded++;
+  }
+
+  return invalid;
+}
+
+/** Process and emit validated files */
+function processFiles(newFiles: File[]) {
+  const valid: File[] = [];
+  const invalid = validateFiles(newFiles, filesList.value.length);
+
+  for (const f of newFiles) {
+    const entry = invalid.find((e) => e.file === f);
+    if (!entry) valid.push(f);
+  }
+
+  if (invalid.length > 0) {
+    emit("invalid", invalid);
+  }
+
+  if (valid.length > 0) {
+    const combined = props.multiple
+      ? [...filesList.value, ...valid]
+      : [valid[0]];
+    const out = props.multiple ? combined : combined[0];
+    emit("update:modelValue", out);
+    emit("change", combined);
+  }
+}
+
+function handleInputChange(e: Event) {
+  const input = e.target as HTMLInputElement;
+  const files = input.files ? Array.from(input.files) : [];
+  processFiles(files);
+  input.value = "";
+}
+
+function handleDrop(e: DragEvent) {
+  e.preventDefault();
+  isDragging.value = false;
+  if (props.disabled) return;
+  const files = e.dataTransfer?.files ? Array.from(e.dataTransfer.files) : [];
+  processFiles(files);
+}
+
+function handleDragOver(e: DragEvent) {
+  e.preventDefault();
+  e.stopPropagation();
+  if (props.disabled) return;
+  isDragging.value = true;
+}
+
+function handleDragLeave() {
+  isDragging.value = false;
+}
+
+function openFilePicker() {
+  if (props.disabled) return;
+  inputRef.value?.click();
+}
+
+function removeFile(index: number) {
+  const list = [...filesList.value];
+  const removed = list[index];
+  list.splice(index, 1);
+  if (props.showPreview && removed && removed.type.startsWith("image/")) {
+    const url = previewUrls.value.get(removed);
+    if (url) URL.revokeObjectURL(url);
+    previewUrls.value.delete(removed);
+  }
+  const out = props.multiple ? list : (list[0] ?? null);
+  emit("update:modelValue", out);
+  emit("change", list);
+}
+
+function getPreviewUrl(file: File): string {
+  if (!file.type.startsWith("image/")) return "";
+  let url = previewUrls.value.get(file);
+  if (!url) {
+    url = URL.createObjectURL(file);
+    previewUrls.value.set(file, url);
+  }
+  return url;
+}
+
+watch(
+  filesList,
+  (files) => {
+    const toRevoke = new Set(previewUrls.value.keys());
+    for (const f of files) {
+      toRevoke.delete(f);
+    }
+    for (const f of toRevoke) {
+      const url = previewUrls.value.get(f);
+      if (url) URL.revokeObjectURL(url);
+      previewUrls.value.delete(f);
+    }
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+
+onBeforeUnmount(() => {
+  for (const url of previewUrls.value.values()) {
+    URL.revokeObjectURL(url);
+  }
+  previewUrls.value.clear();
+});
+
+const zoneSizeClass = computed(() => `file-upload-zone--${props.size}`);
+const hasError = computed(() => !!props.invalidText);
+</script>
+
+<template>
+  <div class="file-upload">
+    <label v-if="label" class="file-upload-label">{{ label }}</label>
+
+    <div
+      class="file-upload-zone"
+      :class="[
+        zoneSizeClass,
+        {
+          'file-upload-zone--dragging': isDragging,
+          'file-upload-zone--disabled': disabled,
+          'file-upload-zone--invalid': hasError,
+        },
+      ]"
+      @click="openFilePicker"
+      @drop="handleDrop"
+      @dragover="handleDragOver"
+      @dragleave="handleDragLeave"
+    >
+      <input
+        ref="inputRef"
+        type="file"
+        class="file-upload-input"
+        :accept="accept"
+        :multiple="multiple"
+        :disabled="disabled"
+        @change="handleInputChange"
+      />
+      <div class="file-upload-content">
+        <BvIcon name="upload" size="24px" class="file-upload-icon" />
+        <span class="file-upload-text">
+          <slot name="hint"> </slot>
+        </span>
+      </div>
+    </div>
+
+    <p v-if="helpText && !hasError" class="file-upload-help">{{ helpText }}</p>
+    <p v-if="invalidText" class="file-upload-invalid">{{ invalidText }}</p>
+
+    <div v-if="filesList.length > 0" class="file-upload-list">
+      <div
+        v-for="(file, index) in filesList"
+        :key="`${file.name}-${file.size}-${index}`"
+        class="file-upload-item"
+      >
+        <div
+          v-if="showPreview && file.type.startsWith('image/')"
+          class="file-upload-preview"
+        >
+          <img
+            :src="getPreviewUrl(file)"
+            :alt="file.name"
+            class="file-upload-thumb"
+          />
+        </div>
+        <BvTag
+          closable
+          size="small"
+          class="file-upload-tag"
+          @close="removeFile(index)"
+        >
+          {{ file.name }} ({{ (file.size / 1024).toFixed(1) }} KB)
+        </BvTag>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.file-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bl-spacing-2, 0.5rem);
+}
+
+.file-upload-label {
+  font: var(--bl-font-body-2-medium, 0.875rem 500);
+  color: var(--bl-color-neutral-darker, #374151);
+}
+
+.file-upload-zone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed var(--bl-color-neutral-light, #e5e7eb);
+  border-radius: var(--bl-radius-m, 8px);
+  background: var(--bl-color-neutral-background, #f9fafb);
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    background 0.2s;
+}
+
+.file-upload-zone:hover:not(.file-upload-zone--disabled) {
+  border-color: var(--bl-color-primary, #ff6000);
+  background: var(--bl-color-primary-background, #fff5f0);
+}
+
+.file-upload-zone--dragging {
+  border-color: var(--bl-color-primary, #ff6000);
+  background: var(--bl-color-primary-background, #fff5f0);
+}
+
+.file-upload-zone--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.file-upload-zone--invalid {
+  border-color: var(--bl-color-danger, #dc2626);
+}
+
+.file-upload-zone--small {
+  min-height: 80px;
+  padding: var(--bl-spacing-3, 0.75rem);
+}
+
+.file-upload-zone--medium {
+  min-height: 120px;
+  padding: var(--bl-spacing-4, 1rem);
+}
+
+.file-upload-zone--large {
+  min-height: 160px;
+  padding: var(--bl-spacing-5, 1.25rem);
+}
+
+.file-upload-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.file-upload-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bl-spacing-2, 0.5rem);
+}
+
+.file-upload-icon {
+  color: var(--bl-color-neutral-subtle, #9ca3af);
+}
+
+.file-upload-text {
+  font: var(--bl-font-body-2-regular, 0.875rem 400);
+  color: var(--bl-color-neutral-subtle, #6b7280);
+}
+
+.file-upload-browse {
+  color: var(--bl-color-primary, #ff6000);
+  text-decoration: underline;
+}
+
+.file-upload-help,
+.file-upload-invalid {
+  font: var(--bl-font-body-3-regular, 0.75rem 400);
+  margin: 0;
+}
+
+.file-upload-help {
+  color: var(--bl-color-neutral-subtle, #6b7280);
+}
+
+.file-upload-invalid {
+  color: var(--bl-color-danger, #dc2626);
+}
+
+.file-upload-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bl-spacing-2, 0.5rem);
+}
+
+.file-upload-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--bl-spacing-1, 0.25rem);
+}
+
+.file-upload-preview {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--bl-radius-s, 4px);
+  overflow: hidden;
+  background: var(--bl-color-neutral-light, #e5e7eb);
+}
+
+.file-upload-thumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.file-upload-tag {
+  max-width: 240px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/file-upload/file-upload.types.ts

@@ -0,0 +1,89 @@
+/**
+ * File upload size.
+ */
+export type FileUploadSize = "small" | "medium" | "large";
+
+/**
+ * Validation failure reason.
+ */
+export type FileUploadInvalidReason = "type" | "size" | "count";
+
+/**
+ * Invalid file entry emitted on validation failure.
+ */
+export interface FileUploadInvalidEntry {
+  file: File;
+  reason: FileUploadInvalidReason;
+}
+
+/**
+ * Props for the FileUpload component.
+ *
+ * A custom file upload component with drag-and-drop, validation,
+ * file list with remove, and optional preview.
+ *
+ * @interface FileUploadProps
+ */
+export interface FileUploadProps {
+  /**
+   * Bound files (v-model). Single file or array when multiple.
+   */
+  modelValue?: File | File[] | null;
+
+  /**
+   * Allow multiple files.
+   */
+  multiple?: boolean;
+
+  /**
+   * Accepted MIME types or extensions (e.g. `image/*`, `.pdf`, `application/pdf`).
+   */
+  accept?: string;
+
+  /**
+   * Maximum file size in bytes.
+   */
+  maxSize?: number;
+
+  /**
+   * Minimum file size in bytes.
+   */
+  minSize?: number;
+
+  /**
+   * Maximum number of files when multiple is true.
+   */
+  maxFiles?: number;
+
+  /**
+   * Disabled state.
+   */
+  disabled?: boolean;
+
+  /**
+   * Label for the upload area.
+   */
+  label?: string;
+
+  /**
+   * Helper text below the upload area.
+   */
+  helpText?: string;
+
+  /**
+   * Error message when validation fails.
+   */
+  invalidText?: string;
+
+  /**
+   * Show image previews for image files.
+   */
+  showPreview?: boolean;
+
+  /**
+   * Drop zone size (small, medium, large).
+   *
+   * @default "medium"
+   */
+  size?: FileUploadSize;
+}

package/src/file-upload/index.ts

@@ -0,0 +1,7 @@
+export { default as BvFileUpload } from "./FileUpload.vue";
+export type {
+  FileUploadProps,
+  FileUploadSize,
+  FileUploadInvalidReason,
+  FileUploadInvalidEntry,
+} from "./file-upload.types";

package/src/image/Image.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+/**
+ * Image Component
+ *
+ * Performance-focused image wrapper with lazy loading,
+ * skeleton placeholder, and error handling.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <template>
+ *   <BvImage src="/photo.jpg" alt="Photo" width="200px" height="120px" />
+ * </template>
+ * ```
+ */
+import { ref, computed, onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import BvSkeleton from "../skeleton/Skeleton.vue";
+import type { ImageProps } from "./image.types";
+
+const props = withDefaults(defineProps<ImageProps>(), {
+  loading: "lazy",
+  placeholder: "skeleton",
+  objectFit: "cover",
+});
+
+const emit = defineEmits<{
+  load: [event: Event];
+  error: [event: Event];
+}>();
+
+const isLoading = ref(true);
+const hasError = ref(false);
+
+const showPlaceholder = computed(
+  () => isLoading.value && props.placeholder === "skeleton" && !hasError.value,
+);
+
+const showImage = computed(() => !hasError.value);
+
+const wrapperStyle = computed(() => ({
+  width: props.width ?? "100%",
+  height: props.height ?? "auto",
+  aspectRatio: !props.height && props.width ? "16 / 9" : undefined,
+}));
+
+function onLoad(event: Event) {
+  isLoading.value = false;
+  emit("load", event);
+}
+
+function onError(event: Event) {
+  isLoading.value = false;
+  hasError.value = true;
+  emit("error", event);
+}
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <div class="image-wrapper" :style="wrapperStyle">
+    <!-- Placeholder (skeleton or custom slot) -->
+    <div v-if="showPlaceholder" class="image-placeholder">
+      <slot name="placeholder">
+        <BvSkeleton
+          class="image-skeleton"
+          width="100%"
+          height="100%"
+          variant="rectangle"
+        />
+      </slot>
+    </div>
+
+    <!-- Loaded image -->
+    <img
+      v-show="showImage"
+      :src="src"
+      :alt="alt"
+      :loading="loading"
+      :srcset="srcset"
+      :sizes="sizes"
+      class="image-img"
+      :style="{ objectFit }"
+      @load="onLoad"
+      @error="onError"
+    />
+
+    <!-- Error fallback -->
+    <div v-if="hasError" class="image-fallback">
+      <slot name="fallback">
+        <div class="image-fallback-default" role="img" :aria-label="alt">
+          Failed to load image
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.image-wrapper {
+  position: relative;
+  overflow: hidden;
+  display: block;
+}
+
+.image-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-skeleton {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.image-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.image-fallback {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-fallback-default {
+  background: var(--bl-color-neutral-light, #e5e7eb);
+  color: var(--bl-color-neutral-darker, #6b7280);
+  font-size: 0.875rem;
+  padding: 1rem;
+  text-align: center;
+}
+</style>

package/src/image/image.types.ts

@@ -0,0 +1,57 @@
+/** Native image loading behavior */
+export type ImageLoading = "lazy" | "eager";
+
+/** Placeholder type while image loads */
+export type ImagePlaceholder = "skeleton" | "none";
+
+export interface ImageProps {
+  /**
+   * Image URL (required).
+   */
+  src: string;
+
+  /**
+   * Accessible description (required).
+   */
+  alt: string;
+
+  /**
+   * CSS width (e.g. "200px", "100%").
+   * Recommended to prevent CLS.
+   */
+  width?: string;
+
+  /**
+   * CSS height (e.g. "120px", "auto").
+   * Recommended to prevent CLS.
+   */
+  height?: string;
+
+  /**
+   * Native loading behavior.
+   * @default "lazy"
+   */
+  loading?: ImageLoading;
+
+  /**
+   * Placeholder when lazy and not yet loaded.
+   * @default "skeleton"
+   */
+  placeholder?: ImagePlaceholder;
+
+  /**
+   * CSS object-fit.
+   * @default "cover"
+   */
+  objectFit?: string;
+
+  /**
+   * Responsive image sources (srcset attribute).
+   */
+  srcset?: string;
+
+  /**
+   * Sizes attribute for srcset.
+   */
+  sizes?: string;
+}

package/src/image/index.ts

@@ -0,0 +1,3 @@
+// Component exports must use the "Bv-" prefix
+export { default as BvImage } from "./Image.vue";
+export type { ImageProps, ImageLoading, ImagePlaceholder } from "./image.types";

package/src/index.ts

@@ -17,7 +17,9 @@ export * from "./datepicker";
 export * from "./dialog";
 export * from "./drawer";
 export * from "./dropdown";
+export * from "./file-upload";
 export * from "./icon";
+export * from "./image";
 export * from "./input";
 export * from "./link";
 export * from "./notification";