add(types): Add and improve JSDOC types to props

Author: hobbitronics

components/custom/Badge/Badge.svelte

@@ -1,7 +1,11 @@
 <script>
+/** @type {string} the background color of the badge. Defaults to "gray" */
 export let color = 'gray'
+/** @type {string} the border radius of the badge. Defaults to "50%" */
 export let borderRadius = '50%'
+/** @type {string} the padding of the badge. Defaults to ".2em" */
 export let padding = '.2em'
+/** @type {boolean} if the badge is bordered or not */
 export let bordered = false
 
 let transparentColor = ''

components/custom/DateInput/DateInput.svelte

@@ -1,73 +1,25 @@
 <script>
-/**
- * @component DateInput
- * @description Date input with custom styling
- */
-
-/**
- * @prop {string}
- * @description sets color of input text
- */
+/** @type {string} sets color of input text */
 export let color = 'black'
-
-/**
- * @prop {string}
- * @description sets color of input border
- */
+/** @type {string} sets color of input border */
 export let borderColor = 'black'
-
-/**
- * @prop {string}
- * @description sets color of input text after blur when required and empty
- */
+/** @type {string} sets color of input text after blur when required and empty */
 export let errorColor = 'red'
-
-/**
- * @prop {string}
- * @description sets padding of input
- */
+/** @type {string} sets padding of input */
 export let padding = '12px'
-
-/**
- * @prop {string}
- * @description sets width of input
- */
+/** @type {string} sets width of input */
 export let width = '220px'
-
-/**
- * @prop {string}
- * @description sets font size input text
- */
+/** @type {string} sets font size input text */
 export let fontSize = '14px'
-
-/**
- * @prop {string}
- * @description sets name of input
- */
+/** @type {string} sets name of input */
 export let name = ''
-
-/**
- * @prop {string} date in locale with no time data
- * @description sets initial date of input
- */
+/** @type {string} sets initial date of input in locale with no time data */
 export let value = ''
-
-/**
- * @prop {boolean}
- * @description sets whether input is disabled
- */
+/** @type {boolean} sets whether input is disabled */
 export let disabled = false
-
-/**
- * @prop {boolean}
- * @description sets whether input is focused on load
- */
+/** @type {boolean} sets whether input is focused on load */
 export let autofocus = false
-
-/**
- * @prop {boolean}
- * @description sets whether input is required and has error color when empty after blur
- */
+/** @type {boolean} sets whether input is required and has error color when empty after blur */
 export let required = false
 
 const onBlur = (e) => {

components/custom/FileDropArea/FileDropArea.svelte

@@ -2,9 +2,13 @@
 import { isAboveMobile } from '../../mdc'
 import { createEventDispatcher } from 'svelte'
 
+/** @type {boolean} if the button uses raised styling or not */
 export let raised = false
+/** @type {boolean} if the button uses outlined styling or not */
 export let outlined = false
+/** @type {boolean} if the button is disabled or not */
 export let uploading = false
+/** @type {string} the mime type of the file. Defaults to 'application/pdf,image/*' */
 export let mimeType = 'application/pdf,image/*'
 
 let fileInput = {}

components/custom/Form/Form.svelte

@@ -2,7 +2,9 @@
 import { onMount } from 'svelte'
 import { generateRandomID } from '../../../random'
 
+/** @type {string} the id of the form which is generated by defaults */
 export let id = generateRandomID('form-')
+/** @type {boolean} if the form should save its values to local storage */
 export let saveToLocalStorage = false
 
 let form = {}

components/custom/SearchableSelect/SearchableSelect.svelte

@@ -2,13 +2,21 @@
 import { generateRandomID } from '../../../random'
 import { createEventDispatcher } from 'svelte'
 
+/** @type {object} the options to choose from. The keys are displayed in the dropdown and the value is dispatched with the change event */
 export let options = {}
+/** @type {string} the currently selected option value */
 export let choice = ''
+/** @type {string} the placeholder text which is also used as a floating label */
 export let placeholder = ''
+/** @type {string} the padding around the input label */
 export let padding = '12px'
+/** @type {string} the width of the input */
 export let width = '232px'
+/** @type {number} the maximum length of the input */
 export let maxlength = 255
+/** @type {boolean} if the input is disabled or not */
 export let disabled = false
+/** @type {boolean} if the input is required or not */
 export let required = false
 
 let element = {}
@@ -54,7 +62,10 @@ const onChange = (e) => {
   text-overflow: ellipsis;
   left: var(--field-padding);
   width: calc(100% - (var(--field-padding) * 2));
-  transition: top 0.3s ease, color 0.3s ease, font-size 0.3s ease;
+  transition:
+    top 0.3s ease,
+    color 0.3s ease,
+    font-size 0.3s ease;
 }
 
 .custom-field input:not(:placeholder-shown) + .placeholder,

components/custom/StaticChip/StaticChip.svelte

@@ -1,4 +1,5 @@
 <script>
+/** @type {string} the background color of the chip */
 export let bgColor = '#e5e5e5'
 </script>
 

components/mdc/Button/Button.svelte

@@ -3,12 +3,19 @@
 import { MDCRipple } from '@material/ripple'
 import { onMount } from 'svelte'
 
+/** @type {boolean} if the button is disabled or not */
 export let disabled = false
+/** @type {boolean} if the button used outlined styling or not */
 export let outlined = false
+/** @type {boolean} if the button uses raised styling or not */
 export let raised = false
+/** @type {string} the prepend icon */
 export let prependIcon = undefined
+/** @type {string} the append icon */
 export let appendIcon = undefined
+/** @type {string} the URL of the button. If used the element will be an anchor. */
 export let url = undefined
+/** @type {string} the `target` attribute of the anchor element if `url` is used */
 export let target = ''
 
 let element = {}

components/mdc/Card/Card.svelte

@@ -1,9 +1,14 @@
 <!-- https://github.com/material-components/material-components-web/tree/master/packages/mdc-card -->
 <script>
+/** @type {string} the secondary text */
 export let secondary = ''
+/** @type {boolean} if the card is outlined or not */
 export let outlined = false
+/** @type {string} the background color. Defaults to "white" */
 export let color = 'white'
+/** @type {boolean} if the card is clickable or not */
 export let isClickable = false
+/** @type {boolean} if the card should have padding or not */
 export let noPadding = false
 
 $: tabindex = isClickable ? 0 : undefined

components/mdc/Checkbox/Checkbox.svelte

@@ -7,9 +7,13 @@ import { createEventDispatcher, onMount } from 'svelte'
 
 const dispatch = createEventDispatcher()
 
+/** @type {string} the label text*/
 export let label = ''
+/** @type {boolean} if the checkbox is checked or not */
 export let checked = false
+/** @type {boolean} if the checkbox is disabled or not */
 export let disabled = false
+/** @type {boolean} if the label should be uppercase or not */
 export let uppercase = false
 
 let checkboxElement = {}

components/mdc/CustomCard/CustomCard.svelte

@@ -2,12 +2,19 @@
 import Button from '../Button'
 import Card from '../Card'
 
+/** @type {string} the image source */
 export let src = ''
+/** @type {string} the image alt text, default to "image is missing" */
 export let alt = 'image is missing'
+/** @type {string} the card title, default to "Title" */
 export let title = 'Title'
+/** @type {string} the icon name */
 export let icon = ''
+/** @type {boolean} if the card is disabled or not */
 export let disabled = false
+/** @type {{label, url}[]} */
 export let buttons
+/** @type {string} the footer text */
 export let footerText = ''
 </script>