@vcita/design-system 1.24.2 → 1.24.4
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/@vcita/design-system.esm.js +1 -1
- package/dist/@vcita/design-system.ssr.js +1 -1
- package/dist/VcHeaderDropdown-12a311b2.js +178 -0
- package/dist/VcHeaderDropdown-58c95e09.js +167 -0
- package/dist/VcHeaderDropdown-8a34e39d.js +178 -0
- package/dist/VcHeaderDropdown-a6baaaf9.js +167 -0
- package/dist/entry-480a5686.js +30616 -0
- package/dist/entry-5c221a23.js +29909 -0
- package/dist/entry-e1653c11.js +30616 -0
- package/dist/entry-e60ced8a.js +29909 -0
- package/dist/index-0ede3024.js +2 -0
- package/dist/index-545a9f1e.js +1 -0
- package/dist/index-9c77bb8a.js +2 -0
- package/dist/index-cc78bc6b.js +1 -0
- package/dist/vue2-pdf-embed-2c09049c.js +5 -0
- package/dist/vue2-pdf-embed-7a460445.js +5 -0
- package/dist/vue2-pdf-embed-98e520d7.js +29 -0
- package/dist/vue2-pdf-embed-bd5f64ed.js +29 -0
- package/package.json +1 -1
- package/src/components/VcPhoneField/VcPhoneField.spec.js +129 -0
- package/src/components/VcPhoneField/VcPhoneField.stories.js +68 -1
- package/src/components/VcPhoneField/VcPhoneField.vue +22 -4
- package/src/components/VcTextField/VcTextField.stories.js +30 -1
- package/src/components/VcTextField/VcTextField.vue +8 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { b6 as default } from '../entry-
|
|
1
|
+
export { b6 as default } from '../entry-e1653c11.js';
|
|
2
2
|
import 'vuetify/lib';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var entry=require('../entry-
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var entry=require('../entry-5c221a23.js');require('vuetify/lib');exports["default"]=entry.b6;
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
import 'vuetify/lib';
|
|
2
|
+
import { V as VcLayout, al as VcGroupedItems, ak as VcDropdown, F as VcIcon, b2 as normalizeComponent, b3 as createInjector } from './entry-480a5686.js';
|
|
3
|
+
|
|
4
|
+
var script = {
|
|
5
|
+
name: 'VcHeaderDropdown',
|
|
6
|
+
components: {
|
|
7
|
+
VcLayout,
|
|
8
|
+
VcGroupedItems,
|
|
9
|
+
VcDropdown,
|
|
10
|
+
VcIcon
|
|
11
|
+
},
|
|
12
|
+
props: {
|
|
13
|
+
/**
|
|
14
|
+
* Array of grouped items for dropdown
|
|
15
|
+
* Format: [{ label, id, items: [{ id, label }] }]
|
|
16
|
+
*/
|
|
17
|
+
options: {
|
|
18
|
+
type: Array,
|
|
19
|
+
required: true
|
|
20
|
+
},
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* ID of the currently selected option
|
|
24
|
+
* Used to highlight the selected item in the dropdown
|
|
25
|
+
*/
|
|
26
|
+
selectedOptionId: {
|
|
27
|
+
type: String,
|
|
28
|
+
default: ''
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Size of dropdown icon
|
|
33
|
+
*/
|
|
34
|
+
iconSize: {
|
|
35
|
+
type: String,
|
|
36
|
+
default: '10'
|
|
37
|
+
},
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Color of dropdown icon
|
|
41
|
+
*/
|
|
42
|
+
iconColor: {
|
|
43
|
+
type: String,
|
|
44
|
+
default: 'var(--gray-darken-4)'
|
|
45
|
+
},
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* Icon name to display
|
|
49
|
+
*/
|
|
50
|
+
iconName: {
|
|
51
|
+
type: String,
|
|
52
|
+
default: '$caret_down'
|
|
53
|
+
},
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* Data-qa attribute for testing
|
|
57
|
+
*/
|
|
58
|
+
dataQa: {
|
|
59
|
+
type: String,
|
|
60
|
+
default: 'VcHeaderDropdown'
|
|
61
|
+
},
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Aria label for accessibility
|
|
65
|
+
*/
|
|
66
|
+
ariaLabel: {
|
|
67
|
+
type: String,
|
|
68
|
+
default: 'Show options'
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
|
|
72
|
+
data() {
|
|
73
|
+
return {
|
|
74
|
+
isOpen: false
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
/* script */
|
|
81
|
+
const __vue_script__ = script;
|
|
82
|
+
/* template */
|
|
83
|
+
|
|
84
|
+
var __vue_render__ = function () {
|
|
85
|
+
var _vm = this;
|
|
86
|
+
|
|
87
|
+
var _h = _vm.$createElement;
|
|
88
|
+
|
|
89
|
+
var _c = _vm._self._c || _h;
|
|
90
|
+
|
|
91
|
+
return _c('VcDropdown', {
|
|
92
|
+
attrs: {
|
|
93
|
+
"close-on-content-click": true
|
|
94
|
+
},
|
|
95
|
+
scopedSlots: _vm._u([{
|
|
96
|
+
key: "activator",
|
|
97
|
+
fn: function (ref) {
|
|
98
|
+
var on = ref.on;
|
|
99
|
+
var attrs = ref.attrs;
|
|
100
|
+
return [_c('VcLayout', _vm._g(_vm._b({
|
|
101
|
+
staticClass: "VcHeaderDropdown__icon-wrapper",
|
|
102
|
+
attrs: {
|
|
103
|
+
"align-center": ""
|
|
104
|
+
}
|
|
105
|
+
}, 'VcLayout', attrs, false), on), [_c('VcIcon', {
|
|
106
|
+
attrs: {
|
|
107
|
+
"data-qa": _vm.dataQa,
|
|
108
|
+
"size": _vm.iconSize,
|
|
109
|
+
"color": _vm.iconColor,
|
|
110
|
+
"role": "button",
|
|
111
|
+
"aria-expanded": _vm.isOpen,
|
|
112
|
+
"aria-label": _vm.ariaLabel,
|
|
113
|
+
"tabindex": "0"
|
|
114
|
+
}
|
|
115
|
+
}, [_vm._v("\n " + _vm._s(_vm.iconName) + "\n ")])], 1)];
|
|
116
|
+
}
|
|
117
|
+
}]),
|
|
118
|
+
model: {
|
|
119
|
+
value: _vm.isOpen,
|
|
120
|
+
callback: function ($$v) {
|
|
121
|
+
_vm.isOpen = $$v;
|
|
122
|
+
},
|
|
123
|
+
expression: "isOpen"
|
|
124
|
+
}
|
|
125
|
+
}, [_vm._v(" "), _c('VcGroupedItems', {
|
|
126
|
+
attrs: {
|
|
127
|
+
"item-groups": _vm.options,
|
|
128
|
+
"selected": _vm.selectedOptionId,
|
|
129
|
+
"selected-state-design": "highlighted"
|
|
130
|
+
},
|
|
131
|
+
on: {
|
|
132
|
+
"change": function ($event) {
|
|
133
|
+
return _vm.$emit('optionClicked', $event);
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
scopedSlots: _vm._u([{
|
|
137
|
+
key: "header",
|
|
138
|
+
fn: function (ref) {
|
|
139
|
+
var group = ref.group;
|
|
140
|
+
return [_c('div', {
|
|
141
|
+
staticClass: "VcHeaderDropdown__group-label"
|
|
142
|
+
}, [_vm._v(_vm._s(group.label))])];
|
|
143
|
+
}
|
|
144
|
+
}])
|
|
145
|
+
})], 1);
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
var __vue_staticRenderFns__ = [];
|
|
149
|
+
/* style */
|
|
150
|
+
|
|
151
|
+
const __vue_inject_styles__ = function (inject) {
|
|
152
|
+
if (!inject) return;
|
|
153
|
+
inject("data-v-41098370_0", {
|
|
154
|
+
source: ".VcHeaderDropdown__icon-wrapper[data-v-41098370]{height:var(--size-value4);width:var(--size-value4);flex-grow:0;cursor:pointer}.VcHeaderDropdown__group-label[data-v-41098370]{color:var(--gray-darken-3);font-size:var(--font-size-xs-small);font-weight:var(--font-weight-large);padding:var(--size-value4) var(--size-value4) var(--size-value2)}",
|
|
155
|
+
map: undefined,
|
|
156
|
+
media: undefined
|
|
157
|
+
});
|
|
158
|
+
};
|
|
159
|
+
/* scoped */
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
const __vue_scope_id__ = "data-v-41098370";
|
|
163
|
+
/* module identifier */
|
|
164
|
+
|
|
165
|
+
const __vue_module_identifier__ = undefined;
|
|
166
|
+
/* functional template */
|
|
167
|
+
|
|
168
|
+
const __vue_is_functional_template__ = false;
|
|
169
|
+
/* style inject SSR */
|
|
170
|
+
|
|
171
|
+
/* style inject shadow dom */
|
|
172
|
+
|
|
173
|
+
const __vue_component__ = /*#__PURE__*/normalizeComponent({
|
|
174
|
+
render: __vue_render__,
|
|
175
|
+
staticRenderFns: __vue_staticRenderFns__
|
|
176
|
+
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, createInjector, undefined, undefined);
|
|
177
|
+
|
|
178
|
+
export { __vue_component__ as default };
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
'use strict';require('vuetify/lib');var entry=require('./entry-5c221a23.js');var script = {
|
|
2
|
+
name: 'VcHeaderDropdown',
|
|
3
|
+
components: {
|
|
4
|
+
VcLayout: entry.V,
|
|
5
|
+
VcGroupedItems: entry.al,
|
|
6
|
+
VcDropdown: entry.ak,
|
|
7
|
+
VcIcon: entry.F
|
|
8
|
+
},
|
|
9
|
+
props: {
|
|
10
|
+
/**
|
|
11
|
+
* Array of grouped items for dropdown
|
|
12
|
+
* Format: [{ label, id, items: [{ id, label }] }]
|
|
13
|
+
*/
|
|
14
|
+
options: {
|
|
15
|
+
type: Array,
|
|
16
|
+
required: true
|
|
17
|
+
},
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* ID of the currently selected option
|
|
21
|
+
* Used to highlight the selected item in the dropdown
|
|
22
|
+
*/
|
|
23
|
+
selectedOptionId: {
|
|
24
|
+
type: String,
|
|
25
|
+
default: ''
|
|
26
|
+
},
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Size of dropdown icon
|
|
30
|
+
*/
|
|
31
|
+
iconSize: {
|
|
32
|
+
type: String,
|
|
33
|
+
default: '10'
|
|
34
|
+
},
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Color of dropdown icon
|
|
38
|
+
*/
|
|
39
|
+
iconColor: {
|
|
40
|
+
type: String,
|
|
41
|
+
default: 'var(--gray-darken-4)'
|
|
42
|
+
},
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Icon name to display
|
|
46
|
+
*/
|
|
47
|
+
iconName: {
|
|
48
|
+
type: String,
|
|
49
|
+
default: '$caret_down'
|
|
50
|
+
},
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Data-qa attribute for testing
|
|
54
|
+
*/
|
|
55
|
+
dataQa: {
|
|
56
|
+
type: String,
|
|
57
|
+
default: 'VcHeaderDropdown'
|
|
58
|
+
},
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Aria label for accessibility
|
|
62
|
+
*/
|
|
63
|
+
ariaLabel: {
|
|
64
|
+
type: String,
|
|
65
|
+
default: 'Show options'
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
data: function data() {
|
|
69
|
+
return {
|
|
70
|
+
isOpen: false
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
};/* script */
|
|
74
|
+
var __vue_script__ = script;
|
|
75
|
+
/* template */
|
|
76
|
+
|
|
77
|
+
var __vue_render__ = function __vue_render__() {
|
|
78
|
+
var _vm = this;
|
|
79
|
+
|
|
80
|
+
var _h = _vm.$createElement;
|
|
81
|
+
|
|
82
|
+
var _c = _vm._self._c || _h;
|
|
83
|
+
|
|
84
|
+
return _c('VcDropdown', {
|
|
85
|
+
attrs: {
|
|
86
|
+
"close-on-content-click": true
|
|
87
|
+
},
|
|
88
|
+
scopedSlots: _vm._u([{
|
|
89
|
+
key: "activator",
|
|
90
|
+
fn: function fn(ref) {
|
|
91
|
+
var on = ref.on;
|
|
92
|
+
var attrs = ref.attrs;
|
|
93
|
+
return [_c('VcLayout', _vm._g(_vm._b({
|
|
94
|
+
staticClass: "VcHeaderDropdown__icon-wrapper",
|
|
95
|
+
attrs: {
|
|
96
|
+
"align-center": ""
|
|
97
|
+
}
|
|
98
|
+
}, 'VcLayout', attrs, false), on), [_c('VcIcon', {
|
|
99
|
+
attrs: {
|
|
100
|
+
"data-qa": _vm.dataQa,
|
|
101
|
+
"size": _vm.iconSize,
|
|
102
|
+
"color": _vm.iconColor,
|
|
103
|
+
"role": "button",
|
|
104
|
+
"aria-expanded": _vm.isOpen,
|
|
105
|
+
"aria-label": _vm.ariaLabel,
|
|
106
|
+
"tabindex": "0"
|
|
107
|
+
}
|
|
108
|
+
}, [_vm._v("\n " + _vm._s(_vm.iconName) + "\n ")])], 1)];
|
|
109
|
+
}
|
|
110
|
+
}]),
|
|
111
|
+
model: {
|
|
112
|
+
value: _vm.isOpen,
|
|
113
|
+
callback: function callback($$v) {
|
|
114
|
+
_vm.isOpen = $$v;
|
|
115
|
+
},
|
|
116
|
+
expression: "isOpen"
|
|
117
|
+
}
|
|
118
|
+
}, [_vm._v(" "), _c('VcGroupedItems', {
|
|
119
|
+
attrs: {
|
|
120
|
+
"item-groups": _vm.options,
|
|
121
|
+
"selected": _vm.selectedOptionId,
|
|
122
|
+
"selected-state-design": "highlighted"
|
|
123
|
+
},
|
|
124
|
+
on: {
|
|
125
|
+
"change": function change($event) {
|
|
126
|
+
return _vm.$emit('optionClicked', $event);
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
scopedSlots: _vm._u([{
|
|
130
|
+
key: "header",
|
|
131
|
+
fn: function fn(ref) {
|
|
132
|
+
var group = ref.group;
|
|
133
|
+
return [_c('div', {
|
|
134
|
+
staticClass: "VcHeaderDropdown__group-label"
|
|
135
|
+
}, [_vm._v(_vm._s(group.label))])];
|
|
136
|
+
}
|
|
137
|
+
}])
|
|
138
|
+
})], 1);
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
var __vue_staticRenderFns__ = [];
|
|
142
|
+
/* style */
|
|
143
|
+
|
|
144
|
+
var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
|
|
145
|
+
if (!inject) return;
|
|
146
|
+
inject("data-v-41098370_0", {
|
|
147
|
+
source: ".VcHeaderDropdown__icon-wrapper[data-v-41098370]{height:var(--size-value4);width:var(--size-value4);flex-grow:0;cursor:pointer}.VcHeaderDropdown__group-label[data-v-41098370]{color:var(--gray-darken-3);font-size:var(--font-size-xs-small);font-weight:var(--font-weight-large);padding:var(--size-value4) var(--size-value4) var(--size-value2)}",
|
|
148
|
+
map: undefined,
|
|
149
|
+
media: undefined
|
|
150
|
+
});
|
|
151
|
+
};
|
|
152
|
+
/* scoped */
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
var __vue_scope_id__ = "data-v-41098370";
|
|
156
|
+
/* module identifier */
|
|
157
|
+
|
|
158
|
+
var __vue_module_identifier__ = "data-v-41098370";
|
|
159
|
+
/* functional template */
|
|
160
|
+
|
|
161
|
+
var __vue_is_functional_template__ = false;
|
|
162
|
+
/* style inject shadow dom */
|
|
163
|
+
|
|
164
|
+
var __vue_component__ = /*#__PURE__*/entry.b2({
|
|
165
|
+
render: __vue_render__,
|
|
166
|
+
staticRenderFns: __vue_staticRenderFns__
|
|
167
|
+
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, entry.b3, undefined);exports["default"]=__vue_component__;
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
import 'vuetify/lib';
|
|
2
|
+
import { V as VcLayout, al as VcGroupedItems, ak as VcDropdown, F as VcIcon, b2 as normalizeComponent, b3 as createInjector } from './entry-e1653c11.js';
|
|
3
|
+
|
|
4
|
+
var script = {
|
|
5
|
+
name: 'VcHeaderDropdown',
|
|
6
|
+
components: {
|
|
7
|
+
VcLayout,
|
|
8
|
+
VcGroupedItems,
|
|
9
|
+
VcDropdown,
|
|
10
|
+
VcIcon
|
|
11
|
+
},
|
|
12
|
+
props: {
|
|
13
|
+
/**
|
|
14
|
+
* Array of grouped items for dropdown
|
|
15
|
+
* Format: [{ label, id, items: [{ id, label }] }]
|
|
16
|
+
*/
|
|
17
|
+
options: {
|
|
18
|
+
type: Array,
|
|
19
|
+
required: true
|
|
20
|
+
},
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* ID of the currently selected option
|
|
24
|
+
* Used to highlight the selected item in the dropdown
|
|
25
|
+
*/
|
|
26
|
+
selectedOptionId: {
|
|
27
|
+
type: String,
|
|
28
|
+
default: ''
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Size of dropdown icon
|
|
33
|
+
*/
|
|
34
|
+
iconSize: {
|
|
35
|
+
type: String,
|
|
36
|
+
default: '10'
|
|
37
|
+
},
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Color of dropdown icon
|
|
41
|
+
*/
|
|
42
|
+
iconColor: {
|
|
43
|
+
type: String,
|
|
44
|
+
default: 'var(--gray-darken-4)'
|
|
45
|
+
},
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* Icon name to display
|
|
49
|
+
*/
|
|
50
|
+
iconName: {
|
|
51
|
+
type: String,
|
|
52
|
+
default: '$caret_down'
|
|
53
|
+
},
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* Data-qa attribute for testing
|
|
57
|
+
*/
|
|
58
|
+
dataQa: {
|
|
59
|
+
type: String,
|
|
60
|
+
default: 'VcHeaderDropdown'
|
|
61
|
+
},
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Aria label for accessibility
|
|
65
|
+
*/
|
|
66
|
+
ariaLabel: {
|
|
67
|
+
type: String,
|
|
68
|
+
default: 'Show options'
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
|
|
72
|
+
data() {
|
|
73
|
+
return {
|
|
74
|
+
isOpen: false
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
/* script */
|
|
81
|
+
const __vue_script__ = script;
|
|
82
|
+
/* template */
|
|
83
|
+
|
|
84
|
+
var __vue_render__ = function () {
|
|
85
|
+
var _vm = this;
|
|
86
|
+
|
|
87
|
+
var _h = _vm.$createElement;
|
|
88
|
+
|
|
89
|
+
var _c = _vm._self._c || _h;
|
|
90
|
+
|
|
91
|
+
return _c('VcDropdown', {
|
|
92
|
+
attrs: {
|
|
93
|
+
"close-on-content-click": true
|
|
94
|
+
},
|
|
95
|
+
scopedSlots: _vm._u([{
|
|
96
|
+
key: "activator",
|
|
97
|
+
fn: function (ref) {
|
|
98
|
+
var on = ref.on;
|
|
99
|
+
var attrs = ref.attrs;
|
|
100
|
+
return [_c('VcLayout', _vm._g(_vm._b({
|
|
101
|
+
staticClass: "VcHeaderDropdown__icon-wrapper",
|
|
102
|
+
attrs: {
|
|
103
|
+
"align-center": ""
|
|
104
|
+
}
|
|
105
|
+
}, 'VcLayout', attrs, false), on), [_c('VcIcon', {
|
|
106
|
+
attrs: {
|
|
107
|
+
"data-qa": _vm.dataQa,
|
|
108
|
+
"size": _vm.iconSize,
|
|
109
|
+
"color": _vm.iconColor,
|
|
110
|
+
"role": "button",
|
|
111
|
+
"aria-expanded": _vm.isOpen,
|
|
112
|
+
"aria-label": _vm.ariaLabel,
|
|
113
|
+
"tabindex": "0"
|
|
114
|
+
}
|
|
115
|
+
}, [_vm._v("\n " + _vm._s(_vm.iconName) + "\n ")])], 1)];
|
|
116
|
+
}
|
|
117
|
+
}]),
|
|
118
|
+
model: {
|
|
119
|
+
value: _vm.isOpen,
|
|
120
|
+
callback: function ($$v) {
|
|
121
|
+
_vm.isOpen = $$v;
|
|
122
|
+
},
|
|
123
|
+
expression: "isOpen"
|
|
124
|
+
}
|
|
125
|
+
}, [_vm._v(" "), _c('VcGroupedItems', {
|
|
126
|
+
attrs: {
|
|
127
|
+
"item-groups": _vm.options,
|
|
128
|
+
"selected": _vm.selectedOptionId,
|
|
129
|
+
"selected-state-design": "highlighted"
|
|
130
|
+
},
|
|
131
|
+
on: {
|
|
132
|
+
"change": function ($event) {
|
|
133
|
+
return _vm.$emit('optionClicked', $event);
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
scopedSlots: _vm._u([{
|
|
137
|
+
key: "header",
|
|
138
|
+
fn: function (ref) {
|
|
139
|
+
var group = ref.group;
|
|
140
|
+
return [_c('div', {
|
|
141
|
+
staticClass: "VcHeaderDropdown__group-label"
|
|
142
|
+
}, [_vm._v(_vm._s(group.label))])];
|
|
143
|
+
}
|
|
144
|
+
}])
|
|
145
|
+
})], 1);
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
var __vue_staticRenderFns__ = [];
|
|
149
|
+
/* style */
|
|
150
|
+
|
|
151
|
+
const __vue_inject_styles__ = function (inject) {
|
|
152
|
+
if (!inject) return;
|
|
153
|
+
inject("data-v-41098370_0", {
|
|
154
|
+
source: ".VcHeaderDropdown__icon-wrapper[data-v-41098370]{height:var(--size-value4);width:var(--size-value4);flex-grow:0;cursor:pointer}.VcHeaderDropdown__group-label[data-v-41098370]{color:var(--gray-darken-3);font-size:var(--font-size-xs-small);font-weight:var(--font-weight-large);padding:var(--size-value4) var(--size-value4) var(--size-value2)}",
|
|
155
|
+
map: undefined,
|
|
156
|
+
media: undefined
|
|
157
|
+
});
|
|
158
|
+
};
|
|
159
|
+
/* scoped */
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
const __vue_scope_id__ = "data-v-41098370";
|
|
163
|
+
/* module identifier */
|
|
164
|
+
|
|
165
|
+
const __vue_module_identifier__ = undefined;
|
|
166
|
+
/* functional template */
|
|
167
|
+
|
|
168
|
+
const __vue_is_functional_template__ = false;
|
|
169
|
+
/* style inject SSR */
|
|
170
|
+
|
|
171
|
+
/* style inject shadow dom */
|
|
172
|
+
|
|
173
|
+
const __vue_component__ = /*#__PURE__*/normalizeComponent({
|
|
174
|
+
render: __vue_render__,
|
|
175
|
+
staticRenderFns: __vue_staticRenderFns__
|
|
176
|
+
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, createInjector, undefined, undefined);
|
|
177
|
+
|
|
178
|
+
export { __vue_component__ as default };
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
'use strict';require('vuetify/lib');var entry=require('./entry-e60ced8a.js');var script = {
|
|
2
|
+
name: 'VcHeaderDropdown',
|
|
3
|
+
components: {
|
|
4
|
+
VcLayout: entry.V,
|
|
5
|
+
VcGroupedItems: entry.al,
|
|
6
|
+
VcDropdown: entry.ak,
|
|
7
|
+
VcIcon: entry.F
|
|
8
|
+
},
|
|
9
|
+
props: {
|
|
10
|
+
/**
|
|
11
|
+
* Array of grouped items for dropdown
|
|
12
|
+
* Format: [{ label, id, items: [{ id, label }] }]
|
|
13
|
+
*/
|
|
14
|
+
options: {
|
|
15
|
+
type: Array,
|
|
16
|
+
required: true
|
|
17
|
+
},
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* ID of the currently selected option
|
|
21
|
+
* Used to highlight the selected item in the dropdown
|
|
22
|
+
*/
|
|
23
|
+
selectedOptionId: {
|
|
24
|
+
type: String,
|
|
25
|
+
default: ''
|
|
26
|
+
},
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Size of dropdown icon
|
|
30
|
+
*/
|
|
31
|
+
iconSize: {
|
|
32
|
+
type: String,
|
|
33
|
+
default: '10'
|
|
34
|
+
},
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Color of dropdown icon
|
|
38
|
+
*/
|
|
39
|
+
iconColor: {
|
|
40
|
+
type: String,
|
|
41
|
+
default: 'var(--gray-darken-4)'
|
|
42
|
+
},
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Icon name to display
|
|
46
|
+
*/
|
|
47
|
+
iconName: {
|
|
48
|
+
type: String,
|
|
49
|
+
default: '$caret_down'
|
|
50
|
+
},
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Data-qa attribute for testing
|
|
54
|
+
*/
|
|
55
|
+
dataQa: {
|
|
56
|
+
type: String,
|
|
57
|
+
default: 'VcHeaderDropdown'
|
|
58
|
+
},
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Aria label for accessibility
|
|
62
|
+
*/
|
|
63
|
+
ariaLabel: {
|
|
64
|
+
type: String,
|
|
65
|
+
default: 'Show options'
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
data: function data() {
|
|
69
|
+
return {
|
|
70
|
+
isOpen: false
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
};/* script */
|
|
74
|
+
var __vue_script__ = script;
|
|
75
|
+
/* template */
|
|
76
|
+
|
|
77
|
+
var __vue_render__ = function __vue_render__() {
|
|
78
|
+
var _vm = this;
|
|
79
|
+
|
|
80
|
+
var _h = _vm.$createElement;
|
|
81
|
+
|
|
82
|
+
var _c = _vm._self._c || _h;
|
|
83
|
+
|
|
84
|
+
return _c('VcDropdown', {
|
|
85
|
+
attrs: {
|
|
86
|
+
"close-on-content-click": true
|
|
87
|
+
},
|
|
88
|
+
scopedSlots: _vm._u([{
|
|
89
|
+
key: "activator",
|
|
90
|
+
fn: function fn(ref) {
|
|
91
|
+
var on = ref.on;
|
|
92
|
+
var attrs = ref.attrs;
|
|
93
|
+
return [_c('VcLayout', _vm._g(_vm._b({
|
|
94
|
+
staticClass: "VcHeaderDropdown__icon-wrapper",
|
|
95
|
+
attrs: {
|
|
96
|
+
"align-center": ""
|
|
97
|
+
}
|
|
98
|
+
}, 'VcLayout', attrs, false), on), [_c('VcIcon', {
|
|
99
|
+
attrs: {
|
|
100
|
+
"data-qa": _vm.dataQa,
|
|
101
|
+
"size": _vm.iconSize,
|
|
102
|
+
"color": _vm.iconColor,
|
|
103
|
+
"role": "button",
|
|
104
|
+
"aria-expanded": _vm.isOpen,
|
|
105
|
+
"aria-label": _vm.ariaLabel,
|
|
106
|
+
"tabindex": "0"
|
|
107
|
+
}
|
|
108
|
+
}, [_vm._v("\n " + _vm._s(_vm.iconName) + "\n ")])], 1)];
|
|
109
|
+
}
|
|
110
|
+
}]),
|
|
111
|
+
model: {
|
|
112
|
+
value: _vm.isOpen,
|
|
113
|
+
callback: function callback($$v) {
|
|
114
|
+
_vm.isOpen = $$v;
|
|
115
|
+
},
|
|
116
|
+
expression: "isOpen"
|
|
117
|
+
}
|
|
118
|
+
}, [_vm._v(" "), _c('VcGroupedItems', {
|
|
119
|
+
attrs: {
|
|
120
|
+
"item-groups": _vm.options,
|
|
121
|
+
"selected": _vm.selectedOptionId,
|
|
122
|
+
"selected-state-design": "highlighted"
|
|
123
|
+
},
|
|
124
|
+
on: {
|
|
125
|
+
"change": function change($event) {
|
|
126
|
+
return _vm.$emit('optionClicked', $event);
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
scopedSlots: _vm._u([{
|
|
130
|
+
key: "header",
|
|
131
|
+
fn: function fn(ref) {
|
|
132
|
+
var group = ref.group;
|
|
133
|
+
return [_c('div', {
|
|
134
|
+
staticClass: "VcHeaderDropdown__group-label"
|
|
135
|
+
}, [_vm._v(_vm._s(group.label))])];
|
|
136
|
+
}
|
|
137
|
+
}])
|
|
138
|
+
})], 1);
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
var __vue_staticRenderFns__ = [];
|
|
142
|
+
/* style */
|
|
143
|
+
|
|
144
|
+
var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
|
|
145
|
+
if (!inject) return;
|
|
146
|
+
inject("data-v-41098370_0", {
|
|
147
|
+
source: ".VcHeaderDropdown__icon-wrapper[data-v-41098370]{height:var(--size-value4);width:var(--size-value4);flex-grow:0;cursor:pointer}.VcHeaderDropdown__group-label[data-v-41098370]{color:var(--gray-darken-3);font-size:var(--font-size-xs-small);font-weight:var(--font-weight-large);padding:var(--size-value4) var(--size-value4) var(--size-value2)}",
|
|
148
|
+
map: undefined,
|
|
149
|
+
media: undefined
|
|
150
|
+
});
|
|
151
|
+
};
|
|
152
|
+
/* scoped */
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
var __vue_scope_id__ = "data-v-41098370";
|
|
156
|
+
/* module identifier */
|
|
157
|
+
|
|
158
|
+
var __vue_module_identifier__ = "data-v-41098370";
|
|
159
|
+
/* functional template */
|
|
160
|
+
|
|
161
|
+
var __vue_is_functional_template__ = false;
|
|
162
|
+
/* style inject shadow dom */
|
|
163
|
+
|
|
164
|
+
var __vue_component__ = /*#__PURE__*/entry.b2({
|
|
165
|
+
render: __vue_render__,
|
|
166
|
+
staticRenderFns: __vue_staticRenderFns__
|
|
167
|
+
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, entry.b3, undefined);exports["default"]=__vue_component__;
|