@simai-studio/view 0.0.0-stage → 1.1.0

package/dist/smart/view-table/static/default/loading.html

@@ -0,0 +1,180 @@
+<!-- sf-view-table, example «loading»: the static markup (standard simai.smart-component 1.3.8 §5.4). Generated by scripts/snapshot-first-paint.mjs from the built output; do not edit, run it again. -->
+<sf-view-table aria-label="Записи" data-state="loading" style="display: contents;">
+<section class="sf-table  min-w-0 flex flex-col gap-1/3 flex-1 min-h-0 " data-state="loading" aria-busy="true" data-sf-static>
+
+<div class="sf-table-toolbar flex gap-1/2 content-main-between flex-none" data-sf-filter-tags="0">
+<div class="sf-table-toolbar-start flex items-cross-center gap-1/3 flex-wrap min-w-0">
+
+
+
+</div>
+<div class="sf-table-toolbar-end flex items-cross-center gap-1/3 flex-wrap flex-auto min-w-0">
+<sf-input root-class="sf-search-input m-inline-start-auto" appearance="bordered" name="sf_table_search" hint-icon="search" size="1" value placeholder="Поиск" style="display: contents;">
+
+
+<label class="sf-input  sf-input--size-1 sf-input--bordered sf-search-input m-inline-start-auto flex flex-col" data-mask="false" data-mask-pattern data-mask-lazy data-mask-placeholder-char data-mask-options data-sf-input-bound="1" for="sf-view-table-loading-1" data-sf-static>
+
+<span class="sf-input-field items-cross-center transition flex">
+
+
+<input id="sf-view-table-loading-1" type="text" placeholder="Поиск" value data-mask="false" data-mask-pattern data-mask-lazy data-mask-placeholder-char data-mask-options>
+
+
+
+<sf-button-icon appearance="link" scheme="on-surface" size="1" icon="search" aria-label="Поиск" style="display: contents;">
+<button type="button" class="sf-icon-button sf-icon-button--size-1 sf-icon-button--icon sf-icon-button--link flex items-cross-center sf-icon-button--on-surface" aria-label="Поиск" data-sf-static>
+
+<sf-icon root-class="pointer-event-none" weight="400" aria-hidden="true" filled="false" icon="search" style="display: contents;"><i class="sf-icon sf-icon--weight-regular pointer-event-none" style="--sf-icon--grade:0;--sf-icon--optical-size:24" aria-hidden="true" data-sf-static>search</i></sf-icon>
+</button>
+</sf-button-icon>
+
+</span>
+
+</label>
+</sf-input>
+
+<div class="flex items-cross-center">
+<sf-button appearance="outline" scheme="on-surface" size="1" text="Создать" style="display: contents;">
+<button type="button" class="sf-button sf-button--size-1 sf-button--outline sf-button--on-surface flex items-cross-center" data-sf-static>
+
+
+<span class="sf-button-text-container text-center pointer-event-none flex-1">
+Создать
+</span>
+
+</button>
+</sf-button>
+
+</div>
+
+
+
+</div>
+</div>
+
+
+<div class="table-wrap min-w-0 max-w-full flex flex-col flex-1 min-h-0">
+<div class="sf-table-scroll min-h-0 min-w-0 overflow-auto flex-1 relative" data-sf-vertical-scroll="self">
+<div class="sf-table-resize-guide" aria-hidden="true" hidden></div>
+
+
+<table class="table border-separate border-spacing-0 min-w-full w-max table-fixed transition" aria-label="Записи" style="--sf-table-pin-select: 0px;">
+
+<colgroup>
+
+<col data-key="select" style="width: calc(var(--sf-text-height-1) + var(--sf-b6) + calc(var(--sf-px) * 2))">
+
+<col data-key="settings" style="width: calc(var(--sf-text-height-1) + (var(--sf-ui-1--space-y-tightness-default) * 2) + var(--sf-b6))" data-sf-pin-edge>
+
+<col data-key="actions" style="width: calc(3 * (var(--sf-text-height-1) + var(--sf-ui-1--space-y-tightness-default) * 2) + 2 * var(--sf-space-1\/3) + var(--sf-b6))">
+
+</colgroup>
+
+
+<thead class="sticky top-0 z-5">
+<tr>
+
+<th class="relative" data-key="select" data-label="select" data-sf-pinned style="position: sticky; inset-inline-start: var(--sf-table-pin-select, 0px); z-index: 2;">
+<sf-checkbox position="end" root-class="content-main-between" size="1" aria-label="Выбрать все строки" style="display: contents;">
+<label class="sf-checkbox sf-checkbox--size-1 flex content-main-between cursor-pointer" data-sf-static>
+
+
+
+<span class="sf-checkbox-box transition flex">
+<input type="checkbox" value="on" aria-label="Выбрать все строки">
+<sf-icon aria-hidden="true" icon style="display: contents;"><i class="sf-icon sf-icon--weight-regular" style="--sf-icon--grade:0;--sf-icon--optical-size:24" aria-hidden="true" data-sf-static></i></sf-icon>
+</span>
+</label>
+</sf-checkbox>
+</th>
+<th class="relative" data-key="settings" data-label="settings" data-sf-pinned style="position: sticky; inset-inline-start: var(--sf-table-pin-settings, 0px); z-index: 2;" data-sf-pin-edge>
+<sf-button-icon size="1" appearance="link" scheme="on-surface" icon="settings" aria-label="Настройки" value="settings" style="display: contents;">
+<button type="button" class="sf-icon-button sf-icon-button--size-1 sf-icon-button--icon sf-icon-button--link flex items-cross-center sf-icon-button--on-surface" aria-label="Настройки" value="settings" data-sf-static>
+
+<sf-icon root-class="pointer-event-none" weight="400" aria-hidden="true" filled="false" icon="settings" style="display: contents;"><i class="sf-icon sf-icon--weight-regular pointer-event-none" style="--sf-icon--grade:0;--sf-icon--optical-size:24" aria-hidden="true" data-sf-static>settings</i></sf-icon>
+</button>
+</sf-button-icon>
+</th>
+<th class="relative" data-key="actions" data-label="Действия">
+<span class="sf-table-visually-hidden">Действия</span>
+</th>
+</tr>
+</thead>
+
+
+<tbody data-state="loading" class="sf-table-skeleton">
+<tr aria-hidden="true">
+<td colspan="3">
+<div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-3/4"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-2/3"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-2/5"></div>
+</div></div></div>
+</td>
+</tr><tr aria-hidden="true">
+<td colspan="3">
+<div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-1/2"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-1/3"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-3/5"></div>
+</div></div></div>
+</td>
+</tr><tr aria-hidden="true">
+<td colspan="3">
+<div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-2/3"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-2/5"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-3/4"></div>
+</div></div></div>
+</td>
+</tr><tr aria-hidden="true">
+<td colspan="3">
+<div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-1/3"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-3/5"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-1/2"></div>
+</div></div></div>
+</td>
+</tr><tr aria-hidden="true">
+<td colspan="3">
+<div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-2/5"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-3/4"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-2/3"></div>
+</div></div></div>
+</td>
+</tr><tr aria-hidden="true">
+<td colspan="3">
+<div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-3/5"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-1/2"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-1/3"></div>
+</div></div></div>
+</td>
+</tr>
+</tbody>
+<tbody><tr><td class="sf-table-visually-hidden" colspan="3">
+<span role="status">Загрузка данных</span>
+</td></tr></tbody>
+
+</table>
+</div>
+
+
+</div>
+</section>
+
+
+</sf-view-table>

package/dist/smart/view-table/static/default/many.html

@@ -0,0 +1,180 @@
+<!-- sf-view-table, example «many»: the static markup (standard simai.smart-component 1.3.8 §5.4). Generated by scripts/snapshot-first-paint.mjs from the built output; do not edit, run it again. -->
+<sf-view-table aria-label="Записи" x-rows="1 000 generated rows, as probe.json p1 makes them" style="display: contents;">
+<section class="sf-table  min-w-0 flex flex-col gap-1/3 flex-1 min-h-0 " data-state="loading" aria-busy="true" data-sf-static>
+
+<div class="sf-table-toolbar flex gap-1/2 content-main-between flex-none" data-sf-filter-tags="0">
+<div class="sf-table-toolbar-start flex items-cross-center gap-1/3 flex-wrap min-w-0">
+
+
+
+</div>
+<div class="sf-table-toolbar-end flex items-cross-center gap-1/3 flex-wrap flex-auto min-w-0">
+<sf-input root-class="sf-search-input m-inline-start-auto" appearance="bordered" name="sf_table_search" hint-icon="search" size="1" value placeholder="Поиск" style="display: contents;">
+
+
+<label class="sf-input  sf-input--size-1 sf-input--bordered sf-search-input m-inline-start-auto flex flex-col" data-mask="false" data-mask-pattern data-mask-lazy data-mask-placeholder-char data-mask-options data-sf-input-bound="1" for="sf-view-table-many-1" data-sf-static>
+
+<span class="sf-input-field items-cross-center transition flex">
+
+
+<input id="sf-view-table-many-1" type="text" placeholder="Поиск" value data-mask="false" data-mask-pattern data-mask-lazy data-mask-placeholder-char data-mask-options>
+
+
+
+<sf-button-icon appearance="link" scheme="on-surface" size="1" icon="search" aria-label="Поиск" style="display: contents;">
+<button type="button" class="sf-icon-button sf-icon-button--size-1 sf-icon-button--icon sf-icon-button--link flex items-cross-center sf-icon-button--on-surface" aria-label="Поиск" data-sf-static>
+
+<sf-icon root-class="pointer-event-none" weight="400" aria-hidden="true" filled="false" icon="search" style="display: contents;"><i class="sf-icon sf-icon--weight-regular pointer-event-none" style="--sf-icon--grade:0;--sf-icon--optical-size:24" aria-hidden="true" data-sf-static>search</i></sf-icon>
+</button>
+</sf-button-icon>
+
+</span>
+
+</label>
+</sf-input>
+
+<div class="flex items-cross-center">
+<sf-button appearance="outline" scheme="on-surface" size="1" text="Создать" style="display: contents;">
+<button type="button" class="sf-button sf-button--size-1 sf-button--outline sf-button--on-surface flex items-cross-center" data-sf-static>
+
+
+<span class="sf-button-text-container text-center pointer-event-none flex-1">
+Создать
+</span>
+
+</button>
+</sf-button>
+
+</div>
+
+
+
+</div>
+</div>
+
+
+<div class="table-wrap min-w-0 max-w-full flex flex-col flex-1 min-h-0">
+<div class="sf-table-scroll min-h-0 min-w-0 overflow-auto flex-1 relative" data-sf-vertical-scroll="self">
+<div class="sf-table-resize-guide" aria-hidden="true" hidden></div>
+
+
+<table class="table border-separate border-spacing-0 min-w-full w-max table-fixed transition" aria-label="Записи" style="--sf-table-pin-select: 0px;">
+
+<colgroup>
+
+<col data-key="select" style="width: calc(var(--sf-text-height-1) + var(--sf-b6) + calc(var(--sf-px) * 2))">
+
+<col data-key="settings" style="width: calc(var(--sf-text-height-1) + (var(--sf-ui-1--space-y-tightness-default) * 2) + var(--sf-b6))" data-sf-pin-edge>
+
+<col data-key="actions" style="width: calc(3 * (var(--sf-text-height-1) + var(--sf-ui-1--space-y-tightness-default) * 2) + 2 * var(--sf-space-1\/3) + var(--sf-b6))">
+
+</colgroup>
+
+
+<thead class="sticky top-0 z-5">
+<tr>
+
+<th class="relative" data-key="select" data-label="select" data-sf-pinned style="position: sticky; inset-inline-start: var(--sf-table-pin-select, 0px); z-index: 2;">
+<sf-checkbox position="end" root-class="content-main-between" size="1" aria-label="Выбрать все строки" style="display: contents;">
+<label class="sf-checkbox sf-checkbox--size-1 flex content-main-between cursor-pointer" data-sf-static>
+
+
+
+<span class="sf-checkbox-box transition flex">
+<input type="checkbox" value="on" aria-label="Выбрать все строки">
+<sf-icon aria-hidden="true" icon style="display: contents;"><i class="sf-icon sf-icon--weight-regular" style="--sf-icon--grade:0;--sf-icon--optical-size:24" aria-hidden="true" data-sf-static></i></sf-icon>
+</span>
+</label>
+</sf-checkbox>
+</th>
+<th class="relative" data-key="settings" data-label="settings" data-sf-pinned style="position: sticky; inset-inline-start: var(--sf-table-pin-settings, 0px); z-index: 2;" data-sf-pin-edge>
+<sf-button-icon size="1" appearance="link" scheme="on-surface" icon="settings" aria-label="Настройки" value="settings" style="display: contents;">
+<button type="button" class="sf-icon-button sf-icon-button--size-1 sf-icon-button--icon sf-icon-button--link flex items-cross-center sf-icon-button--on-surface" aria-label="Настройки" value="settings" data-sf-static>
+
+<sf-icon root-class="pointer-event-none" weight="400" aria-hidden="true" filled="false" icon="settings" style="display: contents;"><i class="sf-icon sf-icon--weight-regular pointer-event-none" style="--sf-icon--grade:0;--sf-icon--optical-size:24" aria-hidden="true" data-sf-static>settings</i></sf-icon>
+</button>
+</sf-button-icon>
+</th>
+<th class="relative" data-key="actions" data-label="Действия">
+<span class="sf-table-visually-hidden">Действия</span>
+</th>
+</tr>
+</thead>
+
+
+<tbody data-state="loading" class="sf-table-skeleton">
+<tr aria-hidden="true">
+<td colspan="3">
+<div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-3/4"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-2/3"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-2/5"></div>
+</div></div></div>
+</td>
+</tr><tr aria-hidden="true">
+<td colspan="3">
+<div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-1/2"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-1/3"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-3/5"></div>
+</div></div></div>
+</td>
+</tr><tr aria-hidden="true">
+<td colspan="3">
+<div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-2/3"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-2/5"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-3/4"></div>
+</div></div></div>
+</td>
+</tr><tr aria-hidden="true">
+<td colspan="3">
+<div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-1/3"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-3/5"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-1/2"></div>
+</div></div></div>
+</td>
+</tr><tr aria-hidden="true">
+<td colspan="3">
+<div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-2/5"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-3/4"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-2/3"></div>
+</div></div></div>
+</td>
+</tr><tr aria-hidden="true">
+<td colspan="3">
+<div class="flex gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-3/5"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-1/2"></div>
+</div></div><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true">
+<div class="sf-skeleton-text sf-skeleton-text--size-1/2 w-1/3"></div>
+</div></div></div>
+</td>
+</tr>
+</tbody>
+<tbody><tr><td class="sf-table-visually-hidden" colspan="3">
+<span role="status">Загрузка данных</span>
+</td></tr></tbody>
+
+</table>
+</div>
+
+
+</div>
+</section>
+
+
+</sf-view-table>

package/dist/smart/view-table/static/default/reference.html

@@ -0,0 +1,136 @@
+<!-- sf-view-table, example «reference»: the static markup (standard simai.smart-component 1.3.8 §5.4). Generated by scripts/snapshot-first-paint.mjs from the built output; do not edit, run it again. -->
+<sf-view-table aria-label="Записи" table-settings-key="docs.records" style="display: contents;"><script type="application/json" data-sf-settings>{"columns":[{"key":"title","label":"Название","sortable":true},{"key":"status","label":"Статус"}],"rows":[{"id":"1","title":"Портал клиента","status":"Опубликовано","revision":"r1"},{"id":"2","title":"Каталог товаров","status":"Черновик","revision":"r1"}]}</script>
+<section class="sf-table  min-w-0 flex flex-col gap-1/3 flex-1 min-h-0 " data-state="populated" data-sf-static>
+
+<div class="sf-table-toolbar flex gap-1/2 content-main-between flex-none" data-sf-filter-tags="0">
+<div class="sf-table-toolbar-start flex items-cross-center gap-1/3 flex-wrap min-w-0">
+
+
+
+</div>
+<div class="sf-table-toolbar-end flex items-cross-center gap-1/3 flex-wrap flex-auto min-w-0">
+<sf-input root-class="sf-search-input m-inline-start-auto" appearance="bordered" name="sf_table_search" hint-icon="search" size="1" value placeholder="Поиск" style="display: contents;">
+
+
+<label class="sf-input  sf-input--size-1 sf-input--bordered sf-search-input m-inline-start-auto flex flex-col" data-mask="false" data-mask-pattern data-mask-lazy data-mask-placeholder-char data-mask-options data-sf-input-bound="1" for="sf-view-table-reference-1" data-sf-static>
+
+<span class="sf-input-field items-cross-center transition flex">
+
+
+<input id="sf-view-table-reference-1" type="text" placeholder="Поиск" value data-mask="false" data-mask-pattern data-mask-lazy data-mask-placeholder-char data-mask-options>
+
+
+
+<sf-button-icon appearance="link" scheme="on-surface" size="1" icon="search" aria-label="Поиск" style="display: contents;">
+<button type="button" class="sf-icon-button sf-icon-button--size-1 sf-icon-button--icon sf-icon-button--link flex items-cross-center sf-icon-button--on-surface" aria-label="Поиск" data-sf-static>
+
+<sf-icon root-class="pointer-event-none" weight="400" aria-hidden="true" filled="false" icon="search" style="display: contents;"><i class="sf-icon sf-icon--weight-regular pointer-event-none" style="--sf-icon--grade:0;--sf-icon--optical-size:24" aria-hidden="true" data-sf-static>search</i></sf-icon>
+</button>
+</sf-button-icon>
+
+</span>
+
+</label>
+</sf-input>
+
+<div class="flex items-cross-center">
+<sf-button appearance="outline" scheme="on-surface" size="1" text="Создать" style="display: contents;">
+<button type="button" class="sf-button sf-button--size-1 sf-button--outline sf-button--on-surface flex items-cross-center" data-sf-static>
+
+
+<span class="sf-button-text-container text-center pointer-event-none flex-1">
+Создать
+</span>
+
+</button>
+</sf-button>
+
+</div>
+
+
+
+</div>
+</div>
+
+
+<div class="table-wrap min-w-0 max-w-full flex flex-col flex-1 min-h-0">
+<div class="sf-table-scroll min-h-0 min-w-0 overflow-auto flex-1 relative" data-sf-vertical-scroll="self">
+<div class="sf-table-resize-guide" aria-hidden="true" hidden></div>
+
+
+<table class="table border-separate border-spacing-0 min-w-full sf-table-content-sized table-fixed transition" aria-label="Записи" style="--sf-table-pin-select: 0px;">
+
+<colgroup>
+
+<col data-key="select" style="width: calc(var(--sf-text-height-1) + var(--sf-b6) + calc(var(--sf-px) * 2))">
+
+<col data-key="settings" style="width: calc(var(--sf-text-height-1) + (var(--sf-ui-1--space-y-tightness-default) * 2) + var(--sf-b6))" data-sf-pin-edge>
+
+<col data-key="title">
+
+<col data-key="status">
+
+<col data-key="actions" style="width: calc(3 * (var(--sf-text-height-1) + var(--sf-ui-1--space-y-tightness-default) * 2) + 2 * var(--sf-space-1\/3) + var(--sf-b6))">
+
+</colgroup>
+
+
+<thead class="sticky top-0 z-5">
+<tr>
+
+<th class="relative" data-key="select" data-label="select" data-sf-pinned style="position: sticky; inset-inline-start: var(--sf-table-pin-select, 0px); z-index: 2;">
+<sf-checkbox position="end" root-class="content-main-between" size="1" aria-label="Выбрать все строки" style="display: contents;">
+<label class="sf-checkbox sf-checkbox--size-1 flex content-main-between cursor-pointer" data-sf-static>
+
+
+
+<span class="sf-checkbox-box transition flex">
+<input type="checkbox" value="on" aria-label="Выбрать все строки">
+<sf-icon aria-hidden="true" icon style="display: contents;"><i class="sf-icon sf-icon--weight-regular" style="--sf-icon--grade:0;--sf-icon--optical-size:24" aria-hidden="true" data-sf-static></i></sf-icon>
+</span>
+</label>
+</sf-checkbox>
+</th>
+<th class="relative" data-key="settings" data-label="settings" data-sf-pinned style="position: sticky; inset-inline-start: var(--sf-table-pin-settings, 0px); z-index: 2;" data-sf-pin-edge>
+<sf-button-icon size="1" appearance="link" scheme="on-surface" icon="settings" aria-label="Настройки" value="settings" style="display: contents;">
+<button type="button" class="sf-icon-button sf-icon-button--size-1 sf-icon-button--icon sf-icon-button--link flex items-cross-center sf-icon-button--on-surface" aria-label="Настройки" value="settings" data-sf-static>
+
+<sf-icon root-class="pointer-event-none" weight="400" aria-hidden="true" filled="false" icon="settings" style="display: contents;"><i class="sf-icon sf-icon--weight-regular pointer-event-none" style="--sf-icon--grade:0;--sf-icon--optical-size:24" aria-hidden="true" data-sf-static>settings</i></sf-icon>
+</button>
+</sf-button-icon>
+</th>
+<th class="relative" data-key="title" data-label="Название" aria-sort="none">
+<div class="sidebar-resizer flex items-cross-center h-full select-none">
+
+<button type="button" class="sf-table-sort-button flex items-cross-center gap-1/4 min-w-0">
+<span class="truncate">Название</span>
+<i class="sf-icon sf-table-sort-icon" aria-hidden="true">unfold_more</i>
+</button>
+
+
+<button type="button" role="separator" aria-orientation="vertical" class="sf-table-column-resizer" aria-keyshortcuts="ArrowLeft ArrowRight Home End Enter" id="sf-view-table-reference-2" data-sf-column-resizer="title" aria-label="Изменить ширину столбца: Название"></button>
+</div>
+</th>
+<th class="relative" data-key="status" data-label="Статус">
+<div class="sidebar-resizer flex items-cross-center h-full select-none">
+Статус
+
+<button type="button" role="separator" aria-orientation="vertical" class="sf-table-column-resizer" aria-keyshortcuts="ArrowLeft ArrowRight Home End Enter" id="sf-view-table-reference-3" data-sf-column-resizer="status" aria-label="Изменить ширину столбца: Статус"></button>
+</div>
+</th>
+<th class="relative" data-key="actions" data-label="Действия">
+<span class="sf-table-visually-hidden">Действия</span>
+</th>
+</tr>
+</thead>
+
+<tbody><tr tabindex="-1" data-row-id="1"><td data-key="select" data-item="1_select" data-sf-pinned style="position: sticky; inset-inline-start: var(--sf-table-pin-select, 0px); z-index: 2;"><label class="sf-checkbox sf-checkbox--size-1 flex content-main-between cursor-pointer" data-sf-checkbox-bound="1"><span class="sf-checkbox-box transition flex"><input type="checkbox" data-sf-row-box value="1" aria-label="Выбрать строку: Портал клиента"></span></label></td><td data-key="settings" data-item="1_settings" data-sf-pinned style="position: sticky; inset-inline-start: var(--sf-table-pin-settings, 0px); z-index: 2;" data-sf-pin-edge><button type="button" value="menu" data-sf-row-menu class="sf-icon-button sf-icon-button--size-1 sf-icon-button--icon sf-icon-button--link flex items-cross-center sf-icon-button--on-surface" aria-label="Меню"><i class="sf-icon sf-icon--weight-regular pointer-event-none" aria-hidden="true">menu</i></button></td><td data-key="title" data-item="1_title"><span class="sf-table-cell-text">Портал клиента</span></td><td data-key="status" data-item="1_status"><span class="sf-table-cell-text">Опубликовано</span></td><td data-key="actions" data-item="1_actions"><div class="sf-table-row-actions" data-row-actions="idle"></div></td></tr><tr tabindex="-1" data-row-id="2"><td data-key="select" data-item="2_select" data-sf-pinned style="position: sticky; inset-inline-start: var(--sf-table-pin-select, 0px); z-index: 2;"><label class="sf-checkbox sf-checkbox--size-1 flex content-main-between cursor-pointer" data-sf-checkbox-bound="1"><span class="sf-checkbox-box transition flex"><input type="checkbox" data-sf-row-box value="2" aria-label="Выбрать строку: Каталог товаров"></span></label></td><td data-key="settings" data-item="2_settings" data-sf-pinned style="position: sticky; inset-inline-start: var(--sf-table-pin-settings, 0px); z-index: 2;" data-sf-pin-edge><button type="button" value="menu" data-sf-row-menu class="sf-icon-button sf-icon-button--size-1 sf-icon-button--icon sf-icon-button--link flex items-cross-center sf-icon-button--on-surface" aria-label="Меню"><i class="sf-icon sf-icon--weight-regular pointer-event-none" aria-hidden="true">menu</i></button></td><td data-key="title" data-item="2_title"><span class="sf-table-cell-text">Каталог товаров</span></td><td data-key="status" data-item="2_status"><span class="sf-table-cell-text">Черновик</span></td><td data-key="actions" data-item="2_actions"><div class="sf-table-row-actions" data-row-actions="idle"></div></td></tr></tbody>
+</table>
+</div>
+
+
+</div>
+</section>
+
+
+</sf-view-table>