Interactive Web Components inspired by the Gtk Adwaita theme.
npm install adwaveui
Web Components inspired by the Gtk's Adwaita theme.
AdwaveUI requires the AdwaveCSS stylesheet to be present.
The css files needed can be found in this package path: adwavecss/dist/styles.css
The adwave web components need to be imported in the JavaScript files:
``ts`
import "adwaveui";
alternatively each web comoponent can be importted individually:
`ts`
import "adwaveui/dist/esm/components/input/input";
import "adwaveui/dist/esm/components/selector/selector";
import "adwaveui/dist/esm/components/slider/slider";
import "adwaveui/dist/esm/components/switch/switch";
import "adwaveui/dist/esm/components/calendar/calendar";
style files for each of these can also be found in their respective directories.
1. Input
2. Selector
3. Slider
4. Switch
5. Calendar
`html`
| Property | Description | Default |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| disabled | If the input is disabled or not. | "false" |form
| | The form the input belongs to. | |maxlength
| | The maximum length of the input. | |minlength
| | The minimum length of the input. | |name
| | The name of the input, used when submitting a form. | |placeholder
| | Text displayed when the input is empty. | |suggestions
| | List of suggested strings to display when the input is focused. | |suggestionsorientation
| | Determines whether the list of suggestions appears above or below the input field. up or down. | "down" |suggestionsshowall
| | Set to "true" to always display all the suggestions. | "false" |fuzzy
| | When set to "true" the suggestions will be filtered using a fuzzy search algorithm. By default filtering is done using a simple string match. | "false" |type
| | The type of the input. (text, password, email, etc.) | "text" |value
| | The current value of the input. | |defaultvalue
| | The default value, if the value is empty on mount, it will be set to this value. | |
`html`
| Property | Description | Default |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------ | --------------- |
| disabled | If the selector is disabled or not. | "false" |form
| | The form the selector belongs to. | |name
| | The name of the selector, used when submitting a form. | |orientation
| | Determines whether the list of options appears above or below the selector. up or down. | "down" |reverseorder
| | When set to true, the options will be displayed in reverse order. | "false" |placeholder
| | Text displayed when no option is selected. | |scrollintoview
| | If the selector were to open outside the viewport, scroll the whole viewport into view so the select option is visible. | "false" |value
| | The current selected value, must match one of the passed options. | |defaultvalue
| | The default value, if the value is empty on mount, it will be set to this value. | |allowunselect
| | Show an option on top that can be used to deselect (set the current value to null.) | |unselectlabel
| | The label of the unselect option button, if not provided, placeholder will be used. Only applicable when allowunselect is enabled. | "Select option" |
| Property | Description | Default |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |
| selected | If the option is selected or not. | "false" |value
| | The value of the option. | |inert
| | When set to true, this option will appear as non-selectable, this can be used to create separators or headers above or in between other options. | "false" |
`html`
| Property | Description | Default |
| -------------- | ---------------------------------------------------------------------------------- | ------- |
| disabled | If the slider is disabled or not. | "false" |form
| | The form the slider belongs to. | |max
| | The maximum value on the slider. | 100 |min
| | The minimum value on the slider. | 0 |name
| | The name of the slider, used when submitting a form. | |precision
| | The number of decimal places to round the value to. | 4 |step
| | The amount to increment or decrement the value by when moving the slider. | 1 |value
| | The current value of the slider. | |defaultvalue
| | The default value, if the value is empty on mount, it will be set to this value. | |
`html`
| Property | Description | Default |
| ---------- | ---------------------------------------------------- | ------- |
| disabled | If the switch is disabled or not. | |form
| | The form the switch belongs to. | |name
| | The name of the switch, used when submitting a form. | |active
| | If the switch is active or not. | "false" |
`html`
| Property | Description | Default |
| -------- | ----------------------------------------------------------------- | ------------------ |
| form | The form the date input belongs to. | |name
| | The name of the date input, used when submitting a form. | |locale
| | The locale that will be used to format the dates. | navigator.language |value` | The selected date. Must be in a format acceptable by Date.parse() | current date |
|