Add input prepend/append functionality

Author: thecodeholic

backend/src/components/core/CustomInput.vue

@@ -1,38 +1,50 @@
 <template>
   <div>
     <label class="sr-only">{{ label }}</label>
-    <template v-if="type === 'textarea'">
+    <div class="mt-1 flex rounded-md shadow-sm">
+      <span v-if="prepend"
+            class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
+        {{ prepend }}
+      </span>
+      <template v-if="type === 'textarea'">
       <textarea :name="name"
                 :required="required"
                 :value="props.modelValue"
                 @input="emit('update:modelValue', $event.target.value)"
-                class="block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+                :class="inputClasses"
                 :placeholder="label"></textarea>
-    </template>
-    <template v-else-if="type === 'file'">
-      <input :type="type"
-             :name="name"
-             :required="required"
-             :value="props.modelValue"
-             @input="emit('change', $event.target.files[0])"
-             class="block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-             :placeholder="label"/>
-    </template>
-    <template v-else>
-      <input :type="type"
-             :name="name"
-             :required="required"
-             :value="props.modelValue"
-             @input="emit('update:modelValue', $event.target.value)"
-             class="block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-             :placeholder="label"
-             step="0.01"/>
-    </template>
+      </template>
+      <template v-else-if="type === 'file'">
+        <input :type="type"
+               :name="name"
+               :required="required"
+               :value="props.modelValue"
+               @input="emit('change', $event.target.files[0])"
+               :class="inputClasses"
+               :placeholder="label"/>
+      </template>
+      <template v-else>
+        <input :type="type"
+               :name="name"
+               :required="required"
+               :value="props.modelValue"
+               @input="emit('update:modelValue', $event.target.value)"
+               :class="inputClasses"
+               :placeholder="label"
+               step="0.01"/>
+      </template>
+      <span v-if="append"
+            class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
+        {{ append }}
+      </span>
+    </div>
   </div>
 </template>
 
 <script setup>
 
+import {computed} from "vue";
+
 const props = defineProps({
   modelValue: [String, Number, File],
   label: String,
@@ -41,7 +53,30 @@ const props = defineProps({
     default: 'text'
   },
   name: String,
-  required: Boolean
+  required: Boolean,
+  prepend: {
+    type: String,
+    default: ''
+  },
+  append: {
+    type: String,
+    default: ''
+  }
+})
+
+const inputClasses = computed(() => {
+  const cls = [
+    `block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm`,
+  ];
+
+  if (props.append && !props.prepend) {
+    cls.push(`rounded-l-md`)
+  } else if (props.prepend && !props.append) {
+    cls.push(`rounded-r-md`)
+  } else if (!props.prepend && !props.append) {
+    cls.push('rounded-md')
+  }
+  return cls.join(' ')
 })
 
 const emit = defineEmits(['update:modelValue', 'change'])

backend/src/views/Products/ProductModal.vue

@@ -47,7 +47,7 @@
                   <CustomInput class="mb-2" v-model="product.title" label="Product Title"/>
                   <CustomInput type="file" class="mb-2" label="Product Image" @change="file => product.image = file"/>
                   <CustomInput type="textarea" class="mb-2" v-model="product.description" label="Description"/>
-                  <CustomInput type="number" class="mb-2" v-model="product.price" label="Price"/>
+                  <CustomInput type="number" class="mb-2" v-model="product.price" label="Price" prepend="$"/>
                 </div>
                 <footer class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                   <button type="submit"
@@ -56,7 +56,8 @@
                   </button>
                   <button type="button"
                           class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-                          @click="show = false" ref="cancelButtonRef">Cancel
+                          @click="closeModal" ref="cancelButtonRef">
+                    Cancel
                   </button>
                 </footer>
               </form>
@@ -89,13 +90,12 @@ const loading = ref(false)
 const props = defineProps({
   modelValue: Boolean,
   product: {
-    required: false,
+    required: true,
     type: Object,
-    default: {}
   }
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'close'])
 
 const show = computed({
   get: () => props.modelValue,
@@ -114,6 +114,7 @@ onUpdated(() => {
 
 function closeModal() {
   show.value = false
+  emit('close')
 }
 
 function onSubmit() {

backend/src/views/Products/ProductsTable.vue

@@ -66,7 +66,7 @@
           {{ product.title }}
         </td>
         <td class="border-b p-2">
-          {{ product.price }}
+          ${{ product.price }}
         </td>
         <td class="border-b p-2 ">
           {{ product.updated_at }}