feat: add Input component and update Button styles

Author: tangjinzhou

packages/ui/src/components/button/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button :class="classes" @click="$emit('click', $event)">
+  <button class="ant-btn" :class="classes" @click="$emit('click', $event)">
     <slot></slot>
   </button>
 </template>

packages/ui/src/components/button/index.ts

@@ -1,5 +1,10 @@
 import { App, Plugin } from 'vue'
 import Button from './Button.vue'
+import './style/index.css'
+
+// 导出组件
+export { default as Button } from './Button.vue'
+export * from './meta'
 
 /* istanbul ignore next */
 Button.install = function (app: App) {

packages/ui/src/components/index.ts

@@ -1 +1,2 @@
 export { default as Button } from './button'
+export { default as Input } from './input'

packages/ui/src/components/input/Input.vue

@@ -0,0 +1,30 @@
+<template>
+  <input
+    class="ant-input"
+    :class="classes"
+    :value="modelValue"
+    @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    @focus="$emit('focus', $event)"
+    @blur="$emit('blur', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { inputProps, inputEmits, InputSlots } from './meta'
+
+const props = defineProps(inputProps)
+
+defineEmits(inputEmits)
+defineSlots<InputSlots>()
+
+const classes = computed(() => {
+  return [
+    'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent',
+    {
+      'border-red-500': props.status === 'error',
+      'border-yellow-500': props.status === 'warning',
+    },
+  ]
+})
+</script>

packages/ui/src/components/input/index.ts

@@ -0,0 +1,15 @@
+import { App, Plugin } from 'vue'
+import Input from './Input.vue'
+import './style/index.css'
+
+// 导出组件
+export { default as Input } from './Input.vue'
+export * from './meta'
+
+/* istanbul ignore next */
+Input.install = function (app: App) {
+  app.component('AInput', Input)
+  return app
+}
+
+export default Input as typeof Input & Plugin

packages/ui/src/components/input/meta.ts

@@ -0,0 +1,58 @@
+import { PropType, ExtractPublicPropTypes } from 'vue'
+
+// Input Props
+export const inputProps = {
+  /**
+   * The input value
+   */
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  /**
+   * The status of the input
+   */
+  status: {
+    type: String as PropType<'error' | 'warning'>,
+    default: undefined,
+  },
+  /**
+   * The placeholder text
+   */
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  /**
+   * Whether the input is disabled
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+} as const
+
+export type InputProps = ExtractPublicPropTypes<typeof inputProps>
+
+// Input Emits
+export const inputEmits = {
+  /**
+   * Triggered when the input value changes
+   */
+  'update:modelValue': (value: string) => typeof value === 'string',
+  /**
+   * Triggered when the input receives focus
+   */
+  focus: (e: FocusEvent) => e instanceof FocusEvent,
+  /**
+   * Triggered when the input loses focus
+   */
+  blur: (e: FocusEvent) => e instanceof FocusEvent,
+} as const
+
+export type InputEmits = typeof inputEmits
+
+// Input Slots
+export const inputSlots = {} as const
+
+export type InputSlots = typeof inputSlots

packages/ui/src/components/input/style/index.css

@@ -0,0 +1,9 @@
+/* Input component styles */
+.ant-input {
+  transition: all 0.2s ease-in-out;
+}
+
+.ant-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}