fix: v-model issue in UiHorizontalPaging stories (#493)

* fix: remove quote's from getArgTypes props default values

* fix: aliased import in UiMenu

* fix: v-model issue in UiHorizontalPaging stories

* feat: add useArgs composable

.storybook/composable/useArgs.ts

@@ -0,0 +1,21 @@
+import {
+  computed,
+  useAttrs,
+} from "vue";
+
+export function useArgs(excludedAttrs:string[] = []) {
+  const attrs = useAttrs();
+  const args = computed(() => (Object.keys(attrs).reduce((object, key) => {
+    if (!excludedAttrs.includes(key)) {
+      return {
+        ...object,
+        [key]: attrs[key],
+      };
+    }
+    return object;
+  }, {})));
+  return {
+    attrs,
+    args
+  }
+}

.storybook/decorators/withVModel.ts

@@ -1,4 +1,5 @@
 import {
+  ref,
   computed,
   defineComponent,
   provide,
@@ -13,9 +14,11 @@ export const withVModel = (story, { id, args }) => {
     name: 'DWithVModel',
     inheritAttrs: false,
     setup() {
+      const modelValueFallback = ref(null)
       const modelValue = computed({
-        get: ()=>(args.modelValue),
+        get: ()=>(modelValueFallback.value || args.modelValue),
         set: (newValue) => {
+          modelValueFallback.value = newValue;
           updateArgs({ modelValue: newValue });
         }
       })

src/components/organisms/UiHorizontalPaging/stories/MobileMenu.vue

@@ -26,7 +26,7 @@
       ref="horizontalPagingTemplateRefs"
       v-model="value"
       v-bind="args"
-      :menu-template-refs="menuTemplateRef"
+      :menu-template-ref="menuTemplateRef"
     >
       <template
         #menu="{
@@ -78,7 +78,6 @@
 import {
   ref,
   computed,
-  useAttrs,
   defineOptions,
   inject,
   nextTick,
@@ -93,15 +92,18 @@ import {
   UiLink,
   UiHeading,
 } from '@infermedica/component-library';
+import { useArgs } from '@sb/composable/useArgs';
 import MedicalCertification from './_internal/MedicalCertification.vue';
 import TermsOfService from './_internal/TermsOfService.vue';
 import InterviewId from './_internal/InterviewId.vue';
 import { focusElement } from '../../../../utilities/helpers';
 
 defineOptions({ inheritAttrs: false });
-const attrs = useAttrs();
-const args = computed(() => (attrs));
-const value = inject('value', []);
+const {
+  attrs,
+  args,
+} = useArgs([ 'modelValue' ]);
+const value = inject('value', ref([]));
 
 const horizontalPagingTemplateRefs = ref(null);
 const isActive = computed(() => (horizontalPagingTemplateRefs.value?.isActive));

src/components/organisms/UiHorizontalPaging/stories/Multilevel.vue

@@ -39,27 +39,22 @@
 
 <script setup lang="ts">
 import {
-  computed,
-  useAttrs,
   defineOptions,
   inject,
 } from 'vue';
 import {
   UiHorizontalPaging,
   UiLoader,
 } from '@infermedica/component-library';
+import { useArgs } from '@sb/composable/useArgs';
 
 defineOptions({ inheritAttrs: false });
-const attrs = useAttrs();
-const args = computed(() => (Object.keys(attrs).reduce((object, key) => {
-  if (key !== 'items') {
-    return {
-      ...object,
-      [key]: attrs[key],
-    };
-  }
-  return object;
-}, {})));
+const {
+  attrs, args,
+} = useArgs([
+  'modelValue',
+  'items',
+]);
 const value = inject('value', []);
 const itemsA = [
   {