@simai-studio/view 0.0.0-stage → 1.0.0

package/dist/smart/view-table/lang/en.json

@@ -0,0 +1,132 @@
+{
+  "title": "Table",
+  "events": {
+    "column-settings-reset": {
+      "label": "Column settings reset"
+    },
+    "filter-change": {
+      "label": "Filter changed"
+    },
+    "search-change": {
+      "label": "Search changed"
+    },
+    "sort-change": {
+      "label": "Order changed"
+    },
+    "template-delete": {
+      "label": "Template deleted"
+    },
+    "template-save": {
+      "label": "Template saved"
+    },
+    "template-select": {
+      "label": "Template chosen"
+    },
+    "toolbar-action": {
+      "label": "Toolbar action"
+    },
+    "reference-open": {
+      "label": "Open the linked record"
+    },
+    "rows-drag": {
+      "label": "Rows dragged"
+    },
+    "cell-set": {
+      "label": "Cell value changed"
+    },
+    "view-change": {
+      "label": "Table view changed"
+    },
+    "window": {
+      "label": "Rows shown"
+    }
+  },
+  "runtime": {
+    "actions-column-label": "Actions",
+    "apply-text": "Apply",
+    "clear-text": "Clear",
+    "close-text": "Close",
+    "column-move-label": "Move the column",
+    "column-search-empty-text": "No field matches",
+    "column-search-placeholder": "Search the fields",
+    "context-create-options-label": "Ways to create",
+    "context-field-filter-label": "Filtering by",
+    "context-filter-settings-label": "Filter settings",
+    "context-row-actions-label": "Row actions",
+    "context-save-template-label": "Saving the filter as a template",
+    "context-table-settings-label": "Table settings",
+    "context-template-actions-label": "Template actions",
+    "context-view-actions-label": "View actions",
+    "create-options-label": "Ways to create",
+    "create-text": "Create",
+    "default-template-text": "Default",
+    "delete-action-text": "Delete",
+    "edit-action-text": "Edit",
+    "empty-text": "No data",
+    "error-text": "The data could not be loaded",
+    "field-word-text": "field",
+    "fields-tab-text": "Fields",
+    "filter-apply-text": "Apply",
+    "filter-settings-label": "Filter settings",
+    "filter-text": "Filter",
+    "list-filter-label": "Filter, {count} active",
+    "loading-text": "Loading",
+    "make-default-label": "Make it the default",
+    "menu-label": "Menu",
+    "operator-any": "Any date",
+    "operator-between": "Range",
+    "operator-contains": "Contains",
+    "operator-eq": "Exactly",
+    "operator-gt": "Greater than",
+    "operator-gte": "Greater or equal",
+    "operator-in": "In the list",
+    "operator-lt": "Less than",
+    "operator-lte": "Less or equal",
+    "operator-month": "This month",
+    "operator-starts-with": "Starts with",
+    "operator-today": "Today",
+    "operator-week": "This week",
+    "pin-column-label": "Pin the column",
+    "rename-text": "Rename",
+    "reset-both-text": "Reset the search and filters",
+    "reset-filters-text": "Reset the filters",
+    "reset-search-text": "Clear the search",
+    "reset-text": "Reset",
+    "restore-text": "Restore",
+    "retry-text": "Try again",
+    "row-actions-label": "Row actions",
+    "save-for-everyone-label": "Save for everyone",
+    "save-template-label": "Save the filter as a template",
+    "search-placeholder": "Search",
+    "select-all-label": "Select every row",
+    "select-row-label": "Select the row",
+    "settings-column-label": "Settings",
+    "settings-fields-tab": "Fields",
+    "settings-view-tab": "View",
+    "sort-ascending": "ascending",
+    "sort-descending": "descending",
+    "sort-label": "Sort",
+    "sort-none": "As the host orders it",
+    "template-actions-label": "Template actions",
+    "template-move-label": "Move the template",
+    "template-name-placeholder": "Name",
+    "template-pin-label": "Keep the template at the top",
+    "templates-tab-text": "Templates",
+    "tree-collapse": "Collapse",
+    "tree-expand": "Expand",
+    "tree-more": "Show more",
+    "unpin-column-label": "Unpin the column",
+    "untitled-template-text": "All records",
+    "view-action-text": "View",
+    "view-density": "Rows",
+    "view-density-compact": "Compact",
+    "view-density-normal": "Normal",
+    "view-density-spacious": "Spacious",
+    "view-everywhere": "For all my tables",
+    "view-lines": "Lines between columns",
+    "view-reset": "Reset the view",
+    "view-single-line": "Text on one line",
+    "view-sticky-head": "Keep the filter and the head in view",
+    "view-stripes": "Alternate rows"
+  }
+}

package/dist/smart/view-table/lang/ru.json

@@ -0,0 +1,132 @@
+{
+  "title": "Таблица",
+  "events": {
+    "column-settings-reset": {
+      "label": "Настройки столбцов сброшены"
+    },
+    "filter-change": {
+      "label": "Фильтр изменён"
+    },
+    "search-change": {
+      "label": "Поиск изменён"
+    },
+    "sort-change": {
+      "label": "Порядок изменён"
+    },
+    "template-delete": {
+      "label": "Шаблон удалён"
+    },
+    "template-save": {
+      "label": "Шаблон сохранён"
+    },
+    "template-select": {
+      "label": "Шаблон выбран"
+    },
+    "toolbar-action": {
+      "label": "Действие панели"
+    },
+    "reference-open": {
+      "label": "Открыть связанную запись"
+    },
+    "rows-drag": {
+      "label": "Строки перетащены"
+    },
+    "cell-set": {
+      "label": "Значение в ячейке изменено"
+    },
+    "view-change": {
+      "label": "Вид таблицы изменён"
+    },
+    "window": {
+      "label": "Показаны строки"
+    }
+  },
+  "runtime": {
+    "actions-column-label": "Действия",
+    "apply-text": "Применить",
+    "clear-text": "Очистить",
+    "close-text": "Закрыть",
+    "column-move-label": "Переместить столбец",
+    "column-search-empty-text": "Поля не найдены",
+    "column-search-placeholder": "Поиск по полям",
+    "context-create-options-label": "Варианты создания",
+    "context-field-filter-label": "Настройка фильтра",
+    "context-filter-settings-label": "Настройки фильтра",
+    "context-row-actions-label": "Действия со строкой",
+    "context-save-template-label": "Сохранение шаблона фильтра",
+    "context-table-settings-label": "Настройки таблицы",
+    "context-template-actions-label": "Действия с шаблоном",
+    "context-view-actions-label": "Действия с представлением",
+    "create-options-label": "Варианты создания",
+    "create-text": "Создать",
+    "default-template-text": "По умолчанию",
+    "delete-action-text": "Удалить",
+    "edit-action-text": "Редактировать",
+    "empty-text": "Нет данных",
+    "error-text": "Не удалось загрузить данные",
+    "field-word-text": "поле",
+    "fields-tab-text": "Поля",
+    "filter-apply-text": "Применить",
+    "filter-settings-label": "Настройки фильтра",
+    "filter-text": "Фильтр",
+    "list-filter-label": "Фильтр, активных условий: {count}",
+    "loading-text": "Загрузка данных",
+    "make-default-label": "Сделать по умолчанию",
+    "menu-label": "Меню",
+    "operator-any": "Любая дата",
+    "operator-between": "Диапазон",
+    "operator-contains": "Содержит",
+    "operator-eq": "Точно",
+    "operator-gt": "Больше чем",
+    "operator-gte": "Больше или равно",
+    "operator-in": "В списке",
+    "operator-lt": "Меньше чем",
+    "operator-lte": "Меньше или равно",
+    "operator-month": "Месяц",
+    "operator-starts-with": "Начинается с",
+    "operator-today": "Сегодня",
+    "operator-week": "Неделя",
+    "pin-column-label": "Закрепить столбец",
+    "rename-text": "Переименовать",
+    "reset-both-text": "Сбросить поиск и фильтры",
+    "reset-filters-text": "Сбросить фильтры",
+    "reset-search-text": "Очистить поиск",
+    "reset-text": "Сбросить",
+    "restore-text": "Восстановить",
+    "retry-text": "Повторить",
+    "row-actions-label": "Действия со строкой",
+    "save-for-everyone-label": "Сохранить для всех",
+    "save-template-label": "Сохранение шаблона фильтра",
+    "search-placeholder": "Поиск",
+    "select-all-label": "Выбрать все строки",
+    "select-row-label": "Выбрать строку",
+    "settings-column-label": "Настройки",
+    "settings-fields-tab": "Поля",
+    "settings-view-tab": "Вид",
+    "sort-ascending": "по возрастанию",
+    "sort-descending": "по убыванию",
+    "sort-label": "Сортировка",
+    "sort-none": "Как задано источником",
+    "template-actions-label": "Действия с шаблоном",
+    "template-move-label": "Переместить шаблон",
+    "template-name-placeholder": "Название",
+    "template-pin-label": "Закрепить шаблон сверху",
+    "templates-tab-text": "Шаблоны",
+    "tree-collapse": "Свернуть",
+    "tree-expand": "Развернуть",
+    "tree-more": "Показать ещё",
+    "unpin-column-label": "Открепить столбец",
+    "untitled-template-text": "Все записи",
+    "view-action-text": "Посмотреть",
+    "view-density": "Строки",
+    "view-density-compact": "Компактно",
+    "view-density-normal": "Обычно",
+    "view-density-spacious": "Просторно",
+    "view-everywhere": "Для всех моих таблиц",
+    "view-lines": "Линии между столбцами",
+    "view-reset": "Сбросить вид",
+    "view-single-line": "Текст в одну строку",
+    "view-sticky-head": "Закреплять фильтр и шапку",
+    "view-stripes": "Чередовать строки"
+  }
+}

package/dist/smart/view-table/probe.json

@@ -0,0 +1,275 @@
+{
+  "component": "sf-view-table",
+  "probe": "sf-table against component.json (standard simai.smart-component 1.3.8 §12, gate 20; §18.4 many entries)",
+  "format": "stands/15-scenarios (A4 modal: a page, probes in steps); the runner is the SIMAI Framework's tests/browser/manifest-probes.browser.mjs through tests/browser/package-manifest-probes.browser.mjs",
+  "page": {
+    "lang": "ru",
+    "body": [
+      "<main style=\"width: 1100px\">",
+      "  <sf-view-table id=\"t\" aria-label=\"Записи\" table-settings-key=\"probe.table\"></sf-view-table>",
+      "</main>"
+    ]
+  },
+  "probes": [
+    {
+      "id": "p1-window",
+      "title": "1 000 rows: only the rows in view and a margin are drawn, at most thirty nodes a row; a scroll moves the window and sf-table-window reports it",
+      "covers": "§18.4 window, gate 17 nodes per entry, events.window",
+      "steps": [
+        {
+          "script": "(() => { const t = document.getElementById('t'); t.setColumns([{key: 'title', label: 'Название', sortable: true}, {key: 'status', label: 'Статус'}, {key: 'amount', label: 'Сумма', type: 'number'}]); t.setRows(Array.from({length: 1000}, (_, i) => ({id: String(i + 1), title: 'Запись ' + (i + 1), status: ['active', 'done'][i % 2], amount: i * 3, revision: 'r1', actions: ['view', 'publish']}))); return true; })()",
+          "wait": 900,
+          "check": "(() => { const t = document.getElementById('t'); const drawn = t.querySelectorAll('tbody tr[data-row-id]').length; const body = t.querySelector('tbody'); let nodes = 0; const w = document.createTreeWalker(body, NodeFilter.SHOW_ALL); while (w.nextNode()) nodes++; return drawn > 10 && drawn <= 100 && t.querySelector('table').getAttribute('aria-rowcount') === '1001' && nodes / drawn <= 30; })()"
+        },
+        {
+          "script": "(() => { const t = document.getElementById('t'); window.__windows = []; t.addEventListener('sf-view-table-window', (event) => window.__windows.push(event.detail)); const row = t.querySelector('tbody tr[data-row-id]').getBoundingClientRect().height; window.scrollTo({top: t.querySelector('tbody').getBoundingClientRect().top + window.scrollY + row * 500, behavior: 'instant'}); return true; })()",
+          "wait": 800,
+          "check": "(() => { const t = document.getElementById('t'); const seen = [...t.querySelectorAll('tbody tr[data-row-id]')].map((row) => Number(row.dataset.rowId)); const last = window.__windows.at(-1); return window.__windows.length >= 1 && last.first > 300 && !seen.includes(1) && seen.length <= 100 && seen.every((id) => id - 1 >= last.first && id - 1 <= last.last); })()"
+        }
+      ]
+    },
+    {
+      "id": "p2-select",
+      "title": "a row's box: sf-table-select {ids} once, the composition port's sf-port-output once after it with its old detail, noted with its dates",
+      "covers": "events.select, values.selection, aliases sf-port-output, §18.4 a box is class markup",
+      "steps": [
+        {
+          "script": "(() => { const t = document.getElementById('t'); t.setColumns([{key: 'title', label: 'Название', sortable: true}, {key: 'status', label: 'Статус'}, {key: 'amount', label: 'Сумма', type: 'number'}]); t.setRows(Array.from({length: 3}, (_, i) => ({id: String(i + 1), title: 'Запись ' + (i + 1), status: ['active', 'done'][i % 2], amount: i * 3, revision: 'r1', actions: ['view', 'publish']}))); return true; })()",
+          "wait": 700,
+          "check": "!document.querySelector('#t tbody sf-checkbox') && Boolean(document.querySelector('#t tbody tr[data-row-id=\"2\"] input[data-sf-row-box]'))"
+        },
+        {
+          "user": "click:#t tbody tr[data-row-id=\"2\"] input[data-sf-row-box]",
+          "expect": {
+            "events": [
+              {
+                "name": "sf-view-table-select",
+                "count": 1,
+                "detail": {
+                  "ids": [
+                    "2"
+                  ]
+                }
+              },
+              {
+                "name": "sf-port-output",
+                "count": 1,
+                "detail": {
+                  "port": "selection",
+                  "value": [
+                    "2"
+                  ]
+                }
+              }
+            ],
+            "values": {
+              "#t.selection": [
+                "2"
+              ]
+            },
+            "journal": [
+              {
+                "from": "sf-port-output",
+                "to": "sf-table-select",
+                "since": "2026-10-27",
+                "remove_after": "2026-12-01"
+              }
+            ]
+          },
+          "check": "document.querySelector('#t tbody tr[data-row-id=\"2\"]').hasAttribute('data-selected')"
+        }
+      ]
+    },
+    {
+      "id": "p3-apply",
+      "title": "request-action-intent answers applied and sends sf-table-apply {action, scope: entry, ids, revisions}; sf-table-action-intent follows with {action_id, record_ids}",
+      "covers": "actions.request-action-intent emits apply, aliases sf-table-action-intent",
+      "steps": [
+        {
+          "script": "(() => { const t = document.getElementById('t'); t.setColumns([{key: 'title', label: 'Название', sortable: true}, {key: 'status', label: 'Статус'}, {key: 'amount', label: 'Сумма', type: 'number'}]); t.setRows(Array.from({length: 3}, (_, i) => ({id: String(i + 1), title: 'Запись ' + (i + 1), status: ['active', 'done'][i % 2], amount: i * 3, revision: 'r1', actions: ['view', 'publish']}))); return true; })()",
+          "wait": 700
+        },
+        {
+          "action": {
+            "name": "request-action-intent",
+            "with": {
+              "action-id": "publish",
+              "record-ids": [
+                "3"
+              ]
+            }
+          },
+          "target": "#t",
+          "expect": {
+            "returns": {
+              "outcome": "applied"
+            },
+            "events": [
+              {
+                "name": "sf-view-table-apply",
+                "count": 1,
+                "detail": {
+                  "action": "publish",
+                  "scope": "entry",
+                  "ids": [
+                    "3"
+                  ],
+                  "revisions": {
+                    "3": "r1"
+                  }
+                }
+              },
+              {
+                "name": "sf-table-action-intent",
+                "count": 1,
+                "detail": {
+                  "action_id": "publish",
+                  "record_ids": [
+                    "3"
+                  ]
+                }
+              }
+            ],
+            "journal": [
+              {
+                "from": "sf-table-action-intent",
+                "to": "sf-table-apply"
+              }
+            ]
+          }
+        }
+      ]
+    },
+    {
+      "id": "p4-keys",
+      "title": "the arrows, Home and End move between rows; End reaches the last of 1 000 rows, which is drawn first",
+      "covers": "keyboard.row ArrowDown focus:next, ArrowUp focus:prev, Home focus:first, End focus:last",
+      "steps": [
+        {
+          "script": "(() => { const t = document.getElementById('t'); t.setColumns([{key: 'title', label: 'Название', sortable: true}, {key: 'status', label: 'Статус'}, {key: 'amount', label: 'Сумма', type: 'number'}]); t.setRows(Array.from({length: 1000}, (_, i) => ({id: String(i + 1), title: 'Запись ' + (i + 1), status: ['active', 'done'][i % 2], amount: i * 3, revision: 'r1', actions: ['view', 'publish']}))); return true; })()",
+          "wait": 900
+        },
+        {
+          "script": "(document.querySelector('#t tbody tr[data-row-id=\"1\"]').focus(), true)",
+          "wait": 100
+        },
+        {
+          "user": "keyboard:ArrowDown",
+          "wait": 200,
+          "check": "document.activeElement?.dataset?.rowId === '2'"
+        },
+        {
+          "user": "keyboard:ArrowUp",
+          "wait": 200,
+          "check": "document.activeElement?.dataset?.rowId === '1'"
+        },
+        {
+          "user": "keyboard:End",
+          "wait": 900,
+          "check": "document.activeElement?.dataset?.rowId === '1000' && document.activeElement.getAttribute('aria-rowindex') === '1001'"
+        },
+        {
+          "user": "keyboard:Home",
+          "wait": 900,
+          "check": "document.activeElement?.dataset?.rowId === '1'"
+        }
+      ]
+    },
+    {
+      "id": "p5-search",
+      "title": "a cleared search is sf-table-search-change {search}; onSearchEnd follows once with the text as its detail, noted",
+      "covers": "events.search-change, aliases onSearchEnd (simai/ui-pro#1)",
+      "steps": [
+        {
+          "script": "(() => { const t = document.getElementById('t'); t.setColumns([{key: 'title', label: 'Название', sortable: true}, {key: 'status', label: 'Статус'}, {key: 'amount', label: 'Сумма', type: 'number'}]); t.setRows(Array.from({length: 3}, (_, i) => ({id: String(i + 1), title: 'Запись ' + (i + 1), status: ['active', 'done'][i % 2], amount: i * 3, revision: 'r1', actions: ['view', 'publish']}))); return true; })()",
+          "wait": 700
+        },
+        {
+          "script": "(document.getElementById('t').resetQuery('search'), true)",
+          "expect": {
+            "events": [
+              {
+                "name": "sf-view-table-search-change",
+                "count": 1,
+                "detail": {
+                  "search": ""
+                }
+              },
+              {
+                "name": "onSearchEnd",
+                "count": 1
+              }
+            ],
+            "journal": [
+              {
+                "from": "onSearchEnd",
+                "to": "sf-table-search-change"
+              }
+            ]
+          },
+          "check": "window.__heard.find((one) => one.name === 'onSearchEnd')?.detail === ''"
+        }
+      ]
+    },
+    {
+      "id": "p6-current",
+      "title": "current marks the open row with aria-current, sends nothing and moves no focus",
+      "covers": "settings.current",
+      "steps": [
+        {
+          "script": "(() => { const t = document.getElementById('t'); t.setColumns([{key: 'title', label: 'Название', sortable: true}, {key: 'status', label: 'Статус'}, {key: 'amount', label: 'Сумма', type: 'number'}]); t.setRows(Array.from({length: 3}, (_, i) => ({id: String(i + 1), title: 'Запись ' + (i + 1), status: ['active', 'done'][i % 2], amount: i * 3, revision: 'r1', actions: ['view', 'publish']}))); return true; })()",
+          "wait": 700
+        },
+        {
+          "script": "(document.getElementById('t').current = '2', true)",
+          "wait": 300,
+          "expect": {
+            "events": [
+              {
+                "name": "sf-view-table-select",
+                "count": 0
+              },
+              {
+                "name": "sf-view-table-apply",
+                "count": 0
+              }
+            ]
+          },
+          "check": "document.querySelector('#t tbody tr[data-row-id=\"2\"]').getAttribute('aria-current') === 'true' && document.getElementById('t').getAttribute('current') === '2' && !document.querySelector('#t tbody tr[data-row-id=\"1\"]').hasAttribute('aria-current')"
+        }
+      ]
+    },
+    {
+      "id": "p7-one-row",
+      "title": "one row changed is drawn again in place: the same element, the new text",
+      "covers": "§18.4 one entry redrawn in place, gate 17",
+      "steps": [
+        {
+          "script": "(() => { const t = document.getElementById('t'); t.setColumns([{key: 'title', label: 'Название', sortable: true}, {key: 'status', label: 'Статус'}, {key: 'amount', label: 'Сумма', type: 'number'}]); t.setRows(Array.from({length: 1000}, (_, i) => ({id: String(i + 1), title: 'Запись ' + (i + 1), status: ['active', 'done'][i % 2], amount: i * 3, revision: 'r1', actions: ['view', 'publish']}))); return true; })()",
+          "wait": 900
+        },
+        {
+          "script": "(() => { window.__row = document.querySelector('#t tbody tr[data-row-id=\"3\"]'); document.getElementById('t').updateRowByKey('id', '3', {title: 'Изменено', revision: 'r2'}); return true; })()",
+          "wait": 300,
+          "check": "document.querySelector('#t tbody tr[data-row-id=\"3\"]') === window.__row && window.__row.textContent.includes('Изменено')"
+        }
+      ]
+    },
+    {
+      "id": "p8-template-name",
+      "title": "the filter window's template row says its name: sf-radio is fetched when the window opens, so the row is not a handle and a menu with nothing between them",
+      "covers": "relations cl-radio (lazy), §18.4 portal",
+      "steps": [
+        {
+          "script": "(() => { const t = document.getElementById('t'); t.setColumns([{key: 'title', label: 'Название', filter: {enabled: true}}, {key: 'status', label: 'Статус'}]); t.setRows(Array.from({length: 12}, (_, i) => ({id: String(i + 1), title: 'Запись ' + (i + 1), status: 'active'}))); t.templates = [{key: 'default', label: 'Все записи', default: true}]; return true; })()",
+          "wait": 700
+        },
+        {
+          "script": "(() => { const t = document.getElementById('t'); const anchor = t.querySelector('button, [role=\"button\"]') || t; t.openContextMenu({currentTarget: anchor, target: anchor, composedPath: () => [anchor], preventDefault() {}, stopPropagation() {}}, {menu: 'filter-settings'}); return true; })()",
+          "wait": 1500,
+          "check": "(() => { const row = document.querySelector('[data-filter-template-key]'); if (!row) return false; const radio = row.querySelector('sf-radio'); if (!radio || !customElements.get('sf-radio')) return false; const drawn = radio.querySelector('.sf-radio-button, label'); const box = drawn?.getBoundingClientRect(); return Boolean(box) && box.width > 24 && box.height > 8 && row.textContent.includes('Все записи'); })()"
+        }
+      ]
+    }
+  ]
+}