@vcita/design-system 1.5.14 → 1.5.16

package/CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Unreleased changes
 
+### v1.5.16(2023-04-16)
+- VcTooltip - add maxWidth prop
+- VcCheckbox - add tooltip slot
+
+### v1.5.15(2023-04-02)
+- VcBadge - added standalone option and flavor
+
 ### v1.5.14(2023-03-30)
 - VcActionList - added custom action title slot
 

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

@@ -2124,6 +2124,10 @@ var script$18 = {
     closeDelay: {
       type: Number,
       default: 0
+    },
+    maxWidth: {
+      type: String,
+      default: ''
     }
   },
   computed: {
@@ -2156,7 +2160,8 @@ var __vue_render__$17 = function () {
       "nudge-right": _vm.nudgeRight,
       "disabled": _vm.disabled,
       "data-qa": _vm.dataQa,
-      "close-delay": _vm.closeDelay
+      "close-delay": _vm.closeDelay,
+      "max-width": _vm.maxWidth
     },
     scopedSlots: _vm._u([{
       key: "activator",
@@ -2209,7 +2214,7 @@ var __vue_staticRenderFns__$17 = [];
 
 const __vue_inject_styles__$18 = function (inject) {
   if (!inject) return;
-  inject("data-v-764e7f0e_0", {
+  inject("data-v-8206c0be_0", {
     source: ":root{--primary-font-family:Montserrat;--font-size-xxx-small:9px;--font-size-xs-small:11px;--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;--left-panel-width:265px;--vc-top-bar-height:59px;--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;--bottom-nav-shadow:0px -3px 8px rgba(23, 23, 23, 0.13);--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;--purple:#BD98F7;--purple-lighten-1:#CAADF9;--purple-lighten-2:#D7C1FA;--purple-lighten-3:#F7F1FF;--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}.color-0{--color-dark:#fed62f;--color-light:#fff1b6}.color-1{--color-dark:#fec22e;--color-light:#ffeab6}.color-2{--color-dark:#feac2a;--color-light:#ffe2b5}.color-3{--color-dark:#fe9a28;--color-light:#ffdcb4}.color-4{--color-dark:#fd7024;--color-light:#fecdb3}.color-5{--color-dark:#fd5b32;--color-light:#fec6b7}.color-6{--color-dark:#f2483f;--color-light:#fabfbc}.color-7{--color-dark:#dc331b;--color-light:#f3b8af}.color-8{--color-dark:#d41419;--color-light:#f0adaf}.color-9{--color-dark:#e72866;--color-light:#f7b4ca}.color-10{--color-dark:#c41c63;--color-light:#eab0c9}.color-11{--color-dark:#9b2bae;--color-light:#dcb5e3}.color-12{--color-dark:#673bb5;--color-light:#cabbe5}.color-13{--color-dark:#7c4efc;--color-light:#d1c1fe}.color-14{--color-dark:#4051b3;--color-light:#bcc2e4}.color-15{--color-dark:#311b92;--color-light:#c0b2ff}.color-16{--color-dark:#2d62fb;--color-light:#b6c8fe}.color-17{--color-dark:#5c6bc0;--color-light:#9aa2d2}.color-18{--color-dark:#17a8f1;--color-light:#aee1fa}.color-19{--color-dark:#17bbd2;--color-light:#aee7ef}.color-20{--color-dark:#14abbf;--color-light:#ade2e9}.color-21{--color-dark:#0f9587;--color-light:#abdad5}.color-22{--color-dark:#16bea5;--color-light:#aee8e0}.color-23{--color-dark:#4eae53;--color-light:#c1e3c3}.color-24{--color-dark:#3a8d3f;--color-light:#bad7bc}.color-25{--color-dark:#8cc250;--color-light:#d7eac2}.color-26{--color-dark:#66bb6a;--color-light:#9fd3a1}.color-27{--color-dark:#880e4f;--color-light:#ab8198}.color-28{--color-dark:#1565c0;--color-light:#83a4ca}.color-29{--color-dark:#1e88e5;--color-light:#79b1ff}.color-9999{--color-dark:#4675d9;--color-light:#becff2}.color-101{--color-dark:#EE5787;--color-light:#FFC6CC}.color-102{--color-dark:#EE5787;--color-light:#F7B3CA}.color-103{--color-dark:#AB51BD;--color-light:#DDB6E3}.color-104{--color-dark:#8564C4;--color-light:#CBBCE6}.color-105{--color-dark:#6371BF;--color-light:#BDC3E6}.color-106{--color-dark:#1779CE;--color-light:#B3D9FA}.color-107{--color-dark:#1E92CC;--color-light:#AAE1FC}.color-108{--color-dark:#1E8694;--color-light:#A9E8F0}.color-109{--color-dark:#328179;--color-light:#A9DAD6}.color-110{--color-dark:#3D853F;--color-light:#C1E2C2}.color-111{--color-dark:#5B8131;--color-light:#D7EAC1}.color-112{--color-dark:#757B23;--color-light:#EEF2BB}.color-113{--color-dark:#8A731E;--color-light:#FFF8BC}.color-114{--color-dark:#C88704;--color-light:#FFE9AA}.color-115{--color-dark:#B85F00;--color-light:#FFDBA9}.color-116{--color-dark:#EA0A00;--color-light:#FFC5B4}.color-117{--color-dark:#FF4D1F;--color-light:#FFA186}.color-118{--color-dark:#6E4B3F;--color-light:#D1C5C1}.color-119{--color-dark:#6E4B3F;--color-light:#B4A09A}.color-120{--color-dark:#63757E;--color-light:#C8D2D7}.vc-tooltip{opacity:1!important;padding:0;border-radius:var(--border-radius)}.vc-tooltip .dark-tooltip{background-color:rgba(0,0,0,.97);font-size:var(--size-value3);font-weight:400;border-radius:var(--size-value1);padding:var(--size-value2)}.vc-tooltip .tooltip-wrapper{background:var(--modal-bg-color);box-shadow:0 5px 5px -3px rgba(0,0,0,.1),0 8px 10px 1px rgba(0,0,0,.06),0 3px 14px 2px rgba(0,0,0,.06);border-radius:var(--border-radius)}.vc-tooltip .tooltip-wrapper .tooltip-header{color:var(--gray-darken-5);font-size:var(--font-size-small2);border-radius:var(--border-radius) var(--border-radius) 0 0;font-weight:var(--font-weight-large);padding:var(--size-value3) var(--size-value4)}.vc-tooltip .tooltip-wrapper .tooltip-header.alert{background-color:var(--red-lighten-3)}.vc-tooltip .tooltip-wrapper .tooltip-header.information{background-color:var(--blue-lighten-3)}.vc-tooltip .tooltip-wrapper .tooltip-content{display:block;font-size:var(--font-size-x-small);padding:var(--size-value3) var(--size-value4) var(--size-value4)}.vc-tooltip .tooltip-wrapper .tooltip-content .content-text{color:var(--gray-darken-5);max-width:fit-content;min-width:250px;word-wrap:break-word}.vc-tooltip .inner-content{display:contents}",
     map: undefined,
     media: undefined
@@ -3596,21 +3601,23 @@ var __vue_render__$_ = function () {
           }
         }) : _vm._e(), _vm._v(" "), _vm.label ? _c('span', {
           staticClass: "checkbox-label"
-        }, [_vm._v(_vm._s(_vm.label))]) : _vm._e(), _vm._v(" "), _vm.tooltip && _vm.label ? _c('VcTooltip', {
-          attrs: {
-            "dark": "",
-            "content": _vm.tooltip,
-            "bottom": ""
-          }
-        }, [_c('VcIcon', {
-          staticClass: "tooltip-icon ms-2",
-          attrs: {
-            "size": "16"
-          }
-        }, [_vm._v("$info")])], 1) : _vm._e()], 1)];
+        }, [_vm._v(_vm._s(_vm.label))]) : _vm._e(), _vm._v(" "), _vm._t("tooltip", function () {
+          return [_vm.label && _vm.tooltip ? _c('VcTooltip', {
+            attrs: {
+              "dark": "",
+              "content": _vm.tooltip,
+              "bottom": ""
+            }
+          }, [_c('VcIcon', {
+            staticClass: "tooltip-icon ms-2",
+            attrs: {
+              "size": "16"
+            }
+          }, [_vm._v("$info")])], 1) : _vm._e()];
+        })], 2)];
       },
       proxy: true
-    }]),
+    }], null, true),
     model: {
       value: _vm.selected,
       callback: function ($$v) {
@@ -3626,8 +3633,8 @@ var __vue_staticRenderFns__$_ = [];
 
 const __vue_inject_styles__$$ = function (inject) {
   if (!inject) return;
-  inject("data-v-35c33f46_0", {
-    source: ".vc-checkbox[data-v-35c33f46]{font-family:var(--primary-font-family)}.vc-checkbox[data-v-35c33f46] .v-input__slot .v-input--selection-controls__input{width:var(--size-value4);height:var(--size-value4);margin-inline-end:0}.vc-checkbox[data-v-35c33f46] .v-input__slot .v-input--selection-controls__input .v-icon{color:transparent;border:1px solid rgba(0,0,0,.2);box-sizing:border-box;border-radius:2px;font-size:var(--font-size-small);font-weight:700;z-index:1;background-color:#fff}.vc-checkbox[data-v-35c33f46] .checkbox-label{font-weight:var(--font-weight-medium2);font-size:var(--font-size-x-small)}.vc-checkbox[data-v-35c33f46]:not(.v-input--is-disabled) .checkbox-label{color:var(--gray-darken-5)}.vc-checkbox[data-v-35c33f46] .tooltip-icon{color:var(--gray-darken-3)}.vc-checkbox[data-v-35c33f46] .avatar-wrapper .avatar-initials{font-size:var(--font-size-xxx-small);font-weight:var(--font-weight-medium2)}.vc-checkbox[data-v-35c33f46].v-input--indeterminate:not(.v-input--is-disabled,.error--text) .v-input--selection-controls__input .v-icon{background-color:var(--green);color:#fff}.vc-checkbox[data-v-35c33f46].v-input--is-label-active:not(.v-input--is-disabled,.error--text) .v-input--selection-controls__input .v-icon{background-color:var(--green);color:#fff;border:none}.vc-checkbox[data-v-35c33f46]:not(.v-input--is-disabled):hover:not(:active) .v-input--selection-controls__input .v-icon{background-color:var(--gray-lighten-3)}.vc-checkbox[data-v-35c33f46].v-input--indeterminate:not(.v-input--is-disabled,.error--text):hover .v-input--selection-controls__input .v-icon,.vc-checkbox[data-v-35c33f46].v-input--is-label-active:not(.v-input--is-disabled,.error--text):hover .v-input--selection-controls__input .v-icon{background-color:rgba(84,210,140,.76)}.vc-checkbox[data-v-35c33f46].v-input--indeterminate:not(.v-input--is-disabled,.error--text):active .v-input--selection-controls__input .v-icon,.vc-checkbox[data-v-35c33f46].v-input--is-label-active:not(.v-input--is-disabled,.error--text):active .v-input--selection-controls__input .v-icon{background-color:rgba(84,210,140,.5)}.vc-checkbox[data-v-35c33f46]:not(.v-input--is-label-active):not(.v-input--indeterminate):not(.v-input--is-disabled):active .v-input--selection-controls__input .v-icon{background:var(--gray-lighten-1)}.vc-checkbox[data-v-35c33f46]:not(.v-input--is-disabled):focus .v-input--selection-controls__input .v-icon{box-shadow:0 0 0 3px var(--v-secondary-lighten1)}.vc-checkbox[data-v-35c33f46].v-input--is-disabled .v-input--selection-controls__input .v-icon{background:var(--gray-lighten-2)}.vc-checkbox[data-v-35c33f46].v-input--is-disabled.v-input--is-label-active .v-input--selection-controls__input .v-icon{border:none}.vc-checkbox[data-v-35c33f46].v-input--is-disabled.v-input--is-label-active .v-input--selection-controls__input .v-icon:is(.error--text){color:var(--gray-darken-2)!important}.vc-checkbox[data-v-35c33f46].error--text:not(.v-input--is-disabled) .v-input--selection-controls__input .v-icon{border-color:currentColor}.vc-checkbox[data-v-35c33f46].v-input--has-state.error--text .v-label{animation:none}",
+  inject("data-v-116856a0_0", {
+    source: ".vc-checkbox[data-v-116856a0]{font-family:var(--primary-font-family)}.vc-checkbox[data-v-116856a0] .v-input__slot .v-input--selection-controls__input{width:var(--size-value4);height:var(--size-value4);margin-inline-end:0}.vc-checkbox[data-v-116856a0] .v-input__slot .v-input--selection-controls__input .v-icon{color:transparent;border:1px solid rgba(0,0,0,.2);box-sizing:border-box;border-radius:2px;font-size:var(--font-size-small);font-weight:700;z-index:1;background-color:#fff}.vc-checkbox[data-v-116856a0] .checkbox-label{font-weight:var(--font-weight-medium2);font-size:var(--font-size-x-small)}.vc-checkbox[data-v-116856a0]:not(.v-input--is-disabled) .checkbox-label{color:var(--gray-darken-5)}.vc-checkbox[data-v-116856a0] .tooltip-icon{color:var(--gray-darken-3)}.vc-checkbox[data-v-116856a0] .avatar-wrapper .avatar-initials{font-size:var(--font-size-xxx-small);font-weight:var(--font-weight-medium2)}.vc-checkbox[data-v-116856a0].v-input--indeterminate:not(.v-input--is-disabled,.error--text) .v-input--selection-controls__input .v-icon{background-color:var(--green);color:#fff}.vc-checkbox[data-v-116856a0].v-input--is-label-active:not(.v-input--is-disabled,.error--text) .v-input--selection-controls__input .v-icon{background-color:var(--green);color:#fff;border:none}.vc-checkbox[data-v-116856a0]:not(.v-input--is-disabled):hover:not(:active) .v-input--selection-controls__input .v-icon{background-color:var(--gray-lighten-3)}.vc-checkbox[data-v-116856a0].v-input--indeterminate:not(.v-input--is-disabled,.error--text):hover .v-input--selection-controls__input .v-icon,.vc-checkbox[data-v-116856a0].v-input--is-label-active:not(.v-input--is-disabled,.error--text):hover .v-input--selection-controls__input .v-icon{background-color:rgba(84,210,140,.76)}.vc-checkbox[data-v-116856a0].v-input--indeterminate:not(.v-input--is-disabled,.error--text):active .v-input--selection-controls__input .v-icon,.vc-checkbox[data-v-116856a0].v-input--is-label-active:not(.v-input--is-disabled,.error--text):active .v-input--selection-controls__input .v-icon{background-color:rgba(84,210,140,.5)}.vc-checkbox[data-v-116856a0]:not(.v-input--is-label-active):not(.v-input--indeterminate):not(.v-input--is-disabled):active .v-input--selection-controls__input .v-icon{background:var(--gray-lighten-1)}.vc-checkbox[data-v-116856a0]:not(.v-input--is-disabled):focus .v-input--selection-controls__input .v-icon{box-shadow:0 0 0 3px var(--v-secondary-lighten1)}.vc-checkbox[data-v-116856a0].v-input--is-disabled .v-input--selection-controls__input .v-icon{background:var(--gray-lighten-2)}.vc-checkbox[data-v-116856a0].v-input--is-disabled.v-input--is-label-active .v-input--selection-controls__input .v-icon{border:none}.vc-checkbox[data-v-116856a0].v-input--is-disabled.v-input--is-label-active .v-input--selection-controls__input .v-icon:is(.error--text){color:var(--gray-darken-2)!important}.vc-checkbox[data-v-116856a0].error--text:not(.v-input--is-disabled) .v-input--selection-controls__input .v-icon{border-color:currentColor}.vc-checkbox[data-v-116856a0].v-input--has-state.error--text .v-label{animation:none}",
     map: undefined,
     media: undefined
   });
@@ -3635,7 +3642,7 @@ const __vue_inject_styles__$$ = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$$ = "data-v-35c33f46";
+const __vue_scope_id__$$ = "data-v-116856a0";
 /* module identifier */
 
 const __vue_module_identifier__$$ = undefined;
@@ -9051,6 +9058,7 @@ var __vue_component__$S = __vue_component__$R;
 //
 //
 //
+//
 var script$u = {
   name: 'VcBadge',
   components: {
@@ -9079,6 +9087,15 @@ var script$u = {
     dataQa: {
       type: String,
       default: 'VcBadge'
+    },
+    inline: {
+      type: Boolean,
+      required: false
+    },
+    flavor: {
+      type: String,
+      default: 'red',
+      validator: type => ["neutral", "orange", "red", "blue", "green"].includes(type)
     }
   }
 };
@@ -9101,13 +9118,14 @@ var __vue_render__$t = function () {
     }
   }, [_c('v-badge', {
     attrs: {
-      "color": "var(--red)",
+      "color": "var(--" + this.flavor + ")",
       "overlap": "",
       "offset-x": _vm.offsetX,
       "offset-y": _vm.offsetY || _vm.offsetX,
       "icon": _vm.badgeIcon,
       "value": !!this.badgeIcon || !!this.badgeText,
       "left": _vm.left,
+      "inline": _vm.inline,
       "content": _vm.badgeText
     }
   }, [_vm._t("default")], 2)], 1);
@@ -9118,8 +9136,8 @@ var __vue_staticRenderFns__$t = [];
 
 const __vue_inject_styles__$u = function (inject) {
   if (!inject) return;
-  inject("data-v-4edabf76_0", {
-    source: "[data-v-4edabf76] .v-icon__component{height:12px;width:12px}",
+  inject("data-v-225b0119_0", {
+    source: "[data-v-225b0119] .v-icon__component{height:12px;width:12px}",
     map: undefined,
     media: undefined
   });
@@ -9127,7 +9145,7 @@ const __vue_inject_styles__$u = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$u = "data-v-4edabf76";
+const __vue_scope_id__$u = "data-v-225b0119";
 /* module identifier */
 
 const __vue_module_identifier__$u = undefined;