@empathyco/x-components 3.0.0-alpha.123 → 3.0.0-alpha.124
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 +22 -0
- package/core/index.js +1 -0
- package/core/index.js.map +1 -1
- package/design-system/full-theme.css +17 -17
- package/docs/API-reference/api/x-components.baseswitch.md +21 -0
- package/docs/API-reference/api/x-components.baseswitch.value.md +13 -0
- package/docs/API-reference/api/x-components.featurelocation.md +1 -1
- package/docs/API-reference/api/x-components.md +1 -0
- package/docs/API-reference/components/common/x-components.base-switch.md +80 -0
- package/js/components/base-switch.vue.js +59 -0
- package/js/components/base-switch.vue.js.map +1 -0
- package/js/components/base-switch.vue_rollup-plugin-vue_script.vue.js +47 -0
- package/js/components/base-switch.vue_rollup-plugin-vue_script.vue.js.map +1 -0
- package/js/index.js +1 -0
- package/js/index.js.map +1 -1
- package/js/x-modules/extra-params/components/extra-params.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/extra-params/components/extra-params.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/extra-params/components/renderless-extra-param.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/extra-params/components/renderless-extra-param.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/facets/components/clear-filters.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/facets/components/clear-filters.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/facets/components/facets/facets-provider.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/facets/components/facets/facets-provider.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/facets/components/filters/all-filter.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/facets/components/filters/all-filter.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/facets/components/filters/hierarchical-filter.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/facets/components/filters/hierarchical-filter.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/facets/components/filters/number-range-filter.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/facets/components/filters/number-range-filter.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/facets/components/filters/renderless-filter.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/facets/components/filters/renderless-filter.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/facets/components/filters/simple-filter.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/facets/components/filters/simple-filter.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/facets/components/lists/exclude-filters-with-no-results.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/facets/components/lists/exclude-filters-with-no-results.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/facets/components/lists/filters-list.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/facets/components/lists/filters-list.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/facets/components/lists/filters-search.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/facets/components/lists/filters-search.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/facets/components/lists/selected-filters.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/facets/components/lists/selected-filters.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/facets/components/lists/sliced-filters.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/facets/components/lists/sliced-filters.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/facets/components/lists/sorted-filters.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/facets/components/lists/sorted-filters.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/scroll/components/main-scroll-item.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/scroll/components/main-scroll-item.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/scroll/components/scroll-to-top.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/scroll/components/scroll-to-top.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/scroll/components/window-scroll.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/scroll/components/window-scroll.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/search/components/sort-list.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/search/components/sort-list.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/search/components/sort.mixin.js +1 -0
- package/js/x-modules/search/components/sort.mixin.js.map +1 -1
- package/js/x-modules/search/components/spellcheck.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/search/components/spellcheck.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/url/components/url-handler.vue_rollup-plugin-vue_script.vue.js +1 -0
- package/js/x-modules/url/components/url-handler.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/package.json +2 -2
- package/report/x-components.api.json +57 -1
- package/report/x-components.api.md +10 -1
- package/types/components/base-switch.vue.d.ts +32 -0
- package/types/components/base-switch.vue.d.ts.map +1 -0
- package/types/components/index.d.ts +1 -0
- package/types/components/index.d.ts.map +1 -1
- package/types/types/origin.d.ts +1 -1
- package/types/types/origin.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,28 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See
|
|
4
4
|
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.0-alpha.124](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.123...@empathyco/x-components@3.0.0-alpha.124) (2022-07-06)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- add 'my_history' as feature location (#587)
|
|
11
|
+
([7b0263e](https://github.com/empathyco/x/commit/7b0263e23c9afb2af61174ac53bdedd3eb4263ba)),
|
|
12
|
+
closes [EX-6527](https://searchbroker.atlassian.net/browse/EX-6527)
|
|
13
|
+
- **components:** add `BaseSwitch` component (#586)
|
|
14
|
+
([31cde2d](https://github.com/empathyco/x/commit/31cde2dfb79dcc549c8662b558ef5b80529f2d01)),
|
|
15
|
+
closes [EX-6004](https://searchbroker.atlassian.net/browse/EX-6004)
|
|
16
|
+
|
|
17
|
+
### Testing
|
|
18
|
+
|
|
19
|
+
- fix exclude-filters e2e test (#588)
|
|
20
|
+
([51ecc52](https://github.com/empathyco/x/commit/51ecc5234b665a2320a760d485bf6da74648f902)),
|
|
21
|
+
closes [EX-6590](https://searchbroker.atlassian.net/browse/EX-6590)
|
|
22
|
+
|
|
23
|
+
# Change Log
|
|
24
|
+
|
|
25
|
+
All notable changes to this project will be documented in this file. See
|
|
26
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
27
|
+
|
|
6
28
|
## [3.0.0-alpha.123](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.122...@empathyco/x-components@3.0.0-alpha.123) (2022-07-04)
|
|
7
29
|
|
|
8
30
|
**Note:** Version bump only for package @empathyco/x-components
|
package/core/index.js
CHANGED
|
@@ -103,6 +103,7 @@ export { default as BaseEventButton } from '../js/components/base-event-button.v
|
|
|
103
103
|
export { default as BaseGrid } from '../js/components/base-grid.vue.js';
|
|
104
104
|
export { default as BaseKeyboardNavigation } from '../js/components/base-keyboard-navigation.vue.js';
|
|
105
105
|
export { default as BaseRating } from '../js/components/base-rating.vue.js';
|
|
106
|
+
export { default as BaseSwitch } from '../js/components/base-switch.vue.js';
|
|
106
107
|
export { default as BaseVariableColumnGrid } from '../js/components/base-variable-column-grid.vue.js';
|
|
107
108
|
export { default as GlobalXBus } from '../js/components/global-x-bus.vue.js';
|
|
108
109
|
export { default as ItemsList } from '../js/components/items-list.vue.js';
|
package/core/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -898,20 +898,6 @@
|
|
|
898
898
|
--x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
|
|
899
899
|
--x-size-border-width-left-facet-header-line: 0;
|
|
900
900
|
}
|
|
901
|
-
.x-facet--outlined.x-facet,
|
|
902
|
-
.x-facet--outlined .x-facet {
|
|
903
|
-
--x-color-border-facet-default: var(--x-color-border-facet-outlined);
|
|
904
|
-
--x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
|
|
905
|
-
--x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
|
|
906
|
-
--x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
|
|
907
|
-
--x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
|
|
908
|
-
--x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
|
|
909
|
-
--x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
|
|
910
|
-
--x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
|
|
911
|
-
--x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
|
|
912
|
-
--x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
|
|
913
|
-
--x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
|
|
914
|
-
}
|
|
915
901
|
:root {
|
|
916
902
|
--x-color-border-facet-outlined: var(--x-color-base-neutral-70);
|
|
917
903
|
--x-size-border-width-facet-outlined: var(--x-size-border-width-base);
|
|
@@ -1140,6 +1126,10 @@
|
|
|
1140
1126
|
--x-size-width-icon-s: var(--x-size-base-03);
|
|
1141
1127
|
--x-size-height-icon-s: var(--x-size-base-03);
|
|
1142
1128
|
}
|
|
1129
|
+
.x-icon--xl {
|
|
1130
|
+
--x-size-width-icon-default: var(--x-size-width-icon-xl);
|
|
1131
|
+
--x-size-height-icon-default: var(--x-size-height-icon-xl);
|
|
1132
|
+
}
|
|
1143
1133
|
:root {
|
|
1144
1134
|
--x-size-width-icon-xl: var(--x-size-base-07);
|
|
1145
1135
|
--x-size-height-icon-xl: var(--x-size-base-07);
|
|
@@ -7610,7 +7600,17 @@
|
|
|
7610
7600
|
text-transform: none;
|
|
7611
7601
|
}
|
|
7612
7602
|
|
|
7613
|
-
.x-
|
|
7614
|
-
|
|
7615
|
-
--x-
|
|
7603
|
+
.x-facet--outlined.x-facet,
|
|
7604
|
+
.x-facet--outlined .x-facet {
|
|
7605
|
+
--x-color-border-facet-default: var(--x-color-border-facet-outlined);
|
|
7606
|
+
--x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
|
|
7607
|
+
--x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
|
|
7608
|
+
--x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
|
|
7609
|
+
--x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
|
|
7610
|
+
--x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
|
|
7611
|
+
--x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
|
|
7612
|
+
--x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
|
|
7613
|
+
--x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
|
|
7614
|
+
--x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
|
|
7615
|
+
--x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
|
|
7616
7616
|
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseSwitch](./x-components.baseswitch.md)
|
|
4
|
+
|
|
5
|
+
## BaseSwitch class
|
|
6
|
+
|
|
7
|
+
Basic switch component to handle boolean values. This component receives its selected state using a prop, and emits a Vue event whenever the user clicks it.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
export default class BaseSwitch extends Vue
|
|
13
|
+
```
|
|
14
|
+
<b>Extends:</b> Vue
|
|
15
|
+
|
|
16
|
+
## Properties
|
|
17
|
+
|
|
18
|
+
| Property | Modifiers | Type | Description |
|
|
19
|
+
| --- | --- | --- | --- |
|
|
20
|
+
| [value](./x-components.baseswitch.value.md) | | boolean | The selected value of the switch. |
|
|
21
|
+
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseSwitch](./x-components.baseswitch.md) > [value](./x-components.baseswitch.value.md)
|
|
4
|
+
|
|
5
|
+
## BaseSwitch.value property
|
|
6
|
+
|
|
7
|
+
The selected value of the switch.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
value: boolean;
|
|
13
|
+
```
|
|
@@ -9,7 +9,7 @@ Indicates where the feature is placed.
|
|
|
9
9
|
<b>Signature:</b>
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
export declare type FeatureLocation = 'external' | 'no_query' | 'no_results' | 'none' | 'predictive_layer' | 'results' | 'pdp' | 'url_history' | 'url_history_pdp';
|
|
12
|
+
export declare type FeatureLocation = 'external' | 'my_history' | 'no_query' | 'no_results' | 'none' | 'predictive_layer' | 'results' | 'pdp' | 'url_history' | 'url_history_pdp';
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
## Example 1
|
|
@@ -45,6 +45,7 @@ X-Components is a library usable everywhere not only for search experiences.
|
|
|
45
45
|
| [BaseScroll](./x-components.basescroll.md) | Base scroll component that depending on the user interactivity emits different events for knowing when the user scrolls, the direction of scroll and if user reaches the start or end. |
|
|
46
46
|
| [BaseSuggestion](./x-components.basesuggestion.md) | Renders a button with a default slot. It receives a query, which should be the query of the module using this component, a suggestion, the [XEvents](./x-components.xevent.md) that will be emitted on click with a given feature.<!-- -->The default slot receives the suggestion and the matched query has props. |
|
|
47
47
|
| [BaseSuggestions](./x-components.basesuggestions.md) | Paints a list of suggestions passed in by prop. Requires a component for a single suggestion in the default slot for working. |
|
|
48
|
+
| [BaseSwitch](./x-components.baseswitch.md) | Basic switch component to handle boolean values. This component receives its selected state using a prop, and emits a Vue event whenever the user clicks it. |
|
|
48
49
|
| [BaseTogglePanel](./x-components.basetogglepanel.md) | Simple panel that receives its open state via prop, which is responsible of rendering default slot inside a configurable transition. |
|
|
49
50
|
| [BaseVariableColumnGrid](./x-components.basevariablecolumngrid.md) | The <code>BaseVariableColumnGrid</code> component is a wrapper of the <code>BaseGrid</code> component that listens to the <code>UserClickedColumnPicker</code> and the <code>ColumnsNumberProvided</code> events and passes the selected number of columns to the grid. It also allows to customize the grid items using the available <code>scopedSlots</code>. |
|
|
50
51
|
| [BaseXAPI](./x-components.basexapi.md) | Default implementation for [XAPI](./x-components.xapi.md)<!-- -->. |
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
---
|
|
2
|
+
|
|
3
|
+
title: BaseSwitch
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# BaseSwitch
|
|
8
|
+
|
|
9
|
+
Basic switch component to handle boolean values. This component receives
|
|
10
|
+
its selected state using a prop, and emits a Vue event whenever the user
|
|
11
|
+
clicks it.
|
|
12
|
+
|
|
13
|
+
## Props
|
|
14
|
+
|
|
15
|
+
| Name | Description | Type | Default |
|
|
16
|
+
| ------------------ | --------------------------------- | -------------------- | ------------- |
|
|
17
|
+
| <code>value</code> | The selected value of the switch. | <code>boolean</code> | <code></code> |
|
|
18
|
+
|
|
19
|
+
## Events
|
|
20
|
+
|
|
21
|
+
| Event name | Type | Description |
|
|
22
|
+
| ---------- | --------- | ----------- |
|
|
23
|
+
| change | undefined |
|
|
24
|
+
|
|
25
|
+
## Events
|
|
26
|
+
|
|
27
|
+
This component emits no events.
|
|
28
|
+
|
|
29
|
+
## See it in action
|
|
30
|
+
|
|
31
|
+
Here you have a basic example of how the switch is rendered.
|
|
32
|
+
|
|
33
|
+
_Try clicking it to see how it changes its state_
|
|
34
|
+
|
|
35
|
+
```vue live
|
|
36
|
+
<template>
|
|
37
|
+
<BaseSwitch @change="value = !value" :value="value" />
|
|
38
|
+
</template>
|
|
39
|
+
|
|
40
|
+
<script>
|
|
41
|
+
import { BaseSwitch } from "@empathyco/x-components";
|
|
42
|
+
|
|
43
|
+
export default {
|
|
44
|
+
name: "BaseSwitchDemo",
|
|
45
|
+
components: {
|
|
46
|
+
BaseSwitch
|
|
47
|
+
},
|
|
48
|
+
data() {
|
|
49
|
+
return {
|
|
50
|
+
value: false
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
</script>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
The switch component also supports using the `v-model` directive, to automatically handle its state
|
|
58
|
+
change:
|
|
59
|
+
|
|
60
|
+
```vue live
|
|
61
|
+
<template>
|
|
62
|
+
<BaseSwitch v-model="value" />
|
|
63
|
+
</template>
|
|
64
|
+
|
|
65
|
+
<script>
|
|
66
|
+
import { BaseSwitch } from "@empathyco/x-components";
|
|
67
|
+
|
|
68
|
+
export default {
|
|
69
|
+
name: "BaseSwitchDemo",
|
|
70
|
+
components: {
|
|
71
|
+
BaseSwitch
|
|
72
|
+
},
|
|
73
|
+
data() {
|
|
74
|
+
return {
|
|
75
|
+
value: false
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
</script>
|
|
80
|
+
```
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import script from './base-switch.vue_rollup-plugin-vue_script.vue.js';
|
|
2
|
+
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
|
|
3
|
+
import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
|
|
4
|
+
|
|
5
|
+
/* script */
|
|
6
|
+
const __vue_script__ = script;
|
|
7
|
+
|
|
8
|
+
/* template */
|
|
9
|
+
var __vue_render__ = function () {
|
|
10
|
+
var _vm = this;
|
|
11
|
+
var _h = _vm.$createElement;
|
|
12
|
+
var _c = _vm._self._c || _h;
|
|
13
|
+
return _c(
|
|
14
|
+
"button",
|
|
15
|
+
{
|
|
16
|
+
staticClass: "x-switch",
|
|
17
|
+
class: _vm.cssClasses,
|
|
18
|
+
attrs: { "aria-checked": _vm.value.toString(), role: "switch" },
|
|
19
|
+
on: { click: _vm.toggle },
|
|
20
|
+
},
|
|
21
|
+
[_c("div", { staticClass: "x-switch__handle" })]
|
|
22
|
+
)
|
|
23
|
+
};
|
|
24
|
+
var __vue_staticRenderFns__ = [];
|
|
25
|
+
__vue_render__._withStripped = true;
|
|
26
|
+
|
|
27
|
+
/* style */
|
|
28
|
+
const __vue_inject_styles__ = function (inject) {
|
|
29
|
+
if (!inject) return
|
|
30
|
+
inject("data-v-25cc8ef8_0", { source: ".x-switch[data-v-25cc8ef8] {\n --x-switch-height: var(--x-size-base-05);\n --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n --x-switch-background: var(--x-color-base-neutral-70);\n --x-switch-padding: var(--x-size-base-01);\n --x-switch-handle-size: calc(var(--x-switch-height));\n box-sizing: content-box;\n height: var(--x-switch-height);\n padding: var(--x-switch-padding);\n border-radius: var(--x-size-border-radius-base-pill);\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.x-switch__handle[data-v-25cc8ef8] {\n background: var(--x-color-base-neutral-100);\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.x-switch--is-selected[data-v-25cc8ef8] {\n --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n --x-switch-background: var(--x-color-base-neutral-10);\n}\n.x-switch--sm[data-v-25cc8ef8] {\n --x-switch-height: var(--x-size-base-04);\n}\n.x-switch--lg[data-v-25cc8ef8] {\n --x-switch-height: var(--x-size-base-06);\n}", map: undefined, media: undefined });
|
|
31
|
+
|
|
32
|
+
};
|
|
33
|
+
/* scoped */
|
|
34
|
+
const __vue_scope_id__ = "data-v-25cc8ef8";
|
|
35
|
+
/* module identifier */
|
|
36
|
+
const __vue_module_identifier__ = undefined;
|
|
37
|
+
/* functional template */
|
|
38
|
+
const __vue_is_functional_template__ = false;
|
|
39
|
+
/* style inject SSR */
|
|
40
|
+
|
|
41
|
+
/* style inject shadow dom */
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
const __vue_component__ = /*#__PURE__*/__vue_normalize__(
|
|
46
|
+
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
|
47
|
+
__vue_inject_styles__,
|
|
48
|
+
__vue_script__,
|
|
49
|
+
__vue_scope_id__,
|
|
50
|
+
__vue_is_functional_template__,
|
|
51
|
+
__vue_module_identifier__,
|
|
52
|
+
false,
|
|
53
|
+
__vue_create_injector__,
|
|
54
|
+
undefined,
|
|
55
|
+
undefined
|
|
56
|
+
);
|
|
57
|
+
|
|
58
|
+
export { __vue_component__ as default };
|
|
59
|
+
//# sourceMappingURL=base-switch.vue.js.map
|
|
@@ -0,0 +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=\"value.toString()\"\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 Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\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 @Component({\n model: {\n event: 'change'\n }\n })\n export default class BaseSwitch extends Vue {\n /**\n * The selected value of the switch.\n *\n * @public\n */\n @Prop({ required: true })\n public value!: boolean;\n\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 protected get cssClasses(): VueCSSClasses {\n return {\n 'x-switch--is-selected': this.value\n };\n }\n\n /**\n * Emits a change event with the desired value of the switch.\n *\n * @internal\n */\n protected toggle(): void {\n this.$emit('change', !this.value);\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-switch {\n --x-switch-height: var(--x-size-base-05);\n --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n --x-switch-background: var(--x-color-base-neutral-70);\n --x-switch-padding: var(--x-size-base-01);\n --x-switch-handle-size: calc(var(--x-switch-height));\n box-sizing: content-box;\n height: var(--x-switch-height);\n padding: var(--x-switch-padding);\n border-radius: var(--x-size-border-radius-base-pill);\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 &__handle {\n background: var(--x-color-base-neutral-100);\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 &--is-selected {\n --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n --x-switch-background: var(--x-color-base-neutral-10);\n }\n\n &--sm {\n --x-switch-height: var(--x-size-base-04);\n }\n\n &--lg {\n --x-switch-height: var(--x-size-base-06);\n }\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 @change=\"value = !value\" :value=\"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":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { __decorate } from 'tslib';
|
|
2
|
+
import Vue from 'vue';
|
|
3
|
+
import { Prop, Component } from 'vue-property-decorator';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Basic switch component to handle boolean values. This component receives
|
|
7
|
+
* its selected state using a prop, and emits a Vue event whenever the user
|
|
8
|
+
* clicks it.
|
|
9
|
+
*
|
|
10
|
+
* @public
|
|
11
|
+
*/
|
|
12
|
+
let BaseSwitch = class BaseSwitch extends Vue {
|
|
13
|
+
/**
|
|
14
|
+
* Dynamic CSS classes to add to the switch component
|
|
15
|
+
* depending on its internal state.
|
|
16
|
+
*
|
|
17
|
+
* @returns A boolean dictionary with dynamic CSS classes.
|
|
18
|
+
* @internal
|
|
19
|
+
*/
|
|
20
|
+
get cssClasses() {
|
|
21
|
+
return {
|
|
22
|
+
'x-switch--is-selected': this.value
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Emits a change event with the desired value of the switch.
|
|
27
|
+
*
|
|
28
|
+
* @internal
|
|
29
|
+
*/
|
|
30
|
+
toggle() {
|
|
31
|
+
this.$emit('change', !this.value);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
__decorate([
|
|
35
|
+
Prop({ required: true })
|
|
36
|
+
], BaseSwitch.prototype, "value", void 0);
|
|
37
|
+
BaseSwitch = __decorate([
|
|
38
|
+
Component({
|
|
39
|
+
model: {
|
|
40
|
+
event: 'change'
|
|
41
|
+
}
|
|
42
|
+
})
|
|
43
|
+
], BaseSwitch);
|
|
44
|
+
var script = BaseSwitch;
|
|
45
|
+
|
|
46
|
+
export { script as default };
|
|
47
|
+
//# sourceMappingURL=base-switch.vue_rollup-plugin-vue_script.vue.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base-switch.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/base-switch.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { 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@Component({\n model: {\n event: 'change'\n }\n})\nexport default class BaseSwitch extends Vue {\n /**\n * The selected value of the switch.\n *\n * @public\n */\n @Prop({ required: true })\n public value!: boolean;\n\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 protected get cssClasses(): VueCSSClasses {\n return {\n 'x-switch--is-selected': this.value\n };\n }\n\n /**\n * Emits a change event with the desired value of the switch.\n *\n * @internal\n */\n protected toggle(): void {\n this.$emit('change', !this.value);\n }\n}\n"],"names":[],"mappings":";;;;AAiBA;;;;;;;AAYA,IAAqB,UAAU,GAA/B,MAAqB,UAAW,SAAQ,GAAG;;;;;;;;IAgBzC,IAAc,UAAU;QACtB,OAAO;YACL,uBAAuB,EAAE,IAAI,CAAC,KAAK;SACpC,CAAC;KACH;;;;;;IAOS,MAAM;QACd,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC;CACF,CAAA;AAvBC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;yCACF;AAPJ,UAAU;IAL9B,SAAS,CAAC;QACT,KAAK,EAAE;YACL,KAAK,EAAE,QAAQ;SAChB;KACF,CAAC;GACmB,UAAU,CA8B9B;aA9BoB,UAAU;;;;"}
|
package/js/index.js
CHANGED
|
@@ -103,6 +103,7 @@ export { default as BaseEventButton } from './components/base-event-button.vue.j
|
|
|
103
103
|
export { default as BaseGrid } from './components/base-grid.vue.js';
|
|
104
104
|
export { default as BaseKeyboardNavigation } from './components/base-keyboard-navigation.vue.js';
|
|
105
105
|
export { default as BaseRating } from './components/base-rating.vue.js';
|
|
106
|
+
export { default as BaseSwitch } from './components/base-switch.vue.js';
|
|
106
107
|
export { default as BaseVariableColumnGrid } from './components/base-variable-column-grid.vue.js';
|
|
107
108
|
export { default as GlobalXBus } from './components/global-x-bus.vue.js';
|
|
108
109
|
export { default as ItemsList } from './components/items-list.vue.js';
|
package/js/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/js/x-modules/extra-params/components/extra-params.vue_rollup-plugin-vue_script.vue.js
CHANGED
|
@@ -106,6 +106,7 @@ import '../../../components/base-event-button.vue.js';
|
|
|
106
106
|
import '../../../components/base-grid.vue.js';
|
|
107
107
|
import '../../../components/base-keyboard-navigation.vue.js';
|
|
108
108
|
import '../../../components/base-rating.vue.js';
|
|
109
|
+
import '../../../components/base-switch.vue.js';
|
|
109
110
|
import '../../../components/base-variable-column-grid.vue.js';
|
|
110
111
|
import '../../../components/global-x-bus.vue_rollup-plugin-vue_script.vue.js';
|
|
111
112
|
import '../../../components/items-list.vue.js';
|
package/js/x-modules/extra-params/components/extra-params.vue_rollup-plugin-vue_script.vue.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"extra-params.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { Dictionary } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State, xComponentMixin, XEmit } from '../../../components';\nimport { extraParamsXModule } from '../x-module';\n\n/**\n * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n * received as a prop.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(extraParamsXModule)]\n})\nexport default class ExtraParams extends Vue {\n /**\n * Emits the initial extra params, overriding with the state extra params, just in case, those\n * values were already set by XComponents initialization (url, plugin config, etc.).\n */\n mounted(): void {\n this.$x.emit('ExtraParamsInitialized', { ...this.values });\n this.$x.emit('ExtraParamsProvided', { ...this.values, ...this.storeExtraParams });\n }\n\n /**\n * (Required) A Dictionary where the keys are the extra param names and its values.\n *\n * @remarks Emits the {@link ExtraParamsXEvents.ExtraParamsProvided} when the\n * component is rendered or the values changed.\n *\n * @public\n */\n @XEmit('ExtraParamsProvided', { deep: true })\n @Prop({ required: true })\n public values!: Dictionary<unknown>;\n\n /**\n * State extra params. Used to override the initial extra params.\n */\n @State('extraParams', 'params')\n public storeExtraParams!: Dictionary<unknown>;\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n render(): void {}\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"extra-params.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { Dictionary } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State, xComponentMixin, XEmit } from '../../../components';\nimport { extraParamsXModule } from '../x-module';\n\n/**\n * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n * received as a prop.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(extraParamsXModule)]\n})\nexport default class ExtraParams extends Vue {\n /**\n * Emits the initial extra params, overriding with the state extra params, just in case, those\n * values were already set by XComponents initialization (url, plugin config, etc.).\n */\n mounted(): void {\n this.$x.emit('ExtraParamsInitialized', { ...this.values });\n this.$x.emit('ExtraParamsProvided', { ...this.values, ...this.storeExtraParams });\n }\n\n /**\n * (Required) A Dictionary where the keys are the extra param names and its values.\n *\n * @remarks Emits the {@link ExtraParamsXEvents.ExtraParamsProvided} when the\n * component is rendered or the values changed.\n *\n * @public\n */\n @XEmit('ExtraParamsProvided', { deep: true })\n @Prop({ required: true })\n public values!: Dictionary<unknown>;\n\n /**\n * State extra params. Used to override the initial extra params.\n */\n @State('extraParams', 'params')\n public storeExtraParams!: Dictionary<unknown>;\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n render(): void {}\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;AASA,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,GAAG;;;;;IAK1C,OAAO;QACL,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC3D,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;KACnF;;IAqBD,MAAM,MAAW;CAClB,CAAA;AAVC;IAFC,KAAK,CAAC,qBAAqB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC5C,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;2CACW;AAMpC;IADC,KAAK,CAAC,aAAa,EAAE,QAAQ,CAAC;qDACe;AA1B3B,WAAW;IAH/B,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,WAAW,CA8B/B;aA9BoB,WAAW;;;;"}
|
|
@@ -106,6 +106,7 @@ import '../../../components/base-event-button.vue.js';
|
|
|
106
106
|
import '../../../components/base-grid.vue.js';
|
|
107
107
|
import '../../../components/base-keyboard-navigation.vue.js';
|
|
108
108
|
import '../../../components/base-rating.vue.js';
|
|
109
|
+
import '../../../components/base-switch.vue.js';
|
|
109
110
|
import '../../../components/base-variable-column-grid.vue.js';
|
|
110
111
|
import '../../../components/global-x-bus.vue_rollup-plugin-vue_script.vue.js';
|
|
111
112
|
import '../../../components/items-list.vue.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderless-extra-param.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/extra-params/components/renderless-extra-param.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\nimport { Dictionary } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement, State, xComponentMixin } from '../../../components';\nimport { extraParamsXModule } from '../x-module';\n\n/**\n * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`\n * is called.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(extraParamsXModule)],\n components: {\n NoElement\n }\n})\nexport default class RenderlessExtraParam extends Vue {\n /**\n * The extra param's name.\n *\n * @public\n */\n @Prop({ required: true })\n public name!: string;\n\n /**\n * A dictionary with the extra params in the store state.\n *\n * @public\n */\n @State('extraParams', 'params')\n public stateParams!: Dictionary<unknown>;\n\n /**\n * It returns the value of the extra param from the store.\n *\n * @returns - The value from the store.\n *\n * @internal\n */\n protected get value(): unknown {\n return this.stateParams[this.name];\n }\n\n /**\n * It sets the new value to the store.\n *\n * @param newValue - The new value of the extra param.\n *\n * @internal\n */\n protected updateValue(newValue: unknown): void {\n this.$x.emit('UserChangedExtraParams', { [this.name]: newValue });\n }\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"renderless-extra-param.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/extra-params/components/renderless-extra-param.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\nimport { Dictionary } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement, State, xComponentMixin } from '../../../components';\nimport { extraParamsXModule } from '../x-module';\n\n/**\n * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`\n * is called.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(extraParamsXModule)],\n components: {\n NoElement\n }\n})\nexport default class RenderlessExtraParam extends Vue {\n /**\n * The extra param's name.\n *\n * @public\n */\n @Prop({ required: true })\n public name!: string;\n\n /**\n * A dictionary with the extra params in the store state.\n *\n * @public\n */\n @State('extraParams', 'params')\n public stateParams!: Dictionary<unknown>;\n\n /**\n * It returns the value of the extra param from the store.\n *\n * @returns - The value from the store.\n *\n * @internal\n */\n protected get value(): unknown {\n return this.stateParams[this.name];\n }\n\n /**\n * It sets the new value to the store.\n *\n * @param newValue - The new value of the extra param.\n *\n * @internal\n */\n protected updateValue(newValue: unknown): void {\n this.$x.emit('UserChangedExtraParams', { [this.name]: newValue });\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;;AAYA,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,GAAG;;;;;;;;IAwBnD,IAAc,KAAK;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpC;;;;;;;;IASS,WAAW,CAAC,QAAiB;QACrC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,QAAQ,EAAE,CAAC,CAAC;KACnE;CACF,CAAA;AA/BC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACJ;AAQrB;IADC,KAAK,CAAC,aAAa,EAAE,QAAQ,CAAC;yDACU;AAftB,oBAAoB;IANxC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QAC7C,UAAU,EAAE;YACV,SAAS;SACV;KACF,CAAC;GACmB,oBAAoB,CAsCxC;aAtCoB,oBAAoB;;;;"}
|
|
@@ -106,6 +106,7 @@ import __vue_component__ from '../../../components/base-event-button.vue.js';
|
|
|
106
106
|
import '../../../components/base-grid.vue.js';
|
|
107
107
|
import '../../../components/base-keyboard-navigation.vue.js';
|
|
108
108
|
import '../../../components/base-rating.vue.js';
|
|
109
|
+
import '../../../components/base-switch.vue.js';
|
|
109
110
|
import '../../../components/base-variable-column-grid.vue.js';
|
|
110
111
|
import '../../../components/global-x-bus.vue_rollup-plugin-vue_script.vue.js';
|
|
111
112
|
import '../../../components/items-list.vue.js';
|
package/js/x-modules/facets/components/clear-filters.vue_rollup-plugin-vue_script.vue.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clear-filters.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/facets/components/clear-filters.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Component from 'vue-class-component';\nimport { xComponentMixin } from '../../../components';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { VueCSSClasses } from '../../../utils';\nimport { XEventsTypes } from '../../../wiring';\nimport { facetsXModule } from '../x-module';\nimport FacetsMixin from './facets.mixin';\n\n/**\n * Renders a simple button, emitting the needed events when clicked.\n *\n * @remarks It extends {@link FacetsMixin}.\n *\n * @public\n */\n@Component({\n components: { BaseEventButton },\n mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class ClearFilters extends FacetsMixin {\n /**\n * The events that will be emitted when the button clear filters is clicked.\n *\n * @returns The events to be emitted when the button clear filters is clicked.\n * @internal\n */\n protected get events(): Partial<XEventsTypes> {\n return this.facetsIds\n ? {\n UserClickedClearAllFilters: this.facetsIds\n }\n : {\n UserClickedClearAllFilters: undefined\n };\n }\n\n /**\n * Dynamic CSS classes to apply to the component.\n *\n * @returns The dynamic CSS classes to apply to the component.\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return {\n 'x-clear-filters--has-not-selected-filters': !this.hasSelectedFilters,\n 'x-clear-filters--has-selected-filters': this.hasSelectedFilters\n };\n }\n}\n"],"names":["BaseEventButton"],"mappings":"
|
|
1
|
+
{"version":3,"file":"clear-filters.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/facets/components/clear-filters.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Component from 'vue-class-component';\nimport { xComponentMixin } from '../../../components';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { VueCSSClasses } from '../../../utils';\nimport { XEventsTypes } from '../../../wiring';\nimport { facetsXModule } from '../x-module';\nimport FacetsMixin from './facets.mixin';\n\n/**\n * Renders a simple button, emitting the needed events when clicked.\n *\n * @remarks It extends {@link FacetsMixin}.\n *\n * @public\n */\n@Component({\n components: { BaseEventButton },\n mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class ClearFilters extends FacetsMixin {\n /**\n * The events that will be emitted when the button clear filters is clicked.\n *\n * @returns The events to be emitted when the button clear filters is clicked.\n * @internal\n */\n protected get events(): Partial<XEventsTypes> {\n return this.facetsIds\n ? {\n UserClickedClearAllFilters: this.facetsIds\n }\n : {\n UserClickedClearAllFilters: undefined\n };\n }\n\n /**\n * Dynamic CSS classes to apply to the component.\n *\n * @returns The dynamic CSS classes to apply to the component.\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return {\n 'x-clear-filters--has-not-selected-filters': !this.hasSelectedFilters,\n 'x-clear-filters--has-selected-filters': this.hasSelectedFilters\n };\n }\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA;;;;;;;AAWA,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,WAAW;;;;;;;IAOnD,IAAc,MAAM;QAClB,OAAO,IAAI,CAAC,SAAS;cACjB;gBACE,0BAA0B,EAAE,IAAI,CAAC,SAAS;aAC3C;cACD;gBACE,0BAA0B,EAAE,SAAS;aACtC,CAAC;KACP;;;;;;;IAQD,IAAc,UAAU;QACtB,OAAO;YACL,2CAA2C,EAAE,CAAC,IAAI,CAAC,kBAAkB;YACrE,uCAAuC,EAAE,IAAI,CAAC,kBAAkB;SACjE,CAAC;KACH;CACF,CAAA;AA7BoB,YAAY;IAJhC,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;QAC/B,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,YAAY,CA6BhC;aA7BoB,YAAY;;;;"}
|
package/js/x-modules/facets/components/facets/facets-provider.vue_rollup-plugin-vue_script.vue.js
CHANGED
|
@@ -106,6 +106,7 @@ import '../../../../components/base-event-button.vue.js';
|
|
|
106
106
|
import '../../../../components/base-grid.vue.js';
|
|
107
107
|
import '../../../../components/base-keyboard-navigation.vue.js';
|
|
108
108
|
import '../../../../components/base-rating.vue.js';
|
|
109
|
+
import '../../../../components/base-switch.vue.js';
|
|
109
110
|
import '../../../../components/base-variable-column-grid.vue.js';
|
|
110
111
|
import '../../../../components/global-x-bus.vue_rollup-plugin-vue_script.vue.js';
|
|
111
112
|
import '../../../../components/items-list.vue.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"facets-provider.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/facets/facets-provider.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { Facet, Filter } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop, Watch } from 'vue-property-decorator';\nimport { XOn } from '../../../../components';\nimport { xComponentMixin } from '../../../../components/x-component.mixin';\nimport { areFiltersDifferent } from '../../../../utils/filters';\nimport { FacetsGroup } from '../../service/types';\nimport { GroupId } from '../../store/types';\nimport { facetsXModule } from '../../x-module';\n\n/**\n * This component allows to provide facets by prop, to add them to the state of the\n * `Facets X-Module`. These facets will be added to the `Facets X-Module` state together with\n * the facets emitted by the `Search X-Module` through the {@link SearchXEvents.FacetsChanged}\n * event.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class FacetsProvider extends Vue {\n /**\n * An facet group identifier to distinguish the provided facets from other facets like the\n * `Search X-Module` facets.\n *\n * @public\n */\n @Prop({ default: 'provided-facets' })\n public groupId!: GroupId;\n\n /**\n * The facets to provide to the `Facets X-Module` state. They have to include the\n * {@link @empathyco/x-types#Filter | filters}.\n *\n * @internal\n */\n @Prop({ required: true })\n public facets!: Facet[];\n\n /**\n * Temporarily stores the selected filters from the {@link FacetsProvider.facets} prop.\n * This is necessary to handle the {@link FacetsXEvents.UserChangedSelectedFilters} event.\n *\n * @internal\n */\n protected selectedFilters: Filter[] | null = null;\n\n /**\n * A computed property to group the facets and the groupId. This is used by the watcher.\n *\n * @returns The FacetGroup with the facets and the group id.\n *\n * @internal\n */\n protected get facetsGroup(): FacetsGroup {\n return { id: this.groupId, facets: this.facets };\n }\n\n /**\n * Emits the {@link FacetsXEvents.UserChangedSelectedFilters} event when the user changes\n * the selected filters.\n *\n * @param selectedFilters - The new list of selected filters.\n * @internal\n */\n @XOn('SelectedFiltersChanged')\n emitSelectedFiltersChanged(selectedFilters: Filter[]): void {\n if (\n this.selectedFilters === null ||\n areFiltersDifferent(this.selectedFilters, selectedFilters)\n ) {\n this.$x.emit('UserChangedSelectedFilters', selectedFilters);\n }\n this.selectedFilters = null;\n }\n\n /**\n * Emits the {@link FacetsXEvents.FacetsGroupProvided} event with the\n * {@link FacetsProvider.facetsGroup} as payload. It also extracts and saves the selected\n * filters.\n */\n @Watch('facetsGroup', { immediate: true })\n provideFacets(): void {\n if (this.facetsGroup.facets) {\n this.$x.emit('FacetsGroupProvided', this.facetsGroup);\n this.extractSelectedFilters(this.facets);\n }\n }\n\n /**\n * Extracts the selected filters from the facets and stores them in the\n * {@link FacetsProvider.selectedFilters} property.\n *\n * @param facets - The facets from whom extract the selected filters.\n * @internal\n */\n protected extractSelectedFilters(facets: Facet[]): void {\n this.selectedFilters = facets\n .flatMap(facet => facet.filters)\n .filter(filter => filter.selected);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n render(): void {}\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"facets-provider.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/facets/facets-provider.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { Facet, Filter } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop, Watch } from 'vue-property-decorator';\nimport { XOn } from '../../../../components';\nimport { xComponentMixin } from '../../../../components/x-component.mixin';\nimport { areFiltersDifferent } from '../../../../utils/filters';\nimport { FacetsGroup } from '../../service/types';\nimport { GroupId } from '../../store/types';\nimport { facetsXModule } from '../../x-module';\n\n/**\n * This component allows to provide facets by prop, to add them to the state of the\n * `Facets X-Module`. These facets will be added to the `Facets X-Module` state together with\n * the facets emitted by the `Search X-Module` through the {@link SearchXEvents.FacetsChanged}\n * event.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class FacetsProvider extends Vue {\n /**\n * An facet group identifier to distinguish the provided facets from other facets like the\n * `Search X-Module` facets.\n *\n * @public\n */\n @Prop({ default: 'provided-facets' })\n public groupId!: GroupId;\n\n /**\n * The facets to provide to the `Facets X-Module` state. They have to include the\n * {@link @empathyco/x-types#Filter | filters}.\n *\n * @internal\n */\n @Prop({ required: true })\n public facets!: Facet[];\n\n /**\n * Temporarily stores the selected filters from the {@link FacetsProvider.facets} prop.\n * This is necessary to handle the {@link FacetsXEvents.UserChangedSelectedFilters} event.\n *\n * @internal\n */\n protected selectedFilters: Filter[] | null = null;\n\n /**\n * A computed property to group the facets and the groupId. This is used by the watcher.\n *\n * @returns The FacetGroup with the facets and the group id.\n *\n * @internal\n */\n protected get facetsGroup(): FacetsGroup {\n return { id: this.groupId, facets: this.facets };\n }\n\n /**\n * Emits the {@link FacetsXEvents.UserChangedSelectedFilters} event when the user changes\n * the selected filters.\n *\n * @param selectedFilters - The new list of selected filters.\n * @internal\n */\n @XOn('SelectedFiltersChanged')\n emitSelectedFiltersChanged(selectedFilters: Filter[]): void {\n if (\n this.selectedFilters === null ||\n areFiltersDifferent(this.selectedFilters, selectedFilters)\n ) {\n this.$x.emit('UserChangedSelectedFilters', selectedFilters);\n }\n this.selectedFilters = null;\n }\n\n /**\n * Emits the {@link FacetsXEvents.FacetsGroupProvided} event with the\n * {@link FacetsProvider.facetsGroup} as payload. It also extracts and saves the selected\n * filters.\n */\n @Watch('facetsGroup', { immediate: true })\n provideFacets(): void {\n if (this.facetsGroup.facets) {\n this.$x.emit('FacetsGroupProvided', this.facetsGroup);\n this.extractSelectedFilters(this.facets);\n }\n }\n\n /**\n * Extracts the selected filters from the facets and stores them in the\n * {@link FacetsProvider.selectedFilters} property.\n *\n * @param facets - The facets from whom extract the selected filters.\n * @internal\n */\n protected extractSelectedFilters(facets: Facet[]): void {\n this.selectedFilters = facets\n .flatMap(facet => facet.filters)\n .filter(filter => filter.selected);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n render(): void {}\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA;;;;;;;;AAWA,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,GAAG;IAA/C;;;;;;;;QAyBY,oBAAe,GAAoB,IAAI,CAAC;KA2DnD;;;;;;;;IAlDC,IAAc,WAAW;QACvB,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;KAClD;;;;;;;;IAUD,0BAA0B,CAAC,eAAyB;QAClD,IACE,IAAI,CAAC,eAAe,KAAK,IAAI;YAC7B,mBAAmB,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,EAC1D;YACA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,eAAe,CAAC,CAAC;SAC7D;QACD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC7B;;;;;;IAQD,aAAa;QACX,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE;YAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACtD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC1C;KACF;;;;;;;;IASS,sBAAsB,CAAC,MAAe;QAC9C,IAAI,CAAC,eAAe,GAAG,MAAM;aAC1B,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC;aAC/B,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC;KACtC;;IAGD,MAAM,MAAW;CAClB,CAAA;AA5EC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC;+CACZ;AASzB;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;8CACD;AA6BxB;IADC,GAAG,CAAC,wBAAwB,CAAC;gEAS7B;AAQD;IADC,KAAK,CAAC,aAAa,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;mDAMzC;AAnEkB,cAAc;IAHlC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,cAAc,CAoFlC;aApFoB,cAAc;;;;"}
|
package/js/x-modules/facets/components/filters/all-filter.vue_rollup-plugin-vue_script.vue.js
CHANGED
|
@@ -106,6 +106,7 @@ import __vue_component__ from '../../../../components/base-event-button.vue.js';
|
|
|
106
106
|
import '../../../../components/base-grid.vue.js';
|
|
107
107
|
import '../../../../components/base-keyboard-navigation.vue.js';
|
|
108
108
|
import '../../../../components/base-rating.vue.js';
|
|
109
|
+
import '../../../../components/base-switch.vue.js';
|
|
109
110
|
import '../../../../components/base-variable-column-grid.vue.js';
|
|
110
111
|
import '../../../../components/global-x-bus.vue_rollup-plugin-vue_script.vue.js';
|
|
111
112
|
import '../../../../components/items-list.vue.js';
|
package/js/x-modules/facets/components/filters/all-filter.vue_rollup-plugin-vue_script.vue.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"all-filter.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/all-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Facet } from '@empathyco/x-types';\nimport { Getter, xComponentMixin } from '../../../../components';\nimport BaseEventButton from '../../../../components/base-event-button.vue';\nimport { isArrayEmpty } from '../../../../utils/array';\nimport { VueCSSClasses } from '../../../../utils/types';\nimport { XEventsTypes } from '../../../../wiring/events.types';\nimport { FiltersByFacet } from '../../store';\nimport { facetsXModule } from '../../x-module';\n\n/**\n * This component receives a required `facet` with\n * {@link @empathyco/x-types#BooleanFilter | BooleanFilter} as prop and renders a button, which\n * on clicked emits the {@link FacetsXEvents.UserClickedAllFilter} event. By default\n * the rendered button displays a message with the facet label but this content is customizable\n * through the default slot.\n *\n * @public\n */\n@Component({\n components: { BaseEventButton },\n mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class AllFilter extends Vue {\n /** The facet data. */\n @Prop({ required: true })\n public facet!: Facet;\n\n /** The getter of the selectedFiltersByFacet. */\n @Getter('facets', 'selectedFiltersByFacet')\n public selectedFiltersByFacet!: FiltersByFacet;\n\n /**\n * The event that will be emitted when the all filter button is clicked.\n *\n * @returns The event to emit on click.\n * @internal\n */\n protected get clickEvent(): Partial<XEventsTypes> {\n return {\n UserClickedAllFilter: [this.facet.id]\n };\n }\n\n /**\n * Computed to retrieve the selected state of this component.\n *\n * @returns True if is selected false otherwise.\n */\n protected get isSelected(): boolean {\n return isArrayEmpty(this.selectedFiltersByFacet?.[this.facet.id]);\n }\n\n /**\n * Dynamic CSS classes to apply to the component.\n *\n * @remarks This is only valid considering that in the case of HierarchicalFilters, ancestors\n * of nested selected filters are also selected.\n *\n * @returns The dynamic CSS classes to apply to the component.\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return {\n 'x-filter--is-selected': this.isSelected,\n 'x-all-filter--is-selected': this.isSelected\n };\n }\n}\n"],"names":["BaseEventButton"],"mappings":"
|
|
1
|
+
{"version":3,"file":"all-filter.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/all-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Facet } from '@empathyco/x-types';\nimport { Getter, xComponentMixin } from '../../../../components';\nimport BaseEventButton from '../../../../components/base-event-button.vue';\nimport { isArrayEmpty } from '../../../../utils/array';\nimport { VueCSSClasses } from '../../../../utils/types';\nimport { XEventsTypes } from '../../../../wiring/events.types';\nimport { FiltersByFacet } from '../../store';\nimport { facetsXModule } from '../../x-module';\n\n/**\n * This component receives a required `facet` with\n * {@link @empathyco/x-types#BooleanFilter | BooleanFilter} as prop and renders a button, which\n * on clicked emits the {@link FacetsXEvents.UserClickedAllFilter} event. By default\n * the rendered button displays a message with the facet label but this content is customizable\n * through the default slot.\n *\n * @public\n */\n@Component({\n components: { BaseEventButton },\n mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class AllFilter extends Vue {\n /** The facet data. */\n @Prop({ required: true })\n public facet!: Facet;\n\n /** The getter of the selectedFiltersByFacet. */\n @Getter('facets', 'selectedFiltersByFacet')\n public selectedFiltersByFacet!: FiltersByFacet;\n\n /**\n * The event that will be emitted when the all filter button is clicked.\n *\n * @returns The event to emit on click.\n * @internal\n */\n protected get clickEvent(): Partial<XEventsTypes> {\n return {\n UserClickedAllFilter: [this.facet.id]\n };\n }\n\n /**\n * Computed to retrieve the selected state of this component.\n *\n * @returns True if is selected false otherwise.\n */\n protected get isSelected(): boolean {\n return isArrayEmpty(this.selectedFiltersByFacet?.[this.facet.id]);\n }\n\n /**\n * Dynamic CSS classes to apply to the component.\n *\n * @remarks This is only valid considering that in the case of HierarchicalFilters, ancestors\n * of nested selected filters are also selected.\n *\n * @returns The dynamic CSS classes to apply to the component.\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return {\n 'x-filter--is-selected': this.isSelected,\n 'x-all-filter--is-selected': this.isSelected\n };\n }\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;;;;;;;;;AAaA,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,GAAG;;;;;;;IAexC,IAAc,UAAU;QACtB,OAAO;YACL,oBAAoB,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;SACtC,CAAC;KACH;;;;;;IAOD,IAAc,UAAU;QACtB,OAAO,YAAY,CAAC,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;KACnE;;;;;;;;;;IAWD,IAAc,UAAU;QACtB,OAAO;YACL,uBAAuB,EAAE,IAAI,CAAC,UAAU;YACxC,2BAA2B,EAAE,IAAI,CAAC,UAAU;SAC7C,CAAC;KACH;CACF,CAAA;AA1CC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;wCACJ;AAIrB;IADC,MAAM,CAAC,QAAQ,EAAE,wBAAwB,CAAC;yDACI;AAP5B,SAAS;IAJ7B,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;QAC/B,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,SAAS,CA6C7B;aA7CoB,SAAS;;;;"}
|
|
@@ -108,6 +108,7 @@ import '../../../../components/base-event-button.vue.js';
|
|
|
108
108
|
import '../../../../components/base-grid.vue.js';
|
|
109
109
|
import '../../../../components/base-keyboard-navigation.vue.js';
|
|
110
110
|
import '../../../../components/base-rating.vue.js';
|
|
111
|
+
import '../../../../components/base-switch.vue.js';
|
|
111
112
|
import '../../../../components/base-variable-column-grid.vue.js';
|
|
112
113
|
import '../../../../components/global-x-bus.vue_rollup-plugin-vue_script.vue.js';
|
|
113
114
|
import '../../../../components/items-list.vue.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hierarchical-filter.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/hierarchical-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport {\n Filter,\n HierarchicalFilter as HierarchicalFilterModel,\n isHierarchicalFilter\n} from '@empathyco/x-types';\nimport { isObject } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State, xComponentMixin } from '../../../../components';\nimport { VueCSSClasses } from '../../../../utils/types';\nimport { XEventsTypes } from '../../../../wiring/events.types';\nimport { facetsXModule } from '../../x-module';\nimport FiltersList from '../lists/filters-list.vue';\nimport RenderlessFilter from './renderless-filter.vue';\n\n/**\n * Renders a hierarchical filter recursively, emitting the needed events when clicked.\n *\n * @public\n */\n@Component({\n name: 'HierarchicalFilter',\n components: { FiltersList, RenderlessFilter },\n mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class HierarchicalFilter extends Vue {\n /** The filter data to render. */\n @Prop({ required: true })\n public filter!: HierarchicalFilterModel;\n\n /** The animation component to use for the children filters. */\n @Prop()\n public childrenAnimation?: Vue | string;\n /**\n * The state filters.\n *\n * @internal\n */\n @State('facets', 'filters')\n public filters!: Record<Filter['id'], Filter>;\n\n /**\n * Additional events, with their payload, to emit when the filter is clicked.\n *\n * @public\n */\n @Prop()\n public clickEvents!: Partial<XEventsTypes>;\n\n /**\n * The {@link XEventsTypes | events} to emit.\n *\n * @returns The events to emit when clicked.\n * @internal\n */\n protected get _clickEvents(): Partial<XEventsTypes> {\n return {\n UserClickedAHierarchicalFilter: this.filter,\n ...this.clickEvents\n };\n }\n\n /**\n * Dynamic CSS classes to apply to the component.\n *\n * @returns The dynamic CSS classes to apply to the component.\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return {\n 'x-hierarchical-filter--is-partially-selected': this.isPartiallySelected,\n 'x-hierarchical-filter--is-selected': this.filter.selected,\n 'x-filter--is-partially-selected': this.isPartiallySelected\n };\n }\n\n /**\n * Gets the child filter click events, converting the payload of the events that have a\n * {@link @empathyco/x-types#HierarchicalFilter} as payload to the corresponding child filter.\n *\n * @param childFilter - The child filter.\n * @returns The events to emit when clicking a child.\n * @internal\n */\n protected getChildFilterClickEvents(\n childFilter: HierarchicalFilterModel\n ): Partial<XEventsTypes> {\n return Object.entries(this._clickEvents).reduce((clickEvents, [event, payload]) => {\n return {\n ...clickEvents,\n [event]:\n isObject(payload) &&\n isHierarchicalFilter(payload as unknown as Filter) &&\n childFilter !== (payload as unknown as HierarchicalFilterModel)\n ? childFilter\n : payload\n };\n }, {} as Partial<XEventsTypes>);\n }\n\n /**\n * Returns if the filter is partially selected, which means having more than one child filter\n * selected, but not every of them, or having at least one child filter partially selected.\n *\n * @returns True if the filter is partially selected. False otherwise.\n * @internal\n */\n protected get isPartiallySelected(): boolean {\n return this.isFilterPartiallySelected(this.filter);\n }\n\n /**\n * List of filters to render, in case that the children's array\n * is empty it will return an empty array instead of inject the ones from the parent.\n *\n * @returns A list of filters.\n * @internal\n */\n protected get renderedChildrenFilters(): Filter[] {\n return this.filter.children?.map(filterId => this.filters[filterId]) ?? [];\n }\n\n protected isFilterPartiallySelected(filter: HierarchicalFilterModel): boolean {\n const selectedChildren = filter.children\n ?.map(filterId => this.filters[filterId])\n ?.filter(filter => filter?.selected) as HierarchicalFilterModel[] | undefined;\n const filterChildrenLength = filter.children?.length ?? 0;\n return (\n !!selectedChildren &&\n ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) ||\n // eslint-disable-next-line @typescript-eslint/unbound-method\n selectedChildren.some(this.isFilterPartiallySelected))\n );\n }\n}\n"],"names":["FiltersList","RenderlessFilter"],"mappings":"
|
|
1
|
+
{"version":3,"file":"hierarchical-filter.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/hierarchical-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport {\n Filter,\n HierarchicalFilter as HierarchicalFilterModel,\n isHierarchicalFilter\n} from '@empathyco/x-types';\nimport { isObject } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State, xComponentMixin } from '../../../../components';\nimport { VueCSSClasses } from '../../../../utils/types';\nimport { XEventsTypes } from '../../../../wiring/events.types';\nimport { facetsXModule } from '../../x-module';\nimport FiltersList from '../lists/filters-list.vue';\nimport RenderlessFilter from './renderless-filter.vue';\n\n/**\n * Renders a hierarchical filter recursively, emitting the needed events when clicked.\n *\n * @public\n */\n@Component({\n name: 'HierarchicalFilter',\n components: { FiltersList, RenderlessFilter },\n mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class HierarchicalFilter extends Vue {\n /** The filter data to render. */\n @Prop({ required: true })\n public filter!: HierarchicalFilterModel;\n\n /** The animation component to use for the children filters. */\n @Prop()\n public childrenAnimation?: Vue | string;\n /**\n * The state filters.\n *\n * @internal\n */\n @State('facets', 'filters')\n public filters!: Record<Filter['id'], Filter>;\n\n /**\n * Additional events, with their payload, to emit when the filter is clicked.\n *\n * @public\n */\n @Prop()\n public clickEvents!: Partial<XEventsTypes>;\n\n /**\n * The {@link XEventsTypes | events} to emit.\n *\n * @returns The events to emit when clicked.\n * @internal\n */\n protected get _clickEvents(): Partial<XEventsTypes> {\n return {\n UserClickedAHierarchicalFilter: this.filter,\n ...this.clickEvents\n };\n }\n\n /**\n * Dynamic CSS classes to apply to the component.\n *\n * @returns The dynamic CSS classes to apply to the component.\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return {\n 'x-hierarchical-filter--is-partially-selected': this.isPartiallySelected,\n 'x-hierarchical-filter--is-selected': this.filter.selected,\n 'x-filter--is-partially-selected': this.isPartiallySelected\n };\n }\n\n /**\n * Gets the child filter click events, converting the payload of the events that have a\n * {@link @empathyco/x-types#HierarchicalFilter} as payload to the corresponding child filter.\n *\n * @param childFilter - The child filter.\n * @returns The events to emit when clicking a child.\n * @internal\n */\n protected getChildFilterClickEvents(\n childFilter: HierarchicalFilterModel\n ): Partial<XEventsTypes> {\n return Object.entries(this._clickEvents).reduce((clickEvents, [event, payload]) => {\n return {\n ...clickEvents,\n [event]:\n isObject(payload) &&\n isHierarchicalFilter(payload as unknown as Filter) &&\n childFilter !== (payload as unknown as HierarchicalFilterModel)\n ? childFilter\n : payload\n };\n }, {} as Partial<XEventsTypes>);\n }\n\n /**\n * Returns if the filter is partially selected, which means having more than one child filter\n * selected, but not every of them, or having at least one child filter partially selected.\n *\n * @returns True if the filter is partially selected. False otherwise.\n * @internal\n */\n protected get isPartiallySelected(): boolean {\n return this.isFilterPartiallySelected(this.filter);\n }\n\n /**\n * List of filters to render, in case that the children's array\n * is empty it will return an empty array instead of inject the ones from the parent.\n *\n * @returns A list of filters.\n * @internal\n */\n protected get renderedChildrenFilters(): Filter[] {\n return this.filter.children?.map(filterId => this.filters[filterId]) ?? [];\n }\n\n protected isFilterPartiallySelected(filter: HierarchicalFilterModel): boolean {\n const selectedChildren = filter.children\n ?.map(filterId => this.filters[filterId])\n ?.filter(filter => filter?.selected) as HierarchicalFilterModel[] | undefined;\n const filterChildrenLength = filter.children?.length ?? 0;\n return (\n !!selectedChildren &&\n ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) ||\n // eslint-disable-next-line @typescript-eslint/unbound-method\n selectedChildren.some(this.isFilterPartiallySelected))\n );\n }\n}\n"],"names":["FiltersList","RenderlessFilter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA;;;;;AAUA,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,GAAG;;;;;;;IA8BjD,IAAc,YAAY;QACxB,OAAO;YACL,8BAA8B,EAAE,IAAI,CAAC,MAAM;YAC3C,GAAG,IAAI,CAAC,WAAW;SACpB,CAAC;KACH;;;;;;;IAQD,IAAc,UAAU;QACtB,OAAO;YACL,8CAA8C,EAAE,IAAI,CAAC,mBAAmB;YACxE,oCAAoC,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;YAC1D,iCAAiC,EAAE,IAAI,CAAC,mBAAmB;SAC5D,CAAC;KACH;;;;;;;;;IAUS,yBAAyB,CACjC,WAAoC;QAEpC,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC;YAC5E,OAAO;gBACL,GAAG,WAAW;gBACd,CAAC,KAAK,GACJ,QAAQ,CAAC,OAAO,CAAC;oBACjB,oBAAoB,CAAC,OAA4B,CAAC;oBAClD,WAAW,KAAM,OAA8C;sBAC3D,WAAW;sBACX,OAAO;aACd,CAAC;SACH,EAAE,EAA2B,CAAC,CAAC;KACjC;;;;;;;;IASD,IAAc,mBAAmB;QAC/B,OAAO,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACpD;;;;;;;;IASD,IAAc,uBAAuB;QACnC,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC;KAC5E;IAES,yBAAyB,CAAC,MAA+B;QACjE,MAAM,gBAAgB,GAAG,MAAM,CAAC,QAAQ;cACpC,GAAG,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;cACvC,MAAM,CAAC,MAAM,IAAI,MAAM,EAAE,QAAQ,CAA0C,CAAC;QAChF,MAAM,oBAAoB,GAAG,MAAM,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,CAAC;QAC1D,QACE,CAAC,CAAC,gBAAgB;aACjB,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,IAAI,gBAAgB,CAAC,MAAM,GAAG,oBAAoB;;gBAE7E,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,EACxD;KACH;CACF,CAAA;AA1GC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACe;AAIxC;IADC,IAAI,EAAE;6DACiC;AAOxC;IADC,KAAK,CAAC,QAAQ,EAAE,SAAS,CAAC;mDACmB;AAQ9C;IADC,IAAI,EAAE;uDACoC;AAtBxB,kBAAkB;IALtC,SAAS,CAAC;QACT,IAAI,EAAE,oBAAoB;QAC1B,UAAU,EAAE,eAAEA,iBAAW,oBAAEC,mBAAgB,EAAE;QAC7C,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,kBAAkB,CA6GtC;aA7GoB,kBAAkB;;;;"}
|
|
@@ -106,6 +106,7 @@ import '../../../../components/base-event-button.vue.js';
|
|
|
106
106
|
import '../../../../components/base-grid.vue.js';
|
|
107
107
|
import '../../../../components/base-keyboard-navigation.vue.js';
|
|
108
108
|
import '../../../../components/base-rating.vue.js';
|
|
109
|
+
import '../../../../components/base-switch.vue.js';
|
|
109
110
|
import '../../../../components/base-variable-column-grid.vue.js';
|
|
110
111
|
import '../../../../components/global-x-bus.vue_rollup-plugin-vue_script.vue.js';
|
|
111
112
|
import '../../../../components/items-list.vue.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"number-range-filter.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/number-range-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NumberRangeFilter as NumberRangeFilterModel } from '@empathyco/x-types';\nimport { xComponentMixin } from '../../../../components';\nimport { VueCSSClasses } from '../../../../utils/types';\nimport { XEventsTypes } from '../../../../wiring/events.types';\nimport { facetsXModule } from '../../x-module';\nimport RenderlessFilter from './renderless-filter.vue';\n\n/**\n * Renders a number range filter, emitting the needed events when clicked.\n *\n * @public\n */\n@Component({\n components: { RenderlessFilter },\n mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class NumberRangeFilter extends Vue {\n /** The filter data to render. */\n @Prop({ required: true })\n public filter!: NumberRangeFilterModel;\n\n /**\n * Additional events, with their payload, to emit when the filter is clicked.\n *\n * @public\n */\n @Prop()\n public clickEvents?: Partial<XEventsTypes>;\n\n /**\n * The {@link XEventsTypes | events} to emit.\n *\n * @returns The events to emit when clicked.\n * @internal\n */\n protected get _clickEvents(): Partial<XEventsTypes> {\n return {\n UserClickedANumberRangeFilter: this.filter,\n ...this.clickEvents\n };\n }\n\n /**\n * Dynamic CSS classes to apply to the component.\n *\n * @returns The dynamic CSS classes to apply to the component.\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return {\n 'x-number-range-filter--is-selected': this.filter.selected\n };\n }\n}\n"],"names":["RenderlessFilter"],"mappings":"
|
|
1
|
+
{"version":3,"file":"number-range-filter.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/number-range-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NumberRangeFilter as NumberRangeFilterModel } from '@empathyco/x-types';\nimport { xComponentMixin } from '../../../../components';\nimport { VueCSSClasses } from '../../../../utils/types';\nimport { XEventsTypes } from '../../../../wiring/events.types';\nimport { facetsXModule } from '../../x-module';\nimport RenderlessFilter from './renderless-filter.vue';\n\n/**\n * Renders a number range filter, emitting the needed events when clicked.\n *\n * @public\n */\n@Component({\n components: { RenderlessFilter },\n mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class NumberRangeFilter extends Vue {\n /** The filter data to render. */\n @Prop({ required: true })\n public filter!: NumberRangeFilterModel;\n\n /**\n * Additional events, with their payload, to emit when the filter is clicked.\n *\n * @public\n */\n @Prop()\n public clickEvents?: Partial<XEventsTypes>;\n\n /**\n * The {@link XEventsTypes | events} to emit.\n *\n * @returns The events to emit when clicked.\n * @internal\n */\n protected get _clickEvents(): Partial<XEventsTypes> {\n return {\n UserClickedANumberRangeFilter: this.filter,\n ...this.clickEvents\n };\n }\n\n /**\n * Dynamic CSS classes to apply to the component.\n *\n * @returns The dynamic CSS classes to apply to the component.\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return {\n 'x-number-range-filter--is-selected': this.filter.selected\n };\n }\n}\n"],"names":["RenderlessFilter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA;;;;;AASA,IAAqB,iBAAiB,GAAtC,MAAqB,iBAAkB,SAAQ,GAAG;;;;;;;IAmBhD,IAAc,YAAY;QACxB,OAAO;YACL,6BAA6B,EAAE,IAAI,CAAC,MAAM;YAC1C,GAAG,IAAI,CAAC,WAAW;SACpB,CAAC;KACH;;;;;;;IAQD,IAAc,UAAU;QACtB,OAAO;YACL,oCAAoC,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;SAC3D,CAAC;KACH;CACF,CAAA;AAlCC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;iDACc;AAQvC;IADC,IAAI,EAAE;sDACoC;AAXxB,iBAAiB;IAJrC,SAAS,CAAC;QACT,UAAU,EAAE,oBAAEA,iBAAgB,EAAE;QAChC,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,iBAAiB,CAqCrC;aArCoB,iBAAiB;;;;"}
|
package/js/x-modules/facets/components/filters/renderless-filter.vue_rollup-plugin-vue_script.vue.js
CHANGED
|
@@ -106,6 +106,7 @@ import '../../../../components/base-event-button.vue.js';
|
|
|
106
106
|
import '../../../../components/base-grid.vue.js';
|
|
107
107
|
import '../../../../components/base-keyboard-navigation.vue.js';
|
|
108
108
|
import '../../../../components/base-rating.vue.js';
|
|
109
|
+
import '../../../../components/base-switch.vue.js';
|
|
109
110
|
import '../../../../components/base-variable-column-grid.vue.js';
|
|
110
111
|
import '../../../../components/global-x-bus.vue_rollup-plugin-vue_script.vue.js';
|
|
111
112
|
import '../../../../components/items-list.vue.js';
|