@soleil-se/config-svelte 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -5,7 +5,26 @@ 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
+## [1.4.0] - 2021-05-19
+
+## Changed
+
+- TextList component rewrite.
+- Remove CheckboxGroup value workaround as it's not needed.
+
+## Fixed
+
+- Type shorthand for ListSelector.
+- Was possible to circumvent alt-text requirement in ImageSelector
+
+## [1.3.1] - 2021-04-29
+
+## 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
 

package/actions/resizer.js

@@ -20,11 +20,11 @@ const resizer = (element) => {
   const resizeElement = (e) => {
     const offset = e.y - mousePos;
     mousePos = e.y;
-    const targetHeight = parseInt(getComputedStyle(targetElement).height, 10);
-    const targetOffset = targetElement.getBoundingClientRect().top;
 
+    const targetOffset = targetElement.getBoundingClientRect().top;
     if (e.y > (targetOffset + targetMinHeight)) {
-    // eslint-disable-next-line no-param-reassign
+      const targetHeight = parseInt(getComputedStyle(targetElement).height, 10);
+      // eslint-disable-next-line no-param-reassign
       targetElement.style.height = `${targetHeight + offset}px`;
     }
   };

package/components/CheckboxGroup/Component.svelte

@@ -37,6 +37,7 @@
       bind:group={value}
       class="sr-only"
       value={option.value || option}
+      {name}
       type="checkbox"
       disabled={isDisabled(option)}
       on:change={onChange}
@@ -51,14 +52,6 @@
     </label>
   {/each}
 </fieldset>
-<!-- Workaround to properly save values as array when using name -->
-{#if name}
-  <select {value} multiple {name} class="sr-only" aria-hidden="true">
-    {#each value as option}
-      <option>{option}</option>
-    {/each}
-  </select>
-{/if}
 
 <style lang="scss">
   fieldset {
@@ -111,4 +104,5 @@
   input {
     margin: -1px;
   }
+
 </style>

package/components/ImageSelector/Component.svelte

@@ -24,13 +24,18 @@
 
   const dispatch = createEventDispatcher();
 
+  const setCustomValidity = () => {
+    validationEl?.setCustomValidity(imageArchiveAlt ? '' : 'Bilden saknar beskrivning (alt-text). Klicka på bilden ovan och skriv texten i fältet Bildbeskrivning.');
+  };
+
   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.');
+      setCustomValidity();
     } else {
+      imageArchiveAlt = '';
       validationEl?.setCustomValidity('');
     }
     triggerInput(validationEl);
@@ -45,6 +50,7 @@
     } else {
       customAlt = alt;
       alt = undefined;
+      setCustomValidity();
     }
   };
 
@@ -75,4 +81,5 @@
   div {
     margin-top: -10px;
   }
+
 </style>

package/components/LinkSelector/api/getSavedValue.js

@@ -4,16 +4,14 @@ const getDefaultValue = (types) => ({
   value: '',
 });
 
-export default function getSavedValue({ value, name, types }) {
+export default function getSavedValue({ value = {}, name, types }) {
   const values = window.CONFIG_VALUES || {};
 
+  const defaultValue = getDefaultValue(types);
+
   return {
-    ...getDefaultValue(types),
-    ...value,
-    ...(name ? {
-      type: values[`${name}Type`],
-      newWindow: values[`${name}NewWindow`],
-      value: values[`${name}Value`],
-    } : {}),
+    type: value.type || values[`${name}Type`] || defaultValue.type,
+    newWindow: value.newWindow || values[`${name}NewWindow`] || defaultValue.newWindow,
+    value: value.value || values[`${name}Value`] || defaultValue.value,
   };
 }

package/components/ListSelector/Component.svelte

@@ -23,7 +23,7 @@
     dispatch('change', value);
   };
 
-  $: component = type.endsWith('-list') ? type : `${type}-page`;
+  $: component = type.endsWith('-list') ? type : `${type}-list`;
 
   onMount(() => {
     const element = setupComponent(id)[0];
@@ -71,4 +71,5 @@
     background-color: rgba(255, 255, 255, 0.3);
     cursor: not-allowed;
   }
+
 </style>

package/components/TextList/Component.svelte

@@ -1,8 +1,9 @@
 <script>
-  import { createEventDispatcher, tick } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
   import { generateId } from '../../utils';
   import { resizer } from '../../actions';
   import Sortable from './internal/Sortable.svelte';
+  import Item from './internal/Item.svelte';
   import DataHolder from './internal/DataHolder.svelte';
 
   const values = window.CONFIG_VALUES || {};
@@ -20,18 +21,14 @@
     id: generateId(),
     value: '',
     edit: false,
-    focus: false,
-    hover: false,
     ...props,
   });
 
   let addButtonElement;
-  const itemElements = [];
-  let dragging = false;
+
   let items = value.map((val) => createItem({ value: val }));
 
-  $: editIndex = items.findIndex(({ edit }) => edit);
-  $: isEditing = editIndex > -1;
+  $: isEditing = items.findIndex(({ edit }) => edit) > -1;
 
   const onChange = () => {
     value = items.filter(({ edit }) => !edit).map((item) => item.value);
@@ -42,72 +39,29 @@
   const addItem = async () => {
     if (!isEditing) {
       items = items.concat(createItem({ edit: true }));
-      await tick();
     }
-    itemElements[editIndex].querySelector('input').focus();
-  };
-
-  const editItem = async (index) => {
-    items = items.map((item) => ({ ...item, edit: false }));
-    items[index].edit = true;
-    items[index].oldValue = items[index].value;
-
-    await tick();
-    itemElements[index].querySelector('input').focus();
   };
 
-  const removeItem = (index) => {
-    items.splice(index, 1);
-    items = items;
-    onChange();
+  const onEdit = async ({ detail }) => {
+    items = items.map((item) => ({ ...item, edit: item.id === detail }));
   };
 
-  const saveEdit = (index) => {
-    items[index].edit = false;
-    delete items[index].oldValue;
-
-    if (!items[index].value) {
-      removeItem(index);
-    }
-
+  const onRemove = ({ detail }) => {
+    items = items.filter((item) => item.id !== detail);
     onChange();
   };
 
-  const updateItem = (index, props) => {
+  const onUpdate = ({ detail }) => {
+    const index = items.findIndex((item) => item.id === detail.id);
     if (items[index]) {
-      items[index] = {
-        ...items[index],
-        ...props,
-      };
-    }
-  };
-
-  const abortEdit = (index) => {
-    items[index].edit = false;
-    items[index].value = items[index].oldValue;
-    delete items[index].oldValue;
-
-    if (!items[index].value) {
-      removeItem(index);
-    }
-  };
-
-  const handleKeypress = (index, { keyCode }) => {
-    // Enter
-    if (keyCode === 13) {
-      saveEdit(index);
-      addButtonElement.focus();
-    }
-    // Esc
-    if (keyCode === 27) {
-      abortEdit(index);
-      addButtonElement.focus();
+      items[index].value = detail.value;
+      items[index].edit = false;
     }
+    onChange();
   };
 
-  const onSortEnd = ({ detail }) => {
+  const onFinalize = ({ detail }) => {
     items = detail;
-    dragging = false;
     onChange();
   };
 </script>
@@ -116,68 +70,14 @@
   <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
   <div class="list-component">
     <div class="list-component__list-wrapper ui-resizable">
-      <Sortable
-        class="list-component__list {dragging ? 'dragging' : ''}"
-        {items}
-        on:start={() => {
-          dragging = true;
-        }}
-        on:end={onSortEnd}
-      >
-        {#each items as item, index (item.id)}
-          <li
-            bind:this={itemElements[index]}
-            class="list-component__item"
-            class:focus={item.focus}
-            class:hover={item.hover}
-            on:mouseenter={() => updateItem(index, { hover: !dragging })}
-            on:mouseleave={() => updateItem(index, { hover: dragging })}
-          >
-            {#if item.edit}
-              <div class="form-group">
-                <div class="input-group">
-                  <input
-                    {id}
-                    bind:value={item.value}
-                    type="text"
-                    class="form-control"
-                    on:keypress={(e) => handleKeypress(index, e)}
-                  />
-
-                  <span class="input-group-btn">
-                    <button class="btn btn-default" type="button" on:click={() => saveEdit(index)}>
-                      <i class="glyphicons ok-2" />
-                    </button>
-                    <button class="btn btn-default" type="button" on:click={() => abortEdit(index)}>
-                      <i class="glyphicons remove-2" />
-                    </button>
-                  </span>
-                </div>
-              </div>
-            {:else}
-              <div on:dblclick={() => editItem(index)}>
-                <span class="item-name">{item.value}</span>
-                <div class="list-component__item-actions">
-                  <button
-                    on:click={() => editItem(index)}
-                    on:focusin={() => updateItem(index, { focus: true })}
-                    on:focusout={() => updateItem(index, { focus: false })}
-                  >
-                    <i class="glyphicons edit" />
-                  </button>
-                  <button
-                    on:click={() => removeItem(index)}
-                    on:focusin={() => updateItem(index, { focus: true })}
-                    on:focusout={() => updateItem(index, { focus: false })}
-                  >
-                    <i class="glyphicons remove-2" />
-                  </button>
-                  <i class="glyphicons move" />
-                </div>
-              </div>
-            {/if}
-          </li>
-        {/each}
+      <Sortable {items} on:finalize={onFinalize} let:item>
+        <Item
+          {...item}
+          on:edit={onEdit}
+          on:remove={onRemove}
+          on:update={onUpdate}
+          on:enter={() => addButtonElement.focus()}
+        />
       </Sortable>
       <div use:resizer class="ui-resizable-handle ui-resizable-s" />
     </div>
@@ -186,7 +86,7 @@
       class="list-component__add-item btn btn-link"
       on:click={addItem}
     >
-      <i class="glyphicons plus" />
+      <i class="glyphicons plus" aria-hidden="true" />
       Lägg till...
     </button>
   </div>
@@ -196,58 +96,9 @@
   <DataHolder {id} {name} {value} {required} />
 </div>
 
-<style lang="scss" global>
-  .list-component {
-    & &__list-wrapper {
-      height: 120px;
-      min-height: 90px;
-    }
-
-    & &__item {
-      &:focus {
-        .glyphicons {
-          display: inline-block;
-        }
-      }
-
-      &:hover {
-        background-color: white;
-
-        .glyphicons {
-          display: none;
-        }
-      }
-
-      &.chosen,
-      &.focus,
-      &.hover {
-        background-color: #f5f5f5;
-
-        .glyphicons {
-          display: inline-block;
-        }
-      }
-
-      .dragging &:not(.chosen) {
-        &:hover {
-          background-color: white;
-        }
-
-        .glyphicons {
-          display: none;
-        }
-      }
-
-      &-actions {
-        button {
-          padding: 0;
-          background: none;
-          border: none;
-          -webkit-appearance: none;
-          appearance: none;
-        }
-      }
-    }
+<style lang="scss">
+  .list-component__list-wrapper {
+    min-height: 120px;
   }
 
   .disabled-overlay {
@@ -259,4 +110,5 @@
     background-color: rgba(255, 255, 255, 0.3);
     cursor: not-allowed;
   }
+
 </style>

package/components/TextList/internal/Item.svelte

@@ -0,0 +1,119 @@
+<script>
+  import { tick, createEventDispatcher, onMount } from 'svelte';
+
+  export let id;
+  export let value;
+  export let edit = false;
+
+  const dispatch = createEventDispatcher();
+
+  let oldValue;
+  let inputElement;
+
+  const editItem = async () => {
+    oldValue = value;
+    dispatch('edit', id);
+    await tick();
+    inputElement.focus();
+  };
+
+  const removeItem = () => {
+    dispatch('remove', id);
+  };
+
+  const updateItem = () => {
+    if (!value) {
+      removeItem();
+    } else {
+      dispatch('update', { id, value });
+    }
+  };
+
+  const abortEdit = () => {
+    value = oldValue;
+    dispatch('edit');
+    if (!value) {
+      removeItem();
+    }
+  };
+
+  const handleKeypress = ({ keyCode }) => {
+    // Enter
+    if (edit && keyCode === 13) {
+      updateItem();
+      dispatch('enter');
+    }
+    // Esc
+    if (edit && keyCode === 27) {
+      abortEdit();
+    }
+  };
+
+  onMount(() => {
+    if (edit) inputElement.focus();
+  });
+</script>
+
+{#if edit}
+  <div class="form-group">
+    <div class="input-group">
+      <input
+        {id}
+        bind:value
+        type="text"
+        class="form-control"
+        on:keypress={handleKeypress}
+        bind:this={inputElement}
+      />
+
+      <span class="input-group-btn">
+        <button class="btn btn-default" type="button" on:click={updateItem}>
+          <i class="glyphicons ok-2" />
+        </button>
+        <button class="btn btn-default" type="button" on:click={abortEdit}>
+          <i class="glyphicons remove-2" />
+        </button>
+      </span>
+    </div>
+  </div>
+{:else}
+  <div on:dblclick={editItem}>
+    <span class="item-name">{value}</span>
+    <div class="list-component__item-actions">
+      <button on:click={editItem}>
+        <i class="glyphicons edit" aria-hidden="true" />
+      </button>
+      <button on:click={removeItem}>
+        <i class="glyphicons remove-2" aria-hidden="true" />
+      </button>
+      <i class="glyphicons move" aria-hidden="true" />
+    </div>
+  </div>
+{/if}
+
+<style lang="scss">
+  button {
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #66afe9;
+    }
+  }
+
+  .list-component__item-actions {
+    button {
+      padding: 0;
+      background: none;
+      border: none;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    :global(li:focus-within) & i {
+      display: inline-block;
+    }
+  }
+
+</style>

package/components/TextList/internal/Sortable.svelte

@@ -1,43 +1,55 @@
 <script>
-  import { onMount, createEventDispatcher, tick } from 'svelte';
-  import { Sortable } from 'sortablejs';
+  import { createEventDispatcher } from 'svelte';
+  import { dndzone } from 'svelte-dnd-action';
+  import { flip } from 'svelte/animate';
+
+  export let items;
 
   const dispatch = createEventDispatcher();
 
-  export let items = [];
+  $: dragDisabled = items.some(({ edit }) => edit);
 
-  let element;
+  const onConsider = (e) => {
+    items = e.detail.items;
+  };
 
-  function onChoose({ oldIndex }) {
-    dispatch('choose', oldIndex);
-  }
+  const onFinalize = (e) => {
+    dispatch('finalize', e.detail.items);
+  };
 
-  function onStart() {
-    dispatch('start', items);
-  }
-
-  async function onEnd({ oldIndex, newIndex }) {
-    const copy = [...items];
-    const [item] = copy.splice(oldIndex, 1);
-    copy.splice(newIndex, 0, item);
-    await tick();
-    dispatch('end', copy);
-  }
-
-  onMount(() => {
-    Sortable.create(element, {
-      ghostClass: 'ghost',
-      chosenClass: 'chosen',
-      dragClass: 'drag',
-      filter: '.form-group',
-      preventOnFilter: false,
-      onChoose,
-      onStart,
-      onEnd,
-    });
-  });
+  const transformDraggedElement = (el) => {
+    // eslint-disable-next-line no-param-reassign
+    el.style.backgroundColor = '#f5f5f5';
+  };
 </script>
 
-<ul bind:this={element} class={$$props.class}>
-  <slot />
+<ul
+  use:dndzone={{
+    items,
+    flipDurationMs: 100,
+    dropFromOthersDisabled: true,
+    transformDraggedElement,
+    dropTargetStyle: {},
+    autoAriaDisabled: true,
+    dragDisabled,
+  }}
+  on:consider={onConsider}
+  on:finalize={onFinalize}
+  class="list-component__list"
+>
+  {#each items as item (item.id)}
+    <li class="list-component__item" animate:flip={{ duration: 100 }}>
+      <slot {item} />
+    </li>
+  {/each}
 </ul>
+
+<style>
+  ul:focus,
+  ul :global(li.focus-visible) {
+    position: relative;
+    z-index: 1;
+    outline: 2px solid #66afe9;
+  }
+
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/config-svelte",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",
@@ -8,14 +8,14 @@
   "license": "UNLICENSED",
   "sideEffects": false,
   "peerDependencies": {
-    "svelte": "^3.26.0"
+    "svelte": "^3.38.2"
   },
   "devDependencies": {
-    "svelte": "^3.26.0"
+    "svelte": "^3.38.2"
   },
   "dependencies": {
-    "focus-visible": "^5.1.0",
-    "sortablejs": "^1.12.0"
+    "focus-visible": "^5.2.0",
+    "svelte-dnd-action": "^0.9.8"
   },
   "homepage": "https://docs.soleil.se/packages/config-svelte",
   "description": "A collection of Svelte components and utilities for WebApp, RESTApp and Widget configurations.",