@volverjs/ui-vue 0.0.10-beta.53 → 0.0.10-beta.54

package/src/components/VvCheckbox/VvCheckbox.vue

@@ -170,10 +170,10 @@ export default {
             v-model="localModelValue"
             type="checkbox"
             class="vv-checkbox__input"
-            :name="name"
+            :name
             :disabled="isDisabled"
             :value="hasValue"
-            :tabindex="tabindex"
+            :tabindex
             :aria-invalid="isInvalid"
             :aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
             :aria-errormessage="hasInvalidLabelOrSlot ? hasHintId : undefined"

package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue

@@ -43,6 +43,7 @@ const bemCssClasses = useModifiers(
     computed(() => ({
         disabled: disabled.value,
         readonly: readonly.value,
+        required: props.required,
         horizontal: !vertical.value,
         valid: valid.value,
         invalid: invalid.value,
@@ -56,6 +57,7 @@ function getOptionProps(option: string | Option, index: number) {
         name: props.name,
         label: getOptionLabel(option),
         value: getOptionValue(option),
+        required: props.required,
     }
 }
 const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots)

package/src/components/VvInputFile/VvInputFile.vue

@@ -43,10 +43,13 @@ const bemCssClasses = useModifiers(
     'vv-input-file',
     modifiers,
     computed(() => ({
-        'dragging': isDragging.value,
-        'loading': props.loading && !hasProgress.value,
         'valid': props.valid === true,
         'invalid': props.invalid === true,
+        'loading': props.loading && !hasProgress.value,
+        'disabled': props.disabled,
+        'required': props.required,
+        'readonly': props.readonly,
+        'dragging': isDragging.value,
         'icon-before': !!hasIconBefore.value,
         'icon-after': !!hasIconAfter.value,
         'drop-area': hasDropArea.value,
@@ -325,18 +328,19 @@ export default {
                 :id="hasId"
                 ref="inputEl"
                 type="file"
-                :readonly="readonly"
-                :disabled="disabled"
-                :placeholder="placeholder"
+                :readonly
+                :disabled
+                :required
+                :placeholder
                 :aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
                 :aria-invalid="invalid"
                 :aria-errormessage="
                     hasInvalidLabelOrSlot ? hasHintId : undefined
                 "
                 :multiple="isMultiple"
-                :accept="accept"
-                :capture="capture"
-                :name="name"
+                :accept
+                :capture
+                :name
                 @change="onChange"
             >
             <progress

package/src/components/VvInputFile/index.ts

@@ -9,6 +9,7 @@ import {
     LoadingProps,
     ModifiersProps,
     ReadonlyProps,
+    RequiredProps,
     ValidProps,
 } from '../../props'
 import { ACTION_ICONS, type VvIconProps } from '../VvIcon'
@@ -35,6 +36,7 @@ export const VvInputFileProps = {
     ...LoadingProps,
     ...ReadonlyProps,
     ...DisabledProps,
+    ...RequiredProps,
     ...IconProps,
     /**
      * Input value

package/src/components/VvInputText/VvInputText.vue

@@ -174,8 +174,8 @@ const { el, mask, typed, masked, unmasked } = useIMask(
         },
     },
 )
-function updateMaskValue(newValue: string | number | undefined) {
-    if (newValue === undefined) {
+function updateMaskValue(newValue: string | number | undefined | null) {
+    if (newValue === undefined || newValue === null) {
         typed.value = ''
         unmasked.value = ''
         return

package/src/components/VvRadio/VvRadio.vue

@@ -98,10 +98,10 @@ export default {
             v-model="localModelValue"
             type="radio"
             class="vv-radio__input"
-            :name="name"
+            :name
             :disabled="isDisabled"
             :value="hasValue"
-            :tabindex="tabindex"
+            :tabindex
             :aria-invalid="isInvalid"
             :aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
             :aria-errormessage="hasInvalidLabelOrSlot ? hasHintId : undefined"

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -43,6 +43,7 @@ const bemCssClasses = useModifiers(
     computed(() => ({
         disabled: disabled.value,
         readonly: readonly.value,
+        required: props.required,
         horizontal: !vertical.value,
         valid: valid.value,
         invalid: invalid.value,
@@ -56,6 +57,7 @@ function getOptionProps(option: string | Option, index: number) {
         name: props.name,
         label: getOptionLabel(option),
         value: getOptionValue(option),
+        required: props.required,
     }
 }
 

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)

package/src/props/index.ts

@@ -1,4 +1,3 @@
-import type { PropType } from 'vue'
 import type { VvIconProps } from '@/components/VvIcon'
 import type {
     AutoPlacementOptions,
@@ -9,6 +8,7 @@ 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,
@@ -493,6 +493,7 @@ export const CheckboxRadioGroupProps = {
     ...ModifiersProps,
     ...LabelProps,
     ...LoadingProps,
+    ...RequiredProps,
     /**
      * Input value
      */

package/src/stories/InputText/InputText.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import VvInputText from '@/components/VvInputText/VvInputText.vue'
 import { Position } from '@/constants'
 import { argTypes, defaultArgs } from './InputText.settings'
-import { defaultTest } from './InputText.test'
+import { checkNullTest, checkUndefinedTest, defaultTest } from './InputText.test'
 
 const meta: Meta<typeof VvInputText> = {
     title: 'Components/InputText',
@@ -39,6 +39,42 @@ export const Default: Story = {
     play: defaultTest,
 }
 
+export const Null: Story = {
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvInputText },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: null, maskedInputValue: undefined }),
+        template: /* html */ `
+			<vv-input-text v-bind="args" v-model="inputValue" v-model:masked="maskedInputValue" :data-testData="inputValue" data-testId="element" />
+			<div>Value: <span data-testId="value">{{ JSON.stringify(inputValue) }}</span></div>
+		`,
+    }),
+    play: checkNullTest,
+}
+
+export const Undefined: Story = {
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvInputText },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: undefined, maskedInputValue: undefined }),
+        template: /* html */ `
+			<vv-input-text v-bind="args" v-model="inputValue" v-model:masked="maskedInputValue" :data-testData="inputValue" data-testId="element" />
+			<div>Value: <span data-testId="value">{{ inputValue === undefined ? 'undefined' : inputValue }}</span></div>
+		`,
+    }),
+    play: checkUndefinedTest,
+}
+
 export const Disabled: Story = {
     ...Default,
     args: {

package/src/stories/InputText/InputText.test.ts

@@ -49,6 +49,24 @@ function valueByType(type: InputType, mask?: string, id?: string) {
     }
 }
 
+export async function checkNullTest({ canvasElement }: PlayAttributes) {
+    const element = await within(canvasElement).findByTestId('element')
+    const value = await within(canvasElement).findByTestId('value')
+    const input = element.getElementsByTagName('input')[0]
+
+    await expect(input).toHaveProperty('value', '')
+    await expect(value.innerHTML).toEqual('null')
+}
+
+export async function checkUndefinedTest({ canvasElement }: PlayAttributes) {
+    const element = await within(canvasElement).findByTestId('element')
+    const value = await within(canvasElement).findByTestId('value')
+    const input = element.getElementsByTagName('input')[0]
+
+    await expect(input).toHaveProperty('value', '')
+    await expect(value.innerHTML).toEqual('undefined')
+}
+
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
     const element = await within(canvasElement).findByTestId('element')
     const value = await within(canvasElement).findByTestId('value')

package/src/stories/Textarea/Textarea.stories.ts

@@ -31,7 +31,7 @@ export const Default: Story = {
 				<template #after v-if="args.after"><div class="flex" v-html="args.after"></div></template>
 				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
 			</vv-textarea>
-			<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+			<div>Value: <span data-testId="value">{{ inputValue }}</span></div> 
 		`,
     }),
     play: defaultTest,