Skip to content

[v6] feat: New filelist field #8337

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

Merged
distantnative merged 3 commits into from
Aug 13, 2026
Merged

[v6] feat: New filelist field #8337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
94f55f5
fix: Never submit fields without a value
afbora Jul 29, 2026
64e7d62
feat: New filelist field
distantnative Aug 13, 2026
f810f5c
refact: Validator base element
afbora Aug 13, 2026
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
80 changes: 80 additions & 0 deletions panel/lab/components/fields/filelist/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<?php

use Kirby\Toolkit\A;
use Kirby\Toolkit\Str;

$files = A::map(range(1, 7), function ($file) {
return [
'id' => 'photography/image-' . $file . '.jpg',
'image' => [
'src' => 'https://picsum.photos/800/600/?v=' . Str::random()
],
'info' => 'image',
'link' => '/pages/photography/files/image-' . $file . '.jpg',
'permissions' => [
'delete' => true,
'sort' => true
],
'template' => 'image',
'text' => 'image-' . $file . '.jpg',
'uuid' => 'file://' . Str::random(16)
];
});

// the columns of a table layout are resolved on the server,
// so the lab has to ship them the way `ModelListField` sends them
$columns = [
'image' => [
'label' => ' ',
'mobile' => true,
'type' => 'image',
'width' => 'var(--table-row-height)'
],
'title' => [
'label' => 'Title',
'mobile' => true,
'type' => 'url'
]
];

return [
'docs' => 'k-filelist-field',
'columns' => $columns,
'customColumns' => [
...$columns,
'alt' => [
'id' => 'alt',
'label' => 'Alt text',
'type' => 'text'
],
'template' => [
'id' => 'template',
'label' => 'Template',
'type' => 'text'
]
],
'endpoints' => [
'field' => 'pages/photography/fields/gallery'
],
'files' => $files,
'pagination' => [
'limit' => 7,
'offset' => 0,
'page' => 1,
'total' => 7
],
'paginated' => [
'limit' => 3,
'offset' => 0,
'page' => 1,
'total' => 7
],
'upload' => [
'accept' => 'image/*',
'api' => 'pages/photography/files',
'attributes' => [],
'max' => null,
'multiple' => true,
'preview' => []
]
];
172 changes: 172 additions & 0 deletions panel/lab/components/fields/filelist/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
<template>
<k-lab-form>
<k-lab-examples class="k-lab-field-examples">
<k-box theme="notice" icon="alert">
The examples below are rendered from static props. There is no model
behind them, so everything that talks to the field endpoint (search,
pagination, sorting, uploads and batch deletion) answers with a 404 here
and only works in a real model view.
</k-box>

<k-lab-example label="Default">
<k-filelist-field
:files="files"
:pagination="pagination"
label="Files"
/>
</k-lab-example>

<k-lab-example label="Help">
<k-filelist-field
:files="files"
:pagination="pagination"
help="Every file of this page"
label="Files"
/>
</k-lab-example>

<k-lab-example label="Empty">
<k-filelist-field :files="[]" :pagination="empty" label="Files" />
</k-lab-example>

<k-lab-example label="Empty with custom text">
<k-filelist-field
:files="[]"
:pagination="empty"
empty="No images have been added yet"
label="Files"
/>
</k-lab-example>

<k-lab-example label="Layout: cardlets">
<k-filelist-field
:files="files"
:pagination="pagination"
label="Files"
layout="cardlets"
/>
</k-lab-example>

<k-lab-example label="Layout: cards">
<k-filelist-field
:files="files"
:pagination="pagination"
label="Files"
layout="cards"
/>
</k-lab-example>

<k-lab-example label="Layout: cards, size small">
<k-filelist-field
:files="files"
:pagination="pagination"
label="Files"
layout="cards"
size="small"
/>
</k-lab-example>

<k-lab-example label="Layout: table">
<k-filelist-field
:columns="columns"
:files="tableRows"
:pagination="pagination"
label="Files"
layout="table"
/>
</k-lab-example>

<k-lab-example label="Layout: table with columns">
<k-filelist-field
:columns="customColumns"
:files="tableRows"
:pagination="pagination"
label="Files"
layout="table"
/>
</k-lab-example>

<k-lab-example label="Pagination">
<k-filelist-field
:files="files.slice(0, 3)"
:endpoints="endpoints"
:pagination="paginated"
label="Files"
/>
</k-lab-example>

<k-lab-example label="Search">
<k-filelist-field
:files="files"
:endpoints="endpoints"
:pagination="pagination"
:searchable="true"
label="Files"
/>
</k-lab-example>

<k-lab-example label="Batch">
<k-filelist-field
:batch="true"
:files="files"
:endpoints="endpoints"
:pagination="pagination"
label="Files"
/>
</k-lab-example>

<k-lab-example label="Upload">
<k-filelist-field
:files="files"
:endpoints="endpoints"
:pagination="pagination"
:upload="upload"
label="Files"
/>
</k-lab-example>

<k-lab-example label="All options">
<k-filelist-field
:batch="true"
:files="files.slice(0, 3)"
:endpoints="endpoints"
:pagination="paginated"
:searchable="true"
:sortable="true"
:upload="upload"
help="Search, batch select, sorting and uploads at once"
label="Files"
/>
</k-lab-example>
</k-lab-examples>
</k-lab-form>
</template>

<script>
export default {
props: {
columns: Object,
customColumns: Object,
endpoints: Object,
files: Array,
paginated: Object,
pagination: Object,
upload: Object
},
computed: {
empty() {
return { limit: 20, offset: 0, page: 1, total: 0 };
},
tableRows() {
return this.files.map((file) => ({
...file,
alt: "Alt text for " + file.text,
title: {
text: file.text,
href: file.link
}
}));
}
}
};
</script>
Loading