feat(pat contentbrowser): Register components with "@plone/registry"

src/pat/contentbrowser/contentbrowser.js

@@ -2,6 +2,29 @@ import { BasePattern } from "@patternslib/patternslib/src/core/basepattern";
 import Parser from "@patternslib/patternslib/src/core/parser";
 import registry from "@patternslib/patternslib/src/core/registry";
 import utils from "../../core/utils";
+import plone_registry from "@plone/registry";
+
+async function init_component_registry() {
+    // bug? set the component registry as empty dict the first time
+    // otherwise you get the error: "this._data.components is undefined"
+    if (plone_registry["components"] === undefined) {
+        // see @plone/registry
+        plone_registry["components"] = {};
+    }
+
+    if (plone_registry.getComponent("SelectedItem").component === undefined) {
+        const SelectedItem = (await import("./src/SelectedItem.svelte")).default;
+        plone_registry.registerComponent({
+            name: "SelectedItem",
+            component: SelectedItem,
+        });
+    }
+}
+
+// register default components in @plone/registry
+// here outside the pattern init() so that addons can override this
+// when their bundle depends on the "plone" bundle
+init_component_registry()
 
 // Contentbrowser pattern
 

src/pat/contentbrowser/src/SelectedItem.svelte

@@ -0,0 +1,59 @@
+<script>
+    import { getContext } from "svelte";
+    import { resolveIcon } from "./utils";
+
+    // current item index of parent iteration
+    export let idx;
+    // item data
+    export let item;
+
+    // parent method to remove selected item from list
+    const unselectItem = getContext("unselectItem");
+
+</script>
+
+<div class="selected-item border border-secondary-subtle rounded p-2 mb-1 bg-body-tertiary" data-uuid={item.UID}>
+    <div class="item-info">
+        <!-- svelte-ignore a11y-missing-attribute -->
+        <button
+            class="btn btn-link btn-sm link-secondary"
+            on:click={() => unselectItem(idx)}
+            ><svg use:resolveIcon={{ iconName: "x-circle" }} /></button
+        >
+        <div>
+            <span class="item-title">{item.Title}</span><br />
+            <span class="small">{item.path}</span>
+        </div>
+    </div>
+    {#if item.getURL && (item.getIcon || item.portal_type === "Image")}<img
+            src="{item.getURL}/@@images/image/mini"
+            alt={item.Title}
+        />{/if}
+</div>
+
+<style>
+    .selected-item {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: start;
+        justify-content: space-between;
+        cursor: move;
+    }
+    .selected-item > * {
+        margin-right: 0.5rem;
+        display: block;
+    }
+    .selected-item button {
+        cursor: pointer;
+        padding: 0 0.375rem 0.374rem 0;
+    }
+    .selected-item .item-info {
+        display: flex;
+        align-items: start;
+    }
+    .selected-item > img {
+        object-fit: cover;
+        width: 95px;
+        height: 95px;
+    }
+</style>

src/pat/contentbrowser/src/SelectedItems.svelte

@@ -1,14 +1,18 @@
 <script>
-    import { getContext, onMount } from "svelte";
-    import { flip } from "svelte/animate";
+    import { getContext, onMount, setContext } from "svelte";
     import { get_items_from_uids, resolveIcon } from "./utils.js";
     import Sortable from "sortablejs";
     import _t from "../../../core/i18n-wrapper";
     import events from "@patternslib/patternslib/src/core/events";
+    import plone_registry from "@plone/registry";
 
     let ref;
     let initializing = true;
 
+    // get registered SelectedItem component
+    const SelectedItemComponent = plone_registry.getComponent("SelectedItem");
+    console.log(SelectedItemComponent);
+
     // get reactive context config
     const config = getContext("config");
     const fieldId = $config.fieldId;
@@ -35,6 +39,10 @@
         selectedUids.update(() => $selectedItems.map((x) => x.UID));
     }
 
+    // use this function in "SelectedItem" component with
+    // const unselectItem = getContext("unselectItem")
+    setContext("unselectItem", unselectItem);
+
     async function initializeSelectedItemsStore() {
         const initialValue = $config.selection.length
             ? $config.selection
@@ -104,28 +112,7 @@
     <div class="content-browser-selected-items">
         {#if $selectedItems}
             {#each $selectedItems as selItem, i (selItem.UID)}
-                <div
-                    class="selected-item"
-                    animate:flip={{ duration: 500 }}
-                    data-uuid={selItem.UID}
-                >
-                    <div class="item-info">
-                        <!-- svelte-ignore a11y-missing-attribute -->
-                        <button
-                            class="btn btn-link btn-sm link-secondary"
-                            on:click={() => unselectItem(i)}
-                            ><svg use:resolveIcon={{ iconName: "x-circle" }} /></button
-                        >
-                        <div>
-                            <span class="item-title">{selItem.Title}</span><br />
-                            <span class="small">{selItem.path}</span>
-                        </div>
-                    </div>
-                    {#if selItem.getURL && (selItem.getIcon || selItem.portal_type === "Image")}<img
-                            src="{selItem.getURL}/@@images/image/mini"
-                            alt={selItem.Title}
-                        />{/if}
-                </div>
+                <svelte:component this={SelectedItemComponent.component} idx={i} item={selItem} />
             {/each}
         {/if}
         {#if !$selectedItems}
@@ -154,33 +141,4 @@
         padding: 0.5rem 0.5rem 0 0.5rem;
         flex: 1 1 auto;
     }
-    .content-browser-selected-items .selected-item {
-        border-radius: var(--bs-border-radius);
-        background-color: var(--bs-tertiary-bg);
-        border: var(--bs-border-style) var(--bs-border-color) var(--bs-border-width);
-        padding: 0.5rem;
-        margin-bottom: 0.5rem;
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: start;
-        justify-content: space-between;
-        cursor: move;
-    }
-    .content-browser-selected-items .selected-item > * {
-        margin-right: 0.5rem;
-        display: block;
-    }
-    .content-browser-selected-items .selected-item button {
-        cursor: pointer;
-        padding: 0 0.375rem 0.374rem 0;
-    }
-    .content-browser-selected-items .selected-item .item-info {
-        display: flex;
-        align-items: start;
-    }
-    .content-browser-selected-items .selected-item > img {
-        object-fit: cover;
-        width: 95px;
-        height: 95px;
-    }
 </style>