@umbraco-ui/uui-combobox 1.0.0-rc.0 → 1.0.0-rc.3

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 (4) hide show
  1. package/README.md +5 -1
  2. package/lib/index.js +19 -21
  3. package/lib/uui-combobox.element.d.ts +2 -2
  4. package/package.json +7 -7
package/README.md CHANGED
@@ -1,9 +1,13 @@
1
1
  # uui-combobox
2
2
 
3
- ![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-combobox?logoColor=%231B264F)
3
+ [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-combobox?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-combobox)
4
4
 
5
5
  Umbraco style combo-box component.
6
6
 
7
+ ### See it in action
8
+
9
+ Preview the component on [Storybook](https://uui.umbraco.com/?path=/story/uui-combobox)
10
+
7
11
  ## Installation
8
12
 
9
13
  ### ES imports
package/lib/index.js CHANGED
@@ -32,7 +32,7 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
32
32
  this._onMouseDown = () => requestAnimationFrame(() => this._input.focus());
33
33
  this._onBlur = () => requestAnimationFrame(() => {
34
34
  if (document.activeElement !== this) {
35
- this._close();
35
+ this._onClose();
36
36
  }
37
37
  });
38
38
  this._onInput = (e) => {
@@ -43,12 +43,11 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
43
43
  this._open();
44
44
  };
45
45
  this._onChange = (e) => {
46
- var _a, _b;
46
+ var _a;
47
47
  e.stopImmediatePropagation();
48
48
  this.value = ((_a = this._comboboxList) == null ? void 0 : _a.value) || "";
49
- this._displayValue = ((_b = this._comboboxList) == null ? void 0 : _b.displayValue) || "";
50
49
  this.search = this.value ? this.search : "";
51
- this._close();
50
+ this._onClose();
52
51
  this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
53
52
  };
54
53
  this._open = () => {
@@ -56,14 +55,12 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
56
55
  return;
57
56
  this.open = true;
58
57
  };
59
- this._close = () => {
60
- var _a;
58
+ this._onClose = () => {
61
59
  if (!this.open)
62
60
  return;
63
61
  this.open = false;
64
- this._displayValue = ((_a = this._comboboxList) == null ? void 0 : _a.displayValue) || "";
65
- this._input.value = this._displayValue;
66
62
  this.search = "";
63
+ this._input.value = this._displayValue;
67
64
  this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
68
65
  };
69
66
  this._onKeyDown = (e) => {
@@ -75,19 +72,18 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
75
72
  this._open();
76
73
  }
77
74
  if (e.key === "Escape" || e.key === "Enter") {
78
- this._close();
75
+ this._onClose();
79
76
  }
80
77
  };
81
- this._clear = (e) => {
78
+ this._onClear = (e) => {
82
79
  if (e.key && e.key !== "Enter")
83
80
  return;
84
81
  e.preventDefault();
85
82
  e.stopImmediatePropagation();
86
- this._displayValue = "";
87
- this._input.value = this._displayValue;
88
- this.search = "";
89
83
  this.value = "";
90
- this._comboboxList.value = this.value;
84
+ this.search = "";
85
+ this._input.value = this._displayValue;
86
+ this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
91
87
  this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
92
88
  };
93
89
  this._renderInput = () => {
@@ -97,7 +93,6 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
97
93
  label="combobox-input"
98
94
  type="text"
99
95
  .value=${this._displayValue}
100
- .placeholder=${this._displayValue}
101
96
  autocomplete="off"
102
97
  @click=${this._open}
103
98
  @input=${this._onInput}
@@ -116,12 +111,12 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
116
111
  return html`<uui-button
117
112
  id="clear-button"
118
113
  class=${this.value || this.search ? "--show" : ""}
119
- @click=${this._clear}
120
- @keydown=${this._clear}
114
+ @click=${this._onClear}
115
+ @keydown=${this._onClear}
121
116
  label="clear"
122
117
  slot="append"
123
118
  compact
124
- style="height: 100%; --uui-button-padding-top-factor: 0; --uui-button-padding-bottom-factor: 0;">
119
+ style="height: 100%;">
125
120
  <uui-icon name="remove" .fallback=${iconRemove.strings[0]}></uui-icon>
126
121
  </uui-button>`;
127
122
  };
@@ -137,10 +132,10 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
137
132
  return this._value;
138
133
  }
139
134
  set value(newValue) {
140
- super.value = newValue;
141
135
  if (typeof newValue === "string") {
142
136
  this._updateValue(newValue);
143
137
  }
138
+ super.value = newValue;
144
139
  }
145
140
  get search() {
146
141
  return this._search;
@@ -173,7 +168,10 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
173
168
  if (list) {
174
169
  this._comboboxList = list;
175
170
  this._comboboxList.for = this;
176
- this._comboboxList.addEventListener(UUIComboboxListEvent.CHANGE, this._onChange);
171
+ this._comboboxList.addEventListener(
172
+ UUIComboboxListEvent.CHANGE,
173
+ this._onChange
174
+ );
177
175
  if (typeof this.value === "string") {
178
176
  await this.updateComplete;
179
177
  this._updateValue(this.value);
@@ -195,7 +193,7 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
195
193
  <uui-popover
196
194
  .open=${this.open}
197
195
  .margin=${-1}
198
- @close=${() => this._close()}>
196
+ @close=${() => this._onClose()}>
199
197
  ${this._renderInput()} ${this._renderDropdown()}
200
198
  </uui-popover>
201
199
  `;
package/lib/uui-combobox.element.d.ts CHANGED
@@ -43,9 +43,9 @@ export declare class UUIComboboxElement extends UUIComboboxElement_base {
43
43
  private _onInput;
44
44
  private _onChange;
45
45
  private _open;
46
- private _close;
46
+ private _onClose;
47
47
  private _onKeyDown;
48
- private _clear;
48
+ private _onClear;
49
49
  private _renderInput;
50
50
  private _renderCaret;
51
51
  private _renderClearButton;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umbraco-ui/uui-combobox",
3
- "version": "1.0.0-rc.0",
3
+ "version": "1.0.0-rc.3",
4
4
  "license": "MIT",
5
5
  "keywords": [
6
6
  "Umbraco",
@@ -30,11 +30,11 @@
30
30
  "custom-elements.json"
31
31
  ],
32
32
  "dependencies": {
33
- "@umbraco-ui/uui-base": "1.0.0-rc.0",
34
- "@umbraco-ui/uui-button": "1.0.0-rc.0",
35
- "@umbraco-ui/uui-combobox-list": "1.0.0-rc.0",
36
- "@umbraco-ui/uui-icon": "1.0.0-rc.0",
37
- "@umbraco-ui/uui-scroll-container": "1.0.0-rc.0"
33
+ "@umbraco-ui/uui-base": "1.0.0-rc.3",
34
+ "@umbraco-ui/uui-button": "1.0.0-rc.3",
35
+ "@umbraco-ui/uui-combobox-list": "1.0.0-rc.3",
36
+ "@umbraco-ui/uui-icon": "1.0.0-rc.3",
37
+ "@umbraco-ui/uui-scroll-container": "1.0.0-rc.3"
38
38
  },
39
39
  "scripts": {
40
40
  "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -45,5 +45,5 @@
45
45
  "access": "public"
46
46
  },
47
47
  "homepage": "https://uui.umbraco.com/?path=/story/uui-combobox",
48
- "gitHead": "b03d833ef438156f3e87d3ffa29a4dcca7d560cd"
48
+ "gitHead": "7d643a3d5f7204efbc3aaad83889c2fd5200af73"
49
49
  }