@umbra.ui/core 0.1.0

package/src/components/indicators/Tooltip/TooltipProvider.vue

@@ -0,0 +1,142 @@
+// components/TooltipProvider.vue
+<script setup lang="ts">
+import { ref, onMounted, nextTick, onUnmounted, watch } from "vue";
+import { useTooltipProvider } from "./useTooltip";
+import {
+  offset,
+  flip,
+  shift,
+  computePosition,
+  autoUpdate,
+} from "@floating-ui/vue";
+import "./theme.css";
+
+// Element references
+const tooltip = ref<HTMLElement | null>(null);
+
+// Position tracking
+let cleanupAutoUpdate: (() => void) | null = null;
+
+// Get tooltip state from provider
+const { tooltipState } = useTooltipProvider();
+
+// Lifecycle
+onUnmounted(() => {
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+});
+
+// Update position when tooltip becomes visible
+const updateTooltipPosition = async () => {
+  if (!tooltipState.targetElement || !tooltip.value || !tooltipState.isVisible)
+    return;
+
+  await nextTick();
+
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+
+  cleanupAutoUpdate = autoUpdate(
+    tooltipState.targetElement,
+    tooltip.value,
+    () => {
+      computePosition(tooltipState.targetElement!, tooltip.value!, {
+        placement: tooltipState.placement,
+        middleware: [offset(tooltipState.offset), flip(), shift()],
+      }).then(({ x, y }) => {
+        if (tooltip.value) {
+          Object.assign(tooltip.value.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+          });
+        }
+      });
+    }
+  );
+};
+
+// Watch for visibility changes
+const watchVisibility = () => {
+  if (tooltipState.isVisible) {
+    nextTick(() => {
+      updateTooltipPosition();
+    });
+  } else {
+    if (cleanupAutoUpdate) {
+      cleanupAutoUpdate();
+      cleanupAutoUpdate = null;
+    }
+  }
+};
+
+// Watch for target element changes
+const watchTargetElement = () => {
+  if (tooltipState.targetElement && tooltipState.isVisible) {
+    nextTick(() => {
+      updateTooltipPosition();
+    });
+  }
+};
+
+// Set up watchers
+onMounted(() => {
+  watchVisibility();
+  watchTargetElement();
+});
+
+// Watch for state changes
+watch(
+  () => tooltipState.isVisible,
+  () => {
+    watchVisibility();
+  }
+);
+
+watch(
+  () => tooltipState.targetElement,
+  () => {
+    watchTargetElement();
+  }
+);
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="tooltip">
+      <div
+        v-if="tooltipState.isVisible"
+        :class="$style.tooltip"
+        ref="tooltip"
+        style="position: absolute; z-index: 9999"
+      >
+        <p class="caption">{{ tooltipState.content }}</p>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style module>
+.tooltip {
+  background: var(--tooltip-bg);
+  padding: 0.118rem 0.471rem;
+  border-radius: 0.176rem;
+  white-space: nowrap;
+  pointer-events: none;
+}
+.tooltip p {
+  margin: 0;
+  color: var(--tooltip-text);
+}
+
+.tooltip-enter-active,
+.tooltip-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.tooltip-enter-from,
+.tooltip-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/indicators/Tooltip/theme.css

@@ -0,0 +1,18 @@
+/* Light theme using Colors */
+:root {
+  /* Tooltip background colors */
+  --tooltip-bg: #f0f2f4; /* gray3 - light background for light mode */
+
+  /* Tooltip text colors */
+  --tooltip-text: #1a1d23; /* gray12 - dark text for light mode */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Tooltip background colors */
+  --tooltip-bg: #b4b4b4; /* Original dark mode value */
+
+  /* Tooltip text colors */
+  --tooltip-text: #000000; /* black - text for dark mode */
+}

package/src/components/indicators/Tooltip/tooltip.ts

@@ -0,0 +1,48 @@
+// directives/tooltip.ts
+import { Directive, DirectiveBinding } from "vue";
+import { useTooltip } from "./useTooltip";
+import type { TooltipConfig } from "./types";
+
+interface TooltipElement extends HTMLElement {
+  _tooltipCleanup?: () => void;
+}
+
+export const vTooltip: Directive = {
+  mounted(el: TooltipElement, binding: DirectiveBinding) {
+    const config: TooltipConfig =
+      typeof binding.value === "string"
+        ? { content: binding.value }
+        : binding.value;
+
+    if (config && config.content) {
+      const { bindTooltip } = useTooltip(config);
+      el._tooltipCleanup = bindTooltip(el);
+    }
+  },
+
+  updated(el: TooltipElement, binding: DirectiveBinding) {
+    // Clean up old tooltip
+    if (el._tooltipCleanup) {
+      el._tooltipCleanup();
+      delete el._tooltipCleanup;
+    }
+
+    // Set up new tooltip if value exists
+    const config: TooltipConfig =
+      typeof binding.value === "string"
+        ? { content: binding.value }
+        : binding.value;
+
+    if (config && config.content) {
+      const { bindTooltip } = useTooltip(config);
+      el._tooltipCleanup = bindTooltip(el);
+    }
+  },
+
+  unmounted(el: TooltipElement) {
+    if (el._tooltipCleanup) {
+      el._tooltipCleanup();
+      delete el._tooltipCleanup;
+    }
+  },
+};

package/src/components/indicators/Tooltip/types.ts

@@ -0,0 +1,15 @@
+// types.ts
+export interface TooltipConfig {
+  content: string;
+  placement?: "top" | "bottom" | "left" | "right";
+  delay?: number;
+  offset?: number;
+}
+
+export interface TooltipState {
+  isVisible: boolean;
+  content: string;
+  targetElement: HTMLElement | null;
+  placement: TooltipConfig["placement"];
+  offset: number;
+}

package/src/components/indicators/Tooltip/useTooltip.ts

@@ -0,0 +1,71 @@
+import { reactive } from "vue";
+import { TooltipConfig, TooltipState } from "./types";
+
+const tooltipState = reactive<TooltipState>({
+  isVisible: false,
+  content: "",
+  targetElement: null,
+  placement: "top",
+  offset: 2,
+});
+
+export const useTooltipProvider = () => {
+  const showTooltip = async (element: HTMLElement, config: TooltipConfig) => {
+    tooltipState.content = config.content;
+    tooltipState.placement = config.placement || "top";
+    tooltipState.offset = config.offset || 2;
+    tooltipState.targetElement = element;
+
+    setTimeout(() => {
+      tooltipState.isVisible = true;
+    }, config.delay || 1000);
+  };
+
+  const hideTooltip = () => {
+    tooltipState.isVisible = false;
+  };
+
+  return {
+    tooltipState,
+    showTooltip,
+    hideTooltip,
+  };
+};
+
+export const useTooltip = (config: TooltipConfig) => {
+  const { showTooltip, hideTooltip } = useTooltipProvider();
+
+  const bindTooltip = (element: HTMLElement | any) => {
+    // Handle Vue component instances
+    let actualElement = element;
+
+    // If it's a Vue component instance, try to get the root element
+    if (element && element.$el) {
+      actualElement = element.$el;
+    }
+
+    // Safety check to ensure element is an HTMLElement
+    if (!actualElement || !(actualElement instanceof HTMLElement)) {
+      console.error("bindTooltip: Invalid element provided", element);
+      return () => {}; // Return empty cleanup function
+    }
+
+    const handleMouseEnter = () => showTooltip(actualElement, config);
+    const handleMouseLeave = () => hideTooltip();
+
+    actualElement.addEventListener("mouseenter", handleMouseEnter);
+    actualElement.addEventListener("mouseleave", handleMouseLeave);
+
+    // Return cleanup function
+    return () => {
+      actualElement.removeEventListener("mouseenter", handleMouseEnter);
+      actualElement.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  };
+
+  return {
+    bindTooltip,
+    showTooltip: (element: HTMLElement) => showTooltip(element, config),
+    hideTooltip,
+  };
+};

package/src/components/inputs/AutogrowTextView/AutogrowTextView.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, watch } from "vue";
+import autosize from "autosize";
+import "./theme.css";
+
+export interface Props {
+  text?: string;
+  placeholder?: string;
+  fontStyle?: string;
+}
+
+const emit = defineEmits(["update:text", "onBlur"]);
+
+const props = withDefaults(defineProps<Props>(), {
+  text: "",
+  placeholder: "Type Here...",
+  fontStyle: "body",
+});
+
+// Reference for the textarea
+const autosizeTextarea = ref<HTMLTextAreaElement | null>(null);
+const internalText = ref("");
+
+watch(
+  () => props.text,
+  (newValue) => {
+    internalText.value = newValue;
+    setTimeout(() => {
+      if (autosizeTextarea.value) {
+        autosize.update(autosizeTextarea.value);
+      }
+    }, 10);
+  }
+);
+
+// Watch for local text changes and emit updates
+watch(internalText, (newValue) => {
+  emit("update:text", newValue);
+});
+
+// Setup autosize on mounted and cleanup on unmount
+onMounted(() => {
+  internalText.value = props.text;
+  if (autosizeTextarea.value) {
+    autosize(autosizeTextarea.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (autosizeTextarea.value) {
+    autosize.destroy(autosizeTextarea.value);
+  }
+});
+
+const onBlur = () => {
+  emit("onBlur", internalText.value);
+};
+
+const focusTextArea = () => {
+  if (autosizeTextarea.value) {
+    autosizeTextarea.value.focus();
+  }
+};
+</script>
+
+<template>
+  <div :class="$style.container" @click="focusTextArea">
+    <textarea
+      :class="[$style.textview, props.fontStyle]"
+      v-model="internalText"
+      ref="autosizeTextarea"
+      :placeholder="placeholder"
+      @blur="onBlur"
+    ></textarea>
+  </div>
+</template>
+
+<style module>
+.container {
+  padding: var(--autogrow-padding, 1.176rem);
+  border-radius: var(--autogrow-border-radius, 0.706rem);
+  background-color: var(--autogrow-bg);
+  border: 1px solid var(--autogrow-border);
+  transition: border-color 0.2s ease-in-out;
+  cursor: text;
+}
+
+.container:has(.textview:focus) {
+  border-color: var(--autogrow-focus-border);
+}
+
+.textview {
+  width: 100%;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  color: var(--autogrow-text-color);
+  resize: none;
+  font-family: inherit;
+}
+
+.textview::placeholder {
+  color: var(--autogrow-placeholder-color);
+}
+
+.textview:focus {
+  outline: none;
+  border: none;
+}
+</style>