@soleil-se/config-svelte 1.5.2 → 1.7.0

package/components/ListSelector/Component.svelte

@@ -11,6 +11,7 @@
   export let type = 'page-list';
   export let required = false;
   export let disabled = false;
+  export let sortable = false;
   export let selectable = [];
   export let value = [];
 
@@ -40,7 +41,14 @@
   });
 </script>
 
-<div class="form-group">
+<!--
+  @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" class:disabled>
   <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
   <input
     {id}
@@ -48,6 +56,7 @@
     type="hidden"
     data-component={component}
     {required}
+    data-sortable={sortable || undefined}
     data-types={selectable}
     value={value.join(',')}
   />
@@ -58,7 +67,7 @@
 </div>
 
 <style>
-  .form-group {
+  .form-group.disabled {
     position: relative;
   }
 
@@ -71,5 +80,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 -->
 
@@ -30,8 +31,10 @@ export let type = 'page';
   export let value = [];
 // If list is required.
 export let required = false;
-// If list is diable.
+// If list is disabled.
 export let disabled = false;
+// If list is sortable, since Sitevision 9.1.
+export let sortable = false;
 // Selectable types
 export let selectable = [];
 
@@ -55,15 +58,15 @@ import { Panel, ListSelector } from '@soleil-se/svelte-config';
 
 ```svelte
 <script>
-import { Panel, ListSelector } from '@soleil-se/svelte-config';
-import { onSave } from '@soleil-se/svelte-config/utils';
+  import { Panel, ListSelector } from '@soleil-se/svelte-config';
+  import { onSave } from '@soleil-se/svelte-config/utils';
 
-const values = {
-  pages: '',  
-  ...window.CONFIG_VALUES
-};
+  const values = {
+    pages: '',  
+    ...window.CONFIG_VALUES
+  };
 
-onSave(() => values);
+  onSave(() => values);
 
 </script>
 
@@ -92,7 +95,7 @@ You can omnit the `-list` suffix for the type prop.
 
 ## Selectable types
 
-> :exclamation: Since SiteVision 7.0 :exclamation:
+> :exclamation: Since Sitevision 7.0 :exclamation:
 
 Filter what types should be selectable. See available types here:
 <https://developer.sitevision.se/docs/webapps/configuration#h-Types-0>

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.2",
+  "version": "1.7.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';