@vcita/design-system 1.1.7 → 1.1.8
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/CHANGELOG.MD +7 -0
- package/dist/@vcita/design-system.esm.js +27 -12
- package/dist/@vcita/design-system.min.js +2 -2
- package/dist/@vcita/design-system.ssr.js +32 -17
- package/package.json +1 -1
- package/src/components/VcSearchPicker/VcSearchPicker.vue +4 -3
- package/src/components/modal/VcInputModal/VcInputModal.stories.js +2 -0
- package/src/components/modal/VcInputModal/VcInputModal.vue +5 -0
- package/src/components/modal/elements/VcModalContainer.stories.js +3 -2
- package/src/components/modal/elements/VcModalContainer.vue +5 -0
- package/src/components/modal/elements/VcModalWrapper.stories.js +2 -1
- package/src/components/modal/elements/VcModalWrapper.vue +5 -1
package/CHANGELOG.MD
CHANGED
|
@@ -6,6 +6,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
6
6
|
|
|
7
7
|
### Unreleased changes
|
|
8
8
|
|
|
9
|
+
### v1.1.8 (2022-09-05)
|
|
10
|
+
- VcInputModal - added closeOnEsc prop, passed to VcModalContainer
|
|
11
|
+
- VcModalContainer - added closeOnEsc prop, passed to VcModalWrapper
|
|
12
|
+
- VcModalWrapper - added closeOnEsc prop, used as condition for esc keydown event
|
|
13
|
+
- VcSearchPicker - use secondary brand hues
|
|
14
|
+
- VcSearchPicker - keep menu open if focusing the text input
|
|
15
|
+
|
|
9
16
|
### v1.1.7 (2022-09-04)
|
|
10
17
|
- VcDocItem - added svg as an image type
|
|
11
18
|
- VcSearchPicker - caret and pointer color
|
|
@@ -29,6 +29,10 @@ var script$$ = {
|
|
|
29
29
|
contentClass: {
|
|
30
30
|
type: String,
|
|
31
31
|
default: ''
|
|
32
|
+
},
|
|
33
|
+
closeOnEsc: {
|
|
34
|
+
type: Boolean,
|
|
35
|
+
default: true
|
|
32
36
|
}
|
|
33
37
|
},
|
|
34
38
|
|
|
@@ -191,7 +195,7 @@ var __vue_render__$Y = function () {
|
|
|
191
195
|
return null;
|
|
192
196
|
}
|
|
193
197
|
|
|
194
|
-
|
|
198
|
+
_vm.closeOnEsc && _vm.$emit('onCloseButtonClicked');
|
|
195
199
|
}, function ($event) {
|
|
196
200
|
if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
|
|
197
201
|
return null;
|
|
@@ -211,7 +215,7 @@ var __vue_staticRenderFns__$Y = [];
|
|
|
211
215
|
|
|
212
216
|
const __vue_inject_styles__$$ = function (inject) {
|
|
213
217
|
if (!inject) return;
|
|
214
|
-
inject("data-v-
|
|
218
|
+
inject("data-v-7e4b12ce_0", {
|
|
215
219
|
source: ".VcModalWrapper{position:relative;width:auto;background-color:var(--modal-bg-color);box-shadow:var(--modal-box-shadow)}@media screen and (min-width:960px){.VcModalWrapper{margin:0 24px}.VcModalWrapper.offset{left:var(--modal-desktop-offset)}#app[dir=rtl] .VcModalWrapper.offset{left:auto;right:var(--modal-desktop-offset)}}",
|
|
216
220
|
map: undefined,
|
|
217
221
|
media: undefined
|
|
@@ -521,6 +525,10 @@ var script$Y = {
|
|
|
521
525
|
type: String,
|
|
522
526
|
required: false,
|
|
523
527
|
validator: prop => ['', 'confirm', 'notice', 'input', 'prominent'].includes(prop)
|
|
528
|
+
},
|
|
529
|
+
closeOnEsc: {
|
|
530
|
+
type: Boolean,
|
|
531
|
+
default: true
|
|
524
532
|
}
|
|
525
533
|
},
|
|
526
534
|
computed: {
|
|
@@ -546,7 +554,8 @@ var __vue_render__$W = function () {
|
|
|
546
554
|
return _vm.showDialog ? _c('VcModalWrapper', {
|
|
547
555
|
attrs: {
|
|
548
556
|
"useOffset": _vm.useOffset,
|
|
549
|
-
"contentClass": _vm.size + " VcModalContainer " + (_vm.flavor ? _vm.flavor : 'unflavored')
|
|
557
|
+
"contentClass": _vm.size + " VcModalContainer " + (_vm.flavor ? _vm.flavor : 'unflavored'),
|
|
558
|
+
"closeOnEsc": _vm.closeOnEsc
|
|
550
559
|
},
|
|
551
560
|
on: {
|
|
552
561
|
"click-outside": function ($event) {
|
|
@@ -614,7 +623,7 @@ var __vue_staticRenderFns__$W = [];
|
|
|
614
623
|
|
|
615
624
|
const __vue_inject_styles__$Y = function (inject) {
|
|
616
625
|
if (!inject) return;
|
|
617
|
-
inject("data-v-
|
|
626
|
+
inject("data-v-14a2da43_0", {
|
|
618
627
|
source: ".VcModalContainer{overflow-y:hidden;height:auto;min-height:100px;min-width:300px;display:flex}.VcModalContainer.sm{width:var(--modal-width-small)}.VcModalContainer.md{width:var(--modal-width-medium)}.VcModalContainer.lg{width:var(--modal-width-large)}.VcModalContainer.xl{width:var(--modal-width-x-large)}.VcModalContainer.responsive{width:100%;margin:0 24px}.VcModalContainer .VcModalContainerContent,.VcModalContainer footer,.VcModalContainer header{flex-shrink:0}.VcModalContainer header{display:flex;justify-content:space-between}.VcModalContainer header .VcModalCloseButton{position:absolute;z-index:1;inset-inline-end:5px;top:var(--size-value2)}.VcModalContainer header .VcModalCloseButton .VcIcon{font-size:22px}.VcModalContainer header.showDivider{border-bottom:1px solid rgba(0,0,0,.12)}.VcModalContainer .VcModalContainerContent{overflow-y:auto;overflow-x:hidden;height:calc(100% - 138px);line-height:var(--size-value6);flex-grow:1;font-size:var(--font-size-small);padding:0 var(--size-value6) var(--size-value6)}.VcModalContainer footer{padding:var(--size-value3) var(--size-value4) var(--size-value3);text-align:right}#app[dir=rtl] .VcModalContainer footer{text-align:left}.VcModalContainer footer.showDivider{border-top:1px solid rgba(0,0,0,.12)}@media screen and (min-width:960px){.VcModalContainer footer{padding:var(--size-value3) var(--size-value6) var(--size-value3)}}.VcModalContainer.notice header,.VcModalContainer.prominent header{font-weight:var(--font-weight-xl);font-size:var(--font-size-medium2);padding-bottom:0;padding-top:var(--size-value10)}.VcModalContainer.notice .VcModalContainerContent,.VcModalContainer.prominent .VcModalContainerContent{padding:0;min-height:168px;height:calc(100% - 497px)}@media screen and (min-width:960px){.VcModalContainer.notice .VcModalContainerContent,.VcModalContainer.prominent .VcModalContainerContent{margin-bottom:var(--size-value2)}}.VcModalContainer.notice footer,.VcModalContainer.prominent footer{padding-top:var(--size-value3);padding-bottom:0}.VcModalContainer.notice.responsive .VcModalContainerContent,.VcModalContainer.notice.sm .VcModalContainerContent,.VcModalContainer.prominent.responsive .VcModalContainerContent,.VcModalContainer.prominent.sm .VcModalContainerContent{margin-left:var(--size-value6);padding-right:var(--size-value6)}.VcModalContainer.notice.md .VcModalContainerContent,.VcModalContainer.prominent.md .VcModalContainerContent{margin-left:var(--size-value10);padding-right:var(--size-value10)}.VcModalContainer.notice.lg header,.VcModalContainer.prominent.lg header{height:initial}.VcModalContainer.notice.lg .VcModalContainerContent,.VcModalContainer.prominent.lg .VcModalContainerContent{min-height:0;margin-left:var(--size-value16);padding-right:var(--size-value16)}.VcModalContainer.prominent .VcModalContainerContent{margin-bottom:var(--size-value6)}.VcModalContainer.input.responsive{height:100%;margin:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.VcModalContainer.input .VcModalContainerContent{padding:0}",
|
|
619
628
|
map: undefined,
|
|
620
629
|
media: undefined
|
|
@@ -1305,6 +1314,10 @@ var script$S = {
|
|
|
1305
1314
|
dataQa: {
|
|
1306
1315
|
type: String,
|
|
1307
1316
|
default: 'vc-input-modal'
|
|
1317
|
+
},
|
|
1318
|
+
closeOnEsc: {
|
|
1319
|
+
type: Boolean,
|
|
1320
|
+
default: true
|
|
1308
1321
|
}
|
|
1309
1322
|
},
|
|
1310
1323
|
data: () => ({
|
|
@@ -1359,7 +1372,8 @@ var __vue_render__$S = function () {
|
|
|
1359
1372
|
"flavor": "input",
|
|
1360
1373
|
"useOffset": _vm.useOffset,
|
|
1361
1374
|
"showDialog": _vm.showDialog,
|
|
1362
|
-
"size": _vm.$vuetify.breakpoint.mdAndUp ? _vm.size : 'responsive'
|
|
1375
|
+
"size": _vm.$vuetify.breakpoint.mdAndUp ? _vm.size : 'responsive',
|
|
1376
|
+
"closeOnEsc": _vm.closeOnEsc
|
|
1363
1377
|
},
|
|
1364
1378
|
on: {
|
|
1365
1379
|
"onCloseButtonClicked": function ($event) {
|
|
@@ -1454,8 +1468,8 @@ var __vue_staticRenderFns__$S = [];
|
|
|
1454
1468
|
|
|
1455
1469
|
const __vue_inject_styles__$S = function (inject) {
|
|
1456
1470
|
if (!inject) return;
|
|
1457
|
-
inject("data-v-
|
|
1458
|
-
source: ".VcInputForm-layout .VcInputForm-main[data-v-
|
|
1471
|
+
inject("data-v-774858ab_0", {
|
|
1472
|
+
source: ".VcInputForm-layout .VcInputForm-main[data-v-774858ab]{width:100%;max-width:100%;padding:var(--size-value6)}.VcInputForm-layout .VcInputForm-additional[data-v-774858ab]{min-width:324px;padding:var(--size-value6);background:#f8f9fb;border-left:1px solid rgba(0,0,0,.12)}",
|
|
1459
1473
|
map: undefined,
|
|
1460
1474
|
media: undefined
|
|
1461
1475
|
});
|
|
@@ -1463,7 +1477,7 @@ const __vue_inject_styles__$S = function (inject) {
|
|
|
1463
1477
|
/* scoped */
|
|
1464
1478
|
|
|
1465
1479
|
|
|
1466
|
-
const __vue_scope_id__$S = "data-v-
|
|
1480
|
+
const __vue_scope_id__$S = "data-v-774858ab";
|
|
1467
1481
|
/* module identifier */
|
|
1468
1482
|
|
|
1469
1483
|
const __vue_module_identifier__$S = undefined;
|
|
@@ -9199,7 +9213,8 @@ var script$1 = {
|
|
|
9199
9213
|
},
|
|
9200
9214
|
|
|
9201
9215
|
methods: {
|
|
9202
|
-
toggleMenu() {
|
|
9216
|
+
toggleMenu(e) {
|
|
9217
|
+
if (this.focused && e.target.type === "text") return;
|
|
9203
9218
|
this.$emit('onMenuToggled', {
|
|
9204
9219
|
isOpen: !this.focused
|
|
9205
9220
|
});
|
|
@@ -9340,8 +9355,8 @@ var __vue_staticRenderFns__$1 = [];
|
|
|
9340
9355
|
|
|
9341
9356
|
const __vue_inject_styles__$1 = function (inject) {
|
|
9342
9357
|
if (!inject) return;
|
|
9343
|
-
inject("data-v-
|
|
9344
|
-
source: "[data-v-
|
|
9358
|
+
inject("data-v-18551c54_0", {
|
|
9359
|
+
source: "[data-v-18551c54]:root{--primary-font-family:Montserrat;--font-size-xxx-small:9px;--font-size-xx-small:12px;--font-size-x-small:13px;--font-size-small:14px;--font-size-small2:15px;--font-size-small3:17px;--font-size-medium:18px;--font-size-medium1:22px;--font-size-medium2:24px;--font-size-large:28px;--font-weight-light:300;--font-weight-medium:400;--font-weight-medium2:500;--font-weight-large:600;--font-weight-large2:700;--font-weight-xl:800;--letter-spacing:0.003em;--size-value0:0px;--size-value1:4px;--size-value2:8px;--size-value3:12px;--size-value4:16px;--size-value5:20px;--size-value6:24px;--size-value7:28px;--size-value8:32px;--size-value9:36px;--size-value10:40px;--size-value11:44px;--size-value12:48px;--size-value13:52px;--size-value14:56px;--size-value15:60px;--size-value16:64px;--size-value17:68px;--size-value18:72px;--size-value19:76px;--size-value20:80px;--border-radius:6px;--border-frame:1px solid #e0e0e0;--border-focused-frame:1px solid var(--v-secondary-base);--shadow-focused-frame:0px 0px 0px 3px var(--v-secondary-lighten1);--popover-width:360px;--popover-max-height:464px;--popover-border-radius:10px;--modal-desktop-offset:-112px;--modal-bg-color:#ffffff;--modal-box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--modal-border-radius:10px;--modal-width-small:384px;--modal-width-medium:576px;--modal-width-large:816px;--modal-width-x-large:972px;--avatar-x-sm:24px;--avatar-sm:32px;--avatar-md:40px;--avatar-lg:48px;--dropzone-active-border-color:#1e93b7;--dropzone-active-second-border-color:#95cddb;--select-field-height:52px;--gray-darken-5:#212121;--gray-darken-4:#616161;--gray-darken-3:#757575;--gray-darken-2:#999999;--gray-darken-1:#b3b3b3;--gray:#cccccc;--gray-lighten-1:#e0e0e0;--gray-lighten-2:#ededed;--gray-lighten-3:#f7f7f7;--gray-lighten-4:#fafafa;--neutral:#586E8C;--neutral-lighten-1:#D6DBE6;--neutral-lighten-2:#EAEDF2;--neutral-lighten-3:#F8F9FB;--red:#F2514A;--red-lighten-1:#F79792;--red-lighten-2:#FBCBC9;--red-lighten-3:#FDE8E7;--yellow:#FFC511;--yellow-lighten-1:#FFDC70;--yellow-lighten-2:#FFEDB8;--yellow-lighten-3:#FFF7E0;--green:#54D28C;--green-lighten-1:#98E4BA;--green-lighten-2:#CFF8E1;--green-lighten-3:#EAFCF2;--blue:#478FFF;--blue-lighten-1:#91BCFF;--blue-lighten-2:#C8DDFF;--blue-lighten-3:#E7F0FF;--orange:#FF8F00;--orange-lighten-1:#FCB965;--orange-lighten-2:#FAD9B0;--orange-lighten-3:#F9EBDA;--shadow-1:0px 1px 4px rgba(0, 0, 0, 0.11);--shadow-2:0px 2px 5px rgba(0, 0, 0, 0.1),0px 2px 2px rgba(0, 0, 0, 0.06),0px 3px 1px -2px rgba(0, 0, 0, 0.06);--shadow-3:0px 3px 2px rgba(0, 0, 0, 0.101961);--shadow-4:0px 1px 1px rgba(0, 0, 0, 0.06),0px 3px 8px rgba(0, 0, 0, 0.15);--shadow-5:0px 4px 18px rgba(0, 0, 0, 0.1);--shadow-6:0px 1px 10px rgba(0, 0, 0, 0.12),0px 4px 7px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.2);--shadow-7:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);--shadow-8:0px 5px 7px 3px rgba(0, 0, 0, 0.26);--shadow-9:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--shadow-10:0px 4px 8px #cccccc}.vc-search-picker[data-v-18551c54]{position:relative}.vc-search-picker__error-label[data-v-18551c54]{font-weight:var(--font-weight-medium);font-size:var(--font-size-xx-small);color:var(--red)}.vc-search-picker[data-v-18551c54] .v-input__slot{border:1px solid var(--gray-lighten-1);border-radius:var(--border-radius);height:var(--size-value13);padding:0 var(--size-value5);background-color:var(--modal-bg-color)}.vc-search-picker[data-v-18551c54] .v-input__slot:hover{border-color:var(--gray-darken-2)}.vc-search-picker[data-v-18551c54] .v-input__icon--append .v-icon{transform:rotate(0);color:var(--gray-darken-3)!important}.vc-search-picker[data-v-18551c54] .autocomplete--open .v-input__icon--append .v-icon{transform:rotate(180deg)}.vc-search-picker[data-v-18551c54] .autocomplete--open .v-input__slot{border-color:var(--v-secondary-base);outline:2px solid var(--v-secondary-lighten1)}.vc-search-picker[data-v-18551c54] .autocomplete{height:var(--size-value13);padding-top:0;margin-top:0}.vc-search-picker[data-v-18551c54] .autocomplete--error .v-input__slot{border-color:var(--red)}.vc-search-picker[data-v-18551c54] .autocomplete--has-items .placeholder-text:not(:first-of-type){display:none}.vc-search-picker[data-v-18551c54] .autocomplete--has-items.autocomplete--search-content .placeholder-text{display:none}.vc-search-picker[data-v-18551c54] .placeholder-text{font-size:var(--font-size-small2);font-weight:var(--font-weight-medium);color:var(--gray-darken-5);margin-inline-end:var(--size-value2);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.vc-search-picker[data-v-18551c54] .v-text-field>.v-input__control>.v-input__slot:after,.vc-search-picker[data-v-18551c54] .v-text-field>.v-input__control>.v-input__slot:before{content:initial}.vc-search-picker[data-v-18551c54] .v-input__prepend-inner{margin-right:auto;padding-inline-end:var(--size-value3);height:100%;display:flex;align-items:center;margin-top:0}.vc-search-picker[data-v-18551c54] .v-select__selections{flex-wrap:nowrap}.vc-search-picker[data-v-18551c54] .v-select__selections input[type=text]{display:inline-block;font-size:var(--font-size-small2);color:var(--gray-darken-5);caret-color:currentColor}.vc-search-picker[data-v-18551c54] .v-list-item--active::before{content:none}.v-menu__content.vc-select-field-menu[data-v-18551c54]{top:var(--size-value4)}.v-menu__content.vc-select-field-menu .v-input.vc-checkbox[data-v-18551c54]{margin:0;padding:0}.v-menu__content.vc-select-field-menu .spinner[data-v-18551c54]{margin:0 auto;display:block}[data-v-18551c54] .v-list-item--link{font-size:var(--font-size-x-small)}[data-v-18551c54] .v-list-item--link:before{content:initial}",
|
|
9345
9360
|
map: undefined,
|
|
9346
9361
|
media: undefined
|
|
9347
9362
|
});
|
|
@@ -9349,7 +9364,7 @@ const __vue_inject_styles__$1 = function (inject) {
|
|
|
9349
9364
|
/* scoped */
|
|
9350
9365
|
|
|
9351
9366
|
|
|
9352
|
-
const __vue_scope_id__$1 = "data-v-
|
|
9367
|
+
const __vue_scope_id__$1 = "data-v-18551c54";
|
|
9353
9368
|
/* module identifier */
|
|
9354
9369
|
|
|
9355
9370
|
const __vue_module_identifier__$1 = undefined;
|