🎨chore: 使用 oxlint, oxfmt&格式化代码
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
|
||||
import { textarea } from '@nuxt/ui';
|
||||
<script lang="ts" setup>
|
||||
const emit = defineEmits(['input', 'change', 'update:modelValue'])
|
||||
@@ -6,21 +5,21 @@ const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
default: '',
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
default: '',
|
||||
},
|
||||
justify: {
|
||||
type: String as PropType<'start' | 'end'>,
|
||||
required: false,
|
||||
default: 'end'
|
||||
default: 'end',
|
||||
},
|
||||
pattern: {
|
||||
type: [String, RegExp],
|
||||
@@ -29,12 +28,12 @@ const props = defineProps({
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
rows: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 5
|
||||
default: 5,
|
||||
},
|
||||
minRows: {
|
||||
type: Number,
|
||||
@@ -46,21 +45,31 @@ const textAreaRef = ref()
|
||||
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) {
|
||||
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
|
||||
@@ -92,19 +101,34 @@ onMounted(() => {
|
||||
</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">
|
||||
<textarea class="relative w-full flex items-center gap-2.5 p-2 pr-6 rounded-md overflow-hidden overflow-y-auto 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"
|
||||
:rows="minRows || rows" ref="textAreaRef"
|
||||
: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" />
|
||||
<textarea
|
||||
class="relative w-full flex items-center gap-2.5 p-2 pr-6 rounded-md overflow-hidden overflow-y-auto 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"
|
||||
:rows="minRows || rows"
|
||||
ref="textAreaRef"
|
||||
: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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user