@toife/vue 3.2.7 → 3.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toife/vue",
-  "version": "3.2.7",
+  "version": "3.3.1",
   "description": "A Frontend framework for Vue",
   "type": "module",
   "sideEffects": [

package/src/components/index.ts

@@ -30,3 +30,4 @@ export * from "./dropdown";
 export * from "./select";
 export * from "./slide-range";
 export * from "./tag";
+export * from "./tooltip";

package/src/components/tooltip/index.ts

@@ -0,0 +1 @@
+export { default as Tooltip } from "./tooltip.vue";

package/src/components/tooltip/tooltip.html

@@ -0,0 +1,15 @@
+<div ref="rootRef" v-bind="wrapperAttrs">
+  <div
+    ref="triggerRef"
+    v-bind="triggerAttrs"
+    @pointerenter="show"
+    @pointerleave="hide"
+    @focusin="show"
+    @focusout="onFocusOut"
+  >
+    <slot />
+  </div>
+  <div v-show="visible" v-bind="contentAttrs">
+    <slot name="content" />
+  </div>
+</div>

package/src/components/tooltip/tooltip.vue

@@ -0,0 +1,63 @@
+<style lang="scss" src="@toife/core/features/tooltip/tooltip.scss" scoped></style>
+<template src="./tooltip.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject, ref } from "vue";
+import {
+  TOOLTIP_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  getTooltipAttrs,
+  getTooltipContentAttrs,
+  getTooltipTriggerAttrs,
+  type AppProviderState,
+  type TooltipProps,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<TooltipProps>(), {
+  ...TOOLTIP_DEFAULT_PROPS,
+});
+const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
+
+// Reactive state
+// ----------------------------------------------------------------------------
+const rootRef = ref<HTMLElement | null>(null);
+const triggerRef = ref<HTMLElement | null>(null);
+const visible = ref(false);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const wrapperAttrs = computed(() => {
+  const role = props.role ?? unref(appState?.role) ?? "";
+  const shape = props.shape ?? unref(appState?.shape) ?? "";
+
+  return getTooltipAttrs({
+    role,
+    shape,
+    size: props.size,
+    disabled: props.disabled,
+  });
+});
+
+const contentAttrs = computed(() => getTooltipContentAttrs({ placement: props.placement }));
+const triggerAttrs = getTooltipTriggerAttrs();
+
+// Methods
+// ----------------------------------------------------------------------------
+const show = () => {
+  if (props.disabled) return;
+  visible.value = true;
+};
+
+const hide = () => {
+  visible.value = false;
+};
+
+const onFocusOut = (event: FocusEvent) => {
+  const root = rootRef.value;
+  const next = event.relatedTarget as Node | null;
+  if (root && next && root.contains(next)) return;
+  hide();
+};
+</script>

package/src/factory.ts

@@ -40,6 +40,7 @@ import {
   Tag,
   Tab,
   Tabs,
+  Tooltip,
   Toast,
   ToastContent,
   Toolbar,
@@ -116,6 +117,7 @@ class Toife {
     this.app.component(prefix + "tag", Tag);
     this.app.component(prefix + "tab", Tab);
     this.app.component(prefix + "tabs", Tabs);
+    this.app.component(prefix + "tooltip", Tooltip);
     this.app.component(prefix + "toast", Toast);
     this.app.component(prefix + "toast-content", ToastContent);
     this.app.component(prefix + "toolbar", Toolbar);