@soleil-se/config-svelte 1.4.0 → 1.5.1

package/CHANGELOG.md

@@ -5,33 +5,45 @@ 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.5.1] - 2021-08-12
+
+### Fixed
+
+- Initialization when rerendering or conditionally render DropdownSelectors.
+
+## [1.5.0] - 2021-06-29
+
+### Added
+
+- TagSelector component
+
 ## [1.4.0] - 2021-05-19
 
-## Changed
+### Changed
 
 - TextList component rewrite.
 - Remove CheckboxGroup value workaround as it's not needed.
 
-## Fixed
+### Fixed
 
 - Type shorthand for ListSelector.
 - Was possible to circumvent alt-text requirement in ImageSelector
 
 ## [1.3.1] - 2021-04-29
 
-## Fixed
+### Fixed
 
 - Default value for LinkSelector type is not set.
 - ImageSelector does not clear alt-text from image archive.
 
 ## [1.3.0] - 2021-04-28
 
-## Added
+### Added
 
 - Type shorthands for DropdownSelector, NodeSelector and ListSelector.
 - ImageSelector component.
 
-## Fixed
+### Fixed
 
 - Scroll problems.
 

package/components/DropdownSelector/Component.svelte

@@ -24,19 +24,30 @@
 
   $: component = type.endsWith('-selector') ? type : `${type}-selector`;
 
+  const setValue = (target) => {
+    hidden = false;
+    jQuery(target).val(value).trigger('change');
+  };
+
   onMount(() => {
-    setupComponent(id)
+    const [el] = setupComponent(id)
       .on('change', (e) => {
         value = e.val || value;
+        if (name) values[name] = value;
         dispatch('input', value);
         dispatch('change', value);
       })
       .on('sv:loaded', ({ target }) => {
-        hidden = false;
-        jQuery(target)
-          .val(value)
-          .trigger('change');
+        setValue(target);
       });
+  
+    /*
+    * The sv:loaded event is only triggered on initial load, if the component rerenders check if any
+    * children are present and set value of select element.
+    */
+    if (el?.childElementCount > 0) {
+      setValue(el);
+    }
   });
 </script>
 

package/components/InputField/Component.svelte

@@ -29,6 +29,7 @@
 
   const onInput = ({ target }) => {
     value = type.match(/^(number|range)$/) ? +target.value : target.value;
+    if (name) values[name] = value;
     dispatch('input', value);
     dispatch('change', value);
   };

package/components/NodeSelector/Component.svelte

@@ -33,6 +33,10 @@
     dispatch('change', value);
   };
 
+  if (type.startsWith('tags')) {
+    throw new Error('Type \'tags-selector\' is not supported, use TagsSelector component.');
+  }
+
   onMount(async () => {
     setupComponent(id).on('change', ({ target }) => {
       value = target.dataset.value;

package/components/TagSelector/Component.svelte

@@ -0,0 +1,73 @@
+<script>
+  /* eslint-disable no-undef-init */
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { generateId, setupComponent } from '../../utils';
+
+  const values = window.CONFIG_VALUES || {};
+  const dispatch = createEventDispatcher();
+
+  export let id = generateId();
+  export let label;
+  export let name;
+  export let required = false;
+  export let disabled = false;
+
+  export let selectable = [];
+  export let value = '';
+
+  selectable = Array.isArray(selectable) ? selectable.join(',') : selectable;
+  value = name ? values[name] ?? value : value;
+
+  let className = '';
+  export { className as class };
+
+  $: required = required && !disabled;
+
+  const onChange = () => {
+    dispatch('input', value);
+    dispatch('change', value);
+  };
+
+  onMount(async () => {
+    setupComponent(id).on('change', ({ target }) => {
+      value = target.value.split(',');
+  
+      onChange();
+    });
+
+    // When component is mounted the value from SiteVision will be an object.
+    // However when the value is saved to the server SiteVision expects an id.
+    if (value) {
+      value = value.map((tag) => tag.value);
+      onChange();
+    }
+  });
+</script>
+
+<div class="form-group {className}">
+  <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
+  <input
+    class="form-control"
+    {id}
+    {name}
+    {required}
+    {disabled}
+    data-component="tags-selector"
+    {value}
+  />
+  {#if disabled}
+    <div class="disabled-overlay" />
+  {/if}
+  <slot />
+</div>
+
+<style>
+  .disabled-overlay {
+    position: relative;
+    z-index: 3;
+    width: 100%;
+    height: 34px;
+    margin-top: -34px;
+    cursor: not-allowed;
+  }
+</style>

package/components/TagSelector/README.md

@@ -0,0 +1,71 @@
+# TagSelector
+
+Wrapper for tag selector.
+<https://developer.sitevision.se/docs/webapps/configuration#h-SiteVisioncomponents>
+
+<!-- TOC -->
+
+- [Props](#props)
+- [Example](#example)
+  - [Standard](#standard)
+  - [Advanced](#advanced)
+- [Slots](#slots)
+
+<!-- /TOC -->
+## Props
+
+```javascript
+export let id = generateId();
+export let label; // Required
+export let name;  // Required
+export let required = false;
+export let disabled = false;
+export let value = [];
+```
+
+## Example
+
+### Standard
+
+```svelte
+<script>
+import { Panel, TagSelector } from '@soleil-se/svelte-config';
+</script>
+
+<Panel heading="Inställningar">
+  <TagSelector name="tags" label="Etiketter" />
+</Panel>
+```
+
+### Advanced
+
+Name prop is required here as well since Sitevision uses this to initialize the component.
+
+```svelte
+<script>
+import { Panel, TagSelector } from '@soleil-se/svelte-config';
+import { onSave } from '@soleil-se/svelte-config/utils';
+
+const values = {
+  tags: [],  
+  ...window.CONFIG_VALUES
+};
+
+onSave(() => values);
+
+</script>
+
+<Panel heading="Inställningar">        
+  <TagSelector bind:value={values.tags} label="Etiketter" name="tags" />
+</Panel>
+```
+
+## Slots
+
+Default slot after selector.
+
+```svelte
+<TagSelector name="tags" label="Etiketter" />
+  <p class="help-block">Some helpful text.</p>
+</TagSelector>
+```

package/components/TagSelector/index.js

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

package/index.js

@@ -11,6 +11,7 @@ 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 TagSelector } from './components/TagSelector';
 
 export { default as createConfigApp } from './createConfigApp';
 

package/package.json

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