From 775d6c1da085ef86fa92cb3e5ae871da30529cf6 Mon Sep 17 00:00:00 2001
From: JasKang <jaskang@qq.com>
Date: Thu, 30 Nov 2023 23:32:42 +0800
Subject: [PATCH] feat: ringinput

---
 packages/vue/src/Base/RingInput.tsx | 25 +++++++++++++++++++++++++
 packages/vue/src/Input/index.tsx    | 12 +++---------
 2 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 packages/vue/src/Base/RingInput.tsx

diff --git a/packages/vue/src/Base/RingInput.tsx b/packages/vue/src/Base/RingInput.tsx
new file mode 100644
index 00000000..d736d5fb
--- /dev/null
+++ b/packages/vue/src/Base/RingInput.tsx
@@ -0,0 +1,25 @@
+import { defineComponent } from "vue";
+
+
+const RingInput = defineComponent({
+  props:{
+    disabled:Boolean,
+    status:{
+      type: String,
+      default:'primary'
+    },
+  },
+  setup(props,{slots}){
+  return ()=> <div
+  aria-disabled={props.disabled}
+  class={[
+    'z-input focus-within:ring-primary-500 flex items-center rounded-md text-sm shadow-sm ring-1 ring-inset ring-gray-300 focus-within:z-10 focus-within:ring-2 focus-within:ring-inset',
+    'aria-disabled:cursor-not-allowed aria-disabled:bg-gray-50 aria-disabled:text-gray-500 aria-disabled:ring-gray-200',
+  ]}
+  >
+    {slots.default?.()}
+  </div>
+  }
+})
+
+export default RingInput
\ No newline at end of file
diff --git a/packages/vue/src/Input/index.tsx b/packages/vue/src/Input/index.tsx
index 2333ce14..6f00b0cf 100644
--- a/packages/vue/src/Input/index.tsx
+++ b/packages/vue/src/Input/index.tsx
@@ -7,6 +7,7 @@ import {
   type VNode,
 } from 'vue'
 import { useControllableValue } from '../utils/useControllableValue'
+import RingInput from '../Base/RingInput'
 
 const props = {
   value: String,
@@ -69,17 +70,10 @@ export const Input = defineComponent({
     }
 
     return () => (
-      <div
-        aria-disabled={props.disabled}
-        class={[
-          'z-input focus-within:ring-primary-500 flex items-center rounded-md text-sm shadow-sm ring-1 ring-inset ring-gray-300 focus-within:z-10 focus-within:ring-2 focus-within:ring-inset',
-          'aria-disabled:cursor-not-allowed aria-disabled:bg-gray-50 aria-disabled:text-gray-500 aria-disabled:ring-gray-200',
-        ]}
-      >
+      <RingInput disabled={props.disabled}>
         {(slots.prefix || props.prefix) && (
           <span class="z-input_prefix -mr-1 flex items-center pl-3">{slots.prefix?.() || props.prefix}</span>
         )}
-
         <input
           class="z-input_input flex-1 border-none bg-transparent text-sm focus:outline-transparent disabled:cursor-not-allowed"
           style={{
@@ -99,7 +93,7 @@ export const Input = defineComponent({
         {(slots.suffix || props.suffix) && (
           <span class="z-input_suffix  -ml-1 flex items-center pr-3">{slots.suffix?.() || props.suffix}</span>
         )}
-      </div>
+      </RingInput>
     )
   },
 })