From 34bfd29c1095aacaff59d894985df16f487794ca Mon Sep 17 00:00:00 2001 From: codebender828 Date: Mon, 27 Feb 2023 23:11:11 +0800 Subject: [PATCH 01/14] feat: create chakra optional properties --- packages/vue/src/create-chakra.ts | 2 +- playground/src/test.ts | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 playground/src/test.ts diff --git a/packages/vue/src/create-chakra.ts b/packages/vue/src/create-chakra.ts index 60fe4681..0d766a79 100644 --- a/packages/vue/src/create-chakra.ts +++ b/packages/vue/src/create-chakra.ts @@ -53,7 +53,7 @@ export function extendChakra(options = defaultPluginOptions) { return options } -export function createChakra(_options: ChakraPluginOptions) { +export function createChakra(_options: ChakraPluginOptions = {}) { const ChakraUIVuePlugin: Plugin = { install(app) { const options = mergeWith( diff --git a/playground/src/test.ts b/playground/src/test.ts new file mode 100644 index 00000000..19599f2c --- /dev/null +++ b/playground/src/test.ts @@ -0,0 +1,7 @@ +import { createChakra } from "@chakra-ui/vue-next" +import { createApp } from "vue" +import App from "./App.vue" + +const chakra = createChakra({}) + +createApp(App).use(chakra).mount("#app") From 3493d0d959c09d01bb93d48cee11a834d8c8c5e8 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 28 Feb 2023 04:02:56 +0800 Subject: [PATCH 02/14] feat(machine): create state machines for popover --- @types/components.d.ts | 4 +- .../generator/component/examples.vue.ejs.t | 2 +- components.d.ts | 4 +- packages/c-accordion/package.json | 4 +- packages/c-checkbox/package.json | 2 +- packages/c-menu/package.json | 6 +- packages/c-pin-input/package.json | 2 +- packages/c-popover/README.md | 14 ++ .../c-popover/examples/simple-popover.vue | 31 +++ packages/c-popover/index.tsx | 1 + packages/c-popover/package.json | 53 +++++ packages/c-popover/src/c-popover-anchor.tsx | 17 ++ packages/c-popover/src/c-popover-arrow.tsx | 18 ++ packages/c-popover/src/c-popover-body.tsx | 16 ++ .../c-popover/src/c-popover-close-trigger.tsx | 16 ++ packages/c-popover/src/c-popover-content.tsx | 19 ++ .../c-popover/src/c-popover-description.tsx | 17 ++ packages/c-popover/src/c-popover-header.tsx | 14 ++ .../c-popover/src/c-popover-positioner.tsx | 22 ++ packages/c-popover/src/c-popover-title.tsx | 17 ++ packages/c-popover/src/c-popover-trigger.tsx | 16 ++ packages/c-popover/src/c-popover.anatomy.ts | 1 + packages/c-popover/src/c-popover.tsx | 83 +++++++ packages/c-popover/src/index.tsx | 21 ++ packages/c-popover/src/popover.context.ts | 15 ++ packages/c-popover/src/use-popover.ts | 73 ++++++ packages/c-popover/tests/c-popover.test.ts | 7 + packages/c-popover/tsconfig.json | 4 + packages/c-popover/tsup.config.ts | 17 ++ packages/c-toast/examples/simple-toast.vue | 10 +- packages/c-toast/package.json | 6 +- packages/c-toast/src/index.tsx | 8 +- packages/utils/src/index.tsx | 3 +- packages/utils/src/types.ts | 11 + packages/utils/src/vue-utils.ts | 28 ++- packages/vue-composables/src/use-id.ts | 3 +- packages/vue/package.json | 3 +- packages/vue/src/create-chakra.ts | 1 + packages/vue/src/index.ts | 1 + playground/src/chakra.ts | 4 +- playground/src/test.ts | 7 - pnpm-lock.yaml | 212 ++++++++++++++---- 42 files changed, 732 insertions(+), 81 deletions(-) create mode 100644 packages/c-popover/README.md create mode 100644 packages/c-popover/examples/simple-popover.vue create mode 100644 packages/c-popover/index.tsx create mode 100644 packages/c-popover/package.json create mode 100644 packages/c-popover/src/c-popover-anchor.tsx create mode 100644 packages/c-popover/src/c-popover-arrow.tsx create mode 100644 packages/c-popover/src/c-popover-body.tsx create mode 100644 packages/c-popover/src/c-popover-close-trigger.tsx create mode 100644 packages/c-popover/src/c-popover-content.tsx create mode 100644 packages/c-popover/src/c-popover-description.tsx create mode 100644 packages/c-popover/src/c-popover-header.tsx create mode 100644 packages/c-popover/src/c-popover-positioner.tsx create mode 100644 packages/c-popover/src/c-popover-title.tsx create mode 100644 packages/c-popover/src/c-popover-trigger.tsx create mode 100644 packages/c-popover/src/c-popover.anatomy.ts create mode 100644 packages/c-popover/src/c-popover.tsx create mode 100644 packages/c-popover/src/index.tsx create mode 100644 packages/c-popover/src/popover.context.ts create mode 100644 packages/c-popover/src/use-popover.ts create mode 100644 packages/c-popover/tests/c-popover.test.ts create mode 100644 packages/c-popover/tsconfig.json create mode 100644 packages/c-popover/tsup.config.ts delete mode 100644 playground/src/test.ts diff --git a/@types/components.d.ts b/@types/components.d.ts index fbb2a07a..f1ac083c 100644 --- a/@types/components.d.ts +++ b/@types/components.d.ts @@ -1,12 +1,12 @@ /** - * Typescript support for @chakra-ui/vue-next2.1.0-beta.3 auto-imported + * Typescript support for @chakra-ui/vue-next2.1.0-beta.4 auto-imported * components using `unplugin-vue-components,` * * @see: https://github.com/antfu/unplugin-vue-components/#typescript * * This is a generated file. Do not edit it's contents. * - * This file was generated on 2023-02-26T20:07:20.175Z + * This file was generated on 2023-02-27T18:36:28.117Z */ import { ChakraProps, chakra } from "@chakra-ui/vue-system" diff --git a/_templates/generator/component/examples.vue.ejs.t b/_templates/generator/component/examples.vue.ejs.t index be4afce7..77490957 100644 --- a/_templates/generator/component/examples.vue.ejs.t +++ b/_templates/generator/component/examples.vue.ejs.t @@ -1,5 +1,5 @@ --- -to: packages/<%=h.changeCase.paramCase(name)%>/examples/base-<%=h.changeCase.paramCase(name)%>.vue +to: packages/<%=h.changeCase.paramCase(name)%>/examples/simple-<%=h.changeCase.paramCase(name)%>.vue --- + + diff --git a/packages/c-popover/index.tsx b/packages/c-popover/index.tsx new file mode 100644 index 00000000..46e72b16 --- /dev/null +++ b/packages/c-popover/index.tsx @@ -0,0 +1 @@ +export * from "./src" diff --git a/packages/c-popover/package.json b/packages/c-popover/package.json new file mode 100644 index 00000000..fac1e582 --- /dev/null +++ b/packages/c-popover/package.json @@ -0,0 +1,53 @@ +{ + "name": "@chakra-ui/c-popover", + "description": "Chakra UI Vue | Popover is a non modal dialog that floats around a trigger component", + "version": "0.0.0-beta.0", + "author": "Jonathan Bakebwa ", + "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme", + "license": "MIT", + "main": "dist/index.js", + "module": "dist/index.mjs", + "typings": "dist/index.d.ts", + "files": [ + "dist" + ], + "exports": { + ".": { + "require": "./dist/index.js", + "default": "./dist/index.mjs" + } + }, + "repository": { + "type": "git", + "url": "git+https://github.com/chakra-ui/chakra-ui-vue-next.git" + }, + "bugs": { + "url": "https://github.com/chakra-ui/chakra-ui-vue-next/issues" + }, + "sideEffects": false, + "scripts": { + "clean": "rimraf dist .turbo", + "build": "tsup && pnpm build:types", + "build:fast": "tsup", + "build:types": "tsup src --dts-only", + "types:check": "tsc --noEmit", + "dev": "tsup --watch" + }, + "dependencies": { + "@chakra-ui/c-motion": "workspace:*", + "@chakra-ui/vue-composables": "workspace:*", + "@chakra-ui/vue-system": "workspace:*", + "@chakra-ui/vue-utils": "workspace:*", + "@zag-js/popover": "^0.2.13", + "@zag-js/vue": "^0.2.10" + }, + "devDependencies": { + "vue": "^3.2.37" + }, + "peerDependencies": { + "vue": "^3.1.4" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/c-popover/src/c-popover-anchor.tsx b/packages/c-popover/src/c-popover-anchor.tsx new file mode 100644 index 00000000..2f8bd9cb --- /dev/null +++ b/packages/c-popover/src/c-popover-anchor.tsx @@ -0,0 +1,17 @@ +import { defineComponent } from "vue" +import { usePopoverContext } from "./popover.context" +import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system" + +export interface CPopoverAnchorProps extends HTMLChakraProps<"div"> {} +export const CPopoverAnchor = defineComponent({ + name: "CPopoverAnchor", + setup(_, { slots, attrs }) { + const api = usePopoverContext() + + return () => ( + + {slots.default?.()} + + ) + }, +}) diff --git a/packages/c-popover/src/c-popover-arrow.tsx b/packages/c-popover/src/c-popover-arrow.tsx new file mode 100644 index 00000000..fc53b408 --- /dev/null +++ b/packages/c-popover/src/c-popover-arrow.tsx @@ -0,0 +1,18 @@ +import { defineComponent } from "vue" +import { usePopoverContext } from "./popover.context" +import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system" + +export interface CPopoverArrow extends HTMLChakraProps<"div"> {} +export const CPopoverArrow = defineComponent({ + name: "CPopoverArrow", + setup(_, { slots, attrs }) { + const api = usePopoverContext() + + return () => ( + + + {slots.default?.()} + + ) + }, +}) diff --git a/packages/c-popover/src/c-popover-body.tsx b/packages/c-popover/src/c-popover-body.tsx new file mode 100644 index 00000000..acbee6c0 --- /dev/null +++ b/packages/c-popover/src/c-popover-body.tsx @@ -0,0 +1,16 @@ +import { defineComponent } from "vue" +import { usePopoverContext } from "./popover.context" +import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system" +import { CPopoverDescription } from "./c-popover-description" + +export interface CPopoverBodyProps extends HTMLChakraProps<"div"> {} +export const CPopoverBody = defineComponent({ + name: "CPopoverBody", + setup(_, { slots, attrs }) { + const api = usePopoverContext() + + return () => ( + {slots.default?.()} + ) + }, +}) diff --git a/packages/c-popover/src/c-popover-close-trigger.tsx b/packages/c-popover/src/c-popover-close-trigger.tsx new file mode 100644 index 00000000..39bf4869 --- /dev/null +++ b/packages/c-popover/src/c-popover-close-trigger.tsx @@ -0,0 +1,16 @@ +import { defineComponent } from "vue" +import { usePopoverContext } from "./popover.context" +import { withSingleton } from "@chakra-ui/vue-utils" + +export const CPopoverCloseTrigger = defineComponent({ + name: "CPopoverCloseTrigger", + setup(_, { slots, attrs }) { + const api = usePopoverContext() + + return () => + withSingleton(slots, "CPopoverCloseTrigger", { + ...api.value.closeTriggerProps, + ...attrs, + }) + }, +}) diff --git a/packages/c-popover/src/c-popover-content.tsx b/packages/c-popover/src/c-popover-content.tsx new file mode 100644 index 00000000..77fbac47 --- /dev/null +++ b/packages/c-popover/src/c-popover-content.tsx @@ -0,0 +1,19 @@ +import { defineComponent } from "vue" +import { usePopoverContext } from "./popover.context" +import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system" +import { CPopoverPositioner } from "./c-popover-positioner" + +export interface CPopoverContentProps extends HTMLChakraProps<"div"> {} +export const CPopoverContent = defineComponent({ + name: "CPopoverContent", + inheritAttrs: false, + setup(_, { slots, attrs }) { + const api = usePopoverContext() + + return () => ( + + {slots.default?.()} + + ) + }, +}) diff --git a/packages/c-popover/src/c-popover-description.tsx b/packages/c-popover/src/c-popover-description.tsx new file mode 100644 index 00000000..4a629287 --- /dev/null +++ b/packages/c-popover/src/c-popover-description.tsx @@ -0,0 +1,17 @@ +import { defineComponent } from "vue" +import { usePopoverContext } from "./popover.context" +import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system" + +export interface CPopoverDescriptionProps extends HTMLChakraProps<"div"> {} +export const CPopoverDescription = defineComponent({ + name: "CPopoverDescription", + setup(_, { slots, attrs }) { + const api = usePopoverContext() + + return () => ( + + {slots.default?.()} + + ) + }, +}) diff --git a/packages/c-popover/src/c-popover-header.tsx b/packages/c-popover/src/c-popover-header.tsx new file mode 100644 index 00000000..687912fc --- /dev/null +++ b/packages/c-popover/src/c-popover-header.tsx @@ -0,0 +1,14 @@ +import { defineComponent } from "vue" +import { usePopoverContext } from "./popover.context" +import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system" +import { CPopoverTitle } from "./c-popover-title" + +export interface CPopoverHeaderProps extends HTMLChakraProps<"div"> {} +export const CPopoverHeader = defineComponent({ + name: "CPopoverHeader", + setup(_, { slots, attrs }) { + const api = usePopoverContext() + + return () => {slots.default?.()} + }, +}) diff --git a/packages/c-popover/src/c-popover-positioner.tsx b/packages/c-popover/src/c-popover-positioner.tsx new file mode 100644 index 00000000..4e0e5030 --- /dev/null +++ b/packages/c-popover/src/c-popover-positioner.tsx @@ -0,0 +1,22 @@ +import { defineComponent } from "vue" +import { usePopoverContext } from "./popover.context" +import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system" +import { CMotion } from "@chakra-ui/c-motion" + +export interface CPopoverPositionerProps extends HTMLChakraProps<"div"> {} +export const CPopoverPositioner = defineComponent({ + name: "CPopoverPositioner", + setup(_, { slots, attrs }) { + const api = usePopoverContext() + + return () => ( + + + {api.value.isOpen && ( + {slots.default?.()} + )} + + + ) + }, +}) diff --git a/packages/c-popover/src/c-popover-title.tsx b/packages/c-popover/src/c-popover-title.tsx new file mode 100644 index 00000000..9a32436c --- /dev/null +++ b/packages/c-popover/src/c-popover-title.tsx @@ -0,0 +1,17 @@ +import { defineComponent } from "vue" +import { usePopoverContext } from "./popover.context" +import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system" + +export interface CPopoverTitleProps extends HTMLChakraProps<"div"> {} +export const CPopoverTitle = defineComponent({ + name: "CPopoverTitle", + setup(_, { slots, attrs }) { + const api = usePopoverContext() + + return () => ( + + {slots.default?.()} + + ) + }, +}) diff --git a/packages/c-popover/src/c-popover-trigger.tsx b/packages/c-popover/src/c-popover-trigger.tsx new file mode 100644 index 00000000..e43db5c3 --- /dev/null +++ b/packages/c-popover/src/c-popover-trigger.tsx @@ -0,0 +1,16 @@ +import { defineComponent } from "vue" +import { usePopoverContext } from "./popover.context" +import { withSingleton } from "@chakra-ui/vue-utils" + +export const CPopoverTrigger = defineComponent({ + name: "CPopoverTrigger", + setup(_, { slots, attrs }) { + const api = usePopoverContext() + + return () => + withSingleton(slots, "CPopoverTrigger", { + ...api.value.triggerProps, + ...attrs, + }) + }, +}) diff --git a/packages/c-popover/src/c-popover.anatomy.ts b/packages/c-popover/src/c-popover.anatomy.ts new file mode 100644 index 00000000..7d539cf7 --- /dev/null +++ b/packages/c-popover/src/c-popover.anatomy.ts @@ -0,0 +1 @@ +export { anatomy as popoverAnatomy } from "@zag-js/popover" diff --git a/packages/c-popover/src/c-popover.tsx b/packages/c-popover/src/c-popover.tsx new file mode 100644 index 00000000..7efc3505 --- /dev/null +++ b/packages/c-popover/src/c-popover.tsx @@ -0,0 +1,83 @@ +/** + * Hey! Welcome to @chakra-ui/vue-next CPopover + * + * Popover is a non modal dialog that floats around a trigger + * + * @see Docs https://next.vue.chakra-ui.com/c-popover + * @see Source https://github.com/chakra-ui/chakra-ui-vue-next/blob/main/packages/c-popover/src/c-popover/c-popover.ts + * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2 + */ + +import { computed, defineComponent, PropType } from "vue" +import { PopoverProvider } from "./popover.context" +import { usePopover, UsePopoverProps } from "./use-popover" +import type * as Z from "@zag-js/types" +import type * as PO from "@zag-js/popover" +import type * as PP from "@zag-js/popper" + +type PopoverPropsContext = UsePopoverProps["context"] + +export type CPopoverProps = PopoverPropsContext + +const VuePopoverProps = { + autoFocus: { + type: Boolean as PropType, + }, + closeOnEsc: { + type: Boolean as PropType, + }, + closeOnInteractOutside: { + type: Boolean as PropType, + }, + defaultOpen: { + type: Boolean as PropType, + }, + getRootNode: { + type: Function as PropType, + }, + id: { + type: String as PropType, + }, + ids: { + type: Object as PropType, + }, + initialFocusEl: { + type: [Object, Function] as PropType, + }, + isOpen: { + type: Boolean as PropType, + }, + modal: { + type: Boolean as PropType, + }, + portalled: { + type: Boolean as PropType, + }, + positioning: { + type: Object as PropType, + }, +} + +export const CPopover = defineComponent({ + name: "CPopover", + props: VuePopoverProps, + emits: [ + "open-change", + "escape-key-down", + "pointer-down-outside", + "focus-outside", + "interact-outside", + ], + setup(props, { slots, emit }) { + const popoverProps = computed(() => ({ + context: props, + emit, + })) + + const api = usePopover(popoverProps.value) + + PopoverProvider(api) + + return () => slots.default?.() + }, +}) diff --git a/packages/c-popover/src/index.tsx b/packages/c-popover/src/index.tsx new file mode 100644 index 00000000..15d140af --- /dev/null +++ b/packages/c-popover/src/index.tsx @@ -0,0 +1,21 @@ +export { CPopover } from "./c-popover" +export { CPopoverContent, type CPopoverContentProps } from "./c-popover-content" +export { + CPopoverPositioner, + type CPopoverPositionerProps, +} from "./c-popover-positioner" +export { CPopoverTrigger } from "./c-popover-trigger" +export { CPopoverCloseTrigger } from "./c-popover-close-trigger" +export { CPopoverTitle, type CPopoverTitleProps } from "./c-popover-title" +export { CPopoverArrow } from "./c-popover-arrow" +export { + CPopoverDescription, + type CPopoverDescriptionProps, +} from "./c-popover-description" +export { CPopoverHeader, type CPopoverHeaderProps } from "./c-popover-header" +export { CPopoverBody, type CPopoverBodyProps } from "./c-popover-body" +export { CPopoverAnchor, type CPopoverAnchorProps } from "./c-popover-anchor" +export { usePopover } from "./use-popover" + +export type { CPopoverProps } from "./c-popover" +export type { UsePopoverProps, UsePopoverPropsContext } from "./use-popover" diff --git a/packages/c-popover/src/popover.context.ts b/packages/c-popover/src/popover.context.ts new file mode 100644 index 00000000..4ac709b6 --- /dev/null +++ b/packages/c-popover/src/popover.context.ts @@ -0,0 +1,15 @@ +import type { connect } from "@zag-js/popover" +import type { ComputedRef } from "vue" +import { createContext } from "@chakra-ui/vue-utils" +import type { UsePopoverReturn } from "./use-popover" + +export const [PopoverProvider, usePopoverContext] = createContext< + ComputedRef> +>({ + name: "CPopoverContext", + strict: true, + errorMessage: + "usePopoverContext: `context` is undefined. Seems you forgot to wrap Popover child components inside the `` component", +}) + +export type CPopoverContext = UsePopoverReturn diff --git a/packages/c-popover/src/use-popover.ts b/packages/c-popover/src/use-popover.ts new file mode 100644 index 00000000..074e54a4 --- /dev/null +++ b/packages/c-popover/src/use-popover.ts @@ -0,0 +1,73 @@ +import { connect, Context as PopoverContext, machine } from "@zag-js/popover" +import { normalizeProps, useMachine } from "@zag-js/vue" +import { computed, reactive, UnwrapRef, watch, watchEffect } from "vue" +import type { Optional } from "@chakra-ui/vue-utils" +import { useId } from "@chakra-ui/vue-composables" + +export interface UsePopoverPropsContext extends Optional { + /** + * Controls the open state of the the popover + * component. + * + * @default false + */ + isOpen?: boolean +} + +export interface UsePopoverProps { + context: UsePopoverPropsContext + emit: CallableFunction +} + +export function usePopover(props: UsePopoverProps) { + const { context, emit } = props + const popoverContext = reactive(context) + const id = useId() + + const [state, send] = useMachine( + machine({ + ...popoverContext, + id: id.value, + defaultOpen: context.defaultOpen, + onEscapeKeyDown(event) { + emit("escape-key-down", event) + }, + onFocusOutside(event) { + emit("focus-outside", event) + }, + onInteractOutside(event) { + emit("interact-outside", event) + }, + onOpenChange(event) { + emit("open-change", event) + }, + onPointerDownOutside(event) { + emit("pointer-down-outside", event) + }, + }) + ) + + const api = computed(() => connect(state.value, send, normalizeProps)) + + watch( + () => popoverContext.isOpen, + (isOpen) => { + if (isOpen == null) return + + if (isOpen && !state.value.matches("open")) { + api.value.open() + return + } else if (!isOpen && !state.value.matches("closed")) { + api.value.close() + return + } + }, + { + flush: "post", + } + ) + + return api +} + +export type UsePopoverReturn = ReturnType diff --git a/packages/c-popover/tests/c-popover.test.ts b/packages/c-popover/tests/c-popover.test.ts new file mode 100644 index 00000000..7eef61dd --- /dev/null +++ b/packages/c-popover/tests/c-popover.test.ts @@ -0,0 +1,7 @@ +import { render } from "../../test-utils/src" +import { CPopover } from "../src" + +it("should render properly", () => { + const { asFragment } = render(CPopover) + expect(asFragment()).toMatchSnapshot() +}) diff --git a/packages/c-popover/tsconfig.json b/packages/c-popover/tsconfig.json new file mode 100644 index 00000000..baa32841 --- /dev/null +++ b/packages/c-popover/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src", "./index.tsx"] +} \ No newline at end of file diff --git a/packages/c-popover/tsup.config.ts b/packages/c-popover/tsup.config.ts new file mode 100644 index 00000000..9a7cd043 --- /dev/null +++ b/packages/c-popover/tsup.config.ts @@ -0,0 +1,17 @@ +import { defineConfig } from "tsup" +import EsbuildPluginJSX from "unplugin-vue-jsx/esbuild" + +export default defineConfig({ + clean: true, + target: "es2019", + esbuildPlugins: [ + EsbuildPluginJSX({ + include: [/.[jt]sx?$/], + }) as any, + ], + metafile: true, + external: ["lodash.mergewith"], + format: ["esm", "cjs"], + entry: ["src/**/*.(ts|tsx)"], + keepNames: true, +}) diff --git a/packages/c-toast/examples/simple-toast.vue b/packages/c-toast/examples/simple-toast.vue index 4131d2c9..8dd0d382 100644 --- a/packages/c-toast/examples/simple-toast.vue +++ b/packages/c-toast/examples/simple-toast.vue @@ -15,7 +15,12 @@ + + diff --git a/packages/c-popover/src/c-popover-content.tsx b/packages/c-popover/src/c-popover-content.tsx index 77fbac47..7a2dede9 100644 --- a/packages/c-popover/src/c-popover-content.tsx +++ b/packages/c-popover/src/c-popover-content.tsx @@ -1,7 +1,12 @@ -import { defineComponent } from "vue" +import { Transition, computed, defineComponent, watch, watchEffect } from "vue" import { usePopoverContext } from "./popover.context" import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system" import { CPopoverPositioner } from "./c-popover-positioner" +import { CAnimatePresence, TransitionDefaults } from "@chakra-ui/c-motion" +import { MotionDirective, useMotion, useMotions } from "@vueuse/motion" +import { useId } from "@chakra-ui/vue-composables" +import { withDirectives } from "vue" +import { match } from "@chakra-ui/vue-utils" export interface CPopoverContentProps extends HTMLChakraProps<"div"> {} export const CPopoverContent = defineComponent({ @@ -10,9 +15,60 @@ export const CPopoverContent = defineComponent({ setup(_, { slots, attrs }) { const api = usePopoverContext() + const popoverContentProps = computed(() => { + const { ...rest } = { ...attrs, ...api.value.contentProps } + return { + ...rest, + ...match(api.value.trigger, { + hover: { + async onPointerenter(e: MouseEvent) { + const motions = useMotions() + const instance = motions[api.value.transitionId] + instance.stopTransitions() + api.value.open() + requestAnimationFrame(() => { + api.value.enterTransition(() => null) + }) + }, + async onPointerleave(e: MouseEvent) { + requestAnimationFrame(() => { + api.value.leaveTransition(() => api.value.close()) + }) + }, + }, + click: {}, + }), + } + }) + return () => ( - - {slots.default?.()} + + + {api.value.isOpen && + withDirectives( + + {slots.default?.()} + , + [ + [ + MotionDirective({ + initial: { scale: 0.95, opacity: 0 }, + enter: { + scale: 1, + transition: TransitionDefaults.enter, + opacity: 1, + }, + leave: { + scale: 0.95, + transition: TransitionDefaults.leave, + opacity: 0, + }, + }), + api.value.transitionId, + ], + ] + )} + ) }, diff --git a/packages/c-popover/src/c-popover-positioner.tsx b/packages/c-popover/src/c-popover-positioner.tsx index 4e0e5030..e89ec860 100644 --- a/packages/c-popover/src/c-popover-positioner.tsx +++ b/packages/c-popover/src/c-popover-positioner.tsx @@ -1,22 +1,22 @@ import { defineComponent } from "vue" import { usePopoverContext } from "./popover.context" import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system" -import { CMotion } from "@chakra-ui/c-motion" export interface CPopoverPositionerProps extends HTMLChakraProps<"div"> {} export const CPopoverPositioner = defineComponent({ name: "CPopoverPositioner", + inheritAttrs: false, setup(_, { slots, attrs }) { const api = usePopoverContext() - return () => ( - - - {api.value.isOpen && ( - {slots.default?.()} - )} - - - ) + return () => { + const { style, ...positionerProps } = api.value.positionerProps + const { opacity, ...styleProps } = style + return ( + + {slots.default?.()} + + ) + } }, }) diff --git a/packages/c-popover/src/c-popover-trigger.tsx b/packages/c-popover/src/c-popover-trigger.tsx index e43db5c3..3b9af36f 100644 --- a/packages/c-popover/src/c-popover-trigger.tsx +++ b/packages/c-popover/src/c-popover-trigger.tsx @@ -1,15 +1,49 @@ -import { defineComponent } from "vue" +import { computed, defineComponent, watchEffect } from "vue" import { usePopoverContext } from "./popover.context" -import { withSingleton } from "@chakra-ui/vue-utils" +import { match, withSingleton } from "@chakra-ui/vue-utils" export const CPopoverTrigger = defineComponent({ name: "CPopoverTrigger", setup(_, { slots, attrs }) { const api = usePopoverContext() + const popoverTriggerProps = computed(() => { + const { onClick, ...rest } = api.value.triggerProps + return { + ...rest, + ...match(api.value.trigger, { + click: { + async onClick(e: MouseEvent) { + if (api.value.isOpen) { + requestAnimationFrame(() => { + api.value.leaveTransition(() => onClick(e)) + }) + await api.value.wait(300) + } else { + onClick(e) + } + }, + }, + hover: { + async onPointerenter(e: MouseEvent) { + api.value.open() + requestAnimationFrame(() => { + api.value.enterTransition(() => null) + }) + }, + async onPointerleave(e: MouseEvent) { + requestAnimationFrame(() => { + api.value.leaveTransition(() => api.value.close()) + }) + }, + }, + }), + } + }) + return () => withSingleton(slots, "CPopoverTrigger", { - ...api.value.triggerProps, + ...popoverTriggerProps.value, ...attrs, }) }, diff --git a/packages/c-popover/src/c-popover.tsx b/packages/c-popover/src/c-popover.tsx index 7efc3505..5e540dfd 100644 --- a/packages/c-popover/src/c-popover.tsx +++ b/packages/c-popover/src/c-popover.tsx @@ -10,14 +10,20 @@ import { computed, defineComponent, PropType } from "vue" import { PopoverProvider } from "./popover.context" -import { usePopover, UsePopoverProps } from "./use-popover" -import type * as Z from "@zag-js/types" -import type * as PO from "@zag-js/popover" -import type * as PP from "@zag-js/popper" +import { + useDeferredDisclosure, + usePopover, + UsePopoverProps, +} from "./use-popover" +import type * as ZP from "@zag-js/popper" +import { useId } from "@chakra-ui/vue-composables" +import { useMotions } from "@vueuse/motion" type PopoverPropsContext = UsePopoverProps["context"] -export type CPopoverProps = PopoverPropsContext +export interface CPopoverProps extends PopoverPropsContext { + trigger: "click" | "hover" +} const VuePopoverProps = { autoFocus: { @@ -56,6 +62,14 @@ const VuePopoverProps = { positioning: { type: Object as PropType, }, + trigger: { + type: String as PropType, + default: "click", + }, +} + +function wait(delay: number) { + return new Promise((resolve) => setTimeout(resolve, delay)) } export const CPopover = defineComponent({ @@ -74,10 +88,42 @@ export const CPopover = defineComponent({ emit, })) + const transitionId = useId( + popoverProps.value.context.id, + "transition:popover:" + ) + + /** Handles exit transition */ + const leaveTransition = (done: VoidFunction) => { + const motions = useMotions() + const instance = motions[transitionId.value] + instance?.leave(() => { + done() + }) + } + + const enterTransition = async (done: VoidFunction) => { + const motions = useMotions() + const instance = motions[transitionId.value] + await instance.apply("enter") + done() + } + const api = usePopover(popoverProps.value) + const nativeIsOpen = computed(() => api.value.isOpen) - PopoverProvider(api) + const { isOpenDeferred } = useDeferredDisclosure(nativeIsOpen) + const popoverApi = computed(() => ({ + ...api.value, + deferredIsOpen: isOpenDeferred.value, + leaveTransition, + enterTransition, + wait, + transitionId: transitionId.value, + trigger: props.trigger, + })) + PopoverProvider(popoverApi) return () => slots.default?.() }, }) diff --git a/packages/c-popover/src/popover.context.ts b/packages/c-popover/src/popover.context.ts index 4ac709b6..f78ca37e 100644 --- a/packages/c-popover/src/popover.context.ts +++ b/packages/c-popover/src/popover.context.ts @@ -1,10 +1,19 @@ import type { connect } from "@zag-js/popover" import type { ComputedRef } from "vue" -import { createContext } from "@chakra-ui/vue-utils" +import { AnyFn, createContext } from "@chakra-ui/vue-utils" import type { UsePopoverReturn } from "./use-popover" export const [PopoverProvider, usePopoverContext] = createContext< - ComputedRef> + ComputedRef< + ReturnType & { + deferredIsOpen: boolean + leaveTransition: AnyFn + enterTransition: AnyFn + wait: AnyFn + transitionId: string + trigger: "click" | "hover" + } + > >({ name: "CPopoverContext", strict: true, diff --git a/packages/c-popover/src/use-popover.ts b/packages/c-popover/src/use-popover.ts index 074e54a4..43740761 100644 --- 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, UnwrapRef, watch, watchEffect } from "vue" +import { computed, reactive, Ref, ref, watch } from "vue" import type { Optional } from "@chakra-ui/vue-utils" import { useId } from "@chakra-ui/vue-composables" @@ -19,6 +19,34 @@ export interface UsePopoverProps { emit: CallableFunction } +function wait(delay: number) { + return new Promise((resolve) => setTimeout(resolve, delay)) +} + +export function useDeferredDisclosure( + isOpen: Ref, + delay: number = 200 +) { + const isOpenDeferred = ref(isOpen.value) + + watch( + () => isOpen.value, + async (value) => { + if (value) { + isOpenDeferred.value = true + } else { + await wait(delay) + isOpenDeferred.value = false + } + } + ) + + return { + isOpen, + isOpenDeferred, + } +} + export function usePopover(props: UsePopoverProps) { const { context, emit } = props const popoverContext = reactive(context) @@ -48,16 +76,21 @@ export function usePopover(props: UsePopoverProps) { ) const api = computed(() => connect(state.value, send, normalizeProps)) + const { isOpenDeferred } = useDeferredDisclosure( + computed(() => api.value.isOpen), + 0 + ) watch( () => popoverContext.isOpen, - (isOpen) => { + async (isOpen) => { if (isOpen == null) return if (isOpen && !state.value.matches("open")) { api.value.open() return } else if (!isOpen && !state.value.matches("closed")) { + await wait(500) api.value.close() return } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 67286edc..eb909bca 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -82,7 +82,7 @@ importers: '@vueuse/core': 4.9.1 '@vueuse/head': ^0.7.4 '@vueuse/integrations': ^4.8.1 - '@vueuse/motion': ^1.5.4 + '@vueuse/motion': ^1.6.0 '@vueuse/shared': ^9.11.1 aria-hidden: ^1.1.2 axe-core: ^4.1.2 @@ -481,7 +481,7 @@ importers: '@chakra-ui/vue-composables': workspace:* '@chakra-ui/vue-system': workspace:* '@chakra-ui/vue-utils': workspace:* - '@vueuse/motion': ^1.5.4 + '@vueuse/motion': ^1.6.0 '@zag-js/checkbox': 0.2.12 '@zag-js/vue': 0.2.10 vue: 3.2.47 @@ -687,7 +687,7 @@ importers: '@chakra-ui/vue-composables': workspace:* '@chakra-ui/vue-system': workspace:* '@chakra-ui/vue-utils': workspace:* - '@vueuse/motion': ^1.5.4 + '@vueuse/motion': ^1.6.0 aria-hidden: ^1.1.2 vue: 3.2.47 dependencies: @@ -714,7 +714,7 @@ importers: '@chakra-ui/vue-composables': workspace:* '@chakra-ui/vue-system': workspace:* '@chakra-ui/vue-utils': workspace:* - '@vueuse/motion': ^1.5.4 + '@vueuse/motion': ^1.6.0 '@vueuse/shared': ^9.11.1 vue: 3.2.47 dependencies: From 707149024c75116fa3afc6c28cb1e02bb95902fb Mon Sep 17 00:00:00 2001 From: codebender828 Date: Thu, 2 Mar 2023 03:58:25 +0800 Subject: [PATCH 05/14] fix: popover types --- packages/c-popover/src/c-popover.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/c-popover/src/c-popover.tsx b/packages/c-popover/src/c-popover.tsx index 5e540dfd..61b3252a 100644 --- a/packages/c-popover/src/c-popover.tsx +++ b/packages/c-popover/src/c-popover.tsx @@ -16,6 +16,7 @@ import { UsePopoverProps, } from "./use-popover" import type * as ZP from "@zag-js/popper" +import type * as ZT from "@zag-js/types" import { useId } from "@chakra-ui/vue-composables" import { useMotions } from "@vueuse/motion" From 280455c1bd24eabd0161cf4cd0248b40a44f5adc Mon Sep 17 00:00:00 2001 From: codebender828 Date: Sun, 5 Mar 2023 03:09:12 +0800 Subject: [PATCH 06/14] feat: popover transitions and styling --- @types/components.d.ts | 2 +- components.d.ts | 2 +- package.json | 3 +- packages/c-alert/package.json | 4 +- packages/c-avatar/package.json | 2 +- packages/c-breadcrumb/package.json | 2 +- packages/c-button/package.json | 2 +- packages/c-checkbox/package.json | 2 +- packages/c-close-button/package.json | 2 +- packages/c-code/package.json | 2 +- packages/c-color-mode/package.json | 2 +- .../c-color-mode/src/color-mode-provider.tsx | 2 +- packages/c-focus-lock/package.json | 2 +- packages/c-form-control/package.json | 2 +- packages/c-icon/package.json | 2 +- packages/c-image/package.json | 2 +- packages/c-input/package.json | 2 +- packages/c-media-query/package.json | 2 +- packages/c-menu/package.json | 2 +- packages/c-menu/src/index.tsx | 1 + packages/c-modal/package.json | 2 +- packages/c-motion/package.json | 2 +- packages/c-pin-input/package.json | 2 +- .../c-popover/examples/simple-popover.vue | 16 ++-- .../c-popover/examples/with-hover-trigger.vue | 20 +--- packages/c-popover/src/c-popover-arrow.tsx | 40 +++++++- packages/c-popover/src/c-popover-content.tsx | 94 +++++++++++++------ .../c-popover/src/c-popover-description.tsx | 11 ++- packages/c-popover/src/c-popover-footer.tsx | 22 +++++ packages/c-popover/src/c-popover-header.tsx | 2 - .../c-popover/src/c-popover-positioner.tsx | 11 ++- packages/c-popover/src/c-popover-title.tsx | 11 ++- packages/c-popover/src/c-popover-trigger.tsx | 3 + packages/c-popover/src/c-popover.tsx | 21 +++-- packages/c-popover/src/index.tsx | 1 + packages/c-popover/src/popover.context.ts | 3 + packages/c-popover/src/use-popover.ts | 8 +- packages/c-popper/package.json | 2 +- packages/c-portal/package.json | 2 +- packages/c-reset/package.json | 4 +- packages/c-scroll-lock/package.json | 4 +- packages/c-skip-nav/package.json | 4 +- packages/c-spinner/package.json | 2 +- packages/c-tag/package.json | 2 +- packages/c-theme-provider/package.json | 4 +- packages/c-visually-hidden/package.json | 4 +- packages/layout/package.json | 2 +- packages/styled/package.json | 2 +- packages/system/package.json | 2 +- packages/test-utils/package.json | 2 +- packages/utils/package.json | 2 +- packages/vue-a11y/package.json | 4 +- packages/vue-composables/package.json | 2 +- packages/vue/package.json | 2 +- 54 files changed, 231 insertions(+), 126 deletions(-) create mode 100644 packages/c-popover/src/c-popover-footer.tsx diff --git a/@types/components.d.ts b/@types/components.d.ts index f1ac083c..89df8dfe 100644 --- 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-02-27T18:36:28.117Z + * This file was generated on 2023-03-01T19:58:41.256Z */ import { ChakraProps, chakra } from "@chakra-ui/vue-system" diff --git a/components.d.ts b/components.d.ts index f1ac083c..89df8dfe 100644 --- 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-02-27T18:36:28.117Z + * This file was generated on 2023-03-01T19:58:41.256Z */ import { ChakraProps, chakra } from "@chakra-ui/vue-system" diff --git a/package.json b/package.json index 73b476e0..025e05a6 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ ] }, "scripts": { - "dev": "turbo run dev", + "dev": "concurrently \"pnpm turbo:dev\" \"pnpm playground:dev\"", + "turbo:dev": "turbo run dev", "clean": "pnpm -r --parallel run clean", "prebuild": "pnpm clean", "build": "turbo run build --filter=!./examples/* --filter=!{./packages/test-utils}", diff --git a/packages/c-alert/package.json b/packages/c-alert/package.json index e4026cc1..5f2d8571 100644 --- a/packages/c-alert/package.json +++ b/packages/c-alert/package.json @@ -21,7 +21,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { @@ -39,4 +39,4 @@ "devDependencies": { "vue": "3.2.47" } -} \ No newline at end of file +} diff --git a/packages/c-avatar/package.json b/packages/c-avatar/package.json index ba88370e..5a58aa80 100644 --- a/packages/c-avatar/package.json +++ b/packages/c-avatar/package.json @@ -26,7 +26,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-breadcrumb/package.json b/packages/c-breadcrumb/package.json index e6eed654..01904167 100644 --- a/packages/c-breadcrumb/package.json +++ b/packages/c-breadcrumb/package.json @@ -29,7 +29,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-button/package.json b/packages/c-button/package.json index d28be184..2f33d6fa 100644 --- a/packages/c-button/package.json +++ b/packages/c-button/package.json @@ -21,7 +21,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-checkbox/package.json b/packages/c-checkbox/package.json index 22476254..9e16df64 100644 --- a/packages/c-checkbox/package.json +++ b/packages/c-checkbox/package.json @@ -26,7 +26,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-close-button/package.json b/packages/c-close-button/package.json index 2176c2e3..6744234a 100644 --- a/packages/c-close-button/package.json +++ b/packages/c-close-button/package.json @@ -29,7 +29,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-code/package.json b/packages/c-code/package.json index eac52c28..d156d72a 100644 --- a/packages/c-code/package.json +++ b/packages/c-code/package.json @@ -29,7 +29,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-color-mode/package.json b/packages/c-color-mode/package.json index efbc4859..12757fa5 100644 --- a/packages/c-color-mode/package.json +++ b/packages/c-color-mode/package.json @@ -28,7 +28,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-color-mode/src/color-mode-provider.tsx b/packages/c-color-mode/src/color-mode-provider.tsx index f0bf0f43..04843397 100644 --- a/packages/c-color-mode/src/color-mode-provider.tsx +++ b/packages/c-color-mode/src/color-mode-provider.tsx @@ -156,7 +156,7 @@ export function setupColorModeContext( app.provide(AppColorModeContextSymbol, { colorMode: computed(() => colorMode.value), toggleColorMode, - forced: computed(() => false), + forced: false, }) } diff --git a/packages/c-focus-lock/package.json b/packages/c-focus-lock/package.json index c446dc75..acebdde2 100644 --- a/packages/c-focus-lock/package.json +++ b/packages/c-focus-lock/package.json @@ -29,7 +29,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-form-control/package.json b/packages/c-form-control/package.json index 6aa12bb7..2e9bf480 100644 --- a/packages/c-form-control/package.json +++ b/packages/c-form-control/package.json @@ -26,7 +26,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-icon/package.json b/packages/c-icon/package.json index 572b629f..8a8daae2 100644 --- a/packages/c-icon/package.json +++ b/packages/c-icon/package.json @@ -25,7 +25,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-image/package.json b/packages/c-image/package.json index 02f2278c..5d99e14d 100644 --- a/packages/c-image/package.json +++ b/packages/c-image/package.json @@ -26,7 +26,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-input/package.json b/packages/c-input/package.json index 5d9dfce2..1111f73b 100644 --- a/packages/c-input/package.json +++ b/packages/c-input/package.json @@ -26,7 +26,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-media-query/package.json b/packages/c-media-query/package.json index 803e5451..84adef7f 100644 --- a/packages/c-media-query/package.json +++ b/packages/c-media-query/package.json @@ -26,7 +26,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-menu/package.json b/packages/c-menu/package.json index 483c2ca1..2f103e7d 100644 --- a/packages/c-menu/package.json +++ b/packages/c-menu/package.json @@ -26,7 +26,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-menu/src/index.tsx b/packages/c-menu/src/index.tsx index e543b22e..b8d2f8f5 100644 --- a/packages/c-menu/src/index.tsx +++ b/packages/c-menu/src/index.tsx @@ -13,4 +13,5 @@ export { CSubMenuList, CSubMenuTrigger, } from "./nested-menu" + export { CMenuList } from "./c-menu-list" diff --git a/packages/c-modal/package.json b/packages/c-modal/package.json index b5ac88ab..8870fc8d 100644 --- a/packages/c-modal/package.json +++ b/packages/c-modal/package.json @@ -29,7 +29,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-motion/package.json b/packages/c-motion/package.json index ccad3d49..4676ae9a 100644 --- a/packages/c-motion/package.json +++ b/packages/c-motion/package.json @@ -29,7 +29,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-pin-input/package.json b/packages/c-pin-input/package.json index e2ebc3d8..7b9ad0c9 100644 --- a/packages/c-pin-input/package.json +++ b/packages/c-pin-input/package.json @@ -25,7 +25,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-popover/examples/simple-popover.vue b/packages/c-popover/examples/simple-popover.vue index c902ffbb..3e83822f 100644 --- a/packages/c-popover/examples/simple-popover.vue +++ b/packages/c-popover/examples/simple-popover.vue @@ -1,5 +1,5 @@ @@ -14,18 +15,15 @@ import { CButton } from "../../c-button/src" diff --git a/packages/c-popover/examples/with-hover-trigger.vue b/packages/c-popover/examples/with-hover-trigger.vue index 771cae8c..1ffaa099 100644 --- a/packages/c-popover/examples/with-hover-trigger.vue +++ b/packages/c-popover/examples/with-hover-trigger.vue @@ -1,5 +1,4 @@ diff --git a/packages/c-popover/src/c-popover-arrow.tsx b/packages/c-popover/src/c-popover-arrow.tsx index fc53b408..73468117 100644 --- a/packages/c-popover/src/c-popover-arrow.tsx +++ b/packages/c-popover/src/c-popover-arrow.tsx @@ -1,5 +1,5 @@ -import { defineComponent } from "vue" -import { usePopoverContext } from "./popover.context" +import { computed, defineComponent, watchEffect } from "vue" +import { usePopoverContext, useStyles } from "./popover.context" import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system" export interface CPopoverArrow extends HTMLChakraProps<"div"> {} @@ -8,9 +8,41 @@ export const CPopoverArrow = defineComponent({ setup(_, { slots, attrs }) { const api = usePopoverContext() + const styles = useStyles() + + const arrowBg = computed( + () => attrs.bg ?? attrs.bgColor ?? attrs.backgroundColor + ) + const arrowShadow = computed(() => attrs.shadow ?? attrs.boxShadow) + return () => ( - - + + {slots.default?.()} ) diff --git a/packages/c-popover/src/c-popover-content.tsx b/packages/c-popover/src/c-popover-content.tsx index 7a2dede9..404d4e8a 100644 --- a/packages/c-popover/src/c-popover-content.tsx +++ b/packages/c-popover/src/c-popover-content.tsx @@ -1,13 +1,36 @@ import { Transition, computed, defineComponent, watch, watchEffect } from "vue" -import { usePopoverContext } from "./popover.context" -import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system" +import { usePopoverContext, useStyles } from "./popover.context" +import { + type HTMLChakraProps, + type SystemStyleObject, + chakra, +} from "@chakra-ui/vue-system" import { CPopoverPositioner } from "./c-popover-positioner" -import { CAnimatePresence, TransitionDefaults } from "@chakra-ui/c-motion" -import { MotionDirective, useMotion, useMotions } from "@vueuse/motion" -import { useId } from "@chakra-ui/vue-composables" +import { TransitionDefaults } from "@chakra-ui/c-motion" +import { MotionDirective, useMotions } from "@vueuse/motion" import { withDirectives } from "vue" import { match } from "@chakra-ui/vue-utils" +const variants = { + backdrop: { + initial: { + opacity: 0, + scale: 1.1, + }, + animate: { opacity: 0.5, scale: 1 }, + exit: { opacity: 0, scale: 1.1 }, + }, + content: { + initial: { + opacity: 0, + scale: 1.005, + y: 10, + }, + animate: { opacity: 1, scale: 1, y: 0 }, + exit: { opacity: 0, scale: 1.005, y: 10 }, + }, +} + export interface CPopoverContentProps extends HTMLChakraProps<"div"> {} export const CPopoverContent = defineComponent({ name: "CPopoverContent", @@ -15,6 +38,14 @@ export const CPopoverContent = defineComponent({ setup(_, { slots, attrs }) { const api = usePopoverContext() + const styles = useStyles() + const contentStyles = computed(() => ({ + position: "relative", + display: "flex", + flexDirection: "column", + ...styles.value.content, + })) + const popoverContentProps = computed(() => { const { ...rest } = { ...attrs, ...api.value.contentProps } return { @@ -43,32 +74,33 @@ export const CPopoverContent = defineComponent({ return () => ( - - {api.value.isOpen && - withDirectives( - - {slots.default?.()} - , - [ - [ - MotionDirective({ - initial: { scale: 0.95, opacity: 0 }, - enter: { - scale: 1, - transition: TransitionDefaults.enter, - opacity: 1, - }, - leave: { - scale: 0.95, - transition: TransitionDefaults.leave, - opacity: 0, - }, - }), - api.value.transitionId, - ], - ] - )} - + {withDirectives( + + {slots.default?.()} + , + [ + [ + MotionDirective({ + initial: { scale: 0.95, opacity: 0 }, + enter: { + scale: 1, + transition: TransitionDefaults.enter, + opacity: 1, + }, + leave: { + scale: 0.95, + transition: TransitionDefaults.leave, + opacity: 0, + }, + }), + api.value.transitionId, + ], + ] + )} ) }, diff --git a/packages/c-popover/src/c-popover-description.tsx b/packages/c-popover/src/c-popover-description.tsx index 4a629287..cd63424f 100644 --- a/packages/c-popover/src/c-popover-description.tsx +++ b/packages/c-popover/src/c-popover-description.tsx @@ -1,5 +1,5 @@ import { defineComponent } from "vue" -import { usePopoverContext } from "./popover.context" +import { usePopoverContext, useStyles } from "./popover.context" import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system" export interface CPopoverDescriptionProps extends HTMLChakraProps<"div"> {} @@ -8,8 +8,15 @@ export const CPopoverDescription = defineComponent({ setup(_, { slots, attrs }) { const api = usePopoverContext() + const styles = useStyles() + return () => ( - + {slots.default?.()} ) diff --git a/packages/c-popover/src/c-popover-footer.tsx b/packages/c-popover/src/c-popover-footer.tsx new file mode 100644 index 00000000..1f33ac82 --- /dev/null +++ b/packages/c-popover/src/c-popover-footer.tsx @@ -0,0 +1,22 @@ +import { defineComponent } from "vue" +import { usePopoverContext, useStyles } from "./popover.context" +import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system" + +export interface CPopoverFooterProps extends HTMLChakraProps<"div"> {} +export const CPopoverFooter = defineComponent({ + name: "CPopoverFooter", + setup(_, { slots, attrs }) { + const api = usePopoverContext() + const styles = useStyles() + + return () => ( + + {slots.default?.()} + + ) + }, +}) diff --git a/packages/c-popover/src/c-popover-header.tsx b/packages/c-popover/src/c-popover-header.tsx index 687912fc..450ccddc 100644 --- a/packages/c-popover/src/c-popover-header.tsx +++ b/packages/c-popover/src/c-popover-header.tsx @@ -7,8 +7,6 @@ export interface CPopoverHeaderProps extends HTMLChakraProps<"div"> {} export const CPopoverHeader = defineComponent({ name: "CPopoverHeader", setup(_, { slots, attrs }) { - const api = usePopoverContext() - return () => {slots.default?.()} }, }) diff --git a/packages/c-popover/src/c-popover-positioner.tsx b/packages/c-popover/src/c-popover-positioner.tsx index e89ec860..3ba8cc47 100644 --- a/packages/c-popover/src/c-popover-positioner.tsx +++ b/packages/c-popover/src/c-popover-positioner.tsx @@ -1,5 +1,5 @@ import { defineComponent } from "vue" -import { usePopoverContext } from "./popover.context" +import { usePopoverContext, useStyles } from "./popover.context" import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system" export interface CPopoverPositionerProps extends HTMLChakraProps<"div"> {} @@ -9,11 +9,18 @@ export const CPopoverPositioner = defineComponent({ setup(_, { slots, attrs }) { const api = usePopoverContext() + const styles = useStyles() + return () => { const { style, ...positionerProps } = api.value.positionerProps const { opacity, ...styleProps } = style return ( - + {slots.default?.()} ) diff --git a/packages/c-popover/src/c-popover-title.tsx b/packages/c-popover/src/c-popover-title.tsx index 9a32436c..5d966c75 100644 --- a/packages/c-popover/src/c-popover-title.tsx +++ b/packages/c-popover/src/c-popover-title.tsx @@ -1,5 +1,5 @@ import { defineComponent } from "vue" -import { usePopoverContext } from "./popover.context" +import { usePopoverContext, useStyles } from "./popover.context" import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system" export interface CPopoverTitleProps extends HTMLChakraProps<"div"> {} @@ -8,8 +8,15 @@ export const CPopoverTitle = defineComponent({ setup(_, { slots, attrs }) { const api = usePopoverContext() + const styles = useStyles() + return () => ( - + {slots.default?.()} ) diff --git a/packages/c-popover/src/c-popover-trigger.tsx b/packages/c-popover/src/c-popover-trigger.tsx index 3b9af36f..fd290f0d 100644 --- a/packages/c-popover/src/c-popover-trigger.tsx +++ b/packages/c-popover/src/c-popover-trigger.tsx @@ -20,6 +20,9 @@ export const CPopoverTrigger = defineComponent({ }) await api.value.wait(300) } else { + requestAnimationFrame(() => { + api.value.enterTransition(() => null) + }) onClick(e) } }, diff --git a/packages/c-popover/src/c-popover.tsx b/packages/c-popover/src/c-popover.tsx index 61b3252a..b36d6085 100644 --- a/packages/c-popover/src/c-popover.tsx +++ b/packages/c-popover/src/c-popover.tsx @@ -8,8 +8,8 @@ * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2 */ -import { computed, defineComponent, PropType } from "vue" -import { PopoverProvider } from "./popover.context" +import { computed, defineComponent, mergeProps, PropType } from "vue" +import { PopoverProvider, PopoverStylesProvider } from "./popover.context" import { useDeferredDisclosure, usePopover, @@ -19,6 +19,7 @@ import type * as ZP from "@zag-js/popper" import type * as ZT from "@zag-js/types" import { useId } from "@chakra-ui/vue-composables" import { useMotions } from "@vueuse/motion" +import { useMultiStyleConfig } from "@chakra-ui/vue-system" type PopoverPropsContext = UsePopoverProps["context"] @@ -83,12 +84,16 @@ export const CPopover = defineComponent({ "focus-outside", "interact-outside", ], - setup(props, { slots, emit }) { + setup(props, { slots, attrs, emit }) { const popoverProps = computed(() => ({ context: props, emit, })) + const mergedProps = computed(() => mergeProps(props, attrs)) + + const styles = useMultiStyleConfig("Popover", mergedProps.value) + const transitionId = useId( popoverProps.value.context.id, "transition:popover:" @@ -103,11 +108,14 @@ export const CPopover = defineComponent({ }) } - const enterTransition = async (done: VoidFunction) => { + const enterTransition = (done: VoidFunction) => { const motions = useMotions() + console.log("motions", motions) const instance = motions[transitionId.value] - await instance.apply("enter") - done() + requestAnimationFrame(async () => { + await instance.apply("enter") + done() + }) } const api = usePopover(popoverProps.value) @@ -125,6 +133,7 @@ export const CPopover = defineComponent({ })) PopoverProvider(popoverApi) + PopoverStylesProvider(styles) return () => slots.default?.() }, }) diff --git a/packages/c-popover/src/index.tsx b/packages/c-popover/src/index.tsx index 15d140af..d7560699 100644 --- a/packages/c-popover/src/index.tsx +++ b/packages/c-popover/src/index.tsx @@ -13,6 +13,7 @@ export { type CPopoverDescriptionProps, } from "./c-popover-description" export { CPopoverHeader, type CPopoverHeaderProps } from "./c-popover-header" +export { CPopoverFooter, type CPopoverFooterProps } from "./c-popover-footer" export { CPopoverBody, type CPopoverBodyProps } from "./c-popover-body" export { CPopoverAnchor, type CPopoverAnchorProps } from "./c-popover-anchor" export { usePopover } from "./use-popover" diff --git a/packages/c-popover/src/popover.context.ts b/packages/c-popover/src/popover.context.ts index f78ca37e..84ee7057 100644 --- a/packages/c-popover/src/popover.context.ts +++ b/packages/c-popover/src/popover.context.ts @@ -1,6 +1,7 @@ import type { connect } from "@zag-js/popover" import type { ComputedRef } from "vue" import { AnyFn, createContext } from "@chakra-ui/vue-utils" +import { createStylesContext } from "@chakra-ui/vue-system" import type { UsePopoverReturn } from "./use-popover" export const [PopoverProvider, usePopoverContext] = createContext< @@ -22,3 +23,5 @@ export const [PopoverProvider, usePopoverContext] = createContext< }) export type CPopoverContext = UsePopoverReturn + +export const [PopoverStylesProvider, useStyles] = createStylesContext("Popover") diff --git a/packages/c-popover/src/use-popover.ts b/packages/c-popover/src/use-popover.ts index 43740761..1e9f3d6e 100644 --- a/packages/c-popover/src/use-popover.ts +++ b/packages/c-popover/src/use-popover.ts @@ -35,7 +35,7 @@ export function useDeferredDisclosure( if (value) { isOpenDeferred.value = true } else { - await wait(delay) + // await wait(delay) isOpenDeferred.value = false } } @@ -76,10 +76,6 @@ export function usePopover(props: UsePopoverProps) { ) const api = computed(() => connect(state.value, send, normalizeProps)) - const { isOpenDeferred } = useDeferredDisclosure( - computed(() => api.value.isOpen), - 0 - ) watch( () => popoverContext.isOpen, @@ -96,7 +92,7 @@ export function usePopover(props: UsePopoverProps) { } }, { - flush: "post", + flush: "pre", } ) diff --git a/packages/c-popper/package.json b/packages/c-popper/package.json index 00d788d4..91b7fa8f 100644 --- a/packages/c-popper/package.json +++ b/packages/c-popper/package.json @@ -29,7 +29,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup --dts-only" }, "dependencies": { diff --git a/packages/c-portal/package.json b/packages/c-portal/package.json index 12b74406..5666db70 100644 --- a/packages/c-portal/package.json +++ b/packages/c-portal/package.json @@ -29,7 +29,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-reset/package.json b/packages/c-reset/package.json index 2c5ba32a..c0c4a6fe 100644 --- a/packages/c-reset/package.json +++ b/packages/c-reset/package.json @@ -25,7 +25,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { @@ -40,4 +40,4 @@ "publishConfig": { "access": "public" } -} \ No newline at end of file +} diff --git a/packages/c-scroll-lock/package.json b/packages/c-scroll-lock/package.json index 94e528b4..41fc765d 100644 --- a/packages/c-scroll-lock/package.json +++ b/packages/c-scroll-lock/package.json @@ -29,7 +29,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { @@ -45,4 +45,4 @@ "peerDependencies": { "vue": "3.2.47" } -} \ No newline at end of file +} diff --git a/packages/c-skip-nav/package.json b/packages/c-skip-nav/package.json index abededba..7bc75898 100644 --- a/packages/c-skip-nav/package.json +++ b/packages/c-skip-nav/package.json @@ -26,7 +26,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { @@ -43,4 +43,4 @@ "publishConfig": { "access": "public" } -} \ No newline at end of file +} diff --git a/packages/c-spinner/package.json b/packages/c-spinner/package.json index cc0d0541..d92e344d 100644 --- a/packages/c-spinner/package.json +++ b/packages/c-spinner/package.json @@ -29,7 +29,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-tag/package.json b/packages/c-tag/package.json index 496bc607..6f33eb1f 100644 --- a/packages/c-tag/package.json +++ b/packages/c-tag/package.json @@ -26,7 +26,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/c-theme-provider/package.json b/packages/c-theme-provider/package.json index 503a9dfa..a3046687 100644 --- a/packages/c-theme-provider/package.json +++ b/packages/c-theme-provider/package.json @@ -21,7 +21,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { @@ -37,4 +37,4 @@ "publishConfig": { "access": "public" } -} \ No newline at end of file +} diff --git a/packages/c-visually-hidden/package.json b/packages/c-visually-hidden/package.json index 0992617f..16e846d6 100644 --- a/packages/c-visually-hidden/package.json +++ b/packages/c-visually-hidden/package.json @@ -29,7 +29,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { @@ -41,4 +41,4 @@ "devDependencies": { "@emotion/css": "^11.10.5" } -} \ No newline at end of file +} diff --git a/packages/layout/package.json b/packages/layout/package.json index bd53d34f..bf11ef9c 100644 --- a/packages/layout/package.json +++ b/packages/layout/package.json @@ -29,7 +29,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/styled/package.json b/packages/styled/package.json index 57bb5801..b5ee5368 100644 --- a/packages/styled/package.json +++ b/packages/styled/package.json @@ -21,7 +21,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/system/package.json b/packages/system/package.json index 03aea672..d0a48eb2 100644 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -21,7 +21,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json index 51bc7cb1..0e581ea7 100644 --- a/packages/test-utils/package.json +++ b/packages/test-utils/package.json @@ -21,7 +21,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/utils/package.json b/packages/utils/package.json index 193cca35..9a7dc38a 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -18,7 +18,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/vue-a11y/package.json b/packages/vue-a11y/package.json index 1a609f88..b4cc2875 100644 --- a/packages/vue-a11y/package.json +++ b/packages/vue-a11y/package.json @@ -29,7 +29,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { @@ -43,4 +43,4 @@ "peerDependencies": { "vue": "3.2.47" } -} \ No newline at end of file +} diff --git a/packages/vue-composables/package.json b/packages/vue-composables/package.json index 7f678f39..56d6fd8b 100644 --- a/packages/vue-composables/package.json +++ b/packages/vue-composables/package.json @@ -29,7 +29,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { diff --git a/packages/vue/package.json b/packages/vue/package.json index 8d71764a..6b2783bc 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -22,7 +22,7 @@ "build": "tsup && pnpm build:types", "build:fast": "tsup", "types:check": "tsc --noEmit", - "dev": "tsup --watch", + "dev": "concurrently 'tsup --watch' 'tsup src --dts-only --watch'", "build:types": "tsup src --dts-only" }, "dependencies": { From 3de8c75192c898f006b281b9a131d7be7e88a5d4 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Sun, 5 Mar 2023 04:53:18 +0800 Subject: [PATCH 07/14] fix: popover initial transition state --- .../c-popover/examples/simple-popover.vue | 8 +++- packages/c-popover/examples/with-portal.vue | 40 ++++++++++++++++ packages/c-popover/package.json | 2 + .../c-popover/src/c-popover-close-button.tsx | 35 ++++++++++++++ packages/c-popover/src/c-popover-content.tsx | 48 ++++--------------- packages/c-popover/src/c-popover-trigger.tsx | 2 +- packages/c-popover/src/c-popover.tsx | 17 ++----- packages/c-popover/src/index.tsx | 4 ++ packages/c-popover/src/popover.context.ts | 2 +- packages/c-popover/src/popover.transitions.ts | 16 +++++++ packages/c-popover/src/popover.utils.ts | 3 ++ packages/c-popover/src/use-popover.ts | 36 ++++---------- 12 files changed, 131 insertions(+), 82 deletions(-) create mode 100644 packages/c-popover/examples/with-portal.vue create mode 100644 packages/c-popover/src/c-popover-close-button.tsx create mode 100644 packages/c-popover/src/popover.transitions.ts create mode 100644 packages/c-popover/src/popover.utils.ts diff --git a/packages/c-popover/examples/simple-popover.vue b/packages/c-popover/examples/simple-popover.vue index 3e83822f..6c0389d3 100644 --- a/packages/c-popover/examples/simple-popover.vue +++ b/packages/c-popover/examples/simple-popover.vue @@ -13,9 +13,13 @@ import { CButton } from "../../c-button/src"