@soleil-se/config-svelte 1.12.1 → 1.14.0

package/CHANGELOG.md

@@ -5,7 +5,20 @@ 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.14.0] - 2022-07-07
+
+- Add default slot for [ImageSelector](./components/ImageSelector).
+- Margin fix for [RadioGroup](./components/RadioGroup).
+
+## [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/actions/resizer.js

@@ -45,6 +45,12 @@ const resizer = (element) => {
   };
 
   element.addEventListener('mousedown', startResize, false);
+
+  document.documentElement.addEventListener('initialized', () => {
+    if (targetElement.offsetHeight > targetMinHeight) {
+      targetElement.style.height = `${targetElement.scrollHeight + 30}px`;
+    }
+  });
 };
 
 export default resizer;

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}>
@@ -32,6 +36,7 @@
 
 <style lang="scss">
   .list-component__item {
+    min-height: 26px;
     padding: 3px;
     cursor: grab;
     user-select: none;

package/components/ImageSelector/Component.svelte

@@ -76,7 +76,7 @@
     on:change={onChange}
     {required}
   />
-  <div>
+  <div class="form-group">
     {#if !hideDecorative}
       <Checkbox
         class="checkbox-group"
@@ -103,6 +103,7 @@
       />
     {/if}
   </div>
+  <slot />
 </Panel>
 
 <style>

package/components/ImageSelector/README.md

@@ -10,6 +10,7 @@ Custom panel component for selecting an image.
 - [Example](#example)
   - [Standard](#standard)
   - [Advanced](#advanced)
+- [Slots](#slots)
 
 <!-- /TOC -->
 
@@ -75,3 +76,13 @@ export let hideDecorative = false;
 
 <ImageSelector bind:node={values.imageNode} bind:alt={values.imageAlt} />
 ```
+
+## Slots
+
+Default slot
+
+```svelte
+<ImageSelector name="image" heading="Bild" />
+  <p class="help-block">Some helpful text.</p>
+</ImageSelector>
+```

package/components/RadioGroup/Component.svelte

@@ -48,8 +48,8 @@
       {option.label || option}
     </label>
   {/each}
+  <input type="hidden" {value} {name} />
 </fieldset>
-<input type="hidden" {value} {name} />
 
 <style lang="scss">
   legend {

package/package.json

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