@soleil-se/config-svelte 1.10.0 → 1.11.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ 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.11.0] - 2022-03-29
+
+- Add settings for decorative images in [ImageSelector](./components/ImageSelector).
+- Fetch image alt text in offline mode in [ImageSelector](./components/ImageSelector).
+
+## [1.10.1] - 2022-03-08
+
+- Cast saved value to Number in [NumberSpinner](./components/NumberSpinner).
+- Fix reactivity for `suffix` prop in [NumberSpinner](./components/NumberSpinner).
+
 ## [1.10.0] - 2022-03-07
 
 - Added `multiple` prop for [CustomSelector](./components/CustomSelector).

package/components/ImageSelector/Component.svelte

@@ -17,6 +17,9 @@
   export let node;
   export let alt;
   alt = name ? values[`${name}Alt`] ?? alt : alt;
+  export let hideDecorative = false;
+  export let decorative = false;
+  $: decorative = hideDecorative ? false : decorative;
   
   let imageArchiveAlt = '';
   let useCustomAlt = !!alt;
@@ -26,12 +29,12 @@
   const dispatch = createEventDispatcher();
 
   const setCustomValidity = () => {
-    validationEl?.setCustomValidity(imageArchiveAlt ? '' : 'Bilden saknar beskrivning (alt-text). Klicka på bilden ovan och skriv texten i fältet Bildbeskrivning.');
+    validationEl?.setCustomValidity(imageArchiveAlt ? '' : i18n('validation'));
   };
 
   const onChange = async () => {
     if (node) {
-      const response = await fetch(`/rest-api/1/1/${node}/properties`).then((res) => res.json());
+      const response = await fetch(`/rest-api/1/0/${node}/properties`).then((res) => res.json());
       imageArchiveAlt = response.alt || '';
   
       setCustomValidity();
@@ -73,12 +76,37 @@
     on:change={onChange}
     {required}
   />
-  {#if useCustomAlt}
-    <InputField name="{name}Alt" label={i18n('altText')} required bind:value={alt} />
-  {:else}
-    <InputField label={i18n('altFromCaption')} value={imageArchiveAlt} readonly disabled>
-      <input bind:this={validationEl} class="sr-only" />
-    </InputField>
-  {/if}
-  <Checkbox bind:value={useCustomAlt} label={i18n('customAltText')} on:change={onUseCustomToggle} />
+  <div>
+    {#if !hideDecorative}
+      <Checkbox
+        class="checkbox-group"
+        bind:value={decorative}
+        name="{name}Decorative"
+        label={i18n('imageIsDecorative')}
+        on:change={onChange}
+      />
+    {/if}
+    {#if !decorative}
+      {#if useCustomAlt}
+        <InputField name="{name}Alt" label={i18n('altText')} required bind:value={alt} />
+      {:else}
+        <InputField label={i18n('altFromCaption')} value={imageArchiveAlt} readonly disabled>
+          <input bind:this={validationEl} class="sr-only" />
+        </InputField>
+      {/if}
+
+      <Checkbox
+        class="checkbox-group"
+        bind:value={useCustomAlt}
+        label={i18n('customAltText')}
+        on:change={onUseCustomToggle}
+      />
+    {/if}
+  </div>
 </Panel>
+
+<style>
+  div > :global(.checkbox-group) {
+    margin-top: -5px;
+  }
+</style>

package/components/ImageSelector/README.md

@@ -16,14 +16,14 @@ Custom panel component for selecting an image.
 ## AppData
 
 If used with standard name all values will be prefixed with the name property provided to the component.  
-For example if `name="image"` the values will be available as `imageNode` and `imageAlt` (if custom alt-text is set).
+For example if `name="image"` the values will be available as `imageNode`, `imageAlt` (if custom alt-text is set) and `imageDecorative` (if image is set as decorative, since 1.11.0).
 
 ```js
 import appData from 'appData';
 
 const getImage = () => ({
   uri: appData.get('imageNode', 'URI'),
-  alt: appData.get('imageAlt') || appData.get('imageNode', 'alt'),  
+  alt: appData.get('imageDecorative') ? '' : appData.get('imageAlt') || appData.get('imageNode', 'alt'),  
 });
 ```
 
@@ -38,8 +38,12 @@ export let name = undefined;
 export let required = false;
 // Node ID of selected image.
 export let node;
-// Custom alt text it's set.
+// Custom alt text.
 export let alt;
+// If image is decorative, since 1.11.0
+export let decorative = false;
+// If the checkbox for decorative image should be hidden, since 1.11.0
+export let hideDecorative = false;
 ```
 
 ## Example
@@ -52,6 +56,9 @@ export let alt;
 </script>
 
 <ImageSelector name="image" heading="Bild" />
+
+<!-- If decorative should be checked from the start, since 1.11.0 -->
+<ImageSelector name="image" heading="Bild" decorative />
 ```
 
 ### Advanced

package/components/ImageSelector/i18n.js

@@ -7,6 +7,8 @@ export default createI18n({
     altText: 'Alt-text',
     altFromCaption: 'Alt-text (från bildbeskrivning)',
     customAltText: 'Ange egen alt-text',
+    validation: 'Bilden saknar beskrivning (alt-text). Klicka på bilden ovan och skriv texten i fältet Bildbeskrivning.',
+    imageIsDecorative: 'Bilden är dekorativ',
   },
   no: {
     heading: 'Bilde',
@@ -14,6 +16,8 @@ export default createI18n({
     altText: 'Alt-tekst',
     altFromCaption: 'Alt-tekst (fra bildebeskrivelse)',
     customAltText: 'Skriv inn din egen alt-tekst',
+    validation: 'Bildet mangler beskrivelse (alt-tekst). Klikk på bildet over og skriv inn teksten i feltet Bildebeskrivelse.',
+    imageIsDecorative: 'Bildet er dekorativt',
   },
   en: {
     heading: 'Image',
@@ -21,5 +25,7 @@ export default createI18n({
     altText: 'Alt text',
     altFromCaption: 'Alt text (from image caption)',
     customAltText: 'Use custom alt text',
+    validation: 'The image lacks description (alt-text). Click on the image above and enter the text in the Image description field.',
+    imageIsDecorative: 'Image is decorative',
   },
 });

package/components/NumberSpinner/Component.svelte

@@ -15,20 +15,24 @@
   export let readonly = false;
   export let suffix;
   export let value = min || 1;
-  value = name ? values[name] ?? value : value;
+  value = Number(name ? values[name] ?? value : value);
   value = min && value < Number(min) ? min : value;
   value = max && value > Number(max) ? max : value;
 
+  let element;
+
+  $: {
+    if (element && suffix) {
+      element.parentNode.querySelector('.input-group-addon').innerHTML = suffix;
+    }
+  }
+
   onMount(() => {
-    const el = setupComponent(id).on('change', ({ target }) => {
+    [element] = setupComponent(id).on('change', ({ target }) => {
       value = Number(target.value);
       dispatch('input', value);
       dispatch('change', value);
-    })[0];
-
-    if (suffix) {
-      el.parentNode.querySelector('.input-group-addon').innerHTML = suffix;
-    }
+    });
   });
 </script>
 
@@ -71,8 +75,8 @@
     width: 100%;
     height: 34px;
     margin-top: -34px;
-    background-color: rgb(255 255 255 / 30%);
     cursor: not-allowed;
+    background-color: rgb(255 255 255 / 30%);
   }
 
   .form-group :global(.input-group-addon) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/config-svelte",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",