@hbdlzy/ui-core 0.1.0 → 0.1.2

package/src/components/OutlinedSelect/OutlinedSelect.vue

@@ -0,0 +1,359 @@
+<template>
+  <div
+    class="outlined-select"
+    :class="[containerClasses, rootClass]"
+    :style="[containerStyle, rootStyle]"
+  >
+    <el-select
+      ref="selectRef"
+      v-bind="selectAttrs"
+      class="outlined-select__control"
+      :model-value="selectValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :multiple="multiple"
+      :filterable="filterable"
+      :clearable="clearable"
+      :collapse-tags="collapseTags"
+      :collapse-tags-tooltip="collapseTagsTooltip"
+      :max-collapse-tags="maxCollapseTags"
+      :style="selectStyle"
+      @update:model-value="handleModelValueUpdate"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @change="handleChange"
+      @visible-change="handleVisibleChange"
+      @clear="handleClear"
+    >
+      <slot v-if="hasCustomOptionsSlot" />
+
+      <template v-else>
+        <el-option
+          v-for="(item, index) in options"
+          :key="createOptionKey(item, index)"
+          :label="resolveOptionLabel(item)"
+          :value="resolveOptionValue(item)"
+          :disabled="Boolean(item.disabled)"
+        />
+      </template>
+
+      <template #empty>
+        <slot name="empty" />
+      </template>
+
+      <template #header>
+        <slot name="header" />
+      </template>
+
+      <template #footer>
+        <slot name="footer" />
+      </template>
+
+      <template #tag="slotProps">
+        <slot
+          name="tag"
+          v-bind="slotProps"
+        />
+      </template>
+    </el-select>
+
+    <div
+      v-if="floatingLabel"
+      class="outlined-select__label"
+      :class="labelClasses"
+    >
+      {{ floatingLabel }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useAttrs, useSlots, watch } from 'vue'
+import type {
+  OutlinedSelectCssValue,
+  OutlinedSelectExpose,
+  OutlinedSelectOption,
+  OutlinedSelectOptionValue,
+  OutlinedSelectProps,
+  OutlinedSelectValue
+} from './OutlinedSelect.types'
+
+defineOptions({
+  name: 'OutlinedSelect',
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<OutlinedSelectProps>(), {
+  value: undefined,
+  options: () => [],
+  placeholder: '',
+  label: '',
+  disabled: false,
+  typeInput: '',
+  showPassword: false,
+  collapseTags: false,
+  collapseTagsTooltip: true,
+  filterable: true,
+  clearable: true,
+  multiple: false,
+  inputHeight: 40,
+  isBorder: false,
+  keyValue: 'value',
+  labelValue: 'label',
+  noCheck: false,
+  maxCollapseTags: 5,
+  marginBottom: 20,
+  paddingTop: 20
+})
+
+const emit = defineEmits<{
+  (event: 'input', value: OutlinedSelectValue | ''): void
+  (event: 'update:value', value: OutlinedSelectValue | ''): void
+  (event: 'change', value: OutlinedSelectValue | ''): void
+  (event: 'focus', value: FocusEvent): void
+  (event: 'blur', value: FocusEvent): void
+  (event: 'visible-change', value: boolean): void
+  (event: 'clear'): void
+}>()
+
+const attrs = useAttrs()
+const slots = useSlots()
+const selectRef = ref<any>(null)
+const selectValue = ref<OutlinedSelectValue | ''>(normalizeSelectValue(props.value, props.multiple))
+const focused = ref(false)
+const blurred = ref(false)
+const visible = ref(false)
+
+watch(
+  () => [props.value, props.multiple] as const,
+  ([value, multiple]) => {
+    selectValue.value = normalizeSelectValue(value, multiple)
+  },
+  { immediate: true }
+)
+
+const rootClass = computed(() => attrs.class)
+const rootStyle = computed(() => attrs.style)
+
+const selectAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
+})
+
+const containerClasses = computed(() => ({
+  'outlined-select--bordered': props.isBorder
+}))
+
+const containerStyle = computed(() => ({
+  marginBottom: toCssValue(props.marginBottom),
+  paddingTop: toCssValue(props.paddingTop)
+}))
+
+const selectStyle = computed(() => ({
+  minHeight: `${props.inputHeight}px`,
+  height: props.multiple ? 'auto' : `${props.inputHeight}px`
+}))
+
+const floatingLabel = computed(() => props.label || props.placeholder || '')
+const hasCustomOptionsSlot = computed(() => Boolean(slots.default))
+
+const hasContent = computed(() => {
+  if (props.multiple) {
+    return Array.isArray(selectValue.value) && selectValue.value.length > 0
+  }
+
+  return hasFilledValue(selectValue.value)
+})
+
+const shouldFloat = computed(() => (props.noCheck ? focused.value : focused.value || hasContent.value))
+
+const labelClasses = computed(() => ({
+  'outlined-select__label--floating': shouldFloat.value,
+  'outlined-select__label--placeholder': !shouldFloat.value,
+  'outlined-select__label--filled': !props.noCheck && hasContent.value && !focused.value
+}))
+
+function handleModelValueUpdate(value: OutlinedSelectValue) {
+  const normalizedValue = normalizeSelectValue(value, props.multiple)
+  selectValue.value = normalizedValue
+  emitModelValue(normalizedValue)
+}
+
+function handleChange(value: OutlinedSelectValue) {
+  const normalizedValue = normalizeSelectValue(value, props.multiple)
+  selectValue.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(selectValue.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: OutlinedSelectValue | '') {
+  emit('input', value)
+  emit('update:value', value)
+}
+
+function normalizeSelectValue(value: OutlinedSelectValue | undefined, multiple: boolean): OutlinedSelectValue | '' {
+  if (multiple) {
+    if (Array.isArray(value)) {
+      return value
+    }
+
+    if (value === undefined || value === null || value === '') {
+      return []
+    }
+
+    return [value]
+  }
+
+  return value ?? ''
+}
+
+function resolveOptionLabel(option: OutlinedSelectOption) {
+  const label = option[props.labelValue]
+  return label === undefined || label === null ? '' : String(label)
+}
+
+function resolveOptionValue(option: OutlinedSelectOption): OutlinedSelectOptionValue {
+  return (option[props.keyValue] as OutlinedSelectOptionValue) ?? null
+}
+
+function createOptionKey(option: OutlinedSelectOption, index: number) {
+  const value = resolveOptionValue(option)
+  return `${index}-${typeof value === 'object' ? JSON.stringify(value) : String(value)}`
+}
+
+function hasFilledValue(value: unknown) {
+  return value !== undefined && value !== null && String(value) !== ''
+}
+
+function toCssValue(value: OutlinedSelectCssValue | undefined) {
+  if (typeof value === 'number') {
+    return `${value}px`
+  }
+
+  return value
+}
+
+defineExpose<OutlinedSelectExpose>({
+  focus: () => {
+    selectRef.value?.focus?.()
+  },
+  blur: () => {
+    selectRef.value?.blur?.()
+  },
+  clear: () => {
+    selectRef.value?.blur?.()
+
+    if (props.multiple) {
+      selectValue.value = []
+      emitModelValue([])
+      emit('change', [])
+      emit('clear')
+      return
+    }
+
+    selectValue.value = ''
+    emitModelValue('')
+    emit('change', '')
+    emit('clear')
+  },
+  toggleMenu: () => {
+    selectRef.value?.toggleMenu?.()
+  },
+  getSelectRef: () => selectRef.value
+})
+</script>
+
+<style scoped>
+.outlined-select {
+  position: relative;
+}
+
+.outlined-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-select__label--floating {
+  top: 18px;
+  z-index: 1;
+  opacity: 1;
+  transform: translate(14px, -6px) scale(1);
+  color: var(--el-color-primary);
+}
+
+.outlined-select__label--placeholder {
+  top: 50%;
+  left: 1px;
+  z-index: -1;
+  opacity: 0;
+  transform: translate(14px, 6px) scale(1);
+}
+
+.outlined-select__label--filled {
+  color: var(--el-text-color-regular);
+}
+
+:deep(.outlined-select__control.el-select) {
+  width: 100%;
+}
+
+:deep(.outlined-select__control .el-select__wrapper) {
+  min-height: inherit;
+  height: inherit;
+}
+
+:deep(.outlined-select__control .el-select__tags) {
+  padding-top: 4px;
+}
+
+:deep(.outlined-select__control .el-select__selection) {
+  min-height: inherit;
+}
+
+:deep(.outlined-select--bordered .el-select__wrapper) {
+  box-shadow: none;
+  border-radius: 0;
+  border-bottom: 1px solid #cccccc;
+}
+
+:deep(.outlined-select--bordered .el-select__wrapper.is-focused) {
+  border-bottom-color: var(--el-color-primary);
+}
+</style>

package/src/components/OutlinedSelect/README.md

@@ -0,0 +1,166 @@
+# OutlinedSelect
+
+`OutlinedSelect` 用来统一项目里带浮动标签样式的下拉选择框，避免页面层重复写下拉框高度、标签悬浮、值映射和焦点控制逻辑。
+
+## 解决的问题
+
+- 统一浮动标签下拉框样式
+- 统一 `v-model:value`、`input`、`update:value` 和 `change` 事件约定
+- 统一 `options / keyValue / labelValue` 配置式下拉渲染
+- 自动处理弹层展开时的焦点态和浮动标签状态
+- 通过组件实例直接调用 `focus`、`blur`、`clear`、`toggleMenu`
+
+## 适用场景
+
+- 页面需要和 `OutlinedInput / OutlinedDatePicker` 保持一致视觉语言
+- 表单页里有大量重复的基础下拉框
+- 希望页面只传 `options` 和映射字段，不想再重复写 `el-option`
+- 需要兼容旧项目里 `key-value / label-value / noCheck` 这类写法
+
+## 不适用场景
+
+- 页面需要完全自定义选择器结构
+- 单页中需要强业务联动的复杂远程搜索选择器
+- 不是浮动标签风格的下拉框
+
+## 基础用法
+
+```vue
+<template>
+  <OutlinedSelect
+    v-model:value="form.mode"
+    placeholder="参与方式"
+    :is-border="true"
+    :options="modeOptions"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { OutlinedSelect } from '@hbdlzy/ui-core'
+
+const form = reactive({
+  mode: ''
+})
+
+const modeOptions = [
+  { label: '现货', value: 'spot' },
+  { label: '调频', value: 'fm' }
+]
+</script>
+```
+
+## 自定义字段映射示例
+
+```vue
+<template>
+  <OutlinedSelect
+    v-model:value="form.nodeName"
+    placeholder="所属节点"
+    :options="nodeOptions"
+    key-value="nodeName"
+    label-value="nodeName"
+    :is-border="true"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { OutlinedSelect } from '@hbdlzy/ui-core'
+
+const form = reactive({
+  nodeName: ''
+})
+
+const nodeOptions = [
+  { nodeName: '华北节点' },
+  { nodeName: '华东节点' }
+]
+</script>
+```
+
+## 多选示例
+
+```vue
+<template>
+  <OutlinedSelect
+    v-model:value="selectedTags"
+    placeholder="标签"
+    :options="tagOptions"
+    multiple
+    collapse-tags
+    :is-border="true"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { OutlinedSelect } from '@hbdlzy/ui-core'
+
+const selectedTags = ref<string[]>([])
+
+const tagOptions = [
+  { label: '削峰填谷', value: 'peak' },
+  { label: '调频服务', value: 'fm' },
+  { label: '收益分析', value: 'income' }
+]
+</script>
+```
+
+## Props
+
+- `value`: 当前值，推荐通过 `v-model:value` 使用
+- `options`: 配置式选项列表，默认 `[]`
+- `placeholder`: 占位文案，同时默认作为浮动标签文案
+- `label`: 自定义浮动标签文案，未传时回退到 `placeholder`
+- `disabled`: 是否禁用
+- `collapseTags`: 多选时是否折叠标签
+- `collapseTagsTooltip`: 折叠标签时是否显示 tooltip
+- `filterable`: 是否可搜索，默认 `true`
+- `clearable`: 是否可清空，默认 `true`
+- `multiple`: 是否多选
+- `inputHeight`: 控件高度基准，默认 `40`
+- `isBorder`: 是否启用底部边框样式
+- `keyValue`: 选项值字段名，默认 `value`
+- `labelValue`: 选项显示字段名，默认 `label`
+- `noCheck`: 是否只根据焦点控制浮动标签
+- `maxCollapseTags`: 折叠标签时最大显示数量，默认 `5`
+- `marginBottom`: 外层容器底部间距，默认 `20`
+- `paddingTop`: 外层容器顶部留白，默认 `20`
+
+## Events
+
+- `input`: 值变化时触发
+- `update:value`: `v-model:value` 对应更新事件
+- `change`: 用户确认变更时触发
+- `focus`: 聚焦时触发
+- `blur`: 失焦时触发
+- `visible-change`: 下拉面板展开状态变化时触发
+- `clear`: 点击清空按钮时触发
+
+## Slots
+
+- `default`: 完全自定义选项内容
+- `empty`: 空状态插槽
+- `header`: 下拉头部插槽
+- `footer`: 下拉底部插槽
+- `tag`: 多选标签插槽
+
+## Expose
+
+- `focus`: 手动聚焦选择器
+- `blur`: 手动失焦选择器
+- `clear`: 手动清空当前值
+- `toggleMenu`: 手动展开或关闭下拉面板
+- `getSelectRef`: 获取底层 `el-select` 实例
+
+## 透传规则
+
+- 未被组件显式声明的属性，会自动透传给内部 `el-select`
+- 适合继续传 `teleported`、`remote`、`remote-method`、`reserve-keyword` 等 Element Plus 原生能力
+
+## 推荐约定
+
+- 新页面优先使用 `v-model:value`
+- 常规下拉优先传 `options`
+- 只有需要复杂远程搜索或强定制选项时，才考虑使用 `default` 插槽完全接管

package/src/components/OutlinedSelect/index.ts

@@ -0,0 +1,12 @@
+import OutlinedSelect from './OutlinedSelect.vue'
+
+export default OutlinedSelect
+
+export type {
+  OutlinedSelectCssValue,
+  OutlinedSelectExpose,
+  OutlinedSelectOption,
+  OutlinedSelectOptionValue,
+  OutlinedSelectProps,
+  OutlinedSelectValue
+} from './OutlinedSelect.types'

package/src/components/OutlinedTimePicker/OutlinedTimePicker.types.ts

@@ -0,0 +1,36 @@
+export type OutlinedTimePickerCssValue = string | number
+
+export type OutlinedTimePickerValue =
+  | string
+  | number
+  | Date
+  | Array<string | number | Date>
+  | null
+
+export interface OutlinedTimePickerProps {
+  value?: OutlinedTimePickerValue
+  placeholder?: string
+  label?: string
+  disabled?: boolean
+  clearable?: boolean
+  isRange?: boolean
+  startPlaceholder?: string
+  endPlaceholder?: string
+  rangeSeparator?: string
+  format?: string
+  valueFormat?: string
+  arrowControl?: boolean
+  inputHeight?: number
+  isBorder?: boolean
+  marginBottom?: OutlinedTimePickerCssValue
+  paddingTop?: OutlinedTimePickerCssValue
+}
+
+export interface OutlinedTimePickerExpose {
+  focus: () => void
+  blur: () => void
+  handleOpen: () => void
+  handleClose: () => void
+  clear: () => void
+  getPickerRef: () => unknown | null
+}