Problem/Motivation
Drupal's Single Directory Components (SDC) provide a powerful way to build reusable UI components. However, there is no built-in way to use an SDC component as a Views Format (style) plugin, meaning site builders cannot select an SDC component to wrap or render an entire View's output through the Views UI.
Varbase Components already manages SDC component integration and theme switching. Adding a lightweight Views Format plugin here keeps the feature self-contained and gives Varbase site builders a native way to connect Views output directly to SDC components without any additional modules.
Proposed resolution
Add a new Views Style plugin ComponentsViewsStyle to Varbase Components under src/Plugin/views/style/ComponentsViewsStyle.php.
The plugin provides:
- A "Component" option in the Views Format selector (plugin id:
components_views_style). - A component selector that lists only SDC components suitable for views, those that expose a
rowsslot and carry ause_in_views: trueflag in their.component.yml. - A rows slot selector (Ajax-refreshed on component change) that lets the editor choose which slot the rendered view rows are injected into.
- A Static Prop Values fieldset that introspects the selected component's JSON schema and renders a type-aware form element for each prop (
checkboxfor boolean,numberfor integer/number,textareafor array/object,selectfor enum,textfieldotherwise). Array and object string values are parsed from JSON or comma-separated input before being passed to the component.
Component Opt-in Flag
To appear in the component selector, an SDC component must explicitly opt in by setting use_in_views: true in its .component.yml and expose a rows slot:
name: Views view grid
description: Component implementation for views to display rows in a grid.
group: Views
noUi: true
use_in_views: true
slots:
rows:
type: array
title: 'Rows'
description: 'Rows'
items:
type: 'object'
Remaining tasks
- ✅ File an issue about this project
- ❌ Addition/Change/Update/Fix to this project
- ❌ Testing to ensure no regression
- ➖ Automated unit/functional testing coverage
- ➖ Developer Documentation support on feature change/addition
- ➖ User Guide Documentation support on feature change/addition
- ➖ UX/UI designer responsibilities
- ➖ Accessibility and Readability
- ❌ Code review from 1 Varbase core team member
- ❌ Full testing and approval
- ❌ Credit contributors
- ❌ Review with the product owner
- ❌ Update Release Notes and Update Helper on new feature change/addition
- ❌ Release
Varbase update type
- ✅ No Update
- ➖ Optional Update
- ➖ Forced Update
- ➖ Forced Update if Unchanged
User interface changes
- N/A
API changes
- N/A
Data model changes
- N/A
Release notes snippet
- N/A
Comments
Comment #2
rajab natshahComment #3
rajab natshahComment #4
rajab natshahComment #6
rajab natshahComment #9
rajab natshah