feat: ringinput

packages/style/src/Button.ts

@@ -113,6 +113,6 @@ export const createButtonStyle = (props: {
   return {
     css: ret,
     style: vars,
-    icon: 'h-[1em] w-[1em] scale-125 [&_+_*]:ml-1.5 [&_svg]:h-full [&_svg]:w-full',
+    icon: 'h-[1em] w-[1em] [&_+_*]:ml-1.5 [&_svg]:h-full [&_svg]:w-full',
   }
 }

packages/style/src/Input.ts

@@ -0,0 +1,13 @@
+import { tw } from './utils/tw'
+
+export const createRingInputStyle = tw(
+  `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-primary-500 focus-within:ring-inset`,
+  {
+    variants: {
+      disabled: {
+        false: 'cursor-pointer bg-white ring-gray-300',
+        true: 'cursor-not-allowed bg-gray-50 text-gray-500 ring-gray-200',
+      },
+    },
+  }
+)

packages/style/src/index.ts

@@ -1,3 +1,4 @@
 export { type ColorName, type ColorLv, type ColorAlias, createVars, cvar } from './utils/style'
 export { createButtonStyle } from './Button'
 export { createAnchorStyle, createAnchorItemStyle } from './Anchor'
+export { createRingInputStyle } from './Input'

packages/vue/src/Base/RingInput.tsx

@@ -1,25 +1,22 @@
-import { defineComponent } from "vue";
-
+import { computed, defineComponent } from 'vue'
+import { createRingInputStyle } from '../../../style/src/Input'
 
 const RingInput = defineComponent({
-  props:{
-    disabled:Boolean,
-    status:{
+  props: {
+    disabled: Boolean,
+    status: {
       type: String,
-      default:'primary'
+      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>
-  }
+  setup(props, { slots }) {
+    const css = computed(() =>
+      createRingInputStyle({
+        disabled: props.disabled,
+      })
+    )
+    return () => <div class={css.value}>{slots.default?.()}</div>
+  },
 })
 
-export default RingInput
+export default RingInput

packages/vue/src/Button/index.tsx

@@ -1,4 +1,10 @@
-import { type PropType, defineComponent, type SlotsType, ComponentObjectPropsOptions, ExtractPublicPropTypes } from 'vue'
+import {
+  type PropType,
+  defineComponent,
+  type SlotsType,
+  ComponentObjectPropsOptions,
+  ExtractPublicPropTypes,
+} from 'vue'
 import { useStyle } from '../utils/style'
 import { type ColorName, createButtonStyle } from '@zonda/style'
 import { LoadingIcon } from '../Icon/LoadingIcon'
@@ -46,8 +52,10 @@ export const Button = defineComponent({
     )
     return () => (
       <button class={css.value} disabled={props.disabled} style={style.value} type="button">
-        {(props.loading || slots.icon) && <i class={icon.value}>{props.loading ? <LoadingIcon class="animate-spin" /> : slots.icon()}</i>}
-        {slots.default?.()}
+        {(props.loading || slots.icon) && (
+          <i class={icon.value}>{props.loading ? <LoadingIcon class="animate-spin" /> : slots.icon()}</i>
+        )}
+        {slots.default ? <span>{slots.default()}</span> : null}
       </button>
     )
   },

packages/vue/src/Input/index.tsx

@@ -24,8 +24,8 @@ export const Input = defineComponent({
   name: 'ZInput',
   props,
   emits: {
-    'update:value': (val: string) => true,
-    change: (val: string) => true,
+    'update:value': (_v: string) => true,
+    change: (v: string) => true,
     input: (e: Event) => true,
     focus: (e: FocusEvent) => true,
     blur: (e: FocusEvent) => true,
@@ -75,7 +75,7 @@ export const Input = defineComponent({
           <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"
+          class="z-input_input disabled flex-1 border-none bg-transparent text-sm focus:outline-transparent"
           style={{
             boxShadow: 'none',
           }}