@hbdlzy/ui-core 0.1.0 → 0.1.2

package/src/components/OutlinedTimePicker/OutlinedTimePicker.vue

@@ -0,0 +1,303 @@
+<template>
+  <div
+    class="outlined-time-picker"
+    :class="[containerClasses, rootClass]"
+    :style="[containerStyle, rootStyle]"
+  >
+    <el-time-picker
+      ref="pickerRef"
+      v-bind="pickerAttrs"
+      class="outlined-time-picker__control"
+      :model-value="pickerValue"
+      :is-range="isRange"
+      :format="format"
+      :value-format="resolvedValueFormat"
+      :placeholder="placeholder"
+      :start-placeholder="startPlaceholder"
+      :end-placeholder="endPlaceholder"
+      :range-separator="rangeSeparator"
+      :disabled="disabled"
+      :clearable="clearable"
+      :arrow-control="arrowControl"
+      :style="pickerStyle"
+      @update:model-value="handleModelValueUpdate"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @change="handleChange"
+      @visible-change="handleVisibleChange"
+      @clear="handleClear"
+    />
+
+    <div
+      v-if="floatingLabel"
+      class="outlined-time-picker__label"
+      :class="labelClasses"
+    >
+      {{ floatingLabel }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useAttrs, watch } from 'vue'
+import type {
+  OutlinedTimePickerCssValue,
+  OutlinedTimePickerExpose,
+  OutlinedTimePickerProps,
+  OutlinedTimePickerValue
+} from './OutlinedTimePicker.types'
+
+defineOptions({
+  name: 'OutlinedTimePicker',
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<OutlinedTimePickerProps>(), {
+  value: '',
+  placeholder: '',
+  label: '',
+  disabled: false,
+  clearable: true,
+  isRange: false,
+  startPlaceholder: '开始时间',
+  endPlaceholder: '结束时间',
+  rangeSeparator: '-',
+  format: 'HH:mm',
+  valueFormat: '',
+  arrowControl: false,
+  inputHeight: 40,
+  isBorder: false,
+  marginBottom: 20,
+  paddingTop: 20
+})
+
+const emit = defineEmits<{
+  (event: 'input', value: OutlinedTimePickerValue | ''): void
+  (event: 'update:value', value: OutlinedTimePickerValue | ''): void
+  (event: 'change', value: OutlinedTimePickerValue | ''): void
+  (event: 'focus', value: FocusEvent): void
+  (event: 'blur', value: FocusEvent): void
+  (event: 'visible-change', value: boolean): void
+  (event: 'clear'): void
+}>()
+
+const attrs = useAttrs()
+const pickerRef = ref<any>(null)
+const pickerValue = ref<OutlinedTimePickerValue | ''>(normalizeValue(props.value, props.isRange))
+const focused = ref(false)
+const blurred = ref(false)
+const visible = ref(false)
+
+watch(
+  () => [props.value, props.isRange] as const,
+  ([value, isRange]) => {
+    pickerValue.value = normalizeValue(value, isRange)
+  },
+  { immediate: true }
+)
+
+const rootClass = computed(() => attrs.class)
+const rootStyle = computed(() => attrs.style)
+const resolvedValueFormat = computed(() => props.valueFormat || props.format)
+
+const pickerAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
+})
+
+const containerClasses = computed(() => ({
+  'outlined-time-picker--bordered': props.isBorder
+}))
+
+const containerStyle = computed(() => ({
+  marginBottom: toCssValue(props.marginBottom),
+  paddingTop: toCssValue(props.paddingTop)
+}))
+
+const pickerStyle = computed(() => ({
+  height: `${props.inputHeight}px`
+}))
+
+const floatingLabel = computed(() => props.label || props.placeholder || '')
+
+const hasContent = computed(() => {
+  if (Array.isArray(pickerValue.value)) {
+    return pickerValue.value.length > 0
+  }
+
+  return hasFilledValue(pickerValue.value)
+})
+
+const labelClasses = computed(() => ({
+  'outlined-time-picker__label--floating': focused.value || hasContent.value,
+  'outlined-time-picker__label--placeholder': !focused.value && !hasContent.value,
+  'outlined-time-picker__label--filled': hasContent.value && !focused.value
+}))
+
+function handleModelValueUpdate(value: OutlinedTimePickerValue) {
+  const normalizedValue = normalizeValue(value, props.isRange)
+  pickerValue.value = normalizedValue
+  emitModelValue(normalizedValue)
+}
+
+function handleChange(value: OutlinedTimePickerValue) {
+  const normalizedValue = normalizeValue(value, props.isRange)
+  pickerValue.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(pickerValue.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: OutlinedTimePickerValue | '') {
+  emit('input', value)
+  emit('update:value', value)
+}
+
+function normalizeValue(value: OutlinedTimePickerValue | undefined, isRange: boolean) {
+  if (isRange) {
+    if (Array.isArray(value)) {
+      return value
+    }
+
+    if (value === undefined || value === null || value === '') {
+      return []
+    }
+
+    return [value]
+  }
+
+  return value ?? ''
+}
+
+function hasFilledValue(value: unknown) {
+  return value !== undefined && value !== null && String(value) !== ''
+}
+
+function toCssValue(value: OutlinedTimePickerCssValue | undefined) {
+  if (typeof value === 'number') {
+    return `${value}px`
+  }
+
+  return value
+}
+
+defineExpose<OutlinedTimePickerExpose>({
+  focus: () => {
+    pickerRef.value?.focus?.()
+  },
+  blur: () => {
+    pickerRef.value?.blur?.()
+  },
+  handleOpen: () => {
+    pickerRef.value?.handleOpen?.()
+  },
+  handleClose: () => {
+    pickerRef.value?.handleClose?.()
+  },
+  clear: () => {
+    const emptyValue = props.isRange ? [] : ''
+    pickerValue.value = emptyValue
+    emitModelValue(emptyValue)
+    emit('change', emptyValue)
+    emit('clear')
+  },
+  getPickerRef: () => pickerRef.value
+})
+</script>
+
+<style scoped>
+.outlined-time-picker {
+  position: relative;
+}
+
+.outlined-time-picker__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-time-picker__label--floating {
+  top: 18px;
+  z-index: 1;
+  opacity: 1;
+  transform: translate(14px, -6px) scale(1);
+  color: var(--el-color-primary);
+}
+
+.outlined-time-picker__label--placeholder {
+  top: 50%;
+  left: 1px;
+  z-index: -1;
+  opacity: 0;
+  transform: translate(14px, 6px) scale(1);
+}
+
+.outlined-time-picker__label--filled {
+  color: var(--el-text-color-regular);
+}
+
+:deep(.outlined-time-picker__control.el-date-editor) {
+  width: 100%;
+}
+
+:deep(.outlined-time-picker__control .el-input__wrapper) {
+  position: relative;
+  min-height: inherit;
+  height: inherit;
+}
+
+:deep(.outlined-time-picker__control .el-input__prefix) {
+  position: absolute;
+  right: 0;
+}
+
+:deep(.outlined-time-picker__control .el-input__suffix) {
+  position: absolute;
+  right: 30px;
+}
+
+:deep(.outlined-time-picker--bordered .el-input__wrapper) {
+  box-shadow: none;
+  border-radius: 0;
+  border-bottom: 1px solid #cccccc;
+}
+
+:deep(.outlined-time-picker--bordered .el-input__wrapper.is-focus) {
+  border-bottom-color: var(--el-color-primary);
+}
+</style>

package/src/components/OutlinedTimePicker/README.md

@@ -0,0 +1,93 @@
+# OutlinedTimePicker
+
+`OutlinedTimePicker` 是 `OutlinedForm` 系列里的时间选择控件，用来统一封装浮动标签、时间范围输入、下边框风格和实例方法暴露。
+
+## 适用场景
+
+- 页面里需要选择单个时间点，比如“开始时间”
+- 页面里需要选择时间范围，比如“开始时间 - 结束时间”
+- 需要统一时间控件的浮动标签样式
+- 需要在页面层直接打开、关闭或清空时间选择面板
+
+## 基本用法
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { OutlinedTimePicker, type OutlinedTimePickerExpose } from '@hbdlzy/ui'
+
+const pickerRef = ref<OutlinedTimePickerExpose | null>(null)
+const startTime = ref('')
+const periodRange = ref<string[]>([])
+</script>
+
+<template>
+  <OutlinedTimePicker
+    ref="pickerRef"
+    v-model:value="startTime"
+    placeholder="开始时间"
+    :is-border="true"
+    clearable
+  />
+
+  <OutlinedTimePicker
+    v-model:value="periodRange"
+    label="执行时段"
+    :is-range="true"
+    start-placeholder="开始时间"
+    end-placeholder="结束时间"
+    :is-border="true"
+    clearable
+  />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `value` | `string \| number \| Date \| Array<string \| number \| Date> \| null` | `''` | `v-model:value` 绑定值 |
+| `placeholder` | `string` | `''` | 单值模式占位文案，也会作为浮动标签文案 |
+| `label` | `string` | `''` | 自定义浮动标签文案，优先级高于 `placeholder` |
+| `disabled` | `boolean` | `false` | 是否禁用 |
+| `clearable` | `boolean` | `true` | 是否允许清空 |
+| `isRange` | `boolean` | `false` | 是否启用时间范围模式 |
+| `startPlaceholder` | `string` | `'开始时间'` | 范围模式开始占位文案 |
+| `endPlaceholder` | `string` | `'结束时间'` | 范围模式结束占位文案 |
+| `rangeSeparator` | `string` | `'-'` | 范围模式中间分隔符 |
+| `format` | `string` | `'HH:mm'` | 展示格式 |
+| `valueFormat` | `string` | `format` | 提交值格式 |
+| `arrowControl` | `boolean` | `false` | 是否使用箭头切换时间 |
+| `inputHeight` | `number` | `40` | 输入框高度 |
+| `isBorder` | `boolean` | `false` | 是否启用下边框风格 |
+| `marginBottom` | `string \| number` | `20` | 外层下边距 |
+| `paddingTop` | `string \| number` | `20` | 外层上内边距，用于浮动标签留白 |
+
+## Emits
+
+| 事件 | 参数 | 说明 |
+| --- | --- | --- |
+| `input` | `OutlinedTimePickerValue \| ''` | 输入值变化时触发 |
+| `update:value` | `OutlinedTimePickerValue \| ''` | `v-model:value` 同步事件 |
+| `change` | `OutlinedTimePickerValue \| ''` | 选项确认变化时触发 |
+| `focus` | `FocusEvent` | 聚焦时触发 |
+| `blur` | `FocusEvent` | 失焦时触发 |
+| `visible-change` | `boolean` | 面板显隐变化时触发 |
+| `clear` | 无 | 清空时触发 |
+
+## Expose
+
+| 方法 | 说明 |
+| --- | --- |
+| `focus()` | 聚焦时间控件 |
+| `blur()` | 取消聚焦 |
+| `handleOpen()` | 打开时间面板 |
+| `handleClose()` | 关闭时间面板 |
+| `clear()` | 清空当前值 |
+| `getPickerRef()` | 获取内部 `el-time-picker` 实例 |
+
+## 设计约束
+
+- 组件只负责通用时间选择壳子，不直接耦合业务时段规则、起止合法性判断或接口结构
+- 更复杂的业务约束，比如“结束时间必须晚于开始时间”，应由页面层或业务组件负责
+- 如果后续某个业务强依赖固定时段模板，建议在业务包里再封一层，不要反向污染 `ui-core`

package/src/components/OutlinedTimePicker/index.ts

@@ -0,0 +1,10 @@
+import OutlinedTimePicker from './OutlinedTimePicker.vue'
+
+export default OutlinedTimePicker
+
+export type {
+  OutlinedTimePickerCssValue,
+  OutlinedTimePickerExpose,
+  OutlinedTimePickerProps,
+  OutlinedTimePickerValue
+} from './OutlinedTimePicker.types'

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

@@ -0,0 +1,56 @@
+export type OutlinedTreeSelectCssValue = string | number
+
+export type OutlinedTreeSelectOptionValue =
+  | string
+  | number
+  | boolean
+  | Record<string, unknown>
+  | null
+
+export type OutlinedTreeSelectValue = OutlinedTreeSelectOptionValue | OutlinedTreeSelectOptionValue[]
+
+export interface OutlinedTreeSelectNode {
+  label?: string
+  value?: OutlinedTreeSelectOptionValue
+  children?: OutlinedTreeSelectNode[]
+  disabled?: boolean
+  [key: string]: unknown
+}
+
+export interface OutlinedTreeSelectProps {
+  value?: OutlinedTreeSelectValue
+  data?: OutlinedTreeSelectNode[]
+  propsValue?: Record<string, unknown>
+  placeholder?: string
+  label?: string
+  disabled?: boolean
+  clearable?: boolean
+  filterable?: boolean
+  multiple?: boolean
+  showCheckbox?: boolean
+  checkStrictly?: boolean
+  checkOnClickNode?: boolean
+  defaultExpandAll?: boolean
+  expandOnClickNode?: boolean
+  renderAfterExpand?: boolean
+  collapseTags?: boolean
+  collapseTagsTooltip?: boolean
+  maxCollapseTags?: number
+  popperClass?: string
+  nodeKey?: string
+  keyValue?: string
+  labelValue?: string
+  childrenValue?: string
+  disabledValue?: string
+  inputHeight?: number
+  isBorder?: boolean
+  marginBottom?: OutlinedTreeSelectCssValue
+  paddingTop?: OutlinedTreeSelectCssValue
+}
+
+export interface OutlinedTreeSelectExpose {
+  focus: () => void
+  blur: () => void
+  clear: () => void
+  getTreeSelectRef: () => unknown | null
+}