@volverjs/ui-vue 0.0.2 → 0.0.3-beta.3

package/src/components/VvAccordion/VvAccordion.vue

@@ -5,10 +5,7 @@
 </script>
 
 <script setup lang="ts">
-	import { computed, useAttrs, ref } from 'vue'
-	import { useToggle } from '@vueuse/core'
 	import { nanoid } from 'nanoid'
-	import { useBemModifiers } from '@/composables/useModifiers'
 	import {
 		VvAccordionEvents,
 		VvAccordionProps,

package/src/components/VvAccordion/index.ts

@@ -1,6 +1,5 @@
-import { type ExtractPropTypes, toRefs, type Ref } from 'vue'
+import type { ExtractPropTypes, Ref } from 'vue'
 import type IAccordionGroupState from '@/composables/group/types/IAccordionGroupState'
-import { useInjectedGroupState } from '@/composables/group/useInjectedGroupState'
 import { VV_ACCORDION_GROUP } from '@/constants'
 
 export const VvAccordionProps = {

package/src/components/VvAccordionGroup/VvAccordionGroup.vue

@@ -5,11 +5,9 @@
 </script>
 
 <script setup lang="ts">
-	import { type Ref, computed, ref, toRefs, watchEffect } from 'vue'
+	import type { Ref } from 'vue'
 	import type IAccordionGroupState from '@/composables/group/types/IAccordionGroupState'
 	import { VV_ACCORDION_GROUP } from '@/constants'
-	import { useProvideGroupState } from '@/composables/group/useProvideGroupState'
-	import { useBemModifiers } from '@/composables/useModifiers'
 	import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
 	import {
 		VvAccordionGroupProps,

package/src/components/VvBadge/VvBadge.vue

@@ -5,7 +5,6 @@
 </script>
 
 <script setup lang="ts">
-	import { useBemModifiers } from '@/composables/useModifiers'
 	import { VvBadgeProps } from '@/components/VvBadge'
 
 	const props = defineProps(VvBadgeProps)

package/src/components/VvButton/VvButton.vue

@@ -5,11 +5,8 @@
 </script>
 
 <script setup lang="ts">
-	import { inject, useAttrs, useSlots, computed } from 'vue'
 	import { nanoid } from 'nanoid'
-	import { contains, equals } from '@/utils/ObjectUtilities'
 	import { type IVolver, VOLVER_PREFIX } from '@/Volver'
-	import { useBemModifiers } from '@/composables/useModifiers'
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
 	import {
 		ButtonIconPosition,

package/src/components/VvButton/index.ts

@@ -1,14 +1,6 @@
-import {
-	type Ref,
-	type PropType,
-	type ExtractPropTypes,
-	toRefs,
-	ref,
-	computed,
-} from 'vue'
-import { DisabledProps, ModifiersProps, UnselectableProps } from '@/props'
+import type { Ref, PropType, ExtractPropTypes } from 'vue'
 import type IButtonGroupState from '@/composables/group/types/IButtonGroupState'
-import { useInjectedGroupState } from '@/composables/group/useInjectedGroupState'
+import { DisabledProps, ModifiersProps, UnselectableProps } from '@/props'
 import { VV_BUTTON_GROUP } from '@/constants'
 
 export enum ButtonIconPosition {

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -6,10 +6,7 @@
 
 <script setup lang="ts">
 	import type IButtonGroupState from '@/composables/group/types/IButtonGroupState'
-	import { toRefs, watchEffect, computed } from 'vue'
 	import { VV_BUTTON_GROUP } from '@/constants'
-	import { useProvideGroupState } from '@/composables/group/useProvideGroupState'
-	import { useBemModifiers } from '@/composables/useModifiers'
 	import {
 		VvButtonGroupProps,
 		VvButtonGroupEvents,

package/src/components/VvCard/VvCard.vue

@@ -5,7 +5,6 @@
 </script>
 
 <script setup lang="ts">
-	import { useBemModifiers } from '@/composables/useModifiers'
 	import { VvCardProps } from '@/components/VvCard'
 
 	// props and attrs

package/src/components/VvCheckbox/VvCheckbox.vue

@@ -5,10 +5,7 @@
 </script>
 
 <script setup lang="ts">
-	import { computed, ref, useSlots, watchEffect, watch, onMounted } from 'vue'
 	import { nanoid } from 'nanoid'
-	import { contains, equals } from '@/utils/ObjectUtilities'
-	import { useBemModifiers } from '@/composables/useModifiers'
 	import {
 		VvCheckboxProps,
 		VvCheckboxEvents,

package/src/components/VvCheckbox/index.ts

@@ -1,6 +1,5 @@
-import { type ExtractPropTypes, type Ref, toRefs } from 'vue'
+import type { ExtractPropTypes, Ref } from 'vue'
 import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
-import { useInjectedGroupState } from '@/composables/group/useInjectedGroupState'
 import { CheckboxRadioProps } from '@/props'
 import { VV_CHECK_GROUP } from '@/constants'
 

package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue

@@ -7,12 +7,7 @@
 <script setup lang="ts">
 	import type { Option } from '@/types/generic'
 	import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
-	import { useSlots, computed, toRefs } from 'vue'
 	import { VV_CHECK_GROUP } from '@/constants'
-	import { useVModel } from '@vueuse/core'
-	import { useProvideGroupState } from '@/composables/group/useProvideGroupState'
-	import { useOptions } from '@/composables/useOptions'
-	import { useBemModifiers } from '@/composables/useModifiers'
 	import { HintSlotFactory } from '@/components/common/HintSlot'
 	import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
 	import {

package/src/components/VvCombobox/VvCombobox.vue

@@ -5,14 +5,7 @@
 </script>
 
 <script setup lang="ts">
-	import { computed, ref, toRefs, useSlots, watch } from 'vue'
 	import { nanoid } from 'nanoid'
-	import { onClickOutside, refDebounced } from '@vueuse/core'
-	import { isEmpty } from '@/utils/ObjectUtilities'
-	import { useBemModifiers } from '@/composables/useModifiers'
-	import { useComponentIcon } from '@/composables/useComponentIcons'
-	import { useOptions } from '@/composables/useOptions'
-	import { useComponentFocus } from '@/composables/useComponentFocus'
 	import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
 	import VvSelect from '@/components/VvSelect/VvSelect.vue'

package/src/components/VvDialog/VvDialog.vue

@@ -5,8 +5,7 @@
 </script>
 
 <script setup lang="ts">
-	import { type DialogHTMLAttributes, computed, ref } from 'vue'
-	import { useVModel, onClickOutside } from '@vueuse/core'
+	import type { DialogHTMLAttributes } from 'vue'
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
 	import { VvDialogEvents, VvDialogProps } from '@/components/VvDialog'
 

package/src/components/VvDropdown/VvDropdown.vue

@@ -5,11 +5,7 @@
 </script>
 
 <script setup lang="ts">
-	import { computed, toRefs } from 'vue'
 	import { nanoid } from 'nanoid'
-	import { useBemModifiers } from '@/composables/useModifiers'
-	import { useOptions } from '@/composables/useOptions'
-	import { contains, equals, removeFromList } from '@/utils/ObjectUtilities'
 	import { VvDropdownProps } from '@/components/VvDropdown'
 	import type { Option } from '@/types/generic'
 

package/src/components/VvIcon/VvIcon.vue

@@ -5,11 +5,9 @@
 </script>
 
 <script setup lang="ts">
-	import { inject, toRefs, ref, computed } from 'vue'
 	import { Icon, addIcon, iconExists, type IconifyJSON } from '@iconify/vue'
 	import { type IVolver, VOLVER_PREFIX } from '@/Volver'
 	import { VvIconProps } from '@/components/VvIcon'
-	import { useBemModifiers } from '@/composables/useModifiers'
 
 	// props
 	const props = defineProps(VvIconProps)

package/src/components/VvInputText/VvInputClearAction.ts

@@ -1,4 +1,3 @@
-import { defineComponent, h } from 'vue'
 import VvIcon from '@/components/VvIcon/VvIcon.vue'
 
 export default defineComponent({

package/src/components/VvInputText/VvInputPasswordAction.ts

@@ -1,4 +1,3 @@
-import { defineComponent, ref, computed, h } from 'vue'
 import { TYPES_ICON } from '@/components/VvInputText'
 import VvIcon from '@/components/VvIcon/VvIcon.vue'
 

package/src/components/VvInputText/VvInputStepAction.ts

@@ -1,4 +1,3 @@
-import { computed, defineComponent, h } from 'vue'
 import VvIcon from '@/components/VvIcon/VvIcon.vue'
 
 export default defineComponent({

package/src/components/VvInputText/VvInputText.vue

@@ -5,24 +5,9 @@
 </script>
 
 <script setup lang="ts">
-	import {
-		computed,
-		useSlots,
-		ref,
-		toRefs,
-		unref,
-		watch,
-		type InputHTMLAttributes,
-	} from 'vue'
-	import { useElementVisibility } from '@vueuse/core'
+	import type { InputHTMLAttributes } from 'vue'
 	import { nanoid } from 'nanoid'
-	import { isEmpty } from '@/utils/ObjectUtilities'
 	import HintSlotFactory from '@/components/common/HintSlot'
-	import { useComponentIcon } from '@/composables/useComponentIcons'
-	import { useComponentFocus } from '@/composables/useComponentFocus'
-	import { useDebouncedInput } from '@/composables/useDebouncedInput'
-	import { useTextCount } from '@/composables/useTextCount'
-	import { useBemModifiers } from '@/composables/useModifiers'
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
 	import VvInputTextActionsFactory from '@/components/VvInputText/VvInputTextActions'
 	import {

package/src/components/VvInputText/VvInputTextActions.ts

@@ -1,4 +1,4 @@
-import { type Component, h, computed } from 'vue'
+import type { Component } from 'vue'
 import {
 	type VvInputTextPropsTypes,
 	INPUT_TYPES,

package/src/components/VvProgress/VvProgress.vue

@@ -5,8 +5,6 @@
 </script>
 
 <script setup lang="ts">
-	import { computed, toRefs } from 'vue'
-	import { useBemModifiers } from '@/composables/useModifiers'
 	import { VvProgressProps } from '@/components/VvProgress'
 
 	// props

package/src/components/VvRadio/VvRadio.vue

@@ -5,10 +5,7 @@
 </script>
 
 <script setup lang="ts">
-	import { computed, ref, useSlots } from 'vue'
 	import { nanoid } from 'nanoid'
-	import { contains, equals } from '@/utils/ObjectUtilities'
-	import { useBemModifiers } from '@/composables/useModifiers'
 	import {
 		VvRadioProps,
 		VvRadioEvents,

package/src/components/VvRadio/index.ts

@@ -1,7 +1,6 @@
 import type { ExtractPropTypes, Ref } from 'vue'
 import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
 import { CheckboxRadioProps } from '@/props'
-import { useInjectedGroupState } from '@/composables/group/useInjectedGroupState'
 import { VV_RADIO_GROUP } from '@/constants'
 
 export const VvRadioProps = CheckboxRadioProps

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -7,11 +7,6 @@
 <script setup lang="ts">
 	import type { Option } from '@/types/generic'
 	import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
-	import { useSlots, computed, toRefs } from 'vue'
-	import { useVModel } from '@vueuse/core'
-	import { useProvideGroupState } from '@/composables/group/useProvideGroupState'
-	import { useOptions } from '@/composables/useOptions'
-	import { useBemModifiers } from '@/composables/useModifiers'
 	import { VV_RADIO_GROUP } from '@/constants'
 	import { HintSlotFactory } from '@/components/common/HintSlot'
 	import VvRadio from '@/components/VvRadio/VvRadio.vue'

package/src/components/VvSelect/VvSelect.vue

@@ -6,24 +6,11 @@
 
 <script setup lang="ts">
 	import type { Option } from '@/types/generic'
-	import {
-		computed,
-		toRefs,
-		useSlots,
-		ref,
-		watch,
-		type SelectHTMLAttributes,
-	} from 'vue'
+	import type { SelectHTMLAttributes } from 'vue'
 	import { nanoid } from 'nanoid'
-	import { isEmpty } from '@/utils/ObjectUtilities'
-	import { useBemModifiers } from '@/composables/useModifiers'
-	import { useComponentIcon } from '@/composables/useComponentIcons'
-	import { useOptions } from '@/composables/useOptions'
-	import { useComponentFocus } from '@/composables/useComponentFocus'
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
 	import HintSlotFactory from '@/components/common/HintSlot'
 	import { VvSelectProps, VvSelectEmits } from '@/components/VvSelect'
-	import { useElementVisibility } from '@vueuse/core'
 
 	// props, emit and slots
 	const props = defineProps(VvSelectProps)

package/src/components/VvTextarea/VvTextarea.vue

@@ -5,25 +5,11 @@
 </script>
 
 <script setup lang="ts">
-	import {
-		computed,
-		useSlots,
-		ref,
-		toRefs,
-		watch,
-		type TextareaHTMLAttributes,
-	} from 'vue'
+	import type { TextareaHTMLAttributes } from 'vue'
 	import { nanoid } from 'nanoid'
-	import { isEmpty } from '@/utils/ObjectUtilities'
 	import HintSlotFactory from '@/components/common/HintSlot'
-	import { useComponentIcon } from '@/composables/useComponentIcons'
-	import { useComponentFocus } from '@/composables/useComponentFocus'
-	import { useDebouncedInput } from '@/composables/useDebouncedInput'
-	import { useTextCount } from '@/composables/useTextCount'
-	import { useBemModifiers } from '@/composables/useModifiers'
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
 	import { VvTextareaProps, VvTextareaEvents } from '@/components/VvTextarea'
-	import { useElementVisibility } from '@vueuse/core'
 
 	// props, emit and slots
 	const props = defineProps(VvTextareaProps)

package/src/components/VvTooltip/VvTooltip.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { VvTooltipProps } from '@/components/VvTooltip'
+
+const props = defineProps(VvTooltipProps)
+const { modifiers } = toRefs(props)
+
+// styles
+const { bemCssClasses: tooltipClass } = useBemModifiers('vv-tooltip', {
+	modifiers
+})
+</script>
+
+<template>
+	<span :class="[tooltipClass, `vv-tooltip--${props.position}`]" role="tooltip" inert>
+		<slot />
+	</span>
+</template>

package/src/components/VvTooltip/index.ts

@@ -0,0 +1,21 @@
+import { ModifiersProps } from '@/props'
+import type { PropType } from 'vue'
+
+export enum TooltipPosition {
+	left = 'left',
+	right = 'right',
+	top = 'top',
+	bottom = 'bottom'
+}
+
+export const VvTooltipProps = {
+	...ModifiersProps,
+	/**
+	 * Define the tooltip position
+	 * @default TooltipPosition.bottom
+	 */
+	position: {
+		type: String as PropType<TooltipPosition>,
+		default: TooltipPosition.bottom
+	}
+}

package/src/components/common/HintSlot.ts

@@ -1,14 +1,4 @@
-import {
-	type Component,
-	type ExtractPropTypes,
-	type Slots,
-	type Ref,
-	computed,
-	toRefs,
-	h,
-} from 'vue'
-import { toReactive } from '@vueuse/core'
-import { isString, resolveFieldData, isEmpty } from '@/utils/ObjectUtilities'
+import type { Component, ExtractPropTypes, Slots, Ref } from 'vue'
 
 /**
  * Merge errors from Array<string> to string errors separated from new line (\n)

package/src/composables/group/types/IAccordionGroupState.ts

@@ -1,5 +1,4 @@
 import type { Ref } from 'vue'
-
 import type IGroupState from './IGroupState'
 
 /**

package/src/composables/group/types/IButtonGroupState.ts

@@ -1,5 +1,4 @@
 import type { Ref } from 'vue'
-
 import type IGroupState from './IGroupState'
 
 /**

package/src/composables/group/types/IInputGroup.ts

@@ -1,5 +1,4 @@
 import type { Ref } from 'vue'
-
 import type IGroupState from './IGroupState'
 
 /**

package/src/composables/group/useInjectedGroupState.ts

@@ -1,6 +1,5 @@
-import { type Ref, toRef, unref, inject, computed } from 'vue'
+import type { Ref } from 'vue'
 import type IGroupState from '@/composables/group/types/IGroupState'
-import { isEmpty } from '@/utils/ObjectUtilities'
 
 /**
  * Injects a group state

package/src/composables/group/useProvideGroupState.ts

@@ -1,4 +1,3 @@
-import { provide, computed, isRef } from 'vue'
 import type IGroupState from '@/composables/group/types/IGroupState'
 
 /**

package/src/composables/useComponentFocus.ts

@@ -1,5 +1,4 @@
-import { watch, unref } from 'vue'
-import { useFocus, type MaybeElement, type MaybeElementRef } from '@vueuse/core'
+import type { MaybeElement, MaybeElementRef } from '@vueuse/core'
 
 export function useComponentFocus(
 	inputTemplateRef: MaybeElementRef<MaybeElement>,

package/src/composables/useComponentIcons.ts

@@ -1,4 +1,4 @@
-import { type Slot, type Ref, computed } from 'vue'
+import type { Slot, Ref } from 'vue'
 
 interface ComponentIconProps {
 	icon: Ref<string>

package/src/composables/useDebouncedInput.ts

@@ -1,4 +1,4 @@
-import { type Ref, computed } from 'vue'
+import type { Ref } from 'vue'
 
 export function useDebouncedInput(
 	modelValue: Ref | undefined,

package/src/composables/useModifiers.ts

@@ -1,5 +1,4 @@
-import { computed, unref, type Ref } from 'vue'
-import { kebabCase } from '@/utils/ObjectUtilities'
+import type { Ref } from 'vue'
 
 interface IBemModifiers {
 	[key: string]:

package/src/composables/useOptions.ts

@@ -1,4 +1,3 @@
-import { toRefs } from 'vue'
 import type { Option } from '@/types/generic'
 
 // eslint-disable-next-line

package/src/composables/useTextCount.ts

@@ -1,4 +1,4 @@
-import { computed, unref, type Ref } from 'vue'
+import type { Ref } from 'vue'
 
 export function useTextCount(
 	text: Ref<string | undefined | null> | string,

package/src/stories/Accordion/Accordion.stories.mdx

@@ -21,7 +21,7 @@ export const Template = (args, { argTypes }) => ({
 	setup() {
 		return { args }
 	},
-	template: `<vv-accordion data-testId="element" v-bind="args" v-model="open">
+	template: /*html*/`<vv-accordion data-testId="element" v-bind="args" v-model="open">
 					<template #summary v-if="args.summary"><div v-html="args.summary"></div></template>
 					<template #details v-if="args.details"><div v-html="args.details"></div></template>
 			   </vv-accordion>

package/src/stories/AccordionGroup/AccordionGroup.stories.mdx

@@ -21,7 +21,7 @@ export const Template = (args, { argTypes }) => ({
 			selected: null,
 		}
 	},
-	template: `<vv-accordion-group data-testId="element" v-bind="args" v-model="selected" />
+	template: /*html*/`<vv-accordion-group data-testId="element" v-bind="args" v-model="selected" />
 				<div class="mt-24">
 					Selected: <span data-testId="value">{{ selected }}</span>
 				</div>`,

package/src/stories/AccordionGroup/AccordionGroupSlots.stories.mdx

@@ -42,7 +42,7 @@ import { defaultArgs, argTypes } from './AccordionGroup.settings'
 							'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
 					}
 				},
-				template: `<vv-accordion-group data-testId="element" v-bind="args" v-model="selected">
+				template: /*html*/`<vv-accordion-group data-testId="element" v-bind="args" v-model="selected">
 							<vv-accordion name="a-1" data-testId="a-1" title="Details 1" :content="content" />
 							<vv-accordion name="a-2" title="Details 2" :content="content" />
 							<vv-accordion name="a-3" title="Details 3" :content="content" />

package/src/stories/Badge/Badge.stories.mdx

@@ -16,7 +16,7 @@ export const Template = (args, { argTypes }) => ({
 	setup() {
 		return { args }
 	},
-	template: `<vv-badge v-bind="args">
+	template: /*html*/`<vv-badge v-bind="args">
 			   		<template #default v-if="args.default"><span v-html="args.default"></span></template>	
 			   </vv-badge>`,
 })

package/src/stories/Breadcrumb/Breadcrumb.settings.ts

@@ -1,5 +1,4 @@
 import { VvBreadcrumbProps } from '@/components/VvBreadcrumb'
-import { propsToObject } from '@/utils/ObjectUtilities'
 
 export const defaultArgs = {
 	...propsToObject(VvBreadcrumbProps),

package/src/stories/Breadcrumb/Breadcrumb.stories.mdx

@@ -15,7 +15,7 @@ export const Template = (args) => ({
 	setup() {
 		return { args }
 	},
-	template: `<div class="bg-surface p-lg">
+	template: /*html*/`<div class="bg-surface p-lg">
 			     <vv-breadcrumb v-bind="args" />
 			   </div>`,
 })

package/src/stories/Breadcrumb/BreadcrumbSlots.stories.mdx

@@ -29,7 +29,7 @@ import { defaultArgs, argTypes } from './Breadcrumb.settings'
 					return { args }
 				},
 				components: { VvBreadcrumb, VvIcon },
-				template: `
+				template: /*html*/`
                 <VvBreadcrumb v-bind="args">
                     <template #label="{route, index}">
                         <VvIcon v-if="index === 0" name="home" :aria-label="route.label"  />

package/src/stories/Button/Button.stories.mdx

@@ -18,7 +18,7 @@ export const Template = (args) => ({
 	setup() {
 		return { args }
 	},
-	template: `<vv-button v-bind="args" v-model="value" name="my-button">
+	template: /*html*/`<vv-button v-bind="args" v-model="value" name="my-button">
 					<template #before v-if="args.before"><div v-html="args.before"></div></template>
 					<template #default v-if="args.default"><div v-html="args.default"></div></template>
 					<template #after v-if="args.after"><div v-html="args.after"></div></template>

package/src/stories/Button/ButtonModifiers.stories.mdx

@@ -123,7 +123,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 				setup() {
 					return { args }
 				},
-				template: `
+				template: /*html*/`
 				<div class="bg-black p-md">
 					<vv-button v-bind="args" />
 				</div>
@@ -156,7 +156,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 				setup() {
 					return { args }
 				},
-				template: `
+				template: /*html*/`
 				<div class="bg-white p-md">
 					<vv-button v-bind="args" />
 				</div>

package/src/stories/Button/ButtonSlots.stories.mdx

@@ -46,7 +46,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 					return { args }
 				},
 				components: { VvButton, VvBadge },
-				template: `<vv-button v-bind="args">
+				template: /*html*/`<vv-button v-bind="args">
 							<template #before>
 								<vv-badge value="12" modifiers="danger" />
 							</template>
@@ -77,7 +77,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 					return { args }
 				},
 				components: { VvButton, VvBadge },
-				template: `<vv-button v-bind="args">
+				template: /*html*/`<vv-button v-bind="args">
 							<template #after>
 								<vv-badge value="12" modifiers="danger" />
 							</template>
@@ -100,7 +100,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 				setup() {
 					return { args }
 				},
-				template: `<vv-button v-bind="args">
+				template: /*html*/`<vv-button v-bind="args">
 							<template #label>
 								Label <em class="italic">slot!</em>
 							</template>

package/src/stories/ButtonGroup/ButtonGroup.settings.ts

@@ -3,7 +3,6 @@ import {
 	ModifiersArgTypes,
 	UnselectableArgTypes,
 } from '@/stories/argTypes'
-import { propsToObject } from '@/utils/ObjectUtilities'
 import { VvButtonGroupProps } from '@/components/VvButtonGroup'
 import { argTypes as buttonArgTypes } from '../Button/Button.settings'
 

package/src/stories/ButtonGroup/ButtonGroup.stories.mdx

@@ -20,7 +20,7 @@ export const Template = (args, { argTypes }) => ({
 	setup() {
 		return { args }
 	},
-	template: `
+	template: /*html*/`
         <vv-button-group v-bind="args" v-model="value" data-testId="button-group">
             <vv-button name="1a" data-testId="first-button">Button 1</vv-button>
             <vv-button name="2b">Button 2</vv-button>

package/src/stories/ButtonGroup/ButtonGroupSlots.stories.mdx

@@ -20,7 +20,7 @@ export const Template = (args, { argTypes }) => ({
 	setup() {
 		return { args }
 	},
-	template: `
+	template: /*html*/`
         <vv-button-group v-bind="args" v-model="value" data-testId="button-group">
             <vv-button modifiers="primary" name="1a" data-testId="first-button">Button 1</vv-button>
             <vv-button modifiers="secondary" name="2b">Button 2</vv-button>