diff --git a/packages/popover/LICENSE b/packages/popover/LICENSE new file mode 100644 index 0000000000..7c7442668e --- /dev/null +++ b/packages/popover/LICENSE @@ -0,0 +1,190 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + Copyright 2024 Vaadin Ltd. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/packages/popover/README.md b/packages/popover/README.md new file mode 100644 index 0000000000..1ae1f4a2a8 --- /dev/null +++ b/packages/popover/README.md @@ -0,0 +1,53 @@ +# @vaadin/popover + +A web component for creating overlays that are positioned next to specified DOM element (target). + +[![npm version](https://badgen.net/npm/v/@vaadin/popover)](https://www.npmjs.com/package/@vaadin/popover) + +## Installation + +Install the component: + +```sh +npm i @vaadin/popover +``` + +Once installed, import the component in your application: + +```js +import '@vaadin/popover'; +``` + +## Themes + +Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material. +The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/popover/vaadin-popover.js) of the package uses Lumo theme. + +To use the Material theme, import the component from the `theme/material` folder: + +```js +import '@vaadin/popover/theme/material/vaadin-popover.js'; +``` + +You can also import the Lumo version of the component explicitly: + +```js +import '@vaadin/popover/theme/lumo/vaadin-popover.js'; +``` + +Finally, you can import the un-themed component from the `src` folder to get a minimal starting point: + +```js +import '@vaadin/popover/src/vaadin-popover.js'; +``` + +## Contributing + +Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components. + +## License + +Apache License 2.0 + +Vaadin collects usage statistics at development time to improve this product. +For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics. diff --git a/packages/popover/package.json b/packages/popover/package.json new file mode 100644 index 0000000000..62794a5aa6 --- /dev/null +++ b/packages/popover/package.json @@ -0,0 +1,52 @@ +{ + "name": "@vaadin/popover", + "version": "24.5.0-alpha0", + "publishConfig": { + "access": "public" + }, + "description": "vaadin-popover", + "license": "Apache-2.0", + "repository": { + "type": "git", + "url": "https://github.com/vaadin/web-components.git", + "directory": "packages/popover" + }, + "author": "Vaadin Ltd", + "homepage": "https://vaadin.com/components", + "bugs": { + "url": "https://github.com/vaadin/web-components/issues" + }, + "main": "vaadin-popover.js", + "module": "vaadin-popover.js", + "type": "module", + "files": [ + "src", + "theme", + "vaadin-*.d.ts", + "vaadin-*.js", + "web-types.json", + "web-types.lit.json" + ], + "keywords": [ + "Vaadin", + "vaadin-popover", + "web-components", + "web-component" + ], + "dependencies": { + "@open-wc/dedupe-mixin": "^1.3.0", + "@vaadin/component-base": "24.5.0-alpha0", + "@vaadin/vaadin-lumo-styles": "24.5.0-alpha0", + "@vaadin/vaadin-material-styles": "24.5.0-alpha0", + "@vaadin/vaadin-themable-mixin": "24.5.0-alpha0", + "lit": "^3.0.0" + }, + "devDependencies": { + "@esm-bundle/chai": "^4.3.4", + "@vaadin/testing-helpers": "^0.6.0" + }, + "web-types": [ + "web-types.json", + "web-types.lit.json" + ] +} diff --git a/packages/popover/src/vaadin-popover.d.ts b/packages/popover/src/vaadin-popover.d.ts new file mode 100644 index 0000000000..cbff447ee6 --- /dev/null +++ b/packages/popover/src/vaadin-popover.d.ts @@ -0,0 +1,22 @@ +/** + * @license + * Copyright (c) 2024 Vaadin Ltd. + * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ + */ +import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; + +/** + * `` is a Web Component for creating overlays + * that are positioned next to specified DOM element (target). + * + * Unlike ``, the popover supports rich content. + */ +declare class Popover extends ElementMixin(HTMLElement) {} + +declare global { + interface HTMLElementTagNameMap { + 'vaadin-popover': Popover; + } +} + +export { Popover }; diff --git a/packages/popover/src/vaadin-popover.js b/packages/popover/src/vaadin-popover.js new file mode 100644 index 0000000000..56695a8f05 --- /dev/null +++ b/packages/popover/src/vaadin-popover.js @@ -0,0 +1,34 @@ +/** + * @license + * Copyright (c) 2024 Vaadin Ltd. + * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ + */ +import { html, LitElement } from 'lit'; +import { defineCustomElement } from '@vaadin/component-base/src/define.js'; +import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; +import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; + +/** + * `` is a Web Component for creating overlays + * that are positioned next to specified DOM element (target). + * + * Unlike ``, the popover supports rich content. + * + * @customElement + * @extends HTMLElement + * @mixes ElementMixin + */ +class Popover extends ElementMixin(PolylitMixin(LitElement)) { + static get is() { + return 'vaadin-popover'; + } + + /** @protected */ + render() { + return html``; + } +} + +defineCustomElement(Popover); + +export { Popover }; diff --git a/packages/popover/test/basic.test.js b/packages/popover/test/basic.test.js new file mode 100644 index 0000000000..55c432170d --- /dev/null +++ b/packages/popover/test/basic.test.js @@ -0,0 +1,28 @@ +import { expect } from '@esm-bundle/chai'; +import { fixtureSync, nextRender } from '@vaadin/testing-helpers'; +import '../vaadin-popover.js'; + +describe('popover', () => { + let popover; + + beforeEach(async () => { + popover = fixtureSync(''); + await nextRender(); + }); + + describe('custom element definition', () => { + let tagName; + + beforeEach(() => { + tagName = popover.tagName.toLowerCase(); + }); + + it('should be defined in custom element registry', () => { + expect(customElements.get(tagName)).to.be.ok; + }); + + it('should have a valid static "is" getter', () => { + expect(customElements.get(tagName).is).to.equal(tagName); + }); + }); +}); diff --git a/packages/popover/theme/lumo/vaadin-popover-styles.js b/packages/popover/theme/lumo/vaadin-popover-styles.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/popover/theme/lumo/vaadin-popover.js b/packages/popover/theme/lumo/vaadin-popover.js new file mode 100644 index 0000000000..2226530cf6 --- /dev/null +++ b/packages/popover/theme/lumo/vaadin-popover.js @@ -0,0 +1,2 @@ +import './vaadin-popover-styles.js'; +import '../../src/vaadin-popover.js'; diff --git a/packages/popover/theme/material/vaadin-popover-styles.js b/packages/popover/theme/material/vaadin-popover-styles.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/popover/theme/material/vaadin-popover.js b/packages/popover/theme/material/vaadin-popover.js new file mode 100644 index 0000000000..2226530cf6 --- /dev/null +++ b/packages/popover/theme/material/vaadin-popover.js @@ -0,0 +1,2 @@ +import './vaadin-popover-styles.js'; +import '../../src/vaadin-popover.js'; diff --git a/packages/popover/vaadin-popover.d.ts b/packages/popover/vaadin-popover.d.ts new file mode 100644 index 0000000000..46172df1fb --- /dev/null +++ b/packages/popover/vaadin-popover.d.ts @@ -0,0 +1 @@ +export * from './src/vaadin-popover.js'; diff --git a/packages/popover/vaadin-popover.js b/packages/popover/vaadin-popover.js new file mode 100644 index 0000000000..cf0376ba13 --- /dev/null +++ b/packages/popover/vaadin-popover.js @@ -0,0 +1,2 @@ +import './theme/lumo/vaadin-popover.js'; +export * from './src/vaadin-popover.js';