@soleil-se/config-svelte 1.5.1 → 1.6.0

package/CHANGELOG.md

@@ -5,6 +5,21 @@ 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.6.0] - 2021-08-25
+
+### Added
+
+- I18n utility.
+- Translations for components with translatable text.
+- Spread rest props on input element in InputField.
+- Docs with links to readme for each component.
+
+## [1.5.2] - 2021-08-18
+
+### Fixed
+
+- DropdownSelector values was not saved properly when set multiple times.
+
 ## [1.5.1] - 2021-08-12
 
 ### Fixed

package/components/Checkbox/Component.svelte

@@ -22,6 +22,13 @@
   };
 </script>
 
+<!--
+  @component
+  A checkbox component.  
+
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/Checkbox/)  
+-->
+
 <div class="form-group {className}">
   <input
     bind:checked={value}

package/components/Checkbox/README.md

@@ -1,5 +1,7 @@
 # Checkbox
 
+![Checkbox](../../images/Checkbox.png)
+
 ## Props
 
 ```javascript
@@ -12,10 +14,13 @@ export let value;
 ```
 
 ## Default value
+
 Use checked attribute if the checkbox should be checked as default
+
 ```svelte
 <Checkbox name="checkbox" label="Checkbox" checked />
 ```
+
 ## Examples
 
 ### Standard

package/components/CheckboxGroup/Component.svelte

@@ -29,6 +29,13 @@
   };
 </script>
 
+<!--
+  @component
+  A checkbox group component.
+
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/CheckboxGroup/)  
+-->
+
 <fieldset class="form-group {className}">
   <legend>{legend}</legend>
   {#each options as option, index}
@@ -104,5 +111,4 @@
   input {
     margin: -1px;
   }
-
 </style>

package/components/CheckboxGroup/README.md

@@ -1,6 +1,9 @@
 # CheckboxGroup
 
+![CheckboxGroup](../../images/CheckboxGroup.png)
+
 ## Props
+
 ```javascript
 // ID, generates automatically if nothing is passed
 export let id = generateId();
@@ -17,7 +20,9 @@ export let value;
 ```
 
 ## Default value
+
 Use the value prop to set a default value when not binding the value:
+
 ```svelte
 <CheckboxGroup
   name="checkboxGroup1"
@@ -30,6 +35,7 @@ Use the value prop to set a default value when not binding the value:
 ## Example
 
 ### Standard
+
 ```svelte
 <script>
 import { Panel, CheckboxGroup } from '@soleil-se/svelte-config';
@@ -55,6 +61,7 @@ import { Panel, CheckboxGroup } from '@soleil-se/svelte-config';
 ```
 
 ### Advanced
+
 ```svelte
 <script>
 import { Panel, CheckboxGroup } from '@soleil-se/svelte-config';

package/components/DropdownSelector/Component.svelte

@@ -33,7 +33,6 @@
     const [el] = setupComponent(id)
       .on('change', (e) => {
         value = e.val || value;
-        if (name) values[name] = value;
         dispatch('input', value);
         dispatch('change', value);
       })
@@ -51,6 +50,13 @@
   });
 </script>
 
+<!--
+  @component
+  Wrapper component for Sitevision [dropdown selectors](https://developer.sitevision.se/docs/webapps/configuration#h-Sitevisioncomponents).   
+
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/DropdownSelector/)  
+-->
+
 <div class="form-group {className}" {hidden}>
   <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
   <select

package/components/DropdownSelector/README.md

@@ -1,8 +1,15 @@
 # DropdownSelector
 
+Wrapper component for Sitevision [dropdown selectors](https://developer.sitevision.se/docs/webapps/configuration#h-Sitevisioncomponents).  
+
+![DropdownSelector](../../images/DropdownSelector.png)
+
+# DropdownSelector
+
 <!-- TOC -->
 
 - [Props](#props)
+  - [Type](#type)
 - [Example](#example)
   - [Standard](#standard)
   - [Advanced](#advanced)
@@ -24,6 +31,18 @@ export let disabled = false;
 export let value = '';
 ```
 
+### Type
+
+Possible values for `type`:
+
+- `metadata`
+- `template`
+- `oauth2-configuration`
+- `virtual-group`
+- `search-index`
+- `font`
+- `color`
+
 ## Example
 
 ### Standard
@@ -34,7 +53,7 @@ import { Panel, DropdownSelector } from '@soleil-se/svelte-config';
 </script>
 
 <Panel heading="Inställningar">     
-  <DropdownSelector name="metadata" type="metadata-selector" label="Metadata" />     
+  <DropdownSelector name="metadata" type="metadata" label="Metadata" />     
 </Panel>
 ```
 
@@ -55,7 +74,7 @@ onSave(() => values);
 </script>
 
 <Panel heading="Inställningar">     
-  <DropdownSelector bind:value={values.metadata} type="metadata-selector" label="Metadata" />     
+  <DropdownSelector bind:value={values.metadata} type="metadata" label="Metadata" />     
 </Panel>
 ```
 

package/components/ImageSelector/Component.svelte

@@ -3,6 +3,7 @@
   import { createEventDispatcher } from 'svelte';
 
   import { triggerInput } from '../../utils';
+  import i18n from './i18n';
   import Panel from '../Panel';
   import NodeSelector from '../NodeSelector';
   import InputField from '../InputField';
@@ -11,7 +12,7 @@
   const values = window.CONFIG_VALUES || {};
 
   export let name = undefined;
-  export let heading = 'Bild';
+  export let heading = i18n('heading');
   export let required = false;
   export let node;
   export let alt;
@@ -56,30 +57,28 @@
 
 </script>
 
+<!--
+  @component
+  Custom panel component for selecting an image.
+
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/ImageSelector/)  
+-->
+
 <Panel {heading}>
   <NodeSelector
     name="{name}Node"
-    label="Välj bild"
+    label={i18n('selectImage')}
     type="image"
     bind:value={node}
     on:change={onChange}
     {required}
   />
   {#if useCustomAlt}
-    <InputField name="{name}Alt" label="Alt-text" required bind:value={alt} />
+    <InputField name="{name}Alt" label={i18n('altText')} required bind:value={alt} />
   {:else}
-    <InputField label="Alt-text (från bildbeskrivning)" value={imageArchiveAlt} readonly disabled>
+    <InputField label={i18n('altFromCaption')} value={imageArchiveAlt} readonly disabled>
       <input bind:this={validationEl} class="sr-only" />
     </InputField>
   {/if}
-  <div>
-    <Checkbox bind:value={useCustomAlt} label="Ange egen alt-text" on:change={onUseCustomToggle} />
-  </div>
+  <Checkbox bind:value={useCustomAlt} label={i18n('customAltText')} on:change={onUseCustomToggle} />
 </Panel>
-
-<style>
-  div {
-    margin-top: -10px;
-  }
-
-</style>

package/components/ImageSelector/README.md

@@ -1,6 +1,8 @@
 # ImageSelector
 
 Custom panel component for selecting an image.
+
+![ImageSelector](../../images/ImageSelector.png)
 <!-- TOC -->
 
 - [AppData](#appdata)
@@ -13,7 +15,7 @@ Custom panel component for selecting an image.
 
 ## AppData
 
-If used with standard name all values will be prefixed with the name property provided to the component.
+If used with standard name all values will be prefixed with the name property provided to the component.  
 For example if `name="image"` the values will be available as `imageNode` and `imageAlt` (if custom alt-text is set).
 
 ```js

package/components/ImageSelector/i18n.js

@@ -0,0 +1,25 @@
+import createI18n from '../../utils/createI18n';
+
+export default createI18n({
+  sv: {
+    heading: 'Bild',
+    selectImage: 'Välj bild',
+    altText: 'Alt-text',
+    altFromCaption: 'Alt-text (från bildbeskrivning)',
+    customAltText: 'Ange egen alt-text',
+  },
+  no: {
+    heading: 'Bilde',
+    selectImage: 'Velg bilde',
+    altText: 'Alt-tekst',
+    altFromCaption: 'Alt-tekst (fra bildebeskrivelse)',
+    customAltText: 'Skriv inn din egen alt-tekst',
+  },
+  en: {
+    heading: 'Image',
+    selectImage: 'Select image',
+    altText: 'Alt text',
+    altFromCaption: 'Alt text (from image caption)',
+    customAltText: 'Use custom alt text',
+  },
+});

package/components/InputField/Component.svelte

@@ -7,34 +7,50 @@
   const values = window.CONFIG_VALUES || {};
   const dispatch = createEventDispatcher();
 
+  /** @type {string} */
   export let id = generateId();
+  /** @type {string} */
   export let label;
+  /** @type {string} */
   export let type = 'text';
+  /** @type {string} */
   export let name = undefined;
+  /** @type {boolean} */
   export let required = false;
+  /** @type {boolean} */
   export let disabled = false;
+  /** @type {boolean} */
   export let readonly = false;
-  export let maxlength = undefined;
-  export let pattern = undefined;
+  /** @type {number} */
   export let rows = 3;
+  /** @type {string} */
   export let value = '';
+  /** @type {function} */
   export let action = prefixHttps;
-  value = name ? values[name] ?? value : value;
-
+  
   let className = '';
+  /** @type {string} */
   export { className as class };
+  
+  value = name ? values[name] ?? value : value;
 
   $: isTextarea = type === 'textarea';
   $: required = required && !disabled && !readonly;
 
   const onInput = ({ target }) => {
     value = type.match(/^(number|range)$/) ? +target.value : target.value;
-    if (name) values[name] = value;
     dispatch('input', value);
     dispatch('change', value);
   };
 </script>
 
+<!--
+  @component
+  Component for input fields and textareas.  
+
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/InputField/)  
+-->
+
 <div class="form-group {className}">
   <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
   {#if isTextarea}
@@ -43,11 +59,11 @@
       {id}
       {name}
       {required}
-      {maxlength}
       {disabled}
       {readonly}
       {value}
       {rows}
+      {...$$restProps}
       on:input={onInput}
     />
   {:else}
@@ -57,11 +73,10 @@
       {name}
       {type}
       {required}
-      {maxlength}
       {disabled}
       {readonly}
-      {pattern}
       {value}
+      {...$$restProps}
       use:action
       on:input={onInput}
     />

package/components/InputField/README.md

@@ -1,6 +1,9 @@
 # InputField
-Wrapper for input fields.   
+
+Wrapper for input fields.  
 Automatically prefixes https:// if field type is `url`.
+
+![InputField](../../images/InputField.png)
 <!-- TOC -->
 
 - [Props](#props)
@@ -42,9 +45,10 @@ export let value = '';
 ## Example
 
 ### Standard
+
 ```svelte
 <script>
-import { Panel, InputField } from '@soleil-se/svelte-config';
+  import { Panel, InputField } from '@soleil-se/svelte-config';
 </script>
 
 <Panel heading="Inställningar">     
@@ -56,15 +60,15 @@ import { Panel, InputField } from '@soleil-se/svelte-config';
 
 ```svelte
 <script>
-import { Panel, InputField } from '@soleil-se/svelte-config';
-import { onSave } from '@soleil-se/svelte-config/utils';
+  import { Panel, InputField } from '@soleil-se/svelte-config';
+  import { onSave } from '@soleil-se/svelte-config/utils';
 
-const values = {
-  text: '',  
-  ...window.CONFIG_VALUES
-};
+  const values = {
+    text: '',  
+    ...window.CONFIG_VALUES
+  };
 
-onSave(() => values);
+  onSave(() => values);
 
 </script>
 
@@ -74,16 +78,19 @@ onSave(() => values);
 ```
 
 ## Slots
+
 Default slot after input field.
+
 ```svelte
 <InputField name="text" label="Text">
   <p class="help-block">Some helpful text</p>
 </InputField>
 ```
+
 ## Default value
+
 Use the value attribute to set a default value:
+
 ```svelte
 <InputField  name="text" label="Text" value="Default text" />
 ```
-
-

package/components/LinkSelector/Component.svelte

@@ -1,6 +1,7 @@
 <script>
   import { createEventDispatcher } from 'svelte';
   import { show, prefixMail, prefixTel } from '../../actions';
+  import i18n from './i18n';
 
   import Panel from '../Panel';
   import RadioGroup from '../RadioGroup';
@@ -11,7 +12,7 @@
 
   const dispatch = createEventDispatcher();
 
-  export let heading;
+  export let heading = i18n('heading');
   export let name;
   export let disabled = false;
   export let required = false;
@@ -23,11 +24,11 @@
   export { className as class };
 
   $: selectableTypes = [
-    { label: 'Intern', value: 'internal' },
-    { label: 'Extern', value: 'external' },
-    { label: 'Fil', value: 'file' },
-    { label: 'E-post', value: 'mail' },
-    { label: 'Telefonnummer', value: 'tel' },
+    { label: i18n('internal'), value: 'internal' },
+    { label: i18n('external'), value: 'external' },
+    { label: i18n('file'), value: 'file' },
+    { label: i18n('mail'), value: 'mail' },
+    { label: i18n('tel'), value: 'tel' },
   ].filter((type) => types.includes(type.value));
 
   $: isInternal = value.type === 'internal';
@@ -51,6 +52,13 @@
   };
 </script>
 
+<!--
+  @component
+  Custom panel component for selecting a link.
+
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/LinkSelector/)  
+-->
+
 <Panel {heading} class={className} {required}>
   <slot name="top" />
   {#if name}<input type="hidden" name={`${name}Value`} value={value.value} />{/if}
@@ -72,7 +80,7 @@
       bind:value={selected.internal}
       {disabled}
       type="page-selector"
-      label="Intern"
+      label={i18n('internal')}
       on:change={onChange}
       required={required && isInternal}
     />
@@ -81,7 +89,7 @@
     <InputField
       bind:value={selected.external}
       {disabled}
-      label="Extern"
+      label={i18n('external')}
       type="url"
       on:change={onChange}
       required={required && isExternal}
@@ -92,7 +100,7 @@
       bind:value={selected.file}
       {disabled}
       type="file-selector"
-      label="Fil"
+      label={i18n('file')}
       on:change={onChange}
       required={required && isFile}
     />
@@ -102,7 +110,7 @@
     <InputField
       bind:value={selected.mail}
       {disabled}
-      label="E-post"
+      label={i18n('mail')}
       action={prefixMail}
       on:change={onChange}
       required={required && isMail}
@@ -112,7 +120,7 @@
     <InputField
       bind:value={selected.tel}
       {disabled}
-      label="Telefonnummer"
+      label={i18n('tel')}
       type="tel"
       action={prefixTel}
       on:change={onChange}
@@ -124,7 +132,7 @@
     bind:value={value.newWindow}
     name={name ? `${name}NewWindow` : ''}
     {disabled}
-    label="Öppna i ny flik"
+    label={i18n('newTab')}
     on:change={onChange}
   />
   <slot name="bottom" />

package/components/LinkSelector/README.md

@@ -1,8 +1,12 @@
 # LinkSelector
-A panel component with link selector for selecting internal page, external url or file.
+
+Custom panel component for selecting a link.
+
+![LinkSelector](../../images/LinkSelector.png)
 
 ## AppData
-If used with standard name all values will be prefixed with the name property provided to the component.   
+
+If used with standard name all values will be prefixed with the name property provided to the component.
 For example if `name="link"` the values will be available as `linkValue`, `linkType` and `linkNewWindow`.
 
 ```js
@@ -15,6 +19,7 @@ const getLink = () => ({
 });
 
 ```
+
 ## Props
 
 ```javascript
@@ -33,7 +38,9 @@ export let value;
 ```
 
 ## Slots
+
 Top and bottom slots before and after link selector.
+
 ```svelte
 <LinkSelector
   name="link"
@@ -62,6 +69,7 @@ Top and bottom slots before and after link selector.
 ## Example
 
 ### Standard
+
 ```svelte
 <script>
 import { LinkSelector } from '@soleil-se/svelte-config';

package/components/LinkSelector/i18n.js

@@ -0,0 +1,31 @@
+import createI18n from '../../utils/createI18n';
+
+export default createI18n({
+  sv: {
+    heading: 'Länk',
+    internal: 'Intern',
+    external: 'Extern',
+    file: 'Fil',
+    mail: 'E-post',
+    tel: 'Telefonnummer',
+    newTab: 'Öppna i ny flik',
+  },
+  no: {
+    heading: 'Lenke',
+    internal: 'Intern',
+    external: 'Ekstern',
+    file: 'Fil',
+    mail: 'E-post',
+    tel: 'Telefonnummer',
+    newTab: 'Åpne i en ny fane',
+  },
+  en: {
+    heading: 'Link',
+    internal: 'Internal',
+    external: 'External',
+    file: 'File',
+    mail: 'Mail',
+    tel: 'Phone',
+    newTab: 'Open in new tab',
+  },
+});

package/components/ListSelector/Component.svelte

@@ -40,6 +40,13 @@
   });
 </script>
 
+<!--
+  @component
+  Wrapper for Sitevision [list components](https://developer.sitevision.se/docs/webapps/configuration#h-Listcomponents).
+
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/ListSelector/)  
+-->
+
 <div class="form-group">
   <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
   <input
@@ -71,5 +78,4 @@
     background-color: rgba(255, 255, 255, 0.3);
     cursor: not-allowed;
   }
-
 </style>

package/components/ListSelector/README.md

@@ -1,7 +1,8 @@
 # ListSelector
 
-Wrapper for list components
-<https://developer.sitevision.se/docs/webapps/configuration#h-Listcomponents>
+Wrapper for Sitevision [list components](https://developer.sitevision.se/docs/webapps/configuration#h-Listcomponents)
+
+![ListSelector](../../images/ListSelector.png)
 
 <!-- TOC -->
 

package/components/NodeSelector/Component.svelte

@@ -54,6 +54,13 @@
   });
 </script>
 
+<!--
+  @component
+  Wrapper for Sitevision [node selectors](https://developer.sitevision.se/docs/webapps/configuration#h-SiteVisioncomponents).
+
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/NodeSelector/)  
+-->
+
 <div class="form-group {className}">
   <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
   <input

package/components/NodeSelector/README.md

@@ -1,7 +1,8 @@
 # NodeSelector
 
-Wrapper for node selectors.
-<https://developer.sitevision.se/docs/webapps/configuration#h-SiteVisioncomponents>
+Wrapper for Sitevision [node selectors](https://developer.sitevision.se/docs/webapps/configuration#h-SiteVisioncomponents).
+
+![NodeSelector](../../images/NodeSelector.png)
 
 <!-- TOC -->
 
@@ -35,9 +36,8 @@ export let value = '';
 
 ```svelte
 <script>
-import { Panel, NodeSelector } from '@soleil-se/svelte-config';
+  import { Panel, NodeSelector } from '@soleil-se/svelte-config';
 </script>
-```
 
 <Panel heading="Inställningar">
   <NodeSelector
@@ -46,20 +46,21 @@ import { Panel, NodeSelector } from '@soleil-se/svelte-config';
     label="Sida"
   />
 </Panel>
+```
 
 ### Advanced
 
 ```svelte
 <script>
-import { Panel, NodeSelector } from '@soleil-se/svelte-config';
-import { onSave } from '@soleil-se/svelte-config/utils';
+  import { Panel, NodeSelector } from '@soleil-se/svelte-config';
+  import { onSave } from '@soleil-se/svelte-config/utils';
 
-const values = {
-  page: '',  
-  ...window.CONFIG_VALUES
-};
+  const values = {
+    page: '',  
+    ...window.CONFIG_VALUES
+  };
 
-onSave(() => values);
+  onSave(() => values);
 
 </script>
 

package/components/NumberSpinner/Component.svelte

@@ -32,6 +32,13 @@
   });
 </script>
 
+<!--
+  @component
+  Wrapper for Sitevision [number spinner](https://developer.sitevision.se/docs/webapps/configuration#h-SiteVisioncomponents).
+
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/NumberSpinner/)  
+-->
+
 <div class="form-group">
   <label for={id} class="control-label">{label}</label>
   <input

package/components/NumberSpinner/README.md

@@ -1,8 +1,11 @@
 # NumberSpinner
-Wrapper for number spinner.   
-https://developer.sitevision.se/docs/webapps/configuration#h-SiteVisioncomponents
+
+Wrapper for Sitevision [number spinner](https://developer.sitevision.se/docs/webapps/configuration#h-SiteVisioncomponents).
+
+![NumberSpinner](../../images/NumberSpinner.png)
 
 ## Props
+
 ```javascript
 export let id = generateId();
 export let name;
@@ -19,10 +22,12 @@ export let value = min || 1;
 ## Example
 
 ### Standard
+
 ```svelte
 <script>
   import { Panel, NumberSpinner } from '@soleil-se/svelte-config';
 </script>
+
 <Panel heading="Inställningar">     
   <NumberSpinner name="spinner" label="Number spinner" min="5" max="10" suffix="px" />
 </Panel>
@@ -32,15 +37,15 @@ export let value = min || 1;
 
 ```svelte
 <script>
-import { Panel, NumberSpinner } from '@soleil-se/svelte-config';
-import { onSave } from '@soleil-se/svelte-config/utils';
+  import { Panel, NumberSpinner } from '@soleil-se/svelte-config';
+  import { onSave } from '@soleil-se/svelte-config/utils';
 
-const values = {
-  spinner: '',  
-  ...window.CONFIG_VALUES
-};
+  const values = {
+    spinner: '',  
+    ...window.CONFIG_VALUES
+  };
 
-onSave(() => values);
+  onSave(() => values);
 
 </script>
 
@@ -50,7 +55,9 @@ onSave(() => values);
 ```
 
 ## Slots
+
 Default slot after selector.
+
 ```svelte
 <NumberSpinner name="spinner" label="Number spinner" min="5" max="10" />
   <p class="help-block">Some helpful text.</p>

package/components/Panel/Component.svelte

@@ -1,8 +1,17 @@
 <script>
-  export let heading = 'Inställningar';
+  import i18n from './i18n';
+
+  export let heading = i18n('settings');
   export let required = false;
 </script>
 
+<!--
+  @component
+  A panel component.
+
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/Panel/)  
+-->
+
 <div class="panel panel-default">
   <input class="sr-only" type="text" tabindex="-1" />
   <div class="panel-heading">

package/components/Panel/README.md

@@ -1,6 +1,9 @@
 # Panel
 
+![Panel](../../images/Panel.png)
+
 ## Props
+
 ```javascript
 // Panel heading
 export let heading = 'Inställningar';
@@ -9,17 +12,17 @@ export let required = false;
 ```
 
 ## Slots
+
 Default slot for panel body.
 
 ## Example
+
 ```svelte
 <script>
-import { Panel } from '@soleil-se/svelte-config';
+  import { Panel } from '@soleil-se/svelte-config';
 </script>
 
 <Panel heading="Inställningar">         
   <!-- Panel content -->
 </Panel>
 ```
-
-

package/components/Panel/i18n.js

@@ -0,0 +1,13 @@
+import createI18n from '../../utils/createI18n';
+
+export default createI18n({
+  sv: {
+    settings: 'Inställningar',
+  },
+  no: {
+    settings: 'Innstillinger',
+  },
+  en: {
+    settings: 'Settings',
+  },
+});

package/components/RadioGroup/Component.svelte

@@ -24,27 +24,32 @@
   };
 </script>
 
-<template>
-  <fieldset class="form-group">
-    <legend>{legend}</legend>
-    {#each options as option, index}
-      <input
-        id={`${id}_${index}`}
-        bind:group={value}
-        value={option.value || option}
-        checked={option.value || option}
-        disabled={isDisabled(option)}
-        type="radio"
-        class="sr-only"
-        on:change={onChange}
-      />
-      <label for={`${id}_${index}`} class="radio-inline" class:disabled={isDisabled(option)}>
-        {option.label || option}
-      </label>
-    {/each}
-  </fieldset>
-  <input type="hidden" {value} {name} />
-</template>
+<!--
+  @component
+  A radio group component.
+
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/RadioGroup/)  
+-->
+
+<fieldset class="form-group">
+  <legend>{legend}</legend>
+  {#each options as option, index}
+    <input
+      id={`${id}_${index}`}
+      bind:group={value}
+      value={option.value || option}
+      checked={option.value || option}
+      disabled={isDisabled(option)}
+      type="radio"
+      class="sr-only"
+      on:change={onChange}
+    />
+    <label for={`${id}_${index}`} class="radio-inline" class:disabled={isDisabled(option)}>
+      {option.label || option}
+    </label>
+  {/each}
+</fieldset>
+<input type="hidden" {value} {name} />
 
 <style lang="scss">
   legend {

package/components/RadioGroup/README.md

@@ -1,6 +1,9 @@
 # RadioGroup
 
+![RadioGroup](../../images/RadioGroup.png)
+
 ## Props
+
 ```javascript
 export let id = generateId();
 // If SiteVision default functions for getting and setting config is used name must be set
@@ -18,6 +21,7 @@ export let value = '';
 ## Example
 
 ### Standard
+
 ```svelte
 <script>
 import { Panel, RadioGroup } from '@soleil-se/svelte-config';
@@ -63,7 +67,9 @@ onSave(() => values);
 ```
 
 ## Default value
+
 Use the value attribute to set a default value:
+
 ```svelte
 <RadioGroup
   name="radioGroup"

package/components/SelectField/Component.svelte

@@ -19,6 +19,13 @@
   };
 </script>
 
+<!--
+  @component
+  A select field component.
+
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/SelectField/)  
+-->
+
 <div class="form-group">
   <label class="control-label {required ? 'control-label--required' : ''}" for={id}>{label}</label>
   <!-- svelte-ignore a11y-no-onchange -->

package/components/SelectField/README.md

@@ -1,6 +1,9 @@
 # SelectField
 
+![SelectField](../../images/SelectField.png)
+
 ## Props
+
 ```javascript
 export let id = generateId();
 export let label;
@@ -14,9 +17,10 @@ export let value = '';
 ## Example
 
 ### Standard
+
 ```svelte
 <script>
-import { Panel, SelectField } from '@soleil-se/svelte-config';
+  import { Panel, SelectField } from '@soleil-se/svelte-config';
 </script>
 
 <Panel heading="Inställningar">     
@@ -33,17 +37,17 @@ import { Panel, SelectField } from '@soleil-se/svelte-config';
 
 ```svelte
 <script>
-import { Panel, SelectField } from '@soleil-se/svelte-config';
-import { onSave } from '@soleil-se/svelte-config/utils';
+  import { Panel, SelectField } from '@soleil-se/svelte-config';
+  import { onSave } from '@soleil-se/svelte-config/utils';
 
-const values = {
-  select: '',  
-  ...window.CONFIG_VALUES
-};
+  const values = {
+    select: '',  
+    ...window.CONFIG_VALUES
+  };
 
-const options = ['Värde 1', 'Värde 2', 'Värde 3'];
+  const options = ['Värde 1', 'Värde 2', 'Värde 3'];
 
-onSave(() => values);
+  onSave(() => values);
 
 </script>
 
@@ -53,7 +57,9 @@ onSave(() => values);
 ```
 
 ## Slots
+
 Default slot after select field.
+
 ```svelte
 <SelectField name="select1" label="Select 1" options={['Värde 1', 'Värde 2', 'Värde 3']} >
   <p class="help-block">Some helpful text</p>
@@ -61,7 +67,9 @@ Default slot after select field.
 ```
 
 ## Default value
+
 Use the value attribute to set a default value:
+
 ```svelte
 <SelectField name="select1" label="Select 1" options={['Värde 1', 'Värde 2', 'Värde 3']} value="Värde 1" />
 ```

package/components/TagSelector/Component.svelte

@@ -44,6 +44,13 @@
   });
 </script>
 
+<!--
+  @component
+  Wrapper for Sitevision [tag selector](https://developer.sitevision.se/docs/webapps/configuration#h-SiteVisioncomponents).
+
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/TagSelector/)  
+-->
+
 <div class="form-group {className}">
   <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
   <input

package/components/TagSelector/README.md

@@ -1,7 +1,8 @@
 # TagSelector
 
-Wrapper for tag selector.
-<https://developer.sitevision.se/docs/webapps/configuration#h-SiteVisioncomponents>
+Wrapper for Sitevision [tag selector](https://developer.sitevision.se/docs/webapps/configuration#h-SiteVisioncomponents).
+
+![TagSelector](../../images/TagSelector.png)
 
 <!-- TOC -->
 
@@ -29,7 +30,7 @@ export let value = [];
 
 ```svelte
 <script>
-import { Panel, TagSelector } from '@soleil-se/svelte-config';
+  import { Panel, TagSelector } from '@soleil-se/svelte-config';
 </script>
 
 <Panel heading="Inställningar">
@@ -43,15 +44,15 @@ Name prop is required here as well since Sitevision uses this to initialize the
 
 ```svelte
 <script>
-import { Panel, TagSelector } from '@soleil-se/svelte-config';
-import { onSave } from '@soleil-se/svelte-config/utils';
+  import { Panel, TagSelector } from '@soleil-se/svelte-config';
+  import { onSave } from '@soleil-se/svelte-config/utils';
 
-const values = {
-  tags: [],  
-  ...window.CONFIG_VALUES
-};
+  const values = {
+    tags: [],  
+    ...window.CONFIG_VALUES
+  };
 
-onSave(() => values);
+  onSave(() => values);
 
 </script>
 

package/components/TextList/Component.svelte

@@ -2,6 +2,8 @@
   import { createEventDispatcher } from 'svelte';
   import { generateId } from '../../utils';
   import { resizer } from '../../actions';
+  import i18n from './i18n';
+
   import Sortable from './internal/Sortable.svelte';
   import Item from './internal/Item.svelte';
   import DataHolder from './internal/DataHolder.svelte';
@@ -66,6 +68,13 @@
   };
 </script>
 
+<!--
+  @component
+  Custom list component for adding multiple text values and sorting them.
+
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/TextList/)  
+-->
+
 <div class="form-group">
   <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
   <div class="list-component">
@@ -87,7 +96,7 @@
       on:click={addItem}
     >
       <i class="glyphicons plus" aria-hidden="true" />
-      Lägg till...
+      {i18n('add')}
     </button>
   </div>
   {#if disabled}
@@ -110,5 +119,4 @@
     background-color: rgba(255, 255, 255, 0.3);
     cursor: not-allowed;
   }
-
 </style>

package/components/TextList/README.md

@@ -1,6 +1,11 @@
 # TextList
 
+Custom list component for adding multiple text values and sorting them.
+
+![TextList](../../images/TextList.png)
+
 ## Props
+
 ```javascript
 export let id = generateId();
 export let label;
@@ -11,7 +16,9 @@ export let value = [];
 ```
 
 ## Default value
+
 Use the value attribute to set a default value:
+
 ```svelte
 <TextList
   name="textList"
@@ -23,6 +30,7 @@ Use the value attribute to set a default value:
 ## Example
 
 ### Standard
+
 ```svelte
 <script>
 import { Panel, TextList } from '@soleil-se/svelte-config';
@@ -35,6 +43,7 @@ import { Panel, TextList } from '@soleil-se/svelte-config';
   />     
 </Panel>
 ```
+
 ### Advanced
 
 ```svelte

package/components/TextList/i18n.js

@@ -0,0 +1,13 @@
+import createI18n from '../../utils/createI18n';
+
+export default createI18n({
+  sv: {
+    add: 'Lägg till...',
+  },
+  no: {
+    add: 'Legg till...',
+  },
+  en: {
+    add: 'Add...',
+  },
+});

package/package.json

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

package/utils/createI18n.js

@@ -0,0 +1,29 @@
+const locale = document.documentElement.lang || 'en';
+
+/* https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_get */
+const get = (obj, path, defaultValue = undefined) => {
+  const travel = (regexp) => String.prototype.split
+    .call(path, regexp)
+    .filter(Boolean)
+    .reduce((res, key) => (res !== null && res !== undefined ? res[key] : res), obj);
+  const result = travel(/[,[\]]+?/) || travel(/[,[\].]+?/);
+  return result === undefined || result === obj ? defaultValue : result;
+};
+
+export default function createI18n(messages) {
+  return (path, values = {}) => {
+    let message = get(messages[locale], path);
+    if (message == null) {
+      console.warn(`[@soleil-se/svelte-config/utils/i18n] No translation avaliable for ${path}`);
+      return path;
+    }
+
+    Object.keys(values).forEach((key) => {
+      const value = values[key];
+      const regex = new RegExp(`{${key}}`, 'g');
+      message = message.replace(regex, value);
+    });
+
+    return message;
+  };
+}

package/utils/index.js

@@ -4,3 +4,4 @@ export { default as setupComponent } from './setupComponent';
 export { default as addPrefix } from './addPrefix';
 export { default as pluckPrefix } from './pluckPrefix';
 export { default as triggerInput } from './triggerInput';
+export { default as createI18n } from './createI18n';