Toolbar and Tools

/**
 * Toolbar component for table operations and tools
 */
interface VxeToolbar extends ComponentPublicInstance {
  // Loading state
  loading?: boolean;
  
  // Built-in tools
  refresh?: VxeToolbarPropTypes.Refresh;
  import?: VxeToolbarPropTypes.Import;
  export?: VxeToolbarPropTypes.Export;
  print?: VxeToolbarPropTypes.Print;
  zoom?: VxeToolbarPropTypes.Zoom;
  custom?: VxeToolbarPropTypes.Custom;
  
  // Custom elements
  buttons?: VxeToolbarPropTypes.Buttons;
  tools?: VxeToolbarPropTypes.Tools;
  
  // Configuration
  perfect?: boolean;
  size?: VxeToolbarPropTypes.Size;
  className?: string;
  
  // Component methods
  syncUpdate(params: { collectColumn: any[], $table: any }): void;
}

interface ButtonConfiguration {
  /** Array of button configurations */
  buttons?: VxeToolbarPropTypes.Button[];
}

interface VxeToolbarPropTypes.Button {
  /** Button code/identifier */
  code?: string;
  /** Button name/label */
  name?: string;
  /** Button status */
  status?: string;
  /** Button type */
  type?: string;
  /** Icon name */
  icon?: string;
  /** Disabled state */
  disabled?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Button size */
  size?: VxeToolbarPropTypes.Size;
  /** Placement position */
  placement?: 'top' | 'bottom';
  /** Dropdown options */
  dropdowns?: VxeToolbarPropTypes.Dropdown[];
  /** Visibility method */
  visible?: boolean;
  /** Visibility method function */
  visibleMethod?: (params: any) => boolean;
  /** Button properties */
  buttonRender?: VxeToolbarPropTypes.ButtonRender;
}

interface VxeToolbarPropTypes.Dropdown {
  /** Dropdown code */
  code?: string;
  /** Dropdown name */
  name?: string;
  /** Disabled state */
  disabled?: boolean;
  /** Visibility */
  visible?: boolean;
  /** Icon */
  icon?: string;
  /** Dropdown type */
  type?: string;
}

interface VxeToolbarPropTypes.ButtonRender {
  /** Renderer name */
  name?: string;
  /** Renderer properties */
  props?: any;
  /** Renderer events */
  events?: { [key: string]: Function };
}

interface ToolConfiguration {
  /** Array of tool configurations */
  tools?: VxeToolbarPropTypes.Tool[];
}

interface VxeToolbarPropTypes.Tool {
  /** Tool code/identifier */
  code?: string;
  /** Tool name */
  name?: string;
  /** Tool icon */
  icon?: string;
  /** Disabled state */
  disabled?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Placement position */
  placement?: 'top' | 'bottom';
  /** Visibility */
  visible?: boolean;
  /** Tool renderer */
  toolRender?: VxeToolbarPropTypes.ToolRender;
}

interface VxeToolbarPropTypes.ToolRender {
  /** Renderer name */
  name?: string;
  /** Renderer properties */
  props?: any;
  /** Renderer events */
  events?: { [key: string]: Function };
}

interface RefreshConfiguration {
  /** Refresh tool configuration */
  refresh?: {
    /** Enable refresh tool */
    enabled?: boolean;
    /** Refresh icon */
    icon?: string;
    /** Loading icon */
    iconLoading?: string;
    /** Query method */
    query?: (params: any) => Promise<any>;
    /** Query parameters */
    queryParams?: any;
  };
}

// Refresh tool shorthand
type VxeToolbarPropTypes.Refresh = boolean | RefreshConfiguration['refresh'];

interface ImportExportConfiguration {
  /** Import tool configuration */
  import?: {
    /** Enable import tool */
    enabled?: boolean;
    /** Import icon */
    icon?: string;
    /** Import types */
    types?: string[];
    /** Import modes */
    modes?: string[];
    /** Custom import method */
    importMethod?: (params: any) => void;
  };
  
  /** Export tool configuration */
  export?: {
    /** Enable export tool */
    enabled?: boolean;
    /** Export icon */
    icon?: string;
    /** Export types */
    types?: string[];
    /** Export modes */
    modes?: string[];
    /** Custom export method */
    exportMethod?: (params: any) => void;
  };
}

// Import/Export tool shorthand
type VxeToolbarPropTypes.Import = boolean | ImportExportConfiguration['import'];
type VxeToolbarPropTypes.Export = boolean | ImportExportConfiguration['export'];

interface PrintConfiguration {
  /** Print tool configuration */
  print?: {
    /** Enable print tool */
    enabled?: boolean;
    /** Print icon */
    icon?: string;
    /** Custom print method */
    printMethod?: (params: any) => void;
  };
}

// Print tool shorthand
type VxeToolbarPropTypes.Print = boolean | PrintConfiguration['print'];

interface ZoomConfiguration {
  /** Zoom tool configuration */
  zoom?: {
    /** Enable zoom tool */
    enabled?: boolean;
    /** Fullscreen icon */
    iconIn?: string;
    /** Minimize icon */
    iconOut?: string;
  };
}

// Zoom tool shorthand
type VxeToolbarPropTypes.Zoom = boolean | ZoomConfiguration['zoom'];

interface CustomColumnConfiguration {
  /** Custom column tool configuration */
  custom?: {
    /** Enable custom tool */
    enabled?: boolean;
    /** Custom icon */
    icon?: string;
    /** Show footer */
    showFooter?: boolean;
    /** Trigger method */
    trigger?: 'manual' | 'click' | 'hover';
    /** Immediate effect */
    immediate?: boolean;
    /** Storage enabled */
    storage?: boolean;
    /** Check method for column customization */
    checkMethod?: (params: any) => boolean;
    /** Visible method */
    visibleMethod?: (params: any) => boolean;
    /** Allow visible toggle */
    allowVisible?: boolean;
    /** Allow resizable toggle */
    allowResizable?: boolean;
    /** Allow fixed toggle */
    allowFixed?: boolean;
    /** Allow sort toggle */
    allowSort?: boolean;
  };
}

// Custom tool shorthand
type VxeToolbarPropTypes.Custom = boolean | CustomColumnConfiguration['custom'];

// Basic toolbar with built-in tools
<VxeToolbar
  refresh
  export
  zoom
  custom
  :buttons="toolbarButtons"
>
</VxeToolbar>

// Toolbar button configuration
const toolbarButtons = [
  { code: 'add', name: 'Add Record', icon: 'vxe-icon-add' },
  { code: 'edit', name: 'Edit', icon: 'vxe-icon-edit' },
  { code: 'delete', name: 'Delete', icon: 'vxe-icon-delete', type: 'danger' },
  { 
    code: 'more', 
    name: 'More Actions',
    dropdowns: [
      { code: 'batch-edit', name: 'Batch Edit' },
      { code: 'batch-delete', name: 'Batch Delete' }
    ]
  }
];

// Advanced toolbar configuration
<VxeToolbar
  :refresh="{ query: handleRefresh }"
  :export="{ types: ['csv', 'xlsx'], modes: ['current', 'selected'] }"
  :import="{ types: ['csv', 'xlsx'] }"
  :print="{ enabled: true }"
  :custom="{ storage: true, allowVisible: true, allowResizable: true }"
  :buttons="toolbarButtons"
  @button-click="handleButtonClick"
  @tool-click="handleToolClick"
>
</VxeToolbar>

// Grid with integrated toolbar
<VxeGrid
  :toolbar-config="{
    buttons: [
      { code: 'add', name: 'New' },
      { code: 'delete', name: 'Delete' }
    ],
    tools: ['refresh', 'export', 'custom']
  }"
  @toolbar-button-click="handleToolbarButton"
>
</VxeGrid>

// Custom tool configuration
const customToolConfig = {
  enabled: true,
  storage: true,
  checkMethod: ({ column }) => {
    // Allow customization for all columns except certain system columns
    return !['seq', 'checkbox', 'radio'].includes(column.type);
  },
  allowVisible: true,
  allowResizable: true,
  allowFixed: true,
  allowSort: true
};

// Event handlers
const handleButtonClick = ({ code }) => {
  switch (code) {
    case 'add':
      // Handle add action
      break;
    case 'edit':
      // Handle edit action
      break;
    case 'delete':
      // Handle delete action
      break;
  }
};

const handleToolClick = ({ code }) => {
  switch (code) {
    case 'refresh':
      // Custom refresh logic
      break;
    case 'export':
      // Custom export logic
      break;
  }
};

// Programmatic toolbar operations
const toolbarRef = ref<VxeToolbarInstance>();

// Update toolbar state
toolbarRef.value?.syncUpdate({
  collectColumn: visibleColumns,
  $table: tableRef.value
});

// Toolbar size type
type VxeToolbarPropTypes.Size = 'mini' | 'small' | 'medium' | 'large';

// Toolbar instance type
interface VxeToolbarInstance extends ComponentPublicInstance, VxeToolbar {}

// Toolbar events
interface VxeToolbarEmits {
  'button-click': (params: VxeToolbarDefines.ButtonClickEventParams) => void;
  'tool-click': (params: VxeToolbarDefines.ToolClickEventParams) => void;
}

// Event parameter types
interface VxeToolbarDefines.ButtonClickEventParams {
  code: string;
  button: VxeToolbarPropTypes.Button;
  $event: Event;
}

interface VxeToolbarDefines.ToolClickEventParams {
  code: string;
  tool: VxeToolbarPropTypes.Tool;
  $event: Event;
}

// Button and tool arrays
type VxeToolbarPropTypes.Buttons = VxeToolbarPropTypes.Button[];
type VxeToolbarPropTypes.Tools = (string | VxeToolbarPropTypes.Tool)[];

// Built-in tool codes
type VxeToolbarBuiltInTools = 
  | 'refresh' 
  | 'import' 
  | 'export' 
  | 'print' 
  | 'zoom' 
  | 'custom';