@neovici/cosmoz-dropdown 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/cosmoz-dropdown.js +64 -27
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-dropdown",
3
- "version": "2.0.0",
3
+ "version": "2.1.0",
4
4
  "description": "A simple dropdown web component",
5
5
  "keywords": [
6
6
  "lit-html",
package/src/cosmoz-dropdown.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import { component, useCallback } from 'haunted';
2
2
  import { html, nothing } from 'lit-html';
3
+ import { when } from 'lit-html/directives/when.js';
3
4
  import { usePosition } from './use-position';
4
5
  import { useHostFocus } from './use-focus';
5
6
 
6
- const preventDefault = e => e.preventDefault(),
7
- Content = host => {
7
+ const preventDefault = (e) => e.preventDefault(),
8
+ Content = (host) => {
8
9
  const { anchor, placement, render } = host;
9
10
  usePosition({ anchor, placement, host });
10
11
  return html` <style>
@@ -16,17 +17,22 @@ const preventDefault = e => e.preventDefault(),
16
17
  padding: var(--cosmoz-dropdown-spacing, 0px);
17
18
  z-index: var(--cosmoz-dropdown-z-index, 2);
18
19
  }
19
- .content {
20
+ .wrap {
20
21
  background: var(--cosmoz-dropdown-bg-color, #fff);
21
- box-shadow: var(--cosmoz-dropdown-box-shadow, 0px 3px 4px 2px rgba(0, 0, 0, 0.1));
22
+ box-shadow: var(
23
+ --cosmoz-dropdown-box-shadow,
24
+ 0px 3px 4px 2px rgba(0, 0, 0, 0.1)
25
+ );
22
26
  }
23
27
  ::slotted(*) {
24
28
  display: block;
25
29
  }
26
30
  </style>
27
- <div class="content" part="content"><slot></slot>${ render?.() || nothing }</div>`;
31
+ <div class="wrap" part="wrap">
32
+ <slot></slot>${render?.() || nothing}
33
+ </div>`;
28
34
  },
29
- Dropdown = host => {
35
+ Dropdown = (host) => {
30
36
  const { placement, render } = host,
31
37
  anchor = useCallback(() => host.shadowRoot.querySelector('.anchor'), []),
32
38
  { active, onToggle } = useHostFocus(host);
@@ -42,32 +48,59 @@ const preventDefault = e => e.preventDefault(),
42
48
  position: relative;
43
49
  pointer-events: auto;
44
50
  outline: none;
45
- background: var(--cosmoz-dropdown-button-bg-color, var(--cosmoz-button-bg-color, #101010));
46
- color: var(--cosmoz-dropdown-button-color, var(--cosmoz-button-color, #fff));
51
+ background: var(
52
+ --cosmoz-dropdown-button-bg-color,
53
+ var(--cosmoz-button-bg-color, #101010)
54
+ );
55
+ color: var(
56
+ --cosmoz-dropdown-button-color,
57
+ var(--cosmoz-button-color, #fff)
58
+ );
47
59
  border-radius: var(--cosmoz-dropdown-button-radius, 50%);
48
- width: var(--cosmoz-dropdown-button-width, var(--cosmoz-dropdown-button-size, 40px));
49
- height: var(--cosmoz-dropdown-button-height, var(--cosmoz-dropdown-button-size, 40px));
60
+ width: var(
61
+ --cosmoz-dropdown-button-width,
62
+ var(--cosmoz-dropdown-button-size, 40px)
63
+ );
64
+ height: var(
65
+ --cosmoz-dropdown-button-height,
66
+ var(--cosmoz-dropdown-button-size, 40px)
67
+ );
50
68
  padding: var(--cosmoz-dropdown-button-padding);
51
69
  }
52
70
  button:hover {
53
- background: var(--cosmoz-dropdown-button-hover-bg-color, var(--cosmoz-button-hover-bg-color, #3A3F44));
71
+ background: var(
72
+ --cosmoz-dropdown-button-hover-bg-color,
73
+ var(--cosmoz-button-hover-bg-color, #3a3f44)
74
+ );
54
75
  }
55
76
  ::slotted(svg) {
56
77
  pointer-events: none;
57
78
  }
58
79
  </style>
59
80
  <div class="anchor" part="anchor">
60
- <button @click=${ onToggle } @mousedown=${ preventDefault } part="button" id="dropdownButton">
81
+ <button
82
+ @click=${onToggle}
83
+ @mousedown=${preventDefault}
84
+ part="button"
85
+ id="dropdownButton"
86
+ >
61
87
  <slot name="button">...</slot>
62
88
  </button>
63
89
  </div>
64
- ${ active && html`
65
- <cosmoz-dropdown-content
66
- id="dropdown" part="dropdown" exportparts="content: dropdown-content"
67
- .anchor=${ anchor } .placement=${ placement } .render=${ render }
68
- >
69
- <slot></slot>
70
- </cosmoz-dropdown-content>` || [] }
90
+ ${when(
91
+ active,
92
+ () =>
93
+ html` <cosmoz-dropdown-content
94
+ id="content"
95
+ part="content"
96
+ exportparts="wrap, content"
97
+ .anchor=${anchor}
98
+ .placement=${placement}
99
+ .render=${render}
100
+ >
101
+ <slot></slot>
102
+ </cosmoz-dropdown-content>`
103
+ )}
71
104
  `;
72
105
  },
73
106
  List = () => html`
@@ -95,7 +128,10 @@ const preventDefault = e => e.preventDefault(),
95
128
  }
96
129
 
97
130
  ::slotted(:not(slot):hover) {
98
- background: var(--cosmoz-dropdown-menu-hover-color, var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1)));
131
+ background: var(
132
+ --cosmoz-dropdown-menu-hover-color,
133
+ var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1))
134
+ );
99
135
  }
100
136
 
101
137
  ::slotted(:not(slot)[disabled]) {
@@ -105,13 +141,14 @@ const preventDefault = e => e.preventDefault(),
105
141
  </style>
106
142
  <slot></slot>
107
143
  `,
108
- Menu = host => html`
109
- <cosmoz-dropdown .placement=${ host.placement }
110
- part="dropdown"
111
- exportparts=${ ['anchor', 'button', 'dropdown'].map(p => `${ p }: dropdown-${ p }`).concat(['dropdown-content']).join(', ') }>
112
- <slot name="button" slot="button"></slot>
113
- <cosmoz-dropdown-list><slot></slot></cosmoz-dropdown-list>
114
- </cosmoz-dropdown>`;
144
+ Menu = ({ placement }) => html` <cosmoz-dropdown
145
+ .placement=${placement}
146
+ part="dropdown"
147
+ exportparts="anchor, button, content, wrap, dropdown"
148
+ >
149
+ <slot name="button" slot="button"></slot>
150
+ <cosmoz-dropdown-list><slot></slot></cosmoz-dropdown-list>
151
+ </cosmoz-dropdown>`;
115
152
 
116
153
  customElements.define('cosmoz-dropdown-content', component(Content));
117
154
  customElements.define('cosmoz-dropdown', component(Dropdown));