npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.1 → 6.0.0-alpha.2 - Mend

@empathyco/x-components 6.0.0-alpha.1 → 6.0.0-alpha.2

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.

Files changed (43) hide show

package/docs/API-reference/api/x-components.baseswitch.md CHANGED Viewed

@@ -17,13 +17,12 @@ _default: import("vue").DefineComponent<{
 }, {
     cssClasses: import("vue").Ref<string | import("@empathyco/x-utils").Dictionary<boolean> | (string | import("@empathyco/x-utils").Dictionary<boolean>)[]>;
     toggle: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: boolean;

package/docs/API-reference/components/common/x-components.base-switch.md CHANGED Viewed

@@ -19,7 +19,6 @@ prop, and emits a Vue event whenever the user clicks it.
 | Event name        | Properties | Description |
 | ----------------- | ---------- | ----------- |
-| change            |            |
 | update:modelValue |            |
 ## Events
@@ -34,7 +33,7 @@ _Try clicking it to see how it changes its state_
 ```vue live
 <template>
-  <BaseSwitch @change="value = !value" :modelValue="value" />
+  <BaseSwitch @update:modelValue="value = !value" :modelValue="value" />
 </template>
 <script>

package/js/components/base-switch.vue.js.map CHANGED Viewed

	@@ -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 { defineComponent, ref } 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: ['~~change', '~~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 = ref<VueCSSClasses>({\n 'x-switch--is-selected x-selected': props.modelValue\n });\n\n /\n Emits a ~~change and input~~ event with the ~~desired~~ value of the switch.\n \n @internal\n /\n const toggle = (): void => {\n const newValue = !props.modelValue;\n cssClasses.value = {\n 'x-switch--is-selected': newValue,\n 'x-selected': newValue\n };\n\n emit('update:modelValue', newValue);\n ~~emit('change', 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 @~~change~~=\"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	+ {"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 { defineComponent, ref } 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 = ref<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 cssClasses.value = {\n 'x-switch--is-selected': newValue,\n 'x-selected': newValue\n };\n\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;;;;;;;"}

package/js/components/base-switch.vue2.js CHANGED Viewed

@@ -20,7 +20,7 @@ var _sfc_main = defineComponent({
             default: false
         }
     },
-    emits: ['change', 'update:modelValue'],
+    emits: ['update:modelValue'],
     setup(props, { emit }) {
         /**
          * Dynamic CSS classes to add to the switch component
@@ -33,7 +33,7 @@ var _sfc_main = defineComponent({
             'x-switch--is-selected x-selected': props.modelValue
         });
         /**
-         * Emits a change and input event with the desired value of the switch.
+         * Emits an event with the new value of the switch.
          *
          * @internal
          */
@@ -44,7 +44,6 @@ var _sfc_main = defineComponent({
                 'x-selected': newValue
             };
             emit('update:modelValue', newValue);
-            emit('change', newValue);
         };
         return {
             cssClasses,

package/js/components/base-switch.vue2.js.map CHANGED Viewed

	@@ -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 { defineComponent, ref } 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: ['~~change', '~~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 = ref<VueCSSClasses>({\n 'x-switch--is-selected x-selected': props.modelValue\n });\n\n /\n Emits a ~~change and input~~ event with the ~~desired~~ value of the switch.\n \n @internal\n /\n const toggle = (): void => {\n const newValue = !props.modelValue;\n cssClasses.value = {\n 'x-switch--is-selected': newValue,\n 'x-selected': newValue\n };\n\n emit('update:modelValue', newValue);\n ~~emit('change', 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 @~~change~~=\"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;~~AACD~~,~~IAAA,~~KAAK,EAAE,CAAC,~~QAAQ,EAAE,~~mBAAmB,CAAC;~~AACtC~~,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB;;;;;;AAME;QACF,MAAM,aAAa,GAAG,CAAgB;YACpC,kCAAkC,EAAE,KAAK,CAAC,UAAS;AACpD,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,MAAM,QAAO,GAAI,CAAC,KAAK,CAAC,UAAU,CAAA;YAClC,UAAU,CAAC,QAAQ;AACjB,gBAAA,uBAAuB,EAAE,QAAQ;AACjC,gBAAA,YAAY,EAAE,QAAO;aACtB,CAAA;AAED,YAAA,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAA;~~AACnC~~,~~YAAA,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;AAC1B,~~SAAC,CAAA;QAED,OAAO;YACL,UAAU;YACV,MAAK;SACN,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
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 { defineComponent, ref } 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 = ref<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 cssClasses.value = {\n 'x-switch--is-selected': newValue,\n 'x-selected': newValue\n };\n\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;QACF,MAAM,aAAa,GAAG,CAAgB;YACpC,kCAAkC,EAAE,KAAK,CAAC,UAAS;AACpD,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,MAAM,QAAO,GAAI,CAAC,KAAK,CAAC,UAAU,CAAA;YAClC,UAAU,CAAC,QAAQ;AACjB,gBAAA,uBAAuB,EAAE,QAAQ;AACjC,gBAAA,YAAY,EAAE,QAAO;aACtB,CAAA;AAED,YAAA,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAA;AACrC,SAAC,CAAA;QAED,OAAO;YACL,UAAU;YACV,MAAK;SACN,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/facets/components/filters/hierarchical-filter.vue.js CHANGED Viewed

@@ -13,9 +13,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_FiltersList = resolveComponent("FiltersList");
   return openBlock(), createElementBlock("div", _hoisted_1, [
     createVNode(_component_RenderlessFilter, {
-      cssClasses: _ctx.innerCssClasses,
+      filter: _ctx.filter,
       clickEvents: _ctx.innerClickEvents,
-      filter: _ctx.filter
+      cssClasses: _ctx.innerCssClasses
     }, {
       default: withCtx(({ filter, clickFilter, cssClasses, isDisabled }) => [
         createCommentVNode("\n        @slot The content to render inside the button.\n            @binding {Filter} filter - The filter data.\n            @binding {Function} clickFilter - The handler to invoke when clicking the filter.\n            @binding {VueCssClasses} cssClasses - The CSS classes.\n            @binding {boolean} isDisabled - Flag determining the disabled state.\n      "),
@@ -41,7 +41,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 3
       /* FORWARDED */
-    }, 8, ["cssClasses", "clickEvents", "filter"]),
+    }, 8, ["filter", "clickEvents", "cssClasses"]),
     createVNode(_component_FiltersList, {
       animation: _ctx.childrenAnimation,
       filters: _ctx.renderedChildrenFilters,

package/js/x-modules/facets/components/filters/hierarchical-filter.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hierarchical-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/hierarchical-filter.vue"],"sourcesContent":["<template>\n <div class=\"x-hierarchical-filter-container\" data-test=\"hierarchical-filter-container\">\n <RenderlessFilter\n v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n :cssClasses=\"innerCssClasses\"\n :clickEvents=\"innerClickEvents\"\n :filter=\"filter\"\n >\n <!--\n @slot The content to render inside the button.\n @binding {Filter} filter - The filter data.\n @binding {Function} clickFilter - The handler to invoke when clicking the filter.\n @binding {VueCssClasses} cssClasses - The CSS classes.\n @binding {boolean} isDisabled - Flag determining the disabled state.\n -->\n <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n <button\n @click=\"clickFilter\"\n :aria-checked=\"filter.selected.toString()\"\n :class=\"[cssClasses, filterItemClass]\"\n :disabled=\"isDisabled\"\n data-test=\"filter\"\n role=\"checkbox\"\n >\n <!--\n @slot The content to render inside the button.\n @binding {Filter} filter - The filter data.\n -->\n <slot name=\"label\" :filter=\"filter\">{{ filter.label }}</slot>\n </button>\n </slot>\n </RenderlessFilter>\n <FiltersList\n v-slot=\"{ filter: childFilter }\"\n :animation=\"childrenAnimation\"\n :filters=\"renderedChildrenFilters\"\n :parent-id=\"filter.id\"\n class=\"x-hierarchical-filter__children\"\n :class=\"childrenFiltersClass\"\n data-test=\"children-filters\"\n >\n <HierarchicalFilter\n :childrenAnimation=\"childrenAnimation\"\n :filter=\"childFilter\"\n :clickEvents=\"getChildFilterClickEvents(childFilter)\"\n :childrenFiltersClass=\"childrenFiltersClass\"\n :filterItemClass=\"filterItemClass\"\n >\n <template #default=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\" />\n </template>\n <template #label=\"{ filter }\">\n <slot name=\"label\" :filter=\"filter\" />\n </template>\n </HierarchicalFilter>\n </FiltersList>\n </div>\n</template>\n\n<script lang=\"ts\">\n import {\n Filter,\n HierarchicalFilter as HierarchicalFilterModel,\n isHierarchicalFilter\n } from '@empathyco/x-types';\n import { Dictionary, isObject } from '@empathyco/x-utils';\n import { computed, defineComponent, PropType } from 'vue';\n import { XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n import FiltersList from '../lists/filters-list.vue';\n import { AnimationProp } from '../../../../types';\n import RenderlessFilter from './renderless-filter.vue';\n\n /*\n Renders a hierarchical filter recursively, emitting the needed events when clicked.\n \n @public\n /\n export default defineComponent({\n name: 'HierarchicalFilter',\n xModule: facetsXModule.name,\n components: { FiltersList, RenderlessFilter },\n props: {\n /* The filter data to render. /\n filter: {\n type: Object as PropType<HierarchicalFilterModel>,\n required: true\n },\n /* The animation component to use for the children filters. /\n childrenAnimation: AnimationProp,\n /\n Additional events, with their payload, to emit when the filter is clicked.\n \n @public\n /\n clickEvents: Object as PropType<Partial<XEventsTypes>>,\n /* Inheritance CSS classes. /\n cssClasses: {\n type: Array as PropType<(string \| Dictionary<boolean>)[]>,\n default: () => []\n },\n /* Class inherited by content element. /\n childrenFiltersClass: String,\n /* Class inherited by content element. /\n filterItemClass: String\n },\n setup: function (props) {\n /\n The {@link XEventsTypes} to emit.\n \n @returns The events to emit when clicked.\n * @internal\n /\n const innerClickEvents = computed(() => ({\n UserClickedAHierarchicalFilter: props.filter,\n ...props.clickEvents\n }));\n\n const isFilterPartiallySelected = (filter: HierarchicalFilterModel) => {\n const selectedChildren = filter.children?.filter(filter => filter.selected);\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(isFilterPartiallySelected))\n );\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 const isPartiallySelected = computed(() => isFilterPartiallySelected(props.filter));\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 const innerCssClasses = computed(() => [\n 'x-hierarchical-filter',\n { 'x-hierarchical-filter--is-partially-selected': isPartiallySelected.value },\n { 'x-hierarchical-filter--is-selected': props.filter.selected },\n { 'x-facet-filter--is-partially-selected': isPartiallySelected.value },\n ...props.cssClasses\n ]);\n\n /\n Gets the child filter click events, converting the payload of the events that have a\n * {@link 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 const getChildFilterClickEvents = (childFilter: HierarchicalFilterModel) => {\n return Object.entries(innerClickEvents.value).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 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 const renderedChildrenFilters = computed(() => props.filter.children ?? []);\n\n return {\n innerClickEvents,\n innerCssClasses,\n renderedChildrenFilters,\n getChildFilterClickEvents\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedAHierarchicalFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n filter.\n\n## See it in action\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and\n`UserClickedAHierarchicalFilter` events. By default it renders the filter label as the button text.\nIf the provided filter has children filters, this component will render them recursively. Changing\nthe slot content will change it for all of the children.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\" />\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n <HierarchicalFilter :clickEvents=\"{ UserClickedAHierarchicalFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the default slot content\n\nIn this example, the child filters will also include the label and checkbox.\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\" v-slot=\"{ filter, clickFilter, slotCSSClasses, isDisabled }\">\n <label :class=\"slotCSSClasses\">\n <input @change=\"clickFilter\" :disabled=\"isDisabled\" />\n {{ filter.label }}\n </label>\n </HierarchicalFilter>\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the label slot content\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\">\n <template #label :filter=\"filter\">\n <span class=\"custom-class\">{{ filter.label }}</span>\n </template>\n </HierarchicalFilter>\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the content with classes\n\nThe `childrenFiltersClass` prop can be used to add classes to the inner filters lists. This is\nuseful to set the indent of the children filters.\n\nThe `filterItemClass` prop can be used to add classes to the filter element itself.\n\n```vue\n<template>\n <HierarchicalFilter\n :filter=\"filter\"\n childrenFiltersClass=\"x-custom-class\"\n filterItemClass=\"x-custom-filter\"\n />\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_createVNode","filter","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_toDisplayString","childrenAnimation","renderedChildrenFilters","getChildFilterClickEvents","filterItemClass"],"mappings":";;;;MAC+C,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,iCAAA;;;;;;;iCAAvDA,gBAuDM,CAAA,aAAA,CAAA,CAAA;AApDD,EAAA,OAAAC,SAAA,EAA2B,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,WAAA,CAChB,2BAAkB,EAAA;AAAA,MAC7B,UAAQC,EAAAA,IAAAA,CAAAA,eAAAA;AAAAA,MAAAA,WAAAA,EAAAA,IAAAA,CAAAA,gBAAAA;AANf,MAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,KAAA,EAAA;AAeM,MAAA,OAAA,EAAAC,OAAA,CAeO,CA9Bb,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,KAAA;AAAA,QAAAC,kBAAA,CAgBQ,gXAaS,CAAA;AAAA,QAAAC,UAAA,CAZD,KAAE,MAAW,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,UAAAC,kBAAA,CACJ,QAAO,EAAA;AAAA,YACrB,OAnBX,EAAA,WAAA;AAAA,YAoBW,gBAAU,MAAU,CAAA,QAAA,CAAA,QAAA,EAAA;AAAA,YACrB,KAAkB,EAAAC,cAAA,CAAA,CAAA,UAAA,EAAA,IAAA,CAAA,eAAA,CAAA,CAAA;AAAA,YAClB,QAAK,EAAA,UAAA;AAAA,YAAA,WAAA,EAAA,QAAA;AAEL,YAAA,IAAA,EAAA,UAAA;AAAA,WAIA,EAAA;AAAA,YAAAL,kBAAA,CA5BV,sIA4B6D,CAAA;AAAA,YAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,EAAA,MAAA;;AA5B7D,gBAAAK,eAAA,CAAA,MAAA,CAAA,KAAA,CAAA;AAAA,gBAAA,CAAA;AAAA;AAAA,eAAA;AAAA,aAAA,CAAA;;AAAA,SAAA,CAAA;AAAA,OAAA,CAAA;AAgCI,MAAA,CAAA,EAAA,CAAA;AAAA;AAAA,KAAA,EAEG,GAAWC,CAAiB,YAAA,EAAA,aAAA,EAAA,QAAA,CAAA,CAAA;AAAA,IACnBC,WAAAA,CAAAA,sBAAAA,EAAAA;AAAAA,MACT,WAAS,IAAEV,CAAAA,iBAAAA;AAAAA,MACZ,OArCN,EAAA,IAAA,CAAA,uBAAA;AAAA,MAuCM,WAAU,EAAA,IAAA,CAAA,MAAA,CAAA,EAAA;AAAA,MAAA,KAAA,EAAAO,cAAA,CAAA,CAAA,iCAAA,EAAA,IAAA,CAAA,oBAAA,CAAA,CAAA;AAvChB,MAAA,WAAA,EAAA,kBAAA;AAAA,KAAA,EAAA;AA0CS,MAAA,OAAA,EAAAN,OAAA,CAAA,CAAA,EAAiB,QAAEQ,WAAiB,EAAA,KAAA;AAAA,QAAAV,WAAA,CAC5B,6BAAW,EAAA;AAAA,UACnB,iBAAaY,EAAAA,IAAAA,CAAAA,iBAAAA;AAAAA,UACb,MAAA,EAAA,WAAA;AAAA,UACA,kBAAiBC,yBAAe,CAAA,WAAA,CAAA;AAAA,UAAA,oBAAA,EAAA,IAAA,CAAA,oBAAA;AAEtB,UAAA,eAAA,EAAO,IAAI,CAAA,eAAA;AAAA,SAAA,EAAA;;AAGX,YAAAT,UAAA,CAAK,KAAI,MAAM,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;AAnDlC,YAAAF,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,CAAA;AAAA,WAAA,CAAA;;;AAAA,SAAA,EAAA,IAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,sBAAA,EAAA,iBAAA,CAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}
1	+ {"version":3,"file":"hierarchical-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/hierarchical-filter.vue"],"sourcesContent":["<template>\n <div class=\"x-hierarchical-filter-container\" data-test=\"hierarchical-filter-container\">\n <RenderlessFilter\n v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n :filter=\"filter\"\n :clickEvents=\"innerClickEvents\"\n :cssClasses=\"innerCssClasses\"\n >\n <!--\n @slot The content to render inside the button.\n @binding {Filter} filter - The filter data.\n @binding {Function} clickFilter - The handler to invoke when clicking the filter.\n @binding {VueCssClasses} cssClasses - The CSS classes.\n @binding {boolean} isDisabled - Flag determining the disabled state.\n -->\n <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n <button\n @click=\"clickFilter\"\n :aria-checked=\"filter.selected.toString()\"\n :class=\"[cssClasses, filterItemClass]\"\n :disabled=\"isDisabled\"\n data-test=\"filter\"\n role=\"checkbox\"\n >\n <!--\n @slot The content to render inside the button.\n @binding {Filter} filter - The filter data.\n -->\n <slot name=\"label\" :filter=\"filter\">{{ filter.label }}</slot>\n </button>\n </slot>\n </RenderlessFilter>\n <FiltersList\n v-slot=\"{ filter: childFilter }\"\n :animation=\"childrenAnimation\"\n :filters=\"renderedChildrenFilters\"\n :parent-id=\"filter.id\"\n class=\"x-hierarchical-filter__children\"\n :class=\"childrenFiltersClass\"\n data-test=\"children-filters\"\n >\n <HierarchicalFilter\n :childrenAnimation=\"childrenAnimation\"\n :filter=\"childFilter\"\n :clickEvents=\"getChildFilterClickEvents(childFilter)\"\n :childrenFiltersClass=\"childrenFiltersClass\"\n :filterItemClass=\"filterItemClass\"\n >\n <template #default=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\" />\n </template>\n <template #label=\"{ filter }\">\n <slot name=\"label\" :filter=\"filter\" />\n </template>\n </HierarchicalFilter>\n </FiltersList>\n </div>\n</template>\n\n<script lang=\"ts\">\n import {\n Filter,\n HierarchicalFilter as HierarchicalFilterModel,\n isHierarchicalFilter\n } from '@empathyco/x-types';\n import { Dictionary, isObject } from '@empathyco/x-utils';\n import { computed, defineComponent, PropType } from 'vue';\n import { XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n import FiltersList from '../lists/filters-list.vue';\n import { AnimationProp } from '../../../../types';\n import RenderlessFilter from './renderless-filter.vue';\n\n /*\n Renders a hierarchical filter recursively, emitting the needed events when clicked.\n \n @public\n /\n export default defineComponent({\n name: 'HierarchicalFilter',\n xModule: facetsXModule.name,\n components: { FiltersList, RenderlessFilter },\n props: {\n /* The filter data to render. /\n filter: {\n type: Object as PropType<HierarchicalFilterModel>,\n required: true\n },\n /* The animation component to use for the children filters. /\n childrenAnimation: AnimationProp,\n /\n Additional events, with their payload, to emit when the filter is clicked.\n \n @public\n /\n clickEvents: Object as PropType<Partial<XEventsTypes>>,\n /* Inheritance CSS classes. /\n cssClasses: {\n type: Array as PropType<(string \| Dictionary<boolean>)[]>,\n default: () => []\n },\n /* Class inherited by content element. /\n childrenFiltersClass: String,\n /* Class inherited by content element. /\n filterItemClass: String\n },\n setup: function (props) {\n /\n The {@link XEventsTypes} to emit.\n \n @returns The events to emit when clicked.\n * @internal\n /\n const innerClickEvents = computed(() => ({\n UserClickedAHierarchicalFilter: props.filter,\n ...props.clickEvents\n }));\n\n const isFilterPartiallySelected = (filter: HierarchicalFilterModel) => {\n const selectedChildren = filter.children?.filter(filter => filter.selected);\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(isFilterPartiallySelected))\n );\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 const isPartiallySelected = computed(() => isFilterPartiallySelected(props.filter));\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 const innerCssClasses = computed(() => [\n 'x-hierarchical-filter',\n { 'x-hierarchical-filter--is-partially-selected': isPartiallySelected.value },\n { 'x-hierarchical-filter--is-selected': props.filter.selected },\n { 'x-facet-filter--is-partially-selected': isPartiallySelected.value },\n ...props.cssClasses\n ]);\n\n /\n Gets the child filter click events, converting the payload of the events that have a\n * {@link 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 const getChildFilterClickEvents = (childFilter: HierarchicalFilterModel) => {\n return Object.entries(innerClickEvents.value).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 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 const renderedChildrenFilters = computed(() => props.filter.children ?? []);\n\n return {\n innerClickEvents,\n innerCssClasses,\n renderedChildrenFilters,\n getChildFilterClickEvents\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedAHierarchicalFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n filter.\n\n## See it in action\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and\n`UserClickedAHierarchicalFilter` events. By default it renders the filter label as the button text.\nIf the provided filter has children filters, this component will render them recursively. Changing\nthe slot content will change it for all of the children.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\" />\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n <HierarchicalFilter :clickEvents=\"{ UserClickedAHierarchicalFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the default slot content\n\nIn this example, the child filters will also include the label and checkbox.\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\" v-slot=\"{ filter, clickFilter, slotCSSClasses, isDisabled }\">\n <label :class=\"slotCSSClasses\">\n <input @change=\"clickFilter\" :disabled=\"isDisabled\" />\n {{ filter.label }}\n </label>\n </HierarchicalFilter>\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the label slot content\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\">\n <template #label :filter=\"filter\">\n <span class=\"custom-class\">{{ filter.label }}</span>\n </template>\n </HierarchicalFilter>\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the content with classes\n\nThe `childrenFiltersClass` prop can be used to add classes to the inner filters lists. This is\nuseful to set the indent of the children filters.\n\nThe `filterItemClass` prop can be used to add classes to the filter element itself.\n\n```vue\n<template>\n <HierarchicalFilter\n :filter=\"filter\"\n childrenFiltersClass=\"x-custom-class\"\n filterItemClass=\"x-custom-filter\"\n />\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_createVNode","innerCssClasses","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_toDisplayString","childrenAnimation","renderedChildrenFilters","filter","getChildFilterClickEvents","filterItemClass"],"mappings":";;;;MAC+C,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,iCAAA;;;;;;;iCAAvDA,gBAuDM,CAAA,aAAA,CAAA,CAAA;AApDD,EAAA,OAAAC,SAAA,EAAc,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,WAAA,CACH,2BAAkB,EAAA;AAAA,MAC7B,MAAYC,EAAAA,IAAAA,CAAAA,MAAAA;AAAAA,MAAAA,WAAAA,EAAAA,IAAAA,CAAAA,gBAAAA;AANnB,MAAA,UAAA,EAAA,IAAA,CAAA,eAAA;AAAA,KAAA,EAAA;AAeM,MAAA,OAAA,EAAAC,OAAA,CAeO,CA9Bb,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,KAAA;AAAA,QAAAC,kBAAA,CAgBQ,gXAaS,CAAA;AAAA,QAAAC,UAAA,CAZD,KAAE,MAAW,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,UAAAC,kBAAA,CACJ,QAAO,EAAA;AAAA,YACrB,OAnBX,EAAA,WAAA;AAAA,YAoBW,gBAAU,MAAU,CAAA,QAAA,CAAA,QAAA,EAAA;AAAA,YACrB,KAAkB,EAAAC,cAAA,CAAA,CAAA,UAAA,EAAA,IAAA,CAAA,eAAA,CAAA,CAAA;AAAA,YAClB,QAAK,EAAA,UAAA;AAAA,YAAA,WAAA,EAAA,QAAA;AAEL,YAAA,IAAA,EAAA,UAAA;AAAA,WAIA,EAAA;AAAA,YAAAL,kBAAA,CA5BV,sIA4B6D,CAAA;AAAA,YAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,EAAA,MAAA;;AA5B7D,gBAAAK,eAAA,CAAA,MAAA,CAAA,KAAA,CAAA;AAAA,gBAAA,CAAA;AAAA;AAAA,eAAA;AAAA,aAAA,CAAA;;AAAA,SAAA,CAAA;AAAA,OAAA,CAAA;AAgCI,MAAA,CAAA,EAAA,CAAA;AAAA;AAAA,KAAA,EAEG,GAAWC,CAAiB,QAAA,EAAA,aAAA,EAAA,YAAA,CAAA,CAAA;AAAA,IACnBC,WAAAA,CAAAA,sBAAAA,EAAAA;AAAAA,MACT,WAAS,IAAEC,CAAAA,iBAAAA;AAAAA,MACZ,OArCN,EAAA,IAAA,CAAA,uBAAA;AAAA,MAuCM,WAAU,EAAA,IAAA,CAAA,MAAA,CAAA,EAAA;AAAA,MAAA,KAAA,EAAAJ,cAAA,CAAA,CAAA,iCAAA,EAAA,IAAA,CAAA,oBAAA,CAAA,CAAA;AAvChB,MAAA,WAAA,EAAA,kBAAA;AAAA,KAAA,EAAA;AA0CS,MAAA,OAAA,EAAAN,OAAA,CAAA,CAAA,EAAiB,QAAEQ,WAAiB,EAAA,KAAA;AAAA,QAAAV,WAAA,CAC5B,6BAAW,EAAA;AAAA,UACnB,iBAAaa,EAAAA,IAAAA,CAAAA,iBAAAA;AAAAA,UACb,MAAA,EAAA,WAAA;AAAA,UACA,kBAAiBC,yBAAe,CAAA,WAAA,CAAA;AAAA,UAAA,oBAAA,EAAA,IAAA,CAAA,oBAAA;AAEtB,UAAA,eAAA,EAAO,IAAI,CAAA,eAAA;AAAA,SAAA,EAAA;;AAGX,YAAAV,UAAA,CAAK,KAAI,MAAM,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;AAnDlC,YAAAF,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,CAAA;AAAA,WAAA,CAAA;;;AAAA,SAAA,EAAA,IAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,sBAAA,EAAA,iBAAA,CAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}

package/js/x-modules/facets/components/filters/hierarchical-filter.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hierarchical-filter.vue2.js","sources":["../../../../../../src/x-modules/facets/components/filters/hierarchical-filter.vue"],"sourcesContent":["<template>\n <div class=\"x-hierarchical-filter-container\" data-test=\"hierarchical-filter-container\">\n <RenderlessFilter\n v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n :cssClasses=\"innerCssClasses\"\n :clickEvents=\"innerClickEvents\"\n :filter=\"filter\"\n >\n <!--\n @slot The content to render inside the button.\n @binding {Filter} filter - The filter data.\n @binding {Function} clickFilter - The handler to invoke when clicking the filter.\n @binding {VueCssClasses} cssClasses - The CSS classes.\n @binding {boolean} isDisabled - Flag determining the disabled state.\n -->\n <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n <button\n @click=\"clickFilter\"\n :aria-checked=\"filter.selected.toString()\"\n :class=\"[cssClasses, filterItemClass]\"\n :disabled=\"isDisabled\"\n data-test=\"filter\"\n role=\"checkbox\"\n >\n <!--\n @slot The content to render inside the button.\n @binding {Filter} filter - The filter data.\n -->\n <slot name=\"label\" :filter=\"filter\">{{ filter.label }}</slot>\n </button>\n </slot>\n </RenderlessFilter>\n <FiltersList\n v-slot=\"{ filter: childFilter }\"\n :animation=\"childrenAnimation\"\n :filters=\"renderedChildrenFilters\"\n :parent-id=\"filter.id\"\n class=\"x-hierarchical-filter__children\"\n :class=\"childrenFiltersClass\"\n data-test=\"children-filters\"\n >\n <HierarchicalFilter\n :childrenAnimation=\"childrenAnimation\"\n :filter=\"childFilter\"\n :clickEvents=\"getChildFilterClickEvents(childFilter)\"\n :childrenFiltersClass=\"childrenFiltersClass\"\n :filterItemClass=\"filterItemClass\"\n >\n <template #default=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\" />\n </template>\n <template #label=\"{ filter }\">\n <slot name=\"label\" :filter=\"filter\" />\n </template>\n </HierarchicalFilter>\n </FiltersList>\n </div>\n</template>\n\n<script lang=\"ts\">\n import {\n Filter,\n HierarchicalFilter as HierarchicalFilterModel,\n isHierarchicalFilter\n } from '@empathyco/x-types';\n import { Dictionary, isObject } from '@empathyco/x-utils';\n import { computed, defineComponent, PropType } from 'vue';\n import { XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n import FiltersList from '../lists/filters-list.vue';\n import { AnimationProp } from '../../../../types';\n import RenderlessFilter from './renderless-filter.vue';\n\n /*\n Renders a hierarchical filter recursively, emitting the needed events when clicked.\n \n @public\n /\n export default defineComponent({\n name: 'HierarchicalFilter',\n xModule: facetsXModule.name,\n components: { FiltersList, RenderlessFilter },\n props: {\n /* The filter data to render. /\n filter: {\n type: Object as PropType<HierarchicalFilterModel>,\n required: true\n },\n /* The animation component to use for the children filters. /\n childrenAnimation: AnimationProp,\n /\n Additional events, with their payload, to emit when the filter is clicked.\n \n @public\n /\n clickEvents: Object as PropType<Partial<XEventsTypes>>,\n /* Inheritance CSS classes. /\n cssClasses: {\n type: Array as PropType<(string \| Dictionary<boolean>)[]>,\n default: () => []\n },\n /* Class inherited by content element. /\n childrenFiltersClass: String,\n /* Class inherited by content element. /\n filterItemClass: String\n },\n setup: function (props) {\n /\n The {@link XEventsTypes} to emit.\n \n @returns The events to emit when clicked.\n * @internal\n /\n const innerClickEvents = computed(() => ({\n UserClickedAHierarchicalFilter: props.filter,\n ...props.clickEvents\n }));\n\n const isFilterPartiallySelected = (filter: HierarchicalFilterModel) => {\n const selectedChildren = filter.children?.filter(filter => filter.selected);\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(isFilterPartiallySelected))\n );\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 const isPartiallySelected = computed(() => isFilterPartiallySelected(props.filter));\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 const innerCssClasses = computed(() => [\n 'x-hierarchical-filter',\n { 'x-hierarchical-filter--is-partially-selected': isPartiallySelected.value },\n { 'x-hierarchical-filter--is-selected': props.filter.selected },\n { 'x-facet-filter--is-partially-selected': isPartiallySelected.value },\n ...props.cssClasses\n ]);\n\n /\n Gets the child filter click events, converting the payload of the events that have a\n * {@link 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 const getChildFilterClickEvents = (childFilter: HierarchicalFilterModel) => {\n return Object.entries(innerClickEvents.value).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 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 const renderedChildrenFilters = computed(() => props.filter.children ?? []);\n\n return {\n innerClickEvents,\n innerCssClasses,\n renderedChildrenFilters,\n getChildFilterClickEvents\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedAHierarchicalFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n filter.\n\n## See it in action\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and\n`UserClickedAHierarchicalFilter` events. By default it renders the filter label as the button text.\nIf the provided filter has children filters, this component will render them recursively. Changing\nthe slot content will change it for all of the children.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\" />\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n <HierarchicalFilter :clickEvents=\"{ UserClickedAHierarchicalFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the default slot content\n\nIn this example, the child filters will also include the label and checkbox.\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\" v-slot=\"{ filter, clickFilter, slotCSSClasses, isDisabled }\">\n <label :class=\"slotCSSClasses\">\n <input @change=\"clickFilter\" :disabled=\"isDisabled\" />\n {{ filter.label }}\n </label>\n </HierarchicalFilter>\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the label slot content\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\">\n <template #label :filter=\"filter\">\n <span class=\"custom-class\">{{ filter.label }}</span>\n </template>\n </HierarchicalFilter>\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the content with classes\n\nThe `childrenFiltersClass` prop can be used to add classes to the inner filters lists. This is\nuseful to set the indent of the children filters.\n\nThe `filterItemClass` prop can be used to add classes to the filter element itself.\n\n```vue\n<template>\n <HierarchicalFilter\n :filter=\"filter\"\n childrenFiltersClass=\"x-custom-class\"\n filterItemClass=\"x-custom-filter\"\n />\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["RenderlessFilter"],"mappings":";;;;;;;;AAyEE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,UAAU,EAAE,EAAE,WAAW,oBAAEA,aAAkB;AAC7C,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA2C;AACjD,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,iBAAiB,EAAE,aAAa;AAChC;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAyC;;AAEtD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,KAAmD;AACzD,YAAA,OAAO,EAAE,MAAM,EAAC;AACjB,SAAA;;AAED,QAAA,oBAAoB,EAAE,MAAM;;AAE5B,QAAA,eAAe,EAAE,MAAK;AACvB,KAAA;IACD,KAAK,EAAE,UAAU,KAAK,EAAA;AACpB;;;;;AAKE;AACF,QAAA,MAAM,gBAAiB,GAAE,QAAQ,CAAC,OAAO;YACvC,8BAA8B,EAAE,KAAK,CAAC,MAAM;YAC5C,GAAG,KAAK,CAAC,WAAU;AACpB,SAAA,CAAC,CAAC,CAAA;AAEH,QAAA,MAAM,4BAA4B,CAAC,MAA+B,KAAK;AACrE,YAAA,MAAM,gBAAe,GAAI,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAO,IAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;YAC3E,MAAM,oBAAqB,GAAE,MAAM,CAAC,QAAQ,EAAE,MAAK,IAAK,CAAC,CAAA;YACzD,QACE,CAAC,CAAC;AACF,iBAAC,CAAC,gBAAgB,CAAC,SAAS,CAAA,IAAK,gBAAgB,CAAC,MAAO,GAAE,oBAAoB;;AAE7E,oBAAA,gBAAgB,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA,EACnD;AACH,SAAC,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,mBAAkB,GAAI,QAAQ,CAAC,MAAM,yBAAyB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;AAEnF;;;;;AAKE;AACF,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAAC,MAAM;YACrC,uBAAuB;AACvB,YAAA,EAAE,8CAA8C,EAAE,mBAAmB,CAAC,OAAO;AAC7E,YAAA,EAAE,oCAAoC,EAAE,KAAK,CAAC,MAAM,CAAC,QAAO,EAAG;AAC/D,YAAA,EAAE,uCAAuC,EAAE,mBAAmB,CAAC,OAAO;YACtE,GAAG,KAAK,CAAC,UAAS;AACnB,SAAA,CAAC,CAAA;AAEF;;;;;;;AAOE;AACF,QAAA,MAAM,yBAAwB,GAAI,CAAC,WAAoC,KAAK;YAC1E,OAAO,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK;gBACtF,OAAO;AACL,oBAAA,GAAG,WAAW;AACd,oBAAA,CAAC,KAAK,GACJ,QAAQ,CAAC,OAAO;wBAChB,oBAAoB,CAAC,OAA4B,CAAA;AACjD,wBAAA,WAAU,KAAO,OAA6C;AAC5D,0BAAE,WAAU;AACZ,0BAAE,OAAM;iBACb,CAAA;aACF,EAAE,EAA2B,CAAC,CAAA;AACjC,SAAC,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,uBAAwB,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,QAAS,IAAG,EAAE,CAAC,CAAA;QAE3E,OAAO;YACL,gBAAgB;YAChB,eAAe;YACf,uBAAuB;YACvB,yBAAwB;SACzB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
1	+ {"version":3,"file":"hierarchical-filter.vue2.js","sources":["../../../../../../src/x-modules/facets/components/filters/hierarchical-filter.vue"],"sourcesContent":["<template>\n <div class=\"x-hierarchical-filter-container\" data-test=\"hierarchical-filter-container\">\n <RenderlessFilter\n v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n :filter=\"filter\"\n :clickEvents=\"innerClickEvents\"\n :cssClasses=\"innerCssClasses\"\n >\n <!--\n @slot The content to render inside the button.\n @binding {Filter} filter - The filter data.\n @binding {Function} clickFilter - The handler to invoke when clicking the filter.\n @binding {VueCssClasses} cssClasses - The CSS classes.\n @binding {boolean} isDisabled - Flag determining the disabled state.\n -->\n <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n <button\n @click=\"clickFilter\"\n :aria-checked=\"filter.selected.toString()\"\n :class=\"[cssClasses, filterItemClass]\"\n :disabled=\"isDisabled\"\n data-test=\"filter\"\n role=\"checkbox\"\n >\n <!--\n @slot The content to render inside the button.\n @binding {Filter} filter - The filter data.\n -->\n <slot name=\"label\" :filter=\"filter\">{{ filter.label }}</slot>\n </button>\n </slot>\n </RenderlessFilter>\n <FiltersList\n v-slot=\"{ filter: childFilter }\"\n :animation=\"childrenAnimation\"\n :filters=\"renderedChildrenFilters\"\n :parent-id=\"filter.id\"\n class=\"x-hierarchical-filter__children\"\n :class=\"childrenFiltersClass\"\n data-test=\"children-filters\"\n >\n <HierarchicalFilter\n :childrenAnimation=\"childrenAnimation\"\n :filter=\"childFilter\"\n :clickEvents=\"getChildFilterClickEvents(childFilter)\"\n :childrenFiltersClass=\"childrenFiltersClass\"\n :filterItemClass=\"filterItemClass\"\n >\n <template #default=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\" />\n </template>\n <template #label=\"{ filter }\">\n <slot name=\"label\" :filter=\"filter\" />\n </template>\n </HierarchicalFilter>\n </FiltersList>\n </div>\n</template>\n\n<script lang=\"ts\">\n import {\n Filter,\n HierarchicalFilter as HierarchicalFilterModel,\n isHierarchicalFilter\n } from '@empathyco/x-types';\n import { Dictionary, isObject } from '@empathyco/x-utils';\n import { computed, defineComponent, PropType } from 'vue';\n import { XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n import FiltersList from '../lists/filters-list.vue';\n import { AnimationProp } from '../../../../types';\n import RenderlessFilter from './renderless-filter.vue';\n\n /*\n Renders a hierarchical filter recursively, emitting the needed events when clicked.\n \n @public\n /\n export default defineComponent({\n name: 'HierarchicalFilter',\n xModule: facetsXModule.name,\n components: { FiltersList, RenderlessFilter },\n props: {\n /* The filter data to render. /\n filter: {\n type: Object as PropType<HierarchicalFilterModel>,\n required: true\n },\n /* The animation component to use for the children filters. /\n childrenAnimation: AnimationProp,\n /\n Additional events, with their payload, to emit when the filter is clicked.\n \n @public\n /\n clickEvents: Object as PropType<Partial<XEventsTypes>>,\n /* Inheritance CSS classes. /\n cssClasses: {\n type: Array as PropType<(string \| Dictionary<boolean>)[]>,\n default: () => []\n },\n /* Class inherited by content element. /\n childrenFiltersClass: String,\n /* Class inherited by content element. /\n filterItemClass: String\n },\n setup: function (props) {\n /\n The {@link XEventsTypes} to emit.\n \n @returns The events to emit when clicked.\n * @internal\n /\n const innerClickEvents = computed(() => ({\n UserClickedAHierarchicalFilter: props.filter,\n ...props.clickEvents\n }));\n\n const isFilterPartiallySelected = (filter: HierarchicalFilterModel) => {\n const selectedChildren = filter.children?.filter(filter => filter.selected);\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(isFilterPartiallySelected))\n );\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 const isPartiallySelected = computed(() => isFilterPartiallySelected(props.filter));\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 const innerCssClasses = computed(() => [\n 'x-hierarchical-filter',\n { 'x-hierarchical-filter--is-partially-selected': isPartiallySelected.value },\n { 'x-hierarchical-filter--is-selected': props.filter.selected },\n { 'x-facet-filter--is-partially-selected': isPartiallySelected.value },\n ...props.cssClasses\n ]);\n\n /\n Gets the child filter click events, converting the payload of the events that have a\n * {@link 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 const getChildFilterClickEvents = (childFilter: HierarchicalFilterModel) => {\n return Object.entries(innerClickEvents.value).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 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 const renderedChildrenFilters = computed(() => props.filter.children ?? []);\n\n return {\n innerClickEvents,\n innerCssClasses,\n renderedChildrenFilters,\n getChildFilterClickEvents\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedAHierarchicalFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n filter.\n\n## See it in action\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and\n`UserClickedAHierarchicalFilter` events. By default it renders the filter label as the button text.\nIf the provided filter has children filters, this component will render them recursively. Changing\nthe slot content will change it for all of the children.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\" />\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n <HierarchicalFilter :clickEvents=\"{ UserClickedAHierarchicalFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the default slot content\n\nIn this example, the child filters will also include the label and checkbox.\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\" v-slot=\"{ filter, clickFilter, slotCSSClasses, isDisabled }\">\n <label :class=\"slotCSSClasses\">\n <input @change=\"clickFilter\" :disabled=\"isDisabled\" />\n {{ filter.label }}\n </label>\n </HierarchicalFilter>\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the label slot content\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\">\n <template #label :filter=\"filter\">\n <span class=\"custom-class\">{{ filter.label }}</span>\n </template>\n </HierarchicalFilter>\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the content with classes\n\nThe `childrenFiltersClass` prop can be used to add classes to the inner filters lists. This is\nuseful to set the indent of the children filters.\n\nThe `filterItemClass` prop can be used to add classes to the filter element itself.\n\n```vue\n<template>\n <HierarchicalFilter\n :filter=\"filter\"\n childrenFiltersClass=\"x-custom-class\"\n filterItemClass=\"x-custom-filter\"\n />\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["RenderlessFilter"],"mappings":";;;;;;;;AAyEE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,UAAU,EAAE,EAAE,WAAW,oBAAEA,aAAkB;AAC7C,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA2C;AACjD,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,iBAAiB,EAAE,aAAa;AAChC;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAyC;;AAEtD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,KAAmD;AACzD,YAAA,OAAO,EAAE,MAAM,EAAC;AACjB,SAAA;;AAED,QAAA,oBAAoB,EAAE,MAAM;;AAE5B,QAAA,eAAe,EAAE,MAAK;AACvB,KAAA;IACD,KAAK,EAAE,UAAU,KAAK,EAAA;AACpB;;;;;AAKE;AACF,QAAA,MAAM,gBAAiB,GAAE,QAAQ,CAAC,OAAO;YACvC,8BAA8B,EAAE,KAAK,CAAC,MAAM;YAC5C,GAAG,KAAK,CAAC,WAAU;AACpB,SAAA,CAAC,CAAC,CAAA;AAEH,QAAA,MAAM,4BAA4B,CAAC,MAA+B,KAAK;AACrE,YAAA,MAAM,gBAAe,GAAI,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAO,IAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;YAC3E,MAAM,oBAAqB,GAAE,MAAM,CAAC,QAAQ,EAAE,MAAK,IAAK,CAAC,CAAA;YACzD,QACE,CAAC,CAAC;AACF,iBAAC,CAAC,gBAAgB,CAAC,SAAS,CAAA,IAAK,gBAAgB,CAAC,MAAO,GAAE,oBAAoB;;AAE7E,oBAAA,gBAAgB,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA,EACnD;AACH,SAAC,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,mBAAkB,GAAI,QAAQ,CAAC,MAAM,yBAAyB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;AAEnF;;;;;AAKE;AACF,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAAC,MAAM;YACrC,uBAAuB;AACvB,YAAA,EAAE,8CAA8C,EAAE,mBAAmB,CAAC,OAAO;AAC7E,YAAA,EAAE,oCAAoC,EAAE,KAAK,CAAC,MAAM,CAAC,QAAO,EAAG;AAC/D,YAAA,EAAE,uCAAuC,EAAE,mBAAmB,CAAC,OAAO;YACtE,GAAG,KAAK,CAAC,UAAS;AACnB,SAAA,CAAC,CAAA;AAEF;;;;;;;AAOE;AACF,QAAA,MAAM,yBAAwB,GAAI,CAAC,WAAoC,KAAK;YAC1E,OAAO,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK;gBACtF,OAAO;AACL,oBAAA,GAAG,WAAW;AACd,oBAAA,CAAC,KAAK,GACJ,QAAQ,CAAC,OAAO;wBAChB,oBAAoB,CAAC,OAA4B,CAAA;AACjD,wBAAA,WAAU,KAAO,OAA6C;AAC5D,0BAAE,WAAU;AACZ,0BAAE,OAAM;iBACb,CAAA;aACF,EAAE,EAA2B,CAAC,CAAA;AACjC,SAAC,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,uBAAwB,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,QAAS,IAAG,EAAE,CAAC,CAAA;QAE3E,OAAO;YACL,gBAAgB;YAChB,eAAe;YACf,uBAAuB;YACvB,yBAAwB;SACzB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/facets/components/filters/number-range-filter.vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import _sfc_main from './number-range-filter.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, createTextVNode, toDisplayString } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, mergeProps, createTextVNode, toDisplayString } from 'vue';
 import _export_sfc from '../../../../_virtual/_plugin-vue_export-helper.js';
 const _hoisted_1 = ["onClick", "aria-checked", "disabled"];
@@ -18,14 +18,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         cssClasses,
         isDisabled
       })), () => [
-        createElementVNode("button", {
+        createElementVNode("button", mergeProps({
           onClick: clickFilter,
           "aria-checked": filter.selected.toString(),
-          class: normalizeClass(cssClasses),
+          class: cssClasses,
           disabled: isDisabled,
           "data-test": "filter",
           role: "checkbox"
-        }, [
+        }, _ctx.$attrs), [
           createCommentVNode("\n          @slot The content to render inside the button\n          @binding {Filter} filter - The filter data\n        "),
           renderSlot(_ctx.$slots, "label", { filter }, () => [
             createTextVNode(
@@ -34,7 +34,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               /* TEXT */
             )
           ])
-        ], 10, _hoisted_1)
+        ], 16, _hoisted_1)
       ])
     ]),
     _: 3

package/js/x-modules/facets/components/filters/number-range-filter.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"number-range-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/number-range-filter.vue"],"sourcesContent":["<template>\n <RenderlessFilter\n v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n :cssClasses=\"innerCssClasses\"\n :clickEvents=\"innerClickEvents\"\n :filter=\"filter\"\n >\n <!--\n @slot The control element to render\n @binding {Filter} filter - The filter data\n @binding {() => void} clickFilter - Method that will invoke the needed actions after the user\n clicks the filter.\n @binding {Object} cssClasses - Object containing CSS classes to add to the button\n @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the\n user\n -->\n <slot\n v-bind=\"{\n filter,\n clickFilter,\n cssClasses,\n isDisabled\n }\"\n >\n <button\n @click=\"clickFilter\"\n :aria-checked=\"filter.selected.toString()\"\n :class=\"cssClasses\"\n :disabled=\"isDisabled\"\n data-test=\"filter\"\n role=\"checkbox\"\n >\n <!--\n @slot The content to render inside the button\n @binding {Filter} filter - The filter data\n -->\n <slot :filter=\"filter\" name=\"label\">{{ filter.label }}</slot>\n </button>\n </slot>\n </RenderlessFilter>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { NumberRangeFilter as NumberRangeFilterModel } from '@empathyco/x-types';\n import { Dictionary } from '@empathyco/x-utils';\n import { XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n import RenderlessFilter from './renderless-filter.vue';\n\n /*\n Renders a number range filter, emitting the needed events when clicked.\n \n @public\n /\n export default defineComponent({\n name: 'NumberRangeFilter',\n xModule: facetsXModule.name,\n components: { RenderlessFilter },\n props: {\n /* The filter data to render. /\n filter: {\n type: Object as PropType<NumberRangeFilterModel>,\n required: true\n },\n /\n Additional events, with their payload, to emit when the filter is clicked.\n \n @public\n /\n clickEvents: Object as PropType<Partial<XEventsTypes>>,\n /* Inheritance CSS classes. /\n cssClasses: {\n type: Array as PropType<(string \| Dictionary<boolean>)[]>,\n default: () => []\n }\n },\n setup: function (props: any) {\n /\n The {@link XEventsTypes} to emit.\n \n @returns The events to emit when clicked.\n * @internal\n /\n const innerClickEvents = computed(() => ({\n UserClickedANumberRangeFilter: props.filter,\n ...props.clickEvents\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 const innerCssClasses = computed(() => [\n 'x-number-range-filter',\n { 'x-number-range-filter--is-selected': props.filter.selected },\n ...props.cssClasses\n ]);\n\n return {\n innerClickEvents,\n innerCssClasses\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedANumberRangeFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n\n## See it in action\n\nThis component renders a button which, on clicked, emits the `UserClickedAFilter` and the\n`UserClickedANumberRangeFilter` events. By default, it renders the filter label as the button text.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n <NumberRangeFilter :filter=\"filter\" />\n</template>\n\n<script>\n import { NumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'NumberRangeFilterTest',\n components: {\n NumberRangeFilter\n },\n date() {\n return {\n filter: {\n id: `price:1-10`,\n modelName: 'NumberRangeFilter',\n label: `From 1 to 10`,\n facetId: 'price',\n range: {\n min: 1,\n max: 10\n },\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n <NumberRangeFilter :clickEvents=\"{ UserClickedANumberRangeFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n import { NumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'NumberRangeFilterTest',\n components: {\n NumberRangeFilter\n },\n date() {\n return {\n filter: {\n id: `price:1-10`,\n modelName: 'NumberRangeFilter',\n label: `From 1 to 10`,\n facetId: 'price',\n range: {\n min: 1,\n max: 10\n },\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n <NumberRangeFilter :filter=\"filter\" v-slot=\"{ filter }\">\n <img src=\"checkbox.png\" />\n <span>{{ filter.label }}</span>\n </NumberRangeFilter>\n</template>\n\n<script>\n import { NumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'NumberRangeFilterTest',\n components: {\n NumberRangeFilter\n },\n date() {\n return {\n filter: {\n id: `price:1-10`,\n modelName: 'NumberRangeFilter',\n label: `From 1 to 10`,\n facetId: 'price',\n range: {\n min: 1,\n max: 10\n },\n selected: false\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","filter","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","~~_normalizeClass~~","_toDisplayString"],"mappings":";;;;;;~~AAuCqB~~,EAAA,MAAA,2BAAA,GAAAA,gBAAA,CAAA,kBAAA,CAAA,CAAA;~~AAnChB~~,EAAA,OAAAC,SAAA,EAA6B,EAAAC,WAAA,CAAA,2BAAA,EAAA;AAAA,IAC7B,UAAQC,EAAAA,IAAAA,CAAAA,eAAAA;AAAAA,IAAAA,WAAAA,EAAAA,IAAAA,CAAAA,gBAAAA;AALb,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;AAgBI,IAAA,OAAA,EAAAC,OAAA,~~CAsBO~~,~~CAtCX~~,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,KAAA;AAAA,MAiB8BC,kBAAA,CAAA,2aAAA,CAAA;AAAA,MAAAC,UAAA,CAAU,IAAW,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA;AAAA,QAAU,MAAA;AAAA,QAAoB,WAAA;AAAA,QAAA,UAAA;AAO3E,QAAA,UAAA;AAAA,OAAA,CAAA,CAAA,EACG,MAAK;AAAA,QAAAC,kBAAA,CACS,~~QAAO~~,~~EAAA~~;AAAA,~~UACrB~~,~~OA3BT~~,EAAA,WAAA;AAAA,~~UA4BS~~,gBAAU,MAAU,CAAA,QAAA,CAAA,QAAA,EAAA;AAAA,UACrB,~~KAAkB~~,~~EAAAC~~,~~cAAA,CAAA,~~UAAA~~,CAAA~~;AAAA,~~UAClB~~,QAAK,EAAA,UAAA;AAAA,~~UAAA~~,WAAA,EAAA,QAAA;~~AAEL~~,~~UAAA~~,IAAA,EAAA,UAAA;AAAA,~~SAIA~~,EAAA;AAAA,UAAAL,kBAAA,~~CApCR~~,~~2HAoC2D~~,CAAA;AAAA,UAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,EAAA,MAAA;;~~AApC3D~~,cAAAK,eAAA,CAAA,MAAA,CAAA,KAAA,CAAA;AAAA,cAAA,CAAA;AAAA;AAAA,aAAA;AAAA,WAAA,CAAA;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
1	+ {"version":3,"file":"number-range-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/number-range-filter.vue"],"sourcesContent":["<template>\n <RenderlessFilter\n v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n :cssClasses=\"innerCssClasses\"\n :clickEvents=\"innerClickEvents\"\n :filter=\"filter\"\n >\n <!--\n @slot The control element to render\n @binding {Filter} filter - The filter data\n @binding {() => void} clickFilter - Method that will invoke the needed actions after the user\n clicks the filter.\n @binding {Object} cssClasses - Object containing CSS classes to add to the button\n @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the\n user\n -->\n <slot\n v-bind=\"{\n filter,\n clickFilter,\n cssClasses,\n isDisabled\n }\"\n >\n <button\n @click=\"clickFilter\"\n :aria-checked=\"filter.selected.toString()\"\n :class=\"cssClasses\"\n :disabled=\"isDisabled\"\n data-test=\"filter\"\n role=\"checkbox\"\n v-bind=\"$attrs\"\n >\n <!--\n @slot The content to render inside the button\n @binding {Filter} filter - The filter data\n -->\n <slot :filter=\"filter\" name=\"label\">{{ filter.label }}</slot>\n </button>\n </slot>\n </RenderlessFilter>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { NumberRangeFilter as NumberRangeFilterModel } from '@empathyco/x-types';\n import { Dictionary } from '@empathyco/x-utils';\n import { XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n import RenderlessFilter from './renderless-filter.vue';\n\n /*\n Renders a number range filter, emitting the needed events when clicked.\n \n @public\n /\n export default defineComponent({\n name: 'NumberRangeFilter',\n xModule: facetsXModule.name,\n components: { RenderlessFilter },\n inheritAttrs: false,\n props: {\n /* The filter data to render. /\n filter: {\n type: Object as PropType<NumberRangeFilterModel>,\n required: true\n },\n /\n Additional events, with their payload, to emit when the filter is clicked.\n \n @public\n /\n clickEvents: Object as PropType<Partial<XEventsTypes>>,\n /* Inheritance CSS classes. /\n cssClasses: {\n type: Array as PropType<(string \| Dictionary<boolean>)[]>,\n default: () => []\n }\n },\n setup: function (props: any) {\n /\n The {@link XEventsTypes} to emit.\n \n @returns The events to emit when clicked.\n * @internal\n /\n const innerClickEvents = computed(() => ({\n UserClickedANumberRangeFilter: props.filter,\n ...props.clickEvents\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 const innerCssClasses = computed(() => [\n 'x-number-range-filter',\n { 'x-number-range-filter--is-selected': props.filter.selected },\n ...props.cssClasses\n ]);\n\n return {\n innerClickEvents,\n innerCssClasses\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedANumberRangeFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n\n## See it in action\n\nThis component renders a button which, on clicked, emits the `UserClickedAFilter` and the\n`UserClickedANumberRangeFilter` events. By default, it renders the filter label as the button text.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n <NumberRangeFilter :filter=\"filter\" />\n</template>\n\n<script>\n import { NumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'NumberRangeFilterTest',\n components: {\n NumberRangeFilter\n },\n date() {\n return {\n filter: {\n id: `price:1-10`,\n modelName: 'NumberRangeFilter',\n label: `From 1 to 10`,\n facetId: 'price',\n range: {\n min: 1,\n max: 10\n },\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n <NumberRangeFilter :clickEvents=\"{ UserClickedANumberRangeFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n import { NumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'NumberRangeFilterTest',\n components: {\n NumberRangeFilter\n },\n date() {\n return {\n filter: {\n id: `price:1-10`,\n modelName: 'NumberRangeFilter',\n label: `From 1 to 10`,\n facetId: 'price',\n range: {\n min: 1,\n max: 10\n },\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n <NumberRangeFilter :filter=\"filter\" v-slot=\"{ filter }\">\n <img src=\"checkbox.png\" />\n <span>{{ filter.label }}</span>\n </NumberRangeFilter>\n</template>\n\n<script>\n import { NumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'NumberRangeFilterTest',\n components: {\n NumberRangeFilter\n },\n date() {\n return {\n filter: {\n id: `price:1-10`,\n modelName: 'NumberRangeFilter',\n label: `From 1 to 10`,\n facetId: 'price',\n range: {\n min: 1,\n max: 10\n },\n selected: false\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","filter","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_mergeProps","_toDisplayString"],"mappings":";;;;;;AAwCqB,EAAA,MAAA,2BAAA,GAAAA,gBAAA,CAAA,kBAAA,CAAA,CAAA;AApChB,EAAA,OAAAC,SAAA,EAA6B,EAAAC,WAAA,CAAA,2BAAA,EAAA;AAAA,IAC7B,UAAQC,EAAAA,IAAAA,CAAAA,eAAAA;AAAAA,IAAAA,WAAAA,EAAAA,IAAAA,CAAAA,gBAAAA;AALb,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;AAgBI,IAAA,OAAA,EAAAC,OAAA,CAuBO,CAvCX,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,KAAA;AAAA,MAiB8BC,kBAAA,CAAA,2aAAA,CAAA;AAAA,MAAAC,UAAA,CAAU,IAAW,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA;AAAA,QAAU,MAAA;AAAA,QAAoB,WAAA;AAAA,QAAA,UAAA;AAO3E,QAAA,UAAA;AAAA,OAAA,CAAA,CAAA,EACG,MAAK;AAAA,QAAAC,kBAAA,CACS,UAAOC,UAAiB,CAAA;AAAA,UACtC,OAAO,EAAA,WAAA;AAAA,UACP,gBAAU,MAAU,CAAA,QAAA,CAAA,QAAA,EAAA;AAAA,UACrB,KAAA,EAAA,UAAA;AAAA,UACA,QAAK,EAAA,UAAA;AAAA,UACS,WAAA,EAAA,QAAA;AAAA,UAEd,IAAA,EAAA,UAAA;AAAA,SAAA,EAIA,IAA6D,CAAA,MAAA,CAAA,EAAA;AAAA,UAAAL,kBAAA,CArCrE,2HAqC2D,CAAA;AAAA,UAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,EAAA,MAAA;;AArC3D,cAAAK,eAAA,CAAA,MAAA,CAAA,KAAA,CAAA;AAAA,cAAA,CAAA;AAAA;AAAA,aAAA;AAAA,WAAA,CAAA;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/facets/components/filters/number-range-filter.vue2.js CHANGED Viewed

@@ -11,6 +11,7 @@ var _sfc_main = defineComponent({
     name: 'NumberRangeFilter',
     xModule: facetsXModule.name,
     components: { RenderlessFilter: _sfc_main$1 },
+    inheritAttrs: false,
     props: {
         /** The filter data to render. */
         filter: {

package/js/x-modules/facets/components/filters/number-range-filter.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"number-range-filter.vue2.js","sources":["../../../../../../src/x-modules/facets/components/filters/number-range-filter.vue"],"sourcesContent":["<template>\n <RenderlessFilter\n v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n :cssClasses=\"innerCssClasses\"\n :clickEvents=\"innerClickEvents\"\n :filter=\"filter\"\n >\n <!--\n @slot The control element to render\n @binding {Filter} filter - The filter data\n @binding {() => void} clickFilter - Method that will invoke the needed actions after the user\n clicks the filter.\n @binding {Object} cssClasses - Object containing CSS classes to add to the button\n @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the\n user\n -->\n <slot\n v-bind=\"{\n filter,\n clickFilter,\n cssClasses,\n isDisabled\n }\"\n >\n <button\n @click=\"clickFilter\"\n :aria-checked=\"filter.selected.toString()\"\n :class=\"cssClasses\"\n :disabled=\"isDisabled\"\n data-test=\"filter\"\n role=\"checkbox\"\n >\n <!--\n @slot The content to render inside the button\n @binding {Filter} filter - The filter data\n -->\n <slot :filter=\"filter\" name=\"label\">{{ filter.label }}</slot>\n </button>\n </slot>\n </RenderlessFilter>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { NumberRangeFilter as NumberRangeFilterModel } from '@empathyco/x-types';\n import { Dictionary } from '@empathyco/x-utils';\n import { XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n import RenderlessFilter from './renderless-filter.vue';\n\n /*\n Renders a number range filter, emitting the needed events when clicked.\n \n @public\n /\n export default defineComponent({\n name: 'NumberRangeFilter',\n xModule: facetsXModule.name,\n components: { RenderlessFilter },\n props: {\n /* The filter data to render. /\n filter: {\n type: Object as PropType<NumberRangeFilterModel>,\n required: true\n },\n /\n Additional events, with their payload, to emit when the filter is clicked.\n \n @public\n /\n clickEvents: Object as PropType<Partial<XEventsTypes>>,\n /* Inheritance CSS classes. /\n cssClasses: {\n type: Array as PropType<(string \| Dictionary<boolean>)[]>,\n default: () => []\n }\n },\n setup: function (props: any) {\n /\n The {@link XEventsTypes} to emit.\n \n @returns The events to emit when clicked.\n * @internal\n /\n const innerClickEvents = computed(() => ({\n UserClickedANumberRangeFilter: props.filter,\n ...props.clickEvents\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 const innerCssClasses = computed(() => [\n 'x-number-range-filter',\n { 'x-number-range-filter--is-selected': props.filter.selected },\n ...props.cssClasses\n ]);\n\n return {\n innerClickEvents,\n innerCssClasses\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedANumberRangeFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n\n## See it in action\n\nThis component renders a button which, on clicked, emits the `UserClickedAFilter` and the\n`UserClickedANumberRangeFilter` events. By default, it renders the filter label as the button text.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n <NumberRangeFilter :filter=\"filter\" />\n</template>\n\n<script>\n import { NumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'NumberRangeFilterTest',\n components: {\n NumberRangeFilter\n },\n date() {\n return {\n filter: {\n id: `price:1-10`,\n modelName: 'NumberRangeFilter',\n label: `From 1 to 10`,\n facetId: 'price',\n range: {\n min: 1,\n max: 10\n },\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n <NumberRangeFilter :clickEvents=\"{ UserClickedANumberRangeFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n import { NumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'NumberRangeFilterTest',\n components: {\n NumberRangeFilter\n },\n date() {\n return {\n filter: {\n id: `price:1-10`,\n modelName: 'NumberRangeFilter',\n label: `From 1 to 10`,\n facetId: 'price',\n range: {\n min: 1,\n max: 10\n },\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n <NumberRangeFilter :filter=\"filter\" v-slot=\"{ filter }\">\n <img src=\"checkbox.png\" />\n <span>{{ filter.label }}</span>\n </NumberRangeFilter>\n</template>\n\n<script>\n import { NumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'NumberRangeFilterTest',\n components: {\n NumberRangeFilter\n },\n date() {\n return {\n filter: {\n id: `price:1-10`,\n modelName: 'NumberRangeFilter',\n label: `From 1 to 10`,\n facetId: 'price',\n range: {\n min: 1,\n max: 10\n },\n selected: false\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["RenderlessFilter"],"mappings":";;;;~~AAkDE~~;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,oBAAEA,WAAe,EAAG;AAChC,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0C;AAChD,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAyC;;AAEtD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,KAAmD;AACzD,YAAA,OAAO,EAAE,MAAM,EAAC;AAClB,SAAA;AACD,KAAA;IACD,KAAK,EAAE,UAAU,KAAU,EAAA;AACzB;;;;;AAKE;AACF,QAAA,MAAM,gBAAiB,GAAE,QAAQ,CAAC,OAAO;YACvC,6BAA6B,EAAE,KAAK,CAAC,MAAM;YAC3C,GAAG,KAAK,CAAC,WAAU;AACpB,SAAA,CAAC,CAAC,CAAA;AAEH;;;;;AAKE;AACF,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAAC,MAAM;YACrC,uBAAuB;AACvB,YAAA,EAAE,oCAAoC,EAAE,KAAK,CAAC,MAAM,CAAC,QAAO,EAAG;YAC/D,GAAG,KAAK,CAAC,UAAS;AACnB,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,gBAAgB;YAChB,eAAc;SACf,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
1	+ {"version":3,"file":"number-range-filter.vue2.js","sources":["../../../../../../src/x-modules/facets/components/filters/number-range-filter.vue"],"sourcesContent":["<template>\n <RenderlessFilter\n v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n :cssClasses=\"innerCssClasses\"\n :clickEvents=\"innerClickEvents\"\n :filter=\"filter\"\n >\n <!--\n @slot The control element to render\n @binding {Filter} filter - The filter data\n @binding {() => void} clickFilter - Method that will invoke the needed actions after the user\n clicks the filter.\n @binding {Object} cssClasses - Object containing CSS classes to add to the button\n @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the\n user\n -->\n <slot\n v-bind=\"{\n filter,\n clickFilter,\n cssClasses,\n isDisabled\n }\"\n >\n <button\n @click=\"clickFilter\"\n :aria-checked=\"filter.selected.toString()\"\n :class=\"cssClasses\"\n :disabled=\"isDisabled\"\n data-test=\"filter\"\n role=\"checkbox\"\n v-bind=\"$attrs\"\n >\n <!--\n @slot The content to render inside the button\n @binding {Filter} filter - The filter data\n -->\n <slot :filter=\"filter\" name=\"label\">{{ filter.label }}</slot>\n </button>\n </slot>\n </RenderlessFilter>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { NumberRangeFilter as NumberRangeFilterModel } from '@empathyco/x-types';\n import { Dictionary } from '@empathyco/x-utils';\n import { XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n import RenderlessFilter from './renderless-filter.vue';\n\n /*\n Renders a number range filter, emitting the needed events when clicked.\n \n @public\n /\n export default defineComponent({\n name: 'NumberRangeFilter',\n xModule: facetsXModule.name,\n components: { RenderlessFilter },\n inheritAttrs: false,\n props: {\n /* The filter data to render. /\n filter: {\n type: Object as PropType<NumberRangeFilterModel>,\n required: true\n },\n /\n Additional events, with their payload, to emit when the filter is clicked.\n \n @public\n /\n clickEvents: Object as PropType<Partial<XEventsTypes>>,\n /* Inheritance CSS classes. /\n cssClasses: {\n type: Array as PropType<(string \| Dictionary<boolean>)[]>,\n default: () => []\n }\n },\n setup: function (props: any) {\n /\n The {@link XEventsTypes} to emit.\n \n @returns The events to emit when clicked.\n * @internal\n /\n const innerClickEvents = computed(() => ({\n UserClickedANumberRangeFilter: props.filter,\n ...props.clickEvents\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 const innerCssClasses = computed(() => [\n 'x-number-range-filter',\n { 'x-number-range-filter--is-selected': props.filter.selected },\n ...props.cssClasses\n ]);\n\n return {\n innerClickEvents,\n innerCssClasses\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedANumberRangeFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n\n## See it in action\n\nThis component renders a button which, on clicked, emits the `UserClickedAFilter` and the\n`UserClickedANumberRangeFilter` events. By default, it renders the filter label as the button text.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n <NumberRangeFilter :filter=\"filter\" />\n</template>\n\n<script>\n import { NumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'NumberRangeFilterTest',\n components: {\n NumberRangeFilter\n },\n date() {\n return {\n filter: {\n id: `price:1-10`,\n modelName: 'NumberRangeFilter',\n label: `From 1 to 10`,\n facetId: 'price',\n range: {\n min: 1,\n max: 10\n },\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n <NumberRangeFilter :clickEvents=\"{ UserClickedANumberRangeFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n import { NumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'NumberRangeFilterTest',\n components: {\n NumberRangeFilter\n },\n date() {\n return {\n filter: {\n id: `price:1-10`,\n modelName: 'NumberRangeFilter',\n label: `From 1 to 10`,\n facetId: 'price',\n range: {\n min: 1,\n max: 10\n },\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n <NumberRangeFilter :filter=\"filter\" v-slot=\"{ filter }\">\n <img src=\"checkbox.png\" />\n <span>{{ filter.label }}</span>\n </NumberRangeFilter>\n</template>\n\n<script>\n import { NumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'NumberRangeFilterTest',\n components: {\n NumberRangeFilter\n },\n date() {\n return {\n filter: {\n id: `price:1-10`,\n modelName: 'NumberRangeFilter',\n label: `From 1 to 10`,\n facetId: 'price',\n range: {\n min: 1,\n max: 10\n },\n selected: false\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["RenderlessFilter"],"mappings":";;;;AAmDE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,oBAAEA,WAAe,EAAG;AAChC,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0C;AAChD,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAyC;;AAEtD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,KAAmD;AACzD,YAAA,OAAO,EAAE,MAAM,EAAC;AAClB,SAAA;AACD,KAAA;IACD,KAAK,EAAE,UAAU,KAAU,EAAA;AACzB;;;;;AAKE;AACF,QAAA,MAAM,gBAAiB,GAAE,QAAQ,CAAC,OAAO;YACvC,6BAA6B,EAAE,KAAK,CAAC,MAAM;YAC3C,GAAG,KAAK,CAAC,WAAU;AACpB,SAAA,CAAC,CAAC,CAAA;AAEH;;;;;AAKE;AACF,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAAC,MAAM;YACrC,uBAAuB;AACvB,YAAA,EAAE,oCAAoC,EAAE,KAAK,CAAC,MAAM,CAAC,QAAO,EAAG;YAC/D,GAAG,KAAK,CAAC,UAAS;AACnB,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,gBAAgB;YAChB,eAAc;SACf,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/facets/components/filters/simple-filter.vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import _sfc_main from './simple-filter.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, createTextVNode, toDisplayString } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, mergeProps, createTextVNode, toDisplayString } from 'vue';
 import _export_sfc from '../../../../_virtual/_plugin-vue_export-helper.js';
 const _hoisted_1 = ["onClick", "aria-checked", "disabled"];
@@ -18,14 +18,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         isDisabled,
         cssClasses
       })), () => [
-        createElementVNode("button", {
+        createElementVNode("button", mergeProps({
           onClick: clickFilter,
           "aria-checked": filter.selected.toString(),
-          class: normalizeClass(cssClasses),
+          class: cssClasses,
           disabled: isDisabled,
           "data-test": "filter",
           role: "checkbox"
-        }, [
+        }, _ctx.$attrs), [
           createCommentVNode("\n          @slot The content to render inside the button\n          @binding {Filter} filter - The filter data\n        "),
           renderSlot(_ctx.$slots, "label", { filter }, () => [
             createTextVNode(
@@ -34,7 +34,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               /* TEXT */
             )
           ])
-        ], 10, _hoisted_1)
+        ], 16, _hoisted_1)
       ])
     ]),
     _: 3

package/js/x-modules/facets/components/filters/simple-filter.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"simple-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/simple-filter.vue"],"sourcesContent":["<template>\n <RenderlessFilter\n v-slot=\"{ filter, clickFilter, isDisabled, cssClasses }\"\n :filter=\"filter\"\n :clickEvents=\"innerClickEvents\"\n :cssClasses=\"innerCssClasses\"\n >\n <!--\n @slot The control element to render\n @binding {Filter} filter - The filter data\n @binding {() => void} clickFilter - Method that will invoke the needed actions after the user\n clicks the filter.\n @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the\n user\n @binding {Object} cssClasses - Object containing CSS classes to add to the button\n -->\n <slot\n v-bind=\"{\n filter,\n clickFilter,\n isDisabled,\n cssClasses\n }\"\n >\n <button\n @click=\"clickFilter\"\n :aria-checked=\"filter.selected.toString()\"\n :class=\"cssClasses\"\n :disabled=\"isDisabled\"\n data-test=\"filter\"\n role=\"checkbox\"\n >\n <!--\n @slot The content to render inside the button\n @binding {Filter} filter - The filter data\n -->\n <slot :filter=\"filter\" name=\"label\">{{ filter.label }}</slot>\n </button>\n </slot>\n </RenderlessFilter>\n</template>\n\n<script lang=\"ts\">\n import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';\n import { Dictionary } from '@empathyco/x-utils';\n import { computed, defineComponent, PropType } from 'vue';\n import { XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n import RenderlessFilter from './renderless-filter.vue';\n\n /*\n Renders a simple filter, emitting the needed events when clicked.\n \n @public\n /\n export default defineComponent({\n name: 'SimpleFilter',\n xModule: facetsXModule.name,\n components: { RenderlessFilter },\n props: {\n /* The filter data to render. /\n filter: {\n type: Object as PropType<SimpleFilterModel>,\n required: true\n },\n /* Additional events, with their payload, to emit when the filter is clicked. /\n clickEvents: Object as PropType<Partial<XEventsTypes>>,\n /* Inheritance CSS classes. /\n cssClasses: {\n type: Array as PropType<(string \| Dictionary<boolean>)[]>,\n default: () => []\n }\n },\n setup(props) {\n /* The {@link XEventsTypes} to emit. /\n const innerClickEvents = computed(() => ({\n UserClickedASimpleFilter: props.filter,\n ...props.clickEvents\n }));\n\n /* CSS classes to apply to the element. */\n const innerCssClasses = computed(() => [\n 'x-simple-filter',\n { 'x-simple-filter--is-selected': props.filter.selected },\n ...props.cssClasses\n ]);\n\n return {\n innerClickEvents,\n innerCssClasses\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedASimpleFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n\n## See it in action\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and the\n`UserClickedASimpleFilter` events. By default, it renders a `button` with the `filter.label`\nproperty as text.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n <SimpleFilter :filter=\"filter\" />\n</template>\n\n<script>\n import { SimpleFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'SimpleFilterTest',\n components: {\n SimpleFilter\n },\n data() {\n return {\n filter: {\n modelName: 'SimpleFilter',\n selected: false,\n id: 'category:shirts',\n value: 'category:shirts',\n facetId: 'category',\n totalResults: 10\n }\n };\n }\n };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n <SimpleFilter :clickEvents=\"{ UserClickedASimpleFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n import { SimpleFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'SimpleFilterTest',\n components: {\n SimpleFilter\n },\n data() {\n return {\n filter: {\n modelName: 'SimpleFilter',\n selected: false,\n id: 'category:shirts',\n value: 'category:shirts',\n facetId: 'category',\n totalResults: 10\n }\n };\n }\n };\n</script>\n```\n\n### Rendering an input\n\nYou can change the rendered control using the default slot. Note that because of the current Vue\nlimitations, you must only render one single root node in this slot. There you will receive all the\ndata and methods needed:\n\n```vue\n<template>\n <SimpleFilter v-slot=\"{ filter, clickFilter, isDisabled, cssClasses }\" :filter=\"filter\">\n <label :class=\"cssClasses\">\n <input :checked=\"filter.selected\" type=\"checkbox\" @change=\"clickFilter\" />\n {{ filter.label }}\n </label>\n </SimpleFilter>\n</template>\n\n<script>\n import { SimpleFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'SimpleFilterTest',\n components: {\n SimpleFilter\n },\n data() {\n return {\n filter: {\n modelName: 'SimpleFilter',\n selected: false,\n id: 'category:shirts',\n value: 'category:shirts',\n facetId: 'category',\n label: 'Shirts',\n totalResults: 10\n }\n };\n }\n };\n</script>\n```\n\n### Changing default button content\n\nYou can change the content rendered by the default button using the `label` slot. There you will\nreceive the filter data.\n\n```vue\n<template>\n <SimpleFilter :filter=\"filter\">\n <template #label=\"{ filter }\">\n <img :src=\"`imgs/filters/${filter.id}.png`\" />\n <span>{{ filter.label }}</span>\n </template>\n </SimpleFilter>\n</template>\n\n<script>\n import { SimpleFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'SimpleFilterTest',\n components: {\n SimpleFilter\n },\n data() {\n return {\n filter: {\n modelName: 'SimpleFilter',\n selected: false,\n id: 'category:shirts',\n value: 'category:shirts',\n facetId: 'category',\n label: 'Shirts',\n totalResults: 10\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","innerCssClasses","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","~~_normalizeClass~~","_toDisplayString"],"mappings":";;;;;;~~AAuCqB~~,EAAA,MAAA,2BAAA,GAAAA,gBAAA,CAAA,kBAAA,CAAA,CAAA;~~AAnChB~~,EAAA,OAAAC,SAAA,EAA6B,EAAAC,WAAA,CAAA,2BAAA,EAAA;AAAA,IAC7B,MAAYC,EAAAA,IAAAA,CAAAA,MAAAA;AAAAA,IAAAA,WAAAA,EAAAA,IAAAA,CAAAA,gBAAAA;AALjB,IAAA,UAAA,EAAA,IAAA,CAAA,eAAA;AAAA,GAAA,EAAA;AAgBI,IAAA,OAAA,EAAAC,OAAA,~~CAsBO~~,~~CAtCX~~,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,KAAA;AAAA,MAiB8BC,kBAAA,CAAA,2aAAA,CAAA;AAAA,MAAAC,UAAA,CAAU,IAAW,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA;AAAA,QAAU,MAAA;AAAA,QAAoB,WAAA;AAAA,QAAA,UAAA;AAO3E,QAAA,UAAA;AAAA,OAAA,CAAA,CAAA,EACG,MAAK;AAAA,QAAAC,kBAAA,CACS,~~QAAO~~,~~EAAA~~;AAAA,~~UACrB~~,~~OA3BT~~,EAAA,WAAA;AAAA,~~UA4BS~~,gBAAU,MAAU,CAAA,QAAA,CAAA,QAAA,EAAA;AAAA,UACrB,~~KAAkB~~,~~EAAAC~~,~~cAAA,CAAA,~~UAAA~~,CAAA~~;AAAA,~~UAClB~~,QAAK,EAAA,UAAA;AAAA,~~UAAA~~,WAAA,EAAA,QAAA;~~AAEL~~,~~UAAA~~,IAAA,EAAA,UAAA;AAAA,~~SAIA~~,EAAA;AAAA,UAAAL,kBAAA,~~CApCR~~,~~2HAoC2D~~,CAAA;AAAA,UAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,EAAA,MAAA;;~~AApC3D~~,cAAAK,eAAA,CAAA,MAAA,CAAA,KAAA,CAAA;AAAA,cAAA,CAAA;AAAA;AAAA,aAAA;AAAA,WAAA,CAAA;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
1	+ {"version":3,"file":"simple-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/simple-filter.vue"],"sourcesContent":["<template>\n <RenderlessFilter\n v-slot=\"{ filter, clickFilter, isDisabled, cssClasses }\"\n :filter=\"filter\"\n :clickEvents=\"innerClickEvents\"\n :cssClasses=\"innerCssClasses\"\n >\n <!--\n @slot The control element to render\n @binding {Filter} filter - The filter data\n @binding {() => void} clickFilter - Method that will invoke the needed actions after the user\n clicks the filter.\n @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the\n user\n @binding {Object} cssClasses - Object containing CSS classes to add to the button\n -->\n <slot\n v-bind=\"{\n filter,\n clickFilter,\n isDisabled,\n cssClasses\n }\"\n >\n <button\n @click=\"clickFilter\"\n :aria-checked=\"filter.selected.toString()\"\n :class=\"cssClasses\"\n :disabled=\"isDisabled\"\n data-test=\"filter\"\n role=\"checkbox\"\n v-bind=\"$attrs\"\n >\n <!--\n @slot The content to render inside the button\n @binding {Filter} filter - The filter data\n -->\n <slot :filter=\"filter\" name=\"label\">{{ filter.label }}</slot>\n </button>\n </slot>\n </RenderlessFilter>\n</template>\n\n<script lang=\"ts\">\n import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';\n import { Dictionary } from '@empathyco/x-utils';\n import { computed, defineComponent, PropType } from 'vue';\n import { XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n import RenderlessFilter from './renderless-filter.vue';\n\n /*\n Renders a simple filter, emitting the needed events when clicked.\n \n @public\n /\n export default defineComponent({\n name: 'SimpleFilter',\n xModule: facetsXModule.name,\n components: { RenderlessFilter },\n inheritAttrs: false,\n props: {\n /* The filter data to render. /\n filter: {\n type: Object as PropType<SimpleFilterModel>,\n required: true\n },\n /* Additional events, with their payload, to emit when the filter is clicked. /\n clickEvents: Object as PropType<Partial<XEventsTypes>>,\n /* Inheritance CSS classes. /\n cssClasses: {\n type: Array as PropType<(string \| Dictionary<boolean>)[]>,\n default: () => []\n }\n },\n setup(props) {\n /* The {@link XEventsTypes} to emit. /\n const innerClickEvents = computed(() => ({\n UserClickedASimpleFilter: props.filter,\n ...props.clickEvents\n }));\n\n /* CSS classes to apply to the element. */\n const innerCssClasses = computed(() => [\n 'x-simple-filter',\n { 'x-simple-filter--is-selected': props.filter.selected },\n ...props.cssClasses\n ]);\n\n return {\n innerClickEvents,\n innerCssClasses\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedASimpleFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n\n## See it in action\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and the\n`UserClickedASimpleFilter` events. By default, it renders a `button` with the `filter.label`\nproperty as text.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n <SimpleFilter :filter=\"filter\" />\n</template>\n\n<script>\n import { SimpleFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'SimpleFilterTest',\n components: {\n SimpleFilter\n },\n data() {\n return {\n filter: {\n modelName: 'SimpleFilter',\n selected: false,\n id: 'category:shirts',\n value: 'category:shirts',\n facetId: 'category',\n totalResults: 10\n }\n };\n }\n };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n <SimpleFilter :clickEvents=\"{ UserClickedASimpleFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n import { SimpleFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'SimpleFilterTest',\n components: {\n SimpleFilter\n },\n data() {\n return {\n filter: {\n modelName: 'SimpleFilter',\n selected: false,\n id: 'category:shirts',\n value: 'category:shirts',\n facetId: 'category',\n totalResults: 10\n }\n };\n }\n };\n</script>\n```\n\n### Rendering an input\n\nYou can change the rendered control using the default slot. Note that because of the current Vue\nlimitations, you must only render one single root node in this slot. There you will receive all the\ndata and methods needed:\n\n```vue\n<template>\n <SimpleFilter v-slot=\"{ filter, clickFilter, isDisabled, cssClasses }\" :filter=\"filter\">\n <label :class=\"cssClasses\">\n <input :checked=\"filter.selected\" type=\"checkbox\" @change=\"clickFilter\" />\n {{ filter.label }}\n </label>\n </SimpleFilter>\n</template>\n\n<script>\n import { SimpleFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'SimpleFilterTest',\n components: {\n SimpleFilter\n },\n data() {\n return {\n filter: {\n modelName: 'SimpleFilter',\n selected: false,\n id: 'category:shirts',\n value: 'category:shirts',\n facetId: 'category',\n label: 'Shirts',\n totalResults: 10\n }\n };\n }\n };\n</script>\n```\n\n### Changing default button content\n\nYou can change the content rendered by the default button using the `label` slot. There you will\nreceive the filter data.\n\n```vue\n<template>\n <SimpleFilter :filter=\"filter\">\n <template #label=\"{ filter }\">\n <img :src=\"`imgs/filters/${filter.id}.png`\" />\n <span>{{ filter.label }}</span>\n </template>\n </SimpleFilter>\n</template>\n\n<script>\n import { SimpleFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'SimpleFilterTest',\n components: {\n SimpleFilter\n },\n data() {\n return {\n filter: {\n modelName: 'SimpleFilter',\n selected: false,\n id: 'category:shirts',\n value: 'category:shirts',\n facetId: 'category',\n label: 'Shirts',\n totalResults: 10\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","innerCssClasses","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_mergeProps","_toDisplayString"],"mappings":";;;;;;AAwCqB,EAAA,MAAA,2BAAA,GAAAA,gBAAA,CAAA,kBAAA,CAAA,CAAA;AApChB,EAAA,OAAAC,SAAA,EAA6B,EAAAC,WAAA,CAAA,2BAAA,EAAA;AAAA,IAC7B,MAAYC,EAAAA,IAAAA,CAAAA,MAAAA;AAAAA,IAAAA,WAAAA,EAAAA,IAAAA,CAAAA,gBAAAA;AALjB,IAAA,UAAA,EAAA,IAAA,CAAA,eAAA;AAAA,GAAA,EAAA;AAgBI,IAAA,OAAA,EAAAC,OAAA,CAuBO,CAvCX,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,KAAA;AAAA,MAiB8BC,kBAAA,CAAA,2aAAA,CAAA;AAAA,MAAAC,UAAA,CAAU,IAAW,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA;AAAA,QAAU,MAAA;AAAA,QAAoB,WAAA;AAAA,QAAA,UAAA;AAO3E,QAAA,UAAA;AAAA,OAAA,CAAA,CAAA,EACG,MAAK;AAAA,QAAAC,kBAAA,CACS,UAAOC,UAAiB,CAAA;AAAA,UACtC,OAAO,EAAA,WAAA;AAAA,UACP,gBAAU,MAAU,CAAA,QAAA,CAAA,QAAA,EAAA;AAAA,UACrB,KAAA,EAAA,UAAA;AAAA,UACA,QAAK,EAAA,UAAA;AAAA,UACS,WAAA,EAAA,QAAA;AAAA,UAEd,IAAA,EAAA,UAAA;AAAA,SAAA,EAIA,IAA6D,CAAA,MAAA,CAAA,EAAA;AAAA,UAAAL,kBAAA,CArCrE,2HAqC2D,CAAA;AAAA,UAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,EAAA,MAAA;;AArC3D,cAAAK,eAAA,CAAA,MAAA,CAAA,KAAA,CAAA;AAAA,cAAA,CAAA;AAAA;AAAA,aAAA;AAAA,WAAA,CAAA;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/facets/components/filters/simple-filter.vue2.js CHANGED Viewed

@@ -11,6 +11,7 @@ var _sfc_main = defineComponent({
     name: 'SimpleFilter',
     xModule: facetsXModule.name,
     components: { RenderlessFilter: _sfc_main$1 },
+    inheritAttrs: false,
     props: {
         /** The filter data to render. */
         filter: {

package/js/x-modules/facets/components/filters/simple-filter.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"simple-filter.vue2.js","sources":["../../../../../../src/x-modules/facets/components/filters/simple-filter.vue"],"sourcesContent":["<template>\n <RenderlessFilter\n v-slot=\"{ filter, clickFilter, isDisabled, cssClasses }\"\n :filter=\"filter\"\n :clickEvents=\"innerClickEvents\"\n :cssClasses=\"innerCssClasses\"\n >\n <!--\n @slot The control element to render\n @binding {Filter} filter - The filter data\n @binding {() => void} clickFilter - Method that will invoke the needed actions after the user\n clicks the filter.\n @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the\n user\n @binding {Object} cssClasses - Object containing CSS classes to add to the button\n -->\n <slot\n v-bind=\"{\n filter,\n clickFilter,\n isDisabled,\n cssClasses\n }\"\n >\n <button\n @click=\"clickFilter\"\n :aria-checked=\"filter.selected.toString()\"\n :class=\"cssClasses\"\n :disabled=\"isDisabled\"\n data-test=\"filter\"\n role=\"checkbox\"\n >\n <!--\n @slot The content to render inside the button\n @binding {Filter} filter - The filter data\n -->\n <slot :filter=\"filter\" name=\"label\">{{ filter.label }}</slot>\n </button>\n </slot>\n </RenderlessFilter>\n</template>\n\n<script lang=\"ts\">\n import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';\n import { Dictionary } from '@empathyco/x-utils';\n import { computed, defineComponent, PropType } from 'vue';\n import { XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n import RenderlessFilter from './renderless-filter.vue';\n\n /*\n Renders a simple filter, emitting the needed events when clicked.\n \n @public\n /\n export default defineComponent({\n name: 'SimpleFilter',\n xModule: facetsXModule.name,\n components: { RenderlessFilter },\n props: {\n /* The filter data to render. /\n filter: {\n type: Object as PropType<SimpleFilterModel>,\n required: true\n },\n /* Additional events, with their payload, to emit when the filter is clicked. /\n clickEvents: Object as PropType<Partial<XEventsTypes>>,\n /* Inheritance CSS classes. /\n cssClasses: {\n type: Array as PropType<(string \| Dictionary<boolean>)[]>,\n default: () => []\n }\n },\n setup(props) {\n /* The {@link XEventsTypes} to emit. /\n const innerClickEvents = computed(() => ({\n UserClickedASimpleFilter: props.filter,\n ...props.clickEvents\n }));\n\n /* CSS classes to apply to the element. */\n const innerCssClasses = computed(() => [\n 'x-simple-filter',\n { 'x-simple-filter--is-selected': props.filter.selected },\n ...props.cssClasses\n ]);\n\n return {\n innerClickEvents,\n innerCssClasses\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedASimpleFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n\n## See it in action\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and the\n`UserClickedASimpleFilter` events. By default, it renders a `button` with the `filter.label`\nproperty as text.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n <SimpleFilter :filter=\"filter\" />\n</template>\n\n<script>\n import { SimpleFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'SimpleFilterTest',\n components: {\n SimpleFilter\n },\n data() {\n return {\n filter: {\n modelName: 'SimpleFilter',\n selected: false,\n id: 'category:shirts',\n value: 'category:shirts',\n facetId: 'category',\n totalResults: 10\n }\n };\n }\n };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n <SimpleFilter :clickEvents=\"{ UserClickedASimpleFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n import { SimpleFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'SimpleFilterTest',\n components: {\n SimpleFilter\n },\n data() {\n return {\n filter: {\n modelName: 'SimpleFilter',\n selected: false,\n id: 'category:shirts',\n value: 'category:shirts',\n facetId: 'category',\n totalResults: 10\n }\n };\n }\n };\n</script>\n```\n\n### Rendering an input\n\nYou can change the rendered control using the default slot. Note that because of the current Vue\nlimitations, you must only render one single root node in this slot. There you will receive all the\ndata and methods needed:\n\n```vue\n<template>\n <SimpleFilter v-slot=\"{ filter, clickFilter, isDisabled, cssClasses }\" :filter=\"filter\">\n <label :class=\"cssClasses\">\n <input :checked=\"filter.selected\" type=\"checkbox\" @change=\"clickFilter\" />\n {{ filter.label }}\n </label>\n </SimpleFilter>\n</template>\n\n<script>\n import { SimpleFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'SimpleFilterTest',\n components: {\n SimpleFilter\n },\n data() {\n return {\n filter: {\n modelName: 'SimpleFilter',\n selected: false,\n id: 'category:shirts',\n value: 'category:shirts',\n facetId: 'category',\n label: 'Shirts',\n totalResults: 10\n }\n };\n }\n };\n</script>\n```\n\n### Changing default button content\n\nYou can change the content rendered by the default button using the `label` slot. There you will\nreceive the filter data.\n\n```vue\n<template>\n <SimpleFilter :filter=\"filter\">\n <template #label=\"{ filter }\">\n <img :src=\"`imgs/filters/${filter.id}.png`\" />\n <span>{{ filter.label }}</span>\n </template>\n </SimpleFilter>\n</template>\n\n<script>\n import { SimpleFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'SimpleFilterTest',\n components: {\n SimpleFilter\n },\n data() {\n return {\n filter: {\n modelName: 'SimpleFilter',\n selected: false,\n id: 'category:shirts',\n value: 'category:shirts',\n facetId: 'category',\n label: 'Shirts',\n totalResults: 10\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["RenderlessFilter"],"mappings":";;;;~~AAkDE~~;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,oBAAEA,WAAe,EAAG;AAChC,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAqC;AAC3C,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,WAAW,EAAE,MAAyC;;AAEtD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,KAAmD;AACzD,YAAA,OAAO,EAAE,MAAM,EAAC;AAClB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;;AAET,QAAA,MAAM,gBAAiB,GAAE,QAAQ,CAAC,OAAO;YACvC,wBAAwB,EAAE,KAAK,CAAC,MAAM;YACtC,GAAG,KAAK,CAAC,WAAU;AACpB,SAAA,CAAC,CAAC,CAAA;;AAGH,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAAC,MAAM;YACrC,iBAAiB;AACjB,YAAA,EAAE,8BAA8B,EAAE,KAAK,CAAC,MAAM,CAAC,QAAO,EAAG;YACzD,GAAG,KAAK,CAAC,UAAS;AACnB,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,gBAAgB;YAChB,eAAc;SACf,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
1	+ {"version":3,"file":"simple-filter.vue2.js","sources":["../../../../../../src/x-modules/facets/components/filters/simple-filter.vue"],"sourcesContent":["<template>\n <RenderlessFilter\n v-slot=\"{ filter, clickFilter, isDisabled, cssClasses }\"\n :filter=\"filter\"\n :clickEvents=\"innerClickEvents\"\n :cssClasses=\"innerCssClasses\"\n >\n <!--\n @slot The control element to render\n @binding {Filter} filter - The filter data\n @binding {() => void} clickFilter - Method that will invoke the needed actions after the user\n clicks the filter.\n @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the\n user\n @binding {Object} cssClasses - Object containing CSS classes to add to the button\n -->\n <slot\n v-bind=\"{\n filter,\n clickFilter,\n isDisabled,\n cssClasses\n }\"\n >\n <button\n @click=\"clickFilter\"\n :aria-checked=\"filter.selected.toString()\"\n :class=\"cssClasses\"\n :disabled=\"isDisabled\"\n data-test=\"filter\"\n role=\"checkbox\"\n v-bind=\"$attrs\"\n >\n <!--\n @slot The content to render inside the button\n @binding {Filter} filter - The filter data\n -->\n <slot :filter=\"filter\" name=\"label\">{{ filter.label }}</slot>\n </button>\n </slot>\n </RenderlessFilter>\n</template>\n\n<script lang=\"ts\">\n import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';\n import { Dictionary } from '@empathyco/x-utils';\n import { computed, defineComponent, PropType } from 'vue';\n import { XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n import RenderlessFilter from './renderless-filter.vue';\n\n /*\n Renders a simple filter, emitting the needed events when clicked.\n \n @public\n /\n export default defineComponent({\n name: 'SimpleFilter',\n xModule: facetsXModule.name,\n components: { RenderlessFilter },\n inheritAttrs: false,\n props: {\n /* The filter data to render. /\n filter: {\n type: Object as PropType<SimpleFilterModel>,\n required: true\n },\n /* Additional events, with their payload, to emit when the filter is clicked. /\n clickEvents: Object as PropType<Partial<XEventsTypes>>,\n /* Inheritance CSS classes. /\n cssClasses: {\n type: Array as PropType<(string \| Dictionary<boolean>)[]>,\n default: () => []\n }\n },\n setup(props) {\n /* The {@link XEventsTypes} to emit. /\n const innerClickEvents = computed(() => ({\n UserClickedASimpleFilter: props.filter,\n ...props.clickEvents\n }));\n\n /* CSS classes to apply to the element. */\n const innerCssClasses = computed(() => [\n 'x-simple-filter',\n { 'x-simple-filter--is-selected': props.filter.selected },\n ...props.cssClasses\n ]);\n\n return {\n innerClickEvents,\n innerCssClasses\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedASimpleFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n\n## See it in action\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and the\n`UserClickedASimpleFilter` events. By default, it renders a `button` with the `filter.label`\nproperty as text.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n <SimpleFilter :filter=\"filter\" />\n</template>\n\n<script>\n import { SimpleFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'SimpleFilterTest',\n components: {\n SimpleFilter\n },\n data() {\n return {\n filter: {\n modelName: 'SimpleFilter',\n selected: false,\n id: 'category:shirts',\n value: 'category:shirts',\n facetId: 'category',\n totalResults: 10\n }\n };\n }\n };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n <SimpleFilter :clickEvents=\"{ UserClickedASimpleFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n import { SimpleFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'SimpleFilterTest',\n components: {\n SimpleFilter\n },\n data() {\n return {\n filter: {\n modelName: 'SimpleFilter',\n selected: false,\n id: 'category:shirts',\n value: 'category:shirts',\n facetId: 'category',\n totalResults: 10\n }\n };\n }\n };\n</script>\n```\n\n### Rendering an input\n\nYou can change the rendered control using the default slot. Note that because of the current Vue\nlimitations, you must only render one single root node in this slot. There you will receive all the\ndata and methods needed:\n\n```vue\n<template>\n <SimpleFilter v-slot=\"{ filter, clickFilter, isDisabled, cssClasses }\" :filter=\"filter\">\n <label :class=\"cssClasses\">\n <input :checked=\"filter.selected\" type=\"checkbox\" @change=\"clickFilter\" />\n {{ filter.label }}\n </label>\n </SimpleFilter>\n</template>\n\n<script>\n import { SimpleFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'SimpleFilterTest',\n components: {\n SimpleFilter\n },\n data() {\n return {\n filter: {\n modelName: 'SimpleFilter',\n selected: false,\n id: 'category:shirts',\n value: 'category:shirts',\n facetId: 'category',\n label: 'Shirts',\n totalResults: 10\n }\n };\n }\n };\n</script>\n```\n\n### Changing default button content\n\nYou can change the content rendered by the default button using the `label` slot. There you will\nreceive the filter data.\n\n```vue\n<template>\n <SimpleFilter :filter=\"filter\">\n <template #label=\"{ filter }\">\n <img :src=\"`imgs/filters/${filter.id}.png`\" />\n <span>{{ filter.label }}</span>\n </template>\n </SimpleFilter>\n</template>\n\n<script>\n import { SimpleFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'SimpleFilterTest',\n components: {\n SimpleFilter\n },\n data() {\n return {\n filter: {\n modelName: 'SimpleFilter',\n selected: false,\n id: 'category:shirts',\n value: 'category:shirts',\n facetId: 'category',\n label: 'Shirts',\n totalResults: 10\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["RenderlessFilter"],"mappings":";;;;AAmDE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,oBAAEA,WAAe,EAAG;AAChC,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAqC;AAC3C,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,WAAW,EAAE,MAAyC;;AAEtD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,KAAmD;AACzD,YAAA,OAAO,EAAE,MAAM,EAAC;AAClB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;;AAET,QAAA,MAAM,gBAAiB,GAAE,QAAQ,CAAC,OAAO;YACvC,wBAAwB,EAAE,KAAK,CAAC,MAAM;YACtC,GAAG,KAAK,CAAC,WAAU;AACpB,SAAA,CAAC,CAAC,CAAA;;AAGH,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAAC,MAAM;YACrC,iBAAiB;AACjB,YAAA,EAAE,8BAA8B,EAAE,KAAK,CAAC,MAAM,CAAC,QAAO,EAAG;YACzD,GAAG,KAAK,CAAC,UAAS;AACnB,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,gBAAgB;YAChB,eAAc;SACf,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/facets/composables/use-facets.js CHANGED Viewed

@@ -26,7 +26,9 @@ function useFacets(props) {
         if (props.facetsIds) {
             return props.facetsIds.reduce((selectedFilters, facetId) => [
                 ...selectedFilters,
-                ...selectedFiltersByFacet.value[facetId]
+                ...(Array.isArray(selectedFiltersByFacet.value[facetId])
+                    ? selectedFiltersByFacet.value[facetId]
+                    : [])
             ], []);
         }
         return selectedFiltersGetter.value;