@soleil-se/config-svelte 1.23.0 → 1.24.1

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.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

@@ -32,18 +32,22 @@
 
 <div class="form-group {className}" class:hidden={!show}>
   <input
-    bind:checked={value}
-    {name}
     {id}
-    {disabled}
+    {name}
     class="sr-only"
-    type="checkbox"
     data-value-type="boolean"
+    {disabled}
+    type="checkbox"
+    bind:checked={value}
     on:change={onChange}
   />
-  <label for={id} class="checkbox-inline" class:disabled> {label} </label>
+  <label class="checkbox-inline" class:disabled for={id}>
+    <slot name="label">{label}</slot>
+  </label>
+  <slot />
 </div>
 
+<!-- eslint-disable max-len -->
 <style lang="scss">
   label {
     position: relative;

package/components/CheckboxGroup/Component.svelte

@@ -41,7 +41,9 @@
 -->
 
 <fieldset class="form-group {className}" class:hidden={!show}>
-  <legend class:sr-only={legendVisuallyHidden}>{legend}</legend>
+  <legend class:sr-only={legendVisuallyHidden}>
+    <slot name="legend">{legend}</slot>
+  </legend>
   {#each options as option, index}
     <input
       id={`${id}_${index}`}
@@ -62,6 +64,7 @@
       {option.label || option}
     </label>
   {/each}
+  <slot />
 </fieldset>
 
 <!-- eslint-disable -->

package/components/CustomList/Component.svelte

@@ -121,7 +121,7 @@
 
 <div class="form-group" class:hidden={!show}>
   <label class="control-label {required ? 'control-label--required' : ''}" for={domId}>
-    {label}
+    <slot name="label">{label}</slot>
   </label>
   <div class="list-component">
     <div class="list-component__list-wrapper ui-resizable">

package/components/CustomSelector/Component.svelte

@@ -79,7 +79,11 @@
       </span>
     {/each}
   {/if}
-  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>{label}</label>
+  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>
+    <slot name="label">
+      {label}
+    </slot>
+  </label>
   <select
     bind:this={element}
     {id}

package/components/DropdownSelector/Component.svelte

@@ -59,7 +59,9 @@
 -->
 
 <div class="form-group {className}" class:hidden={!show} {hidden}>
-  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>{label}</label>
+  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>
+    <slot name="label">{label}</slot>
+  </label>
   <select
     {id}
     {name}

package/components/ImageSelector/Component.svelte

@@ -72,18 +72,18 @@
   <NodeSelector
     name="{name}Node"
     label={i18n('selectImage')}
+    {required}
     type="image"
     bind:value={node}
     on:change={onChange}
-    {required}
   />
   <div class="form-group">
     {#if !hideDecorative}
       <Checkbox
-        class="checkbox-group"
-        bind:value={decorative}
         name="{name}Decorative"
+        class="checkbox-group"
         label={i18n('imageIsDecorative')}
+        bind:value={decorative}
         on:change={onChange}
       />
     {/if}
@@ -91,15 +91,15 @@
       {#if useCustomAlt}
         <InputField name="{name}Alt" label={i18n('altText')} required bind:value={alt} />
       {:else}
-        <InputField label={i18n('altFromCaption')} value={imageArchiveAlt} readonly disabled>
+        <InputField disabled label={i18n('altFromCaption')} readonly value={imageArchiveAlt}>
           <input bind:this={validationEl} class="sr-only" />
         </InputField>
       {/if}
 
       <Checkbox
         class="checkbox-group"
-        bind:value={useCustomAlt}
         label={i18n('customAltText')}
+        bind:value={useCustomAlt}
         on:change={onUseCustomToggle}
       />
     {/if}

package/components/InputField/Component.svelte

@@ -54,35 +54,35 @@
 -->
 
 <div class="form-group {className}" class:hidden={!show}>
-  <label for={id} class="control-label {isRequired ? 'control-label--required' : ''}">
-    {label}
+  <label class="control-label {isRequired ? 'control-label--required' : ''}" for={id}>
+    <slot name="label">{label}</slot>
   </label>
   {#if isTextarea}
     <textarea
-      class="form-control"
-      required={isRequired}
       {id}
       {name}
+      class="form-control"
       {disabled}
       {readonly}
-      {value}
+      required={isRequired}
       {rows}
+      {value}
       {...$$restProps}
       on:input={onInput}
     />
   {:else}
     <input
-      class="form-control"
-      required={isRequired}
       {id}
       {name}
-      {type}
+      class="form-control"
       {disabled}
       {readonly}
+      required={isRequired}
+      {type}
       {value}
       {...$$restProps}
-      use:action
       on:input={onInput}
+      use:action
     />
   {/if}
   <slot />

package/components/ListSelector/Component.svelte

@@ -50,15 +50,17 @@
 -->
 
 <div class="form-group" class:disabled class:hidden={!show}>
-  <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
+  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>
+    <slot name="label">{label}</slot>
+  </label>
   <input
     {id}
     {name}
-    type="hidden"
     data-component={component}
-    {required}
     data-sortable={sortable || undefined}
     data-types={selectable}
+    {required}
+    type="hidden"
     value={value.join(',')}
   />
   {#if disabled}

package/components/NodeSelector/Component.svelte

@@ -35,7 +35,7 @@
   };
 
   if (type.startsWith('tags')) {
-    throw new Error('Type \'tags-selector\' is not supported, use TagsSelector component.');
+    throw new Error("Type 'tags-selector' is not supported, use TagsSelector component.");
   }
 
   onMount(() => {
@@ -63,21 +63,21 @@
 -->
 
 <div class="form-group {className}" class:hidden={!show}>
-  <label for={id} class="control-label {isRequired ? 'control-label--required' : ''}">
-    {label}
+  <label class="control-label {isRequired ? 'control-label--required' : ''}" for={id}>
+    <slot name="label">{label}</slot>
   </label>
   <input
-    class="form-control"
     {id}
     {name}
+    class="form-control"
+    data-component={component}
+    data-removable={removable ? '' : undefined}
+    data-types={selectable}
+    data-value={value}
     {disabled}
     {readonly}
     required={isRequired}
-    data-removable={removable ? '' : undefined}
-    data-component={component}
-    data-types={selectable}
     value={displayName}
-    data-value={value}
   />
   {#if disabled}
     <div class="disabled-overlay" />

package/components/NumberSpinner/Component.svelte

@@ -49,18 +49,20 @@
 -->
 
 <div class="form-group {className}" class:hidden={!show}>
-  <label for={id} class="control-label">{label}</label>
+  <label class="control-label" for={id}>
+    <slot name="label">{label}</slot>
+  </label>
   <input
     {id}
     {name}
-    {value}
     class="form-control"
-    data-min={min}
+    data-component="number-spinner"
     data-max={max}
+    data-min={min}
     data-step={step}
     {disabled}
     {readonly}
-    data-component="number-spinner"
+    {value}
   />
   {#if disabled}
     <div class="disabled-overlay" />

package/components/RadioGroup/Component.svelte

@@ -37,7 +37,9 @@
 -->
 
 <fieldset class="form-group" class:hidden={!show}>
-  <legend class:sr-only={legendVisuallyHidden}>{legend}</legend>
+  <legend class:sr-only={legendVisuallyHidden}>
+    <slot name="legend">{legend}</slot>
+  </legend>
   {#each options as option, index}
     <input
       id={`${id}_${index}`}
@@ -58,6 +60,7 @@
     </label>
   {/each}
   <input {name} type="hidden" {value} />
+  <slot />
 </fieldset>
 
 <style lang="scss">

package/components/RepositoryNodeSelector/Component.svelte

@@ -54,20 +54,22 @@
 
 <CustomSelector
   {id}
-  {label}
   {name}
-  {searchable}
-  {required}
   {disabled}
+  {label}
   {multiple}
-  {show}
   {options}
+  {required}
+  {searchable}
+  {show}
   {value}
   on:input
   on:change
 >
+  <slot name="label" />
   <slot />
   {#if error}
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
     <p class="alert alert-danger">{@html i18n('error')}</p>
   {/if}
 </CustomSelector>

package/components/SelectField/Component.svelte

@@ -27,9 +27,10 @@
   [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/SelectField/)
 -->
 <div class="form-group" class:hidden={!show}>
-  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>{label}</label>
-  <!-- svelte-ignore a11y-no-onchange -->
-  <select class="form-control" bind:value {id} {disabled} {required} {name} on:change={onChange}>
+  <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}>
     {#each options as option}
       <option value={option.value ?? option}>
         {option.label ?? option}

package/components/TagSelector/Component.svelte

@@ -52,16 +52,16 @@
 -->
 
 <div class="form-group {className}" class:hidden={!show}>
-  <label for={id} class="control-label {isRequired ? 'control-label--required' : ''}">
-    {label}
+  <label class="control-label {isRequired ? 'control-label--required' : ''}" for={id}>
+    <slot name="label">{label}</slot>
   </label>
   <input
-    class="form-control"
-    required={isRequired}
-    data-component="tags-selector"
     {id}
     {name}
+    class="form-control"
+    data-component="tags-selector"
     {disabled}
+    required={isRequired}
     {value}
   />
   {#if disabled}

package/components/TextList/Component.svelte

@@ -77,7 +77,9 @@
 -->
 
 <div class="form-group" class:hidden={!show}>
-  <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
+  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>
+    <slot name="label">{label}</slot>
+  </label>
   <div class="list-component">
     <div class="list-component__list-wrapper ui-resizable">
       <Sortable {items} on:finalize={onFinalize} let:item>
@@ -89,7 +91,7 @@
           on:enter={() => addButtonElement.focus()}
         />
       </Sortable>
-      <div use:resizer class="ui-resizable-handle ui-resizable-s" />
+      <div class="ui-resizable-handle ui-resizable-s" use:resizer />
     </div>
     <button
       bind:this={addButtonElement}
@@ -103,7 +105,7 @@
   {#if disabled}
     <div class="disabled-overlay" />
   {/if}
-  <DataHolder {id} {name} {value} {required} />
+  <DataHolder {id} {name} {required} {value} />
 </div>
 
 <style lang="scss">

package/createConfigApp/index.js

@@ -2,6 +2,7 @@ import 'focus-visible';
 
 export default function createConfigApp(App) {
   window.setValues = (values) => {
+    // window?.sv?.setValues(values);
     window.CONFIG_VALUES = values;
 
     const target = document.querySelector('#app_root') || document.querySelector('body');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/config-svelte",
-  "version": "1.23.0",
+  "version": "1.24.1",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",
@@ -9,7 +9,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@sitevision/api": "*",
-    "svelte": "^3.46.0 || ^4.0.0"
+    "svelte": "^3.46.0 || ^4.0.0 || ^5.0.0"
   },
   "devDependencies": {
     "@soleil-se/eslint-config": "^5.1.1",