@soleil-se/config-svelte 1.20.1 → 1.21.0

package/CHANGELOG.md

@@ -5,6 +5,12 @@ 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.21.0] - 2023-10-13
+
+- Add `legendVisuallyHidden` prop for [RadioGroup](./components/RadioGroup) and [CheckboxGroup](./components/CheckboxGroup).
+- Add `class` prop for [Panel](./components/Panel).
+- Add `removable` prop for [CustomSelector](./components/CustomSelector).
+
 ## [1.20.1] - 2023-09-25
 
 - Fix element containting title in [Modal](./components/Modal).

package/components/CheckboxGroup/Component.svelte

@@ -9,26 +9,28 @@
   export let name;
   export let options;
   export let legend;
+  export let legendVisuallyHidden = false;
   export let disabled = false;
   export let show = true;
   export let value = [];
   value = name ? values[name] || value : value;
 
-
   let className = '';
   export { className as class };
 
-  $: isChecked = (option) => value.includes(option.value || option);
+  function isChecked(option) {
+    return value.includes(option.value || option);
+  }
 
-  $: isDisabled = (option) => {
+  function isDisabled(option) {
     if (Array.isArray(disabled)) return disabled.includes(option.value || option);
     return disabled;
-  };
+  }
 
-  const onChange = () => {
+  function onChange() {
     dispatch('input', value);
     dispatch('change', value);
-  };
+  }
 </script>
 
 <!--
@@ -39,29 +41,30 @@
 -->
 
 <fieldset class="form-group {className}" class:hidden={!show}>
-  <legend>{legend}</legend>
+  <legend class:sr-only={legendVisuallyHidden}>{legend}</legend>
   {#each options as option, index}
     <input
       id={`${id}_${index}`}
-      bind:group={value}
-      class="sr-only"
-      value={option.value || option}
       {name}
+      class="sr-only"
+      disabled={isDisabled(option, disabled)}
       type="checkbox"
-      disabled={isDisabled(option)}
+      value={option.value || option}
+      bind:group={value}
       on:change={onChange}
     />
     <label
-      for={`${id}_${index}`}
       class="checkbox-inline"
-      class:disabled={isDisabled(option)}
-      class:checked={isChecked(option)}
+      class:checked={isChecked(option, value)}
+      class:disabled={isDisabled(option, disabled)}
+      for={`${id}_${index}`}
     >
       {option.label || option}
     </label>
   {/each}
 </fieldset>
 
+<!-- eslint-disable -->
 <style lang="scss">
   fieldset {
     margin-top: 0;

package/components/CheckboxGroup/README.md

@@ -13,6 +13,8 @@ export let name;
 export let options;
 // Fieldset legend
 export let legend;
+// If legend should be hidden visually
+export let legendVisuallyHidden = false;
 // Disable input, or provide an array of disabled options: ['value1'].
 export let disabled = false;
 // Show and hide compoment without re-rendering.

package/components/CustomSelector/Component.svelte

@@ -12,6 +12,7 @@
   export let placeholder = i18n('placeholder');
   export let options = [];
   export let searchable = false;
+  export let removable = true;
   export let required = false;
   export let disabled = false;
   export let multiple = false;
@@ -19,6 +20,7 @@
 
   export let value = multiple ? [] : '';
 
+  value = !removable && !multiple ? value || options[0]?.value || options[0] || '' : value;
   value = name ? values[name]?.value ?? values[name] ?? value : value;
   value = Array.isArray(value) ? value.map((v) => v.value ?? v) : value;
 
@@ -45,7 +47,7 @@
       .select2({
         placeholder,
         width: '100%',
-        allowClear: true,
+        allowClear: removable,
         minimumResultsForSearch: searchable ? 0 : Infinity,
         templateResult: template,
         formatResult: template,
@@ -72,19 +74,19 @@
 <div class="form-group {className}" class:hidden={!show}>
   {#if $$slots.option}
     {#each options as option}
-      <span hidden data-option="{id}_{option.value ?? option}">
+      <span data-option="{id}_{option.value ?? option}" hidden>
         <slot name="option" {option} />
       </span>
     {/each}
   {/if}
-  <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
+  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>{label}</label>
   <select
     bind:this={element}
     {id}
-    {required}
+    name={!multiple ? name : undefined}
     {disabled}
     {multiple}
-    name={!multiple ? name : undefined}
+    {required}
   >
     <option />
     {#each options as option}
@@ -95,7 +97,7 @@
   </select>
   <slot />
   {#if multiple}
-    <select {name} {value} multiple hidden>
+    <select {name} hidden multiple {value}>
       {#each options as option}
         <option value={option.value ?? option} />
       {/each}

package/components/CustomSelector/README.md

@@ -14,6 +14,7 @@ export let name = undefined;
 export let placeholder;
 export let options = [];
 export let searchable = false;
+export let removable = true;
 export let required = false;
 export let disabled = false;
 export let multiple = false;

package/components/DropdownSelector/Component.svelte

@@ -42,8 +42,8 @@
       });
 
     /*
-     * The sv:loaded event is only triggered on initial load, if the component rerenders check if any
-     * children are present and set value of select element.
+     * The sv:loaded event is only triggered on initial load, if the component rerenders check
+     * if any children are present and set value of select element.
      */
     if (el?.childElementCount > 0) {
       setValue(el);
@@ -58,16 +58,16 @@
   [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/DropdownSelector/)
 -->
 
-<div class="form-group {className}" {hidden} class:hidden={!show}>
-  <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
+<div class="form-group {className}" class:hidden={!show} {hidden}>
+  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>{label}</label>
   <select
     {id}
     {name}
-    {required}
-    {disabled}
     data-component={component}
     data-removable
     data-types={selectable}
+    {disabled}
+    {required}
   />
   <slot />
 </div>

package/components/Panel/Component.svelte

@@ -4,6 +4,10 @@
   export let heading = i18n('settings');
   export let required = false;
   export let show = true;
+
+  let className = '';
+  /** @type {string} */
+  export { className as class };
 </script>
 
 <!--
@@ -13,8 +17,8 @@
   [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/Panel/)
 -->
 
-<div class="panel panel-default" class:hidden={!show}>
-  <input class="sr-only" type="text" tabindex="-1" />
+<div class="panel panel-default {className}" class:hidden={!show}>
+  <input class="sr-only" tabindex="-1" type="text" />
   <div class="panel-heading">
     <h1 class="panel-title {required && 'panel-title--required'}">{heading}</h1>
   </div>
@@ -23,7 +27,7 @@
   </div>
 </div>
 
-<style lang="scss" global>
+<style global lang="scss">
   html {
     position: fixed;
     overflow: hidden;

package/components/RadioGroup/Component.svelte

@@ -9,20 +9,24 @@
   export let name;
   export let options = [];
   export let legend;
+  export let label;
+  export let legendVisuallyHidden = false;
   export let disabled = false;
   export let show = true;
   export let value = options[0]?.value ?? options[0] ?? '';
   value = name ? values[name] ?? value : value;
 
-  $: isDisabled = (option) => {
+  $: legend = legend || label;
+
+  function isDisabled(option) {
     if (Array.isArray(disabled)) return disabled.includes(option.value || option);
     return disabled;
-  };
+  }
 
-  const onChange = () => {
+  function onChange() {
     dispatch('input', value);
     dispatch('change', value);
-  };
+  }
 </script>
 
 <!--
@@ -33,19 +37,23 @@
 -->
 
 <fieldset class="form-group" class:hidden={!show}>
-  <legend>{legend}</legend>
+  <legend class:sr-only={legendVisuallyHidden}>{legend}</legend>
   {#each options as option, index}
     <input
       id={`${id}_${index}`}
       class="sr-only"
       checked={option.value || option}
-      disabled={isDisabled(option)}
+      disabled={isDisabled(option, disabled)}
       type="radio"
       value={option.value || option}
       bind:group={value}
       on:change={onChange}
     />
-    <label class="radio-inline" class:disabled={isDisabled(option)} for={`${id}_${index}`}>
+    <label
+      class="radio-inline"
+      class:disabled={isDisabled(option, disabled)}
+      for={`${id}_${index}`}
+    >
       {option.label || option}
     </label>
   {/each}

package/components/RadioGroup/README.md

@@ -12,6 +12,8 @@ export let name;
 export let options;
 // Fieldset legend.
 export let legend;
+// If legend should be hidden visually
+export let legendVisuallyHidden = false;
 // If field is disabled, can be boolean to disable all options, or an array of disabled option values; ['value1'].
 export let disabled = false;
 // Show and hide compoment without re-rendering.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/config-svelte",
-  "version": "1.20.1",
+  "version": "1.21.0",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",
@@ -8,26 +8,26 @@
   "license": "UNLICENSED",
   "sideEffects": false,
   "peerDependencies": {
-    "@sitevision/api": "*",
+    "@sitevision/api": "^2023.8.1",
     "svelte": "^3.46.0 || ^4.0.0"
   },
   "devDependencies": {
-    "@soleil-se/eslint-config": "^5.1.0",
-    "@soleil-se/stylelint-config": "^3.0.0",
-    "eslint": "^8.43.0",
+    "@soleil-se/eslint-config": "^5.1.1",
+    "@soleil-se/stylelint-config": "^3.1.1",
+    "eslint": "^8.51.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-svelte": "^2.31.1",
-    "stylelint": "^15.9.0",
-    "svelte": "^4.0.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-svelte": "^2.34.0",
+    "stylelint": "^15.10.3",
+    "svelte": "^4.2.1",
     "svelte-preprocess": "^5.0.4"
   },
   "dependencies": {
     "@soleil-se/config-validate": "^1.1.2",
     "a11y-dialog": "7.5.2",
     "focus-visible": "^5.2.0",
-    "svelte-dnd-action": "^0.9.22"
+    "svelte-dnd-action": "^0.9.31"
   },
   "homepage": "https://docs.soleil.se/packages/config-svelte",
   "description": "A collection of Svelte components and utilities for WebApp, RESTApp and Widget configurations.",