@hbdlzy/ui-core 0.1.1 → 0.1.2

package/dist/style.css

@@ -1 +1 @@
-.base-card[data-v-6bfddf1c]{display:flex;flex-direction:column;min-width:0;min-height:0;padding:var(--base-card-padding);border:1px solid var(--base-card-border-color);background:var(--base-card-background-color);box-shadow:0 0 2px 0 var(--base-card-shadow-color);border-radius:var(--base-card-radius)}.base-card__header[data-v-6bfddf1c]{display:flex;align-items:center;justify-content:space-between;gap:var(--base-card-header-gap);margin-bottom:var(--base-card-header-margin-bottom);min-height:24px;flex-wrap:wrap}.base-card__header-left[data-v-6bfddf1c],.base-card__header-right[data-v-6bfddf1c]{display:flex;align-items:center;min-width:0;flex-wrap:wrap}.base-card__header-left[data-v-6bfddf1c]{flex:1 1 auto;gap:var(--base-card-left-gap)}.base-card__header-right[data-v-6bfddf1c]{flex:0 1 auto;justify-content:flex-end;gap:var(--base-card-right-gap)}.base-card__title-wrap[data-v-6bfddf1c]{display:flex;align-items:center;min-width:0}.base-card__title-marker[data-v-6bfddf1c]{width:var(--base-card-marker-width);height:var(--base-card-marker-height);background:var(--base-card-marker-color);border-radius:var(--base-card-marker-radius);margin-right:var(--base-card-marker-gap);flex:0 0 auto}.base-card__title[data-v-6bfddf1c]{margin:0;min-width:0;color:var(--base-card-title-color);font-size:var(--base-card-title-size);font-weight:var(--base-card-title-weight);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.base-card__meta[data-v-6bfddf1c]{color:var(--base-card-meta-color);font-size:var(--base-card-meta-size);line-height:1.4}.base-card__export[data-v-6bfddf1c]{border:none;background:transparent;padding:0;color:var(--base-card-export-color);cursor:pointer;font-size:var(--base-card-meta-size);line-height:1.4}.base-card__export[data-v-6bfddf1c]:disabled{opacity:.5;cursor:not-allowed}.base-card__body[data-v-6bfddf1c]{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.base-card__tip[data-v-6bfddf1c]{flex:0 0 auto}.base-card__content[data-v-6bfddf1c]{flex:1 1 auto;min-height:0}.base-table[data-v-429ba785]{display:flex;flex-direction:column;height:100%;min-height:0}.base-table__toolbar[data-v-429ba785]{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;min-height:32px;flex-wrap:wrap}.base-table__toolbar-left[data-v-429ba785]{flex:1 1 auto;min-width:0}.base-table__toolbar-right[data-v-429ba785]{flex:0 1 auto}.base-table__actions[data-v-429ba785]{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.base-table__link[data-v-429ba785]{padding:0;border:none;background:transparent;color:var(--el-color-primary);cursor:pointer}.base-table__text[data-v-429ba785]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.base-table__tags[data-v-429ba785]{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.base-table__image[data-v-429ba785]{border-radius:4px;overflow:hidden}.base-echart[data-v-51bc4772],.base-echart__inner[data-v-51bc4772]{width:100%;height:100%}
+.base-card[data-v-6bfddf1c]{display:flex;flex-direction:column;min-width:0;min-height:0;padding:var(--base-card-padding);border:1px solid var(--base-card-border-color);background:var(--base-card-background-color);box-shadow:0 0 2px 0 var(--base-card-shadow-color);border-radius:var(--base-card-radius)}.base-card__header[data-v-6bfddf1c]{display:flex;align-items:center;justify-content:space-between;gap:var(--base-card-header-gap);margin-bottom:var(--base-card-header-margin-bottom);min-height:24px;flex-wrap:wrap}.base-card__header-left[data-v-6bfddf1c],.base-card__header-right[data-v-6bfddf1c]{display:flex;align-items:center;min-width:0;flex-wrap:wrap}.base-card__header-left[data-v-6bfddf1c]{flex:1 1 auto;gap:var(--base-card-left-gap)}.base-card__header-right[data-v-6bfddf1c]{flex:0 1 auto;justify-content:flex-end;gap:var(--base-card-right-gap)}.base-card__title-wrap[data-v-6bfddf1c]{display:flex;align-items:center;min-width:0}.base-card__title-marker[data-v-6bfddf1c]{width:var(--base-card-marker-width);height:var(--base-card-marker-height);background:var(--base-card-marker-color);border-radius:var(--base-card-marker-radius);margin-right:var(--base-card-marker-gap);flex:0 0 auto}.base-card__title[data-v-6bfddf1c]{margin:0;min-width:0;color:var(--base-card-title-color);font-size:var(--base-card-title-size);font-weight:var(--base-card-title-weight);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.base-card__meta[data-v-6bfddf1c]{color:var(--base-card-meta-color);font-size:var(--base-card-meta-size);line-height:1.4}.base-card__export[data-v-6bfddf1c]{border:none;background:transparent;padding:0;color:var(--base-card-export-color);cursor:pointer;font-size:var(--base-card-meta-size);line-height:1.4}.base-card__export[data-v-6bfddf1c]:disabled{opacity:.5;cursor:not-allowed}.base-card__body[data-v-6bfddf1c]{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.base-card__tip[data-v-6bfddf1c]{flex:0 0 auto}.base-card__content[data-v-6bfddf1c]{flex:1 1 auto;min-height:0}.base-table[data-v-429ba785]{display:flex;flex-direction:column;height:100%;min-height:0}.base-table__toolbar[data-v-429ba785]{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;min-height:32px;flex-wrap:wrap}.base-table__toolbar-left[data-v-429ba785]{flex:1 1 auto;min-width:0}.base-table__toolbar-right[data-v-429ba785]{flex:0 1 auto}.base-table__actions[data-v-429ba785]{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.base-table__link[data-v-429ba785]{padding:0;border:none;background:transparent;color:var(--el-color-primary);cursor:pointer}.base-table__text[data-v-429ba785]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.base-table__tags[data-v-429ba785]{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.base-table__image[data-v-429ba785]{border-radius:4px;overflow:hidden}.base-echart[data-v-51bc4772],.base-echart__inner[data-v-51bc4772]{width:100%;height:100%}.outlined-input[data-v-2bf89ccd]{position:relative}.outlined-input__label[data-v-2bf89ccd]{position:absolute;left:-2px;padding:2px 5px;border-radius:2px;background-color:#fff;font-size:12px;line-height:1;transition:color .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1);pointer-events:none}.outlined-input__label--floating[data-v-2bf89ccd]{top:18px;z-index:1;opacity:1;transform:translate(14px,-6px) scale(1);color:var(--el-color-primary)}.outlined-input__label--placeholder[data-v-2bf89ccd]{top:50%;left:1px;z-index:-1;opacity:0;transform:translate(14px,6px) scale(1)}.outlined-input__label--filled[data-v-2bf89ccd]{color:var(--el-text-color-regular)}.outlined-input__suffix-text[data-v-2bf89ccd]{white-space:nowrap}[data-v-2bf89ccd] .outlined-input--bordered .el-input__wrapper{box-shadow:none;border-radius:0;border-bottom:1px solid #cccccc}[data-v-2bf89ccd] .outlined-input--bordered .el-input__wrapper.is-focus{border-bottom-color:var(--el-color-primary)}[data-v-2bf89ccd] .outlined-input--bordered .el-textarea__inner{border-width:0 0 1px;border-radius:0;box-shadow:none}[data-v-2bf89ccd] .outlined-input--bordered .el-textarea__inner:focus{border-bottom-color:var(--el-color-primary)}[data-v-2bf89ccd] .outlined-input--textarea-default .el-textarea__inner{min-height:100px!important;max-height:180px}.outlined-select[data-v-7bd2b5f2]{position:relative}.outlined-select__label[data-v-7bd2b5f2]{position:absolute;left:-2px;padding:2px 5px;border-radius:2px;background-color:#fff;font-size:12px;line-height:1;transition:color .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1);pointer-events:none}.outlined-select__label--floating[data-v-7bd2b5f2]{top:18px;z-index:1;opacity:1;transform:translate(14px,-6px) scale(1);color:var(--el-color-primary)}.outlined-select__label--placeholder[data-v-7bd2b5f2]{top:50%;left:1px;z-index:-1;opacity:0;transform:translate(14px,6px) scale(1)}.outlined-select__label--filled[data-v-7bd2b5f2]{color:var(--el-text-color-regular)}[data-v-7bd2b5f2] .outlined-select__control.el-select{width:100%}[data-v-7bd2b5f2] .outlined-select__control .el-select__wrapper{min-height:inherit;height:inherit}[data-v-7bd2b5f2] .outlined-select__control .el-select__tags{padding-top:4px}[data-v-7bd2b5f2] .outlined-select__control .el-select__selection{min-height:inherit}[data-v-7bd2b5f2] .outlined-select--bordered .el-select__wrapper{box-shadow:none;border-radius:0;border-bottom:1px solid #cccccc}[data-v-7bd2b5f2] .outlined-select--bordered .el-select__wrapper.is-focused{border-bottom-color:var(--el-color-primary)}.outlined-date-picker[data-v-c95a293c]{position:relative}.outlined-date-picker__label[data-v-c95a293c]{position:absolute;left:-2px;padding:2px 5px;border-radius:2px;background-color:#fff;font-size:12px;line-height:1;transition:color .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1);pointer-events:none}.outlined-date-picker__label--floating[data-v-c95a293c]{top:18px;z-index:1;opacity:1;transform:translate(14px,-6px) scale(1);color:var(--el-color-primary)}.outlined-date-picker__label--placeholder[data-v-c95a293c]{top:50%;left:1px;z-index:-1;opacity:0;transform:translate(14px,6px) scale(1)}.outlined-date-picker__label--filled[data-v-c95a293c]{color:var(--el-text-color-regular)}[data-v-c95a293c] .outlined-date-picker__control.el-date-editor{width:100%}[data-v-c95a293c] .outlined-date-picker__control .el-input__wrapper{position:relative;min-height:inherit;height:inherit}[data-v-c95a293c] .outlined-date-picker__control .el-input__prefix{position:absolute;right:0}[data-v-c95a293c] .outlined-date-picker__control .el-input__suffix{position:absolute;right:30px}[data-v-c95a293c] .outlined-date-picker--bordered .el-input__wrapper{box-shadow:none;border-radius:0;border-bottom:1px solid #cccccc}[data-v-c95a293c] .outlined-date-picker--bordered .el-input__wrapper.is-focus{border-bottom-color:var(--el-color-primary)}.outlined-date-time-picker[data-v-f2fefd22]{display:flex;align-items:center;gap:8px}.outlined-date-time-picker__field[data-v-f2fefd22]{position:relative;flex:1}.outlined-date-time-picker__separator[data-v-f2fefd22]{flex:0 0 auto;color:var(--el-text-color-regular)}.outlined-date-time-picker__label[data-v-f2fefd22]{position:absolute;left:-2px;padding:2px 5px;border-radius:2px;background-color:#fff;font-size:12px;line-height:1;transition:color .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1);pointer-events:none}.outlined-date-time-picker__label--floating[data-v-f2fefd22]{top:18px;z-index:1;opacity:1;transform:translate(14px,-6px) scale(1);color:var(--el-color-primary)}.outlined-date-time-picker__label--placeholder[data-v-f2fefd22]{top:50%;left:1px;z-index:-1;opacity:0;transform:translate(14px,6px) scale(1)}.outlined-date-time-picker__label--filled[data-v-f2fefd22]{color:var(--el-text-color-regular)}[data-v-f2fefd22] .outlined-date-time-picker__control.el-date-editor{width:100%}[data-v-f2fefd22] .outlined-date-time-picker__control .el-input__wrapper{position:relative;min-height:inherit;height:inherit}[data-v-f2fefd22] .outlined-date-time-picker__control .el-input__prefix{position:absolute;right:0}[data-v-f2fefd22] .outlined-date-time-picker__control .el-input__suffix{position:absolute;right:30px}[data-v-f2fefd22] .outlined-date-time-picker__field--bordered .el-input__wrapper{box-shadow:none;border-radius:0;border-bottom:1px solid #cccccc}[data-v-f2fefd22] .outlined-date-time-picker__field--bordered .el-input__wrapper.is-focus{border-bottom-color:var(--el-color-primary)}.outlined-time-picker[data-v-6a467b88]{position:relative}.outlined-time-picker__label[data-v-6a467b88]{position:absolute;left:-2px;padding:2px 5px;border-radius:2px;background-color:#fff;font-size:12px;line-height:1;transition:color .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1);pointer-events:none}.outlined-time-picker__label--floating[data-v-6a467b88]{top:18px;z-index:1;opacity:1;transform:translate(14px,-6px) scale(1);color:var(--el-color-primary)}.outlined-time-picker__label--placeholder[data-v-6a467b88]{top:50%;left:1px;z-index:-1;opacity:0;transform:translate(14px,6px) scale(1)}.outlined-time-picker__label--filled[data-v-6a467b88]{color:var(--el-text-color-regular)}[data-v-6a467b88] .outlined-time-picker__control.el-date-editor{width:100%}[data-v-6a467b88] .outlined-time-picker__control .el-input__wrapper{position:relative;min-height:inherit;height:inherit}[data-v-6a467b88] .outlined-time-picker__control .el-input__prefix{position:absolute;right:0}[data-v-6a467b88] .outlined-time-picker__control .el-input__suffix{position:absolute;right:30px}[data-v-6a467b88] .outlined-time-picker--bordered .el-input__wrapper{box-shadow:none;border-radius:0;border-bottom:1px solid #cccccc}[data-v-6a467b88] .outlined-time-picker--bordered .el-input__wrapper.is-focus{border-bottom-color:var(--el-color-primary)}.outlined-cascader[data-v-2c93c0e4]{position:relative}.outlined-cascader__label[data-v-2c93c0e4]{position:absolute;left:-2px;padding:2px 5px;border-radius:2px;background-color:#fff;font-size:12px;line-height:1;transition:color .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1);pointer-events:none}.outlined-cascader__label--floating[data-v-2c93c0e4]{top:18px;z-index:1;opacity:1;transform:translate(14px,-6px) scale(1);color:var(--el-color-primary)}.outlined-cascader__label--placeholder[data-v-2c93c0e4]{top:50%;left:1px;z-index:-1;opacity:0;transform:translate(14px,6px) scale(1)}.outlined-cascader__label--filled[data-v-2c93c0e4]{color:var(--el-text-color-regular)}[data-v-2c93c0e4] .outlined-cascader__control .el-input{height:100%}[data-v-2c93c0e4] .outlined-cascader--bordered .el-input__wrapper{box-shadow:none;border-radius:0;border-bottom:1px solid #cccccc}[data-v-2c93c0e4] .outlined-cascader--bordered .el-input__wrapper.is-focus{border-bottom-color:var(--el-color-primary)}.outlined-tree-select[data-v-8403e6ea]{position:relative}.outlined-tree-select__label[data-v-8403e6ea]{position:absolute;left:-2px;padding:2px 5px;border-radius:2px;background-color:#fff;font-size:12px;line-height:1;transition:color .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1);pointer-events:none}.outlined-tree-select__label--floating[data-v-8403e6ea]{top:18px;z-index:1;opacity:1;transform:translate(14px,-6px) scale(1);color:var(--el-color-primary)}.outlined-tree-select__label--placeholder[data-v-8403e6ea]{top:50%;left:1px;z-index:-1;opacity:0;transform:translate(14px,6px) scale(1)}.outlined-tree-select__label--filled[data-v-8403e6ea]{color:var(--el-text-color-regular)}[data-v-8403e6ea] .outlined-tree-select__control.el-select{width:100%}[data-v-8403e6ea] .outlined-tree-select__control .el-select__wrapper{min-height:inherit;height:inherit}[data-v-8403e6ea] .outlined-tree-select__control .el-select__selection{min-height:inherit}[data-v-8403e6ea] .outlined-tree-select__control .el-select__tags{padding-top:4px}[data-v-8403e6ea] .outlined-tree-select--bordered .el-select__wrapper{box-shadow:none;border-radius:0;border-bottom:1px solid #cccccc}[data-v-8403e6ea] .outlined-tree-select--bordered .el-select__wrapper.is-focused{border-bottom-color:var(--el-color-primary)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hbdlzy/ui-core",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Company shared Vue UI core package.",
   "license": "MIT",
   "repository": {
@@ -30,6 +30,7 @@
     "vue": "^3.5.14"
   },
   "dependencies": {
+    "dayjs": "^1.11.13",
     "echarts": "^5.5.1",
     "exceljs": "^4.4.0",
     "file-saver": "2.0.5"

package/src/components/OutlinedCascader/OutlinedCascader.types.ts

@@ -0,0 +1,28 @@
+export type OutlinedCascaderCssValue = string | number
+
+export type OutlinedCascaderValue = Array<string | number>
+
+export interface OutlinedCascaderProps {
+  value?: OutlinedCascaderValue
+  options?: Record<string, unknown>[]
+  clearable?: boolean
+  propsValue?: Record<string, unknown>
+  placeholder?: string
+  label?: string
+  popperClass?: string
+  disabled?: boolean
+  inputHeight?: number
+  isBorder?: boolean
+  filterable?: boolean
+  levels?: boolean
+  marginBottom?: OutlinedCascaderCssValue
+  paddingTop?: OutlinedCascaderCssValue
+}
+
+export interface OutlinedCascaderExpose {
+  focus: () => void
+  blur: () => void
+  togglePopperVisible: () => void
+  clear: () => void
+  getCascaderRef: () => unknown | null
+}

package/src/components/OutlinedCascader/OutlinedCascader.vue

@@ -0,0 +1,250 @@
+<template>
+  <div
+    class="outlined-cascader"
+    :class="[containerClasses, rootClass]"
+    :style="[containerStyle, rootStyle]"
+  >
+    <el-cascader
+      ref="cascaderRef"
+      v-bind="cascaderAttrs"
+      class="outlined-cascader__control"
+      :model-value="cascaderValue"
+      :options="options"
+      :props="propsValue"
+      :clearable="clearable"
+      :placeholder="placeholder"
+      :filterable="filterable"
+      :show-all-levels="levels"
+      :disabled="disabled"
+      :popper-class="popperClass"
+      :style="cascaderStyle"
+      @update:model-value="handleModelValueUpdate"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @change="handleChange"
+      @visible-change="handleVisibleChange"
+    />
+
+    <div
+      v-if="floatingLabel"
+      class="outlined-cascader__label"
+      :class="labelClasses"
+    >
+      {{ floatingLabel }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useAttrs, watch } from 'vue'
+import type {
+  OutlinedCascaderCssValue,
+  OutlinedCascaderExpose,
+  OutlinedCascaderProps,
+  OutlinedCascaderValue
+} from './OutlinedCascader.types'
+
+defineOptions({
+  name: 'OutlinedCascader',
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<OutlinedCascaderProps>(), {
+  value: () => [],
+  options: () => [],
+  clearable: false,
+  propsValue: undefined,
+  placeholder: '',
+  label: '',
+  popperClass: '',
+  disabled: false,
+  inputHeight: 40,
+  isBorder: false,
+  filterable: true,
+  levels: true,
+  marginBottom: 20,
+  paddingTop: 20
+})
+
+const emit = defineEmits<{
+  (event: 'input', value: OutlinedCascaderValue): void
+  (event: 'update:value', value: OutlinedCascaderValue): void
+  (event: 'change', value: OutlinedCascaderValue): void
+  (event: 'focus', value: FocusEvent): void
+  (event: 'blur', value: FocusEvent): void
+  (event: 'visible-change', value: boolean): void
+}>()
+
+const attrs = useAttrs()
+const cascaderRef = ref<any>(null)
+const cascaderValue = ref<OutlinedCascaderValue>(normalizeValue(props.value))
+const focused = ref(false)
+const blurred = ref(false)
+const visible = ref(false)
+
+watch(
+  () => props.value,
+  (value) => {
+    cascaderValue.value = normalizeValue(value)
+  },
+  { immediate: true }
+)
+
+const rootClass = computed(() => attrs.class)
+const rootStyle = computed(() => attrs.style)
+
+const cascaderAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
+})
+
+const containerClasses = computed(() => ({
+  'outlined-cascader--bordered': props.isBorder
+}))
+
+const containerStyle = computed(() => ({
+  marginBottom: toCssValue(props.marginBottom),
+  paddingTop: toCssValue(props.paddingTop)
+}))
+
+const cascaderStyle = computed(() => ({
+  width: '100%',
+  height: `${props.inputHeight}px`
+}))
+
+const floatingLabel = computed(() => props.label || props.placeholder || '')
+
+const hasContent = computed(() => cascaderValue.value.length > 0)
+
+const labelClasses = computed(() => ({
+  'outlined-cascader__label--floating': focused.value || hasContent.value,
+  'outlined-cascader__label--placeholder': !focused.value && !hasContent.value,
+  'outlined-cascader__label--filled': hasContent.value && !focused.value
+}))
+
+function handleModelValueUpdate(value: OutlinedCascaderValue) {
+  const normalizedValue = normalizeValue(value)
+  cascaderValue.value = normalizedValue
+  emitModelValue(normalizedValue)
+}
+
+function handleChange(value: OutlinedCascaderValue) {
+  const normalizedValue = normalizeValue(value)
+  cascaderValue.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(cascaderValue.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: OutlinedCascaderValue) {
+  emit('input', value)
+  emit('update:value', value)
+}
+
+function normalizeValue(value: OutlinedCascaderValue | undefined) {
+  return Array.isArray(value) ? value : []
+}
+
+function toCssValue(value: OutlinedCascaderCssValue | undefined) {
+  if (typeof value === 'number') {
+    return `${value}px`
+  }
+
+  return value
+}
+
+defineExpose<OutlinedCascaderExpose>({
+  focus: () => {
+    cascaderRef.value?.togglePopperVisible?.(true)
+  },
+  blur: () => {
+    cascaderRef.value?.togglePopperVisible?.(false)
+  },
+  togglePopperVisible: () => {
+    cascaderRef.value?.togglePopperVisible?.()
+  },
+  clear: () => {
+    cascaderValue.value = []
+    emitModelValue([])
+    emit('change', [])
+  },
+  getCascaderRef: () => cascaderRef.value
+})
+</script>
+
+<style scoped>
+.outlined-cascader {
+  position: relative;
+}
+
+.outlined-cascader__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-cascader__label--floating {
+  top: 18px;
+  z-index: 1;
+  opacity: 1;
+  transform: translate(14px, -6px) scale(1);
+  color: var(--el-color-primary);
+}
+
+.outlined-cascader__label--placeholder {
+  top: 50%;
+  left: 1px;
+  z-index: -1;
+  opacity: 0;
+  transform: translate(14px, 6px) scale(1);
+}
+
+.outlined-cascader__label--filled {
+  color: var(--el-text-color-regular);
+}
+
+:deep(.outlined-cascader__control .el-input) {
+  height: 100%;
+}
+
+:deep(.outlined-cascader--bordered .el-input__wrapper) {
+  box-shadow: none;
+  border-radius: 0;
+  border-bottom: 1px solid #cccccc;
+}
+
+:deep(.outlined-cascader--bordered .el-input__wrapper.is-focus) {
+  border-bottom-color: var(--el-color-primary);
+}
+</style>

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.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.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
+}