{"id":14990348,"url":"https://github.com/kingcc/message-box","last_synced_at":"2025-04-12T02:10:27.784Z","repository":{"id":143758593,"uuid":"401980560","full_name":"kingcc/message-box","owner":"kingcc","description":"\u003cmessage-box/\u003e is a Web component implemented on Lit-Element library.","archived":false,"fork":false,"pushed_at":"2021-10-21T16:18:33.000Z","size":326,"stargazers_count":25,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-25T21:47:40.960Z","etag":null,"topics":["lit","lit-component","lit-element","lit-html","message-box","typescript","web-component"],"latest_commit_sha":null,"homepage":"https://codepen.io/kingcc/pen/Pojwrgr","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kingcc.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":"2021-09-01T08:03:49.000Z","updated_at":"2024-09-19T05:48:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"f82308b6-f0a4-4d96-aee9-697e209f28bf","html_url":"https://github.com/kingcc/message-box","commit_stats":{"total_commits":18,"total_committers":2,"mean_commits":9.0,"dds":"0.16666666666666663","last_synced_commit":"2b19eb2fa2a421bc25eef6395a56fa068ba72bfd"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":"lit/lit-element-starter-ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingcc%2Fmessage-box","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingcc%2Fmessage-box/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingcc%2Fmessage-box/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingcc%2Fmessage-box/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kingcc","download_url":"https://codeload.github.com/kingcc/message-box/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505929,"owners_count":21115354,"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":["lit","lit-component","lit-element","lit-html","message-box","typescript","web-component"],"created_at":"2024-09-24T14:19:55.710Z","updated_at":"2025-04-12T02:10:27.764Z","avatar_url":"https://github.com/kingcc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"`\u003cmessage-box/\u003e`\n================\n\n`\u003cmessage-box/\u003e` is a Web component implemented on Lit-Element library.\nIt is similar to native HTML Element and could runs in mainstream browsers without any difference.\n\nIn short, it is a container contains a message string box and some buttons,\nwhich common application scenario is to convey to the website user some information.\nFor example:\n\n```html\n\u003cmessage-box class=\"colorful\" \u003e\n  \u003cspan slot=\"message\"\u003e\n    This is an example that contains only one option.\n  \u003c/span\u003e\n  \u003cbutton slot=\"button\"\u003eOkay\u003c/button\u003e\n\u003c/message-box\u003e\n```\n\nIt looks like this:\n\n![](./docs-src/examples/message_box_1.png)\n\nAnother common scenario is progress bar.\nMessage-box has a progress bar via gradient background color:\n\n![](./docs-src/examples/message_box_2.png)\n\nMore examples can be found [here](https://codepen.io/kingcc/pen/Pojwrgr).\n\n![](./docs-src/examples/message_box_3.png)\n\n## Usage\n\n#### Import directly in HTML\n\nnpm CDNs like `unpkg.com` can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.\n\nSo recommended ways of importing:\n\n```html\n\u003c!-- Importing --\u003e\n\u003cscript type=\"module\"\u003e\n  import 'https://unpkg.com/@lit-component/message-box?module';\n  ...\n\u003c/script\u003e\n\u003c!-- Using --\u003e\n\u003cmessage-box .../\u003e\n```\n\nOr:\n\n```html\n\u003c!-- Importing --\u003e\n\u003cscript type=\"module\" src=\"https://unpkg.com/@lit-component/message-box?module\"\u003e\u003c/script\u003e\n\u003c!-- Using --\u003e\n\u003cmessage-box .../\u003e\n```\n\n#### Import in project using Npm \u0026 Webpack\n\n1. Installation via NPM\n   \n```sh\nnpm i @lit-component/message-box\n```\n\n2. Importing\n\nIn webpack entry script, usually, `index.js`:\n\n```js\nimport '@lit-component/message-box'\n```\n\nIn HTML:\n\n```html\n\u003cmessage-box .../\u003e\n```\n\n#### Create `\u003cmessage-box/\u003e` with `generator`\n\n\u003e **Note that to avoid XSS attacks, DO NOT pass in non-hard-coded content.**\n\n`generator` is using for generates a `\u003cmessage-box/\u003e` quickly:\n\n```js\nimport { generator } from '@lit-component/message-box'\n\nconst mountPoint = document.body\n\nconst $messageBox = generator(\n  `\n    \u003cspan slot=\"message\"\u003e\n      This is an example that contains only one option.\n    \u003c/span\u003e\n    \u003cbutton slot=\"button\"\u003eOkay\u003c/button\u003e\n  `,\n  { out: 'right' },\n  {\n    position: 'fixed',\n    top: '2vh',\n    'z-index': 'max', // MessageBox will automatically calculate the maximum `z-index` based on mountPoint\n  },\n  mountPoint\n)\n\nmountPoint.appendChild($messageBox)\n```\n\nIts interface is:\n\n```typescript\n/**\n * For quickly generate a message-box\n *\n * @param children        - children of `\u003cmessage-box/\u003e`\n * @param propertiesDict  - properties dictionary for initialize, optional\n * @param stylesDict      - stylesheet dictionary for initialize, optional\n * @param mountPoint      - reference to mount point element for computing style, optional\n * @param doc             - reference to document, optional\n * @returns {MessageBox} instance\n */\nfunction generator(\n  children: HTMLElement | HTMLElement[] | string,\n  propertiesDict: PropertiesDict = {},\n  stylesDict: StylesDict = {},\n  mountPoint: HTMLElement | null = null,\n  doc: Document = document,\n): MessageBox\n```\n\n## Attribute \u0026 Properties\n\nYou can set attributes for `\u003cmessage-box/\u003e` elements directly or properties for Web Component MessageBox instances, and they have the same effect:\n\n```html\n\u003cmessage-box min-width=\"20vw\"/\u003e\n\n\u003c!-- Is equal to --\u003e\n\n\u003cmessage-box/\u003e\n\u003cscript\u003e\n  const $messageBox = document.querySelector('message-box')\n  $messageBox.minWidth = '20vw'\n\u003c/script\u003e\n```\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eProperty\u003c/th\u003e\u003cth\u003eAttribute\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\u003cth\u003eType\u003c/th\u003e\u003cth\u003eDefault\u003c/th\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003eheight\u003c/td\u003e\u003ctd\u003eheight\u003c/td\u003e\u003ctd\u003eThe height of component\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003e\"initial\"\u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003ewidth\u003c/td\u003e\u003ctd\u003ewidth\u003c/td\u003e\u003ctd\u003eThe width of component\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003e\"initial\"\u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003eminWidth\u003c/td\u003e\u003ctd\u003emin-width\u003c/td\u003e\u003ctd\u003eThe min-width of component\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003e\"initial\"\u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003eborder\u003c/td\u003e\u003ctd\u003eborder\u003c/td\u003e\u003ctd\u003eThe `border` css property of component\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003e\"0\"\u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003ecolor\u003c/td\u003e\u003ctd\u003ecolor\u003c/td\u003e\u003ctd\u003eThe `color` css property of component\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003e\"255, 255, 255\"\u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003eradius\u003c/td\u003e\u003ctd\u003eradius\u003c/td\u003e\u003ctd\u003eThe `border-radius` of component\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003e\"0\"\u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003eshadow\u003c/td\u003e\u003ctd\u003eshadow\u003c/td\u003e\u003ctd\u003eThe `box-shadow` css property of component\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003e\"0, 1rem, 1rem\"\u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003eout\u003c/td\u003e\u003ctd\u003eout\u003c/td\u003e\u003ctd\u003eThe out method of component. one of \"right\"|\"top\".\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003e\"\"\u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003etimeout\u003c/td\u003e\u003ctd\u003etimeout\u003c/td\u003e\u003ctd\u003eThe display time of the component.\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003e\"0\"\u003c/td\u003e\n  \u003c/tr\u003e\n  \n\u003c/table\u003e\n\n    \n## Slots\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003emessage\u003c/td\u003e\u003ctd\u003eThe 'message' component that needs to be displayed, the most basic such as `SPAN`\u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003ebutton\u003c/td\u003e\u003ctd\u003e`BUTTON`s that need to be displayed\u003c/td\u003e\n  \u003c/tr\u003e\n  \n\u003c/table\u003e\n\n    \n## CSS Parts\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e--message-box-background-color\u003c/td\u003e\u003ctd\u003eSet background color of component\u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003e--message-box-opacity\u003c/td\u003e\u003ctd\u003eSet opacity of component\u003c/td\u003e\n  \u003c/tr\u003e\n  \n\u003c/table\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkingcc%2Fmessage-box","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkingcc%2Fmessage-box","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkingcc%2Fmessage-box/lists"}