\ No newline at end of file
diff --git a/site/schemes/pages/post.yaml b/site/schemes/pages/post.yaml
index df3063faf..c2ead81cb 100644
--- a/site/schemes/pages/post.yaml
+++ b/site/schemes/pages/post.yaml
@@ -10,7 +10,7 @@ options:
layout:
sections:
content:
- fields: [title, image, tags, summary, content]
+ fields: [title, coverImage, tags, summary, content]
fields:
summary:
@@ -18,11 +18,9 @@ fields:
label: '{{page.summary}}'
rows: 5
- image:
+ coverImage:
type: image
- default: null
label: '{{page.image}}'
- placeholder: '{{page.noImage}}'
tags:
type: tags
diff --git a/site/templates/partials/cover-image.php b/site/templates/partials/cover-image.php
index a04d7949c..493f2ed8c 100644
--- a/site/templates/partials/cover-image.php
+++ b/site/templates/partials/cover-image.php
@@ -1,3 +1,3 @@
-has('image') && !$page->image()->isEmpty() && $page->images()->has($page->image())) : ?>
-
+has('coverImage') && ($image = $page->coverImage())) : ?>
+
\ No newline at end of file
From 395a6bd32850f117bcb95d1e9dfec0923afb7ed6 Mon Sep 17 00:00:00 2001
From: Giuseppe Criscione <18699708+giuscris@users.noreply.github.com>
Date: Sat, 22 Feb 2025 12:14:14 +0100
Subject: [PATCH 2/4] Add file input and multiple value variants files and
images
---
formwork/fields/file.php | 61 ++++++++++++++++
formwork/fields/files.php | 79 +++++++++++++++++++++
formwork/fields/images.php | 75 +++++++++++++++++++
formwork/translations/en.yaml | 2 +
panel/src/ts/components/inputs/tag-input.ts | 26 ++++++-
panel/views/fields/file.php | 19 +++++
panel/views/fields/files.php | 20 ++++++
panel/views/fields/images.php | 20 ++++++
8 files changed, 299 insertions(+), 3 deletions(-)
create mode 100644 formwork/fields/file.php
create mode 100644 formwork/fields/files.php
create mode 100644 formwork/fields/images.php
create mode 100644 panel/views/fields/file.php
create mode 100644 panel/views/fields/files.php
create mode 100644 panel/views/fields/images.php
diff --git a/formwork/fields/file.php b/formwork/fields/file.php
new file mode 100644
index 000000000..82e070075
--- /dev/null
+++ b/formwork/fields/file.php
@@ -0,0 +1,61 @@
+ function (Field $field): ?File {
+ return $field->value() !== null
+ ? $field->getFiles()->get($field->value())
+ : null;
+ },
+
+ 'getFiles' => function (Field $field): FileCollection {
+ if (!$field->has('options')) {
+ $model = $field->parent()?->model();
+
+ if ($model === null || !method_exists($model, 'files')) {
+ throw new InvalidValueException(sprintf('Field "%s" of type "%s" must have a model with files', $field->name(), $field->type()));
+ }
+
+ return $model->files();
+ }
+
+ return $field->get('options');
+ },
+
+ 'validate' => function (Field $field, $value): ?string {
+ if (Constraint::isEmpty($value)) {
+ return null;
+ }
+
+ if (!is_string($value)) {
+ throw new ValidationException(sprintf('Invalid value for field "%s" of type "%s"', $field->name(), $field->type()));
+ }
+
+ return $value;
+ },
+
+ 'options' => function (Field $field): array {
+ $collection = $field->getFiles();
+
+ if ($field->has('fileType')) {
+ $collection = $collection->filter(static fn(File $file) => in_array($file->type(), (array) $field->get('fileType'), true));
+ }
+
+ return $collection
+ ->map(static fn(File $file) => [
+ 'value' => $file->name(),
+ 'icon' => 'file-' . $file->type(),
+ 'thumb' => $file instanceof Image ? $file->square(300, 'contain')->uri() : null,
+ ])->toArray();
+ },
+ ];
+};
diff --git a/formwork/fields/files.php b/formwork/fields/files.php
new file mode 100644
index 000000000..215f6d890
--- /dev/null
+++ b/formwork/fields/files.php
@@ -0,0 +1,79 @@
+ function (Field $field): FileCollection {
+ if (!$field->has('options')) {
+ $model = $field->parent()?->model();
+
+ if ($model === null || !method_exists($model, 'files')) {
+ throw new InvalidValueException(sprintf('Field "%s" of type "%s" must have a model with files', $field->name(), $field->type()));
+ }
+
+ return $model->files();
+ }
+
+ return $field->get('options');
+ },
+
+ 'toString' => function ($field) {
+ return implode(', ', $field->value() ?? []);
+ },
+
+ 'return' => function (Field $field): FileCollection {
+ return $field->getFiles()->filter(static fn(File $file) => in_array($file->name(), $field->value(), true));
+ },
+
+ 'validate' => function (Field $field, $value): array {
+ if (Constraint::isEmpty($value)) {
+ return [];
+ }
+
+ if (is_string($value)) {
+ $value = array_map(trim(...), explode(',', $value));
+ }
+
+ if (!is_array($value)) {
+ throw new ValidationException(sprintf('Invalid value for field "%s" of type "%s"', $field->name(), $field->type()));
+ }
+
+ if ($field->has('pattern')) {
+ $value = array_filter($value, static fn($item): bool => Constraint::matchesRegex($item, $field->get('pattern')));
+ }
+
+ if ($field->has('limit') && count($value) > $field->get('limit')) {
+ throw new ValidationException(sprintf('Field "%s" of type "%s" has a limit of %d items', $field->name(), $field->type(), $field->get('limit')));
+ }
+
+ return array_values(array_filter($value));
+ },
+
+ 'options' => function (Field $field): array {
+ $collection = $field->getFiles();
+
+ if ($field->has('fileType')) {
+ $collection = $collection->filter(static fn(File $file) => in_array($file->type(), (array) $field->get('fileType'), true));
+ }
+
+ return $collection
+ ->map(static fn(File $file) => [
+ 'value' => $file->name(),
+ 'icon' => 'file-' . $file->type(),
+ 'thumb' => $file instanceof Image ? $file->square(300, 'contain')->uri() : null,
+ ])->toArray();
+ },
+
+ 'limit' => function (Field $field): ?int {
+ return $field->get('limit', null);
+ },
+ ];
+};
diff --git a/formwork/fields/images.php b/formwork/fields/images.php
new file mode 100644
index 000000000..e8c27aa56
--- /dev/null
+++ b/formwork/fields/images.php
@@ -0,0 +1,75 @@
+ function (Field $field): FileCollection {
+ if (!$field->has('options')) {
+ $model = $field->parent()?->model();
+
+ if ($model === null || !method_exists($model, 'files')) {
+ throw new InvalidValueException(sprintf('Field "%s" of type "%s" must have a model with files', $field->name(), $field->type()));
+ }
+
+ $files = $model->files();
+ } else {
+ $files = $field->get('options');
+ }
+
+ return $files->filter(static fn(File $file) => $file instanceof Image);
+ },
+
+ 'toString' => function ($field) {
+ return implode(', ', $field->value() ?? []);
+ },
+
+ 'return' => function (Field $field): FileCollection {
+ return $field->getImages()->filter(static fn(File $file) => in_array($file->name(), $field->value(), true));
+ },
+
+ 'validate' => function (Field $field, $value): array {
+ if (Constraint::isEmpty($value)) {
+ return [];
+ }
+
+ if (is_string($value)) {
+ $value = array_map(trim(...), explode(',', $value));
+ }
+
+ if (!is_array($value)) {
+ throw new ValidationException(sprintf('Invalid value for field "%s" of type "%s"', $field->name(), $field->type()));
+ }
+
+ if ($field->has('pattern')) {
+ $value = array_filter($value, static fn($item): bool => Constraint::matchesRegex($item, $field->get('pattern')));
+ }
+
+ if ($field->has('limit') && count($value) > $field->get('limit')) {
+ throw new ValidationException(sprintf('Field "%s" of type "%s" has a limit of %d items', $field->name(), $field->type(), $field->get('limit')));
+ }
+
+ return array_values(array_filter($value));
+ },
+
+ 'options' => function (Field $field): array {
+ return $field->getImages()
+ ->map(static fn(Image $image) => [
+ 'value' => $image->name(),
+ 'icon' => 'image',
+ 'thumb' => $image->square(300, 'contain')->uri(),
+ ])->toArray();
+ },
+
+ 'limit' => function (Field $field): ?int {
+ return $field->get('limit', null);
+ },
+ ];
+};
diff --git a/formwork/translations/en.yaml b/formwork/translations/en.yaml
index e0702e73e..bfed02359 100644
--- a/formwork/translations/en.yaml
+++ b/formwork/translations/en.yaml
@@ -17,6 +17,7 @@ date.weekdays.long: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Fr
date.weekdays.short: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
fields.array.add: Add
fields.array.remove: Remove
+fields.file.none: (None)
fields.file.uploadLabel: Click to choose a file to upload or drag it here
fields.image.none: (None)
fields.select.empty: No matching options
@@ -29,6 +30,7 @@ page.files: Files
page.image: Image
page.listed: Listed
page.listed.description: Listed pages are visible in the menu
+page.noFiles: No files
page.noImage: No image
page.none: (None)
page.noTags: No tags
diff --git a/panel/src/ts/components/inputs/tag-input.ts b/panel/src/ts/components/inputs/tag-input.ts
index c4afdc29f..2db60f591 100644
--- a/panel/src/ts/components/inputs/tag-input.ts
+++ b/panel/src/ts/components/inputs/tag-input.ts
@@ -1,6 +1,7 @@
import { $, $$ } from "../../utils/selectors";
import { escapeRegExp, makeDiacriticsRegExp } from "../../utils/validation";
import { debounce } from "../../utils/events";
+import { insertIcon } from "../icons";
import Sortable from "sortablejs";
interface TagInputOptions {
@@ -11,6 +12,12 @@ interface TagInputOptions {
orderable: boolean;
}
+interface TagInputDropdownItem {
+ value: string;
+ icon?: string;
+ thumb?: string;
+}
+
export class TagInput {
constructor(input: HTMLInputElement, userOptions: Partial) {
const defaults = { addKeyCodes: ["Comma"], limit: Infinity, accept: "options", orderable: true };
@@ -130,7 +137,7 @@ export class TagInput {
function createDropdown() {
if ("options" in input.dataset) {
- const list: { [key: string | number]: string } = JSON.parse(input.dataset.options ?? "{}");
+ const list: { [key: string | number]: string | TagInputDropdownItem } = JSON.parse(input.dataset.options ?? "{}");
const isAssociative = !Array.isArray(list);
if ("accept" in input.dataset) {
@@ -143,9 +150,22 @@ export class TagInput {
for (const key in list) {
const item = document.createElement("div");
+
+ const { value, icon, thumb } = typeof list[key] === "object" ? list[key] : { value: list[key], icon: undefined, thumb: undefined };
+
item.className = "dropdown-item";
- item.innerHTML = list[key];
- item.dataset.value = isAssociative ? key : list[key];
+ item.innerHTML = value;
+ item.dataset.value = isAssociative ? key : value;
+
+ if (thumb) {
+ const img = document.createElement("img");
+ img.src = thumb;
+ img.className = "dropdown-thumb";
+ item.insertAdjacentElement("afterbegin", img);
+ } else if (icon) {
+ insertIcon(icon, item);
+ }
+
item.addEventListener("click", function () {
if (this.dataset.value) {
addTag(this.dataset.value);
diff --git a/panel/views/fields/file.php b/panel/views/fields/file.php
new file mode 100644
index 000000000..8a9b57cb5
--- /dev/null
+++ b/panel/views/fields/file.php
@@ -0,0 +1,19 @@
+layout('fields.field') ?>
+
+ icon($field->get('icon', 'file')) ?>
+
+
\ No newline at end of file
diff --git a/panel/views/fields/files.php b/panel/views/fields/files.php
new file mode 100644
index 000000000..e88da1b47
--- /dev/null
+++ b/panel/views/fields/files.php
@@ -0,0 +1,20 @@
+layout('fields.field') ?>
+
\ No newline at end of file
diff --git a/panel/views/fields/images.php b/panel/views/fields/images.php
new file mode 100644
index 000000000..16a236d83
--- /dev/null
+++ b/panel/views/fields/images.php
@@ -0,0 +1,20 @@
+layout('fields.field') ?>
+