@hbdlzy/ui-core 0.1.5 → 0.1.7

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` | 是否允许搜索 |

package/src/components/SvgIcon/README.md

@@ -0,0 +1,53 @@
+# SvgIcon
+
+`SvgIcon` 用来展示 SVG symbol sprite 或外链 SVG，兼容旧项目里 `<svg-icon icon-class="xxx" class-name="xxx" />` 的写法。
+
+## 解决的问题
+
+- 统一 SVG 图标展示入口
+- 支持 `#icon-xxx` 形式的 symbol 引用
+- 支持 http、data、blob 等外链 SVG 通过 mask 渲染为 `currentColor`
+- 自动去掉 `iconClass` 首尾空格，兼容旧模板里误带空格的图标名
+
+## 基础用法
+
+```vue
+<template>
+  <SvgIcon
+    icon-class="filter"
+    class-name="table-search-icon"
+  />
+</template>
+
+<script setup lang="ts">
+import { SvgIcon } from '@hbdlzy/ui-core'
+</script>
+```
+
+上面的写法会渲染 `<use href="#icon-filter" />`。页面或项目需要自行通过 SVG sprite 注入 `symbol id="icon-filter"`。
+
+## 外链 SVG
+
+```vue
+<template>
+  <SvgIcon
+    :icon-class="externalSvgUrl"
+    class-name="status-icon"
+  />
+</template>
+```
+
+外链模式会使用 CSS mask 渲染，图标颜色继承父级 `color`。
+
+## Props
+
+- `iconClass`: 图标名或外链 SVG 地址，必填
+- `className`: 追加到根节点的类名
+- `prefix`: symbol 前缀，默认 `icon`，最终引用为 `#${prefix}-${iconClass}`
+- `ariaLabel`: 无障碍标签，未传时图标默认 `aria-hidden="true"`
+
+## 推荐约定
+
+- symbol sprite 的 id 统一使用 `icon-xxx`
+- 需要调色时通过父级或 `className` 设置 `color`
+- 业务项目如果已经有 `svg-sprite-loader` 或 Vite SVG sprite 插件，可继续复用原有注入方式

package/src/components/SvgIcon/SvgIcon.types.ts

@@ -0,0 +1,6 @@
+export interface SvgIconProps {
+  iconClass: string
+  className?: string
+  prefix?: string
+  ariaLabel?: string
+}

package/src/components/SvgIcon/SvgIcon.vue

@@ -0,0 +1,68 @@
+<template>
+  <span
+    v-if="isExternal"
+    class="svg-external-icon svg-icon"
+    :class="className"
+    :style="externalIconStyle"
+    :aria-hidden="ariaHidden"
+    :aria-label="ariaLabel"
+    role="img"
+  />
+  <svg
+    v-else
+    class="svg-icon"
+    :class="className"
+    :aria-hidden="ariaHidden"
+    :aria-label="ariaLabel"
+    role="img"
+  >
+    <use
+      :href="iconName"
+      :xlink:href="iconName"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import type { SvgIconProps } from './SvgIcon.types'
+
+defineOptions({
+  name: 'SvgIcon'
+})
+
+const props = withDefaults(defineProps<SvgIconProps>(), {
+  className: '',
+  prefix: 'icon',
+  ariaLabel: ''
+})
+
+const normalizedIconClass = computed(() => props.iconClass.trim())
+const normalizedPrefix = computed(() => props.prefix.trim() || 'icon')
+const isExternal = computed(() => /^(https?:|mailto:|tel:|data:|blob:)/.test(normalizedIconClass.value))
+const iconName = computed(() => `#${normalizedPrefix.value}-${normalizedIconClass.value}`)
+const ariaHidden = computed(() => props.ariaLabel ? undefined : 'true')
+
+const externalIconStyle = computed<CSSProperties>(() => ({
+  mask: `url(${normalizedIconClass.value}) no-repeat 50% 50%`,
+  WebkitMask: `url(${normalizedIconClass.value}) no-repeat 50% 50%`
+}))
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  display: inline-block;
+  background-color: currentColor;
+  mask-size: cover !important;
+  -webkit-mask-size: cover !important;
+}
+</style>

package/src/components/SvgIcon/index.ts

@@ -0,0 +1,5 @@
+import SvgIcon from './SvgIcon.vue'
+
+export default SvgIcon
+
+export type { SvgIconProps } from './SvgIcon.types'

package/src/index.ts

@@ -19,6 +19,8 @@ export { default as BaseEChart } from './components/BaseEChart'
 export * from './components/BaseEChart'
 export { default as BaseExportButton } from './components/BaseExportButton'
 export * from './components/BaseExportButton'
+export { default as SvgIcon } from './components/SvgIcon'
+export * from './components/SvgIcon'
 export { default as OutlinedInput } from './components/OutlinedInput'
 export * from './components/OutlinedInput'
 export { default as OutlinedSelect } from './components/OutlinedSelect'