@hbdlzy/ui-core 0.1.5 → 0.1.7

package/src/components/BaseTable/README.md

@@ -199,9 +199,9 @@ const resultAdapter = (result: any) => {
 
 如果接口参数结构更特殊，可以改用 `sortMapper`。
 
-## 表头列搜索
+## 表头列搜索 / 筛选
 
-`BaseTable` 现在支持列头搜索能力，用法和旧 `TableComponent.vue` 里的 `isSearch` 很接近，但配置方式更收敛。
+`BaseTable` 现在支持列头输入搜索、下拉筛选、多选下拉和级联筛选能力，用法和旧 `TableComponent.vue` 里的 `isSearch` 很接近，但配置方式更收敛。
 
 ### 基础写法
 
@@ -217,7 +217,7 @@ const columns = [
 
 开启后，这一列的表头会出现搜索图标，点击后会弹出输入框，并提供“搜索 / 重置”操作。
 
-### 高级写法
+### 输入框高级写法
 
 ```ts
 const columns = [
@@ -235,13 +235,94 @@ const columns = [
 ]
 ```
 
+### 下拉筛选写法
+
+```ts
+const columns = [
+  {
+    label: '状态',
+    prop: 'status',
+    kind: 'tag',
+    options: [
+      { label: '启用', value: 'enabled', tagType: 'success' },
+      { label: '停用', value: 'disabled', tagType: 'info' }
+    ],
+    headerSearch: {
+      type: 'select',
+      placeholder: '请选择状态',
+      width: 220,
+      searchText: '筛选'
+    }
+  }
+]
+```
+
+下拉筛选默认复用当前列的 `options`，也可以在 `headerSearch.options` 中单独传入选项。需要多选时可以配置 `multiple: true`，请求参数会以数组形式传出。
+
+### 多选下拉筛选写法
+
+```ts
+const columns = [
+  {
+    label: '资讯分类',
+    prop: 'categories',
+    kind: 'tag',
+    options: [
+      { label: '市场资讯', value: 'market', tagType: 'primary' },
+      { label: '运行日报', value: 'operation', tagType: 'success' }
+    ],
+    headerSearch: {
+      type: 'select',
+      multiple: true,
+      placeholder: '请选择分类',
+      searchText: '筛选'
+    }
+  }
+]
+```
+
+多选下拉会在面板里保留展开状态，方便连续选择多个选项；点击“筛选”后请求参数形如 `{ categories: ['market', 'operation'] }`。
+
+### 级联下拉筛选写法
+
+```ts
+const columns = [
+  {
+    label: '所在区域',
+    prop: 'regionPath',
+    headerSearch: {
+      type: 'cascader',
+      placeholder: '请选择区域',
+      width: 420,
+      options: [
+        {
+          label: '华北',
+          value: 'north',
+          children: [
+            {
+              label: '北京',
+              value: 'beijing',
+              children: [
+                { label: '朝阳区', value: 'chaoyang' }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  }
+]
+```
+
+级联筛选默认使用 `children` 作为子级字段，可以通过 `optionChildrenKey` 改写；请求参数会以完整路径数组传出，例如 `{ regionPath: ['north', 'beijing', 'chaoyang'] }`。
+
 ### 行为说明
 
 - 远程模式下，列头搜索值会自动合并到 `request(params)` 的参数里
 - 触发搜索或重置时，会自动把页码重置到第一页
 - 如果配置了 `paramKey`，请求参数会优先使用它
 - 如果没有配置 `paramKey`，默认使用当前列的 `prop`
-- 本地数据模式下，列头搜索会对当前 `data` 做简单文本包含过滤
+- 本地数据模式下，输入搜索会对当前 `data` 做简单文本包含过滤，下拉筛选会按选项值精确匹配，级联筛选会按路径前缀匹配
 - 多个开启搜索的列会按“同时满足”处理
 
 示例请求参数：
@@ -250,7 +331,8 @@ const columns = [
 {
   currentPage: 1,
   pageSize: 20,
-  owner: '张三'
+  owner: '张三',
+  status: 'enabled'
 }
 ```
 
@@ -362,6 +444,7 @@ const columns = [
 
 ```ts
 tableRef.value?.setHeaderSearchValue('owner', '张三')
+tableRef.value?.setHeaderSearchValue('status', 'enabled')
 tableRef.value?.resetHeaderSearch()
 ```
 

package/src/components/BaseTable/index.ts

@@ -10,6 +10,11 @@ export type {
   BaseTableColumnKind,
   BaseTableCssValue,
   BaseTableExpose,
+  BaseTableHeaderSearchConfig,
+  BaseTableHeaderSearchPathValue,
+  BaseTableHeaderSearchPrimitiveValue,
+  BaseTableHeaderSearchType,
+  BaseTableHeaderSearchValue,
   BaseTableLoadedPayload,
   BaseTableNormalizedResult,
   BaseTableOption,

package/src/components/OutlinedCascader/OutlinedCascader.types.ts

@@ -17,6 +17,9 @@ export interface OutlinedCascaderProps {
   levels?: boolean
   marginBottom?: OutlinedCascaderCssValue
   paddingTop?: OutlinedCascaderCssValue
+  required?: boolean
+  error?: boolean
+  errorMessage?: string
 }
 
 export interface OutlinedCascaderExpose {

package/src/components/OutlinedCascader/OutlinedCascader.vue

@@ -12,12 +12,13 @@
       :options="options"
       :props="propsValue"
       :clearable="clearable"
-      :placeholder="placeholder"
+      :placeholder="controlPlaceholder"
       :filterable="filterable"
       :show-all-levels="levels"
       :disabled="disabled"
       :popper-class="popperClass"
       :style="cascaderStyle"
+      :aria-invalid="hasError ? 'true' : undefined"
       @update:model-value="handleModelValueUpdate"
       @focus="handleFocus"
       @blur="handleBlur"
@@ -30,8 +31,19 @@
       class="outlined-cascader__label"
       :class="labelClasses"
     >
-      {{ floatingLabel }}
+      <span
+        v-if="required"
+        class="outlined-cascader__required"
+      >*</span>
+      <span>{{ floatingLabel }}</span>
     </div>
+
+    <p
+      v-if="hasError"
+      class="outlined-cascader__error"
+    >
+      {{ resolvedErrorMessage }}
+    </p>
   </div>
 </template>
 
@@ -63,7 +75,10 @@ const props = withDefaults(defineProps<OutlinedCascaderProps>(), {
   filterable: true,
   levels: true,
   marginBottom: 20,
-  paddingTop: 20
+  paddingTop: 20,
+  required: false,
+  error: false,
+  errorMessage: ''
 })
 
 const emit = defineEmits<{
@@ -99,7 +114,8 @@ const cascaderAttrs = computed(() => {
 })
 
 const containerClasses = computed(() => ({
-  'outlined-cascader--bordered': props.isBorder
+  'outlined-cascader--bordered': props.isBorder,
+  'outlined-cascader--error': hasError.value
 }))
 
 const containerStyle = computed(() => ({
@@ -113,6 +129,9 @@ const cascaderStyle = 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(() => cascaderValue.value.length > 0)
 
@@ -178,6 +197,18 @@ function toCssValue(value: OutlinedCascaderCssValue | 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<OutlinedCascaderExpose>({
   focus: () => {
     cascaderRef.value?.togglePopperVisible?.(true)
@@ -205,6 +236,9 @@ defineExpose<OutlinedCascaderExpose>({
 .outlined-cascader__label {
   position: absolute;
   left: -2px;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
   padding: 2px 5px;
   border-radius: 2px;
   background-color: #ffffff;
@@ -234,17 +268,48 @@ defineExpose<OutlinedCascaderExpose>({
   color: var(--el-text-color-regular);
 }
 
+.outlined-cascader--error {
+  --el-input-focus-border-color: var(--el-color-danger);
+  --el-input-hover-border-color: var(--el-color-danger);
+}
+
+.outlined-cascader__required,
+.outlined-cascader--error .outlined-cascader__label,
+.outlined-cascader__error {
+  color: var(--el-color-danger);
+}
+
+.outlined-cascader__error {
+  margin: 6px 0 0;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
 :deep(.outlined-cascader__control .el-input) {
   height: 100%;
 }
 
-:deep(.outlined-cascader--bordered .el-input__wrapper) {
+.outlined-cascader--bordered :deep(.el-input__wrapper) {
   box-shadow: none;
   border-radius: 0;
   border-bottom: 1px solid #cccccc;
 }
 
-:deep(.outlined-cascader--bordered .el-input__wrapper.is-focus) {
+.outlined-cascader--bordered :deep(.el-input__wrapper.is-focus) {
   border-bottom-color: var(--el-color-primary);
 }
+
+.outlined-cascader--error :deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.outlined-cascader--error :deep(.el-input.is-focus .el-input__wrapper),
+.outlined-cascader--error :deep(.el-input__wrapper:hover) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.outlined-cascader--error.outlined-cascader--bordered :deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  border-bottom-color: transparent;
+}
 </style>

package/src/components/OutlinedCascader/README.md

@@ -54,6 +54,9 @@ const areaOptions = [
 | `propsValue` | `Record<string, unknown>` | `undefined` | 透传给 `el-cascader` 的 `props` |
 | `placeholder` | `string` | `''` | 占位文案，也会作为浮动标签文案 |
 | `label` | `string` | `''` | 自定义浮动标签文案，优先级高于 `placeholder` |
+| `required` | `boolean` | `false` | 是否显示必填星号 |
+| `error` | `boolean` | `false` | 是否显示错误态，开启后级联框变红并展示错误文案 |
+| `errorMessage` | `string` | `''` | 错误文案，未传时默认使用“字段名为必填项” |
 | `popperClass` | `string` | `''` | 自定义弹层类名 |
 | `disabled` | `boolean` | `false` | 是否禁用 |
 | `inputHeight` | `number` | `40` | 输入框高度 |

package/src/components/OutlinedDatePicker/OutlinedDatePicker.types.ts

@@ -29,6 +29,9 @@ export interface OutlinedDatePickerProps {
   disabledDate?: OutlinedDatePickerDisabledDate
   marginBottom?: OutlinedDatePickerCssValue
   paddingTop?: OutlinedDatePickerCssValue
+  required?: boolean
+  error?: boolean
+  errorMessage?: string
 }
 
 export interface OutlinedDatePickerExpose {

package/src/components/OutlinedDatePicker/OutlinedDatePicker.vue

@@ -12,9 +12,10 @@
       :type="typeDate"
       :format="format"
       :value-format="resolvedValueFormat"
-      :placeholder="placeholder"
+      :placeholder="controlPlaceholder"
       :disabled="disabled"
       :style="pickerStyle"
+      :aria-invalid="hasError ? 'true' : undefined"
       @update:model-value="handleModelValueUpdate"
       @focus="handleFocus"
       @blur="handleBlur"
@@ -27,8 +28,19 @@
       class="outlined-date-picker__label"
       :class="labelClasses"
     >
-      {{ floatingLabel }}
+      <span
+        v-if="required"
+        class="outlined-date-picker__required"
+      >*</span>
+      <span>{{ floatingLabel }}</span>
     </div>
+
+    <p
+      v-if="hasError"
+      class="outlined-date-picker__error"
+    >
+      {{ resolvedErrorMessage }}
+    </p>
   </div>
 </template>
 
@@ -62,7 +74,10 @@ const props = withDefaults(defineProps<OutlinedDatePickerProps>(), {
   isBorder: false,
   disabledDate: undefined,
   marginBottom: 20,
-  paddingTop: 20
+  paddingTop: 20,
+  required: false,
+  error: false,
+  errorMessage: ''
 })
 
 const emit = defineEmits<{
@@ -159,7 +174,8 @@ const pickerAttrs = computed(() => {
 })
 
 const containerClasses = computed(() => ({
-  'outlined-date-picker--bordered': props.isBorder
+  'outlined-date-picker--bordered': props.isBorder,
+  'outlined-date-picker--error': hasError.value
 }))
 
 const containerStyle = computed(() => ({
@@ -172,6 +188,9 @@ const pickerStyle = 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(pickerValue.value))
 
@@ -279,6 +298,18 @@ function toCssValue(value: OutlinedDatePickerCssValue | 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<OutlinedDatePickerExpose>({
   focus: () => {
     pickerRef.value?.focus?.()
@@ -304,6 +335,9 @@ defineExpose<OutlinedDatePickerExpose>({
 .outlined-date-picker__label {
   position: absolute;
   left: -2px;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
   padding: 2px 5px;
   border-radius: 2px;
   background-color: #ffffff;
@@ -333,6 +367,23 @@ defineExpose<OutlinedDatePickerExpose>({
   color: var(--el-text-color-regular);
 }
 
+.outlined-date-picker--error {
+  --el-input-focus-border-color: var(--el-color-danger);
+  --el-input-hover-border-color: var(--el-color-danger);
+}
+
+.outlined-date-picker__required,
+.outlined-date-picker--error .outlined-date-picker__label,
+.outlined-date-picker__error {
+  color: var(--el-color-danger);
+}
+
+.outlined-date-picker__error {
+  margin: 6px 0 0;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
 :deep(.outlined-date-picker__control.el-date-editor) {
   width: 100%;
 }
@@ -353,13 +404,27 @@ defineExpose<OutlinedDatePickerExpose>({
   right: 30px;
 }
 
-:deep(.outlined-date-picker--bordered .el-input__wrapper) {
+.outlined-date-picker--bordered :deep(.el-input__wrapper) {
   box-shadow: none;
   border-radius: 0;
   border-bottom: 1px solid #cccccc;
 }
 
-:deep(.outlined-date-picker--bordered .el-input__wrapper.is-focus) {
+.outlined-date-picker--bordered :deep(.el-input__wrapper.is-focus) {
   border-bottom-color: var(--el-color-primary);
 }
+
+.outlined-date-picker--error :deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.outlined-date-picker--error :deep(.el-input__wrapper.is-focus),
+.outlined-date-picker--error :deep(.el-input__wrapper:hover) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.outlined-date-picker--error.outlined-date-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/OutlinedDatePicker/README.md

@@ -97,6 +97,9 @@ const form = reactive({
 - `value`: 当前值，推荐通过 `v-model:value` 使用
 - `placeholder`: 占位文案，同时默认作为浮动标签文案
 - `label`: 自定义浮动标签文案，未传时回退到 `placeholder`
+- `required`: 是否显示必填星号，默认 `false`
+- `error`: 是否显示错误态，开启后日期框变红并展示错误文案
+- `errorMessage`: 错误文案，未传时默认使用“字段名为必填项”
 - `disabled`: 是否禁用
 - `timeValue`: 是否按带时间场景处理默认时间
 - `typeDate`: 日期控件类型，默认 `date`

package/src/components/OutlinedDateTimePicker/OutlinedDateTimePicker.types.ts

@@ -20,6 +20,9 @@ export interface OutlinedDateTimePickerProps {
   clearable?: boolean
   marginBottom?: OutlinedDateTimePickerCssValue
   paddingTop?: OutlinedDateTimePickerCssValue
+  required?: boolean
+  error?: boolean
+  errorMessage?: string
 }
 
 export interface OutlinedDateTimePickerExpose {