@onereach/ui-components 4.13.0 → 4.14.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.
@@ -6,12 +6,13 @@ import __vue_component__$2 from '../OrErrorV3/OrError.js';
6
6
  import __vue_component__$3 from '../OrExpansionPanelV3/OrExpansionPanel.js';
7
7
  import __vue_component__$4 from '../OrHintV3/OrHint.js';
8
8
  import __vue_component__$5 from '../OrIconV3/OrIcon.js';
9
- import __vue_component__$6 from '../OrInputV3/OrInput.js';
10
- import __vue_component__$7 from '../OrInputBoxV3/OrInputBox.js';
11
- import __vue_component__$8 from '../OrLabelV3/OrLabel.js';
12
- import __vue_component__$9 from '../OrMenuItemV3/OrMenuItem.js';
13
- import __vue_component__$a from '../OrPopoverV3/OrPopover.js';
14
- import __vue_component__$b from '../OrTagV3/OrTag.js';
9
+ import __vue_component__$6 from '../OrIconButtonV3/OrIconButton.js';
10
+ import __vue_component__$7 from '../OrInputV3/OrInput.js';
11
+ import __vue_component__$8 from '../OrInputBoxV3/OrInputBox.js';
12
+ import __vue_component__$9 from '../OrLabelV3/OrLabel.js';
13
+ import __vue_component__$a from '../OrMenuItemV3/OrMenuItem.js';
14
+ import __vue_component__$b from '../OrPopoverV3/OrPopover.js';
15
+ import __vue_component__$c from '../OrTagV3/OrTag.js';
15
16
  import { useOverflow } from '../../hooks/useOverflow.js';
16
17
  import { DropdownClose } from '../../directives/dropdown-close.js';
17
18
  import { DropdownOpen } from '../../directives/dropdown-open.js';
@@ -31,14 +32,13 @@ import '../../index-ec92055d.js';
31
32
  import '../OrHintV3/styles.js';
32
33
  import '../OrIconV3/props.js';
33
34
  import '../OrIconV3/styles.js';
34
- import '../OrInputV3/props.js';
35
- import '../OrInputV3/styles.js';
36
- import '../OrIconButtonV3/OrIconButton.js';
37
35
  import '../OrIconButtonV3/props.js';
38
36
  import '../OrIconButtonV3/styles.js';
39
37
  import '../OrTooltipV3/OrTooltip.js';
40
38
  import '../OrTooltipV3/styles.js';
41
39
  import '../OrPopoverV3/props.js';
40
+ import '../OrInputV3/props.js';
41
+ import '../OrInputV3/styles.js';
42
42
  import '../OrLoaderV3/OrLoader.js';
43
43
  import '../../index-760079e7.js';
44
44
  import '../OrLoaderV3/props.js';
@@ -70,12 +70,13 @@ var script = defineComponent({
70
70
  OrExpansionPanel: __vue_component__$3,
71
71
  OrHint: __vue_component__$4,
72
72
  OrIcon: __vue_component__$5,
73
- OrInput: __vue_component__$6,
74
- OrInputBox: __vue_component__$7,
75
- OrLabel: __vue_component__$8,
76
- OrMenuItem: __vue_component__$9,
77
- OrPopover: __vue_component__$a,
78
- OrTag: __vue_component__$b
73
+ OrIconButton: __vue_component__$6,
74
+ OrInput: __vue_component__$7,
75
+ OrInputBox: __vue_component__$8,
76
+ OrLabel: __vue_component__$9,
77
+ OrMenuItem: __vue_component__$a,
78
+ OrPopover: __vue_component__$b,
79
+ OrTag: __vue_component__$c
79
80
  },
80
81
  directives: {
81
82
  DropdownClose,
@@ -389,13 +390,25 @@ var __vue_render__ = function () {
389
390
  })] : [_c('span', {
390
391
  class: _vm.placeholderStyles
391
392
  }, [_vm._v(_vm._s(_vm.placeholder))])]]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n +" + _vm._s(_vm.outerItems.length) + "\n ")] : _vm._e(), _vm._v(" "), _c('div', {
392
- class: ['layout-inline-row']
393
- }, [_c('OrIcon', {
393
+ class: ['layout-inline-row', 'gap-sm']
394
+ }, [!_vm.multiple && _vm.proxyModelValue ? [_c('OrIconButton', {
395
+ attrs: {
396
+ "icon": 'close',
397
+ "color": 'inherit',
398
+ "disabled": _vm.readonly || _vm.disabled
399
+ },
400
+ on: {
401
+ "click": function ($event) {
402
+ $event.stopPropagation();
403
+ return _vm.$emit('update:modelValue', undefined);
404
+ }
405
+ }
406
+ })] : _vm._e(), _vm._v(" "), _c('OrIcon', {
394
407
  attrs: {
395
408
  "icon": _vm.popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down',
396
409
  "variant": 'outlined'
397
410
  }
398
- })], 1), _vm._v(" "), _c('OrPopover', {
411
+ })], 2), _vm._v(" "), _c('OrPopover', {
399
412
  ref: "popover",
400
413
  attrs: {
401
414
  "variant": 'auto',
@@ -25,9 +25,6 @@ import '../../hooks/usePopoverState.js';
25
25
  import '../../index-ec92055d.js';
26
26
  import '../OrHintV3/OrHint.js';
27
27
  import '../OrHintV3/styles.js';
28
- import '../OrInputV3/OrInput.js';
29
- import '../OrInputV3/props.js';
30
- import '../OrInputV3/styles.js';
31
28
  import '../OrIconButtonV3/OrIconButton.js';
32
29
  import '../OrIconButtonV3/props.js';
33
30
  import '../OrIconButtonV3/styles.js';
@@ -48,6 +45,9 @@ import 'vue';
48
45
  import '../../hooks/useElevation.js';
49
46
  import '../../utils/isVisible.js';
50
47
  import '../../hooks/useResponsive/useResponsive.js';
48
+ import '../OrInputV3/OrInput.js';
49
+ import '../OrInputV3/props.js';
50
+ import '../OrInputV3/styles.js';
51
51
  import '../OrInputBoxV3/OrInputBox.js';
52
52
  import '../OrInputBoxV3/styles.js';
53
53
  import '../OrLoaderV3/OrLoader.js';
@@ -7,23 +7,25 @@ import './components/OrExpansionPanelV3/OrExpansionPanel.js';
7
7
  import { s as script$3 } from './OrExpansionPanel.vue_vue_type_script_lang-fa265d9a.js';
8
8
  import './components/OrHintV3/OrHint.js';
9
9
  import './components/OrIconV3/OrIcon.js';
10
+ import './components/OrIconButtonV3/OrIconButton.js';
10
11
  import './components/OrInputV3/OrInput.js';
11
12
  import './components/OrInputBoxV3/OrInputBox.js';
12
13
  import './components/OrLabelV3/OrLabel.js';
13
14
  import './components/OrMenuItemV3/OrMenuItem.js';
14
15
  import './components/OrPopoverV3/OrPopover.js';
15
16
  import './components/OrTagV3/OrTag.js';
16
- import { s as script$b } from './OrTag.vue_vue_type_script_lang-a04676a1.js';
17
+ import { s as script$c } from './OrTag.vue_vue_type_script_lang-a04676a1.js';
17
18
  import { useOverflow } from './hooks/useOverflow.js';
18
19
  import { s as script$1 } from './OrCheckbox.vue_vue_type_script_lang-a27167e0.js';
19
20
  import { s as script$2 } from './OrError.vue_vue_type_script_lang-df7b5e32.js';
20
21
  import { s as script$4 } from './OrHint.vue_vue_type_script_lang-0f5e8377.js';
21
22
  import { s as script$5 } from './OrIcon.vue_vue_type_script_lang-73f9cc63.js';
22
- import { s as script$6 } from './OrInput.vue_vue_type_script_lang-9696e091.js';
23
- import { s as script$7 } from './OrInputBox.vue_vue_type_script_lang-49fb179a.js';
24
- import { s as script$8 } from './OrLabel.vue_vue_type_script_lang-3e11ab8a.js';
25
- import { s as script$9 } from './OrMenuItem.vue_vue_type_script_lang-1785286a.js';
26
- import { s as script$a } from './OrPopover.vue_vue_type_script_lang-d15ec5cb.js';
23
+ import { s as script$6 } from './OrIconButton.vue_vue_type_script_lang-fafcb023.js';
24
+ import { s as script$7 } from './OrInput.vue_vue_type_script_lang-9696e091.js';
25
+ import { s as script$8 } from './OrInputBox.vue_vue_type_script_lang-49fb179a.js';
26
+ import { s as script$9 } from './OrLabel.vue_vue_type_script_lang-3e11ab8a.js';
27
+ import { s as script$a } from './OrMenuItem.vue_vue_type_script_lang-1785286a.js';
28
+ import { s as script$b } from './OrPopover.vue_vue_type_script_lang-d15ec5cb.js';
27
29
  import { DropdownClose } from './directives/dropdown-close.js';
28
30
  import { DropdownOpen } from './directives/dropdown-open.js';
29
31
  import { InputBoxSize } from './components/OrInputBoxV3/props.js';
@@ -37,12 +39,13 @@ var script = defineComponent({
37
39
  OrExpansionPanel: script$3,
38
40
  OrHint: script$4,
39
41
  OrIcon: script$5,
40
- OrInput: script$6,
41
- OrInputBox: script$7,
42
- OrLabel: script$8,
43
- OrMenuItem: script$9,
44
- OrPopover: script$a,
45
- OrTag: script$b
42
+ OrIconButton: script$6,
43
+ OrInput: script$7,
44
+ OrInputBox: script$8,
45
+ OrLabel: script$9,
46
+ OrMenuItem: script$a,
47
+ OrPopover: script$b,
48
+ OrTag: script$c
46
49
  },
47
50
  directives: {
48
51
  DropdownClose,
@@ -1,6 +1,6 @@
1
- import { s as script } from '../../OrSelect.vue_vue_type_script_lang-7ee0cf54.js';
2
- export { s as default } from '../../OrSelect.vue_vue_type_script_lang-7ee0cf54.js';
3
- import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, createVNode, withModifiers, vShow } from 'vue';
1
+ import { s as script } from '../../OrSelect.vue_vue_type_script_lang-cd73a3d2.js';
2
+ export { s as default } from '../../OrSelect.vue_vue_type_script_lang-cd73a3d2.js';
3
+ import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, withModifiers, createVNode, vShow } from 'vue';
4
4
  import 'vue-demi';
5
5
  import '../../utils/isEmptyValue.js';
6
6
  import './styles.js';
@@ -31,11 +31,6 @@ import '../../index-f4d8e24c.js';
31
31
  import '../OrHintV3/OrHint.js';
32
32
  import '../../OrHint.vue_vue_type_script_lang-0f5e8377.js';
33
33
  import '../OrHintV3/styles.js';
34
- import '../OrInputV3/OrInput.js';
35
- import '../../OrInput.vue_vue_type_script_lang-9696e091.js';
36
- import '../OrInputV3/props.js';
37
- import '../OrInputBoxV3/props.js';
38
- import '../OrInputV3/styles.js';
39
34
  import '../OrIconButtonV3/OrIconButton.js';
40
35
  import '../../OrIconButton.vue_vue_type_script_lang-fafcb023.js';
41
36
  import '../OrIconButtonV3/props.js';
@@ -61,6 +56,11 @@ import '../../OrTeleport.vue3.vue_vue_type_script_lang-a6ce162e.js';
61
56
  import '../../hooks/useElevation.js';
62
57
  import '../../utils/isVisible.js';
63
58
  import '../../hooks/useResponsive/useResponsive.js';
59
+ import '../OrInputV3/OrInput.js';
60
+ import '../../OrInput.vue_vue_type_script_lang-9696e091.js';
61
+ import '../OrInputV3/props.js';
62
+ import '../OrInputBoxV3/props.js';
63
+ import '../OrInputV3/styles.js';
64
64
  import '../OrInputBoxV3/OrInputBox.js';
65
65
  import '../../OrInputBox.vue_vue_type_script_lang-49fb179a.js';
66
66
  import '../OrInputBoxV3/styles.js';
@@ -85,7 +85,7 @@ const _hoisted_2 = {
85
85
  class: "truncate"
86
86
  };
87
87
  const _hoisted_3 = {
88
- class: /*#__PURE__*/normalizeClass(['layout-inline-row'])
88
+ class: /*#__PURE__*/normalizeClass(['layout-inline-row', 'gap-sm'])
89
89
  };
90
90
  const _hoisted_4 = {
91
91
  class: /*#__PURE__*/normalizeClass(['contents'])
@@ -96,6 +96,7 @@ const _hoisted_5 = {
96
96
  function render(_ctx, _cache, $props, $setup, $data, $options) {
97
97
  const _component_OrLabel = resolveComponent("OrLabel");
98
98
  const _component_OrTag = resolveComponent("OrTag");
99
+ const _component_OrIconButton = resolveComponent("OrIconButton");
99
100
  const _component_OrIcon = resolveComponent("OrIcon");
100
101
  const _component_OrInput = resolveComponent("OrInput");
101
102
  const _component_OrCheckbox = resolveComponent("OrCheckbox");
@@ -167,7 +168,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
167
168
  class: normalizeClass(_ctx.placeholderStyles)
168
169
  }, toDisplayString(_ctx.placeholder), 3 /* TEXT, CLASS */))], 64 /* STABLE_FRAGMENT */))], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), _ctx.multiple && _ctx.outerItems.length > 0 ? (openBlock(), createElementBlock(Fragment, {
169
170
  key: 0
170
- }, [createTextVNode(" +" + toDisplayString(_ctx.outerItems.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3, [createVNode(_component_OrIcon, {
171
+ }, [createTextVNode(" +" + toDisplayString(_ctx.outerItems.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3, [!_ctx.multiple && _ctx.proxyModelValue ? (openBlock(), createBlock(_component_OrIconButton, {
172
+ key: 0,
173
+ icon: 'close',
174
+ color: 'inherit',
175
+ disabled: _ctx.readonly || _ctx.disabled,
176
+ onClick: _cache[2] || (_cache[2] = withModifiers($event => _ctx.$emit('update:modelValue', undefined), ["stop"]))
177
+ }, null, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true), createVNode(_component_OrIcon, {
171
178
  icon: _ctx.popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down',
172
179
  variant: 'outlined'
173
180
  }, null, 8 /* PROPS */, ["icon"])]), createVNode(_component_OrPopover, {
@@ -182,7 +189,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
182
189
  default: withCtx(() => [_ctx.enableSearch ? (openBlock(), createBlock(_component_OrInput, {
183
190
  key: 0,
184
191
  modelValue: _ctx.searchText,
185
- "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.searchText = $event),
192
+ "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.searchText = $event),
186
193
  type: 'search',
187
194
  placeholder: 'Search',
188
195
  size: 's',
@@ -207,7 +214,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
207
214
  option: option
208
215
  }, () => [createVNode(_component_OrCheckbox, {
209
216
  modelValue: _ctx.proxyModelValue,
210
- "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.proxyModelValue = $event),
217
+ "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.proxyModelValue = $event),
211
218
  value: option.value,
212
219
  label: option.label,
213
220
  "label-variant": 'input'
@@ -248,7 +255,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
248
255
  option: option
249
256
  }, () => [createVNode(_component_OrCheckbox, {
250
257
  modelValue: _ctx.proxyModelValue,
251
- "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.proxyModelValue = $event),
258
+ "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => _ctx.proxyModelValue = $event),
252
259
  value: option.value,
253
260
  label: option.label,
254
261
  "label-variant": 'input'
@@ -1,4 +1,4 @@
1
- export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-7ee0cf54.js';
1
+ export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-cd73a3d2.js';
2
2
  export { InputBoxSize as SelectSize } from '../OrInputBoxV3/props.js';
3
3
  import 'vue-demi';
4
4
  import '../../utils/isEmptyValue.js';
@@ -31,10 +31,6 @@ import '../../index-f4d8e24c.js';
31
31
  import '../OrHintV3/OrHint.js';
32
32
  import '../../OrHint.vue_vue_type_script_lang-0f5e8377.js';
33
33
  import '../OrHintV3/styles.js';
34
- import '../OrInputV3/OrInput.js';
35
- import '../../OrInput.vue_vue_type_script_lang-9696e091.js';
36
- import '../OrInputV3/props.js';
37
- import '../OrInputV3/styles.js';
38
34
  import '../OrIconButtonV3/OrIconButton.js';
39
35
  import '../../OrIconButton.vue_vue_type_script_lang-fafcb023.js';
40
36
  import '../OrIconButtonV3/props.js';
@@ -60,6 +56,10 @@ import '../../OrTeleport.vue3.vue_vue_type_script_lang-a6ce162e.js';
60
56
  import '../../hooks/useElevation.js';
61
57
  import '../../utils/isVisible.js';
62
58
  import '../../hooks/useResponsive/useResponsive.js';
59
+ import '../OrInputV3/OrInput.js';
60
+ import '../../OrInput.vue_vue_type_script_lang-9696e091.js';
61
+ import '../OrInputV3/props.js';
62
+ import '../OrInputV3/styles.js';
63
63
  import '../OrInputBoxV3/OrInputBox.js';
64
64
  import '../../OrInputBox.vue_vue_type_script_lang-49fb179a.js';
65
65
  import '../OrInputBoxV3/styles.js';
@@ -114,7 +114,7 @@ export { s as OrSearchV3 } from '../OrSearch.vue_vue_type_script_lang-9d98ed4d.j
114
114
  export { s as OrSegmentedControlV3 } from '../OrSegmentedControl.vue_vue_type_script_lang-3a7df112.js';
115
115
  export { SegmentedControlSize } from './OrSegmentedControlV3/props.js';
116
116
  export { s as OrSelect } from '../OrSelect.vue_vue_type_script_lang-b8b014f6.js';
117
- export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-7ee0cf54.js';
117
+ export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-cd73a3d2.js';
118
118
  export { s as OrSidebar } from '../OrSidebar.vue_vue_type_script_lang-cac8e5b7.js';
119
119
  export { OrSidebarSide } from './OrSidebar/constants.js';
120
120
  export { s as OrSidebarV3 } from '../OrSidebar.vue_vue_type_script_lang-a79c5901.js';
@@ -76,7 +76,7 @@ export { s as OrSegmentedControlV3 } from './OrSegmentedControl.vue_vue_type_scr
76
76
  import './components/OrSelect/OrSelect.js';
77
77
  export { s as OrSelect } from './OrSelect.vue_vue_type_script_lang-b8b014f6.js';
78
78
  import './components/OrSelectV3/OrSelect.js';
79
- export { s as OrSelectV3 } from './OrSelect.vue_vue_type_script_lang-7ee0cf54.js';
79
+ export { s as OrSelectV3 } from './OrSelect.vue_vue_type_script_lang-cd73a3d2.js';
80
80
  import './components/OrSidebar/OrSidebar.js';
81
81
  export { s as OrSidebar } from './OrSidebar.vue_vue_type_script_lang-cac8e5b7.js';
82
82
  import './components/OrSidebarV3/OrSidebar.js';
@@ -9,14 +9,15 @@ import { _ as __vue_component__$1, i as isEmptyValue } from './OrCheckbox-43615f
9
9
  import { _ as __vue_component__$2 } from './OrError-4ffc1c39.js';
10
10
  import { _ as __vue_component__$3 } from './OrExpansionPanel-f1d8fcc9.js';
11
11
  import { _ as __vue_component__$4 } from './OrHint-aa221198.js';
12
+ import { _ as __vue_component__$6 } from './OrIconButton-6fcd20b0.js';
12
13
  import { _ as __vue_component__$5 } from './OrIcon-d35a84d8.js';
13
- import { _ as __vue_component__$7 } from './OrInputBox-11227ecd.js';
14
+ import { _ as __vue_component__$8 } from './OrInputBox-11227ecd.js';
14
15
  import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-1715021a.js';
15
- import { _ as __vue_component__$6 } from './OrInput-386e9352.js';
16
- import { _ as __vue_component__$8 } from './OrLabel-63380256.js';
17
- import { _ as __vue_component__$9 } from './OrMenuItem-f877508d.js';
18
- import { _ as __vue_component__$a } from './OrPopover-71380b24.js';
19
- import { _ as __vue_component__$b } from './OrTag-21683774.js';
16
+ import { _ as __vue_component__$7 } from './OrInput-386e9352.js';
17
+ import { _ as __vue_component__$9 } from './OrLabel-63380256.js';
18
+ import { _ as __vue_component__$a } from './OrMenuItem-f877508d.js';
19
+ import { _ as __vue_component__$b } from './OrPopover-71380b24.js';
20
+ import { _ as __vue_component__$c } from './OrTag-21683774.js';
20
21
  import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
21
22
 
22
23
  const SelectRoot = [
@@ -77,12 +78,13 @@ var script = defineComponent({
77
78
  OrExpansionPanel: __vue_component__$3,
78
79
  OrHint: __vue_component__$4,
79
80
  OrIcon: __vue_component__$5,
80
- OrInput: __vue_component__$6,
81
- OrInputBox: __vue_component__$7,
82
- OrLabel: __vue_component__$8,
83
- OrMenuItem: __vue_component__$9,
84
- OrPopover: __vue_component__$a,
85
- OrTag: __vue_component__$b
81
+ OrIconButton: __vue_component__$6,
82
+ OrInput: __vue_component__$7,
83
+ OrInputBox: __vue_component__$8,
84
+ OrLabel: __vue_component__$9,
85
+ OrMenuItem: __vue_component__$a,
86
+ OrPopover: __vue_component__$b,
87
+ OrTag: __vue_component__$c
86
88
  },
87
89
  directives: {
88
90
  DropdownClose,
@@ -396,13 +398,25 @@ var __vue_render__ = function () {
396
398
  })] : [_c('span', {
397
399
  class: _vm.placeholderStyles
398
400
  }, [_vm._v(_vm._s(_vm.placeholder))])]]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n +" + _vm._s(_vm.outerItems.length) + "\n ")] : _vm._e(), _vm._v(" "), _c('div', {
399
- class: ['layout-inline-row']
400
- }, [_c('OrIcon', {
401
+ class: ['layout-inline-row', 'gap-sm']
402
+ }, [!_vm.multiple && _vm.proxyModelValue ? [_c('OrIconButton', {
403
+ attrs: {
404
+ "icon": 'close',
405
+ "color": 'inherit',
406
+ "disabled": _vm.readonly || _vm.disabled
407
+ },
408
+ on: {
409
+ "click": function ($event) {
410
+ $event.stopPropagation();
411
+ return _vm.$emit('update:modelValue', undefined);
412
+ }
413
+ }
414
+ })] : _vm._e(), _vm._v(" "), _c('OrIcon', {
401
415
  attrs: {
402
416
  "icon": _vm.popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down',
403
417
  "variant": 'outlined'
404
418
  }
405
- })], 1), _vm._v(" "), _c('OrPopover', {
419
+ })], 2), _vm._v(" "), _c('OrPopover', {
406
420
  ref: "popover",
407
421
  attrs: {
408
422
  "variant": 'auto',
@@ -78,7 +78,7 @@ export { _ as OrSearch } from '../OrSearch-e2941d35.js';
78
78
  export { _ as OrSearchV3 } from '../OrSearch-7f444d5c.js';
79
79
  export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-d4e32f80.js';
80
80
  export { _ as OrSelect } from '../OrSelect-49239b74.js';
81
- export { _ as OrSelectV3 } from '../OrSelect-4c115702.js';
81
+ export { _ as OrSelectV3 } from '../OrSelect-ca46131d.js';
82
82
  export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-c56a9221.js';
83
83
  export { _ as OrSidebarV3 } from '../OrSidebar-41c869c1.js';
84
84
  export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-0d2e41c8.js';
@@ -1,4 +1,4 @@
1
- export { _ as OrSelectV3 } from '../../OrSelect-4c115702.js';
1
+ export { _ as OrSelectV3 } from '../../OrSelect-ca46131d.js';
2
2
  export { I as SelectSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-1715021a.js';
3
3
  import 'vue-demi';
4
4
  import '../../dropdown-open-e1f90e0a.js';
@@ -17,19 +17,19 @@ import '../../OrExpansionPanel-f1d8fcc9.js';
17
17
  import '../../usePopoverState-b92c698b.js';
18
18
  import '../../OrIcon-d35a84d8.js';
19
19
  import '../../OrHint-aa221198.js';
20
- import '../../OrInputBox-11227ecd.js';
21
- import '../../OrInput-386e9352.js';
22
- import '../../useResponsive-a02e95b7.js';
23
- import '../../useValidationAttributes-d1abbe34.js';
24
20
  import '../../OrIconButton-6fcd20b0.js';
25
21
  import '../../OrTooltip-a32c182a.js';
26
22
  import '../../OrPopover-71380b24.js';
27
23
  import '@floating-ui/dom';
28
24
  import '../../useElevation-a50ec347.js';
25
+ import '../../useResponsive-a02e95b7.js';
29
26
  import '../../OrBottomSheet-6bc632c4.js';
30
27
  import '../../OrOverlay-948346df.js';
31
28
  import '../../OrTeleport.vue2-424c7f33.js';
32
29
  import 'portal-vue';
30
+ import '../../OrInputBox-11227ecd.js';
31
+ import '../../OrInput-386e9352.js';
32
+ import '../../useValidationAttributes-d1abbe34.js';
33
33
  import '../../OrLoader-b0c381f9.js';
34
34
  import '../../OrMenuItem-f877508d.js';
35
35
  import '../../OrTag-21683774.js';
@@ -78,7 +78,7 @@ export { _ as OrSearch } from './OrSearch-e2941d35.js';
78
78
  export { _ as OrSearchV3 } from './OrSearch-7f444d5c.js';
79
79
  export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-d4e32f80.js';
80
80
  export { _ as OrSelect } from './OrSelect-49239b74.js';
81
- export { _ as OrSelectV3 } from './OrSelect-4c115702.js';
81
+ export { _ as OrSelectV3 } from './OrSelect-ca46131d.js';
82
82
  export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-c56a9221.js';
83
83
  export { _ as OrSidebarV3 } from './OrSidebar-41c869c1.js';
84
84
  export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-0d2e41c8.js';
@@ -9,14 +9,15 @@ import { s as script$1, i as isEmptyValue } from './OrCheckbox-bb06af0f.js';
9
9
  import { s as script$2 } from './OrError-c01d0c29.js';
10
10
  import { s as script$3 } from './OrExpansionPanel-891154e6.js';
11
11
  import { s as script$4 } from './OrHint-06ab89d7.js';
12
+ import { s as script$6 } from './OrIconButton-80f76b73.js';
12
13
  import { s as script$5 } from './OrIcon-62793572.js';
13
- import { s as script$7, I as InputBoxSize } from './OrInputBox-32b37b17.js';
14
- import { s as script$6 } from './OrInput-05ac6369.js';
15
- import { s as script$8 } from './OrLabel-4da56db0.js';
16
- import { s as script$9 } from './OrMenuItem-0ccfe074.js';
17
- import { s as script$a } from './OrPopover-94dc1203.js';
18
- import { s as script$b } from './OrTag-d882091d.js';
19
- import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, createVNode, withModifiers, vShow } from 'vue';
14
+ import { s as script$8, I as InputBoxSize } from './OrInputBox-32b37b17.js';
15
+ import { s as script$7 } from './OrInput-05ac6369.js';
16
+ import { s as script$9 } from './OrLabel-4da56db0.js';
17
+ import { s as script$a } from './OrMenuItem-0ccfe074.js';
18
+ import { s as script$b } from './OrPopover-94dc1203.js';
19
+ import { s as script$c } from './OrTag-d882091d.js';
20
+ import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, withModifiers, createVNode, vShow } from 'vue';
20
21
 
21
22
  const SelectRoot = [
22
23
  // Layout
@@ -76,12 +77,13 @@ var script = defineComponent({
76
77
  OrExpansionPanel: script$3,
77
78
  OrHint: script$4,
78
79
  OrIcon: script$5,
79
- OrInput: script$6,
80
- OrInputBox: script$7,
81
- OrLabel: script$8,
82
- OrMenuItem: script$9,
83
- OrPopover: script$a,
84
- OrTag: script$b
80
+ OrIconButton: script$6,
81
+ OrInput: script$7,
82
+ OrInputBox: script$8,
83
+ OrLabel: script$9,
84
+ OrMenuItem: script$a,
85
+ OrPopover: script$b,
86
+ OrTag: script$c
85
87
  },
86
88
  directives: {
87
89
  DropdownClose,
@@ -310,7 +312,7 @@ const _hoisted_2 = {
310
312
  class: "truncate"
311
313
  };
312
314
  const _hoisted_3 = {
313
- class: /*#__PURE__*/normalizeClass(['layout-inline-row'])
315
+ class: /*#__PURE__*/normalizeClass(['layout-inline-row', 'gap-sm'])
314
316
  };
315
317
  const _hoisted_4 = {
316
318
  class: /*#__PURE__*/normalizeClass(['contents'])
@@ -321,6 +323,7 @@ const _hoisted_5 = {
321
323
  function render(_ctx, _cache, $props, $setup, $data, $options) {
322
324
  const _component_OrLabel = resolveComponent("OrLabel");
323
325
  const _component_OrTag = resolveComponent("OrTag");
326
+ const _component_OrIconButton = resolveComponent("OrIconButton");
324
327
  const _component_OrIcon = resolveComponent("OrIcon");
325
328
  const _component_OrInput = resolveComponent("OrInput");
326
329
  const _component_OrCheckbox = resolveComponent("OrCheckbox");
@@ -392,7 +395,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
392
395
  class: normalizeClass(_ctx.placeholderStyles)
393
396
  }, toDisplayString(_ctx.placeholder), 3 /* TEXT, CLASS */))], 64 /* STABLE_FRAGMENT */))], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), _ctx.multiple && _ctx.outerItems.length > 0 ? (openBlock(), createElementBlock(Fragment, {
394
397
  key: 0
395
- }, [createTextVNode(" +" + toDisplayString(_ctx.outerItems.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3, [createVNode(_component_OrIcon, {
398
+ }, [createTextVNode(" +" + toDisplayString(_ctx.outerItems.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3, [!_ctx.multiple && _ctx.proxyModelValue ? (openBlock(), createBlock(_component_OrIconButton, {
399
+ key: 0,
400
+ icon: 'close',
401
+ color: 'inherit',
402
+ disabled: _ctx.readonly || _ctx.disabled,
403
+ onClick: _cache[2] || (_cache[2] = withModifiers($event => _ctx.$emit('update:modelValue', undefined), ["stop"]))
404
+ }, null, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true), createVNode(_component_OrIcon, {
396
405
  icon: _ctx.popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down',
397
406
  variant: 'outlined'
398
407
  }, null, 8 /* PROPS */, ["icon"])]), createVNode(_component_OrPopover, {
@@ -407,7 +416,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
407
416
  default: withCtx(() => [_ctx.enableSearch ? (openBlock(), createBlock(_component_OrInput, {
408
417
  key: 0,
409
418
  modelValue: _ctx.searchText,
410
- "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.searchText = $event),
419
+ "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.searchText = $event),
411
420
  type: 'search',
412
421
  placeholder: 'Search',
413
422
  size: 's',
@@ -432,7 +441,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
432
441
  option: option
433
442
  }, () => [createVNode(_component_OrCheckbox, {
434
443
  modelValue: _ctx.proxyModelValue,
435
- "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.proxyModelValue = $event),
444
+ "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.proxyModelValue = $event),
436
445
  value: option.value,
437
446
  label: option.label,
438
447
  "label-variant": 'input'
@@ -473,7 +482,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
473
482
  option: option
474
483
  }, () => [createVNode(_component_OrCheckbox, {
475
484
  modelValue: _ctx.proxyModelValue,
476
- "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.proxyModelValue = $event),
485
+ "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => _ctx.proxyModelValue = $event),
477
486
  value: option.value,
478
487
  label: option.label,
479
488
  "label-variant": 'input'
@@ -75,7 +75,7 @@ export { s as OrSearch } from '../OrSearch-d0c8aca7.js';
75
75
  export { s as OrSearchV3 } from '../OrSearch-daab0e0b.js';
76
76
  export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-c8eb217d.js';
77
77
  export { s as OrSelect } from '../OrSelect-60205145.js';
78
- export { s as OrSelectV3 } from '../OrSelect-cb32bd48.js';
78
+ export { s as OrSelectV3 } from '../OrSelect-4c76e702.js';
79
79
  export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-aaf73310.js';
80
80
  export { s as OrSidebarV3 } from '../OrSidebar-fadc2431.js';
81
81
  export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-e0cbeaa5.js';
@@ -1,4 +1,4 @@
1
- export { s as OrSelectV3 } from '../../OrSelect-cb32bd48.js';
1
+ export { s as OrSelectV3 } from '../../OrSelect-4c76e702.js';
2
2
  export { I as SelectSize } from '../../OrInputBox-32b37b17.js';
3
3
  import 'vue-demi';
4
4
  import '../../dropdown-open-e1f90e0a.js';
@@ -17,17 +17,17 @@ import '../../OrExpansionPanel-891154e6.js';
17
17
  import '../../usePopoverState-b92c698b.js';
18
18
  import '../../OrIcon-62793572.js';
19
19
  import '../../OrHint-06ab89d7.js';
20
- import '../../OrInput-05ac6369.js';
21
- import '../../useResponsive-a02e95b7.js';
22
- import '../../useValidationAttributes-d1abbe34.js';
23
20
  import '../../OrIconButton-80f76b73.js';
24
21
  import '../../OrTooltip-d7d40e38.js';
25
22
  import '../../OrPopover-94dc1203.js';
26
23
  import '@floating-ui/dom';
27
24
  import '../../useElevation-a50ec347.js';
25
+ import '../../useResponsive-a02e95b7.js';
28
26
  import '../../OrBottomSheet-79db2626.js';
29
27
  import '../../OrOverlay-489fdf76.js';
30
28
  import '../../OrTeleport.vue3-8099178c.js';
29
+ import '../../OrInput-05ac6369.js';
30
+ import '../../useValidationAttributes-d1abbe34.js';
31
31
  import '../../OrLoader-b79022da.js';
32
32
  import '../../OrMenuItem-0ccfe074.js';
33
33
  import '../../OrTag-d882091d.js';
@@ -75,7 +75,7 @@ export { s as OrSearch } from './OrSearch-d0c8aca7.js';
75
75
  export { s as OrSearchV3 } from './OrSearch-daab0e0b.js';
76
76
  export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-c8eb217d.js';
77
77
  export { s as OrSelect } from './OrSelect-60205145.js';
78
- export { s as OrSelectV3 } from './OrSelect-cb32bd48.js';
78
+ export { s as OrSelectV3 } from './OrSelect-4c76e702.js';
79
79
  export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
80
80
  export { s as OrSidebarV3 } from './OrSidebar-fadc2431.js';
81
81
  export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-e0cbeaa5.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/ui-components",
3
- "version": "4.13.0",
3
+ "version": "4.14.0",
4
4
  "description": "Vue components library for v2/3",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/auto/index.js",
@@ -154,5 +154,5 @@
154
154
  },
155
155
  "./package.json": "./package.json"
156
156
  },
157
- "gitHead": "d47e104a5355ce5f4994de7b8391d6abfc7227fb"
157
+ "gitHead": "48562ea56078c7e8484a8f8b36355580f33b54b3"
158
158
  }
@@ -83,7 +83,16 @@
83
83
  +{{ outerItems.length }}
84
84
  </template>
85
85
 
86
- <div :class="['layout-inline-row']">
86
+ <div :class="['layout-inline-row', 'gap-sm']">
87
+ <template v-if="!multiple && proxyModelValue">
88
+ <OrIconButton
89
+ :icon="'close'"
90
+ :color="'inherit'"
91
+ :disabled="readonly || disabled"
92
+ @click.stop="$emit('update:modelValue', undefined)"
93
+ />
94
+ </template>
95
+
87
96
  <OrIcon
88
97
  :icon="popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'"
89
98
  :variant="'outlined'"
@@ -234,6 +243,7 @@ import { OrCheckboxV3 as OrCheckbox } from '../or-checkbox-v3';
234
243
  import { OrErrorV3 as OrError } from '../or-error-v3';
235
244
  import { OrExpansionPanelV3 as OrExpansionPanel } from '../or-expansion-panel-v3';
236
245
  import { OrHintV3 as OrHint } from '../or-hint-v3';
246
+ import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
237
247
  import { OrIconV3 as OrIcon } from '../or-icon-v3';
238
248
  import { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
239
249
  import { OrInputV3 as OrInput } from '../or-input-v3';
@@ -254,6 +264,7 @@ export default defineComponent({
254
264
  OrExpansionPanel,
255
265
  OrHint,
256
266
  OrIcon,
267
+ OrIconButton,
257
268
  OrInput,
258
269
  OrInputBox,
259
270
  OrLabel,