fix: struct primitives (#280)

.eslintrc

@@ -4,5 +4,15 @@
   "extends": ["custom", "plugin:storybook/recommended"],
   "rules": {
     "vue/one-component-per-file": "off"
-  }
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/stories/*.vue"
+      ],
+      "rules": {
+        "no-console": "off"
+      }
+    }
+  ]
 }

.storybook/DocsContainer.tsx

@@ -6,7 +6,6 @@ import { useDarkMode } from 'storybook-dark-mode';
 export const DocsContainer = (
     props: PropsWithChildren<BaseContainerProps>
 ) => {
-    console.log(props.children)
     const dark = useDarkMode();
     return (
         <BaseContainer

package.json

@@ -2,7 +2,7 @@
   "name": "primitives",
   "type": "module",
   "version": "0.3.0",
-  "packageManager": "pnpm@8.6.6",
+  "packageManager": "pnpm@8.6.9",
   "repository": "oku-ui/primitives",
   "engines": {
     "node": ">=18"
@@ -43,6 +43,7 @@
     "@oku-ui/checkbox": "workspace:^",
     "@oku-ui/collapsible": "workspace:^",
     "@oku-ui/collection": "workspace:^",
+    "@oku-ui/direction": "workspace:^",
     "@oku-ui/label": "workspace:^",
     "@oku-ui/popper": "workspace:^",
     "@oku-ui/presence": "workspace:^",

packages/components/arrow/src/arrow.ts

@@ -1,6 +1,6 @@
 import { cloneVNode, defineComponent, h } from 'vue'
 import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
-import { Primitive } from '@oku-ui/primitive'
+import { Primitive, PrimitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 
 type ArrowElement = ElementType<'svg'>
@@ -14,10 +14,7 @@ const arrow = defineComponent({
   name: NAME,
   inheritAttrs: false,
   props: {
-    asChild: {
-      type: Boolean,
-      default: false,
-    },
+    ...PrimitiveProps,
   },
   setup(props, { attrs, slots }) {
     const forwardedRef = useForwardRef()

packages/components/arrow/src/stories/ArrowDemo.vue

@@ -14,7 +14,6 @@ withDefaults(defineProps<OkuArrowProps>(), {
 
 const arrowRef = ref<InstanceArrowType>()
 onMounted(() => {
-  // eslint-disable-next-line no-console
   console.log(arrowRef.value?.$el)
 })
 const alert = () => window.alert('clicked')

packages/components/aspect-ratio/src/aspect-ratio.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
-import { Primitive } from '@oku-ui/primitive'
+import { Primitive, PrimitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 
 interface AspectRatioProps extends IPrimitiveProps {
@@ -20,6 +20,7 @@ const AspectRatio = defineComponent({
       type: Number,
       default: 1 / 1,
     },
+    ...PrimitiveProps,
   },
   setup(props, { attrs, slots }) {
     const { style, ...aspectRatioProps } = attrs as AspectRatioElement
@@ -49,6 +50,7 @@ const AspectRatio = defineComponent({
               bottom: 0,
               left: 0,
             },
+            asChild: props.asChild,
           },
           {
             default: () => slots.default?.(),

packages/components/aspect-ratio/src/stories/AspectRatioDemo.vue

@@ -17,7 +17,6 @@ withDefaults(defineProps<IAspectRatioProps>(), {
 
 const root = ref<InstanceAspectRatioType>()
 onMounted(() => {
-  // eslint-disable-next-line no-console
   console.log(root.value?.$el)
 })
 </script>

packages/components/avatar/src/avatar.ts

@@ -1,9 +1,8 @@
-import type { PropType } from 'vue'
 import { defineComponent, h, ref } from 'vue'
 import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'
 import type { Scope } from '@oku-ui/provide'
-import { createProvideScope } from '@oku-ui/provide'
+import { ScopePropObject, createProvideScope } from '@oku-ui/provide'
 import { useForwardRef } from '@oku-ui/use-composable'
 
 const AVATAR_NAME = 'Avatar'
@@ -30,8 +29,7 @@ const Avatar = defineComponent({
   inheritAttrs: false,
   props: {
     scopeAvatar: {
-      type: Object as unknown as PropType<Scope>,
-      required: false,
+      ...ScopePropObject,
     },
   },
   setup(props, { attrs, slots }) {

packages/components/avatar/src/avatarFallback.ts

@@ -1,8 +1,7 @@
-import type { PropType } from 'vue'
 import { defineComponent, h, onMounted, ref, watchEffect } from 'vue'
 import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'
-import type { Scope } from '@oku-ui/provide'
+import { ScopePropObject } from '@oku-ui/provide'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { useAvatarInject } from './avatar'
 
@@ -24,8 +23,7 @@ const AvatarFallback = defineComponent({
       required: false,
     },
     scopeAvatar: {
-      type: Object as unknown as PropType<Scope>,
-      required: false,
+      ...ScopePropObject,
     },
   },
   setup(props, { attrs, slots }) {
@@ -54,7 +52,7 @@ const AvatarFallback = defineComponent({
     })
 
     const originalReturn = () => {
-      return (canRender.value && (provide.value.imageLoadingStatus !== 'loaded'))
+      return (canRender.value && (provide.imageLoadingStatus !== 'loaded'))
         ? h(
           Primitive.span, {
             ...fallbackProps,

packages/components/avatar/src/avatarImage.ts

@@ -47,7 +47,7 @@ const AvatarImage = defineComponent({
 
     const handleLoadingStatusChange = useCallbackRef((status: ImageLoadingStatus) => {
       props.onLoadingStatusChange(status)
-      inject.value.onImageLoadingStatusChange(status)
+      inject.onImageLoadingStatusChange(status)
     })
 
     onMounted(() => {

packages/components/checkbox/src/checkbox.ts

@@ -1,4 +1,4 @@
-import { createProvideScope } from '@oku-ui/provide'
+import { ScopePropObject, createProvideScope } from '@oku-ui/provide'
 import type { PropType, Ref } from 'vue'
 import { computed, defineComponent, h, ref, toRefs, watchEffect } from 'vue'
 
@@ -14,7 +14,7 @@ import { OkuBubbleInput } from './bubbleInput'
 
 const CHECKBOX_NAME = 'OkuCheckbox'
 
-const [createCheckboxProvider, _createCheckboxScope] = createProvideScope(CHECKBOX_NAME)
+const [createCheckboxProvider, createCheckboxScope] = createProvideScope(CHECKBOX_NAME)
 
 type CheckboxInjectValue = {
   state: Ref<CheckedState>
@@ -62,14 +62,12 @@ const Checkbox = defineComponent({
       default: undefined,
     },
     scopeCheckbox: {
-      type: Object as unknown as PropType<Scope>,
-      required: false,
-      default: undefined,
+      ...ScopePropObject,
     },
   },
   emits: ['update:checked', 'update:modelValue'],
   setup(props, { attrs, slots, emit }) {
-    const { checked: checkedProp, scopeCheckbox, defaultChecked, required } = toRefs(props)
+    const { checked: checkedProp, defaultChecked, required } = toRefs(props)
 
     const buttonRef = ref<ComponentPublicInstanceRef<HTMLButtonElement> | null>(null)
     const forwardedRef = useForwardRef()
@@ -109,7 +107,7 @@ const Checkbox = defineComponent({
     })
 
     CheckboxProvider({
-      scope: scopeCheckbox.value as Scope,
+      scope: props.scopeCheckbox,
       state,
       disabled: disabled as boolean,
     })
@@ -189,6 +187,7 @@ const OkuCheckbox = Checkbox as typeof Checkbox & (new () => { $props: _OkuCheck
 
 export {
   OkuCheckbox,
+  createCheckboxScope,
 }
 
 export type {

packages/components/checkbox/src/checkboxIndicator.ts

@@ -1,12 +1,11 @@
-import type { PropType } from 'vue'
 import { Transition, defineComponent, h, toRefs } from 'vue'
 
 import { useForwardRef } from '@oku-ui/use-composable'
 import { Primitive } from '@oku-ui/primitive'
 
 import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
 
-import type { Scope } from '@oku-ui/provide'
+import { ScopePropObject } from '@oku-ui/provide'
 import { getState, isIndeterminate } from './utils'
 import { useCheckboxInject } from './checkbox'
 
@@ -24,25 +23,24 @@ const CheckboxIndicator = defineComponent({
   components: { Transition },
   props: {
     scopeCheckbox: {
-      type: Object as unknown as PropType<Scope>,
-      required: false,
+      ...ScopePropObject,
     },
     forceMount: Boolean,
   },
   setup(props, { attrs, slots }) {
-    const { scopeCheckbox, forceMount } = toRefs(props)
+    const { forceMount } = toRefs(props)
     const { ...indicatorProps } = attrs as CheckboxIndicatorElement
 
     const forwardedRef = useForwardRef()
 
-    const context = useCheckboxInject(INDICATOR_NAME, scopeCheckbox.value)
+    const context = useCheckboxInject(INDICATOR_NAME, props.scopeCheckbox)
 
     const originalReturn = () => h(Transition, {}, {
-      default: () => (forceMount.value || isIndeterminate(context.value.state.value) || context.value.state.value === true)
+      default: () => (forceMount.value || isIndeterminate(context.state.value) || context.state.value === true)
         ? h(Primitive.span, {
           'ref': forwardedRef,
-          'data-state': getState(context.value.state.value),
-          'data-disabled': context.value.disabled ? '' : undefined,
+          'data-state': getState(context.state.value),
+          'data-disabled': context.disabled ? '' : undefined,
           ...indicatorProps,
           'style': { pointerEvents: 'none', ...attrs.style as any },
         },

packages/components/checkbox/src/index.ts

@@ -1,4 +1,7 @@
-export { OkuCheckbox } from './checkbox'
+export {
+  OkuCheckbox,
+  createCheckboxScope,
+} from './checkbox'
 
 export type {
   CheckboxProps,

packages/components/collapsible/src/collapsible.ts

@@ -1,9 +1,8 @@
-import type { PropType, Ref } from 'vue'
+import type { ComputedRef, PropType, Ref } from 'vue'
 import { computed, defineComponent, h, toRefs, useModel } from 'vue'
 import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
-import type { Scope } from '@oku-ui/provide'
-import { createProvideScope } from '@oku-ui/provide'
-import { Primitive } from '@oku-ui/primitive'
+import { ScopePropObject, createProvideScope } from '@oku-ui/provide'
+import { Primitive, PrimitiveProps } from '@oku-ui/primitive'
 
 import { useControllable, useForwardRef, useId } from '@oku-ui/use-composable'
 import { getState } from './utils'
@@ -16,12 +15,12 @@ export type _CollapsibleEl = HTMLDivElement
 type CollapsibleProvideValue = {
   contentId: string
   disabled?: Ref<boolean>
-  open: Ref<boolean>
+  open: ComputedRef<boolean>
   onOpenToggle(): void
 }
 
 const COLLAPSIBLE_NAME = 'Collapsible'
-export const [createCollapsibleProvide, _createCollapsibleScope] = createProvideScope(COLLAPSIBLE_NAME)
+export const [createCollapsibleProvide, createCollapsibleScope] = createProvideScope(COLLAPSIBLE_NAME)
 export const [collapsibleProvider, useCollapsibleInject]
   = createCollapsibleProvide<CollapsibleProvideValue>(COLLAPSIBLE_NAME)
 
@@ -45,22 +44,18 @@ const Collapsible = defineComponent({
       type: Boolean,
       default: false,
     },
-    scopeCollapsible: {
-      type: Object as unknown as PropType<Scope>,
-      required: false,
-    },
     onOpenChange: {
       type: Function as PropType<(open: boolean) => void>,
     },
-    asChild: {
-      type: Boolean,
-      default: undefined,
+    ...PrimitiveProps,
+    scopeCollapsible: {
+      ...ScopePropObject,
     },
   },
   emits: ['update:open', 'update:modelValue'],
   setup(props, { attrs, slots, emit }) {
     const { ...collapsibleAttr } = attrs as CollapsibleElement
-    const { disabled, scopeCollapsible, open, defaultOpen } = toRefs(props)
+    const { disabled, open, defaultOpen } = toRefs(props)
 
     const modelValue = useModel(props, 'modelValue')
 
@@ -81,8 +76,8 @@ const Collapsible = defineComponent({
       onOpenToggle() {
         updateValue(!state.value)
       },
-      scope: scopeCollapsible.value,
-      open: state as Ref<boolean>,
+      scope: props.scopeCollapsible,
+      open: computed(() => state.value || false),
     })
 
     const originalReturn = () => h(

packages/components/collapsible/src/collapsibleContent.ts

@@ -1,10 +1,10 @@
-import type { PropType } from 'vue'
+import type { ComputedRef } from 'vue'
 import { Transition, defineComponent, h, toRefs } from 'vue'
-import type { Scope } from '@oku-ui/provide'
 
 import { useForwardRef } from '@oku-ui/use-composable'
-import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
+import { type ElementType, type IPrimitiveProps, type InstanceTypeRef, type MergeProps, PrimitiveProps } from '@oku-ui/primitive'
 import { OkuPresence } from '@oku-ui/presence'
+import { ScopePropObject } from '@oku-ui/provide'
 import { OkuCollapsibleContentImpl } from './collapsibleContentImpl'
 import { useCollapsibleInject } from './collapsible'
 
@@ -33,16 +33,12 @@ const CollapsibleContent = defineComponent({
       default: true,
     },
     scopeCollapsible: {
-      type: Object as unknown as PropType<Scope>,
-      required: false,
-    },
-    asChild: {
-      type: Boolean,
-      default: undefined,
+      ...ScopePropObject,
     },
+    ...PrimitiveProps,
   },
   setup(props, { attrs, slots }) {
-    const { scopeCollapsible } = toRefs(props)
+    const { scopeCollapsible, forceMount } = toRefs(props)
     const { ...contentProps } = attrs as CollapsibleContentElement
 
     const context = useCollapsibleInject(CONTENT_NAME, scopeCollapsible.value)
@@ -53,16 +49,17 @@ const CollapsibleContent = defineComponent({
     const originalReturn = () => h(
       OkuPresence,
       {
-        present: props.forceMount || context.value.open.value,
+        present: forceMount.value || context.open.value,
       },
       {
-        default: () => h(
+        default: ({ isPresent }: { isPresent: ComputedRef<boolean> }) => h(
           OkuCollapsibleContentImpl,
           {
             ...contentProps,
             ref: forwardedRef,
             asChild: props.asChild,
             scopeCollapsible: scopeCollapsible.value,
+            present: isPresent,
           },
           {
             default: () => slots.default && slots.default(),