PHPackages mountainclans/livewire-section-builder - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. mountainclans/livewire-section-builder ActiveLibrary[Utility & Helpers](/categories/utility) mountainclans/livewire-section-builder ====================================== This is my package livewire-section-builder 1.7.0(1w ago)051MITPHPPHP ^8.2CI passing Since Sep 15Pushed 1w agoCompare [ Source](https://github.com/mountainclans/livewire-section-builder)[ Packagist](https://packagist.org/packages/mountainclans/livewire-section-builder)[ Docs](https://github.com/mountainclans/livewire-section-builder)[ RSS](/packages/mountainclans-livewire-section-builder/feed)WikiDiscussions main Synced 1w ago READMEChangelog (10)Dependencies (47)Versions (23)Used By (0) Livewire Section Builder ======================== [](#livewire-section-builder) Установка --------- [](#установка) Установите пакет при помощи composer: ``` composer require mountainclans/livewire-section-builder ``` **Важно!** Пакет зависит от других компонентов, в частности, необходимо сразу после установки этого пакета также сконфигурировать для использования пакет [mountainclans/livewire-select](https://github.com/mountainclans/livewire-select) (инструкции находятся на его странице). Опубликуйте и примените миграции: ``` php artisan vendor:publish --tag="livewire-section-builder-migrations" php artisan migrate ``` Опубликуйте конфигурационный файл: ``` php artisan vendor:publish --tag="livewire-section-builder-config" ``` Конфигурационный массив имеет следующую вложенность: ``` retyrn [ 'sections' => [ [ 'key' => 'top_banner', 'title' => 'Top banner', 'model' => EloquentSectionModelClass::class, 'editor' => LivewireEditorComponent::class, 'frontend' => LivewireViewComponent::class, ], [ 'key' => 'advantages', 'title' => 'Advantages', 'model' => EloquentSectionModelClass2::class, 'editor' => LivewireEditorComponent2::class, 'frontend' => LivewireViewComponent2::class, ], ], 'templates' => [ 'main_page' => [ 'top_banner', 'advantages', ], ], ] ``` --- Добавьте в tailwind.config.js в секцию content: ``` './vendor/mountainclans/livewire-section-builder/resources/views/**/*.blade.php' ``` Опционально, Вы можете опубликовать `views` для их переопределения: ``` php artisan vendor:publish --tag="livewire-section-builder-views" ``` Использование ------------- [](#использование) Перед использованием компонентов пакета, пожалуйста, сконфигурируйте используемые классы в конфигурационном файле. ### Модель секции [](#модель-секции) Модель секции должна расширять класс Структура хранения модели состоит из следующих полей: - id - template - page\_id - type - order\_column - fields - created\_at - updated\_at Не рекомендуется менять миграцию, создающую таблицу для секций. Все необходимые поля секции можно сохранить в атрибуте модели `fields`. Данный атрибут представляет собой [schemaless attribute, реализация от Spatie](https://github.com/spatie/laravel-schemaless-attributes). Тем не менее, Вы вправе расширять модель секции как Вам необходимо, к примеру, использовать трейты `HasTranslations`, `InteractsWithMedia` и другие. Для того, чтобы одна и та же секция могла быть доступна для разных шаблонов, пожалуйста, используйте **уникальные** ключи в качестве названий секций. ### Админка [](#админка) В нужном месте страницы используйте компонент редактора: ``` @if ($pageId && !empty($destination)) @endif ``` Компоненты `editor` сами занимаются валидацией и сохранением своего состояния, в них может быть любая логика. Удалением, сортировкой, скрытием и показом контента этих компонентов занимается компонент `admin-section-builder`. Настоятельно рекомендуется, чтобы компонент взаимодействовал только с соответствующей моделью, указанной в конфиге как `model`. Рекомендуется создавать как минимум один публичный метод - `saveSection`, но в целом реализация никак не регламентирована. При сохранении компонента рекомендуется выбрасывать событие: ``` $this->dispatch(AdminSectionBuilder::EVENT_SECTION_UPDATED); ``` #### События при редактировании в админке [](#события-при-редактировании-в-админке) Вы можете расширить класс компонента `AdminSectionBuilder` и использовать собственный компонент в админке. В частности, Вы можете подписаться на одно из следующих событий: - AdminSectionBuilder::EVENT\_SECTION\_ADDED - AdminSectionBuilder::EVENT\_SECTION\_UPDATED - AdminSectionBuilder::EVENT\_SECTION\_SORTED - AdminSectionBuilder::EVENT\_SECTION\_DELETED И реализовать, к примеру, отправку уведомлений пользователю. #### Сворачивание секций и репитеров [](#сворачивание-секций-и-репитеров) Карточки секций и элементов репитеров сворачиваются шевроном; состояние живёт в localStorage браузера (ключи `sb-collapsed:section:{id}` / `sb-collapsed:repeater:{id}`) и переживает перезагрузку страницы. Это чисто UI-состояние конкретного браузера — в БД ничего не пишется. View-компонент -------------- [](#view-компонент) ``` ``` Данный компонент выведет все секции с нужным контентом и в нужном порядке. Повторители ----------- [](#повторители) Иногда при создании секции необходимо повторить в ней однотипные данные несколько раз. Сделать это призвана комбинация трейта `WithRepeaters` и использование blade-компонента `admin.repeater-editor`. Создайте модель-наследника `BuilderSectionRepeater` из пакета. Переопределите метод `allowedTypes`. Используйте данную модель как базовую, от которой будут наследоваться все повторители секций. ``` use MountainClans\LivewireSectionBuilder\Models\BuilderSectionRepeater as BaseBuilderSectionRepeater; class BuilderSectionRepeater extends BaseBuilderSectionRepeater { public static function allowedTypes(): array { return [ PropertiesSliderSection::REPEATER_TYPE => PropertiesTabRepeater::class, ]; } } ``` Унаследуйтесь от этой модели для создания уникальных классов-повторителей. Добавьте в них необходимые трейты (к примеру, `HasTranslations`, `FilledTranslatableFields`). Если модель использует `HasTranslations`, укажите список переводимых полей. ``` class AdvantagesOneRepeater extends BuilderSectionRepeater { protected function getInstanceType(): string { return AdvantagesOneSection::REPEATER_TYPE; } public array $translatable = [ 'fields->title', 'fields->description', ]; } ``` ### Настройка секции, использующей повторитель [](#настройка-секции-использующей-повторитель) - добавьте в класс секции, использующей repeater, константу `REPEATER_TYPE`; - добавьте метод, реализующий связь `repeaters` (HasMany): ``` class AdvantagesOneSection extends BuilderSection { public const REPEATER_TYPE = 'advantages_1_repeater'; public function repeaters(): HasMany { return $this->hasMany(AdvantagesOneRepeater::class, 'section_id'); } } ``` ### Редактор [](#редактор) В редакторе секции используйте трейт `WithRepeaters`. **Обязательно** переопределите методы редактора секции `getRepeaterModel` и `getRepeaterFields`, как показано в примере. **Опционально** вы можете использовать метод `getRepeaterDefaults` для того, чтобы задать начальные значения полей. ``` class AdvantagesOneSectionEditor extends Component { // другие трейты use WithRepeaters; // поля компонента public AdvantagesOneSection $section; public function mount(AdvantagesOneSection $section): void { // инициализационная логика $this->setRepeaters(); } public function saveSection(): void { // логика сохранения основного контента $this->saveRepeaters(); // другая логика $this->dispatch(AdminSectionBuilder::EVENT_SECTION_UPDATED); } protected function getRepeaterModel(): string { return AdvantagesOneRepeater::class; } protected function getRepeaterFields(): array { return ['title', 'description']; } // другая логика компонента } ``` Во `view` используйте компонент-обёртку для создания редактора контента повторителей. Пример ниже: ``` {{-- Repeaters --}} {{ __('Advantages') }} @empty($repeaters) {{ __('Not exists yet') }} @else @foreach($repeaters as $index => $repeater) @endforeach @endempty Необязательные пропсы `x-admin.repeater-editor`: - `label` — человекочитаемое имя элемента в свёрнутой плашке («Элемент 2 — Белое вино»). Обычно — значение ключевого поля репитера в дефолтной контент-локали. - `sortable` — включает drag&drop-сортировку: у элемента появляются `x-sort:item` и грип-хендл. Список при этом оборачивается в контейнер `…` (метод даёт `WithRepeaters`). Порядок сохраняется общей кнопкой сохранения секции. Требуется подключённый в admin-бандле приложения плагин [@alpinejs/sort](https://alpinejs.dev/plugins/sort); без него хендл ничего не делает. {{ __('Add advantage') }} {{ __('Save section') }} ``` Headless-режим (API) -------------------- [](#headless-режим-api) По умолчанию пакет работает в Livewire-first режиме и ведёт себя как раньше. Для headless-проектов (контент отдаётся фронтенду через JSON API) предусмотрен опциональный слой: ``` // config/livewire-section-builder.php 'headless' => true, // 'frontend' в реестре опционален; вместо него обязателен 'schema' // (класс API-схемы секции) — реестр как единое место всех схем контракта; // резолв: $section->apiSchema(); вся карта «тип => схема»: BuilderSection::apiSchemas() 'validate_registry' => true, // opt-in проверка реестра при загрузке приложения 'media_serializer' => App\Support\StrapiLikeMediaSerializer::class, // формат медиа задаёт приложение ``` Сериализация секции: ``` $section->toApiArray('ru'); // schemaless-поля секции: переводимые ('fields->title' в $translatable) — в запрошенной // локали с фолбэком на app.fallback_locale, остальные — как есть; // + 'repeaters' => [{id, ...поля}] по order_column (базовая связь repeaters() есть у любой секции). ``` Метод можно переопределить в конкретной секции — например, добавить медиа-коллекции через хелпер `serializeMediaCollection('collection_name')`, который использует настроенный `media_serializer` (класс-инвокабл, реализующий `Contracts\SerializesMedia`; дефолт — `{url, alt}`). Секции без ключа `frontend` Livewire-компонент `frontend-section-viewer` молча пропускает, так что смешанные проекты (часть секций — Livewire, часть — API) тоже возможны. Классы медиа-моделей, используемые `WithRepeaterImages`, настраиваются ключами `media_model` / `temp_media_model` (по умолчанию `App\Models\Media` / `App\Models\TempMedia` — как раньше). Авторы ------ [](#авторы) - [Vladimir Bajenov](https://github.com/mountainclans) - [All Contributors](../../contributors) Лицензия -------- [](#лицензия) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 46 — FairBetter than 92% of packages Maintenance98 Actively maintained with recent releases Popularity11 Limited adoption so far Community6 Small or concentrated contributor base Maturity58 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~15 days Recently: every ~5 days Total 22 Last Release 10d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/d363ad351540061c6f38586e772159863da3cfde29cfbd03c9ff5ba8b6b906aa?d=identicon)[VladimirBazhenov](/maintainers/VladimirBazhenov) --- Top Contributors [![VladimirBazhenov](https://avatars.githubusercontent.com/u/44696748?v=4)](https://github.com/VladimirBazhenov "VladimirBazhenov (13 commits)") --- Tags laravelMountain Clanslivewire-section-builder ### Code Quality TestsPest Static AnalysisRector Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/mountainclans-livewire-section-builder/health.svg) ``` [![Health](https://phpackages.com/badges/mountainclans-livewire-section-builder/health.svg)](https://phpackages.com/packages/mountainclans-livewire-section-builder) ``` ### Alternatives [tapp/filament-form-builder User facing form builder using Filament components 133.5k5](/packages/tapp-filament-form-builder)[leandrocfe/filament-apex-charts Apex Charts integration for Filament PHP. 4971.7M12](/packages/leandrocfe-filament-apex-charts)[filament/support Core helper methods and foundation code for all Filament packages. 2333.9M291](/packages/filament-support)[codewithdennis/filament-select-tree The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths. 329575.9k33](/packages/codewithdennis-filament-select-tree)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 119.8k](/packages/tomshaw-electricgrid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)