feat: add Input component and update Button styles

feat/vapor
tangjinzhou 2025-07-29 11:23:54 +08:00
parent 8f73247bed
commit 136543398d
7 changed files with 119 additions and 1 deletions

View File

@ -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>

View File

@ -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) {

View File

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

View File

@ -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>

View File

@ -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

View File

@ -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

View File

@ -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;
}