@vcita/design-system 0.6.24 → 0.6.25-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.MD +6 -0
- package/config/locales/ds.en.yml +9 -0
- package/dist/@vcita/design-system.esm.js +24 -10
- package/dist/@vcita/design-system.min.js +1 -1
- package/dist/@vcita/design-system.ssr.js +26 -12
- package/init/initI18n.js +5 -1
- package/package.json +1 -1
- package/src/components/VcInputPopover/VcInputPopover.stories.js +7 -1
- package/src/components/VcInputPopover/VcInputPopover.vue +5 -1
- package/src/components/VcRadio/VcRadio.stories.js +1 -1
- package/src/components/VcRadioGroup/VcRadioGroup.stories.js +1 -1
- package/src/components/VcSwitch/VcSwitch.stories.js +2 -1
- package/src/components/VcSwitch/VcSwitch.vue +22 -3
- package/src/components/VcTimeSince/VcTimeSince.spec.js +86 -0
- package/src/components/VcTimeSince/VcTimeSince.stories.js +29 -0
- package/src/components/VcTimeSince/VcTimeSince.vue +47 -0
package/CHANGELOG.MD
CHANGED
|
@@ -5,6 +5,12 @@ Format based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
|
5
5
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
6
6
|
|
|
7
7
|
### Unreleased changes
|
|
8
|
+
- VcTimeSince
|
|
9
|
+
- VcSwitch - add option to show label before switch
|
|
10
|
+
- Translations with parameters
|
|
11
|
+
|
|
12
|
+
### 0.6.25 (2022-06-23)
|
|
13
|
+
- VcInputPopover - add click outside will not close the popover support
|
|
8
14
|
|
|
9
15
|
### 0.6.24 (2022-06-14)
|
|
10
16
|
- VcInputBottomSheet - add switch support
|
package/config/locales/ds.en.yml
CHANGED
|
@@ -17,3 +17,12 @@ en:
|
|
|
17
17
|
default_title: Submit
|
|
18
18
|
search_bar:
|
|
19
19
|
label: Search
|
|
20
|
+
time_since:
|
|
21
|
+
years: %{years} years ago
|
|
22
|
+
months: %{months} months ago
|
|
23
|
+
days: %{days} days ago
|
|
24
|
+
yesterday: Yesterday
|
|
25
|
+
hours: %{hours} hours ago
|
|
26
|
+
minutes: %{minutes} minutes ago
|
|
27
|
+
now: Just now
|
|
28
|
+
|
|
@@ -4161,11 +4161,15 @@ var script$t = {
|
|
|
4161
4161
|
icon: {
|
|
4162
4162
|
type: Boolean,
|
|
4163
4163
|
default: false
|
|
4164
|
+
},
|
|
4165
|
+
preLabel: {
|
|
4166
|
+
type: Boolean,
|
|
4167
|
+
default: false
|
|
4164
4168
|
}
|
|
4165
4169
|
},
|
|
4166
4170
|
methods: {
|
|
4167
|
-
onChange: function (
|
|
4168
|
-
this.$emit('input',
|
|
4171
|
+
onChange: function (value) {
|
|
4172
|
+
this.$emit('input', value);
|
|
4169
4173
|
}
|
|
4170
4174
|
}
|
|
4171
4175
|
};
|
|
@@ -4190,7 +4194,8 @@ var __vue_render__$t = function () {
|
|
|
4190
4194
|
staticClass: "VcSwitch",
|
|
4191
4195
|
class: {
|
|
4192
4196
|
'is-active': _vm.value,
|
|
4193
|
-
'with-icon': _vm.icon
|
|
4197
|
+
'with-icon': _vm.icon,
|
|
4198
|
+
'pre-label': _vm.preLabel
|
|
4194
4199
|
},
|
|
4195
4200
|
attrs: {
|
|
4196
4201
|
"inset": "",
|
|
@@ -4204,6 +4209,11 @@ var __vue_render__$t = function () {
|
|
|
4204
4209
|
on: {
|
|
4205
4210
|
"change": _vm.onChange
|
|
4206
4211
|
},
|
|
4212
|
+
nativeOn: {
|
|
4213
|
+
"click": function ($event) {
|
|
4214
|
+
$event.stopPropagation();
|
|
4215
|
+
}
|
|
4216
|
+
},
|
|
4207
4217
|
scopedSlots: _vm._u([{
|
|
4208
4218
|
key: "label",
|
|
4209
4219
|
fn: function () {
|
|
@@ -4229,8 +4239,8 @@ var __vue_staticRenderFns__$t = [];
|
|
|
4229
4239
|
|
|
4230
4240
|
const __vue_inject_styles__$t = function (inject) {
|
|
4231
4241
|
if (!inject) return;
|
|
4232
|
-
inject("data-v-
|
|
4233
|
-
source: ".switchContainer .VcSwitch[data-v-
|
|
4242
|
+
inject("data-v-4d89683c_0", {
|
|
4243
|
+
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)}",
|
|
4234
4244
|
map: undefined,
|
|
4235
4245
|
media: undefined
|
|
4236
4246
|
});
|
|
@@ -4238,7 +4248,7 @@ const __vue_inject_styles__$t = function (inject) {
|
|
|
4238
4248
|
/* scoped */
|
|
4239
4249
|
|
|
4240
4250
|
|
|
4241
|
-
const __vue_scope_id__$t = "data-v-
|
|
4251
|
+
const __vue_scope_id__$t = "data-v-4d89683c";
|
|
4242
4252
|
/* module identifier */
|
|
4243
4253
|
|
|
4244
4254
|
const __vue_module_identifier__$t = undefined;
|
|
@@ -4679,6 +4689,10 @@ var script$q = {
|
|
|
4679
4689
|
toggleInitialValue: {
|
|
4680
4690
|
type: Boolean,
|
|
4681
4691
|
default: true
|
|
4692
|
+
},
|
|
4693
|
+
closeOnClick: {
|
|
4694
|
+
type: Boolean,
|
|
4695
|
+
default: true
|
|
4682
4696
|
}
|
|
4683
4697
|
},
|
|
4684
4698
|
|
|
@@ -4733,7 +4747,7 @@ var __vue_render__$q = function () {
|
|
|
4733
4747
|
|
|
4734
4748
|
return _c('VcPopover', {
|
|
4735
4749
|
attrs: {
|
|
4736
|
-
"close-on-click": _vm.validForm,
|
|
4750
|
+
"close-on-click": _vm.validForm && _vm.closeOnClick,
|
|
4737
4751
|
"value": _vm.value,
|
|
4738
4752
|
"top": _vm.top,
|
|
4739
4753
|
"right": _vm.right,
|
|
@@ -4839,8 +4853,8 @@ var __vue_staticRenderFns__$q = [];
|
|
|
4839
4853
|
|
|
4840
4854
|
const __vue_inject_styles__$q = function (inject) {
|
|
4841
4855
|
if (!inject) return;
|
|
4842
|
-
inject("data-v-
|
|
4843
|
-
source: "[data-v-
|
|
4856
|
+
inject("data-v-97aa8f28_0", {
|
|
4857
|
+
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)}",
|
|
4844
4858
|
map: undefined,
|
|
4845
4859
|
media: undefined
|
|
4846
4860
|
});
|
|
@@ -4848,7 +4862,7 @@ const __vue_inject_styles__$q = function (inject) {
|
|
|
4848
4862
|
/* scoped */
|
|
4849
4863
|
|
|
4850
4864
|
|
|
4851
|
-
const __vue_scope_id__$q = "data-v-
|
|
4865
|
+
const __vue_scope_id__$q = "data-v-97aa8f28";
|
|
4852
4866
|
/* module identifier */
|
|
4853
4867
|
|
|
4854
4868
|
const __vue_module_identifier__$q = undefined;
|