@soleil-se/config-svelte 1.18.2 → 1.20.0

package/.eslintrc.js

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

package/.prettierrc.js

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

package/.stylelintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: '@soleil/stylelint-config'
+}

package/CHANGELOG.md

@@ -5,6 +5,14 @@ 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.20.0] - 2023-09-25
+
+- Add footer slot in [Modal](./components/Modal).
+
+## [1.19.0] - 2023-05-17
+
+- Add Svelte 4 support.
+
 ## [1.18.2] - 2023-05-17
 
 - Add attribute `data-a11y-dialog-ignore-focus-trap` to select2 based dropdown content to remedy focus management.

package/components/CustomList/internal/SortableItem.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <!-- This is handled by the click event on the edit button -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
 <div class="list-component__item" on:dblclick={editItem} on:click>
   {#if icon}
     <i class="sv-list-icon {icon}" aria-hidden="true" />

package/components/Modal/Component.svelte

@@ -1,4 +1,6 @@
 <script>
+  /* eslint svelte/no-unused-svelte-ignore: "off" */
+
   import validate from '@soleil-se/config-validate';
   import { onMount, createEventDispatcher } from 'svelte';
   import A11yDialog from 'a11y-dialog';
@@ -75,9 +77,7 @@
     }
   }
 
-  $: {
-    toggle(open);
-  }
+  $: toggle(open);
 
   function close() {
     open = false;
@@ -133,25 +133,24 @@
 <svelte:window on:keydown={handleEscape} />
 <div
   bind:this={element}
+  {id}
+  style:--duration="{duration}ms"
   class="modal"
-  class:visible
   class:transition
-  {id}
-  aria-labelledby={titleId}
+  class:visible
   aria-hidden="true"
-  style="--duration: {duration}ms;"
+  aria-labelledby={titleId}
 >
-  <!-- This is handled by the keydown event on svelte:window-->
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- This is handled by the keydown event on svelte:window -->
+  <!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
   <div class="overlay" on:click={close} />
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" on:click={close} aria-label="Stäng">
+        <button class="close" aria-label="Stäng" type="button" on:click={close}>
           <span aria-hidden="true">&times;</span>
           <spanc class="sr-only">{i18n('close')}</spanc>
         </button>
-        <h1 id={titleId} class="modal-title">{title}</h1>
       </div>
       <div class="modal-body">
         {#if renderContent}
@@ -159,10 +158,17 @@
         {/if}
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" on:click={close}>{i18n('cancel')}</button>
-        <button type="button" class="btn btn-primary" on:click={save} bind:this={saveButtonElement}>
-          {i18n('save')}
-        </button>
+        <slot name="footer">
+          <button class="btn btn-default" type="button" on:click={close}>{i18n('cancel')}</button>
+          <button
+            bind:this={saveButtonElement}
+            class="btn btn-primary"
+            type="button"
+            on:click={save}
+          >
+            {i18n('save')}
+          </button>
+        </slot>
       </div>
     </div>
   </div>
@@ -172,10 +178,7 @@
   .modal,
   .overlay {
     position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
   }
 
   .modal {

package/components/Modal/README.md

@@ -32,12 +32,12 @@ export let element; // Modal DOM element.
 <script>
   import { Panel, Modal, InputField, NodeSelector } from '@soleil-se/svelte-config';
 
-  let modalOpen = false;
+  let open = false;
 </script>
 
 <Panel>     
-  <button class="btn btn-primary" on:click={() => (modalOpen = true)}>Modal</button>
-  <Modal title="Edit" bind:open={modalOpen}>
+  <button class="btn btn-primary" on:click={() => (open = true)}>Modal</button>
+  <Modal title="Edit" bind:open>
     <InputField name="textModal" label="Text in modal" />
     <NodeSelector name="pageModal" label="Page in modal" />
   </Modal>
@@ -55,12 +55,14 @@ Advanced configs are **not** recommended.
 
   export let values;
 
+  let open = false; 
+
   onSave(() => values);
 </script>
 
 <Panel>    
-  <button class="btn btn-primary" on:click={() => (modalOpen = true)}>Modal</button>    
-  <Modal title="Edit" bind:open={modalOpen}>
+  <button class="btn btn-primary" on:click={() => (open = true)}>Modal</button>    
+  <Modal title="Edit" bind:open>
     <InputField name="textModal" bind:value={values.textModal} label="Text in modal" />
     <NodeSelector name="pageModal" bind:value={values.nodeModal} label="Page in modal" />
   </Modal>
@@ -72,8 +74,29 @@ Advanced configs are **not** recommended.
 * `--modal-width` - Width of modal, default is 600px.
 
 ```svelte
-<Modal title="Edit" bind:open={modalOpen} --modal-width="800px">
+<Modal title="Edit" bind:open --modal-width="800px">
   <InputField name="textModal" label="Text in modal" />
   <NodeSelector name="pageModal" label="Page in modal" />
 </Modal>
 ```
+
+### Slots
+
+* `default` - Modal content.
+* `footer` - Modal footer.
+
+```svelte
+<script>
+  import { Modal } from '@soleil-se/svelte-config';
+
+  let open = false; 
+</script>
+
+<Modal title="More info" bind:open>
+  <p>Content in default slot.</p>
+
+  <svelte:fragment slot="footer">
+    <button class="btn btn-primary" type="button" on:click={() => (open = false)}>OK</button>
+  </svelte:fragment>
+</Modal>
+```

package/components/RadioGroup/Component.svelte

@@ -37,19 +37,19 @@
   {#each options as option, index}
     <input
       id={`${id}_${index}`}
-      bind:group={value}
-      value={option.value || option}
+      class="sr-only"
       checked={option.value || option}
       disabled={isDisabled(option)}
       type="radio"
-      class="sr-only"
+      value={option.value || option}
+      bind:group={value}
       on:change={onChange}
     />
-    <label for={`${id}_${index}`} class="radio-inline" class:disabled={isDisabled(option)}>
+    <label class="radio-inline" class:disabled={isDisabled(option)} for={`${id}_${index}`}>
       {option.label || option}
     </label>
   {/each}
-  <input type="hidden" {value} {name} />
+  <input {name} type="hidden" {value} />
 </fieldset>
 
 <style lang="scss">

package/components/TextList/internal/Item.svelte

@@ -58,12 +58,12 @@
   <div class="form-group">
     <div class="input-group">
       <input
+        bind:this={inputElement}
         {id}
-        bind:value
-        type="text"
         class="form-control"
+        type="text"
+        bind:value
         on:keypress={handleKeypress}
-        bind:this={inputElement}
       />
 
       <span class="input-group-btn">
@@ -77,6 +77,7 @@
     </div>
   </div>
 {:else}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div on:dblclick={editItem}>
     <span class="item-name">{value}</span>
     <div class="list-component__item-actions">
@@ -107,7 +108,7 @@
       padding: 0;
       background: none;
       border: none;
-      -webkit-appearance: none;
+      appearance: none;
       appearance: none;
     }
 
@@ -115,5 +116,4 @@
       display: inline-block;
     }
   }
-
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/config-svelte",
-  "version": "1.18.2",
+  "version": "1.20.0",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",
@@ -9,16 +9,25 @@
   "sideEffects": false,
   "peerDependencies": {
     "@sitevision/api": "*",
-    "svelte": "^3.46.0"
+    "svelte": "^3.46.0 || ^4.0.0"
   },
   "devDependencies": {
-    "svelte": "^3.46.4"
+    "@soleil-se/eslint-config": "^5.1.0",
+    "@soleil-se/stylelint-config": "^3.0.0",
+    "eslint": "^8.43.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",
+    "svelte-preprocess": "^5.0.4"
   },
   "dependencies": {
     "@soleil-se/config-validate": "^1.1.2",
-    "a11y-dialog": "7.4.0",
+    "a11y-dialog": "7.5.2",
     "focus-visible": "^5.2.0",
-    "svelte-dnd-action": "^0.9.18"
+    "svelte-dnd-action": "^0.9.22"
   },
   "homepage": "https://docs.soleil.se/packages/config-svelte",
   "description": "A collection of Svelte components and utilities for WebApp, RESTApp and Widget configurations.",