@vcita/design-system 1.3.9 → 1.3.11
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 +20 -21
- package/dist/@vcita/design-system.min.js +2 -2
- package/dist/@vcita/design-system.ssr.js +23 -24
- package/package.json +1 -1
- package/src/components/VcActions/VcActions.stories.js +0 -2
- package/src/components/VcAlert/VcAlert.stories.js +0 -1
- package/src/components/VcBreadcrumbs/VcBreadcrumbs.spec.js +0 -1
- package/src/components/VcChip/VcChip.spec.js +3 -0
- package/src/components/VcChip/VcChip.vue +14 -17
- package/src/components/VcForm/VcForm.stories.js +0 -1
- package/src/components/VcInputPopover/VcInputPopover.stories.js +0 -1
- package/src/components/VcProgressCircular/VcProgressCircular.stories.js +0 -1
- package/src/components/VcRadio/VcRadio.vue +1 -1
- package/src/components/VcRadioGroup/VcRadioGroup.spec.js +2 -2
- package/src/components/VcTooltip/VcTooltip.stories.js +0 -1
- package/src/components/VcUpsellBlock/VcUpsellBlock.vue +2 -4
- package/src/components/listBox/VcListbox/VcListbox.stories.js +0 -3
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
### Unreleased changes
|
|
9
9
|
|
|
10
|
+
### v1.3.11(2022-12-26)
|
|
11
|
+
- VcChip - support for the color blind, by showing the invalid icon for every invalid chip
|
|
12
|
+
|
|
13
|
+
### v1.3.10(2022-12-18)
|
|
14
|
+
- VcUpsellBlock - fix bug - support long text on the main button
|
|
15
|
+
- VcRadioGroup - fix radio with tooltip with custom content
|
|
16
|
+
|
|
10
17
|
### v1.3.9(2022-12-12)
|
|
11
18
|
- VcModalHeader - modify close icon in header
|
|
12
19
|
- VcChip - thin design
|
|
@@ -5350,27 +5350,26 @@ var __vue_render__$H = function () {
|
|
|
5350
5350
|
}
|
|
5351
5351
|
}
|
|
5352
5352
|
}, [_vm._t("chip-avatar", function () {
|
|
5353
|
-
return [
|
|
5354
|
-
staticClass: "
|
|
5355
|
-
|
|
5353
|
+
return [_vm.invalid ? _c('VcIcon', {
|
|
5354
|
+
staticClass: "v-chip__content__invalid-icon",
|
|
5355
|
+
attrs: {
|
|
5356
|
+
"data-qa": _vm.dataQa + "-invalid-icon"
|
|
5357
|
+
}
|
|
5358
|
+
}, [_vm._v("$attention_fill")]) : !!_vm.avatar ? _c('VcAvatar', _vm._b({
|
|
5359
|
+
staticClass: "v-chip__content__avatar",
|
|
5356
5360
|
attrs: {
|
|
5357
5361
|
"name": _vm.label,
|
|
5358
5362
|
"show-border": false,
|
|
5359
5363
|
"size": "x-sm"
|
|
5360
5364
|
}
|
|
5361
|
-
}, 'VcAvatar', _vm.avatar, false)) : _c('VcIcon', {
|
|
5362
|
-
|
|
5363
|
-
"data-qa": _vm.dataQa + "-invalid-icon"
|
|
5364
|
-
}
|
|
5365
|
-
}, [_vm._v("$attention_fill")])], 1) : _vm.selected ? _c('div', {
|
|
5366
|
-
staticClass: "vc-avatar-wrapper"
|
|
5367
|
-
}, [_c('VcIcon', {
|
|
5365
|
+
}, 'VcAvatar', _vm.avatar, false)) : _vm.selected ? _c('VcIcon', {
|
|
5366
|
+
staticClass: "v-chip__content__selected",
|
|
5368
5367
|
attrs: {
|
|
5369
5368
|
"data-qa": _vm.dataQa + "-check-icon",
|
|
5370
5369
|
"size": "12",
|
|
5371
5370
|
"color": "currentColor"
|
|
5372
5371
|
}
|
|
5373
|
-
}, [_vm._v("$check_button")])
|
|
5372
|
+
}, [_vm._v("$check_button")]) : _vm._e()];
|
|
5374
5373
|
}), _vm._v(" "), _vm._t("default", function () {
|
|
5375
5374
|
return [_vm.subLabel ? _c('span', {
|
|
5376
5375
|
staticClass: "VcChip__subLabel"
|
|
@@ -5383,8 +5382,8 @@ var __vue_staticRenderFns__$H = [];
|
|
|
5383
5382
|
|
|
5384
5383
|
const __vue_inject_styles__$I = function (inject) {
|
|
5385
5384
|
if (!inject) return;
|
|
5386
|
-
inject("data-v-
|
|
5387
|
-
source: "[data-v-
|
|
5385
|
+
inject("data-v-09693dcd_0", {
|
|
5386
|
+
source: "[data-v-09693dcd]: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-medium0:20px;--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-radius-circle:50%;--border-frame:1px solid var(--gray-lighten-1);--border-focused-frame:1px solid var(--v-secondary-base);--shadow-focused-frame:0px 0px 0px 3px var(--v-secondary-lighten1);--centered-layout-min-width:708px;--centered-layout-max-width:1316px;--popover-width:360px;--popover-max-height:464px;--popover-border-radius:10px;--modal-desktop-offset:0;--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}.VcChip[data-v-09693dcd]{max-width:fit-content;border:1px solid var(--neutral-lighten-1)}.VcChip.v-chip[data-v-09693dcd]{background-color:var(--modal-bg-color)}.VcChip.v-chip[data-v-09693dcd]:active{background-color:var(--neutral-lighten-1);box-shadow:none}.VcChip.v-chip .VcChip__subLabel[data-v-09693dcd]{color:var(--gray-darken-4);padding-inline-end:var(--size-value2)}.VcChip.v-chip .VcChip__subLabel[data-v-09693dcd]:after{content:\"|\";color:var(--gray-lighten-1);padding-inline-start:var(--size-value2);font-size:var(--size-value4)}.VcChip.v-chip[data-v-09693dcd] .v-chip__content{font-weight:var(--font-weight-medium2);font-size:var(--font-size-x-small);line-height:var(--size-value5);color:var(--gray-darken-5)}.VcChip.v-chip[data-v-09693dcd] .v-chip__content__avatar,.VcChip.v-chip[data-v-09693dcd] .v-chip__content__invalid-icon,.VcChip.v-chip[data-v-09693dcd] .v-chip__content__selected{margin-inline-end:var(--size-value2)}.VcChip.v-chip[data-v-09693dcd] .v-chip__content .vc-attention-fill{fill:var(--yellow)}.VcChip.v-chip[data-v-09693dcd] .v-chip__content .v-chip__close{direction:inherit;margin-inline:var(--size-value1) var(--size-value0);color:var(--gray)}.VcChip.v-chip[data-v-09693dcd] .v-chip__content .v-chip__close:hover{opacity:unset}.VcChip.v-chip.vc-avatar[data-v-09693dcd]:not(.VcChip--small),.VcChip.v-chip.vc-invalid[data-v-09693dcd]:not(.VcChip--small){padding-inline:var(--size-value1) var(--size-value3)}.VcChip.v-chip.VcChip--small[data-v-09693dcd]{padding-inline:0;height:var(--size-value6);padding-inline-end:var(--size-value2)}.VcChip.v-chip.VcChip--small[data-v-09693dcd]:not(.vc-avatar,.vc-invalid){padding-inline-start:var(--size-value3)}.VcChip.v-chip--disabled[data-v-09693dcd]{background-color:var(--gray-lighten-2);border:1px solid var(--gray-lighten-2)}.VcChip.v-chip--disabled[data-v-09693dcd] .v-chip__content{color:var(--gray-darken-1)}.VcChip.vc-invalid[data-v-09693dcd]{background-color:var(--yellow-lighten-3);border:1px solid var(--yellow)}.VcChip.vc-invalid[data-v-09693dcd]:hover{background-color:var(--yellow-lighten-2)}.VcChip.vc-selected[data-v-09693dcd]{background-color:var(--v-secondary-lighten3);border:1px solid var(--v-secondary-base)}.VcChip.vc-selected[data-v-09693dcd]:hover{background-color:var(--v-secondary-lighten3)}.VcChip.vc-selected[data-v-09693dcd] .v-chip__content{font-weight:var(--font-weight-large);color:var(--v-secondary-base)}.VcChip[data-v-09693dcd]:hover{background-color:var(--gray-lighten-3)}.VcChip[data-v-09693dcd]:hover:before{opacity:0}.VcChip[data-v-09693dcd]:focus{box-shadow:0 0 0 3px var(--v-secondary-lighten1)}.VcChip[data-v-09693dcd]:focus:before{opacity:0}",
|
|
5388
5387
|
map: undefined,
|
|
5389
5388
|
media: undefined
|
|
5390
5389
|
});
|
|
@@ -5392,7 +5391,7 @@ const __vue_inject_styles__$I = function (inject) {
|
|
|
5392
5391
|
/* scoped */
|
|
5393
5392
|
|
|
5394
5393
|
|
|
5395
|
-
const __vue_scope_id__$I = "data-v-
|
|
5394
|
+
const __vue_scope_id__$I = "data-v-09693dcd";
|
|
5396
5395
|
/* module identifier */
|
|
5397
5396
|
|
|
5398
5397
|
const __vue_module_identifier__$I = undefined;
|
|
@@ -8664,8 +8663,8 @@ var __vue_staticRenderFns__$j = [];
|
|
|
8664
8663
|
|
|
8665
8664
|
const __vue_inject_styles__$k = function (inject) {
|
|
8666
8665
|
if (!inject) return;
|
|
8667
|
-
inject("data-v-
|
|
8668
|
-
source: ".VcUpsellBlock[data-v-
|
|
8666
|
+
inject("data-v-9fdf527a_0", {
|
|
8667
|
+
source: ".VcUpsellBlock[data-v-9fdf527a]{flex-flow:row wrap;width:100%;height:100vh;max-width:960px;margin:auto;overflow-x:hidden;font-style:normal}@media screen and (min-width:960px){.VcUpsellBlock[data-v-9fdf527a]{overflow-x:visible}.VcUpsellBlock.dialog[data-v-9fdf527a]{overflow:hidden}}.VcUpsellBlock[data-v-9fdf527a]:before{content:\"\";position:absolute;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='1387' height='1787' viewBox='0 0 1387 1787' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='background_stain' d='M965.208 1786.79L1240.04 1427.2C1388.67 1251.5 1443.75 1042.72 1314.06 863.507L768.194 165.405C638.503 -13.8061 388.739 -53.6307 210.377 76.6778L164.621 109.767C-13.7407 240.369 -53.3766 491.322 76.3144 670.533L649.578 1404.65L965.208 1786.79Z' fill='%230093B8'/%3E%3C/svg%3E\");background-color:var(--v-secondary-base);opacity:15%;inset:70% 0 0 0}@media screen and (min-width:960px){.VcUpsellBlock[data-v-9fdf527a]:before{inset:0;inset-inline-start:50%}}#app[dir=rtl] .VcUpsellBlock[data-v-9fdf527a]:before{transform:scaleX(-1)}.VcUpsellBlock.dialog[data-v-9fdf527a]{height:100%;padding-top:8px}@media screen and (min-width:960px){.VcUpsellBlock.dialog[data-v-9fdf527a]{padding-top:70px;padding-bottom:46px}}@media screen and (min-width:960px){.VcUpsellBlock.dialog[data-v-9fdf527a]:before{top:-10%}}.VcUpsellBlock .text-container[data-v-9fdf527a]{flex:0 0 100%;margin:0 auto}@media screen and (min-width:960px){.VcUpsellBlock .text-container[data-v-9fdf527a]{flex:0 0 55%;max-width:444px}}.VcUpsellBlock .text-container .title-text[data-v-9fdf527a]{font-weight:var(--font-weight-large2);font-size:var(--font-size-medium2);line-height:32px;letter-spacing:.01em}@media screen and (min-width:960px){.VcUpsellBlock .text-container .title-text[data-v-9fdf527a]{font-size:var(--font-size-large);line-height:40px}}.VcUpsellBlock .text-container .sub-text[data-v-9fdf527a]{font-weight:var(--font-weight-large);font-size:var(--font-size-medium);line-height:28px;letter-spacing:var(--letter-spacing)}.VcUpsellBlock .text-container .bullets-text[data-v-9fdf527a]{font-weight:var(--font-weight-medium2);font-size:var(--font-size-small2);line-height:20px}.VcUpsellBlock .text-container .bullets-text .bullets-icon[data-v-9fdf527a]{margin-inline-end:12px}.VcUpsellBlock .text-container .bullets-text .bullets-span[data-v-9fdf527a]{font-weight:var(--font-weight-medium2);font-size:var(--font-size-small2);line-height:20px;color:#000}.VcUpsellBlock .text-container .cta-container[data-v-9fdf527a]{flex:1 1 auto;flex-flow:row wrap;align-items:center;margin:32px auto 0}.VcUpsellBlock .text-container .cta-container .primary-cta[data-v-9fdf527a]{z-index:2;width:auto;margin:0 auto;min-width:214px;line-height:48px;min-height:48px;font-weight:var(--font-weight-large);font-size:var(--font-size-small2)}@media screen and (min-width:960px){.VcUpsellBlock .text-container .cta-container .primary-cta[data-v-9fdf527a]{margin:0;height:48px}}.VcUpsellBlock .text-container .cta-container .primary-cta .v-btn__content[data-v-9fdf527a]{flex-flow:row wrap;width:100%;white-space:break-spaces}.VcUpsellBlock .text-container .cta-container .secondary-cta[data-v-9fdf527a]{flex:0 0 100%;text-align:center;font-weight:var(--font-weight-large);font-size:var(--font-size-small2);line-height:48px;height:48px;color:var(--gray-darken-5);margin:0;text-decoration:none}@media screen and (min-width:960px){.VcUpsellBlock .text-container .cta-container .secondary-cta[data-v-9fdf527a]{flex:0 0 45%;color:var(--blue);font-weight:var(--font-weight-large2)}}.VcUpsellBlock .text-container .cta-container-dialog[data-v-9fdf527a]{width:100%;z-index:1;position:absolute;justify-content:space-between;background:#fff;bottom:0;left:0;right:0;margin:0;height:72px;padding:0 24px}@media screen and (min-width:960px){.VcUpsellBlock .text-container .cta-container-dialog[data-v-9fdf527a]{position:static;justify-content:flex-start;padding:0}}.VcUpsellBlock .text-container .cta-container-dialog .primary-cta[data-v-9fdf527a]{flex:0 0 55%;margin:0;order:2}@media screen and (min-width:960px){.VcUpsellBlock .text-container .cta-container-dialog .primary-cta[data-v-9fdf527a]{flex:0 0 45%;order:0}}.VcUpsellBlock .text-container .cta-container-dialog .secondary-cta[data-v-9fdf527a]{flex:1 0 35%;padding-top:0}@media screen and (min-width:960px){.VcUpsellBlock .text-container .cta-container-dialog .secondary-cta[data-v-9fdf527a]{flex:0 0 45%}}.VcUpsellBlock .images-container[data-v-9fdf527a]{position:relative;flex:1 0 100%;margin:0 auto;min-height:40%;height:auto;overflow:hidden}@media screen and (min-width:960px){.VcUpsellBlock .images-container[data-v-9fdf527a]{flex:0 0 45%;overflow:visible}}.VcUpsellBlock .images-container .upsell-image[data-v-9fdf527a]{position:absolute;width:320px;height:380px;right:0;left:0;margin:0 auto}@media screen and (min-width:960px){.VcUpsellBlock .images-container .upsell-image[data-v-9fdf527a]{height:580px;width:466px;top:0;bottom:0;margin:auto}}",
|
|
8669
8668
|
map: undefined,
|
|
8670
8669
|
media: undefined
|
|
8671
8670
|
});
|
|
@@ -8673,7 +8672,7 @@ const __vue_inject_styles__$k = function (inject) {
|
|
|
8673
8672
|
/* scoped */
|
|
8674
8673
|
|
|
8675
8674
|
|
|
8676
|
-
const __vue_scope_id__$k = "data-v-
|
|
8675
|
+
const __vue_scope_id__$k = "data-v-9fdf527a";
|
|
8677
8676
|
/* module identifier */
|
|
8678
8677
|
|
|
8679
8678
|
const __vue_module_identifier__$k = undefined;
|
|
@@ -8960,7 +8959,7 @@ var __vue_render__$h = function () {
|
|
|
8960
8959
|
}), _vm._v(" "), _vm.tooltipProps ? _c('vc-tooltip', _vm._b({
|
|
8961
8960
|
staticClass: "radio-tooltip",
|
|
8962
8961
|
scopedSlots: _vm._u([{
|
|
8963
|
-
key: "
|
|
8962
|
+
key: "tooltipContent",
|
|
8964
8963
|
fn: function () {
|
|
8965
8964
|
return [_vm._t("tooltip-content")];
|
|
8966
8965
|
},
|
|
@@ -8978,8 +8977,8 @@ var __vue_staticRenderFns__$h = [];
|
|
|
8978
8977
|
|
|
8979
8978
|
const __vue_inject_styles__$i = function (inject) {
|
|
8980
8979
|
if (!inject) return;
|
|
8981
|
-
inject("data-v-
|
|
8982
|
-
source: ".label-container[data-v-
|
|
8980
|
+
inject("data-v-6b49da34_0", {
|
|
8981
|
+
source: ".label-container[data-v-6b49da34]{margin-inline-start:var(--size-value2)}.radio-label[data-v-6b49da34]{color:var(--gray-darken-5);font-weight:var(--font-weight-medium2);font-size:var(--font-size-x-small)}.radio-icon[data-v-6b49da34]{margin-inline-start:var(--size-value2);font-size:var(--size-value4)}.radio-icon[data-v-6b49da34] .v-icon__component{height:var(--size-value4);width:var(--size-value4)}.radio-tooltip[data-v-6b49da34]{height:var(--size-value5);margin-inline-start:var(--size-value2)}.radio-tooltip[data-v-6b49da34] .v-icon__component{width:var(--size-value4)}.vc-radio[data-v-6b49da34]{margin:0;margin-bottom:auto}.vc-radio.v-input--radio-group--column[data-v-6b49da34] .v-radio:not(:last-child):not(:only-child){margin-bottom:var(--size-value4)}.vc-radio[data-v-6b49da34] .v-input--selection-controls__ripple{inset-inline-start:-9px;top:calc(50% - 17px);width:var(--size-value5);height:var(--size-value5)}.vc-radio[data-v-6b49da34] .v-input--selection-controls__input{margin:0;padding:0;margin-bottom:auto;height:var(--size-value5);width:var(--size-value4)}.vc-radio[data-v-6b49da34] .v-input--selection-controls__input .v-icon{font-size:var(--font-size-medium)}",
|
|
8983
8982
|
map: undefined,
|
|
8984
8983
|
media: undefined
|
|
8985
8984
|
});
|
|
@@ -8987,7 +8986,7 @@ const __vue_inject_styles__$i = function (inject) {
|
|
|
8987
8986
|
/* scoped */
|
|
8988
8987
|
|
|
8989
8988
|
|
|
8990
|
-
const __vue_scope_id__$i = "data-v-
|
|
8989
|
+
const __vue_scope_id__$i = "data-v-6b49da34";
|
|
8991
8990
|
/* module identifier */
|
|
8992
8991
|
|
|
8993
8992
|
const __vue_module_identifier__$i = undefined;
|