@veltra/sheet 2.3.4 → 2.5.0

package/src/components/report/designer/float-panel.vue

@@ -1,432 +0,0 @@
-<template>
-  <div
-    v-if="binding && cell"
-    v-show="visible"
-    ref="panelRef"
-    :class="[cls.b, cls.m(placement), expanded ? cls.m('expanded') : '']"
-    :style="panelStyle"
-    @mousedown.stop
-    @pointerdown.stop
-  >
-    <div :class="cls.e('bar')">
-      <div :class="cls.e('summary')" :title="summaryText">
-        {{ summaryText }}
-      </div>
-      <div :class="cls.e('toolbar')">
-        <u-select
-          size="small"
-          :class="[cls.e('select'), cls.em('select', 'role')]"
-          :model-value="currentPresetValue"
-          :options="presetOptions"
-          @update:model-value="onPreset"
-        />
-        <u-select
-          v-if="showAggregateSelect"
-          size="small"
-          :class="[cls.e('select'), cls.em('select', 'aggregate')]"
-          :model-value="binding.aggregate"
-          :options="aggregateOptions"
-          @update:model-value="onAggregate"
-        />
-        <u-select
-          v-if="showExpandSelect"
-          size="small"
-          :class="[cls.e('select'), cls.em('select', 'expand')]"
-          :model-value="binding.expand"
-          :options="expandOptions"
-          @update:model-value="onExpand"
-        />
-        <u-button size="small" plain @click="emit('open-rules')">条件样式</u-button>
-        <u-button size="small" text type="danger" @click="emit('remove')">删除绑定</u-button>
-        <u-button
-          size="small"
-          text
-          :class="cls.e('expand')"
-          :title="expanded ? '收起' : '展开更多'"
-          @click="expanded = !expanded"
-        >
-          {{ expanded ? '收起' : '展开' }}
-        </u-button>
-      </div>
-    </div>
-
-    <div v-if="expanded" :class="cls.e('body')">
-      <section :class="cls.e('section')">
-        <div :class="cls.e('section-label')">数据集</div>
-        <p :class="cls.e('hint')">{{ binding.dataset }}</p>
-      </section>
-
-      <section :class="cls.e('section')">
-        <div :class="cls.e('section-label')">排序</div>
-        <u-radio-group
-          size="small"
-          :items="sortOptions"
-          :model-value="binding.sort ?? 'none'"
-          @update:model-value="onSort"
-        />
-      </section>
-
-      <section :class="cls.e('section')">
-        <div :class="cls.e('section-label')">扩展实例合并单元格</div>
-        <u-switch
-          size="small"
-          :model-value="binding.mergeSpan !== false"
-          @update:model-value="onMergeSpan"
-        />
-      </section>
-
-      <section :class="cls.e('section')">
-        <div :class="cls.e('section-label')">行方向父格</div>
-        <p :class="cls.e('hint')">当前：{{ resolvedRowParentLabel }}</p>
-        <div :class="cls.e('parent-actions')">
-          <u-button
-            size="small"
-            plain
-            :type="parentPickMode === 'row' ? 'primary' : undefined"
-            @click="emit('start-parent-pick', 'row')"
-          >
-            {{ parentPickMode === 'row' ? '点选目标格…' : '设置行方向父格' }}
-          </u-button>
-          <u-select
-            v-if="rowParentOptions.length > 0"
-            size="small"
-            :class="cls.e('parent-select')"
-            placeholder="候选格"
-            :model-value="rowParentSelectValue"
-            :options="rowParentOptions"
-            @update:model-value="onRowParentSelect"
-          />
-          <u-button
-            v-if="binding.rowParent"
-            size="small"
-            text
-            type="danger"
-            @click="emit('clear-parent', 'row')"
-          >
-            清除
-          </u-button>
-        </div>
-      </section>
-
-      <section :class="cls.e('section')">
-        <div :class="cls.e('section-label')">列方向父格</div>
-        <p :class="cls.e('hint')">当前：{{ resolvedColParentLabel }}</p>
-        <div :class="cls.e('parent-actions')">
-          <u-button
-            size="small"
-            plain
-            :type="parentPickMode === 'col' ? 'primary' : undefined"
-            @click="emit('start-parent-pick', 'col')"
-          >
-            {{ parentPickMode === 'col' ? '点选目标格…' : '设置列方向父格' }}
-          </u-button>
-          <u-select
-            v-if="colParentOptions.length > 0"
-            size="small"
-            :class="cls.e('parent-select')"
-            placeholder="候选格"
-            :model-value="colParentSelectValue"
-            :options="colParentOptions"
-            @update:model-value="onColParentSelect"
-          />
-          <u-button
-            v-if="binding.colParent"
-            size="small"
-            text
-            type="danger"
-            @click="emit('clear-parent', 'col')"
-          >
-            清除
-          </u-button>
-        </div>
-      </section>
-
-      <footer v-if="parentPickMode" :class="cls.e('footer')">
-        <u-button size="small" plain @click="emit('cancel-parent-pick')">取消点选</u-button>
-      </footer>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { UButton, URadioGroup, USelect, USwitch } from '@veltra/desktop'
-import type { CellAddress } from '@veltra/sheet-core'
-import type { SheetGrid } from '@veltra/sheet-core/grid'
-import { bem } from '@veltra/utils'
-import { computed, nextTick, ref, toRef, watch } from 'vue'
-
-import {
-  formatBindingPlaceholder,
-  formatCellAddress,
-  formatParentCandidateLabel,
-  inferReportPreset,
-  isReductionAggregate
-} from '../../../report/binding'
-import type {
-  ReportAggregate,
-  ReportBinding,
-  ReportExpand,
-  ReportPreset,
-  ReportSort
-} from '../../../report/types'
-import type { ParentPickMode } from '../use-report-designer'
-import { resolveGridOverlayLayout } from './cell-coords'
-import { REPORT_PRESET_OPTIONS, presetBindingDefaults } from './role'
-import {
-  readCellOverlayRect,
-  resolveBindingFloatPanelPosition,
-  useGridOverlaySync
-} from './use-grid-overlay'
-
-defineOptions({ name: 'UReportFloatPanel' })
-
-const CUSTOM_PRESET_VALUE = '__custom__'
-
-const props = defineProps<{
-  cell: CellAddress | null
-  binding: ReportBinding | null
-  resolvedRowParentLabel: string
-  resolvedColParentLabel: string
-  parentPickMode: ParentPickMode | null
-  rowParentCandidates: CellAddress[]
-  colParentCandidates: CellAddress[]
-  resolveFieldLabel?: (datasetId: string, fieldName: string) => string
-  getBindingAt?: (addr: CellAddress) => ReportBinding | undefined
-  hostEl: HTMLElement | null
-  getGrid: () => SheetGrid | undefined
-}>()
-
-const emit = defineEmits<{
-  patch: [patch: Partial<ReportBinding>]
-  remove: []
-  'open-rules': []
-  'start-parent-pick': [mode: ParentPickMode]
-  'cancel-parent-pick': []
-  'clear-parent': [mode: ParentPickMode]
-}>()
-
-const cls = bem('report-float-panel')
-
-const hostEl = toRef(props, 'hostEl')
-const panelRef = ref<HTMLElement | null>(null)
-const expanded = ref(false)
-const placement = ref<'above' | 'below'>('above')
-
-const presetOptions = computed(() => {
-  const options = REPORT_PRESET_OPTIONS.map((item) => ({ ...item }))
-  if (props.binding && inferReportPreset(props.binding) === null) {
-    options.unshift({ value: CUSTOM_PRESET_VALUE as ReportPreset, label: '自定义' })
-  }
-  return options
-})
-
-const ALL_AGGREGATE_OPTIONS = [
-  { value: 'list' as const, label: '明细' },
-  { value: 'group' as const, label: '分组' },
-  { value: 'sum' as const, label: '求和' },
-  { value: 'avg' as const, label: '平均' },
-  { value: 'count' as const, label: '计数' },
-  { value: 'max' as const, label: '最大' },
-  { value: 'min' as const, label: '最小' }
-]
-
-const REDUCTION_AGGREGATE_OPTIONS = ALL_AGGREGATE_OPTIONS.filter((item) =>
-  isReductionAggregate(item.value)
-)
-
-const expandOptions = [
-  { value: 'down' as const, label: '向下' },
-  { value: 'right' as const, label: '向右' },
-  { value: 'none' as const, label: '不展开' }
-]
-
-const sortOptions = [
-  { value: 'none' as const, label: '无' },
-  { value: 'asc' as const, label: '升序' },
-  { value: 'desc' as const, label: '降序' }
-]
-
-const panelLeft = ref(0)
-const panelTop = ref(0)
-const inView = ref(false)
-
-const currentPresetValue = computed(() => {
-  if (!props.binding) return 'detail'
-  return inferReportPreset(props.binding) ?? CUSTOM_PRESET_VALUE
-})
-
-const showAggregateSelect = computed(() => {
-  const preset = currentPresetValue.value
-  return (
-    preset === CUSTOM_PRESET_VALUE ||
-    preset === 'subtotal' ||
-    preset === 'grandTotal' ||
-    preset === 'cross'
-  )
-})
-
-const showExpandSelect = computed(() => {
-  const preset = currentPresetValue.value
-  return preset === CUSTOM_PRESET_VALUE || preset === 'groupHeader' || preset === 'detail'
-})
-
-const aggregateOptions = computed(() =>
-  currentPresetValue.value === CUSTOM_PRESET_VALUE
-    ? ALL_AGGREGATE_OPTIONS
-    : REDUCTION_AGGREGATE_OPTIONS
-)
-
-const summaryText = computed(() => {
-  if (!props.binding) return ''
-  const parts = [formatBindingPlaceholder(props.binding, props.resolveFieldLabel)]
-  if (props.binding.rowParent && props.resolvedRowParentLabel !== '—') {
-    const parent = props.getBindingAt?.(props.binding.rowParent)
-    const name = parent
-      ? (props.resolveFieldLabel?.(parent.dataset, parent.field) ?? parent.field)
-      : props.resolvedRowParentLabel
-    parts.push(`行父格 ${name} ${props.resolvedRowParentLabel}`)
-  }
-  if (props.binding.colParent && props.resolvedColParentLabel !== '—') {
-    const parent = props.getBindingAt?.(props.binding.colParent)
-    const name = parent
-      ? (props.resolveFieldLabel?.(parent.dataset, parent.field) ?? parent.field)
-      : props.resolvedColParentLabel
-    parts.push(`列父格 ${name} ${props.resolvedColParentLabel}`)
-  }
-  return parts.join(' · ')
-})
-
-function candidateOption(addr: CellAddress): { value: string; label: string } {
-  const value = formatCellAddress(addr)
-  const binding = props.getBindingAt?.(addr)
-  return {
-    value,
-    label: binding ? formatParentCandidateLabel(addr, binding, props.resolveFieldLabel) : value
-  }
-}
-
-const rowParentOptions = computed(() => props.rowParentCandidates.map(candidateOption))
-
-const colParentOptions = computed(() => props.colParentCandidates.map(candidateOption))
-
-const rowParentSelectValue = computed(() =>
-  props.binding?.rowParent ? formatCellAddress(props.binding.rowParent) : undefined
-)
-
-const colParentSelectValue = computed(() =>
-  props.binding?.colParent ? formatCellAddress(props.binding.colParent) : undefined
-)
-
-const visible = computed(() => !!props.binding && !!props.cell && inView.value)
-
-const panelStyle = computed(() => ({ left: `${panelLeft.value}px`, top: `${panelTop.value}px` }))
-
-watch(
-  () => [props.cell?.row, props.cell?.col] as const,
-  () => {
-    if (props.parentPickMode) return
-    expanded.value = false
-  }
-)
-
-watch(
-  () => props.parentPickMode,
-  (mode) => {
-    if (mode) expanded.value = true
-  }
-)
-
-watch(expanded, () => {
-  nextTick(() => updatePosition())
-})
-
-watch(visible, (show) => {
-  if (!show) return
-  nextTick(() => updatePosition())
-})
-
-function onPreset(preset: ReportPreset | typeof CUSTOM_PRESET_VALUE): void {
-  if (preset === CUSTOM_PRESET_VALUE) return
-  emit('patch', presetBindingDefaults(preset))
-}
-
-function aggregateDefaultExpand(aggregate: ReportAggregate): ReportExpand {
-  return isReductionAggregate(aggregate) ? 'none' : 'down'
-}
-
-function onAggregate(aggregate: ReportAggregate): void {
-  emit('patch', { aggregate, expand: aggregateDefaultExpand(aggregate) })
-}
-
-function onExpand(expand: ReportExpand): void {
-  emit('patch', { expand })
-}
-
-function onSort(value: ReportSort): void {
-  emit('patch', { sort: value })
-}
-
-function onMergeSpan(merged: boolean): void {
-  emit('patch', { mergeSpan: merged })
-}
-
-function onRowParentSelect(label: string): void {
-  const addr = props.rowParentCandidates.find((item) => formatCellAddress(item) === label)
-  if (!addr) return
-  emit('patch', { rowParent: { ...addr } })
-}
-
-function onColParentSelect(label: string): void {
-  const addr = props.colParentCandidates.find((item) => formatCellAddress(item) === label)
-  if (!addr) return
-  emit('patch', { colParent: { ...addr } })
-}
-
-function updatePosition(): void {
-  const cell = props.cell
-  const host = props.hostEl
-  if (!cell || !host) {
-    inView.value = false
-    return
-  }
-
-  const layoutResolved = resolveGridOverlayLayout(host)
-  const rect = readCellOverlayRect(cell, host, props.getGrid)
-  if (!rect || !layoutResolved) {
-    inView.value = false
-    return
-  }
-
-  inView.value = true
-
-  const panelEl = panelRef.value
-  const panelWidth = panelEl?.offsetWidth ?? 340
-  const panelHeight = panelEl?.offsetHeight ?? (expanded.value ? 360 : 68)
-  const position = resolveBindingFloatPanelPosition(
-    rect,
-    layoutResolved.layout,
-    panelWidth,
-    panelHeight,
-    host.clientWidth
-  )
-
-  placement.value = position.placement
-  panelLeft.value = position.left
-  panelTop.value = position.top
-}
-
-useGridOverlaySync({
-  hostEl,
-  getGrid: () => props.getGrid(),
-  watchSources: () =>
-    [
-      props.cell?.row,
-      props.cell?.col,
-      props.binding,
-      props.hostEl,
-      expanded.value,
-      props.parentPickMode
-    ] as const,
-  update: updatePosition
-})
-</script>

package/src/components/report/designer/role.ts

@@ -1,32 +0,0 @@
-import { presetBindingPatch } from '../../../report/binding'
-import type { ReportBinding, ReportPreset } from '../../../report/types'
-
-const PRESET_LABELS: Record<ReportPreset, string> = {
-  groupHeader: '分组头',
-  detail: '明细行',
-  subtotal: '小计行',
-  grandTotal: '总计行',
-  cross: '交叉格'
-}
-
-export const REPORT_PRESET_OPTIONS = (
-  Object.entries(PRESET_LABELS) as Array<[ReportPreset, string]>
-).map(([value, label]) => ({ value, label }))
-
-/** @deprecated 05 将更名；暂保留别名供 float-panel 消费 */
-export const REPORT_ROLE_OPTIONS = REPORT_PRESET_OPTIONS
-
-export function presetLabel(preset: ReportPreset): string {
-  return PRESET_LABELS[preset]
-}
-
-/** @deprecated 05 将更名 */
-export const roleLabel = presetLabel
-
-/** 切换预设时写入 expand / aggregate / 父格组合（父格除 grandTotal 外保留既有值） */
-export function presetBindingDefaults(preset: ReportPreset): Partial<ReportBinding> {
-  return presetBindingPatch(preset)
-}
-
-/** @deprecated 05 将更名 */
-export const roleBindingDefaults = presetBindingDefaults

package/src/components/report/designer/rule-preview.vue

@@ -1,40 +0,0 @@
-<template>
-  <span
-    :class="[cls.b, rule.scope === 'row' && cls.m('row')]"
-    :style="previewStyle"
-    :title="previewTitle"
-  >
-    {{ previewLabel }}
-  </span>
-</template>
-
-<script lang="ts" setup>
-import { bem } from '@veltra/utils'
-import { computed } from 'vue'
-
-import type { ConditionalRule } from '../../../report/types'
-
-defineOptions({ name: 'UReportRulePreview' })
-
-const props = defineProps<{ rule: ConditionalRule }>()
-
-const cls = bem('report-rule-preview')
-
-const previewStyle = computed(() => {
-  const { fill, font } = props.rule.style
-  return {
-    backgroundColor: fill?.color || 'transparent',
-    color: font?.color || 'inherit',
-    fontWeight: font?.bold ? '700' : '400',
-    fontStyle: font?.italic ? 'italic' : 'normal'
-  }
-})
-
-const previewLabel = computed(() => (props.rule.scope === 'row' ? '整行' : 'Aa'))
-
-const previewTitle = computed(() =>
-  props.rule.scope === 'row'
-    ? '整行作用范围：命中后染满物理输出行（交叉表会染满整行，明细行报表更合适）'
-    : '本格作用范围'
-)
-</script>