feat: add clearable props for text field

Author: lukicenturi

example/src/views/TextFieldView.vue

@@ -183,6 +183,27 @@ const textFields = ref<TextFieldData[]>([
     append: 'Append',
     textColor: 'primary',
   },
+  {
+    value: '',
+    color: 'primary',
+    append: 'Append',
+    clearable: true,
+  },
+  {
+    value: '',
+    color: 'primary',
+    variant: 'filled',
+    append: 'Append',
+    clearable: true,
+  },
+  {
+    value: '',
+    color: 'primary',
+    variant: 'outlined',
+    append: 'Append',
+    clearable: true,
+    textColor: 'primary',
+  },
 ]);
 
 const revealableTextFields = ref<TextFieldData[]>([
@@ -234,6 +255,14 @@ const revealableTextFields = ref<TextFieldData[]>([
     hint: 'lorem ipsum hint',
     disabled: false,
   },
+  {
+    color: 'info',
+    variant: 'outlined',
+    label: 'API Key',
+    textColor: 'info',
+    clearable: true,
+    value: 'some values',
+  },
 ]);
 </script>
 

src/components/forms/revealable-text-field/RevealableTextField.vue

@@ -12,8 +12,8 @@ export interface Props {
   placeholder?: string;
   disabled?: boolean;
   variant?: 'default' | 'filled' | 'outlined';
-  color?: 'grey' | ContextColorsType;
-  textColor?: 'grey' | ContextColorsType;
+  color?: ContextColorsType;
+  textColor?: ContextColorsType;
   dense?: boolean;
   hint?: string;
   errorMessages?: string[];
@@ -22,6 +22,7 @@ export interface Props {
   prependIcon?: RuiIcons;
   appendIcon?: RuiIcons;
   readonly?: boolean;
+  clearable?: boolean;
 }
 
 defineOptions({
@@ -34,7 +35,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: '',
   placeholder: '',
   variant: 'default',
-  color: 'grey',
+  color: undefined,
   textColor: undefined,
   hint: '',
   errorMessages: () => [],
@@ -63,25 +64,23 @@ const slots = useSlots();
       <slot name="prepend" />
     </template>
     <template #append>
-      <div class="flex items-center">
-        <RuiButton
-          :disabled="disabled"
-          tabindex="-1"
-          variant="text"
-          type="button"
-          icon
-          class="-mr-1 !p-2"
-          @click="hidden = !hidden"
-        >
-          <RuiIcon
-            class="text-black/[.54] dark:text-white/[.56]"
-            size="20"
-            :name="hidden ? 'eye-off-line' : 'eye-line'"
-          />
-        </RuiButton>
+      <RuiButton
+        :disabled="disabled"
+        tabindex="-1"
+        variant="text"
+        type="button"
+        icon
+        class="!p-2"
+        @click="hidden = !hidden"
+      >
+        <RuiIcon
+          class="text-black/[.54] dark:text-white/[.56]"
+          size="20"
+          :name="hidden ? 'eye-off-line' : 'eye-line'"
+        />
+      </RuiButton>
 
-        <slot name="append" />
-      </div>
+      <slot name="append" />
     </template>
   </RuiTextField>
 </template>

src/components/forms/text-field/TextField.spec.ts

@@ -37,10 +37,11 @@ describe('Forms/TextField', () => {
   });
 
   it('passes color props', async () => {
-    const wrapper = createWrapper();
-    expect(wrapper.find('div[class*=wrapper]').classes()).toMatch(/_grey_/);
-
-    await wrapper.setProps({ color: 'primary' });
+    const wrapper = createWrapper({
+      propsData: {
+        color: 'primary',
+      },
+    });
     expect(wrapper.find('div[class*=wrapper]').classes()).toMatch(/_primary_/);
 
     await wrapper.setProps({ color: 'secondary' });

src/components/forms/text-field/TextField.stories.ts

@@ -177,4 +177,14 @@ export const Readonly: Story = {
   },
 };
 
+export const Clearable: Story = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    variant: 'outlined',
+    clearable: true,
+    value: 'Clearable text',
+  },
+};
+
 export default meta;

src/components/forms/text-field/TextField.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { logicOr } from '@vueuse/math';
+import { logicAnd, logicNot, logicOr } from '@vueuse/math';
 import { objectOmit } from '@vueuse/shared';
 import { type ContextColorsType } from '@/consts/colors';
-import Icon from '@/components/icons/Icon.vue';
+import Icon, { default as RuiIcon } from '@/components/icons/Icon.vue';
+import { default as RuiButton } from '@/components/buttons/button/Button.vue';
 import { type RuiIcons } from '~/src';
 
 export interface Props {
@@ -11,8 +12,8 @@ export interface Props {
   placeholder?: string;
   disabled?: boolean;
   variant?: 'default' | 'filled' | 'outlined';
-  color?: 'grey' | ContextColorsType;
-  textColor?: 'grey' | ContextColorsType;
+  color?: ContextColorsType;
+  textColor?: ContextColorsType;
   dense?: boolean;
   hint?: string;
   errorMessages?: string[];
@@ -21,6 +22,7 @@ export interface Props {
   prependIcon?: RuiIcons;
   appendIcon?: RuiIcons;
   readonly?: boolean;
+  clearable?: boolean;
 }
 
 defineOptions({
@@ -34,7 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
   placeholder: '',
   disabled: false,
   variant: 'default',
-  color: 'grey',
+  color: undefined,
   textColor: undefined,
   dense: false,
   hint: '',
@@ -44,13 +46,23 @@ const props = withDefaults(defineProps<Props>(), {
   prependIcon: undefined,
   appendIcon: undefined,
   readonly: false,
+  clearable: false,
 });
 
 const emit = defineEmits<{
   (e: 'input', modelValue: string): void;
+  (e: 'click:clear'): void;
 }>();
 
-const { label, value, errorMessages, successMessages } = toRefs(props);
+const {
+  label,
+  value,
+  clearable,
+  disabled,
+  readonly,
+  errorMessages,
+  successMessages,
+} = toRefs(props);
 
 const labelWithQuote = computed(() => {
   const labelVal = get(label);
@@ -85,6 +97,21 @@ const hasMessages = logicOr(hasError, hasSuccess);
 const css = useCssModule();
 const attrs = useAttrs();
 const slots = useSlots();
+
+const clearIconClicked = () => {
+  set(internalValue, '');
+  emit('click:clear');
+};
+
+const input = ref();
+const { focused } = useFocus(input);
+
+const showClearIcon = logicAnd(
+  clearable,
+  internalValue,
+  logicNot(disabled),
+  logicNot(readonly),
+);
 </script>
 
 <template>
@@ -105,16 +132,17 @@ const slots = useSlots();
         },
       ]"
     >
-      <div class="flex items-center shrink-0">
-        <div v-if="slots.prepend" :class="css.prepend">
+      <div class="flex items-center gap-1 shrink-0" :class="css.prepend">
+        <div v-if="slots.prepend">
           <slot name="prepend" />
         </div>
-        <div v-else-if="prependIcon" :class="[css.icon, css.prepend]">
+        <div v-else-if="prependIcon" :class="[css.icon]">
           <Icon :name="prependIcon" />
         </div>
       </div>
       <div ref="innerWrapper" class="flex flex-1 overflow-hidden">
         <input
+          ref="input"
           v-model="internalValue"
           :placeholder="placeholder || ' '"
           :class="css.input"
@@ -133,11 +161,23 @@ const slots = useSlots();
           <legend />
         </fieldset>
       </div>
-      <div class="flex items-center shrink-0">
-        <div v-if="slots.append" :class="css.append">
+      <div class="flex items-center gap-1 shrink-0" :class="css.append">
+        <RuiButton
+          v-if="showClearIcon"
+          :class="{ hidden: !focused }"
+          variant="text"
+          type="button"
+          icon
+          class="!p-2"
+          :color="color"
+          @click.stop="clearIconClicked()"
+        >
+          <RuiIcon name="close-line" size="20" />
+        </RuiButton>
+        <div v-if="slots.append">
           <slot name="append" />
         </div>
-        <div v-else-if="appendIcon" :class="[css.icon, css.append]">
+        <div v-else-if="appendIcon" :class="[css.icon]">
           <Icon :name="appendIcon" />
         </div>
       </div>
@@ -281,11 +321,15 @@ const slots = useSlots();
   }
 
   .prepend {
-    @apply mr-2;
+    &:not(:empty) {
+      @apply mr-2;
+    }
   }
 
   .append {
-    @apply ml-2;
+    &:not(:empty) {
+      @apply ml-2;
+    }
   }
 
   @each $color in c.$context-colors {
@@ -359,11 +403,15 @@ const slots = useSlots();
     @apply pt-0;
 
     .prepend {
-      @apply ml-3 mr-0;
+      &:not(:empty) {
+        @apply ml-3 mr-0;
+      }
     }
 
     .append {
-      @apply mr-3 ml-0;
+      &:not(:empty) {
+        @apply mr-3 ml-0;
+      }
     }
 
     .input {