@una-ui/nuxt 0.16.2-beta.1 → 0.17.0-beta.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.16.2-beta.1",
+  "version": "0.17.0-beta.1",
   "compatibility": {
     "nuxt": ">=3.0.0"
   },

package/dist/module.mjs

@@ -7,7 +7,7 @@ import '@una-ui/preset/prefixes';
 import '@una-ui/extractor-vue-script';
 
 const name = "@una-ui/nuxt";
-const version = "0.16.2-beta.1";
+const version = "0.17.0-beta.1";
 
 const module = defineNuxtModule({
   meta: {
@@ -71,6 +71,13 @@ const module = defineNuxtModule({
       watch: nuxt.options.dev,
       priority: 10
     });
+    addComponentsDir({
+      path: resolve(runtimeDir, "components/elements", "tooltip"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev,
+      priority: 10
+    });
     addComponentsDir({
       path: resolve(runtimeDir, "components", "forms"),
       prefix: options.prefix,

package/dist/runtime/components/elements/tooltip/Tooltip.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useForwardPropsEmits } from 'radix-vue'
+import type { TooltipRootEmits } from 'radix-vue'
+import type { NTooltipProps } from '../../../types'
+
+import TooltipContent from './TooltipContent.vue'
+import TooltipProvider from './TooltipProvider.vue'
+import TooltipRoot from './TooltipRoot.vue'
+import TooltipTrigger from './TooltipTrigger.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<NTooltipProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipProvider
+    v-bind="_tooltipProvider"
+    :disabled
+  >
+    <TooltipRoot
+      v-bind="_tooltipRoot"
+    >
+      <TooltipTrigger
+        as-child
+        v-bind="_tooltipTrigger"
+      >
+        <slot />
+      </TooltipTrigger>
+
+      <TooltipContent
+        v-if="$slots.content || content"
+        v-bind="forwarded._tooltipContent"
+        :size
+        :tooltip
+        :disabled
+        :una="forwarded.una?.tooltipContent"
+      >
+        <slot name="content">
+          {{ content }}
+        </slot>
+      </TooltipContent>
+    </TooltipRoot>
+  </TooltipProvider>
+</template>

package/dist/runtime/components/elements/tooltip/TooltipContent.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
+import type { TooltipContentEmits } from 'radix-vue'
+import { cn } from '../../../utils'
+import type { NTooltipContentProps } from '../../../types'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NTooltipContentProps>(), {
+  sideOffset: 4,
+  tooltip: 'black',
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn(
+        'tooltip-content',
+        props.class,
+        props.una?.tooltipContent,
+      )"
+      :tooltip
+    >
+      <slot />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

package/dist/runtime/components/elements/tooltip/TooltipProvider.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { TooltipProvider } from 'radix-vue'
+import type { NTooltipProviderProps } from '../../../types'
+
+const props = withDefaults(defineProps<NTooltipProviderProps>(), {
+  delayDuration: 600,
+})
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

package/dist/runtime/components/elements/tooltip/TooltipRoot.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { TooltipRoot, useForwardPropsEmits } from 'radix-vue'
+import type { TooltipRootEmits } from 'radix-vue'
+import type { NTooltipRootProps } from '../../../types'
+
+const props = defineProps<NTooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>

package/dist/runtime/components/elements/tooltip/TooltipTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { TooltipTrigger } from 'radix-vue'
+import type { NTooltipTriggerProps } from '../../../types'
+
+const props = defineProps<NTooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>

package/dist/runtime/types/index.d.ts

@@ -27,6 +27,7 @@ export * from './table.js';
 export * from './dropdown-menu.js';
 export * from './label.js';
 export * from './popover.js';
+export * from './tooltip.js';
 export interface Colors {
     [key: string]: string;
 }

package/dist/runtime/types/index.js

@@ -27,3 +27,4 @@ export * from "./table.js";
 export * from "./dropdown-menu.js";
 export * from "./label.js";
 export * from "./popover.js";
+export * from "./tooltip.js";

package/dist/runtime/types/tooltip.d.ts

@@ -0,0 +1,62 @@
+import type { HTMLAttributes } from 'vue';
+import type { TooltipContentProps, TooltipProviderProps, TooltipRootProps, TooltipTriggerProps } from 'radix-vue';
+import type { NButtonProps } from './button.js';
+interface BaseExtensions {
+    class?: HTMLAttributes['class'];
+    size?: HTMLAttributes['class'];
+}
+type TriggerExtensions = NButtonProps & TooltipTriggerProps;
+type ContentExtensions = BaseExtensions & TooltipContentProps;
+export interface NTooltipProps extends BaseExtensions {
+    /**
+     * Disable the tooltip.
+     */
+    disabled?: boolean;
+    /**
+     * Add a content of the tooltip.
+     */
+    content?: string;
+    /**
+     * Allows you to add `UnaUI` tooltip preset properties,
+     * Think of it as a shortcut for adding options or variants to the preset if available.
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/tooltip.ts
+     * @example
+     * tooltip="green"
+     */
+    tooltip?: HTMLAttributes['class'];
+    _tooltipProvider?: Partial<NTooltipProviderProps>;
+    _tooltipRoot?: Partial<NTooltipRootProps>;
+    _tooltipTrigger?: Partial<NTooltipTriggerProps>;
+    _tooltipContent?: Partial<NTooltipContentProps>;
+    una?: NTooltipUnaProps;
+}
+export interface NTooltipRootProps extends TooltipRootProps {
+    'onUpdate:open'?: (value: boolean) => void;
+}
+export interface NTooltipProviderProps extends TooltipProviderProps {
+}
+export interface NTooltipTriggerProps extends TriggerExtensions {
+}
+export interface NTooltipContentProps extends ContentExtensions {
+    /**
+     * Allows you to add `UnaUI` tooltip preset properties,
+     * Think of it as a shortcut for adding options or variants to the preset if available.
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/tooltip.ts
+     * @example
+     * tooltip="green"
+     */
+    tooltip?: HTMLAttributes['class'];
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/tooltip.ts
+     */
+    una?: NTooltipUnaProps['tooltipContent'];
+}
+interface NTooltipUnaProps {
+    /** CSS class for the tooltip content */
+    tooltipContent?: HTMLAttributes['class'];
+}
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "0.16.2-beta.1",
+  "version": "0.17.0-beta.1",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -49,8 +49,8 @@
     "typescript": "^5.5.4",
     "unocss": "^0.62.3",
     "unocss-preset-animations": "^1.1.0",
-    "@una-ui/extractor-vue-script": "^0.16.2-beta.1",
-    "@una-ui/preset": "^0.16.2-beta.1"
+    "@una-ui/extractor-vue-script": "^0.17.0-beta.1",
+    "@una-ui/preset": "^0.17.0-beta.1"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.8.1",