@ticatec/uniface-element 0.2.3 → 0.3.0

package/dist/page/README.md

@@ -0,0 +1,605 @@
+# 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