@baklavue/ui 1.0.0-preview.4 → 1.0.1

package/src/image/Image.vue

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

@@ -1,57 +0,0 @@
-/** 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

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

@@ -1,41 +0,0 @@
-/**
- * Component Exports
- * 
- * IMPORTANT: All components MUST be exported with the "Bv-" prefix.
- * Example: BvButton, BvInput, BvBadge, etc.
- * 
- * This convention ensures consistency and prevents naming conflicts.
- * Each component's index.ts file should export: export { default as Bv[ComponentName] } from "./[ComponentName].vue";
- */
-
-export * from "./accordion";
-export * from "./alert";
-export * from "./badge";
-export * from "./button";
-export * from "./checkbox";
-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";
-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";
-export * from "./switch";
-export * from "./tab";
-export * from "./table";
-export * from "./tag";
-export * from "./textarea";
-export * from "./tooltip";
-
-export { loadBaklavaResources } from "./utils/loadBaklavaResources";

package/src/input/Input.vue

@@ -1,148 +0,0 @@
-<script setup lang="ts">
-/**
- * Input Component
- *
- * A Vue UI kit component for Baklava's `bl-input` web component with full v-model support
- * and TypeScript types. Supports text, email, password, number, date, time, and
- * other input types with validation, help text, loading state, and icons.
- *
- * @component
- * @example
- * ```vue
- * <!-- Basic usage -->
- * <template>
- *   <BvInput v-model="value" label="Email" placeholder="Enter your email" />
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- With validation -->
- * <template>
- *   <BvInput
- *     v-model="email"
- *     type="email"
- *     label="Email"
- *     required
- *     :invalid-text="emailError"
- *     @invalid="handleInvalid"
- *   />
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- With icon -->
- * <template>
- *   <BvInput v-model="search" label="Search" icon="search" />
- * </template>
- * ```
- */
-import { onMounted } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { InputProps } from "./input.types";
-
-/**
- * Component props with default values.
- */
-const props = withDefaults(defineProps<InputProps>(), {
-  modelValue: undefined,
-  name: undefined,
-  type: "text",
-  label: undefined,
-  placeholder: undefined,
-  required: undefined,
-  minlength: undefined,
-  maxlength: undefined,
-  min: undefined,
-  max: undefined,
-  pattern: undefined,
-  step: undefined,
-  autocomplete: undefined,
-  inputmode: undefined,
-  autofocus: undefined,
-  icon: undefined,
-  size: "medium",
-  disabled: undefined,
-  readonly: undefined,
-  invalidText: undefined,
-  labelFixed: true,
-  helpText: undefined,
-  loading: undefined,
-  suffixText: undefined,
-});
-
-/**
- * Component events.
- */
-const emit = defineEmits<{
-  /**
-   * Emitted when the input value changes. Use with v-model.
-   *
-   * @param {string | number | null} value - The new input value.
-   */
-  "update:modelValue": [value: string | number | null];
-  /**
-   * Emitted when validation fails.
-   *
-   * @param {ValidityState} state - The native ValidityState object.
-   */
-  invalid: [state: ValidityState];
-  /**
-   * Emitted when the input receives focus.
-   *
-   * @param {FocusEvent} event - The native focus event.
-   */
-  focus: [event: FocusEvent];
-  /**
-   * Emitted when the input loses focus.
-   *
-   * @param {FocusEvent} event - The native focus event.
-   */
-  blur: [event: FocusEvent];
-}>();
-
-/**
- * Triggers the native date/time picker for inputs with type="date", "time",
- * "datetime-local", etc. Called on click to ensure the picker opens when
- * the user clicks the input.
- *
- * @param {Event} event - The click event.
- */
-const showPicker = ({ currentTarget }: Event) =>
-  (currentTarget as HTMLInputElement)?.showPicker();
-
-/**
- * Lifecycle hook: Component mounted.
- *
- * Loads Baklava resources when the component is mounted.
- */
-onMounted(() => {
-  loadBaklavaResources();
-});
-</script>
-
-<template>
-  <bl-input
-    v-bind="{
-      ...props,
-      'label-fixed': props.labelFixed === true ? true : undefined,
-      'help-text': props.helpText ? props.helpText : undefined,
-      'invalid-text': props.invalidText ? props.invalidText : undefined,
-      loading: props.loading ? props.loading : undefined,
-      placeholder: props.placeholder ? props.placeholder : props.label,
-    }"
-    :value="props.modelValue"
-    @bl-input="
-      emit('update:modelValue', ($event.target as HTMLInputElement)?.value)
-    "
-    @bl-invalid="emit('invalid', $event)"
-    @focus="emit('focus', $event)"
-    @blur="emit('blur', $event)"
-    @click="showPicker"
-  >
-    <span v-if="props.suffixText" slot="icon">
-      {{ props.suffixText }}
-    </span>
-  </bl-input>
-</template>

package/src/input/index.ts

@@ -1,3 +0,0 @@
-// Component exports must use the "Bv-" prefix
-export { default as BvInput } from "./Input.vue";
-export type { InputProps } from "./input.types";

package/src/input/input.types.ts

@@ -1,156 +0,0 @@
-import type { BaklavaIcon } from "@trendyol/baklava-icons";
-import type {
-  InputSize,
-  InputType,
-} from "@trendyol/baklava/dist/components/input/bl-input";
-
-/**
- * Input mode hint for virtual keyboards.
- *
- * @typedef InputMode
- */
-type InputMode =
-  | "none"
-  | "text"
-  | "decimal"
-  | "numeric"
-  | "tel"
-  | "search"
-  | "email"
-  | "url";
-
-/**
- * Props for the Input component.
- *
- * A Vue UI kit component for Baklava's bl-input web component with full v-model support
- * and TypeScript types.
- *
- * @interface InputProps
- */
-export interface InputProps {
-  /**
-   * Input value (v-model).
-   */
-  modelValue?: string | number | null;
-
-  /**
-   * Input name attribute for form submission.
-   */
-  name?: string;
-
-  /**
-   * Input type (text, email, password, number, date, time, etc.).
-   *
-   * @default "text"
-   */
-  type?: InputType;
-
-  /**
-   * Input label displayed above or beside the input.
-   */
-  label?: string;
-
-  /**
-   * Placeholder text when the input is empty.
-   */
-  placeholder?: string;
-
-  /**
-   * Whether the input is required for form validation.
-   */
-  required?: boolean;
-
-  /**
-   * Minimum character length for validation.
-   */
-  minlength?: number;
-
-  /**
-   * Maximum character length for validation.
-   */
-  maxlength?: number;
-
-  /**
-   * Minimum value for number/date inputs.
-   */
-  min?: number | string;
-
-  /**
-   * Maximum value for number/date inputs.
-   */
-  max?: number | string;
-
-  /**
-   * RegExp pattern for validation.
-   */
-  pattern?: string;
-
-  /**
-   * Step value for number inputs.
-   */
-  step?: number;
-
-  /**
-   * Autocomplete attribute for the input.
-   */
-  autocomplete?: string;
-
-  /**
-   * Input mode hint for virtual keyboards.
-   */
-  inputmode?: InputMode;
-
-  /**
-   * Whether the input should receive focus on mount.
-   */
-  autofocus?: boolean;
-
-  /**
-   * Baklava icon name to display in the input.
-   */
-  icon?: BaklavaIcon;
-
-  /**
-   * Input size (small, medium, large).
-   *
-   * @default "medium"
-   */
-  size?: InputSize;
-
-  /**
-   * Whether the input is disabled.
-   */
-  disabled?: boolean;
-
-  /**
-   * Whether the input is readonly.
-   */
-  readonly?: boolean;
-
-  /**
-   * Whether the label has fixed position.
-   *
-   * @default true
-   */
-  labelFixed?: boolean;
-
-  /**
-   * Error message text displayed when validation fails.
-   */
-  invalidText?: string;
-
-  /**
-   * Helper text displayed below the input.
-   */
-  helpText?: string;
-
-  /**
-   * Whether to show loading indicator.
-   */
-  loading?: boolean;
-
-  /**
-   * Suffix text displayed in the icon slot.
-   */
-  suffixText?: string;
-}

package/src/link/Link.vue

@@ -1,133 +0,0 @@
-<script setup lang="ts">
-/**
- * Link Component
- *
- * A Vue UI kit component for Baklava's `bl-link` web component for navigation links.
- * Supports inline (text within content) and standalone (button-like) variants with
- * full TypeScript support and HTML anchor attributes (href, target, rel, etc.).
- *
- * @component
- * @example
- * ```vue
- * <!-- Basic usage -->
- * <template>
- *   <BvLink href="/about">About</BvLink>
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- Inline variant (default) -->
- * <template>
- *   <p>Visit our <BvLink href="/docs">documentation</BvLink> for more info.</p>
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- Standalone variant with size -->
- * <template>
- *   <BvLink href="/signup" variant="standalone" size="large">
- *     Sign up
- *   </BvLink>
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- With icon slot -->
- * <template>
- *   <BvLink href="/settings" variant="standalone">
- *     <template #icon><BvIcon name="settings" /></template>
- *     Settings
- *   </BvLink>
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- External link with target -->
- * <template>
- *   <BvLink href="https://example.com" target="_blank" rel="noopener noreferrer">
- *     External site
- *   </BvLink>
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- Disabled state -->
- * <template>
- *   <BvLink href="/disabled" :disabled="true">Disabled link</BvLink>
- * </template>
- * ```
- */
-import { computed, onMounted } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { LinkProps } from "./link.types";
-
-const props = withDefaults(defineProps<LinkProps>(), {
-  href: undefined,
-  target: undefined,
-  disabled: undefined,
-  variant: undefined,
-  size: undefined,
-  kind: undefined,
-  ariaLabel: undefined,
-  rel: undefined,
-  hreflang: undefined,
-  type: undefined,
-  referrerPolicy: undefined,
-  download: undefined,
-  ping: undefined,
-});
-
-const emit = defineEmits<{
-  /** Emitted when the link is clicked. */
-  click: [event: CustomEvent];
-}>();
-
-/** Props to pass to bl-link. When disabled, omit href so navigation is prevented. */
-const linkBindings = computed(() => {
-  const { disabled, href, ...rest } = props;
-  return {
-    ...rest,
-    href: disabled ? undefined : href,
-    "aria-disabled": disabled ? "true" : undefined,
-    tabindex: disabled ? -1 : undefined,
-  };
-});
-
-/** Prevents navigation and click when disabled. */
-function handleClick(event: CustomEvent) {
-  if (props.disabled) {
-    event.preventDefault();
-    event.stopPropagation();
-    return;
-  }
-  emit("click", event);
-}
-
-onMounted(() => {
-  loadBaklavaResources();
-});
-</script>
-
-<template>
-  <bl-link
-    v-bind="linkBindings"
-    :class="{ 'bv-link--disabled': disabled }"
-    @bl-click="handleClick"
-  >
-    <slot v-if="$slots['icon']" name="icon" />
-    <slot />
-  </bl-link>
-</template>
-
-<style scoped>
-.bv-link--disabled {
-  pointer-events: none;
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-</style>

package/src/link/index.ts

@@ -1,2 +0,0 @@
-export { default as BvLink } from "./Link.vue";
-export type { LinkProps, LinkVariant, LinkSize, LinkKind } from "./link.types";