feat: introducing a new smart input hoppscotch ui component (#3089)

Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>

packages/hoppscotch-ui/src/components/smart/Input.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="relative flex" :class="styles">
+    <input
+      :id="inputID"
+      class="input"
+      :class="inputStyles"
+      v-model="inputText"
+      v-focus
+      :placeholder="placeholder"
+      :type="type"
+      @keyup.enter="emit('submit')"
+      autocomplete="off"
+      required
+      :disabled="disabled"
+    />
+
+    <label v-if="label.length > 0" :for="inputID"> {{ label }} </label>
+    <slot name="button"></slot>
+  </div>
+</template>
+
+<script lang="ts">
+/*
+  This inputIDCounter is tracked in the global scope in order to ensure that each input has a unique ID.
+  When we use this component multiple times on the same page, we need to ensure that each input has a unique ID.
+  This is because the label's for attribute needs to match the input's id attribute.
+
+  That's why we use a global counter that increments each time we use this component.
+*/
+let inputIDCounter = 564275
+</script>
+
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core"
+import { defineProps } from "vue"
+
+// Unique ID for input
+const inputID = `input-${inputIDCounter++}`
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    styles: string
+    modelValue: string | null
+    placeholder: string
+    inputStyles: string | (string | false)[]
+    type: string
+    label: string
+    disabled: boolean
+  }>(),
+  {
+    id: "",
+    styles: "",
+    modelValue: "",
+    placeholder: "",
+    inputStyles: "input",
+    type: "text",
+    label: "",
+    disabled: false,
+  }
+)
+
+const emit = defineEmits<{
+  (e: "submit"): void
+  (e: "update:modelValue", v: string): void
+}>()
+
+const inputText = useVModel(props, "modelValue", emit)
+</script>

packages/hoppscotch-ui/src/components/smart/index.ts

@@ -4,6 +4,7 @@ export { default as HoppSmartCheckbox } from "./Checkbox.vue"
 export { default as HoppSmartConfirmModal } from "./ConfirmModal.vue"
 export { default as HoppSmartExpand } from "./Expand.vue"
 export { default as HoppSmartFileChip } from "./FileChip.vue"
+export { default as HoppSmartInput } from "./Input.vue"
 export { default as HoppSmartIntersection } from "./Intersection.vue"
 export { default as HoppSmartItem } from "./Item.vue"
 export { default as HoppSmartLink } from "./Link.vue"