@hbdlzy/ui-core 0.1.1 → 0.1.2

package/src/components/OutlinedDatePicker/OutlinedDatePicker.vue

@@ -0,0 +1,365 @@
+<template>
+  <div
+    class="outlined-date-picker"
+    :class="[containerClasses, rootClass]"
+    :style="[containerStyle, rootStyle]"
+  >
+    <el-date-picker
+      ref="pickerRef"
+      v-bind="pickerAttrs"
+      class="outlined-date-picker__control"
+      :model-value="pickerValue"
+      :type="typeDate"
+      :format="format"
+      :value-format="resolvedValueFormat"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :style="pickerStyle"
+      @update:model-value="handleModelValueUpdate"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @change="handleChange"
+      @visible-change="handleVisibleChange"
+    />
+
+    <div
+      v-if="floatingLabel"
+      class="outlined-date-picker__label"
+      :class="labelClasses"
+    >
+      {{ floatingLabel }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useAttrs, watch } from 'vue'
+import type {
+  OutlinedDatePickerCssValue,
+  OutlinedDatePickerDisabledDate,
+  OutlinedDatePickerExpose,
+  OutlinedDatePickerProps,
+  OutlinedDatePickerValue
+} from './OutlinedDatePicker.types'
+
+defineOptions({
+  name: 'OutlinedDatePicker',
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<OutlinedDatePickerProps>(), {
+  value: '',
+  placeholder: '',
+  label: '',
+  disabled: false,
+  timeValue: false,
+  typeDate: 'date',
+  format: 'YYYY-MM-DD',
+  valueFormat: '',
+  showPassword: false,
+  multiple: false,
+  inputHeight: 40,
+  isBorder: false,
+  disabledDate: undefined,
+  marginBottom: 20,
+  paddingTop: 20
+})
+
+const emit = defineEmits<{
+  (event: 'input', value: OutlinedDatePickerValue | ''): void
+  (event: 'update:value', value: OutlinedDatePickerValue | ''): void
+  (event: 'change', value: OutlinedDatePickerValue | ''): void
+  (event: 'focus', value: FocusEvent): void
+  (event: 'blur', value: FocusEvent): void
+  (event: 'visible-change', value: boolean): void
+}>()
+
+const attrs = useAttrs()
+const pickerRef = ref<any>(null)
+const pickerValue = ref<OutlinedDatePickerValue | ''>(props.value ?? '')
+const focused = ref(false)
+const blurred = ref(false)
+const visible = ref(false)
+
+watch(
+  () => props.value,
+  (value) => {
+    pickerValue.value = value ?? ''
+  },
+  { immediate: true }
+)
+
+const rootClass = computed(() => attrs.class)
+const rootStyle = computed(() => attrs.style)
+
+const resolvedValueFormat = computed(() => props.valueFormat || props.format)
+
+const resolvedDisabledDate = computed(() => createDisabledDateHandler(props.disabledDate))
+
+const resolvedDefaultTime = computed(() => {
+  if (attrs.defaultTime !== undefined) {
+    return attrs.defaultTime
+  }
+
+  if ((attrs as Record<string, unknown>)['default-time'] !== undefined) {
+    return (attrs as Record<string, unknown>)['default-time']
+  }
+
+  return props.timeValue ? new Date().setHours(0, 0, 0, 0) : new Date()
+})
+
+const resolvedDisabledHours = computed(() => {
+  if (attrs.disabledHours !== undefined) {
+    return attrs.disabledHours
+  }
+
+  if ((attrs as Record<string, unknown>)['disabled-hours'] !== undefined) {
+    return (attrs as Record<string, unknown>)['disabled-hours']
+  }
+
+  if (!shouldLimitCurrentTime()) {
+    return undefined
+  }
+
+  return () => {
+    const hours = new Date().getHours()
+    return Array.from({ length: hours }, (_, index) => index)
+  }
+})
+
+const resolvedDisabledMinutes = computed(() => {
+  if (attrs.disabledMinutes !== undefined) {
+    return attrs.disabledMinutes
+  }
+
+  if ((attrs as Record<string, unknown>)['disabled-minutes'] !== undefined) {
+    return (attrs as Record<string, unknown>)['disabled-minutes']
+  }
+
+  if (!shouldLimitCurrentTime()) {
+    return undefined
+  }
+
+  return () => {
+    const minutes = new Date().getMinutes()
+    return Array.from({ length: minutes }, (_, index) => index)
+  }
+})
+
+const pickerAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+
+  return {
+    ...rest,
+    defaultTime: resolvedDefaultTime.value,
+    disabledDate: resolvedDisabledDate.value,
+    disabledHours: resolvedDisabledHours.value,
+    disabledMinutes: resolvedDisabledMinutes.value
+  }
+})
+
+const containerClasses = computed(() => ({
+  'outlined-date-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(() => hasFilledValue(pickerValue.value))
+
+const labelClasses = computed(() => ({
+  'outlined-date-picker__label--floating': focused.value || hasContent.value,
+  'outlined-date-picker__label--placeholder': !focused.value && !hasContent.value,
+  'outlined-date-picker__label--filled': hasContent.value && !focused.value
+}))
+
+function handleModelValueUpdate(value: OutlinedDatePickerValue) {
+  const normalizedValue = normalizeValue(value)
+  pickerValue.value = normalizedValue
+  emitModelValue(normalizedValue)
+}
+
+function handleChange(value: OutlinedDatePickerValue) {
+  const normalizedValue = normalizeValue(value)
+  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 emitModelValue(value: OutlinedDatePickerValue | '') {
+  emit('input', value)
+  emit('update:value', value)
+}
+
+function normalizeValue(value: OutlinedDatePickerValue | undefined) {
+  return value ?? ''
+}
+
+function createDisabledDateHandler(disabledDate: OutlinedDatePickerDisabledDate | undefined) {
+  if (!disabledDate) {
+    return undefined
+  }
+
+  if (typeof disabledDate === 'function') {
+    return disabledDate
+  }
+
+  const boundary = normalizeBoundary(disabledDate)
+
+  return (value: Date) => value.getTime() < boundary - 86400000
+}
+
+function normalizeBoundary(value: Exclude<OutlinedDatePickerDisabledDate, ((date: Date) => boolean)>) {
+  if (value === 'nowDate') {
+    return Date.now()
+  }
+
+  if (value instanceof Date) {
+    return value.getTime()
+  }
+
+  if (typeof value === 'number') {
+    return value
+  }
+
+  return new Date(value).getTime()
+}
+
+function shouldLimitCurrentTime() {
+  return Boolean(props.disabledDate) && props.typeDate.toLowerCase().includes('time')
+}
+
+function hasFilledValue(value: unknown) {
+  if (Array.isArray(value)) {
+    return value.length > 0
+  }
+
+  return value !== undefined && value !== null && String(value) !== ''
+}
+
+function toCssValue(value: OutlinedDatePickerCssValue | undefined) {
+  if (typeof value === 'number') {
+    return `${value}px`
+  }
+
+  return value
+}
+
+defineExpose<OutlinedDatePickerExpose>({
+  focus: () => {
+    pickerRef.value?.focus?.()
+  },
+  blur: () => {
+    pickerRef.value?.blur?.()
+  },
+  handleOpen: () => {
+    pickerRef.value?.handleOpen?.()
+  },
+  handleClose: () => {
+    pickerRef.value?.handleClose?.()
+  },
+  getPickerRef: () => pickerRef.value
+})
+</script>
+
+<style scoped>
+.outlined-date-picker {
+  position: relative;
+}
+
+.outlined-date-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-date-picker__label--floating {
+  top: 18px;
+  z-index: 1;
+  opacity: 1;
+  transform: translate(14px, -6px) scale(1);
+  color: var(--el-color-primary);
+}
+
+.outlined-date-picker__label--placeholder {
+  top: 50%;
+  left: 1px;
+  z-index: -1;
+  opacity: 0;
+  transform: translate(14px, 6px) scale(1);
+}
+
+.outlined-date-picker__label--filled {
+  color: var(--el-text-color-regular);
+}
+
+:deep(.outlined-date-picker__control.el-date-editor) {
+  width: 100%;
+}
+
+:deep(.outlined-date-picker__control .el-input__wrapper) {
+  position: relative;
+  min-height: inherit;
+  height: inherit;
+}
+
+:deep(.outlined-date-picker__control .el-input__prefix) {
+  position: absolute;
+  right: 0;
+}
+
+:deep(.outlined-date-picker__control .el-input__suffix) {
+  position: absolute;
+  right: 30px;
+}
+
+:deep(.outlined-date-picker--bordered .el-input__wrapper) {
+  box-shadow: none;
+  border-radius: 0;
+  border-bottom: 1px solid #cccccc;
+}
+
+:deep(.outlined-date-picker--bordered .el-input__wrapper.is-focus) {
+  border-bottom-color: var(--el-color-primary);
+}
+</style>

package/src/components/OutlinedDatePicker/README.md

@@ -0,0 +1,137 @@
+# OutlinedDatePicker
+
+`OutlinedDatePicker` 用来统一项目里带浮动标签样式的日期选择器，避免页面层重复写日期控件高度、标签悬浮、日期禁用和焦点控制逻辑。
+
+## 解决的问题
+
+- 统一浮动标签日期选择器样式
+- 统一 `v-model:value`、`input`、`update:value` 和 `change` 事件约定
+- 统一 `typeDate / format / valueFormat / disabledDate` 配置方式
+- 自动处理弹层展开时的焦点态和浮动标签状态
+- 通过组件实例直接调用 `focus`、`blur`、`handleOpen`、`handleClose`
+
+## 适用场景
+
+- 页面需要和 `OutlinedInput / OutlinedSelect` 保持一致视觉语言
+- 表单页中有大量基础日期或日期时间选择器
+- 希望页面只传日期类型和格式配置，不再重复封装统一壳子
+- 需要兼容旧项目里的 `disabledDate="nowDate"` 这类写法
+
+## 不适用场景
+
+- 需要复杂日期区间联动逻辑并完全接管弹层行为
+- 不是浮动标签风格的时间控件
+- 页面需要不同于 Element Plus 的日期引擎或交互模式
+
+## 基础用法
+
+```vue
+<template>
+  <OutlinedDatePicker
+    v-model:value="form.effectDate"
+    placeholder="开始生效日期"
+    :is-border="true"
+    :input-height="40"
+    type-date="date"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { OutlinedDatePicker } from '@hbdlzy/ui-core'
+
+const form = reactive({
+  effectDate: ''
+})
+</script>
+```
+
+## 日期时间示例
+
+```vue
+<template>
+  <OutlinedDatePicker
+    v-model:value="form.effectiveTime"
+    placeholder="上传收益数据开始生效时间"
+    :is-border="true"
+    type-date="datetime"
+    format="YYYY-MM-DD HH:mm:ss"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { OutlinedDatePicker } from '@hbdlzy/ui-core'
+
+const form = reactive({
+  effectiveTime: ''
+})
+</script>
+```
+
+## 禁用日期示例
+
+```vue
+<template>
+  <OutlinedDatePicker
+    v-model:value="form.effectDate"
+    placeholder="开始生效日期"
+    type-date="date"
+    :disabled-date="'nowDate'"
+    :is-border="true"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { OutlinedDatePicker } from '@hbdlzy/ui-core'
+
+const form = reactive({
+  effectDate: ''
+})
+</script>
+```
+
+## Props
+
+- `value`: 当前值，推荐通过 `v-model:value` 使用
+- `placeholder`: 占位文案，同时默认作为浮动标签文案
+- `label`: 自定义浮动标签文案，未传时回退到 `placeholder`
+- `disabled`: 是否禁用
+- `timeValue`: 是否按带时间场景处理默认时间
+- `typeDate`: 日期控件类型，默认 `date`
+- `format`: 展示格式，默认 `YYYY-MM-DD`
+- `valueFormat`: 值格式，默认回退到 `format`
+- `inputHeight`: 控件高度，默认 `40`
+- `isBorder`: 是否启用底部边框样式
+- `disabledDate`: 日期禁用规则，支持 `nowDate`、日期字符串、时间戳、`Date` 或函数
+- `marginBottom`: 外层容器底部间距，默认 `20`
+- `paddingTop`: 外层容器顶部留白，默认 `20`
+
+## Events
+
+- `input`: 值变化时触发
+- `update:value`: `v-model:value` 对应更新事件
+- `change`: 用户确认变更时触发
+- `focus`: 聚焦时触发
+- `blur`: 失焦时触发
+- `visible-change`: 面板展开状态变化时触发
+
+## Expose
+
+- `focus`: 手动聚焦日期控件
+- `blur`: 手动失焦日期控件
+- `handleOpen`: 手动打开日期面板
+- `handleClose`: 手动关闭日期面板
+- `getPickerRef`: 获取底层 `el-date-picker` 实例
+
+## 透传规则
+
+- 未被组件显式声明的属性，会自动透传给内部 `el-date-picker`
+- 适合继续传 `clearable`、`editable`、`default-time`、`shortcuts`、`unlink-panels` 等 Element Plus 原生能力
+
+## 推荐约定
+
+- 普通日期和日期时间选择器优先使用 `OutlinedDatePicker`
+- 默认通过 `typeDate + format` 收敛常见场景
+- 自定义日期禁用规则优先使用 `disabledDate`，不要在页面层重复封装相同逻辑

package/src/components/OutlinedDatePicker/index.ts

@@ -0,0 +1,11 @@
+import OutlinedDatePicker from './OutlinedDatePicker.vue'
+
+export default OutlinedDatePicker
+
+export type {
+  OutlinedDatePickerCssValue,
+  OutlinedDatePickerDisabledDate,
+  OutlinedDatePickerExpose,
+  OutlinedDatePickerProps,
+  OutlinedDatePickerValue
+} from './OutlinedDatePicker.types'

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

@@ -0,0 +1,34 @@
+export type OutlinedDateTimePickerCssValue = string | number
+
+export type OutlinedDateTimePickerValue = string
+
+export type OutlinedDateTimePickerDisabledDate =
+  | string
+  | number
+  | Date
+  | ((date: Date) => boolean)
+
+export interface OutlinedDateTimePickerProps {
+  value?: OutlinedDateTimePickerValue
+  placeholder?: string
+  label?: string
+  inputHeight?: number
+  isBorder?: boolean
+  disabledDate?: OutlinedDateTimePickerDisabledDate
+  separatorText?: string
+  timePlaceholder?: string
+  clearable?: boolean
+  marginBottom?: OutlinedDateTimePickerCssValue
+  paddingTop?: OutlinedDateTimePickerCssValue
+}
+
+export interface OutlinedDateTimePickerExpose {
+  focusDate: () => void
+  focusTime: () => void
+  blurDate: () => void
+  blurTime: () => void
+  openDatePanel: () => void
+  openTimePanel: () => void
+  getDatePickerRef: () => unknown | null
+  getTimePickerRef: () => unknown | null
+}