@vcita/design-system 0.6.24 → 0.6.25-beta.1

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

@@ -4117,11 +4117,15 @@ var __vue_component__$u = /*#__PURE__*/normalizeComponent({
     icon: {
       type: Boolean,
       default: false
+    },
+    preLabel: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {
-    onChange: function onChange(id) {
-      this.$emit('input', id);
+    onChange: function onChange(value) {
+      this.$emit('input', value);
     }
   }
 };/* script */
@@ -4144,7 +4148,8 @@ var __vue_render__$t = function __vue_render__() {
     staticClass: "VcSwitch",
     class: {
       'is-active': _vm.value,
-      'with-icon': _vm.icon
+      'with-icon': _vm.icon,
+      'pre-label': _vm.preLabel
     },
     attrs: {
       "inset": "",
@@ -4158,6 +4163,11 @@ var __vue_render__$t = function __vue_render__() {
     on: {
       "change": _vm.onChange
     },
+    nativeOn: {
+      "click": function click($event) {
+        $event.stopPropagation();
+      }
+    },
     scopedSlots: _vm._u([{
       key: "label",
       fn: function fn() {
@@ -4183,8 +4193,8 @@ var __vue_staticRenderFns__$t = [];
 
 var __vue_inject_styles__$t = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-c503b80e_0", {
-    source: ".switchContainer .VcSwitch[data-v-c503b80e]{padding:0;margin:0}.switchContainer .VcSwitch[data-v-c503b80e]  label{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);line-height:var(--size-value6);color:var(--neutral-lighten-1)}.switchContainer .VcSwitch[data-v-c503b80e]  input{height:var(--size-value5)}.switchContainer .VcSwitch[data-v-c503b80e]  .v-input--selection-controls__input{margin-left:0;margin-right:var(--size-value3);height:var(--size-value5);width:var(--size-value8)}#app[dir=rtl] .switchContainer .VcSwitch[data-v-c503b80e]  .v-input--selection-controls__input{margin-left:var(--size-value3)}#app[dir=rtl] .switchContainer .VcSwitch[data-v-c503b80e]  .v-input--selection-controls__input{margin-right:0}.switchContainer .VcSwitch[data-v-c503b80e]  .v-input--switch__track{top:0;left:0}#app[dir=rtl] .switchContainer .VcSwitch[data-v-c503b80e]  .v-input--switch__track{left:auto;right:0}.switchContainer .VcSwitch[data-v-c503b80e]  .v-input--selection-controls__ripple{left:-10px;height:25px;width:25px}#app[dir=rtl] .switchContainer .VcSwitch[data-v-c503b80e]  .v-input--selection-controls__ripple{left:auto;right:-10px}.switchContainer .VcSwitch[data-v-c503b80e]  .v-input--switch__thumb{height:14px;width:14px;background-color:#fff;top:calc(50% - 7px);transform:translateX(3px)!important;box-shadow:var(--shadow-5)}#app[dir=rtl] .switchContainer .VcSwitch[data-v-c503b80e]  .v-input--switch__thumb{transform:translateX(-3px)!important}.switchContainer .VcSwitch.v-input--is-disabled[data-v-c503b80e] {opacity:1}.switchContainer .VcSwitch.v-input--is-disabled[data-v-c503b80e]  .v-input--switch__track{color:var(--gray-lighten-2)!important}.switchContainer .VcSwitch.v-input--is-disabled[data-v-c503b80e]  .v-input--switch__thumb{background-color:var(--gray)!important;box-shadow:none}.switchContainer .VcSwitch.is-active[data-v-c503b80e]  .v-input--switch__track{opacity:1;background-color:currentColor}.switchContainer .VcSwitch.is-active[data-v-c503b80e]  .v-input--selection-controls__ripple{transform:translateX(14px)!important}#app[dir=rtl] .switchContainer .VcSwitch.is-active[data-v-c503b80e]  .v-input--selection-controls__ripple{transform:translateX(-14px)!important}.switchContainer .VcSwitch.is-active[data-v-c503b80e]  .v-input--switch__thumb{transform:translateX(17px)!important}#app[dir=rtl] .switchContainer .VcSwitch.is-active[data-v-c503b80e]  .v-input--switch__thumb{transform:translateX(-17px)!important}.switchContainer .VcSwitch.with-icon[data-v-c503b80e]  input{height:var(--size-value6)}.switchContainer .VcSwitch.with-icon[data-v-c503b80e]  .v-input--selection-controls__input{margin-left:0;margin-right:var(--size-value3);height:var(--size-value6);width:var(--size-value12)}#app[dir=rtl] .switchContainer .VcSwitch.with-icon[data-v-c503b80e]  .v-input--selection-controls__input{margin-left:var(--size-value3)}#app[dir=rtl] .switchContainer .VcSwitch.with-icon[data-v-c503b80e]  .v-input--selection-controls__input{margin-right:0}.switchContainer .VcSwitch.with-icon[data-v-c503b80e]  .v-input--switch__track{top:0;left:0;height:var(--size-value6);width:var(--size-value12)}#app[dir=rtl] .switchContainer .VcSwitch.with-icon[data-v-c503b80e]  .v-input--switch__track{left:auto;right:0}.switchContainer .VcSwitch.with-icon[data-v-c503b80e]  .v-input--selection-controls__ripple{left:-9px;height:29px;width:29px;top:calc(50% - 21.5px)}#app[dir=rtl] .switchContainer .VcSwitch.with-icon[data-v-c503b80e]  .v-input--selection-controls__ripple{left:auto;right:-9px}.switchContainer .VcSwitch.with-icon[data-v-c503b80e]  .v-input--switch__thumb{height:18px;width:18px;top:calc(50% - 9px);transform:translateX(3.5px)!important}#app[dir=rtl] .switchContainer .VcSwitch.with-icon[data-v-c503b80e]  .v-input--switch__thumb{transform:translateX(-3.5px)!important}.switchContainer .VcSwitch.with-icon.v-input--is-disabled[data-v-c503b80e] {opacity:1}.switchContainer .VcSwitch.with-icon.v-input--is-disabled[data-v-c503b80e]  .v-input--switch__track{color:var(--gray-lighten-2)!important}.switchContainer .VcSwitch.with-icon.v-input--is-disabled[data-v-c503b80e]  .v-input--switch__thumb{background-color:var(--gray)!important;box-shadow:none}.switchContainer .VcSwitch.with-icon.v-input--is-disabled+.VcSwitchIcon[data-v-c503b80e]{fill:var(--gray-lighten-2)!important}.switchContainer .VcSwitch.with-icon.is-active[data-v-c503b80e]  .v-input--switch__track{opacity:1;background-color:currentColor}.switchContainer .VcSwitch.with-icon.is-active[data-v-c503b80e]  .v-input--selection-controls__ripple{transform:translateX(23.5px)!important}#app[dir=rtl] .switchContainer .VcSwitch.with-icon.is-active[data-v-c503b80e]  .v-input--selection-controls__ripple{transform:translateX(-23.5px)!important}.switchContainer .VcSwitch.with-icon.is-active[data-v-c503b80e]  .v-input--switch__thumb{transform:translateX(26px)!important}#app[dir=rtl] .switchContainer .VcSwitch.with-icon.is-active[data-v-c503b80e]  .v-input--switch__thumb{transform:translateX(-26px)!important}.switchContainer .VcSwitchIcon[data-v-c503b80e]{cursor:pointer;pointer-events:none;margin:17px;left:-10px}.switchContainer .VcSwitchIconV[data-v-c503b80e]{top:-33px;transform:translateX(23px);fill:var(--v-secondary-base)}.switchContainer .VcSwitchIconX[data-v-c503b80e]{top:-34px;transform:translate(0,0);fill:var(--neutral-lighten-1)}.switchContainer.with-icon[data-v-c503b80e]{height:var(--size-value6)}",
+  inject("data-v-4d89683c_0", {
+    source: ".switchContainer .VcSwitch[data-v-4d89683c]{padding:0;margin:0}.switchContainer .VcSwitch[data-v-4d89683c]  label{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);line-height:var(--size-value6);color:var(--neutral-lighten-1)}.switchContainer .VcSwitch[data-v-4d89683c]  input{height:var(--size-value5)}.switchContainer .VcSwitch[data-v-4d89683c]  .v-input--selection-controls__input{margin-left:0;margin-right:var(--size-value3);height:var(--size-value5);width:var(--size-value8)}#app[dir=rtl] .switchContainer .VcSwitch[data-v-4d89683c]  .v-input--selection-controls__input{margin-left:var(--size-value3)}#app[dir=rtl] .switchContainer .VcSwitch[data-v-4d89683c]  .v-input--selection-controls__input{margin-right:0}.switchContainer .VcSwitch[data-v-4d89683c]  .v-input--switch__track{top:0;left:0}#app[dir=rtl] .switchContainer .VcSwitch[data-v-4d89683c]  .v-input--switch__track{left:auto;right:0}.switchContainer .VcSwitch[data-v-4d89683c]  .v-input--selection-controls__ripple{left:-10px;height:25px;width:25px}#app[dir=rtl] .switchContainer .VcSwitch[data-v-4d89683c]  .v-input--selection-controls__ripple{left:auto;right:-10px}.switchContainer .VcSwitch[data-v-4d89683c]  .v-input--switch__thumb{height:14px;width:14px;background-color:#fff;top:calc(50% - 7px);transform:translateX(3px)!important;box-shadow:var(--shadow-5)}#app[dir=rtl] .switchContainer .VcSwitch[data-v-4d89683c]  .v-input--switch__thumb{transform:translateX(-3px)!important}.switchContainer .VcSwitch.v-input--is-disabled[data-v-4d89683c] {opacity:1}.switchContainer .VcSwitch.v-input--is-disabled[data-v-4d89683c]  .v-input--switch__track{color:var(--gray-lighten-2)!important}.switchContainer .VcSwitch.v-input--is-disabled[data-v-4d89683c]  .v-input--switch__thumb{background-color:var(--gray)!important;box-shadow:none}.switchContainer .VcSwitch.is-active[data-v-4d89683c]  .v-input--switch__track{opacity:1;background-color:currentColor}.switchContainer .VcSwitch.is-active[data-v-4d89683c]  .v-input--selection-controls__ripple{transform:translateX(14px)!important}#app[dir=rtl] .switchContainer .VcSwitch.is-active[data-v-4d89683c]  .v-input--selection-controls__ripple{transform:translateX(-14px)!important}.switchContainer .VcSwitch.is-active[data-v-4d89683c]  .v-input--switch__thumb{transform:translateX(17px)!important}#app[dir=rtl] .switchContainer .VcSwitch.is-active[data-v-4d89683c]  .v-input--switch__thumb{transform:translateX(-17px)!important}.switchContainer .VcSwitch.pre-label[data-v-4d89683c]  label{order:-1;flex:unset;margin-left:0;margin-right:var(--size-value2)}#app[dir=rtl] .switchContainer .VcSwitch.pre-label[data-v-4d89683c]  label{margin-left:var(--size-value2)}#app[dir=rtl] .switchContainer .VcSwitch.pre-label[data-v-4d89683c]  label{margin-right:0}.switchContainer .VcSwitch.pre-label[data-v-4d89683c]  .v-input--selection-controls__input{margin:unset}.switchContainer .VcSwitch.with-icon[data-v-4d89683c]  input{height:var(--size-value6)}.switchContainer .VcSwitch.with-icon[data-v-4d89683c]  .v-input--selection-controls__input{margin-left:0;margin-right:var(--size-value3);height:var(--size-value6);width:var(--size-value12)}#app[dir=rtl] .switchContainer .VcSwitch.with-icon[data-v-4d89683c]  .v-input--selection-controls__input{margin-left:var(--size-value3)}#app[dir=rtl] .switchContainer .VcSwitch.with-icon[data-v-4d89683c]  .v-input--selection-controls__input{margin-right:0}.switchContainer .VcSwitch.with-icon[data-v-4d89683c]  .v-input--switch__track{top:0;left:0;height:var(--size-value6);width:var(--size-value12)}#app[dir=rtl] .switchContainer .VcSwitch.with-icon[data-v-4d89683c]  .v-input--switch__track{left:auto;right:0}.switchContainer .VcSwitch.with-icon[data-v-4d89683c]  .v-input--selection-controls__ripple{left:-9px;height:29px;width:29px;top:calc(50% - 21.5px)}#app[dir=rtl] .switchContainer .VcSwitch.with-icon[data-v-4d89683c]  .v-input--selection-controls__ripple{left:auto;right:-9px}.switchContainer .VcSwitch.with-icon[data-v-4d89683c]  .v-input--switch__thumb{height:18px;width:18px;top:calc(50% - 9px);transform:translateX(3.5px)!important}#app[dir=rtl] .switchContainer .VcSwitch.with-icon[data-v-4d89683c]  .v-input--switch__thumb{transform:translateX(-3.5px)!important}.switchContainer .VcSwitch.with-icon.v-input--is-disabled[data-v-4d89683c] {opacity:1}.switchContainer .VcSwitch.with-icon.v-input--is-disabled[data-v-4d89683c]  .v-input--switch__track{color:var(--gray-lighten-2)!important}.switchContainer .VcSwitch.with-icon.v-input--is-disabled[data-v-4d89683c]  .v-input--switch__thumb{background-color:var(--gray)!important;box-shadow:none}.switchContainer .VcSwitch.with-icon.v-input--is-disabled+.VcSwitchIcon[data-v-4d89683c]{fill:var(--gray-lighten-2)!important}.switchContainer .VcSwitch.with-icon.is-active[data-v-4d89683c]  .v-input--switch__track{opacity:1;background-color:currentColor}.switchContainer .VcSwitch.with-icon.is-active[data-v-4d89683c]  .v-input--selection-controls__ripple{transform:translateX(23.5px)!important}#app[dir=rtl] .switchContainer .VcSwitch.with-icon.is-active[data-v-4d89683c]  .v-input--selection-controls__ripple{transform:translateX(-23.5px)!important}.switchContainer .VcSwitch.with-icon.is-active[data-v-4d89683c]  .v-input--switch__thumb{transform:translateX(26px)!important}#app[dir=rtl] .switchContainer .VcSwitch.with-icon.is-active[data-v-4d89683c]  .v-input--switch__thumb{transform:translateX(-26px)!important}.switchContainer .VcSwitchIcon[data-v-4d89683c]{cursor:pointer;pointer-events:none;margin:17px;left:-10px}.switchContainer .VcSwitchIconV[data-v-4d89683c]{top:-33px;transform:translateX(23px);fill:var(--v-secondary-base)}.switchContainer .VcSwitchIconX[data-v-4d89683c]{top:-34px;transform:translate(0,0);fill:var(--neutral-lighten-1)}.switchContainer.with-icon[data-v-4d89683c]{height:var(--size-value6)}",
     map: undefined,
     media: undefined
   });
@@ -4192,10 +4202,10 @@ var __vue_inject_styles__$t = function __vue_inject_styles__(inject) {
 /* scoped */
 
 
-var __vue_scope_id__$t = "data-v-c503b80e";
+var __vue_scope_id__$t = "data-v-4d89683c";
 /* module identifier */
 
-var __vue_module_identifier__$t = "data-v-c503b80e";
+var __vue_module_identifier__$t = "data-v-4d89683c";
 /* functional template */
 
 var __vue_is_functional_template__$t = false;
@@ -4611,6 +4621,10 @@ var __vue_component__$r = /*#__PURE__*/normalizeComponent({
     toggleInitialValue: {
       type: Boolean,
       default: true
+    },
+    closeOnClick: {
+      type: Boolean,
+      default: true
     }
   },
   data: function data() {
@@ -4657,7 +4671,7 @@ var __vue_render__$q = function __vue_render__() {
 
   return _c('VcPopover', {
     attrs: {
-      "close-on-click": _vm.validForm,
+      "close-on-click": _vm.validForm && _vm.closeOnClick,
       "value": _vm.value,
       "top": _vm.top,
       "right": _vm.right,
@@ -4763,8 +4777,8 @@ var __vue_staticRenderFns__$q = [];
 
 var __vue_inject_styles__$q = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-274a38c1_0", {
-    source: "[data-v-274a38c1]: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;--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-popover[data-v-274a38c1]{width:var(--popover-width);max-height:var(--popover-max-height);display:flex;box-shadow:var(--modal-box-shadow)}.vc-popover .vc-popover-content[data-v-274a38c1]{padding:var(--size-value4) var(--size-value6);overflow-y:auto}.vc-popover .vc-popover-footer[data-v-274a38c1]{padding:var(--size-value3) var(--size-value6)}",
+  inject("data-v-97aa8f28_0", {
+    source: "[data-v-97aa8f28]: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;--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-popover[data-v-97aa8f28]{width:var(--popover-width);max-height:var(--popover-max-height);display:flex;box-shadow:var(--modal-box-shadow)}.vc-popover .vc-popover-content[data-v-97aa8f28]{padding:var(--size-value4) var(--size-value6);overflow-y:auto}.vc-popover .vc-popover-footer[data-v-97aa8f28]{padding:var(--size-value3) var(--size-value6)}",
     map: undefined,
     media: undefined
   });
@@ -4772,10 +4786,10 @@ var __vue_inject_styles__$q = function __vue_inject_styles__(inject) {
 /* scoped */
 
 
-var __vue_scope_id__$q = "data-v-274a38c1";
+var __vue_scope_id__$q = "data-v-97aa8f28";
 /* module identifier */
 
-var __vue_module_identifier__$q = "data-v-274a38c1";
+var __vue_module_identifier__$q = "data-v-97aa8f28";
 /* functional template */
 
 var __vue_is_functional_template__$q = false;

package/init/initI18n.js

@@ -27,7 +27,7 @@ const initI18n = (locale = 'en') => {
 
     Vue.prototype.$ds.setLocale(locale);
 
-    Vue.prototype.$dst = (key) => {
+    Vue.prototype.$dst = (key, params) => {
         const language = messages[Vue.prototype.$ds.locale] || messages['en'];
 
         const path = key.split('.');
@@ -36,6 +36,10 @@ const initI18n = (locale = 'en') => {
             for (let item of path) {
                 result = result[item];
             }
+            for (let param in params) {
+                let regex = new RegExp(`%{${param}}`,'gi')
+                result = result.replace(regex, params[param])
+            }
         }
         catch {
             result = key;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcita/design-system",
-  "version": "0.6.24",
+  "version": "0.6.25-beta.1",
   "description": "vcita design system",
   "author": "vcita",
   "scripts": {

package/src/components/VcInputPopover/VcInputPopover.stories.js

@@ -36,6 +36,9 @@ const GeneralTemplate = (args, {argTypes}) => ({
                           :data-qa="dataQa"
                           :show-header-toggle="showHeaderToggle"
                           :toggle-initial-value="toggleInitialValue"
+                          :ok-button-label="okButtonLabel"
+                          :cancel-button-label="cancelButtonLabel"
+                          :close-on-click="closeOnClick"
                           @input="onInput"
                           @onOkClicked="onSubmit"
                           @onCancelClicked="onCancel"
@@ -73,6 +76,9 @@ Playground.args = {
     dataQa: 'vc-input-popover',
     showHeaderToggle: true,
     toggleInitialValue: true,
+    closeOnClick: true,
+    okButtonLabel: 'Done',
+    cancelButtonLabel: 'Cancel',
     onInput: action('input'),
     onSubmit: action('submit'),
     onCancel: action('cancel'),
@@ -89,7 +95,7 @@ export default {
             url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=7305%3A60442',
         },
         status: {
-            type: 'releaseCandidate', //    'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            type: 'stable', //    'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
             url: 'https://vuetifyjs.com/en/components/menus/',
         }
     },

package/src/components/VcInputPopover/VcInputPopover.vue

@@ -1,5 +1,5 @@
 <template>
-  <VcPopover :close-on-click="validForm"
+  <VcPopover :close-on-click="validForm && closeOnClick"
              :value="value"
              :top="top"
              :right="right"
@@ -97,6 +97,10 @@ export default {
       type: Boolean,
       default: true
     },
+    closeOnClick: {
+      type: Boolean,
+      default: true
+    },
   },
   data() {
     return {

package/src/components/VcRadio/VcRadio.stories.js

@@ -56,7 +56,7 @@ with_icon.args = {
 }
 
 export default {
-    title: 'radio / VcRadio',
+    title: 'form / VcRadio',
     id: 'VcRadio',
     component: VcRadioCmp,
     parameters: {

package/src/components/VcRadioGroup/VcRadioGroup.stories.js

@@ -75,7 +75,7 @@ Playground.args = {
 }
 
 export default {
-    title: 'radio / VcRadioGroup',
+    title: 'form / VcRadioGroup',
     id: 'VcRadioGroup',
     component: VcRadioGroupCmp,
     parameters: {

package/src/components/VcSwitch/VcSwitch.stories.js

@@ -9,7 +9,7 @@ const Template = (args, {argTypes}) => ({
     data: () => ({
         itemValue: true,
     }),
-    template: '<div><VcSwitch v-model="itemValue" color="secondary" :label="label" :ripple="ripple" :disabled="disabled" @input="onChange" :icon="icon" /></div>',
+    template: '<div><VcSwitch v-model="itemValue" color="secondary" :label="label" :preLabel="preLabel" :ripple="ripple" :disabled="disabled" @input="onChange" :icon="icon" /></div>',
 })
 
 export const Playground = Template.bind({});
@@ -48,6 +48,7 @@ WithLabel.args = {
     onChange: action("input"),
     label: 'my switch',
     disabled: false,
+    preLabel: true
 }
 
 const TemplateWithSlot = (args, {argTypes}) => ({

package/src/components/VcSwitch/VcSwitch.vue

@@ -2,12 +2,13 @@
 <div class="switchContainer" :class="{'with-icon': icon}">
   <v-switch inset hide-details
             class="VcSwitch"
-            :class="{'is-active': value, 'with-icon': icon}"
+            :class="{'is-active': value, 'with-icon': icon, 'pre-label': preLabel}"
             :label="label"
             :ripple="ripple"
             :input-value="value"
             :color="color"
             :disabled="disabled"
+            @click.native.stop
             @change="onChange">
     <template #label>
       <slot name="label"/>
@@ -47,11 +48,15 @@ export default {
     icon: {
       type: Boolean,
       default: false
+    },
+    preLabel: {
+      type: Boolean,
+      default: false
     }
   },
   methods:{
-    onChange: function (id) {
-      this.$emit('input', id)
+    onChange: function (value) {
+      this.$emit('input', value)
     }
   }
 }
@@ -135,6 +140,20 @@ export default {
       }
     }
 
+    &.pre-label{
+      ::v-deep {
+        label{
+          order: -1;
+          flex: unset;
+          @include i-margin-mirror(0, var(--size-value2));
+        }
+        .v-input--selection-controls__input {
+          margin: unset;
+        }
+
+      }
+    }
+
     &.with-icon {
       ::v-deep {
 

package/src/components/VcTimeSince/VcTimeSince.spec.js

@@ -0,0 +1,86 @@
+import '@testing-library/jest-dom'
+import VcTimeSince from "./VcTimeSince"
+import init from "../../../testing-library.config"
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+
+init();
+
+const props = {
+    timestamp: Math.floor(Date.now() - 600000)
+}
+
+describe("VcTimeSince.vue", () => {
+
+    const renderWithVuetify = (component, options, callback) => {
+        const root = document.createElement('div')
+        root.setAttribute('data-app', 'true')
+
+        return render(
+            component,
+            {
+                container: document.body.appendChild(root),
+                // for Vuetify components that use the vuetify instance property
+                vuetify: new Vuetify(),
+                ...options,
+                mocks: {
+                    $dst: value => value,
+                },
+            },
+            callback,
+        )
+    }
+
+    it("mounts", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container} = renderWithVuetify(VcTimeSince, {
+            props: props
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+    });
+
+    it('3 years ago',() => {
+        const {getByText} = renderWithVuetify(VcTimeSince, {
+            props: {timestamp: Math.floor(Date.now() - 1000 * 60 * 60 * 24 * 31 * 12 * 3)}
+        })
+        expect(getByText('3 years ago')).toBeInTheDocument()
+    })
+    it('4 months ago',() => {
+        const {getByText} = renderWithVuetify(VcTimeSince, {
+            props: {timestamp: Math.floor(Date.now() - 1000 * 60 * 60 * 24 * 30 * 4)}
+        })
+        expect(getByText('4 months ago')).toBeInTheDocument()
+    })
+    it('11 days ago',() => {
+        const {getByText} = renderWithVuetify(VcTimeSince, {
+            props: {timestamp: Math.floor(Date.now() - 1000 * 60 * 60 * 24 * 11)}
+        })
+        expect(getByText('11 days ago')).toBeInTheDocument()
+    })
+    it('5 hours ago',() => {
+        const {getByText} = renderWithVuetify(VcTimeSince, {
+            props: {timestamp: Math.floor(Date.now() - 1000 * 60 * 60 * 5)}
+        })
+        expect(getByText('5 hours ago')).toBeInTheDocument()
+    })
+    it('10 minutes ago',() => {
+        const {getByText} = renderWithVuetify(VcTimeSince, {
+            props: props
+        })
+        expect(getByText('10 minutes ago')).toBeInTheDocument()
+    })
+
+    it('2 second ago',() => {
+        const {getByText} = renderWithVuetify(VcTimeSince, {
+            props: {timestamp: Math.floor(Date.now() - 2000)}
+        })
+        expect(getByText('2 seconds ago')).toBeInTheDocument()
+    })
+
+
+
+
+
+});

package/src/components/VcTimeSince/VcTimeSince.stories.js

@@ -0,0 +1,29 @@
+import VcTimeSince from './VcTimeSince';
+
+const Template = (args, {argTypes}) => ({
+    components: {VcTimeSince: VcTimeSince},
+    props: Object.keys(argTypes),
+    template: '<div><VcTimeSince :timestamp="timestamp" /></div>',
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    timestamp: Math.floor(Date.now() - 1400000)
+}
+export default {
+    title: 'VcTimeSince',
+    id: 'VcTimeSince',
+    component: VcTimeSince,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/2n9LGK4TXFmJMtsfrBzdGS/Notification?node-id=60%3A12168',
+        },
+        status: {
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'http://www.url.com/status', // will make the tag a link
+        },
+    },
+};

package/src/components/VcTimeSince/VcTimeSince.vue

@@ -0,0 +1,47 @@
+<template>
+ <span>
+  {{timeSince}}
+ </span>
+</template>
+
+<script>
+export default {
+  name: "VcTimeSince",
+  props: {
+    timestamp: {
+      required: true,
+      type: Number,
+      validator: prop => Date.now() > prop
+    }
+  },
+  computed: {
+    timeSince () {
+      let seconds = Math.floor((new Date() - this.timestamp) / 1000);
+      let interval = seconds / 31536000;
+      if (interval > 1) {
+        return `${this.$dst("ds.time_since.years",{years: Math.floor(interval)})}`;
+      }
+      interval = seconds / 2592000;
+      if (interval > 1) {
+        return `${this.$dst("ds.time_since.months",{months: Math.floor(interval)})}`;
+      }
+      interval = seconds / 86400;
+      if (Math.floor(interval) === 1) {
+        return `${this.$dst("ds.time_since.yesterday")}`;
+      }
+      if (interval > 1) {
+        return `${this.$dst("ds.time_since.days",{days: Math.floor(interval)})}`;
+      }
+      interval = seconds / 3600;
+      if (interval > 1) {
+        return `${this.$dst("ds.time_since.hours",{hours: Math.floor(interval)})}`;
+      }
+      interval = seconds / 60;
+      if (interval > 1) {
+        return `${this.$dst("ds.time_since.minutes",{minutes: Math.floor(interval)})}`;
+      }
+      return `${this.$dst("ds.time_since.now")}`;
+    }
+  }
+}
+</script>