@soleil-se/config-svelte 1.24.0 → 1.25.0

package/CHANGELOG.md

@@ -7,6 +7,21 @@ 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.25.0] - 2024-04-29
+
+- Add `createConfigApp` function for creating a config app with Svelte 5.
+- Rewrite of `CustomList` edit modal handling to work with Svelte 5.
+- Remove all self closing tags in components.
+- Remove `focus-visible` polyfill.
+
+## [1.24.1] - 2024-04-29
+
+- Add Svelte 5 as a peer dependency.
+
+## [1.24.0] - 2024-04-18
+
+- Add label slot for most components.
+
 ## [1.23.0] - 2024-03-07
 
 - List item templating in `CustomList` with [CustomListItemTemplate](/packages/soleil/svelte-config/components/customlist/#list-item-template).

package/components/Checkbox/Component.svelte

@@ -65,7 +65,7 @@
       border-radius: 3px;
     }
 
-    :global(.focus-visible) + &::before {
+    input:focus-visible + &::before {
       box-shadow: 0 0 0 0.2rem rgb(66 139 202 / 40%);
     }
 

package/components/CheckboxGroup/Component.svelte

@@ -97,7 +97,7 @@
       border-radius: 3px;
     }
 
-    :global(.focus-visible) + &::before {
+    input:focus-visible + &::before {
       box-shadow: 0 0 0 0.2rem rgb(66 139 202 / 40%);
     }
 

package/components/CustomList/Component.svelte

@@ -26,9 +26,8 @@
   addGeneratedIds(value);
 
   const domId = generateId();
-  let modals = value;
+  let modals = value.reduce((acc, id) => ({ ...acc, [id]: false }), {}) || [];
   let items = [];
-  let editId;
   let dragDisabled = disabled;
   let addModalOpen = false;
 
@@ -36,10 +35,6 @@
     addModalOpen = true;
   }
 
-  function onAddClose() {
-    addModalOpen = false;
-  }
-
   async function updateItems() {
     await tick();
     items = value.map((id) => ({
@@ -48,6 +43,7 @@
         document.querySelector(`#modal_${id} .custom-list-item-template`)?.innerHTML ||
         document.querySelector(`#modal_${id} input:not([type=radio],[type=checkbox])`)?.value ||
         id,
+      open: false,
     }));
   }
 
@@ -59,30 +55,26 @@
 
   function onAddSave({ detail }) {
     items = items.concat(detail);
-    modals = modals.concat(detail.id);
+    modals[detail.id] = false;
     onChange();
   }
 
   function onEdit({ detail }) {
-    editId = detail;
+    modals[detail] = true;
   }
 
   function onRemove({ detail }) {
     items = items.filter((item) => item.id !== detail);
-    modals = modals.filter((id) => id !== detail);
+    delete modals[detail];
+    modals = modals;
     onChange();
   }
 
   function onEditSave() {
-    editId = undefined;
     updateItems();
     onChange();
   }
 
-  function onEditClose() {
-    editId = undefined;
-  }
-
   function tempDisableDrag() {
     dragDisabled = true;
     setTimeout(() => {
@@ -110,13 +102,13 @@
   [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/CustomList/)
 -->
 
-{#each modals as id, index (id)}
-  <EditModal {id} open={editId === id} on:save={onEditSave} on:close={onEditClose}>
-    <slot {id} {index} {triggerUpdate} />
+{#each Object.keys(modals) as id (id)}
+  <EditModal {id} bind:open={modals[id]} on:save={onEditSave}>
+    <slot {id} {triggerUpdate} />
   </EditModal>
 {/each}
-<AddModal {name} open={addModalOpen} on:save={onAddSave} on:close={onAddClose} let:id>
-  <slot {id} index={items.length} {triggerUpdate} />
+<AddModal {name} bind:open={addModalOpen} on:save={onAddSave} let:id>
+  <slot {id} {triggerUpdate} />
 </AddModal>
 
 <div class="form-group" class:hidden={!show}>
@@ -134,18 +126,19 @@
           on:remove={onRemove}
           on:click={tempDisableDrag}
         >
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
           {@html item.name}
         </SortableItem>
       </Sortable>
-      <div class="ui-resizable-handle ui-resizable-s" use:resizer />
+      <div class="ui-resizable-handle ui-resizable-s" use:resizer></div>
     </div>
     <button class="list-component__add-item btn btn-link" {disabled} on:click={onAddOpen}>
-      <i class="glyphicons plus" aria-hidden="true" />
+      <i class="glyphicons plus" aria-hidden="true"></i>
       {i18n('add')}
     </button>
 
     {#if disabled}
-      <div class="disabled-overlay" />
+      <div class="disabled-overlay"></div>
     {/if}
   </div>
 
@@ -181,7 +174,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid #66afe9;
+      outline: 2px solid #428bca;
     }
   }
 </style>

package/components/CustomList/internal/AddModal.svelte

@@ -31,7 +31,7 @@
   };
 </script>
 
-<Modal {open} title={i18n('add')} on:save={onSave} on:close={onClose} bind:element>
+<Modal title={i18n('add')} bind:open on:save={onSave} on:close={onClose} bind:element>
   {#if id}
     <slot {id} />
   {/if}

package/components/CustomList/internal/DataHolder.svelte

@@ -11,14 +11,12 @@
   let selectElement;
   $: noValue = value.length === 0;
 
-  $: {
-    if (selectElement) {
-      selectElement.setCustomValidity('');
-      setTimeout(() => triggerInput(selectElement, value));
-    }
+  $: if (selectElement) {
+    selectElement.setCustomValidity('');
+    setTimeout(() => triggerInput(selectElement, value));
   }
 
-  const setValidationMessage = () => {
+  function setValidationMessage() {
     if (required && noValue) {
       selectElement.setCustomValidity(i18n('validation'));
     }
@@ -26,16 +24,16 @@
 </script>
 
 <select
+  bind:this={selectElement}
   id={domId}
-  {value}
-  multiple
   {name}
   class="sr-only"
   aria-hidden="true"
-  bind:this={selectElement}
+  multiple
   required={noValue && required}
-  on:invalid={setValidationMessage}
   tabindex="-1"
+  {value}
+  on:invalid={setValidationMessage}
 >
   {#each value as option}
     <option>{option}</option>

package/components/CustomList/internal/EditModal.svelte

@@ -8,9 +8,9 @@
   let name = '';
   let element;
 
-  const onOpen = () => {
+  function onOpen() {
     name = element.querySelector('input')?.value || id;
-  };
+  }
 </script>
 
 <div id="modal_{id}" style:display="contents">

package/components/CustomList/internal/Sortable.svelte

@@ -9,19 +9,19 @@
 
   const dispatch = createEventDispatcher();
 
-  const onConsider = (e) => {
+  function onConsider(e) {
     items = e.detail.items;
-  };
+  }
 
-  const onFinalize = (e) => {
+  function onFinalize(e) {
     items = e.detail.items;
     dispatch('finalize', items);
-  };
+  }
 
-  const transformDraggedElement = (el) => {
+  function transformDraggedElement(el) {
     // eslint-disable-next-line no-param-reassign
     el.style.backgroundColor = '#f5f5f5';
-  };
+  }
 </script>
 
 <ul
@@ -56,10 +56,10 @@
     padding: 0;
   }
 
-  ul:focus,
-  ul :global(li.focus-visible) {
+  ul:focus-visible,
+  ul li:focus-visible {
     position: relative;
     z-index: 1;
-    outline: 2px solid #66afe9;
+    outline: 2px solid #428bca;
   }
 </style>

package/components/CustomList/internal/SortableItem.svelte

@@ -7,32 +7,32 @@
 
   const dispatch = createEventDispatcher();
 
-  const editItem = async () => {
+  function editItem() {
     dispatch('edit', id);
-  };
+  }
 
-  const removeItem = () => {
+  function removeItem() {
     dispatch('remove', id);
-  };
+  }
 </script>
 
 <!-- This is handled by the click event on the edit button -->
 <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
 <div class="list-component__item" on:dblclick={editItem} on:click>
   {#if icon}
-    <i class="sv-list-icon {icon}" aria-hidden="true" />
+    <i class="sv-list-icon {icon}" aria-hidden="true"></i>
   {/if}
   <span class="item-name">
     <slot />
   </span>
   <div class="list-component__item-actions">
     <button {disabled} on:click={editItem}>
-      <i class="glyphicons edit" aria-hidden="true" />
+      <i class="glyphicons edit" aria-hidden="true"></i>
     </button>
     <button {disabled} on:click={removeItem}>
-      <i class="glyphicons remove-2" aria-hidden="true" />
+      <i class="glyphicons remove-2" aria-hidden="true"></i>
     </button>
-    <i class="glyphicons move" aria-hidden="true" />
+    <i class="glyphicons move" aria-hidden="true"></i>
   </div>
 </div>
 
@@ -50,7 +50,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid #66afe9;
+      outline: 2px solid #428bca;
     }
   }
 

package/components/CustomSelector/Component.svelte

@@ -43,6 +43,7 @@
 
   onMount(() => {
     // Instansiate select2 ourselves to be able to use more options.
+    if (multiple) element.setAttribute('multiple', '');
     jQuery(element)
       .select2({
         placeholder,
@@ -84,15 +85,8 @@
       {label}
     </slot>
   </label>
-  <select
-    bind:this={element}
-    {id}
-    name={!multiple ? name : undefined}
-    {disabled}
-    {multiple}
-    {required}
-  >
-    <option />
+  <select bind:this={element} {id} name={!multiple ? name : undefined} {disabled} {required}>
+    <option></option>
     {#each options as option}
       <option value={option.value ?? option}>
         {option.label ?? option}
@@ -103,7 +97,7 @@
   {#if multiple}
     <select {name} hidden multiple {value}>
       {#each options as option}
-        <option value={option.value ?? option} />
+        <option value={option.value ?? option}></option>
       {/each}
     </select>
   {/if}

package/components/DropdownSelector/Component.svelte

@@ -70,6 +70,6 @@
     data-types={selectable}
     {disabled}
     {required}
-  />
+  ></select>
   <slot />
 </div>

package/components/InputField/Component.svelte

@@ -69,7 +69,7 @@
       {value}
       {...$$restProps}
       on:input={onInput}
-    />
+    ></textarea>
   {:else}
     <input
       {id}

package/components/ListSelector/Component.svelte

@@ -64,7 +64,7 @@
     value={value.join(',')}
   />
   {#if disabled}
-    <div class="disabled-overlay" />
+    <div class="disabled-overlay"></div>
   {/if}
   <slot />
 </div>

package/components/Modal/Component.svelte

@@ -143,7 +143,7 @@
 >
   <!-- This is handled by the keydown event on svelte:window -->
   <!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
-  <div class="overlay" on:click={close} />
+  <div class="overlay" on:click={close}></div>
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">

package/components/NodeSelector/Component.svelte

@@ -80,7 +80,7 @@
     value={displayName}
   />
   {#if disabled}
-    <div class="disabled-overlay" />
+    <div class="disabled-overlay"></div>
   {/if}
   <slot />
 </div>

package/components/NumberSpinner/Component.svelte

@@ -65,7 +65,7 @@
     {value}
   />
   {#if disabled}
-    <div class="disabled-overlay" />
+    <div class="disabled-overlay"></div>
   {/if}
   <slot />
 </div>

package/components/RadioGroup/Component.svelte

@@ -44,7 +44,6 @@
     <input
       id={`${id}_${index}`}
       class="sr-only"
-      checked={option.value || option}
       disabled={isDisabled(option, disabled)}
       type="radio"
       value={option.value || option}
@@ -91,10 +90,6 @@
       border-radius: 50%;
     }
 
-    :global(.focus-visible) + &::before {
-      box-shadow: 0 0 0 0.2rem rgb(66 139 202 / 40%);
-    }
-
     input:checked + &::before {
       background-color: #428bca;
       border-color: transparent;
@@ -111,6 +106,10 @@
       border-radius: 50%;
     }
 
+    input:focus-visible + &::before {
+      box-shadow: 0 0 0 0.2rem rgb(66 139 202 / 40%);
+    }
+
     &.disabled {
       cursor: not-allowed;
       opacity: 0.7;

package/components/TagSelector/Component.svelte

@@ -65,7 +65,7 @@
     {value}
   />
   {#if disabled}
-    <div class="disabled-overlay" />
+    <div class="disabled-overlay"></div>
   {/if}
   <slot />
 </div>

package/components/TextList/Component.svelte

@@ -91,19 +91,19 @@
           on:enter={() => addButtonElement.focus()}
         />
       </Sortable>
-      <div class="ui-resizable-handle ui-resizable-s" use:resizer />
+      <div class="ui-resizable-handle ui-resizable-s" use:resizer></div>
     </div>
     <button
       bind:this={addButtonElement}
       class="list-component__add-item btn btn-link"
       on:click={addItem}
     >
-      <i class="glyphicons plus" aria-hidden="true" />
+      <i class="glyphicons plus" aria-hidden="true"></i>
       {i18n('add')}
     </button>
   </div>
   {#if disabled}
-    <div class="disabled-overlay" />
+    <div class="disabled-overlay"></div>
   {/if}
   <DataHolder {id} {name} {required} {value} />
 </div>

package/components/TextList/internal/Item.svelte

@@ -68,10 +68,10 @@
 
       <span class="input-group-btn">
         <button class="btn btn-default" type="button" on:click={updateItem}>
-          <i class="glyphicons ok-2" />
+          <i class="glyphicons ok-2"></i>
         </button>
         <button class="btn btn-default" type="button" on:click={abortEdit}>
-          <i class="glyphicons remove-2" />
+          <i class="glyphicons remove-2"></i>
         </button>
       </span>
     </div>
@@ -82,12 +82,12 @@
     <span class="item-name">{value}</span>
     <div class="list-component__item-actions">
       <button on:click={editItem}>
-        <i class="glyphicons edit" aria-hidden="true" />
+        <i class="glyphicons edit" aria-hidden="true"></i>
       </button>
       <button on:click={removeItem}>
-        <i class="glyphicons remove-2" aria-hidden="true" />
+        <i class="glyphicons remove-2" aria-hidden="true"></i>
       </button>
-      <i class="glyphicons move" aria-hidden="true" />
+      <i class="glyphicons move" aria-hidden="true"></i>
     </div>
   </div>
 {/if}
@@ -99,17 +99,16 @@
     }
 
     &:focus-visible {
-      outline: 2px solid #66afe9;
+      outline: 2px solid #428bca;
     }
   }
 
   .list-component__item-actions {
     button {
       padding: 0;
+      appearance: none;
       background: none;
       border: none;
-      appearance: none;
-      appearance: none;
     }
 
     :global(li:focus-within) & i {

package/components/TextList/internal/Sortable.svelte

@@ -24,6 +24,9 @@
 </script>
 
 <ul
+  class="list-component__list"
+  on:consider={onConsider}
+  on:finalize={onFinalize}
   use:dndzone={{
     items,
     flipDurationMs: 100,
@@ -33,9 +36,6 @@
     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 }}>
@@ -46,10 +46,9 @@
 
 <style>
   ul:focus,
-  ul :global(li.focus-visible) {
+  ul li:focus-visible {
     position: relative;
     z-index: 1;
-    outline: 2px solid #66afe9;
+    outline: 2px solid #428bca;
   }
-
 </style>

package/createConfigApp/index.js

@@ -1,22 +1,22 @@
-import 'focus-visible';
-
-export default function createConfigApp(App) {
+export default function createConfigApp(callback) {
   window.setValues = (values) => {
     // window?.sv?.setValues(values);
     window.CONFIG_VALUES = values;
 
+    const props = {
+      ...window.CONFIG_APP_PROPS,
+      values,
+    };
+
     const target = document.querySelector('#app_root') || document.querySelector('body');
     target.innerHTML = '';
 
-    const app = new App({
-      target,
-      props: {
-        ...window.CONFIG_APP_PROPS,
-        values,
-      },
-    });
-
-    return app;
+    if (callback?.toString()?.startsWith('class')) {
+      // Legacy support for class components
+      // eslint-disable-next-line no-new, new-cap
+      return new callback({ target, props });
+    }
+    return callback({ target, props });
   };
 
   window.getValues = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/config-svelte",
-  "version": "1.24.0",
+  "version": "1.25.0",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",
@@ -8,26 +8,25 @@
   "license": "UNLICENSED",
   "sideEffects": false,
   "peerDependencies": {
-    "@sitevision/api": "*",
-    "svelte": "^3.46.0 || ^4.0.0"
+    "@sitevision/api": "^2024.4.2",
+    "svelte": "^3.46.0 || ^4.0.0 || ^5.0.0-next || ^5.0.0"
   },
   "devDependencies": {
-    "@soleil-se/eslint-config": "^5.1.1",
+    "@soleil-se/eslint-config": "^5.1.2",
     "@soleil-se/stylelint-config": "^3.1.1",
-    "eslint": "^8.51.0",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-svelte": "^2.34.0",
-    "stylelint": "^15.10.3",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-svelte": "^2.38.0",
+    "stylelint": "^15.11.0",
     "svelte": "^4.2.1",
-    "svelte-preprocess": "^5.0.4"
+    "svelte-preprocess": "^5.1.4"
   },
   "dependencies": {
     "@soleil-se/config-validate": "^1.1.2",
     "a11y-dialog": "7.5.2",
-    "focus-visible": "^5.2.0",
-    "svelte-dnd-action": "^0.9.31"
+    "svelte-dnd-action": "^0.9.44"
   },
   "homepage": "https://docs.soleil.se/packages/config-svelte",
   "description": "A collection of Svelte components and utilities for WebApp, RESTApp and Widget configurations.",