# Page

A comprehensive page container component that provides standardized page layout with header, content area, and navigation actions.

## Features

- **Standardized Layout**: Consistent page structure across applications
- **Header Component**: Built-in page header with title and description
- **Navigation Actions**: Support for back and reload functionality
- **Flexible Styling**: Customizable appearance with shadow and rounded corners
- **Slot System**: Extensible header and content areas
- **Responsive Design**: Adapts to different screen sizes
- **Action Integration**: Easy integration with navigation and refresh actions

## Installation

```bash
npm install @ticatec/uniface-element
```

## Basic Usage

```svelte
<script>
  import Page from '@ticatec/uniface-element/Page';
</script>

<Page title="My Page" comment="This is a sample page">
  <div>Page content goes here</div>
</Page>
```

## API Reference

### Page Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | `''` | Page title displayed in header |
| `comment` | `string` | `null` | Subtitle or description text |
| `header$style` | `string` | `''` | Custom CSS styles for header area |
| `content$style` | `string` | `''` | Custom CSS styles for content area |
| `round` | `boolean` | `false` | Apply rounded corners to page container |
| `shadow` | `boolean` | `true` | Apply shadow effect to page container |
| `goBack` | `PageAction \| null` | `null` | Back button action handler |
| `reload` | `PageAction \| null` | `null` | Reload button action handler |
| `style` | `string` | `''` | Custom CSS styles for page wrapper |

### Page Slots

| Slot | Description |
|------|-------------|
| `default` | Main content area of the page |
| `page-header` | Replace entire header component |
| `header-ext` | Additional content in header (buttons, etc.) |

### PageHeader Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | `''` | Header title text |
| `comment` | `string` | `''` | Header subtitle/description |
| `goBack` | `PageAction \| null` | `null` | Back navigation action |
| `reload` | `PageAction \| null` | `null` | Reload action |

### Types

```typescript
export type PageAction = () => any;
```

## Examples

### Basic Page Layout

```svelte
<script>
  import Page from '@ticatec/uniface-element/Page';
</script>

<Page 
  title="Dashboard" 
  comment="Overview of your application metrics"
>
  <div style="padding: 20px;">
    <h2>Welcome to your dashboard</h2>
    <p>Here you can view all your important metrics and data.</p>
  </div>
</Page>
```

### Page with Navigation

```svelte
<script>
  import Page from '@ticatec/uniface-element/Page';
  import { goto } from '$app/navigation';
  
  function handleGoBack() {
    goto('/dashboard');
  }
  
  function handleReload() {
    window.location.reload();
  }
</script>

<Page 
  title="User Profile" 
  comment="Manage your account settings"
  goBack={handleGoBack}
  reload={handleReload}
>
  <div style="padding: 20px;">
    <form>
      <!-- Profile form content -->
    </form>
  </div>
</Page>
```

### Styled Page with Rounded Corners

```svelte
<script>
  import Page from '@ticatec/uniface-element/Page';
</script>

<Page 
  title="Settings" 
  comment="Configure your preferences"
  round
  shadow
  style="max-width: 800px; margin: 0 auto;"
>
  <div style="padding: 24px;">
    <div class="settings-section">
      <h3>General Settings</h3>
      <!-- Settings content -->
    </div>
  </div>
</Page>
```

### Page with Header Extensions

```svelte
<script>
  import Page from '@ticatec/uniface-element/Page';
  import Button from '@ticatec/uniface-element/Button';
  
  function handleSave() {
    console.log('Saving data...');
  }
  
  function handleCancel() {
    console.log('Cancelling...');
  }
  
  function handleExport() {
    console.log('Exporting data...');
  }
</script>

<Page 
  title="Document Editor" 
  comment="Edit your document content"
  round
>
  <div slot="header-ext" style="display: flex; gap: 8px;">
    <Button type="primary" label="Save" onClick={handleSave} />
    <Button type="secondary" label="Cancel" onClick={handleCancel} />
    <Button type="third" label="Export" onClick={handleExport} />
  </div>
  
  <div style="padding: 20px;">
    <textarea 
      style="width: 100%; height: 400px; border: 1px solid #ccc; padding: 12px;"
      placeholder="Start typing your document..."
    ></textarea>
  </div>
</Page>
```

### Data Table Page

```svelte
<script>
  import Page from '@ticatec/uniface-element/Page';
  import Button from '@ticatec/uniface-element/Button';
  import DataTable from '@ticatec/uniface-element/DataTable';
  
  let users = [
    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { id: 3, name: 'Bob Wilson', email: 'bob@example.com', role: 'User' }
  ];
  
  function handleAddUser() {
    console.log('Adding new user...');
  }
  
  function handleRefresh() {
    console.log('Refreshing user list...');
  }
</script>

<Page 
  title="User Management" 
  comment="Manage system users and permissions"
  reload={handleRefresh}
  shadow
>
  <div slot="header-ext">
    <Button type="primary" label="Add User" onClick={handleAddUser} />
  </div>
  
  <div style="padding: 20px;">
    <DataTable 
      data={users}
      columns={[
        { field: 'name', title: 'Name' },
        { field: 'email', title: 'Email' },
        { field: 'role', title: 'Role' }
      ]}
    />
  </div>
</Page>
```

### Form Page with Validation

```svelte
<script>
  import Page from '@ticatec/uniface-element/Page';
  import Button from '@ticatec/uniface-element/Button';
  import FormField from '@ticatec/uniface-element/FormField';
  import TextEditor from '@ticatec/uniface-element/TextEditor';
  
  let formData = {
    title: '',
    description: '',
    category: ''
  };
  
  let isValid = false;
  
  $: isValid = formData.title && formData.description;
  
  function handleGoBack() {
    if (hasUnsavedChanges()) {
      if (confirm('You have unsaved changes. Are you sure you want to leave?')) {
        history.back();
      }
    } else {
      history.back();
    }
  }
  
  function hasUnsavedChanges() {
    return formData.title || formData.description || formData.category;
  }
  
  function handleSubmit() {
    if (isValid) {
      console.log('Submitting form:', formData);
    }
  }
  
  function handleReset() {
    formData = { title: '', description: '', category: '' };
  }
</script>

<Page 
  title="Create New Item" 
  comment="Fill out the form to create a new item"
  goBack={handleGoBack}
  round
>
  <div slot="header-ext" style="display: flex; gap: 8px;">
    <Button 
      type="primary" 
      label="Submit" 
      disabled={!isValid}
      onClick={handleSubmit} 
    />
    <Button type="secondary" label="Reset" onClick={handleReset} />
  </div>
  
  <div style="padding: 24px;">
    <div style="max-width: 600px;">
      <FormField label="Title" required>
        <TextEditor 
          variant="outlined" 
          bind:value={formData.title}
          placeholder="Enter item title"
        />
      </FormField>
      
      <FormField label="Description" required>
        <TextEditor 
          variant="outlined" 
          bind:value={formData.description}
          placeholder="Enter description"
        />
      </FormField>
      
      <FormField label="Category">
        <TextEditor 
          variant="outlined" 
          bind:value={formData.category}
          placeholder="Enter category"
        />
      </FormField>
    </div>
  </div>
</Page>
```

### Custom Header Page

```svelte
<script>
  import Page from '@ticatec/uniface-element/Page';
  import Icon from '@ticatec/uniface-element/Icon';
  
  function handleSearch() {
    console.log('Searching...');
  }
  
  function handleFilter() {
    console.log('Filtering...');
  }
</script>

<Page style="height: 100vh;">
  <div slot="page-header" class="custom-header">
    <div class="header-left">
      <Icon name="icon_google_apps" />
      <h1>Custom Dashboard</h1>
    </div>
    <div class="header-center">
      <input 
        type="search" 
        placeholder="Search..." 
        class="search-input"
      />
    </div>
    <div class="header-right">
      <Icon name="icon_google_search" onClick={handleSearch} />
      <Icon name="icon_google_filter_list" onClick={handleFilter} />
    </div>
  </div>
  
  <div style="padding: 20px; height: 100%; overflow-y: auto;">
    <!-- Page content -->
  </div>
</Page>

<style>
  .custom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    color: white;
  }
  
  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .header-left h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
  }
  
  .search-input {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    width: 300px;
    outline: none;
  }
  
  .header-right {
    display: flex;
    gap: 16px;
  }
</style>
```

### Dashboard Overview Page

```svelte
<script>
  import Page from '@ticatec/uniface-element/Page';
  import Card from '@ticatec/uniface-element/Card';
  
  let stats = [
    { title: 'Total Users', value: '1,234', change: '+12%' },
    { title: 'Revenue', value: '$45,678', change: '+5.2%' },
    { title: 'Orders', value: '890', change: '-2.1%' },
    { title: 'Conversion', value: '3.2%', change: '+0.8%' }
  ];
  
  function handleRefresh() {
    console.log('Refreshing dashboard data...');
    // Refresh logic here
  }
</script>

<Page 
  title="Analytics Dashboard" 
  comment="Real-time business metrics and insights"
  reload={handleRefresh}
  shadow={false}
  content$style="background-color: #f5f5f5;"
>
  <div style="padding: 24px;">
    <div class="stats-grid">
      {#each stats as stat}
        <Card style="padding: 20px; text-align: center;">
          <h3 style="margin: 0 0 8px 0; color: #666;">{stat.title}</h3>
          <div style="font-size: 32px; font-weight: bold; margin: 8px 0;">
            {stat.value}
          </div>
          <div style="color: {stat.change.startsWith('+') ? '#4caf50' : '#f44336'};">
            {stat.change}
          </div>
        </Card>
      {/each}
    </div>
    
    <div style="margin-top: 24px;">
      <Card style="padding: 24px;">
        <h3>Recent Activity</h3>
        <!-- Activity content -->
      </Card>
    </div>
  </div>
</Page>

<style>
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
</style>
```

### Mobile-Responsive Page

```svelte
<script>
  import Page from '@ticatec/uniface-element/Page';
  import Button from '@ticatec/uniface-element/Button';
  
  let isMobile = false;
  
  // Check if mobile on mount
  import { onMount } from 'svelte';
  onMount(() => {
    isMobile = window.innerWidth < 768;
    
    const handleResize = () => {
      isMobile = window.innerWidth < 768;
    };
    
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  });
  
  function handleGoBack() {
    history.back();
  }
</script>

<Page 
  title="Mobile Example" 
  comment="Responsive page design"
  goBack={handleGoBack}
  round={!isMobile}
  shadow={!isMobile}
  style={isMobile ? 'height: 100vh; margin: 0;' : 'max-width: 800px; margin: 20px auto;'}
>
  <div style="padding: {isMobile ? '16px' : '24px'};">
    <div class="responsive-content">
      <h2>Responsive Content</h2>
      <p>This page adapts to mobile and desktop screens.</p>
      
      <div class="button-group">
        <Button type="primary" label="Action 1" />
        <Button type="secondary" label="Action 2" />
      </div>
    </div>
  </div>
</Page>

<style>
  .responsive-content {
    max-width: 100%;
  }
  
  .button-group {
    display: flex;
    gap: 12px;
    margin-top: 20px;
  }
  
  @media (max-width: 767px) {
    .button-group {
      flex-direction: column;
    }
  }
</style>
```

## Best Practices

1. **Consistent Layout**: Use Page component for all main application screens
2. **Navigation**: Always provide appropriate back/reload actions when needed
3. **Content Organization**: Use proper spacing and organize content logically
4. **Mobile Responsiveness**: Consider mobile layouts and touch interactions
5. **Header Extensions**: Use header slot for page-specific actions
6. **Loading States**: Show loading indicators during data fetching
7. **Error Handling**: Provide proper error states and recovery options

## Styling

The Page component provides several CSS classes for styling:

```css
.uniface-page-wrapper {
  /* Page wrapper container */
  width: 100%;
  height: 100%;
}

.uniface-page {
  /* Main page container */
  display: flex;
  flex-direction: column;
  height: 100%;
  background: white;
}

.uniface-page.shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.uniface-page.round {
  border-radius: 8px;
  overflow: hidden;
}

.uniface-page-header {
  /* Header area */
  flex: 0 0 auto;
  padding: 16px 24px;
  border-bottom: 1px solid #e0e0e0;
  background: #fafafa;
}

.page-container {
  /* Content area */
  flex: 1 1 auto;
  overflow: hidden;
}

.page-topic {
  /* Page title */
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
}

.page-comment {
  /* Page subtitle */
  font-size: 14px;
  color: #666;
}
```

## Accessibility

- Proper heading hierarchy with semantic HTML
- Keyboard navigation support for all interactive elements
- ARIA labels for navigation actions
- Focus management for modal-like usage
- Screen reader compatibility
- High contrast mode support

## Related Components

- [PageHeader](./PageHeader.md) - Standalone header component
- [Card](../card/README.md) - For content sections within pages
- [Button](../button/README.md) - For page actions
- [ActionBar](../action-bar/README.md) - For multiple page actions