{"id":19760072,"url":"https://github.com/singleware/ui-alert","last_synced_at":"2025-10-14T08:12:14.047Z","repository":{"id":33120165,"uuid":"151421119","full_name":"Singleware/ui-alert","owner":"Singleware","description":"UI alert package.","archived":false,"fork":false,"pushed_at":"2023-03-03T04:45:13.000Z","size":191,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-11T12:25:48.055Z","etag":null,"topics":["alert","browser","custom-element","javascript","jsx","shadow-dom","singleware","typescript","ui-alert"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/Singleware.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}},"created_at":"2018-10-03T13:56:13.000Z","updated_at":"2020-08-10T15:35:25.000Z","dependencies_parsed_at":"2023-01-14T23:30:27.391Z","dependency_job_id":null,"html_url":"https://github.com/Singleware/ui-alert","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Singleware%2Fui-alert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Singleware%2Fui-alert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Singleware%2Fui-alert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Singleware%2Fui-alert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Singleware","download_url":"https://codeload.github.com/Singleware/ui-alert/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241090520,"owners_count":19907970,"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":["alert","browser","custom-element","javascript","jsx","shadow-dom","singleware","typescript","ui-alert"],"created_at":"2024-11-12T03:35:01.604Z","updated_at":"2025-10-14T08:12:08.997Z","avatar_url":"https://github.com/Singleware.png","language":"JavaScript","readme":"# UI-Alert\n\nCustom HTML element used to wrap a simple alert, composed by the slots: icon, message and hide.\n[See demo](//singleware.github.io/ui-alert/)\n\n## Usage\n\nInstantiate the component that initializes the custom element.\n\n```tsx\nimport * as JSX from '@singleware/jsx';\nimport * as Alert from '@singleware/ui-alert';\n\nconst component = (\n  \u003cAlert.Component concealable open\u003e\n    \u003cspan slot=\"icon\"\u003e👋\u003c/span\u003e\n    \u003cspan slot=\"message\"\u003eThis is an alert example initialized by the component wrapper.\u003c/span\u003e\n    \u003cspan slot=\"hide\" /\u003e\n  \u003c/Alert.Component\u003e\n) as Alert.Element;\n```\n\nShow and Hide programmatically.\n\n```tsx\ncomponent.show();\ncomponent.hide();\n```\n\nBe informed about the hide action.\n\n```tsx\ncomponent.addEventListener('hide', (event: Event) =\u003e console.log(`Yes! It's hidden now.`));\n```\n\n## Help\n\n### Attributes\n\n| Name        | Description                                                                                |\n| ----------- | ------------------------------------------------------------------------------------------ |\n| concealable | Assigned when the alert can be hidden by the user (requires an element in the `hide` slot) |\n| open        | Automatically assigned when the alert is shown and removed when hidden                     |\n\n### Properties\n\n| Name        | Type   | Description                                                         |\n| ----------- | ------ | ------------------------------------------------------------------- |\n| icon        | `any`  | Get and set the alert icon (requires an element in the `icon` slot) |\n| message     | `any`  | Get and set the alert message                                       |\n| concealable | `bool` | Get and set the alert `conceal` state                               |\n| open        | `bool` | Get and set the `open` state                                        |\n\n### Methods\n\n| Name | Description                                         |\n| ---- | --------------------------------------------------- |\n| show | Shows the alert setting the `open` state as `true`  |\n| hide | Hides the alert setting the `open` state as `false` |\n\n### Slots\n\n| Name    | Description                                             |\n| ------- | ------------------------------------------------------- |\n| icon    | Element to shows the alert icon (can be omitted)        |\n| message | Element to shows the alert message                      |\n| hide    | Element to shows the alert hide button (can be omitted) |\n\n### Events\n\n| Name | Description                              |\n| ---- | ---------------------------------------- |\n| hide | Dispatched when the alert becomes hidden |\n\n### Styles\n\n| Name                              | Description                                           |\n| --------------------------------- | ----------------------------------------------------- |\n| --swe-alert-text-color            | Determines the alert text color                       |\n| --swe-alert-background-color      | Determines the alert background color                 |\n| --swe-alert-border-radius         | Determines the alert border radius                    |\n| --swe-alert-border-size           | Determines the alert border size                      |\n| --swe-alert-border-color          | Determines the alert border color                     |\n| --swe-alert-icon-margin-top       | Determines the top margin of the alert icon           |\n| --swe-alert-icon-margin-right     | Determines the right margin of the alert icon         |\n| --swe-alert-icon-margin-bottom    | Determines the bottom margin of the alert icon        |\n| --swe-alert-icon-margin-left      | Determines the left margin of the alert icon          |\n| --swe-alert-icon-margin           | Determines all margins of the alert icon              |\n| --swe-alert-message-margin-top    | Determines the top margin of the alert message        |\n| --swe-alert-message-margin-right  | Determines the right margin of the alert message      |\n| --swe-alert-message-margin-bottom | Determines the bottom margin of the alert message     |\n| --swe-alert-message-margin-left   | Determines the left margin of the alert message       |\n| --swe-alert-message-margin        | Determines all margins of the alert message           |\n| --swe-alert-hide-margin-top       | Determines the top margin of the alert hide button    |\n| --swe-alert-hide-margin-right     | Determines the right margin of the alert hide button  |\n| --swe-alert-hide-margin-bottom    | Determines the bottom margin of the alert hide button |\n| --swe-alert-hide-margin-left      | Determines the left margin of the alert hide button   |\n| --swe-alert-hide-margin           | Determines all margins of the alert hide button       |\n| --swe-alert-hide-cross-color      | Determines the cross color of the alert hide button   |\n| --swe-alert-hide-cross-size       | Determines the cross size of the alert hide button    |\n\n\u003e These variables above are useful to customize the closed shadow DOM.\n\n## Install\n\nUsing npm:\n\n```sh\nnpm i @singleware/ui-alert\n```\n\n## License\n\n[MIT \u0026copy; Silas B. Domingos](https://balmante.eti.br)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsingleware%2Fui-alert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsingleware%2Fui-alert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsingleware%2Fui-alert/lists"}