{"id":19760109,"url":"https://github.com/singleware/ui-popover","last_synced_at":"2025-10-04T03:13:24.233Z","repository":{"id":35014217,"uuid":"196592150","full_name":"Singleware/ui-popover","owner":"Singleware","description":"UI popover package.","archived":false,"fork":false,"pushed_at":"2023-03-03T04:10:55.000Z","size":134,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-03-14T19:06:03.011Z","etag":null,"topics":["browser","custom-element","javascript","jsx","popover","shadow-dom","typescript","ui-popover"],"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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-12T14:21:00.000Z","updated_at":"2019-07-29T19:19:35.000Z","dependencies_parsed_at":"2024-11-12T03:45:43.887Z","dependency_job_id":null,"html_url":"https://github.com/Singleware/ui-popover","commit_stats":{"total_commits":2,"total_committers":1,"mean_commits":2.0,"dds":0.0,"last_synced_commit":"3e645af34e9b5ac00117c953a1fe31c41f5ad27e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Singleware%2Fui-popover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Singleware%2Fui-popover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Singleware%2Fui-popover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Singleware%2Fui-popover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Singleware","download_url":"https://codeload.github.com/Singleware/ui-popover/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241090526,"owners_count":19907971,"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":["browser","custom-element","javascript","jsx","popover","shadow-dom","typescript","ui-popover"],"created_at":"2024-11-12T03:35:20.487Z","updated_at":"2025-10-04T03:13:19.189Z","avatar_url":"https://github.com/Singleware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# UI-Popover\n\nCustom HTML element used to wrap a simple popover, composed by the slots: input and content.\n[See demo](//singleware.github.io/ui-popover/)\n\n## Usage\n\nInstantiate the component that initializes the custom element.\n\n```tsx\nimport * as JSX from '@singleware/jsx';\nimport * as Popover from '@singleware/ui-popover';\n\nconst component = (\n  \u003cPopover.Component dismiss\u003e\n    \u003cbutton slot=\"input\"\u003eInput\u003c/button\u003e\n    \u003cdiv slot=\"content\"\u003eContent\u003c/div\u003e\n  \u003c/Popover.Component\u003e\n) as Popover.Element;\n```\n\nShow, Hide and Toggle programmatically.\n\n```tsx\ncomponent.show();\ncomponent.hide();\ncomponent.toggle();\n```\n\nBe informed about the component actions.\n\n```tsx\ncomponent.addEventListener('show', (event: Event) =\u003e console.log(`Yes! It's visible now.`));\ncomponent.addEventListener('hide', (event: Event) =\u003e console.log(`No! It's hidden now.`));\n```\n\n## Help\n\n### Attributes\n\n| Name    | Description                                                              |\n| ------- | ------------------------------------------------------------------------ |\n| dismiss | Assigned when the content can be hidden by clicking anywhere             |\n| open    | Automatically assigned when the content is shown and removed when hidden |\n\n### Properties\n\n| Name         | Type     | Description                                                                       |\n| ------------ | -------- | --------------------------------------------------------------------------------- |\n| empty        | `bool`   | Get the current `empty` state from the `input` slot element                       |\n| name         | `string` | Get and set the property `name` from the `input` slot element                     |\n| value        | `any`    | Get and set the property `value` from the `input` slot element                    |\n| defaultValue | `any`    | Get and set the property `defaultValue` from the `input` slot element             |\n| required     | `bool`   | Get and set the `required` state from the `input` slot element                    |\n| readOnly     | `bool`   | Get and set the `readOnly` state from the `input` slot element                    |\n| disabled     | `bool`   | Get and set the `disabled` state from the `input` slot element                    |\n| dismiss      | `bool`   | Get and set the `dismiss` state                                                   |\n| open         | `bool`   | Get the current `open` state                                                      |\n| placement    | -        | Get and set the element `placement` state. Use `top`, `right`, `bottom` or `left` |\n| alignment    | -        | Get and set the element `alignment` state. Use `start`, `middle` or `end`         |\n\n### Methods\n\n| Name              | Description                                         |\n| ----------------- | --------------------------------------------------- |\n| focus             | Moves the current focus to the `input` slot element |\n| reset             | Reset the current value in the `input` slot element |\n| show              | Shows the content element                           |\n| hide              | Hides the content element                           |\n| toggle            | Toggles the content element                         |\n| checkValidity     | Get the validity from the `input` slot element      |\n| setCustomValidity | Set a custom validity in the `input` slot element   |\n\n### Slots\n\n| Name    | Description                                               |\n| ------- | --------------------------------------------------------- |\n| input   | Element to receive the popover `show` and `hide` actions  |\n| content | Element to be displayed while the `open` action is active |\n\n### Events\n\n| Name | Description                               |\n| ---- | ----------------------------------------- |\n| show | Dispatched when the alert becomes visible |\n| hide | Dispatched when the alert becomes hidden  |\n\n### Styles\n\n| Name                                | Description                          |\n| ----------------------------------- | ------------------------------------ |\n| --swe-popover-content-border-radius | Determines the content border radius |\n| --swe-popover-content-border-size   | Determines the content border size   |\n| --swe-popover-content-border-color  | Determines the content border color  |\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-popover\n```\n\n## License\n\n[MIT \u0026copy; Silas B. Domingos](https://balmante.eti.br)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsingleware%2Fui-popover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsingleware%2Fui-popover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsingleware%2Fui-popover/lists"}