vue3-smart-table 0.0.4 → 1.0.0

package/src/components/SmartTable/types.ts

@@ -0,0 +1,237 @@
+import type { ButtonProps, TableColumnCtx } from 'element-plus'
+import { DefaultRow } from 'element-plus/es/components/table/src/table/defaults'
+import type { Component } from 'vue'
+
+// 导出验证函数类型
+export type { validateRendererProps } from './renderer'
+
+/* ======================= 基础工具类型 ======================= */
+
+/** 支持额外参数（Element Plus 透传 props） */
+export type WithRestProps<T> = T & {
+  [key: string]: any
+}
+
+/* ======================= 渲染器系统 ======================= */
+
+/** Renderer 组件类型 */
+export type Renderer = Component
+
+/** 渲染器注册表接口 */
+export interface RendererRegistry {
+  register(name: string, renderer: Renderer): void
+  registerMultiple(renderers: Record<string, Renderer>): void
+  get(name: string): Renderer | undefined
+  has(name: string): boolean
+  unregister(name: string): boolean
+  clear(): void
+  names(): string[]
+}
+
+/** 全局配置接口 */
+export interface SmartTableConfig {
+  /** 自定义渲染器 */
+  renderers?: Record<string, Renderer>
+  /** 默认分页配置 */
+  defaultPagination?: {
+    page?: number
+    size?: number
+    total?: number
+  }
+  /** 默认表格属性 */
+  defaultTableProps?: Record<string, any>
+  /** 默认列属性 */
+  defaultColumnProps?: Record<string, any>
+  /** 主题配置 */
+  theme?: {
+    primaryColor?: string
+    successColor?: string
+    warningColor?: string
+    dangerColor?: string
+    infoColor?: string
+  }
+}
+
+/* ======================= 操作列按钮 ======================= */
+
+export interface ButtonConfig<R = any> {
+  permission?: string | string[]
+  label: string
+  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+  action: (row: R) => void
+  visible?: (row: R) => boolean
+  width?: number
+}
+
+/* ======================= Renderer ======================= */
+
+export type RendererName =
+  | 'html'
+  | 'copy'
+  | 'img'
+  | 'dict'
+  | 'map'
+  | 'formatter'
+  | 'icon'
+  | 'input'
+  | 'input-number'
+  | 'select'
+  | 'button'
+  | 'link'
+  | 'slot'
+  
+/** renderer 对应的 renderProps */
+export interface RendererPropsMap {
+  html: WithRestProps<{
+    style?: string
+    class?: string
+  }>
+
+  copy: WithRestProps<{
+    /** 复制按钮图标颜色 */
+    iconColor?: string
+    /** 复制按钮提示文本 */
+    copyTitle?: string
+    /** 复制成功提示 */
+    successText?: string
+    /** 复制失败提示 */
+    errorText?: string
+  }>
+
+  img: WithRestProps<{
+    /** 图片宽度 */
+    width?: string | number
+    /** 图片高度 */
+    height?: string | number
+    /** 图片适应方式 */
+    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
+    /** 预览图片列表 */
+    previewSrcList?: string[]
+    /** 无图片时的占位文本 */
+    placeholder?: string
+    /** 自定义样式 */
+    style?: string
+  }>
+
+  dict: WithRestProps<{
+    /** 字典配置 */
+    options: Array<{
+      label: string
+      value: string | number
+      listClass?: string
+      cssClass?: string
+    }>
+    /** 是否显示未匹配的值 */
+    showValue?: boolean
+  }>
+
+  map: WithRestProps<{
+    /** key-value 映射 */
+    options: Record<string | number, any>
+  }>
+
+  formatter: never  // formatter 使用 ColumnConfig.formatter 函数
+
+  icon: WithRestProps<{
+    /** 自定义样式 */
+    style?: string
+    /** 图标大小（像素） */
+    size?: number
+    /** 自定义类名 */
+    class?: string
+  }>
+
+  input: WithRestProps<{
+    /** 占位文本 */
+    placeholder?: string
+    /** 输入框尺寸 */
+    size?: 'small' | 'default' | 'large'
+    /** 是否可清空 */
+    clearable?: boolean
+  }>
+
+  'input-number': WithRestProps<{
+    /** 最小值 */
+    min?: number
+    /** 最大值 */
+    max?: number
+    /** 步长 */
+    step?: number
+    /** 精度 */
+    precision?: number
+    /** 输入框尺寸 */
+    size?: 'small' | 'default' | 'large'
+    /** 是否显示增减按钮 */
+    controls?: boolean
+  }>
+
+  select: WithRestProps<{
+    /** 选项配置 */
+    options: Array<{
+      label: string
+      value: string | number
+    }>
+    /** 占位文本 */
+    placeholder?: string
+    /** 选择器尺寸 */
+    size?: 'small' | 'default' | 'large'
+    /** 是否可清空 */
+    clearable?: boolean
+  }>
+
+  button: WithRestProps<ButtonProps & {
+    /** 按钮文本 */
+    label?: string
+    /** 自定义样式 */
+    style?: string
+    /** 自定义类名 */
+    class?: string
+  }>
+
+  link: WithRestProps<{
+    /** 链接文本 */
+    label?: string
+    /** 链接地址 */
+    href: string
+    /** 是否新窗口打开 */
+    blank?: boolean
+    /** 自定义样式 */
+    style?: string
+    /** 自定义类名 */
+    class?: string
+  }>
+}
+
+/* ======================= 列类型 ======================= */
+
+export type ColumnType =
+  | 'default'
+  | 'selection'
+  | 'index'
+  | 'operation'
+
+/* ======================= ColumnConfig ======================= */
+export interface BaseColumn<R extends DefaultRow> {
+  key: keyof R & string
+  label?: string
+  visible?: boolean
+  inControl?: boolean
+  columnProps?: Partial<TableColumnCtx<R>>
+  render?: RendererName   
+  slot?: string           // 插槽名称，默认用 key
+  renderProps?: Partial<RendererPropsMap[keyof RendererPropsMap]>
+  buttons?: ButtonConfig<R>[]   // operation 列专用
+  maxbtn?: number               // operation 列专用
+  __rows?: R[]                  // operation 列内部使用
+}
+
+export interface SelectionColumn<R extends DefaultRow> extends BaseColumn<R> { type: 'selection' }
+export interface IndexColumn<R extends DefaultRow> extends BaseColumn<R> { type: 'index' }
+export interface OperationColumn<R extends DefaultRow> extends BaseColumn<R> { type: 'operation'; buttons: ButtonConfig<R>[] }
+export interface DataColumn<R extends DefaultRow> extends BaseColumn<R> { type?: 'default'; formatter?: (value: any, row: R) => any }
+
+export type ColumnConfig<R extends DefaultRow = any> =
+  | SelectionColumn<R>
+  | IndexColumn<R>
+  | OperationColumn<R>
+  | DataColumn<R>

package/src/components/SmartTable/utils/path.ts

@@ -0,0 +1,29 @@
+/**
+ * 安全获取对象深层属性
+ * 支持 a.b.c / a.0.b
+ */
+export function getValueByPath(obj: any, path?: string) {
+    if (!obj || !path) return undefined
+    return path.split('.').reduce((acc, key) => acc?.[key], obj)
+  }
+  
+  /**
+   * 安全设置对象深层属性（用于可编辑表格）
+   */
+  export function setValueByPath(
+    obj: any,
+    path: string,
+    value: any
+  ) {
+    if (!obj || !path) return
+    const keys = path.split('.')
+    const lastKey = keys.pop()!
+  
+    const target = keys.reduce((acc, key) => {
+      if (!acc[key]) acc[key] = {}
+      return acc[key]
+    }, obj)
+  
+    target[lastKey] = value
+  }
+  

package/src/index.ts

@@ -0,0 +1,38 @@
+/**
+ * Vue3 Smart Table - 主入口文件
+ *
+ * 基于 Vue 3 + Element Plus 的高可复用表格组件库
+ */
+import SmartTable from './components/SmartTable/index.vue'
+
+// 导出类型
+export * from './components/SmartTable/types'
+
+// 导出核心功能（从 SmartTable 内部导出）
+export {
+  getRendererManager,
+  wrapSFCComponent,
+  createFunctionalRenderer,
+  validateRendererProps
+} from './components/SmartTable/renderer'
+
+export {
+  setSmartTableConfig,
+  getSmartTableConfig
+} from './components/SmartTable/config'
+
+// 导出内置渲染器
+export {
+  builtInRenderers,
+  registerBuiltInRenderers,
+  createRenderer
+} from './components/SmartTable/renderers'
+
+// 导出类型工具
+export { defineColumn } from './types/enhanced'
+
+// 导出主组件
+export { SmartTable }
+
+// 默认导出
+export default SmartTable

package/src/types/enhanced.ts

@@ -0,0 +1,51 @@
+/**
+ * 增强类型系统 - 提供更好的类型推断
+ */
+import type { ColumnConfig, RendererName } from '../components/SmartTable/types'
+
+/**
+ * 提取行数据的类型
+ */
+export type ExtractRowType<T> = T extends ColumnConfig<infer R> ? R : never
+
+/**
+ * 根据列配置提取表格数据类型
+ */
+export type TableDataFromColumns<T extends ColumnConfig[]> = T extends (infer C)[]
+  ? C extends ColumnConfig<infer R>
+    ? R
+    : any
+  : any
+
+/**
+ * 渲染器 Props 类型推断
+ */
+export type InferRendererProps<T extends RendererName> =
+  T extends 'html'
+    ? { style?: string; class?: string; [key: string]: any }
+    : T extends 'copy'
+      ? { successText?: string; errorText?: string; iconColor?: string; [key: string]: any }
+      : T extends 'img'
+        ? { width?: string | number; height?: string | number; fit?: string; previewSrcList?: string[]; [key: string]: any }
+        : T extends 'dict'
+          ? { options: Array<{ label: string; value: string | number; listClass?: string; cssClass?: string }>; showValue?: boolean }
+          : T extends 'map'
+            ? { options: Record<string | number, any> }
+            : T extends 'input'
+              ? { placeholder?: string; size?: 'small' | 'default' | 'large'; clearable?: boolean }
+              : T extends 'select'
+                ? { options: Array<{ label: string; value: string | number }>; placeholder?: string; clearable?: boolean }
+                : { [key: string]: any }
+
+/**
+ * 快捷创建列的辅助函数（类型安全简化版）
+ */
+export function defineColumn(
+  key: string,
+  config?: Partial<Omit<ColumnConfig, 'key'>>
+): ColumnConfig {
+  return {
+    key,
+    ...config
+  } as ColumnConfig
+}

package/dist/vue3-smart-table.css

@@ -1 +0,0 @@
-.copy-wrapper:hover .copy-btn{display:inline-block!important}.smart-table[data-v-7c94ec39]{width:100%}