@soleil-se/config-svelte 1.27.18 → 1.28.0

package/CHANGELOG.md

@@ -8,6 +8,10 @@ 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.28.0] - 2025-05-15
+
+- Add a `description` prop and slot to most components.
+
 ## [1.27.17] - 2025-05-08
 
 - Update type definitions.

package/components/CheckboxGroup/Component.svelte

@@ -13,6 +13,10 @@
   export let options;
   /** @type {string} */
   export let legend;
+  /** @type {string} */
+  export let label;
+  /** @type {string} */
+  export let description;
   /** @type {boolean} */
   export let legendVisuallyHidden = false;
   /** @type {boolean} */
@@ -27,6 +31,8 @@
   /** @type {string} */
   export { className as class };
 
+  $: legend = legend || label;
+
   function isChecked(option) {
     return value.includes(option.value || option);
   }
@@ -60,6 +66,11 @@
   </select>
   <legend class:sr-only={legendVisuallyHidden}>
     <slot name="legend">{legend}</slot>
+    {#if description}
+      <p class="help-block">{description}</p>
+    {:else if $$slots.description}
+      <p class="help-block"><slot name="description"></slot></p>
+    {/if}
   </legend>
   {#each options as option, index}
     <input

package/components/CustomList/Component.svelte

@@ -15,6 +15,8 @@
 
   /** @type {string} */
   export let label;
+  /** @type {string} */
+  export let description;
   /** @type {boolean} */
   export let required = false;
   /** @type {string} */
@@ -122,6 +124,11 @@
   <label class="control-label {required ? 'control-label--required' : ''}" for={domId}>
     <slot name="label">{label}</slot>
   </label>
+  {#if description}
+    <p class="help-block">{description}</p>
+  {:else if $$slots.description}
+    <p class="help-block"><slot name="description"></slot></p>
+  {/if}
   <div class="list-component">
     <div class="list-component__list-wrapper ui-resizable">
       <Sortable {dragDisabled} {items} on:finalize={onFinalize} let:item>

package/components/CustomSelector/Component.svelte

@@ -11,6 +11,8 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
+  export let description;
+  /** @type {string} */
   export let name = undefined;
   /** @type {string} */
   export let placeholder = i18n('placeholder');
@@ -105,7 +107,7 @@
       {label}
     </slot>
   </label>
-  <select bind:this={element} {id} name={!multiple ? name : undefined} {disabled} {required}>
+  <select bind:this={element} {id} name={!multiple ? name : undefined} aria-describedby={description ? `${id}_description` : undefined} {disabled} {required}>
     <option></option>
     {#each options as option}
       <option value={option.value ?? option}>
@@ -120,5 +122,10 @@
       {/each}
     </select>
   {/if}
+  {#if description}
+    <p id="{id}_description" class="help-block">{description}</p>
+  {:else if $$slots.description}
+    <p id="{id}_description" class="help-block"><slot name="description"></slot></p>
+  {/if}
   <slot />
 </div>

package/components/DropdownSelector/Component.svelte

@@ -10,6 +10,8 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
+  export let description;
+  /** @type {string} */
   export let name = undefined;
   /** @type {import('./types.d.ts').Type} */
   export let type = 'metadata';
@@ -34,10 +36,10 @@
 
   $: component = type.endsWith('-selector') ? type : `${type}-selector`;
 
-  const setValue = (target) => {
+  function setValue(target) {
     hidden = false;
-    jQuery(target).val(value).trigger('change');
-  };
+    window.jQuery(target).val(value).trigger('change');
+  }
 
   onMount(() => {
     const [el] = setupComponent(id)
@@ -64,7 +66,7 @@
   @component
   Wrapper component for Sitevision [selects](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components).
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/DropdownSelector/)
+  [README](https://docs.soleil.se/packages/config-svelte/components/dropdownselector/)
 -->
 
 <div class="form-group {className}" class:hidden={!show} {hidden}>
@@ -74,11 +76,17 @@
   <select
     {id}
     {name}
+    aria-describedby={description ? `${id}_description` : undefined}
     data-component={component}
     data-removable
     data-types={selectable}
     {disabled}
     {required}
   ></select>
+  {#if description}
+    <p id="{id}_description" class="help-block">{description}</p>
+  {:else if $$slots.description}
+    <p id="{id}_description" class="help-block"><slot name="description"></slot></p>
+  {/if}
   <slot />
 </div>

package/components/InputField/Component.svelte

@@ -11,6 +11,8 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
+  export let description;
+  /** @type {string} */
   export let type = 'text';
   /** @type {string} */
   export let name = undefined;
@@ -22,7 +24,6 @@
   export let readonly = false;
   /** @type {number} */
   export let rows = 3;
-
   /** @type {function} */
   export let action = prefixHttps;
   /** @type {boolean} */
@@ -62,6 +63,7 @@
       {id}
       {name}
       class="form-control"
+      aria-describedby={description ? `${id}_description` : undefined}
       {disabled}
       {readonly}
       required={isRequired}
@@ -75,6 +77,7 @@
       {id}
       {name}
       class="form-control"
+      aria-describedby={description ? `${id}_description` : undefined}
       {disabled}
       {readonly}
       required={isRequired}
@@ -85,6 +88,11 @@
       use:action
     />
   {/if}
+  {#if description}
+    <p id="{id}_description" class="help-block">{description}</p>
+  {:else if $$slots.description}
+    <p id="{id}_description" class="help-block"><slot name="description"></slot></p>
+  {/if}
   <slot />
 </div>
 

package/components/ListSelector/Component.svelte

@@ -11,6 +11,8 @@
   export let name;
   /** @type {string} */
   export let label;
+  /** @type {string} */
+  export let description;
   /** @type {import('./types.d.ts').Type} */
   export let type = 'page';
   /** @type {boolean} */
@@ -64,9 +66,16 @@
   <label class="control-label {required ? 'control-label--required' : ''}" for={id}>
     <slot name="label">{label}</slot>
   </label>
+  {#if description}
+    <p id="{id}_description" class="help-block">{description}</p>
+  {:else if $$slots.description}
+    <p id="{id}_description" class="help-block"><slot name="description"></slot></p>
+  {/if}
   <input
     {id}
     {name}
+    aria-describedby={description ? `${id}_description` : undefined}
+    aria-required={required || undefined}
     data-component={component}
     data-sortable={sortable || undefined}
     data-types={selectable}

package/components/NodeSelector/Component.svelte

@@ -1,5 +1,5 @@
 <script>
-  /* eslint-disable no-undef-init */
+   
   import { createEventDispatcher, onMount } from 'svelte';
   import { generateId, setupComponent } from '../../utils';
 
@@ -8,7 +8,10 @@
 
   /** @type {string} */
   export let id = generateId();
+   /** @type {string} */
   export let label;
+  /** @type {string} */
+  export let description;
   /** @type {import('./types.d.ts').Type} */
   export let type = 'page';
   /** @type {string} */
@@ -80,6 +83,7 @@
     {id}
     {name}
     class="form-control"
+    aria-describedby={description ? `${id}_description` : undefined}
     data-component={component}
     data-removable={removable ? '' : undefined}
     data-types={selectable}
@@ -89,6 +93,11 @@
     required={isRequired}
     value={displayName}
   />
+  {#if description}
+    <p id="{id}_description" class="help-block">{description}</p>
+  {:else if $$slots.description}
+    <p id="{id}_description" class="help-block"><slot name="description"></slot></p>
+  {/if}
   {#if disabled}
     <div class="disabled-overlay"></div>
   {/if}

package/components/NumberSpinner/Component.svelte

@@ -11,6 +11,8 @@
   export let name;
   /** @type {string} */
   export let label;
+  /** @type {string} */
+  export let description;
   /** @type {number} */
   export let min;
   /** @type {number} */
@@ -69,6 +71,7 @@
     {id}
     {name}
     class="form-control"
+    aria-describedby={description ? `${id}_description` : undefined}
     data-component="number-spinner"
     data-decimals={decimals}
     data-max={max}
@@ -78,6 +81,11 @@
     {readonly}
     {value}
   />
+  {#if description}
+    <p id="{id}_description" class="help-block">{description}</p>
+  {:else if $$slots.description}
+    <p id="{id}_description" class="help-block"><slot name="description"></slot></p>
+  {/if}
   {#if disabled}
     <div class="disabled-overlay"></div>
   {/if}

package/components/Panel/Component.svelte

@@ -98,7 +98,17 @@
     border-left: 1px solid #aaa;
   }
 
+  label + .help-block {
+    margin-block: 0 5px;
+  }
+
+  legend .help-block {
+    margin-block: 3px 0;
+    font-weight: normal;
+  }
+
   .form-group .help-block:last-child {
     margin-bottom: 0;
   }
+
 </style>

package/components/RadioGroup/Component.svelte

@@ -15,6 +15,8 @@
   export let legend;
   /** @type {string} */
   export let label;
+  /** @type {string} */
+  export let description;
   /** @type {boolean} */
   export let legendVisuallyHidden = false;
   /** @type {boolean} */
@@ -48,6 +50,11 @@
 <fieldset class="form-group" class:hidden={!show}>
   <legend class:sr-only={legendVisuallyHidden}>
     <slot name="legend">{legend}</slot>
+    {#if description}
+      <p class="help-block">{description}</p>
+    {:else if $$slots.description}
+      <p class="help-block"><slot name="description"></slot></p>
+    {/if}
   </legend>
   {#each options as option, index}
     <input

package/components/RepositoryNodeSelector/Component.svelte

@@ -10,6 +10,8 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
+  export let description;
+  /** @type {string} */
   export let name;
   /** @type {boolean} */
   export let searchable;
@@ -71,6 +73,7 @@
 <CustomSelector
   {id}
   {name}
+  {description}
   {disabled}
   {label}
   {multiple}

package/components/SelectField/Component.svelte

@@ -10,6 +10,8 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
+  export let description;
+  /** @type {string} */
   export let name;
   /** @type {string} */
   export let required = false;
@@ -37,7 +39,7 @@
   <label class="control-label {required ? 'control-label--required' : ''}" for={id}>
     <slot name="label">{label}</slot>
   </label>
-  <select {id} {name} class="form-control" {disabled} {required} bind:value on:change={onChange}>
+  <select {id} {name} class="form-control" aria-describedby={description ? `${id}_description` : undefined} {disabled} {required} bind:value on:change={onChange}>
     <option disabled hidden selected value=""></option>
     {#each options as option}
       <option value={option.value ?? option}>
@@ -45,6 +47,11 @@
       </option>
     {/each}
   </select>
+  {#if description}
+    <p id="{id}_description" class="help-block">{description}</p>
+  {:else if $$slots.description}
+    <p id="{id}_description" class="help-block"><slot name="description"></slot></p>
+  {/if}
   <slot />
 </div>
 

package/components/TagSelector/Component.svelte

@@ -1,5 +1,4 @@
 <script>
-  /* eslint-disable no-undef-init */
   import { createEventDispatcher, onMount } from 'svelte';
   import { generateId, setupComponent } from '../../utils';
 
@@ -11,6 +10,8 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
+  export let description;
+  /** @type {string} */
   export let name;
   /** @type {boolean} */
   export let required = false;
@@ -65,6 +66,7 @@
     {id}
     {name}
     class="form-control"
+    aria-describedby={description ? `${id}_description` : undefined}
     data-component="tags-selector"
     {disabled}
     required={isRequired}
@@ -73,6 +75,11 @@
   {#if disabled}
     <div class="disabled-overlay"></div>
   {/if}
+  {#if description}
+    <p id="{id}_description" class="help-block">{description}</p>
+  {:else if $$slots.description}
+    <p id="{id}_description" class="help-block"><slot name="description"></slot></p>
+  {/if}
   <slot />
 </div>
 

package/components/TextList/Component.svelte

@@ -15,6 +15,8 @@
   export let id = generateId();
   /** @type {string} */
   export let label;
+  /** @type {string} */
+  export let description;
   /** @type {boolean} */
   export let required = false;
   /** @type {string} */
@@ -87,6 +89,11 @@
   <label class="control-label {required ? 'control-label--required' : ''}" for={id}>
     <slot name="label">{label}</slot>
   </label>
+  {#if description}
+    <p class="help-block">{description}</p>
+  {:else if $$slots.description}
+    <p class="help-block"><slot name="description"></slot></p>
+  {/if}
   <div class="list-component">
     <div class="list-component__list-wrapper ui-resizable">
       <Sortable {items} on:finalize={onFinalize} let:item>

package/package.json

@@ -9,7 +9,7 @@
     "svelte"
   ],
   "homepage": "https://docs.soleil.se/packages/config-svelte",
-  "version": "1.27.18",
+  "version": "1.28.0",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",
@@ -59,5 +59,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4465a8e439b30cb04ff0655759e26eb802a30805"
+  "gitHead": "0c28ddb7659269ecba2b09a79da9ba44e0ef35d4"
 }