init with kirby, vue and pagedjs interactive

public/kirby/src/Panel/Ui/Item/FileItem.php

@@ -0,0 +1,74 @@
+<?php
+
+namespace Kirby\Panel\Ui\Item;
+
+use Kirby\Cms\File;
+use Kirby\Cms\ModelWithContent;
+use Kirby\Panel\Model;
+
+/**
+ * @package   Kirby Panel
+ * @author    Bastian Allgeier <bastian@getkirby.com>
+ * @link      https://getkirby.com
+ * @copyright Bastian Allgeier
+ * @license   https://getkirby.com/license
+ * @since     5.1.0
+ */
+class FileItem extends ModelItem
+{
+	/**
+	 * @var \Kirby\Cms\File
+	 */
+	protected ModelWithContent $model;
+
+	/**
+	 * @var \Kirby\Panel\File
+	 */
+	protected Model $panel;
+
+	public function __construct(
+		File $file,
+		protected bool $dragTextIsAbsolute = false,
+		string|array|false|null $image = [],
+		string|null $info = null,
+		string|null $layout = null,
+		string|null $text = null,
+	) {
+		parent::__construct(
+			model: $file,
+			image: $image,
+			info: $info,
+			layout: $layout,
+			text: $text ?? '{{ file.filename }}',
+		);
+	}
+
+	protected function dragText(): string
+	{
+		return $this->panel->dragText(absolute: $this->dragTextIsAbsolute);
+	}
+
+	protected function permissions(): array
+	{
+		$permissions = $this->model->permissions();
+
+		return [
+			'delete' => $permissions->can('delete'),
+			'sort'   => $permissions->can('sort'),
+		];
+	}
+
+	public function props(): array
+	{
+		return [
+			...parent::props(),
+			'dragText'  => $this->dragText(),
+			'extension' => $this->model->extension(),
+			'filename'  => $this->model->filename(),
+			'mime'      => $this->model->mime(),
+			'parent'    => $this->model->parent()->panel()->path(),
+			'template'  => $this->model->template(),
+			'url'       => $this->model->url(),
+		];
+	}
+}

public/kirby/src/Panel/Ui/Item/ModelItem.php

@@ -0,0 +1,74 @@
+<?php
+
+namespace Kirby\Panel\Ui\Item;
+
+use Kirby\Cms\ModelWithContent;
+use Kirby\Panel\Model as Panel;
+use Kirby\Panel\Ui\Component;
+
+/**
+ * @package   Kirby Panel
+ * @author    Bastian Allgeier <bastian@getkirby.com>
+ * @link      https://getkirby.com
+ * @copyright Bastian Allgeier
+ * @license   https://getkirby.com/license
+ * @since     5.1.0
+ */
+class ModelItem extends Component
+{
+	protected string $layout;
+	protected Panel $panel;
+	protected string $text;
+
+	public function __construct(
+		protected ModelWithContent $model,
+		protected string|array|false|null $image = [],
+		protected string|null $info = null,
+		string|null $layout = null,
+		string|null $text = null,
+	) {
+		parent::__construct(component: 'k-item');
+
+		$this->layout = $layout ?? 'list';
+		$this->panel  = $this->model->panel();
+		$this->text   = $text ?? '{{ model.title }}';
+	}
+
+	protected function info(): string|null
+	{
+		return $this->model->toSafeString($this->info ?? false);
+	}
+
+	protected function image(): array|null
+	{
+		return $this->panel->image($this->image, $this->layout);
+	}
+
+	protected function link(): string
+	{
+		return $this->panel->url(true);
+	}
+
+	protected function permissions(): array
+	{
+		return $this->model->permissions()->toArray();
+	}
+
+	public function props(): array
+	{
+		return [
+			'id'          => $this->model->id(),
+			'image'       => $this->image(),
+			'info'        => $this->info(),
+			'link'        => $this->link(),
+			'permissions' => $this->permissions(),
+			'text'        => $this->text(),
+			'uuid'        => $this->model->uuid()?->toString(),
+		];
+	}
+
+	protected function text(): string
+	{
+		return $this->model->toSafeString($this->text);
+	}
+}

public/kirby/src/Panel/Ui/Item/PageItem.php

@@ -0,0 +1,74 @@
+<?php
+
+namespace Kirby\Panel\Ui\Item;
+
+use Kirby\Cms\ModelWithContent;
+use Kirby\Cms\Page;
+use Kirby\Panel\Model;
+
+/**
+ * @package   Kirby Panel
+ * @author    Bastian Allgeier <bastian@getkirby.com>
+ * @link      https://getkirby.com
+ * @copyright Bastian Allgeier
+ * @license   https://getkirby.com/license
+ * @since     5.1.0
+ */
+class PageItem extends ModelItem
+{
+	/**
+	 * @var \Kirby\Cms\Page
+	 */
+	protected ModelWithContent $model;
+
+	/**
+	 * @var \Kirby\Panel\Page
+	 */
+	protected Model $panel;
+
+	public function __construct(
+		Page $page,
+		string|array|false|null $image = [],
+		string|null $info = null,
+		string|null $layout = null,
+		string|null $text = null,
+	) {
+		parent::__construct(
+			model: $page,
+			image: $image,
+			info: $info,
+			layout: $layout,
+			text: $text ?? '{{ page.title }}',
+		);
+	}
+
+	protected function dragText(): string
+	{
+		return $this->panel->dragText();
+	}
+
+	protected function permissions(): array
+	{
+		$permissions = $this->model->permissions();
+
+		return [
+			'changeSlug'   => $permissions->can('changeSlug'),
+			'changeStatus' => $permissions->can('changeStatus'),
+			'changeTitle'  => $permissions->can('changeTitle'),
+			'delete'       => $permissions->can('delete'),
+			'sort'         => $permissions->can('sort'),
+		];
+	}
+
+	public function props(): array
+	{
+		return [
+			...parent::props(),
+			'dragText'    => $this->dragText(),
+			'parent'      => $this->model->parentId(),
+			'status'      => $this->model->status(),
+			'template'    => $this->model->intendedTemplate()->name(),
+			'url'         => $this->model->url(),
+		];
+	}
+}

public/kirby/src/Panel/Ui/Item/UserItem.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace Kirby\Panel\Ui\Item;
+
+use Kirby\Cms\ModelWithContent;
+use Kirby\Cms\User;
+
+/**
+ * @package   Kirby Panel
+ * @author    Bastian Allgeier <bastian@getkirby.com>
+ * @link      https://getkirby.com
+ * @copyright Bastian Allgeier
+ * @license   https://getkirby.com/license
+ * @since     5.1.0
+ */
+class UserItem extends ModelItem
+{
+	/**
+	 * @var \Kirby\Cms\User
+	 */
+	protected ModelWithContent $model;
+
+	public function __construct(
+		User $user,
+		string|array|false|null $image = [],
+		string|null $info = '{{ user.role.title }}',
+		string|null $layout = null,
+		string|null $text = null,
+	) {
+		parent::__construct(
+			model: $user,
+			image: $image,
+			info: $info,
+			layout: $layout,
+			text: $text ?? '{{ user.username }}',
+		);
+	}
+}