@soleil-se/config-svelte 1.27.12 → 1.27.13

package/CHANGELOG.md

@@ -7,6 +7,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.27.13] - 2025-02-21
+
+- Disallow the selection folders in `ImageSelector`.
+- Move data holder in `CheckboxGroup` for correct margins.
+- Fixa margins for help text in form groups.
+
 ## [1.27.12] - 2025-01-30
 
 - Properly clear value in `DropdownSelector`.

package/README.md

@@ -1,5 +1,3 @@
-# @soleil-se/config-svelte
+# @soleil-se/svelte-config
 
-A collection of Svelte components and utilities for WebApp, RESTApp and Widget configurations.
-
-[Documentation](https://docs.soleil.se/packages/config-svelte) | [Changelog](https://docs.soleil.se/packages/config-svelte/changelog)
+[Documentation](https://docs.soleil.se/packages/svelte-config) | [Changelog](https://docs.soleil.se/packages/svelte-config/changelog)

package/components/Checkbox/README.md

@@ -28,7 +28,7 @@ Use checked attribute if the checkbox should be checked as default
 
 ```svelte
 <script>
-import { Panel, Checkbox } from '@soleil-se/svelte-config';
+import { Panel, Checkbox } from '@soleil/svelte-config';
 </script>
 
 <Panel heading="Inställningar">
@@ -40,8 +40,8 @@ import { Panel, Checkbox } from '@soleil-se/svelte-config';
 
 ```svelte
 <script>
-import { Panel, Checkbox } from '@soleil-se/svelte-config';
-import { onSave } from '@soleil-se/svelte-config/utils';
+import { Panel, Checkbox } from '@soleil/svelte-config';
+import { onSave } from '@soleil/svelte-config/utils';
 
 const values = {
   checkbox: '',

package/components/CheckboxGroup/Component.svelte

@@ -49,7 +49,15 @@
   [README](https://docs.soleil.se/packages/soleil/svelte-config/components/checkboxgroup/)
 -->
 
+
+
 <fieldset class="form-group {className}" class:hidden={!show}>
+  <!-- Need to put values in a select with multiple to make sure the value is an array -->
+  <select {name} hidden multiple {value}>
+    {#each options as option}
+      <option value={option.value ?? option}></option>
+    {/each}
+  </select>
   <legend class:sr-only={legendVisuallyHidden}>
     <slot name="legend">{legend}</slot>
   </legend>
@@ -75,12 +83,7 @@
   <slot />
 </fieldset>
 
-<!-- Need to put values in a select with multiple to make sure the value is an array -->
-<select {name} hidden multiple {value}>
-  {#each options as option}
-    <option value={option.value ?? option}></option>
-  {/each}
-</select>
+
 
 <style lang="scss">
   fieldset {

package/components/CheckboxGroup/README.md

@@ -42,7 +42,7 @@ Use the value prop to set a default value when not binding the value:
 
 ```svelte
 <script>
-import { Panel, CheckboxGroup } from '@soleil-se/svelte-config';
+import { Panel, CheckboxGroup } from '@soleil/svelte-config';
 </script>
 
 <Panel heading="Inställningar">     
@@ -68,8 +68,8 @@ import { Panel, CheckboxGroup } from '@soleil-se/svelte-config';
 
 ```svelte
 <script>
-import { Panel, CheckboxGroup } from '@soleil-se/svelte-config';
-import { onSave } from '@soleil-se/svelte-config/utils';
+import { Panel, CheckboxGroup } from '@soleil/svelte-config';
+import { onSave } from '@soleil/svelte-config/utils';
 
 const values = {
   checkboxGroup1: [],

package/components/CustomList/README.md

@@ -33,7 +33,7 @@ This id needs to be prefixed to the `name` attribute.
 
 ```svelte
 <script>
-  import { Panel, CustomList, InputField, NodeSelector } from '@soleil-se/svelte-config';
+  import { Panel, CustomList, InputField, NodeSelector } from '@soleil/svelte-config';
 </script>
 
 <Panel>     
@@ -73,7 +73,7 @@ No list of icons is available, but you can inspect an icon in the edit interface
 
 ```svelte
 <script>
-  import { Panel, CustomList, InputField, NodeSelector } from '@soleil-se/svelte-config';
+  import { Panel, CustomList, InputField, NodeSelector } from '@soleil/svelte-config';
 </script>
 
 <Panel>     
@@ -93,7 +93,7 @@ For this to work it's easiest to handle the modal content in a separate componen
 ```svelte
 // App.svelte
 <script>
-  import { Panel, CustomList } from '@soleil-se/svelte-config';
+  import { Panel, CustomList } from '@soleil/svelte-config';
   import Settings from './Settings.svelte';
 </script>
 
@@ -107,7 +107,7 @@ For this to work it's easiest to handle the modal content in a separate componen
 ```svelte
 // Settings.svelte
 <script>
-  import { InputField, NodeSelector, CustomListItemTemplate } from '@soleil-se/svelte-config';
+  import { InputField, NodeSelector, CustomListItemTemplate } from '@soleil/svelte-config';
 
   export let id;
   let name;  
@@ -128,7 +128,7 @@ on mount since the list doesn't know when all data is available.
 ```svelte
 // App.svelte
 <script>
-  import { Panel, CustomList } from '@soleil-se/svelte-config';
+  import { Panel, CustomList } from '@soleil/svelte-config';
   import Settings from './Settings.svelte';
 </script>
 
@@ -142,7 +142,7 @@ on mount since the list doesn't know when all data is available.
 ```svelte
 // Settings.svelte
 <script>
-  import { NodeSelector, CustomListItemTemplate } from '@soleil-se/svelte-config';
+  import { NodeSelector, CustomListItemTemplate } from '@soleil/svelte-config';
   import { onMount } from 'svelte';
 
   export let id;

package/components/CustomSelector/Component.svelte

@@ -31,7 +31,7 @@
   /** @type {string | string[]} */
   export let value = multiple ? [] : '';
 
-  value = !removable && !multiple ? value || options[0]?.value || options[0] || '' : value;
+  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;
 
@@ -42,7 +42,7 @@
 
   async function triggerChange() {
     await tick();
-    jQuery(element).val(value).trigger('change');
+    window.jQuery(element).val(value).trigger('change');
   }
 
   $: if (element && options) triggerChange();
@@ -57,14 +57,14 @@
       // Need to use == instead of === because of loose comparison of types.
       // eslint-disable-next-line eqeqeq
       const option = options.find((o) => (o.value ?? o) == v);
-      return option.value ?? option;
+      return option?.value ?? option ?? '';
     });
   }
 
   onMount(() => {
     // Instansiate select2 ourselves to be able to use more options.
     if (multiple) element.setAttribute('multiple', '');
-    jQuery(element)
+    window.jQuery(element)
       .select2({
         placeholder,
         width: '100%',
@@ -113,7 +113,6 @@
       </option>
     {/each}
   </select>
-  <slot />
   {#if multiple}
     <select {name} hidden multiple {value}>
       {#each options as option}
@@ -121,4 +120,5 @@
       {/each}
     </select>
   {/if}
+  <slot />
 </div>

package/components/CustomSelector/README.md

@@ -28,7 +28,7 @@ export let value = '';
 
 ```svelte
 <script>
-  import { Panel, CustomSelector } from '@soleil-se/svelte-config';
+  import { Panel, CustomSelector } from '@soleil/svelte-config';
 
   const options = [
     { label: 'Värde 1', value: 'value1' },
@@ -46,8 +46,8 @@ export let value = '';
 
 ```svelte
 <script>
-  import { Panel, CustomSelector } from '@soleil-se/svelte-config';
-  import { onSave } from '@soleil-se/svelte-config/utils';
+  import { Panel, CustomSelector } from '@soleil/svelte-config';
+  import { onSave } from '@soleil/svelte-config/utils';
 
   export let values;
 
@@ -80,7 +80,7 @@ The option is available as slot prop.
 
 ```svelte
 <script>
-  import { Panel, CustomSelector } from '@soleil-se/svelte-config';
+  import { Panel, CustomSelector } from '@soleil/svelte-config';
 
   const options = [
     { label: 'Värde 1', value: 'value1', type: 'Typ 1' },

package/components/DropdownSelector/README.md

@@ -50,7 +50,7 @@ For `custom-selector` use [CustomSelector](../CustomSelector).
 
 ```svelte
 <script>
-import { Panel, DropdownSelector } from '@soleil-se/svelte-config';
+import { Panel, DropdownSelector } from '@soleil/svelte-config';
 </script>
 
 <Panel heading="Inställningar">     
@@ -62,8 +62,8 @@ import { Panel, DropdownSelector } from '@soleil-se/svelte-config';
 
 ```svelte
 <script>
-import { Panel, DropdownSelector } from '@soleil-se/svelte-config';
-import { onSave } from '@soleil-se/svelte-config/utils';
+import { Panel, DropdownSelector } from '@soleil/svelte-config';
+import { onSave } from '@soleil/svelte-config/utils';
 
 const values = {
   metadata: '',  

package/components/ImageSelector/Component.svelte

@@ -81,6 +81,7 @@
     name="{name}Node"
     label={i18n('selectImage')}
     {required}
+    selectable="sv:image"
     type="image"
     bind:value={node}
     on:change={onChange}

package/components/ImageSelector/README.md

@@ -55,7 +55,7 @@ export let hideDecorative = false;
 
 ```svelte
 <script>
-  import { ImageSelector } from '@soleil-se/svelte-config';
+  import { ImageSelector } from '@soleil/svelte-config';
 </script>
 
 <ImageSelector name="image" heading="Bild" />
@@ -68,8 +68,8 @@ export let hideDecorative = false;
 
 ```svelte
 <script>  
-  import { ImageSelector } from '@soleil-se/svelte-config';
-  import { onSave } from '@soleil-se/svelte-config/utils';
+  import { ImageSelector } from '@soleil/svelte-config';
+  import { onSave } from '@soleil/svelte-config/utils';
 
   const values = window.CONFIG_VALUES || {};  
   

package/components/InputField/README.md

@@ -50,7 +50,7 @@ export let value = '';
 
 ```svelte
 <script>
-  import { Panel, InputField } from '@soleil-se/svelte-config';
+  import { Panel, InputField } from '@soleil/svelte-config';
 </script>
 
 <Panel heading="Inställningar">     
@@ -62,8 +62,8 @@ export let value = '';
 
 ```svelte
 <script>
-  import { Panel, InputField } from '@soleil-se/svelte-config';
-  import { onSave } from '@soleil-se/svelte-config/utils';
+  import { Panel, InputField } from '@soleil/svelte-config';
+  import { onSave } from '@soleil/svelte-config/utils';
 
   const values = {
     text: '',  

package/components/LinkSelector/README.md

@@ -95,7 +95,7 @@ Top and bottom slots before and after link selector.
 
 ```svelte
 <script>
-  import { LinkSelector } from '@soleil-se/svelte-config';
+  import { LinkSelector } from '@soleil/svelte-config';
 </script>
 
 <LinkSelector name="link" heading="Länk" />
@@ -106,8 +106,8 @@ Top and bottom slots before and after link selector.
 
 ```svelte
 <script>
-  import { LinkSelector } from '@soleil-se/svelte-config';
-  import { pluckPrefix, addPrefix, onSave } from '@soleil-se/svelte-config/utils';
+  import { LinkSelector } from '@soleil/svelte-config';
+  import { pluckPrefix, addPrefix, onSave } from '@soleil/svelte-config/utils';
 
   // Plucks object properties with keys prefixed with 'link' and removes the prefix.
   // { linkType, linkValue, linkNewWindow } -> { type, value, newWindow }

package/components/ListSelector/README.md

@@ -62,7 +62,7 @@ For `tags-selector` use [TagSelector](../TagSelector).
 
 ```svelte
 <script>
-import { Panel, ListSelector } from '@soleil-se/svelte-config';
+import { Panel, ListSelector } from '@soleil/svelte-config';
 </script>
 
 <Panel heading="Inställningar">     
@@ -74,8 +74,8 @@ import { Panel, ListSelector } from '@soleil-se/svelte-config';
 
 ```svelte
 <script>
-  import { Panel, ListSelector } from '@soleil-se/svelte-config';
-  import { onSave } from '@soleil-se/svelte-config/utils';
+  import { Panel, ListSelector } from '@soleil/svelte-config';
+  import { onSave } from '@soleil/svelte-config/utils';
 
   const values = {
     pages: '',  

package/components/Modal/Component.svelte

@@ -1,7 +1,7 @@
 <script>
   /* eslint svelte/no-unused-svelte-ignore: "off" */
 
-  import validate from '@soleil-se/config-validate';
+  import validate from '@soleil/config-validate';
   import { onMount, onDestroy, createEventDispatcher } from 'svelte';
   import A11yDialog from 'a11y-dialog';
   import { generateId } from '../../utils';

package/components/Modal/README.md

@@ -30,7 +30,7 @@ export let element; // Modal DOM element.
 
 ```svelte
 <script>
-  import { Panel, Modal, InputField, NodeSelector } from '@soleil-se/svelte-config';
+  import { Panel, Modal, InputField, NodeSelector } from '@soleil/svelte-config';
 
   let open = false;
 </script>
@@ -50,8 +50,8 @@ Advanced configs are **not** recommended.
 
 ```svelte
 <script>
-  import { Panel, Modal, InputField, NodeSelector } from '@soleil-se/svelte-config';
-  import { onSave } from '@soleil-se/svelte-config/utils';
+  import { Panel, Modal, InputField, NodeSelector } from '@soleil/svelte-config';
+  import { onSave } from '@soleil/svelte-config/utils';
 
   export let values;
 
@@ -87,7 +87,7 @@ Advanced configs are **not** recommended.
 
 ```svelte
 <script>
-  import { Modal } from '@soleil-se/svelte-config';
+  import { Modal } from '@soleil/svelte-config';
 
   let open = false; 
 </script>

package/components/NodeSelector/README.md

@@ -51,7 +51,7 @@ For `tags-selector` use [TagSelector](../TagSelector).
 
 ```svelte
 <script>
-  import { Panel, NodeSelector } from '@soleil-se/svelte-config';
+  import { Panel, NodeSelector } from '@soleil/svelte-config';
 </script>
 
 <Panel heading="Inställningar">
@@ -67,8 +67,8 @@ For `tags-selector` use [TagSelector](../TagSelector).
 
 ```svelte
 <script>
-  import { Panel, NodeSelector } from '@soleil-se/svelte-config';
-  import { onSave } from '@soleil-se/svelte-config/utils';
+  import { Panel, NodeSelector } from '@soleil/svelte-config';
+  import { onSave } from '@soleil/svelte-config/utils';
 
   const values = {
     page: '',  

package/components/NumberSpinner/README.md

@@ -27,7 +27,7 @@ export let class = '';
 
 ```svelte
 <script>
-  import { Panel, NumberSpinner } from '@soleil-se/svelte-config';
+  import { Panel, NumberSpinner } from '@soleil/svelte-config';
 </script>
 
 <Panel heading="Inställningar">     
@@ -39,8 +39,8 @@ export let class = '';
 
 ```svelte
 <script>
-  import { Panel, NumberSpinner } from '@soleil-se/svelte-config';
-  import { onSave } from '@soleil-se/svelte-config/utils';
+  import { Panel, NumberSpinner } from '@soleil/svelte-config';
+  import { onSave } from '@soleil/svelte-config/utils';
 
   const values = {
     spinner: '',  

package/components/Panel/Component.svelte

@@ -97,4 +97,8 @@
     background-color: white;
     border-left: 1px solid #aaa;
   }
+
+  .form-group .help-block:last-child {
+    margin-bottom: 0;
+  }
 </style>

package/components/Panel/README.md

@@ -21,7 +21,7 @@ Default slot for panel body.
 
 ```svelte
 <script>
-  import { Panel } from '@soleil-se/svelte-config';
+  import { Panel } from '@soleil/svelte-config';
 </script>
 
 <Panel heading="Inställningar">         

package/components/RadioGroup/README.md

@@ -28,7 +28,7 @@ export let value = '';
 
 ```svelte
 <script>
-import { Panel, RadioGroup } from '@soleil-se/svelte-config';
+import { Panel, RadioGroup } from '@soleil/svelte-config';
 </script>
 
 <Panel heading="Inställningar">     
@@ -51,8 +51,8 @@ import { Panel, RadioGroup } from '@soleil-se/svelte-config';
 
 ```svelte
 <script>
-import { Panel, RadioGroup } from '@soleil-se/svelte-config';
-import { onSave } from '@soleil-se/svelte-config/utils';
+import { Panel, RadioGroup } from '@soleil/svelte-config';
+import { onSave } from '@soleil/svelte-config/utils';
 
 const values = {
   radioGroup: '',  

package/components/RepositoryNodeSelector/README.md

@@ -79,7 +79,7 @@ The options are fetched using the REST-API and the site name is needed for build
 
 ```js
 import router from '@sitevision/api/common/router';
-import { createAppContext } from '@soleil-se/svelte-config/server';
+import { createAppContext } from '@soleil/svelte-config/server';
 
 router.get('/', (req, res) => {
   createAppContext(res);
@@ -92,7 +92,7 @@ router.get('/', (req, res) => {
 
 ```svelte
 <script>
-  import { Panel, RepositoryNodeSelector } from '@soleil-se/svelte-config';
+  import { Panel, RepositoryNodeSelector } from '@soleil/svelte-config';
 </script>
 
 <Panel heading="Inställningar">     
@@ -105,8 +105,8 @@ router.get('/', (req, res) => {
 
 ```svelte
 <script>
-  import { Panel, RepositoryNodeSelector } from '@soleil-se/svelte-config';
-  import { onSave } from '@soleil-se/svelte-config/utils';
+  import { Panel, RepositoryNodeSelector } from '@soleil/svelte-config';
+  import { onSave } from '@soleil/svelte-config/utils';
 
   export let values;
 

package/components/SelectField/README.md

@@ -21,7 +21,7 @@ export let value = '';
 
 ```svelte
 <script>
-  import { Panel, SelectField } from '@soleil-se/svelte-config';
+  import { Panel, SelectField } from '@soleil/svelte-config';
 </script>
 
 <Panel heading="Inställningar">     
@@ -38,8 +38,8 @@ export let value = '';
 
 ```svelte
 <script>
-  import { Panel, SelectField } from '@soleil-se/svelte-config';
-  import { onSave } from '@soleil-se/svelte-config/utils';
+  import { Panel, SelectField } from '@soleil/svelte-config';
+  import { onSave } from '@soleil/svelte-config/utils';
 
   const values = {
     select: '',  

package/components/TagSelector/README.md

@@ -31,7 +31,7 @@ export let value = [];
 
 ```svelte
 <script>
-  import { Panel, TagSelector } from '@soleil-se/svelte-config';
+  import { Panel, TagSelector } from '@soleil/svelte-config';
 </script>
 
 <Panel heading="Inställningar">
@@ -45,8 +45,8 @@ Name prop is required here as well since Sitevision uses this to initialize the
 
 ```svelte
 <script>
-  import { Panel, TagSelector } from '@soleil-se/svelte-config';
-  import { onSave } from '@soleil-se/svelte-config/utils';
+  import { Panel, TagSelector } from '@soleil/svelte-config';
+  import { onSave } from '@soleil/svelte-config/utils';
 
   const values = {
     tags: [],  

package/components/TextList/README.md

@@ -34,7 +34,7 @@ Use the value attribute to set a default value:
 
 ```svelte
 <script>
-import { Panel, TextList } from '@soleil-se/svelte-config';
+import { Panel, TextList } from '@soleil/svelte-config';
 </script>
 
 <Panel heading="Inställningar">     
@@ -49,8 +49,8 @@ import { Panel, TextList } from '@soleil-se/svelte-config';
 
 ```svelte
 <script>
-import { Panel, TextList } from '@soleil-se/svelte-config';
-import { onSave } from '@soleil-se/svelte-config/utils';
+import { Panel, TextList } from '@soleil/svelte-config';
+import { onSave } from '@soleil/svelte-config/utils';
 
 const values = {
   textList: '',  

package/eslint.config.js

@@ -0,0 +1,5 @@
+import config from '@soleil-se/eslint-config';
+
+export default [
+  ...config,
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/config-svelte",
-  "version": "1.27.12",
+  "version": "1.27.13",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",
@@ -30,15 +30,11 @@
     "svelte": "^3.46.0 || ^4.0.0 || ^5.0.0-next || ^5.0.0"
   },
   "devDependencies": {
-    "@soleil-se/eslint-config": "^5.2.0",
-    "@soleil-se/stylelint-config": "^4.2.0",
-    "eslint": "^8.57.1",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-svelte": "^2.44.1",
+    "@soleil-se/eslint-config": "^6.0.2",
+    "@soleil-se/stylelint-config": "^4.3.0",
+    "eslint": "^9.18.0",
     "glob": "^11.0.0",
-    "stylelint": "^16.9.0",
+    "stylelint": "^16.14.1",
     "sveld": "^0.20.2",
     "svelte": "^4.2.19",
     "svelte-preprocess": "^6.0.3"
@@ -48,16 +44,12 @@
     "a11y-dialog": "8.1.1",
     "svelte-dnd-action": "^0.9.51"
   },
-  "homepage": "https://docs.soleil.se/packages/config-svelte",
+  "homepage": "https://docs.soleil.se/packages/soleil/svelte-config",
   "scripts": {
     "create-type-definitions": "node ./createTypeDefinitions.js"
   },
-  "description": "A collection of Svelte components and utilities for WebApp, RESTApp and Widget configurations.",
-  "keywords": [
-    "Sitevision",
-    "WebApp",
-    "RESTApp",
-    "Widget",
-    "Svelte"
-  ]
-}
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "3290a06108ae08b6bc2354156a725296792b58f2"
+}

package/prettier.config.js

@@ -0,0 +1 @@
+export { default } from '@soleil-se/eslint-config/prettier';

package/stylelint.config.js

@@ -0,0 +1,3 @@
+export default {
+  extends: '@soleil-se/stylelint-config',
+};

package/utils/createI18n.js

@@ -19,7 +19,7 @@ export default function createI18n(messages) {
   return (path, values = {}) => {
     let message = get(messages[locale], path);
     if (message == null) {
-      console.warn(`[@soleil-se/svelte-config/utils/i18n] No translation avaliable for ${path}`);
+      console.warn(`[@soleil/svelte-config/utils/i18n] No translation avaliable for ${path}`);
       return path;
     }
 

package/utils/getAppContext.js

@@ -9,7 +9,7 @@ export default function getAppContext(key) {
     console.warn(`App context is not created, add the following in config/index.js:
 
 import router from '@sitevision/api/common/router';
-import { createAppContext } from '@soleil-se/svelte-config/server';
+import { createAppContext } from '@soleil/svelte-config/server';
 
 router.get('/', (req, res) => {
   createAppContext(res);

package/.eslintrc.cjs

@@ -1,4 +0,0 @@
-module.exports = {
-  extends: '@soleil/eslint-config-sitevision',
-  root: true,
-};

package/.prettierrc.cjs

@@ -1 +0,0 @@
-module.exports = require('@soleil/eslint-config-sitevision/svelte.prettier');

package/.stylelintrc.js

@@ -1,3 +0,0 @@
-export default {
-  extends: '@soleil/stylelint-config',
-};