@soleil-se/config-svelte 1.22.0 → 1.23.0

package/CHANGELOG.md

@@ -1,28 +1,35 @@
-# Changelog
+---
+title: Changelog
+---
 
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.23.0] - 2024-03-07
+
+- List item templating in `CustomList` with [CustomListItemTemplate](/packages/soleil/svelte-config/components/customlist/#list-item-template).
+- Trigger manual update of `CustomList` with [triggerUpdate](/packages/soleil/svelte-config/components/customlist/#dynamic-content) function.
+
 ## [1.22.0] - 2024-02-13
 
 - More lenient `@sitevision/api` peer dependency range.
-- Try to use `window.sv.getValues()` if available since `window._getValues()` is deprecated.
+- Try to use `window.sv.getValues()` first since `window._getValues()` is deprecated.
 
 ## [1.21.0] - 2023-10-13
 
-- Add `legendVisuallyHidden` prop for [RadioGroup](./components/RadioGroup) and [CheckboxGroup](./components/CheckboxGroup).
-- Add `class` prop for [Panel](./components/Panel).
-- Add `removable` prop for [CustomSelector](./components/CustomSelector).
+- Add `legendVisuallyHidden` prop for [RadioGroup](/packages/soleil/svelte-config/components/radiogroup) and [CheckboxGroup](/packages/soleil/svelte-config/components/checkboxgroup).
+- Add `class` prop for [Panel](/packages/soleil/svelte-config/components/panel).
+- Add `removable` prop for [CustomSelector](/packages/soleil/svelte-config/components/customselector).
 
 ## [1.20.1] - 2023-09-25
 
-- Fix element containting title in [Modal](./components/Modal).
+- Fix element containting title in [Modal](/packages/soleil/svelte-config/components/modal).
 
 ## [1.20.0] - 2023-09-25
 
-- Add footer slot in [Modal](./components/Modal).
+- Add footer slot in [Modal](/packages/soleil/svelte-config/components/modal).
 
 ## [1.19.0] - 2023-05-17
 
@@ -38,19 +45,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.18.0] - 2023-01-20
 
-- Option templating in [CustomSelector](./components/CustomSelector).
+- Option templating in [CustomSelector](/packages/soleil/svelte-config/components/customselector).
 - Add global Select2 styling.
 - Modal now closes open Select2 dropdowns.
 
 ## [1.17.0] - 2022-12-01
 
-- New component: [RepositoryNodeSelector](./components/RepositoryNodeSelector).
-- New utility API: [getAppContext](./#getappcontext).
-- New server API: [createAppContext](./#context)
+- New component: [RepositoryNodeSelector](/packages/soleil/svelte-config/components/repositorynodeselector).
+- New utility API: [getAppContext](/packages/soleil/svelte-config#getappcontext).
+- New server API: [createAppContext](/packages/soleil/svelte-config#context)
 
 ## [1.16.2] - 2022-11-24
 
-- [ListSelector](./components/ListSelector) now works properly in [CustomList](./components/CustomList).
+- [ListSelector](/packages/soleil/svelte-config/components/listselector) now works properly in [CustomList](/packages/soleil/svelte-config/components/customlist).
 
 ## [1.16.1] - 2022-11-18
 
@@ -58,17 +65,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.16.0] - 2022-11-09
 
-- Add singular and plural suffix support for [NumberSpinner](./components/NumberSpinner)
+- Add singular and plural suffix support for [NumberSpinner](/packages/soleil/svelte-config/components/numberspinner)
 
 ## [1.15.0] - 2022-09-15
 
-- Required was not re-evaluated properly in [InputField](./components/InputField), [NodeSelector](./components/NodeSelector) and [TagSelector](./components/TagSelector).
+- Required was not re-evaluated properly in [InputField](/packages/soleil/svelte-config/components/inputfield), [NodeSelector](/packages/soleil/svelte-config/components/nodeselector) and [TagSelector](/packages/soleil/svelte-config/components/tagselector).
 - Add `show` prop for all components to toggle visibility without re-rendering.
 
 ## [1.14.0] - 2022-07-07
 
-- Add default slot for [ImageSelector](./components/ImageSelector).
-- Margin fix for [RadioGroup](./components/RadioGroup).
+- Add default slot for [ImageSelector](/packages/soleil/svelte-config/components/imageselector).
+- Margin fix for [RadioGroup](/packages/soleil/svelte-config/components/radiogroup).
 
 ## [1.13.0] - 2022-06-23
 
@@ -80,22 +87,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.12.0] - 2022-05-23
 
-- New component: [Modal](./components/Modal).
-- New component: [CustomList](./components/CustomList).
+- New component: [Modal](/packages/soleil/svelte-config/components/modal).
+- New component: [CustomList](/packages/soleil/svelte-config/components/customlist).
 
 ## [1.10.1] - 2022-03-08
 
-- Cast saved value to Number in [NumberSpinner](./components/NumberSpinner).
-- Fix reactivity for `suffix` prop in [NumberSpinner](./components/NumberSpinner).
+- Cast saved value to Number in [NumberSpinner](/packages/soleil/svelte-config/components/numberspinner).
+- Fix reactivity for `suffix` prop in [NumberSpinner](/packages/soleil/svelte-config/components/numberspinner).
 
 ## [1.10.0] - 2022-03-07
 
-- Added `multiple` prop for [CustomSelector](./components/CustomSelector).
-- First value is always selected in [RadioGroup](./components/RadioGroup) if nothing is selected.
+- Added `multiple` prop for [CustomSelector](/packages/soleil/svelte-config/components/customselector).
+- First value is always selected in [RadioGroup](/packages/soleil/svelte-config/components/radiogroup) if nothing is selected.
 
 ## [1.9.0] - 2021-12-06
 
-- Added [CustomSelector](./components/CustomSelector)
+- Added [CustomSelector](/packages/soleil/svelte-config/components/customselector)
 
 ## [1.8.4] - 2021-12-03
 

package/components/CustomList/Component.svelte

@@ -1,6 +1,5 @@
 <script>
   import { createEventDispatcher, onMount, tick } from 'svelte';
-
   import { generateId, addGeneratedIds } from '../../utils';
   import { resizer } from '../../actions';
   import i18n from './i18n';
@@ -11,7 +10,7 @@
   import EditModal from './internal/EditModal.svelte';
   import AddModal from './internal/AddModal.svelte';
 
-  const values = window.CONFIG_VALUES || {};
+  const configValues = window.CONFIG_VALUES || {};
   const dispatch = createEventDispatcher();
 
   export let label;
@@ -22,7 +21,7 @@
   export let icon;
 
   export let value = [];
-  value = name ? values[name] ?? value : value;
+  value = name ? configValues[name] ?? value : value;
 
   addGeneratedIds(value);
 
@@ -45,7 +44,10 @@
     await tick();
     items = value.map((id) => ({
       id,
-      name: document.querySelector(`#modal_${id} input`)?.value || id,
+      name:
+        document.querySelector(`#modal_${id} .custom-list-item-template`)?.innerHTML ||
+        document.querySelector(`#modal_${id} input:not([type=radio],[type=checkbox])`)?.value ||
+        id,
     }));
   }
 
@@ -93,6 +95,10 @@
     onChange();
   }
 
+  function triggerUpdate() {
+    updateItems();
+  }
+
   onMount(updateItems);
 </script>
 
@@ -106,11 +112,11 @@
 
 {#each modals as id, index (id)}
   <EditModal {id} open={editId === id} on:save={onEditSave} on:close={onEditClose}>
-    <slot {id} {index} />
+    <slot {id} {index} {triggerUpdate} />
   </EditModal>
 {/each}
 <AddModal {name} open={addModalOpen} on:save={onAddSave} on:close={onAddClose} let:id>
-  <slot {id} index={items.length} />
+  <slot {id} index={items.length} {triggerUpdate} />
 </AddModal>
 
 <div class="form-group" class:hidden={!show}>
@@ -121,13 +127,15 @@
     <div class="list-component__list-wrapper ui-resizable">
       <Sortable {dragDisabled} {items} on:finalize={onFinalize} let:item>
         <SortableItem
-          {...item}
+          id={item.id}
           {disabled}
           {icon}
           on:edit={onEdit}
           on:remove={onRemove}
           on:click={tempDisableDrag}
-        />
+        >
+          {@html item.name}
+        </SortableItem>
       </Sortable>
       <div class="ui-resizable-handle ui-resizable-s" use:resizer />
     </div>

package/components/CustomList/CustomListItemTemplate.svelte

@@ -0,0 +1,3 @@
+<div style:display="none" class="custom-list-item-template">
+  <slot />
+</div>

package/components/CustomList/README.md

@@ -1,11 +1,11 @@
-# CustomList
+---
+title: CustomList
+---
 
 A sortable list component for adding multiple grouped configuration components in modals.
 
-![CustomList](../../images/CustomList.png)
-![CustomListModal](../../images/CustomListModal.png)
-
-[[toc]]
+![CustomList](../images/CustomList.png)
+![CustomListModal](../images/CustomListModal.png)
 
 ## Props
 
@@ -36,17 +36,19 @@ This id needs to be prefixed to the `name` attribute.
   import { Panel, CustomList, InputField, NodeSelector } from '@soleil-se/svelte-config';
 </script>
 
-<Panel heading="Inställningar">     
+<Panel>     
   <CustomList name="customList" label="Custom list" let:id>
     <InputField name="{id}_name" label="Name" />
-    <NodeSelector name="{id}_page" label="Page" type="page-selector" />
+    <NodeSelector name="{id}_page" label="Page" />
   </CustomList>
 </Panel>
 ```
 
 ### Advanced
 
-Component is currently **not** supported in advanced configs.
+This component is currently **not** supported in advanced configs out of the box.  
+If you need to use it in an advanced config you can manually handle the state to normalize
+and flatten it for saving to the server.
 
 ## AppData
 
@@ -74,10 +76,100 @@ No list of icons is available, but you can inspect an icon in the edit interface
   import { Panel, CustomList, InputField, NodeSelector } from '@soleil-se/svelte-config';
 </script>
 
-<Panel heading="Inställningar">     
+<Panel>     
   <CustomList name="customList" label="Custom list" icon="sitevision-icons file" let:id>
     <InputField name="{id}_name" label="Name" />
-    <NodeSelector name="{id}_page" label="Page" type="page-selector" />
+    <NodeSelector name="{id}_page" label="Page" />
+  </CustomList>
+</Panel>
+```
+
+## List item template
+
+Sometimes you want full control over the list items, if some other value than the first input field 
+wants to be displayed or a completely custom template.  
+For this to work it's easiest to handle the modal content in a separate component.
+
+```svelte
+// App.svelte
+<script>
+  import { Panel, CustomList } from '@soleil-se/svelte-config';
+  import Settings from './Settings.svelte';
+</script>
+
+<Panel>     
+  <CustomList name="customList" label="Custom list" let:id>
+    <Settings {id} />
+  </CustomList>
+</Panel>
+```
+  
+```svelte
+// Settings.svelte
+<script>
+  import { InputField, NodeSelector, CustomListItemTemplate } from '@soleil-se/svelte-config';
+
+  export let id;
+  let name;  
+</script>
+
+<CustomListItemTemplate>
+  Page: {name}
+</CustomListItemTemplate>
+<InputField name="{id}_name" label="Name" bind:value={name} />
+<NodeSelector name="{id}_page" label="Page" type="page-selector" />
+```
+
+### Dynamic content
+
+A more advanced example with dynamically fetched content, a manual update of the list item is needed 
+on mount since the list doesn't know when all data is available.
+
+```svelte
+// App.svelte
+<script>
+  import { Panel, CustomList } from '@soleil-se/svelte-config';
+  import Settings from './Settings.svelte';
+</script>
+
+<Panel>     
+  <CustomList name="customList" label="Custom list" let:id let:triggerUpdate>
+    <Settings {id} {triggerUpdate} />
   </CustomList>
 </Panel>
 ```
+
+```svelte
+// Settings.svelte
+<script>
+  import { NodeSelector, CustomListItemTemplate } from '@soleil-se/svelte-config';
+  import { onMount } from 'svelte';
+
+  export let id;
+  export let triggerUpdate;
+
+  let pageId;
+  let name;  
+  let url;
+
+  async function fetchPageDetails() {
+    if (!pageId) return;
+    const res = await fetch(`/rest-api/1/0/${pageId}/properties`)
+      .then((res) => res.json());
+
+    name = res.displayName;
+    url = res.URL;
+  }
+
+  onMount(() => {
+    await fetchPageDetails();
+    triggerUpdate();
+  });
+  
+</script>
+
+<CustomListItemTemplate>
+  {name} ({url})
+</CustomListItemTemplate>
+<NodeSelector name="{id}_page" label="Page" on:change={fetchPageDetails} bind:value={pageId} />
+```

package/components/CustomList/index.js

@@ -1 +1,2 @@
 export { default } from './Component.svelte';
+export { default as CustomListItemTemplate } from './CustomListItemTemplate.svelte';

package/components/CustomList/internal/AddModal.svelte

@@ -13,7 +13,9 @@
 
   const dispatch = createEventDispatcher();
 
-  $: if (open) id = generateId(name || 'item');
+  $: if (open) {
+    id = generateId(name || 'item');
+  }
 
   const onClose = () => {
     dispatch('close');
@@ -29,7 +31,7 @@
   };
 </script>
 
-<Modal title={i18n('add')} on:save={onSave} on:close={onClose} {open} bind:element>
+<Modal {open} title={i18n('add')} on:save={onSave} on:close={onClose} bind:element>
   {#if id}
     <slot {id} />
   {/if}

package/components/CustomList/internal/EditModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import i18n from '../i18n';
   import Modal from '../../Modal';
-  
+
   export let id;
   export let open = false;
 
@@ -13,7 +13,7 @@
   };
 </script>
 
-<div id="modal_{id}">
+<div id="modal_{id}" style:display="contents">
   <Modal title="{i18n('edit')} {name}" bind:open bind:element on:open={onOpen} on:save on:close>
     <slot />
   </Modal>

package/components/CustomList/internal/Sortable.svelte

@@ -25,6 +25,9 @@
 </script>
 
 <ul
+  class="list-component__list"
+  on:consider={onConsider}
+  on:finalize={onFinalize}
   use:dndzone={{
     items,
     flipDurationMs: 100,
@@ -34,12 +37,9 @@
     autoAriaDisabled: true,
     dragDisabled,
   }}
-  on:consider={onConsider}
-  on:finalize={onFinalize}
-  class="list-component__list"
 >
   {#each items as item (item.id)}
-    <li aria-label={item.name} animate:flip={{ duration: 100 }} tabindex="-1">
+    <li aria-label={item.name} tabindex="-1" animate:flip={{ duration: 100 }}>
       <slot {item} />
     </li>
   {/each}

package/components/CustomList/internal/SortableItem.svelte

@@ -2,7 +2,6 @@
   import { createEventDispatcher } from 'svelte';
 
   export let id;
-  export let name;
   export let disabled;
   export let icon;
 
@@ -23,7 +22,9 @@
   {#if icon}
     <i class="sv-list-icon {icon}" aria-hidden="true" />
   {/if}
-  <span class="item-name">{name}</span>
+  <span class="item-name">
+    <slot />
+  </span>
   <div class="list-component__item-actions">
     <button {disabled} on:click={editItem}>
       <i class="glyphicons edit" aria-hidden="true" />
@@ -56,9 +57,9 @@
   .list-component__item-actions {
     button {
       padding: 0;
+      appearance: none;
       background: none;
       border: none;
-      appearance: none;
     }
 
     :global(li:focus-within) & i {

package/index.js

@@ -14,7 +14,7 @@ export { default as ImageSelector } from './components/ImageSelector';
 export { default as TagSelector } from './components/TagSelector';
 export { default as CustomSelector } from './components/CustomSelector';
 export { default as Modal } from './components/Modal';
-export { default as CustomList } from './components/CustomList';
+export { default as CustomList, CustomListItemTemplate } from './components/CustomList';
 export { default as RepositoryNodeSelector } from './components/RepositoryNodeSelector';
 
 export { default as createConfigApp } from './createConfigApp';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/config-svelte",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",