@hbdlzy/ui-core 0.1.1 → 0.1.3

package/src/components/OutlinedCascader/OutlinedCascader.vue.d.ts

@@ -0,0 +1,85 @@
+import type { OutlinedCascaderCssValue, OutlinedCascaderProps, OutlinedCascaderValue } from './OutlinedCascader.types';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OutlinedCascaderProps>, {
+    value: () => never[];
+    options: () => never[];
+    clearable: boolean;
+    propsValue: undefined;
+    placeholder: string;
+    label: string;
+    popperClass: string;
+    disabled: boolean;
+    inputHeight: number;
+    isBorder: boolean;
+    filterable: boolean;
+    levels: boolean;
+    marginBottom: number;
+    paddingTop: number;
+}>>, {
+    focus: () => void;
+    blur: () => void;
+    togglePopperVisible: () => void;
+    clear: () => void;
+    getCascaderRef: () => unknown;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (value: OutlinedCascaderValue) => void;
+    "update:value": (value: OutlinedCascaderValue) => void;
+    change: (value: OutlinedCascaderValue) => void;
+    focus: (value: FocusEvent) => void;
+    blur: (value: FocusEvent) => void;
+    "visible-change": (value: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OutlinedCascaderProps>, {
+    value: () => never[];
+    options: () => never[];
+    clearable: boolean;
+    propsValue: undefined;
+    placeholder: string;
+    label: string;
+    popperClass: string;
+    disabled: boolean;
+    inputHeight: number;
+    isBorder: boolean;
+    filterable: boolean;
+    levels: boolean;
+    marginBottom: number;
+    paddingTop: number;
+}>>> & Readonly<{
+    onBlur?: ((value: FocusEvent) => any) | undefined;
+    onChange?: ((value: OutlinedCascaderValue) => any) | undefined;
+    onFocus?: ((value: FocusEvent) => any) | undefined;
+    onInput?: ((value: OutlinedCascaderValue) => any) | undefined;
+    "onUpdate:value"?: ((value: OutlinedCascaderValue) => any) | undefined;
+    "onVisible-change"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    disabled: boolean;
+    popperClass: string;
+    value: OutlinedCascaderValue;
+    placeholder: string;
+    clearable: boolean;
+    options: Record<string, unknown>[];
+    inputHeight: number;
+    isBorder: boolean;
+    marginBottom: OutlinedCascaderCssValue;
+    paddingTop: OutlinedCascaderCssValue;
+    filterable: boolean;
+    propsValue: Record<string, unknown>;
+    levels: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/src/components/OutlinedCascader/README.md

@@ -0,0 +1,91 @@
+# OutlinedCascader
+
+`OutlinedCascader` 是 `OutlinedForm` 系列里的级联选择控件，用来统一封装浮动标签、边框风格、级联面板显隐和实例方法暴露。
+
+## 适用场景
+
+- 页面里经常出现区域、组织、站点树这类级联选择
+- 需要统一 `el-cascader` 的浮动标签样式
+- 需要在页面层直接打开或关闭级联面板
+- 需要统一 `props` 映射、`clearable`、`filterable` 等高频配置
+
+## 基本用法
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { OutlinedCascader, type OutlinedCascaderExpose } from '@hbdlzy/ui'
+
+const cascaderRef = ref<OutlinedCascaderExpose | null>(null)
+const areaPath = ref<Array<string | number>>([])
+
+const areaOptions = [
+  {
+    label: '华北',
+    value: 'north',
+    children: [
+      { label: '北京', value: 'beijing' },
+      { label: '天津', value: 'tianjin' }
+    ]
+  }
+]
+</script>
+
+<template>
+  <OutlinedCascader
+    ref="cascaderRef"
+    v-model:value="areaPath"
+    placeholder="所属区域"
+    :options="areaOptions"
+    :is-border="true"
+    clearable
+    filterable
+  />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `value` | `Array<string \| number>` | `[]` | `v-model:value` 绑定值 |
+| `options` | `Record<string, unknown>[]` | `[]` | 级联选项数据 |
+| `clearable` | `boolean` | `false` | 是否允许清空 |
+| `propsValue` | `Record<string, unknown>` | `undefined` | 透传给 `el-cascader` 的 `props` |
+| `placeholder` | `string` | `''` | 占位文案，也会作为浮动标签文案 |
+| `label` | `string` | `''` | 自定义浮动标签文案，优先级高于 `placeholder` |
+| `popperClass` | `string` | `''` | 自定义弹层类名 |
+| `disabled` | `boolean` | `false` | 是否禁用 |
+| `inputHeight` | `number` | `40` | 输入框高度 |
+| `isBorder` | `boolean` | `false` | 是否启用下边框风格 |
+| `filterable` | `boolean` | `true` | 是否允许搜索 |
+| `levels` | `boolean` | `true` | 是否展示完整级联路径 |
+| `marginBottom` | `string \| number` | `20` | 外层下边距 |
+| `paddingTop` | `string \| number` | `20` | 外层上内边距，用于浮动标签留白 |
+
+## Emits
+
+| 事件 | 参数 | 说明 |
+| --- | --- | --- |
+| `input` | `Array<string \| number>` | 输入值变化时触发 |
+| `update:value` | `Array<string \| number>` | `v-model:value` 同步事件 |
+| `change` | `Array<string \| number>` | 选项确认变化时触发 |
+| `focus` | `FocusEvent` | 聚焦时触发 |
+| `blur` | `FocusEvent` | 失焦时触发 |
+| `visible-change` | `boolean` | 级联面板显隐变化时触发 |
+
+## Expose
+
+| 方法 | 说明 |
+| --- | --- |
+| `focus()` | 打开级联面板 |
+| `blur()` | 关闭级联面板 |
+| `togglePopperVisible()` | 切换级联面板显隐 |
+| `clear()` | 清空当前值 |
+| `getCascaderRef()` | 获取内部 `el-cascader` 实例 |
+
+## 设计约束
+
+- 组件只负责通用级联选择壳子和交互状态，不直接耦合区域接口、组织树接口等业务数据源
+- 页面层如果需要多选级联、懒加载或复杂回填逻辑，优先先通过 `propsValue` 和插值配置解决
+- 如果业务需要固定某种树结构，可以在业务包里再封一层领域组件，而不是反向污染 `ui-core`

package/src/components/OutlinedCascader/index.d.ts

@@ -0,0 +1,3 @@
+import OutlinedCascader from './OutlinedCascader.vue';
+export default OutlinedCascader;
+export type { OutlinedCascaderCssValue, OutlinedCascaderExpose, OutlinedCascaderProps, OutlinedCascaderValue } from './OutlinedCascader.types';

package/src/components/OutlinedCascader/index.ts

@@ -0,0 +1,10 @@
+import OutlinedCascader from './OutlinedCascader.vue'
+
+export default OutlinedCascader
+
+export type {
+  OutlinedCascaderCssValue,
+  OutlinedCascaderExpose,
+  OutlinedCascaderProps,
+  OutlinedCascaderValue
+} from './OutlinedCascader.types'

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

@@ -0,0 +1,27 @@
+export type OutlinedDatePickerCssValue = string | number;
+export type OutlinedDatePickerValue = string | number | Date | Array<string | number | Date> | null;
+export type OutlinedDatePickerDisabledDate = string | number | Date | ((date: Date) => boolean);
+export interface OutlinedDatePickerProps {
+    value?: OutlinedDatePickerValue;
+    placeholder?: string;
+    label?: string;
+    disabled?: boolean;
+    timeValue?: boolean;
+    typeDate?: string;
+    format?: string;
+    valueFormat?: string;
+    showPassword?: boolean;
+    multiple?: boolean;
+    inputHeight?: number;
+    isBorder?: boolean;
+    disabledDate?: OutlinedDatePickerDisabledDate;
+    marginBottom?: OutlinedDatePickerCssValue;
+    paddingTop?: OutlinedDatePickerCssValue;
+}
+export interface OutlinedDatePickerExpose {
+    focus: () => void;
+    blur: () => void;
+    handleOpen: () => void;
+    handleClose: () => void;
+    getPickerRef: () => unknown | null;
+}

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

@@ -0,0 +1,40 @@
+export type OutlinedDatePickerCssValue = string | number
+
+export type OutlinedDatePickerValue =
+  | string
+  | number
+  | Date
+  | Array<string | number | Date>
+  | null
+
+export type OutlinedDatePickerDisabledDate =
+  | string
+  | number
+  | Date
+  | ((date: Date) => boolean)
+
+export interface OutlinedDatePickerProps {
+  value?: OutlinedDatePickerValue
+  placeholder?: string
+  label?: string
+  disabled?: boolean
+  timeValue?: boolean
+  typeDate?: string
+  format?: string
+  valueFormat?: string
+  showPassword?: boolean
+  multiple?: boolean
+  inputHeight?: number
+  isBorder?: boolean
+  disabledDate?: OutlinedDatePickerDisabledDate
+  marginBottom?: OutlinedDatePickerCssValue
+  paddingTop?: OutlinedDatePickerCssValue
+}
+
+export interface OutlinedDatePickerExpose {
+  focus: () => void
+  blur: () => void
+  handleOpen: () => void
+  handleClose: () => void
+  getPickerRef: () => unknown | null
+}

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>