@hbdlzy/ui-core 0.1.5 → 0.1.6

package/src/components/OutlinedTimePicker/OutlinedTimePicker.vue

@@ -12,14 +12,15 @@
       :is-range="isRange"
       :format="format"
       :value-format="resolvedValueFormat"
-      :placeholder="placeholder"
-      :start-placeholder="startPlaceholder"
-      :end-placeholder="endPlaceholder"
+      :placeholder="controlPlaceholder"
+      :start-placeholder="controlStartPlaceholder"
+      :end-placeholder="controlEndPlaceholder"
       :range-separator="rangeSeparator"
       :disabled="disabled"
       :clearable="clearable"
       :arrow-control="arrowControl"
       :style="pickerStyle"
+      :aria-invalid="hasError ? 'true' : undefined"
       @update:model-value="handleModelValueUpdate"
       @focus="handleFocus"
       @blur="handleBlur"
@@ -33,8 +34,19 @@
       class="outlined-time-picker__label"
       :class="labelClasses"
     >
-      {{ floatingLabel }}
+      <span
+        v-if="required"
+        class="outlined-time-picker__required"
+      >*</span>
+      <span>{{ floatingLabel }}</span>
     </div>
+
+    <p
+      v-if="hasError"
+      class="outlined-time-picker__error"
+    >
+      {{ resolvedErrorMessage }}
+    </p>
   </div>
 </template>
 
@@ -68,7 +80,10 @@ const props = withDefaults(defineProps<OutlinedTimePickerProps>(), {
   inputHeight: 40,
   isBorder: false,
   marginBottom: 20,
-  paddingTop: 20
+  paddingTop: 20,
+  required: false,
+  error: false,
+  errorMessage: ''
 })
 
 const emit = defineEmits<{
@@ -106,7 +121,8 @@ const pickerAttrs = computed(() => {
 })
 
 const containerClasses = computed(() => ({
-  'outlined-time-picker--bordered': props.isBorder
+  'outlined-time-picker--bordered': props.isBorder,
+  'outlined-time-picker--error': hasError.value
 }))
 
 const containerStyle = computed(() => ({
@@ -119,6 +135,11 @@ const pickerStyle = computed(() => ({
 }))
 
 const floatingLabel = computed(() => props.label || props.placeholder || '')
+const controlPlaceholder = computed(() => addRequiredMark(props.placeholder))
+const controlStartPlaceholder = computed(() => addRequiredMark(props.startPlaceholder))
+const controlEndPlaceholder = computed(() => addRequiredMark(props.endPlaceholder))
+const hasError = computed(() => Boolean(props.error))
+const resolvedErrorMessage = computed(() => props.errorMessage || createRequiredMessage(floatingLabel.value))
 
 const hasContent = computed(() => {
   if (Array.isArray(pickerValue.value)) {
@@ -210,6 +231,18 @@ function toCssValue(value: OutlinedTimePickerCssValue | 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<OutlinedTimePickerExpose>({
   focus: () => {
     pickerRef.value?.focus?.()
@@ -242,6 +275,9 @@ defineExpose<OutlinedTimePickerExpose>({
 .outlined-time-picker__label {
   position: absolute;
   left: -2px;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
   padding: 2px 5px;
   border-radius: 2px;
   background-color: #ffffff;
@@ -271,6 +307,23 @@ defineExpose<OutlinedTimePickerExpose>({
   color: var(--el-text-color-regular);
 }
 
+.outlined-time-picker--error {
+  --el-input-focus-border-color: var(--el-color-danger);
+  --el-input-hover-border-color: var(--el-color-danger);
+}
+
+.outlined-time-picker__required,
+.outlined-time-picker--error .outlined-time-picker__label,
+.outlined-time-picker__error {
+  color: var(--el-color-danger);
+}
+
+.outlined-time-picker__error {
+  margin: 6px 0 0;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
 :deep(.outlined-time-picker__control.el-date-editor) {
   width: 100%;
 }
@@ -291,13 +344,27 @@ defineExpose<OutlinedTimePickerExpose>({
   right: 30px;
 }
 
-:deep(.outlined-time-picker--bordered .el-input__wrapper) {
+.outlined-time-picker--bordered :deep(.el-input__wrapper) {
   box-shadow: none;
   border-radius: 0;
   border-bottom: 1px solid #cccccc;
 }
 
-:deep(.outlined-time-picker--bordered .el-input__wrapper.is-focus) {
+.outlined-time-picker--bordered :deep(.el-input__wrapper.is-focus) {
   border-bottom-color: var(--el-color-primary);
 }
+
+.outlined-time-picker--error :deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.outlined-time-picker--error :deep(.el-input__wrapper.is-focus),
+.outlined-time-picker--error :deep(.el-input__wrapper:hover) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.outlined-time-picker--error.outlined-time-picker--bordered :deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  border-bottom-color: transparent;
+}
 </style>

package/src/components/OutlinedTimePicker/README.md

@@ -49,6 +49,9 @@ const periodRange = ref<string[]>([])
 | `value` | `string \| number \| Date \| Array<string \| number \| Date> \| null` | `''` | `v-model:value` 绑定值 |
 | `placeholder` | `string` | `''` | 单值模式占位文案，也会作为浮动标签文案 |
 | `label` | `string` | `''` | 自定义浮动标签文案，优先级高于 `placeholder` |
+| `required` | `boolean` | `false` | 是否显示必填星号 |
+| `error` | `boolean` | `false` | 是否显示错误态，开启后时间框变红并展示错误文案 |
+| `errorMessage` | `string` | `''` | 错误文案，未传时默认使用“字段名为必填项” |
 | `disabled` | `boolean` | `false` | 是否禁用 |
 | `clearable` | `boolean` | `true` | 是否允许清空 |
 | `isRange` | `boolean` | `false` | 是否启用时间范围模式 |

package/src/components/OutlinedTreeSelect/OutlinedTreeSelect.types.ts

@@ -46,6 +46,9 @@ export interface OutlinedTreeSelectProps {
   isBorder?: boolean
   marginBottom?: OutlinedTreeSelectCssValue
   paddingTop?: OutlinedTreeSelectCssValue
+  required?: boolean
+  error?: boolean
+  errorMessage?: string
 }
 
 export interface OutlinedTreeSelectExpose {

package/src/components/OutlinedTreeSelect/OutlinedTreeSelect.vue

@@ -11,7 +11,7 @@
       :model-value="treeSelectValue"
       :data="data"
       :props="resolvedTreeProps"
-      :placeholder="placeholder"
+      :placeholder="controlPlaceholder"
       :disabled="disabled"
       :clearable="clearable"
       :filterable="filterable"
@@ -28,6 +28,7 @@
       :popper-class="popperClass"
       :node-key="nodeKey"
       :style="treeSelectStyle"
+      :aria-invalid="hasError ? 'true' : undefined"
       @update:model-value="handleModelValueUpdate"
       @focus="handleFocus"
       @blur="handleBlur"
@@ -53,8 +54,19 @@
       class="outlined-tree-select__label"
       :class="labelClasses"
     >
-      {{ floatingLabel }}
+      <span
+        v-if="required"
+        class="outlined-tree-select__required"
+      >*</span>
+      <span>{{ floatingLabel }}</span>
     </div>
+
+    <p
+      v-if="hasError"
+      class="outlined-tree-select__error"
+    >
+      {{ resolvedErrorMessage }}
+    </p>
   </div>
 </template>
 
@@ -101,7 +113,10 @@ const props = withDefaults(defineProps<OutlinedTreeSelectProps>(), {
   inputHeight: 40,
   isBorder: false,
   marginBottom: 20,
-  paddingTop: 20
+  paddingTop: 20,
+  required: false,
+  error: false,
+  errorMessage: ''
 })
 
 const emit = defineEmits<{
@@ -138,7 +153,8 @@ const treeSelectAttrs = computed(() => {
 })
 
 const containerClasses = computed(() => ({
-  'outlined-tree-select--bordered': props.isBorder
+  'outlined-tree-select--bordered': props.isBorder,
+  'outlined-tree-select--error': hasError.value
 }))
 
 const containerStyle = computed(() => ({
@@ -165,6 +181,9 @@ const resolvedTreeProps = 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(() => {
   if (isArrayMode()) {
@@ -263,6 +282,18 @@ function toCssValue(value: OutlinedTreeSelectCssValue | 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<OutlinedTreeSelectExpose>({
   focus: () => {
     treeSelectRef.value?.focus?.()
@@ -296,6 +327,9 @@ defineExpose<OutlinedTreeSelectExpose>({
 .outlined-tree-select__label {
   position: absolute;
   left: -2px;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
   padding: 2px 5px;
   border-radius: 2px;
   background-color: #ffffff;
@@ -325,6 +359,23 @@ defineExpose<OutlinedTreeSelectExpose>({
   color: var(--el-text-color-regular);
 }
 
+.outlined-tree-select--error {
+  --el-input-focus-border-color: var(--el-color-danger);
+  --el-input-hover-border-color: var(--el-color-danger);
+}
+
+.outlined-tree-select__required,
+.outlined-tree-select--error .outlined-tree-select__label,
+.outlined-tree-select__error {
+  color: var(--el-color-danger);
+}
+
+.outlined-tree-select__error {
+  margin: 6px 0 0;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
 :deep(.outlined-tree-select__control.el-select) {
   width: 100%;
 }
@@ -342,13 +393,28 @@ defineExpose<OutlinedTreeSelectExpose>({
   padding-top: 4px;
 }
 
-:deep(.outlined-tree-select--bordered .el-select__wrapper) {
+.outlined-tree-select--bordered :deep(.el-select__wrapper) {
   box-shadow: none;
   border-radius: 0;
   border-bottom: 1px solid #cccccc;
 }
 
-:deep(.outlined-tree-select--bordered .el-select__wrapper.is-focused) {
+.outlined-tree-select--bordered :deep(.el-select__wrapper.is-focused) {
   border-bottom-color: var(--el-color-primary);
 }
+
+.outlined-tree-select--error :deep(.el-select__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.outlined-tree-select--error :deep(.el-select__wrapper.is-focused),
+.outlined-tree-select--error :deep(.el-select__wrapper.is-focus),
+.outlined-tree-select--error :deep(.el-select__wrapper:hover) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.outlined-tree-select--error.outlined-tree-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/OutlinedTreeSelect/README.md

@@ -55,6 +55,9 @@ const treeData = [
 | `propsValue` | `Record<string, unknown>` | `undefined` | 透传给 `el-tree-select` 的 `props` |
 | `placeholder` | `string` | `''` | 占位文案，也会作为浮动标签文案 |
 | `label` | `string` | `''` | 自定义浮动标签文案，优先级高于 `placeholder` |
+| `required` | `boolean` | `false` | 是否显示必填星号 |
+| `error` | `boolean` | `false` | 是否显示错误态，开启后树选择框变红并展示错误文案 |
+| `errorMessage` | `string` | `''` | 错误文案，未传时默认使用“字段名为必填项” |
 | `disabled` | `boolean` | `false` | 是否禁用 |
 | `clearable` | `boolean` | `true` | 是否允许清空 |
 | `filterable` | `boolean` | `true` | 是否允许搜索 |