fix #51: expose bind:element for all

CHANGELOG.md

@@ -5,7 +5,8 @@ Changelog
 ## v8.0.0 *(2023-07-?)*
 - **New:** `Label` component.
 - **New icons:** `sun` and `moon` for the dark-theme switchers.
-- **Improved:** `info`, `error` and `label` attributes are now supported on other inputs (`Autocomplete`, `InputDate`, `Select`, `ButtonToggle`, and `Toggle`).
+- **Improvement:** `info`, `error` and `label` attributes are now supported on other inputs (`Autocomplete`, `InputDate`, `Select`, `ButtonToggle`, and `Toggle`).
+- **Improvement:** all components now expose `element` on the main html element, and `inputElement` on the input, if there is one (and only one). The exception is `NotificationCenter` and `MessageBox`, due to it's implementation.
 - Added `title` attribute to `ButtonToggle`.
 - Fixed `selectable=false` not working on `Table`.
 
@@ -16,7 +17,7 @@ Changelog
 - `Select` - HTML structure changed: `.select-wrap select` --> `.select .input-inner .input-row select`
 - `Table` - CSS classes changed from `.table-wrapper table.table` --> `.table table`
 - `Toggle` - HTML structure changed from `.toggle .toggle-inner .toggle-scroller input` --> `.toggle .toggle-inner .toggle-label .toggle-scroller input`
-
+- These components previously exposed `_this` on the main html element, which is now renamed to `element`: `Button`, `Checkbox`, `InputMath`, `PushButton`, `Table`
 
 ----
 

docs-src/components/autocomplete/Autocomplete.svelte

@@ -88,6 +88,8 @@ const apiProps = [
 	{ name: 'showOnFocus', type: ['true', 'false'], default: 'false', description: 'If <i>true</i> - the popup will be automatically open when the autocomplete gets focus (as opposed to, when the user starts typing).' },
 	{ name: 'title', type: 'string', description: 'Assign title to the underlying input.' },
 	{ name: 'value', type: ['string', 'number'], description: 'Initial value of the autocomplete.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
+	{ name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' },
 	{ name: 'on:change', type: 'function', description: 'Triggered when the value changes.' },
 	{ name: 'on:keydown', type: 'function', description: 'Triggered when a key is down.' },
 ];

docs-src/components/button-group/ButtonGroup.svelte

@@ -90,6 +90,7 @@ import { CodeExample } from '../../code-example';
 const apiProps = [
 	{ name: 'class', type: 'string', description: 'Additional css class name to be added to the component.' },
 	{ name: 'round', description: 'Makes the buttons, on both sides of the group, round.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
 ];
 
 

docs-src/components/button-toggle/ButtonToggle.svelte

@@ -71,6 +71,8 @@ const apiProps = [
 	{ name: 'round', description: 'Makes the buttons, on both sides of the group, round.' },
 	{ name: 'title', type: 'string', description: 'Assign title to the component' },
 	{ name: 'value', type: ['string', 'number'], description: 'Assign initial value to the underlying radio group' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
+	{ name: 'on:change', type: 'function', description: 'Triggered when the value changes.' },
 ];
 
 const exampleHtml = `

docs-src/components/button/Button.svelte

@@ -47,6 +47,7 @@ const apiProps = [
 	{ name: 'text', description: 'Button style: text' },
 	{ name: 'title', type: 'string', description: 'Assign title to the underlying button' },
 	{ name: 'warning', description: 'Button type: warning' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
 	{ name: 'on:click', type: 'function', description: 'Triggered when the button is clicked.' }
 ];
 

docs-src/components/checkbox/Checkbox.svelte

@@ -49,6 +49,9 @@ const apiProps = [
 	{ name: 'label', type: 'string', description: 'Label for the input.' },
 	{ name: 'name', type: 'string', description: 'Assign title to the underlying input.' },
 	{ name: 'title', type: 'string', description: 'Assign title to the component.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
+	{ name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' },
+	{ name: 'on:change', type: 'function', description: 'Triggered when the value changes.' },
 ];
 
 const exampleHtml = `

docs-src/components/dialog/Dialog.svelte

@@ -64,6 +64,8 @@ const apiProps = [
 	{ name: 'opened', type: ['true' , 'false'], default: 'false', description: 'Set dialog\'s open state.' },
 	{ name: 'skipFirstFocus', type: ['true', 'false'], default: 'false', description: 'If <i>true</i> - the dialog will not set focus to the first focusable element in the dialog.<br>This is useful if another element in the dialog should be focused first.' },
 	{ name: 'title', type: 'string', description: 'Set title for the dialog.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
+	{ name: 'bind:this', type: 'object', description: 'Exposes the component instance.' },
 	{ name: 'on:close', type: 'function', description: 'Triggered after the dialog is closed.' },
 	{ name: 'on:open', type: 'function', description: 'Triggered after the dialog is opened.' },
 ];

docs-src/components/drawer/Drawer.svelte

@@ -30,6 +30,8 @@ import { CodeExample } from '../../code-example';
 const apiProps = [
 	{ name: 'class', type: 'string', description: 'Additional css class name to be added to the component container.' },
 	{ name: 'title', type: 'string', description: 'Set title for the drawer.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
+	{ name: 'bind:this', type: 'object', description: 'Exposes the component instance.' },
 	{ name: 'on:close', type: 'function', description: 'Triggered after the drawer is closed.' },
 	{ name: 'on:open', type: 'function', description: 'Triggered after the drawer is opened.' },
 ];

docs-src/components/info-bar/InfoBar.svelte

@@ -32,6 +32,7 @@ const apiProps = [
 	{ name: 'id', type: 'string', description: 'Assign ID to the message paragraph.' },
 	{ name: 'msg', type: 'string', description: 'Message to display. It can use simple html for formatting (message is wrapped in <em>&lt;p&gt;</em> tag).' },
 	{ name: 'type', type: ['info', 'warning', 'error', 'success'], default: 'info', description: 'Type of the info-bar. This property only exists on the <em>&lt;InfoBar&gt;</em> component, not on the shortcut-components.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
 ];
 
 

docs-src/components/input-date/InputDate.svelte

@@ -64,6 +64,8 @@ const apiProps = [
 	{ name: 'showOnFocus', type: ['true', 'false'], default: 'false', description: 'If <i>true</i> - the datepicker will be automatically open when the input gets focus (normally opens on click).' },
 	{ name: 'title', type: 'string', description: 'Assign title to the underlying input.' },
 	{ name: 'value', type: 'string', description: 'Initial value of the input.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
+	{ name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' },
 	{ name: 'on:change', type: 'function', description: 'Triggered when the value changes.' },
 	{ name: 'on:keydown', type: 'function', description: 'Triggered when a key is down.' },
 ];

docs-src/components/input-math/InputMath.svelte

@@ -37,6 +37,8 @@ const apiProps = [
 	{ name: 'required', description: 'Mark the input as <i>aria-required</i>.' },
 	{ name: 'title', type: 'string', description: 'Assign title to the underlying input.' },
 	{ name: 'value', type: ['string', 'number'], description: 'Initial value of the input.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
+	{ name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' },
 	{ name: 'on:change', type: 'function', description: 'Triggered when the value changes.' },
 	{ name: 'on:keydown', type: 'function', description: 'Triggered when a key is down.' },
 ];

docs-src/components/input-number/InputNumber.svelte

@@ -41,6 +41,8 @@ const apiProps = [
 	{ name: 'separator', type: 'string', default: '.', description: 'Custom decimal separator.' },
 	{ name: 'title', type: 'string', description: 'Assign title to the underlying input.' },
 	{ name: 'value', type: ['string', 'number'], description: 'Initial value of the input.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
+	{ name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' },
 	{ name: 'on:change', type: 'function', description: 'Triggered after the value changes and the focus leaves the input.' },
 	{ name: 'on:input', type: 'function', description: 'Triggered as soon as the input value changes.' },
 ];

docs-src/components/input-password/InputPassword.svelte

@@ -49,6 +49,8 @@ const apiProps = [
 	{ name: 'strength', description: 'Provide the password strength UI (zxcvbn lib must be loaded).' },
 	{ name: 'title', type: 'string', description: 'Assign title to the underlying input.' },
 	{ name: 'value', type: ['string', 'number'], description: 'Initial value of the input.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
+	{ name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' },
 	{ name: 'on:change', type: 'function', description: 'Triggered when the value changes.' },
 	{ name: 'on:keydown', type: 'function', description: 'Triggered when a key is down.' },
 ];

docs-src/components/input-text/InputText.svelte

@@ -56,6 +56,8 @@ const apiProps = [
 	{ name: 'required', description: 'Mark the input as <i>aria-required</i>. The actual validation must be done in the consumer.' },
 	{ name: 'title', type: 'string', description: 'Assign title to the underlying input.' },
 	{ name: 'value', type: ['string', 'number'], description: 'Initial value of the input.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
+	{ name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' },
 	{ name: 'on:change', type: 'function', description: 'Triggered after the value changes and the focus leaves the input.' },
 	{ name: 'on:input', type: 'function', description: 'Triggered as soon as the input value changes.' },
 ];

docs-src/components/menu/Menu.svelte

@@ -112,6 +112,7 @@ const apiProps = [
 	{ name: 'elevate', type: ['true', 'false'], default: 'false', description: 'If <i>true</i> - the menu will be rendered into the <i>body</i>, to ensure it\'s not hidden under some elements (see example above).' },
 	{ name: 'targetSelector', type: 'string', required: true, description: 'This is only required when menu type is <em>context</em>.<br>It provides a selector to an element, in which the menu will appear (on mouse right-click).' },
 	{ name: 'type', type: 'context', description: 'If type is set to <em>context</em> the menu will behave as context-menu.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
 	{ name: 'on:close', type: 'function', description: 'Triggered after the menu is closed.' },
 	{ name: 'on:open', type: 'function', description: 'Triggered after the menu is opened.' },
 ];
@@ -132,6 +133,7 @@ const itemApiProps = [
 	{ name: 'success', description: 'Button type: success' },
 	{ name: 'title', type: 'string', description: 'Assign title to the underlying button' },
 	{ name: 'warning', description: 'Button type: warning' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
 	{ name: 'on:click', type: 'function', description: 'Triggered when the menu item was clicked.<br>The event handler function receives 1 argument - the click event.<br>By calling <em>event.preventDefault();</em> it is possible to prevent menu from auto closing when the item was clicked.<br><em>event.detail</em> will contain a <em>button</em> and <em>target</em> properties, that are references to the corresponding html elements.<br>It is possible to pass the data using <em>data-</em> attributes on the <em>target</em> element and on the <em>MenuItem</em>.' },
 ];
 

docs-src/components/panel/Panel.svelte

@@ -51,6 +51,7 @@ const apiProps = [
 	{ name: 'open', description: 'Panel initial open state.' },
 	{ name: 'round', description: 'Adds rounded corners to the panel.' },
 	{ name: 'title', type: 'string', description: 'Panel title.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
 	{ name: 'on:close', type: 'function', description: 'Triggered after the panel is closed.' },
 	{ name: 'on:open', type: 'function', description: 'Triggered after the panel is opened.' },
 ];

docs-src/components/push-button/PushButton.svelte

@@ -100,6 +100,7 @@ const apiProps = [
 	{ name: 'success', description: 'Button type: success' },
 	{ name: 'title', type: 'string', description: 'Assign title to the underlying button' },
 	{ name: 'warning', description: 'Button type: warning' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
 	{ name: 'on:click', type: 'function', description: 'Triggered when the button is clicked.' }
 ];
 

docs-src/components/radio/Radio.svelte

@@ -45,6 +45,7 @@ const apiProps = [
 	{ name: 'label', type: 'string', description: 'Label for the whole component.' },
 	{ name: 'title', type: 'string', description: 'Assign title to whole component.' },
 	{ name: 'value', type: ['string', 'number'], description: 'Value of the component (=value of the checked item).' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
 	{ name: 'on:change', type: 'function', description: 'Triggered when the value changes.' },
 ];
 

docs-src/components/select/Select.svelte

@@ -54,6 +54,8 @@ const apiProps = [
 	{ name: 'required', description: 'Mark the select as <i>aria-required</i>.' },
 	{ name: 'title', type: 'string', description: 'Assign title to the underlying select.' },
 	{ name: 'value', type: ['string', 'number'], description: 'Initial value of the select.<br>If the list is an array of strings - it would match the item,<br>if the list is an array of objects - it should match the id of the item. ' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
+	{ name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying select.' },
 	{ name: 'on:change', type: 'function', description: 'Triggered when the value changes.' },
 ];
 

docs-src/components/splitter/Splitter.svelte

@@ -33,6 +33,7 @@ import { CodeExample } from '../../code-example';
 
 const apiProps = [
 	{ name: 'class', type: 'string', description: 'Additional css class name to be added to the component.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
 	{ name: 'on:change', type: 'function', description: 'Triggered during the resizing (mousemove).' },
 	{ name: 'on:changed', type: 'function', description: 'Triggered when resizing finished (mouseup).' },
 ];

docs-src/components/table/Table.svelte

@@ -125,6 +125,7 @@ const apiProps = [
 	{ name: 'scrollContainer', type: ['string','Element'], default: 'table wrapper', description: 'Selector or HTML Element to the scroll container. If table wrapper\'s height is not set to 100% of the container, and is taller than the container - the container will have to be scrollable, and in this case it must be provided here.' },
 	{ name: 'scrollCorrectionOffset', type: 'number', default: '0', description: 'If an external <em>scrollContainer</em> is used - it is possible that it will have non-zero padding set, thus the table wrapper will be offset from the beginning of the container. This offset should be set here, so that the sticky headers work correctly.' },
 	{ name: 'selectable', type: ['true', 'false'], description: 'Makes table rows selectable with mouse and adds keyboard navigation.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
 	{ name: 'on:click', type: 'function', description: 'Triggered after a row has been clicked.' },
 	{ name: 'on:dblclick', type: 'function', description: 'Triggered after a row has been double-clicked.' },
 	{ name: 'on:keydown', type: 'function', description: 'Triggered after key has been pressed.' },

docs-src/components/text-fit/TextFit.svelte

@@ -22,6 +22,7 @@ import { CodeExample } from '../../code-example';
 const apiProps = [
 	{ name: 'class', type: 'string', description: 'Additional css class name to be added to the component.' },
 	{ name: 'margin', type: 'number', default: '0', description: 'Margin around the text (in px).' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
 ];
 
 const exampleHtml = `

docs-src/components/textarea/Textarea.svelte

@@ -48,6 +48,8 @@ const apiProps = [
 	{ name: 'required', description: 'Mark the textarea as <i>aria-required</i>.' },
 	{ name: 'title', type: 'string', description: 'Assign title to the underlying textarea.' },
 	{ name: 'value', type: 'string', description: 'Initial value of the textarea.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
+	{ name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' },
 	{ name: 'on:change', type: 'function', description: 'Triggered when the value changes.' },
 	{ name: 'on:input', type: 'function', description: 'Triggered when textarea value is edited.' },
 ];

docs-src/components/toggle/Toggle.svelte

@@ -52,6 +52,8 @@ const apiProps = [
 	{ name: 'required', description: 'Mark the input as <i>aria-required</i>.' },
 	{ name: 'title', type: 'string', description: 'Assign title to the underlying input.' },
 	{ name: 'value', type: ['true', 'false'], description: 'Initial value of the toggle.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
+	{ name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' },
 	{ name: 'on:change', type: 'function', description: 'Triggered when the value changes.' },
 ];
 

docs-src/components/tooltip/Tooltip.svelte

@@ -86,6 +86,7 @@ const apiProps = [
 	{ name: 'success', description: 'Tooltip type: success' },
 	{ name: 'target', required: true, type: 'string', description: 'ID of the target element.' },
 	{ name: 'warning', description: 'Tooltip type: warning' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
 ];
 
 

docs-src/components/tree/Tree.svelte

@@ -16,6 +16,7 @@ import { CodeExample } from '../../code-example';
 const apiProps = [
 	{ name: 'class', type: 'string', description: 'Additional css class name to be added to the component.' },
 	{ name: 'title', type: 'string', description: 'Title of the component.' },
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
 	{ name: 'on:select', type: 'function', description: 'Triggered after an item was selected.' },
 ];