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 rows slot and carry a use_in_views: true flag 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 (checkbox for boolean, number for integer/number, textarea for array/object, select for enum, textfield otherwise). 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

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Title: Add SDC Component Views Format style plugin to Varbase Components » Add SDC Components Views Format style plugin to Varbase Components

  • rajab natshah committed ae4cfad9 on 4.0.x
    feat: #3574244 Add SDC Components Views Format style plugin to Varbase...
rajab natshah’s picture

Issue summary: View changes

  • rajab natshah committed 37eb50bf on 4.0.x
    feat: #3574244 Add SDC Components Views Format style plugin to Varbase...

  • rajab natshah committed b0cc1064 on 4.0.x
    feat: #3574244 When installing with the recipes starter kit -...
rajab natshah’s picture

Assigned: rajab natshah » Unassigned
Status: Active » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.