feat: useControllableState

teleskop150750 · teleskop150750 · commit 5ce53391f38a · 2024-06-10T22:32:15.000+03:00
diff --git a/packages/vue-primitives/src/hooks/useControllableState.ts b/packages/vue-primitives/src/hooks/useControllableState.ts
@@ -0,0 +1,62 @@
+import { isDef } from '@vueuse/core'
+import {  type UnwrapRef, computed, nextTick, shallowRef, watch, type Ref } from 'vue'
+
+
+/**
+ * Shorthand for v-model binding, props + emit -> ref
+ *
+ * @see https://vueuse.org/useVModel
+ * @param props
+ * @param key (default 'value' in Vue 2 and 'modelValue' in Vue 3)
+ * @param emit
+ */
+export function useControllableState<P extends object, K extends keyof P, Name extends string, V = Exclude<P[K], undefined>>(
+  props: P,
+  emit: (name: Name, ...args: any[]) => void,
+  key: K,
+  defaultValue?: V | undefined,
+  eventName?: string,
+): Ref<V> {
+  const event: Name = (eventName || `update:${key.toString()}`) as Name
+
+  const getValue = (): V => (isDef(props[key])
+    ? props[key]
+    : defaultValue) as V
+
+  if (isDef(props[key])) {
+    return computed<V>({
+      get() {
+        return getValue()
+      },
+      set(value) {
+        emit(event, value)
+      },
+    })
+
+  }
+  else {
+    const proxy = shallowRef<V>(getValue())
+    let isUpdating = false
+
+    watch(
+      () => props[key!],
+      (v) => {
+        if (!isUpdating) {
+          isUpdating = true
+            ; (proxy as any).value = v as UnwrapRef<P[K]>
+          nextTick(() => isUpdating = false)
+        }
+      },
+    )
+
+    watch(
+      proxy,
+      (v) => {
+        if (!isUpdating && (v !== props[key!]))
+          emit(event, v)
+      },
+    )
+
+    return proxy
+  }
+}
diff --git a/packages/vue-primitives/src/toggle-group/ToggleGroup.vue b/packages/vue-primitives/src/toggle-group/ToggleGroup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Primitive } from '../primitive/index.ts'
-import { useControllableState } from '../utils/useControllableState.ts'
+import { useControllableState } from '../hooks/useControllableState.ts'
 import { composeEventHandlers } from '../utils/composeEventHandlers.ts'
 import type { ToggleEmits, ToggleProps } from './ToggleGroup.ts'
 
@@ -15,10 +15,7 @@ const props = withDefaults(defineProps<ToggleProps>(), {
 
 const emit = defineEmits<ToggleEmits>()
 
-const pressed = useControllableState(props, 'pressed', emit, {
-  defaultValue: props.defaultPressed,
-  passive: (props.pressed === undefined) as false,
-})
+const pressed = useControllableState(props, emit, 'pressed', props.defaultPressed)
 
 const onClick = composeEventHandlers((e: Event) => {
   emit('click', e)
diff --git a/packages/vue-primitives/src/toggle/Toggle.vue b/packages/vue-primitives/src/toggle/Toggle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ToggleEmits, ToggleProps } from './Toggle.ts'
 import { Primitive } from '~/primitive/index.ts'
-import { useControllableState } from '~/utils/useControllableState.ts'
+import { useControllableState } from '~/hooks/useControllableState.ts'
 import { composeEventHandlers } from '~/utils/composeEventHandlers.ts'
 
 defineOptions({
@@ -15,10 +15,7 @@ const props = withDefaults(defineProps<ToggleProps>(), {
 
 const emit = defineEmits<ToggleEmits>()
 
-const pressed = useControllableState(props, 'pressed', emit, {
-  defaultValue: props.defaultPressed,
-  passive: (props.pressed === undefined) as false,
-})
+const pressed = useControllableState(props, emit, 'pressed', props.defaultPressed)
 
 const onClick = composeEventHandlers((e: Event) => {
   emit('click', e)
diff --git a/packages/vue-primitives/src/utils/createContext.ts b/packages/vue-primitives/src/utils/createContext.ts
@@ -0,0 +1,30 @@
+import { type InjectionKey, inject, provide } from 'vue'
+
+/**
+ * Create global state that can be injected into components.
+ *
+ * @see https://vueuse.org/createInjectionState
+ *
+ */
+export function createContext<T>(
+  contextName: string,
+  defaultValue?: T,
+): readonly [useProvidingState: (state: T) => void, useContext: () => T] {
+  const key: string | InjectionKey<T> = Symbol(contextName)
+
+  const useProvideContext = (state: T) => {
+    provide(key, state)
+  }
+
+  const useContext = (consumerName?: string) => {
+    const state = inject(key, defaultValue)
+
+    if (!state) {
+      throw new Error(`\`${consumerName}\` must be used within \`${contextName}\``)
+    }
+
+    return state
+  }
+
+  return [useProvideContext, useContext]
+}
diff --git a/packages/vue-primitives/src/utils/useControllableState.ts b/packages/vue-primitives/src/utils/useControllableState.ts
