@baklavue/ui 1.0.0 → 1.0.1

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.spec.ts

@@ -1,105 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-import BvTextarea from "./Textarea.vue";
-
-describe("BvTextarea", () => {
-  it("renders with default props", () => {
-    const wrapper = mount(BvTextarea);
-    expect(wrapper.find("bl-textarea").exists()).toBe(true);
-  });
-
-  it("passes label and placeholder to bl-textarea", () => {
-    const wrapper = mount(BvTextarea, {
-      props: { label: "Message", placeholder: "Enter text" },
-    });
-    const el = wrapper.find("bl-textarea").element;
-    expect(el.getAttribute("label")).toBe("Message");
-    expect(el.getAttribute("placeholder")).toBe("Enter text");
-  });
-
-  it("emits update:modelValue when bl-textarea fires bl-input", async () => {
-    const wrapper = mount(BvTextarea);
-    const el = wrapper.find("bl-textarea").element as HTMLTextAreaElement & {
-      value: string;
-    };
-    el.value = "new text";
-    el.dispatchEvent(
-      new CustomEvent("bl-input", { bubbles: true, detail: { target: el } }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("update:modelValue")).toEqual([["new text"]]);
-  });
-
-  it("binds modelValue to value attribute", () => {
-    const wrapper = mount(BvTextarea, {
-      props: { modelValue: "initial" },
-    });
-    expect(wrapper.find("bl-textarea").element.getAttribute("value")).toBe(
-      "initial",
-    );
-  });
-
-  it("passes disabled=true to bl-textarea", () => {
-    const wrapper = mount(BvTextarea, { props: { disabled: true } });
-    const el = wrapper.find("bl-textarea").element;
-    expect(el.getAttribute("disabled")).toBe("true");
-  });
-
-  it("passes required=true to bl-textarea", () => {
-    const wrapper = mount(BvTextarea, { props: { required: true } });
-    const el = wrapper.find("bl-textarea").element;
-    expect(el.getAttribute("required")).toBe("true");
-  });
-
-  it("emits update:modelValue with null when target value is empty", async () => {
-    const wrapper = mount(BvTextarea);
-    const el = wrapper.find("bl-textarea").element as HTMLTextAreaElement & {
-      value: string;
-    };
-    el.value = "";
-    el.dispatchEvent(
-      new CustomEvent("bl-input", { bubbles: true, detail: { target: el } }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("update:modelValue")).toEqual([[null]]);
-  });
-
-  it("emits input event on bl-input", async () => {
-    const wrapper = mount(BvTextarea);
-    const el = wrapper.find("bl-textarea").element as HTMLTextAreaElement & {
-      value: string;
-    };
-    el.value = "text";
-    el.dispatchEvent(
-      new CustomEvent("bl-input", { bubbles: true }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("input")).toHaveLength(1);
-  });
-
-  it("emits change event on bl-change", async () => {
-    const wrapper = mount(BvTextarea);
-    const el = wrapper.find("bl-textarea").element;
-    el.dispatchEvent(new CustomEvent("bl-change", { bubbles: true }));
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("change")).toHaveLength(1);
-  });
-
-  it("renders slot content", () => {
-    const wrapper = mount(BvTextarea, {
-      slots: { default: "<span class=\"helper\">Help</span>" },
-    });
-    expect(wrapper.find(".helper").exists()).toBe(true);
-  });
-
-  it("passes additional props (rows, maxlength, name, size) to bl-textarea", () => {
-    const wrapper = mount(BvTextarea, {
-      props: { rows: 5, maxlength: 200, name: "comment", size: "large" as const },
-    });
-    const el = wrapper.find("bl-textarea").element;
-    expect(el.getAttribute("rows")).toBe("5");
-    expect(el.getAttribute("maxlength")).toBe("200");
-    expect(el.getAttribute("name")).toBe("comment");
-    expect(el.getAttribute("size")).toBe("large");
-  });
-});

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.spec.ts

@@ -1,46 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-import BvTooltip from "./Tooltip.vue";
-
-describe("BvTooltip", () => {
-  it("renders with content prop", () => {
-    const wrapper = mount(BvTooltip, {
-      props: { content: "Tooltip text" },
-      slots: { default: "Trigger" },
-    });
-    expect(wrapper.find("bl-tooltip").exists()).toBe(true);
-    expect(wrapper.text()).toContain("Tooltip text");
-    expect(wrapper.text()).toContain("Trigger");
-  });
-
-  it("passes placement to bl-tooltip", () => {
-    const wrapper = mount(BvTooltip, {
-      props: { content: "Tip", placement: "bottom" },
-      slots: { default: "Hover" },
-    });
-    expect(wrapper.find("bl-tooltip").element.getAttribute("placement")).toBe(
-      "bottom",
-    );
-  });
-
-  it("emits show when bl-tooltip fires bl-tooltip-show", async () => {
-    const wrapper = mount(BvTooltip, {
-      props: { content: "Tip" },
-      slots: { default: "Hover" },
-    });
-    wrapper.find("bl-tooltip").element.dispatchEvent(
-      new CustomEvent("bl-tooltip-show", { bubbles: true }),
-    );
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("show")).toHaveLength(1);
-  });
-
-  it("renders slot when disabled", () => {
-    const wrapper = mount(BvTooltip, {
-      props: { content: "Tip", disabled: true },
-      slots: { default: "Disabled trigger" },
-    });
-    expect(wrapper.find("bl-tooltip").exists()).toBe(false);
-    expect(wrapper.text()).toContain("Disabled trigger");
-  });
-});

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();
-};