feat(Forms): add the ability to hide error messages via hideError p…

…rop (#138) * feat(VAutocomplete): allow hide error message via `hideError` prop * feat(VSelect): allow hide error message via `hideError` prop * feat(VMultiSelect): allow hide error message via `hideError` prop * feat(VCheckbox): allow hide error message via `hideError` prop * feat(VEditor): allow hide error message via `hideError` prop * feat(VFileUpload): allow hide error message via `hideError` prop * feat(VInputRange): allow hide error message via `hideError` prop * feat(VQuillEditor): allow hide error message via `hideError` prop * feat(VTextarea): allow hide error message via `hideError` prop
gitsindonesia · Mar 8, 2023 · 2065a21 · 2065a21
1 parent f0dfd27
commit 2065a21
Show file tree

Hide file tree

Showing 17 changed files with 121 additions and 36 deletions.
diff --git a/packages/autocomplete/src/VAutocomplete.stories.ts b/packages/autocomplete/src/VAutocomplete.stories.ts
@@ -88,7 +88,7 @@ export const Validation: Story = (args) => ({
       },
     ]);
 
-    return {onSubmit, resetForm, values, genres};
+    return {onSubmit, resetForm, values, genres, args};
   },
   template: `
     <form @submit="onSubmit" class="border-none">
@@ -97,6 +97,7 @@ export const Validation: Story = (args) => ({
         label="Genre"
         placeholder="Choose your prefered genres"
         :items="genres"
+        v-bind="args"
       />
       <div class="mt-4">
         <v-btn type="submit">Submit</v-btn>
@@ -107,6 +108,11 @@ export const Validation: Story = (args) => ({
 `,
 });
 
+export const HideError = Validation.bind({});
+HideError.args = {
+  hideError: true,
+};
+
 export const TestInputState: Story<{}> = (args) => ({
   components: {VBtn, VAutocomplete},
   setup() {

diff --git a/packages/autocomplete/src/VAutocomplete.vue b/packages/autocomplete/src/VAutocomplete.vue
@@ -35,6 +35,7 @@ export type Props = {
   wrapperClass?: string;
   validationMode?: ValidationMode
   disabled?: boolean
+  hideError?: boolean
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -193,7 +194,7 @@ const clear = () => {
       </TransitionRoot>
     </div>
   </Combobox>
-  <div v-if="errorMessage" :class="errorClass">
+  <div v-if="errorMessage && !hideError" :class="errorClass">
     {{ errorMessage }}
   </div>
 </template>

diff --git a/packages/editor/src/VEditor.stories.ts b/packages/editor/src/VEditor.stories.ts
@@ -35,11 +35,10 @@ Default.parameters = {
   },
 };
 
-
 export const VModel: Story<{}> = (args) => ({
   components: {VEditor},
   setup() {
-    const content = ref('')
+    const content = ref('');
     return {args, content};
   },
   template: `
@@ -50,7 +49,7 @@ export const VModel: Story<{}> = (args) => ({
 
 export const Label = Template.bind({});
 Label.args = {
-  label: 'Blog Content'
+  label: 'Blog Content',
 };
 Label.parameters = {
   docs: {
@@ -87,7 +86,7 @@ export const Validation: Story<{}> = (args) => ({
       alert(JSON.stringify(values));
     });
 
-    return {onSubmit, resetForm, values, errors};
+    return {onSubmit, resetForm, values, errors, args};
   },
   template: `
     <form @submit="onSubmit" class="border-none">
@@ -96,6 +95,7 @@ export const Validation: Story<{}> = (args) => ({
         name="content"
         label="Content"
         placeholder="Content"
+        v-bind="args"
       />
       <div class="mt-4">
         <v-btn type="submit">Submit</v-btn>
@@ -106,3 +106,8 @@ export const Validation: Story<{}> = (args) => ({
     </form>
 `,
 });
+
+export const HideError = Validation.bind({});
+HideError.args = {
+  hideError: true,
+};
diff --git a/packages/editor/src/VEditor.vue b/packages/editor/src/VEditor.vue
@@ -18,6 +18,7 @@ type Props = {
   errorMessages?: string[];
   readonly?: string;
   config?: Record<string, any>;
+  hideError?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -75,7 +76,11 @@ const message = computed(() => props.errorMessages[0] || errorMessage.value);
       :editor="ClassicEditor"
       :config="config"
     />
-    <div v-if="hasError" class="v-editor-error" :class="errorClass">
+    <div
+      v-if="hasError && !hideError"
+      class="v-editor-error"
+      :class="errorClass"
+    >
       {{ message }}
     </div>
   </div>

diff --git a/packages/forms/src/checkbox/VCheckbox.stories.ts b/packages/forms/src/checkbox/VCheckbox.stories.ts
@@ -21,10 +21,10 @@ export default {
       options: themeColors,
     },
   },
-  args: {
-    label: 'Checkbox',
-    name: 'myCheckbox',
-  },
+  // args: {
+  //   label: 'Checkbox',
+  //   name: 'myCheckbox',
+  // },
 } as Meta;
 
 const Template: Story = (args) => ({
@@ -128,7 +128,7 @@ export const Multiple: Story<{}> = () => ({
 `,
 });
 
-export const Validation: Story<{}> = () => ({
+export const Validation: Story<{}> = (args) => ({
   components: {VCheckbox: VCheckbox, VBtn},
   setup() {
     const schema = object({
@@ -149,14 +149,15 @@ export const Validation: Story<{}> = () => ({
       alert(JSON.stringify(values));
     });
 
-    return {onSubmit, resetForm, values, errors};
+    return {onSubmit, resetForm, values, errors, args};
   },
   template: `
     <form @submit="onSubmit" class="border-none">
       <v-checkbox
         wrapper-class="mb-4"
         name="agreement"
         label="Agreement"
+        v-bind="args"
       />
       <div class="mt-4">
         <v-btn type="submit">Submit</v-btn>
@@ -168,6 +169,11 @@ export const Validation: Story<{}> = () => ({
 `,
 });
 
+export const HideError = Validation.bind({});
+HideError.args = {
+  hideError: true,
+};
+
 export const ValidationMode: Story<{}> = () => ({
   components: {VCheckbox: VCheckbox, VBtn},
   setup() {

diff --git a/packages/forms/src/checkbox/VCheckbox.vue b/packages/forms/src/checkbox/VCheckbox.vue
@@ -76,6 +76,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  hideError: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit =
@@ -131,7 +135,11 @@ const {errorMessage, uncontrolledValue, inputId, handleChange} = useFormValue(
         {{ label }}
       </label>
     </div>
-    <div v-if="errorMessage" class="v-checkbox-error" :class="errorClass">
+    <div
+      v-if="errorMessage && !hideError"
+      class="v-checkbox-error"
+      :class="errorClass"
+    >
       {{ errorMessage }}
     </div>
   </div>

diff --git a/packages/forms/src/file-input/VFileUpload.vue b/packages/forms/src/file-input/VFileUpload.vue
@@ -170,6 +170,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  hideError: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['removed', 'update:modelValue', 'change', 'blur']);
@@ -483,11 +487,11 @@ const borderClass = computed(() => {
       :error-messages="errorMessages"
       :field-name="name"
     >
-      <div v-if="errorMessage" :class="errorClass">
+      <div v-if="errorMessage && !hideError" :class="errorClass">
         {{ errorMessage }}
       </div>
       <ErrorMessage
-        v-else-if="errorMessages.length"
+        v-else-if="errorMessages.length && !hideError"
         :class="errorClass"
         :name="name"
       />

diff --git a/packages/forms/src/input/VInputRange.stories.ts b/packages/forms/src/input/VInputRange.stories.ts
@@ -4,16 +4,12 @@ import {ref} from 'vue';
 import {object} from 'yup';
 import VInputRange from './VInputRange.vue';
 import VBtn from '@gits-id/button';
-import MyCheckbox from '../checkbox/VCheckbox.vue';
 
 export default {
   title: 'Forms/InputRange',
   component: VInputRange,
   argTypes: {},
-  args: {
-    modelValue: 1,
-    showInput: false,
-  },
+  args: {},
 } as Meta;
 
 export const Default: Story = (args) => ({
@@ -50,7 +46,7 @@ WithInput.parameters = {
   },
 };
 
-export const Validation: Story<{}> = () => ({
+export const Validation: Story<{}> = (args) => ({
   components: {VInputRange, VBtn},
   setup() {
     const schema = object({
@@ -80,14 +76,15 @@ export const Validation: Story<{}> = () => ({
       alert(JSON.stringify(values));
     });
 
-    return {onSubmit, resetForm, values, errors};
+    return {onSubmit, resetForm, values, errors, args};
   },
   template: `
     <form @submit="onSubmit" class="border-none">
       <v-input-range
         wrapper-class="mb-4"
         name="score"
         label="Select Your Score"
+        v-bind="args"
       />
       <div class="mt-4">
         <v-btn type="submit">Submit</v-btn>
@@ -175,3 +172,8 @@ export const ValidationMode: Story<{}> = () => ({
     </form>
   `,
 });
+
+export const HideError = Validation.bind({});
+HideError.args = {
+  hideError: true,
+};
diff --git a/packages/forms/src/input/VInputRange.vue b/packages/forms/src/input/VInputRange.vue
@@ -49,6 +49,10 @@ const props = defineProps({
     type: String,
     default: 'aggressive',
   },
+  hideError: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const {modelValue, showInput, name, rules, validationMode} = toRefs(props);
@@ -257,7 +261,7 @@ const handleBlur = () => {
       </div>
     </div>
 
-    <div v-if="errorMessage" :class="errorClass">
+    <div v-if="errorMessage && !hideError" :class="errorClass">
       {{ errorMessage }}
     </div>
   </div>

diff --git a/packages/forms/src/textarea/Textarea.stories.ts b/packages/forms/src/textarea/Textarea.stories.ts
@@ -99,23 +99,23 @@ Counter.parameters = {
   },
 };
 
-export const Validation: Story<{}> = () => ({
+export const Validation: Story<{}> = (args) => ({
   components: {VTextarea, VBtn},
   setup() {
     const schema = object({
       bio: string().required().label('Bio'),
       message: string().required().label('Message'),
     });
 
-    const {handleSubmit, resetForm} = useForm({
+    const {handleSubmit, resetForm, values, errors} = useForm({
       validationSchema: schema,
     });
 
     const onSubmit = handleSubmit((values) => {
       alert(JSON.stringify(values));
     });
 
-    return {onSubmit, resetForm};
+    return {onSubmit, resetForm, args, values, errors};
   },
   template: `
     <form @submit="onSubmit" class="border-none">
@@ -124,17 +124,20 @@ export const Validation: Story<{}> = () => ({
         name="message"
         label="Message"
         placeholder="Enter your message"
+        v-bind="args"
       />
       <v-textarea
         wrapper-class="mb-4"
         name="bio"
         label="Bio"
         placeholder="Enter your bio"
         input-class="italic"
+        v-bind="args"
       />
       <v-btn type="submit">Submit</v-btn>
       <v-btn type="button" text @click="resetForm">Reset</v-btn>
     </form>
+    <pre>{{ {values, errors} }}</pre>
 `,
 });
 
@@ -289,3 +292,8 @@ export const DarkMode: Story = (args) => ({
   </div>
   `,
 });
+
+export const HideError = Validation.bind({});
+HideError.args = {
+  hideError: true,
+};
diff --git a/packages/forms/src/textarea/Textarea.vue b/packages/forms/src/textarea/Textarea.vue
@@ -81,6 +81,10 @@ const props = defineProps({
     type: String as PropType<ValidationMode>,
     default: 'aggressive',
   },
+  hideError: {
+    type: Boolean,
+    default: false,
+  }
 });
 
 const emit =
@@ -124,7 +128,7 @@ const emit =
       v-bind="$attrs"
     />
     <div class="v-input-footer">
-      <div class="v-input-error" v-text="errorMessage" />
+      <div v-if="!hideError" class="v-input-error" v-text="errorMessage" />
       <div v-if="counter" class="v-input-counter">
         <slot name="counter" :count="uncontrolledValue.length">
           {{ uncontrolledValue.length }}

diff --git a/packages/multi-select/src/VMultiSelect.stories.ts b/packages/multi-select/src/VMultiSelect.stories.ts
@@ -263,7 +263,7 @@ export const Validation = (args) => ({
       },
     ]);
 
-    return {onSubmit, resetForm, values, genres};
+    return {onSubmit, resetForm, values, genres, args};
   },
   template: `
     <form @submit="onSubmit" class="border-none">
@@ -272,6 +272,7 @@ export const Validation = (args) => ({
         label="Genre"
         placeholder="Choose your prefered genres"
         :items="genres"
+        v-bind="args"
       />
       <div class="mt-4">
         <v-btn type="submit">Submit</v-btn>
@@ -282,6 +283,11 @@ export const Validation = (args) => ({
 `,
 });
 
+export const HideError = Validation.bind({});
+HideError.args = {
+  hideError: true,
+};
+
 export const InitialValues = () => ({
   components: {VBtn, VMultiSelect},
   setup() {