@soleil-se/config-svelte 1.27.1 → 1.27.3

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/CustomSelector/Component.svelte

@@ -49,7 +49,7 @@
 
   function template(option) {
     const content = document.querySelector(`[data-option="${id}_${option.id}"]`)?.innerHTML;
-    return content ? jQuery(content) : option.text;
+    return content || option.text;
   }
 
   onMount(() => {

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/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.1",
+  "version": "1.27.3",
   "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.0",
+    "glob": "^11.0.0",
+    "stylelint": "^16.9.0",
+    "sveld": "^0.20.2",
+    "svelte": "^4.2.19",
+    "svelte-preprocess": "^6.0.2"
   },
   "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.50"
   },
   "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})[]

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

@@ -0,0 +1,64 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export interface DropdownSelectorProps {
+  /**
+   * @default undefined
+   */
+  id?: string;
+
+  /**
+   * @default undefined
+   */
+  label: string;
+
+  /**
+   * @default undefined
+   */
+  name?: string;
+
+  /**
+   * @default 'metadata'
+   */
+  type?: import("./types.d.ts").Type;
+
+  /**
+   * @default []
+   */
+  selectable?: import("./types.d.ts").Selectable;
+
+  /**
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * @default true
+   */
+  show?: boolean;
+
+  /**
+   * @default ''
+   */
+  value?: string;
+
+  /**
+   * @default ''
+   */
+  class?: string;
+}
+
+/**
+ *   Wrapper component for Sitevision [selects](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components).
+ *
+ *   [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/DropdownSelector/)
+ */
+export default class DropdownSelector extends SvelteComponentTyped<
+  DropdownSelectorProps,
+  { input: CustomEvent<any>; change: CustomEvent<any> },
+  { default: {}; label: {} }
+> {}

package/types/components/DropdownSelector/types.d.ts

@@ -0,0 +1,30 @@
+export type NodeType =
+  "sv:metadataDateDefinition" |
+  "sv:metadataUserDefinition" |
+  "sv:metadataDirectoryDefinition" |
+  "sv:metadataTextDefinition" |
+  "sv:metadataSingleDefinition" |
+  "sv:metadataMultipleDefinition" |
+  "sv:metadataSystemLinkDefinition" |
+  "sv:metadataSystemIntegerDefinition" |
+  "sv:metadataSystemTextDefinition" |
+  "sv:metadataSystemDefinition" |
+  "sv:metadataLinkDefinition" |
+  "sv:metadataTextPortletDefinition" |
+  "sv:metadataImagePortletDefinition" |
+  "sv:metadataKeywordDefinition" |
+  "sv:metadataRelatedInformationDefinition" |
+  "sv:metadataMediaPortletDefinition" |
+  "sv:metadataSingleTagDefinition" |
+  "sv:metadataMultipleTagDefinition";
+
+export type Selectable = NodeType | NodeType[]
+
+export type Type =
+  "metadata" |
+  "template" |
+  "oauth2-configuration" |
+  "virtual-group" |
+  "search-index" |
+  "font" |
+  "color"

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

@@ -0,0 +1,54 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export interface ImageSelectorProps {
+  /**
+   * @default undefined
+   */
+  name?: string;
+
+  /**
+   * @default undefined
+   */
+  heading?: string;
+
+  /**
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * @default undefined
+   */
+  node: string;
+
+  /**
+   * @default undefined
+   */
+  alt: string;
+
+  /**
+   * @default false
+   */
+  hideDecorative?: boolean;
+
+  /**
+   * @default false
+   */
+  decorative?: boolean;
+
+  /**
+   * @default undefined
+   */
+  show: boolean;
+}
+
+/**
+ *   Custom panel component for selecting an image.
+ *
+ *   [README](https://docs.soleil.se/packages/soleil/svelte-config/components/imageselector/)
+ */
+export default class ImageSelector extends SvelteComponentTyped<
+  ImageSelectorProps,
+  { input: CustomEvent<any>; change: CustomEvent<any> },
+  { default: {} }
+> {}