@retailcrm/embed-ui-v1-components 0.9.21 → 0.9.22-alpha.2

package/docs/profiles/UiTable.yml

@@ -1,300 +0,0 @@
-component: UiTable
-summary: >
-  UiTable is the main data table component. It supports row rendering, grouping, expandable rows,
-  footer areas, and row-level interactions.
-usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uitable--docs
-
-public_import:
-  from: '@retailcrm/embed-ui-v1-components/remote'
-  named:
-    - UiTable
-
-related_components:
-  - UiTableColumn
-  - UiTableFooterButton
-  - UiTableFooterSection
-  - UiTableSorter
-
-use_when:
-  - You need structured tabular data.
-  - You need group headers, expandable rows, or footer sections.
-
-avoid_when:
-  - You need a simple list or card layout.
-
-api:
-  key_props:
-    - name: rows
-    - name: rowKey
-    - name: headless
-    - name: bordered
-    - name: fixed
-    - name: groupBy
-  slots:
-    - name: default
-      zone: columns
-      creates: Column declarations.
-    - name: expand
-      zone: expanded-row
-      creates: Expanded row content.
-    - name: footer
-      zone: footer
-      creates: Full footer area.
-    - name: footer-summary
-      zone: structured-footer
-      creates: Summary or selected-count area above table footer controls.
-    - name: footer-page-size
-      zone: structured-footer
-      creates: Page-size controls in the footer control row.
-    - name: footer-export
-      zone: structured-footer
-      creates: Export controls in the footer control row.
-    - name: footer-pagination
-      zone: structured-footer
-      creates: Pagination controls in the footer control row.
-    - name: group-head
-      zone: group-head
-      creates: Group heading content.
-    - name: empty
-      zone: empty-state
-      creates: Empty-state content.
-  emits:
-    - name: row:click
-  methods:
-    - name: resetExpanded
-    - name: expand
-    - name: collapse
-    - name: toggle
-
-rendered_structure:
-  descriptive_only: true
-  root:
-    shape: table.ui-v1-table
-    tag: table
-  zones:
-    - .ui-v1-table__section_head
-    - .ui-v1-table__section_body
-    - .ui-v1-table__section_foot
-    - .ui-v1-table__row
-    - .ui-v1-table__head-cell
-    - .ui-v1-table__body-cell
-  notes: >
-    Table layout is distributed across head, body, foot, and cell-level classes. Treat this as a
-    reasoning model for geometry and spacing, not as a stable selector contract.
-
-geometry:
-  layout: block-width table
-  root_display: table
-  width: 100%
-  width_behavior: stretches to container width by default
-  notes:
-    - Root fills available width.
-    - fixed=true switches table-layout from auto to fixed.
-    - bordered=true adds border and corner rounding through CSS variables.
-    - Filters and search controls should usually be placed above the table, not in the table root.
-    - Table-scoped pagination belongs in footer slots when custom controls are needed.
-
-styling:
-  notes:
-    - UiTable exposes a relatively rich CSS-variable surface for spacing and table chrome.
-    - Prefer table props and slot composition first, then CSS variables for spacing or background tuning.
-    - Internal classes are descriptive and mainly useful for debugging or narrow local integration.
-    - For reference-style footers, add a local class to UiTable and scope footer styles through that class.
-    - When styling footer pagination buttons, combine the internal footer button class with the local state class so base footer styles do not override page, active, or arrow colors.
-  root_classes:
-    - .ui-v1-table
-  state_classes:
-    - .ui-v1-table_fixed
-    - .ui-v1-table_bordered
-    - .ui-v1-table__head-cell_align-center
-    - .ui-v1-table__head-cell_align-right
-    - .ui-v1-table__body-cell_align-center
-    - .ui-v1-table__body-cell_align-right
-    - .ui-v1-table__body-cell_valign-top
-    - .ui-v1-table__body-cell_valign-bottom
-    - .ui-v1-table__body-cell_theme-group
-    - .ui-v1-table__body-cell_trim
-    - .ui-v1-table__head-cell_trim
-  zones:
-    - .ui-v1-table__head-cell
-    - .ui-v1-table__body-cell
-    - .ui-v1-table__footer-cell
-  css_variables:
-    public_theme_variables:
-      - name: --ui-v1-table-border-width
-        effect: Outer border width in bordered mode.
-      - name: --ui-v1-table-rounding
-        effect: Shared corner rounding.
-      - name: --ui-v1-table-cell-padding-x
-        effect: Base inline cell padding.
-      - name: --ui-v1-table-cell-padding-y
-        effect: Base block cell padding.
-      - name: --ui-v1-table-head-background
-        effect: Header row background.
-      - name: --ui-v1-table-group-head-background
-        effect: Group heading row background.
-      - name: --ui-v1-table-padding-start
-        effect: Effective first-column start padding.
-      - name: --ui-v1-table-padding-end
-        effect: Effective last-column end padding.
-    internal_layout_variables:
-      - name: --ui-v1-table-effective-padding-start
-        effect: Start padding after bordered adjustments.
-      - name: --ui-v1-table-effective-padding-end
-        effect: End padding after bordered adjustments.
-      - name: --ui-v1-table-head-cell-padding-block-start
-        effect: Header top padding.
-      - name: --ui-v1-table-head-cell-padding-block-end
-        effect: Header bottom padding.
-      - name: --ui-v1-table-body-cell-padding-block-start
-        effect: Body top padding.
-      - name: --ui-v1-table-body-cell-padding-block-end
-        effect: Body bottom padding.
-      - name: --ui-v1-table-group-head-padding-block-start
-        effect: Group row top padding.
-      - name: --ui-v1-table-group-head-padding-block-end
-        effect: Group row bottom padding.
-  typography:
-    default:
-      mixin: text-small
-      size: 14px
-      line_height: 20px
-      weight: 400
-    head_cells:
-      mixin: text-tiny-accent
-      size: 12px
-      line_height: 14px
-      weight: 500
-    group_rows:
-      mixin: text-tiny
-      size: 12px
-      line_height: 14px
-      weight: 400
-  reference_footer_css:
-    notes:
-      - Use this as the minimum CSS contract when recreating the Storybook reference table footer.
-      - Keep class names local to the screen, but preserve the same geometry and state rules.
-      - Plain CSS values below mirror the package palette: blue #005eeb, black #1e2248, grey #afb9c3 / #dee2e6.
-    example: |
-      .entity-list-table {
-        --ui-v1-table-cell-padding-x: 12px;
-        --ui-v1-table-cell-padding-y: 12px;
-        --ui-v1-table-padding-start: 16px;
-        --ui-v1-table-padding-end: 16px;
-        --ui-v1-table-rounding: 4px;
-        --ui-v1-table-head-cell-padding-block-start: 14px;
-        --ui-v1-table-head-cell-padding-block-end: 14px;
-        --ui-v1-table-body-cell-padding-block-start: 15px;
-        --ui-v1-table-body-cell-padding-block-end: 15px;
-      }
-
-      .entity-list-table .ui-v1-table__footer-meta {
-        min-height: 40px;
-        font-weight: 400;
-      }
-
-      .entity-list-table .ui-v1-table__footer-controls {
-        min-height: 52px;
-        background: #f9fafb;
-      }
-
-      .entity-list-table .ui-v1-table__footer-section {
-        font-size: 14px;
-        line-height: 20px;
-      }
-
-      .entity-list-table .ui-v1-table__footer-side > .entity-list-table__pagination-section {
-        padding-block: 8px;
-      }
-
-      .entity-list-table__pagination {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        height: 36px;
-      }
-
-      .entity-list-table__pagination-button,
-      .entity-list-table__pagination-arrow {
-        width: 36px;
-        height: 36px;
-        border-radius: 4px;
-      }
-
-      .entity-list-table .ui-v1-table__footer-button.entity-list-table__pagination-button {
-        color: #1e2248;
-        font-size: 14px;
-        line-height: 20px;
-      }
-
-      .entity-list-table .ui-v1-table__footer-button.entity-list-table__pagination-button_current {
-        color: #fff;
-        background: #005eeb;
-      }
-
-      .entity-list-table .ui-v1-table__footer-button.entity-list-table__pagination-arrow {
-        color: #afb9c3;
-      }
-
-      .entity-list-table__pagination-arrow-icon {
-        display: block;
-        width: 24px;
-        height: 24px;
-      }
-
-      .entity-list-table__pagination-divider {
-        width: 1px;
-        height: 52px;
-        margin-block: -8px;
-        background: #dee2e6;
-      }
-
-composition:
-  filters:
-    notes:
-      - Keep filter controls directly above UiTable so the relationship between filters and rows is obvious.
-      - Use UiTextbox for text search and UiSelect or compact toggle controls for finite filters.
-      - Persist filter values in URL query parameters when routing is available.
-  sorting:
-    notes:
-      - Use UiTableSorter inside a UiTableColumn label slot for sortable columns.
-      - Reset pagination to the first page when sorting changes.
-      - Persist sort key and direction in URL query parameters when routing is available.
-  pagination:
-    notes:
-      - Use footer-summary, footer-page-size, footer-export, and footer-pagination slots for structured footer controls.
-      - footer-pagination should use UiTableFooterSection as the root wrapper.
-      - Use UiTableFooterButton for page numbers and previous/next arrow controls.
-      - Do not use regular UiButton for table footer pagination.
-      - Use a local inner flex group for page buttons, dividers, and arrow buttons when recreating the reference-table footer pattern.
-      - Use chevron icon assets for previous/next arrows instead of text glyphs such as < or >.
-      - Add scoped CSS for footer meta height, control-row background, pagination button size, active page state, arrow icon size, and vertical dividers.
-      - Persist page and page size in URL query parameters when routing is available.
-      - Reset page to 1 when filters or sorting change.
-
-ai_notes:
-  do:
-    - Read ../AI.md table-screen rules before generating complete table screens.
-    - Provide row-key for stable row identity.
-    - Put table filters above the table.
-    - Use structured footer slots for summary, page-size controls, export, and pagination.
-    - Compose footer controls with UiTableFooterSection and UiTableFooterButton.
-    - Copy the reference_footer_css pattern when building a realistic entity-list footer.
-    - Use UiTableSorter for sortable headers.
-  avoid:
-    - Do not hide table filters in page header actions.
-    - Do not use UiButton inside table footer pagination.
-    - Do not put pagination only in local state when the screen has routable result sets.
-    - Do not import table internals from host or src paths.
-
-behavior:
-  notes:
-    - Read key_props first to identify supported states and variants.
-    - Prefer controlled props and documented emits when synchronizing component state with screen logic.
-
-accessibility:
-  notes:
-    - Use meaningful column labels so screen-reader users can understand each cell in context.
-    - Use stable row keys so expanded rows and row-level state remain attached to the correct data item.
-    - Put interactive controls inside cells as real controls such as UiLink or UiButton, not plain clickable text.
-    - When rows are clickable, keep the primary row action visible as a link or button as well.