149 lines
6.3 KiB
Markdown
149 lines
6.3 KiB
Markdown
# Aether Project Components
|
|
|
|
This document details the various UI components used throughout the Aether SvelteKit frontend project, categorized by their scope and functionality.
|
|
|
|
## 1. Aether Components (UI/UX)
|
|
|
|
### 1.1. System Components
|
|
|
|
These components are part of the core application shell and provide global functionalities.
|
|
|
|
- **`header`**: Application-wide header.
|
|
- **`main/module`s**: Main content area for modules.
|
|
- **`footer`**: Application-wide footer.
|
|
- **`app`**: Provides global application functionalities such as:
|
|
- Refresh application state.
|
|
- Clear IndexedDB.
|
|
- Clear local storage (settings).
|
|
- Toggle iframe visibility (also updates URL parameter).
|
|
- Copy current URL.
|
|
- Generate and display QR codes.
|
|
- **`menu`**: Various menus for different purposes:
|
|
- **`mode`**: Edit mode toggle, more options (all or details).
|
|
- **`access_type`**: Passcode input, clear access.
|
|
- **`user`**: Sign in/out, reset password, email link, change username and email.
|
|
- **`theme`**: Mode (light/dark), name (theme list).
|
|
- **`debug`**: Developer-facing tools:
|
|
- Toggle debug mode (also updates URL parameter).
|
|
- Show core and module storages.
|
|
- Manually set initial timestamp.
|
|
- **`scroll_to`**: Navigation controls for scrolling:
|
|
- Scroll to top of the page.
|
|
- Scroll page up.
|
|
- Scroll page down.
|
|
- Scroll to bottom of the page.
|
|
|
|
### 1.2. Core Components
|
|
|
|
These are reusable components that provide common functionalities across different modules.
|
|
|
|
- **`copy_btn`**: A button to copy content to the clipboard.
|
|
- Properties: `clipboard`, `bind:value`, `btn_text`, `btn_html`.
|
|
- **`txt_editor`**: A basic text area editor.
|
|
- **`md_editor`**: Markdown editor.
|
|
- Uses CodeMirror (planned for rich text editing).
|
|
- **Note:** ShadEditor TipTap is present but marked for removal. ShadCN components are also being phased out in favor of CodeMirror for text editing.
|
|
- **`html_editor`**: HTML editor.
|
|
- **`media_player`**: Component for playing media files.
|
|
- Properties: `hosted_file`, `archive_content`, `media_player`.
|
|
- Bindings: `bind:host_id`, `bind:media_type`.
|
|
- Status: `stopped`, `paused`, `playing`.
|
|
- **`hosted_file_li`**: Manages a list of hosted files, making them available for selection.
|
|
- **`hosted_file_link_to`**: Lists links per object, with bindings to add/remove links.
|
|
- **`upload_to_host`**: Component for uploading files to the host.
|
|
- Handles multiple files.
|
|
- Properties: `link_type`, `link_id`, `inner fragment` (label html).
|
|
- Bindings: `bind:trigger`, `bind:show_spinner`, `bind:show_percent`.
|
|
- Status: `started`, `uploading`, `finished`.
|
|
- **`upload_file_tbl`**: Table for uploaded files, includes checks for duplicate file hashes and removal from the list.
|
|
- **`download_from_host`**: Component for downloading files from the host.
|
|
- Bindings: `bind:host_file_id`, `bind:filename`, `bind:file_ext`.
|
|
- Properties: `btn inner fragment`.
|
|
- Bindings: `bind:trigger`, `bind:show_spinner`, `bind:show_percent`.
|
|
- Status: `started`, `downloading`, `finished`.
|
|
- **`data_store`**: Component for interacting with data stores.
|
|
- **`ae_crud`**: Generic CRUD (Create, Read, Update, Delete) component.
|
|
- **Note:** Needs simplification.
|
|
- Properties: `obj`, `prop`, `current_value`.
|
|
- Bindings: `bind:value`, `bind:trigger`, `inner fragment`.
|
|
- **`ae_obj_prop_val`**: A wrapper for a function to manage object property values.
|
|
- Bindings: `bind:obj_type`, `bind:obj_id`, `bind:obj_prop`, `bind:obj_value`, `bind:obj_new_value`, `bind:trigger`, `bind:show_spinner`, `bind:show_percent`.
|
|
- Status: `status`, `result`.
|
|
- **`sql_qry`**: Component for executing SQL queries.
|
|
- **`obj_tbl`**: Object SQL results table or similar.
|
|
- **`qr_scanner`**: Component for scanning QR codes.
|
|
- **`websocket`**: Component for WebSocket communication.
|
|
|
|
### 1.3. Main / Module Components
|
|
|
|
These are components specific to main application sections or individual modules.
|
|
|
|
- **`menu`**:
|
|
- **`options`**: Various settings, show/hide content and options, limit, sorting options.
|
|
- **`actions`**: Various actions, sign in/out, email.
|
|
|
|
### 1.4. Object Menu
|
|
|
|
A standardized menu for interacting with objects.
|
|
|
|
- **Properties Displayed:** `id`, `name`, `group`, `priority`, `sort`, `alert`, `hide`, `enable`, `note`.
|
|
- **Future Properties:** `ext_id`, `ext_sys_id`, `code` (not yet ready).
|
|
- **Actions:** `create`, `view`, `edit`, `update`, `hide`, `disable`, `delete`, `alert` (message), `archive` (not yet ready).
|
|
- **Future Actions:** `copy`, `import`.
|
|
- **Sort Options:**
|
|
- `[default]`: `group > priority > sort (ASC/DESC) > alert > name`
|
|
- `[sort_updated]`: `group > priority > sort (ASC/DESC) > alert > updated_on > created_on`
|
|
- `[priority_updated]`: `group > priority > updated_on (ASC/DESC) > created_on`
|
|
- `[priority_name]`: `group > priority > name (ASC/DESC) > sort > alert > updated_on > created_on`
|
|
- `[name]`: `priority > name (ASC/DESC) > sort > alert > updated_on > created_on`
|
|
- `[created_on]`: `priority > created_on (ASC/DESC)`
|
|
- `[updated_on]`: `priority > updated_on (ASC/DESC) > created_on`
|
|
|
|
## 2. Pop-ups
|
|
|
|
Standardized structure for various types of pop-up elements.
|
|
|
|
- **`modal_header`**:
|
|
- `title`
|
|
- `close` button
|
|
- **`modal_main`**: Main content area of the modal.
|
|
- **`modal_meta`**: Meta-information section.
|
|
- **`modal_footer`**:
|
|
- `close` button
|
|
- **`Pop-up Modal (blocking)`**: A modal that blocks interaction with the rest of the page.
|
|
- `modal position`
|
|
- **`Pop-up Modal Inline`**: A modal that appears inline with content.
|
|
- `inline`, `inline-block`, `block` display options.
|
|
- **`Pop-up Dialog`**: A dialog box.
|
|
- `dialog position`
|
|
|
|
## 3. Containers
|
|
|
|
Generic container types used for layout and grouping.
|
|
|
|
### 3.1. Navigation
|
|
|
|
- `link`
|
|
- `download`
|
|
|
|
### 3.2. Forms
|
|
|
|
- `save` button/action
|
|
- `clear value` action
|
|
- `set null value` action
|
|
|
|
### 3.3. Other Containers
|
|
|
|
- `help`: Blue themed container.
|
|
- `info`: Blue themed container.
|
|
- `alert`: Yellow themed container.
|
|
- `warning`: Orange themed container.
|
|
- `error`: Red themed container.
|
|
- `message`: Green themed container.
|
|
|
|
## 4. CSS Styling for UI Elements
|
|
|
|
- **Warning/Hide Buttons:** `preset-tonal-warning hover:preset-filled-warning-500`
|
|
- **Error/Delete/Disable Buttons:** `preset-tonal-error hover:preset-filled-error-500`
|
|
- **Submenu:** `flex flex-row items-center justify-center gap-1`
|