# ActionBar Component

A flexible action bar component for organizing and displaying action buttons with optional separators.

## Features

- **Button Organization**: Display multiple action buttons in a horizontal layout
- **Flexible Configuration**: Define buttons through data or use slot content
- **Separators**: Add visual separators between button groups using `null` values
- **Customizable Styling**: Control gap spacing and apply custom styles
- **Button Types**: Support all button types (primary, secondary, danger, etc.)
- **Icon Support**: Display icons alongside button labels
- **Disabled State**: Individual button disable functionality
- **Responsive**: Adapts to container width

## Basic Usage

```svelte
<script>
import ActionBar, { type ButtonAction } from '@ticatec/uniface-element/ActionBar';

const actions: ButtonAction[] = [
  {
    label: 'Save',
    type: 'primary',
    icon: 'icon_google_save',
    handler: () => console.log('Save clicked')
  },
  {
    label: 'Cancel',
    type: 'secondary',
    handler: () => console.log('Cancel clicked')
  }
];
</script>

<ActionBar buttons={actions} />
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `buttons` | `ButtonActions` | `[]` | Array of button actions or null for separators |
| `style` | `string` | `''` | Custom CSS styles for the action bar |
| `gap` | `number` | `8` | Gap spacing between buttons in pixels |

## ButtonAction Interface

```typescript
interface ButtonAction {
  label: string;           // Button text
  disabled?: boolean;      // Whether the button is disabled
  icon?: string;          // Icon class name (optional)
  type?: ButtonType;      // Button style type
  handler?: MouseClickHandler; // Click event handler
}

type ButtonActions = Array<ButtonAction | null>;
```

## ButtonType Options

The component supports all standard button types:
- `'primary'` - Primary action button
- `'secondary'` - Secondary action button  
- `'danger'` - Destructive action button
- `'success'` - Success/confirmation button
- `'warning'` - Warning button
- `'info'` - Informational button

## Examples

### Basic Action Bar

```svelte
<script>
const basicActions = [
  { label: 'New', handler: createNew },
  { label: 'Edit', handler: editItem },
  { label: 'Delete', type: 'danger', handler: deleteItem }
];
</script>

<ActionBar buttons={basicActions} />
```

### With Icons

```svelte
<script>
const iconActions = [
  { 
    label: 'Save', 
    icon: 'icon_google_save',
    type: 'primary',
    handler: save 
  },
  { 
    label: 'Print', 
    icon: 'icon_google_print',
    handler: print 
  }
];
</script>

<ActionBar buttons={iconActions} />
```

### With Separators

```svelte
<script>
const actionsWithSeparators = [
  { label: 'Copy', handler: copy },
  { label: 'Paste', handler: paste },
  null, // Separator
  { label: 'Delete', type: 'danger', handler: remove }
];
</script>

<ActionBar buttons={actionsWithSeparators} />
```

### Custom Spacing

```svelte
<ActionBar 
  buttons={actions}
  gap={16}
  style="padding: 12px; background: #f5f5f5;"
/>
```

### Using Slot Content

```svelte
<ActionBar>
  <Button label="Custom" type="primary" />
  <Button label="Actions" type="secondary" />
</ActionBar>
```

## Dynamic Actions

```svelte
<script>
let isEditing = false;

$: actions = isEditing ? [
  { label: 'Save', type: 'primary', handler: save },
  { label: 'Cancel', handler: cancel }
] : [
  { label: 'Edit', handler: startEdit },
  { label: 'Delete', type: 'danger', handler: remove }
];
</script>

<ActionBar buttons={actions} />
```

## Conditional Buttons

```svelte
<script>
let hasPermission = true;
let isLoading = false;

$: actions = [
  { label: 'Refresh', handler: refresh },
  hasPermission ? { 
    label: 'Save', 
    type: 'primary',
    disabled: isLoading,
    handler: save 
  } : null,
  hasPermission ? { 
    label: 'Delete', 
    type: 'danger',
    disabled: isLoading,
    handler: remove 
  } : null
].filter(Boolean); // Remove null values
</script>

<ActionBar buttons={actions} />
```

## Behavior

### Button Rendering
- Buttons are rendered using the internal Button component
- Each button receives the configured label, icon, type, and disabled state
- Click handlers are automatically bound to the button events

### Separators
- Use `null` values in the buttons array to insert visual separators
- Separators appear as vertical lines with 24px height
- Useful for grouping related actions

### Fallback Content
- If no buttons are provided or the array is empty, slot content is displayed
- Allows for completely custom action bar layouts

## Styling

The component uses the following CSS classes:

- `.uniface-action-bar` - Main container with flexbox layout

### CSS Variables

You can customize the appearance using CSS:

```css
.uniface-action-bar {
  /* Custom styling */
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px;
}
```

## Accessibility

- Uses semantic button elements for proper keyboard navigation
- Disabled buttons are properly marked and non-interactive
- Focus management follows standard button behavior
- Screen readers can properly identify action buttons

## Common Use Cases

### Toolbar Actions
```svelte
<ActionBar buttons={[
  { label: 'New', icon: 'icon_google_add' },
  { label: 'Open', icon: 'icon_google_folder_open' },
  { label: 'Save', icon: 'icon_google_save' },
  null,
  { label: 'Cut', icon: 'icon_google_content_cut' },
  { label: 'Copy', icon: 'icon_google_content_copy' },
  { label: 'Paste', icon: 'icon_google_content_paste' }
]} />
```

### Form Actions
```svelte
<ActionBar 
  buttons={[
    { label: 'Save', type: 'primary', handler: submit },
    { label: 'Cancel', handler: cancel }
  ]}
  style="justify-content: flex-end; margin-top: 16px;"
/>
```

### CRUD Operations
```svelte
<ActionBar buttons={[
  { label: 'Create', type: 'primary', handler: create },
  { label: 'Edit', handler: edit },
  { label: 'Delete', type: 'danger', handler: remove },
  null,
  { label: 'Refresh', handler: refresh }
]} />
```

## Best Practices

1. **Group Related Actions**: Use separators to group related functionality
2. **Consistent Icons**: Use consistent icon styles throughout your application
3. **Button Types**: Use appropriate button types (primary for main actions, danger for destructive actions)
4. **Disable States**: Disable buttons when actions are not available or during loading
5. **Responsive Design**: Consider button labels and spacing for mobile devices