@baklavue/ui 1.0.0-preview.4 → 1.0.1

package/src/tag/Tag.vue

@@ -1,83 +0,0 @@
-<script setup lang="ts">
-/**
- * Tag Component
- *
- * A Vue UI kit component for Baklava's `bl-tag` web component for displaying tags or labels.
- * Supports selectable and removable (closable) variants, sizes, and icons.
- *
- * @component
- * @example
- * ```vue
- * <!-- Basic usage -->
- * <template>
- *   <BvTag>Label</BvTag>
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- Closable tag -->
- * <template>
- *   <BvTag closable @close="removeTag">Removable</BvTag>
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- With icon -->
- * <template>
- *   <BvTag icon="info">With icon</BvTag>
- * </template>
- * ```
- */
-import { onMounted } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { TagProps } from "./tag.types";
-
-const props = withDefaults(defineProps<TagProps>(), {
-  variant: undefined,
-  size: undefined,
-  closable: undefined,
-  icon: undefined,
-});
-
-const emit = defineEmits<{
-  /**
-   * Emitted when the close button is clicked (removable/closable variant only).
-   */
-  close: [];
-  /**
-   * Emitted when a selectable tag is clicked. Payload contains the new selected state.
-   */
-  "update:selected": [selected: boolean];
-}>();
-
-/**
- * Handles bl-tag-click. For removable variant, emit 'close'. For selectable, emit 'update:selected'.
- */
-const handleTagClick = (event: CustomEvent<{ value: string | null; selected: boolean }>) => {
-  if (props.closable) {
-    emit("close");
-  } else if (props.variant === "selectable" && event.detail) {
-    emit("update:selected", event.detail.selected);
-  }
-};
-
-onMounted(() => {
-  loadBaklavaResources();
-});
-</script>
-
-<template>
-  <bl-tag
-    v-bind="{
-      ...props,
-      variant: props.closable ? 'removable' : props.variant,
-      closable: undefined,
-    }"
-    @bl-tag-click="handleTagClick"
-  >
-    <slot v-if="$slots['icon']" name="icon" />
-    <slot />
-  </bl-tag>
-</template>

package/src/tag/index.ts

@@ -1,2 +0,0 @@
-export { default as BvTag } from "./Tag.vue";
-export type { TagProps, TagVariant, TagSize } from "./tag.types";

package/src/tag/tag.types.ts

@@ -1,24 +0,0 @@
-import type { BaklavaIcon } from "@trendyol/baklava-icons";
-
-/** Tag variant: selectable (default) or removable (closable) */
-export type TagVariant = "selectable" | "removable";
-
-/** Tag size */
-export type TagSize = "small" | "medium" | "large";
-
-export interface TagProps {
-  /** Tag variant: selectable or removable */
-  variant?: TagVariant;
-  /** Tag size */
-  size?: TagSize;
-  /** When true, shows close button (uses variant="removable" under the hood) */
-  closable?: boolean;
-  /** Icon name from Baklava icons */
-  icon?: BaklavaIcon;
-  /** Selected state (for selectable variant) */
-  selected?: boolean;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Value for form/selection */
-  value?: string | null;
-}

package/src/textarea/Textarea.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-/**
- * Textarea Component
- *
- * A Vue UI kit component for Baklava's `bl-textarea` web component with v-model support.
- * Supports label, placeholder, validation, character counter, and help text.
- *
- * @component
- * @example
- * ```vue
- * <!-- Basic usage with v-model -->
- * <template>
- *   <BvTextarea v-model="message" label="Message" placeholder="Enter your message" />
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- With validation -->
- * <template>
- *   <BvTextarea
- *     v-model="comment"
- *     label="Comment"
- *     :maxlength="500"
- *     help-text="Max 500 characters"
- *     invalid-text="Please enter a valid comment"
- *   />
- * </template>
- * ```
- */
-import { onMounted } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { TextareaProps } from "./textarea.types";
-
-const props = withDefaults(defineProps<TextareaProps>(), {
-  modelValue: undefined,
-  label: undefined,
-  placeholder: undefined,
-  rows: undefined,
-  maxlength: undefined,
-  disabled: undefined,
-  required: undefined,
-});
-
-const emit = defineEmits<{
-  /**
-   * Emitted when the value changes (use with v-model).
-   * @param {string | null} value - The new textarea value.
-   */
-  "update:modelValue": [value: string | null];
-  /**
-   * Emitted on user input (mirrors native bl-input).
-   * @param {CustomEvent} event - The bl-input event.
-   */
-  input: [event: CustomEvent];
-  /**
-   * Emitted when the value changes (blur or commit).
-   * @param {CustomEvent} event - The bl-change event.
-   */
-  change: [event: CustomEvent];
-}>();
-
-onMounted(() => {
-  loadBaklavaResources();
-});
-</script>
-
-<template>
-  <bl-textarea
-    v-bind="{
-      ...props,
-      disabled: props.disabled === true ? true : undefined,
-      required: props.required === true ? true : undefined,
-    }"
-    :value="props.modelValue"
-    @bl-input="
-      emit('input', $event);
-      emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value || null);
-    "
-    @bl-change="emit('change', $event)"
-  >
-    <slot />
-  </bl-textarea>
-</template>

package/src/textarea/index.ts

@@ -1,2 +0,0 @@
-export { default as BvTextarea } from "./Textarea.vue";
-export type { TextareaProps, TextareaSize } from "./textarea.types";

package/src/textarea/textarea.types.ts

@@ -1,37 +0,0 @@
-/** Textarea size */
-export type TextareaSize = "small" | "medium" | "large";
-
-export interface TextareaProps {
-  /** Textarea value (use with v-model) */
-  modelValue?: string | null;
-  /** Label text */
-  label?: string;
-  /** Placeholder text */
-  placeholder?: string;
-  /** Number of visible rows */
-  rows?: number;
-  /** Maximum character length */
-  maxlength?: number;
-  /** Minimum character length */
-  minlength?: number;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Required field */
-  required?: boolean;
-  /** Readonly state */
-  readonly?: boolean;
-  /** Help text below the textarea */
-  helpText?: string;
-  /** Custom error/invalid message */
-  invalidText?: string;
-  /** Enable character counter */
-  characterCounter?: boolean;
-  /** Enable auto-expand up to maxRows */
-  expand?: boolean;
-  /** Max rows when expand is true */
-  maxRows?: number;
-  /** Textarea size */
-  size?: TextareaSize;
-  /** Name attribute for forms */
-  name?: string;
-}

package/src/tooltip/Tooltip.vue

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-/**
- * Tooltip Component
- *
- * A Vue UI kit component for Baklava's `bl-tooltip` web component for displaying contextual
- * information on hover or focus. The trigger is provided via the default slot;
- * content can be set via the `content` prop or the `#content` slot.
- *
- * @component
- * @example
- * ```vue
- * <!-- Basic usage -->
- * <template>
- *   <BvTooltip content="This is a tooltip">
- *     <BvButton>Hover me</BvButton>
- *   </BvTooltip>
- * </template>
- * ```
- *
- * @example
- * ```vue
- * <!-- With placement -->
- * <template>
- *   <BvTooltip content="Tooltip" placement="bottom">
- *     <span>Trigger</span>
- *   </BvTooltip>
- * </template>
- * ```
- */
-import { computed, onMounted } from "vue";
-import { loadBaklavaResources } from "../utils/loadBaklavaResources";
-import type { TooltipProps } from "./tooltip.types";
-
-const props = withDefaults(defineProps<TooltipProps>(), {
-  content: undefined,
-  placement: undefined,
-  trigger: undefined,
-  disabled: undefined,
-  delay: undefined,
-});
-
-const emit = defineEmits<{
-  /**
-   * Emitted when the tooltip is shown.
-   */
-  show: [];
-  /**
-   * Emitted when the tooltip is hidden.
-   */
-  hide: [];
-}>();
-
-// bl-tooltip only supports placement and target. Do not pass trigger (read-only),
-// content, disabled, or delay as they are not supported and cause errors.
-const tooltipProps = computed(() => {
-  const bind: Record<string, unknown> = {};
-  if (props.placement !== undefined) bind.placement = props.placement;
-  if (props.target !== undefined) bind.target = props.target;
-  return bind;
-});
-
-onMounted(() => {
-  loadBaklavaResources();
-});
-</script>
-
-<template>
-  <bl-tooltip
-    v-if="!props.disabled"
-    v-bind="tooltipProps"
-    @bl-tooltip-show="emit('show')"
-    @bl-tooltip-hide="emit('hide')"
-  >
-    <div slot="tooltip-trigger">
-      <slot />
-    </div>
-    <slot v-if="$slots['content']" name="content" />
-    <span v-else-if="content">{{ content }}</span>
-  </bl-tooltip>
-  <slot v-else />
-</template>

package/src/tooltip/index.ts

@@ -1,3 +0,0 @@
-// Component exports must use the "Bv-" prefix
-export { default as BvTooltip } from "./Tooltip.vue";
-export type { TooltipProps, TooltipPlacement } from "./tooltip.types";

package/src/tooltip/tooltip.types.ts

@@ -1,29 +0,0 @@
-/** Tooltip placement relative to trigger */
-export type TooltipPlacement =
-  | "top"
-  | "top-start"
-  | "top-end"
-  | "bottom"
-  | "bottom-start"
-  | "bottom-end"
-  | "left"
-  | "left-start"
-  | "left-end"
-  | "right"
-  | "right-start"
-  | "right-end";
-
-export interface TooltipProps {
-  /** Tooltip content text */
-  content?: string;
-  /** Placement of tooltip relative to trigger (default: 'top') */
-  placement?: TooltipPlacement;
-  /** Target element (selector or Element) when using external trigger */
-  target?: string | Element;
-  /** Trigger type: 'hover' | 'click' etc. (passed to bl-tooltip) */
-  trigger?: string;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Delay before showing tooltip (ms) */
-  delay?: number;
-}

package/src/utils/loadBaklavaResources.ts

@@ -1,24 +0,0 @@
-const BAKLAVA_VERSION = "3.4.2";
-
-export const loadBaklavaResources = () => {
-  const loadScript = () => {
-    if (!document.querySelector('script[src*="baklava.js"]')) {
-      const script = document.createElement("script");
-      script.type = "module";
-      script.src = `https://cdn.jsdelivr.net/npm/@trendyol/baklava@${BAKLAVA_VERSION}/dist/baklava.js`;
-      document.head.appendChild(script);
-    }
-  };
-
-  const loadStyles = () => {
-    if (!document.querySelector('link[href*="default.css"]')) {
-      const link = document.createElement("link");
-      link.rel = "stylesheet";
-      link.href = `https://cdn.jsdelivr.net/npm/@trendyol/baklava@${BAKLAVA_VERSION}/dist/themes/default.css`;
-      document.head.appendChild(link);
-    }
-  };
-
-  loadScript();
-  loadStyles();
-};

package/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    // Enable latest features
-    "lib": ["ESNext", "DOM"],
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleDetection": "force",
-    "jsx": "react-jsx",
-    "allowJs": true,
-
-    // Bundler mode
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "noEmit": true,
-
-    // Best practices
-    "strict": true,
-    "skipLibCheck": true,
-    "noFallthroughCasesInSwitch": true,
-
-    // Some stricter flags (disabled by default)
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitAny": true
-  }
-}