9 | Content of the dropdown in shadow
I look like bootstrap, right?
12 |You can style me however you want
13 |
19 | {{~! ~}}
20 |
27 |
28 | }
29 |
--------------------------------------------------------------------------------
/docs/app/templates/helpers-testing.gts:
--------------------------------------------------------------------------------
1 | import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
2 |
3 |
4 | Helpers testing
5 | 6 |
7 |
8 |
9 | Click me
10 |
11 |
12 | Hello world 0!
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | Click me
21 |
22 |
23 | Hello world 1!
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/docs/app/styles/docs/code-example.scss:
--------------------------------------------------------------------------------
1 | // Docs
2 | .code-example {
3 | margin-bottom: 1rem;
4 | }
5 |
6 | .code-example-tabs {
7 | display: flex;
8 | }
9 | .code-example-tab {
10 | padding: 0.2rem 0.5rem;
11 | background-color: white;
12 | text-transform: capitalize;
13 | &:not(.active) {
14 | color: #999;
15 | cursor: pointer;
16 | }
17 | &.active {
18 | cursor: normal;
19 | }
20 | }
21 | .code-example-snippet {
22 | margin-bottom: 0;
23 | background-color: #f9f9f9;
24 | padding: 1rem;
25 | &:not(.active) {
26 | display: none;
27 | }
28 | }
29 |
30 | @mixin ember-code-example($color) {
31 | .code-example-tab.active {
32 | border-bottom: 2px solid $color;
33 | color: $color;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/docs/app/components/snippets/how-to-use-it-2-css.scss:
--------------------------------------------------------------------------------
1 | .trigger-bootstrap-feel {
2 | display: inline-block;
3 | text-align: center;
4 | vertical-align: middle;
5 | cursor: pointer;
6 | border: 1px solid #ccc;
7 | padding: 6px 12px;
8 | line-height: 1.42857143;
9 | border-radius: 4px;
10 | color: #333;
11 | background-color: #fff;
12 | outline: none;
13 | }
14 |
15 | .trigger-bootstrap-feel:focus,
16 | .trigger-bootstrap-feel:hover {
17 | background-color: #d4d4d4;
18 | border-color: #8c8c8c;
19 | }
20 |
21 | .content-bootstrap-feel {
22 | background-color: #fff;
23 | border: 1px solid rgba(0, 0, 0, 0.15);
24 | border-radius: 4px;
25 | box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
26 | padding: 5px;
27 | margin: 2px 0 0;
28 | }
29 |
--------------------------------------------------------------------------------
/docs/app/styles/components/main-footer.scss:
--------------------------------------------------------------------------------
1 | // Main footer
2 | .main-footer {
3 | color: $gray;
4 | background-color: $light-gray;
5 | border-top: 1px solid #bbb;
6 | padding-left: 1rem;
7 | padding-right: 1rem;
8 | }
9 | .main-footer-content {
10 | @extend %wrapper;
11 | padding: 1rem 0;
12 | }
13 | @media only screen and (min-width: $medium-breakpoint) {
14 | .icons-attributions {
15 | float: right;
16 | }
17 | }
18 |
19 | body .contribute-call-to-action a {
20 | border-radius: 4px;
21 | padding: 5px 10px;
22 | text-align: center;
23 | color: white;
24 | /* more styles in brandification */
25 | }
26 | @media only screen and (min-width: $small-breakpoint) {
27 | .contribute-call-to-action {
28 | float: right;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/docs/app/components/snippets/no-trigger-1.gts:
--------------------------------------------------------------------------------
1 | import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
2 | import { on } from '@ember/modifier';
3 |
4 |
5 |
7 |
12 |
19 |
20 |
21 | 17 |
6 |
7 |
19 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/ember-basic-dropdown/src/utils/has-moved.ts:
--------------------------------------------------------------------------------
1 | export default function hasMoved(
2 | endEvent: TouchEvent,
3 | moveEvent?: TouchEvent,
4 | ): boolean {
5 | if (!moveEvent) {
6 | return false;
7 | }
8 |
9 | if (
10 | !endEvent.changedTouches?.[0] ||
11 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
12 | (moveEvent.changedTouches[0] as any).touchType !== 'stylus'
13 | ) {
14 | return true;
15 | }
16 |
17 | // Distinguish stylus scroll and tap: if touch "distance" < 5px, we consider it a tap
18 | const horizontalDistance = Math.abs(
19 | (moveEvent.changedTouches[0]?.pageX ?? 0) -
20 | endEvent.changedTouches[0].pageX,
21 | );
22 | const verticalDistance = Math.abs(
23 | (moveEvent.changedTouches[0]?.pageY ?? 0) -
24 | endEvent.changedTouches[0].pageY,
25 | );
26 | return horizontalDistance >= 5 || verticalDistance >= 5;
27 | }
28 |
--------------------------------------------------------------------------------
/docs/app/components/snippets/trigger-events-0.gts:
--------------------------------------------------------------------------------
1 | import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
2 |
3 |
4 | Usage with a scrollable container
8 | 9 |
10 | What if your app doesn't scroll on the body tag? You can have the dropdown
11 | render wherever you would like. If you render it on an element inside the
12 | block that is scrolling the dropdown will automatically scroll with your
13 | trigger. You need to give the target element
14 | position: relative;
15 | for the dropdown to be positioned properly.
16 |
5 |
26 |
27 |
--------------------------------------------------------------------------------
/ember-basic-dropdown/less/base.less:
--------------------------------------------------------------------------------
1 | .ember-basic-dropdown {
2 | position: relative;
3 | }
4 | .ember-basic-dropdown,
5 | .ember-basic-dropdown-content,
6 | .ember-basic-dropdown-content * {
7 | box-sizing: border-box;
8 | }
9 | .ember-basic-dropdown-content {
10 | position: absolute;
11 | width: auto;
12 | z-index: @ember-basic-dropdown-content-z-index;
13 | background-color: @ember-basic-dropdown-content-background-color;
14 | }
15 | .ember-basic-dropdown-content--left {
16 | left: 0;
17 | }
18 | .ember-basic-dropdown-content--right {
19 | right: 0;
20 | }
21 |
22 | .ember-basic-dropdown-overlay {
23 | position: fixed;
24 | background: @ember-basic-dropdown-overlay-background;
25 | width: 100%;
26 | height: 100%;
27 | z-index: 10;
28 | top: 0;
29 | left: 0;
30 | pointer-events: @ember-basic-dropdown-overlay-pointer-events;
31 | }
32 |
33 | .ember-basic-dropdown-content-wormhole-origin {
34 | display: inline;
35 | }
36 |
--------------------------------------------------------------------------------
/docs/app/components/snippets/scrollable-container-1.gts:
--------------------------------------------------------------------------------
1 | import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
2 |
3 |
4 |
6 |
7 |
8 | Mousedown (default)
9 |
10 |
11 |
12 | I open as soon as you press the mouse button
13 |
14 |
15 |
16 |
17 |
18 | Click
19 |
20 |
21 | I only open when you release the mouse button
22 |
23 |
24 |
25 |
5 |
25 |
26 |
--------------------------------------------------------------------------------
/docs/app/styles/look-and-feels/material.scss:
--------------------------------------------------------------------------------
1 | .trigger-material-round {
2 | display: inline-block;
3 | border-radius: 50%;
4 | text-align: center;
5 | font-size: 24px;
6 | background-color: #fafafa;
7 | line-height: 40px;
8 | width: 40px;
9 | height: 40px;
10 | box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.26);
11 | outline: none;
12 | user-select: none;
13 | transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
14 | transition-property: background-color, box-shadow, transform;
15 | }
16 |
17 | .trigger-material-round:focus,
18 | .trigger-material-round:hover {
19 | background-color: #eee;
20 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
21 | }
22 |
23 | .content-material-round {
24 | box-shadow:
25 | 0 2px 4px -1px rgba(0, 0, 0, 0.2),
26 | 0 4px 5px 0 rgba(0, 0, 0, 0.14),
27 | 0 1px 10px 0 rgba(0, 0, 0, 0.12);
28 | border-radius: 50%;
29 | overflow: hidden;
30 | margin: 5px 0 0;
31 | }
32 |
33 | .content-material-round img {
34 | display: block;
35 | }
36 |
--------------------------------------------------------------------------------
/docs/app/styles/components/side-nav.scss:
--------------------------------------------------------------------------------
1 | $side-nav-color: #777;
2 | .side-nav {
3 | width: 200px;
4 | color: $side-nav-color;
5 | flex: 0 0 25%;
6 | margin-right: 2rem;
7 | @media only screen and (max-width: $medium-breakpoint) {
8 | display: none;
9 | }
10 | }
11 | .side-nav-header {
12 | font-size: 18px;
13 | font-weight: 300;
14 | color: #777;
15 | margin-bottom: 10px;
16 | border-bottom: 1px solid rgba(153, 153, 153, 0.2);
17 | &:not(:first-child) {
18 | margin-top: 1.5rem;
19 | }
20 | }
21 | .side-nav-link {
22 | display: block;
23 | color: #999;
24 | padding-left: 16px;
25 | &.active {
26 | /* more styles in brandification */
27 | padding-left: 16px - 3px;
28 | }
29 | }
30 |
31 | .section-selector {
32 | border: 1px solid gray;
33 | width: 100%;
34 | border-radius: 3px;
35 | height: 30px;
36 | font-size: 16px;
37 | }
38 | @media only screen and (min-width: $medium-breakpoint) {
39 | .section-selector {
40 | display: none;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/ember-basic-dropdown/scss/base.scss:
--------------------------------------------------------------------------------
1 | @use "variables";
2 |
3 | .ember-basic-dropdown {
4 | position: relative;
5 | }
6 | .ember-basic-dropdown,
7 | .ember-basic-dropdown-content,
8 | .ember-basic-dropdown-content * {
9 | box-sizing: border-box;
10 | }
11 | .ember-basic-dropdown-content {
12 | position: absolute;
13 | width: auto;
14 | z-index: variables.$ember-basic-dropdown-content-z-index;
15 | background-color: variables.$ember-basic-dropdown-content-background-color;
16 | }
17 | .ember-basic-dropdown-content--left {
18 | left: 0;
19 | }
20 | .ember-basic-dropdown-content--right {
21 | right: 0;
22 | }
23 |
24 | .ember-basic-dropdown-overlay {
25 | position: fixed;
26 | background: variables.$ember-basic-dropdown-overlay-background;
27 | width: 100%;
28 | height: 100%;
29 | z-index: 10;
30 | top: 0;
31 | left: 0;
32 | pointer-events: variables.$ember-basic-dropdown-overlay-pointer-events;
33 | }
34 |
35 | .ember-basic-dropdown-content-wormhole-origin {
36 | display: inline;
37 | }
38 |
--------------------------------------------------------------------------------
/docs/app/components/snippets/animations-1-css.scss:
--------------------------------------------------------------------------------
1 | @keyframes drop-fade-below {
2 | 0% {
3 | opacity: 0;
4 | transform: translateY(-20px);
5 | }
6 | 100% {
7 | opacity: 1;
8 | transform: translateY(0px);
9 | }
10 | }
11 | @keyframes drop-fade-above {
12 | 0% {
13 | opacity: 0;
14 | transform: translateY(20px);
15 | }
16 | 100% {
17 | opacity: 1;
18 | transform: translateY(0px);
19 | }
20 | }
21 |
22 | .slide-fade {
23 | will-change: transform, opacity;
24 | &.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
25 | animation: drop-fade-below 0.15s;
26 | }
27 | &.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-out {
28 | animation: drop-fade-below 0.15s reverse;
29 | }
30 | &.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-in {
31 | animation: drop-fade-above 0.15s;
32 | }
33 | &.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-out {
34 | animation: drop-fade-above 0.15s reverse;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/docs/app/components/snippets/trigger-events-1.gts:
--------------------------------------------------------------------------------
1 | import { fn } from '@ember/helper';
2 | import { on } from '@ember/modifier';
3 | import Component from '@glimmer/component';
4 | import BasicDropdown, {
5 | type BasicDropdownDefaultBlock,
6 | } from 'ember-basic-dropdown/components/basic-dropdown';
7 |
8 | export default class extends Component {
9 | openOnArrowDown(dropdown: BasicDropdownDefaultBlock, e: KeyboardEvent) {
10 | if (e.keyCode === 38) {
11 | dropdown.actions.open(e);
12 | }
13 | }
14 |
15 |
16 |
20 |
6 |
7 |
24 |
8 |
22 |
23 |
9 |
10 | Click me
11 |
12 |
13 |
14 |
19 |
20 |
21 | I look like bootstrap, right?
15 |You can style me however you want
16 |Option 3
17 |Option 4
18 |21 |
{{user.name}} - {{user.assignment}}
35 | {{/each}} 36 | {{/if}} 37 |Disabled
7 | 8 |9 | If you disable the dropdown, it will not open or close by any mean, mouse, 10 | keyboard or touch screen. 11 |
12 | 13 |
18 | Note that being disabled does not prevent the dropdown or any of its
19 | sub-components from firing events like
20 | onMouseEnter.
21 |
24 | The component takes care by default of usual good practices, removing the
25 | tabindex
26 | of the trigger and set
27 | [aria-disabled="true"]
28 | to assist screen readers.
29 |
32 | < Position
36 | Overlays >
40 |
41 |
42 |
--------------------------------------------------------------------------------
/test-app/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 | - master
8 | pull_request: {}
9 |
10 | concurrency:
11 | group: ci-${{ github.head_ref || github.ref }}
12 | cancel-in-progress: true
13 |
14 | jobs:
15 | lint:
16 | name: "Lint"
17 | runs-on: ubuntu-latest
18 | timeout-minutes: 10
19 |
20 | steps:
21 | - uses: actions/checkout@v3
22 | - uses: pnpm/action-setup@v4
23 | with:
24 | version: 9
25 | - name: Install Node
26 | uses: actions/setup-node@v3
27 | with:
28 | node-version: 18
29 | cache: pnpm
30 | - name: Install Dependencies
31 | run: pnpm install --frozen-lockfile
32 | - name: Lint
33 | run: pnpm lint
34 |
35 | test:
36 | name: "Test"
37 | runs-on: ubuntu-latest
38 | timeout-minutes: 10
39 |
40 | steps:
41 | - uses: actions/checkout@v3
42 | - uses: pnpm/action-setup@v4
43 | with:
44 | version: 9
45 | - name: Install Node
46 | uses: actions/setup-node@v3
47 | with:
48 | node-version: 18
49 | cache: pnpm
50 | - name: Install Dependencies
51 | run: pnpm install --frozen-lockfile
52 | - name: Run Tests
53 | run: pnpm test
54 |
--------------------------------------------------------------------------------
/test-app/tests/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
25 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | {{content-for "body-footer"}}
37 | {{content-for "test-body-footer"}}
38 |
39 |
40 |
--------------------------------------------------------------------------------
/docs/app/components/snippets/custom-position-1.gts:
--------------------------------------------------------------------------------
1 | import Component from '@glimmer/component';
2 | import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
3 | import type {
4 | CalculatePositionOptions,
5 | CalculatePositionResult,
6 | } from 'ember-basic-dropdown/utils/calculate-position';
7 |
8 | export default class extends Component {
9 | calculatePosition(
10 | trigger: HTMLElement,
11 | content: HTMLElement,
12 | _destination: HTMLElement,
13 | { horizontalPosition, verticalPosition }: CalculatePositionOptions,
14 | ): CalculatePositionResult {
15 | const { top, left, width, height } = trigger.getBoundingClientRect();
16 | const { height: contentHeight } = content.getBoundingClientRect();
17 | const style = {
18 | left: left + width,
19 | top: top + window.pageYOffset + height / 2 - contentHeight / 2,
20 | };
21 |
22 | return { horizontalPosition, verticalPosition, style };
23 | }
24 |
25 |
26 |
26 |
27 |
28 | 32 | See? It wasn't that hard. 33 |
25 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
40 |
41 | {{content-for "body-footer"}}
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/docs/app/components/snippets/trigger-events-4.gts:
--------------------------------------------------------------------------------
1 | import Component from '@glimmer/component';
2 | import { action } from '@ember/object';
3 | import { on } from '@ember/modifier';
4 | import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
5 | import { tracked } from '@glimmer/tracking';
6 |
7 | export default class extends Component {
8 | @tracked parentDivClass: string | null = null;
9 |
10 | @action
11 | simulateFocusParent() {
12 | this.parentDivClass = 'input-group--focused';
13 | }
14 |
15 | @action
16 | simulateBlurParent() {
17 | this.parentDivClass = null;
18 | }
19 |
20 |
21 |
26 |
27 |
28 | Focus alternatively the input and the button next to it
22 |
23 |
29 |
30 |
31 |
36 |
37 |
38 |
39 |
40 |
43 |
44 |
45 |
46 | }
47 |
--------------------------------------------------------------------------------
/test-app/config/environment.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function (environment) {
4 | const ENV = {
5 | modulePrefix: 'test-app',
6 | environment,
7 | rootURL: '/',
8 | locationType: 'history',
9 | EmberENV: {
10 | EXTEND_PROTOTYPES: false,
11 | FEATURES: {
12 | // Here you can enable experimental features on an ember canary build
13 | // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
14 | },
15 | },
16 |
17 | APP: {
18 | // Here you can pass flags/options to your application instance
19 | // when it is created
20 | },
21 | };
22 |
23 | if (process.argv.includes('shadowDom')) {
24 | ENV.APP.rootElement = '#shadow-root';
25 | ENV.APP.shadowDom = true;
26 | }
27 |
28 | if (environment === 'development') {
29 | // ENV.APP.LOG_RESOLVER = true;
30 | // ENV.APP.LOG_ACTIVE_GENERATION = true;
31 | // ENV.APP.LOG_TRANSITIONS = true;
32 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
33 | // ENV.APP.LOG_VIEW_LOOKUPS = true;
34 | }
35 |
36 | if (environment === 'test') {
37 | // Testem prefers this...
38 | ENV.locationType = 'none';
39 |
40 | // keep test console output quieter
41 | ENV.APP.LOG_ACTIVE_GENERATION = false;
42 | ENV.APP.LOG_VIEW_LOOKUPS = false;
43 |
44 | ENV.APP.rootElement = '#ember-testing';
45 | ENV.APP.autoboot = false;
46 | }
47 |
48 | if (environment === 'production') {
49 | // here you can enable a production-specific feature
50 | }
51 |
52 | return ENV;
53 | };
54 |
--------------------------------------------------------------------------------
/docs/app/components/snippets/dropdown-events-2.gts:
--------------------------------------------------------------------------------
1 | import Component from '@glimmer/component';
2 | import { action } from '@ember/object';
3 | import { task, timeout } from 'ember-concurrency';
4 | import BasicDropdown, {
5 | type Dropdown,
6 | } from 'ember-basic-dropdown/components/basic-dropdown';
7 |
8 | const users = [
9 | { name: 'Nathan', assignment: 'CLI' },
10 | { name: 'Rober', assignment: 'Whatnot' },
11 | { name: 'Leah', assignment: 'Community' },
12 | ];
13 |
14 | export default class extends Component {
15 | users = users;
16 |
17 | // Actions
18 | @action
19 | waitForUsers(dropdown: Dropdown, e?: Event) {
20 | if (e) {
21 | void this.loadUsersAndOpen.perform(dropdown);
22 | return false;
23 | }
24 | }
25 |
26 | // Tasks
27 | loadUsersAndOpen = task(async (dropdown: Dropdown) => {
28 | await timeout(1000);
29 | dropdown.actions.open(); // invoked without event
30 | return users;
31 | });
32 |
33 |
34 | Option1
41 |Option2
42 |{{user.name}} - {{user.assignment}}
46 | {{/each}} 47 |25 | Who you love more? 26 |
27 |28 | 35 | 36 |
37 |38 | 45 | 46 |
47 |Styles
6 | 7 |8 | Since this component doesn't any visual theme, you can apply styles to it 9 | just with plain CSS or even adding the classes your favourite CSS framework 10 | gives you. 11 |
12 | 13 |
14 | If don't use any css pre-processor this is all. If you do use SASS, the
15 | addon will know it and will have to
16 | @use
17 | the styles explicitly. This gives you the chance to set a few variables that
18 | Ember Basic Dropdown will use.
19 |
22 | There is only four variables you can tweak (Sass syntax) 23 |
24 | 25 |
28 | If by example you want to change the colour of the overlay to be blue, you
29 | could do this in your
30 | app.scss.
31 |
36 | In the next sections we'll give in more involved customizations. 37 |
38 | 39 |
40 | < Overlays
44 | Custom position >
48 |
49 |
50 |
--------------------------------------------------------------------------------
/docs/app/components/code-inline.gts:
--------------------------------------------------------------------------------
1 | import Component from '@glimmer/component';
2 | import { modifier } from 'ember-modifier';
3 | import { htmlSafe, type SafeString } from '@ember/template';
4 | import { tracked } from '@glimmer/tracking';
5 | import { codeToHtml } from 'shiki';
6 | import { task } from 'ember-concurrency';
7 |
8 | const files = import.meta.glob('./snippets/*', {
9 | query: '?raw',
10 | import: 'default',
11 | }) as Record
54 | {{~! ~}}{{this.prismCode}}{{~! ~}}
55 |
56 |
57 | }
58 |
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | # docs
2 |
3 | This README outlines the details of collaborating on this Ember application.
4 | A short introduction of this app could easily go here.
5 |
6 | ## Prerequisites
7 |
8 | You will need the following things properly installed on your computer.
9 |
10 | - [Git](https://git-scm.com/)
11 | - [Node.js](https://nodejs.org/) (with npm)
12 | - [Ember CLI](https://cli.emberjs.com/release/)
13 | - [Google Chrome](https://google.com/chrome/)
14 |
15 | ## Installation
16 |
17 | - `git clone 39 | 40 |
Overlays
7 | 8 |9 | By default the dropdown renders floating above the rest of your page but it 10 | doesn't prevent the user from clicking on any other item. Overlays can fix 11 | that and make dropdowns look cooler. 12 |
13 | 14 |19 | What do you have to know: 20 |
21 | 22 |-
23 |
-
24 | By default overlays have a semitransparent black background, but you can
25 | change that using the
26 |
$ember-basic-dropdown-overlay-background27 | SASS variable or target the 28 |.ember-basic-dropdown-overlay29 |
30 | -
31 | By default overlays have
32 |
pointer-events: none, so it is transparent to clicks but you 33 | can change that using the 34 |$ember-basic-dropdown-overlay-pointer-events35 | SASS variable or target the same class. 36 |
37 |
40 | In the next section we'll talk more how to customize the styles. 41 |
42 | 43 |
44 | < Disabled
48 | Styles >
52 |
53 |
54 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "repository": "https://github.com/cibernox/ember-basic-dropdown",
4 | "license": "MIT",
5 | "author": "Miguel Camba",
6 | "scripts": {
7 | "build": "pnpm run --filter ember-basic-dropdown build",
8 | "build:docs": "pnpm run --filter docs build",
9 | "lint": "pnpm run --filter '*' lint",
10 | "lint:fix": "pnpm run --filter '*' lint:fix",
11 | "start": "concurrently 'pnpm:start:*' --restart-after 5000 --prefixColors auto",
12 | "start:addon": "pnpm run --filter ember-basic-dropdown start --no-watch.clearScreen",
13 | "start:docs": "pnpm run --filter docs start --preserveWatchOutput",
14 | "start:test-app": "pnpm run --filter test-app start",
15 | "test:ember": "pnpm --filter '*' test:ember"
16 | },
17 | "workspaces": [
18 | "ember-basic-dropdown",
19 | "docs",
20 | "test-app"
21 | ],
22 | "engines": {
23 | "node": ">= 18"
24 | },
25 | "release-it": {
26 | "plugins": {
27 | "@release-it-plugins/workspaces": {
28 | "workspaces": [
29 | "ember-basic-dropdown"
30 | ]
31 | },
32 | "@release-it-plugins/lerna-changelog": {
33 | "infile": "CHANGELOG.md"
34 | }
35 | },
36 | "git": {
37 | "tagName": "v${version}"
38 | },
39 | "github": {
40 | "release": true,
41 | "tokenRef": "GITHUB_AUTH"
42 | },
43 | "npm": false
44 | },
45 | "version": "8.11.0",
46 | "packageManager": "pnpm@10.22.0",
47 | "devDependencies": {
48 | "@release-it-plugins/lerna-changelog": "^8.0.1",
49 | "@release-it-plugins/workspaces": "^5.0.3",
50 | "concurrently": "^9.2.1",
51 | "prettier": "^3.7.4",
52 | "prettier-plugin-ember-template-tag": "^2.1.2",
53 | "release-it": "^19.0.6",
54 | "typescript": "^5.9.3"
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/docs/app/templates/public-pages/docs/migrate-7-0-to-8-0.gts:
--------------------------------------------------------------------------------
1 | import CodeExample from '../../../components/code-example';
2 | import { LinkTo } from '@ember/routing';
3 |
4 |
5 | Migrate from 7.0 to 8.0
6 | 7 |The addon is now a 8 | V2 9 | Embroider Addon. The following changes are necessary:
10 | 11 |-
12 |
-
13 |
Add following line to your
14 |application.hbs19 |
20 | -
21 |
Vanilla JS: If you have used vanilla js you must now import the css in 22 |
24 |app.js23 | manually like (for other css adding examples see under installation)25 |
26 | -
27 |
LESS: If you are using with less you need to add 28 |
32 |lessOptions29 | into your 30 |ember-cli-build.js31 | file33 |
34 | -
35 |
Typescript: There were added / modified / fixed the typescript 36 | declarations. This could be braking for consumer app
37 |
38 |
41 | < Migrate from 8.0 to 9.0
45 | Test helpers >
49 |
50 |
51 |
--------------------------------------------------------------------------------
/docs/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Animations
7 | 8 |9 | Do you like animations in your dropdowns? Me too. Let's define some 10 |
11 | 12 |
13 | It is that simple as create a CSS3 animation using the
14 | ember-basic-dropdown--transitioning-in,
15 | ember-basic-dropdown--transitioned-in
16 | and
17 | ember-basic-dropdown--transitioning-out
18 | classes that ember-basic-dropdown gives you automatically.
19 |
22 | You will probably also want to use
23 | .ember-basic-dropdown-content--below
24 | and
25 | .ember-basic-dropdown-content--above
26 | to have different animations depending on where the dropdown is positioned.
27 |
34 | There is nothing else to know about animations, other that you have to use 35 | CSS 36 | animations, not transitions. 37 |
38 | 39 |40 | The dropdown takes care of creating a clone when closing the dropdown so you 41 | animation works in both directions. 42 |
43 | 44 |
45 | < Custom position
49 | Migrate from 7.0 to 8.0 >
53 |
54 |
55 |
--------------------------------------------------------------------------------
/docs/app/templates/public-pages/docs/test-helpers.gts:
--------------------------------------------------------------------------------
1 | import { LinkTo } from '@ember/routing';
2 | import CodeExample from '../../../components/code-example';
3 |
4 |
5 | Test helpers
6 | 7 |8 | 9 |
10 | Ember Basic Dropdown bundles some handy test helpers (clickDropdown
12 | and
13 | tapDropdown) that make it easier to simulate user interaction
14 | in acceptance tests.
15 |
18 | You can just have to import them at the top of your tests and call them
19 | preceded by
20 | await.
21 |
clickTrigger(scope = null, eventOptions)
26 |
27 |
28 | Simulates a click to open or close the dropdown. As all integration test
29 | helpers is already runloop aware, so you don't need to wrap it in
30 | Ember.run.
31 |
34 | In case there is more than one dropdown rendered at the same time you can 35 | pass a string with the scope to trigger it over the desired one. 36 |
37 | 38 |tapTrigger(scope = null, eventOptions)
41 |
42 |
43 | Identical to
44 | clickTrigger
45 | but simulates a tap instead.
46 |
51 | < Migrate from 7.0 to 8.0
55 | API reference >
59 |
60 |
61 |
--------------------------------------------------------------------------------
/ember-basic-dropdown/src/components/basic-dropdown-wormhole.gts:
--------------------------------------------------------------------------------
1 | import Component from '@glimmer/component';
2 | import { getOwner } from '@ember/application';
3 | import { config as utilConfig, _configSet, type Config } from '../config.ts';
4 | import { deprecate } from '@ember/debug';
5 |
6 | export interface BasicDropdownWormholeSignature {
7 | Element: HTMLElement;
8 | }
9 |
10 | export default class BasicDropdownWormholeComponent extends Component57 | {{/each}} 58 |
Content events
7 | 8 |9 | Like the trigger, the dropdown accepts function to bind a few handy events. 10 |
11 | 12 |onFocusIn/onFocusOut(dropdown, event)
13 |
14 | 15 | Those events are just identical to the ones in the trigger. 16 |
17 | 18 |onMouseEnter / onMouseLeave(dropdown, event)
19 |
20 | 21 | Used in conjunction with the same events in the trigger it quite easy to 22 | make a dropdown that opens when you hover the trigger and closes leave it, 23 | but stays open if you move from the trigger to the content. 24 |
25 | 26 |27 | You can even delay the closing a bit to allow the users to briefly pass 28 | outside the boundaries of the dropdown without closing it. Think the navbar 29 | of your favourite social network: 30 |
31 | 32 |37 | Let's break this down. 38 |
39 | 40 |
41 | First we
42 | <dd.Trigger \{{on "mousedown" this.prevent\\}}>
43 | neglect mouse input: Open/close both by click and hover will trip our users.
44 |
47 | Then
48 | \{{on "mouseenter" (fn this.open dd)}}
49 | and
50 | \{{on "mouseleave" (fn this.closeLater dd)}}
51 | open a close the dropdown, but we we leave we don't close immediately.
52 | Instead we delay the close a few milliseconds as a grace period, allowing
53 | the user to transition from the trigger to the content even if the
54 | trajectory of the mouse is not perfect.
55 |
58 | If before that grace period they enter again the boundaries of the
59 | component, we cancel the scheduled close. This would be much cleaner using
60 | ember-concurrency
61 | tasks.
62 |
65 | In the following chapters we will learn how to customize the dropdown 66 | behaviour with all the different options. 67 |
68 | 69 |
70 | < Trigger events
74 |
75 |
76 |
--------------------------------------------------------------------------------
/docs/app/templates/public-pages/cookbook/index.gts:
--------------------------------------------------------------------------------
1 | import CodeExample from '../../../components/code-example';
2 | import NoTrigger1Component from '../../../components/snippets/no-trigger-1';
3 | import NoTrigger2Component from '../../../components/snippets/no-trigger-2';
4 |
5 |
6 | Usage without trigger
7 | 8 |9 | Use the component without a trigger? Is that possible? 10 |
11 | 12 |
13 | Yes, it is. You don't need to invoke the
14 | <dropdown.trigger>
15 | component to make the dropdown work. The yielded
16 | dropdown
17 | has actions you can invoke from any other item. Yes, it is. You don't need
18 | to invoke the
19 | <dropdown.trigger>
20 | component to make the dropdown work. The yielded
21 | dropdown
22 | has actions you can invoke from any other item.
23 |
26 | Sometimes you just cannot achieve what you want with this approach, so you 27 | need to step down and wire things yourself. 28 |
29 | 30 |
31 | If you invoke the
32 | open
33 | or
34 | toggle
35 | action from say, a button, the dropdown is going to open and will take as
36 | the element to be anchored to element with
37 | data-ebd-id="\{{dropdown.uniqueId}}-trigger".
38 |
41 | What kind of things can you do with this? 42 |
43 | 44 |45 | By example, you can open or close the component when an item is clicked but 46 | make the dropdown attach itself to an entirely different item in the page. 47 |
48 | 49 |50 | Let's create an input with a button. When that button is clicked the drodown 51 | will open below the input, not not below the button that you clicked. 52 |
53 | 54 |
59 | Remember that almost always you will want to use the provided trigger
60 | component
61 | <dropdown.trigger>
62 | because it takes care of all the A11y, bindings and classes for you, but
63 | when you can't it's good to know that you can still use your own markup and
64 | wire things together yourself.
65 |
68 | A good middle-ground is to apply the same trigger modifier that the
69 | component uses, but to your element or component. It will get all of the
70 | same a11y and bindings that the
71 | <dropdown.trigger>
72 | component gets.
73 |
Installation
6 | 7 |8 | To install ember-basic-dropdown, run the following command in your ember 9 | project directory 10 |
11 | 12 |13 |
14 |
16 |
17 |
18 | $ pnpm install ember-basic-dropdown15 |
19 | After the installation you need to add the following lines somewhere in your
20 | app.js/ts.
21 |
30 | Then you need to add the following lines somewhere in your templates where
31 | you want to render the dropdown content into e.g. your
32 | application.gjs/gts. In this component will be rendered the
33 | dropdown content.
34 |
43 | If you use vanilla CSS, you need to add the following line into
44 | app.js
45 | or in any route/controller/component
46 | .js/.ts
47 | file:
48 |
53 | Instead of adding the styling in an
54 | .js
55 | file and depending from your build config you can also add the css in any
56 | template/component css file by using following line
57 |
66 | However, if you are using SASS or LESS you need to add an import statement 67 | to your styles. 68 |
69 | 70 |
77 | If you are using LESS there is also necessary to register the
78 | paths
79 | in
80 | lessOptions
81 |
86 | The styles of the addon are 87 | very minimal 88 | and deal mostly with positioning. You can tweak a couple things but we'll 89 | get to that later. 90 |
91 | 92 |93 | Now let's learn the API of the component. 94 |
95 | 96 |
97 | <
98 | Overview
99 | How to use it >
103 |
104 |
105 |
--------------------------------------------------------------------------------
/docs/app/templates/public-pages/docs/index.gts:
--------------------------------------------------------------------------------
1 | import { LinkTo } from '@ember/routing';
2 |
3 |
4 | Overview
5 | 6 |I'm going to tell you the story of how this dropdown addon was born.
7 | 8 |9 | I was building a select component but I realized that a select is nothing 10 | more than a dropdown with some extra stuff on top. And datepickers too. And 11 | colorpickers, contextual menus and many other widgets. 12 |
13 | 14 |15 | Essentially, any floating box of content that is opened when you interact 16 | with a trigger is basically a dropdown. Dropdowns are the foundation to at 17 | least half a dozen common UI widgets we use daily, so I decided to shape 18 | this addon in a way that was easy to reuse and customize to create those 19 | other widgets. 20 |
21 | 22 |23 | But if a dropdown is just a floating box activated by a trigger, 24 | why would you want to use a third part addon for such a simple thing? 25 |
26 | 27 |28 | Well, there are two kinds of people. Those who think that dropdowns 29 | are an easy thing and those who have actually built one. 30 |
31 | 32 |33 | When I transitioned from the first kind to the second I learned a lot of 34 | stuff. 35 |
36 | 37 |-
38 |
- Absolutely position elements in a performant way using the runloop 39 |
- Overcoming z-index limitations 40 |
- How useful MutationObservers and DOM Events can be 41 |
- Proper detection of taps and touch scroll 42 |
- Animating elements being removed from the screen 43 |
- Chasing memory leaks when global events are not properly removed 44 |
- Accessibility and keyboard navigation 45 |
48 | After I built the initial version, I started to build other widgets on top 49 | and I had to step back a few times and identify where it wasn't flexible 50 | enough. This process ended up in a component that distilled the essence of 51 | what a dropdown is with as few assumptions as possible. 52 |
53 | 54 |55 | I honestly want to save you time and tears. I've been there. 56 |
57 | 58 |59 | This component is a 60 | building block 61 | for you to build other components on top, so it prioritizes flexibility and 62 | explicitness over succinctness in its API, but still allows allows basic 63 | usage out of the box with no ceremony. 64 |
65 | 66 |67 | Another thing to note is that this component doesn't have any theme by 68 | default, so unless you do something about it, it will look pretty ugly. The 69 | few styles it has are only to deal with positioning. 70 |
71 | 72 |I hope you like it.
73 | 74 |
75 | Installation >
79 |
80 |
81 |
--------------------------------------------------------------------------------
/docs/app/styles/_base.scss:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | html,
6 | body {
7 | margin: 0;
8 | padding: 0;
9 | }
10 |
11 | html {
12 | font-size: 100%;
13 | line-height: 1.6;
14 | touch-action: manipulation;
15 | font-family: "Open sans", sans-serif;
16 | }
17 |
18 | body {
19 | color: $text-color;
20 | // position: relative; Styles to demo non 0,0 positioned container
21 | // margin-top: 60px;
22 | }
23 |
24 | a {
25 | text-decoration: none;
26 | /* more styles in brandification */
27 | }
28 |
29 | img,
30 | iframe {
31 | max-width: 100%;
32 | }
33 |
34 | /* Headings */
35 | h1,
36 | h2,
37 | h3,
38 | h4,
39 | h5,
40 | h6 {
41 | margin-bottom: 0.5rem;
42 | font-weight: bold;
43 | line-height: 1.25;
44 | color: $headings-text-color;
45 | text-rendering: optimizeLegibility;
46 | }
47 | h1 {
48 | font-size: 2rem;
49 | }
50 | h2 {
51 | margin-top: 1rem;
52 | font-size: 1.5rem;
53 | }
54 | h3 {
55 | margin-top: 1.5rem;
56 | font-size: 1.25rem;
57 | }
58 | h4,
59 | h5,
60 | h6 {
61 | margin-top: 1rem;
62 | font-size: 1rem;
63 | }
64 |
65 | /* Body text */
66 | p {
67 | margin-top: 0;
68 | margin-bottom: 1rem;
69 | }
70 |
71 | /* Lists */
72 | ul,
73 | ol,
74 | dl {
75 | margin-top: 0;
76 | margin-bottom: 1rem;
77 | }
78 |
79 | dt {
80 | font-weight: bold;
81 | }
82 | dd {
83 | margin-bottom: 0.5rem;
84 | }
85 |
86 | /* Misc */
87 | hr {
88 | position: relative;
89 | margin: 1.5rem 0;
90 | border: 0;
91 | border-top: 1px solid #eee;
92 | border-bottom: 1px solid #fff;
93 | }
94 |
95 | abbr {
96 | font-size: 85%;
97 | font-weight: bold;
98 | color: #555;
99 | text-transform: uppercase;
100 | }
101 | abbr[title] {
102 | cursor: help;
103 | border-bottom: 1px dotted #e5e5e5;
104 | }
105 |
106 | /* Code */
107 | code,
108 | pre {
109 | font-family: Menlo, Monaco, "Courier New", monospace;
110 | }
111 | code {
112 | color: $code-text-color;
113 | padding: 0.2em 0;
114 | margin: 0;
115 | font-size: 75%;
116 | background-color: rgba(0, 0, 0, 0.04);
117 | border-radius: 3px;
118 |
119 | &::before,
120 | &::after {
121 | letter-spacing: -0.2em;
122 | content: "\00a0";
123 | }
124 | }
125 | pre {
126 | max-width: calc(100vw - #{2 * $wrapper-padding});
127 | display: block;
128 | margin-top: 0;
129 | margin-bottom: 1rem;
130 | font-size: 0.8rem;
131 | line-height: 1.4;
132 | white-space: pre;
133 | word-break: break-all;
134 | word-wrap: normal;
135 | background-color: #f9f9f9;
136 | overflow-x: auto;
137 | }
138 | pre code {
139 | padding: 0;
140 | font-size: 100%;
141 | color: inherit;
142 | background-color: transparent;
143 |
144 | &::before,
145 | &::after {
146 | content: "";
147 | }
148 | }
149 |
150 | /* Tables */
151 | table {
152 | margin-bottom: 1rem;
153 | width: 100%;
154 | border: 1px solid #e5e5e5;
155 | border-collapse: collapse;
156 | }
157 | td,
158 | th {
159 | padding: 0.25rem 0.5rem;
160 | border: 1px solid #e5e5e5;
161 | }
162 |
163 | /* Pygments via Jekyll */
164 | .highlight {
165 | margin-bottom: 1rem;
166 | border-radius: 4px;
167 | }
168 | .highlight pre {
169 | margin-bottom: 0;
170 | }
171 |
--------------------------------------------------------------------------------
/docs/app/templates/public-pages/docs/dropdown-events.gts:
--------------------------------------------------------------------------------
1 | import CodeExample from '../../../components/code-example';
2 | import { LinkTo } from '@ember/routing';
3 | import DropDownEvents1Component from '../../../components/snippets/dropdown-events-1';
4 | import DropDownEvents2Component from '../../../components/snippets/dropdown-events-2';
5 | import DropDownEvents3Component from '../../../components/snippets/dropdown-events-3';
6 |
7 |
8 | Dropdown events
9 | 10 |11 | Although the top-level component is tagless, it does fire a few events that 12 | you can use to react to changes in the state of the dropdown. 13 |
14 | 15 |16 | This has no mystery. 17 |
18 | 19 |onOpen(dropdown, event?)
20 |
21 |
22 | Pretty self-explanatory. The
23 | dropdown
24 | argument in the signature is the public API of the component. The
25 | event
26 | argument will be passed if this event is fired as a consequence of another
27 | event (e.g. a click), but will be undefined if it was fired
28 | programmatically.
29 |
What kinds of things you can do with this event?
32 | 33 |34 | In general when you want to do something outside the component when this 35 | loads. By example, you can delay the loading of some data until the dropdown 36 | is opened. 37 |
38 | 39 |
44 | There is something you should know about this hook: If you
45 | return false;
46 | from it you will prevent the component from opening.
47 |
50 | Let's use this feature along with the public API and event received as 51 | aguments to do a nifty trick. We are going to iterate over the example above 52 | so we prevent the component from opening, load the users and once loaded we 53 | open it. 54 |
55 | 56 |For the record, I don't think this is good UX
61 | 62 |onClose(dropdown, event?)
63 |
64 |
65 | Symmetrically, you can perform on action when the dropdown is closed. For
66 | example, save the a user selection, and you can also
67 | return false
68 | to prevent the component from closing.
69 |
72 | Example: Create a dropdown with some checkboxes inside, and don't allow it 73 | to close until one checkbox is selected. 74 |
75 | 76 |Cruel, isn't it?
81 | 82 |83 | Those were the events fired by the top-level component, now let's go deep on 84 | the events that are fired by the trigger. 85 |
86 | 87 |
88 | < How to use it
92 | Trigger events >
96 |
97 |
98 |
--------------------------------------------------------------------------------
/ember-basic-dropdown/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * Debugging:
3 | * https://eslint.org/docs/latest/use/configure/debug
4 | * ----------------------------------------------------
5 | *
6 | * Print a file's calculated configuration
7 | *
8 | * npx eslint --print-config path/to/file.js
9 | *
10 | * Inspecting the config
11 | *
12 | * npx eslint --inspect-config
13 | *
14 | */
15 | import babelParser from '@babel/eslint-parser';
16 | import js from '@eslint/js';
17 | import prettier from 'eslint-config-prettier';
18 | import ember from 'eslint-plugin-ember/recommended';
19 | import importPlugin from 'eslint-plugin-import';
20 | import n from 'eslint-plugin-n';
21 | import globals from 'globals';
22 | import ts from 'typescript-eslint';
23 |
24 | const parserOptions = {
25 | esm: {
26 | js: {
27 | ecmaFeatures: { modules: true },
28 | ecmaVersion: 'latest',
29 | },
30 | ts: {
31 | projectService: true,
32 | tsconfigRootDir: import.meta.dirname,
33 | },
34 | },
35 | };
36 |
37 | export default ts.config(
38 | js.configs.recommended,
39 | ember.configs.base,
40 | ember.configs.gjs,
41 | ember.configs.gts,
42 | prettier,
43 | /**
44 | * Ignores must be in their own object
45 | * https://eslint.org/docs/latest/use/configure/ignore
46 | */
47 | {
48 | ignores: [
49 | 'blueprints/',
50 | 'dist/',
51 | 'declarations/',
52 | 'node_modules/',
53 | 'coverage/',
54 | '!**/.*',
55 | ],
56 | },
57 | /**
58 | * https://eslint.org/docs/latest/use/configure/configuration-files#configuring-linter-options
59 | */
60 | {
61 | linterOptions: {
62 | reportUnusedDisableDirectives: 'error',
63 | },
64 | },
65 | {
66 | files: ['**/*.js'],
67 | languageOptions: {
68 | parser: babelParser,
69 | },
70 | },
71 | {
72 | files: ['**/*.{js,gjs}'],
73 | languageOptions: {
74 | parserOptions: parserOptions.esm.js,
75 | globals: {
76 | ...globals.browser,
77 | },
78 | },
79 | },
80 | {
81 | files: ['**/*.{ts,gts}'],
82 | languageOptions: {
83 | parser: ember.parser,
84 | parserOptions: parserOptions.esm.ts,
85 | },
86 | extends: [...ts.configs.recommendedTypeChecked, ember.configs.gts],
87 | },
88 | {
89 | files: ['src/**/*'],
90 | plugins: {
91 | import: importPlugin,
92 | },
93 | rules: {
94 | // require relative imports use full extensions
95 | 'import/extensions': ['error', 'always', { ignorePackages: true }],
96 | },
97 | },
98 | /**
99 | * CJS node files
100 | */
101 | {
102 | files: [
103 | '**/*.cjs',
104 | '.prettierrc.js',
105 | '.stylelintrc.js',
106 | '.template-lintrc.js',
107 | 'addon-main.cjs',
108 | ],
109 | plugins: {
110 | n,
111 | },
112 |
113 | languageOptions: {
114 | sourceType: 'script',
115 | ecmaVersion: 'latest',
116 | globals: {
117 | ...globals.node,
118 | },
119 | },
120 | },
121 | /**
122 | * ESM node files
123 | */
124 | {
125 | files: ['**/*.mjs'],
126 | plugins: {
127 | n,
128 | },
129 |
130 | languageOptions: {
131 | sourceType: 'module',
132 | ecmaVersion: 'latest',
133 | parserOptions: parserOptions.esm.js,
134 | globals: {
135 | ...globals.node,
136 | },
137 | },
138 | },
139 | );
140 |
--------------------------------------------------------------------------------
/docs/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * Debugging:
3 | * https://eslint.org/docs/latest/use/configure/debug
4 | * ----------------------------------------------------
5 | *
6 | * Print a file's calculated configuration
7 | *
8 | * npx eslint --print-config path/to/file.js
9 | *
10 | * Inspecting the config
11 | *
12 | * npx eslint --inspect-config
13 | *
14 | */
15 | import globals from 'globals';
16 | import js from '@eslint/js';
17 |
18 | import ts from 'typescript-eslint';
19 |
20 | import ember from 'eslint-plugin-ember/recommended';
21 |
22 | import eslintConfigPrettier from 'eslint-config-prettier';
23 | import qunit from 'eslint-plugin-qunit';
24 | import n from 'eslint-plugin-n';
25 |
26 | import babelParser from '@babel/eslint-parser';
27 |
28 | const parserOptions = {
29 | esm: {
30 | js: {
31 | ecmaFeatures: { modules: true },
32 | ecmaVersion: 'latest',
33 | },
34 | ts: {
35 | projectService: true,
36 | tsconfigRootDir: import.meta.dirname,
37 | },
38 | },
39 | };
40 |
41 | export default ts.config(
42 | js.configs.recommended,
43 | ember.configs.base,
44 | ember.configs.gjs,
45 | ember.configs.gts,
46 | eslintConfigPrettier,
47 | /**
48 | * Ignores must be in their own object
49 | * https://eslint.org/docs/latest/use/configure/ignore
50 | */
51 | {
52 | ignores: [
53 | 'dist/',
54 | 'node_modules/',
55 | 'coverage/',
56 | 'app/components/snippets/*-snippet.*',
57 | '!**/.*',
58 | ],
59 | },
60 | /**
61 | * https://eslint.org/docs/latest/use/configure/configuration-files#configuring-linter-options
62 | */
63 | {
64 | linterOptions: {
65 | reportUnusedDisableDirectives: 'error',
66 | },
67 | },
68 | {
69 | files: ['**/*.js'],
70 | languageOptions: {
71 | parser: babelParser,
72 | },
73 | },
74 | {
75 | files: ['**/*.{js,gjs}'],
76 | languageOptions: {
77 | parserOptions: parserOptions.esm.js,
78 | globals: {
79 | ...globals.browser,
80 | },
81 | },
82 | },
83 | {
84 | files: ['**/*.{ts,gts}'],
85 | languageOptions: {
86 | parser: ember.parser,
87 | parserOptions: parserOptions.esm.ts,
88 | },
89 | extends: [...ts.configs.recommendedTypeChecked, ember.configs.gts],
90 | },
91 | {
92 | files: ['tests/**/*-test.{js,gjs,ts,gts}'],
93 | plugins: {
94 | qunit,
95 | },
96 | },
97 | /**
98 | * CJS node files
99 | */
100 | {
101 | files: [
102 | '**/*.cjs',
103 | 'config/**/*.js',
104 | 'tests/dummy/config/**/*.js',
105 | 'testem.js',
106 | 'testem*.js',
107 | 'index.js',
108 | '.prettierrc.js',
109 | '.stylelintrc.js',
110 | '.template-lintrc.js',
111 | 'ember-cli-build.js',
112 | ],
113 | plugins: {
114 | n,
115 | },
116 |
117 | languageOptions: {
118 | sourceType: 'script',
119 | ecmaVersion: 'latest',
120 | globals: {
121 | ...globals.node,
122 | },
123 | },
124 | },
125 | /**
126 | * ESM node files
127 | */
128 | {
129 | files: ['**/*.mjs'],
130 | plugins: {
131 | n,
132 | },
133 |
134 | languageOptions: {
135 | sourceType: 'module',
136 | ecmaVersion: 'latest',
137 | parserOptions: parserOptions.esm.js,
138 | globals: {
139 | ...globals.node,
140 | },
141 | },
142 | },
143 | );
144 |
--------------------------------------------------------------------------------
/test-app/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * Debugging:
3 | * https://eslint.org/docs/latest/use/configure/debug
4 | * ----------------------------------------------------
5 | *
6 | * Print a file's calculated configuration
7 | *
8 | * npx eslint --print-config path/to/file.js
9 | *
10 | * Inspecting the config
11 | *
12 | * npx eslint --inspect-config
13 | *
14 | */
15 | import globals from 'globals';
16 | import js from '@eslint/js';
17 |
18 | import ts from 'typescript-eslint';
19 |
20 | import ember from 'eslint-plugin-ember/recommended';
21 |
22 | import eslintConfigPrettier from 'eslint-config-prettier';
23 | import qunit from 'eslint-plugin-qunit';
24 | import n from 'eslint-plugin-n';
25 |
26 | import babelParser from '@babel/eslint-parser';
27 |
28 | const parserOptions = {
29 | esm: {
30 | js: {
31 | ecmaFeatures: { modules: true },
32 | ecmaVersion: 'latest',
33 | requireConfigFile: false,
34 | babelOptions: {
35 | plugins: [
36 | [
37 | '@babel/plugin-proposal-decorators',
38 | { decoratorsBeforeExport: true },
39 | ],
40 | ],
41 | },
42 | },
43 | ts: {
44 | projectService: true,
45 | tsconfigRootDir: import.meta.dirname,
46 | },
47 | },
48 | };
49 |
50 | export default ts.config(
51 | js.configs.recommended,
52 | ember.configs.base,
53 | ember.configs.gjs,
54 | ember.configs.gts,
55 | eslintConfigPrettier,
56 | /**
57 | * Ignores must be in their own object
58 | * https://eslint.org/docs/latest/use/configure/ignore
59 | */
60 | {
61 | ignores: ['dist/', 'node_modules/', 'coverage/', '!**/.*'],
62 | },
63 | /**
64 | * https://eslint.org/docs/latest/use/configure/configuration-files#configuring-linter-options
65 | */
66 | {
67 | linterOptions: {
68 | reportUnusedDisableDirectives: 'error',
69 | },
70 | },
71 | {
72 | files: ['**/*.js'],
73 | languageOptions: {
74 | parser: babelParser,
75 | },
76 | },
77 | {
78 | files: ['**/*.{js,gjs}'],
79 | languageOptions: {
80 | parserOptions: parserOptions.esm.js,
81 | globals: {
82 | ...globals.browser,
83 | },
84 | },
85 | },
86 | {
87 | files: ['**/*.{ts,gts}'],
88 | languageOptions: {
89 | parser: ember.parser,
90 | parserOptions: parserOptions.esm.ts,
91 | },
92 | extends: [...ts.configs.recommendedTypeChecked, ember.configs.gts],
93 | },
94 | {
95 | files: ['tests/**/*-test.{js,gjs,ts,gts}'],
96 | plugins: {
97 | qunit,
98 | },
99 | rules: {
100 | '@typescript-eslint/no-this-alias': 'off',
101 | },
102 | },
103 | /**
104 | * CJS node files
105 | */
106 | {
107 | files: [
108 | '**/*.cjs',
109 | 'config/**/*.js',
110 | 'tests/dummy/config/**/*.js',
111 | 'testem.js',
112 | 'testem*.js',
113 | 'index.js',
114 | '.prettierrc.js',
115 | '.stylelintrc.js',
116 | '.template-lintrc.js',
117 | 'ember-cli-build.js',
118 | ],
119 | plugins: {
120 | n,
121 | },
122 |
123 | languageOptions: {
124 | sourceType: 'script',
125 | ecmaVersion: 'latest',
126 | globals: {
127 | ...globals.node,
128 | },
129 | },
130 | },
131 | /**
132 | * ESM node files
133 | */
134 | {
135 | files: ['**/*.mjs'],
136 | plugins: {
137 | n,
138 | },
139 |
140 | languageOptions: {
141 | sourceType: 'module',
142 | ecmaVersion: 'latest',
143 | parserOptions: parserOptions.esm.js,
144 | globals: {
145 | ...globals.node,
146 | },
147 | },
148 | },
149 | );
150 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 | - master
8 | pull_request: {}
9 |
10 | concurrency:
11 | group: ci-${{ github.head_ref || github.ref }}
12 | cancel-in-progress: true
13 |
14 | jobs:
15 | lint:
16 | name: Lint
17 | runs-on: ubuntu-latest
18 | timeout-minutes: 10
19 |
20 | steps:
21 | - uses: actions/checkout@v4
22 | - uses: pnpm/action-setup@v4
23 | - uses: actions/setup-node@v4
24 | with:
25 | node-version: 20.x
26 | cache: pnpm
27 |
28 | - name: 'Install dependencies'
29 | run: pnpm install --frozen-lockfile
30 | - run: pnpm build
31 | - run: pnpm i -f # re-sync injected deps
32 |
33 | - name: Lint
34 | run: pnpm --filter ember-basic-dropdown --filter test-app lint
35 |
36 | test:
37 | name: "Tests"
38 | runs-on: ubuntu-latest
39 | needs: lint
40 |
41 | steps:
42 | - uses: actions/checkout@v4
43 | - uses: pnpm/action-setup@v4
44 |
45 | - name: Install Node
46 | uses: actions/setup-node@v4
47 | with:
48 | node-version: 20.x
49 | cache: pnpm
50 |
51 | - name: Install Dependencies
52 | run: pnpm install --frozen-lockfile
53 |
54 | - run: pnpm build
55 | - run: pnpm i -f # re-sync injected deps
56 |
57 | - name: Run Tests
58 | run: pnpm --filter test-app test:ember
59 |
60 | test-shadow-dom:
61 | name: "Tests Shadow dom"
62 | runs-on: ubuntu-latest
63 | needs: lint
64 |
65 | steps:
66 | - uses: actions/checkout@v4
67 | - uses: pnpm/action-setup@v4
68 |
69 | - name: Install Node
70 | uses: actions/setup-node@v4
71 | with:
72 | node-version: 20.x
73 | cache: 'pnpm'
74 |
75 | - name: Install Dependencies
76 | run: pnpm install --frozen-lockfile
77 |
78 | - run: pnpm build
79 | - run: pnpm i -f # re-sync injected deps
80 |
81 | - name: Run Tests
82 | run: pnpm --filter test-app test:ember-shadow-dom
83 |
84 | floating:
85 | name: "Floating Dependencies"
86 | runs-on: ubuntu-latest
87 | needs: lint
88 |
89 | steps:
90 | - uses: actions/checkout@v4
91 | - uses: pnpm/action-setup@v4
92 | - uses: actions/setup-node@v4
93 | with:
94 | node-version: 20.x
95 | cache: pnpm
96 |
97 | - name: Install Dependencies
98 | run: pnpm install --frozen-lockfile
99 |
100 | - run: pnpm build
101 | - run: pnpm i -f # re-sync injected deps
102 |
103 | - name: Run Tests
104 | run: pnpm --filter test-app test:ember
105 |
106 | try-scenarios:
107 | name: ${{ matrix.try-scenario }}
108 | runs-on: ubuntu-latest
109 | continue-on-error: true
110 | needs: test
111 |
112 | strategy:
113 | fail-fast: false
114 | matrix:
115 | try-scenario:
116 | - ember-lts-4.12
117 | - ember-lts-5.4
118 | - ember-lts-5.8
119 | - ember-lts-5.12
120 | - ember-lts-6.4
121 | - ember-lts-6.8
122 | - ember-release
123 | - ember-beta
124 | - ember-canary
125 | - embroider-safe
126 | - embroider-optimized
127 |
128 | steps:
129 | - uses: actions/checkout@v4
130 | - uses: pnpm/action-setup@v4
131 |
132 | - name: Install Node
133 | uses: actions/setup-node@v4
134 | with:
135 | node-version: 20.x
136 | cache: pnpm
137 |
138 | - name: Install Dependencies
139 | run: pnpm install --frozen-lockfile
140 | - run: pnpm build
141 | - run: pnpm i -f # re-sync injected deps
142 |
143 | - name: Run Tests
144 | env:
145 | EMBER_TRY_SCENARIO: ${{ matrix.try-scenario }}
146 | run: pnpm --filter test-app test:ember-try $EMBER_TRY_SCENARIO --skip-cleanup
147 |
--------------------------------------------------------------------------------
/test-app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-app",
3 | "version": "0.0.0",
4 | "private": true,
5 | "description": "Small description for test-app goes here",
6 | "repository": "",
7 | "license": "MIT",
8 | "author": "",
9 | "directories": {
10 | "doc": "doc",
11 | "test": "tests"
12 | },
13 | "scripts": {
14 | "build": "ember build --environment=production",
15 | "format": "prettier . --cache --write",
16 | "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
17 | "lint:css": "stylelint \"**/*.css\" --allow-empty-input",
18 | "lint:css:fix": "concurrently \"pnpm:lint:css -- --fix\"",
19 | "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && pnpm format",
20 | "lint:format": "prettier . --cache --check",
21 | "lint:hbs": "ember-template-lint .",
22 | "lint:hbs:fix": "ember-template-lint . --fix",
23 | "lint:js": "eslint . --cache",
24 | "lint:js:fix": "eslint . --fix",
25 | "lint:types": "ember-tsc --noEmit",
26 | "start": "ember serve",
27 | "test": "concurrently \"pnpm:lint\" \"pnpm:test:*\" --names \"lint,test:\" --prefixColors auto",
28 | "test:ember": "ember test",
29 | "test:ember-shadow-dom": "ember test shadowDom",
30 | "test:ember-try": "ember try:one"
31 | },
32 | "dependenciesMeta": {
33 | "ember-basic-dropdown": {
34 | "injected": true
35 | }
36 | },
37 | "devDependencies": {
38 | "@babel/core": "^7.28.5",
39 | "@babel/eslint-parser": "^7.28.5",
40 | "@babel/plugin-proposal-decorators": "^7.28.0",
41 | "@ember/optional-features": "^2.3.0",
42 | "@ember/string": "^4.0.1",
43 | "@ember/test-helpers": "^5.4.1",
44 | "@embroider/macros": "^1.19.5",
45 | "@embroider/test-setup": "^4.0.0",
46 | "@eslint/js": "^9.39.1",
47 | "@glimmer/component": "^2.0.0",
48 | "@glimmer/tracking": "^1.1.2",
49 | "@glint/ember-tsc": "^1.0.8",
50 | "@glint/template": "^1.7.3",
51 | "@tsconfig/ember": "^3.0.12",
52 | "@types/qunit": "^2.19.13",
53 | "@types/rsvp": "^4.0.9",
54 | "@warp-drive/ember": "~5.8.0",
55 | "broccoli-asset-rev": "^3.0.0",
56 | "concurrently": "^9.2.1",
57 | "ember-auto-import": "^2.12.0",
58 | "ember-basic-dropdown": "workspace:*",
59 | "ember-cli": "~6.7.0",
60 | "ember-cli-app-version": "^7.0.0",
61 | "ember-cli-babel": "^8.2.0",
62 | "ember-cli-clean-css": "^3.0.0",
63 | "ember-cli-dependency-checker": "^3.3.3",
64 | "ember-cli-deprecation-workflow": "^3.4.0",
65 | "ember-cli-fastboot": "^4.1.5",
66 | "ember-cli-htmlbars": "^6.3.0",
67 | "ember-cli-inject-live-reload": "^2.1.0",
68 | "ember-cli-sass": "^11.0.1",
69 | "ember-cli-sri": "^2.1.1",
70 | "ember-cli-terser": "^4.0.2",
71 | "ember-load-initializers": "^3.0.1",
72 | "ember-modifier": "^4.2.2",
73 | "ember-page-title": "^9.0.3",
74 | "ember-qunit": "^9.0.4",
75 | "ember-resolver": "^13.1.1",
76 | "ember-route-template": "^1.0.3",
77 | "ember-source": "~6.7.0",
78 | "ember-source-channel-url": "^3.0.0",
79 | "ember-template-imports": "^4.3.0",
80 | "ember-template-lint": "^7.9.3",
81 | "ember-truth-helpers": "^5.0.0",
82 | "ember-try": "^4.0.0",
83 | "eslint": "^9.39.1",
84 | "eslint-config-prettier": "^10.1.8",
85 | "eslint-plugin-ember": "^12.7.5",
86 | "eslint-plugin-n": "^17.23.1",
87 | "eslint-plugin-qunit": "^8.2.5",
88 | "globals": "^16.5.0",
89 | "loader.js": "^4.7.0",
90 | "prettier": "^3.7.4",
91 | "prettier-plugin-ember-template-tag": "^2.1.2",
92 | "qunit": "^2.24.3",
93 | "qunit-dom": "^3.5.0",
94 | "stylelint": "^16.26.1",
95 | "stylelint-config-standard": "^39.0.1",
96 | "tracked-built-ins": "^4.0.0",
97 | "typescript": "^5.9.3",
98 | "typescript-eslint": "^8.48.1",
99 | "webpack": "^5.103.0"
100 | },
101 | "engines": {
102 | "node": ">= 20.11"
103 | },
104 | "ember": {
105 | "edition": "octane"
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "docs",
3 | "version": "0.0.0",
4 | "private": true,
5 | "description": "Test app for ember-basic-dropdown addon",
6 | "repository": "",
7 | "license": "MIT",
8 | "author": "",
9 | "directories": {
10 | "doc": "doc",
11 | "test": "tests"
12 | },
13 | "scripts": {
14 | "build": "vite build",
15 | "format": "prettier . --cache --write",
16 | "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
17 | "lint:css": "stylelint \"**/*.css\" --allow-empty-input",
18 | "lint:css:fix": "concurrently \"pnpm:lint:css -- --fix\"",
19 | "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && npm run format",
20 | "lint:format": "prettier . --cache --check",
21 | "lint:hbs": "ember-template-lint .",
22 | "lint:hbs:fix": "ember-template-lint . --fix",
23 | "lint:js": "eslint . --cache",
24 | "lint:js:fix": "eslint . --fix",
25 | "lint:types": "ember-tsc --noEmit",
26 | "start": "vite",
27 | "test": "concurrently \"pnpm:lint\" \"pnpm:test:*\" --names \"lint,test:\" --prefixColors auto",
28 | "test:ember": "vite build --mode development && ember test --path dist"
29 | },
30 | "dependenciesMeta": {
31 | "ember-basic-dropdown": {
32 | "injected": true
33 | }
34 | },
35 | "devDependencies": {
36 | "@babel/core": "^7.28.5",
37 | "@babel/eslint-parser": "^7.28.5",
38 | "@babel/plugin-proposal-decorators": "^7.28.0",
39 | "@babel/plugin-transform-runtime": "^7.28.5",
40 | "@babel/plugin-transform-typescript": "^7.28.5",
41 | "@ember/optional-features": "^2.3.0",
42 | "@ember/string": "^4.0.1",
43 | "@ember/test-helpers": "^5.4.1",
44 | "@embroider/compat": "^4.1.11",
45 | "@embroider/config-meta-loader": "^1.0.0",
46 | "@embroider/core": "^4.4.0",
47 | "@embroider/macros": "^1.19.5",
48 | "@embroider/vite": "^1.4.4",
49 | "@eslint/js": "^9.39.1",
50 | "@glimmer/component": "^2.0.0",
51 | "@glimmer/tracking": "^1.1.2",
52 | "@glint/ember-tsc": "^1.0.8",
53 | "@glint/template": "^1.7.3",
54 | "@rollup/plugin-babel": "^6.1.0",
55 | "@tsconfig/ember": "^3.0.12",
56 | "@types/qunit": "^2.19.13",
57 | "@types/rsvp": "^4.0.9",
58 | "babel-plugin-ember-template-compilation": "^2.3.0",
59 | "concurrently": "^9.2.1",
60 | "decorator-transforms": "^2.3.0",
61 | "ember-auto-import": "^2.12.0",
62 | "ember-cli": "~6.7.0",
63 | "ember-cli-babel": "^8.2.0",
64 | "ember-cli-deprecation-workflow": "^3.4.0",
65 | "ember-cli-htmlbars": "^6.3.0",
66 | "ember-concurrency": "^5.1.0",
67 | "ember-load-initializers": "^3.0.1",
68 | "ember-modifier": "^4.2.2",
69 | "ember-page-title": "^9.0.3",
70 | "ember-qunit": "^9.0.4",
71 | "ember-resolver": "^13.1.1",
72 | "ember-source": "~6.7.0",
73 | "ember-source-channel-url": "^3.0.0",
74 | "ember-template-lint": "^7.9.3",
75 | "ember-truth-helpers": "^5.0.0",
76 | "eslint": "^9.39.1",
77 | "eslint-config-prettier": "^10.1.8",
78 | "eslint-plugin-ember": "^12.7.5",
79 | "eslint-plugin-n": "^17.23.1",
80 | "eslint-plugin-qunit": "^8.2.5",
81 | "globals": "^16.5.0",
82 | "prettier": "^3.7.4",
83 | "prettier-plugin-ember-template-tag": "^2.1.2",
84 | "qunit": "^2.24.3",
85 | "qunit-dom": "^3.5.0",
86 | "rsvp": "^4.8.5",
87 | "sass-embedded": "^1.93.3",
88 | "shiki": "^3.19.0",
89 | "stylelint": "^16.26.1",
90 | "stylelint-config-standard": "^39.0.1",
91 | "tracked-built-ins": "^4.0.0",
92 | "typescript": "^5.9.3",
93 | "typescript-eslint": "^8.48.1",
94 | "vite": "^7.2.6"
95 | },
96 | "engines": {
97 | "node": ">= 20.11"
98 | },
99 | "ember": {
100 | "edition": "octane"
101 | },
102 | "dependencies": {
103 | "ember-basic-dropdown": "workspace:*"
104 | },
105 | "ember-addon": {
106 | "type": "app",
107 | "version": 2
108 | },
109 | "exports": {
110 | "./tests/*": "./tests/*",
111 | "./*": "./app/*"
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/docs/app/styles/look-and-feels/bootstrap.scss:
--------------------------------------------------------------------------------
1 | .trigger-bootstrap-feel {
2 | display: inline-block;
3 | text-align: center;
4 | vertical-align: middle;
5 | cursor: pointer;
6 | border: 1px solid #ccc;
7 | padding: 6px 12px;
8 | line-height: 1.42857143;
9 | border-radius: 4px;
10 | color: #333;
11 | background-color: #fff;
12 | outline: none;
13 | }
14 |
15 | .trigger-bootstrap-feel:focus,
16 | .trigger-bootstrap-feel:hover {
17 | background-color: #d4d4d4;
18 | border-color: #8c8c8c;
19 | }
20 |
21 | .trigger-bootstrap-feel[aria-disabled="true"] {
22 | background-color: #ccc;
23 | color: #666;
24 | border-color: #8c8c8c;
25 | cursor: not-allowed;
26 | &:focus,
27 | &:hover {
28 | border-color: #8c8c8c;
29 | }
30 | }
31 |
32 | .content-bootstrap-feel {
33 | background-color: #fff;
34 | border: 1px solid rgba(0, 0, 0, 0.15);
35 | border-radius: 4px;
36 | box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
37 | padding: 5px;
38 | margin: 2px 0 0;
39 | }
40 |
41 | // Some bootstrap utility classes
42 |
43 | .form-control {
44 | display: block;
45 | width: 100%;
46 | height: 34px;
47 | padding: 6px 12px;
48 | font-size: 14px;
49 | line-height: 1.42857143;
50 | color: #555;
51 | background-color: #fff;
52 | border: 1px solid #ccc;
53 | border-radius: 4px;
54 | background-image: none;
55 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
56 | transition:
57 | border-color ease-in-out 0.15s,
58 | box-shadow ease-in-out 0.15s;
59 | }
60 |
61 | .input-group {
62 | position: relative;
63 | display: table;
64 | border-collapse: separate;
65 | border: 1px solid #ccc;
66 | border-radius: 4px;
67 | overflow: hidden;
68 | }
69 |
70 | .input-group .form-control {
71 | display: table-cell;
72 | border: none;
73 | border-top-right-radius: 0;
74 | border-bottom-right-radius: 0;
75 | }
76 | .form-inline .form-control {
77 | display: inline-block;
78 | margin-bottom: 0;
79 | vertical-align: middle;
80 | width: auto;
81 | float: right;
82 | }
83 | .input-group-addon {
84 | display: table-cell;
85 | padding: 6px 12px;
86 | font-size: 14px;
87 | font-weight: 400;
88 | line-height: 1;
89 | color: #555;
90 | text-align: center;
91 | background-color: #eee;
92 | border-left: 1px solid #ccc;
93 | }
94 | .input-group-addon {
95 | width: 1%;
96 | white-space: nowrap;
97 | vertical-align: middle;
98 | }
99 |
100 | .input-group .form-control:last-child,
101 | .input-group-addon:last-child,
102 | .input-group-btn:first-child > .btn-group:not(:first-child) > .btn,
103 | .input-group-btn:first-child > .btn:not(:first-child),
104 | .input-group-btn:last-child > .btn,
105 | .input-group-btn:last-child > .btn-group > .btn,
106 | .input-group-btn:last-child > .dropdown-toggle {
107 | border-top-left-radius: 0;
108 | border-bottom-left-radius: 0;
109 | }
110 |
111 | .trigger-event-demo.input-group .form-control {
112 | outline: none;
113 | }
114 | .input-group-addon.ember-basic-dropdown-trigger {
115 | outline: none;
116 | color: #444;
117 | &:focus {
118 | background-color: lighten(#66afe9, 25%);
119 | }
120 | }
121 |
122 | .input-group--focused {
123 | border-color: #66afe9;
124 | outline: 0;
125 | box-shadow:
126 | inset 0 1px 1px rgba(0, 0, 0, 0.075),
127 | 0 0 8px rgba(102, 175, 233, 0.6);
128 | }
129 |
130 | .arrow-left-content {
131 | margin-left: 10px;
132 | background: #fff;
133 | border: 1px solid rgba(0, 0, 0, 0.15);
134 | }
135 | .arrow-left-content:after,
136 | .arrow-left-content:before {
137 | right: 100%;
138 | top: 50%;
139 | border: solid transparent;
140 | content: " ";
141 | height: 0;
142 | width: 0;
143 | position: absolute;
144 | pointer-events: none;
145 | }
146 |
147 | .arrow-left-content:after {
148 | border-color: rgba(255, 255, 255, 0);
149 | border-right-color: #fff;
150 | border-width: 10px;
151 | margin-top: -10px;
152 | }
153 | .arrow-left-content:before {
154 | border-color: rgba(0, 0, 0, 0);
155 | border-right-color: rgba(0, 0, 0, 0.15);
156 | border-width: 11px;
157 | margin-top: -11px;
158 | }
159 |
--------------------------------------------------------------------------------
/ember-basic-dropdown/rollup.config.mjs:
--------------------------------------------------------------------------------
1 | import { babel } from '@rollup/plugin-babel';
2 | import { Addon } from '@embroider/addon-dev/rollup';
3 | import sass from 'rollup-plugin-sass';
4 | import postcss from 'postcss';
5 | import { fileURLToPath } from 'node:url';
6 | import { resolve, dirname } from 'node:path';
7 |
8 | const rootDirectory = dirname(fileURLToPath(import.meta.url));
9 | const tsConfig = resolve(rootDirectory, './tsconfig.json');
10 |
11 | const addon = new Addon({
12 | srcDir: 'src',
13 | destDir: 'dist',
14 | });
15 |
16 | export default [
17 | // Compile scss file for js import
18 | {
19 | input: './_index.scss',
20 | output: {
21 | file: './src/vendor/ember-basic-dropdown.js',
22 | assetFileNames: '[name][extname]',
23 | },
24 | plugins: [
25 | sass({
26 | output: './src/vendor/ember-basic-dropdown.css',
27 | }),
28 | ],
29 | },
30 | {
31 | input: './_index.scss',
32 | output: {
33 | file: './src/vendor/ember-basic-dropdown.js',
34 | assetFileNames: '[name][extname]',
35 | },
36 | plugins: [
37 | sass({
38 | processor: (css) =>
39 | postcss()
40 | .process(css, {
41 | from: undefined,
42 | })
43 | .then((result) => result.css),
44 | }),
45 | ],
46 | },
47 | {
48 | // This provides defaults that work well alongside `publicEntrypoints` below.
49 | // You can augment this if you need to.
50 | output: addon.output(),
51 |
52 | plugins: [
53 | // These are the modules that users should be able to import from your
54 | // addon. Anything not listed here may get optimized away.
55 | // By default all your JavaScript modules (**/*.js) will be importable.
56 | // But you are encouraged to tweak this to only cover the modules that make
57 | // up your addon's public API. Also make sure your package.json#exports
58 | // is aligned to the config here.
59 | // See https://github.com/embroider-build/embroider/blob/main/docs/v2-faq.md#how-can-i-define-the-public-exports-of-my-addon
60 | addon.publicEntrypoints([
61 | 'index.js',
62 | 'config.js',
63 | 'styles.js',
64 | 'components/**/*.js',
65 | 'modifiers/**/*.js',
66 | 'test-support/**/*.js',
67 | 'utils/**/*.js',
68 | 'vendor/**/*.js',
69 | ]),
70 |
71 | // These are the modules that should get reexported into the traditional
72 | // "app" tree. Things in here should also be in publicEntrypoints above, but
73 | // not everything in publicEntrypoints necessarily needs to go here.
74 | addon.appReexports(['components/**/*.js', 'modifiers/**/*.js']),
75 |
76 | // Follow the V2 Addon rules about dependencies. Your code can import from
77 | // `dependencies` and `peerDependencies` as well as standard Ember-provided
78 | // package names.
79 | addon.dependencies(),
80 |
81 | // This babel config should *not* apply presets or compile away ES modules.
82 | // It exists only to provide development niceties for you, like automatic
83 | // template colocation.
84 | //
85 | // By default, this will load the actual babel config from the file
86 | // babel.config.json.
87 | babel({
88 | extensions: ['.js', '.gjs', '.ts', '.gts'],
89 | babelHelpers: 'bundled',
90 | }),
91 |
92 | // Ensure that standalone .hbs files are properly integrated as Javascript.
93 | addon.hbs(),
94 |
95 | // Ensure that .gjs files are properly integrated as Javascript
96 | addon.gjs(),
97 |
98 | // Emit .d.ts declaration files
99 | addon.declarations(
100 | 'declarations',
101 | `pnpm ember-tsc --declaration --project ${tsConfig}`,
102 | ),
103 |
104 | // addons are allowed to contain imports of .css files, which we want rollup
105 | // to leave alone and keep in the published output.
106 | addon.keepAssets(['**/*.css']),
107 |
108 | // Remove leftover build artifacts when starting a new build.
109 | addon.clean(),
110 | ],
111 | },
112 | ];
113 |
--------------------------------------------------------------------------------
/docs/app/templates/public-pages.gts:
--------------------------------------------------------------------------------
1 | import Component from '@glimmer/component';
2 | import { service } from '@ember/service';
3 | import { action } from '@ember/object';
4 | import { htmlSafe } from '@ember/template';
5 | import calculatePosition, {
6 | type CalculatePositionOptions,
7 | type CalculatePositionResult,
8 | } from 'ember-basic-dropdown/utils/calculate-position';
9 | import { LinkTo } from '@ember/routing';
10 | import BasicDropdown, {
11 | type BasicDropdownDefaultBlock,
12 | } from 'ember-basic-dropdown/components/basic-dropdown';
13 | import { on } from '@ember/modifier';
14 | import { fn } from '@ember/helper';
15 | import type RouterService from '@ember/routing/router-service';
16 |
17 | const colors = ['orange', 'blue', 'purple', 'line', 'pink', 'red', 'brown'];
18 | const brands = colors.map((c) => `${c}-brand`);
19 |
20 | export default class extends Component {
21 | @service declare router: RouterService;
22 |
23 | colors = colors;
24 | backgrounds = this.colors.map((c) => htmlSafe(`background-color: ${c}`));
25 | color = undefined;
26 |
27 | // Actions
28 | @action
29 | preventIfNotInIndex(e: Event) {
30 | if (this.router.currentRouteName !== 'public-pages.index') {
31 | e.stopImmediatePropagation();
32 | }
33 | }
34 |
35 | setBrandColor(color: string, dropdown: BasicDropdownDefaultBlock<'span'>) {
36 | brands.forEach((klass) => document.body.classList.remove(klass));
37 | document.body.classList.add(`${color}-brand`);
38 | dropdown.actions.close();
39 | }
40 |
41 | // Methods
42 | calculatePosition(
43 | trigger: HTMLElement,
44 | content: HTMLElement,
45 | destination: HTMLElement,
46 | options: CalculatePositionOptions,
47 | ): CalculatePositionResult {
48 | const pos = calculatePosition(trigger, content, destination, options);
49 |
50 | if (pos.style.top) {
51 | pos.style.top += 3;
52 | } else {
53 | pos.style.top = 3;
54 | }
55 |
56 | return pos;
57 | }
58 |
59 |
60 |
108 | {{outlet}}
109 |
110 |
116 |
117 | }
118 |
--------------------------------------------------------------------------------
/docs/app/components/snippets/content-events-1.gts:
--------------------------------------------------------------------------------
1 | import Component from '@glimmer/component';
2 | import { action } from '@ember/object';
3 | import { didCancel, task, timeout } from 'ember-concurrency';
4 | import BasicDropdown, {
5 | type BasicDropdownDefaultBlock,
6 | } from 'ember-basic-dropdown/components/basic-dropdown';
7 | import { on } from '@ember/modifier';
8 | import { fn } from '@ember/helper';
9 |
10 | export default class extends Component {
11 | notifications = [
12 | { text: 'Edward' },
13 | { text: 'Jonathan' },
14 | { text: 'Tom' },
15 | { text: 'Eric' },
16 | ];
17 |
18 | // Actions
19 | prevent(e: Event) {
20 | return e.stopImmediatePropagation();
21 | }
22 |
23 | @action
24 | open(dropdown: BasicDropdownDefaultBlock) {
25 | void this.closeLaterTask.cancelAll();
26 | dropdown.actions.open();
27 | }
28 |
29 | @action
30 | async closeLater(dropdown: BasicDropdownDefaultBlock) {
31 | try {
32 | await this.closeLaterTask.perform(dropdown);
33 | } catch (e) {
34 | if (!didCancel(e)) {
35 | // re-throw the non-cancelation error
36 | throw e;
37 | }
38 | }
39 | }
40 |
41 | closeLaterTask = task(async (dropdown: BasicDropdownDefaultBlock) => {
42 | await timeout(200);
43 | dropdown.actions.close();
44 | });
45 |
46 |
47 |
48 |
94 |
95 |
96 | }
97 |
--------------------------------------------------------------------------------
/test-app/tests/unit/utils/scroll-helpers-test.ts:
--------------------------------------------------------------------------------
1 | import {
2 | distributeScroll,
3 | getAvailableScroll,
4 | getScrollDeltas,
5 | getScrollLineHeight,
6 | DOM_DELTA_LINE,
7 | DOM_DELTA_PAGE,
8 | DOM_DELTA_PIXEL,
9 | LINES_PER_PAGE,
10 | } from 'ember-basic-dropdown/utils/scroll-helpers';
11 | import { module, test } from 'qunit';
12 |
13 | module('Unit | Utility | scroll helpers', function () {
14 | test('getScrollLineHeight', function (assert) {
15 | // Depends on device and settings.
16 | const result = getScrollLineHeight();
17 |
18 | // Also blows up on 0, which is an invalid value.
19 | assert.ok(result, 'did not throw errors');
20 | });
21 |
22 | test('getAvailableScroll', function (assert) {
23 | const container = document.createElement('div');
24 | container.style.height = '100px';
25 | container.style.overflow = 'auto';
26 | const child = document.createElement('div');
27 | child.style.height = '300px';
28 | child.style.overflow = 'auto';
29 | const grandchild = document.createElement('div');
30 | grandchild.style.height = '500px';
31 | grandchild.innerText = 'asdf';
32 |
33 | child.appendChild(grandchild);
34 | container.appendChild(child);
35 | document.body.appendChild(container);
36 |
37 | let result;
38 | container.scrollTop = 0;
39 | result = getAvailableScroll(child, container);
40 | assert.strictEqual(result.deltaYNegative, 0);
41 | assert.strictEqual(result.deltaYPositive, 400);
42 |
43 | container.scrollTop = 20;
44 | result = getAvailableScroll(child, container);
45 | assert.strictEqual(result.deltaYNegative, -20);
46 | assert.strictEqual(result.deltaYPositive, 380);
47 |
48 | result = getAvailableScroll(grandchild, container);
49 | assert.strictEqual(result.deltaYNegative, -20);
50 | assert.strictEqual(result.deltaYPositive, 380);
51 | });
52 |
53 | test('distributeScroll', function (assert) {
54 | const container = document.createElement('div');
55 | container.style.height = '100px';
56 | container.style.overflow = 'auto';
57 | const child = document.createElement('div');
58 | child.style.height = '300px';
59 | child.style.overflow = 'auto';
60 | const grandchild = document.createElement('div');
61 | grandchild.style.height = '500px';
62 | grandchild.innerText = 'asdf';
63 |
64 | child.appendChild(grandchild);
65 | container.appendChild(child);
66 | document.body.appendChild(container);
67 |
68 | container.scrollTop = 20;
69 | child.scrollTop = 20;
70 |
71 | distributeScroll(0, -30, grandchild, container);
72 | assert.strictEqual(container.scrollTop, 10);
73 | assert.strictEqual(child.scrollTop, 0);
74 |
75 | distributeScroll(0, 40, grandchild, container);
76 | assert.strictEqual(container.scrollTop, 10);
77 | assert.strictEqual(child.scrollTop, 40);
78 | });
79 |
80 | test('getScrollDeltas DOM_DELTA_PIXEL', function (assert) {
81 | const originalDeltaX = 25;
82 | const originalDeltaY = 15;
83 | const { deltaX, deltaY } = getScrollDeltas({
84 | deltaX: originalDeltaX,
85 | deltaY: originalDeltaY,
86 | deltaMode: DOM_DELTA_PIXEL,
87 | });
88 | assert.strictEqual(deltaX, originalDeltaX);
89 | assert.strictEqual(deltaY, originalDeltaY);
90 | });
91 |
92 | test('getScrollDeltas DOM_DELTA_LINE', function (assert) {
93 | const scrollLineHeight = getScrollLineHeight() || 0;
94 | const originalDeltaX = 25;
95 | const originalDeltaY = 15;
96 | const { deltaX, deltaY } = getScrollDeltas({
97 | deltaX: originalDeltaX,
98 | deltaY: originalDeltaY,
99 | deltaMode: DOM_DELTA_LINE,
100 | });
101 | assert.strictEqual(deltaX, originalDeltaX * scrollLineHeight);
102 | assert.strictEqual(deltaY, originalDeltaY * scrollLineHeight);
103 | });
104 |
105 | test('getScrollDeltas DOM_DELTA_PAGE', function (assert) {
106 | const scrollLineHeight = getScrollLineHeight() || 0;
107 | const originalDeltaX = 25;
108 | const originalDeltaY = 15;
109 | const { deltaX, deltaY } = getScrollDeltas({
110 | deltaX: originalDeltaX,
111 | deltaY: originalDeltaY,
112 | deltaMode: DOM_DELTA_PAGE,
113 | });
114 | assert.strictEqual(
115 | deltaX,
116 | originalDeltaX * scrollLineHeight * LINES_PER_PAGE,
117 | );
118 | assert.strictEqual(
119 | deltaY,
120 | originalDeltaY * scrollLineHeight * LINES_PER_PAGE,
121 | );
122 | });
123 | });
124 |
--------------------------------------------------------------------------------