@soleil-se/config-svelte 1.30.4 → 1.31.0

package/CHANGELOG.md

@@ -8,6 +8,13 @@ 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.31.0] - 2026-04-10
+
+- Add error messages for when fetching data for `ImageSelector` and `RepositoryNodeSelector` fails due to lack of permissions or REST-API being disabled or restricted.
+- New `fetchRestApi` utility function for fetching data from the REST-API with proper error handling.
+- Add missing default slot for `TextList` component.
+- Set label as `undefined` correclty in `RadioGroup`.
+
 ## [1.30.4] - 2026-02-26
 
 - Do not set focus on hidden inputs in `Modal` component.

package/components/ImageSelector/Component.svelte

@@ -1,8 +1,7 @@
-<!-- prettier-ignore -->
 <script>
   import { createEventDispatcher } from 'svelte';
 
-  import { triggerInput } from '../../utils';
+  import { triggerInput, fetchRestApi } from '../../utils';
   import i18n from './i18n';
   import Panel from '../Panel';
   import NodeSelector from '../NodeSelector';
@@ -21,7 +20,7 @@
   export let node = undefined;
   /** @type {string} */
   export let alt;
-  alt = name ? values[`${name}Alt`] ?? alt : alt;
+  alt = name ? (values[`${name}Alt`] ?? alt) : alt;
   /** @type {boolean} */
   export let hideDecorative = false;
   /** @type {boolean} */
@@ -34,17 +33,27 @@
   let useCustomAlt = !!alt;
   let customAlt = alt;
   let validationEl;
+  let fetchError = null;
 
   const dispatch = createEventDispatcher();
 
-  const setCustomValidity = () => {
+  function setCustomValidity() {
     validationEl?.setCustomValidity(imageArchiveAlt ? '' : i18n('validation'));
-  };
+  }
 
-  const onChange = async () => {
-    if (node) {
-      const response = await fetch(`/rest-api/1/0/${node}/properties`).then((res) => res.json());
-      imageArchiveAlt = response.alt || '';
+  async function fetchImageAlt() {
+    fetchError = null;
+    if (node && !decorative && !useCustomAlt) {
+      try {
+        const response = await fetchRestApi(`${node}/properties`, {
+          data: { properties: ['alt'] },
+        });
+        imageArchiveAlt = response?.alt || '';
+      } catch (error) {
+        console.error(error);
+        fetchError = error;
+        imageArchiveAlt = i18n('couldNotGetAlt');
+      }
 
       setCustomValidity();
     } else {
@@ -52,12 +61,13 @@
       validationEl?.setCustomValidity('');
     }
     triggerInput(validationEl);
-
     dispatch('input', { node, alt });
     dispatch('change', { node, alt });
-  };
+  }
+
+  function onUseCustomToggle() {
+    fetchImageAlt();
 
-  const onUseCustomToggle = () => {
     if (useCustomAlt) {
       alt = customAlt || '';
     } else {
@@ -65,8 +75,7 @@
       alt = undefined;
       setCustomValidity();
     }
-  };
-
+  }
 </script>
 
 <!--
@@ -77,6 +86,12 @@
 -->
 
 <Panel {heading} {show}>
+  {#if fetchError}
+    <p class="alert alert-danger" role="alert">
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+      {@html i18n(fetchError.status === 403 ? 'fetchError403' : 'fetchError')}
+    </p>
+  {/if}
   <NodeSelector
     name="{name}Node"
     label={i18n('selectImage')}
@@ -84,36 +99,36 @@
     selectable="sv:image"
     type="image"
     bind:value={node}
-    on:change={onChange}
+    on:change={fetchImageAlt}
   />
   <div class="form-group">
     {#if !hideDecorative}
       <Checkbox
         name="{name}Decorative"
-        class="checkbox-group"
         label={i18n('imageIsDecorative')}
+        class="checkbox-group"
         bind:value={decorative}
-        on:change={onChange}
+        on:change={fetchImageAlt}
       />
     {/if}
     {#if !decorative}
       {#if useCustomAlt}
         <InputField name="{name}Alt" label={i18n('altText')} required bind:value={alt} />
       {:else}
-        <InputField disabled label={i18n('altFromCaption')} readonly value={imageArchiveAlt}>
+        <InputField label={i18n('altFromCaption')} disabled readonly value={imageArchiveAlt}>
           <input bind:this={validationEl} class="sr-only" />
         </InputField>
       {/if}
 
       <Checkbox
-        class="checkbox-group"
         label={i18n('customAltText')}
+        class="checkbox-group"
         bind:value={useCustomAlt}
         on:change={onUseCustomToggle}
       />
     {/if}
   </div>
-  <slot />
+  <slot></slot>
 </Panel>
 
 <style>

package/components/ImageSelector/i18n.js

@@ -8,7 +8,10 @@ export default createI18n({
     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.',
+    couldNotGetAlt: 'Det gick inte att hämta bildens alt-text...',
     imageIsDecorative: 'Bilden är dekorativ',
+    fetchError: '<strong>Fel:</strong> Det gick inte att hämta bildens egenskaper.',
+    fetchError403: '<strong>Fel:</strong> Det gick inte att hämta bildens egenskaper, antingen har du inte behörighet till bilden eller så är REST-API:et inaktiverat eller begränsat. Kontrollera behörigheter och webbplatsinställningar.',
   },
   no: {
     heading: 'Bilde',
@@ -17,7 +20,10 @@ export default createI18n({
     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.',
+    couldNotGetAlt: 'Det gikk ikke å hente bildets alt-tekst...',
     imageIsDecorative: 'Bildet er dekorativt',
+    fetchError: '<strong>Feil:</strong> Det gikk ikke å hente bildets egenskaper.',
+    fetchError403: '<strong>Feil:</strong> Det gikk ikke å hente bildets egenskaper, enten har du ikke behørighet til bildet eller så er REST-API:et inaktivert eller begrenset. Kontroller behørigheter og nettstedsinnstillinger.',
   },
   en: {
     heading: 'Image',
@@ -26,6 +32,9 @@ export default createI18n({
     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.',
+    couldNotGetAlt: 'Could not fetch the image alt text...',
     imageIsDecorative: 'Image is decorative',
+    fetchError: '<strong>Error:</strong> An error occurred while fetching the image properties.',
+    fetchError403: '<strong>Error:</strong> An error occurred while fetching the image properties, you either do not have permission to see the image or the REST-API is not enabled or restricted. Check permissions and site settings.',
   },
 });

package/components/RadioGroup/Component.svelte

@@ -14,7 +14,7 @@
   /** @type {string} */
   export let legend;
   /** @type {string} */
-  export let label;
+  export let label = undefined;
   /** @type {string} */
   export let description = undefined;
   /** @type {boolean} */

package/components/RepositoryNodeSelector/Component.svelte

@@ -1,7 +1,6 @@
-<!-- prettier-ignore -->
 <script>
   import { onMount } from 'svelte';
-  import { getAppContext } from '../../utils';
+  import { getAppContext, fetchRestApi } from '../../utils';
   import CustomSelector from '../CustomSelector';
   import i18n from './i18n';
 
@@ -29,7 +28,7 @@
   export let type;
 
   let options = [];
-  let error = false;
+  let fetchError = null;
 
   function toTitleCase(str) {
     return str
@@ -43,23 +42,27 @@
     repository = !repository.endsWith('Repository') ? `${repository} Repository` : repository;
     const endpoint = repository.includes('Alias') ? 'aliases' : 'nodes';
 
-    return `/rest-api/1/0/${siteName}/${repository}/${endpoint}`;
+    return `${siteName}/${repository}/${endpoint}`;
   }
 
   onMount(async () => {
     const endpoint = getEndpoint();
-    const result = await fetch(endpoint)
-      .then((res) => {
-        if (res.ok) return res;
-        error = true;
-        throw new Error(
-          `Error (${res.status}) - Unable to fetch nodes, is site name and repository correct?`,
+    try {
+      fetchError = null;
+      const result = await fetchRestApi(endpoint);
+      options = (result || []).map((item) => ({ label: item.name, value: item.id }));
+    } catch (error) {
+      fetchError = error;
+      if (error.status === 403) {
+        console.error(
+          `Error (${error.status}) - Unable to fetch nodes, check permissions and if REST-API is enabled.`,
         );
-      })
-      .then((res) => res.json())
-      .catch((e) => console.error(e.message));
-
-    options = (result || []).map((item) => ({ label: item.name, value: item.id }));
+      } else {
+        console.error(
+          `Error (${error.status}) - Unable to fetch nodes, is site name and repository correct?${error.message ? ` ${error.message}` : ''}`,
+        );
+      }
+    }
   });
 </script>
 
@@ -73,9 +76,9 @@
 <CustomSelector
   {id}
   {name}
+  {label}
   {description}
   {disabled}
-  {label}
   {multiple}
   {options}
   {required}
@@ -85,11 +88,13 @@
   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>
+  <slot name="label"></slot>
+  <slot></slot>
+  {#if fetchError}
+    <p class="alert alert-danger" role="alert">
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+      {@html i18n(fetchError.status === 403 ? 'fetchError403' : 'fetchError')}
+    </p>
   {/if}
 </CustomSelector>
 

package/components/RepositoryNodeSelector/i18n.js

@@ -2,12 +2,15 @@ import createI18n from '../../utils/createI18n';
 
 export default createI18n({
   sv: {
-    error: '<strong>Fel:</strong> Det gick inte att hämta noder, se konsolen för mer information.',
+    fetchError: '<strong>Fel:</strong> Det gick inte att hämta noder, se konsolen för mer information.',
+    fetchError403: '<strong>Fel:</strong> Det gick inte att hämta noder, antingen har du inte rätt behörighet eller så är REST-API:et inaktiverat eller begränsat. Kontrollera behörigheter och webbplatsinställningar.',
   },
   no: {
-    error: '<strong>Feil:</strong> Noder kunne ikke hentes, se konsollen for mer informasjon.',
+    fetchError: '<strong>Feil:</strong> Noder kunne ikke hentes, se konsollen for mer informasjon.',
+    fetchError403: '<strong>Feil:</strong> Noder kunne ikke hentes, enten har du ikke riktig behørighet eller så er REST-API:et inaktivert eller begrenset. Kontroller behørigheter og nettstedsinnstillinger.',
   },
   en: {
-    error: '<strong>Error:</strong> Nodes could not be fetched, see console for more information.',
+    fetchError: '<strong>Error:</strong> Nodes could not be fetched, see console for more information.',
+    fetchError403: '<strong>Error:</strong> Nodes could not be fetched, you either do not have the correct permissions or the REST-API is not enabled or restricted. Check permissions and site settings.',
   },
 });

package/components/TextList/Component.svelte

@@ -119,6 +119,7 @@
   {#if disabled}
     <div class="disabled-overlay"></div>
   {/if}
+  <slot />
   <DataHolder {id} {name} {required} {value} />
 </div>
 

package/jsconfig.json

@@ -0,0 +1,3 @@
+{ 
+  "exclude": ["node_modules", "dist"]  
+}

package/package.json

@@ -9,7 +9,7 @@
     "svelte"
   ],
   "homepage": "https://docs.soleil.se/packages/config-svelte",
-  "version": "1.30.4",
+  "version": "1.31.0",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",
@@ -39,23 +39,24 @@
     "svelte": "^3.46.0 || ^4.0.0 || ^5.0.0-next || ^5.0.0"
   },
   "devDependencies": {
-    "@soleil-se/eslint-config": "^6.0.2",
-    "@soleil-se/stylelint-config": "^4.3.0",
-    "eslint": "^9.18.0",
-    "glob": "^11.0.0",
-    "sass": "^1.98.0",
-    "stylelint": "^16.14.1",
-    "sveld": "^0.22.1",
-    "svelte": "^4.2.19",
+    "@soleil-se/eslint-config": "^6.3.1",
+    "@soleil-se/stylelint-config": "^4.4.0",
+    "eslint": "^9.39.4",
+    "glob": "^11.1.0",
+    "sass": "^1.99.0",
+    "stylelint": "^16.26.1",
+    "sveld": "^0.22.5",
+    "svelte": "^4.2.20",
     "svelte-preprocess": "^6.0.3"
   },
   "dependencies": {
-    "@soleil-se/config-validate": "^1.2.1",
-    "a11y-dialog": "8.1.3",
-    "svelte-dnd-action": "^0.9.61"
+    "@soleil-se/config-validate": "^1.3.0",
+    "a11y-dialog": "8.1.5",
+    "svelte-dnd-action": "^0.9.69"
   },
   "scripts": {
     "create-type-definitions": "node ./createTypeDefinitions.js"
   },
-  "private": false
+  "private": false,
+  "gitHead": "eb052ae65db1ed6a372ee25894719d587368e80d"
 }

package/svelte.config.cjs

@@ -0,0 +1,6 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const preprocess = require('svelte-preprocess');
+
+module.exports = {
+  preprocess: preprocess(),
+};

package/types/components/RadioGroup/Component.svelte.d.ts

@@ -24,7 +24,7 @@ export type RadioGroupProps = {
   /**
    * @default undefined
    */
-  label: string;
+  label?: string;
 
   /**
    * @default undefined

package/types/components/TextList/Component.svelte.d.ts

@@ -50,5 +50,5 @@ export type TextListProps = {
 export default class TextList extends SvelteComponentTyped<
   TextListProps,
   { input: CustomEvent<any>; change: CustomEvent<any> },
-  { description: {}; label: {} }
+  { default: {}; description: {}; label: {} }
 > {}

package/types/utils/fetchRestApi.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Fetches JSON data from the REST-API.
+ * @template T
+ * @param {string} uri - The URI to fetch JSON data from.
+ * @param {Options} [options] - The options for the fetch request with some extensions.
+ * @returns {Promise<T>} A promise that resolves to the JSON response.
+ * @throws {FetchError} If the response is not successful or cannot be parsed as JSON.
+ */
+export default function fetchRestApi<T>(uri: string, options?: Options): Promise<T>;
+/**
+ * @typedef {Object} ExtensionOptions
+ * @property {{ [key: string]: unknown }} [data] - The data to be included in the request as JSON.
+ * @property {'offline' | 'online'} [model] - Selects which REST API model path to use.
+ *
+ * @typedef {RequestInit & ExtensionOptions} Options
+ */
+/**
+ * Custom error class for fetch-related errors with additional HTTP context.
+ */
+export class FetchError extends Error {
+    /**
+     * @param {string} message - The error message.
+     * @param {Object} [options] - Error options.
+     * @param {number} [options.status] - HTTP status code.
+     * @param {boolean} [options.aborted=false] - Whether the request was aborted.
+     * @param {Object.<string, unknown>} [options.additionalProps] - Additional properties.
+     */
+    constructor(message: string, { status, aborted, ...additionalProps }?: {
+        status?: number;
+        aborted?: boolean;
+        additionalProps?: {
+            [x: string]: unknown;
+        };
+    });
+    status: number;
+    aborted: boolean;
+}
+export type ExtensionOptions = {
+    /**
+     * - The data to be included in the request as JSON.
+     */
+    data?: {
+        [key: string]: unknown;
+    };
+    /**
+     * - Selects which REST API model path to use.
+     */
+    model?: "offline" | "online";
+};
+export type Options = RequestInit & ExtensionOptions;

package/types/utils/index.d.ts

@@ -6,4 +6,5 @@ export { default as triggerInput } from "./triggerInput";
 export { default as createI18n } from "./createI18n";
 export { default as getAppProps } from "./getAppProps";
 export { default as getAppContext } from "./getAppContext";
+export { default as fetchRestApi } from "./fetchRestApi";
 export { generateId, addGeneratedIds } from "./generateId";

package/utils/fetchRestApi.js

@@ -0,0 +1,123 @@
+/**
+ * @typedef {Object} ExtensionOptions
+ * @property {{ [key: string]: unknown }} [data] - The data to be included in the request as JSON.
+ * @property {'offline' | 'online'} [model] - Selects which REST API model path to use.
+ *
+ * @typedef {RequestInit & ExtensionOptions} Options
+ */
+
+/**
+ * Custom error class for fetch-related errors with additional HTTP context.
+ */
+export class FetchError extends Error {
+  /**
+   * @param {string} message - The error message.
+   * @param {Object} [options] - Error options.
+   * @param {number} [options.status] - HTTP status code.
+   * @param {boolean} [options.aborted=false] - Whether the request was aborted.
+   * @param {Object.<string, unknown>} [options.additionalProps] - Additional properties.
+   */
+  constructor(message, { status, aborted = false, ...additionalProps } = {}) {
+    super(message);
+    this.name = 'FetchError';
+    this.status = status;
+    this.aborted = aborted;
+
+    // Add any additional properties from the error response
+    Object.entries(additionalProps).forEach(([key, value]) => {
+      if (key !== 'message' && key !== 'status' && key !== 'aborted') {
+        this[key] = value;
+      }
+    });
+  }
+}
+
+/**
+ * Attempts to parse response text as JSON.
+ * @param {Response} response - The fetch Response object.
+ * @returns {Promise<unknown | undefined>} The parsed JSON object or undefined if parsing fails.
+ */
+async function toJson(response) {
+  const text = await response.text();
+  try {
+    return JSON.parse(text);
+  } catch (e) {
+    return undefined;
+  }
+}
+
+/**
+ * Creates a FetchError object from a failed response, including JSON error details.
+ * @param {Response} response - The failed fetch Response object.
+ * @returns {Promise<FetchError>} A FetchError with additional properties from the response JSON.
+ */
+async function responseError(response) {
+  const json = await toJson(response) || {};
+  const message = json?.message || response?.statusText;
+  return new FetchError(message, {
+    status: response.status,
+    aborted: false,
+    ...json,
+  });
+}
+
+/**
+ * Handles the fetch response, throwing errors for non-OK responses and parsing JSON.
+ * @param {Response} response - The fetch Response object.
+ * @returns {Promise<unknown>} The parsed JSON response.
+ * @throws {FetchError} If the response is not OK or cannot be parsed as JSON.
+ */
+async function handleResponse(response) {
+  if (!response.ok) {
+    throw await responseError(response);
+  }
+  const json = await toJson(response);
+  if (json === undefined) {
+    throw new FetchError('Response could not be parsed as JSON.');
+  }
+  return json;
+}
+
+/**
+ * Maps the model option to the corresponding query parameter value for the REST-API.
+ * @param {string} model - The model type, either 'offline' or 'online'.
+ * @returns {string} The corresponding path parameter value for the REST-API.
+ * @throws {Error} If an unknown model type is provided.
+ */
+function getModelPathParameter(model) {
+  switch (model) {
+    case 'offline':
+      return '0';
+    case 'online':
+      return '1';
+    default:
+      throw new Error(`Unknown model: ${model}`);
+  }
+}
+
+/**
+ * Fetches JSON data from the REST-API.
+ * @template T
+ * @param {string} uri - The URI to fetch JSON data from.
+ * @param {Options} [options] - The options for the fetch request with some extensions.
+ * @returns {Promise<T>} A promise that resolves to the JSON response.
+ * @throws {FetchError} If the response is not successful or cannot be parsed as JSON.
+ */
+export default function fetchRestApi(uri, options = {}) {
+  const { data = {}, model = 'offline', ...rest } = options;
+
+  const qs = Object.keys(data).length
+    ? `${uri.includes('?') ? '&' : '?'}${`format=json&json=${encodeURIComponent(JSON.stringify(data))}`}`
+    : '';
+
+  return fetch(`/rest-api/1/${getModelPathParameter(model)}/${uri}${qs}`, rest)
+    .then(handleResponse)
+    .catch((error) => {
+      // Re-throw FetchError as-is, convert other errors
+      if (error instanceof FetchError) {
+        return Promise.reject(error);
+      }
+
+      return Promise.reject(new FetchError(error.message, { status: error.status || 500 }));
+    });
+}

package/utils/index.js

@@ -7,3 +7,4 @@ export { default as triggerInput } from './triggerInput';
 export { default as createI18n } from './createI18n';
 export { default as getAppProps } from './getAppProps';
 export { default as getAppContext } from './getAppContext';
+export { default as fetchRestApi } from './fetchRestApi';