@c2-markdown-ui/vue 0.0.0-stage → 0.4.3

package/src/lib/widgets/TextInput.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="widget-text-input" :class="{ 'widget-field-error': !!shownError }">
+    <div v-if="label || hint || required" class="widget-label-row">
+      <span v-if="required" class="widget-required-mark" aria-hidden="true">*</span>
+      <label v-if="label">{{ label }}</label>
+      <span v-if="hint" class="widget-hint" :data-hint="hint">ⓘ</span>
+    </div>
+    <div class="widget-field-content">
+      <input
+        type="text"
+        v-model="value"
+        :class="{ 'widget-input-error': !!shownError }"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        @blur="commit"
+        @input="onInput"
+      />
+      <div v-if="shownError" class="widget-error-text" role="alert">{{ shownError }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineProps, defineEmits } from 'vue'
+
+interface TextInputProps {
+  placeholder?: string
+  label?: string
+  default?: string
+  hint?: string
+  /** 是否必填 */
+  required?: boolean
+  /** 正则校验规则（JS 正则源字符串） */
+  pattern?: string
+  /** 校验失败提示文案 */
+  message?: string
+  /** 外部（form 提交时）传入的错误信息，优先于组件内部即时校验 */
+  error?: string
+  /** 是否禁用 */
+  disabled?: boolean
+}
+
+interface TextInputEvents {
+  change: [value: string]
+}
+
+const props = withDefaults(defineProps<TextInputProps>(), {
+  placeholder: '',
+  label: '',
+  default: '',
+  hint: '',
+  required: false,
+  pattern: '',
+  message: '',
+  error: '',
+  disabled: false
+})
+
+const emit = defineEmits<TextInputEvents>()
+
+const value = ref(props.default)
+const localError = ref('')
+
+/** 校验当前值：返回错误文案或空串 */
+function validate(v: string): string {
+  if (props.required && !v.trim()) return props.message || (props.label ? `请填写${props.label}` : '该项为必填项')
+  if (props.pattern && v && !new RegExp(props.pattern).test(v)) return props.message || (props.label ? `${props.label}格式不正确` : '格式不正确')
+  return ''
+}
+
+/** 提交：失焦时校验并对外发值 */
+function commit() {
+  localError.value = validate(value.value)
+  emit('change', value.value)
+}
+
+/** 输入中：错误已出现时实时重校验（对齐 React 版 onChange 行为） */
+function onInput() {
+  if (localError.value) localError.value = validate(value.value)
+}
+
+const shownError = computed(() => props.error || localError.value)
+</script>