{"id":21022431,"url":"https://github.com/ncpa0/adwaveui","last_synced_at":"2025-10-13T07:15:19.729Z","repository":{"id":190195339,"uuid":"680591057","full_name":"ncpa0/ADWaveUI","owner":"ncpa0","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-12T07:26:17.000Z","size":1684,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-16T23:18:20.963Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ncpa0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-19T18:32:58.000Z","updated_at":"2025-01-01T14:14:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"bf8459ec-006f-4e61-a84a-6f1318b08ef3","html_url":"https://github.com/ncpa0/ADWaveUI","commit_stats":null,"previous_names":["ncpa0/gtk-web-components"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncpa0%2FADWaveUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncpa0%2FADWaveUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncpa0%2FADWaveUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncpa0%2FADWaveUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ncpa0","download_url":"https://codeload.github.com/ncpa0/ADWaveUI/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254304643,"owners_count":22048446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T11:11:58.095Z","updated_at":"2025-10-13T07:15:19.724Z","avatar_url":"https://github.com/ncpa0.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003ch1 align=\"center\"\u003eADWave UI\u003c/h1\u003e\n    \u003cp align=\"center\"\u003e\n        Web Components inspired by the Gtk's Adwaita theme.\n    \u003c/p\u003e\n    \u003cp align=\"center\"\u003e\n        \u003ca href=\"http://adwave.qzz.io/\"\u003e\n            Examples\n        \u003c/a\u003e\n    \u003c/p\u003e\n\u003c/p\u003e\n\n## Setup\n\nAdwaveUI requires the AdwaveCSS stylesheet to be present, as well as it's own small stylesheet.\n\nThe css files needed can be found in these package paths:\n\n- `adwavecss/dist/styles.css`\n- `adwaveui/dist/styles.css`\n\nThe adwave web components need to be imported in the JavaScript files:\n\n```ts\nimport \"adwaveui\";\n```\n\nalternatively each web comoponent can be importted individually:\n\n```ts\nimport \"adwaveui/dist/esm/components/input/input\";\nimport \"adwaveui/dist/esm/components/selector/selector\";\nimport \"adwaveui/dist/esm/components/slider/slider\";\nimport \"adwaveui/dist/esm/components/switch/switch\";\n```\n\nstyle files for each of these can also be found in their respective directories.\n\n\n## Components\n\n1. [Input](#input)\n2. [Selector](#selector)\n3. [Slider](#slider)\n4. [Switch](#switch)\n\n## Input\n\n```html\n\u003cadw-input\n    placeholder=\"Put in your name\"\n\u003e\u003c/adw-input\u003e\n```\n\n### Properties\n\n| Property                 | Description                                                                                                                                                     | Default |\n| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |\n| `disabled`               | If the input is disabled or not.                                                                                                                                | \"false\" |\n| `form`                   | The form the input belongs to.                                                                                                                                  |         |\n| `maxlength`              | The maximum length of the input.                                                                                                                                |         |\n| `minlength`              | The minimum length of the input.                                                                                                                                |         |\n| `name`                   | The name of the input, used when submitting a form.                                                                                                             |         |\n| `placeholder`            | Text displayed when the input is empty.                                                                                                                         |         |\n| `suggestions`            | List of suggested strings to display when the input is focused.                                                                                                 |         |\n| `suggestionsorientation` | Determines whether the list of suggestions appears above or below the input field. `up` or `down`.                                                              | \"down\"  |\n| `suggestionsshowall`     | Set to \"true\" to always display all the suggestions.                                                                                                            | \"false\" |\n| `fuzzy`                  | When set to \"true\" the suggestions will be filtered using a fuzzy search algorithm as the user types. By default filtering is done using a simple string match. |         |\n| `type`                   | The type of the input. (text, password, email, etc.)                                                                                                            | \"text\"  |\n| `value`                  | The current value of the input.                                                                                                                                 |         |\n\n## Selector\n\n```html\n\u003cadw-selector placeholder=\"Select option\"\u003e\n    \u003cadw-option value=\"1\" selected=\"true\"\u003e\n        Option 1\n    \u003c/adw-option\u003e\n    \u003cadw-option value=\"2\"\u003e\n        Option 2\n    \u003c/adw-option\u003e\n    \u003cadw-option value=\"3\"\u003e\n        Option 3\n    \u003c/adw-option\u003e\n\u003c/adw-selector\u003e\n```\n\n### Properties\n\n| Property      | Description                                                                                                                                      | Default |\n| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |\n| `disabled`    | If the selector is disabled or not.                                                                                                              | \"false\" |\n| `form`        | The form the selector belongs to.                                                                                                                |         |\n| `name`        | The name of the selector, used when submitting a form.                                                                                           |         |\n| `orientation` | Determines whether the list of options appears above or below the selector. `up` or `down`.                                                      | \"down\"  |\n| `reverseorder`| When set to true, the options will be displayed in reverse order.                                                                                | \"false\" |\n| `placeholder` | Text displayed when no option is selected.                                                                                                       |         |\n| `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\" |\n\n### adw-option properties\n\n| Property   | Description                       | Default |\n| ---------- | --------------------------------- | ------- |\n| `selected` | If the option is selected or not. | \"false\" |\n| `value`    | The value of the option.          |         |\n\n## Slider\n\n```html\n\u003cadw-slider\n    min=\"0\"\n    max=\"100\"\n    value=\"50\"\n\u003e\u003c/adw-slider\u003e\n```\n\n### Properties\n\n| Property    | Description                                                               | Default |\n| ----------- | ------------------------------------------------------------------------- | ------- |\n| `disabled`  | If the slider is disabled or not.                                         | \"false\" |\n| `form`      | The form the slider belongs to.                                           |         |\n| `max`       | The maximum value on the slider.                                          | 100     |\n| `min`       | The minimum value on the slider.                                          | 0       |\n| `name`      | The name of the slider, used when submitting a form.                      |         |\n| `precision` | The number of decimal places to round the value to.                       | 4       |\n| `step`      | The amount to increment or decrement the value by when moving the slider. | 1       |\n| `value`     | The current value of the slider.                                          |         |\n\n## Switch\n\n```html\n\u003cadw-switch\n    active=\"true\"\n\u003e\u003c/adw-switch\u003e\n```\n\n### Properties\n\n| Property   | Description                                          | Default |\n| ---------- | ---------------------------------------------------- | ------- |\n| `disabled` | If the switch is disabled or not.                    |         |\n| `form`     | The form the switch belongs to.                      |         |\n| `name`     | The name of the switch, used when submitting a form. |         |\n| `active`   | If the switch is active or not.                      | \"false\" |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fncpa0%2Fadwaveui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fncpa0%2Fadwaveui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fncpa0%2Fadwaveui/lists"}