@onereach/ui-components 5.2.2 → 5.2.3-beta.3178.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.
- package/dist/bundled/v2/components/OrSelectV3/OrSelect.js +100 -37
- package/dist/bundled/v2/components/OrSelectV3/OrSelect.vue.d.ts +0 -2
- package/dist/bundled/v2/components/OrSelectV3/index.js +1 -1
- package/dist/bundled/v2/components/OrSelectV3/styles.d.ts +0 -1
- package/dist/bundled/v2/components/OrSelectV3/styles.js +1 -8
- package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-b029468d.js → OrSelect.vue_vue_type_script_lang-21b9f7b7.js} +68 -28
- package/dist/bundled/v3/components/OrSelectV3/OrSelect.js +28 -23
- package/dist/bundled/v3/components/OrSelectV3/OrSelect.vue.d.ts +0 -1
- package/dist/bundled/v3/components/OrSelectV3/index.js +2 -2
- package/dist/bundled/v3/components/OrSelectV3/styles.d.ts +0 -1
- package/dist/bundled/v3/components/OrSelectV3/styles.js +1 -8
- package/dist/bundled/v3/components/index.js +1 -1
- package/dist/bundled/v3/index.js +1 -1
- package/dist/esm/v2/{OrSelect-f3a50dc9.js → OrSelect-34782e78.js} +97 -42
- package/dist/esm/v2/components/index.js +1 -1
- package/dist/esm/v2/components/or-select-v3/OrSelect.vue.d.ts +0 -2
- package/dist/esm/v2/components/or-select-v3/index.js +1 -1
- package/dist/esm/v2/components/or-select-v3/partials/or-select-placeholder/OrSelectPlaceholder.vue.d.ts +24 -0
- package/dist/esm/v2/components/or-select-v3/partials/or-select-placeholder/styles.d.ts +1 -0
- package/dist/esm/v2/components/or-select-v3/styles.d.ts +0 -1
- package/dist/esm/v2/components/or-tags-v3/OrTags.vue.d.ts +2 -2
- package/dist/esm/v2/components/or-teleport/OrTeleport.vue2.vue.d.ts +2 -2
- package/dist/esm/v2/index.js +1 -1
- package/dist/esm/v3/{OrSelect-a2272840.js → OrSelect-ba0f0da3.js} +93 -56
- package/dist/esm/v3/components/index.js +1 -1
- package/dist/esm/v3/components/or-select-v3/OrSelect.vue.d.ts +0 -1
- package/dist/esm/v3/components/or-select-v3/index.js +1 -1
- package/dist/esm/v3/components/or-select-v3/partials/or-select-placeholder/OrSelectPlaceholder.vue.d.ts +17 -0
- package/dist/esm/v3/components/or-select-v3/partials/or-select-placeholder/styles.d.ts +1 -0
- package/dist/esm/v3/components/or-select-v3/styles.d.ts +0 -1
- package/dist/esm/v3/index.js +1 -1
- package/package.json +2 -3
- package/src/components/or-select-v3/OrSelect.vue +9 -18
- package/src/components/or-select-v3/partials/or-select-placeholder/OrSelectPlaceholder.vue +43 -0
- package/src/components/or-select-v3/partials/or-select-placeholder/styles.ts +11 -0
- package/src/components/or-select-v3/styles.ts +0 -12
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import { defineComponent,
|
|
1
|
+
import { defineComponent, ref, computed, getCurrentInstance, toRefs, onMounted, watch } from 'vue-demi';
|
|
2
2
|
import { isEmptyValue } from '../../utils/isEmptyValue.js';
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import __vue_component__$2 from '../
|
|
6
|
-
import __vue_component__$3 from '../
|
|
7
|
-
import __vue_component__$4 from '../
|
|
8
|
-
import __vue_component__$5 from '../
|
|
9
|
-
import __vue_component__$6 from '../
|
|
10
|
-
import __vue_component__$7 from '../
|
|
11
|
-
import __vue_component__$8 from '../
|
|
12
|
-
import __vue_component__$9 from '../
|
|
13
|
-
import __vue_component__$a from '../
|
|
14
|
-
import __vue_component__$b from '../
|
|
15
|
-
import __vue_component__$c from '../
|
|
3
|
+
import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
|
|
4
|
+
import { Select, SelectControl, SelectSearchControl, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './styles.js';
|
|
5
|
+
import __vue_component__$2 from '../OrCheckboxV3/OrCheckbox.js';
|
|
6
|
+
import __vue_component__$3 from '../OrErrorV3/OrError.js';
|
|
7
|
+
import __vue_component__$4 from '../OrExpansionPanelV3/OrExpansionPanel.js';
|
|
8
|
+
import __vue_component__$5 from '../OrHintV3/OrHint.js';
|
|
9
|
+
import __vue_component__$6 from '../OrIconV3/OrIcon.js';
|
|
10
|
+
import __vue_component__$7 from '../OrIconButtonV3/OrIconButton.js';
|
|
11
|
+
import __vue_component__$8 from '../OrInputV3/OrInput.js';
|
|
12
|
+
import __vue_component__$9 from '../OrInputBoxV3/OrInputBox.js';
|
|
13
|
+
import __vue_component__$a from '../OrLabelV3/OrLabel.js';
|
|
14
|
+
import __vue_component__$b from '../OrMenuItemV3/OrMenuItem.js';
|
|
15
|
+
import __vue_component__$c from '../OrPopoverV3/OrPopover.js';
|
|
16
|
+
import __vue_component__$d from '../OrTagV3/OrTag.js';
|
|
16
17
|
import { useOverflow } from '../../hooks/useOverflow.js';
|
|
17
18
|
import { DropdownClose } from '../../directives/dropdown-close.js';
|
|
18
19
|
import { DropdownOpen } from '../../directives/dropdown-open.js';
|
|
19
20
|
import { InputBoxSize } from '../OrInputBoxV3/props.js';
|
|
20
21
|
import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
|
|
21
22
|
import useResponsive from '../../hooks/useResponsive/useResponsive.js';
|
|
22
|
-
import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
|
|
23
23
|
import '../OrCheckboxV3/styles.js';
|
|
24
24
|
import '../OrLabelV3/props.js';
|
|
25
25
|
import '../../hooks/useIdAttribute.js';
|
|
@@ -64,20 +64,87 @@ import '../../utils/isVisible.js';
|
|
|
64
64
|
import '../OrTagV3/props.js';
|
|
65
65
|
import '../OrTagV3/styles.js';
|
|
66
66
|
|
|
67
|
+
const SelectPlaceholder = [
|
|
68
|
+
// Interactivity
|
|
69
|
+
'interactivity-none',
|
|
70
|
+
// Typography
|
|
71
|
+
'typography-inherit truncate',
|
|
72
|
+
// Theme
|
|
73
|
+
'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
|
|
74
|
+
|
|
75
|
+
var script$1 = defineComponent({
|
|
76
|
+
props: {
|
|
77
|
+
disabled: {
|
|
78
|
+
type: Boolean,
|
|
79
|
+
default: false
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
expose: ['root'],
|
|
83
|
+
setup() {
|
|
84
|
+
// Refs
|
|
85
|
+
const root = ref();
|
|
86
|
+
// Styles
|
|
87
|
+
const rootStyles = computed(() => ['or-select-placeholder-v3', ...SelectPlaceholder]);
|
|
88
|
+
return {
|
|
89
|
+
root,
|
|
90
|
+
rootStyles
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
/* script */
|
|
96
|
+
const __vue_script__$1 = script$1;
|
|
97
|
+
|
|
98
|
+
/* template */
|
|
99
|
+
var __vue_render__$1 = function () {
|
|
100
|
+
var _vm = this;
|
|
101
|
+
var _h = _vm.$createElement;
|
|
102
|
+
var _c = _vm._self._c || _h;
|
|
103
|
+
return _c('div', {
|
|
104
|
+
ref: "root",
|
|
105
|
+
class: _vm.rootStyles,
|
|
106
|
+
attrs: {
|
|
107
|
+
"disabled": _vm.disabled ? '' : null
|
|
108
|
+
}
|
|
109
|
+
}, [_vm._t("default")], 2);
|
|
110
|
+
};
|
|
111
|
+
var __vue_staticRenderFns__$1 = [];
|
|
112
|
+
|
|
113
|
+
/* style */
|
|
114
|
+
const __vue_inject_styles__$1 = undefined;
|
|
115
|
+
/* scoped */
|
|
116
|
+
const __vue_scope_id__$1 = undefined;
|
|
117
|
+
/* module identifier */
|
|
118
|
+
const __vue_module_identifier__$1 = undefined;
|
|
119
|
+
/* functional template */
|
|
120
|
+
const __vue_is_functional_template__$1 = false;
|
|
121
|
+
/* style inject */
|
|
122
|
+
|
|
123
|
+
/* style inject SSR */
|
|
124
|
+
|
|
125
|
+
/* style inject shadow dom */
|
|
126
|
+
|
|
127
|
+
const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
|
|
128
|
+
render: __vue_render__$1,
|
|
129
|
+
staticRenderFns: __vue_staticRenderFns__$1
|
|
130
|
+
}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
|
|
131
|
+
var OrSelectPlaceholder = __vue_component__$1;
|
|
132
|
+
|
|
67
133
|
var script = defineComponent({
|
|
68
134
|
components: {
|
|
69
|
-
OrCheckbox: __vue_component__$
|
|
70
|
-
OrError: __vue_component__$
|
|
71
|
-
OrExpansionPanel: __vue_component__$
|
|
72
|
-
OrHint: __vue_component__$
|
|
73
|
-
OrIcon: __vue_component__$
|
|
74
|
-
OrIconButton: __vue_component__$
|
|
75
|
-
OrInput: __vue_component__$
|
|
76
|
-
OrInputBox: __vue_component__$
|
|
77
|
-
OrLabel: __vue_component__$
|
|
78
|
-
OrMenuItem: __vue_component__$
|
|
79
|
-
OrPopover: __vue_component__$
|
|
80
|
-
|
|
135
|
+
OrCheckbox: __vue_component__$2,
|
|
136
|
+
OrError: __vue_component__$3,
|
|
137
|
+
OrExpansionPanel: __vue_component__$4,
|
|
138
|
+
OrHint: __vue_component__$5,
|
|
139
|
+
OrIcon: __vue_component__$6,
|
|
140
|
+
OrIconButton: __vue_component__$7,
|
|
141
|
+
OrInput: __vue_component__$8,
|
|
142
|
+
OrInputBox: __vue_component__$9,
|
|
143
|
+
OrLabel: __vue_component__$a,
|
|
144
|
+
OrMenuItem: __vue_component__$b,
|
|
145
|
+
OrPopover: __vue_component__$c,
|
|
146
|
+
OrSelectPlaceholder,
|
|
147
|
+
OrTag: __vue_component__$d
|
|
81
148
|
},
|
|
82
149
|
directives: {
|
|
83
150
|
DropdownClose,
|
|
@@ -200,7 +267,6 @@ var script = defineComponent({
|
|
|
200
267
|
const rootStyles = computed(() => ['or-select-v3', ...Select]);
|
|
201
268
|
const controlStyles = computed(() => [...SelectControl]);
|
|
202
269
|
const searchControlStyles = computed(() => [...SelectSearchControl]);
|
|
203
|
-
const placeholderStyles = computed(() => [...SelectPlaceholder]);
|
|
204
270
|
const dropdownStyles = computed(() => {
|
|
205
271
|
var _a;
|
|
206
272
|
return [...SelectDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? SelectDropdownFlipped : SelectDropdownDefault)];
|
|
@@ -315,7 +381,6 @@ var script = defineComponent({
|
|
|
315
381
|
rootStyles,
|
|
316
382
|
controlStyles,
|
|
317
383
|
searchControlStyles,
|
|
318
|
-
placeholderStyles,
|
|
319
384
|
dropdownStyles,
|
|
320
385
|
dropdownItemStyles,
|
|
321
386
|
noSearchResultsStyles,
|
|
@@ -408,8 +473,8 @@ var __vue_render__ = function () {
|
|
|
408
473
|
return _c('OrTag', {
|
|
409
474
|
key: option.value,
|
|
410
475
|
attrs: {
|
|
411
|
-
"variant": 'reset',
|
|
412
|
-
"disabled": _vm.disabled
|
|
476
|
+
"variant": _vm.readonly || _vm.disabled ? 'tag' : 'reset',
|
|
477
|
+
"disabled": _vm.disabled
|
|
413
478
|
},
|
|
414
479
|
on: {
|
|
415
480
|
"reset": function ($event) {
|
|
@@ -420,10 +485,9 @@ var __vue_render__ = function () {
|
|
|
420
485
|
});
|
|
421
486
|
}, {
|
|
422
487
|
"model": _vm.proxyModelValue
|
|
423
|
-
})] : _vm.popoverState === 'closed' || !_vm.enableSearch ? [_c('
|
|
424
|
-
class: _vm.placeholderStyles,
|
|
488
|
+
})] : _vm.popoverState === 'closed' || !_vm.enableSearch ? [_c('OrSelectPlaceholder', {
|
|
425
489
|
attrs: {
|
|
426
|
-
"disabled": _vm.disabled
|
|
490
|
+
"disabled": _vm.disabled
|
|
427
491
|
}
|
|
428
492
|
}, [_vm._v("\n " + _vm._s(_vm.placeholder) + "\n ")])] : _vm._e()] : [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
|
|
429
493
|
return [_c('span', {
|
|
@@ -431,10 +495,9 @@ var __vue_render__ = function () {
|
|
|
431
495
|
}, [_vm._v("\n " + _vm._s(_vm.selection && _vm.selection.label) + "\n ")])];
|
|
432
496
|
}, {
|
|
433
497
|
"model": _vm.proxyModelValue
|
|
434
|
-
})] : _vm.popoverState === 'closed' || !_vm.enableSearch ? [_c('
|
|
435
|
-
class: _vm.placeholderStyles,
|
|
498
|
+
})] : _vm.popoverState === 'closed' || !_vm.enableSearch ? [_c('OrSelectPlaceholder', {
|
|
436
499
|
attrs: {
|
|
437
|
-
"disabled": _vm.disabled
|
|
500
|
+
"disabled": _vm.disabled
|
|
438
501
|
}
|
|
439
502
|
}, [_vm._v("\n " + _vm._s(_vm.placeholder) + "\n ")])] : _vm._e()]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n +" + _vm._s(_vm.outerItems.length) + "\n ")] : _vm._e(), _vm._v(" "), _vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
|
|
440
503
|
ref: "searchControl",
|
|
@@ -21,7 +21,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
|
|
|
21
21
|
rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
22
22
|
controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
23
23
|
searchControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
24
|
-
placeholderStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
25
24
|
dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
26
25
|
dropdownItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
27
26
|
noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
@@ -233,7 +232,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
|
|
|
233
232
|
rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
234
233
|
controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
235
234
|
searchControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
236
|
-
placeholderStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
237
235
|
dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
238
236
|
dropdownItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
239
237
|
noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
@@ -2,13 +2,13 @@ export { default as OrSelectV3 } from './OrSelect.js';
|
|
|
2
2
|
export { InputBoxSize as SelectSize } from '../OrInputBoxV3/props.js';
|
|
3
3
|
import 'vue-demi';
|
|
4
4
|
import '../../utils/isEmptyValue.js';
|
|
5
|
+
import '../../normalize-component-6e8e3d80.js';
|
|
5
6
|
import './styles.js';
|
|
6
7
|
import '../OrCheckboxV3/OrCheckbox.js';
|
|
7
8
|
import '../OrCheckboxV3/styles.js';
|
|
8
9
|
import '../OrLabelV3/OrLabel.js';
|
|
9
10
|
import '../OrLabelV3/props.js';
|
|
10
11
|
import '../OrLabelV3/styles.js';
|
|
11
|
-
import '../../normalize-component-6e8e3d80.js';
|
|
12
12
|
import '../../hooks/useIdAttribute.js';
|
|
13
13
|
import '../../hooks/useControlAttributes.js';
|
|
14
14
|
import '../../hooks/useProxyModelValue.js';
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
export declare const Select: string[];
|
|
2
2
|
export declare const SelectControl: string[];
|
|
3
3
|
export declare const SelectSearchControl: string[];
|
|
4
|
-
export declare const SelectPlaceholder: string[];
|
|
5
4
|
export declare const SelectDropdown: string[];
|
|
6
5
|
export declare const SelectDropdownDefault: string[];
|
|
7
6
|
export declare const SelectDropdownFlipped: string[];
|
|
@@ -19,13 +19,6 @@ const SelectSearchControl = [
|
|
|
19
19
|
'grow',
|
|
20
20
|
// Spacing
|
|
21
21
|
'!mx-lg md:!-mx-sm+', '!my-sm md:!my-none'];
|
|
22
|
-
const SelectPlaceholder = [
|
|
23
|
-
// Theme
|
|
24
|
-
'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
|
|
25
|
-
// Interactivity
|
|
26
|
-
'select-none',
|
|
27
|
-
// Typography
|
|
28
|
-
'truncate'];
|
|
29
22
|
const SelectDropdown = [
|
|
30
23
|
// Overflow
|
|
31
24
|
'overflow-y-auto',
|
|
@@ -58,4 +51,4 @@ const SelectNoSearchResults = [
|
|
|
58
51
|
// Theme
|
|
59
52
|
'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
|
|
60
53
|
|
|
61
|
-
export { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults,
|
|
54
|
+
export { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectSearchControl };
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { defineComponent,
|
|
1
|
+
import { defineComponent, ref, computed, getCurrentInstance, toRefs, onMounted, watch } from 'vue-demi';
|
|
2
2
|
import { isEmptyValue } from './utils/isEmptyValue.js';
|
|
3
|
-
import {
|
|
3
|
+
import { openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
|
|
4
|
+
import { Select, SelectControl, SelectSearchControl, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './components/OrSelectV3/styles.js';
|
|
4
5
|
import './components/OrCheckboxV3/OrCheckbox.js';
|
|
5
6
|
import './components/OrErrorV3/OrError.js';
|
|
6
7
|
import './components/OrExpansionPanelV3/OrExpansionPanel.js';
|
|
7
|
-
import { s as script$
|
|
8
|
+
import { s as script$4 } from './OrExpansionPanel.vue_vue_type_script_lang-fa265d9a.js';
|
|
8
9
|
import './components/OrHintV3/OrHint.js';
|
|
9
10
|
import './components/OrIconV3/OrIcon.js';
|
|
10
11
|
import './components/OrIconButtonV3/OrIconButton.js';
|
|
@@ -14,38 +15,79 @@ import './components/OrLabelV3/OrLabel.js';
|
|
|
14
15
|
import './components/OrMenuItemV3/OrMenuItem.js';
|
|
15
16
|
import './components/OrPopoverV3/OrPopover.js';
|
|
16
17
|
import './components/OrTagV3/OrTag.js';
|
|
17
|
-
import { s as script$
|
|
18
|
+
import { s as script$d } from './OrTag.vue_vue_type_script_lang-6c4b09f4.js';
|
|
18
19
|
import { useOverflow } from './hooks/useOverflow.js';
|
|
19
|
-
import { s as script$
|
|
20
|
-
import { s as script$
|
|
21
|
-
import { s as script$
|
|
22
|
-
import { s as script$
|
|
23
|
-
import { s as script$
|
|
24
|
-
import { s as script$
|
|
25
|
-
import { s as script$
|
|
26
|
-
import { s as script$
|
|
27
|
-
import { s as script$
|
|
28
|
-
import { s as script$
|
|
20
|
+
import { s as script$2 } from './OrCheckbox.vue_vue_type_script_lang-38736023.js';
|
|
21
|
+
import { s as script$3 } from './OrError.vue_vue_type_script_lang-df7b5e32.js';
|
|
22
|
+
import { s as script$5 } from './OrHint.vue_vue_type_script_lang-0f5e8377.js';
|
|
23
|
+
import { s as script$6 } from './OrIcon.vue_vue_type_script_lang-73f9cc63.js';
|
|
24
|
+
import { s as script$7 } from './OrIconButton.vue_vue_type_script_lang-41affeb4.js';
|
|
25
|
+
import { s as script$8 } from './OrInput.vue_vue_type_script_lang-4a384d2b.js';
|
|
26
|
+
import { s as script$9 } from './OrInputBox.vue_vue_type_script_lang-137cb650.js';
|
|
27
|
+
import { s as script$a } from './OrLabel.vue_vue_type_script_lang-fcdfd80d.js';
|
|
28
|
+
import { s as script$b } from './OrMenuItem.vue_vue_type_script_lang-1785286a.js';
|
|
29
|
+
import { s as script$c } from './OrPopover.vue_vue_type_script_lang-d766f723.js';
|
|
29
30
|
import { DropdownClose } from './directives/dropdown-close.js';
|
|
30
31
|
import { DropdownOpen } from './directives/dropdown-open.js';
|
|
31
32
|
import { InputBoxSize } from './components/OrInputBoxV3/props.js';
|
|
32
33
|
import { useProxyModelValue } from './hooks/useProxyModelValue.js';
|
|
33
34
|
import useResponsive from './hooks/useResponsive/useResponsive.js';
|
|
34
35
|
|
|
36
|
+
const SelectPlaceholder = [
|
|
37
|
+
// Interactivity
|
|
38
|
+
'interactivity-none',
|
|
39
|
+
// Typography
|
|
40
|
+
'typography-inherit truncate',
|
|
41
|
+
// Theme
|
|
42
|
+
'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
|
|
43
|
+
|
|
44
|
+
var script$1 = defineComponent({
|
|
45
|
+
props: {
|
|
46
|
+
disabled: {
|
|
47
|
+
type: Boolean,
|
|
48
|
+
default: false
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
expose: ['root'],
|
|
52
|
+
setup() {
|
|
53
|
+
// Refs
|
|
54
|
+
const root = ref();
|
|
55
|
+
// Styles
|
|
56
|
+
const rootStyles = computed(() => ['or-select-placeholder-v3', ...SelectPlaceholder]);
|
|
57
|
+
return {
|
|
58
|
+
root,
|
|
59
|
+
rootStyles
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
const _hoisted_1 = ["disabled"];
|
|
65
|
+
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
66
|
+
return openBlock(), createElementBlock("div", {
|
|
67
|
+
ref: "root",
|
|
68
|
+
class: normalizeClass(_ctx.rootStyles),
|
|
69
|
+
disabled: _ctx.disabled ? '' : null
|
|
70
|
+
}, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
script$1.render = render;
|
|
74
|
+
script$1.__file = "src/components/or-select-v3/partials/or-select-placeholder/OrSelectPlaceholder.vue";
|
|
75
|
+
|
|
35
76
|
var script = defineComponent({
|
|
36
77
|
components: {
|
|
37
|
-
OrCheckbox: script$
|
|
38
|
-
OrError: script$
|
|
39
|
-
OrExpansionPanel: script$
|
|
40
|
-
OrHint: script$
|
|
41
|
-
OrIcon: script$
|
|
42
|
-
OrIconButton: script$
|
|
43
|
-
OrInput: script$
|
|
44
|
-
OrInputBox: script$
|
|
45
|
-
OrLabel: script$
|
|
46
|
-
OrMenuItem: script$
|
|
47
|
-
OrPopover: script$
|
|
48
|
-
|
|
78
|
+
OrCheckbox: script$2,
|
|
79
|
+
OrError: script$3,
|
|
80
|
+
OrExpansionPanel: script$4,
|
|
81
|
+
OrHint: script$5,
|
|
82
|
+
OrIcon: script$6,
|
|
83
|
+
OrIconButton: script$7,
|
|
84
|
+
OrInput: script$8,
|
|
85
|
+
OrInputBox: script$9,
|
|
86
|
+
OrLabel: script$a,
|
|
87
|
+
OrMenuItem: script$b,
|
|
88
|
+
OrPopover: script$c,
|
|
89
|
+
OrSelectPlaceholder: script$1,
|
|
90
|
+
OrTag: script$d
|
|
49
91
|
},
|
|
50
92
|
directives: {
|
|
51
93
|
DropdownClose,
|
|
@@ -168,7 +210,6 @@ var script = defineComponent({
|
|
|
168
210
|
const rootStyles = computed(() => ['or-select-v3', ...Select]);
|
|
169
211
|
const controlStyles = computed(() => [...SelectControl]);
|
|
170
212
|
const searchControlStyles = computed(() => [...SelectSearchControl]);
|
|
171
|
-
const placeholderStyles = computed(() => [...SelectPlaceholder]);
|
|
172
213
|
const dropdownStyles = computed(() => {
|
|
173
214
|
var _a;
|
|
174
215
|
return [...SelectDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? SelectDropdownFlipped : SelectDropdownDefault)];
|
|
@@ -283,7 +324,6 @@ var script = defineComponent({
|
|
|
283
324
|
rootStyles,
|
|
284
325
|
controlStyles,
|
|
285
326
|
searchControlStyles,
|
|
286
|
-
placeholderStyles,
|
|
287
327
|
dropdownStyles,
|
|
288
328
|
dropdownItemStyles,
|
|
289
329
|
noSearchResultsStyles,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { s as script } from '../../OrSelect.vue_vue_type_script_lang-
|
|
2
|
-
export { s as default } from '../../OrSelect.vue_vue_type_script_lang-
|
|
1
|
+
import { s as script } from '../../OrSelect.vue_vue_type_script_lang-21b9f7b7.js';
|
|
2
|
+
export { s as default } from '../../OrSelect.vue_vue_type_script_lang-21b9f7b7.js';
|
|
3
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';
|
|
@@ -83,27 +83,26 @@ import '../../directives/dropdown-close.js';
|
|
|
83
83
|
import '../../directives/dropdown-open.js';
|
|
84
84
|
|
|
85
85
|
const _hoisted_1 = ["id", "tabindex", "disabled"];
|
|
86
|
-
const _hoisted_2 =
|
|
87
|
-
const _hoisted_3 = {
|
|
86
|
+
const _hoisted_2 = {
|
|
88
87
|
class: "truncate"
|
|
89
88
|
};
|
|
90
|
-
const
|
|
91
|
-
const _hoisted_5 = {
|
|
89
|
+
const _hoisted_3 = {
|
|
92
90
|
key: 2,
|
|
93
91
|
class: /*#__PURE__*/normalizeClass(['grow'])
|
|
94
92
|
};
|
|
95
|
-
const
|
|
93
|
+
const _hoisted_4 = {
|
|
96
94
|
class: /*#__PURE__*/normalizeClass(['layout-inline-row', 'gap-sm'])
|
|
97
95
|
};
|
|
98
|
-
const
|
|
96
|
+
const _hoisted_5 = {
|
|
99
97
|
class: /*#__PURE__*/normalizeClass(['contents'])
|
|
100
98
|
};
|
|
101
|
-
const
|
|
99
|
+
const _hoisted_6 = {
|
|
102
100
|
class: /*#__PURE__*/normalizeClass(['contents'])
|
|
103
101
|
};
|
|
104
102
|
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
105
103
|
const _component_OrLabel = resolveComponent("OrLabel");
|
|
106
104
|
const _component_OrTag = resolveComponent("OrTag");
|
|
105
|
+
const _component_OrSelectPlaceholder = resolveComponent("OrSelectPlaceholder");
|
|
107
106
|
const _component_OrInput = resolveComponent("OrInput");
|
|
108
107
|
const _component_OrIconButton = resolveComponent("OrIconButton");
|
|
109
108
|
const _component_OrIcon = resolveComponent("OrIcon");
|
|
@@ -155,28 +154,34 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
155
154
|
}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selection, option => {
|
|
156
155
|
return openBlock(), createBlock(_component_OrTag, {
|
|
157
156
|
key: option.value,
|
|
158
|
-
variant: 'reset',
|
|
159
|
-
disabled: _ctx.disabled
|
|
157
|
+
variant: _ctx.readonly || _ctx.disabled ? 'tag' : 'reset',
|
|
158
|
+
disabled: _ctx.disabled,
|
|
160
159
|
onReset: $event => _ctx.deselect(option)
|
|
161
160
|
}, {
|
|
162
161
|
default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1 /* TEXT */)]),
|
|
163
162
|
|
|
164
163
|
_: 2 /* DYNAMIC */
|
|
165
|
-
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled", "onReset"]);
|
|
166
|
-
}), 128 /* KEYED_FRAGMENT */))]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (openBlock(),
|
|
164
|
+
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "disabled", "onReset"]);
|
|
165
|
+
}), 128 /* KEYED_FRAGMENT */))]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (openBlock(), createBlock(_component_OrSelectPlaceholder, {
|
|
167
166
|
key: 1,
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
167
|
+
disabled: _ctx.disabled
|
|
168
|
+
}, {
|
|
169
|
+
default: withCtx(() => [createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)]),
|
|
170
|
+
|
|
171
|
+
_: 1 /* STABLE */
|
|
172
|
+
}, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
|
|
171
173
|
key: 1
|
|
172
174
|
}, [!_ctx.isEmptyModelValue ? renderSlot(_ctx.$slots, "valueTemplate", {
|
|
173
175
|
key: 0,
|
|
174
176
|
model: _ctx.proxyModelValue
|
|
175
|
-
}, () => [createElementVNode("span",
|
|
177
|
+
}, () => [createElementVNode("span", _hoisted_2, toDisplayString(_ctx.selection && _ctx.selection.label), 1 /* TEXT */)]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (openBlock(), createBlock(_component_OrSelectPlaceholder, {
|
|
176
178
|
key: 1,
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
179
|
+
disabled: _ctx.disabled
|
|
180
|
+
}, {
|
|
181
|
+
default: withCtx(() => [createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)]),
|
|
182
|
+
|
|
183
|
+
_: 1 /* STABLE */
|
|
184
|
+
}, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */))], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), _ctx.multiple && _ctx.outerItems.length > 0 ? (openBlock(), createElementBlock(Fragment, {
|
|
180
185
|
key: 0
|
|
181
186
|
}, [createTextVNode(" +" + toDisplayString(_ctx.outerItems.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), _ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
|
|
182
187
|
key: 1,
|
|
@@ -189,7 +194,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
189
194
|
size: _ctx.size,
|
|
190
195
|
"disable-default-styles": true,
|
|
191
196
|
onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
|
|
192
|
-
}, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "size"])) : (openBlock(), createElementBlock("div",
|
|
197
|
+
}, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "size"])) : (openBlock(), createElementBlock("div", _hoisted_3)), createElementVNode("div", _hoisted_4, [_ctx.showClear ? (openBlock(), createBlock(_component_OrIconButton, {
|
|
193
198
|
key: 0,
|
|
194
199
|
icon: 'close',
|
|
195
200
|
color: 'inherit',
|
|
@@ -318,14 +323,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
318
323
|
_: 3 /* FORWARDED */
|
|
319
324
|
}, 8 /* PROPS */, ["trigger", "custom-styles"])]),
|
|
320
325
|
_: 3 /* FORWARDED */
|
|
321
|
-
}, 8 /* PROPS */, ["class", "variant", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.toggle], [_directive_dropdown_close, _ctx.close]]), withDirectives(createElementVNode("div",
|
|
326
|
+
}, 8 /* PROPS */, ["class", "variant", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.toggle], [_directive_dropdown_close, _ctx.close]]), withDirectives(createElementVNode("div", _hoisted_5, [_ctx.hint ? (openBlock(), createBlock(_component_OrHint, {
|
|
322
327
|
key: 0,
|
|
323
328
|
disabled: _ctx.disabled
|
|
324
329
|
}, {
|
|
325
330
|
default: withCtx(() => [createTextVNode(toDisplayString(_ctx.hint), 1 /* TEXT */)]),
|
|
326
331
|
|
|
327
332
|
_: 1 /* STABLE */
|
|
328
|
-
}, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div",
|
|
333
|
+
}, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div", _hoisted_6, [createVNode(_component_OrError, {
|
|
329
334
|
disabled: _ctx.disabled
|
|
330
335
|
}, {
|
|
331
336
|
default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error), 1 /* TEXT */)]),
|
|
@@ -86,7 +86,6 @@ declare const _default: import("vue-demi").DefineComponent<{
|
|
|
86
86
|
rootStyles: import("vue-demi").ComputedRef<string[]>;
|
|
87
87
|
controlStyles: import("vue-demi").ComputedRef<string[]>;
|
|
88
88
|
searchControlStyles: import("vue-demi").ComputedRef<string[]>;
|
|
89
|
-
placeholderStyles: import("vue-demi").ComputedRef<string[]>;
|
|
90
89
|
dropdownStyles: import("vue-demi").ComputedRef<string[]>;
|
|
91
90
|
dropdownItemStyles: import("vue-demi").ComputedRef<string[]>;
|
|
92
91
|
noSearchResultsStyles: import("vue-demi").ComputedRef<string[]>;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-
|
|
1
|
+
export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-21b9f7b7.js';
|
|
2
2
|
export { InputBoxSize as SelectSize } from '../OrInputBoxV3/props.js';
|
|
3
3
|
import 'vue-demi';
|
|
4
4
|
import '../../utils/isEmptyValue.js';
|
|
5
|
+
import 'vue';
|
|
5
6
|
import './styles.js';
|
|
6
7
|
import '../OrCheckboxV3/OrCheckbox.js';
|
|
7
8
|
import '../../OrCheckbox.vue_vue_type_script_lang-38736023.js';
|
|
@@ -10,7 +11,6 @@ import '../OrLabelV3/OrLabel.js';
|
|
|
10
11
|
import '../../OrLabel.vue_vue_type_script_lang-fcdfd80d.js';
|
|
11
12
|
import '../OrLabelV3/props.js';
|
|
12
13
|
import '../OrLabelV3/styles.js';
|
|
13
|
-
import 'vue';
|
|
14
14
|
import '../../hooks/useIdAttribute.js';
|
|
15
15
|
import '../../hooks/useControlAttributes.js';
|
|
16
16
|
import '../../hooks/useProxyModelValue.js';
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
export declare const Select: string[];
|
|
2
2
|
export declare const SelectControl: string[];
|
|
3
3
|
export declare const SelectSearchControl: string[];
|
|
4
|
-
export declare const SelectPlaceholder: string[];
|
|
5
4
|
export declare const SelectDropdown: string[];
|
|
6
5
|
export declare const SelectDropdownDefault: string[];
|
|
7
6
|
export declare const SelectDropdownFlipped: string[];
|
|
@@ -19,13 +19,6 @@ const SelectSearchControl = [
|
|
|
19
19
|
'grow',
|
|
20
20
|
// Spacing
|
|
21
21
|
'!mx-lg md:!-mx-sm+', '!my-sm md:!my-none'];
|
|
22
|
-
const SelectPlaceholder = [
|
|
23
|
-
// Theme
|
|
24
|
-
'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
|
|
25
|
-
// Interactivity
|
|
26
|
-
'select-none',
|
|
27
|
-
// Typography
|
|
28
|
-
'truncate'];
|
|
29
22
|
const SelectDropdown = [
|
|
30
23
|
// Overflow
|
|
31
24
|
'overflow-y-auto',
|
|
@@ -58,4 +51,4 @@ const SelectNoSearchResults = [
|
|
|
58
51
|
// Theme
|
|
59
52
|
'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
|
|
60
53
|
|
|
61
|
-
export { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults,
|
|
54
|
+
export { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectSearchControl };
|
|
@@ -114,7 +114,7 @@ export { s as OrSearchV3 } from '../OrSearch.vue_vue_type_script_lang-67994b95.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-594e7c11.js';
|
|
117
|
-
export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-
|
|
117
|
+
export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-21b9f7b7.js';
|
|
118
118
|
export { s as OrSidebar } from '../OrSidebar.vue_vue_type_script_lang-81941fe6.js';
|
|
119
119
|
export { OrSidebarSide } from './OrSidebar/constants.js';
|
|
120
120
|
export { s as OrSidebarV3 } from '../OrSidebar.vue_vue_type_script_lang-3ed42b69.js';
|
package/dist/bundled/v3/index.js
CHANGED
|
@@ -74,7 +74,7 @@ export { s as OrSegmentedControlV3 } from './OrSegmentedControl.vue_vue_type_scr
|
|
|
74
74
|
import './components/OrSelect/OrSelect.js';
|
|
75
75
|
export { s as OrSelect } from './OrSelect.vue_vue_type_script_lang-594e7c11.js';
|
|
76
76
|
import './components/OrSelectV3/OrSelect.js';
|
|
77
|
-
export { s as OrSelectV3 } from './OrSelect.vue_vue_type_script_lang-
|
|
77
|
+
export { s as OrSelectV3 } from './OrSelect.vue_vue_type_script_lang-21b9f7b7.js';
|
|
78
78
|
import './components/OrSidebar/OrSidebar.js';
|
|
79
79
|
export { s as OrSidebar } from './OrSidebar.vue_vue_type_script_lang-81941fe6.js';
|
|
80
80
|
import './components/OrSidebarV3/OrSidebar.js';
|