Skip to content

Extendable assets fieldtype #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
daun wants to merge 14 commits into
base: 5.x
Choose a base branch
from
Open

Extendable assets fieldtype #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e2ba3fa
Allow dynamic asset field components
daun Aug 9, 2024
ddb6ca7
Make asset editor component globally available
daun Aug 9, 2024
27e7da6
Merge branch '5.x' into feature/extendable-assets-fieldtype
daun Aug 10, 2024
a2aa5a7
Allow asset component objects
daun Aug 10, 2024
313a543
Add slots before asset field list
daun Aug 10, 2024
faff81c
Rename slots
daun Aug 10, 2024
05993cc
Add slot for custom display modes
daun Aug 10, 2024
d589075
Simplify slot props
daun Aug 10, 2024
b489fca
Merge branch '5.x' into feature/extendable-assets-fieldtype
daun Aug 13, 2024
e1c9b06
Remove slots
daun Aug 13, 2024
7353d3e
Merge branch '5.x' into feature/extendable-assets-fieldtype
daun Oct 22, 2024
0820b72
Merge branch '5.x' into feature/extendable-assets-fieldtype
daun Nov 10, 2024
4768db1
Merge branch '5.x' into feature/extendable-assets-fieldtype
daun Dec 6, 2024
b036dec
Merge branch '5.x' into feature/extendable-assets-fieldtype
daun Nov 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions resources/js/bootstrap/components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Vue from 'vue'
import vSelect from 'vue-select'
import AssetManager from '../components/assets/AssetManager.vue';
import AssetEditor from '../components/assets/Editor/Editor.vue';
import Browser from '../components/assets/Browser/Browser.vue';
import UpdatesBadge from '../components/UpdatesBadge.vue';
import Container from '../components/publish/Container.vue';
Expand Down Expand Up @@ -71,6 +72,7 @@ Vue.component('v-select', vSelect)
// Core
Vue.component('asset-manager', AssetManager);
Vue.component('asset-browser', Browser);
Vue.component('asset-editor', AssetEditor);
Vue.component('updates-badge', UpdatesBadge);

// Publish
Expand Down
2 changes: 0 additions & 2 deletions resources/js/components/assets/Browser/Browser.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,6 @@

<script>
import AssetThumbnail from './Thumbnail.vue';
import AssetEditor from '../Editor/Editor.vue';
import Breadcrumbs from './Breadcrumbs.vue';
import CreateFolder from './CreateFolder.vue';
import HasPagination from '../../data-list/HasPagination';
Expand All @@ -300,7 +299,6 @@ export default {

components: {
AssetThumbnail,
AssetEditor,
Breadcrumbs,
Uploader,
Uploads,
Expand Down
6 changes: 0 additions & 6 deletions resources/js/components/fieldtypes/assets/Asset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
import AssetEditor from '../../assets/Editor/Editor.vue';

export default {

components: {
AssetEditor
},

props: {
asset: Object,
readOnly: Boolean,
Expand Down
15 changes: 12 additions & 3 deletions resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
append-to="body"
>
<div class="asset-grid-listing border dark:border-dark-900 rounded overflow-hidden" :class="{ 'rounded-t-none': !isReadOnly && (showPicker || uploads.length) }" ref="assets">
<asset-tile
<asset-tile :is="assetTileComponent"
v-for="asset in assets"
:key="asset.id"
:asset="asset"
Expand All @@ -96,7 +96,7 @@
</div>
</sortable-list>

<div class="asset-table-listing" v-if="displayMode === 'list'">
<div class="asset-table-listing" v-else-if="displayMode === 'list'">
<table class="table-fixed">
<sortable-list
v-model="assets"
Expand All @@ -108,7 +108,7 @@
:mirror="false"
>
<tbody ref="assets">
<tr is="assetRow"
<tr :is="assetRowComponent"
class="asset-row"
v-for="asset in assets"
:key="asset.id"
Expand All @@ -124,6 +124,9 @@
</sortable-list>
</table>
</div>

<slot :name="displayMode" v-else v-bind="{ assets, showSetAlt, assetUpdated, assetRemoved, idChanged }" />

</template>
</div>
</uploader>
Expand Down Expand Up @@ -192,6 +195,12 @@ export default {
mixins: [Fieldtype],


props: {
assetTileComponent: { type: [String, Object], default: 'asset-tile' },
assetRowComponent: { type: [String, Object], default: 'asset-row' },
},


data() {
return {
assets: [],
Expand Down
Loading