@hbdlzy/ui-core 0.1.8 → 0.1.9

package/src/components/BaseTable/BaseTable.vue

@@ -66,6 +66,8 @@
       :stripe="stripe"
       :default-sort="normalizedDefaultSort"
       highlight-current-row
+      @select="handleSelectionChange"
+      @select-all="handleSelectionChange"
       @selection-change="handleSelectionChange"
       @sort-change="handleSortChange"
     >
@@ -77,8 +79,9 @@
         v-if="hasSelection"
         type="selection"
         :width="selectionWidth"
+        fixed="left"
         align="center"
-        :selectable="rowSelectable"
+        :selectable="resolveRowSelectable"
       />
 
       <el-table-column
@@ -141,6 +144,7 @@
               <button
                 :ref="bindHeaderSearchTrigger(column)"
                 class="base-table__header-icon"
+                :data-base-table-id="baseTableIconPrefix"
                 :class="{ 'is-active': hasHeaderSearchValue(column) }"
                 type="button"
                 @click.stop="toggleHeaderSearch(column)"
@@ -155,8 +159,10 @@
               <teleport to="body">
                 <div
                   v-if="isHeaderSearchVisible(column)"
+                  :ref="bindHeaderSearchPanel(column)"
                   :key="getHeaderSearchStateKey(column)"
                   class="base-table__header-search-panel"
+                  :data-base-table-id="baseTableIconPrefix"
                   :style="getHeaderSearchPanelStyle(column)"
                   @click.stop
                   @mousedown.stop
@@ -165,70 +171,27 @@
                     v-if="isHeaderSearchSelect(column)"
                     class="base-table__header-select"
                   >
-                    <button
-                      class="base-table__header-select-trigger"
-                      type="button"
-                      @click="toggleHeaderSearchSelect(column)"
-                    >
-                      <span
-                        v-if="isHeaderSearchMultiple(column) && getHeaderSearchSelectedLabels(column).length"
-                        class="base-table__header-select-tags"
-                      >
-                        <span
-                          v-for="label in getHeaderSearchSelectedLabels(column).slice(0, 2)"
-                          :key="label"
-                          class="base-table__header-select-tag"
-                        >
-                          {{ label }}
-                        </span>
-                        <span
-                          v-if="getHeaderSearchSelectedLabels(column).length > 2"
-                          class="base-table__header-select-tag base-table__header-select-tag--count"
-                        >
-                          +{{ getHeaderSearchSelectedLabels(column).length - 2 }}
-                        </span>
-                      </span>
-                      <span
-                        v-else
-                        class="base-table__header-select-text"
-                        :class="{ 'is-placeholder': !hasHeaderSearchValue(column) }"
-                      >
-                        {{ getHeaderSearchSelectLabel(column) }}
-                      </span>
-                      <span
-                        class="base-table__header-select-arrow"
-                        :class="{ 'is-open': isHeaderSearchSelectOpen(column) }"
-                        aria-hidden="true"
-                      ></span>
-                    </button>
-
-                    <div
-                      v-if="isHeaderSearchSelectOpen(column)"
-                      class="base-table__header-select-options"
+                    <el-select
+                      class="base-table__header-el-select"
+                      :model-value="getHeaderSearchSelectModelValue(column)"
+                      :placeholder="getHeaderSearchPlaceholder(column)"
+                      :multiple="isHeaderSearchMultiple(column)"
+                      :filterable="isHeaderSearchFilterable(column)"
+                      :clearable="isHeaderSearchClearable(column)"
+                      :collapse-tags="isHeaderSearchMultiple(column)"
+                      :collapse-tags-tooltip="isHeaderSearchMultiple(column)"
+                      :teleported="false"
+                      @update:model-value="handleHeaderSearchSelectModelValue(column, $event)"
+                      @clear="handleHeaderSearchSelectEmpty(column)"
                     >
-                      <button
-                        v-if="!isHeaderSearchMultiple(column)"
-                        class="base-table__header-select-option"
-                        :class="{ 'is-selected': !hasHeaderSearchValue(column) }"
-                        type="button"
-                        @click="handleHeaderSearchSelectEmpty(column)"
-                      >
-                        {{ getHeaderSearchPlaceholder(column) }}
-                      </button>
-                      <button
+                      <el-option
                         v-for="option in getHeaderSearchOptions(column)"
                         :key="String(getHeaderSearchOptionValue(option, column))"
-                        class="base-table__header-select-option"
-                        :class="{ 'is-selected': isHeaderSearchOptionSelected(option, column) }"
-                        type="button"
+                        :label="getHeaderSearchOptionLabel(option, column)"
+                        :value="getHeaderSearchOptionValue(option, column)"
                         :disabled="isHeaderSearchOptionDisabled(option, column)"
-                        @click="handleHeaderSearchSelectValue(column, getHeaderSearchOptionValue(option, column))"
-                      >
-                        <span class="base-table__header-select-option-label">
-                          {{ getHeaderSearchOptionLabel(option, column) }}
-                        </span>
-                      </button>
-                    </div>
+                      />
+                    </el-select>
                   </div>
 
                   <div
@@ -287,6 +250,38 @@
                     </div>
                   </div>
 
+                  <el-date-picker
+                    v-else-if="isHeaderSearchDatePicker(column)"
+                    class="base-table__header-picker"
+                    :model-value="getHeaderSearchPickerValue(column)"
+                    :type="getHeaderSearchPickerType(column)"
+                    :placeholder="getHeaderSearchPlaceholder(column)"
+                    :start-placeholder="getHeaderSearchStartPlaceholder(column)"
+                    :end-placeholder="getHeaderSearchEndPlaceholder(column)"
+                    :range-separator="getHeaderSearchRangeSeparator(column)"
+                    :format="getHeaderSearchDateFormat(column)"
+                    :value-format="getHeaderSearchDateValueFormat(column)"
+                    :clearable="isHeaderSearchClearable(column)"
+                    :teleported="false"
+                    @update:model-value="handleHeaderSearchPickerValue(column, $event)"
+                  />
+
+                  <el-time-picker
+                    v-else-if="isHeaderSearchTimePicker(column)"
+                    class="base-table__header-picker"
+                    :model-value="getHeaderSearchPickerValue(column)"
+                    :is-range="isHeaderSearchRange(column)"
+                    :placeholder="getHeaderSearchPlaceholder(column)"
+                    :start-placeholder="getHeaderSearchStartPlaceholder(column)"
+                    :end-placeholder="getHeaderSearchEndPlaceholder(column)"
+                    :range-separator="getHeaderSearchRangeSeparator(column)"
+                    :format="getHeaderSearchTimeFormat(column)"
+                    :value-format="getHeaderSearchTimeValueFormat(column)"
+                    :clearable="isHeaderSearchClearable(column)"
+                    :teleported="false"
+                    @update:model-value="handleHeaderSearchPickerValue(column, $event)"
+                  />
+
                   <input
                     v-else
                     class="base-table__header-search-input"
@@ -484,6 +479,8 @@ const headerSearchSelectOpen = reactive<Record<string, boolean>>({})
 const headerSearchCascaderActivePaths = reactive<Record<string, BaseTableHeaderSearchPrimitiveValue[]>>({})
 const headerSearchTriggerRects = reactive<Record<string, DOMRect>>({})
 const headerSearchTriggerRefs = ref<Record<string, HTMLElement>>({})
+const headerSearchPanelRefs = ref<Record<string, HTMLElement>>({})
+const headerSearchPositionTick = ref(0)
 const baseTableIconPrefix = `base-table-icon-${++baseTableIconSeed}`
 let headerSearchPositionFrame = 0
 const sortState = reactive({
@@ -551,6 +548,7 @@ watch(
 )
 
 onMounted(() => {
+  document.addEventListener('click', handleDocumentClick, true)
   window.addEventListener('scroll', scheduleHeaderSearchPositionUpdate, true)
   window.addEventListener('resize', scheduleHeaderSearchPositionUpdate)
 
@@ -565,6 +563,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
+  document.removeEventListener('click', handleDocumentClick, true)
   window.removeEventListener('scroll', scheduleHeaderSearchPositionUpdate, true)
   window.removeEventListener('resize', scheduleHeaderSearchPositionUpdate)
 
@@ -671,6 +670,10 @@ function handleSelectionChange(value: BaseTableRow[]) {
   emit('selection-change', value)
 }
 
+function resolveRowSelectable(row: BaseTableRow, index: number) {
+  return props.rowSelectable ? props.rowSelectable(row, index) : true
+}
+
 function handleSortChange(payload: { prop?: string; order: BaseTableSortOrder }) {
   const column = props.columns.find((item) => String(item.prop || '') === String(payload.prop || ''))
 
@@ -793,6 +796,26 @@ function bindHeaderSearchTrigger(column: BaseTableColumn<BaseTableRow>) {
   }
 }
 
+function setHeaderSearchPanelRef(
+  instance: Element | ComponentPublicInstance | null,
+  column: BaseTableColumn<BaseTableRow>
+) {
+  const stateKey = getHeaderSearchStateKey(column)
+
+  if (!(instance instanceof HTMLElement)) {
+    delete headerSearchPanelRefs.value[stateKey]
+    return
+  }
+
+  headerSearchPanelRefs.value[stateKey] = instance
+}
+
+function bindHeaderSearchPanel(column: BaseTableColumn<BaseTableRow>) {
+  return (instance: Element | ComponentPublicInstance | null) => {
+    setHeaderSearchPanelRef(instance, column)
+  }
+}
+
 function isHeaderSearchVisible(column: BaseTableColumn<BaseTableRow>) {
   return Boolean(headerSearchVisible[getHeaderSearchStateKey(column)])
 }
@@ -805,6 +828,7 @@ function toggleHeaderSearch(column: BaseTableColumn<BaseTableRow>) {
     closeAllHeaderSearch()
     updateHeaderSearchTriggerRect(column)
     syncHeaderSearchCascaderActivePath(column)
+    scheduleHeaderSearchPositionUpdate()
   }
 
   headerSearchVisible[stateKey] = nextVisible
@@ -818,6 +842,21 @@ function closeAllHeaderSearch() {
   })
 }
 
+function handleDocumentClick(event: MouseEvent) {
+  const target = event.target
+
+  if (target instanceof Element) {
+    if (
+      target.closest(`[data-base-table-id="${baseTableIconPrefix}"].base-table__header-search-panel`) ||
+      target.closest(`[data-base-table-id="${baseTableIconPrefix}"].base-table__header-icon`)
+    ) {
+      return
+    }
+  }
+
+  closeAllHeaderSearch()
+}
+
 function updateHeaderSearchTriggerRect(column: BaseTableColumn<BaseTableRow>) {
   const stateKey = getHeaderSearchStateKey(column)
   const rect = headerSearchTriggerRefs.value[stateKey]?.getBoundingClientRect()
@@ -842,33 +881,78 @@ function scheduleHeaderSearchPositionUpdate() {
 
   headerSearchPositionFrame = window.requestAnimationFrame(() => {
     headerSearchPositionFrame = 0
+    headerSearchPositionTick.value += 1
     updateVisibleHeaderSearchPosition()
   })
 }
 
 function getHeaderSearchPanelStyle(column: BaseTableColumn<BaseTableRow>) {
+  headerSearchPositionTick.value
   const stateKey = getHeaderSearchStateKey(column)
   const triggerRect = headerSearchTriggerRects[stateKey]
-  const width = toCssValue(getHeaderSearchWidth(column)) || '280px'
+  const panelWidth = getHeaderSearchPanelWidth(column)
+  const style = {
+    width: panelWidth.width,
+    minWidth: panelWidth.minWidth,
+    maxWidth: panelWidth.maxWidth
+  }
 
   if (!triggerRect) {
-    return {
-      width
-    }
+    return style
   }
 
-  const panelWidth = Number.parseFloat(String(getHeaderSearchWidth(column))) || 280
-  const maxLeft = Math.max(8, window.innerWidth - panelWidth - 8)
-  const left = Math.min(maxLeft, Math.max(8, triggerRect.right - panelWidth))
+  const maxLeft = Math.max(8, window.innerWidth - panelWidth.positionWidth - 8)
+  const left = Math.min(maxLeft, Math.max(8, triggerRect.right - panelWidth.positionWidth))
   const top = triggerRect.bottom + 8
 
   return {
-    width,
+    ...style,
     left: `${left}px`,
     top: `${top}px`
   }
 }
 
+function getHeaderSearchPanelWidth(column: BaseTableColumn<BaseTableRow>) {
+  const rawWidth = getHeaderSearchWidth(column)
+  const viewportMaxWidth = Math.max(220, window.innerWidth - 16)
+  const renderedWidth = getRenderedHeaderSearchPanelWidth(column)
+
+  if (rawWidth === 'auto') {
+    const positionWidth = Math.min(renderedWidth || getHeaderSearchAutoWidth(column), viewportMaxWidth)
+    return {
+      width: 'max-content',
+      minWidth: '280px',
+      maxWidth: `${viewportMaxWidth}px`,
+      positionWidth
+    }
+  }
+
+  const width = toCssValue(rawWidth) || '280px'
+  const positionWidth = Math.min(Number.parseFloat(String(rawWidth)) || 280, viewportMaxWidth)
+
+  return {
+    width,
+    minWidth: width,
+    maxWidth: `${viewportMaxWidth}px`,
+    positionWidth
+  }
+}
+
+function getRenderedHeaderSearchPanelWidth(column: BaseTableColumn<BaseTableRow>) {
+  const stateKey = getHeaderSearchStateKey(column)
+  const panelElement = headerSearchPanelRefs.value[stateKey]
+  return panelElement ? panelElement.getBoundingClientRect().width : 0
+}
+
+function getHeaderSearchAutoWidth(column: BaseTableColumn<BaseTableRow>) {
+  if (isHeaderSearchRange(column)) {
+    const type = getHeaderSearchConfig(column)?.type
+    return type === 'daterange' || type === 'timerange' ? 420 : 560
+  }
+
+  return 280
+}
+
 function getHeaderSearchValue(column: BaseTableColumn<BaseTableRow>): BaseTableHeaderSearchValue {
   const stateKey = getHeaderSearchStateKey(column)
   const value = headerSearchValues[stateKey]
@@ -905,6 +989,25 @@ function isHeaderSearchCascader(column: BaseTableColumn<BaseTableRow>) {
   return getHeaderSearchConfig(column)?.type === 'cascader'
 }
 
+function isHeaderSearchDatePicker(column: BaseTableColumn<BaseTableRow>) {
+  const type = getHeaderSearchConfig(column)?.type
+  return type === 'date' || type === 'daterange' || type === 'datetime' || type === 'datetimerange'
+}
+
+function isHeaderSearchTimePicker(column: BaseTableColumn<BaseTableRow>) {
+  const type = getHeaderSearchConfig(column)?.type
+  return type === 'time' || type === 'timerange'
+}
+
+function isHeaderSearchPicker(column: BaseTableColumn<BaseTableRow>) {
+  return isHeaderSearchDatePicker(column) || isHeaderSearchTimePicker(column)
+}
+
+function isHeaderSearchRange(column: BaseTableColumn<BaseTableRow>) {
+  const type = getHeaderSearchConfig(column)?.type
+  return type === 'daterange' || type === 'datetimerange' || type === 'timerange'
+}
+
 function isHeaderSearchChoice(column: BaseTableColumn<BaseTableRow>) {
   return isHeaderSearchSelect(column) || isHeaderSearchCascader(column)
 }
@@ -961,8 +1064,60 @@ function getHeaderSearchPlaceholder(column: BaseTableColumn<BaseTableRow>) {
   return getHeaderSearchConfig(column)?.placeholder || (isHeaderSearchChoice(column) ? '请选择' : '请输入搜索内容')
 }
 
+function getHeaderSearchStartPlaceholder(column: BaseTableColumn<BaseTableRow>) {
+  return getHeaderSearchConfig(column)?.startPlaceholder || '开始时间'
+}
+
+function getHeaderSearchEndPlaceholder(column: BaseTableColumn<BaseTableRow>) {
+  return getHeaderSearchConfig(column)?.endPlaceholder || '结束时间'
+}
+
+function getHeaderSearchRangeSeparator(column: BaseTableColumn<BaseTableRow>) {
+  return getHeaderSearchConfig(column)?.rangeSeparator || '至'
+}
+
+function getHeaderSearchPickerType(column: BaseTableColumn<BaseTableRow>) {
+  const type = getHeaderSearchConfig(column)?.type
+
+  if (type === 'datetime' || type === 'datetimerange') {
+    return type
+  }
+
+  return type === 'daterange' ? 'daterange' : 'date'
+}
+
+function getHeaderSearchDateFormat(column: BaseTableColumn<BaseTableRow>) {
+  const config = getHeaderSearchConfig(column)
+
+  if (config?.format) {
+    return config.format
+  }
+
+  return getHeaderSearchConfig(column)?.type === 'datetime' || getHeaderSearchConfig(column)?.type === 'datetimerange'
+    ? 'YYYY-MM-DD HH:mm:ss'
+    : 'YYYY-MM-DD'
+}
+
+function getHeaderSearchDateValueFormat(column: BaseTableColumn<BaseTableRow>) {
+  return getHeaderSearchConfig(column)?.valueFormat || getHeaderSearchDateFormat(column)
+}
+
+function getHeaderSearchTimeFormat(column: BaseTableColumn<BaseTableRow>) {
+  return getHeaderSearchConfig(column)?.format || 'HH:mm:ss'
+}
+
+function getHeaderSearchTimeValueFormat(column: BaseTableColumn<BaseTableRow>) {
+  return getHeaderSearchConfig(column)?.valueFormat || getHeaderSearchTimeFormat(column)
+}
+
 function getHeaderSearchWidth(column: BaseTableColumn<BaseTableRow>) {
-  return getHeaderSearchConfig(column)?.width || 280
+  const configuredWidth = getHeaderSearchConfig(column)?.width
+
+  if (configuredWidth !== undefined && configuredWidth !== null && configuredWidth !== '') {
+    return configuredWidth
+  }
+
+  return isHeaderSearchRange(column) ? 'auto' : 280
 }
 
 function getHeaderSearchSearchText(column: BaseTableColumn<BaseTableRow>) {
@@ -1025,9 +1180,14 @@ function getHeaderSearchSelectedLabels(column: BaseTableColumn<BaseTableRow>) {
   })
 }
 
-function isHeaderSearchOptionSelected(option: BaseTableOption, column: BaseTableColumn<BaseTableRow>) {
-  const optionValue = String(getHeaderSearchOptionValue(option, column))
-  return toComparableValues(getHeaderSearchValue(column)).includes(optionValue)
+function getHeaderSearchSelectModelValue(column: BaseTableColumn<BaseTableRow>) {
+  const value = getHeaderSearchValue(column)
+
+  if (isHeaderSearchMultiple(column)) {
+    return Array.isArray(value) ? value : []
+  }
+
+  return Array.isArray(value) ? value[0] ?? '' : value
 }
 
 function handleHeaderSearchSelectEmpty(column: BaseTableColumn<BaseTableRow>) {
@@ -1035,33 +1195,17 @@ function handleHeaderSearchSelectEmpty(column: BaseTableColumn<BaseTableRow>) {
   headerSearchSelectOpen[getHeaderSearchStateKey(column)] = false
 }
 
-function handleHeaderSearchSelectValue(
-  column: BaseTableColumn<BaseTableRow>,
-  optionValue: BaseTableHeaderSearchPrimitiveValue
-) {
-  if (!isHeaderSearchMultiple(column)) {
-    updateHeaderSearchValue(column, optionValue)
-    headerSearchSelectOpen[getHeaderSearchStateKey(column)] = false
-    return
-  }
-
-  const currentValues = Array.isArray(getHeaderSearchValue(column))
-    ? [...getHeaderSearchValue(column) as BaseTableHeaderSearchPrimitiveValue[]]
-    : []
-  const comparableValue = String(optionValue)
-  const matchedIndex = currentValues.findIndex((item) => String(item) === comparableValue)
-
-  if (matchedIndex >= 0) {
-    currentValues.splice(matchedIndex, 1)
-  } else {
-    currentValues.push(optionValue)
-  }
+function handleHeaderSearchSelectModelValue(column: BaseTableColumn<BaseTableRow>, value: unknown) {
+  updateHeaderSearchValue(column, value)
+}
 
-  updateHeaderSearchValue(column, currentValues)
+function getHeaderSearchPickerValue(column: BaseTableColumn<BaseTableRow>) {
+  const value = getHeaderSearchValue(column)
+  return Array.isArray(value) ? [...value] : value
 }
 
-function handleHeaderSearchSelectOption(column: BaseTableColumn<BaseTableRow>, option: BaseTableOption) {
-  handleHeaderSearchSelectValue(column, getHeaderSearchOptionValue(option, column))
+function handleHeaderSearchPickerValue(column: BaseTableColumn<BaseTableRow>, value: unknown) {
+  updateHeaderSearchValue(column, value)
 }
 
 function getHeaderSearchCascaderValue(column: BaseTableColumn<BaseTableRow>) {
@@ -1271,13 +1415,17 @@ function filterLocalRows(data: BaseTableRow[]) {
         return matchesHeaderSearchCascaderValue(value, searchValue)
       }
 
+      if (isHeaderSearchPicker(column)) {
+        return matchesHeaderSearchPickerValue(value, searchValue, column)
+      }
+
       return toSearchableText(value).includes(toHeaderSearchKeyword(searchValue))
     })
   })
 }
 
 function getHeaderSearchEmptyValue(column: BaseTableColumn<BaseTableRow>): BaseTableHeaderSearchValue {
-  return isHeaderSearchMultiple(column) || isHeaderSearchCascader(column) ? [] : ''
+  return isHeaderSearchMultiple(column) || isHeaderSearchCascader(column) || isHeaderSearchRange(column) ? [] : ''
 }
 
 function normalizeHeaderSearchValue(
@@ -1288,6 +1436,18 @@ function normalizeHeaderSearchValue(
     return normalizeHeaderSearchPathValue(value)
   }
 
+  if (isHeaderSearchPicker(column)) {
+    if (isHeaderSearchRange(column)) {
+      return normalizeHeaderSearchPathValue(value)
+    }
+
+    if (value === undefined || value === null) {
+      return ''
+    }
+
+    return normalizeHeaderSearchPrimitiveValue(value)
+  }
+
   if (!isHeaderSearchSelect(column)) {
     if (value === undefined || value === null) {
       return ''
@@ -1389,6 +1549,53 @@ function matchesHeaderSearchCascaderValue(rowValue: unknown, searchValue: BaseTa
   return selectedPath.every((item, index) => String(rowPath[index]) === String(item))
 }
 
+function matchesHeaderSearchPickerValue(
+  rowValue: unknown,
+  searchValue: BaseTableHeaderSearchValue,
+  column: BaseTableColumn<BaseTableRow>
+) {
+  if (isHeaderSearchRange(column)) {
+    const selectedRange = normalizeHeaderSearchPathValue(searchValue)
+
+    if (!selectedRange.length) {
+      return true
+    }
+
+    const rowTime = toComparableTime(rowValue)
+    const startTime = toComparableTime(selectedRange[0])
+    const endTime = toComparableTime(selectedRange[1])
+
+    if (rowTime === null) {
+      return false
+    }
+
+    return (startTime === null || rowTime >= startTime) && (endTime === null || rowTime <= endTime)
+  }
+
+  return String(rowValue || '') === String(searchValue || '')
+}
+
+function toComparableTime(value: unknown) {
+  if (value === undefined || value === null || value === '') {
+    return null
+  }
+
+  if (value instanceof Date) {
+    return value.getTime()
+  }
+
+  const normalizedValue = String(value).trim()
+  const parsedValue = Date.parse(normalizedValue)
+
+  if (!Number.isNaN(parsedValue)) {
+    return parsedValue
+  }
+
+  const today = new Date().toISOString().slice(0, 10)
+  const parsedTime = Date.parse(`${today} ${normalizedValue}`)
+  return Number.isNaN(parsedTime) ? null : parsedTime
+}
+
 function toComparableValues(value: unknown) {
   const values = Array.isArray(value) ? value : [value]
   return values
@@ -1956,6 +2163,25 @@ defineExpose<BaseTableExpose>({
   width: 100%;
 }
 
+.base-table__header-el-select {
+  width: 100%;
+}
+
+.base-table__header-el-select :deep(.el-select__wrapper) {
+  min-height: 32px;
+}
+
+.base-table__header-picker {
+  width: 100%;
+}
+
+.base-table__header-picker :deep(.el-input__wrapper),
+.base-table__header-picker :deep(.el-range-editor.el-input__wrapper) {
+  width: 100%;
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
 .base-table__header-select-trigger {
   display: flex;
   align-items: center;