@neovici/cosmoz-autocomplete 3.0.3 → 3.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 (5) hide show
  1. package/cosmoz-listbox.js +101 -60
  2. package/lib/autocomplete.css.js +0 -27
  3. package/lib/autocomplete.js +3 -3
  4. package/lib/use-autocomplete.js +7 -2
  5. package/package.json +1 -1
package/cosmoz-listbox.js CHANGED
@@ -6,70 +6,111 @@ import { spreadProps } from '@open-wc/lit-helpers';
6
6
  import { useListbox, properties } from './lib/use-listbox';
7
7
  import { scrollIntoViewIfNeeded } from './lib/utils';
8
8
 
9
- const Listbox = host => {
10
- const { index, items, renderItem, height, itemHeight } = useListbox(host);
9
+ const svg =
10
+ 'data:image/svg+xml,%3Csvg width=\'11\' height=\'8\' viewBox=\'0 0 11 8\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath ' +
11
+ 'd=\'M9.5 1L5.20039 7.04766L1.66348 3.46152\' stroke=\'white\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3C/svg%3E',
12
+ Listbox = (host) => {
13
+ const { index, items, renderItem, height, itemHeight } = useListbox(host);
11
14
 
12
- useEffect(() => {
13
- scrollIntoViewIfNeeded(host.shadowRoot.querySelector('[data-index="' + index + '"]:not(:hover)'), host);
14
- }, [index]);
15
+ useEffect(() => {
16
+ scrollIntoViewIfNeeded(
17
+ host.shadowRoot.querySelector(
18
+ '[data-index="' + index + '"]:not(:hover)'
19
+ ),
20
+ host
21
+ );
22
+ }, [index]);
15
23
 
16
- return html`
17
- <style>
18
- :host {
19
- position: fixed;
20
- min-height: ${ itemHeight }px;
21
- z-index: 1000;
22
- height: ${ height }px;
23
- font-family: var(--paper-font-subhead_-_font-family, initial);
24
- background: #fff;
25
- min-width: 72px;
26
- box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
27
- 0 1px 8px 0 rgba(0, 0, 0, 0.12),
28
- 0 3px 3px -2px rgba(0, 0, 0, 0.4);
29
- }
30
- .items {
31
- position: relative;
32
- overflow-y: auto;
33
- height: 100%;
34
- }
35
- .item {
36
- font-size: 14px;
37
- line-height: ${ itemHeight }px;
38
- height: ${ itemHeight }px;
39
- padding: 0 20px;
40
- box-sizing: border-box;
41
- width: 100%;
42
- cursor: pointer;
43
- overflow: hidden;
44
- text-overflow: ellipsis;
45
- white-space: nowrap;
46
- transition: background 0.2s;
47
- color: var(--cosmoz-listbox-color, #101010);
48
- }
24
+ return html` <style>
25
+ :host {
26
+ position: fixed;
27
+ min-height: ${itemHeight}px;
28
+ z-index: 1000;
29
+ height: ${height}px;
30
+ font-family: var(--paper-font-subhead_-_font-family, initial);
31
+ background: #fff;
32
+ min-width: 72px;
33
+ box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
34
+ 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
35
+ }
36
+ .items {
37
+ position: relative;
38
+ overflow-y: auto;
39
+ height: 100%;
40
+ }
41
+ .item {
42
+ font-size: 14px;
43
+ line-height: ${itemHeight}px;
44
+ height: ${itemHeight}px;
45
+ padding: 0 20px;
46
+ box-sizing: border-box;
47
+ width: 100%;
48
+ cursor: pointer;
49
+ overflow: hidden;
50
+ text-overflow: ellipsis;
51
+ white-space: nowrap;
52
+ transition: background 0.2s;
53
+ color: var(--cosmoz-listbox-color, #101010);
54
+ }
49
55
 
50
- .item[data-index="${ index }"]{
51
- background: var(--cosmoz-listbox-active-color, var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1)));
52
- }
56
+ .item[data-index='${index}'] {
57
+ background: var(
58
+ --cosmoz-listbox-active-color,
59
+ var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1))
60
+ );
61
+ }
62
+ .sizer {
63
+ position: relative;
64
+ visibility: hidden;
65
+ opacity: 0;
66
+ pointer-events: none;
67
+ z-index: -1;
68
+ height: 0;
69
+ width: auto;
70
+ padding: 0 20px;
71
+ overflow: hidden;
72
+ max-width: inherit;
73
+ font-size: 14px;
74
+ }
75
+ .items > :first-child {
76
+ line-height: 1;
77
+ }
53
78
 
54
- .sizer {
55
- position: relative;
56
- visibility: hidden;
57
- opacity:0;
58
- pointer-events: none;
59
- z-index: -1;
60
- height: 0;
61
- width: auto;
62
- padding: 0 20px;
63
- overflow: hidden;
64
- max-width: inherit;
65
- font-size: 14px;
66
- }
67
- .items > :first-child { line-height: 1;}
68
- ${ host.styles || '' }
69
- </style>
70
- <div class="items">${ scroll({ items, renderItem }) }</div>`;
71
- };
79
+ :host(:not([multi])) .item[aria-selected] {
80
+ background: var(--cosmoz-listbox-single-selection-color, #dadada);
81
+ }
82
+
83
+ :host([multi]) .item {
84
+ padding-left: 0;
85
+ }
86
+ :host([multi]) .item::before {
87
+ content: '';
88
+ font-size: 0;
89
+ padding: 7.5px;
90
+ margin: 0 8px;
91
+ background: #fff;
92
+ border: 1px solid #d6d6d5;
93
+ border-radius: 4px;
94
+ vertical-align: top;
95
+ }
96
+ :host([multi]) .item[aria-selected]::before {
97
+ border-color: #5881f6;
98
+ background: url('${svg}') #5881f6 no-repeat 50%;
99
+ }
100
+ :host([multi]) .sizer {
101
+ padding-left: 33px;
102
+ }
103
+ </style>
104
+ <div class="items">${scroll({ items, renderItem })}</div>`;
105
+ };
72
106
 
73
107
  customElements.define('cosmoz-listbox', component(Listbox));
74
108
 
75
- export const listbox = thru => portal(html`<cosmoz-listbox part="listbox" ...=${ spreadProps(props(properties)(thru)) }>`);
109
+ export const listbox = ({ multi, ...thru }) =>
110
+ portal(
111
+ html`<cosmoz-listbox
112
+ part="listbox"
113
+ ?multi=${multi}
114
+ ...=${spreadProps(props(properties)(thru))}
115
+ ></cosmoz-listbox>`
116
+ );
package/lib/autocomplete.css.js CHANGED
@@ -1,31 +1,4 @@
1
1
  import { tagged as css } from '@neovici/cosmoz-utils';
2
- const svg = 'data:image/svg+xml,%3Csvg width=\'11\' height=\'8\' viewBox=\'0 0 11 8\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath '
3
- + 'd=\'M9.5 1L5.20039 7.04766L1.66348 3.46152\' stroke=\'white\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3C/svg%3E';
4
-
5
- export const listboxStyle = css`
6
- .item {
7
- padding-left: 0;
8
- }
9
- .item::before {
10
- content: "";
11
- font-size: 0;
12
- padding: 7.5px;
13
- margin: 0 8px;
14
- background: #fff;
15
- border: 1px solid #d6d6d5;
16
- border-radius: 4px;
17
- vertical-align: top;
18
- }
19
-
20
- .item[aria-selected]::before {
21
- border-color: #5881f6;
22
- background: url("${ svg }") #5881f6 no-repeat 50%;
23
- }
24
-
25
- .sizer {
26
- padding-left: 33px;
27
- }
28
- `;
29
2
 
30
3
  export default css`
31
4
  :host {
package/lib/autocomplete.js CHANGED
@@ -7,7 +7,7 @@ import { array } from '@neovici/cosmoz-utils/lib/array';
7
7
  import '@neovici/cosmoz-input';
8
8
  import { useAutocomplete } from './use-autocomplete';
9
9
  import { listbox } from '../cosmoz-listbox';
10
- import style, { listboxStyle } from './autocomplete.css';
10
+ import style from './autocomplete.css';
11
11
 
12
12
  const
13
13
  blank = () => nothing,
@@ -53,7 +53,7 @@ const
53
53
  limit,
54
54
  showSingle,
55
55
  items$,
56
- values$
56
+ values$,
57
57
  } = props,
58
58
  host = useHost(),
59
59
 
@@ -64,7 +64,7 @@ const
64
64
  ...props,
65
65
  anchor,
66
66
  items,
67
- styles: !isOne ? listboxStyle : undefined
67
+ multi: !isOne,
68
68
  }) || nothing));
69
69
 
70
70
  return html`
package/lib/use-autocomplete.js CHANGED
@@ -22,6 +22,7 @@ const
22
22
  text,
23
23
  onChange: _onChange,
24
24
  onText: _onText,
25
+ onSelect,
25
26
  limit,
26
27
  source,
27
28
  textProperty,
@@ -58,7 +59,7 @@ const
58
59
  onText
59
60
  });
60
61
 
61
- const meta = useMeta({ onText, onChange, value, limit, keepQuery, setClosed });
62
+ const meta = useMeta({ onText, onChange, value, limit, keepQuery, setClosed, onSelect });
62
63
 
63
64
  return {
64
65
  query,
@@ -79,7 +80,11 @@ const
79
80
  setClosed(false);
80
81
  }, [onText, text, setClosed]),
81
82
  onSelect: useCallback(newVal => {
82
- const { onChange, onText, limit, value: val, keepQuery, keepOpened } = meta;
83
+ const { onSelect} = meta;
84
+ if(onSelect) {
85
+ return onSelect(newVal, meta);
86
+ }
87
+ const { onChange, onText, limit, value: val, keepQuery, keepOpened, setClosed } = meta;
83
88
  if (!keepQuery) {
84
89
  onText('');
85
90
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-autocomplete",
3
- "version": "3.0.3",
3
+ "version": "3.1.0",
4
4
  "description": "A autocomplete input web component",
5
5
  "keywords": [
6
6
  "lit-html",