@soleil-se/config-svelte 1.16.0 → 1.16.2

package/CHANGELOG.md

@@ -5,6 +5,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.16.2] - 2022-11-24
+
+- [ListSelector](./components/ListSelector) now works properly in [CustomList](./components/CustomList).
+
+## [1.16.1] - 2022-11-18
+
+- Suppress `a11y-click-events-have-key-events` since the key events are handled on other elements.
+
 ## [1.16.0] - 2022-11-09
 
 - Add singular and plural suffix support for [NumberSpinner](./components/NumberSpinner)

package/components/CustomList/Component.svelte

@@ -1,5 +1,4 @@
 <script>
-
   import { createEventDispatcher, onMount } from 'svelte';
   import { generateId, addGeneratedIds } from '../../utils';
   import { resizer } from '../../actions';
@@ -72,7 +71,9 @@
 
   const tempDisableDrag = () => {
     dragDisabled = true;
-    setTimeout(() => { dragDisabled = disabled; }, 300);
+    setTimeout(() => {
+      dragDisabled = disabled;
+    }, 300);
   };
 
   const onFinalize = ({ detail }) => {

package/components/CustomList/internal/SortableItem.svelte

@@ -1,6 +1,6 @@
 <script>
   import { createEventDispatcher } from 'svelte';
-  
+
   export let id;
   export let name;
   export let disabled;
@@ -15,9 +15,10 @@
   const removeItem = () => {
     dispatch('remove', id);
   };
-
 </script>
 
+<!-- This is handled by the click event on the edit button -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="list-component__item" on:dblclick={editItem} on:click>
   {#if icon}
     <i class="sv-list-icon {icon}" aria-hidden="true" />

package/components/ListSelector/Component.svelte

@@ -18,7 +18,7 @@
 
   selectable = Array.isArray(selectable) ? selectable.join(',') : selectable;
   // SiteVision saves as an object, we need the value as comma separated string.
-  value = (values[name] ?? value).map((v) => v.value);
+  value = (values[name] ?? value).map((v) => v.value || v);
   const onChange = (val) => {
     value = val ? val.split(',') : [];
     dispatch('input', value);

package/components/Modal/Component.svelte

@@ -10,13 +10,13 @@
   export let title;
   export let open = false;
   export let element;
-  
+
   const dispatch = createEventDispatcher();
-  
+
   const id = generateId('modal');
   const titleId = `${id}_title`;
   const duration = 250;
-  
+
   let saveButtonElement;
   let a11yDialog;
 
@@ -124,6 +124,8 @@
   aria-hidden="true"
   style="--duration: {duration}ms;"
 >
+  <!-- This is handled by the keydown event on svelte:window-->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div class="overlay" on:click={close} />
   <div class="modal-dialog" role="document">
     <div class="modal-content">

package/components/Modal/api/updateGlobalValues.js

@@ -1,15 +1,37 @@
+function getNodeSelectorValue({ element, value }) {
+  const displayName = element.value;
+  return { displayName, value };
+}
+
+function getListSelectorValue({ element, value }) {
+  const displayNames = [...element.nextElementSibling.querySelectorAll('span.item-name')]
+    .map((itemNameElement) => itemNameElement.textContent.trim());
+
+  return value.map((id, i) => ({
+    displayName: displayNames[i],
+    value: id,
+  }));
+}
+
+function getValue({ element, value }) {
+  const isNodeSelector = !!element.dataset.value;
+  const isListSelector = element.getAttribute('data-component')?.includes('-list');
+
+  if (isNodeSelector) {
+    return getNodeSelectorValue({ element, value });
+  } if (isListSelector) {
+    return getListSelectorValue({ element, value });
+  }
+  return value;
+}
+
 export default function updateGlobalValues(modalElement) {
   // eslint-disable-next-line no-underscore-dangle
   const values = window._getValues();
   Object.entries(values).forEach(([name, value]) => {
     const element = modalElement.querySelector(`[name="${name}"]`);
     if (element) {
-      if (element.dataset.value) {
-        const displayName = element.value;
-        window.CONFIG_VALUES[name] = { displayName, value };
-      } else {
-        window.CONFIG_VALUES[name] = value;
-      }
+      window.CONFIG_VALUES[name] = getValue({ element, value });
     }
   });
 }

package/package.json

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