@hbdlzy/ui-core 0.1.1 → 0.1.2

package/src/components/OutlinedTreeSelect/OutlinedTreeSelect.vue

@@ -0,0 +1,354 @@
+<template>
+  <div
+    class="outlined-tree-select"
+    :class="[containerClasses, rootClass]"
+    :style="[containerStyle, rootStyle]"
+  >
+    <el-tree-select
+      ref="treeSelectRef"
+      v-bind="treeSelectAttrs"
+      class="outlined-tree-select__control"
+      :model-value="treeSelectValue"
+      :data="data"
+      :props="resolvedTreeProps"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :clearable="clearable"
+      :filterable="filterable"
+      :multiple="multiple"
+      :show-checkbox="showCheckbox"
+      :check-strictly="checkStrictly"
+      :check-on-click-node="checkOnClickNode"
+      :default-expand-all="defaultExpandAll"
+      :expand-on-click-node="expandOnClickNode"
+      :render-after-expand="renderAfterExpand"
+      :collapse-tags="collapseTags"
+      :collapse-tags-tooltip="collapseTagsTooltip"
+      :max-collapse-tags="maxCollapseTags"
+      :popper-class="popperClass"
+      :node-key="nodeKey"
+      :style="treeSelectStyle"
+      @update:model-value="handleModelValueUpdate"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @change="handleChange"
+      @visible-change="handleVisibleChange"
+      @clear="handleClear"
+    >
+      <template #empty>
+        <slot name="empty" />
+      </template>
+
+      <template #header>
+        <slot name="header" />
+      </template>
+
+      <template #footer>
+        <slot name="footer" />
+      </template>
+    </el-tree-select>
+
+    <div
+      v-if="floatingLabel"
+      class="outlined-tree-select__label"
+      :class="labelClasses"
+    >
+      {{ floatingLabel }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useAttrs, watch } from 'vue'
+import type {
+  OutlinedTreeSelectCssValue,
+  OutlinedTreeSelectExpose,
+  OutlinedTreeSelectOptionValue,
+  OutlinedTreeSelectProps,
+  OutlinedTreeSelectValue
+} from './OutlinedTreeSelect.types'
+
+defineOptions({
+  name: 'OutlinedTreeSelect',
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<OutlinedTreeSelectProps>(), {
+  value: undefined,
+  data: () => [],
+  propsValue: undefined,
+  placeholder: '',
+  label: '',
+  disabled: false,
+  clearable: true,
+  filterable: true,
+  multiple: false,
+  showCheckbox: false,
+  checkStrictly: false,
+  checkOnClickNode: false,
+  defaultExpandAll: false,
+  expandOnClickNode: false,
+  renderAfterExpand: false,
+  collapseTags: false,
+  collapseTagsTooltip: true,
+  maxCollapseTags: 5,
+  popperClass: '',
+  nodeKey: 'value',
+  keyValue: 'value',
+  labelValue: 'label',
+  childrenValue: 'children',
+  disabledValue: 'disabled',
+  inputHeight: 40,
+  isBorder: false,
+  marginBottom: 20,
+  paddingTop: 20
+})
+
+const emit = defineEmits<{
+  (event: 'input', value: OutlinedTreeSelectValue | ''): void
+  (event: 'update:value', value: OutlinedTreeSelectValue | ''): void
+  (event: 'change', value: OutlinedTreeSelectValue | ''): void
+  (event: 'focus', value: FocusEvent): void
+  (event: 'blur', value: FocusEvent): void
+  (event: 'visible-change', value: boolean): void
+  (event: 'clear'): void
+}>()
+
+const attrs = useAttrs()
+const treeSelectRef = ref<any>(null)
+const treeSelectValue = ref<OutlinedTreeSelectValue | ''>(normalizeTreeSelectValue(props.value, isArrayMode()))
+const focused = ref(false)
+const blurred = ref(false)
+const visible = ref(false)
+
+watch(
+  () => [props.value, props.multiple, props.showCheckbox] as const,
+  ([value]) => {
+    treeSelectValue.value = normalizeTreeSelectValue(value, isArrayMode())
+  },
+  { immediate: true }
+)
+
+const rootClass = computed(() => attrs.class)
+const rootStyle = computed(() => attrs.style)
+
+const treeSelectAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
+})
+
+const containerClasses = computed(() => ({
+  'outlined-tree-select--bordered': props.isBorder
+}))
+
+const containerStyle = computed(() => ({
+  marginBottom: toCssValue(props.marginBottom),
+  paddingTop: toCssValue(props.paddingTop)
+}))
+
+const treeSelectStyle = computed(() => ({
+  minHeight: `${props.inputHeight}px`,
+  height: isArrayMode() ? 'auto' : `${props.inputHeight}px`
+}))
+
+const resolvedTreeProps = computed(() => {
+  if (props.propsValue) {
+    return props.propsValue
+  }
+
+  return {
+    value: props.keyValue,
+    label: props.labelValue,
+    children: props.childrenValue,
+    disabled: props.disabledValue
+  }
+})
+
+const floatingLabel = computed(() => props.label || props.placeholder || '')
+
+const hasContent = computed(() => {
+  if (isArrayMode()) {
+    return Array.isArray(treeSelectValue.value) && treeSelectValue.value.length > 0
+  }
+
+  return hasFilledValue(treeSelectValue.value)
+})
+
+const labelClasses = computed(() => ({
+  'outlined-tree-select__label--floating': focused.value || hasContent.value,
+  'outlined-tree-select__label--placeholder': !focused.value && !hasContent.value,
+  'outlined-tree-select__label--filled': hasContent.value && !focused.value
+}))
+
+function isArrayMode() {
+  return props.multiple || props.showCheckbox
+}
+
+function handleModelValueUpdate(value: OutlinedTreeSelectValue) {
+  const normalizedValue = normalizeTreeSelectValue(value, isArrayMode())
+  treeSelectValue.value = normalizedValue
+  emitModelValue(normalizedValue)
+}
+
+function handleChange(value: OutlinedTreeSelectValue) {
+  const normalizedValue = normalizeTreeSelectValue(value, isArrayMode())
+  treeSelectValue.value = normalizedValue
+  emit('change', normalizedValue)
+}
+
+function handleFocus(event: FocusEvent) {
+  blurred.value = false
+  focused.value = true
+  emit('focus', event)
+}
+
+function handleBlur(event: FocusEvent) {
+  blurred.value = true
+
+  if (!visible.value) {
+    focused.value = false
+    emitModelValue(treeSelectValue.value)
+  }
+
+  emit('blur', event)
+}
+
+function handleVisibleChange(nextVisible: boolean) {
+  visible.value = nextVisible
+
+  if (!nextVisible && blurred.value) {
+    focused.value = false
+  }
+
+  emit('visible-change', nextVisible)
+}
+
+function handleClear() {
+  emit('clear')
+}
+
+function emitModelValue(value: OutlinedTreeSelectValue | '') {
+  emit('input', value)
+  emit('update:value', value)
+}
+
+function normalizeTreeSelectValue(
+  value: OutlinedTreeSelectValue | undefined,
+  arrayMode: boolean
+): OutlinedTreeSelectValue | '' {
+  if (arrayMode) {
+    if (Array.isArray(value)) {
+      return value
+    }
+
+    if (value === undefined || value === null || value === '') {
+      return []
+    }
+
+    return [value as OutlinedTreeSelectOptionValue]
+  }
+
+  return value ?? ''
+}
+
+function hasFilledValue(value: unknown) {
+  return value !== undefined && value !== null && String(value) !== ''
+}
+
+function toCssValue(value: OutlinedTreeSelectCssValue | undefined) {
+  if (typeof value === 'number') {
+    return `${value}px`
+  }
+
+  return value
+}
+
+defineExpose<OutlinedTreeSelectExpose>({
+  focus: () => {
+    treeSelectRef.value?.focus?.()
+  },
+  blur: () => {
+    treeSelectRef.value?.blur?.()
+  },
+  clear: () => {
+    if (isArrayMode()) {
+      treeSelectValue.value = []
+      emitModelValue([])
+      emit('change', [])
+      emit('clear')
+      return
+    }
+
+    treeSelectValue.value = ''
+    emitModelValue('')
+    emit('change', '')
+    emit('clear')
+  },
+  getTreeSelectRef: () => treeSelectRef.value
+})
+</script>
+
+<style scoped>
+.outlined-tree-select {
+  position: relative;
+}
+
+.outlined-tree-select__label {
+  position: absolute;
+  left: -2px;
+  padding: 2px 5px;
+  border-radius: 2px;
+  background-color: #ffffff;
+  font-size: 12px;
+  line-height: 1;
+  transition: color 200ms cubic-bezier(0, 0, 0.2, 1), transform 200ms cubic-bezier(0, 0, 0.2, 1);
+  pointer-events: none;
+}
+
+.outlined-tree-select__label--floating {
+  top: 18px;
+  z-index: 1;
+  opacity: 1;
+  transform: translate(14px, -6px) scale(1);
+  color: var(--el-color-primary);
+}
+
+.outlined-tree-select__label--placeholder {
+  top: 50%;
+  left: 1px;
+  z-index: -1;
+  opacity: 0;
+  transform: translate(14px, 6px) scale(1);
+}
+
+.outlined-tree-select__label--filled {
+  color: var(--el-text-color-regular);
+}
+
+:deep(.outlined-tree-select__control.el-select) {
+  width: 100%;
+}
+
+:deep(.outlined-tree-select__control .el-select__wrapper) {
+  min-height: inherit;
+  height: inherit;
+}
+
+:deep(.outlined-tree-select__control .el-select__selection) {
+  min-height: inherit;
+}
+
+:deep(.outlined-tree-select__control .el-select__tags) {
+  padding-top: 4px;
+}
+
+:deep(.outlined-tree-select--bordered .el-select__wrapper) {
+  box-shadow: none;
+  border-radius: 0;
+  border-bottom: 1px solid #cccccc;
+}
+
+:deep(.outlined-tree-select--bordered .el-select__wrapper.is-focused) {
+  border-bottom-color: var(--el-color-primary);
+}
+</style>

package/src/components/OutlinedTreeSelect/README.md

@@ -0,0 +1,107 @@
+# OutlinedTreeSelect
+
+`OutlinedTreeSelect` 是 `OutlinedForm` 系列里的树形下拉选择控件，用来统一封装浮动标签、树节点字段映射、树面板显隐和常用树选择参数。
+
+## 适用场景
+
+- 页面里需要在下拉框中选择组织树、区域树、节点树
+- 需要统一 `el-tree-select` 的浮动标签样式
+- 需要兼容自定义节点字段，比如 `id`、`name`、`children`
+- 需要直接在页面层调用聚焦、清空等实例方法
+
+## 基本用法
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { OutlinedTreeSelect, type OutlinedTreeSelectExpose } from '@hbdlzy/ui'
+
+const treeSelectRef = ref<OutlinedTreeSelectExpose | null>(null)
+const parentId = ref('')
+
+const treeData = [
+  {
+    id: 'north',
+    name: '华北',
+    children: [
+      { id: 'beijing', name: '北京节点' },
+      { id: 'tianjin', name: '天津节点' }
+    ]
+  }
+]
+</script>
+
+<template>
+  <OutlinedTreeSelect
+    ref="treeSelectRef"
+    v-model:value="parentId"
+    placeholder="选择父节点"
+    :data="treeData"
+    :props-value="{ value: 'id', label: 'name', children: 'children' }"
+    :check-strictly="true"
+    :is-border="true"
+    clearable
+    filterable
+  />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `value` | `string \| number \| boolean \| object \| Array<...>` | `undefined` | `v-model:value` 绑定值 |
+| `data` | `OutlinedTreeSelectNode[]` | `[]` | 树节点数据 |
+| `propsValue` | `Record<string, unknown>` | `undefined` | 透传给 `el-tree-select` 的 `props` |
+| `placeholder` | `string` | `''` | 占位文案，也会作为浮动标签文案 |
+| `label` | `string` | `''` | 自定义浮动标签文案，优先级高于 `placeholder` |
+| `disabled` | `boolean` | `false` | 是否禁用 |
+| `clearable` | `boolean` | `true` | 是否允许清空 |
+| `filterable` | `boolean` | `true` | 是否允许搜索 |
+| `multiple` | `boolean` | `false` | 是否多选 |
+| `showCheckbox` | `boolean` | `false` | 是否显示树节点勾选框 |
+| `checkStrictly` | `boolean` | `false` | 是否取消父子节点关联 |
+| `checkOnClickNode` | `boolean` | `false` | 是否点击节点内容时选中 |
+| `defaultExpandAll` | `boolean` | `false` | 是否默认展开所有节点 |
+| `expandOnClickNode` | `boolean` | `false` | 是否点击节点展开树 |
+| `renderAfterExpand` | `boolean` | `false` | 是否在展开后再渲染子节点 |
+| `collapseTags` | `boolean` | `false` | 多选时是否折叠 tag |
+| `collapseTagsTooltip` | `boolean` | `true` | 折叠 tag 时是否显示 tooltip |
+| `maxCollapseTags` | `number` | `5` | 最多展示多少个折叠 tag |
+| `popperClass` | `string` | `''` | 自定义弹层类名 |
+| `nodeKey` | `string` | `'value'` | 树节点唯一标识字段 |
+| `keyValue` | `string` | `'value'` | 默认值字段名 |
+| `labelValue` | `string` | `'label'` | 默认标签字段名 |
+| `childrenValue` | `string` | `'children'` | 默认子节点字段名 |
+| `disabledValue` | `string` | `'disabled'` | 默认禁用字段名 |
+| `inputHeight` | `number` | `40` | 输入框高度 |
+| `isBorder` | `boolean` | `false` | 是否启用下边框风格 |
+| `marginBottom` | `string \| number` | `20` | 外层下边距 |
+| `paddingTop` | `string \| number` | `20` | 外层上内边距，用于浮动标签留白 |
+
+## Emits
+
+| 事件 | 参数 | 说明 |
+| --- | --- | --- |
+| `input` | `OutlinedTreeSelectValue \| ''` | 输入值变化时触发 |
+| `update:value` | `OutlinedTreeSelectValue \| ''` | `v-model:value` 同步事件 |
+| `change` | `OutlinedTreeSelectValue \| ''` | 选项确认变化时触发 |
+| `focus` | `FocusEvent` | 聚焦时触发 |
+| `blur` | `FocusEvent` | 失焦时触发 |
+| `visible-change` | `boolean` | 面板显隐变化时触发 |
+| `clear` | 无 | 清空时触发 |
+
+## Expose
+
+| 方法 | 说明 |
+| --- | --- |
+| `focus()` | 聚焦树选择控件 |
+| `blur()` | 取消聚焦 |
+| `clear()` | 清空当前值 |
+| `getTreeSelectRef()` | 获取内部 `el-tree-select` 实例 |
+
+## 设计约束
+
+- 组件只处理通用树选择壳子和交互状态，不直接耦合组织树接口、区域树接口等业务数据源
+- 如果业务已经有固定的树字段协议，优先传 `propsValue`，不要在页面层二次转一份树数据
+- 如果后续要支持领域级树选择行为，比如自动拼接父路径、限定层级，只建议在业务包里再封一层

package/src/components/OutlinedTreeSelect/index.ts

@@ -0,0 +1,12 @@
+import OutlinedTreeSelect from './OutlinedTreeSelect.vue'
+
+export default OutlinedTreeSelect
+
+export type {
+  OutlinedTreeSelectCssValue,
+  OutlinedTreeSelectExpose,
+  OutlinedTreeSelectNode,
+  OutlinedTreeSelectOptionValue,
+  OutlinedTreeSelectProps,
+  OutlinedTreeSelectValue
+} from './OutlinedTreeSelect.types'

package/src/index.ts

@@ -15,5 +15,19 @@ 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 OutlinedInput } from './components/OutlinedInput'
+export * from './components/OutlinedInput'
+export { default as OutlinedSelect } from './components/OutlinedSelect'
+export * from './components/OutlinedSelect'
+export { default as OutlinedDatePicker } from './components/OutlinedDatePicker'
+export * from './components/OutlinedDatePicker'
+export { default as OutlinedDateTimePicker } from './components/OutlinedDateTimePicker'
+export * from './components/OutlinedDateTimePicker'
+export { default as OutlinedTimePicker } from './components/OutlinedTimePicker'
+export * from './components/OutlinedTimePicker'
+export { default as OutlinedCascader } from './components/OutlinedCascader'
+export * from './components/OutlinedCascader'
+export { default as OutlinedTreeSelect } from './components/OutlinedTreeSelect'
+export * from './components/OutlinedTreeSelect'
 export { exportExcel } from './excel/exportExcel'
 export type { ExcelCellValue, ExcelExportColumn, ExcelExportOptions } from './excel/exportExcel'