From 0082c6adb99b2a082225f22769c210428242466b Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 16 Oct 2024 01:41:38 +0530
Subject: [PATCH] feat: Add new Inline Input component (#10281)

---
 .../inline-input/InlineInput.story.vue        | 82 +++++++++++++++++++
 .../inline-input/InlineInput.vue              | 65 +++++++++++++++
 2 files changed, 147 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/inline-input/InlineInput.story.vue
 create mode 100644 app/javascript/dashboard/components-next/inline-input/InlineInput.vue

diff --git a/app/javascript/dashboard/components-next/inline-input/InlineInput.story.vue b/app/javascript/dashboard/components-next/inline-input/InlineInput.story.vue
new file mode 100644
index 000000000..7338d9cc9
--- /dev/null
+++ b/app/javascript/dashboard/components-next/inline-input/InlineInput.story.vue
@@ -0,0 +1,82 @@
+<script setup>
+import InlineInput from './InlineInput.vue';
+</script>
+
+<template>
+  <Story
+    title="Components/InlineInput"
+    :layout="{ type: 'grid', width: '400' }"
+  >
+    <Variant title="Default">
+      <div class="p-4 bg-white dark:bg-slate-800">
+        <InlineInput id="inline-input-1" placeholder="Default InlineInput" />
+      </div>
+    </Variant>
+
+    <Variant title="With Label">
+      <div class="p-4 bg-white dark:bg-slate-800">
+        <InlineInput
+          id="inline-input-2"
+          label="Username"
+          placeholder="Enter your username"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div class="p-4 bg-white dark:bg-slate-800">
+        <InlineInput
+          id="inline-input-3"
+          label="Disabled InlineInput"
+          placeholder="Can't type here"
+          disabled
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Custom Classes">
+      <div class="flex flex-col gap-4 p-4 bg-white dark:bg-slate-800">
+        <InlineInput
+          id="inline-input-4"
+          label="Custom Input Class"
+          placeholder="Custom input style"
+          custom-input-class="placeholder:text-green-200 dark:placeholder:text-green-800"
+        />
+        <InlineInput
+          id="inline-input-5"
+          label="Custom Label Class"
+          placeholder="Custom label style"
+          custom-label-class="text-green-600 dark:text-green-400"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Different Types">
+      <div class="flex flex-col gap-4 p-4 bg-white dark:bg-slate-800">
+        <InlineInput
+          id="inline-input-6"
+          label="Text"
+          placeholder="Text input"
+        />
+        <InlineInput
+          id="inline-input-7"
+          label="Number"
+          placeholder="Number input"
+          type="number"
+        />
+        <InlineInput
+          id="inline-input-8"
+          label="Password"
+          placeholder="Password input"
+          type="password"
+        />
+        <InlineInput
+          id="inline-input-9"
+          label="Email"
+          placeholder="Email input"
+          type="email"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/inline-input/InlineInput.vue b/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
new file mode 100644
index 000000000..71dae0af0
--- /dev/null
+++ b/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
@@ -0,0 +1,65 @@
+<script setup>
+defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  customInputClass: {
+    type: [String, Object, Array],
+    default: '',
+  },
+  customLabelClass: {
+    type: [String, Object, Array],
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  id: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+defineEmits(['update:modelValue']);
+</script>
+
+<template>
+  <div
+    class="relative flex items-center justify-between w-full gap-2 whitespace-nowrap"
+  >
+    <label
+      v-if="label"
+      :for="id"
+      :class="customLabelClass"
+      class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
+    >
+      {{ label }}
+    </label>
+    <!-- Added prefix slot to allow adding custom labels to the input -->
+    <slot name="prefix" />
+    <input
+      :id="id"
+      :value="modelValue"
+      :type="type"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :class="customInputClass"
+      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-lg bg-transparent dark:bg-transparent placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+  </div>
+</template>