refactor(core): one package use-composable

packages/components/avatar/package.json

@@ -35,7 +35,7 @@
   "dependencies": {
     "@oku-ui/primitive": "workspace:^",
     "@oku-ui/provide": "workspace:^",
-    "@oku-ui/use-callback-ref": "workspace:^",
+    "@oku-ui/use-composable": "workspace:^",
     "@oku-ui/utils": "workspace:^"
   },
   "devDependencies": {

packages/components/avatar/src/avatar.ts

@@ -4,7 +4,7 @@ import type { ElementType, MergeProps, PrimitiveProps, RefElement } from '@oku-u
 import { Primitive } from '@oku-ui/primitive'
 import type { Scope } from '@oku-ui/provide'
 import { createProvideScope } from '@oku-ui/provide'
-import { useCallbackRef } from '@oku-ui/use-callback-ref'
+import { useCallbackRef } from '@oku-ui/use-composable'
 
 function useImageLoadingStatus(src?: string) {
   const loadingStatus = ref<ImageLoadingStatus>('idle')

packages/components/checkbox/package.json

@@ -33,12 +33,9 @@
     "vue": "^3.3.1"
   },
   "dependencies": {
-    "@oku-ui/compose-refs": "workspace:^",
     "@oku-ui/primitive": "workspace:^",
     "@oku-ui/provide": "workspace:^",
-    "@oku-ui/use-controllable-ref": "workspace:^",
-    "@oku-ui/use-previous": "workspace:^",
-    "@oku-ui/use-size": "workspace:^",
+    "@oku-ui/use-composable": "workspace:^",
     "@oku-ui/utils": "workspace:^"
   },
   "devDependencies": {

packages/components/checkbox/src/checkbox.ts

@@ -2,10 +2,8 @@ import { createProvideScope } from '@oku-ui/provide'
 import type { PropType, Ref } from 'vue'
 import { Transition, computed, defineComponent, h, onMounted, ref, watchEffect } from 'vue'
 
-import { useControllableRef } from '@oku-ui/use-controllable-ref'
 import { composeEventHandlers } from '@oku-ui/utils'
-import { usePrevious } from '@oku-ui/use-previous'
-import { useSize } from '@oku-ui/use-size'
+import { useControllableRef, usePrevious, useSize } from '@oku-ui/use-composable'
 import { Primitive } from '@oku-ui/primitive'
 
 // import { useComposedRefs } from '@oku-ui/compose-refs'
@@ -216,8 +214,10 @@ const Checkbox = defineComponent({
           }
         }),
       },
-      slots.default?.(),
-      ), isFormControl && h(
+      {
+        default: () => slots.default?.(),
+      }),
+      isFormControl && h(
         BubbleInput,
         {
           control: _button.value,
@@ -277,7 +277,9 @@ const CheckboxIndicator = defineComponent({
           ...indicatorProps,
           'style': { pointerEvents: 'none', ...attrs.style as any },
         },
-        slots.default?.(),
+        {
+          default: () => slots.default?.(),
+        },
         )
         : null,
     ])

packages/components/checkbox/src/stories/CheckboxDemo.vue

@@ -2,6 +2,7 @@
 <script setup lang="ts">
 import type { CheckboxProps } from '@oku-ui/checkbox'
 import { OkuCheckbox, OkuCheckboxIndicator } from '@oku-ui/checkbox'
+import { OkuLabel } from '@oku-ui/label'
 
 export interface ICheckBoxProps extends CheckboxProps {
   template?: '#1' | '#2' | '#3'
@@ -66,7 +67,7 @@ withDefaults(defineProps<ICheckBoxProps>(), {
       <OkuLabel>
         Label
         <OkuCheckbox
-          id="checkbox"
+          id="checkboxx"
           class="w-6 h-6 flex bg-gray-300 rounded-md text-red-500 checked:text-red-600"
         >
           <OkuCheckboxIndicator class="w-6 h-6 flex items-center justify-center text-blue-500">

packages/core/use-size/package.json → packages/core/use-composable/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@oku-ui/use-size",
+  "name": "@oku-ui/use-composable",
   "type": "module",
   "version": "1.0.0",
   "license": "MIT",
@@ -9,7 +9,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/oku-ui/primitives.git",
-    "directory": "packages/core/use-size"
+    "directory": "packages/core/use-composable"
   },
   "bugs": {
     "url": "https://github.com/oku-ui/primitives/issues"
@@ -18,18 +18,18 @@
     ".": {
       "types": "./dist/index.d.ts",
       "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs"
+      "import": "./dist/index.js"
     }
   },
   "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "unbuild",
-    "dev": "unbuild --stub"
+    "build": "tsup",
+    "dev": "tsup --watch"
   },
   "peerDependencies": {
     "vue": "^3.3.1"

packages/core/use-composable/src/index.ts

@@ -0,0 +1,5 @@
+export { useControllableRef } from './useControllableRef'
+export { useCallbackRef } from './useCallbackRef'
+export { useSize } from './useSize'
+export { usePrevious } from './usePrevious'
+export { useComposedRefs, composeRefs } from './useComposedRefs'

packages/core/use-controllable-ref/src/use-controllable-ref.ts → packages/core/use-composable/src/useControllableRef.ts

@@ -1,8 +1,6 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
 import type { Ref } from 'vue'
 import { computed, ref, watch, watchEffect } from 'vue'
-import { useCallbackRef } from '@oku-ui/use-callback-ref'
+import { useCallbackRef } from './useCallbackRef'
 
 type UseControllableRefParams<T> = {
   prop?: T | undefined

packages/core/use-composable/tsup.config.ts

@@ -0,0 +1,18 @@
+import type { Options } from 'tsup'
+
+import pkg from './package.json'
+
+const external = [
+  ...Object.keys(pkg.dependencies || {}),
+  ...Object.keys(pkg.peerDependencies || {}),
+]
+
+export default <Options>{
+  entryPoints: ['src/index.ts'],
+  outDir: 'dist',
+  target: 'node16',
+  format: ['esm', 'cjs'],
+  clean: true,
+  dts: true,
+  external,
+}