fix: vars name

teleskop150750 · teleskop150750 · commit a991db71fbec · 2024-09-10T15:42:37.000+03:00
diff --git a/packages/vue-primitives/src/collection/stories/DynamicInsertion.vue b/packages/vue-primitives/src/collection/stories/DynamicInsertion.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
-import { ITEM_DATA_ATTR } from '../index.ts'
+import { DATA_COLLECTION_ITEM } from '../index.ts'
 import Item from './item.vue'
 import List from './List.vue'
 import LogItems from './LogItems.vue'
@@ -13,7 +13,7 @@ function setHasTomato(value: boolean) {
 }
 
 function log() {
-  console.warn('Items:', Array.from(document.querySelectorAll(`[${ITEM_DATA_ATTR}]`)))
+  console.warn('Items:', Array.from(document.querySelectorAll(`[${DATA_COLLECTION_ITEM}]`)))
 }
 </script>
 
diff --git a/packages/vue-primitives/src/collection/stories/item.vue b/packages/vue-primitives/src/collection/stories/item.vue
@@ -2,7 +2,7 @@
 import { useAttrs } from 'vue'
 import { useComposedElements } from '../../hooks/useComposedElements.ts'
 import { isPropFalsy } from '../../utils/is.ts'
-import { ITEM_DATA_ATTR } from '../Collection.ts'
+import { DATA_COLLECTION_ITEM } from '../Collection.ts'
 import { Collection, type ItemData } from './utils.ts'
 
 const attrs = useAttrs()
@@ -19,7 +19,7 @@ const composedElements = useComposedElements((v) => {
     :style="{
       opacity: !isPropFalsy($attrs.disabled) ? 0.3 : undefined,
     }"
-    :[ITEM_DATA_ATTR]="true"
+    :[DATA_COLLECTION_ITEM]="true"
   >
     <slot />
   </li>
diff --git a/packages/vue-primitives/src/hooks/index.ts b/packages/vue-primitives/src/hooks/index.ts
@@ -4,6 +4,6 @@ export { useControllableState } from './useControllableState.ts'
 export { useEscapeKeydown } from './useEscapeKeydown.ts'
 export { useForwardElement } from './useForwardElement.ts'
 export { useId } from './useId.ts'
-export { type MutableRefObject, useRef } from './useRef.ts'
+export { type MutableRefObject, type RefObject, useRef } from './useRef.ts'
 export { useSize } from './useSize.ts'
 export { useStateMachine } from './useStateMachine.ts'
diff --git a/packages/vue-primitives/src/hooks/useControllableState.ts b/packages/vue-primitives/src/hooks/useControllableState.ts
@@ -81,21 +81,23 @@ export function useControllableStateV2<T, V = Exclude<T, undefined>>(
   const proxy = shallowRef<V>(getValue())
   let isUpdating = false
 
-  watch(
-    prop,
-    (v) => {
-      if (!isUpdating) {
-        isUpdating = true
-        ; (proxy as any).value = v
-        nextTick(() => isUpdating = false)
-      }
-    },
-  )
+  if (prop) {
+    watch(
+      prop,
+      (v) => {
+        if (!isUpdating) {
+          isUpdating = true
+          ; (proxy as any).value = v
+          nextTick(() => isUpdating = false)
+        }
+      },
+    )
+  }
 
   watch(
     proxy,
     (v) => {
-      if (!isUpdating && (v !== prop()))
+      if (!isUpdating && (v !== prop?.()))
         onChange?.(v)
     },
   )
diff --git a/packages/vue-primitives/src/hooks/useRef.ts b/packages/vue-primitives/src/hooks/useRef.ts
@@ -1,7 +1,13 @@
 import type { IfAny } from '@vue/shared'
 import type { Ref } from 'vue'
 
-export interface MutableRefObject<T> { current: T }
+export interface MutableRefObject<T> {
+  current: T
+}
+
+export interface RefObject<T> {
+  readonly current: T | null
+}
 
 export function useRef<T>(value: T): Ref extends T
   ? T extends Ref

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`<script setup lang="ts">`
`2`	`2`	`import { shallowRef } from 'vue'`
`3`		`-import { ITEM_DATA_ATTR } from '../index.ts'`
	`3`	`+import { DATA_COLLECTION_ITEM } from '../index.ts'`
`4`	`4`	`import Item from './item.vue'`
`5`	`5`	`import List from './List.vue'`
`6`	`6`	`import LogItems from './LogItems.vue'`
`@@ -13,7 +13,7 @@ function setHasTomato(value: boolean) {`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`function log() {`
`16`		- console.warn('Items:', Array.from(document.querySelectorAll(`[${ITEM_DATA_ATTR}]`)))
	`16`	+ console.warn('Items:', Array.from(document.querySelectorAll(`[${DATA_COLLECTION_ITEM}]`)))
`17`	`17`	`}`
`18`	`18`	`</script>`
`19`	`19`