@soleil-se/config-svelte 1.2.1 → 1.3.0

package/CHANGELOG.md

@@ -5,6 +5,17 @@ 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

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/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.1",
+  "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/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);
-}