@hbdlzy/ui-core 0.1.4 → 0.1.6

package/src/components/OutlinedDateTimePicker/OutlinedDateTimePicker.vue

@@ -1,74 +1,91 @@
 <template>
   <div
     class="outlined-date-time-picker"
-    :class="[rootClass]"
-    :style="rootStyle"
+    :class="[containerClasses, rootClass]"
+    :style="[containerStyle, rootStyle]"
   >
-    <div
-      class="outlined-date-time-picker__field"
-      :class="fieldClasses"
-      :style="fieldStyle"
-    >
-      <el-date-picker
-        ref="datePickerRef"
-        class="outlined-date-time-picker__control"
-        :model-value="dateValue"
-        type="date"
-        format="YYYY-MM-DD"
-        value-format="YYYY-MM-DD"
-        :placeholder="placeholder"
-        :clearable="clearable"
-        :disabled-date="resolvedDisabledDate"
-        :style="controlStyle"
-        @update:model-value="handleDateUpdate"
-        @focus="handleFocus('date')"
-        @blur="handleBlur('date', $event)"
-        @change="handleDateChange"
-        @visible-change="handleVisibleChange('date', $event)"
-      />
-
+    <div class="outlined-date-time-picker__inner">
       <div
-        v-if="floatingLabel"
-        class="outlined-date-time-picker__label"
-        :class="dateLabelClasses"
+        class="outlined-date-time-picker__field"
+        :class="fieldClasses"
       >
-        {{ floatingLabel }}
+        <el-date-picker
+          ref="datePickerRef"
+          class="outlined-date-time-picker__control"
+          :model-value="dateValue"
+          type="date"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
+          :placeholder="datePlaceholder"
+          :clearable="clearable"
+          :disabled-date="resolvedDisabledDate"
+          :style="controlStyle"
+          :aria-invalid="hasError ? 'true' : undefined"
+          @update:model-value="handleDateUpdate"
+          @focus="handleFocus('date')"
+          @blur="handleBlur('date', $event)"
+          @change="handleDateChange"
+          @visible-change="handleVisibleChange('date', $event)"
+        />
+
+        <div
+          v-if="floatingLabel"
+          class="outlined-date-time-picker__label"
+          :class="dateLabelClasses"
+        >
+          <span
+            v-if="required"
+            class="outlined-date-time-picker__required"
+          >*</span>
+          <span>{{ floatingLabel }}</span>
+        </div>
       </div>
-    </div>
 
-    <span class="outlined-date-time-picker__separator">{{ separatorText }}</span>
-
-    <div
-      class="outlined-date-time-picker__field"
-      :class="fieldClasses"
-      :style="fieldStyle"
-    >
-      <el-time-picker
-        ref="timePickerRef"
-        class="outlined-date-time-picker__control"
-        :model-value="timeValue"
-        format="HH:mm"
-        value-format="HH:mm"
-        :placeholder="timePlaceholder"
-        :clearable="clearable"
-        :disabled="!dateValue"
-        :disabled-hours="resolvedDisabledHours"
-        :disabled-minutes="resolvedDisabledMinutes"
-        :style="controlStyle"
-        @update:model-value="handleTimeUpdate"
-        @focus="handleFocus('time')"
-        @blur="handleBlur('time', $event)"
-        @change="handleTimeChange"
-        @visible-change="handleVisibleChange('time', $event)"
-      />
+      <span class="outlined-date-time-picker__separator">{{ separatorText }}</span>
 
       <div
-        class="outlined-date-time-picker__label"
-        :class="timeLabelClasses"
+        class="outlined-date-time-picker__field"
+        :class="fieldClasses"
       >
-        {{ timePlaceholder }}
+        <el-time-picker
+          ref="timePickerRef"
+          class="outlined-date-time-picker__control"
+          :model-value="timeValue"
+          format="HH:mm"
+          value-format="HH:mm"
+          :placeholder="timeControlPlaceholder"
+          :clearable="clearable"
+          :disabled="!dateValue"
+          :disabled-hours="resolvedDisabledHours"
+          :disabled-minutes="resolvedDisabledMinutes"
+          :style="controlStyle"
+          :aria-invalid="hasError ? 'true' : undefined"
+          @update:model-value="handleTimeUpdate"
+          @focus="handleFocus('time')"
+          @blur="handleBlur('time', $event)"
+          @change="handleTimeChange"
+          @visible-change="handleVisibleChange('time', $event)"
+        />
+
+        <div
+          class="outlined-date-time-picker__label"
+          :class="timeLabelClasses"
+        >
+          <span
+            v-if="required"
+            class="outlined-date-time-picker__required"
+          >*</span>
+          <span>{{ timePlaceholder }}</span>
+        </div>
       </div>
     </div>
+
+    <p
+      v-if="hasError"
+      class="outlined-date-time-picker__error"
+    >
+      {{ resolvedErrorMessage }}
+    </p>
   </div>
 </template>
 
@@ -99,7 +116,10 @@ const props = withDefaults(defineProps<OutlinedDateTimePickerProps>(), {
   timePlaceholder: '时间',
   clearable: false,
   marginBottom: 20,
-  paddingTop: 20
+  paddingTop: 20,
+  required: false,
+  error: false,
+  errorMessage: ''
 })
 
 const emit = defineEmits<{
@@ -135,19 +155,29 @@ const rootClass = computed(() => attrs.class)
 const rootStyle = computed(() => attrs.style)
 const floatingLabel = computed(() => props.label || props.placeholder || '')
 
-const fieldClasses = computed(() => ({
-  'outlined-date-time-picker__field--bordered': props.isBorder
+const containerClasses = computed(() => ({
+  'outlined-date-time-picker--error': hasError.value
 }))
 
-const fieldStyle = computed(() => ({
+const containerStyle = computed(() => ({
   marginBottom: toCssValue(props.marginBottom),
   paddingTop: toCssValue(props.paddingTop)
 }))
 
+const fieldClasses = computed(() => ({
+  'outlined-date-time-picker__field--bordered': props.isBorder,
+  'outlined-date-time-picker__field--error': hasError.value
+}))
+
 const controlStyle = computed(() => ({
   height: `${props.inputHeight}px`
 }))
 
+const datePlaceholder = computed(() => addRequiredMark(props.placeholder))
+const timeControlPlaceholder = computed(() => addRequiredMark(props.timePlaceholder))
+const hasError = computed(() => Boolean(props.error))
+const resolvedErrorMessage = computed(() => props.errorMessage || createRequiredMessage(floatingLabel.value))
+
 const resolvedDisabledDate = computed(() => createDisabledDateHandler(props.disabledDate))
 
 const resolvedDisabledHours = computed(() => {
@@ -316,6 +346,18 @@ function toCssValue(value: OutlinedDateTimePickerCssValue | undefined) {
   return value
 }
 
+function addRequiredMark(value: string) {
+  if (!props.required || !value || value.startsWith('*')) {
+    return value
+  }
+
+  return `*${value}`
+}
+
+function createRequiredMessage(label: string) {
+  return label ? `${label}为必填项` : '该项为必填项'
+}
+
 defineExpose<OutlinedDateTimePickerExpose>({
   focusDate: () => {
     datePickerRef.value?.focus?.()
@@ -342,6 +384,10 @@ defineExpose<OutlinedDateTimePickerExpose>({
 
 <style scoped>
 .outlined-date-time-picker {
+  position: relative;
+}
+
+.outlined-date-time-picker__inner {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -360,6 +406,9 @@ defineExpose<OutlinedDateTimePickerExpose>({
 .outlined-date-time-picker__label {
   position: absolute;
   left: -2px;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
   padding: 2px 5px;
   border-radius: 2px;
   background-color: #ffffff;
@@ -389,6 +438,23 @@ defineExpose<OutlinedDateTimePickerExpose>({
   color: var(--el-text-color-regular);
 }
 
+.outlined-date-time-picker--error {
+  --el-input-focus-border-color: var(--el-color-danger);
+  --el-input-hover-border-color: var(--el-color-danger);
+}
+
+.outlined-date-time-picker__required,
+.outlined-date-time-picker--error .outlined-date-time-picker__label,
+.outlined-date-time-picker__error {
+  color: var(--el-color-danger);
+}
+
+.outlined-date-time-picker__error {
+  margin: 6px 0 0;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
 :deep(.outlined-date-time-picker__control.el-date-editor) {
   width: 100%;
 }
@@ -409,13 +475,27 @@ defineExpose<OutlinedDateTimePickerExpose>({
   right: 30px;
 }
 
-:deep(.outlined-date-time-picker__field--bordered .el-input__wrapper) {
+.outlined-date-time-picker__field--bordered :deep(.el-input__wrapper) {
   box-shadow: none;
   border-radius: 0;
   border-bottom: 1px solid #cccccc;
 }
 
-:deep(.outlined-date-time-picker__field--bordered .el-input__wrapper.is-focus) {
+.outlined-date-time-picker__field--bordered :deep(.el-input__wrapper.is-focus) {
   border-bottom-color: var(--el-color-primary);
 }
+
+.outlined-date-time-picker__field--error :deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.outlined-date-time-picker__field--error :deep(.el-input__wrapper.is-focus),
+.outlined-date-time-picker__field--error :deep(.el-input__wrapper:hover) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.outlined-date-time-picker__field--error.outlined-date-time-picker__field--bordered :deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  border-bottom-color: transparent;
+}
 </style>

package/src/components/OutlinedDateTimePicker/README.md

@@ -48,6 +48,9 @@ const openDatePanel = () => {
 | `value` | `string` | `''` | `v-model:value` 绑定值，格式为 `YYYY-MM-DD HH:mm` |
 | `placeholder` | `string` | `''` | 日期部分占位文案，也会作为浮动标签主文案 |
 | `label` | `string` | `''` | 自定义浮动标签文案，优先级高于 `placeholder` |
+| `required` | `boolean` | `false` | 是否显示必填星号 |
+| `error` | `boolean` | `false` | 是否显示错误态，开启后日期和时间输入框变红并展示错误文案 |
+| `errorMessage` | `string` | `''` | 错误文案，未传时默认使用“字段名为必填项” |
 | `inputHeight` | `number` | `40` | 输入框高度 |
 | `isBorder` | `boolean` | `false` | 是否启用下边框风格 |
 | `disabledDate` | `string \| number \| Date \| ((date: Date) => boolean)` | `undefined` | 日期禁用规则，支持 `nowDate` |

package/src/components/OutlinedInput/OutlinedInput.types.ts

@@ -21,6 +21,9 @@ export interface OutlinedInputProps {
   showWordLimit?: boolean
   marginBottom?: OutlinedInputCssValue
   paddingTop?: OutlinedInputCssValue
+  required?: boolean
+  error?: boolean
+  errorMessage?: string
 }
 
 export interface OutlinedInputExpose {

package/src/components/OutlinedInput/OutlinedInput.vue

@@ -9,7 +9,7 @@
       v-bind="inputAttrs"
       :model-value="inputValue"
       :type="resolvedType"
-      :placeholder="placeholder"
+      :placeholder="controlPlaceholder"
       :disabled="disabled"
       :maxlength="maxlength"
       :max="max"
@@ -18,6 +18,7 @@
       :show-word-limit="showWordLimit"
       :clearable="clearable"
       :style="inputStyle"
+      :aria-invalid="hasError ? 'true' : undefined"
       @update:model-value="handleModelValueUpdate"
       @focus="handleFocus"
       @blur="handleBlur"
@@ -48,8 +49,19 @@
       class="outlined-input__label"
       :class="labelClasses"
     >
-      {{ floatingLabel }}
+      <span
+        v-if="required"
+        class="outlined-input__required"
+      >*</span>
+      <span>{{ floatingLabel }}</span>
     </div>
+
+    <p
+      v-if="hasError"
+      class="outlined-input__error"
+    >
+      {{ resolvedErrorMessage }}
+    </p>
   </div>
 </template>
 
@@ -84,7 +96,10 @@ const props = withDefaults(defineProps<OutlinedInputProps>(), {
   clearable: false,
   showWordLimit: true,
   marginBottom: 20,
-  paddingTop: 20
+  paddingTop: 20,
+  required: false,
+  error: false,
+  errorMessage: ''
 })
 
 const emit = defineEmits<{
@@ -127,6 +142,7 @@ const hasTextareaAutosize = computed(() => {
 
 const containerClasses = computed(() => ({
   'outlined-input--bordered': props.isBorder,
+  'outlined-input--error': hasError.value,
   'outlined-input--textarea-default': resolvedType.value === 'textarea' && !hasTextareaAutosize.value
 }))
 
@@ -146,6 +162,9 @@ const inputStyle = computed(() => {
 })
 
 const floatingLabel = computed(() => props.label || props.placeholder || '')
+const controlPlaceholder = computed(() => addRequiredMark(props.placeholder))
+const hasError = computed(() => Boolean(props.error))
+const resolvedErrorMessage = computed(() => props.errorMessage || createRequiredMessage(floatingLabel.value))
 
 const hasContent = computed(() => hasFilledValue(inputValue.value))
 
@@ -222,6 +241,18 @@ function toCssValue(value: OutlinedInputCssValue | undefined) {
   return value
 }
 
+function addRequiredMark(value: string) {
+  if (!props.required || !value || value.startsWith('*')) {
+    return value
+  }
+
+  return `*${value}`
+}
+
+function createRequiredMessage(label: string) {
+  return label ? `${label}为必填项` : '该项为必填项'
+}
+
 defineExpose<OutlinedInputExpose>({
   focus: () => {
     inputRef.value?.focus()
@@ -247,6 +278,9 @@ defineExpose<OutlinedInputExpose>({
 .outlined-input__label {
   position: absolute;
   left: -2px;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
   padding: 2px 5px;
   border-radius: 2px;
   background-color: #ffffff;
@@ -276,32 +310,77 @@ defineExpose<OutlinedInputExpose>({
   color: var(--el-text-color-regular);
 }
 
+.outlined-input--error {
+  --el-input-focus-border-color: var(--el-color-danger);
+  --el-input-hover-border-color: var(--el-color-danger);
+}
+
+.outlined-input__required,
+.outlined-input--error .outlined-input__label,
+.outlined-input__error {
+  color: var(--el-color-danger);
+}
+
+.outlined-input__error {
+  margin: 6px 0 0;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
 .outlined-input__suffix-text {
   white-space: nowrap;
 }
 
-:deep(.outlined-input--bordered .el-input__wrapper) {
+.outlined-input--bordered :deep(.el-input__wrapper) {
   box-shadow: none;
   border-radius: 0;
   border-bottom: 1px solid #cccccc;
 }
 
-:deep(.outlined-input--bordered .el-input__wrapper.is-focus) {
+.outlined-input--bordered :deep(.el-input__wrapper.is-focus) {
   border-bottom-color: var(--el-color-primary);
 }
 
-:deep(.outlined-input--bordered .el-textarea__inner) {
+.outlined-input--bordered :deep(.el-textarea__inner) {
   border-width: 0 0 1px;
   border-radius: 0;
   box-shadow: none;
 }
 
-:deep(.outlined-input--bordered .el-textarea__inner:focus) {
+.outlined-input--bordered :deep(.el-textarea__inner:focus) {
   border-bottom-color: var(--el-color-primary);
 }
 
-:deep(.outlined-input--textarea-default .el-textarea__inner) {
+.outlined-input--textarea-default :deep(.el-textarea__inner) {
   min-height: 100px !important;
   max-height: 180px;
 }
+
+.outlined-input--error :deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.outlined-input--error :deep(.el-input__wrapper.is-focus),
+.outlined-input--error :deep(.el-input__wrapper:hover) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.outlined-input--error :deep(.el-textarea__inner) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.outlined-input--error :deep(.el-textarea__inner:focus),
+.outlined-input--error :deep(.el-textarea__inner:hover) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.outlined-input--error.outlined-input--bordered :deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  border-bottom-color: transparent;
+}
+
+.outlined-input--error.outlined-input--bordered :deep(.el-textarea__inner) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  border-bottom-color: transparent;
+}
 </style>

package/src/components/OutlinedInput/README.md

@@ -101,6 +101,9 @@ const remark = ref('')
 - `value`: 当前输入值，推荐通过 `v-model:value` 使用
 - `placeholder`: 输入框占位文案，同时默认作为浮动标签文案
 - `label`: 自定义浮动标签文案，未传时回退到 `placeholder`
+- `required`: 是否显示必填星号，默认 `false`
+- `error`: 是否显示错误态，开启后输入框变红并展示错误文案
+- `errorMessage`: 错误文案，未传时默认使用“字段名为必填项”
 - `disabled`: 是否禁用
 - `regex`: 数值校验正则，仅在 `isNumber` 为 `true` 时生效
 - `maxlength`: 最大输入长度

package/src/components/OutlinedSelect/OutlinedSelect.types.ts

@@ -37,6 +37,9 @@ export interface OutlinedSelectProps {
   maxCollapseTags?: number
   marginBottom?: OutlinedSelectCssValue
   paddingTop?: OutlinedSelectCssValue
+  required?: boolean
+  error?: boolean
+  errorMessage?: string
 }
 
 export interface OutlinedSelectExpose {

package/src/components/OutlinedSelect/OutlinedSelect.vue

@@ -9,7 +9,7 @@
       v-bind="selectAttrs"
       class="outlined-select__control"
       :model-value="selectValue"
-      :placeholder="placeholder"
+      :placeholder="controlPlaceholder"
       :disabled="disabled"
       :multiple="multiple"
       :filterable="filterable"
@@ -18,6 +18,7 @@
       :collapse-tags-tooltip="collapseTagsTooltip"
       :max-collapse-tags="maxCollapseTags"
       :style="selectStyle"
+      :aria-invalid="hasError ? 'true' : undefined"
       @update:model-value="handleModelValueUpdate"
       @focus="handleFocus"
       @blur="handleBlur"
@@ -62,8 +63,19 @@
       class="outlined-select__label"
       :class="labelClasses"
     >
-      {{ floatingLabel }}
+      <span
+        v-if="required"
+        class="outlined-select__required"
+      >*</span>
+      <span>{{ floatingLabel }}</span>
     </div>
+
+    <p
+      v-if="hasError"
+      class="outlined-select__error"
+    >
+      {{ resolvedErrorMessage }}
+    </p>
   </div>
 </template>
 
@@ -103,7 +115,10 @@ const props = withDefaults(defineProps<OutlinedSelectProps>(), {
   noCheck: false,
   maxCollapseTags: 5,
   marginBottom: 20,
-  paddingTop: 20
+  paddingTop: 20,
+  required: false,
+  error: false,
+  errorMessage: ''
 })
 
 const emit = defineEmits<{
@@ -141,7 +156,8 @@ const selectAttrs = computed(() => {
 })
 
 const containerClasses = computed(() => ({
-  'outlined-select--bordered': props.isBorder
+  'outlined-select--bordered': props.isBorder,
+  'outlined-select--error': hasError.value
 }))
 
 const containerStyle = computed(() => ({
@@ -155,6 +171,9 @@ const selectStyle = computed(() => ({
 }))
 
 const floatingLabel = computed(() => props.label || props.placeholder || '')
+const controlPlaceholder = computed(() => addRequiredMark(props.placeholder))
+const hasError = computed(() => Boolean(props.error))
+const resolvedErrorMessage = computed(() => props.errorMessage || createRequiredMessage(floatingLabel.value))
 const hasCustomOptionsSlot = computed(() => Boolean(slots.default))
 
 const hasContent = computed(() => {
@@ -263,6 +282,18 @@ function toCssValue(value: OutlinedSelectCssValue | undefined) {
   return value
 }
 
+function addRequiredMark(value: string) {
+  if (!props.required || !value || value.startsWith('*')) {
+    return value
+  }
+
+  return `*${value}`
+}
+
+function createRequiredMessage(label: string) {
+  return label ? `${label}为必填项` : '该项为必填项'
+}
+
 defineExpose<OutlinedSelectExpose>({
   focus: () => {
     selectRef.value?.focus?.()
@@ -301,6 +332,9 @@ defineExpose<OutlinedSelectExpose>({
 .outlined-select__label {
   position: absolute;
   left: -2px;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
   padding: 2px 5px;
   border-radius: 2px;
   background-color: #ffffff;
@@ -330,6 +364,23 @@ defineExpose<OutlinedSelectExpose>({
   color: var(--el-text-color-regular);
 }
 
+.outlined-select--error {
+  --el-input-focus-border-color: var(--el-color-danger);
+  --el-input-hover-border-color: var(--el-color-danger);
+}
+
+.outlined-select__required,
+.outlined-select--error .outlined-select__label,
+.outlined-select__error {
+  color: var(--el-color-danger);
+}
+
+.outlined-select__error {
+  margin: 6px 0 0;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
 :deep(.outlined-select__control.el-select) {
   width: 100%;
 }
@@ -347,13 +398,28 @@ defineExpose<OutlinedSelectExpose>({
   min-height: inherit;
 }
 
-:deep(.outlined-select--bordered .el-select__wrapper) {
+.outlined-select--bordered :deep(.el-select__wrapper) {
   box-shadow: none;
   border-radius: 0;
   border-bottom: 1px solid #cccccc;
 }
 
-:deep(.outlined-select--bordered .el-select__wrapper.is-focused) {
+.outlined-select--bordered :deep(.el-select__wrapper.is-focused) {
   border-bottom-color: var(--el-color-primary);
 }
+
+.outlined-select--error :deep(.el-select__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.outlined-select--error :deep(.el-select__wrapper.is-focused),
+.outlined-select--error :deep(.el-select__wrapper.is-focus),
+.outlined-select--error :deep(.el-select__wrapper:hover) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.outlined-select--error.outlined-select--bordered :deep(.el-select__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  border-bottom-color: transparent;
+}
 </style>

package/src/components/OutlinedSelect/README.md

@@ -113,6 +113,9 @@ const tagOptions = [
 - `options`: 配置式选项列表，默认 `[]`
 - `placeholder`: 占位文案，同时默认作为浮动标签文案
 - `label`: 自定义浮动标签文案，未传时回退到 `placeholder`
+- `required`: 是否显示必填星号，默认 `false`
+- `error`: 是否显示错误态，开启后选择框变红并展示错误文案
+- `errorMessage`: 错误文案，未传时默认使用“字段名为必填项”
 - `disabled`: 是否禁用
 - `collapseTags`: 多选时是否折叠标签
 - `collapseTagsTooltip`: 折叠标签时是否显示 tooltip

package/src/components/OutlinedTimePicker/OutlinedTimePicker.types.ts

@@ -24,6 +24,9 @@ export interface OutlinedTimePickerProps {
   isBorder?: boolean
   marginBottom?: OutlinedTimePickerCssValue
   paddingTop?: OutlinedTimePickerCssValue
+  required?: boolean
+  error?: boolean
+  errorMessage?: string
 }
 
 export interface OutlinedTimePickerExpose {