Skip to content

[6.x] Listings#11868

Merged
jasonvarga merged 116 commits intouifrom
listings
Jun 30, 2025
Merged

[6.x] Listings#11868
jasonvarga merged 116 commits intouifrom
listings

Conversation

@jasonvarga
Copy link
Copy Markdown
Member

@jasonvarga jasonvarga commented Jun 11, 2025

Where #11787 introduced a new way to create publish forms, this PR adds a new simplified way to create listings.

You pass all the props into the top level Listing component. Many props are optional.

<Listing
    :url="requestUrl"
    :preferences-prefix="`collections.${collection}`"
    allow-bulk-actions
    v-model:columns="columns"
    v-model:sort-column="sortColumn"
    v-model:sort-direction="sortDirection"
    v-model:selections="selections"
/>

Without passing anything into the slot, you will get an entire layout filled with appropriate components, such as a table, filters, search, pagination, and a column customizer.

If you do pass something to the slot, you will have control over the layout.

<Listing ...>
    <Presets />
    <div class="flex items-center gap-3">
        <Search />
        <Filters />
        <ColumnPicker />
    </div>
    <Table />
</Listing>

This PR also makes some other tweaks:

  • Resets confirmable actions once completed so we dont need the global reset event bubblage
  • ItemActions url prop is optional, which allows nothing to be passed and you get the contents of what you passed as a slot. Useful for when you're prepending actions without any real actions, and you don't want to code a whole separate dropdown for that.
  • Item actions can lazy load. We do that in listings on hover. Now the actions for every item don't need to be returned in the listing response.
  • Modal triggers use as-child prop to prevent button inside a button.
  • Collection action routes were changed - the collection itself didn't need to be in the route. It should be one url to be used for any collection.
  • Action::forBulk() will treat it as non-bulk if there's only a single selection.
  • FieldsetPolicy got a delete method to fix it never passing. Probably since we tweaked the Gate::before() super check.

# Conflicts:
#	resources/js/components/actions/ConfirmableAction.vue
#	resources/js/components/ui/Modal/Modal.vue
- They are no longer passed down in the listing
- The loading of the actions is passed through the slot, so the parent has the ability to control how/when they are loaded. In this case, when the dropdown is hovered.
- The actions prop can still be used, for example in the publish form.
…ndle refreshing the data yourself. Or, maybe just reload the page.
- ItemActions url is not required, which prevents us from needing to have a second dropdown for when a url is not defined. If no url is specified nothing really happens, it just outputs the default slot.
- The loading of actions will only happen if a url is provided.
- The dropdown separator is only rendered when there are both actions and prepended actions.
- v-if conditions are added when forwarding the slot otherwise it considers the slot always there, it's just empty.
…, maybe we can find a better way. not used anyway.
The component was technically rendered, but it would be empty, and you'd get an empty panel footer causing extra padding.
@jasonvarga jasonvarga marked this pull request as ready for review June 30, 2025 17:28
@jasonvarga jasonvarga merged commit 49672df into ui Jun 30, 2025
2 of 17 checks passed
@jasonvarga jasonvarga deleted the listings branch June 30, 2025 17:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant