foucui 1.0.1

package/components/QiuTabPane/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div
+    v-if="shouldRender"
+    v-show="isActive"
+    class="qiu-tab-pane"
+    role="tabpanel"
+    :aria-hidden="!isActive"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { QiuTabBarContext } from '../QiuTabBar/types'
+import { QIU_TAB_BAR_KEY } from '../QiuTabBar/types'
+
+defineOptions({ name: 'QiuTabPane' })
+
+const props = withDefaults(
+  defineProps<{
+    name: string | number
+    label?: string
+    lazy?: boolean
+  }>(),
+  {
+    label: '',
+    lazy: false,
+  }
+)
+
+const slots = useSlots()
+const tabBarCtx = inject<QiuTabBarContext>(QIU_TAB_BAR_KEY, null)
+const uid = getCurrentInstance()?.uid ?? Math.random()
+const loaded = ref(!props.lazy)
+
+const isActive = computed(() => tabBarCtx?.activeName.value === props.name)
+
+const shouldRender = computed(() => {
+  if (!props.lazy) return true
+  return loaded.value || isActive.value
+})
+
+watch(isActive, (active) => {
+  if (active && props.lazy) loaded.value = true
+})
+
+const resolveLabel = () => props.label || String(props.name)
+
+onMounted(() => {
+  tabBarCtx?.registerPane({
+    uid,
+    name: props.name,
+    label: resolveLabel(),
+    lazy: props.lazy,
+    loaded: loaded.value,
+    render: () => slots.default?.() ?? [],
+  })
+})
+
+onUnmounted(() => {
+  tabBarCtx?.unregisterPane(uid)
+})
+
+watch(
+  () => [props.name, props.label, props.lazy] as const,
+  () => {
+    tabBarCtx?.updatePane(uid, {
+      name: props.name,
+      label: resolveLabel(),
+      lazy: props.lazy,
+      loaded: loaded.value,
+    })
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.qiu-tab-pane {
+  padding: var(--qiu-padding-base, var(--qiu-padding-base, 16px)) 0;
+  color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
+}
+</style>

package/components/QiuTable/columns.ts

@@ -0,0 +1,16 @@
+export {
+  buildHeaderRows,
+  colStyle,
+  computeRenderWidths,
+  computeTableMinWidth,
+  flattenLeafColumns,
+  getColumnSizeHints,
+  isFirstFixedRight,
+  isLastFixedLeft,
+  leftOffsetForColumn,
+  makeColumnKey,
+  parseWidth,
+  rightOffsetForColumn,
+  type ColumnSizeHints,
+  type LeafColumn,
+} from './useColumns'

package/components/QiuTable/export.ts

@@ -0,0 +1,102 @@
+import type { QiuTableColumnConfig } from './types'
+import { resolveColumnProp } from './types'
+import { parseCsv } from './utils'
+
+export type QiuTableExportFormat = 'csv' | 'xls' | 'xlsx'
+
+export type QiuTableExportColumn = QiuTableColumnConfig & { _key?: string }
+
+function downloadBlob(blob: Blob, filename: string) {
+  const a = document.createElement('a')
+  a.href = URL.createObjectURL(blob)
+  a.download = filename
+  a.click()
+  URL.revokeObjectURL(a.href)
+}
+
+function escapeCsvCell(v: any) {
+  return `"${String(v ?? '').replace(/"/g, '""')}"`
+}
+
+function escapeHtml(v: any) {
+  return String(v ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+/** 构建二维表：首行为表头 */
+export function buildSheetMatrix(
+  columns: QiuTableExportColumn[],
+  rows: any[],
+  formatCell: (row: any, col: QiuTableExportColumn) => any
+): (string | number)[][] {
+  const header = columns.map((c) => c.label || resolveColumnProp(c) || '')
+  const body = rows.map((row) => columns.map((c) => formatCell(row, c) ?? ''))
+  return [header, ...body]
+}
+
+export function exportCsv(
+  matrix: (string | number)[][],
+  filename: string
+) {
+  const lines = matrix.map((row) => row.map(escapeCsvCell).join(','))
+  const blob = new Blob(['\ufeff' + lines.join('\n')], { type: 'text/csv;charset=utf-8;' })
+  downloadBlob(blob, filename.endsWith('.csv') ? filename : `${filename}.csv`)
+}
+
+/** Excel 可打开的 HTML 表（.xls） */
+export function exportXls(
+  matrix: (string | number)[][],
+  filename: string
+) {
+  const rowsHtml = matrix
+    .map(
+      (row) =>
+        `<tr>${row.map((cell) => `<td>${escapeHtml(cell)}</td>`).join('')}</tr>`
+    )
+    .join('')
+  const html = `<!DOCTYPE html><html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="UTF-8" /></head><body><table border="1">${rowsHtml}</table></body></html>`
+  const blob = new Blob([html], { type: 'application/vnd.ms-excel;charset=utf-8;' })
+  downloadBlob(blob, filename.endsWith('.xls') ? filename : `${filename}.xls`)
+}
+
+/** 真正的 .xlsx（依赖 xlsx） */
+export async function exportXlsx(
+  matrix: (string | number)[][],
+  filename: string
+) {
+  const XLSX = await import('xlsx')
+  const ws = XLSX.utils.aoa_to_sheet(matrix)
+  const wb = XLSX.utils.book_new()
+  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
+  const name = filename.endsWith('.xlsx') ? filename : `${filename}.xlsx`
+  XLSX.writeFile(wb, name)
+}
+
+export async function exportSheet(opts: {
+  format: QiuTableExportFormat
+  filename: string
+  matrix: (string | number)[][]
+}) {
+  const { format, filename, matrix } = opts
+  if (format === 'csv') exportCsv(matrix, filename)
+  else if (format === 'xls') exportXls(matrix, filename)
+  else await exportXlsx(matrix, filename)
+}
+
+export async function parseImportFile(file: File): Promise<string[][]> {
+  const name = file.name.toLowerCase()
+  if (name.endsWith('.xlsx') || name.endsWith('.xls')) {
+    const XLSX = await import('xlsx')
+    const buf = await file.arrayBuffer()
+    const wb = XLSX.read(buf, { type: 'array' })
+    const sheetName = wb.SheetNames[0]
+    const sheet = wb.Sheets[sheetName]
+    const aoa = XLSX.utils.sheet_to_json(sheet, { header: 1, defval: '' }) as any[][]
+    return aoa.map((row) => row.map((c) => String(c ?? '')))
+  }
+  const text = await file.text()
+  return parseCsv(text)
+}

package/components/QiuTable/index.ts

@@ -0,0 +1,24 @@
+export type {
+  QiuTableClipboardConfig,
+  QiuTableColumn,
+  QiuTableColumnConfig,
+  QiuTableEditConfig,
+  QiuTableEditRender,
+  QiuTableExportConfig,
+  QiuTableFilterConfig,
+  QiuTableFooterMethod,
+  QiuTableHistoryConfig,
+  QiuTableKeyboardConfig,
+  QiuTableMergeCell,
+  QiuTablePagerConfig,
+  QiuTableRowConfig,
+  QiuTableSortConfig,
+  QiuTableSpanMethod,
+  QiuTableRadioConfig,
+  QiuTableExpandConfig,
+  QiuTableColumnDragConfig,
+  QiuTableTooltipConfig,
+} from './types'
+
+export { QiuTableEditRenderer, QiuTableFormats, QiuTableRenderer } from './registry'
+export { default as QiuTable } from './index.vue'