{"id":24765692,"url":"https://github.com/jsmithdev/extenda-modal","last_synced_at":"2025-06-29T18:04:16.078Z","repository":{"id":189453356,"uuid":"680700814","full_name":"jsmithdev/extenda-modal","owner":"jsmithdev","description":"Downstream of https://github.com/jsmithdev/modal","archived":false,"fork":false,"pushed_at":"2024-01-24T00:16:04.000Z","size":35,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-23T17:22:45.569Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsmithdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-08-20T05:38:26.000Z","updated_at":"2023-08-20T11:10:45.000Z","dependencies_parsed_at":"2024-01-24T01:26:45.600Z","dependency_job_id":"5f928fdb-6e2f-4529-883a-3356629e07da","html_url":"https://github.com/jsmithdev/extenda-modal","commit_stats":null,"previous_names":["jsmithdev/extenda-modal"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jsmithdev/extenda-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsmithdev%2Fextenda-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsmithdev%2Fextenda-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsmithdev%2Fextenda-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsmithdev%2Fextenda-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsmithdev","download_url":"https://codeload.github.com/jsmithdev/extenda-modal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsmithdev%2Fextenda-modal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262642958,"owners_count":23341817,"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":"2025-01-28T23:15:24.002Z","updated_at":"2025-06-29T18:04:16.037Z","avatar_url":"https://github.com/jsmithdev.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# extenda-modal\n\n## An LWC modal with easy to use sizes, attributes and slots 🎰\n\n## API\n\n### Functions\n\n| Syntax      | Description | Usage     |\n| :---        |    :---   |   :--- |\n| open    | open model from outside       | `this.template.querySelector('c-modal').open()`       |\n| close   | close model from outside      | `this.template.querySelector('c-modal').close()`      |\n| isOpen  | check modal from outside      | `this.template.querySelector('c-modal').isOpen()`     |\n\n### Attributes\n\n| Syntax      | Description | Usage     |\n| :---        |    :---   |   :--- |\n| header    | header / title for modal       | `header=\"My Title\"`       |\n| trigger   | optional text that triggers / opens modal     | `trigger=\"Click Me\"`  |\n| variant  | size of modal (large, medium, small)  | `variant=\"large\"` |\n| is-active  | Auto open modal on connectCallback | `is-active` |\n| empty | only use the view slot; No lightning card, header, footer, etc | `empty` |\n\n### Slots\n\n| Syntax      | Description | Usage     |\n| :---        |    :---   |   :--- |\n| header    | header content  | `\u003cspan slot=\"header\"\u003e { DOM to render } \u003c/span\u003e`      |\n| content  | content for the body of the modal  | `\u003cspan slot=\"content\"\u003e { DOM to render } \u003c/span\u003e` |\n| footer  | footer content  | `\u003cspan slot=\"footer\"\u003e { DOM to render } \u003c/span\u003e` |\n| footer-center  | footer content to be centered | `\u003cspan slot=\"footer-center\"\u003e { DOM to render } \u003c/span\u003e` |\n| trigger   | optionally trigger modal from DOM content  |`\u003cspan slot=\"trigger\"\u003e { DOM to render } \u003c/span\u003e` |\n| view   | For use with the `empty` attribute  |`\u003cspan slot=\"view\"\u003e { DOM to render } \u003c/span\u003e` |\n\n## Usage\n\nTwo example implementations are [here](force-app/main/default/lwc/exampleModal/exampleModal.html) -- works well with lwc local dev server\n\n📌 Can use any combo of slots and attributes (slots override attributes if both are given)\n\n### Create a simple modal using attributes and the `content` slot for content:\n\n```html\n\n\u003cc-modal\n    header=\"This is a header\"\n    trigger=\"Text to trigger modal\"\u003e\n\n    \u003cspan slot=\"content\"\u003e\n\n        \u003ctemplate for:item=\"thing\" for:each={data.things} \u003e\n            {thing.avatar} {thing.name} \u003cbr key={thing.name} /\u003e\n        \u003c/template\u003e\n\n    \u003c/span\u003e\n\n\u003c/c-modal\u003e\n```\n\n\u003c!-- \u003cimg src=\"https://i.imgur.com/irT1Rfm.png\" width=\"500px\" /\u003e --\u003e\n\n### Or highly customize by using slots:\n\n```html\n\n\u003cc-modal variant=\"large\"\u003e\n\n    \u003cspan slot=\"trigger\"\u003e\n        \u003clightning-pill\n            label=\"Open modal using the trigger slot instead of the trigger attribute to pass in DOM instead of text\"\n        \u003e\u003c/lightning-pill\u003e\n    \u003c/span\u003e\n\n    \u003cspan slot=\"header\"\u003e\n        \u003ca href=\"lwc.land\" target=\"_blank\"\u003e\n          This is a custom header using the header slot instead of the header attribute to pass in DOM instead of text\n        \u003c/a\u003e\n    \u003c/span\u003e\n\n    \u003cspan slot=\"content\"\u003e\n\n        \u003ctemplate for:item=\"thing\" for:each={data.things} \u003e\n            {thing.avatar} {thing.name} \u003cbr key={thing.name} /\u003e\n        \u003c/template\u003e\n\n    \u003c/span\u003e\n\n    \u003cspan slot=\"footer\"\u003e\n\n        \u003clightning-button \n            label=\"Can pass in DOM like buttons to add the the modal's footer\"\n            variant=\"brand\"\n            onclick={demo_click}\u003e\n        \u003c/lightning-button\u003e\n\n    \u003c/span\u003e\n\n\u003c/c-modal\u003e\n```\n\n\u003c!-- img src=\"https://i.imgur.com/BXiNM4H.png\" width=\"500px\" / --\u003e\n\n## Deploy\n\n```bash\nsfdx force:source:deploy -p force-app/main/default/lwc/modal\n```\n\n📌  Above deploys to the default org set; Add `-u user@domain.com` or `-u alias` to deploy else where\n\nResults should more or less mirror below\n\n```bash\njamie@the-gene:~/repo/modal$ sfdx force:source:deploy -p force-app/main/default/lwc/modal -u some-org\n\nDeploy ID: 0Af1700002qWfDOCA0\nDEPLOY PROGRESS | ████████████████████████████████████████ | 1/1 Components\n\n=== Deployed Source\n\n FULL NAME TYPE                     PROJECT PATH                                       \n ───────── ──────────────────────── ────────────────────────────────────────────────── \n modal     LightningComponentBundle force-app/main/default/lwc/modal/modal.css         \n modal     LightningComponentBundle force-app/main/default/lwc/modal/modal.html        \n modal     LightningComponentBundle force-app/main/default/lwc/modal/modal.js          \n modal     LightningComponentBundle force-app/main/default/lwc/modal/modal.js-meta.xml \n\nDeploy Succeeded.\n\n```\n\n### Deploy Singular\n\n```bash\nsfdx force:source:deploy -p force-app/main/default/lwc/modal -u some-org\n```\n\n---\n\nwritten with 💙 by Jamie Smith\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsmithdev%2Fextenda-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsmithdev%2Fextenda-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsmithdev%2Fextenda-modal/lists"}