@baklavue/ui 1.0.0-preview.2

package/src/tooltip/Tooltip.vue

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

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

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

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

@@ -0,0 +1,28 @@
+{
+  "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
+  }
+}