refactor(checkbox): component and utils (#507)

* refactor(checkbox): component and utils * Fix data-disabled value in CheckboxIndicator.vue
oku-ui · Jan 18, 2024 · 55f4c17 · 55f4c17
1 parent 818fbf7
commit 55f4c17
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 20 deletions.
diff --git a/packages/vue/src/checkbox/Checkbox.vue b/packages/vue/src/checkbox/Checkbox.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import { createScope } from '@oku-ui/provide'
 import type { PrimitiveProps } from '@oku-ui/primitive'
 
 export interface ScopeCheckbox {
@@ -8,12 +7,6 @@ export interface ScopeCheckbox {
 
 export type CheckedState = boolean | 'indeterminate'
 
-export type CheckboxProvide = {
-  _names: 'OkuCheckbox'
-  state: Ref<CheckedState>
-  disabled?: Ref<boolean | undefined>
-}
-
 export interface CheckboxProps extends PrimitiveProps {
   scopeOkuCheckbox?: any
   checked?: CheckedState
@@ -31,11 +24,6 @@ export type CheckboxEmits = {
   'click': [event: MouseEvent]
 }
 
-export const { composeProviderScopes, createProvide } = createScope<CheckboxProvide['_names']>('OkuCheckbox')
-
-export const { useInject, useProvider }
-    = createProvide<Omit<CheckboxProvide, '_names'>>('OkuCheckbox')
-
 </script>
 
 <script setup lang="ts">
@@ -45,7 +33,7 @@ import { useComponentRef, useVModel } from '@oku-ui/use-composable'
 import { Primitive } from '@oku-ui/primitive'
 import { composeEventHandlers } from '@oku-ui/utils'
 import OkuBubbleInput from './BubbleInput.vue'
-import { getState, isIndeterminate } from './utils'
+import { getState, isIndeterminate, useCheckboxProvide } from './utils'
 
 defineOptions({
   name: 'OkuCheckbox',
@@ -97,7 +85,7 @@ watchEffect((onInvalidate) => {
   }
 })
 
-useProvider({
+useCheckboxProvide({
   scope: props.scopeOkuCheckbox,
   state: checked,
   disabled: toRef(props, 'disabled'),

diff --git a/packages/vue/src/checkbox/CheckboxIndicator.vue b/packages/vue/src/checkbox/CheckboxIndicator.vue
@@ -1,8 +1,6 @@
 <script lang="ts">
-// import type { CheckedState, ScopeCheckbox } from './Checkbox.vue'
 import { Primitive } from '@oku-ui/primitive'
 import type { PrimitiveProps } from '@oku-ui/primitive'
-import { useInject } from './Checkbox.vue'
 
 export interface CheckboxIndicatorProps extends PrimitiveProps {
   scopeOkuCheckbox?: any
@@ -14,7 +12,7 @@ export interface CheckboxIndicatorProps extends PrimitiveProps {
 <script setup lang="ts">
 import { defineOptions, withDefaults } from 'vue'
 import { useComponentRef } from '@oku-ui/use-composable'
-import { getState, isIndeterminate } from './utils'
+import { getState, isIndeterminate, useCheckboxInject } from './utils'
 import { OkuPresence } from '@oku-ui/presence'
 
 defineOptions({
@@ -30,7 +28,7 @@ const props = withDefaults(defineProps<CheckboxIndicatorProps>(), {
 
 const { componentRef, currentElement } = useComponentRef<HTMLInputElement | null>()
 
-const inject = useInject('OkuCheckbox', props.scopeOkuCheckbox)
+const inject = useCheckboxInject('OkuCheckbox', props.scopeOkuCheckbox)
 
 defineExpose({
   $el: currentElement,
@@ -46,7 +44,7 @@ defineExpose({
       ref="componentRef"
       :as-child="props.asChild"
       :data-state="getState(inject.state.value)"
-      :data-disabled="inject.disabled"
+      :data-disabled="inject.disabled?.value"
       :style="{
         pointerEvents: 'none', ...$attrs.style as any,
       }"

diff --git a/packages/vue/src/checkbox/index.ts b/packages/vue/src/checkbox/index.ts
@@ -7,3 +7,7 @@ export {
   default as OkuCheckboxIndicator,
   type CheckboxIndicatorProps,
 } from './CheckboxIndicator.vue'
+
+export {
+  createCheckboxScope,
+} from './utils'
diff --git a/packages/vue/src/checkbox/utils.ts b/packages/vue/src/checkbox/utils.ts
@@ -1,3 +1,5 @@
+import { createScope } from '@oku-ui/provide'
+import type { Ref } from 'vue'
 import type { CheckedState } from './Checkbox.vue'
 
 export function isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {
@@ -7,3 +9,15 @@ export function isIndeterminate(checked?: CheckedState): checked is 'indetermina
 export function getState(checked: CheckedState) {
   return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked'
 }
+
+export type CheckboxContext = {
+  state: Ref<CheckedState>
+  disabled?: Ref<boolean | undefined>
+}
+
+export const
+  [createCheckboxProvide, createCheckboxScope]
+= createScope<'OkuCheckbox'>('OkuCheckbox')
+
+export const [useCheckboxProvide, useCheckboxInject]
+  = createCheckboxProvide<CheckboxContext>('OkuCheckbox')
diff --git a/packages/vue/src/provide/createProvide.ts b/packages/vue/src/provide/createProvide.ts
@@ -69,7 +69,9 @@ function createScope<T extends string>(scopeName: T, createScopeDeps: CreateScop
       throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``)
     }
 
-    // return [Provider, useInject] as const
+    /**
+     * [useNameProvide, useNameInject]
+     */
     return [
       useProvider,
       useInject,
@@ -99,6 +101,9 @@ function createScope<T extends string>(scopeName: T, createScopeDeps: CreateScop
   createScope.scopeName = scopeName
   // return [createProvide, composeProvderScopes(createScope, ...createScopeDeps)] as const
 
+  /**
+   * [createNameProvide, createNameScope]
+   */
   return [
     createProvide,
     composeScopes(createScope, ...createScopeDeps),