@soleil-se/config-svelte 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -5,6 +5,12 @@ 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.0] - 2021-06-29
+
+## Added
+
+- TagSelector component
+
 ## [1.4.0] - 2021-05-19
 
 ## Changed

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.0",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",