@volverjs/ui-vue 0.0.10-beta.50 → 0.0.10-beta.51

package/src/components/VvCombobox/VvCombobox.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts" generic="T extends string | Option">
 import type { Ref } from 'vue'
-import type { Option } from '../../types/generic'
 import { toRefs } from 'vue'
-import { useVvComboboxProps, type VvComboboxEvents } from '.'
+import type { Option } from '../../types/generic'
 import { DropdownRole } from '../../constants'
 import HintSlotFactory from '../common/HintSlot'
 import VvBadge from '../VvBadge/VvBadge.vue'
@@ -12,6 +11,7 @@ import VvDropdownOptgroup from '../VvDropdown/VvDropdownOptgroup.vue'
 import VvDropdownOption from '../VvDropdown/VvDropdownOption.vue'
 import VvIcon from '../VvIcon/VvIcon.vue'
 import VvSelect from '../VvSelect/VvSelect.vue'
+import { type VvComboboxEvents, useVvComboboxProps } from '.'
 
 // props, emit and slots
 // WARNING: This is a provisiaonal implementation, it may change in the future
@@ -124,6 +124,7 @@ const {
     iconPosition,
     modifiers,
     disabled,
+    required,
     readonly,
     loading,
     valid,
@@ -198,6 +199,7 @@ const bemCssClasses = useModifiers(
     modifiers,
     computed(() => ({
         'disabled': disabled.value,
+        'required': required.value,
         'loading': isLoading.value,
         'readonly': readonly.value,
         'icon-before': hasIconBefore.value !== undefined,

package/src/components/VvCombobox/index.ts

@@ -14,6 +14,7 @@ import {
     ModifiersProps,
     OptionsProps,
     ReadonlyProps,
+    RequiredProps,
     TabindexProps,
     ValidProps,
 } from '../../props'
@@ -44,6 +45,7 @@ export const VvComboboxProps = {
     ...FloatingLabelProps,
     ...DropdownProps,
     ...LabelProps,
+    ...RequiredProps,
     /**
      * Dropdown show / hide transition name
      */

package/src/components/VvInputText/VvInputText.vue

@@ -402,6 +402,7 @@ const bemCssClasses = useModifiers(
         'invalid': invalid.value,
         'loading': loading.value,
         'disabled': props.disabled,
+        'required': props.required,
         'readonly': props.readonly,
         'icon-before': !!hasIconBefore.value,
         'icon-after': !!iconAfter.value,

package/src/components/VvTextarea/VvTextarea.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { TextareaHTMLAttributes } from 'vue'
-import { VvTextareaEvents, VvTextareaProps } from '.'
 import HintSlotFactory from '../common/HintSlot'
 import VvIcon from '../VvIcon/VvIcon.vue'
+import { VvTextareaEvents, VvTextareaProps } from '.'
 
 // props, emit and slots
 const props = defineProps(VvTextareaProps)
@@ -168,7 +168,7 @@ export default {
 <template>
     <div :class="bemCssClasses">
         <label v-if="label" :for="hasId" class="vv-textarea__label">
-            {{ label }}
+            {{ label }} <span v-if="required">*</span>
         </label>
         <div class="vv-textarea__wrapper">
             <!-- @slot Slot to replace icon before textarea -->

package/src/props/index.ts

@@ -1,3 +1,4 @@
+import type { PropType } from 'vue'
 import type { VvIconProps } from '@/components/VvIcon'
 import type {
     AutoPlacementOptions,
@@ -8,7 +9,6 @@ import type {
 } from '@/types/floating-ui'
 import type { Option } from '@/types/generic'
 import type { NavItem } from '@/types/nav'
-import type { PropType } from 'vue'
 import {
     ActionTag,
     ButtonType,
@@ -96,6 +96,16 @@ export const DisabledProps = {
     },
 }
 
+export const RequiredProps = {
+    /**
+     * Whether the form control is required
+     */
+    required: {
+        type: Boolean,
+        default: false,
+    },
+}
+
 export const SelectedProps = {
     /**
      * Whether the item is selected
@@ -442,10 +452,7 @@ export const InputTextareaProps = {
      * Available for all input types except color
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
      */
-    required: {
-        type: Boolean,
-        default: false,
-    },
+    ...RequiredProps,
 }
 
 export const CheckboxRadioProps = {