deploy: 3105ff3

plone · Dec 4, 2024 · e7ee9e5 · e7ee9e5
1 parent 16fc134
commit e7ee9e5
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 10 deletions.
diff --git a/dist/mockup/bundle.min.js b/dist/mockup/bundle.min.js
diff --git a/dist/mockup/bundle.min.js.map b/dist/mockup/bundle.min.js.map
diff --git a/.../chunks/18361.15ad34b4cf86cc4fb790.min.js → .../chunks/18361.35b67587317e85a05b5d.min.js b/.../chunks/18361.15ad34b4cf86cc4fb790.min.js → .../chunks/18361.35b67587317e85a05b5d.min.js
diff --git a/...nks/18361.15ad34b4cf86cc4fb790.min.js.map → ...nks/18361.35b67587317e85a05b5d.min.js.map b/...nks/18361.15ad34b4cf86cc4fb790.min.js.map → ...nks/18361.35b67587317e85a05b5d.min.js.map
diff --git a/.../chunks/85083.1ed2b5d5e8755aa1f85f.min.js → .../chunks/82752.14f2afab82ff9d97e3d8.min.js b/.../chunks/85083.1ed2b5d5e8755aa1f85f.min.js → .../chunks/82752.14f2afab82ff9d97e3d8.min.js
diff --git a/...nks/85083.1ed2b5d5e8755aa1f85f.min.js.map → ...nks/82752.14f2afab82ff9d97e3d8.min.js.map b/...nks/85083.1ed2b5d5e8755aa1f85f.min.js.map → ...nks/82752.14f2afab82ff9d97e3d8.min.js.map
diff --git a/dist/mockup/remote.min.js b/dist/mockup/remote.min.js
diff --git a/dist/mockup/remote.min.js.map b/dist/mockup/remote.min.js.map
diff --git a/pat/contenbrowser/index.html b/pat/contenbrowser/index.html
@@ -453,6 +453,12 @@ <h2>Configuration</h2>
 <td style="text-align:center">20</td>
 <td style="text-align:center">Maximum items to keep in recently used list. 0: no restriction.</td>
 </tr>
+<tr>
+<td style="text-align:center">customComponentKeys</td>
+<td style="text-align:center">dict</td>
+<td style="text-align:center">{}</td>
+<td style="text-align:center">Register custom components. Currently only &quot;SelectedItem&quot; implemented</td>
+</tr>
 </tbody>
 </table>
 <h2>Default</h2>
@@ -465,6 +471,12 @@ <h2>Select a single item</h2>
 <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span><br>    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><br>    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pat-contentbrowser<span class="token punctuation">"</span></span><br>    <span class="token attr-name">data-pat-contentbrowser</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>{"selectableTypes": ["Document"], "vocabularyUrl": "contentbrowser-test.json", "maximumSelectionSize": 1}<span class="token punctuation">'</span></span><br><span class="token punctuation">/></span></span></code></pre>
 <h2>Mode &quot;browse&quot;, Upload</h2>
 <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span><br>    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><br>    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pat-contentbrowser<span class="token punctuation">"</span></span><br>    <span class="token attr-name">data-pat-contentbrowser</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>{"selectableTypes": ["Image", "File"], "vocabularyUrl": "contentbrowser-test.json", "upload": true}<span class="token punctuation">'</span></span><br><span class="token punctuation">/></span></span></code></pre>
+<h2>Register custom component</h2>
+<p>Currently only for <code>SelectedItem</code> component available.</p>
+<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span><br>    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><br>    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pat-contentbrowser<span class="token punctuation">"</span></span><br>    <span class="token attr-name">data-pat-contentbrowser</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>{<br>        "customComponentKeys": {<br>            "SelectedItem": "pat-contentbrowser.myfield.MySelectedItemComponent",<br>        },<br>    }<span class="token punctuation">'</span></span><br><span class="token punctuation">/></span></span></code></pre>
+<p>Copy the existing component <code>src/SelectedItem.svelte</code> to your addon, customize it and register it in your JS bundle as follows:</p>
+<pre class="language-javascript"><code class="language-javascript"><span class="token operator">...</span><br><span class="token keyword">import</span> plone_registry <span class="token keyword">from</span> <span class="token string">"@plone/registry"</span><span class="token punctuation">;</span><br><span class="token operator">...</span><br><br><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">register_selecteditem_component</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>    <span class="token comment">// we register our component to a custom keyname,</span><br>    <span class="token comment">// which later can be used for pattern_options</span><br>    <span class="token keyword">const</span> SelectedImages <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">await</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">"./MySelectedItemComponent.svelte"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">;</span><br>    plone_registry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br>        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"pat-contentbrowser.myfield.MySelectedItemComponent"</span><span class="token punctuation">,</span><br>        <span class="token literal-property property">component</span><span class="token operator">:</span> SelectedImages<span class="token punctuation">,</span><br>    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token function">register_selecteditem_component</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token operator">...</span><br></code></pre>
+<p>Note: this needs the <code>svelte-loader</code> plugin in your webpack.config.js ... see mockups webpack config for info.</p>
 
       </main>
     </div>