@vcita/design-system 1.3.1 → 1.3.2

package/CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Unreleased changes
 
+### v1.3.2(2022-11-06)
+- VcGalleryItem - fix ui on small desktop
+- VcChip - added 'selected' state
+
 ### v1.3.1(2022-10-30)
 - VcGalleryItem - add 'selected' indication
 - VcGalleryItem - add ability to disable

package/dist/@vcita/design-system.esm.js

@@ -5258,6 +5258,10 @@ var script$D = {
     isRipple: {
       type: Boolean,
       default: true
+    },
+    selected: {
+      type: Boolean,
+      default: false
     }
   }
 };
@@ -5277,7 +5281,8 @@ var __vue_render__$D = function () {
     staticClass: "VcChip",
     class: {
       'vc-invalid': _vm.invalid,
-      'vc-avatar': !!_vm.avatar
+      'vc-avatar': !!_vm.avatar,
+      'vc-selected': _vm.selected
     },
     attrs: {
       "close": _vm.closeButton,
@@ -5287,23 +5292,36 @@ var __vue_render__$D = function () {
       "data-qa": _vm.dataQa
     },
     on: {
+      "click": function ($event) {
+        return _vm.$emit('onChipClick');
+      },
       "click:close": function ($event) {
         return _vm.$emit('input', false);
       }
     }
-  }, [!!_vm.avatar ? _c('div', {
-    staticClass: "vc-avatar-wrapper"
-  }, [!_vm.invalid ? _c('VcAvatar', _vm._b({
-    attrs: {
-      "name": _vm.label,
-      "show-border": false,
-      "size": "x-sm"
-    }
-  }, 'VcAvatar', _vm.avatar, false)) : _c('VcIcon', {
-    attrs: {
-      "data-qa": _vm.dataQa + "-invalid-icon"
-    }
-  }, [_vm._v("$attention_fill")])], 1) : _vm._e(), _vm._v(" "), _vm._t("default", function () {
+  }, [_vm._t("chip-avatar", function () {
+    return [!!_vm.avatar ? _c('div', {
+      staticClass: "vc-avatar-wrapper"
+    }, [!_vm.invalid ? _c('VcAvatar', _vm._b({
+      attrs: {
+        "name": _vm.label,
+        "show-border": false,
+        "size": "x-sm"
+      }
+    }, 'VcAvatar', _vm.avatar, false)) : _c('VcIcon', {
+      attrs: {
+        "data-qa": _vm.dataQa + "-invalid-icon"
+      }
+    }, [_vm._v("$attention_fill")])], 1) : _vm.selected ? _c('div', {
+      staticClass: "vc-avatar-wrapper"
+    }, [_c('VcIcon', {
+      attrs: {
+        "data-qa": _vm.dataQa + "-check-icon",
+        "size": "12",
+        "color": "currentColor"
+      }
+    }, [_vm._v("$check_button")])], 1) : _vm._e()];
+  }), _vm._v(" "), _vm._t("default", function () {
     return [_c('span', [_vm._v(_vm._s(_vm.label))])];
   })], 2);
 };
@@ -5313,8 +5331,8 @@ var __vue_staticRenderFns__$D = [];
 
 const __vue_inject_styles__$D = function (inject) {
   if (!inject) return;
-  inject("data-v-50259fa8_0", {
-    source: "[data-v-50259fa8]: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-frame:1px solid #e0e0e0;--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-50259fa8]{max-width:fit-content;border:1px solid var(--neutral-lighten-1)}.VcChip.v-chip[data-v-50259fa8]{background-color:var(--modal-bg-color)}.VcChip.v-chip[data-v-50259fa8]  .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-50259fa8]  .v-chip__content .vc-avatar-wrapper{margin-inline-end:var(--size-value2)}.VcChip.v-chip[data-v-50259fa8]  .v-chip__content .vc-avatar-wrapper .vc-attention-fill{fill:var(--yellow)}.VcChip.v-chip[data-v-50259fa8]  .v-chip__content .v-chip__close{direction:inherit;margin-inline:var(--size-value1) var(--size-value0);color:var(--gray)}.VcChip.v-chip[data-v-50259fa8]  .v-chip__content .v-chip__close:hover{opacity:unset}.VcChip.v-chip.vc-avatar[data-v-50259fa8]{padding-inline:var(--size-value1) var(--size-value3)}.VcChip.v-chip--disabled[data-v-50259fa8]{background-color:var(--gray-lighten-2);border:1px solid var(--gray-lighten-2)}.VcChip.v-chip--disabled[data-v-50259fa8]  .v-chip__content{color:var(--gray-darken-1)}.VcChip.vc-invalid[data-v-50259fa8]{background-color:var(--yellow-lighten-3);border:1px solid var(--yellow)}.VcChip.vc-invalid[data-v-50259fa8]:hover{background-color:var(--yellow-lighten-2)}.VcChip[data-v-50259fa8]:hover{background-color:var(--gray-lighten-3)}.VcChip[data-v-50259fa8]:hover:before{opacity:0}.VcChip[data-v-50259fa8]:focus{box-shadow:0 0 0 3px var(--v-secondary-lighten1)}.VcChip[data-v-50259fa8]:focus:before{opacity:0}",
+  inject("data-v-508905ad_0", {
+    source: "[data-v-508905ad]: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-frame:1px solid #e0e0e0;--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-508905ad]{max-width:fit-content;border:1px solid var(--neutral-lighten-1)}.VcChip.v-chip[data-v-508905ad]{background-color:var(--modal-bg-color)}.VcChip.v-chip[data-v-508905ad]  .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-508905ad]  .v-chip__content .vc-avatar-wrapper{margin-inline-end:var(--size-value2)}.VcChip.v-chip[data-v-508905ad]  .v-chip__content .vc-avatar-wrapper .vc-attention-fill{fill:var(--yellow)}.VcChip.v-chip[data-v-508905ad]  .v-chip__content .v-chip__close{direction:inherit;margin-inline:var(--size-value1) var(--size-value0);color:var(--gray)}.VcChip.v-chip[data-v-508905ad]  .v-chip__content .v-chip__close:hover{opacity:unset}.VcChip.v-chip.vc-avatar[data-v-508905ad]{padding-inline:var(--size-value1) var(--size-value3)}.VcChip.v-chip--disabled[data-v-508905ad]{background-color:var(--gray-lighten-2);border:1px solid var(--gray-lighten-2)}.VcChip.v-chip--disabled[data-v-508905ad]  .v-chip__content{color:var(--gray-darken-1)}.VcChip.vc-invalid[data-v-508905ad]{background-color:var(--yellow-lighten-3);border:1px solid var(--yellow)}.VcChip.vc-invalid[data-v-508905ad]:hover{background-color:var(--yellow-lighten-2)}.VcChip.vc-selected[data-v-508905ad]{background-color:var(--v-secondary-lighten3);border:1px solid var(--v-secondary-base)}.VcChip.vc-selected[data-v-508905ad]:hover{background-color:var(--v-secondary-lighten3)}.VcChip.vc-selected[data-v-508905ad]  .v-chip__content{font-weight:var(--font-weight-large);color:var(--v-secondary-base)}.VcChip[data-v-508905ad]:hover{background-color:var(--gray-lighten-3)}.VcChip[data-v-508905ad]:hover:before{opacity:0}.VcChip[data-v-508905ad]:focus{box-shadow:0 0 0 3px var(--v-secondary-lighten1)}.VcChip[data-v-508905ad]:focus:before{opacity:0}",
     map: undefined,
     media: undefined
   });
@@ -5322,7 +5340,7 @@ const __vue_inject_styles__$D = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$D = "data-v-50259fa8";
+const __vue_scope_id__$D = "data-v-508905ad";
 /* module identifier */
 
 const __vue_module_identifier__$D = undefined;
@@ -16587,7 +16605,8 @@ var __vue_render__$3 = function () {
     class: {
       'vc-gallery-item--is-create': _vm.isCreate,
       'vc-gallery-item--selected': _vm.selected,
-      'vc-gallery-item--disabled': _vm.disabled
+      'vc-gallery-item--disabled': _vm.disabled,
+      'desktop-view': !_vm.isMobile
     },
     attrs: {
       "data-qa": _vm.dataQa
@@ -16694,8 +16713,8 @@ var __vue_staticRenderFns__$3 = [];
 
 const __vue_inject_styles__$3 = function (inject) {
   if (!inject) return;
-  inject("data-v-7b92eaeb_0", {
-    source: ".vc-gallery-item[data-v-7b92eaeb]{max-width:252px;margin-bottom:var(--size-value4)}@media screen and (min-width:600px){.vc-gallery-item[data-v-7b92eaeb]{min-width:200px}}.vc-gallery-item .VcButton.secondary__text[data-v-7b92eaeb]{background-color:var(--v-secondary-lighten2);color:var(--v-secondary-base)!important}.vc-gallery-item__thumbnail[data-v-7b92eaeb]{position:relative;height:0;padding-bottom:136%;border-radius:var(--border-radius);box-shadow:var(--shadow-4);margin-bottom:var(--size-value3);overflow:hidden}.vc-gallery-item--is-create .vc-gallery-item__thumbnail[data-v-7b92eaeb]{background:var(--v-secondary-lighten3);border:1px dashed var(--v-secondary-base)}.vc-gallery-item--disabled .vc-gallery-item__thumbnail[data-v-7b92eaeb]{filter:grayscale(100%)}.vc-gallery-item__image[data-v-7b92eaeb]{padding-bottom:inherit;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:top center;border-radius:var(--border-radius)}.vc-gallery-item--selected .vc-gallery-item__image[data-v-7b92eaeb]{box-shadow:inset 0 0 0 2px var(--v-secondary-base)}.vc-gallery-item--selected.vc-gallery-item--disabled .vc-gallery-item__image[data-v-7b92eaeb]{box-shadow:inset 0 0 0 2px var(--gray-darken-1)}@media screen and (min-width:960px){.vc-gallery-item__thumbnail:hover .vc-gallery-item__image[data-v-7b92eaeb]{filter:blur(5px);transition:filter .3s ease-out}}.vc-gallery-item__label[data-v-7b92eaeb]{font-weight:var(--font-weight-medium2);font-size:var(--font-size-small);line-height:1.5;text-align:center;color:var(--gray-darken-5)}.vc-gallery-item--is-create .vc-gallery-item__label[data-v-7b92eaeb]{color:var(--v-secondary-base)}.buttons[data-v-7b92eaeb]{position:absolute;width:100%;height:100%;left:0;top:0;background-color:rgba(0,0,0,.7);display:none}.vc-gallery-item--is-create .buttons[data-v-7b92eaeb]{display:flex;background-color:var(--neutral-lighten-3);cursor:pointer}@media screen and (min-width:960px){.vc-gallery-item__thumbnail:hover .buttons[data-v-7b92eaeb]{display:flex}}.buttons__select[data-v-7b92eaeb]{margin-bottom:var(--size-value4)}.selected-indicator[data-v-7b92eaeb]{position:absolute;top:0;inset-inline-end:0;background:var(--v-secondary-base);border-radius:0 0 0 var(--border-radius);width:var(--size-value6);height:var(--size-value6)}.vc-gallery-item--disabled .selected-indicator[data-v-7b92eaeb]{background:var(--gray-darken-1)}",
+  inject("data-v-a79f5ee0_0", {
+    source: ".vc-gallery-item[data-v-a79f5ee0]{max-width:252px;margin-bottom:var(--size-value4)}@media screen and (min-width:600px){.vc-gallery-item[data-v-a79f5ee0]{min-width:200px}}.vc-gallery-item .VcButton.secondary__text[data-v-a79f5ee0]{background-color:var(--v-secondary-lighten2);color:var(--v-secondary-base)!important}.vc-gallery-item__thumbnail[data-v-a79f5ee0]{position:relative;height:0;padding-bottom:136%;border-radius:var(--border-radius);box-shadow:var(--shadow-4);margin-bottom:var(--size-value3);overflow:hidden}.vc-gallery-item--is-create .vc-gallery-item__thumbnail[data-v-a79f5ee0]{background:var(--v-secondary-lighten3);border:1px dashed var(--v-secondary-base)}.vc-gallery-item--disabled .vc-gallery-item__thumbnail[data-v-a79f5ee0]{filter:grayscale(100%)}.vc-gallery-item__image[data-v-a79f5ee0]{padding-bottom:inherit;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:top center;border-radius:var(--border-radius)}.vc-gallery-item--selected .vc-gallery-item__image[data-v-a79f5ee0]{box-shadow:inset 0 0 0 2px var(--v-secondary-base)}.vc-gallery-item--selected.vc-gallery-item--disabled .vc-gallery-item__image[data-v-a79f5ee0]{box-shadow:inset 0 0 0 2px var(--gray-darken-1)}.desktop-view .vc-gallery-item__thumbnail:hover .vc-gallery-item__image[data-v-a79f5ee0]{filter:blur(5px);transition:filter .3s ease-out}.vc-gallery-item__label[data-v-a79f5ee0]{font-weight:var(--font-weight-medium2);font-size:var(--font-size-small);line-height:1.5;text-align:center;color:var(--gray-darken-5)}.vc-gallery-item--is-create .vc-gallery-item__label[data-v-a79f5ee0]{color:var(--v-secondary-base)}.buttons[data-v-a79f5ee0]{position:absolute;width:100%;height:100%;left:0;top:0;background-color:rgba(0,0,0,.7);display:none}.vc-gallery-item--is-create .buttons[data-v-a79f5ee0]{display:flex;background-color:var(--neutral-lighten-3);cursor:pointer}.desktop-view .vc-gallery-item__thumbnail:hover .buttons[data-v-a79f5ee0]{display:flex}.buttons__select[data-v-a79f5ee0]{margin-bottom:var(--size-value4)}.selected-indicator[data-v-a79f5ee0]{position:absolute;top:0;inset-inline-end:0;background:var(--v-secondary-base);border-radius:0 0 0 var(--border-radius);width:var(--size-value6);height:var(--size-value6)}.vc-gallery-item--disabled .selected-indicator[data-v-a79f5ee0]{background:var(--gray-darken-1)}",
     map: undefined,
     media: undefined
   });
@@ -16703,7 +16722,7 @@ const __vue_inject_styles__$3 = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$3 = "data-v-7b92eaeb";
+const __vue_scope_id__$3 = "data-v-a79f5ee0";
 /* module identifier */
 
 const __vue_module_identifier__$3 = undefined;