@vcita/design-system 0.5.0-beta.1 → 0.5.0-beta.2

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.
@@ -3529,33 +3529,24 @@ var __vue_component__$s = /*#__PURE__*/normalizeComponent({
3529
3529
  default: 'VcListbox'
3530
3530
  }
3531
3531
  },
3532
- data: function data() {
3533
- return {
3534
- confirmedArray: []
3535
- };
3536
- },
3537
- watch: {
3538
- items: {
3539
- immediate: true,
3540
- deep: true,
3541
- handler: function handler(values) {
3542
- this.confirmedArray = values.filter(function (item) {
3543
- return item.checked;
3544
- });
3545
- }
3546
- }
3547
- },
3548
3532
  computed: {
3549
3533
  getAddAnotherLabel: function getAddAnotherLabel() {
3550
3534
  return this.addAnotherLabel || this.$dst('ds.listbox.add');
3535
+ },
3536
+ confirmedArray: function confirmedArray() {
3537
+ return this.items.filter(function (item) {
3538
+ return item.checked;
3539
+ });
3551
3540
  }
3552
3541
  },
3553
3542
  methods: {
3554
3543
  onSelection: function onSelection(selections) {
3555
- selections.forEach(function (selected) {
3556
- return selected.checked = true;
3544
+ var newSelections = selections.map(function (selected) {
3545
+ return _objectSpread2(_objectSpread2({}, selected), {}, {
3546
+ checked: true
3547
+ });
3557
3548
  });
3558
- this.$emit('change', selections);
3549
+ this.$emit('change', newSelections);
3559
3550
  }
3560
3551
  }
3561
3552
  };/* script */
@@ -3569,7 +3560,7 @@ var __vue_render__$r = function __vue_render__() {
3569
3560
 
3570
3561
  var _c = _vm._self._c || _h;
3571
3562
 
3572
- return _c('div', [_vm._ssrNode((_vm.title ? "<div" + _vm._ssrAttr("data-qa", _vm.dataQa + "-title") + " class=\"vc-list-title\" data-v-1caabe0e>" + _vm._ssrEscape("\n " + _vm._s(_vm.title) + "\n ") + "</div>" : "<!---->") + " "), _c('v-list', {
3563
+ return _c('div', [_vm._ssrNode((_vm.title ? "<div" + _vm._ssrAttr("data-qa", _vm.dataQa + "-title") + " class=\"vc-list-title\" data-v-07369312>" + _vm._ssrEscape("\n " + _vm._s(_vm.title) + "\n ") + "</div>" : "<!---->") + " "), _c('v-list', {
3573
3564
  staticClass: "VcListbox",
3574
3565
  attrs: {
3575
3566
  "data-qa": _vm.dataQa
@@ -3578,17 +3569,11 @@ var __vue_render__$r = function __vue_render__() {
3578
3569
  staticClass: "vc-overflow"
3579
3570
  }, [_c('v-list-item-group', {
3580
3571
  attrs: {
3572
+ "value": _vm.confirmedArray,
3581
3573
  "multiple": ""
3582
3574
  },
3583
3575
  on: {
3584
3576
  "change": _vm.onSelection
3585
- },
3586
- model: {
3587
- value: _vm.confirmedArray,
3588
- callback: function callback($$v) {
3589
- _vm.confirmedArray = $$v;
3590
- },
3591
- expression: "confirmedArray"
3592
3577
  }
3593
3578
  }, _vm._l(_vm.items, function (item, index) {
3594
3579
  return _c('VcTooltip', {
@@ -3642,8 +3627,8 @@ var __vue_staticRenderFns__$r = [];
3642
3627
 
3643
3628
  var __vue_inject_styles__$r = function __vue_inject_styles__(inject) {
3644
3629
  if (!inject) return;
3645
- inject("data-v-1caabe0e_0", {
3646
- source: "[data-v-1caabe0e]: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-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;--popover-width:360px;--popover-max-height:464px;--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;--avatar-x-sm:24px;--avatar-sm:32px;--avatar-md:40px;--avatar-lg:48px;--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-list-title[data-v-1caabe0e]{font-weight:var(--font-weight-medium2);font-size:var(--font-size-small2);line-height:var(--size-value5);margin-block-end:var(--size-value3)}.VcListbox[data-v-1caabe0e]{padding-block:var(--size-value1);margin-block:var(--size-value1);border:1px solid var(--gray-lighten-1);box-sizing:border-box;border-radius:var(--border-radius);box-shadow:none!important}.VcListbox .vc-overflow[data-v-1caabe0e]{overflow:auto;max-height:160px}.VcListbox .vc-overflow .vc-list-item[data-v-1caabe0e]{padding:var(--size-value0);min-height:unset}.VcListbox .vc-overflow .vc-list-item[data-v-1caabe0e]:before{opacity:0}.VcListbox .divider[data-v-1caabe0e]{border-color:var(--gray-lighten-1)}.VcListbox .last-item[data-v-1caabe0e]{cursor:pointer;min-height:var(--size-value10)}.VcListbox .last-item[data-v-1caabe0e]:hover{background-color:var(--gray-lighten-3)}.VcListbox .last-item .add-another-label[data-v-1caabe0e]{font-weight:var(--font-weight-medium2);font-size:var(--font-size-x-small);line-height:var(--size-value5);color:var(--gray-darken-5)}.VcListbox .last-item .add-another-icon[data-v-1caabe0e]{margin-inline-end:var(--size-value3);cursor:pointer}.VcListbox .last-item .add-another-icon[data-v-1caabe0e] .v-icon__component{height:unset;width:unset}.VcListbox .last-item .add-another-icon[data-v-1caabe0e] .v-icon__component svg{width:var(--size-value3)}",
3630
+ inject("data-v-07369312_0", {
3631
+ source: "[data-v-07369312]: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-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;--popover-width:360px;--popover-max-height:464px;--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;--avatar-x-sm:24px;--avatar-sm:32px;--avatar-md:40px;--avatar-lg:48px;--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-list-title[data-v-07369312]{font-weight:var(--font-weight-medium2);font-size:var(--font-size-small2);line-height:var(--size-value5);margin-block-end:var(--size-value3)}.VcListbox[data-v-07369312]{padding-block:var(--size-value1);margin-block:var(--size-value1);border:1px solid var(--gray-lighten-1);box-sizing:border-box;border-radius:var(--border-radius);box-shadow:none!important}.VcListbox .vc-overflow[data-v-07369312]{overflow:auto;max-height:160px}.VcListbox .vc-overflow .vc-list-item[data-v-07369312]{padding:var(--size-value0);min-height:unset}.VcListbox .vc-overflow .vc-list-item[data-v-07369312]:before{opacity:0}.VcListbox .divider[data-v-07369312]{border-color:var(--gray-lighten-1)}.VcListbox .last-item[data-v-07369312]{cursor:pointer;min-height:var(--size-value10)}.VcListbox .last-item[data-v-07369312]:hover{background-color:var(--gray-lighten-3)}.VcListbox .last-item .add-another-label[data-v-07369312]{font-weight:var(--font-weight-medium2);font-size:var(--font-size-x-small);line-height:var(--size-value5);color:var(--gray-darken-5)}.VcListbox .last-item .add-another-icon[data-v-07369312]{margin-inline-end:var(--size-value3);cursor:pointer}.VcListbox .last-item .add-another-icon[data-v-07369312] .v-icon__component{height:unset;width:unset}.VcListbox .last-item .add-another-icon[data-v-07369312] .v-icon__component svg{width:var(--size-value3)}",
3647
3632
  map: undefined,
3648
3633
  media: undefined
3649
3634
  });
@@ -3651,10 +3636,10 @@ var __vue_inject_styles__$r = function __vue_inject_styles__(inject) {
3651
3636
  /* scoped */
3652
3637
 
3653
3638
 
3654
- var __vue_scope_id__$r = "data-v-1caabe0e";
3639
+ var __vue_scope_id__$r = "data-v-07369312";
3655
3640
  /* module identifier */
3656
3641
 
3657
- var __vue_module_identifier__$r = "data-v-1caabe0e";
3642
+ var __vue_module_identifier__$r = "data-v-07369312";
3658
3643
  /* functional template */
3659
3644
 
3660
3645
  var __vue_is_functional_template__$r = false;
@@ -6112,18 +6097,18 @@ var __vue_render__$5 = function __vue_render__() {
6112
6097
 
6113
6098
  return _c('div', {
6114
6099
  ref: "banner",
6115
- staticClass: "VcBanner ps-6 d-flex justify-space-between flex-column flex-sm-row",
6100
+ staticClass: "VcBanner d-flex justify-space-between flex-column flex-sm-row py-10 py-sm-6 ",
6116
6101
  style: {
6117
6102
  backgroundColor: _vm.backgroundColor
6118
6103
  },
6119
6104
  attrs: {
6120
6105
  "data-qa": _vm.dataQa
6121
6106
  }
6122
- }, [_vm._ssrNode("<div class=\"text-container pt-10 pt-sm-6\" data-v-5300cc94>", "</div>", [_vm._ssrNode("<div class=\"banner-title pb-2 pb-sm-4 pb-md-2 \" data-v-5300cc94>" + _vm._ssrEscape(_vm._s(_vm.title)) + "</div> " + (_vm.subtitle ? "<div class=\"banner-subtitle\" data-v-5300cc94>" + _vm._ssrEscape(_vm._s(_vm.subtitle)) + "</div>" : "<!---->") + " "), _vm.buttonLabel || _vm.linkLabel ? _vm._ssrNode("<div class=\"cta-container py-6 py-sm-7 d-flex flex justify-start flex-wrap\" data-v-5300cc94>", "</div>", [_vm.buttonLabel ? _c('VcButton', {
6107
+ }, [_vm._ssrNode("<div class=\"text-container px-6\" data-v-d62b7e54>", "</div>", [_vm._ssrNode("<div class=\"banner-title pb-2 pb-sm-4 pb-md-2 \" data-v-d62b7e54>" + _vm._ssrEscape(_vm._s(_vm.title)) + "</div> " + (_vm.subtitle ? "<div class=\"banner-subtitle\" data-v-d62b7e54>" + _vm._ssrEscape(_vm._s(_vm.subtitle)) + "</div>" : "<!---->") + " "), _vm.buttonLabel || _vm.linkLabel ? _vm._ssrNode("<div class=\"cta-container py-6 py-sm-7 d-flex flex justify-start flex-wrap\" data-v-d62b7e54>", "</div>", [_vm.buttonLabel ? _c('VcButton', {
6123
6108
  staticClass: "primary-cta",
6124
6109
  attrs: {
6125
6110
  "pill": true,
6126
- "large": _vm.$vuetify.breakpoint.smAndUp
6111
+ "large": true
6127
6112
  },
6128
6113
  on: {
6129
6114
  "click": function click($event) {
@@ -6136,9 +6121,9 @@ var __vue_render__$5 = function __vue_render__() {
6136
6121
  "url": _vm.linkUrl,
6137
6122
  "label": _vm.linkLabel
6138
6123
  }
6139
- }) : _vm._e()], 2) : _vm._e(), _vm._ssrNode(" "), _vm.note || _vm.$slots.note ? _vm._ssrNode("<div class=\"banner-note pt-4 pt-sm-8\" data-v-5300cc94>", "</div>", [_vm._t("note", function () {
6124
+ }) : _vm._e()], 2) : _vm._e(), _vm._ssrNode(" "), _vm.note || _vm.$slots.note ? _vm._ssrNode("<div class=\"banner-note py-4 pt-sm-8\" data-v-d62b7e54>", "</div>", [_vm._t("note", function () {
6140
6125
  return [_vm._v("\n " + _vm._s(_vm.note) + "\n ")];
6141
- })], 2) : _vm._e()], 2), _vm._ssrNode(" "), _vm.image ? _vm._ssrNode("<div class=\"images-container d-flex align-self-end\" data-v-5300cc94>", "</div>", [_c('VcSvg', {
6126
+ })], 2) : _vm._e()], 2), _vm._ssrNode(" "), _vm.image ? _vm._ssrNode("<div class=\"images-container d-flex align-self-end\" data-v-d62b7e54>", "</div>", [_c('VcSvg', {
6142
6127
  staticClass: "background-stain",
6143
6128
  attrs: {
6144
6129
  "svg": _vm.$svgImages.background_stain
@@ -6180,8 +6165,8 @@ var __vue_staticRenderFns__$5 = [];
6180
6165
 
6181
6166
  var __vue_inject_styles__$5 = function __vue_inject_styles__(inject) {
6182
6167
  if (!inject) return;
6183
- inject("data-v-5300cc94_0", {
6184
- source: ".VcBanner[data-v-5300cc94]{min-height:188px;box-sizing:border-box;box-shadow:var(--shadow-10);overflow-x:hidden;border-radius:var(--size-value2);border:1px solid var(--neutral-lighten-2);position:relative}.VcBanner .images-container[data-v-5300cc94]{position:relative;height:100%}.VcBanner .images-container .background-stain[data-v-5300cc94]{position:absolute;opacity:15%;margin:0 auto;overflow:hidden;top:-73px;height:calc(100% + 73px);left:-180px}#app[dir=rtl] .VcBanner .images-container .background-stain[data-v-5300cc94]{left:auto;right:-180px}@media screen and (min-width:600px){.VcBanner .images-container .background-stain[data-v-5300cc94]{top:-206px;height:calc(100% + 206px);left:-64px}#app[dir=rtl] .VcBanner .images-container .background-stain[data-v-5300cc94]{left:auto;right:-64px}}@media screen and (min-width:960px){.VcBanner .images-container .background-stain[data-v-5300cc94]{top:-176px;height:calc(100% + 176px);left:-50px}#app[dir=rtl] .VcBanner .images-container .background-stain[data-v-5300cc94]{left:auto;right:-50px}}#app[dir=rtl] .VcBanner .images-container .background-stain[data-v-5300cc94]{transform:scaleX(-1)}.VcBanner .images-container .background-stain #background_stain[data-v-5300cc94]{fill:var(--v-secondary-base)}.VcBanner .images-container .upsell-banner-image[data-v-5300cc94]{margin:auto 0 0;position:relative;width:200px;height:95px}@media screen and (min-width:600px){.VcBanner .images-container .upsell-banner-image[data-v-5300cc94]{width:300px;height:142.5px}}@media screen and (min-width:960px){.VcBanner .images-container .upsell-banner-image[data-v-5300cc94]{width:400px;height:190px}}.VcBanner .text-container[data-v-5300cc94]{flex:0 0 54%;font-family:var(--primary-font-family);color:var(--gray-darken-5)}.VcBanner .text-container .banner-title[data-v-5300cc94]{font-weight:var(--font-weight-large2);font-size:var(--font-size-medium2);line-height:var(--size-value8)}@media screen and (min-width:960px){.VcBanner .text-container .banner-title[data-v-5300cc94]{flex:0 0 100%}}.VcBanner .text-container .banner-subtitle[data-v-5300cc94]{font-size:var(--font-size-small2);line-height:var(--size-value5);font-weight:var(--font-weight-medium)}.VcBanner .text-container .banner-note[data-v-5300cc94]{font-size:var(--font-size-small2)}.VcBanner .cta-container .primary-cta[data-v-5300cc94]{line-height:var(--size-value12);font-weight:var(--font-weight-large2);margin-inline-end:var(--size-value6)}.VcBanner .cta-container .secondary-cta[data-v-5300cc94]{font-size:var(--font-size-small2);font-weight:var(--font-weight-large);flex:0 0 100%}@media screen and (min-width:600px){.VcBanner .cta-container .secondary-cta[data-v-5300cc94]{flex:none}}.VcBanner .close-button[data-v-5300cc94]{position:absolute;width:var(--size-value6);height:var(--size-value6);right:var(--size-value4)}#app[dir=rtl] .VcBanner .close-button[data-v-5300cc94]{right:auto;left:var(--size-value4)}.VcBanner .close-button .v-btn__content[data-v-5300cc94]{opacity:unset}.VcBanner .close-button[data-v-5300cc94]:hover{background-color:var(--gray-lighten-2)}.VcBanner .close-button .v-icon[data-v-5300cc94]{margin-right:var(--size-value0)}.VcBanner .close-button .v-icon svg[data-v-5300cc94]{fill:var(--gray-darken-2);width:var(--size-value4);height:var(--size-value4)}",
6168
+ inject("data-v-d62b7e54_0", {
6169
+ source: ".VcBanner[data-v-d62b7e54]{min-height:188px;box-sizing:border-box;box-shadow:var(--shadow-10);overflow-x:hidden;border-radius:var(--size-value2);border:1px solid var(--neutral-lighten-2);position:relative}.VcBanner .images-container[data-v-d62b7e54]{position:relative;height:100%}.VcBanner .images-container .background-stain[data-v-d62b7e54]{position:absolute;opacity:15%;margin:0 auto;overflow:hidden;top:-73px;height:calc(100% + 73px);left:-180px}#app[dir=rtl] .VcBanner .images-container .background-stain[data-v-d62b7e54]{left:auto;right:-180px}@media screen and (min-width:600px){.VcBanner .images-container .background-stain[data-v-d62b7e54]{top:-206px;height:calc(100% + 206px);left:-64px}#app[dir=rtl] .VcBanner .images-container .background-stain[data-v-d62b7e54]{left:auto;right:-64px}}@media screen and (min-width:960px){.VcBanner .images-container .background-stain[data-v-d62b7e54]{top:-176px;height:calc(100% + 176px);left:-50px}#app[dir=rtl] .VcBanner .images-container .background-stain[data-v-d62b7e54]{left:auto;right:-50px}}#app[dir=rtl] .VcBanner .images-container .background-stain[data-v-d62b7e54]{transform:scaleX(-1)}.VcBanner .images-container .background-stain #background_stain[data-v-d62b7e54]{fill:var(--v-secondary-base)}.VcBanner .images-container .upsell-banner-image[data-v-d62b7e54]{margin:auto 0 0;position:relative;width:200px;height:95px}@media screen and (min-width:600px){.VcBanner .images-container .upsell-banner-image[data-v-d62b7e54]{width:300px;height:142.5px}}@media screen and (min-width:960px){.VcBanner .images-container .upsell-banner-image[data-v-d62b7e54]{width:400px;height:190px}}.VcBanner .text-container[data-v-d62b7e54]{flex:0 0 60%;font-family:var(--primary-font-family);color:var(--gray-darken-5);z-index:1}.VcBanner .text-container .banner-title[data-v-d62b7e54]{font-weight:var(--font-weight-large2);font-size:var(--font-size-medium2);line-height:var(--size-value8)}@media screen and (min-width:960px){.VcBanner .text-container .banner-title[data-v-d62b7e54]{flex:0 0 100%}}.VcBanner .text-container .banner-subtitle[data-v-d62b7e54]{font-size:var(--font-size-small2);line-height:var(--size-value5);font-weight:var(--font-weight-medium)}.VcBanner .text-container .banner-note[data-v-d62b7e54]{font-size:var(--font-size-small2)}.VcBanner .cta-container .primary-cta[data-v-d62b7e54]{line-height:var(--size-value12);font-weight:var(--font-weight-large2);margin-inline-end:var(--size-value6)}.VcBanner .cta-container .secondary-cta[data-v-d62b7e54]{font-size:var(--font-size-small2);font-weight:var(--font-weight-large);flex:0 0 100%}@media screen and (min-width:600px){.VcBanner .cta-container .secondary-cta[data-v-d62b7e54]{flex:none}}.VcBanner .close-button[data-v-d62b7e54]{position:absolute;width:var(--size-value6);height:var(--size-value6);right:var(--size-value4)}#app[dir=rtl] .VcBanner .close-button[data-v-d62b7e54]{right:auto;left:var(--size-value4)}.VcBanner .close-button .v-btn__content[data-v-d62b7e54]{opacity:unset}.VcBanner .close-button[data-v-d62b7e54]:hover{background-color:var(--gray-lighten-2)}.VcBanner .close-button .v-icon[data-v-d62b7e54]{margin-right:var(--size-value0)}.VcBanner .close-button .v-icon svg[data-v-d62b7e54]{fill:var(--gray-darken-2);width:var(--size-value4);height:var(--size-value4)}",
6185
6170
  map: undefined,
6186
6171
  media: undefined
6187
6172
  });
@@ -6189,10 +6174,10 @@ var __vue_inject_styles__$5 = function __vue_inject_styles__(inject) {
6189
6174
  /* scoped */
6190
6175
 
6191
6176
 
6192
- var __vue_scope_id__$5 = "data-v-5300cc94";
6177
+ var __vue_scope_id__$5 = "data-v-d62b7e54";
6193
6178
  /* module identifier */
6194
6179
 
6195
- var __vue_module_identifier__$5 = "data-v-5300cc94";
6180
+ var __vue_module_identifier__$5 = "data-v-d62b7e54";
6196
6181
  /* functional template */
6197
6182
 
6198
6183
  var __vue_is_functional_template__$5 = false;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vcita/design-system",
3
- "version": "0.5.0-beta.1",
3
+ "version": "0.5.0-beta.2",
4
4
  "description": "vcita design system",
5
5
  "author": "vcita",
6
6
  "scripts": {
@@ -1,15 +1,15 @@
1
1
  <template>
2
- <div class="VcBanner ps-6 d-flex justify-space-between flex-column flex-sm-row"
2
+ <div class="VcBanner d-flex justify-space-between flex-column flex-sm-row py-10 py-sm-6 "
3
3
  ref="banner"
4
4
  :data-qa="dataQa"
5
5
  :style="{backgroundColor: backgroundColor}">
6
- <div class="text-container pt-10 pt-sm-6">
6
+ <div class="text-container px-6">
7
7
  <div class="banner-title pb-2 pb-sm-4 pb-md-2 ">{{ title }}</div>
8
8
  <div class="banner-subtitle" v-if="subtitle" >{{ subtitle }}</div>
9
9
  <div class="cta-container py-6 py-sm-7 d-flex flex justify-start flex-wrap" v-if="buttonLabel || linkLabel">
10
10
  <VcButton class="primary-cta"
11
11
  :pill="true"
12
- :large="$vuetify.breakpoint.smAndUp"
12
+ :large="true"
13
13
  v-if="buttonLabel"
14
14
  @click="$emit('onAction')">
15
15
  {{ buttonLabel }}
@@ -21,7 +21,7 @@
21
21
  v-if="linkLabel && linkUrl">
22
22
  </VcLink>
23
23
  </div>
24
- <div class="banner-note pt-4 pt-sm-8" v-if="note || $slots.note">
24
+ <div class="banner-note py-4 pt-sm-8" v-if="note || $slots.note">
25
25
  <slot name="note">
26
26
  {{ note }}
27
27
  </slot>
@@ -144,7 +144,6 @@ export default {
144
144
  .upsell-banner-image{
145
145
  margin: auto 0 0 ;
146
146
  position: relative;
147
- //z-index: 1;
148
147
  width: 200px;
149
148
  height: 95px;
150
149
 
@@ -161,9 +160,10 @@ export default {
161
160
  }
162
161
 
163
162
  .text-container {
164
- flex: 0 0 54%;
163
+ flex: 0 0 60%;
165
164
  font-family: var(--primary-font-family);
166
165
  color: var(--gray-darken-5);
166
+ z-index: 1;
167
167
 
168
168
  .banner-title {
169
169
  font-weight: var(--font-weight-large2);
@@ -10,7 +10,7 @@
10
10
  :data-qa="dataQa">
11
11
  <div class="vc-overflow">
12
12
  <v-list-item-group
13
- v-model="confirmedArray"
13
+ :value="confirmedArray"
14
14
  multiple
15
15
  @change="onSelection">
16
16
  <VcTooltip v-for="(item, index) in items"
@@ -76,27 +76,18 @@ export default {
76
76
  default: 'VcListbox'
77
77
  }
78
78
  },
79
- data: () => ({
80
- confirmedArray: []
81
- }),
82
- watch: {
83
- items: {
84
- immediate: true,
85
- deep: true,
86
- handler(values) {
87
- this.confirmedArray = values.filter((item) => item.checked)
88
- }
89
- }
90
- },
91
79
  computed: {
92
80
  getAddAnotherLabel() {
93
81
  return this.addAnotherLabel || this.$dst('ds.listbox.add')
82
+ },
83
+ confirmedArray() {
84
+ return this.items.filter(item => item.checked)
94
85
  }
95
86
  },
96
87
  methods: {
97
88
  onSelection(selections) {
98
- selections.forEach((selected) => selected.checked = true)
99
- this.$emit('change', selections)
89
+ const newSelections = selections.map((selected) => ({...selected, checked: true}))
90
+ this.$emit('change', newSelections)
100
91
  }
101
92
  }
102
93
  };