@hbdlzy/ui-core 0.1.0 → 0.1.2

package/src/components/OutlinedInput/OutlinedInput.vue

@@ -0,0 +1,307 @@
+<template>
+  <div
+    class="outlined-input"
+    :class="[containerClasses, rootClass]"
+    :style="[containerStyle, rootStyle]"
+  >
+    <el-input
+      ref="inputRef"
+      v-bind="inputAttrs"
+      :model-value="inputValue"
+      :type="resolvedType"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :maxlength="maxlength"
+      :max="max"
+      :min="min"
+      :show-password="showPassword"
+      :show-word-limit="showWordLimit"
+      :clearable="clearable"
+      :style="inputStyle"
+      @update:model-value="handleModelValueUpdate"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @change="handleChange"
+      @clear="handleClear"
+    >
+      <template v-if="$slots.prefix" #prefix>
+        <slot name="prefix" />
+      </template>
+
+      <template v-if="$slots.prepend" #prepend>
+        <slot name="prepend" />
+      </template>
+
+      <template v-if="$slots.append" #append>
+        <slot name="append" />
+      </template>
+
+      <template v-if="$slots.suffix || suffixText" #suffix>
+        <slot name="suffix">
+          <span class="outlined-input__suffix-text">{{ suffixText }}</span>
+        </slot>
+      </template>
+    </el-input>
+
+    <div
+      v-if="floatingLabel"
+      class="outlined-input__label"
+      :class="labelClasses"
+    >
+      {{ floatingLabel }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useAttrs, watch } from 'vue'
+import type { InputInstance } from 'element-plus'
+import type {
+  OutlinedInputCssValue,
+  OutlinedInputExpose,
+  OutlinedInputProps,
+  OutlinedInputValue
+} from './OutlinedInput.types'
+
+defineOptions({
+  name: 'OutlinedInput',
+  inheritAttrs: false
+})
+
+const DEFAULT_REGEX = /^\d+$/
+
+const props = withDefaults(defineProps<OutlinedInputProps>(), {
+  value: '',
+  disabled: false,
+  placeholder: '',
+  label: '',
+  typeInput: 'text',
+  showPassword: false,
+  isNumber: false,
+  inputHeight: 40,
+  isBorder: false,
+  suffixText: '',
+  clearable: false,
+  showWordLimit: true,
+  marginBottom: 20,
+  paddingTop: 20
+})
+
+const emit = defineEmits<{
+  (event: 'input', value: OutlinedInputValue | ''): void
+  (event: 'update:value', value: OutlinedInputValue | ''): void
+  (event: 'warning', value: string): void
+  (event: 'focus', value: FocusEvent): void
+  (event: 'blur', value: FocusEvent): void
+  (event: 'change', value: OutlinedInputValue | ''): void
+  (event: 'clear'): void
+}>()
+
+const attrs = useAttrs()
+const inputRef = ref<InputInstance | null>(null)
+const inputValue = ref<OutlinedInputValue | ''>(props.value ?? '')
+const focused = ref(false)
+
+watch(
+  () => props.value,
+  (value) => {
+    inputValue.value = value ?? ''
+  },
+  { immediate: true }
+)
+
+const rootClass = computed(() => attrs.class)
+const rootStyle = computed(() => attrs.style)
+
+const inputAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
+})
+
+const resolvedType = computed(() => props.typeInput || 'text')
+
+const hasTextareaAutosize = computed(() => {
+  const autosize = inputAttrs.value.autosize
+  return autosize !== undefined && autosize !== false
+})
+
+const containerClasses = computed(() => ({
+  'outlined-input--bordered': props.isBorder,
+  'outlined-input--textarea-default': resolvedType.value === 'textarea' && !hasTextareaAutosize.value
+}))
+
+const containerStyle = computed(() => ({
+  marginBottom: toCssValue(props.marginBottom),
+  paddingTop: toCssValue(props.paddingTop)
+}))
+
+const inputStyle = computed(() => {
+  if (resolvedType.value === 'textarea') {
+    return undefined
+  }
+
+  return {
+    height: `${props.inputHeight}px`
+  }
+})
+
+const floatingLabel = computed(() => props.label || props.placeholder || '')
+
+const hasContent = computed(() => hasFilledValue(inputValue.value))
+
+const labelClasses = computed(() => ({
+  'outlined-input__label--floating': focused.value || hasContent.value,
+  'outlined-input__label--placeholder': !focused.value && !hasContent.value,
+  'outlined-input__label--filled': hasContent.value && !focused.value
+}))
+
+function handleModelValueUpdate(value: string | number) {
+  const normalizedValue = normalizeValue(value)
+  inputValue.value = normalizedValue
+  emitModelValue(normalizedValue)
+}
+
+function handleFocus(event: FocusEvent) {
+  focused.value = true
+  emit('focus', event)
+}
+
+function handleBlur(event: FocusEvent) {
+  focused.value = false
+  emitModelValue(inputValue.value)
+  emit('blur', event)
+}
+
+function handleChange(value: string | number) {
+  const normalizedValue = normalizeValue(value)
+  inputValue.value = normalizedValue
+  emit('change', normalizedValue)
+}
+
+function handleClear() {
+  emit('clear')
+}
+
+function emitModelValue(value: OutlinedInputValue | '') {
+  emit('input', value)
+  emit('update:value', value)
+}
+
+function normalizeValue(value: string | number | null | undefined): OutlinedInputValue | '' {
+  const normalizedValue = value ?? ''
+
+  if (!props.isNumber) {
+    return normalizedValue
+  }
+
+  const nextText = String(normalizedValue)
+
+  if (!nextText) {
+    return ''
+  }
+
+  const regex = props.regex || DEFAULT_REGEX
+
+  if (!regex.test(nextText)) {
+    emit('warning', nextText)
+    return ''
+  }
+
+  return normalizedValue
+}
+
+function hasFilledValue(value: OutlinedInputValue | '') {
+  return value !== undefined && value !== null && String(value) !== ''
+}
+
+function toCssValue(value: OutlinedInputCssValue | undefined) {
+  if (typeof value === 'number') {
+    return `${value}px`
+  }
+
+  return value
+}
+
+defineExpose<OutlinedInputExpose>({
+  focus: () => {
+    inputRef.value?.focus()
+  },
+  blur: () => {
+    inputRef.value?.blur()
+  },
+  clear: () => {
+    inputRef.value?.clear()
+  },
+  select: () => {
+    inputRef.value?.select()
+  },
+  getInputRef: () => inputRef.value
+})
+</script>
+
+<style scoped>
+.outlined-input {
+  position: relative;
+}
+
+.outlined-input__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-input__label--floating {
+  top: 18px;
+  z-index: 1;
+  opacity: 1;
+  transform: translate(14px, -6px) scale(1);
+  color: var(--el-color-primary);
+}
+
+.outlined-input__label--placeholder {
+  top: 50%;
+  left: 1px;
+  z-index: -1;
+  opacity: 0;
+  transform: translate(14px, 6px) scale(1);
+}
+
+.outlined-input__label--filled {
+  color: var(--el-text-color-regular);
+}
+
+.outlined-input__suffix-text {
+  white-space: nowrap;
+}
+
+:deep(.outlined-input--bordered .el-input__wrapper) {
+  box-shadow: none;
+  border-radius: 0;
+  border-bottom: 1px solid #cccccc;
+}
+
+:deep(.outlined-input--bordered .el-input__wrapper.is-focus) {
+  border-bottom-color: var(--el-color-primary);
+}
+
+:deep(.outlined-input--bordered .el-textarea__inner) {
+  border-width: 0 0 1px;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+:deep(.outlined-input--bordered .el-textarea__inner:focus) {
+  border-bottom-color: var(--el-color-primary);
+}
+
+:deep(.outlined-input--textarea-default .el-textarea__inner) {
+  min-height: 100px !important;
+  max-height: 180px;
+}
+</style>

package/src/components/OutlinedInput/README.md

@@ -0,0 +1,154 @@
+# OutlinedInput
+
+`OutlinedInput` 用来统一项目里带浮动标签样式的输入框，避免页面层重复写输入框高度、标签悬浮、数值校验和实例方法暴露逻辑。
+
+## 解决的问题
+
+- 统一浮动标签输入框样式
+- 统一 `v-model:value`、`input`、`update:value` 事件约定
+- 统一数值校验和非法输入警告
+- 自动透传 `autosize`、`resize`、`rows` 等 `el-input` 原生属性
+- 通过组件实例直接调用 `focus`、`blur`、`clear`、`select`
+
+## 适用场景
+
+- 页面需要和现有 `OutlinedSelect / OutlinedDatePicker` 保持一致视觉语言
+- 表单页有大量重复的带悬浮标题输入框
+- 页面只想传业务字段和少量配置，不想重复写输入框壳子
+- 需要兼容旧项目大量 `v-model:value` 的写法
+
+## 不适用场景
+
+- 页面需要完全自定义输入框 DOM 结构
+- 只是普通输入框，没有浮动标签需求
+- 需要强业务联动校验且不适合在基础组件里收敛
+
+## 基础用法
+
+```vue
+<template>
+  <OutlinedInput
+    v-model:value="form.stationName"
+    placeholder="电站名称"
+    :is-border="true"
+    :input-height="40"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { OutlinedInput } from '@hbdlzy/ui-core'
+
+const form = reactive({
+  stationName: ''
+})
+</script>
+```
+
+## 数值校验示例
+
+```vue
+<template>
+  <OutlinedInput
+    v-model:value="form.capacity"
+    placeholder="计划充电量"
+    type-input="number"
+    :is-number="true"
+    :regex="/^(0|[1-9]\\d*)(\\.\\d+)?$/"
+    @warning="handleWarning"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { OutlinedInput } from '@hbdlzy/ui-core'
+
+const form = reactive({
+  capacity: ''
+})
+
+const handleWarning = (value: string) => {
+  ElMessage.warning(`输入值不合法：${value}`)
+}
+</script>
+```
+
+## Textarea 示例
+
+```vue
+<template>
+  <OutlinedInput
+    v-model:value="remark"
+    placeholder="备注"
+    type-input="textarea"
+    :is-border="true"
+    :autosize="{ minRows: 4, maxRows: 4 }"
+    resize="none"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { OutlinedInput } from '@hbdlzy/ui-core'
+
+const remark = ref('')
+</script>
+```
+
+## Props
+
+- `value`: 当前输入值，推荐通过 `v-model:value` 使用
+- `placeholder`: 输入框占位文案，同时默认作为浮动标签文案
+- `label`: 自定义浮动标签文案，未传时回退到 `placeholder`
+- `disabled`: 是否禁用
+- `regex`: 数值校验正则，仅在 `isNumber` 为 `true` 时生效
+- `maxlength`: 最大输入长度
+- `max`: 最大值，透传给底层输入框
+- `min`: 最小值，透传给底层输入框
+- `typeInput`: 输入框类型，默认 `text`
+- `showPassword`: 是否显示密码切换按钮
+- `isNumber`: 是否启用数值校验模式
+- `inputHeight`: 非 textarea 模式下的输入框高度，默认 `40`
+- `isBorder`: 是否启用底部边框样式
+- `suffixText`: 默认后缀文案
+- `clearable`: 是否可清空
+- `showWordLimit`: 是否显示字数统计，默认 `true`
+- `marginBottom`: 外层容器底部间距，默认 `20`
+- `paddingTop`: 外层容器顶部留白，默认 `20`
+
+## Events
+
+- `input`: 输入变化时触发
+- `update:value`: `v-model:value` 对应更新事件
+- `warning`: 数值校验失败时触发，返回非法输入值
+- `focus`: 聚焦时触发
+- `blur`: 失焦时触发
+- `change`: 值确认变化时触发
+- `clear`: 点击清空按钮时触发
+
+## Slots
+
+- `prefix`: 输入框前缀插槽
+- `suffix`: 输入框后缀插槽，优先级高于 `suffixText`
+- `prepend`: 前置内容插槽
+- `append`: 后置内容插槽
+
+## Expose
+
+- `focus`: 手动聚焦输入框
+- `blur`: 手动失焦输入框
+- `clear`: 手动清空输入框
+- `select`: 选中当前输入内容
+- `getInputRef`: 获取底层 `el-input` 实例
+
+## 透传规则
+
+- 未被组件显式声明的属性，会自动透传给内部 `el-input`
+- 适合继续传 `autosize`、`resize`、`rows`、`readonly` 等 Element Plus 原生能力
+
+## 推荐约定
+
+- 新页面优先使用 `v-model:value`
+- 需要浮动标签输入框时优先复用 `OutlinedInput`
+- 数值输入优先使用 `isNumber + regex` 收敛基础校验，不要在页面层重复写相同逻辑

package/src/components/OutlinedInput/index.ts

@@ -0,0 +1,10 @@
+import OutlinedInput from './OutlinedInput.vue'
+
+export default OutlinedInput
+
+export type {
+  OutlinedInputCssValue,
+  OutlinedInputExpose,
+  OutlinedInputProps,
+  OutlinedInputValue
+} from './OutlinedInput.types'

package/src/components/OutlinedSelect/OutlinedSelect.types.ts

@@ -0,0 +1,48 @@
+export type OutlinedSelectCssValue = string | number
+
+export type OutlinedSelectOptionValue =
+  | string
+  | number
+  | boolean
+  | Record<string, unknown>
+  | null
+
+export type OutlinedSelectValue = OutlinedSelectOptionValue | OutlinedSelectOptionValue[]
+
+export interface OutlinedSelectOption {
+  label?: string
+  value?: OutlinedSelectOptionValue
+  disabled?: boolean
+  [key: string]: unknown
+}
+
+export interface OutlinedSelectProps {
+  value?: OutlinedSelectValue
+  options?: OutlinedSelectOption[]
+  placeholder?: string
+  label?: string
+  disabled?: boolean
+  typeInput?: string
+  showPassword?: boolean
+  collapseTags?: boolean
+  collapseTagsTooltip?: boolean
+  filterable?: boolean
+  clearable?: boolean
+  multiple?: boolean
+  inputHeight?: number
+  isBorder?: boolean
+  keyValue?: string
+  labelValue?: string
+  noCheck?: boolean
+  maxCollapseTags?: number
+  marginBottom?: OutlinedSelectCssValue
+  paddingTop?: OutlinedSelectCssValue
+}
+
+export interface OutlinedSelectExpose {
+  focus: () => void
+  blur: () => void
+  clear: () => void
+  toggleMenu: () => void
+  getSelectRef: () => unknown | null
+}