feat(useSelection): watch for initialValue changes

jd-solanki · jd-solanki · commit 6ef3d22858fb · 2023-05-10T07:35:48.000+05:30
closes #151
diff --git a/docs/components/demos/composables/useSelection/DemoUseSelectionInitialValue.vue b/docs/components/demos/composables/useSelection/DemoUseSelectionInitialValue.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useSelection } from 'anu-vue'
+
+const { options, select, value } = useSelection({
+  items: ['apple', 'banana', 'orange', 'watermelon'],
+  initialValue: 'banana', // [!code hl]
+})
+</script>
+
+<template>
+  <div>
+    <div class="flex flex-wrap gap-6 mb-4">
+      <ABtn
+        v-for="option in options"
+        :key="option.value"
+        :variant="option.isSelected ? 'fill' : 'light'"
+        @click="select(option.value)"
+      >
+        {{ option.value }}
+      </ABtn>
+    </div>
+    <small class="block">Selected: {{ value }}</small>
+  </div>
+</template>
diff --git a/docs/components/demos/composables/useSelection/DemoUseSelectionObject.vue b/docs/components/demos/composables/useSelection/DemoUseSelectionObject.vue
@@ -8,7 +8,6 @@ const { options, select, value } = useSelection({
     { title: 'Cart', icon: 'i-bx-basket' },
     { title: 'Profile', icon: 'i-bx-user-circle' },
   ],
-  initialValue: { title: 'Home', icon: 'i-bx-home' },
 })
 </script>
 
diff --git a/docs/guide/composables/useSelection.md b/docs/guide/composables/useSelection.md
@@ -34,3 +34,20 @@ description
 :::
 
 ::::
+
+<!-- 👉 Initial Value -->
+:::::card Initial Value
+
+You can set initial value for selection by passing it to `initialValue` property.
+
+::::code DemoUseSelectionInitialValue
+<<< @/components/demos/composables/useSelection/DemoUseSelectionInitialValue.vue
+::::
+
+::::after-demo
+:::info
+`useSelection` will watch for changes in `initialValue` and update selection.
+:::
+::::
+
+:::::
diff --git a/packages/anu-vue/src/components/list/AList.vue b/packages/anu-vue/src/components/list/AList.vue
@@ -2,8 +2,7 @@
 import type { AListEvents, AListPropItems, aListSlots } from './meta'
 import { aListListItemSlotsWithPrefixMeta, aListProps } from './meta'
 import { AListItem } from '@/components/list-item'
-import { useSelection } from '@/composables'
-import { isObject } from '@/utils/helpers'
+import { calculateSelectionItems, extractItemValueFromItemOption, useSelection } from '@/composables/useSelection'
 
 const props = defineProps(aListProps)
 const emit = defineEmits<AListEvents>()
@@ -13,13 +12,10 @@ defineOptions({
   name: 'AList',
 })
 
-function extractItemValueFromItemOption(item: AListPropItems[number]) {
-  return isObject(item) ? (item.value || item) : item
-}
-
 const { options, select: selectListItem, value } = useSelection({
-  items: props.items.map(i => extractItemValueFromItemOption(i)),
-  multi: props.multi,
+  items: calculateSelectionItems(toRef(() => props.items)),
+  multi: toRef(() => props.multi),
+  initialValue: toRef(() => props.modelValue),
 })
 
 // const isActive = computed(() => options.value[itemIndex].isSelected)
diff --git a/packages/anu-vue/src/composables/index.ts b/packages/anu-vue/src/composables/index.ts
@@ -7,7 +7,7 @@ export * from './useIndeterminateCheckbox'
 export * from './useLayer'
 export * from './useParent'
 export * from './useSearch'
-export * from './useSelection'
+export { useSelection } from './useSelection'
 export * from './useSort'
 export * from './useTeleport'
 
diff --git a/packages/anu-vue/src/composables/useSelection.ts b/packages/anu-vue/src/composables/useSelection.ts
@@ -32,7 +32,7 @@ export function useSelection<const Item, Multi extends boolean, InitialValue ext
 
     // _initialValue.value,
 
-    _items.value.find(i => {
+    (_items.value as Item[]).find(i => {
       // ℹ️ If initial value is object compare using `JSON.stringify` else just use `===`
       return (isObject(_initialValue.value) && isObject(i))
         ? JSON.stringify(_initialValue.value) === JSON.stringify(i)
@@ -71,9 +71,35 @@ export function useSelection<const Item, Multi extends boolean, InitialValue ext
       : item === _val.value,
   }))) as ReturnValue<Item, Multi>['options']
 
+  // Watch for external changes to initialValue aka modelValue
+  watch(_initialValue, val => {
+    select(val as Item)
+  })
+
   return {
     value: _val,
     select,
     options: _options,
   }
 }
+
+export function calculateSelectionItems(items: MaybeRefOrGetter<unknown[]>) {
+  return computed(() => {
+    const _items = toRef(items)
+
+    if (_items.value.length === 0)
+      return []
+
+    const firstItem = _items.value[0]
+    if (isObject(firstItem)) {
+      if ('value' in firstItem)
+        return _items.value.map(item => (item as { value: unknown }).value)
+    }
+
+    return _items.value
+  })
+}
+
+export function extractItemValueFromItemOption(item: unknown) {
+  return isObject(item) ? (item.value || item) : item
+}
