feat(useSelection)!: renamed & improved useSelection (useGroupModel)

jd-solanki · jd-solanki · commit 62399501d64a · 2023-05-09T16:01:06.000+05:30
closes #168
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -101,7 +101,7 @@ export default defineConfig({
             // { text: 'useSearch', link: '/guide/composables/useSearch' },
             // { text: 'useSort', link: '/guide/composables/useSort' },
             { text: 'useAnu', link: '/guide/composables/useAnu' },
-            { text: 'useGroupModel', link: '/guide/composables/useGroupModel' },
+            { text: 'useSelection', link: '/guide/composables/useSelection' },
             { text: 'useIndeterminateCheckbox', link: '/guide/composables/useIndeterminateCheckbox' },
           ],
         },
diff --git a/docs/components/Api.vue b/docs/components/Api.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { unrefElement } from '@vueuse/core'
-import { useGroupModel, useSearch } from 'anu-vue'
+import { useSearch, useSelection } from 'anu-vue'
 import { computed, onMounted, ref } from 'vue'
 
 import type { ComponentApi } from '../../scripts/gen-component-meta'
@@ -35,15 +35,11 @@ const { results: filteredEvents } = useSearch(q, props.api.events, (q: string, e
 // !SECTION
 
 // SECTION Tabs
-const tabs = ['props', 'slots', 'events']
-const { options: apiTabs, select, value: apiActiveTab } = useGroupModel({
-  options: tabs,
+const { options: apiTabs, select, value: apiActiveTab } = useSelection({
+  items: ['props', 'slots', 'events'],
+  initialValue: 'props',
 })
 
-// ℹ️ Set props as active tab. This is because ATM, useGroupModel does't support initial value.
-// Tracking: https://github.com/jd-solanki/anu/pull/77
-select(tabs[0] as string)
-
 const foundNumbers = computed(() => ({
   props: filteredProps.value.length,
   slots: filteredSlots.value.length,
diff --git a/docs/components/demos/chip/DemoChipSelection.vue b/docs/components/demos/chip/DemoChipSelection.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { useGroupModel } from 'anu-vue'
+import { useSelection } from 'anu-vue'
 
-const { options, select, value } = useGroupModel({
-  options: [
+const { options, select, value } = useSelection({
+  items: [
     'VueJS',
     'Pinia',
     'Vue Router',
@@ -25,4 +25,3 @@ const { options, select, value } = useGroupModel({
     </AChip>
   </div>
 </template>
-
diff --git a/docs/components/demos/composables/useSelection/DemoUseSelectionBasic.vue b/docs/components/demos/composables/useSelection/DemoUseSelectionBasic.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { useGroupModel } from 'anu-vue'
+import { useSelection } from 'anu-vue'
 import { ref } from 'vue'
 
 const isMultiEnabled = ref(false)
-const { options, select, value } = useGroupModel<string>({
-  options: ['apple', 'banana', 'orange', 'watermelon'],
+const { options, select, value } = useSelection({
+  items: ['apple', 'banana', 'orange', 'watermelon'],
   multi: isMultiEnabled,
 })
 </script>
diff --git a/docs/components/demos/composables/useSelection/DemoUseSelectionIndexed.vue b/docs/components/demos/composables/useSelection/DemoUseSelectionIndexed.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { useGroupModel } from 'anu-vue'
-const { options, select, value } = useGroupModel({
-  options: 3,
+import { numRange, useSelection } from 'anu-vue'
+
+const { options, select, value } = useSelection({
+  items: numRange(3),
 })
 </script>
 
diff --git a/docs/components/demos/composables/useSelection/DemoUseSelectionObject.vue b/docs/components/demos/composables/useSelection/DemoUseSelectionObject.vue
@@ -1,13 +1,14 @@
 <script lang="ts" setup>
-import { useGroupModel } from 'anu-vue'
+import { useSelection } from 'anu-vue'
 
-const { options, select, value } = useGroupModel({
-  options: [
+const { options, select, value } = useSelection({
+  items: [
     { title: 'Home', icon: 'i-bx-home' },
     { title: 'Categories', icon: 'i-bx-category' },
     { 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/components/chip.md b/docs/guide/components/chip.md
@@ -63,13 +63,13 @@ Use `append-icon` prop to render icon after default slot.
 
 ::::
 
-<!-- 👉 UseGroupModel -->
-::::card UseGroupModel
+<!-- 👉 UseSelection -->
+::::card UseSelection
 
-You can use [`useGroupModel`](/guide/composables/useGroupModel) composable to create a group of chips.
+You can use [`useSelection`](/guide/composables/useSelection) composable to create a group of chips.
 
-:::code DemoChipGroupModel
-<<< @/components/demos/chip/DemoChipGroupModel.vue{4-12}
+:::code DemoChipSelection
+<<< @/components/demos/chip/DemoChipSelection.vue{4-12}
 :::
 
 ::::
diff --git a/docs/guide/components/list.md b/docs/guide/components/list.md
@@ -94,7 +94,7 @@ If you are using `AListItem` in default slot of `AList` you can use `handleListI
 
 ::::after-demo
 :::tip
-For selection, `AList` uses [`useGroupModel`](/guide/composables/useGroupModel). Hence, you can also use the `multi` prop to allow multiple selection.
+For selection, `AList` uses [`useSelection`](/guide/composables/useSelection). Hence, you can also use the `multi` prop to allow multiple selection.
 :::
 ::::
 
diff --git a/docs/guide/composables/useGroupModel.md b/docs/guide/composables/useGroupModel.md
diff --git a/docs/guide/composables/useSelection.md b/docs/guide/composables/useSelection.md
@@ -0,0 +1,36 @@
+# `useSelection`
+
+<!-- 👉 Basic -->
+::::card Basic
+
+`useSelection` allows you to create `v-model` like binding for a group.
+
+You can use `multi` property to enable selecting multiple values from options.
+
+:::code DemoUseSelectionBasic
+<<< @/components/demos/composables/useSelection/DemoUseSelectionBasic.vue{6-9}
+:::
+
+::::
+
+<!-- 👉 Indexed -->
+::::card Indexed
+
+You can also create options without predefined value. Pass any positive number to `options` property and it will create index based options.
+
+:::code DemoUseSelectionIndexed
+<<< @/components/demos/composables/useSelection/DemoUseSelectionIndexed.vue{4}
+:::
+
+::::
+
+<!-- 👉 Object -->
+::::card Object
+
+description
+
+:::code DemoUseSelectionObject
+<<< @/components/demos/composables/useSelection/DemoUseSelectionObject.vue{4-11}
+:::
+
+::::
diff --git a/packages/anu-vue/src/components/list/AList.vue b/packages/anu-vue/src/components/list/AList.vue
@@ -2,7 +2,7 @@
 import type { AListEvents, AListPropItems, aListSlots } from './meta'
 import { aListListItemSlotsWithPrefixMeta, aListProps } from './meta'
 import { AListItem } from '@/components/list-item'
-import { useGroupModel } from '@/composables'
+import { useSelection } from '@/composables'
 import { isObject } from '@/utils/helpers'
 
 const props = defineProps(aListProps)
@@ -17,8 +17,8 @@ function extractItemValueFromItemOption(item: AListPropItems[number]) {
   return isObject(item) ? (item.value || item) : item
 }
 
-const { options, select: selectListItem, value } = useGroupModel({
-  options: props.items.map(i => extractItemValueFromItemOption(i)),
+const { options, select: selectListItem, value } = useSelection({
+  items: props.items.map(i => extractItemValueFromItemOption(i)),
   multi: props.multi,
 })
 
diff --git a/packages/anu-vue/src/components/tabs/ATabs.vue b/packages/anu-vue/src/components/tabs/ATabs.vue
@@ -8,7 +8,8 @@ import { ATab } from '@/components/tab'
 import { AView } from '@/components/view'
 import { AViews } from '@/components/views'
 import { ActiveViewSymbol } from '@/components/views/symbol'
-import { useGroupModel } from '@/composables'
+import { useSelection } from '@/composables'
+import { numRange } from '@/utils/helpers'
 
 // import { aTabsSlots } from './meta';
 
@@ -47,12 +48,17 @@ const groupModelOptions = computed(() => {
     if (firstTab?.value)
       return props.tabs.map(tab => (tab as ATabProps).value)
 
-    return props.tabs.length
+    return numRange(props.tabs.length)
   }
 })
 
-const { options, select: selectTab, value: activeTab } = useGroupModel({
-  options: groupModelOptions.value,
+const { options, select: selectTab, value: activeTab } = useSelection({
+  items: groupModelOptions.value,
+  initialValue: toRef(() => {
+    const initialVal = props.modelValue || groupModelOptions.value[0]
+
+    return initialVal.value ?? initialVal
+  }),
 })
 
 // ℹ️ Inject active tab so we don't have to use `v-model` on `ATabs` and `AViews`
@@ -134,6 +140,10 @@ function handleTabClick(tab: ATabProps | string, index: number) {
   const value = options.value[index]?.value
   selectTab(value)
   emit('update:modelValue', value)
+}
+
+const { trigger: triggerActiveTabWatcher } = watchTriggerable(activeTab, val => {
+  const index = options.value.findIndex(option => option.value === val)
 
   // Set active tab ref to set active indicator styles
   refActiveTab.value = refTabs.value[index]
@@ -144,22 +154,22 @@ function handleTabClick(tab: ATabProps | string, index: number) {
     inline: 'nearest',
   })
   calculateActiveIndicatorStyle()
-}
-
-onMounted(calculateActiveIndicatorStyle)
-
-// ℹ️ useGroupModel doesn't support initial value yet so we have to do it manually
-onMounted(() => {
-  if (props.modelValue) {
-    const tabToSelect = props.tabs[props.modelValue]
-    tabToSelect && handleTabClick(tabToSelect, props.modelValue)
-  }
-  else {
-    const tabToSelect = props.tabs[0]
-    tabToSelect && handleTabClick(tabToSelect, 0)
-  }
 })
 
+onMounted(triggerActiveTabWatcher)
+
+// ℹ️ useSelection doesn't support initial value yet so we have to do it manually
+// onMounted(() => {
+//   if (props.modelValue) {
+//     const tabToSelect = props.tabs[props.modelValue]
+//     tabToSelect && handleTabClick(tabToSelect, props.modelValue)
+//   }
+//   else {
+//     const tabToSelect = props.tabs[0]
+//     tabToSelect && handleTabClick(tabToSelect, 0)
+//   }
+// })
+
 // Arrow navigation & Scroll snapping
 const scrollSnapAlign = refAutoReset<'start' | 'end' | 'center' | undefined>(undefined, 1500)
 async function scrollForward() {
diff --git a/packages/anu-vue/src/components/views/AViews.vue b/packages/anu-vue/src/components/views/AViews.vue
@@ -4,7 +4,8 @@ import { h } from 'vue'
 import type { AViewsEvents } from './meta'
 import { aViewsProps } from './meta'
 import { ActiveViewSymbol, ViewGroupModel } from './symbol'
-import { useGroupModel } from '@/composables'
+import { numRange } from '@/utils/helpers'
+import { useSelection } from '@/composables'
 import { AView } from '@/components/view'
 
 const props = defineProps(aViewsProps)
@@ -25,8 +26,8 @@ if (slots.default)
 const isValuePropUsedByView = childViews.some(vnode => vnode.props && vnode.props.value)
 
 const activeTab = ref(0)
-const groupModel = useGroupModel({
-  options: isValuePropUsedByView ? childViews.map(vnode => vnode.props && vnode.props.value) : childViews.length,
+const groupModel = useSelection({
+  items: isValuePropUsedByView ? childViews.map(vnode => vnode.props && vnode.props.value) : numRange(childViews.length),
 })
 groupModel.select(props.modelValue)
 watch(() => props.modelValue, value => groupModel.select(value))
diff --git a/packages/anu-vue/src/components/views/symbol.ts b/packages/anu-vue/src/components/views/symbol.ts
@@ -1,6 +1,6 @@
 import type { InjectionKey } from 'vue'
-import type { useGroupModel } from '@/composables'
+import type { useSelection } from '@/composables'
 
 // Export active view symbol
 export const ActiveViewSymbol = Symbol('activeView')
-export const ViewGroupModel = Symbol('ViewGroupModel') as InjectionKey<ReturnType<typeof useGroupModel>>
+export const ViewGroupModel = Symbol('ViewGroupModel') as InjectionKey<ReturnType<typeof useSelection>>
diff --git a/packages/anu-vue/src/composables/index.ts b/packages/anu-vue/src/composables/index.ts
@@ -3,11 +3,11 @@ export * from './useCheckbox'
 export * from './useColor'
 export * from './useConfigurable'
 export * from './useDOMScrollLock'
-export * from './useGroupModel'
 export * from './useIndeterminateCheckbox'
 export * from './useLayer'
 export * from './useParent'
 export * from './useSearch'
+export * from './useSelection'
 export * from './useSort'
 export * from './useTeleport'
 
diff --git a/packages/anu-vue/src/composables/useGroupModel.ts b/packages/anu-vue/src/composables/useGroupModel.ts
diff --git a/packages/anu-vue/src/composables/useSelection.ts b/packages/anu-vue/src/composables/useSelection.ts
diff --git a/packages/anu-vue/src/index.ts b/packages/anu-vue/src/index.ts
diff --git a/packages/anu-vue/src/utils/helpers.ts b/packages/anu-vue/src/utils/helpers.ts
diff --git a/packages/anu-vue/src/utils/typescripts.ts b/packages/anu-vue/src/utils/typescripts.ts
