fix(TextField): clearable prop not showing the clear icon

rotki · Sep 26, 2024 · fac26ea · fac26ea
1 parent 73a36a2
commit fac26ea
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 97 deletions.
diff --git a/example/src/views/TextFieldView.vue b/example/src/views/TextFieldView.vue
@@ -10,202 +10,202 @@ import type { Slots } from '@/types';
 
 type TextFieldData = TextFieldProps &
   Slots & {
-    value?: string;
+    modelValue: string;
   };
 
 type RevealableTextFieldData = RevealableTextFieldProps &
   Slots & {
-    value?: string;
+    modelValue: string;
   };
 
 const textFields = ref<TextFieldData[]>([
-  { value: '', color: 'primary', textColor: 'primary' },
-  { value: '', color: 'secondary', textColor: 'secondary' },
-  { value: '', color: 'error', textColor: 'error' },
-  { value: '', color: 'warning', textColor: 'warning' },
-  { value: '', color: 'info', textColor: 'info' },
-  { value: '', color: 'success', textColor: 'success' },
+  { modelValue: '', color: 'primary', textColor: 'primary' },
+  { modelValue: '', color: 'secondary', textColor: 'secondary' },
+  { modelValue: '', color: 'error', textColor: 'error' },
+  { modelValue: '', color: 'warning', textColor: 'warning' },
+  { modelValue: '', color: 'info', textColor: 'info' },
+  { modelValue: '', color: 'success', textColor: 'success' },
 
-  { value: '', color: 'primary', dense: true },
-  { value: '', color: 'secondary', dense: true },
-  { value: '', color: 'error', dense: true },
-  { value: '', color: 'warning', dense: true },
-  { value: '', color: 'info', dense: true },
-  { value: '', color: 'success', dense: true },
+  { modelValue: '', color: 'primary', dense: true },
+  { modelValue: '', color: 'secondary', dense: true },
+  { modelValue: '', color: 'error', dense: true },
+  { modelValue: '', color: 'warning', dense: true },
+  { modelValue: '', color: 'info', dense: true },
+  { modelValue: '', color: 'success', dense: true },
 
-  { value: '', color: 'primary', variant: 'filled' },
-  { value: '', color: 'secondary', variant: 'filled' },
-  { value: '', color: 'error', variant: 'filled' },
-  { value: '', color: 'warning', variant: 'filled' },
-  { value: '', color: 'info', variant: 'filled' },
-  { value: '', color: 'success', variant: 'filled' },
+  { modelValue: '', color: 'primary', variant: 'filled' },
+  { modelValue: '', color: 'secondary', variant: 'filled' },
+  { modelValue: '', color: 'error', variant: 'filled' },
+  { modelValue: '', color: 'warning', variant: 'filled' },
+  { modelValue: '', color: 'info', variant: 'filled' },
+  { modelValue: '', color: 'success', variant: 'filled' },
 
-  { value: '', color: 'primary', variant: 'filled', dense: true },
-  { value: '', color: 'secondary', variant: 'filled', dense: true },
-  { value: '', color: 'error', variant: 'filled', dense: true },
-  { value: '', color: 'warning', variant: 'filled', dense: true },
-  { value: '', color: 'info', variant: 'filled', dense: true },
-  { value: '', color: 'success', variant: 'filled', dense: true },
+  { modelValue: '', color: 'primary', variant: 'filled', dense: true },
+  { modelValue: '', color: 'secondary', variant: 'filled', dense: true },
+  { modelValue: '', color: 'error', variant: 'filled', dense: true },
+  { modelValue: '', color: 'warning', variant: 'filled', dense: true },
+  { modelValue: '', color: 'info', variant: 'filled', dense: true },
+  { modelValue: '', color: 'success', variant: 'filled', dense: true },
 
-  { value: '', color: 'primary', variant: 'outlined' },
-  { value: '', color: 'secondary', variant: 'outlined' },
-  { value: '', color: 'error', variant: 'outlined' },
-  { value: '', color: 'warning', variant: 'outlined' },
-  { value: '', color: 'info', variant: 'outlined' },
-  { value: '', color: 'success', variant: 'outlined' },
+  { modelValue: '', color: 'primary', variant: 'outlined' },
+  { modelValue: '', color: 'secondary', variant: 'outlined' },
+  { modelValue: '', color: 'error', variant: 'outlined' },
+  { modelValue: '', color: 'warning', variant: 'outlined' },
+  { modelValue: '', color: 'info', variant: 'outlined' },
+  { modelValue: '', color: 'success', variant: 'outlined' },
 
-  { value: '', color: 'primary', variant: 'outlined', dense: true },
-  { value: '', color: 'secondary', variant: 'outlined', dense: true },
-  { value: '', color: 'error', variant: 'outlined', dense: true },
-  { value: '', color: 'warning', variant: 'outlined', dense: true },
-  { value: '', color: 'info', variant: 'outlined', dense: true },
-  { value: '', color: 'success', variant: 'outlined', dense: true },
+  { modelValue: '', color: 'primary', variant: 'outlined', dense: true },
+  { modelValue: '', color: 'secondary', variant: 'outlined', dense: true },
+  { modelValue: '', color: 'error', variant: 'outlined', dense: true },
+  { modelValue: '', color: 'warning', variant: 'outlined', dense: true },
+  { modelValue: '', color: 'info', variant: 'outlined', dense: true },
+  { modelValue: '', color: 'success', variant: 'outlined', dense: true },
 
-  { value: '', color: 'primary', variant: 'outlined', disabled: true },
-  { value: '', color: 'secondary', variant: 'outlined', disabled: true },
-  { value: '', color: 'error', variant: 'outlined', disabled: true },
-  { value: '', color: 'warning', variant: 'outlined', disabled: true },
-  { value: '', color: 'info', variant: 'outlined', disabled: true },
-  { value: '', color: 'success', variant: 'outlined', disabled: true },
+  { modelValue: '', color: 'primary', variant: 'outlined', disabled: true },
+  { modelValue: '', color: 'secondary', variant: 'outlined', disabled: true },
+  { modelValue: '', color: 'error', variant: 'outlined', disabled: true },
+  { modelValue: '', color: 'warning', variant: 'outlined', disabled: true },
+  { modelValue: '', color: 'info', variant: 'outlined', disabled: true },
+  { modelValue: '', color: 'success', variant: 'outlined', disabled: true },
 
-  { value: '', color: 'primary', variant: 'outlined', hint: 'Text field hint' },
+  { modelValue: '', color: 'primary', variant: 'outlined', hint: 'Text field hint' },
   {
-    value: '',
+    modelValue: '',
     color: 'secondary',
     variant: 'outlined',
     hint: 'Text field hint',
   },
-  { value: '', color: 'error', variant: 'outlined', hint: 'Text field hint' },
-  { value: '', color: 'warning', variant: 'outlined', hint: 'Text field hint' },
-  { value: '', color: 'info', variant: 'outlined', hint: 'Text field hint' },
-  { value: '', color: 'success', variant: 'outlined', hint: 'Text field hint' },
+  { modelValue: '', color: 'error', variant: 'outlined', hint: 'Text field hint' },
+  { modelValue: '', color: 'warning', variant: 'outlined', hint: 'Text field hint' },
+  { modelValue: '', color: 'info', variant: 'outlined', hint: 'Text field hint' },
+  { modelValue: '', color: 'success', variant: 'outlined', hint: 'Text field hint' },
 
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     variant: 'outlined',
     errorMessages: ['Text field error message'],
   },
   {
-    value: '',
+    modelValue: '',
     color: 'secondary',
     variant: 'outlined',
     errorMessages: 'Text field error message',
   },
   {
-    value: '',
+    modelValue: '',
     color: 'error',
     variant: 'outlined',
     errorMessages: ['Text field error message'],
   },
   {
-    value: '',
+    modelValue: '',
     color: 'warning',
     variant: 'outlined',
     successMessages: ['Text field success message'],
   },
   {
-    value: '',
+    modelValue: '',
     color: 'info',
     variant: 'outlined',
     successMessages: 'Text field success message',
   },
   {
-    value: '',
+    modelValue: '',
     color: 'success',
     variant: 'outlined',
     successMessages: ['Text field success message'],
   },
 
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     appendIcon: 'arrow-right-line',
   },
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     variant: 'filled',
     appendIcon: 'arrow-right-line',
   },
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     variant: 'outlined',
     appendIcon: 'arrow-right-line',
     textColor: 'primary',
   },
 
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     prependIcon: 'arrow-right-line',
   },
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     variant: 'filled',
     prependIcon: 'arrow-right-line',
   },
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     variant: 'outlined',
     prependIcon: 'arrow-right-line',
     textColor: 'primary',
   },
 
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     prepend: 'Prepend',
   },
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     variant: 'filled',
     prepend: 'Prepend',
     textColor: 'primary',
   },
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     variant: 'outlined',
     prepend: 'Prepend',
   },
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     append: 'Append',
   },
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     variant: 'filled',
     append: 'Append',
   },
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     variant: 'outlined',
     append: 'Append',
     textColor: 'primary',
   },
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     append: 'Append',
     clearable: true,
   },
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     variant: 'filled',
     append: 'Append',
     clearable: true,
   },
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     variant: 'outlined',
     append: 'Append',
@@ -216,43 +216,43 @@ const textFields = ref<TextFieldData[]>([
 
 const revealableTextFields = ref<RevealableTextFieldData[]>([
   {
-    value: '',
+    modelValue: '',
     color: 'primary',
     variant: 'outlined',
     label: 'Password',
     textColor: 'primary',
   },
   {
-    value: '',
+    modelValue: '',
     color: 'secondary',
     variant: 'outlined',
     label: 'Password',
     textColor: 'secondary',
   },
   {
-    value: '',
+    modelValue: '',
     color: 'error',
     variant: 'outlined',
     label: 'Password',
     textColor: 'error',
   },
   {
-    value: '',
+    modelValue: '',
     color: 'warning',
     variant: 'outlined',
     label: 'Password',
     textColor: 'warning',
   },
   {
-    value: '',
+    modelValue: '',
     color: 'info',
     variant: 'outlined',
     label: 'API Key',
     textColor: 'info',
     disabled: true,
   },
   {
-    value: 'some secret key',
+    modelValue: 'some secret key',
     color: 'success',
     variant: 'outlined',
     label: 'API Secret',
@@ -269,7 +269,7 @@ const revealableTextFields = ref<RevealableTextFieldData[]>([
     label: 'API Key',
     textColor: 'info',
     clearable: true,
-    value: 'some values',
+    modelValue: 'some values',
   },
 ]);
 </script>
@@ -286,10 +286,10 @@ const revealableTextFields = ref<RevealableTextFieldData[]>([
       <RuiTextField
         v-for="(field, i) in textFields"
         :key="i"
-        v-model="field.value"
+        v-model="field.modelValue"
         :label="field.color"
         placeholder="Placeholder"
-        v-bind="field"
+        v-bind="objectOmit(field, ['modelValue'])"
       >
         <template
           v-if="field.prepend"
@@ -315,9 +315,9 @@ const revealableTextFields = ref<RevealableTextFieldData[]>([
       <RuiRevealableTextField
         v-for="(field, i) in revealableTextFields"
         :key="i"
-        v-model="field.value"
+        v-model="field.modelValue"
         placeholder="Placeholder"
-        v-bind="objectOmit(field, ['value', 'append', 'prepend'])"
+        v-bind="objectOmit(field, ['modelValue', 'append', 'prepend'])"
       />
     </div>
   </div>

diff --git a/src/components/forms/revealable-text-field/RuiRevealableTextField.stories.ts b/src/components/forms/revealable-text-field/RuiRevealableTextField.stories.ts
@@ -2,7 +2,8 @@ import { contextColors } from '@/consts/colors';
 import RuiRevealableTextField, { type Props } from '@/components/forms/revealable-text-field/RuiRevealableTextField.vue';
 import type { Meta, StoryFn, StoryObj } from '@storybook/vue3';
 
-const render: StoryFn<Props> = args => ({
+type RuiRevealableTextFieldProps = Props & { modelValue: string };
+const render: StoryFn<RuiRevealableTextFieldProps> = args => ({
   components: { RuiRevealableTextField },
   setup() {
     const modelValue = computed({
@@ -19,7 +20,7 @@ const render: StoryFn<Props> = args => ({
   template: `<RuiRevealableTextField v-model="modelValue" v-bind="args" />`,
 });
 
-const meta: Meta<Props> = {
+const meta: Meta<RuiRevealableTextFieldProps> = {
   args: {
     errorMessages: [],
     successMessages: [],
@@ -63,7 +64,7 @@ const meta: Meta<Props> = {
   title: 'Components/Forms/RevealableTextField',
 };
 
-type Story = StoryObj<Props>;
+type Story = StoryObj<RuiRevealableTextFieldProps>;
 
 export const Default: Story = {
   args: {