docs(useGroupModel): Demos separated for readability

Author: jd-solanki

packages/documentation/docs/demos/composables/useGroupModel/DemoUseGroupModelBasic.vue

@@ -7,17 +7,6 @@ const { options, select, value } = useGroupModel<string>({
   options: ['apple', 'banana', 'orange', 'watermelon'],
   multi: isMultiEnabled,
 })
-
-const { options: countOptions, select: countSelect, value: countValue } = useGroupModel({ options: 3 })
-
-const { options: objOptions, select: objSelect } = useGroupModel({
-  options: [
-    { 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' },
-  ],
-})
 </script>
 
 <template>
@@ -42,37 +31,5 @@ const { options: objOptions, select: objSelect } = useGroupModel({
         ? value ? [...value].join(', ') : String(value)
         : String(value)
     }}</small>
-
-    <hr class="!my-12 block">
-
-    <div class="flex flex-wrap gap-8 mb-4">
-      <ABtn
-        v-for="option in countOptions"
-        :key="option.value"
-        :variant="option.isSelected ? 'fill' : 'light'"
-        @click="countSelect(option.value)"
-      >
-        Index: {{ option.value }}
-      </ABtn>
-    </div>
-    <small>Selected: {{ String(countValue) }}</small>
-
-    <hr class="!my-12 block">
-
-    <div class="flex flex-wrap gap-6 mb-4">
-      <div
-        v-for="option in objOptions"
-        :key="option.value"
-        class="flex flex-col gap-1 items-center cursor-pointer"
-        :class="option.isSelected && 'text-primary'"
-        @click="objSelect(option.value)"
-      >
-        <i
-          :class="option.value.icon"
-          class="text-lg"
-        />
-        <span>{{ option.value.title }}</span>
-      </div>
-    </div>
   </div>
 </template>

packages/documentation/docs/demos/composables/useGroupModel/DemoUseGroupModelIndexed.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { useGroupModel } from 'anu-vue'
+const { options, select, value } = useGroupModel({
+  options: 3,
+})
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-8 mb-4">
+    <ABtn
+      v-for="option in options"
+      :key="option.value"
+      :variant="option.isSelected ? 'fill' : 'light'"
+      @click="select(option.value)"
+    >
+      Index: {{ option.value }}
+    </ABtn>
+  </div>
+  <small>Selected: {{ String(value) }}</small>
+</template>

packages/documentation/docs/demos/composables/useGroupModel/DemoUseGroupModelObject.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { useGroupModel } from 'anu-vue'
+
+const { options, select, value } = useGroupModel({
+  options: [
+    { 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' },
+  ],
+})
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-6 mb-4">
+    <div
+      v-for="option in options"
+      :key="option.value.title"
+      class="flex flex-col gap-1 items-center cursor-pointer"
+      :class="option.isSelected && 'text-primary'"
+      @click="select(option.value)"
+    >
+      <i
+        :class="option.value.icon"
+        class="text-lg"
+      />
+      <span>{{ option.value.title }}</span>
+    </div>
+  </div>
+  <small>Selected: {{ JSON.stringify(value) }}</small>
+</template>

packages/documentation/docs/guide/composables/useGroupModel.md

@@ -7,11 +7,47 @@
 
 `useGroupModel` allows you to create `v-model` like binding for a group.
 
+You can use `multi` property to enable selecting multiple values from options.
+
 <DemoUseGroupModelBasic />
 
 <template #code>
 
-<<< @/demos/composables/useGroupModel/DemoUseGroupModelBasic.vue
+<<< @/demos/composables/useGroupModel/DemoUseGroupModelBasic.vue{6-9}
+
+</template>
+
+</Demo>
+
+<!-- 👉 Indexed -->
+<Demo>
+
+## Indexed
+
+You can also create options without predefined value. Pass any positive number to `options` property and it will create index based options.
+
+<DemoUseGroupModelIndexed />
+
+<template #code>
+
+<<< @/demos/composables/useGroupModel/DemoUseGroupModelIndexed.vue{4}
+
+</template>
+
+</Demo>
+
+<!-- 👉 Object -->
+<Demo>
+
+## Object
+
+description
+
+<DemoUseGroupModelObject />
+
+<template #code>
+
+<<< @/demos/composables/useGroupModel/DemoUseGroupModelObject.vue{4-11}
 
 </template>