From bdc9b63800df3165a6733bf21bb5012772dacab2 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 4 Dec 2023 14:10:13 +0530
Subject: [PATCH] refactor: add with-label container

---
 app/javascript/v3/components/Form/Input.vue   | 71 +++++++++----------
 .../v3/components/Form/WithLabel.vue          | 45 ++++++++++++
 2 files changed, 77 insertions(+), 39 deletions(-)
 create mode 100644 app/javascript/v3/components/Form/WithLabel.vue

diff --git a/app/javascript/v3/components/Form/Input.vue b/app/javascript/v3/components/Form/Input.vue
index 4955efdd6..337c4e425 100644
--- a/app/javascript/v3/components/Form/Input.vue
+++ b/app/javascript/v3/components/Form/Input.vue
@@ -1,46 +1,39 @@
 <template>
-  <div>
-    <label
-      v-if="label"
-      :for="name"
-      class="flex justify-between text-sm font-medium leading-6 text-slate-900 dark:text-white"
-      :class="{ 'text-red-500': hasError }"
-    >
-      {{ label }}
-      <slot />
-    </label>
-    <div class="mt-1">
-      <input
-        :id="name"
-        :name="name"
-        :type="type"
-        autocomplete="off"
-        :required="required"
-        :placeholder="placeholder"
-        :data-testid="dataTestid"
-        :value="value"
-        :class="{
-          'focus:ring-red-600 ring-red-600': hasError,
-          'dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200':
-            !hasError,
-          'px-3 py-3': spacing === 'base',
-          'px-3 py-2': spacing === 'compact',
-        }"
-        class="block w-full border-0 rounded-md shadow-sm outline-none appearance-none ring-1 ring-inset text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-700"
-        @input="onInput"
-        @blur="$emit('blur')"
-      />
-      <span
-        v-if="errorMessage && hasError"
-        class="text-xs text-red-400 leading-2"
-      >
-        {{ errorMessage }}
-      </span>
-    </div>
-  </div>
+  <with-label
+    :label="label"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <input
+      :id="name"
+      :name="name"
+      :type="type"
+      autocomplete="off"
+      :required="required"
+      :placeholder="placeholder"
+      :data-testid="dataTestid"
+      :value="value"
+      :class="{
+        'focus:ring-red-600 ring-red-600': hasError,
+        'dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200':
+          !hasError,
+        'px-3 py-3': spacing === 'base',
+        'px-3 py-2': spacing === 'compact',
+      }"
+      class="block w-full border-0 rounded-md shadow-sm outline-none appearance-none ring-1 ring-inset text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-700"
+      @input="onInput"
+      @blur="$emit('blur')"
+    />
+  </with-label>
 </template>
 <script>
+import WithLabel from './WithLabel.vue';
+
 export default {
+  components: {
+    WithLabel,
+  },
   props: {
     label: {
       type: String,
diff --git a/app/javascript/v3/components/Form/WithLabel.vue b/app/javascript/v3/components/Form/WithLabel.vue
new file mode 100644
index 000000000..77972a8af
--- /dev/null
+++ b/app/javascript/v3/components/Form/WithLabel.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <label
+      v-if="label"
+      :for="name"
+      class="flex justify-between text-sm font-medium leading-6 text-slate-900 dark:text-white"
+      :class="{ 'text-red-500': hasError }"
+    >
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </label>
+    <div class="mt-1">
+      <slot />
+      <span
+        v-if="errorMessage && hasError"
+        class="text-xs text-red-400 leading-2"
+      >
+        {{ errorMessage }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>