feat(v-input): new wrapper-class and input-class prop

gitsindonesia · May 11, 2022 · ea5b5da · ea5b5da
1 parent 76a0bc4
commit ea5b5da
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/packages/input/src/VInput.stories.ts b/packages/input/src/VInput.stories.ts
@@ -405,10 +405,12 @@ export const Validation: Story<VInputProps> = (args) => ({
   },
   template: `
     <form @submit="onSubmit" class="border-none">
-      <v-input name="name" label="Name" placeholder="Your Name" />
-      <v-input name="email" label="Email" placeholder="Your Email" />
-      <v-btn type="submit">Submit</v-btn>
-      <v-btn type="button" text @click="resetForm">Reset</v-btn>
+      <v-input wrapper-class="mb-2" name="name" label="Name" placeholder="Your Name" />
+      <v-input wrapper-class="mb-2" name="email" label="Email" placeholder="Your Email" />
+      <div class="mt-4">
+        <v-btn type="submit">Submit</v-btn>
+        <v-btn type="button" text @click="resetForm">Reset</v-btn>
+      </div>
     </form>
 `,
 });

diff --git a/packages/input/src/VInput.vue b/packages/input/src/VInput.vue
@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
 <script setup lang="ts">
 import {toRefs, computed} from 'vue';
 import {SearchIcon} from '@heroicons/vue/solid';
@@ -85,6 +91,14 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  inputClass: {
+    type: String,
+    default: '',
+  },
+  wrapperClass: {
+    type: String,
+    default: '',
+  },
 });
 
 const {type, readonly, disabled, placeholder, prependIcon, appendIcon} =
@@ -135,7 +149,7 @@ const inputVariantClass = computed(() => {
 </script>
 
 <template>
-  <div class="mb-4">
+  <div :class="wrapperClass">
     <label v-if="label" :for="id || name" class="mb-1 block">{{ label }}</label>
     <div v-if="text" v-bind="$attrs">{{ inputValue }}</div>
     <div v-else class="relative w-full flex gap-2 items-center">
@@ -176,6 +190,7 @@ const inputVariantClass = computed(() => {
           {shadow, 'pl-10': $slots.prepend},
           sizeClass,
           inputVariantClass,
+          inputClass,
         ]"
         :placeholder="placeholder"
         :type="type"