@empathyco/x-components 6.0.0-alpha.57 → 6.0.0-alpha.58
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 +9 -0
- package/design-system/deprecated-full-theme.css +820 -819
- package/docs/API-reference/api/x-components.baseswitch.md +1 -1
- package/js/components/base-switch.vue.js.map +1 -1
- package/js/components/base-switch.vue2.js +3 -7
- package/js/components/base-switch.vue2.js.map +1 -1
- package/package.json +2 -2
- package/report/x-components.api.json +7 -16
- package/report/x-components.api.md +1 -1
- package/types/components/base-switch.vue.d.ts +2 -1
- package/types/components/base-switch.vue.d.ts.map +1 -1
|
@@ -15,7 +15,7 @@ _default: import("vue").DefineComponent<{
|
|
|
15
15
|
default: boolean;
|
|
16
16
|
};
|
|
17
17
|
}, {
|
|
18
|
-
cssClasses: import("vue").
|
|
18
|
+
cssClasses: import("vue").ComputedRef<VueCSSClasses>;
|
|
19
19
|
toggle: () => void;
|
|
20
20
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
21
21
|
modelValue: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-switch.vue.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n <button\n @click=\"toggle\"\n :aria-checked=\"modelValue || undefined\"\n :class=\"cssClasses\"\n class=\"x-switch\"\n role=\"switch\"\n >\n <div class=\"x-switch__handle\" />\n </button>\n</template>\n\n<script lang=\"ts\">\n import {
|
|
1
|
+
{"version":3,"file":"base-switch.vue.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n <button\n @click=\"toggle\"\n :aria-checked=\"modelValue || undefined\"\n :class=\"cssClasses\"\n class=\"x-switch\"\n role=\"switch\"\n >\n <div class=\"x-switch__handle\" />\n </button>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent } from 'vue';\n import { VueCSSClasses } from '../utils/types';\n\n /**\n * Basic switch component to handle boolean values. This component receives\n * its selected state using a prop, and emits a Vue event whenever the user\n * clicks it.\n *\n * @public\n */\n\n export default defineComponent({\n name: 'BaseSwitch',\n /**\n * The selected value of the switch.\n *\n * @public\n */\n props: {\n modelValue: {\n type: Boolean,\n default: false\n }\n },\n emits: ['update:modelValue'],\n setup(props, { emit }) {\n /**\n * Dynamic CSS classes to add to the switch component\n * depending on its internal state.\n *\n * @returns A boolean dictionary with dynamic CSS classes.\n * @internal\n */\n const cssClasses = computed<VueCSSClasses>(() => ({\n 'x-switch--is-selected x-selected': props.modelValue\n }));\n\n /**\n * Emits an event with the new value of the switch.\n *\n * @internal\n */\n const toggle = (): void => {\n const newValue = !props.modelValue;\n emit('update:modelValue', newValue);\n };\n\n return {\n cssClasses,\n toggle\n };\n }\n });\n</script>\n\n<style lang=\"css\" scoped>\n .x-switch {\n --x-switch-height: 16px;\n --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n --x-switch-background: #b3b3b3;\n --x-switch-padding: 2px;\n --x-switch-handle-size: var(--x-switch-height);\n box-sizing: content-box;\n height: var(--x-switch-height);\n padding: var(--x-switch-padding);\n border-radius: 99999px;\n background: var(--x-switch-background);\n width: var(--x-switch-width);\n border: none;\n transition: 0.25s ease-out background-color;\n cursor: pointer;\n }\n\n .x-switch__handle {\n background: #ffffff;\n border-radius: 50%;\n height: var(--x-switch-handle-size);\n width: var(--x-switch-handle-size);\n transition: 0.25s ease-out transform;\n transform: translateX(var(--x-switch-translate-x, 0%));\n }\n\n .x-switch--is-selected {\n --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n --x-switch-background: #1a1a1a;\n }\n\n .x-switch--sm {\n --x-switch-height: 12px;\n }\n\n .x-switch--lg {\n --x-switch-height: 24px;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n <BaseSwitch @update:modelValue=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\n import { BaseSwitch } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSwitchDemo',\n components: {\n BaseSwitch\n },\n data() {\n return {\n value: false\n };\n }\n };\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n <BaseSwitch v-model=\"value\" />\n</template>\n\n<script>\n import { BaseSwitch } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSwitchDemo',\n components: {\n BaseSwitch\n },\n data() {\n return {\n value: false\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_pushScopeId","_popScopeId","_createElementVNode","_openBlock","cssClasses","_normalizeClass"],"mappings":";;;;;AAQI,MAAA,YAAA,GAAA,CAAA,CAAA,MAAAA,WAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,GAAA,CAAA,EAAA,EAAAC,UAAA,EAAA,EAAA,CAAA,CAAA,CAAA;;MAAA,UAAgC,mBAAA,YAAA,CAAA,sBAAAC,kBAAA;AAAA,EAAA,KAAA;AAAA,EAAA,EAAA,KAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAAA;AAAA,CAAA,CAAA,CAAA;;;;AAN/B,SAAA,WAAA,CAAK,IAAE,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACP,EAAA,OAAAC,SAAA,uBAA4B,QAAS,EAAA;AAAA,IACrC,OAJL,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAIYC,CAAU,CAAA,GAAA,CAAA,GAAA,IAAA,KACZ,IAAU,CAAA,MAAA,IAAA,IAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAChB,cAAa,EAAA,IAAA,CAAA,UAAA,IAAA,KAAA,CAAA;AAAA,IANjB,KAAA,EAAAC,cAAA,CAAA,CAAA,IAAA,CAAA,UAAA,EAAA,UAAA,CAAA,CAAA;AAAA,IAAA,IAAA,EAAA,QAAA;;;;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent,
|
|
1
|
+
import { defineComponent, computed } from 'vue';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Basic switch component to handle boolean values. This component receives
|
|
@@ -29,9 +29,9 @@ var _sfc_main = defineComponent({
|
|
|
29
29
|
* @returns A boolean dictionary with dynamic CSS classes.
|
|
30
30
|
* @internal
|
|
31
31
|
*/
|
|
32
|
-
const cssClasses =
|
|
32
|
+
const cssClasses = computed(() => ({
|
|
33
33
|
'x-switch--is-selected x-selected': props.modelValue
|
|
34
|
-
});
|
|
34
|
+
}));
|
|
35
35
|
/**
|
|
36
36
|
* Emits an event with the new value of the switch.
|
|
37
37
|
*
|
|
@@ -39,10 +39,6 @@ var _sfc_main = defineComponent({
|
|
|
39
39
|
*/
|
|
40
40
|
const toggle = () => {
|
|
41
41
|
const newValue = !props.modelValue;
|
|
42
|
-
cssClasses.value = {
|
|
43
|
-
'x-switch--is-selected': newValue,
|
|
44
|
-
'x-selected': newValue
|
|
45
|
-
};
|
|
46
42
|
emit('update:modelValue', newValue);
|
|
47
43
|
};
|
|
48
44
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-switch.vue2.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n <button\n @click=\"toggle\"\n :aria-checked=\"modelValue || undefined\"\n :class=\"cssClasses\"\n class=\"x-switch\"\n role=\"switch\"\n >\n <div class=\"x-switch__handle\" />\n </button>\n</template>\n\n<script lang=\"ts\">\n import {
|
|
1
|
+
{"version":3,"file":"base-switch.vue2.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n <button\n @click=\"toggle\"\n :aria-checked=\"modelValue || undefined\"\n :class=\"cssClasses\"\n class=\"x-switch\"\n role=\"switch\"\n >\n <div class=\"x-switch__handle\" />\n </button>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent } from 'vue';\n import { VueCSSClasses } from '../utils/types';\n\n /**\n * Basic switch component to handle boolean values. This component receives\n * its selected state using a prop, and emits a Vue event whenever the user\n * clicks it.\n *\n * @public\n */\n\n export default defineComponent({\n name: 'BaseSwitch',\n /**\n * The selected value of the switch.\n *\n * @public\n */\n props: {\n modelValue: {\n type: Boolean,\n default: false\n }\n },\n emits: ['update:modelValue'],\n setup(props, { emit }) {\n /**\n * Dynamic CSS classes to add to the switch component\n * depending on its internal state.\n *\n * @returns A boolean dictionary with dynamic CSS classes.\n * @internal\n */\n const cssClasses = computed<VueCSSClasses>(() => ({\n 'x-switch--is-selected x-selected': props.modelValue\n }));\n\n /**\n * Emits an event with the new value of the switch.\n *\n * @internal\n */\n const toggle = (): void => {\n const newValue = !props.modelValue;\n emit('update:modelValue', newValue);\n };\n\n return {\n cssClasses,\n toggle\n };\n }\n });\n</script>\n\n<style lang=\"css\" scoped>\n .x-switch {\n --x-switch-height: 16px;\n --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n --x-switch-background: #b3b3b3;\n --x-switch-padding: 2px;\n --x-switch-handle-size: var(--x-switch-height);\n box-sizing: content-box;\n height: var(--x-switch-height);\n padding: var(--x-switch-padding);\n border-radius: 99999px;\n background: var(--x-switch-background);\n width: var(--x-switch-width);\n border: none;\n transition: 0.25s ease-out background-color;\n cursor: pointer;\n }\n\n .x-switch__handle {\n background: #ffffff;\n border-radius: 50%;\n height: var(--x-switch-handle-size);\n width: var(--x-switch-handle-size);\n transition: 0.25s ease-out transform;\n transform: translateX(var(--x-switch-translate-x, 0%));\n }\n\n .x-switch--is-selected {\n --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n --x-switch-background: #1a1a1a;\n }\n\n .x-switch--sm {\n --x-switch-height: 12px;\n }\n\n .x-switch--lg {\n --x-switch-height: 24px;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n <BaseSwitch @update:modelValue=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\n import { BaseSwitch } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSwitchDemo',\n components: {\n BaseSwitch\n },\n data() {\n return {\n value: false\n };\n }\n };\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n <BaseSwitch v-model=\"value\" />\n</template>\n\n<script>\n import { BaseSwitch } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSwitchDemo',\n components: {\n BaseSwitch\n },\n data() {\n return {\n value: false\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAgBE;;;;;;AAME;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB;;;;AAIE;AACF,IAAA,KAAK,EAAE;AACL,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACf,SAAA;AACD,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB;;;;;;AAME;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAgB,OAAO;YAChD,kCAAkC,EAAE,KAAK,CAAC,UAAS;AACpD,SAAA,CAAC,CAAC,CAAA;AAEH;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,MAAM,QAAO,GAAI,CAAC,KAAK,CAAC,UAAU,CAAA;AAClC,YAAA,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAA;AACrC,SAAC,CAAA;QAED,OAAO;YACL,UAAU;YACV,MAAK;SACN,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "6.0.0-alpha.
|
|
3
|
+
"version": "6.0.0-alpha.58",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -138,5 +138,5 @@
|
|
|
138
138
|
"access": "public",
|
|
139
139
|
"directory": "dist"
|
|
140
140
|
},
|
|
141
|
-
"gitHead": "
|
|
141
|
+
"gitHead": "4c0af82b5e18f6abb0219b5c3564157f30966e98"
|
|
142
142
|
}
|
|
@@ -9354,30 +9354,21 @@
|
|
|
9354
9354
|
},
|
|
9355
9355
|
{
|
|
9356
9356
|
"kind": "Reference",
|
|
9357
|
-
"text": "
|
|
9358
|
-
"canonicalReference": "@vue/reactivity!
|
|
9359
|
-
},
|
|
9360
|
-
{
|
|
9361
|
-
"kind": "Content",
|
|
9362
|
-
"text": "<string | import(\"@empathyco/x-utils\")."
|
|
9363
|
-
},
|
|
9364
|
-
{
|
|
9365
|
-
"kind": "Reference",
|
|
9366
|
-
"text": "Dictionary",
|
|
9367
|
-
"canonicalReference": "@empathyco/x-utils!Dictionary:type"
|
|
9357
|
+
"text": "ComputedRef",
|
|
9358
|
+
"canonicalReference": "@vue/reactivity!ComputedRef:interface"
|
|
9368
9359
|
},
|
|
9369
9360
|
{
|
|
9370
9361
|
"kind": "Content",
|
|
9371
|
-
"text": "<
|
|
9362
|
+
"text": "<"
|
|
9372
9363
|
},
|
|
9373
9364
|
{
|
|
9374
9365
|
"kind": "Reference",
|
|
9375
|
-
"text": "
|
|
9376
|
-
"canonicalReference": "@empathyco/x-
|
|
9366
|
+
"text": "VueCSSClasses",
|
|
9367
|
+
"canonicalReference": "@empathyco/x-components!VueCSSClasses:type"
|
|
9377
9368
|
},
|
|
9378
9369
|
{
|
|
9379
9370
|
"kind": "Content",
|
|
9380
|
-
"text": "
|
|
9371
|
+
"text": ">;\n toggle: () => void;\n}, unknown, {}, {}, import(\"vue\")."
|
|
9381
9372
|
},
|
|
9382
9373
|
{
|
|
9383
9374
|
"kind": "Reference",
|
|
@@ -9440,7 +9431,7 @@
|
|
|
9440
9431
|
"name": "BaseSwitch",
|
|
9441
9432
|
"variableTypeTokenRange": {
|
|
9442
9433
|
"startIndex": 1,
|
|
9443
|
-
"endIndex":
|
|
9434
|
+
"endIndex": 22
|
|
9444
9435
|
}
|
|
9445
9436
|
},
|
|
9446
9437
|
{
|
|
@@ -1401,7 +1401,7 @@ type: BooleanConstructor;
|
|
|
1401
1401
|
default: boolean;
|
|
1402
1402
|
};
|
|
1403
1403
|
}, {
|
|
1404
|
-
cssClasses:
|
|
1404
|
+
cssClasses: ComputedRef<VueCSSClasses>;
|
|
1405
1405
|
toggle: () => void;
|
|
1406
1406
|
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", PublicProps, Readonly<ExtractPropTypes< {
|
|
1407
1407
|
modelValue: {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { VueCSSClasses } from '../utils/types';
|
|
1
2
|
/**
|
|
2
3
|
* Basic switch component to handle boolean values. This component receives
|
|
3
4
|
* its selected state using a prop, and emits a Vue event whenever the user
|
|
@@ -11,7 +12,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
11
12
|
default: boolean;
|
|
12
13
|
};
|
|
13
14
|
}, {
|
|
14
|
-
cssClasses: import("vue").
|
|
15
|
+
cssClasses: import("vue").ComputedRef<VueCSSClasses>;
|
|
15
16
|
toggle: () => void;
|
|
16
17
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
17
18
|
modelValue: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-switch.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-switch.vue?vue&type=script&lang.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"base-switch.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-switch.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AAEE,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C;;;;;;GAMG;;;;;;;;kBAiCoB,IAAI;;;;;;;;;;;AA/B3B,wBAyCG"}
|