XuanShengHua/xsh-assistant-next
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨chore: 使用 oxlint, oxfmt&格式化代码

Browse Source
This commit is contained in:
Timothy Yin
2026-02-08 21:16:25 +08:00
parent 9d35c6a9d8
commit 3a801ba016
78 changed files with 3367 additions and 1468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
components/uni/Input/index.vue
View File

@@ -1,31 +1,33 @@
<script lang="ts" setup>
import type {PropType} from "vue";
import type { PropType } from 'vue'
const emit = defineEmits(['input', 'change', 'update:modelValue'])
const props = defineProps({
label: {
type: String,
required: false,
default: ''
default: '',
},
modelValue: {
type: [String, Number] as PropType<string | number | undefined>,
required: true
required: true,
},
placeholder: {
type: String,
required: false,
default: ''
default: '',
},
type: {
type: String as PropType<'text' | 'password' | 'number' | 'email' | 'tel' | 'date'>,
type: String as PropType<
'text' | 'password' | 'number' | 'email' | 'tel' | 'date'
>,
required: false,
default: 'text'
default: 'text',
},
justify: {
type: String as PropType<'start' | 'end'>,
required: false,
default: 'end'
default: 'end',
},
pattern: {
type: [String, RegExp],
@@ -34,28 +36,38 @@ const props = defineProps({
disabled: {
type: Boolean,
required: false,
default: false
default: false,
},
})
const inputValue = ref(props.modelValue)
const isError = ref(false)
watch(() => props.modelValue, (value) => {
inputValue.value = value
if (props.pattern && value) {
const pattern = typeof props.pattern === 'string' ? new RegExp(props.pattern) : props.pattern
isError.value = !pattern.test(value as string)
pattern.lastIndex = 0
}
}, { immediate: true })
watch(
() => props.modelValue,
(value) => {
inputValue.value = value
if (props.pattern && value) {
const pattern =
typeof props.pattern === 'string'
? new RegExp(props.pattern)
: props.pattern
isError.value = !pattern.test(value as string)
pattern.lastIndex = 0
}
},
{ immediate: true }
)
const handleInput = (e: any) => {
if (props.disabled) return
const value = e.target.value
if (props.pattern && value && props.type !== 'date') {
const pattern = typeof props.pattern === 'string' ? new RegExp(props.pattern) : props.pattern
const pattern =
typeof props.pattern === 'string'
? new RegExp(props.pattern)
: props.pattern
isError.value = !pattern.test(value)
pattern.lastIndex = 0
inputValue.value = value
@@ -71,18 +83,33 @@ const handleInput = (e: any) => {
</script>
<template>
<div class="flex flex-col space-y-1"
:class="{ 'justify-start': justify === 'start', 'justify-end': justify === 'end' }">
<p class="block w-fit text-neutral-700 dark:text-neutral-300 text-sm font-bold font-['Nunito']" v-if="label">
<div
class="flex flex-col space-y-1"
:class="{
'justify-start': justify === 'start',
'justify-end': justify === 'end',
}"
>
<p
class="block w-fit text-neutral-700 dark:text-neutral-300 text-sm font-bold font-['Nunito']"
v-if="label"
>
{{ label }}
</p>
<div class="relative">
<input class="relative w-full flex items-center gap-2.5 p-2 pr-2 rounded-md overflow-hidden border transition bg-white dark:bg-neutral-800
border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700
focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800
outline-none placeholder-neutral-400 dark:placeholder-neutral-500 shadow-sm"
:class="{ '!border-red-500': isError, 'bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600': disabled }"
:value="inputValue" @input="handleInput" :placeholder="placeholder" :disabled="disabled" :type="type"/>
<input
class="relative w-full flex items-center gap-2.5 p-2 pr-2 rounded-md overflow-hidden border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 outline-none placeholder-neutral-400 dark:placeholder-neutral-500 shadow-sm"
:class="{
'!border-red-500': isError,
'bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600':
disabled,
}"
:value="inputValue"
@input="handleInput"
:placeholder="placeholder"
:disabled="disabled"
:type="type"
/>
</div>
</div>
</template>