@simai-studio/view 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,141 @@
+<!-- sf-view-table, example «current»: 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="Записи" current="2" style="display: contents;"><script type="application/json" data-sf-settings>{"columns":[{"key":"title","label":"Название"}],"rows":[{"id":"1","title":"Первая"},{"id":"2","title":"Вторая"}]}</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-current-1" data-sf-static>
+
+<span class="sf-input-field items-cross-center transition flex">
+
+
+<input id="sf-view-table-current-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="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="Название">
+<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-current-2" data-sf-column-resizer="title" 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="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" data-current aria-current="true"><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="actions" data-item="2_actions">
+<div class="sf-table-row-actions flex items-cross-center gap-1/3">
+<sf-button-icon name="Редактировать" id="edit" kind="icon" size="1" appearance="link" scheme="on-surface" icon="edit" aria-label="Редактировать" value="edit" 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="Редактировать" name="Редактировать" value="edit" data-sf-static>
+
+<sf-icon root-class="pointer-event-none" weight="400" aria-hidden="true" filled="false" icon="edit" 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>edit</i></sf-icon>
+</button>
+</sf-button-icon><sf-button-icon name="Посмотреть" id="view" kind="icon" size="1" appearance="link" scheme="on-surface" icon="visibility" aria-label="Посмотреть" value="view" 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="Посмотреть" name="Посмотреть" value="view" data-sf-static>
+
+<sf-icon root-class="pointer-event-none" weight="400" aria-hidden="true" filled="false" icon="visibility" 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>visibility</i></sf-icon>
+</button>
+</sf-button-icon><sf-button-icon name="Удалить" id="delete" danger kind="icon" size="1" appearance="link" scheme="on-surface" status="error" icon="delete" aria-label="Удалить" value="delete" 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--error" aria-label="Удалить" name="Удалить" danger value="delete" data-sf-static>
+
+<sf-icon root-class="pointer-event-none" weight="400" aria-hidden="true" filled="false" icon="delete" 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>delete</i></sf-icon>
+</button>
+</sf-button-icon>
+</div>
+</td></tr></tbody>
+</table>
+</div>
+
+
+</div>
+</section>
+
+
+</sf-view-table>

package/dist/smart/view-table/static/default/current.skeleton.html

@@ -0,0 +1,141 @@
+<!-- sf-view-table, example «current»: the skeleton, derived (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="Записи" current="2" style="display: contents;" data-sf-first-paint="skeleton" aria-busy="true"><script type="application/json" data-sf-settings>{"columns":[{"key":"title","label":"Название"}]}</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 aria-hidden="true">
+
+<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-current-1" data-sf-static aria-hidden="true">
+
+<span class="sf-input-field items-cross-center transition flex">
+
+
+<input id="sf-view-table-current-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 aria-hidden="true">
+
+<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 aria-hidden="true">
+
+
+<span class="sf-button-text-container text-center pointer-event-none flex-1">
+<span class="sf-first-paint-bar" aria-hidden="true">Создать</span>
+</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="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 aria-hidden="true">
+
+
+
+<span class="sf-checkbox-box transition flex">
+<input type="checkbox" value="" 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 aria-hidden="true">
+
+<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="Название">
+<div class="sidebar-resizer flex items-cross-center h-full select-none">
+<span class="sf-first-paint-bar" aria-hidden="true">Название</span>
+
+<button type="button" role="separator" aria-orientation="vertical" class="sf-table-column-resizer" aria-keyshortcuts="ArrowLeft ArrowRight Home End Enter" id="sf-view-table-current-2" data-sf-column-resizer="title" aria-label="Изменить ширину столбца: Название"></button>
+</div>
+</th>
+<th class="relative" data-key="actions" data-label="Действия">
+<span class="sf-table-visually-hidden"><span class="sf-first-paint-bar" aria-hidden="true">Действия</span></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="" 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 class="sf-first-paint-bar" aria-hidden="true">Первая</span></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" data-current aria-current="true"><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="" 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 class="sf-first-paint-bar" aria-hidden="true">Вторая</span></span></td><td data-key="actions" data-item="2_actions">
+<div class="sf-table-row-actions flex items-cross-center gap-1/3">
+<sf-button-icon name="Редактировать" id="edit" kind="icon" size="1" appearance="link" scheme="on-surface" icon="edit" aria-label="Редактировать" value="edit" 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="Редактировать" name="Редактировать" value="edit" data-sf-static aria-hidden="true">
+
+<sf-icon root-class="pointer-event-none" weight="400" aria-hidden="true" filled="false" icon="edit" 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>edit</i></sf-icon>
+</button>
+</sf-button-icon><sf-button-icon name="Посмотреть" id="view" kind="icon" size="1" appearance="link" scheme="on-surface" icon="visibility" aria-label="Посмотреть" value="view" 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="Посмотреть" name="Посмотреть" value="view" data-sf-static aria-hidden="true">
+
+<sf-icon root-class="pointer-event-none" weight="400" aria-hidden="true" filled="false" icon="visibility" 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>visibility</i></sf-icon>
+</button>
+</sf-button-icon><sf-button-icon name="Удалить" id="delete" danger kind="icon" size="1" appearance="link" scheme="on-surface" status="error" icon="delete" aria-label="Удалить" value="delete" 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--error" aria-label="Удалить" name="Удалить" danger value="delete" data-sf-static aria-hidden="true">
+
+<sf-icon root-class="pointer-event-none" weight="400" aria-hidden="true" filled="false" icon="delete" 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>delete</i></sf-icon>
+</button>
+</sf-button-icon>
+</div>
+</td></tr></tbody>
+</table>
+</div>
+
+
+</div>
+</section>
+
+
+</sf-view-table>

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

@@ -0,0 +1,149 @@
+<!-- sf-view-table, example «empty»: 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="empty" style="display: contents;"><script type="application/json" data-sf-settings>{"columns":[{"key":"title","label":"Название"}]}</script>
+<section class="sf-table  min-w-0 flex flex-col gap-1/3 flex-1 min-h-0 " data-state="empty" 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-empty-1" data-sf-static>
+
+<span class="sf-input-field items-cross-center transition flex">
+
+
+<input id="sf-view-table-empty-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="title">
+
+<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="Название">
+<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-empty-2" data-sf-column-resizer="title" aria-label="Изменить ширину столбца: Название"></button>
+</div>
+</th>
+<th class="relative" data-key="actions" data-label="Действия">
+<span class="sf-table-visually-hidden">Действия</span>
+</th>
+</tr>
+</thead>
+
+
+<tbody data-state="empty">
+<tr>
+<td colspan="4">
+<div class="sf-table-state"><sf-empty-state kind="no-data" size="1" heading-level="3" style="display: contents;"><script type="application/json" data-sf-settings>{"actions":[{"id":"create","text":"Создать"}]}</script>
+<div class="sf-empty-state sf-empty-state--size-1 sf-empty-state--no-data" data-sf-static>
+<span aria-hidden="true" class="sf-featured-icon sf-featured-icon--size-2 sf-featured-icon--neutral sf-featured-icon--soft sf-empty-state-icon"><i class="sf-icon">inbox</i></span>
+<h3 class="sf-empty-state-title">Записей пока нет</h3>
+<p class="sf-empty-state-text">Они появятся здесь, когда их добавят</p>
+<div class="sf-empty-state-actions">
+
+<sf-button size="1" appearance="default" scheme="primary" text="Создать" style="display: contents;">
+<button type="button" class="sf-button sf-button--size-1 sf-button--default sf-button--primary flex items-cross-center" data-action="create" data-sf-static>
+
+
+<span class="sf-button-text-container text-center pointer-event-none flex-1">
+Создать
+</span>
+
+</button>
+</sf-button>
+</div>
+</div>
+</sf-empty-state></div>
+</td>
+</tr>
+</tbody>
+
+</table>
+</div>
+
+
+</div>
+</section>
+
+
+</sf-view-table>