Компоненты Endge SFC

Компоненты Endge SFC — renderer-neutral теги template. Source не содержит HTML или Vue-компоненты: compiler преобразует теги в общий IR, после чего выбранный adapter материализует их во Vue, Native DOM или другой target.

Компоненты представления

Text, DateTime, Number, Icon, Badge, Dot и Tooltip отображают данные и состояние интерфейса. Они не определяют способ сохранения изменённого значения.

Visual primitives входят в базовый renderer-adapter contract. Shell-owned Tooltip дополнительно входит в Vue adapter contract. Поддерживаемые adapters:

• vue-native из @endge/ui-vue;
• vue-shadcn из @endge/ui-vue-shadcn.

Компоненты компоновки

Box, Flex, Grid и Divider задают расположение и визуальную структуру содержимого, не добавляя data-flow.

Элементы ввода

Input, Textarea, Checkbox и Select отображают привычные элементы управления. В текущем контракте они не владеют writeback: изменение данных определяется отдельным механизмом редактирования, а не самим тегом.

Структурные компоненты

Назначение	Теги
Вызов дочернего SFC	Component
Таблица	Table, Column, Cell
Меню таблицы	ColumnMenu, CellMenu, MenuItem, MenuSeparator

Structural tags компилируются в тот же IR, но обрабатываются runtime renderer-ом, а не visual adapter map.

Подробные сценарии paging, selection, меню и состояния находятся в отдельном разделе «Таблицы SFC».

Редактирование значений

Редактирование — сквозное поведение, а не отдельный вид компонента. Text, Number и DateTime могут открыть встроенный editor через editable, а пользовательский editor подключается тем же runtime-контрактом. Запуск сессии, выбор editor-а, commit, cancel и событие edited описаны в руководстве «Редактирование значений».

Полный пример

<script setup lang="ts">
defineProps<{
  orders: Order[]
}>()
</script>

<template>
  <Grid columns="12" gap="2">
    <Flex col gap="2" colStart="1" colSpan="12">
      <Text weight="600">Orders</Text>
      <Badge tone="info">{{ orders.length }}</Badge>
    </Flex>

    <Table :rows="orders" row-key="id" colStart="1" colSpan="12">
      <Column key="number" title="Номер" sortable>
        <Cell><Text>{{ row.number }}</Text></Cell>
      </Column>
    </Table>
  </Grid>
</template>

Все visual tags принимают общие атрибуты, Endge control-flow directives и собственные атрибуты, перечисленные на их страницах. Для сложных комбинаций событий используйте универсальную аннотацию :on.