@soleil-se/config-svelte 1.21.0 → 1.22.0

package/CHANGELOG.md

@@ -5,6 +5,11 @@ 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.22.0] - 2024-02-13
+
+- More lenient `@sitevision/api` peer dependency range.
+- Try to use `window.sv.getValues()` if available since `window._getValues()` is deprecated.
+
 ## [1.21.0] - 2023-10-13
 
 - Add `legendVisuallyHidden` prop for [RadioGroup](./components/RadioGroup) and [CheckboxGroup](./components/CheckboxGroup).

package/components/CustomList/Component.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { createEventDispatcher, onMount, tick } from 'svelte';
+
   import { generateId, addGeneratedIds } from '../../utils';
   import { resizer } from '../../actions';
   import i18n from './i18n';
@@ -32,64 +33,65 @@
   let dragDisabled = disabled;
   let addModalOpen = false;
 
-  const onAddOpen = () => {
+  function onAddOpen() {
     addModalOpen = true;
-  };
+  }
 
-  const onAddClose = () => {
+  function onAddClose() {
     addModalOpen = false;
-  };
+  }
 
-  const updateItems = () => {
+  async function updateItems() {
+    await tick();
     items = value.map((id) => ({
       id,
       name: document.querySelector(`#modal_${id} input`)?.value || id,
     }));
-  };
+  }
 
-  const onChange = () => {
+  function onChange() {
     value = items.map((item) => item.id);
     dispatch('input', value);
     dispatch('change', value);
-  };
+  }
 
-  const onAddSave = ({ detail }) => {
+  function onAddSave({ detail }) {
     items = items.concat(detail);
     modals = modals.concat(detail.id);
     onChange();
-  };
+  }
 
-  const onEdit = ({ detail }) => {
+  function onEdit({ detail }) {
     editId = detail;
-  };
+  }
 
-  const onRemove = ({ detail }) => {
+  function onRemove({ detail }) {
     items = items.filter((item) => item.id !== detail);
     modals = modals.filter((id) => id !== detail);
     onChange();
-  };
+  }
 
-  const onEditSave = () => {
+  function onEditSave() {
     editId = undefined;
     updateItems();
     onChange();
-  };
+  }
 
-  const onEditClose = () => {
+  function onEditClose() {
     editId = undefined;
-  };
+  }
 
-  const tempDisableDrag = () => {
+  function tempDisableDrag() {
     dragDisabled = true;
     setTimeout(() => {
       dragDisabled = disabled;
     }, 300);
-  };
+  }
 
-  const onFinalize = ({ detail }) => {
+  function onFinalize({ detail }) {
     items = detail;
     onChange();
-  };
+  }
 
   onMount(updateItems);
 </script>
@@ -112,12 +114,12 @@
 </AddModal>
 
 <div class="form-group" class:hidden={!show}>
-  <label for={domId} class="control-label {required ? 'control-label--required' : ''}">
+  <label class="control-label {required ? 'control-label--required' : ''}" for={domId}>
     {label}
   </label>
   <div class="list-component">
     <div class="list-component__list-wrapper ui-resizable">
-      <Sortable {items} {dragDisabled} on:finalize={onFinalize} let:item>
+      <Sortable {dragDisabled} {items} on:finalize={onFinalize} let:item>
         <SortableItem
           {...item}
           {disabled}
@@ -127,9 +129,9 @@
           on:click={tempDisableDrag}
         />
       </Sortable>
-      <div use:resizer class="ui-resizable-handle ui-resizable-s" />
+      <div class="ui-resizable-handle ui-resizable-s" use:resizer />
     </div>
-    <button class="list-component__add-item btn btn-link" on:click={onAddOpen} {disabled}>
+    <button class="list-component__add-item btn btn-link" {disabled} on:click={onAddOpen}>
       <i class="glyphicons plus" aria-hidden="true" />
       {i18n('add')}
     </button>
@@ -139,7 +141,7 @@
     {/if}
   </div>
 
-  <DataHolder {domId} {name} {value} {required} />
+  <DataHolder {name} {domId} {required} {value} />
 </div>
 
 <style lang="scss">

package/components/CustomSelector/README.md

@@ -2,7 +2,7 @@
 
 Wrapper component for Sitevision [Custom selector](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components#h-Customselectorsince91).  
 
-![CustomSelector](../../images/CustomSelector.png)
+![CustomSelector](../../images/CustomSelector_single.png)
 ![CustomSelectorMultiple](../../images/CustomSelector_multiple.png)
 
 ## Props

package/createConfigApp/index.js

@@ -20,7 +20,7 @@ export default function createConfigApp(App) {
 
   window.getValues = () => {
     // eslint-disable-next-line no-underscore-dangle
-    const values = window._getValues();
+    const values = window?.sv?.getValues() || window?._getValues();
     return {
       ...values,
       __lastEditTimestamp: new Date().getTime(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/config-svelte",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",
@@ -8,7 +8,7 @@
   "license": "UNLICENSED",
   "sideEffects": false,
   "peerDependencies": {
-    "@sitevision/api": "^2023.8.1",
+    "@sitevision/api": "*",
     "svelte": "^3.46.0 || ^4.0.0"
   },
   "devDependencies": {