@soleil-se/config-svelte 1.26.0 → 1.26.2

package/CHANGELOG.md

@@ -7,6 +7,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.26.2] - 2024-05-23
+
+- More lenient `@sitevision/api` peer dependency range.
+
+## [1.26.1] - 2024-05-22
+
+- Update `@soleil-se/config-validate` dependency to 1.2.0.
+
 ## [1.26.0] - 2024-05-21
 
 - Add possibility to customize content for radio buttons in a radio group.

package/components/CustomList/i18n.js

@@ -3,17 +3,14 @@ import createI18n from '../../utils/createI18n';
 export default createI18n({
   sv: {
     add: 'Lägg till...',
-    validation: 'Lägg till minst en post i listan.',
     edit: 'Redigera',
   },
   no: {
     add: 'Legg till...',
-    validation: 'Legg til minst ett element i listen.',
     edit: 'Redigere',
   },
   en: {
     add: 'Add...',
-    validation: 'Add at least one item to the list.',
     edit: 'Edit',
   },
 });

package/components/CustomList/internal/DataHolder.svelte

@@ -1,7 +1,6 @@
 <!-- prettier-ignore -->
 <script>
   import { triggerInput } from '../../../utils';
-  import i18n from '../i18n';
 
   export let domId;
   export let value;
@@ -9,18 +8,7 @@
   export let required;
 
   let selectElement;
-  $: noValue = value.length === 0;
-
-  $: if (selectElement) {
-    selectElement.setCustomValidity('');
-    setTimeout(() => triggerInput(selectElement, value));
-  }
-
-  function setValidationMessage() {
-    if (required && noValue) {
-      selectElement.setCustomValidity(i18n('validation'));
-    }
-  };
+  $: if (selectElement) setTimeout(() => triggerInput(selectElement, value));
 </script>
 
 <select
@@ -30,10 +18,9 @@
   class="sr-only"
   aria-hidden="true"
   multiple
-  required={noValue && required}
+  {required}
   tabindex="-1"
   {value}
-  on:invalid={setValidationMessage}
 >
   {#each value as option}
     <option>{option}</option>

package/components/TextList/Component.svelte

@@ -109,6 +109,10 @@
 </div>
 
 <style lang="scss">
+  .form-group {
+    position: relative;
+  }
+
   .list-component__list-wrapper {
     min-height: 120px;
   }

package/components/TextList/internal/DataHolder.svelte

@@ -1,4 +1,3 @@
-<!-- prettier-ignore -->
 <script>
   import { triggerInput } from '../../../utils';
 
@@ -8,36 +7,19 @@
   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);
-    }
-  };
+  $: if (selectElement) setTimeout(() => triggerInput(selectElement, value));
 </script>
 
 <select
+  bind:this={selectElement}
   {id}
-  {value}
-  multiple
   {name}
   class="sr-only"
   aria-hidden="true"
-  bind:this={selectElement}
-  required={noValue && required}
-  on:invalid={setValidationMessage}
+  multiple
+  {required}
+  {value}
 >
   {#each value as option}
     <option>{option}</option>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/config-svelte",
-  "version": "1.26.0",
+  "version": "1.26.2",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",
@@ -8,7 +8,7 @@
   "license": "UNLICENSED",
   "sideEffects": false,
   "peerDependencies": {
-    "@sitevision/api": "^2024.4.2",
+    "@sitevision/api": "*",
     "svelte": "^3.46.0 || ^4.0.0 || ^5.0.0-next || ^5.0.0"
   },
   "devDependencies": {
@@ -24,7 +24,7 @@
     "svelte-preprocess": "^5.1.4"
   },
   "dependencies": {
-    "@soleil-se/config-validate": "^1.1.2",
+    "@soleil-se/config-validate": "^1.2.0",
     "a11y-dialog": "7.5.2",
     "svelte-dnd-action": "^0.9.44"
   },