@simai-studio/view 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,136 @@
+<!-- sf-view-table, example «reference»: 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="Записи" table-settings-key="docs.records" style="display: contents;" data-sf-first-paint="skeleton" aria-busy="true"><script type="application/json" data-sf-settings>{"columns":[{"key":"title","label":"Название","sortable":true},{"key":"status","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-reference-1" data-sf-static aria-hidden="true">
+
+<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 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="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 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="Название" 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 class="sf-first-paint-bar" aria-hidden="true">Название</span></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">
+<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-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 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="status" data-item="1_status"><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"><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="status" data-item="2_status"><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" data-row-actions="idle"></div></td></tr></tbody>
+</table>
+</div>
+
+
+</div>
+</section>
+
+
+</sf-view-table>

package/dist/smart/view-table/static/default/typed-cells.html

@@ -0,0 +1,229 @@
+<!-- sf-view-table, example «typed-cells»: 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="Решения" style="display: contents;"><script type="application/json" data-sf-settings>{"columns":[{"key":"title","label":"Название"},{"key":"owner","label":"Ответственный","propertyType":"record"},{"key":"attachment","label":"Файл","propertyType":"file"},{"key":"accent","label":"Цвет","propertyType":"color"}],"rows":[{"id":"1","revision":"r1","title":"Портал клиента","owner":{"value":"u-1","label":"Анна Захарова","href":"#u-1"},"attachment":{"value":"f-1","label":"договор.pdf","mime":"application/pdf","href":"#f-1"},"accent":"#2f6feb"},{"id":"2","revision":"r1","title":"Каталог товаров","owner":{"value":"u-2","label":"Илья Петров","href":"#u-2"},"attachment":{"value":"f-2","label":"схема.png","mime":"image/png","href":"#f-2"},"accent":"#1a7f37"}]}</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-typed-cells-1" data-sf-static>
+
+<span class="sf-input-field items-cross-center transition flex">
+
+
+<input id="sf-view-table-typed-cells-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="owner">
+
+<col data-key="attachment">
+
+<col data-key="accent">
+
+<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-typed-cells-2" data-sf-column-resizer="title" aria-label="Изменить ширину столбца: Название"></button>
+</div>
+</th>
+<th class="relative" data-key="owner" 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-typed-cells-3" data-sf-column-resizer="owner" aria-label="Изменить ширину столбца: Ответственный"></button>
+</div>
+</th>
+<th class="relative" data-key="attachment" 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-typed-cells-4" data-sf-column-resizer="attachment" aria-label="Изменить ширину столбца: Файл"></button>
+</div>
+</th>
+<th class="relative" data-key="accent" 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-typed-cells-5" data-sf-column-resizer="accent" 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="owner" data-item="1_owner"><sf-reference-link line="1/2" appearance="plain" icon label="Анна Захарова" href="#u-1" style="display: contents;">
+<div class="sf-reference-link sf-reference-link--line-1/2 sf-reference-link--plain flex items-cross-center" data-sf-static>
+<div class="sf-reference-link__main sf-reference-link-left">
+
+
+<a class="sf-reference-link__link" href="#u-1" target="_self">
+Анна Захарова
+</a>
+
+</div>
+<div class="sf-reference-link__meta sf-reference-link-text"></div>
+</div>
+</sf-reference-link></td><td data-key="attachment" data-item="1_attachment"><sf-reference-link line="1/2" label="договор.pdf" icon="picture_as_pdf" href="#f-1" style="display: contents;">
+<div class="sf-reference-link sf-reference-link--line-1/2 flex items-cross-center" data-sf-static>
+<div class="sf-reference-link__main sf-reference-link-left">
+<i class="sf-reference-link__icon sf-icon" aria-hidden="true">picture_as_pdf</i>
+
+<a class="sf-reference-link__link" href="#f-1" target="_self">
+договор.pdf
+</a>
+
+</div>
+<div class="sf-reference-link__meta sf-reference-link-text"></div>
+</div>
+</sf-reference-link></td><td data-key="accent" data-item="1_accent">
+<sf-input-color size="1/2" appearance="plain" disabled value="#2f6feb" label="Цвет" style="display: contents;">
+<div class="sf-color sf-color--plain sf-color--size-1/2" data-set="true" data-sf-static>
+<label class="sf-color-swatch" title="Выбрать цвет">
+<span class="sf-color-chip" aria-hidden="true" style="--sf-color-chip: #2f6feb"></span>
+<input type="color" class="sf-color-input" disabled aria-label="Цвет">
+</label>
+
+<span class="sf-color-text">
+<code>#2f6feb</code>
+</span>
+
+
+
+</div>
+</sf-input-color>
+</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="owner" data-item="2_owner"><sf-reference-link line="1/2" appearance="plain" icon label="Илья Петров" href="#u-2" style="display: contents;">
+<div class="sf-reference-link sf-reference-link--line-1/2 sf-reference-link--plain flex items-cross-center" data-sf-static>
+<div class="sf-reference-link__main sf-reference-link-left">
+
+
+<a class="sf-reference-link__link" href="#u-2" target="_self">
+Илья Петров
+</a>
+
+</div>
+<div class="sf-reference-link__meta sf-reference-link-text"></div>
+</div>
+</sf-reference-link></td><td data-key="attachment" data-item="2_attachment"><sf-reference-link line="1/2" label="схема.png" icon="image" href="#f-2" style="display: contents;">
+<div class="sf-reference-link sf-reference-link--line-1/2 flex items-cross-center" data-sf-static>
+<div class="sf-reference-link__main sf-reference-link-left">
+<i class="sf-reference-link__icon sf-icon" aria-hidden="true">image</i>
+
+<a class="sf-reference-link__link" href="#f-2" target="_self">
+схема.png
+</a>
+
+</div>
+<div class="sf-reference-link__meta sf-reference-link-text"></div>
+</div>
+</sf-reference-link></td><td data-key="accent" data-item="2_accent">
+<sf-input-color size="1/2" appearance="plain" disabled value="#1a7f37" label="Цвет" style="display: contents;">
+<div class="sf-color sf-color--plain sf-color--size-1/2" data-set="true" data-sf-static>
+<label class="sf-color-swatch" title="Выбрать цвет">
+<span class="sf-color-chip" aria-hidden="true" style="--sf-color-chip: #1a7f37"></span>
+<input type="color" class="sf-color-input" disabled aria-label="Цвет">
+</label>
+
+<span class="sf-color-text">
+<code>#1a7f37</code>
+</span>
+
+
+
+</div>
+</sf-input-color>
+</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>

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

@@ -0,0 +1,229 @@
+<!-- sf-view-table, example «typed-cells»: 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="Решения" style="display: contents;" data-sf-first-paint="skeleton" aria-busy="true"><script type="application/json" data-sf-settings>{"columns":[{"key":"title","label":"Название"},{"key":"owner","label":"Ответственный","propertyType":"record"},{"key":"attachment","label":"Файл","propertyType":"file"},{"key":"accent","label":"Цвет","propertyType":"color"}]}</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-typed-cells-1" data-sf-static aria-hidden="true">
+
+<span class="sf-input-field items-cross-center transition flex">
+
+
+<input id="sf-view-table-typed-cells-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="owner">
+
+<col data-key="attachment">
+
+<col data-key="accent">
+
+<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-typed-cells-2" data-sf-column-resizer="title" aria-label="Изменить ширину столбца: Название"></button>
+</div>
+</th>
+<th class="relative" data-key="owner" 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-typed-cells-3" data-sf-column-resizer="owner" aria-label="Изменить ширину столбца: Ответственный"></button>
+</div>
+</th>
+<th class="relative" data-key="attachment" 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-typed-cells-4" data-sf-column-resizer="attachment" aria-label="Изменить ширину столбца: Файл"></button>
+</div>
+</th>
+<th class="relative" data-key="accent" 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-typed-cells-5" data-sf-column-resizer="accent" 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="owner" data-item="1_owner"><sf-reference-link line="1/2" appearance="plain" icon label="Анна Захарова" href="#u-1" style="display: contents;">
+<div class="sf-reference-link sf-reference-link--line-1/2 sf-reference-link--plain flex items-cross-center" data-sf-static aria-hidden="true">
+<div class="sf-reference-link__main sf-reference-link-left">
+
+
+<a class="sf-reference-link__link" href="#u-1" target="_self">
+<span class="sf-first-paint-bar" aria-hidden="true">Анна Захарова</span>
+</a>
+
+</div>
+<div class="sf-reference-link__meta sf-reference-link-text"></div>
+</div>
+</sf-reference-link></td><td data-key="attachment" data-item="1_attachment"><sf-reference-link line="1/2" label="договор.pdf" icon="picture_as_pdf" href="#f-1" style="display: contents;">
+<div class="sf-reference-link sf-reference-link--line-1/2 flex items-cross-center" data-sf-static aria-hidden="true">
+<div class="sf-reference-link__main sf-reference-link-left">
+<i class="sf-reference-link__icon sf-icon" aria-hidden="true">picture_as_pdf</i>
+
+<a class="sf-reference-link__link" href="#f-1" target="_self">
+<span class="sf-first-paint-bar" aria-hidden="true">договор.pdf</span>
+</a>
+
+</div>
+<div class="sf-reference-link__meta sf-reference-link-text"></div>
+</div>
+</sf-reference-link></td><td data-key="accent" data-item="1_accent">
+<sf-input-color size="1/2" appearance="plain" disabled value="#2f6feb" label="Цвет" style="display: contents;">
+<div class="sf-color sf-color--plain sf-color--size-1/2" data-set="true" data-sf-static aria-hidden="true">
+<label class="sf-color-swatch" title="Выбрать цвет">
+<span class="sf-color-chip" aria-hidden="true" style="--sf-color-chip: #2f6feb"></span>
+<input type="color" class="sf-color-input" disabled aria-label="Цвет">
+</label>
+
+<span class="sf-color-text">
+<code><span class="sf-first-paint-bar" aria-hidden="true">#2f6feb</span></code>
+</span>
+
+
+
+</div>
+</sf-input-color>
+</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="" 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="owner" data-item="2_owner"><sf-reference-link line="1/2" appearance="plain" icon label="Илья Петров" href="#u-2" style="display: contents;">
+<div class="sf-reference-link sf-reference-link--line-1/2 sf-reference-link--plain flex items-cross-center" data-sf-static aria-hidden="true">
+<div class="sf-reference-link__main sf-reference-link-left">
+
+
+<a class="sf-reference-link__link" href="#u-2" target="_self">
+<span class="sf-first-paint-bar" aria-hidden="true">Илья Петров</span>
+</a>
+
+</div>
+<div class="sf-reference-link__meta sf-reference-link-text"></div>
+</div>
+</sf-reference-link></td><td data-key="attachment" data-item="2_attachment"><sf-reference-link line="1/2" label="схема.png" icon="image" href="#f-2" style="display: contents;">
+<div class="sf-reference-link sf-reference-link--line-1/2 flex items-cross-center" data-sf-static aria-hidden="true">
+<div class="sf-reference-link__main sf-reference-link-left">
+<i class="sf-reference-link__icon sf-icon" aria-hidden="true">image</i>
+
+<a class="sf-reference-link__link" href="#f-2" target="_self">
+<span class="sf-first-paint-bar" aria-hidden="true">схема.png</span>
+</a>
+
+</div>
+<div class="sf-reference-link__meta sf-reference-link-text"></div>
+</div>
+</sf-reference-link></td><td data-key="accent" data-item="2_accent">
+<sf-input-color size="1/2" appearance="plain" disabled value="#1a7f37" label="Цвет" style="display: contents;">
+<div class="sf-color sf-color--plain sf-color--size-1/2" data-set="true" data-sf-static aria-hidden="true">
+<label class="sf-color-swatch" title="Выбрать цвет">
+<span class="sf-color-chip" aria-hidden="true" style="--sf-color-chip: #1a7f37"></span>
+<input type="color" class="sf-color-input" disabled aria-label="Цвет">
+</label>
+
+<span class="sf-color-text">
+<code><span class="sf-first-paint-bar" aria-hidden="true">#1a7f37</span></code>
+</span>
+
+
+
+</div>
+</sf-input-color>
+</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>