@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

package/js/x-modules/facets/components/lists/selected-filters-list.vue.js

@@ -1,110 +1,79 @@
-import script from './selected-filters-list.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './selected-filters-list.vue2.js';
+import { resolveComponent, openBlock, createBlock, withCtx, resolveDynamicComponent, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot, createElementVNode, toDisplayString, createTextVNode } from 'vue';
+import _export_sfc from '../../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("SelectedFilters", {
-    attrs: { facetsIds: _vm.facetsIds, alwaysVisible: _vm.alwaysVisible },
-    scopedSlots: _vm._u(
-      [
+const _hoisted_1 = { class: "x-tag" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_SelectedFilters = resolveComponent("SelectedFilters");
+  return openBlock(), createBlock(_component_SelectedFilters, {
+    facetsIds: _ctx.facetsIds,
+    alwaysVisible: _ctx.alwaysVisible
+  }, {
+    default: withCtx(({ selectedFilters }) => [
+      (openBlock(), createBlock(
+        resolveDynamicComponent(_ctx.animation),
+        {
+          class: "x-selected-filters-list",
+          "data-test": "selected-filters-list",
+          tag: "ul"
+        },
         {
-          key: "default",
-          fn: function (ref) {
-            var selectedFilters = ref.selectedFilters;
-            return [
-              _c(
-                _vm.animation,
-                {
-                  tag: "component",
-                  staticClass: "x-selected-filters-list",
-                  attrs: { "data-test": "selected-filters-list", tag: "ul" },
-                },
-                _vm._l(_vm.mapSlot(selectedFilters), function (ref) {
-                  var slotName = ref.slotName;
-                  var selectedFilter = ref.selectedFilter;
-                  return _c(
-                    "li",
-                    {
-                      key: selectedFilter.id,
-                      staticClass: "x-selected-filters-list__item",
-                      attrs: { "data-test": "selected-filters-list-item" },
-                    },
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(_ctx.mapSlot(selectedFilters), ({ slotName, selectedFilter }) => {
+                return openBlock(), createElementBlock("li", {
+                  key: selectedFilter.id,
+                  class: "x-selected-filters-list__item",
+                  "data-test": "selected-filters-list-item"
+                }, [
+                  createCommentVNode("\n          @slot Custom filter rendering. Dynamic slot defined in the template with the filter\n          facet id. It renders the filter label by default.\n              @binding {Filter} filter - Filter to render.\n        "),
+                  _ctx.hasSlot(slotName) ? renderSlot(_ctx.$slots, slotName, {
+                    key: 0,
+                    filter: selectedFilter
+                  }, () => [
+                    createElementVNode(
+                      "span",
+                      _hoisted_1,
+                      toDisplayString(selectedFilter.label),
+                      1
+                      /* TEXT */
+                    )
+                  ]) : (openBlock(), createElementBlock(
+                    Fragment,
+                    { key: 1 },
                     [
-                      _vm.$scopedSlots[slotName]
-                        ? _vm._t(
-                            slotName,
-                            function () {
-                              return [
-                                _c("span", { staticClass: "x-tag" }, [
-                                  _vm._v(_vm._s(selectedFilter.label)),
-                                ]),
-                              ]
-                            },
-                            { filter: selectedFilter }
-                          )
-                        : _vm._t(
-                            "default",
-                            function () {
-                              return [
-                                _vm._v(
-                                  " " + _vm._s(selectedFilter.label) + " "
-                                ),
-                              ]
-                            },
-                            { filter: selectedFilter }
-                          ),
+                      createCommentVNode("\n          @slot Default filter rendering. It renders the filter label by default.\n              @binding {Filter} filter - Filter to render.\n        "),
+                      renderSlot(_ctx.$slots, "default", { filter: selectedFilter }, () => [
+                        createTextVNode(
+                          toDisplayString(selectedFilter.label),
+                          1
+                          /* TEXT */
+                        )
+                      ])
                     ],
-                    2
-                  )
-                }),
-                0
-              ),
-            ]
-          },
+                    2112
+                    /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                  ))
+                ]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ]),
+          _: 2
+          /* DYNAMIC */
         },
-      ],
-      null,
-      true
-    ),
-  })
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
+        1024
+        /* DYNAMIC_SLOTS */
+      ))
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["facetsIds", "alwaysVisible"]);
+}
+var selectedFiltersList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-export { __vue_component__ as default };
+export { selectedFiltersList as default };
 //# sourceMappingURL=selected-filters-list.vue.js.map

package/js/x-modules/facets/components/lists/selected-filters-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"selected-filters-list.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/selected-filters-list.vue"],"sourcesContent":["<template>\n  <SelectedFilters\n    v-slot=\"{ selectedFilters }\"\n    :facetsIds=\"facetsIds\"\n    :alwaysVisible=\"alwaysVisible\"\n  >\n    <component\n      :is=\"animation\"\n      class=\"x-selected-filters-list\"\n      data-test=\"selected-filters-list\"\n      tag=\"ul\"\n    >\n      <li\n        v-for=\"{ slotName, selectedFilter } in mapSlot(selectedFilters)\"\n        :key=\"selectedFilter.id\"\n        class=\"x-selected-filters-list__item\"\n        data-test=\"selected-filters-list-item\"\n      >\n        <!--\n          @slot Custom filter rendering. Dynamic slot defined in the template with the filter\n          facet id. It renders the filter label by default.\n              @binding {Filter} filter - Filter to render.\n        -->\n        <slot v-if=\"$scopedSlots[slotName]\" :name=\"slotName\" :filter=\"selectedFilter\">\n          <span class=\"x-tag\">{{ selectedFilter.label }}</span>\n        </slot>\n\n        <!--\n          @slot Default filter rendering. It renders the filter label by default.\n              @binding {Filter} filter - Filter to render.\n        -->\n        <slot v-else name=\"default\" :filter=\"selectedFilter\">\n          {{ selectedFilter.label }}\n        </slot>\n      </li>\n    </component>\n  </SelectedFilters>\n</template>\n\n<script lang=\"ts\">\n  import { Component, Prop, Vue } from 'vue-property-decorator';\n  import { Filter, isFacetFilter } from '@empathyco/x-types';\n  import { xComponentMixin } from '../../../../components/x-component.mixin';\n  import { toKebabCase } from '../../../../utils/string';\n  import FacetsMixin from '../facets.mixin';\n  import { facetsXModule } from '../../x-module';\n  import SelectedFilters from './selected-filters.vue';\n\n  /**\n   * Custom interface to provide a slot name to a Filter.\n   *\n   * @internal\n   */\n  interface RenderFilter {\n    slotName: string;\n    selectedFilter: Filter;\n  }\n\n  /**\n   * This component renders a list of selected filters from every facet, or from the facet\n   * ids passed as property. It uses the SelectedFilters component (state).\n   *\n   * It provides two slots: a scoped one which name is the filter facet id; and a default one.\n   * Both exposes the filter and renders the filter label by default.\n   *\n   * The property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n   *\n   * @remarks It extends {@link FacetsMixin}.\n   *\n   * @public\n   */\n  @Component({\n    components: { SelectedFilters },\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class SelectedFiltersList extends FacetsMixin {\n    /**\n     * Animation component that will be used to animate the selected filters list.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * Transforms a dictionary of Filters including the slot name.\n     *\n     * @param selectedFilters - A list of selected filters without slot name.\n     *\n     * @returns A dictionary of facets with the slot name.\n     *\n     * @internal\n     */\n    protected mapSlot(selectedFilters: Filter[]): RenderFilter[] {\n      return selectedFilters.map(filter => ({\n        slotName: isFacetFilter(filter) ? toKebabCase(filter.facetId as string) : 'default',\n        selectedFilter: filter\n      }));\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThis component renders a list of selected filters from every facet, or from the facets which facets\nids are passed as property. It uses the SelectedFilters component (state).\n\nIt provides two slots: a scoped one which name is the filter facet id; and a default one. Both\nexposes the filter and renders the filter label by default.\n\nThe property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n\n### Default usage\n\n```vue\n<template>\n  <SelectedFiltersList />\n</template>\n\n<script>\n  import { SelectedFiltersList } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      SelectedFiltersList\n    }\n  };\n</script>\n```\n\n### Customized usage\n\n```vue\n<template>\n  <SelectedFiltersList #default=\"{ filter }\">Default: {{ filter.label }}</SelectedFiltersList>\n</template>\n\n<script>\n  import { SelectedFilters } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      SelectedFilters\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <SelectedFiltersList>\n    <template #default=\"{ filter }\">Default: {{ filter.label }}</template>\n    <template #brand_facet=\"{ filter }\">Brand: {{ filter.label }}</template>\n    <template #age_facet=\"{ filter }\">Age: {{ filter.label }}</template>\n    <template #price_facet=\"{ filter }\">Price: {{ filter.label }}</template>\n  </SelectedFiltersList>\n</template>\n\n<script>\n  import { SelectedFilters } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      SelectedFilters\n    }\n  };\n</script>\n```\n\n#### Always visible\n\nIf \"alwaysVisible\" is true, the component is rendered no matter if there are some filter selected.\nIf \"alwaysVisible\" is false (default), the component is rendered if there are some filter selected.\n\n```vue\n<SelectedFiltersList :alwaysVisible=\"true\" />\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">\n  <ul class=\"x-selected-filters-list\" data-test=\"selected-filters-list\"></ul>\n</div>\n```\n\n#### Providing an array of facet ids\n\nIn this example, the selected filters computed are the ones that match the facet ids passed as\nproperties.\n\n```vue\n<SelectedFilters :facetsIds=\"['brand_facet', 'gender_facet']\" />\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"selected-filters-list.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/selected-filters-list.vue"],"sourcesContent":["<template>\n  <SelectedFilters\n    v-slot=\"{ selectedFilters }\"\n    :facetsIds=\"facetsIds\"\n    :alwaysVisible=\"alwaysVisible\"\n  >\n    <component\n      :is=\"animation\"\n      class=\"x-selected-filters-list\"\n      data-test=\"selected-filters-list\"\n      tag=\"ul\"\n    >\n      <li\n        v-for=\"{ slotName, selectedFilter } in mapSlot(selectedFilters)\"\n        :key=\"selectedFilter.id\"\n        class=\"x-selected-filters-list__item\"\n        data-test=\"selected-filters-list-item\"\n      >\n        <!--\n          @slot Custom filter rendering. Dynamic slot defined in the template with the filter\n          facet id. It renders the filter label by default.\n              @binding {Filter} filter - Filter to render.\n        -->\n        <slot v-if=\"hasSlot(slotName)\" :name=\"slotName\" :filter=\"selectedFilter\">\n          <span class=\"x-tag\">{{ selectedFilter.label }}</span>\n        </slot>\n\n        <!--\n          @slot Default filter rendering. It renders the filter label by default.\n              @binding {Filter} filter - Filter to render.\n        -->\n        <slot v-else name=\"default\" :filter=\"selectedFilter\">\n          {{ selectedFilter.label }}\n        </slot>\n      </li>\n    </component>\n  </SelectedFilters>\n</template>\n\n<script lang=\"ts\">\n  import { Facet, Filter, isFacetFilter } from '@empathyco/x-types';\n  import { defineComponent, PropType } from 'vue';\n  import { animationProp } from '../../../../utils/options-api';\n  import { toKebabCase } from '../../../../utils/string';\n  import { useFacets } from '../../composables/use-facets';\n  import { facetsXModule } from '../../x-module';\n  import SelectedFilters from './selected-filters.vue';\n\n  /**\n   * Custom interface to provide a slot name to a Filter.\n   *\n   * @internal\n   */\n  interface RenderFilter {\n    slotName: string;\n    selectedFilter: Filter;\n  }\n\n  /**\n   * This component renders a list of selected filters from every facet, or from the facet\n   * ids passed as property. It uses the SelectedFilters component (state).\n   *\n   * It provides two slots: a scoped one which name is the filter facet id; and a default one.\n   * Both exposes the filter and renders the filter label by default.\n   *\n   * The property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SelectedFiltersList',\n    xModule: facetsXModule.name,\n    components: { SelectedFilters },\n    props: {\n      /** Array of facets ids used to get the selected filters for those facets. */\n      facetsIds: Array as PropType<Array<Facet['id']>>,\n      /** Flag to render the component even if there are no filters selected. */\n      alwaysVisible: Boolean,\n      /** Animation component that will be used to animate the selected filters list. */\n      animation: {\n        type: animationProp,\n        default: 'ul'\n      }\n    },\n    setup: function (props, { slots }) {\n      const { selectedFilters } = useFacets(props);\n\n      /**\n       * Transforms a dictionary of Filters including the slot name.\n       *\n       * @param selectedFilters - A list of selected filters without slot name.\n       *\n       * @returns A dictionary of facets with the slot name.\n       */\n      function mapSlot(selectedFilters: Filter[]): RenderFilter[] {\n        return selectedFilters.map(filter => ({\n          slotName: isFacetFilter(filter) ? toKebabCase(filter.facetId as string) : 'default',\n          selectedFilter: filter\n        }));\n      }\n\n      /**\n       * Whether the slot is present in the template or not.\n       *\n       * @param name - The slot name.\n       *\n       * @returns True is the slot is present in the template. False otherwise.\n       */\n      function hasSlot(name: string): boolean {\n        return !!slots[name];\n      }\n\n      return {\n        selectedFilters,\n        mapSlot,\n        hasSlot\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThis component renders a list of selected filters from every facet, or from the facets which facets\nids are passed as property. It uses the SelectedFilters component (state).\n\nIt provides two slots: a scoped one which name is the filter facet id; and a default one. Both\nexposes the filter and renders the filter label by default.\n\nThe property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n\n### Default usage\n\n```vue\n<template>\n  <SelectedFiltersList />\n</template>\n\n<script>\n  import { SelectedFiltersList } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      SelectedFiltersList\n    }\n  };\n</script>\n```\n\n### Customized usage\n\n```vue\n<template>\n  <SelectedFiltersList #default=\"{ filter }\">Default: {{ filter.label }}</SelectedFiltersList>\n</template>\n\n<script>\n  import { SelectedFilters } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      SelectedFilters\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <SelectedFiltersList>\n    <template #default=\"{ filter }\">Default: {{ filter.label }}</template>\n    <template #brand_facet=\"{ filter }\">Brand: {{ filter.label }}</template>\n    <template #age_facet=\"{ filter }\">Age: {{ filter.label }}</template>\n    <template #price_facet=\"{ filter }\">Price: {{ filter.label }}</template>\n  </SelectedFiltersList>\n</template>\n\n<script>\n  import { SelectedFilters } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      SelectedFilters\n    }\n  };\n</script>\n```\n\n#### Always visible\n\nIf \"alwaysVisible\" is true, the component is rendered no matter if there are some filter selected.\nIf \"alwaysVisible\" is false (default), the component is rendered if there are some filter selected.\n\n```vue\n<SelectedFiltersList :alwaysVisible=\"true\" />\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">\n  <ul class=\"x-selected-filters-list\" data-test=\"selected-filters-list\"></ul>\n</div>\n```\n\n#### Providing an array of facet ids\n\nIn this example, the selected filters computed are the ones that match the facet ids passed as\nproperties.\n\n```vue\n<SelectedFilters :facetsIds=\"['brand_facet', 'gender_facet']\" />\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","hasSlot","_toDisplayString","_createCommentVNode","_renderSlot"],"mappings":";;;;;;AAoCoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AAhCf,EAAA,OAAAC,SAAA,EAA4B,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAAA,SAAA,EAAA,IAAA,CAAA,SAAA;IAJjC,aAmCgB,EAAA,IAAA,CAAA,aAAA;AAAA,GAAA,EAAA;AA3BL,IAAA,OAAA,EAAAC,OAAA,CAAC,CAAyB,EAAA,eAAA,EAAA,KAAA;AAAA,OAAAF,SAAA,EACrB,EAAAC,WAAA;AAAA,QAAuBE,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA;AAAA,QAAA;AAAA,UACjC,KAAI,EAAA,yBAAA;AAAA,UAAA,WAAA,EAAA,uBAAA;AAVV,UAAA,GAAA,EAAA,IAAA;AAAA,SAAA;;;AAcc,aAAAH,SAAA,CAAA,IAAA,CAAA,EAAAI,kBAAA;AAAA,cAAiBC,QAAA;AAAA,cAAA,IAAA;AAAA,cAAAC,UAAA,CAAA,IAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAA,EAAA,KAAA;AAClB,gBAAA,OAAAN,SAAA,EAAgC,EAAAI,kBAAA,CAAA,IAAA,EAAA;AAAA,kBACrC,GAAU,EAAA,cAAA,CAAA,EAAA;AAAA,kBAAA,KAAA,EAAA,+BAAA;AAEV,kBAAA,WAAA,EAAA,4BAAA;AAAA,iBAKYG,EAAAA;AAAAA,kBAAAA,kBAAAA,CAEL,oOAFuC,CAAA;AAAA,kBAAA,IAAA,CAvBtD,+BAuBiE,IAAc,CAAA,MAAA,EAAA,QAAA,EAAA;AAAA,oBAEhE,GAAA,EAAA,CAAA;AAAA,oBADL,MAAA,EAAA,cAAA;AAAA,mBAAA,EAAA,MAAA;;AAOF,sBAAA,MAAA;AAAA,sBAAA,UAAA;AAAA,sBAEOC,eAjCf,CAAA,cAAA,CAAA,KAAA,CAAA;AAAA,sBAAA,CAAA;AAAA;AAAA,qBAAA;AAAA,mBAAA,CAAA,IAAAR,SAAA,EAiCe,EAAAI,kBAAA;AAAA,oBAAAC,QAAA;AAAA,oBAF4B,EAAE,GAAA,EAAA,CAAA,EAAA;AAAA,oBAAA;AAAA,sBAAAI,kBAAA,CA/B7C,2JAgCiC,CAAA;AAAA,sBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,MAAA,EAAA,cAAA,EAAA,EAAA,MAAA;;;;;;;;;;;;AAhCjC,eAAA,CAAA;AAAA,cAAA,GAAA;AAAA;AAAA,aAAA;AAAA,WAAA,CAAA;;;AAAA,SAAA;AAAA,QAAA,IAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/facets/components/lists/selected-filters-list.vue2.js

@@ -1,11 +1,10 @@
-import { __decorate } from 'tslib';
-import { Prop, Component } from 'vue-property-decorator';
 import { isFacetFilter } from '@empathyco/x-types';
-import { xComponentMixin } from '../../../../components/x-component.mixin.js';
+import { defineComponent } from 'vue';
+import { animationProp } from '../../../../utils/options-api.js';
 import { toKebabCase } from '../../../../utils/string.js';
-import FacetsMixin from '../facets.mixin.js';
+import { useFacets } from '../../composables/use-facets.js';
 import { facetsXModule } from '../../x-module.js';
-import __vue_component__ from './selected-filters.vue.js';
+import _sfc_main$1 from './selected-filters.vue.js';
 
 /**
  * This component renders a list of selected filters from every facet, or from the facet
@@ -16,37 +15,55 @@ import __vue_component__ from './selected-filters.vue.js';
  *
  * The property "alwaysVisible" handles if the component is rendered if no filters are selected.
  *
- * @remarks It extends {@link FacetsMixin}.
- *
  * @public
  */
-let SelectedFiltersList = class SelectedFiltersList extends FacetsMixin {
-    /**
-     * Transforms a dictionary of Filters including the slot name.
-     *
-     * @param selectedFilters - A list of selected filters without slot name.
-     *
-     * @returns A dictionary of facets with the slot name.
-     *
-     * @internal
-     */
-    mapSlot(selectedFilters) {
-        return selectedFilters.map(filter => ({
-            slotName: isFacetFilter(filter) ? toKebabCase(filter.facetId) : 'default',
-            selectedFilter: filter
-        }));
+var _sfc_main = defineComponent({
+    name: 'SelectedFiltersList',
+    xModule: facetsXModule.name,
+    components: { SelectedFilters: _sfc_main$1 },
+    props: {
+        /** Array of facets ids used to get the selected filters for those facets. */
+        facetsIds: Array,
+        /** Flag to render the component even if there are no filters selected. */
+        alwaysVisible: Boolean,
+        /** Animation component that will be used to animate the selected filters list. */
+        animation: {
+            type: animationProp,
+            default: 'ul'
+        }
+    },
+    setup: function (props, { slots }) {
+        const { selectedFilters } = useFacets(props);
+        /**
+         * Transforms a dictionary of Filters including the slot name.
+         *
+         * @param selectedFilters - A list of selected filters without slot name.
+         *
+         * @returns A dictionary of facets with the slot name.
+         */
+        function mapSlot(selectedFilters) {
+            return selectedFilters.map(filter => ({
+                slotName: isFacetFilter(filter) ? toKebabCase(filter.facetId) : 'default',
+                selectedFilter: filter
+            }));
+        }
+        /**
+         * Whether the slot is present in the template or not.
+         *
+         * @param name - The slot name.
+         *
+         * @returns True is the slot is present in the template. False otherwise.
+         */
+        function hasSlot(name) {
+            return !!slots[name];
+        }
+        return {
+            selectedFilters,
+            mapSlot,
+            hasSlot
+        };
     }
-};
-__decorate([
-    Prop({ default: 'ul' })
-], SelectedFiltersList.prototype, "animation", void 0);
-SelectedFiltersList = __decorate([
-    Component({
-        components: { SelectedFilters: __vue_component__ },
-        mixins: [xComponentMixin(facetsXModule)]
-    })
-], SelectedFiltersList);
-var script = SelectedFiltersList;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=selected-filters-list.vue2.js.map

package/js/x-modules/facets/components/lists/selected-filters-list.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"selected-filters-list.vue2.js","sources":["../../../../../../src/x-modules/facets/components/lists/selected-filters-list.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { Component, Prop, Vue } from 'vue-property-decorator';\n  import { Filter, isFacetFilter } from '@empathyco/x-types';\n  import { xComponentMixin } from '../../../../components/x-component.mixin';\n  import { toKebabCase } from '../../../../utils/string';\n  import FacetsMixin from '../facets.mixin';\n  import { facetsXModule } from '../../x-module';\n  import SelectedFilters from './selected-filters.vue';\n\n  /**\n   * Custom interface to provide a slot name to a Filter.\n   *\n   * @internal\n   */\n  interface RenderFilter {\n    slotName: string;\n    selectedFilter: Filter;\n  }\n\n  /**\n   * This component renders a list of selected filters from every facet, or from the facet\n   * ids passed as property. It uses the SelectedFilters component (state).\n   *\n   * It provides two slots: a scoped one which name is the filter facet id; and a default one.\n   * Both exposes the filter and renders the filter label by default.\n   *\n   * The property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n   *\n   * @remarks It extends {@link FacetsMixin}.\n   *\n   * @public\n   */\n  @Component({\n    components: { SelectedFilters },\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class SelectedFiltersList extends FacetsMixin {\n    /**\n     * Animation component that will be used to animate the selected filters list.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * Transforms a dictionary of Filters including the slot name.\n     *\n     * @param selectedFilters - A list of selected filters without slot name.\n     *\n     * @returns A dictionary of facets with the slot name.\n     *\n     * @internal\n     */\n    protected mapSlot(selectedFilters: Filter[]): RenderFilter[] {\n      return selectedFilters.map(filter => ({\n        slotName: isFacetFilter(filter) ? toKebabCase(filter.facetId as string) : 'default',\n        selectedFilter: filter\n      }));\n    }\n  }\n"],"names":["SelectedFilters"],"mappings":";;;;;;;;;AA0DE;;;;;;;;;;;;AAYG;AAKY,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,WAAW,CAAA;AAS1D;;;;;;;;AAQG;AACO,IAAA,OAAO,CAAC,eAAyB,EAAA;QACzC,OAAO,eAAe,CAAC,GAAG,CAAC,MAAM,KAAK;AACpC,YAAA,QAAQ,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,OAAiB,CAAC,GAAG,SAAS;AACnF,YAAA,cAAc,EAAE,MAAM;AACvB,SAAA,CAAC,CAAC,CAAC;KACL;CACF,CAAA;AAjBC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACW,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAPhB,mBAAmB,GAAA,UAAA,CAAA;AAJvC,IAAA,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;AAC/B,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;AACmB,CAAA,EAAA,mBAAmB,CAwBvC,CAAA;aAxBoB,mBAAmB;;;;"}
+{"version":3,"file":"selected-filters-list.vue2.js","sources":["../../../../../../src/x-modules/facets/components/lists/selected-filters-list.vue"],"sourcesContent":["<template>\n  <SelectedFilters\n    v-slot=\"{ selectedFilters }\"\n    :facetsIds=\"facetsIds\"\n    :alwaysVisible=\"alwaysVisible\"\n  >\n    <component\n      :is=\"animation\"\n      class=\"x-selected-filters-list\"\n      data-test=\"selected-filters-list\"\n      tag=\"ul\"\n    >\n      <li\n        v-for=\"{ slotName, selectedFilter } in mapSlot(selectedFilters)\"\n        :key=\"selectedFilter.id\"\n        class=\"x-selected-filters-list__item\"\n        data-test=\"selected-filters-list-item\"\n      >\n        <!--\n          @slot Custom filter rendering. Dynamic slot defined in the template with the filter\n          facet id. It renders the filter label by default.\n              @binding {Filter} filter - Filter to render.\n        -->\n        <slot v-if=\"hasSlot(slotName)\" :name=\"slotName\" :filter=\"selectedFilter\">\n          <span class=\"x-tag\">{{ selectedFilter.label }}</span>\n        </slot>\n\n        <!--\n          @slot Default filter rendering. It renders the filter label by default.\n              @binding {Filter} filter - Filter to render.\n        -->\n        <slot v-else name=\"default\" :filter=\"selectedFilter\">\n          {{ selectedFilter.label }}\n        </slot>\n      </li>\n    </component>\n  </SelectedFilters>\n</template>\n\n<script lang=\"ts\">\n  import { Facet, Filter, isFacetFilter } from '@empathyco/x-types';\n  import { defineComponent, PropType } from 'vue';\n  import { animationProp } from '../../../../utils/options-api';\n  import { toKebabCase } from '../../../../utils/string';\n  import { useFacets } from '../../composables/use-facets';\n  import { facetsXModule } from '../../x-module';\n  import SelectedFilters from './selected-filters.vue';\n\n  /**\n   * Custom interface to provide a slot name to a Filter.\n   *\n   * @internal\n   */\n  interface RenderFilter {\n    slotName: string;\n    selectedFilter: Filter;\n  }\n\n  /**\n   * This component renders a list of selected filters from every facet, or from the facet\n   * ids passed as property. It uses the SelectedFilters component (state).\n   *\n   * It provides two slots: a scoped one which name is the filter facet id; and a default one.\n   * Both exposes the filter and renders the filter label by default.\n   *\n   * The property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SelectedFiltersList',\n    xModule: facetsXModule.name,\n    components: { SelectedFilters },\n    props: {\n      /** Array of facets ids used to get the selected filters for those facets. */\n      facetsIds: Array as PropType<Array<Facet['id']>>,\n      /** Flag to render the component even if there are no filters selected. */\n      alwaysVisible: Boolean,\n      /** Animation component that will be used to animate the selected filters list. */\n      animation: {\n        type: animationProp,\n        default: 'ul'\n      }\n    },\n    setup: function (props, { slots }) {\n      const { selectedFilters } = useFacets(props);\n\n      /**\n       * Transforms a dictionary of Filters including the slot name.\n       *\n       * @param selectedFilters - A list of selected filters without slot name.\n       *\n       * @returns A dictionary of facets with the slot name.\n       */\n      function mapSlot(selectedFilters: Filter[]): RenderFilter[] {\n        return selectedFilters.map(filter => ({\n          slotName: isFacetFilter(filter) ? toKebabCase(filter.facetId as string) : 'default',\n          selectedFilter: filter\n        }));\n      }\n\n      /**\n       * Whether the slot is present in the template or not.\n       *\n       * @param name - The slot name.\n       *\n       * @returns True is the slot is present in the template. False otherwise.\n       */\n      function hasSlot(name: string): boolean {\n        return !!slots[name];\n      }\n\n      return {\n        selectedFilters,\n        mapSlot,\n        hasSlot\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThis component renders a list of selected filters from every facet, or from the facets which facets\nids are passed as property. It uses the SelectedFilters component (state).\n\nIt provides two slots: a scoped one which name is the filter facet id; and a default one. Both\nexposes the filter and renders the filter label by default.\n\nThe property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n\n### Default usage\n\n```vue\n<template>\n  <SelectedFiltersList />\n</template>\n\n<script>\n  import { SelectedFiltersList } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      SelectedFiltersList\n    }\n  };\n</script>\n```\n\n### Customized usage\n\n```vue\n<template>\n  <SelectedFiltersList #default=\"{ filter }\">Default: {{ filter.label }}</SelectedFiltersList>\n</template>\n\n<script>\n  import { SelectedFilters } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      SelectedFilters\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <SelectedFiltersList>\n    <template #default=\"{ filter }\">Default: {{ filter.label }}</template>\n    <template #brand_facet=\"{ filter }\">Brand: {{ filter.label }}</template>\n    <template #age_facet=\"{ filter }\">Age: {{ filter.label }}</template>\n    <template #price_facet=\"{ filter }\">Price: {{ filter.label }}</template>\n  </SelectedFiltersList>\n</template>\n\n<script>\n  import { SelectedFilters } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      SelectedFilters\n    }\n  };\n</script>\n```\n\n#### Always visible\n\nIf \"alwaysVisible\" is true, the component is rendered no matter if there are some filter selected.\nIf \"alwaysVisible\" is false (default), the component is rendered if there are some filter selected.\n\n```vue\n<SelectedFiltersList :alwaysVisible=\"true\" />\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">\n  <ul class=\"x-selected-filters-list\" data-test=\"selected-filters-list\"></ul>\n</div>\n```\n\n#### Providing an array of facet ids\n\nIn this example, the selected filters computed are the ones that match the facet ids passed as\nproperties.\n\n```vue\n<SelectedFilters :facetsIds=\"['brand_facet', 'gender_facet']\" />\n```\n</docs>\n"],"names":["SelectedFilters"],"mappings":";;;;;;;;AA0DE;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,qBAAqB;IAC3B,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,mBAAEA,WAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE,KAAqC;;AAEhD,QAAA,aAAa,EAAE,OAAO;;AAEtB,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;AACD,IAAA,KAAK,EAAE,UAAU,KAAK,EAAE,EAAE,KAAM,EAAC,EAAA;QAC/B,MAAM,EAAE,eAAc,KAAM,SAAS,CAAC,KAAK,CAAC,CAAA;AAE5C;;;;;;AAME;QACF,SAAS,OAAO,CAAC,eAAyB,EAAA;YACxC,OAAO,eAAe,CAAC,GAAG,CAAC,MAAO,KAAI;AACpC,gBAAA,QAAQ,EAAE,aAAa,CAAC,MAAM,CAAA,GAAI,WAAW,CAAC,MAAM,CAAC,OAAiB,CAAE,GAAE,SAAS;AACnF,gBAAA,cAAc,EAAE,MAAK;AACtB,aAAA,CAAC,CAAC,CAAA;SACL;AAEA;;;;;;AAME;QACF,SAAS,OAAO,CAAC,IAAY,EAAA;AAC3B,YAAA,OAAO,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;SACtB;QAEA,OAAO;YACL,eAAe;YACf,OAAO;YACP,OAAM;SACP,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/facets/components/lists/selected-filters.vue.js

@@ -1,63 +1,33 @@
-import script from './selected-filters.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import { defineComponent, h } from 'vue';
+import { useFacets } from '../../composables/use-facets.js';
+import { facetsXModule } from '../../x-module.js';
 
-/* script */
-const __vue_script__ = script;
+/**
+ * Provides a scoped slot with the selected filters from every facet, or from the facet which
+ * facet id is passed as property.
+ *
+ * The default slot renders the length of the selected filters array.
+ * The property "alwaysVisible" handles if the component is rendered if no filters are selected.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'SelectedFilters',
+    xModule: facetsXModule.name,
+    props: {
+        /** Array of facets ids used to get the selected filters for those facets. */
+        facetsIds: Array,
+        /** Flag to render the component even if there are no filters selected. */
+        alwaysVisible: Boolean
+    },
+    setup: function (props, { slots }) {
+        const { selectedFilters, isVisible } = useFacets(props);
+        return () => isVisible.value
+            ? slots.default?.({ selectedFilters: selectedFilters.value })[0] ??
+                h('span', `${selectedFilters.value.length}`)
+            : '';
+    }
+});
 
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _vm.isVisible
-    ? _c(
-        "NoElement",
-        { staticClass: "x-selected-filters" },
-        [
-          _vm._t(
-            "default",
-            function () {
-              return [_vm._v(_vm._s(_vm.selectedFilters.length))]
-            },
-            null,
-            { selectedFilters: _vm.selectedFilters }
-          ),
-        ],
-        2
-      )
-    : _vm._e()
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { _sfc_main as default };
 //# sourceMappingURL=selected-filters.vue.js.map

package/js/x-modules/facets/components/lists/selected-filters.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"selected-filters.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/selected-filters.vue"],"sourcesContent":["<template>\n  <NoElement v-if=\"isVisible\" class=\"x-selected-filters\">\n    <slot v-bind=\"{ selectedFilters }\">{{ selectedFilters.length }}</slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import Component from 'vue-class-component';\n  import { NoElement } from '../../../../components';\n  import { xComponentMixin } from '../../../../components/x-component.mixin';\n  import FacetsMixin from '../facets.mixin';\n  import { facetsXModule } from '../../x-module';\n\n  /**\n   * Provides a scoped slot with the selected filters from every facet, or from the facet which\n   * facet id is passed as property.\n   *\n   * The default slot renders the length of the selected filters array.\n   * The property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n   *\n   * @remarks It extends {@link FacetsMixin}.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(facetsXModule)],\n    components: {\n      NoElement\n    }\n  })\n  export default class SelectedFilters extends FacetsMixin {}\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nProvides a scoped slot with the selected filters from every facet, or from the facet which facet id\nis passed as property.\n\nThe default slot renders the length of the selected filters array.\n\n### Basic usage\n\n```vue\n<SelectedFilters />\n```\n\n### Always visible\n\nIf \"alwaysVisible\" is true, the component is rendered no matter if there are some filter selected.\nIf \"alwaysVisible\" is false (default), the component is rendered if there are some filter selected.\n\n```vue\n<SelectedFilters />\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">1</div>\n```\n\n### Customizing its content\n\nIn this example, renders a custom message using the default scoped slot.\n\n```vue\n<SelectedFilters>\n  <template #default=\"{ selectedFilters }\">\n    Selected filters: {{ selectedFilters.length }}\n  </template>\n</SelectedFilters>\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">Selected filters: 1</div>\n```\n\nIn this example, the selected filters are filtered by the facetsIds property.\n\n```vue\n<SelectedFilters :facetsIds=\"['brand_facet']\" />\n```\n\n```vue\n<SelectedFilters :facetsIds=\"['brand_facet', 'gender_facet']\">\n  <template #default=\"{ selectedFilters }\">\n    Selected filters: {{ selectedFilters.length }}\n  </template>\n</SelectedFilters>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"selected-filters.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/selected-filters.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Facet } from '@empathyco/x-types';\n  import { defineComponent, h, PropType } from 'vue';\n  import { useFacets } from '../../composables/use-facets';\n  import { facetsXModule } from '../../x-module';\n\n  /**\n   * Provides a scoped slot with the selected filters from every facet, or from the facet which\n   * facet id is passed as property.\n   *\n   * The default slot renders the length of the selected filters array.\n   * The property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SelectedFilters',\n    xModule: facetsXModule.name,\n    props: {\n      /** Array of facets ids used to get the selected filters for those facets. */\n      facetsIds: Array as PropType<Array<Facet['id']>>,\n      /** Flag to render the component even if there are no filters selected. */\n      alwaysVisible: Boolean\n    },\n    setup: function (props, { slots }) {\n      const { selectedFilters, isVisible } = useFacets(props);\n\n      return () =>\n        isVisible.value\n          ? slots.default?.({ selectedFilters: selectedFilters.value })[0] ??\n            h('span', `${selectedFilters.value.length}`)\n          : '';\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nProvides a scoped slot with the selected filters from every facet, or from the facet which facet id\nis passed as property.\n\nThe default slot renders the length of the selected filters array.\n\n### Basic usage\n\n```vue\n<SelectedFilters />\n```\n\n### Always visible\n\nIf \"alwaysVisible\" is true, the component is rendered no matter if there are some filter selected.\nIf \"alwaysVisible\" is false (default), the component is rendered if there are some filter selected.\n\n```vue\n<SelectedFilters />\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">1</div>\n```\n\n### Customizing its content\n\nIn this example, renders a custom message using the default scoped slot.\n\n```vue\n<SelectedFilters>\n  <template #default=\"{ selectedFilters }\">\n    Selected filters: {{ selectedFilters.length }}\n  </template>\n</SelectedFilters>\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">Selected filters: 1</div>\n```\n\nIn this example, the selected filters are filtered by the facetsIds property.\n\n```vue\n<SelectedFilters :facetsIds=\"['brand_facet']\" />\n```\n\n```vue\n<SelectedFilters :facetsIds=\"['brand_facet', 'gender_facet']\">\n  <template #default=\"{ selectedFilters }\">\n    Selected filters: {{ selectedFilters.length }}\n  </template>\n</SelectedFilters>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAME;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE,KAAqC;;AAEhD,QAAA,aAAa,EAAE,OAAM;AACtB,KAAA;AACD,IAAA,KAAK,EAAE,UAAU,KAAK,EAAE,EAAE,KAAM,EAAC,EAAA;QAC/B,MAAM,EAAE,eAAe,EAAE,WAAY,GAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAEvD,QAAA,OAAO,MACL,SAAS,CAAC,KAAI;AACZ,cAAE,KAAK,CAAC,OAAO,GAAG,EAAE,eAAe,EAAE,eAAe,CAAC,KAAM,EAAC,CAAC,CAAC,CAAC,CAAA;gBAC7D,CAAC,CAAC,MAAM,EAAE,CAAG,EAAA,eAAe,CAAC,KAAK,CAAC,MAAM,CAAA,CAAE,CAAA;cAC3C,EAAE,CAAA;KACV;AACD,CAAA,CAAC;;;;"}