@soleil-se/config-svelte 1.27.2 → 1.27.4

package/.stylelintrc.js

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

package/CHANGELOG.md

@@ -7,6 +7,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.27.3] - 2024-09-26
+
+- Add TypeScript definitions for API functions and move all type declarations to the types folder.
+
+## [1.27.2] - 2024-08-19
+
+- Custom template for CustomSelector options and results now works properly with `multiple` prop.
+
 ## [1.27.1] - 2024-08-12
 
 - Adjust import paths for components in index.js.

package/actions/inputPrefix.js

@@ -1,3 +1,8 @@
+/**
+ * Add https prefix to input value
+ * @param {HTMLInputElement} node
+ * @returns {void}
+ */
 export function prefixHttps(node) {
   const addPrefix = () => {
     const { type, value } = node;
@@ -9,6 +14,11 @@ export function prefixHttps(node) {
   node.addEventListener('input', addPrefix);
 }
 
+/**
+ * Add mail prefix to input value
+ * @param {HTMLInputElement} node
+ * @returns {void}
+ */
 export function prefixMail(node) {
   const addPrefix = () => {
     const { value } = node;
@@ -21,6 +31,11 @@ export function prefixMail(node) {
   node.addEventListener('input', addPrefix);
 }
 
+/**
+ * Add tel prefix to input value
+ * @param {HTMLInputElement} node
+ * @returns {void}
+ */
 export function prefixTel(node) {
   const addPrefix = () => {
     const { value } = node;

package/actions/resizer.js

@@ -1,3 +1,8 @@
+/**
+ * Resizer
+ * @param {HTMLElement} element Resizer element
+ * @returns {void}
+ * */
 const resizer = (element) => {
   const targetElement = element.parentNode;
 

package/actions/show.js

@@ -1,3 +1,9 @@
+/**
+ * Show or hide an element
+ * @param {HTMLElement} element Element to show or hide
+ * @param {boolean} initialShow Initial state of the element
+ * @returns {object} Object with update method
+ */
 export default function show(element, initialShow) {
   const toggle = (isVisible) => {
     /* eslint-disable-next-line no-param-reassign */

package/components/CustomList/i18n.js

@@ -4,13 +4,19 @@ export default createI18n({
   sv: {
     add: 'Lägg till...',
     edit: 'Redigera',
+    ok: 'OK',
+    remove: 'Ta bort',
   },
   no: {
     add: 'Legg till...',
     edit: 'Redigere',
+    ok: 'OK',
+    remove: 'Fjern',
   },
   en: {
     add: 'Add...',
     edit: 'Edit',
+    ok: 'OK',
+    remove: 'Remove',
   },
 });

package/components/CustomList/internal/SortableItem.svelte

@@ -1,6 +1,8 @@
 <script>
   import { createEventDispatcher } from 'svelte';
 
+  import i18n from '../i18n';
+
   export let id;
   export let disabled;
   export let icon;
@@ -17,6 +19,7 @@
 </script>
 
 <!-- This is handled by the click event on the edit button -->
+<!-- eslint-disable-next-line svelte/no-unused-svelte-ignore -->
 <!-- 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}
@@ -26,10 +29,10 @@
     <slot />
   </span>
   <div class="list-component__item-actions">
-    <button {disabled} on:click={editItem}>
+    <button aria-label={i18n('ok')} {disabled} on:click={editItem}>
       <i class="glyphicons edit" aria-hidden="true"></i>
     </button>
-    <button {disabled} on:click={removeItem}>
+    <button aria-label={i18n('remove')} {disabled} on:click={removeItem}>
       <i class="glyphicons remove-2" aria-hidden="true"></i>
     </button>
     <i class="glyphicons move" aria-hidden="true"></i>

package/components/Modal/Component.svelte

@@ -2,7 +2,7 @@
   /* eslint svelte/no-unused-svelte-ignore: "off" */
 
   import validate from '@soleil-se/config-validate';
-  import { onMount, createEventDispatcher } from 'svelte';
+  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
   import A11yDialog from 'a11y-dialog';
   import { generateId } from '../../utils';
 
@@ -104,7 +104,7 @@
   }
 
   onMount(() => {
-    a11yDialog = new A11yDialog(element).destroy();
+    a11yDialog = new A11yDialog(element);
 
     a11yDialog.on('show', () => {
       select2DropAddedObserver.observe(document.body, { childList: true });
@@ -131,6 +131,10 @@
 
     if (open) a11yDialog.show();
   });
+
+  onDestroy(() => {
+    a11yDialog?.destroy();
+  });
 </script>
 
 <svelte:window on:keydown={handleEscape} />

package/components/NodeSelector/Component.svelte

@@ -29,7 +29,7 @@
   export let show = true;
 
   selectable = Array.isArray(selectable) ? selectable.join(',') : selectable;
-  value = name ? values[name] ?? value : value;
+  value = name ? (values[name] ?? value) : value;
 
   let className = '';
   export { className as class };

package/components/TextList/i18n.js

@@ -3,11 +3,20 @@ import createI18n from '../../utils/createI18n';
 export default createI18n({
   sv: {
     add: 'Lägg till...',
+    ok: 'OK',
+    remove: 'Ta bort',
+    cancel: 'Avbryt',
   },
   no: {
     add: 'Legg till...',
+    ok: 'OK',
+    remove: 'Fjern',
+    cancel: 'Avbryt',
   },
   en: {
     add: 'Add...',
+    ok: 'OK',
+    remove: 'Remove',
+    cancel: 'Cancel',
   },
 });

package/components/TextList/internal/Item.svelte

@@ -1,6 +1,8 @@
 <script>
   import { tick, createEventDispatcher, onMount } from 'svelte';
 
+  import i18n from '../i18n';
+
   export let id;
   export let value;
   export let edit = false;
@@ -67,24 +69,30 @@
       />
 
       <span class="input-group-btn">
-        <button class="btn btn-default" type="button" on:click={updateItem}>
+        <button class="btn btn-default" aria-label={i18n('ok')} type="button" on:click={updateItem}>
           <i class="glyphicons ok-2"></i>
         </button>
-        <button class="btn btn-default" type="button" on:click={abortEdit}>
+        <button
+          class="btn btn-default"
+          aria-label={i18n('remove')}
+          type="button"
+          on:click={abortEdit}
+        >
           <i class="glyphicons remove-2"></i>
         </button>
       </span>
     </div>
   </div>
 {:else}
+  <!-- eslint-disable-next-line svelte/no-unused-svelte-ignore -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div on:dblclick={editItem}>
     <span class="item-name">{value}</span>
     <div class="list-component__item-actions">
-      <button on:click={editItem}>
+      <button aria-label={i18n('ok')} on:click={editItem}>
         <i class="glyphicons edit" aria-hidden="true"></i>
       </button>
-      <button on:click={removeItem}>
+      <button aria-label={i18n('cancel')} on:click={removeItem}>
         <i class="glyphicons remove-2" aria-hidden="true"></i>
       </button>
       <i class="glyphicons move" aria-hidden="true"></i>

package/createConfigApp/index.js

@@ -1,3 +1,7 @@
+/**
+ * Create a config app
+ * @param {Function} callback - Callback function for initializing the app.
+ */
 export default function createConfigApp(callback) {
   window.setValues = (values) => {
     // window?.sv?.setValues(values);

package/createTypeDefinitions.js

@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { sveld } from 'sveld';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { globSync } from 'glob';
+import fs from 'node:fs';
+import path from 'node:path';
+import { execSync } from 'node:child_process';
+
+sveld({
+  input: './index.js',
+  glob: true,
+});
+
+globSync('./components/*/types.d.ts').forEach((file) => {
+  const destinationPath = path.join('types', file);
+  const destinationDir = path.dirname(destinationPath);
+  fs.mkdirSync(destinationDir, { recursive: true });
+  fs.copyFileSync(file, destinationPath);
+});
+
+['actions', 'createConfigApp', 'server', 'utils'].forEach((dir) => {
+  execSync(`npx -p typescript tsc ./${dir}/index.js --declaration --allowJs --emitDeclarationOnly --outDir types/${dir} --skipLibCheck`, { stdio: 'inherit' });
+});

package/index.js

@@ -20,4 +20,6 @@ export { default as RepositoryNodeSelector } from './components/RepositoryNodeSe
 
 export { default as createConfigApp } from './createConfigApp';
 
-export { generateId, onSave, setupComponent } from './utils';
+export { generateId } from './utils/generateId';
+export { default as onSave } from './utils/onSave';
+export { default as setupComponent } from './utils/setupComponent';

package/package.json

@@ -1,34 +1,57 @@
 {
   "name": "@soleil-se/config-svelte",
-  "version": "1.27.2",
+  "version": "1.27.4",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",
+  "types": "./types/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "actions": [
+        "./types/actions/index.d.ts"
+      ],
+      "createConfigApp": [
+        "./types/createConfigApp/index.d.ts"
+      ],
+      "server": [
+        "./types/server/index.d.ts"
+      ],
+      "utils": [
+        "./types/utils/index.d.ts"
+      ]
+    }
+  },
   "author": "Soleil AB",
   "license": "UNLICENSED",
   "sideEffects": false,
+  "type": "module",
   "peerDependencies": {
     "@sitevision/api": "*",
     "svelte": "^3.46.0 || ^4.0.0 || ^5.0.0-next || ^5.0.0"
   },
   "devDependencies": {
-    "@soleil-se/eslint-config": "^5.1.2",
-    "@soleil-se/stylelint-config": "^3.1.1",
-    "eslint": "^8.57.0",
+    "@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.29.1",
-    "eslint-plugin-svelte": "^2.38.0",
-    "stylelint": "^15.11.0",
-    "svelte": "^4.2.1",
-    "svelte-preprocess": "^5.1.4"
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-svelte": "^2.44.1",
+    "glob": "^11.0.0",
+    "stylelint": "^16.9.0",
+    "sveld": "^0.20.2",
+    "svelte": "^4.2.19",
+    "svelte-preprocess": "^6.0.3"
   },
   "dependencies": {
     "@soleil-se/config-validate": "^1.2.1",
-    "a11y-dialog": "7.5.2",
-    "svelte-dnd-action": "^0.9.44"
+    "a11y-dialog": "8.1.1",
+    "svelte-dnd-action": "^0.9.51"
   },
   "homepage": "https://docs.soleil.se/packages/config-svelte",
+  "scripts": {
+    "create-type-definitions": "node ./createTypeDefinitions.js"
+  },
   "description": "A collection of Svelte components and utilities for WebApp, RESTApp and Widget configurations.",
   "keywords": [
     "Sitevision",

package/server/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import { getCurrentPage } from '@sitevision/api/server/PortletContextUtil';
 import appInfo from '@sitevision/api/server/appInfo';
 import { getSite } from '@sitevision/api/server/ResourceLocatorUtil';
@@ -28,7 +29,7 @@ export function createAppData(data) {
 
 /**
  * Creates app context global variable.
- * @param {Response} res Response from @sitevision/common/router.
+ * @param {import('@sitevision/api/common/router/index').Response} res Response from \@sitevision/common/router.
  */
 export function createAppContext(res) {
   const siteNode = getSite();

package/types/actions/index.d.ts

@@ -0,0 +1,3 @@
+export { default as resizer } from "./resizer";
+export { default as show } from "./show";
+export { prefixHttps, prefixMail, prefixTel } from "./inputPrefix";

package/types/actions/inputPrefix.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Add https prefix to input value
+ * @param {HTMLInputElement} node
+ * @returns {void}
+ */
+export function prefixHttps(node: HTMLInputElement): void;
+/**
+ * Add mail prefix to input value
+ * @param {HTMLInputElement} node
+ * @returns {void}
+ */
+export function prefixMail(node: HTMLInputElement): void;
+/**
+ * Add tel prefix to input value
+ * @param {HTMLInputElement} node
+ * @returns {void}
+ */
+export function prefixTel(node: HTMLInputElement): void;

package/types/actions/resizer.d.ts

@@ -0,0 +1,7 @@
+export default resizer;
+/**
+ * Resizer
+ * @param {HTMLElement} element Resizer element
+ * @returns {void}
+ * */
+declare function resizer(element: HTMLElement): void;

package/types/actions/show.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Show or hide an element
+ * @param {HTMLElement} element Element to show or hide
+ * @param {boolean} initialShow Initial state of the element
+ * @returns {object} Object with update method
+ */
+export default function show(element: HTMLElement, initialShow: boolean): object;

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

@@ -0,0 +1,54 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export interface CheckboxProps {
+  /**
+   * @default undefined
+   */
+  id?: string;
+
+  /**
+   * @default undefined
+   */
+  label: string;
+
+  /**
+   * @default undefined
+   */
+  name: string;
+
+  /**
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * @default false
+   */
+  checked?: boolean;
+
+  /**
+   * @default true
+   */
+  show?: boolean;
+
+  /**
+   * @default undefined
+   */
+  value: boolean;
+
+  /**
+   * @default ''
+   */
+  class?: string;
+}
+
+/**
+ *   A checkbox component.
+ *
+ *   [README](https://docs.soleil.se/packages/soleil/svelte-config/components/checkbox/)
+ */
+export default class Checkbox extends SvelteComponentTyped<
+  CheckboxProps,
+  { input: CustomEvent<any>; change: CustomEvent<any> },
+  { default: {}; label: {} }
+> {}

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

@@ -0,0 +1,59 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export interface CheckboxGroupProps {
+  /**
+   * @default undefined
+   */
+  id?: string;
+
+  /**
+   * @default undefined
+   */
+  name: string;
+
+  /**
+   * @default undefined
+   */
+  options: import("./types.d.ts").Option[];
+
+  /**
+   * @default undefined
+   */
+  legend: string;
+
+  /**
+   * @default false
+   */
+  legendVisuallyHidden?: boolean;
+
+  /**
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * @default true
+   */
+  show?: boolean;
+
+  /**
+   * @default []
+   */
+  value?: string[];
+
+  /**
+   * @default ''
+   */
+  class?: string;
+}
+
+/**
+ *   A checkbox group component.
+ *
+ *   [README](https://docs.soleil.se/packages/soleil/svelte-config/components/checkboxgroup/)
+ */
+export default class CheckboxGroup extends SvelteComponentTyped<
+  CheckboxGroupProps,
+  { input: CustomEvent<any>; change: CustomEvent<any> },
+  { default: {}; legend: {} }
+> {}

package/types/components/CheckboxGroup/types.d.ts

@@ -0,0 +1 @@
+export type Option = ({string} | {label: string, value: string})[]

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

@@ -0,0 +1,50 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export interface CustomListProps {
+  /**
+   * @default undefined
+   */
+  label: string;
+
+  /**
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * @default undefined
+   */
+  name?: string;
+
+  /**
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * @default true
+   */
+  show?: boolean;
+
+  /**
+   * @default undefined
+   */
+  icon: string;
+
+  /**
+   * @default []
+   */
+  value?: [];
+}
+
+/**
+ *   Custom list component for adding multiple modal windows containting configuration components and
+ *   sorting them.
+ *
+ *   [README](https://docs.soleil.se/packages/soleil/svelte-config/components/customlist/)
+ */
+export default class CustomList extends SvelteComponentTyped<
+  CustomListProps,
+  { input: CustomEvent<any>; change: CustomEvent<any> },
+  { default: { id: any; triggerUpdate: any }; label: {} }
+> {}

package/types/components/CustomList/CustomListItemTemplate.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export interface CustomListItemTemplateProps {}
+
+export default class CustomListItemTemplate extends SvelteComponentTyped<
+  CustomListItemTemplateProps,
+  Record<string, any>,
+  { default: {} }
+> {}

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

@@ -0,0 +1,79 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export interface CustomSelectorProps {
+  /**
+   * @default undefined
+   */
+  id?: string;
+
+  /**
+   * @default undefined
+   */
+  label: string;
+
+  /**
+   * @default undefined
+   */
+  name?: string;
+
+  /**
+   * @default undefined
+   */
+  placeholder?: string;
+
+  /**
+   * @default []
+   */
+  options?: import("./types.d.ts").Option[];
+
+  /**
+   * @default false
+   */
+  searchable?: boolean;
+
+  /**
+   * @default true
+   */
+  removable?: boolean;
+
+  /**
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * @default false
+   */
+  multiple?: boolean;
+
+  /**
+   * @default true
+   */
+  show?: boolean;
+
+  /**
+   * @default undefined
+   */
+  value?: string | string[];
+
+  /**
+   * @default ''
+   */
+  class?: string;
+}
+
+/**
+ *   Wrapper component for Sitevision [Custom selector](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components#h-Customselectorsince91).
+ *
+ *   [README](https://docs.soleil.se/packages/soleil/svelte-config/components/customselector/)
+ */
+export default class CustomSelector extends SvelteComponentTyped<
+  CustomSelectorProps,
+  { input: CustomEvent<any>; change: CustomEvent<any> },
+  { default: {}; label: {}; option: { option: any } }
+> {}

package/types/components/CustomSelector/types.d.ts

@@ -0,0 +1 @@
+export type Option = ({string} | {label: string, value: string})[]