Слоты
Фронтенд-слоты
Регистрация компонентов через AppSlotRegistry
Фронтенд-слоты регистрируются через AppSlotRegistry из @frame/core. Компонент передаётся напрямую — не по строковому имени.
Регистрация
import { AppSlotRegistry } from '@frame/core'
import { markRaw } from 'vue'
import MyButton from './MyButton.vue'
AppSlotRegistry.register({
name: 'my-module-button',
location: 'resource-page-actions',
component: markRaw(MyButton),
order: 10,
})
Всегда оборачивайте компонент в
markRaw() — это предотвращает превращение компонента в реактивный объект и улучшает производительность.AppSlotDefinition
name
string
Уникальное имя слота. Используется как ключ в реестре —
location:name.location
string
Место в интерфейсе. См. Locations.
component
Component
Vue-компонент для рендера. Оборачивайте в
markRaw().props
Record<string, any>
Статические пропсы, которые всегда передаются компоненту (помимо context).
order
number
Порядок рендера. По умолчанию
0. Меньше — раньше.Методы AppSlotRegistry
import { AppSlotRegistry } from '@frame/core'
// Регистрация
AppSlotRegistry.register(definition)
AppSlotRegistry.register([def1, def2])
// Чтение
AppSlotRegistry.getByLocation('resource-page-actions')
AppSlotRegistry.has('resource-page-actions')
// Удаление
AppSlotRegistry.unregister('resource-page-actions', 'my-button')
AppSlotRegistry.clear()
AppSlotRegistry.clear('resource-page-actions')
Пример: кнопка в ресурсе
index.ts
import { AppSlotRegistry } from '@frame/core'
import { markRaw } from 'vue'
import HistoryButton from './HistoryButton.vue'
AppSlotRegistry.register({
name: 'history-button',
location: 'resource-page-actions',
component: markRaw(HistoryButton),
order: 10,
})
HistoryButton.vue
<template>
<Button
:disabled="!hasHistory"
:icon="IconHistory"
color="neutral"
size="sm"
variant="ghost"
@click="openHistory"
/>
</template>
<script lang="ts" setup>
import { Button } from '@frame/vue'
import { IconHistory } from '@tabler/icons-vue'
const props = defineProps<{
resource: string
resourceId: number
record: any
}>()
// ...логика
</script>
Компонент получает context от AppSlotRenderer как обычные Vue-пропсы. Набор пропсов зависит от location — см. Locations.