@soleil-se/config-svelte 1.20.1 → 1.22.0

package/CHANGELOG.md

@@ -5,6 +5,17 @@ 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).
+- 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/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/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

@@ -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
@@ -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/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.20.1",
+  "version": "1.22.0",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",
@@ -12,22 +12,22 @@
     "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.",