chore(popover): more storybook and test add (#393)

* refactor: popover props and more story * chore: add boundary story * chore: fix popper click * chore: fix lint * fix: content modal * chore: update * fix: ownerDocument * feat: add more stories * fix: slots * fix: dismissable-layer * chore: add more stories * chore: lint * feat: add tests * fix: lint issues --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
oku-ui · Sep 30, 2023 · cfc2fd8 · cfc2fd8
1 parent 70f146c
commit cfc2fd8
Show file tree

Hide file tree

Showing 37 changed files with 4,095 additions and 500 deletions.
diff --git a/nx.json b/nx.json
@@ -15,6 +15,9 @@
     "build": {
       "dependsOn": [
         "^build"
+      ],
+      "outputs": [
+        "{projectRoot}/dist"
       ]
     },
     "clean": {

diff --git a/packages/components/popover/src/index.ts b/packages/components/popover/src/index.ts
@@ -2,72 +2,63 @@ import type { } from '@floating-ui/vue'
 
 export {
   OkuPopover,
-  createPopoverScope,
-  popoverProps,
-} from './popover'
-
-export type {
-  PopoverEmits,
-  PopoverProps,
 } from './popover'
 
 export {
   OkuPopoverAnchor,
-  popoverAnchorProps,
-} from './popoverAnchor'
-
-export type {
-  PopoverAnchorElement,
-  PopoverAnchorNaviteElement,
-  PopoverAnchorProps,
 } from './popoverAnchor'
 
 export {
   OkuPopoverTrigger,
-  popoverTriggerProps,
-} from './popoverTrigger'
-
-export type {
-  PopoverTriggerNaviteElement,
-  PopoverTriggerEmits,
-  PopoverTriggerProps,
 } from './popoverTrigger'
 
 export {
   OkuPopoverPortal,
-  popoverPortalProps,
-} from './popoverPortal'
-
-export type {
-  PopoverPortalProps,
 } from './popoverPortal'
 
 export {
   OkuPopoverContent,
-  popoverContentProps,
-} from './popoverContent'
-
-export type {
-  PopoverContentProps,
 } from './popoverContent'
 
 export {
   OkuPopoverClose,
 } from './popoverClose'
 
-export type {
-  PopoverCloseNaviteElement,
-  PopoverCloseElement,
-  PopoverCloseEmits,
-} from './popoverClose'
-
 export {
   OkuPopoverArrow,
-  popoverArrowProps,
 } from './popoverArrow'
 
 export type {
   PopoverArrowProps,
   PopoverArrowElement,
   PopoverArrowNaviteElement,
-} from './popoverArrow'
+
+  PopoverCloseNaviteElement,
+  PopoverCloseElement,
+  PopoverCloseEmits,
+
+  PopoverPortalProps,
+
+  PopoverTriggerNaviteElement,
+  PopoverTriggerEmits,
+  PopoverTriggerProps,
+
+  PopoverContentProps,
+
+  PopoverAnchorElement,
+  PopoverAnchorNaviteElement,
+  PopoverAnchorProps,
+
+  PopoverEmits,
+  PopoverProps,
+} from './props'
+
+export {
+  popoverArrowProps,
+  popoverTriggerProps,
+  popoverContentProps,
+  popoverAnchorProps,
+  createPopoverScope,
+  popoverProps,
+  popoverPortalProps,
+} from './props'
diff --git a/packages/components/popover/src/popover.ts b/packages/components/popover/src/popover.ts
@@ -1,81 +1,13 @@
-import type { PropType, Ref } from 'vue'
 import { computed, defineComponent, h, ref, toRefs, useModel } from 'vue'
-import { primitiveProps } from '@oku-ui/primitive'
 import { useControllable, useId } from '@oku-ui/use-composable'
-import { createProvideScope } from '@oku-ui/provide'
-import { OkuPopper, createPopperScope } from '@oku-ui/popper'
-import { scopePopoverProps } from './utils'
-
-const POPOVER_NAME = 'OkuPopover'
-
-export const [createPopoverProvide, createPopoverScope] = createProvideScope(POPOVER_NAME, [
-  createPopperScope,
-])
-
-export const usePopperScope = createPopperScope()
-
-type PopoverProvideValue = {
-  triggerRef: Ref<HTMLButtonElement | null>
-  contentId: Ref<string>
-  open: Ref<boolean>
-  onOpenChange(open: boolean): void
-  onOpenToggle(): void
-  hasCustomAnchor: Ref<boolean>
-  onCustomAnchorAdd(): void
-  onCustomAnchorRemove(): void
-  modal: Ref<boolean>
-}
-
-const [popoverProvide, usePopoverInject]
-  = createPopoverProvide<PopoverProvideValue>(POPOVER_NAME)
-
-export {
-  usePopoverInject,
-}
-
-export interface PopoverProps {
-  open?: boolean
-  defaultOpen?: boolean
-  modal?: boolean
-}
-
-export interface PopoverEmits {
-  'openChange': [open: boolean]
-}
-
-export const popoverProps = {
-  props: {
-    modelValue: {
-      type: [Boolean, undefined] as PropType<boolean | undefined>,
-      default: undefined,
-    },
-    open: {
-      type: Boolean,
-      default: undefined,
-    },
-    defaultOpen: {
-      type: Boolean,
-      default: undefined,
-    },
-    modal: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    // eslint-disable-next-line unused-imports/no-unused-vars
-    'openChange': (open: boolean) => true,
-    // eslint-disable-next-line unused-imports/no-unused-vars
-    'update:modelValue': (open: boolean) => true,
-  },
-}
+import { OkuPopper } from '@oku-ui/popper'
+import { POPOVER_NAME, popoverProps, popoverProvide, scopePopoverProps, usePopperScope } from './props'
 
 const popover = defineComponent({
   name: POPOVER_NAME,
   inheritAttrs: false,
   props: {
     ...popoverProps.props,
-    ...primitiveProps,
     ...scopePopoverProps,
   },
   emits: popoverProps.emits,
@@ -94,14 +26,16 @@ const popover = defineComponent({
     const hasCustomAnchor = ref(false)
 
     const modelValue = useModel(props, 'modelValue')
-    const proxyChecked = computed({
-      get: () => modelValue.value !== undefined
-        ? modelValue.value
-        : openProp.value !== undefined
-          ? openProp.value
-          : undefined,
-      set: () => {
-      },
+
+    const proxyChecked = computed(() => {
+      if (modelValue.value !== undefined)
+        return modelValue.value
+
+      else if (openProp.value !== undefined)
+        return openProp.value
+
+      else
+        return undefined
     })
 
     const { state, updateValue } = useControllable({

diff --git a/packages/components/popover/src/popoverAnchor.ts b/packages/components/popover/src/popoverAnchor.ts
@@ -1,33 +1,15 @@
 import { defineComponent, h, mergeProps, reactive, toRefs, watchEffect } from 'vue'
-import { primitiveProps } from '@oku-ui/primitive'
 import { reactiveOmit, useForwardRef } from '@oku-ui/use-composable'
-import { OkuPopperAnchor, popperAnchorProps } from '@oku-ui/popper'
-import type { PopperAnchorElement, PopperAnchorNaviteElement, PopperAnchorProps } from '@oku-ui/popper'
-import { scopePopoverProps } from './utils'
-import { usePopoverInject, usePopperScope } from './popover'
+import { OkuPopperAnchor } from '@oku-ui/popper'
 
-export type PopoverAnchorNaviteElement = PopperAnchorNaviteElement
-export type PopoverAnchorElement = PopperAnchorElement
-
-export interface PopoverAnchorProps extends PopperAnchorProps { }
-
-export const popoverAnchorProps = {
-  props: {
-    ...popperAnchorProps.props,
-  },
-  emits: {
-    ...popperAnchorProps.emits,
-  },
-}
-
-const ANCHOR_NAME = 'OkuPopoverAnchor'
+import type { PopoverAnchorNaviteElement } from './props'
+import { ANCHOR_NAME, popoverAnchorProps, scopePopoverProps, usePopoverInject, usePopperScope } from './props'
 
 const popoverAnchor = defineComponent({
   name: ANCHOR_NAME,
   inheritAttrs: false,
   props: {
     ...popoverAnchorProps.props,
-    ...primitiveProps,
     ...scopePopoverProps,
   },
   emits: popoverAnchorProps.emits,

diff --git a/packages/components/popover/src/popoverArrow.ts b/packages/components/popover/src/popoverArrow.ts
@@ -1,31 +1,13 @@
 import { defineComponent, h, mergeProps, reactive, toRefs } from 'vue'
-import { primitiveProps } from '@oku-ui/primitive'
 import { reactiveOmit, useForwardRef } from '@oku-ui/use-composable'
-import { OkuPopperArrow, type PopperArrowElement, type PopperArrowNaviteElement, type PopperArrowProps, popperAnchorProps } from '@oku-ui/popper'
-import { scopePopoverProps } from './utils'
-import { usePopperScope } from './popover'
-
-export type PopoverArrowNaviteElement = PopperArrowNaviteElement
-export type PopoverArrowElement = PopperArrowElement
-
-export interface PopoverArrowProps extends PopperArrowProps { }
-
-export const popoverArrowProps = {
-  props: {
-    ...popperAnchorProps.props,
-  },
-  emits: {
-    ...popperAnchorProps.emits,
-  },
-}
-
-const ARROW_NAME = 'PopoverArrow'
+import { OkuPopperArrow } from '@oku-ui/popper'
+import type { PopoverArrowNaviteElement } from './props'
+import { ARROW_NAME, popoverArrowProps, scopePopoverProps, usePopperScope } from './props'
 
 const popoverArrow = defineComponent({
   name: ARROW_NAME,
   inheritAttrs: false,
   props: {
-    ...primitiveProps,
     ...popoverArrowProps.props,
     ...scopePopoverProps,
   },

diff --git a/packages/components/popover/src/popoverClose.ts b/packages/components/popover/src/popoverClose.ts
@@ -1,37 +1,16 @@
 import { defineComponent, h, mergeProps, reactive, toRefs } from 'vue'
-import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
-import { Primitive, primitiveProps } from '@oku-ui/primitive'
+import { Primitive } from '@oku-ui/primitive'
 import { reactiveOmit, useForwardRef } from '@oku-ui/use-composable'
 import { composeEventHandlers } from '@oku-ui/utils'
-import { scopePopoverProps } from './utils'
-import { usePopoverInject } from './popover'
-
-export type PopoverCloseNaviteElement = OkuElement<'button'>
-export type PopoverCloseElement = HTMLButtonElement
-
-export interface PopoverCloseProps extends PrimitiveProps { }
-
-export type PopoverCloseEmits = {
-  click: [event: MouseEvent]
-}
-
-export const popoverArrowProps = {
-  props: {
-    ...primitiveProps,
-  },
-  emits: {
-    // eslint-disable-next-line unused-imports/no-unused-vars
-    click: (event: MouseEvent) => true,
-  },
-}
-
-const CLOSE_NAME = 'OkuPopoverClose'
+import type { PopoverCloseEmits, PopoverCloseNaviteElement } from './props'
+import { CLOSE_NAME, popoverCloseProps, scopePopoverProps, usePopoverInject } from './props'
 
 const popoverClose = defineComponent({
   name: CLOSE_NAME,
   inheritAttrs: false,
   props: {
     ...scopePopoverProps,
+    ...popoverCloseProps.props,
   },
   setup(props, { attrs, slots, emit }) {
     const { scopeOkuPopover, ...closeProps } = toRefs(props)

diff --git a/packages/components/popover/src/popoverContent.ts b/packages/components/popover/src/popoverContent.ts
@@ -1,46 +1,15 @@
-import type { PropType } from 'vue'
 import { computed, defineComponent, h, mergeProps, reactive, toRefs } from 'vue'
-import { primitiveProps } from '@oku-ui/primitive'
 import { reactiveOmit, useForwardRef } from '@oku-ui/use-composable'
 import { OkuPresence } from '@oku-ui/presence'
-import { scopePopoverProps } from './utils'
-import { usePortalInject } from './popoverPortal'
-import { usePopoverInject } from './popover'
-import type { PopoverContentTypeProps } from './popoverContentModal'
-import { OkuPopoverContentModal, popoverContentTypeProps } from './popoverContentModal'
+import { CONTENT_NAME, popoverContentProps, scopePopoverProps, usePopoverInject, usePortalInject } from './props'
+import { OkuPopoverContentModal } from './popoverContentModal'
 import { OkuPopoverContentNonModal } from './popoverContentNonModal'
 
-export const CONTENT_NAME = 'OkuPopoverContent'
-
-// TODO: PopoverContentTypeProps
-
-export interface PopoverContentProps extends PopoverContentTypeProps {
-  /**
-   * Used to force mounting when more control is needed. Useful when
-   * controlling animation with React animation libraries.
-   */
-  forceMount?: true
-}
-
-export const popoverContentProps = {
-  props: {
-    forceMount: {
-      type: Boolean as PropType<true | undefined>,
-      default: undefined,
-    },
-    ...popoverContentTypeProps.props,
-  },
-  emits: {
-    ...popoverContentTypeProps.emits,
-  },
-}
-
 const popoverContent = defineComponent({
   name: CONTENT_NAME,
   inheritAttrs: false,
   props: {
     ...popoverContentProps.props,
-    ...primitiveProps,
     ...scopePopoverProps,
   },
   emits: popoverContentProps.emits,
@@ -55,7 +24,7 @@ const popoverContent = defineComponent({
     const forwardedRef = useForwardRef()
 
     return () => h(OkuPresence, {
-      present: computed(() => forceMount.value || inject.open.value).value,
+      present: forceMount.value || inject.open.value,
     }, {
       default: () => inject.modal.value
         ? h(OkuPopoverContentModal, {