@soleil-se/config-svelte 1.1.0 → 1.1.2

package/CHANGELOG.md

@@ -3,6 +3,14 @@ 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.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.

package/components/NumberSpinner/README.md

@@ -10,6 +10,7 @@ export let label;
 export let min;
 export let max;
 export let step = 1;
+export let suffix;
 export let disabled = false;
 export let readonly = false;
 export let value = min || 1;
@@ -23,7 +24,7 @@ export let value = min || 1;
   import { Panel, NumberSpinner } from '@soleil-se/svelte-config';
 </script>
 <Panel heading="Inställningar">     
-  <NumberSpinner name="spinner" label="Number spinner" min="5" max="10" />
+  <NumberSpinner name="spinner" label="Number spinner" min="5" max="10" suffix="px" />
 </Panel>
 ```
 

package/components/TextList/Component.svelte

@@ -3,6 +3,7 @@
   import { generateId } from '../../utils';
   import { resizer } from '../../actions';
   import Sortable from './internal/Sortable.svelte';
+  import DataHolder from './internal/DataHolder.svelte';
 
   const values = window.CONFIG_VALUES || {};
   const dispatch = createEventDispatcher();
@@ -73,10 +74,12 @@
   };
 
   const updateItem = (index, props) => {
-    items[index] = {
-      ...items[index],
-      ...props,
-    };
+    if (items[index]) {
+      items[index] = {
+        ...items[index],
+        ...props,
+      };
+    }
   };
 
   const abortEdit = (index) => {
@@ -190,11 +193,7 @@
   {#if disabled}
     <div class="disabled-overlay" />
   {/if}
-  <select {id} {value} multiple {name} class="sr-only" aria-hidden="true">
-    {#each value as option}
-      <option>{option}</option>
-    {/each}
-  </select>
+  <DataHolder {id} {name} {value} {required} />
 </div>
 
 <style lang="scss" global>

package/components/TextList/internal/DataHolder.svelte

@@ -0,0 +1,45 @@
+<!-- prettier-ignore -->
+<script>
+  import triggerInput from './triggerInput';
+
+  export let id;
+  export let value;
+  export let name;
+  export let required;
+
+  let selectElement;
+  $: noValue = value.length === 0;
+
+  $: {
+    if (selectElement) {
+      selectElement.setCustomValidity('');
+      setTimeout(() => triggerInput(selectElement, value));
+    }
+  }
+
+  const validationMessage = document.documentElement.lang === 'sv'
+    ? 'Ange minst ett fält i listan'
+    : 'Enter at least one field in the list';
+
+  const setValidationMessage = () => {
+    if (required && noValue) {
+      selectElement.setCustomValidity(validationMessage);
+    }
+  };
+</script>
+
+<select
+  {id}
+  {value}
+  multiple
+  {name}
+  class="sr-only"
+  aria-hidden="true"
+  bind:this={selectElement}
+  required={noValue && required}
+  on:invalid={setValidationMessage}
+>
+  {#each value as option}
+    <option>{option}</option>
+  {/each}
+</select>

package/components/TextList/internal/triggerInput.js

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

package/package.json

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