@soleil-se/config-svelte 1.28.2 → 1.29.1

package/CHANGELOG.md

@@ -8,6 +8,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.29.1] - 2025-08-22
+
+- Update type definitions.
+
+## [1.29.0] - 2025-07-31
+
+- Add function to add items to `CustomList`.
+
 ## [1.28.2] - 2025-06-05
 
 - Swap places of `description` prop and slot for Svelte 5 compatibility.

package/components/Checkbox/Component.svelte

@@ -10,7 +10,7 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
-  export let name;
+  export let name = undefined;
   /** @type {boolean} */
   export let disabled = false;
   /** @type {boolean} */
@@ -19,7 +19,7 @@
   export let show = true;
   /** @type {boolean} */
   export let value;
-  value = name ? values[name] ?? value ?? checked : value;
+  value = name ? (values[name] ?? value ?? checked) : value;
 
   let className = '';
   export { className as class };

package/components/CheckboxGroup/Component.svelte

@@ -8,7 +8,7 @@
   /** @type {string} */
   export let id = generateId();
   /** @type {string} */
-  export let name;
+  export let name = undefined;
   /** @type {import('./types.d.ts').Option[]} */
   export let options;
   /** @type {string} */
@@ -16,7 +16,7 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
-  export let description;
+  export let description = undefined;
   /** @type {boolean} */
   export let legendVisuallyHidden = false;
   /** @type {boolean} */

package/components/CustomList/Component.svelte

@@ -16,7 +16,7 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
-  export let description;
+  export let description = undefined;
   /** @type {boolean} */
   export let required = false;
   /** @type {string} */
@@ -61,13 +61,17 @@
     dispatch('change', value);
   }
 
-  function onAddSave({ detail }) {
-    items = items.concat(detail);
-    modals[detail.id] = false;
+  export function addItem(item) {
+    items = items.concat(item);
+    modals[item.id] = false;
     onChange();
     updateItems();
   }
 
+  function onAddSave({ detail }) {
+    addItem(detail);
+  }
+
   function onEdit({ detail }) {
     modals[detail] = true;
   }

package/components/CustomList/README.md

@@ -46,9 +46,26 @@ This id needs to be prefixed to the `name` attribute.
 
 ### Advanced
 
-This component is currently **not** supported in advanced configs out of the box.  
+This component is currently **not** fully supported in advanced configs out of the box.  
 If you need to use it in an advanced config you can manually handle the state to normalize
-and flatten it for saving to the server.
+and flatten it for saving to the server. If you use bind:value threat it as a readonly since any changes will be lost. You can use the exposed function addItems({id:String,name:String}) to add values 
+
+```svelte
+<script>
+  import { Panel, CustomList, InputField, NodeSelector } from '@soleil-se/config-svelte';
+  let listInstance
+  function addToList(){
+    listInstance.addItem({ id: 'id', name: 'name' });
+  }
+</script>
+
+<Panel>     
+  <CustomList name="customList" label="Custom list" let:id bind:this={listInstance}>
+    <InputField name="{id}_name" label="Name" />
+    <NodeSelector name="{id}_page" label="Page" />
+  </CustomList>
+</Panel>
+```
 
 ## AppData
 

package/components/CustomSelector/Component.svelte

@@ -11,7 +11,7 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
-  export let description;
+  export let description = undefined;
   /** @type {string} */
   export let name = undefined;
   /** @type {string} */

package/components/DropdownSelector/Component.svelte

@@ -10,7 +10,7 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
-  export let description;
+  export let description = undefined;
   /** @type {string} */
   export let name = undefined;
   /** @type {import('./types.d.ts').Type} */

package/components/ImageSelector/Component.svelte

@@ -18,7 +18,7 @@
   /** @type {boolean} */
   export let required = false;
   /** @type {string} */
-  export let node;
+  export let node = undefined;
   /** @type {string} */
   export let alt;
   alt = name ? values[`${name}Alt`] ?? alt : alt;
@@ -27,7 +27,7 @@
   /** @type {boolean} */
   export let decorative = false;
   /** @type {boolean} */
-  export let show;
+  export let show = true;
   $: decorative = hideDecorative ? false : decorative;
 
   let imageArchiveAlt = '';

package/components/InputField/Component.svelte

@@ -11,7 +11,7 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
-  export let description;
+  export let description = undefined;
   /** @type {string} */
   export let type = 'text';
   /** @type {string} */

package/components/LinkSelector/Component.svelte

@@ -15,7 +15,7 @@
   /** @type {string} */
   export let heading = i18n('heading');
   /** @type {string} */
-  export let name;
+  export let name = undefined;
   /** @type {boolean} */
   export let disabled = false;
   /** @type {boolean} */

package/components/ListSelector/Component.svelte

@@ -8,11 +8,11 @@
   /** @type {string} */
   export let id = generateId();
   /** @type {string} */
-  export let name;
+  export let name = undefined;
   /** @type {string} */
   export let label;
   /** @type {string} */
-  export let description;
+  export let description = undefined;
   /** @type {import('./types.d.ts').Type} */
   export let type = 'page';
   /** @type {boolean} */

package/components/Modal/Component.svelte

@@ -14,7 +14,7 @@
   /** @type {boolean} */
   export let open = false;
   /** @type {HTMLElement} */
-  export let element;
+  export let element = undefined;
 
   const dispatch = createEventDispatcher();
 

package/components/NodeSelector/Component.svelte

@@ -10,11 +10,11 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
-  export let description;
+  export let description = undefined;
   /** @type {import('./types.d.ts').Type} */
   export let type = 'page';
   /** @type {string} */
-  export let name;
+  export let name = undefined;
   /** @type {boolean} */
   export let required = false;
   /** @type {boolean} */

package/components/NumberSpinner/Component.svelte

@@ -8,15 +8,15 @@
   /** @type {string} */
   export let id = generateId();
   /** @type {string} */
-  export let name;
+  export let name = undefined;
   /** @type {string} */
   export let label;
   /** @type {string} */
-  export let description;
+  export let description = undefined;
   /** @type {number} */
-  export let min;
+  export let min = undefined;
   /** @type {number} */
-  export let max;
+  export let max = undefined;
   /** @type {number} */
   export let step = 1;
   /** @type {boolean} */
@@ -26,7 +26,7 @@
   /** @type {boolean} */
   export let show = true;
   /** @type {string} */
-  export let suffix;
+  export let suffix = undefined;
   /** @type {number} */
   export let decimals = 0;
   /** @type {number} */

package/components/RadioGroup/Component.svelte

@@ -8,7 +8,7 @@
   /** @type {string} */
   export let id = generateId();
   /** @type {string} */
-  export let name;
+  export let name = undefined;
   /** @type {import('./types.d.ts').Option[]} */
   export let options = [];
   /** @type {string} */
@@ -16,7 +16,7 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
-  export let description;
+  export let description = undefined;
   /** @type {boolean} */
   export let legendVisuallyHidden = false;
   /** @type {boolean} */
@@ -25,7 +25,7 @@
   export let show = true;
   /** @type {string} */
   export let value = options[0]?.value ?? options[0] ?? '';
-  value = name ? values[name] ?? value : value;
+  value = name ? (values[name] ?? value) : value;
 
   $: legend = legend || label;
 

package/components/RepositoryNodeSelector/Component.svelte

@@ -6,25 +6,25 @@
   import i18n from './i18n';
 
   /** @type {string} */
-  export let id;
+  export let id = undefined;
   /** @type {string} */
   export let label;
   /** @type {string} */
-  export let description;
+  export let description = undefined;
   /** @type {string} */
-  export let name;
+  export let name = undefined;
   /** @type {boolean} */
-  export let searchable;
+  export let searchable = undefined;
   /** @type {boolean} */
-  export let required;
+  export let required = false;
   /** @type {boolean} */
-  export let disabled;
+  export let disabled = false;
   /** @type {boolean} */
-  export let multiple;
+  export let multiple = false;
   /** @type {boolean} */
-  export let show;
+  export let show = true;
   /** @type {string} */
-  export let value;
+  export let value = '';
   /** @type {import('./types.d.ts').Type} */
   export let type;
 

package/components/SelectField/Component.svelte

@@ -10,9 +10,9 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
-  export let description;
+  export let description = undefined;
   /** @type {string} */
-  export let name;
+  export let name = undefined;
   /** @type {string} */
   export let required = false;
   /** @type {string} */
@@ -22,7 +22,7 @@
   /** @type {import('./types.d.ts').Option[]} */
   export let options = [];
 
-  export let value;
+  export let value = '';
   value = name ? (values[name] ?? value) : value;
   function onChange() {
     dispatch('change', value);

package/components/TagSelector/Component.svelte

@@ -10,9 +10,9 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
-  export let description;
+  export let description = undefined;
   /** @type {string} */
-  export let name;
+  export let name = undefined;
   /** @type {boolean} */
   export let required = false;
   /** @type {boolean} */

package/components/TextList/Component.svelte

@@ -16,7 +16,7 @@
   /** @type {string} */
   export let label;
   /** @type {string} */
-  export let description;
+  export let description = undefined;
   /** @type {boolean} */
   export let required = false;
   /** @type {string} */

package/package.json

@@ -9,7 +9,7 @@
     "svelte"
   ],
   "homepage": "https://docs.soleil.se/packages/config-svelte",
-  "version": "1.28.2",
+  "version": "1.29.1",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",
@@ -59,5 +59,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "790b70d2620093721d315dadcd97709cefef83eb"
+  "gitHead": "3c39b79716b0b70da776fb3e1f6fde01a85fc220"
 }

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

@@ -14,7 +14,7 @@ export type CheckboxProps = {
   /**
    * @default undefined
    */
-  name: string;
+  name?: string;
 
   /**
    * @default false

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

@@ -9,7 +9,7 @@ export type CheckboxGroupProps = {
   /**
    * @default undefined
    */
-  name: string;
+  name?: string;
 
   /**
    * @default undefined
@@ -29,7 +29,7 @@ export type CheckboxGroupProps = {
   /**
    * @default undefined
    */
-  description: string;
+  description?: string;
 
   /**
    * @default false

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

@@ -9,7 +9,7 @@ export type CustomListProps = {
   /**
    * @default undefined
    */
-  description: string;
+  description?: string;
 
   /**
    * @default false
@@ -52,4 +52,6 @@ export default class CustomList extends SvelteComponentTyped<
   CustomListProps,
   { input: CustomEvent<any>; change: CustomEvent<any> },
   { default: { id: any; triggerUpdate: any }; description: {}; label: {} }
-> {}
+> {
+  addItem: () => any;
+}

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

@@ -14,7 +14,7 @@ export type CustomSelectorProps = {
   /**
    * @default undefined
    */
-  description: string;
+  description?: string;
 
   /**
    * @default undefined

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

@@ -14,7 +14,7 @@ export type DropdownSelectorProps = {
   /**
    * @default undefined
    */
-  description: string;
+  description?: string;
 
   /**
    * @default undefined

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

@@ -19,7 +19,7 @@ export type ImageSelectorProps = {
   /**
    * @default undefined
    */
-  node: string;
+  node?: string;
 
   /**
    * @default undefined
@@ -37,9 +37,9 @@ export type ImageSelectorProps = {
   decorative?: boolean;
 
   /**
-   * @default undefined
+   * @default true
    */
-  show: boolean;
+  show?: boolean;
 };
 
 /**

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

@@ -17,7 +17,7 @@ type $Props = {
   /**
    * @default undefined
    */
-  description: string;
+  description?: string;
 
   /**
    * @default 'text'

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

@@ -9,7 +9,7 @@ export type LinkSelectorProps = {
   /**
    * @default undefined
    */
-  name: string;
+  name?: string;
 
   /**
    * @default false

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

@@ -9,7 +9,7 @@ export type ListSelectorProps = {
   /**
    * @default undefined
    */
-  name: string;
+  name?: string;
 
   /**
    * @default undefined
@@ -19,7 +19,7 @@ export type ListSelectorProps = {
   /**
    * @default undefined
    */
-  description: string;
+  description?: string;
 
   /**
    * @default 'page'

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

@@ -14,7 +14,7 @@ export type ModalProps = {
   /**
    * @default undefined
    */
-  element: null | HTMLDivElement;
+  element?: null | HTMLDivElement;
 };
 
 export default class Modal extends SvelteComponentTyped<

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

@@ -14,7 +14,7 @@ export type NodeSelectorProps = {
   /**
    * @default undefined
    */
-  description: string;
+  description?: string;
 
   /**
    * @default 'page'
@@ -24,7 +24,7 @@ export type NodeSelectorProps = {
   /**
    * @default undefined
    */
-  name: string;
+  name?: string;
 
   /**
    * @default false

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

@@ -9,7 +9,7 @@ export type NumberSpinnerProps = {
   /**
    * @default undefined
    */
-  name: string;
+  name?: string;
 
   /**
    * @default undefined
@@ -19,17 +19,17 @@ export type NumberSpinnerProps = {
   /**
    * @default undefined
    */
-  description: string;
+  description?: string;
 
   /**
    * @default undefined
    */
-  min: number;
+  min?: number;
 
   /**
    * @default undefined
    */
-  max: number;
+  max?: number;
 
   /**
    * @default 1
@@ -54,7 +54,7 @@ export type NumberSpinnerProps = {
   /**
    * @default undefined
    */
-  suffix: string;
+  suffix?: string;
 
   /**
    * @default 0

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

@@ -9,7 +9,7 @@ export type RadioGroupProps = {
   /**
    * @default undefined
    */
-  name: string;
+  name?: string;
 
   /**
    * @default []
@@ -29,7 +29,7 @@ export type RadioGroupProps = {
   /**
    * @default undefined
    */
-  description: string;
+  description?: string;
 
   /**
    * @default false

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

@@ -4,7 +4,7 @@ export type RepositoryNodeSelectorProps = {
   /**
    * @default undefined
    */
-  id: string;
+  id?: string;
 
   /**
    * @default undefined
@@ -14,42 +14,42 @@ export type RepositoryNodeSelectorProps = {
   /**
    * @default undefined
    */
-  description: string;
+  description?: string;
 
   /**
    * @default undefined
    */
-  name: string;
+  name?: string;
 
   /**
    * @default undefined
    */
-  searchable: boolean;
+  searchable?: boolean;
 
   /**
-   * @default undefined
+   * @default false
    */
-  required: boolean;
+  required?: boolean;
 
   /**
-   * @default undefined
+   * @default false
    */
-  disabled: boolean;
+  disabled?: boolean;
 
   /**
-   * @default undefined
+   * @default false
    */
-  multiple: boolean;
+  multiple?: boolean;
 
   /**
-   * @default undefined
+   * @default true
    */
-  show: boolean;
+  show?: boolean;
 
   /**
-   * @default undefined
+   * @default ''
    */
-  value: string;
+  value?: string;
 
   /**
    * @default undefined

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

@@ -14,12 +14,12 @@ export type SelectFieldProps = {
   /**
    * @default undefined
    */
-  description: string;
+  description?: string;
 
   /**
    * @default undefined
    */
-  name: string;
+  name?: string;
 
   /**
    * @default false
@@ -42,9 +42,9 @@ export type SelectFieldProps = {
   options?: import("./types.d.ts").Option[];
 
   /**
-   * @default undefined
+   * @default ''
    */
-  value: undefined;
+  value?: string;
 };
 
 /**

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

@@ -14,12 +14,12 @@ export type TagSelectorProps = {
   /**
    * @default undefined
    */
-  description: string;
+  description?: string;
 
   /**
    * @default undefined
    */
-  name: string;
+  name?: string;
 
   /**
    * @default false

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

@@ -14,7 +14,7 @@ export type TextListProps = {
   /**
    * @default undefined
    */
-  description: string;
+  description?: string;
 
   /**
    * @default false