feat: simplify tooltip api

Author: codebender828

packages/c-button/examples/base-button.vue

@@ -1,5 +1,15 @@
 <template>
   <div>
+    <c-button
+      border="1px solid rgba(47, 43, 67, 0.1)"
+      border-radius="12px"
+      mr="3"
+      variant="outline"
+      box-shadow="0px 1px 3px rgba(47, 43, 67, 0.1), inset 0px -1px 0px rgba(47, 43, 67, 0.1)"
+      bg="transparent"
+    >
+      Button
+    </c-button>
     <c-button mr="3" @click="handleClick" color-scheme="blue">
       Base button
     </c-button>

packages/c-button/examples/custom-button.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <c-button
+      border="1px solid rgba(47, 43, 67, 0.1)"
+      border-radius="12px"
+      mr="3"
+      variant="outline"
+      box-shadow="0px 1px 3px rgba(47, 43, 67, 0.1), inset 0px -1px 0px rgba(47, 43, 67, 0.1)"
+      bg="transparent"
+      size="lg"
+      :left-icon="CommandIcon"
+    >
+      Button
+    </c-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { createIcon } from "../../vue/src"
+
+const CommandIcon = createIcon({
+  name: "CommandIcon",
+  viewBox: "0 0 20 20",
+  path: `<path d="M8.33333 6.66667H11.6667V5.41667C11.6667 4.83981 11.8377 4.2759 12.1582 3.79626C12.4787 3.31661 12.9342 2.94277 13.4672 2.72202C14.0001 2.50126 14.5866 2.4435 15.1523 2.55604C15.7181 2.66858 16.2378 2.94637 16.6457 3.35427C17.0536 3.76218 17.3314 4.28188 17.444 4.84765C17.5565 5.41343 17.4987 5.99988 17.278 6.53283C17.0572 7.06578 16.6834 7.5213 16.2037 7.84179C15.7241 8.16228 15.1602 8.33333 14.5833 8.33333H13.3333V11.6667H14.5833C15.1602 11.6667 15.7241 11.8377 16.2037 12.1582C16.6834 12.4787 17.0572 12.9342 17.278 13.4672C17.4987 14.0001 17.5565 14.5866 17.444 15.1523C17.3314 15.7181 17.0536 16.2378 16.6457 16.6457C16.2378 17.0536 15.7181 17.3314 15.1523 17.444C14.5866 17.5565 14.0001 17.4987 13.4672 17.278C12.9342 17.0572 12.4787 16.6834 12.1582 16.2037C11.8377 15.7241 11.6667 15.1602 11.6667 14.5833V13.3333H8.33333V14.5833C8.33333 15.1602 8.16228 15.7241 7.84179 16.2037C7.5213 16.6834 7.06578 17.0572 6.53283 17.278C5.99988 17.4987 5.41343 17.5565 4.84765 17.444C4.28188 17.3314 3.76218 17.0536 3.35427 16.6457C2.94637 16.2378 2.66858 15.7181 2.55604 15.1523C2.4435 14.5866 2.50126 14.0001 2.72202 13.4672C2.94277 12.9342 3.31661 12.4787 3.79626 12.1582C4.2759 11.8377 4.83981 11.6667 5.41667 11.6667H6.66667V8.33333H5.41667C4.83981 8.33333 4.2759 8.16228 3.79626 7.84179C3.31661 7.5213 2.94277 7.06578 2.72202 6.53283C2.50126 5.99988 2.4435 5.41343 2.55604 4.84765C2.66858 4.28188 2.94637 3.76218 3.35427 3.35427C3.76218 2.94637 4.28188 2.66858 4.84765 2.55604C5.41343 2.4435 5.99988 2.50126 6.53283 2.72202C7.06578 2.94277 7.5213 3.31661 7.84179 3.79626C8.16228 4.2759 8.33333 4.83981 8.33333 5.41667V6.66667ZM6.66667 6.66667V5.41667C6.66667 5.16944 6.59336 4.92777 6.456 4.72221C6.31865 4.51664 6.12343 4.35643 5.89502 4.26182C5.66661 4.16721 5.41528 4.14245 5.17281 4.19069C4.93033 4.23892 4.7076 4.35797 4.53278 4.53278C4.35797 4.7076 4.23892 4.93033 4.19069 5.17281C4.14245 5.41528 4.16721 5.66661 4.26182 5.89502C4.35643 6.12343 4.51664 6.31865 4.72221 6.456C4.92777 6.59336 5.16944 6.66667 5.41667 6.66667H6.66667ZM6.66667 13.3333H5.41667C5.16944 13.3333 4.92777 13.4066 4.72221 13.544C4.51664 13.6814 4.35643 13.8766 4.26182 14.105C4.16721 14.3334 4.14245 14.5847 4.19069 14.8272C4.23892 15.0697 4.35797 15.2924 4.53278 15.4672C4.7076 15.642 4.93033 15.7611 5.17281 15.8093C5.41528 15.8575 5.66661 15.8328 5.89502 15.7382C6.12343 15.6436 6.31865 15.4834 6.456 15.2778C6.59336 15.0722 6.66667 14.8306 6.66667 14.5833V13.3333ZM13.3333 6.66667H14.5833C14.8306 6.66667 15.0722 6.59336 15.2778 6.456C15.4834 6.31865 15.6436 6.12343 15.7382 5.89502C15.8328 5.66661 15.8575 5.41528 15.8093 5.17281C15.7611 4.93033 15.642 4.7076 15.4672 4.53278C15.2924 4.35797 15.0697 4.23892 14.8272 4.19069C14.5847 4.14245 14.3334 4.16721 14.105 4.26182C13.8766 4.35643 13.6814 4.51664 13.544 4.72221C13.4066 4.92777 13.3333 5.16944 13.3333 5.41667V6.66667ZM13.3333 13.3333V14.5833C13.3333 14.8306 13.4066 15.0722 13.544 15.2778C13.6814 15.4834 13.8766 15.6436 14.105 15.7382C14.3334 15.8328 14.5847 15.8575 14.8272 15.8093C15.0697 15.7611 15.2924 15.642 15.4672 15.4672C15.642 15.2924 15.7611 15.0697 15.8093 14.8272C15.8575 14.5847 15.8328 14.3334 15.7382 14.105C15.6436 13.8766 15.4834 13.6814 15.2778 13.544C15.0722 13.4066 14.8306 13.3333 14.5833 13.3333H13.3333ZM8.33333 8.33333V11.6667H11.6667V8.33333H8.33333Z" fill="currentColor"/>
+`,
+})
+</script>

packages/c-tooltip/examples/simplified-api.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { CSimpleTooltip } from "../src"
+import { chakra, CStack, createIcon } from "../../vue/src"
+
+const ChakraIcon = createIcon({
+  name: "ChakraUIIcon",
+  viewBox: "0 0 24 24",
+  path: `
+    <path fill="currentColor" d="M12 0C5.352 0 0 5.352 0 12s5.352 12 12 12s12-5.352 12-12S18.648 0 12 0zm2.8 4.333c.13-.004.248.136.171.278l-3.044 5.58a.187.187 0 0 0 .164.276h5.26c.17 0 .252.207.128.323l-9.22 8.605c-.165.154-.41-.063-.278-.246l4.364-6.021a.187.187 0 0 0-.151-.296H6.627a.187.187 0 0 1-.131-.32l8.18-8.123a.182.182 0 0 1 .125-.056z"/>
+  `,
+})
+</script>
+
+<template>
+  <c-stack spacing="8">
+    <c-simple-tooltip
+      bg="red.500"
+      label="Chakra UI Vue"
+      has-arrow
+      placement="top-start"
+    >
+      <chakra-icon box-size="8" />
+    </c-simple-tooltip>
+    <c-simple-tooltip label="Chakra UI Vue" has-arrow placement="bottom-end">
+      Text with arrow
+    </c-simple-tooltip>
+  </c-stack>
+</template>

packages/c-tooltip/src/c-tooltip-arrow.tsx

@@ -10,9 +10,7 @@ export const CTooltipArrow = defineComponent({
 
     const styles = useStyles()
 
-    const arrowBg = computed(
-      () => attrs.bg ?? attrs.bgColor ?? attrs.backgroundColor
-    )
+    const arrowBg = computed(() => styles.value.bg)
     const arrowShadow = computed(() => attrs.shadow ?? attrs.boxShadow)
 
     return () => (

packages/c-tooltip/src/c-tooltip-content.tsx

@@ -49,7 +49,17 @@ export const CTooltipContent = defineComponent({
       ).varRef,
     }))
 
-    TooltipStylesProvider(styles)
+    const userDefinedBg = computed(
+      () =>
+        attrs.background ?? attrs.backgroundColor ?? attrs.bg ?? attrs.bgColor
+    )
+
+    const tooltipStyles = computed(() => ({
+      ...styles.value,
+      bg: userDefinedBg.value as string | undefined,
+    }))
+
+    TooltipStylesProvider(tooltipStyles)
 
     /** Handles exit transition */
     const leaveTransition = (el: Element, done: VoidFunction) => {

packages/c-tooltip/src/c-tooltip-simple.tsx

@@ -0,0 +1,70 @@
+import {
+  PropType,
+  defineComponent,
+  h,
+  Fragment,
+  mergeProps,
+  watchEffect,
+  computed,
+} from "vue"
+
+import { getValidChildren, withSingleton } from "@chakra-ui/vue-utils"
+import { CTooltipTrigger } from "./c-tooltip-trigger"
+import { VueTooltipProps } from "./tooltip.props"
+import type * as PP from "@zag-js/popper"
+import { CTooltip } from "./c-tooltip"
+import { chakra } from "@chakra-ui/vue-system"
+import { CTooltipContent } from "./c-tooltip-content"
+import { CTooltipArrow } from "./c-tooltip-arrow"
+
+export const CSimpleTooltip = defineComponent({
+  name: "CSimpleTooltip",
+  props: {
+    ...VueTooltipProps,
+    placement: {
+      type: String as PropType<PP.Placement>,
+      default: "bottom",
+    },
+    label: String as PropType<string>,
+    hasArrow: Boolean as PropType<boolean>,
+  },
+  inheritAttrs: false,
+  emits: ["open", "close"],
+  setup(props, { slots, emit, attrs }) {
+    const mergedProps = mergeProps(props, {
+      positioning: {
+        ...props.positioning,
+        placement: props.placement,
+      },
+    })
+    const shouldWrapChildren = computed(
+      () => typeof getValidChildren(slots)?.[0]?.children === "string"
+    )
+    return () => {
+      if (!props.label) return slots.default?.()
+      const { label, hasArrow, ...rest } = mergedProps
+
+      return (
+        <CTooltip
+          {...rest}
+          onOpen={(...e) => emit("open", ...e)}
+          onClose={(...e) => emit("close", ...e)}
+        >
+          <CTooltipTrigger>
+            {shouldWrapChildren.value ? (
+              <chakra.span display={"inline-block"} tabindex={0}>
+                {slots?.default?.()}
+              </chakra.span>
+            ) : (
+              withSingleton(slots, "CTooltip")
+            )}
+          </CTooltipTrigger>
+          <CTooltipContent {...attrs}>
+            {props.hasArrow && <CTooltipArrow />}
+            {props.label}
+          </CTooltipContent>
+        </CTooltip>
+      )
+    }
+  },
+})

packages/c-tooltip/src/c-tooltip.tsx

@@ -16,59 +16,22 @@ import {
   PropType,
   watch,
   mergeProps,
+  watchEffect,
 } from "vue"
 import { TooltipProvider } from "./tooltip.context"
-import { useTooltip, UseTooltipProps } from "./use-tooltip"
+import { UseTooltipProps, useTooltip } from "./use-tooltip"
 import type * as PP from "@zag-js/popper"
 import { filterUndefined } from "@chakra-ui/utils"
 import { useId } from "@chakra-ui/vue-composables"
+import { VueTooltipProps, CTooltipProps } from "./tooltip.props"
 
-type UseTooltipPropsContext = UseTooltipProps["context"]
-
-export type CTooltipProps = UseTooltipPropsContext
-
-const VueTooltipProps = {
-  ids: {
-    type: Object as PropType<CTooltipProps["ids"]>,
-  },
-  openDelay: {
-    type: Number as PropType<CTooltipProps["openDelay"]>,
-    default: 0,
-  },
-  closeDelay: {
-    type: Number as PropType<CTooltipProps["closeDelay"]>,
-    default: 0,
-  },
-  closeOnPointerDown: {
-    type: Boolean as PropType<CTooltipProps["closeOnPointerDown"]>,
-  },
-  closeOnEsc: {
-    type: Boolean as PropType<CTooltipProps["closeOnEsc"]>,
-    default: true,
-  },
-  interactive: {
-    type: Boolean as PropType<CTooltipProps["interactive"]>,
-  },
-  "aria-label": {
-    type: String as PropType<CTooltipProps["aria-label"]>,
-  },
-  positioning: {
-    type: Object as PropType<CTooltipProps["positioning"]>,
-  },
-  disabled: {
-    type: Boolean as PropType<CTooltipProps["disabled"]>,
-  },
-  getRootNode: {
-    type: Function as PropType<CTooltipProps["getRootNode"]>,
-  },
-}
+export type { CTooltipProps }
 
 export const CTooltip = defineComponent({
   name: "Tooltip",
   props: VueTooltipProps,
   emits: ["open", "close"],
   setup(props, { slots, emit, attrs }) {
-    console.log(filterUndefined(props))
     const tooltipProps = computed<UseTooltipProps>(() => ({
       context: filterUndefined(props),
       emit,

packages/c-tooltip/src/index.tsx

@@ -12,3 +12,4 @@ export {
 } from "./use-tooltip"
 export { CTooltipContent, type CTooltipContentProps } from "./c-tooltip-content"
 export { CTooltipTrigger } from "./c-tooltip-trigger"
+export { CSimpleTooltip } from "./c-tooltip-simple"

packages/c-tooltip/src/tooltip.props.ts

@@ -0,0 +1,42 @@
+import { PropType } from "vue"
+import { type UseTooltipProps } from "./use-tooltip"
+
+export type UseTooltipPropsContext = UseTooltipProps["context"]
+
+export type CTooltipProps = UseTooltipPropsContext
+
+export const VueTooltipProps = {
+  ids: {
+    type: Object as PropType<CTooltipProps["ids"]>,
+  },
+  openDelay: {
+    type: Number as PropType<CTooltipProps["openDelay"]>,
+    default: 0,
+  },
+  closeDelay: {
+    type: Number as PropType<CTooltipProps["closeDelay"]>,
+    default: 0,
+  },
+  closeOnPointerDown: {
+    type: Boolean as PropType<CTooltipProps["closeOnPointerDown"]>,
+  },
+  closeOnEsc: {
+    type: Boolean as PropType<CTooltipProps["closeOnEsc"]>,
+    default: true,
+  },
+  interactive: {
+    type: Boolean as PropType<CTooltipProps["interactive"]>,
+  },
+  "aria-label": {
+    type: String as PropType<CTooltipProps["aria-label"]>,
+  },
+  positioning: {
+    type: Object as PropType<CTooltipProps["positioning"]>,
+  },
+  disabled: {
+    type: Boolean as PropType<CTooltipProps["disabled"]>,
+  },
+  getRootNode: {
+    type: Function as PropType<CTooltipProps["getRootNode"]>,
+  },
+}