@soleil-se/config-svelte 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,45 +1,84 @@
 # Changelog
+
 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.3.0] - 2021-04.28
+
+## Added
+
+- Type shorthands for DropdownSelector, NodeSelector and ListSelector.
+- ImageSelector component.
+
+## Fixed
+
+- Scroll problems.
+
+## [1.2.1] - 2021-04-09
+
+### Fixed
+
+- Mail and tel values in LinkSelector are prefixed with `mailto:` and `tel:`.
+
 ## [1.2.0] - 2021-03-30
+
 ### Added
+
 - Mail and tel types to LinkSelector.
 - Value in NumberSpinner is now left aligned.
+
 ### Fixed
+
 - Unable to clear value in LinkSelector.
 
 ## [1.1.2] - 2021-03-11
+
 ### Fixed
+
 - Unable to remove last item in TextList.
 - TextList is not validated when `required` prop is used
+
 ## [1.1.1] - 2021-02-02
+
 ### Fixed
+
 - Missing docs NumberSpinner.
 
 ## [1.1.0] - 2021-01-29
+
 ### Added
+
 - `suffix` prop to NumberSpinner.
 
 ## [1.0.4] - 2021-01-15
+
 ### Fixed
+
 - ListSelector inifity loop.
 
 ## [1.0.3] - 2021-01-11
+
 ### Fixed
+
 - Remove debug output.
 
 ## [1.0.2] - 2021-01-11
+
 ### Fixed
+
 - Array destructuring not working in TextList for IE11.
 - RadioGroup value not working in IE11.
 - Added missing polyfills for IE11 in docs and demo.
 
 ## [1.0.1] - 2020-12-08
+
 ### Fixed
+
 - Selectable props in NodeSelector, ListSelector and DropdownSelector now also accepts a string.
 - Margin on CheckboxGroup and RadioGroup controls.
 
 ## [1.0.0] - 2020-11-20
+
 - Initial release!

package/actions/index.js

@@ -1,3 +1,3 @@
-export { default as httpPrefix } from './httpPrefix';
+export { prefixHttps, prefixMail, prefixTel } from './inputPrefix';
 export { default as resizer } from './resizer';
 export { default as show } from './show';

package/actions/inputPrefix.js

@@ -0,0 +1,31 @@
+export function prefixHttps(node) {
+  const addPrefix = () => {
+    const { type, value } = node;
+    if (type === 'url' && value && !/^(https?):\/\//i.test(value) && ('http://'.indexOf(value) === -1 && 'https://'.indexOf(value) === -1)) {
+      /* eslint-disable-next-line no-param-reassign */
+      node.value = `https://${value}`;
+    }
+  };
+  node.addEventListener('input', addPrefix);
+}
+
+export function prefixMail(node) {
+  const addPrefix = () => {
+    const { value } = node;
+
+    if (value && !/^(mailto?):/i.test(value) && 'mailto:'.indexOf(value) === -1) {
+      /* eslint-disable-next-line no-param-reassign */
+      node.value = `mailto:${value}`;
+    }
+  };
+  node.addEventListener('input', addPrefix);
+}
+
+export function prefixTel(node) {
+  const addPrefix = () => {
+    const { value } = node;
+    /* eslint-disable-next-line no-param-reassign */
+    node.value = `tel:${value.replace(/\s/g, '').replace(/[^0-9$\\+]/g, '')}`;
+  };
+  node.addEventListener('input', addPrefix);
+}

package/components/DropdownSelector/Component.svelte

@@ -8,7 +8,7 @@
   export let id = generateId();
   export let label;
   export let name = undefined;
-  export let type;
+  export let type = 'metadata-selector';
   export let selectable = [];
   export let required = false;
   export let disabled = false;
@@ -22,6 +22,8 @@
 
   let hidden = true;
 
+  $: component = type.endsWith('-selector') ? type : `${type}-selector`;
+
   onMount(() => {
     setupComponent(id)
       .on('change', (e) => {
@@ -45,7 +47,7 @@
     {name}
     {required}
     {disabled}
-    data-component={type}
+    data-component={component}
     data-removable
     data-types={selectable}
   />

package/components/DropdownSelector/README.md

@@ -6,6 +6,7 @@
 - [Example](#example)
   - [Standard](#standard)
   - [Advanced](#advanced)
+- [Type prop shorthand (since 1.3.0)](#type-prop-shorthand-since-130)
 - [Selectable types](#selectable-types)
 
 <!-- /TOC -->
@@ -16,7 +17,7 @@
 export let id = generateId();
 export let label; // Required
 export let name = undefined;
-export let type; // Required
+export let type = 'metadata';
 export let selectable = [];
 export let required = false;
 export let disabled = false;
@@ -26,6 +27,7 @@ export let value = '';
 ## Example
 
 ### Standard
+
 ```svelte
 <script>
 import { Panel, DropdownSelector } from '@soleil-se/svelte-config';
@@ -57,13 +59,23 @@ onSave(() => values);
 </Panel>
 ```
 
+## Type prop shorthand (since 1.3.0)
+
+You can omnit the `-selector` suffix for the type prop.
+
+```svelte
+<DropdownSelector name="metadata" type="metadata" label="Metadata" />    
+```
+
 ## Selectable types
+
 > :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   
+Filter what types should be selectable. See available types here:
+<https://developer.sitevision.se/docs/webapps/configuration#h-Types>
 
 Accepts an Array or String.
+
 ```svelte
 <DropdownSelector
   name="metadata"

package/components/ImageSelector/Component.svelte

@@ -0,0 +1,78 @@
+<!-- prettier-ignore -->
+<script>
+  import { createEventDispatcher } from 'svelte';
+
+  import { triggerInput } from '../../utils';
+  import Panel from '../Panel';
+  import NodeSelector from '../NodeSelector';
+  import InputField from '../InputField';
+  import Checkbox from '../Checkbox';
+
+  const values = window.CONFIG_VALUES || {};
+
+  export let name = undefined;
+  export let heading = 'Bild';
+  export let required = false;
+  export let node;
+  export let alt;
+  alt = name ? values[`${name}Alt`] ?? alt : alt;
+  
+  let imageArchiveAlt = '';
+  let useCustomAlt = !!alt;
+  let customAlt = alt;
+  let validationEl;
+
+  const dispatch = createEventDispatcher();
+
+  const onChange = async () => {
+    if (node) {
+      const response = await fetch(`/rest-api/1/1/${node}/properties`).then((res) => res.json());
+      imageArchiveAlt = response.alt || '';
+  
+      validationEl?.setCustomValidity(imageArchiveAlt ? '' : 'Bilden saknar beskrivning (alt-text). Klicka på bilden ovan och skriv texten i fältet Bildbeskrivning.');
+    } else {
+      validationEl?.setCustomValidity('');
+    }
+    triggerInput(validationEl);
+
+    dispatch('input', { node, alt });
+    dispatch('change', { node, alt });
+  };
+
+  const onUseCustomToggle = () => {
+    if (useCustomAlt) {
+      alt = customAlt || '';
+    } else {
+      customAlt = alt;
+      alt = undefined;
+    }
+  };
+
+</script>
+
+<Panel {heading}>
+  <NodeSelector
+    name="{name}Node"
+    label="Välj bild"
+    type="image"
+    bind:value={node}
+    on:change={onChange}
+    {required}
+  />
+  {#if useCustomAlt}
+    <InputField name="{name}Alt" label="Alt-text" required bind:value={alt} />
+  {:else}
+    <InputField label="Alt-text (från bildbeskrivning)" 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>
+</Panel>
+
+<style>
+  div {
+    margin-top: -10px;
+  }
+</style>

package/components/ImageSelector/README.md

@@ -0,0 +1,68 @@
+# ImageSelector
+
+Custom panel component for selecting an image.
+<!-- TOC -->
+
+- [AppData](#appdata)
+- [Props](#props)
+- [Example](#example)
+  - [Standard](#standard)
+  - [Advanced](#advanced)
+
+<!-- /TOC -->
+
+## AppData
+
+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
+import appData from 'appData';
+
+const getImage = () => ({
+  uri: appData.get('imageNode', 'URI'),
+  alt: appData.get('imageAlt') || appData.get('imageNode', 'alt'),  
+});
+```
+
+## Props
+
+```javascript
+// Panel heading
+export let heading = 'Bild';
+// Name attribute.
+export let name = undefined;
+// If field is required.
+export let required = false;
+// Node ID of selected image.
+export let node;
+// Custom alt text it's set.
+export let alt;
+```
+
+## Example
+
+### Standard
+
+```svelte
+<script>
+  import { ImageSelector } from '@soleil-se/svelte-config';
+</script>
+
+<ImageSelector name="image" heading="Bild" />
+```
+
+### Advanced
+
+```svelte
+<script>  
+  import { ImageSelector } from '@soleil-se/svelte-config';
+  import { onSave } from '@soleil-se/svelte-config/utils';
+
+  const values = window.CONFIG_VALUES || {};  
+  
+  onSave(() => values);
+</script>
+
+<ImageSelector bind:node={values.imageNode} bind:alt={values.imageAlt} />
+```

package/components/ImageSelector/index.js

@@ -0,0 +1 @@
+export { default } from './Component.svelte';

package/components/InputField/Component.svelte

@@ -1,7 +1,7 @@
 <script>
   /* eslint-disable no-undef-init */
   import { createEventDispatcher } from 'svelte';
-  import { httpPrefix } from '../../actions';
+  import { prefixHttps } from '../../actions';
   import { generateId } from '../../utils';
 
   const values = window.CONFIG_VALUES || {};
@@ -18,6 +18,7 @@
   export let pattern = undefined;
   export let rows = 3;
   export let value = '';
+  export let action = prefixHttps;
   value = name ? values[name] ?? value : value;
 
   let className = '';
@@ -60,7 +61,7 @@
       {readonly}
       {pattern}
       {value}
-      use:httpPrefix
+      use:action
       on:input={onInput}
     />
   {/if}

package/components/LinkSelector/Component.svelte

@@ -1,14 +1,14 @@
 <script>
   import { createEventDispatcher } from 'svelte';
-  import { show } from '../../actions';
+  import { show, prefixMail, prefixTel } from '../../actions';
 
   import Panel from '../Panel';
   import RadioGroup from '../RadioGroup';
   import NodeSelector from '../NodeSelector';
   import InputField from '../InputField';
   import Checkbox from '../Checkbox';
+  import getSavedValue from './api/getSavedValue';
 
-  const values = window.CONFIG_VALUES || {};
   const dispatch = createEventDispatcher();
 
   export let heading;
@@ -17,20 +17,7 @@
   export let required = false;
   export let types = ['internal', 'external', 'file'];
   export let value;
-
-  if (!value || Object.keys(value).length === 0) {
-    value = {
-      type: types[0],
-      newWindow: false,
-      value: '',
-    };
-  }
-
-  if (name) {
-    value.type = values[`${name}Type`] || value.type;
-    value.newWindow = values[`${name}NewWindow`] || value.newWindow;
-    value.value = values[`${name}Value`] || value.value || '';
-  }
+  value = getSavedValue({ value, name, types });
 
   let className = '';
   export { className as class };
@@ -110,12 +97,13 @@
       required={required && isFile}
     />
   </div>
+
   <div class="sr-label form-group form-group--mail" use:show={isMail}>
     <InputField
       bind:value={selected.mail}
       {disabled}
       label="E-post"
-      type="email"
+      action={prefixMail}
       on:change={onChange}
       required={required && isMail}
     />
@@ -124,8 +112,9 @@
     <InputField
       bind:value={selected.tel}
       {disabled}
-      label="E-post"
-      type="email"
+      label="Telefonnummer"
+      type="tel"
+      action={prefixTel}
       on:change={onChange}
       required={required && isTel}
     />
@@ -141,7 +130,7 @@
   <slot name="bottom" />
 </Panel>
 
-<style>
+<style lang="scss">
   .sr-label :global(label),
   .sr-legend :global(legend) {
     position: absolute;
@@ -154,7 +143,11 @@
     clip: rect(0, 0, 0, 0);
   }
 
-  .form-group--external :global(.form-control-feedback) {
-    top: 0;
+  .form-group--external,
+  .form-group--mail,
+  .form-group--tel {
+    :global(.form-control-feedback) {
+      top: 0;
+    }
   }
 </style>

package/components/LinkSelector/api/getSavedValue.js

@@ -0,0 +1,19 @@
+const getDefaultValue = (types) => ({
+  type: types[0],
+  newWindow: false,
+  value: '',
+});
+
+export default function getSavedValue({ value, name, types }) {
+  const values = window.CONFIG_VALUES || {};
+
+  return {
+    ...getDefaultValue(types),
+    ...value,
+    ...(name ? {
+      type: values[`${name}Type`],
+      newWindow: values[`${name}NewWindow`],
+      value: values[`${name}Value`],
+    } : {}),
+  };
+}

package/components/ListSelector/Component.svelte

@@ -23,6 +23,8 @@
     dispatch('change', value);
   };
 
+  $: component = type.endsWith('-list') ? type : `${type}-page`;
+
   onMount(() => {
     const element = setupComponent(id)[0];
 
@@ -44,7 +46,7 @@
     {id}
     {name}
     type="hidden"
-    data-component={type}
+    data-component={component}
     {required}
     data-types={selectable}
     value={value.join(',')}

package/components/ListSelector/README.md

@@ -1,6 +1,7 @@
 # ListSelector
-Wrapper for list components   
-https://developer.sitevision.se/docs/webapps/configuration#h-Listcomponents
+
+Wrapper for list components
+<https://developer.sitevision.se/docs/webapps/configuration#h-Listcomponents>
 
 <!-- TOC -->
 
@@ -9,6 +10,7 @@ https://developer.sitevision.se/docs/webapps/configuration#h-Listcomponents
   - [Standard](#standard)
   - [Advanced](#advanced)
 - [Slots](#slots)
+- [Type prop shorthand (since 1.3.0)](#type-prop-shorthand-since-130)
 - [Selectable types](#selectable-types)
 
 <!-- /TOC -->
@@ -23,7 +25,7 @@ export let name;
 // Field label
 export let label;
 // List component type.
-export let type = 'page-list';
+export let type = 'page';
 // Used if bound to v-model, falls back to provided values object when name attribute is used.
   export let value = [];
 // If list is required.
@@ -37,15 +39,15 @@ export let selectable = [];
 
 ## Example
 
-
 ### Standard
+
 ```svelte
 <script>
 import { Panel, ListSelector } from '@soleil-se/svelte-config';
 </script>
 
 <Panel heading="Inställningar">     
-  <ListSelector name="pages" type="page-list" label="Sidor" />
+  <ListSelector name="pages" type="page" label="Sidor" />
 </Panel>
 ```
 
@@ -71,20 +73,32 @@ onSave(() => values);
 ```
 
 ## Slots
+
 Default slot after list.
+
 ```svelte
 <ListSelector name="pages" type="page-list" label="Sidor" />
   <p class="help-block">Some helpful text.</p>
 </ListSelector>
 ```
 
+## Type prop shorthand (since 1.3.0)
+
+You can omnit the `-list` suffix for the type prop.
+
+```svelte
+<ListSelector name="pages" type="page" label="Sidor" />
+```
+
 ## Selectable types
+
 > :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   
+Filter what types should be selectable. See available types here:
+<https://developer.sitevision.se/docs/webapps/configuration#h-Types-0>
 
 Accepts an Array or String.
+
 ```svelte
 <ListSelector
   name="pages"

package/components/NodeSelector/Component.svelte

@@ -24,6 +24,7 @@
   export { className as class };
 
   $: required = required && !disabled && !readonly;
+  $: component = type.endsWith('-selector') ? type : `${type}-selector`;
 
   let displayName = '';
 
@@ -59,7 +60,7 @@
     {disabled}
     {readonly}
     data-removable={removable}
-    data-component={type}
+    data-component={component}
     data-types={selectable}
     value={displayName}
     data-value={value}

package/components/NodeSelector/README.md

@@ -1,6 +1,7 @@
 # NodeSelector
-Wrapper for node selectors.   
-https://developer.sitevision.se/docs/webapps/configuration#h-SiteVisioncomponents
+
+Wrapper for node selectors.
+<https://developer.sitevision.se/docs/webapps/configuration#h-SiteVisioncomponents>
 
 <!-- TOC -->
 
@@ -9,6 +10,7 @@ https://developer.sitevision.se/docs/webapps/configuration#h-SiteVisioncomponent
   - [Standard](#standard)
   - [Advanced](#advanced)
 - [Slots](#slots)
+- [Type prop shorthand (since 1.3.0)](#type-prop-shorthand-since-130)
 - [Selectable types](#selectable-types)
 
 <!-- /TOC -->
@@ -30,12 +32,14 @@ export let value = '';
 ## Example
 
 ### Standard
+
 ```svelte
 <script>
 import { Panel, NodeSelector } from '@soleil-se/svelte-config';
 </script>
 ```
-<Panel heading="Inställningar">     
+
+<Panel heading="Inställningar">
   <NodeSelector
     name="page"
     type="page-selector"
@@ -65,20 +69,32 @@ onSave(() => values);
 ```
 
 ## Slots
+
 Default slot after selector.
+
 ```svelte
 <NodeSelector name="page" label="Page" type="page-selector" />
   <p class="help-block">Some helpful text.</p>
 </NodeSelector>
 ```
 
+## Type prop shorthand (since 1.3.0)
+
+You can omnit the `-selector` suffix for the type prop.
+
+```svelte
+<NodeSelector name="page" type="page" label="Sida" />
+```
+
 ## Selectable types
+
 > :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   
+
+Filter what types should be selectable. See available types here:
+<https://developer.sitevision.se/docs/webapps/configuration#h-Types>
 
 Accepts an Array or String.
+
 ```svelte
 <NodeSelector
   name="page"

package/components/Panel/Component.svelte

@@ -14,7 +14,14 @@
 </div>
 
 <style lang="scss">
+  :global(html) {
+    position: fixed;
+    overflow: hidden;
+    background-color: transparent;
+  }
+
   :global(body) {
+    overflow: auto;
     background: none;
   }
 

package/components/SelectField/Component.svelte

@@ -21,6 +21,7 @@
 
 <div class="form-group">
   <label class="control-label {required ? 'control-label--required' : ''}" for={id}>{label}</label>
+  <!-- svelte-ignore a11y-no-onchange -->
   <select class="form-control" bind:value {id} {disabled} {required} {name} on:change={onChange}>
     {#each options as option}
       <option value={option.value || option}>{option.label || option}</option>

package/components/TextList/Component.svelte

@@ -197,10 +197,6 @@
 </div>
 
 <style lang="scss" global>
-  :global(html) {
-    overflow: hidden;
-  }
-
   .list-component {
     & &__list-wrapper {
       height: 120px;

package/components/TextList/internal/DataHolder.svelte

@@ -1,6 +1,6 @@
 <!-- prettier-ignore -->
 <script>
-  import triggerInput from './triggerInput';
+  import { triggerInput } from '../../../utils';
 
   export let id;
   export let value;

package/index.js

@@ -10,6 +10,7 @@ export { default as NumberSpinner } from './components/NumberSpinner';
 export { default as RadioGroup } from './components/RadioGroup';
 export { default as SelectField } from './components/SelectField';
 export { default as TextList } from './components/TextList';
+export { default as ImageSelector } from './components/ImageSelector';
 
 export { default as createConfigApp } from './createConfigApp';
 

package/package.json

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

package/utils/index.js

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

package/utils/triggerInput.js

@@ -0,0 +1,8 @@
+export default function triggerInput(element) {
+  if (element) {
+    const event = document.createEvent('Event');
+    event.initEvent('input', true, true);
+
+    element.dispatchEvent(event);
+  }
+}

package/actions/httpPrefix.js

@@ -1,10 +0,0 @@
-export default function httpPrefix(node) {
-  const addPrefix = () => {
-    const { type, value } = node;
-    if (type === 'url' && value && !/^(https?):\/\//i.test(value) && ('http://'.indexOf(value) === -1 && 'https://'.indexOf(value) === -1)) {
-      /* eslint-disable-next-line no-param-reassign */
-      node.value = `https://${value}`;
-    }
-  };
-  node.addEventListener('input', addPrefix);
-}

package/components/TextList/internal/triggerInput.js

@@ -1,6 +0,0 @@
-export default function triggerInput(element) {
-  const event = document.createEvent('Event');
-  event.initEvent('input', true, true);
-
-  element.dispatchEvent(event);
-}