@soleil-se/config-svelte 1.5.2 → 1.7.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.7.0] - 2021-09-24
+
+### Added
+
+- `sortable` prop for `ListSelector`.
+
+## [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

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

@@ -50,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,22 +7,32 @@
   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;
@@ -34,6 +44,13 @@
   };
 </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}
@@ -42,11 +59,11 @@
       {id}
       {name}
       {required}
-      {maxlength}
       {disabled}
       {readonly}
       {value}
       {rows}
+      {...$$restProps}
       on:input={onInput}
     />
   {:else}
@@ -56,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,12 +1,37 @@
-# LinkSelector
-A panel component with link selector for selecting internal page, external url or file.
+# LinkSelector (DEPRECATED)
+
+Custom panel component for selecting a link.
+
+![LinkSelector](../../images/LinkSelector.png)
+
+::: warning DEPRECATED
+Since Sitevision 9.1 a new type of node selector is avaliable for selecting links.  
+[NodeSelector](/03.packages/@soleil&svelte-config/components/NodeSelector/) should be used instead of this component.
+
+`App.svelte`
+
+```svelte
+<NodeSelector label="Link" type="link" name="link" />
+```
+
+A [sv:link](https://developer.sitevision.se/docs/public-api/node-types/node-types/2018-01-12-svlink) will be returned.
+
+```js
+import appData from '@sitevision/api/server/appData';
+
+const uri = appData.get('link', 'rawURI');
+const newWindow = appData.get('link', 'openInNewWindow');
+```
+
+:::
 
 ## 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
-import appData from 'appData';
+import appData from '@sitevision/api/server/appData';
 
 const getLink = () => ({
   value: appData.get('linkValue', 'URI'),
@@ -15,6 +40,7 @@ const getLink = () => ({
 });
 
 ```
+
 ## Props
 
 ```javascript
@@ -33,7 +59,9 @@ export let value;
 ```
 
 ## Slots
+
 Top and bottom slots before and after link selector.
+
 ```svelte
 <LinkSelector
   name="link"
@@ -62,9 +90,10 @@ Top and bottom slots before and after link selector.
 ## Example
 
 ### Standard
+
 ```svelte
 <script>
-import { LinkSelector } from '@soleil-se/svelte-config';
+  import { LinkSelector } from '@soleil-se/svelte-config';
 </script>
 
 <LinkSelector name="link" heading="Länk" />
@@ -75,16 +104,16 @@ import { LinkSelector } from '@soleil-se/svelte-config';
 
 ```svelte
 <script>
-import { LinkSelector } from '@soleil-se/svelte-config';
-import { pluckPrefix, addPrefix, onSave } from '@soleil-se/svelte-config/utils';
+  import { LinkSelector } from '@soleil-se/svelte-config';
+  import { pluckPrefix, addPrefix, onSave } from '@soleil-se/svelte-config/utils';
 
-// Plucks object properties with keys prefixed with 'link' and removes the prefix.
-// { linkType, linkValue, linkNewWindow } -> { type, value, newWindow }
-let link = pluckPrefix('link');
+  // Plucks object properties with keys prefixed with 'link' and removes the prefix.
+  // { linkType, linkValue, linkNewWindow } -> { type, value, newWindow }
+  let link = pluckPrefix('link');
 
-// Prefixes keys in an object 
-// { type, value, newWindow } -> { linkType, linkValue, linkNewWindow }
-onSave(() => addPrefix('link', link)))
+  // Prefixes keys in an object 
+  // { type, value, newWindow } -> { linkType, linkValue, linkNewWindow }
+  onSave(() => addPrefix('link', link)))
 
 </script>
 

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',
+  },
+});