@soleil-se/config-svelte 1.12.0 → 1.13.0

package/CHANGELOG.md

@@ -5,7 +5,15 @@ 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.11.0] - 2022-05-23
+## [1.13.0] - 2022-06-23
+
+- Add `icon` prop to CustomList for setting an icon to the list items.
+
+## [1.12.1] - 2022-05-24
+
+- Fixed that values wasn't saved properly in Modal and CustomList.
+
+## [1.12.0] - 2022-05-23
 
 - New component: [Modal](./components/Modal).
 - New component: [CustomList](./components/CustomList).

package/components/CustomList/Component.svelte

@@ -17,6 +17,7 @@
   export let required = false;
   export let name = undefined;
   export let disabled = false;
+  export let icon;
 
   export let value = [];
   value = name ? values[name] ?? value : value;
@@ -105,6 +106,7 @@
         <SortableItem
           {...item}
           {disabled}
+          {icon}
           on:edit={onEdit}
           on:remove={onRemove}
           on:click={tempDisableDrag}

package/components/CustomList/README.md

@@ -14,6 +14,7 @@ export let label;
 export let required = false;
 export let name = undefined;
 export let disabled = false;
+export let icon;
 export let value = [];
 ```
 
@@ -61,3 +62,21 @@ function getCustomList() {
   })) || [];
 }
 ```
+
+## Icons
+
+Pass an icon class to the list item, this can be an already existing icon from `sitevision-icon` or `glyphicons` that are available in edit mode or a custom class.  
+No list of icons is available, but you can inspect an icon in the edit interface and copy the class name.
+
+```svelte
+<script>
+  import { Panel, CustomList, InputField, NodeSelector } from '@soleil-se/svelte-config';
+</script>
+
+<Panel heading="Inställningar">     
+  <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" />
+  </CustomList>
+</Panel>
+```

package/components/CustomList/internal/SortableItem.svelte

@@ -4,6 +4,7 @@
   export let id;
   export let name;
   export let disabled;
+  export let icon;
 
   const dispatch = createEventDispatcher();
 
@@ -18,6 +19,9 @@
 </script>
 
 <div class="list-component__item" on:dblclick={editItem} on:click>
+  {#if icon}
+    <i class="sv-list-icon {icon}" aria-hidden="true" />
+  {/if}
   <span class="item-name">{name}</span>
   <div class="list-component__item-actions">
     <button {disabled} on:click={editItem}>

package/createConfigApp/index.js

@@ -17,4 +17,13 @@ export default function createConfigApp(App) {
 
     return app;
   };
+
+  window.getValues = () => {
+    // eslint-disable-next-line no-underscore-dangle
+    const values = window._getValues();
+    return {
+      ...values,
+      __lastEditTimestamp: new Date().getTime(),
+    };
+  };
 }

package/package.json

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