From 9bd1bb81181822e0cbb90eeaaff6eee4d73e5ec8 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Mon, 30 Dec 2024 19:56:36 +0330
Subject: [PATCH] Updated

---
 frontend/components/ui/Input.vue | 35 +++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/frontend/components/ui/Input.vue b/frontend/components/ui/Input.vue
index 6a69c0f..9054835 100644
--- a/frontend/components/ui/Input.vue
+++ b/frontend/components/ui/Input.vue
@@ -1,51 +1,66 @@
 <script setup lang="ts">
-// types
-import Tooltip from "~/components/ui/Tooltip.vue";
 
 type Props = {
     variant?: "solid" | "outlined";
-    startIcon?: string;
-    endIcon?: string;
     disabled?: boolean;
     error?: boolean;
     message?: string;
     placeholder?: string;
+    modelValue?: string;
 };
 
 // props
+
 const props = withDefaults(defineProps<Props>(), {
-    variant: "solid",
+    variant: "solid"
 });
 const { variant, message, error, disabled } = toRefs(props);
 
+// emits
+
+const emit = defineEmits(["update:modelValue"]);
+
 // state
+
 const inputRef = ref<HTMLInputElement | null>(null);
 
 // computed
+
 const classes = computed(() => {
     return [
-        "flex items-center cursor-text transition-all border-[1.5px] gap-3 typo-label-md p-4 rounded-100",
+        "flex items-center cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3 rounded-100",
         {
             "input-solid": variant.value === "solid",
             "input-outlined": variant.value === "outlined",
             "input-effects": !error.value,
             [variant.value === "solid"
                 ? "input-solid-error"
-                : "input-outlined-error"]: error.value,
-        },
+                : "input-outlined-error"]: error.value
+        }
     ];
 });
+
+// methods
+
+const onInput = (e: any) => {
+    emit("update:modelValue", e.target.value);
+};
+
 </script>
 
 <template>
     <div v-bind="$attrs" :class="classes" @click="inputRef?.focus()">
-        <Icon v-if="startIcon" :name="startIcon" class="ms-0" size="24px" />
+        <slot name="startItem" />
+
         <input
+            :value="modelValue"
+            @input="onInput"
             ref="inputRef"
             class="outline-none w-max"
             :placeholder="placeholder"
         />
-        <Icon v-if="endIcon" :name="endIcon" class="me-0" size="24px" />
+
+        <slot name="endItem" />
     </div>
     <!-- <Tooltip :title="message" class="w-full">
     </Tooltip> -->