fix(popover): remove popover style destructuring

codebender828 · codebender828 · commit 563b9f32859e · 2023-03-08T02:07:08.000+08:00
diff --git a/@types/components.d.ts b/@types/components.d.ts
@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-03-07T16:51:08.517Z
+ * This file was generated on 2023-03-07T17:27:38.918Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
diff --git a/components.d.ts b/components.d.ts
@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-03-07T16:51:08.517Z
+ * This file was generated on 2023-03-07T17:27:38.918Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
diff --git a/packages/c-popover/src/c-popover-positioner.tsx b/packages/c-popover/src/c-popover-positioner.tsx
@@ -12,13 +12,10 @@ export const CPopoverPositioner = defineComponent({
     const styles = useStyles()
 
     return () => {
-      const { style, ...positionerProps } = api.value.positionerProps
-      const { opacity, ...styleProps } = style
       return (
         <chakra.div
           __css={styles.value.popper}
-          {...positionerProps}
-          style={styleProps}
+          {...api.value.positionerProps}
           __label="popover__popper"
         >
           <chakra.div {...attrs}>{slots.default?.()}</chakra.div>
diff --git a/packages/c-popover/src/use-popover.ts b/packages/c-popover/src/use-popover.ts
@@ -1,6 +1,6 @@
 import { connect, Context as PopoverContext, machine } from "@zag-js/popover"
 import { normalizeProps, useMachine } from "@zag-js/vue"
-import { computed, reactive, Ref, ref, watch } from "vue"
+import { computed, reactive, watch } from "vue"
 import type { Optional } from "@chakra-ui/vue-utils"
 import { useId } from "@chakra-ui/vue-composables"
 
@@ -19,10 +19,6 @@ export interface UsePopoverProps {
   emit: CallableFunction
 }
 
-function wait(delay: number) {
-  return new Promise((resolve) => setTimeout(resolve, delay))
-}
-
 export function usePopover(props: UsePopoverProps) {
   const { context, emit } = props
   const popoverContext = reactive(context)
diff --git a/packages/c-tooltip/package.json b/packages/c-tooltip/package.json
@@ -34,7 +34,13 @@
     "dev": "tsup --watch"
   },
   "dependencies": {
-    "@chakra-ui/vue-system": "workspace:*"
+    "@chakra-ui/vue-composables": "workspace:*",
+    "@chakra-ui/vue-system": "workspace:*",
+    "@chakra-ui/vue-utils": "workspace:*",
+    "@vueuse/motion": "^1.6.0",
+    "@zag-js/popper": "^0.2.5",
+    "@zag-js/tooltip": "^0.2.13",
+    "@zag-js/vue": "^0.2.10"
   },
   "devDependencies": {
     "vue": "^3.2.37"
diff --git a/packages/c-tooltip/src/c-tooltip-arrow.tsx b/packages/c-tooltip/src/c-tooltip-arrow.tsx
@@ -0,0 +1,16 @@
+import { computed, defineComponent, watchEffect } from "vue"
+import { useTooltipContext } from "./tooltip.context"
+import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system"
+
+export type CTooltipArrowProps = HTMLChakraProps<"div">
+export const CTooltipArrow = defineComponent({
+  name: "CTooltipArrow",
+  setup(_, { slots, attrs }) {
+    const api = useTooltipContext()
+    return () => (
+      <chakra.div {...api.value.arrowProps}>
+        <chakra.div {...api.value.arrowTipProps} {...attrs} />
+      </chakra.div>
+    )
+  },
+})
diff --git a/packages/c-tooltip/src/c-tooltip-positioner.tsx b/packages/c-tooltip/src/c-tooltip-positioner.tsx
@@ -0,0 +1,16 @@
+import { computed, defineComponent, watchEffect } from "vue"
+import { useTooltipContext } from "./tooltip.context"
+import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system"
+
+export type CTooltipPositionerProps = HTMLChakraProps<"div">
+export const CTooltipPositioner = defineComponent({
+  name: "CTooltipPositioner",
+  setup(_, { slots, attrs }) {
+    const api = useTooltipContext()
+    return () => (
+      <chakra.div {...api.value.positionerProps} {...attrs}>
+        {slots.default?.()}
+      </chakra.div>
+    )
+  },
+})
diff --git a/packages/c-tooltip/src/c-tooltip.tsx b/packages/c-tooltip/src/c-tooltip.tsx
@@ -8,26 +8,64 @@
  * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2
  */
 
-import { defineComponent, h, Fragment, PropType } from "vue"
-import {
-  chakra,
-  DOMElements,
-} from "@chakra-ui/vue-system"
+import { computed, defineComponent, h, Fragment, PropType } from "vue"
+import { chakra, DOMElements } from "@chakra-ui/vue-system"
+import { TooltipProvider } from "./tooltip.context"
+import { useTooltip, UseTooltipProps } from "./use-tooltip"
+import type * as PP from "@zag-js/popper"
 
-export interface CTooltipProps {}
+type UseTooltipPropsContext = UseTooltipProps["context"]
+
+export type CTooltipProps = UseTooltipPropsContext
+
+const VueTooltipProps = {
+  ids: {
+    type: Object as PropType<CTooltipProps["ids"]>,
+  },
+  openDelay: {
+    type: Number as PropType<CTooltipProps["openDelay"]>,
+  },
+  closeDelay: {
+    type: Number as PropType<CTooltipProps["closeDelay"]>,
+  },
+  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 const CTooltip = defineComponent({
-    props: {
-      as: {
-        type: [Object, String] as PropType<DOMElements>,
-        default: "div",
-      },
-    },
-    setup(props, { slots, attrs }) {
-      return () => (
-        <chakra.div as={props.as} {...attrs}>
-          {slots}
-        </chakra.div>
-      )
-    },
-  })
+  name: "Tooltip",
+  props: VueTooltipProps,
+  emits: ["open", "close"],
+  setup(props, { slots, emit }) {
+    const tooltipProps = computed<UseTooltipProps>(() => ({
+      context: props,
+      emit,
+    }))
+
+    const api = useTooltip(tooltipProps.value)
+
+    TooltipProvider(api)
+
+    return () => slots?.default?.()
+  },
+})
diff --git a/packages/c-tooltip/src/index.tsx b/packages/c-tooltip/src/index.tsx
@@ -1 +1 @@
-export * from "./c-tooltip"
+export { CTooltip, type CTooltipProps } from "./c-tooltip"
diff --git a/packages/c-tooltip/src/tooltip.context.ts b/packages/c-tooltip/src/tooltip.context.ts
@@ -0,0 +1,13 @@
+import type { connect } from "@zag-js/tooltip"
+import type { ComputedRef } from "vue"
+import { createContext } from "@chakra-ui/vue-utils"
+import type { UseTooltipReturn } from "./use-tooltip"
+
+export const [TooltipProvider, useTooltipContext] = createContext<
+  ComputedRef<ReturnType<typeof connect>>
+>({
+  name: "CTooltipContext",
+  strict: true,
+})
+
+export type TooltipContext = UseTooltipReturn
diff --git a/packages/c-tooltip/src/use-tooltip.ts b/packages/c-tooltip/src/use-tooltip.ts
@@ -0,0 +1,33 @@
+import { connect, Context as TooltipContext, machine } from "@zag-js/tooltip"
+import { normalizeProps, useMachine } from "@zag-js/vue"
+import { computed } from "vue"
+import { transformComposableProps } from "@chakra-ui/vue-utils"
+import { useId } from "@chakra-ui/vue-composables"
+
+type TooltipPropsContext = Omit<TooltipContext, "id">
+
+export type UseTooltipProps = {
+  context: TooltipPropsContext
+  emit: CallableFunction
+}
+
+export const useTooltip = (props: UseTooltipProps) => {
+  const { context, emit } = transformComposableProps(props)
+
+  const [state, send] = useMachine(
+    machine({
+      ...context,
+      id: useId().value,
+      onOpen() {
+        emit("open")
+      },
+      onClose() {
+        emit("close")
+      },
+    })
+  )
+
+  return computed(() => connect(state.value, send, normalizeProps))
+}
+
+export type UseTooltipReturn = ReturnType<typeof useTooltip>
diff --git a/packages/utils/src/index.tsx b/packages/utils/src/index.tsx
@@ -32,6 +32,7 @@ export {
   isObjectComponent,
   resolveRef,
   withSingleton,
+  transformComposableProps,
 } from "./vue-utils"
 export { debounce } from "./timers"
 export { extractStyleAttrs, StyleAndHTMLAttibutes } from "./attrs"
diff --git a/packages/utils/src/vue-utils.ts b/packages/utils/src/vue-utils.ts
@@ -12,6 +12,7 @@ import {
   ref,
   cloneVNode,
   h,
+  reactive,
 } from "vue"
 import { MaybeComputedRef, MaybeRef } from "./types"
 
@@ -110,6 +111,19 @@ export function withSingleton(
   return h(finalSlot, props)
 }
 
+/**
+ * For the component composables -- takes in the props object
+ * and returns the props with a reactive context object
+ */
+export function transformComposableProps<T extends { context: object }>(
+  props: T
+): T {
+  return {
+    ...props,
+    context: reactive(props.context),
+  }
+}
+
 export interface CouldBeObjectComponent {
   setup?: FunctionConstructor
   render?: FunctionConstructor
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
@@ -472,6 +472,8 @@ export {
   type ToastPlacement,
 } from "@chakra-ui/c-toast"
 
+export { CTooltip, type CTooltipProps } from "@chakra-ui/c-tooltip"
+
 // V
 export {
   CVisuallyHidden,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`*`
`7`	`7`	`* This is a generated file. Do not edit it's contents.`
`8`	`8`	`*`
`9`		`- * This file was generated on 2023-03-07T16:51:08.517Z`
	`9`	`+ * This file was generated on 2023-03-07T17:27:38.918Z`
`10`	`10`	`*/`
`11`	`11`
`12`	`12`	`import { ChakraProps, chakra } from "@chakra-ui/vue-system"`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export * from "./c-tooltip"`
	`1`	`+export { CTooltip, type CTooltipProps } from "./c-tooltip"`