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

package/js/x-modules/facets/store/module.js

@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import { setConfig, mergeConfig } from '../../../store/utils/config-store.utils.js';
 import { setQuery } from '../../../store/utils/query.utils.js';
 import { facets } from './getters/facets.getter.js';
@@ -7,7 +6,7 @@ import { selectedFilters } from './getters/selected-filters.getter.js';
 import { selectedFiltersForRequest } from './getters/selected-filters-for-request.getter.js';
 
 /**
- * {@link XStoreModule} For the facets module.
+ * {@link XStoreModule} For the facets' module.
  *
  * @internal
  */
@@ -32,39 +31,39 @@ const facetsXStoreModule = {
     mutations: {
         mutateFilter(state, { filter, newFilterState }) {
             const newFilter = Object.assign(filter, newFilterState);
-            Vue.set(state.filters, newFilter.id, newFilter);
+            state.filters[newFilter.id] = newFilter;
         },
         setFilters(state, filters) {
-            filters.forEach(filter => Vue.set(state.filters, filter.id, filter));
+            filters.forEach(filter => (state.filters[filter.id] = filter));
         },
         setPreselectedFilters(state, filters) {
             state.preselectedFilters = filters;
         },
         removeFilter(state, { id }) {
-            Vue.delete(state.filters, id);
+            delete state.filters[id];
         },
         removeFilters(state, filters) {
-            filters.forEach(({ id }) => Vue.delete(state.filters, id));
+            filters.forEach(({ id }) => delete state.filters[id]);
         },
         setFacetGroup(state, { facetId, groupId }) {
-            Vue.set(state.groups, facetId, groupId);
+            state.groups[facetId] = groupId;
         },
         removeFacet(state, { id }) {
-            Vue.delete(state.facets, id);
+            delete state.facets[id];
         },
         setFacet(state, facet) {
-            Vue.set(state.facets, facet.id, facet);
+            state.facets[facet.id] = facet;
         },
         setConfig,
         mergeConfig,
         setQuery,
         setStickyFilter(state, filter) {
             if (!state.stickyFilters[filter.id]) {
-                Vue.set(state.stickyFilters, filter.id, filter);
+                state.stickyFilters[filter.id] = filter;
             }
         },
         removeStickyFilter(state, filter) {
-            Vue.delete(state.stickyFilters, filter.id);
+            delete state.stickyFilters[filter.id];
         },
         clearStickyFilters(state) {
             state.stickyFilters = {};

package/js/x-modules/facets/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/facets/store/module.ts"],"sourcesContent":["import { Facet } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';\nimport { setQuery } from '../../../store/utils/query.utils';\nimport { facets } from './getters/facets.getter';\nimport { selectedFiltersByFacet } from './getters/selected-filters-by-facet.getter';\nimport { selectedFilters } from './getters/selected-filters.getter';\nimport { FacetGroupEntry, FacetsXStoreModule } from './types';\nimport { selectedFiltersForRequest } from './getters/selected-filters-for-request.getter';\n\n/**\n * {@link XStoreModule} For the facets module.\n *\n * @internal\n */\nexport const facetsXStoreModule: FacetsXStoreModule = {\n  state: () => ({\n    query: '',\n    filters: {},\n    groups: {},\n    facets: {},\n    preselectedFilters: [],\n    stickyFilters: {},\n    config: {\n      filtersStrategyForRequest: 'all'\n    }\n  }),\n  getters: {\n    selectedFilters,\n    selectedFiltersForRequest,\n    selectedFiltersByFacet,\n    facets\n  },\n  mutations: {\n    mutateFilter(state, { filter, newFilterState }) {\n      const newFilter = Object.assign(filter, newFilterState);\n      Vue.set(state.filters, newFilter.id, newFilter);\n    },\n    setFilters(state, filters) {\n      filters.forEach(filter => Vue.set(state.filters, filter.id, filter));\n    },\n    setPreselectedFilters(state, filters) {\n      state.preselectedFilters = filters;\n    },\n    removeFilter(state, { id }) {\n      Vue.delete(state.filters, id);\n    },\n    removeFilters(state, filters) {\n      filters.forEach(({ id }) => Vue.delete(state.filters, id));\n    },\n    setFacetGroup(state, { facetId, groupId }: FacetGroupEntry) {\n      Vue.set(state.groups, facetId, groupId);\n    },\n    removeFacet(state, { id }) {\n      Vue.delete(state.facets, id);\n    },\n    setFacet(state, facet: Facet) {\n      Vue.set(state.facets, facet.id, facet);\n    },\n    setConfig,\n    mergeConfig,\n    setQuery,\n    setStickyFilter(state, filter) {\n      if (!state.stickyFilters[filter.id]) {\n        Vue.set(state.stickyFilters, filter.id, filter);\n      }\n    },\n    removeStickyFilter(state, filter) {\n      Vue.delete(state.stickyFilters, filter.id);\n    },\n    clearStickyFilters(state) {\n      state.stickyFilters = {};\n    }\n  },\n  actions: {}\n};\n"],"names":[],"mappings":";;;;;;;;AAUA;;;;AAIG;AACU,MAAA,kBAAkB,GAAuB;AACpD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,OAAO,EAAE,EAAE;AACX,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,kBAAkB,EAAE,EAAE;AACtB,QAAA,aAAa,EAAE,EAAE;AACjB,QAAA,MAAM,EAAE;AACN,YAAA,yBAAyB,EAAE,KAAK;AACjC,SAAA;KACF,CAAC;AACF,IAAA,OAAO,EAAE;QACP,eAAe;QACf,yBAAyB;QACzB,sBAAsB;QACtB,MAAM;AACP,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,YAAY,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,EAAA;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;AACxD,YAAA,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;SACjD;QACD,UAAU,CAAC,KAAK,EAAE,OAAO,EAAA;YACvB,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC;SACtE;QACD,qBAAqB,CAAC,KAAK,EAAE,OAAO,EAAA;AAClC,YAAA,KAAK,CAAC,kBAAkB,GAAG,OAAO,CAAC;SACpC;AACD,QAAA,YAAY,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,EAAA;YACxB,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;SAC/B;QACD,aAAa,CAAC,KAAK,EAAE,OAAO,EAAA;YAC1B,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC;SAC5D;AACD,QAAA,aAAa,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAmB,EAAA;YACxD,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;SACzC;AACD,QAAA,WAAW,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,EAAA;YACvB,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;SAC9B;QACD,QAAQ,CAAC,KAAK,EAAE,KAAY,EAAA;AAC1B,YAAA,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;SACxC;QACD,SAAS;QACT,WAAW;QACX,QAAQ;QACR,eAAe,CAAC,KAAK,EAAE,MAAM,EAAA;YAC3B,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE;AACnC,gBAAA,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,aAAa,EAAE,MAAM,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;AACjD,aAAA;SACF;QACD,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAA;YAC9B,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;SAC5C;AACD,QAAA,kBAAkB,CAAC,KAAK,EAAA;AACtB,YAAA,KAAK,CAAC,aAAa,GAAG,EAAE,CAAC;SAC1B;AACF,KAAA;AACD,IAAA,OAAO,EAAE,EAAE;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/facets/store/module.ts"],"sourcesContent":["import { Facet } from '@empathyco/x-types';\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';\nimport { setQuery } from '../../../store/utils/query.utils';\nimport { facets } from './getters/facets.getter';\nimport { selectedFiltersByFacet } from './getters/selected-filters-by-facet.getter';\nimport { selectedFilters } from './getters/selected-filters.getter';\nimport { FacetGroupEntry, FacetsXStoreModule } from './types';\nimport { selectedFiltersForRequest } from './getters/selected-filters-for-request.getter';\n\n/**\n * {@link XStoreModule} For the facets' module.\n *\n * @internal\n */\nexport const facetsXStoreModule: FacetsXStoreModule = {\n  state: () => ({\n    query: '',\n    filters: {},\n    groups: {},\n    facets: {},\n    preselectedFilters: [],\n    stickyFilters: {},\n    config: {\n      filtersStrategyForRequest: 'all'\n    }\n  }),\n  getters: {\n    selectedFilters,\n    selectedFiltersForRequest,\n    selectedFiltersByFacet,\n    facets\n  },\n  mutations: {\n    mutateFilter(state, { filter, newFilterState }) {\n      const newFilter = Object.assign(filter, newFilterState);\n      state.filters[newFilter.id] = newFilter;\n    },\n    setFilters(state, filters) {\n      filters.forEach(filter => (state.filters[filter.id] = filter));\n    },\n    setPreselectedFilters(state, filters) {\n      state.preselectedFilters = filters;\n    },\n    removeFilter(state, { id }) {\n      delete state.filters[id];\n    },\n    removeFilters(state, filters) {\n      filters.forEach(({ id }) => delete state.filters[id]);\n    },\n    setFacetGroup(state, { facetId, groupId }: FacetGroupEntry) {\n      state.groups[facetId] = groupId;\n    },\n    removeFacet(state, { id }) {\n      delete state.facets[id];\n    },\n    setFacet(state, facet: Facet) {\n      state.facets[facet.id] = facet;\n    },\n    setConfig,\n    mergeConfig,\n    setQuery,\n    setStickyFilter(state, filter) {\n      if (!state.stickyFilters[filter.id]) {\n        state.stickyFilters[filter.id] = filter;\n      }\n    },\n    removeStickyFilter(state, filter) {\n      delete state.stickyFilters[filter.id];\n    },\n    clearStickyFilters(state) {\n      state.stickyFilters = {};\n    }\n  },\n  actions: {}\n};\n"],"names":[],"mappings":";;;;;;;AASA;;;;AAIG;AACU,MAAA,kBAAkB,GAAuB;AACpD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,OAAO,EAAE,EAAE;AACX,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,kBAAkB,EAAE,EAAE;AACtB,QAAA,aAAa,EAAE,EAAE;AACjB,QAAA,MAAM,EAAE;AACN,YAAA,yBAAyB,EAAE,KAAK;AACjC,SAAA;KACF,CAAC;AACF,IAAA,OAAO,EAAE;QACP,eAAe;QACf,yBAAyB;QACzB,sBAAsB;QACtB,MAAM;AACP,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,YAAY,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,EAAA;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;YACxD,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;SACzC;QACD,UAAU,CAAC,KAAK,EAAE,OAAO,EAAA;YACvB,OAAO,CAAC,OAAO,CAAC,MAAM,KAAK,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;SAChE;QACD,qBAAqB,CAAC,KAAK,EAAE,OAAO,EAAA;AAClC,YAAA,KAAK,CAAC,kBAAkB,GAAG,OAAO,CAAC;SACpC;AACD,QAAA,YAAY,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,EAAA;AACxB,YAAA,OAAO,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;SAC1B;QACD,aAAa,CAAC,KAAK,EAAE,OAAO,EAAA;AAC1B,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,OAAO,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;SACvD;AACD,QAAA,aAAa,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAmB,EAAA;AACxD,YAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;SACjC;AACD,QAAA,WAAW,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,EAAA;AACvB,YAAA,OAAO,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;SACzB;QACD,QAAQ,CAAC,KAAK,EAAE,KAAY,EAAA;YAC1B,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC;SAChC;QACD,SAAS;QACT,WAAW;QACX,QAAQ;QACR,eAAe,CAAC,KAAK,EAAE,MAAM,EAAA;YAC3B,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE;gBACnC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC;AACzC,aAAA;SACF;QACD,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAA;YAC9B,OAAO,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;SACvC;AACD,QAAA,kBAAkB,CAAC,KAAK,EAAA;AACtB,YAAA,KAAK,CAAC,aAAa,GAAG,EAAE,CAAC;SAC1B;AACF,KAAA;AACD,IAAA,OAAO,EAAE,EAAE;;;;;"}

package/js/x-modules/facets/x-module.js

@@ -1,3 +1,4 @@
+import { XPlugin } from '../../plugins/x-plugin.js';
 import { facetsEmitters } from './store/emitters.js';
 import { facetsXStoreModule } from './store/module.js';
 import { facetsWiring } from './wiring.js';
@@ -13,7 +14,8 @@ const facetsXModule = {
     storeModule: facetsXStoreModule,
     storeEmitters: facetsEmitters,
     wiring: facetsWiring
-};
+};
+XPlugin.registerXModule(facetsXModule);
 
 export { facetsXModule };
 //# sourceMappingURL=x-module.js.map

package/js/x-modules/facets/x-module.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/facets/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { facetsEmitters } from './store/emitters';\nimport { facetsXStoreModule } from './store/module';\nimport { FacetsXStoreModule } from './store/types';\nimport { facetsWiring } from './wiring';\n\n/**\n * Facets {@link XModule} alias.\n *\n * @public\n */\nexport type FacetsXModule = XModule<FacetsXStoreModule>;\n\n/**\n * Facets {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `facets` entry point.\n *\n * @public\n */\nexport const facetsXModule: FacetsXModule = {\n  name: 'facets',\n  storeModule: facetsXStoreModule,\n  storeEmitters: facetsEmitters,\n  wiring: facetsWiring\n};\n"],"names":[],"mappings":";;;;AAaA;;;;;AAKG;AACU,MAAA,aAAa,GAAkB;AAC1C,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,WAAW,EAAE,kBAAkB;AAC/B,IAAA,aAAa,EAAE,cAAc;AAC7B,IAAA,MAAM,EAAE,YAAY;;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/facets/x-module.ts"],"sourcesContent":["import { XPlugin } from '../../plugins/x-plugin';\nimport { XModule } from '../x-modules.types';\nimport { facetsEmitters } from './store/emitters';\nimport { facetsXStoreModule } from './store/module';\nimport { FacetsXStoreModule } from './store/types';\nimport { facetsWiring } from './wiring';\n\n/**\n * Facets {@link XModule} alias.\n *\n * @public\n */\nexport type FacetsXModule = XModule<FacetsXStoreModule>;\n\n/**\n * Facets {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `facets` entry point.\n *\n * @public\n */\nexport const facetsXModule: FacetsXModule = {\n  name: 'facets',\n  storeModule: facetsXStoreModule,\n  storeEmitters: facetsEmitters,\n  wiring: facetsWiring\n};\n\nXPlugin.registerXModule(facetsXModule);\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,aAAa,GAAkB;AAC1C,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,WAAW,EAAE,kBAAkB;AAC/B,IAAA,aAAa,EAAE,cAAc;AAC7B,IAAA,MAAM,EAAE,YAAY;EACpB;AAEF,OAAO,CAAC,eAAe,CAAC,aAAa,CAAC;;;;"}

package/js/x-modules/history-queries/components/clear-history-queries.vue.js

@@ -1,65 +1,27 @@
-import script from './clear-history-queries.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './clear-history-queries.vue2.js';
+import { resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createCommentVNode, renderSlot, createTextVNode } from 'vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_BaseEventButton = resolveComponent("BaseEventButton");
+  return openBlock(), createBlock(_component_BaseEventButton, {
+    class: normalizeClass(["x-clear-history-queries x-button", _ctx.dynamicClasses]),
+    disabled: _ctx.isHistoryQueriesEmpty,
+    events: _ctx.clearHistoryQueriesEvents,
+    "data-test": "clear-history-queries",
+    "aria-label": "Clear all"
+  }, {
+    default: withCtx(() => [
+      createCommentVNode(" @slot (Required) Button content with a message, an icon or both "),
+      renderSlot(_ctx.$slots, "default", {}, () => [
+        createTextVNode("\u2715")
+      ])
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["class", "disabled", "events"]);
+}
+var clearHistoryQueries = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
-    "BaseEventButton",
-    {
-      staticClass: "x-clear-history-queries x-button",
-      class: _vm.dynamicClasses,
-      attrs: {
-        disabled: _vm.isHistoryQueriesEmpty,
-        events: _vm.clearHistoryQueriesEvents,
-        "data-test": "clear-history-queries",
-        "aria-label": "Clear all",
-      },
-    },
-    [
-      _vm._t("default", function () {
-        return [_vm._v("✕")]
-      }),
-    ],
-    2
-  )
-};
-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 { clearHistoryQueries as default };
 //# sourceMappingURL=clear-history-queries.vue.js.map

package/js/x-modules/history-queries/components/clear-history-queries.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-history-queries x-button\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n    aria-label=\"Clear all\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { State } from '../../../components/decorators/store.decorators';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n\n  /**\n   * A button that when is pressed, emits the\n   * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n   * intention to clear the whole history of queries.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class ClearHistoryQueries extends Vue {\n    /**\n     * The whole history queries.\n     *\n     * @internal\n     */\n    @State('historyQueries', 'historyQueries')\n    public historyQueries!: HistoryQuery[];\n\n    /**\n     * Returns if the array of history queries is empty.\n     *\n     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n     * @internal\n     */\n    protected get isHistoryQueriesEmpty(): boolean {\n      return this.historyQueries.length === 0;\n    }\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-clear-history-queries--is-empty': this.isHistoryQueriesEmpty\n      };\n    }\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    protected clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n      UserPressedClearHistoryQueries: undefined\n    };\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedClearHistoryQueries`](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.\n\n## Examples\n\n### Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>\n    <HistoryQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('FadeAndSlide', FadeAndSlide);\n  export default {\n    name: 'ClearHistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      ClearHistoryQueries\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"clear-history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-history-queries x-button\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n    aria-label=\"Clear all\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * A button that when is pressed, emits the\n   * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n   * intention to clear the whole history of queries.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ClearHistoryQueries',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseEventButton\n    },\n    setup() {\n      /**\n       * The whole history queries.\n       *\n       * @internal\n       */\n      const { historyQueries } = useState('historyQueries', ['historyQueries']);\n\n      /**\n       * Returns if the array of history queries is empty.\n       *\n       * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n       * @internal\n       */\n      const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0);\n\n      /**\n       * Dynamic CSS classes to add to the root element of this component.\n       *\n       * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n       * tells if it should be added or not.\n       * @internal\n       */\n      const dynamicClasses = computed(\n        (): VueCSSClasses => ({\n          'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value\n        })\n      );\n\n      /**\n       * The list of events that are going to be emitted when the button is pressed.\n       *\n       * @internal\n       */\n      const clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n        UserPressedClearHistoryQueries: undefined\n      };\n\n      return {\n        dynamicClasses,\n        clearHistoryQueriesEvents,\n        isHistoryQueriesEmpty\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedClearHistoryQueries`](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.\n\n## Examples\n\n### Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>\n    <HistoryQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('FadeAndSlide', FadeAndSlide);\n  export default {\n    name: 'ClearHistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      ClearHistoryQueries\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_normalizeClass","clearHistoryQueriesEvents","_withCtx","_createCommentVNode","_renderSlot"],"mappings":";;;;;AAWoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AAPf,EAAA,OAAAC,SAAA,EAA+B,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC/B,KAAA,EAAMC,eAAEC,CAAyB,kCAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAAA,IAClC,QAAU,EAAA,IAAA,CAAA,qBAAA;AAAA,IACV,MAAU,EAAA,IAAA,CAAA,yBAAA;AAAA,IAAA,WAAA,EAAA,uBAAA;AAPd,IAAA,YAAA,EAAA,WAAA;AAAA,GAAA,EAAA;aAUIC,OAAc,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAR,mEAAC,CAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,MAAA;;AAVX,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/history-queries/components/clear-history-queries.vue2.js

@@ -1,10 +1,7 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Component } from 'vue-property-decorator';
-import { State } from '../../../components/decorators/store.decorators.js';
-import __vue_component__ from '../../../components/base-event-button.vue.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { defineComponent, computed } from 'vue';
+import BaseEventButton from '../../../components/base-event-button.vue.js';
 import { historyQueriesXModule } from '../x-module.js';
+import { useState } from '../../../composables/use-state.js';
 
 /**
  * A button that when is pressed, emits the
@@ -13,50 +10,51 @@ import { historyQueriesXModule } from '../x-module.js';
  *
  * @public
  */
-let ClearHistoryQueries = class ClearHistoryQueries extends Vue {
-    constructor() {
-        super(...arguments);
+var _sfc_main = defineComponent({
+    name: 'ClearHistoryQueries',
+    xModule: historyQueriesXModule.name,
+    components: {
+        BaseEventButton
+    },
+    setup() {
+        /**
+         * The whole history queries.
+         *
+         * @internal
+         */
+        const { historyQueries } = useState('historyQueries', ['historyQueries']);
+        /**
+         * Returns if the array of history queries is empty.
+         *
+         * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.
+         * @internal
+         */
+        const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0);
+        /**
+         * Dynamic CSS classes to add to the root element of this component.
+         *
+         * @returns A booleans dictionary where each key is the class name to add, and the boolean value
+         * tells if it should be added or not.
+         * @internal
+         */
+        const dynamicClasses = computed(() => ({
+            'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value
+        }));
         /**
          * The list of events that are going to be emitted when the button is pressed.
          *
          * @internal
          */
-        this.clearHistoryQueriesEvents = {
+        const clearHistoryQueriesEvents = {
             UserPressedClearHistoryQueries: undefined
         };
-    }
-    /**
-     * Returns if the array of history queries is empty.
-     *
-     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.
-     * @internal
-     */
-    get isHistoryQueriesEmpty() {
-        return this.historyQueries.length === 0;
-    }
-    /**
-     * Dynamic CSS classes to add to the root element of this component.
-     *
-     * @returns A booleans dictionary where each key is the class name to add, and the boolean value
-     * tells if it should be added or not.
-     * @internal
-     */
-    get dynamicClasses() {
         return {
-            'x-clear-history-queries--is-empty': this.isHistoryQueriesEmpty
+            dynamicClasses,
+            clearHistoryQueriesEvents,
+            isHistoryQueriesEmpty
         };
     }
-};
-__decorate([
-    State('historyQueries', 'historyQueries')
-], ClearHistoryQueries.prototype, "historyQueries", void 0);
-ClearHistoryQueries = __decorate([
-    Component({
-        components: { BaseEventButton: __vue_component__ },
-        mixins: [xComponentMixin(historyQueriesXModule)]
-    })
-], ClearHistoryQueries);
-var script = ClearHistoryQueries;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=clear-history-queries.vue2.js.map

package/js/x-modules/history-queries/components/clear-history-queries.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-history-queries.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { HistoryQuery } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { State } from '../../../components/decorators/store.decorators';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n\n  /**\n   * A button that when is pressed, emits the\n   * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n   * intention to clear the whole history of queries.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class ClearHistoryQueries extends Vue {\n    /**\n     * The whole history queries.\n     *\n     * @internal\n     */\n    @State('historyQueries', 'historyQueries')\n    public historyQueries!: HistoryQuery[];\n\n    /**\n     * Returns if the array of history queries is empty.\n     *\n     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n     * @internal\n     */\n    protected get isHistoryQueriesEmpty(): boolean {\n      return this.historyQueries.length === 0;\n    }\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-clear-history-queries--is-empty': this.isHistoryQueriesEmpty\n      };\n    }\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    protected clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n      UserPressedClearHistoryQueries: undefined\n    };\n  }\n"],"names":["BaseEventButton"],"mappings":";;;;;;;;AAyBE;;;;;;AAMG;AAKY,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,GAAG,CAAA;AAArC,IAAA,WAAA,GAAA;;AAgCb;;;;AAIG;AACO,QAAA,IAAA,CAAA,yBAAyB,GAA0B;AAC3D,YAAA,8BAA8B,EAAE,SAAS;SAC1C,CAAC;KACH;AA/BC;;;;;AAKG;AACH,IAAA,IAAc,qBAAqB,GAAA;AACjC,QAAA,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,CAAC;KACzC;AAED;;;;;;AAMG;AACH,IAAA,IAAc,cAAc,GAAA;QAC1B,OAAO;YACL,mCAAmC,EAAE,IAAI,CAAC,qBAAqB;SAChE,CAAC;KACH;CAUF,CAAA;AAjCC,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;AACH,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAPpB,mBAAmB,GAAA,UAAA,CAAA;AAJvC,IAAA,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;AAC/B,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;KACjD,CAAC;AACmB,CAAA,EAAA,mBAAmB,CAwCvC,CAAA;aAxCoB,mBAAmB;;;;"}
+{"version":3,"file":"clear-history-queries.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-history-queries x-button\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n    aria-label=\"Clear all\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * A button that when is pressed, emits the\n   * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n   * intention to clear the whole history of queries.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ClearHistoryQueries',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseEventButton\n    },\n    setup() {\n      /**\n       * The whole history queries.\n       *\n       * @internal\n       */\n      const { historyQueries } = useState('historyQueries', ['historyQueries']);\n\n      /**\n       * Returns if the array of history queries is empty.\n       *\n       * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n       * @internal\n       */\n      const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0);\n\n      /**\n       * Dynamic CSS classes to add to the root element of this component.\n       *\n       * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n       * tells if it should be added or not.\n       * @internal\n       */\n      const dynamicClasses = computed(\n        (): VueCSSClasses => ({\n          'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value\n        })\n      );\n\n      /**\n       * The list of events that are going to be emitted when the button is pressed.\n       *\n       * @internal\n       */\n      const clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n        UserPressedClearHistoryQueries: undefined\n      };\n\n      return {\n        dynamicClasses,\n        clearHistoryQueriesEvents,\n        isHistoryQueriesEmpty\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedClearHistoryQueries`](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.\n\n## Examples\n\n### Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>\n    <HistoryQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('FadeAndSlide', FadeAndSlide);\n  export default {\n    name: 'ClearHistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      ClearHistoryQueries\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAsBE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,qBAAqB;IAC3B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,eAAc;AACf,KAAA;IACD,KAAK,GAAA;AACH;;;;AAIE;AACF,QAAA,MAAM,EAAE,cAAa,EAAI,GAAE,QAAQ,CAAC,gBAAgB,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAA;AAEzE;;;;;AAKE;AACF,QAAA,MAAM,qBAAoB,GAAI,QAAQ,CAAC,MAAM,cAAc,CAAC,KAAK,CAAC,MAAO,KAAI,CAAC,CAAC,CAAA;AAE/E;;;;;;AAME;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAC7B,OAAsB;YACpB,mCAAmC,EAAE,qBAAqB,CAAC,KAAI;AAChE,SAAA,CAAA,CACF,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,yBAAyB,GAA0B;AACvD,YAAA,8BAA8B,EAAE,SAAQ;SACzC,CAAA;QAED,OAAO;YACL,cAAc;YACd,yBAAyB;YACzB,qBAAoB;SACrB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/history-queries/components/history-queries-switch.vue.js

@@ -1,50 +1,16 @@
-import script from './history-queries-switch.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './history-queries-switch.vue2.js';
+import { resolveComponent, openBlock, createBlock } from 'vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_BaseSwitch = resolveComponent("BaseSwitch");
+  return openBlock(), createBlock(_component_BaseSwitch, {
+    "onUpdate:modelValue": _ctx.toggle,
+    modelValue: _ctx.isEnabled,
+    "aria-label": "Queries' history"
+  }, null, 8, ["onUpdate:modelValue", "modelValue"]);
+}
+var historyQueriesSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("BaseSwitch", {
-    attrs: { value: _vm.isEnabled, "aria-label": "Queries' history" },
-    on: { change: _vm.toggle },
-  })
-};
-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 { historyQueriesSwitch as default };
 //# sourceMappingURL=history-queries-switch.vue.js.map

package/js/x-modules/history-queries/components/history-queries-switch.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-queries-switch.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch @change=\"toggle\" :value=\"isEnabled\" aria-label=\"Queries' history\" />\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { HistoryQuery } from '@empathyco/x-types';\n  import BaseSwitch from '../../../components/base-switch.vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { historyQueriesXModule } from '../x-module';\n  import { isArrayEmpty } from '../../../utils/array';\n\n  /**\n   * History Queries Switch is a component to activate or deactivate the history queries.\n   * This component emits events depending on the `isEnabled` value.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(historyQueriesXModule)],\n    components: { BaseSwitch }\n  })\n  export default class HistoryQueriesSwitch extends Vue {\n    /**\n     * A boolean with the isEnabled value coming from the store state.\n     *\n     * @internal\n     */\n    @State('historyQueries', 'isEnabled')\n    public isEnabled!: boolean;\n\n    /**\n     * The history queries from the state.\n     */\n    @State('historyQueries', 'historyQueries')\n    public historyQueries!: HistoryQuery[];\n\n    /**\n     * Checks if there are history queries.\n     *\n     * @returns True if there are history queries; false otherwise.\n     */\n    protected get hasHistoryQueries(): boolean {\n      return !isArrayEmpty(this.historyQueries);\n    }\n\n    /**\n     * Emits an event based on the switch state.\n     *\n     * @internal\n     */\n    protected toggle(): void {\n      this.$x.emit(\n        this.isEnabled\n          ? this.hasHistoryQueries\n            ? 'UserClickedDisableHistoryQueries'\n            : 'UserClickedConfirmDisableHistoryQueries'\n          : 'UserClickedEnableHistoryQueries'\n      );\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedEnableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch and the history queries are deactivated.\n- [`UserClickedDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is not empty.\n- [`UserClickedConfirmDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is empty.\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  <HistoryQueriesSwitch />\n</template>\n\n<script>\n  import { HistoryQueriesSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      HistoryQueriesSwitch\n    }\n  };\n</script>\n```\n\nHere you have a more complex example.\n\n```vue live\n<template>\n  <div>\n    <div>\n      <SearchInput :instant=\"false\" />\n      <SearchButton>Search</SearchButton>\n    </div>\n    <label>\n      History queries:\n      <HistoryQueriesSwitch />\n      <HistoryQueries />\n      <BaseEventsModal :eventsToOpenModal=\"eventsToOpenModal\">\n        <BaseEventButton :events=\"disableEvents\">Disable</BaseEventButton>\n        <BaseEventButton :events=\"cancelEvents\">Cancel</BaseEventButton>\n      </BaseEventsModal>\n    </label>\n  </div>\n</template>\n\n<script>\n  import { BaseEventButton, BaseEventsModal } from '@empathyco/x-components';\n  import { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search';\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      BaseEventButton,\n      BaseEventsModal,\n      HistoryQueriesSwitch,\n      HistoryQueries,\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        eventsToOpenModal: ['UserClickedDisableHistoryQueries'],\n        disableEvents: {\n          UserClickedConfirmDisableHistoryQueries: undefined,\n          UserClickedCloseEventsModal: undefined\n        },\n        cancelEvents: {\n          UserClickedCloseEventsModal: undefined\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"history-queries-switch.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch @update:modelValue=\"toggle\" :modelValue=\"isEnabled\" aria-label=\"Queries' history\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { HistoryQuery } from '@empathyco/x-types';\n  import BaseSwitch from '../../../components/base-switch.vue';\n  import { historyQueriesXModule } from '../x-module';\n  import { isArrayEmpty } from '../../../utils/array';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * History Queries Switch is a component to activate or deactivate the history queries.\n   * This component emits events depending on the `isEnabled` value.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HistoryQueriesSwitch',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseSwitch\n    },\n    setup() {\n      const $x = use$x();\n\n      /**\n       * An object with the isEnabled value and the history queries coming from the store state.\n       *\n       * @internal\n       */\n      const { isEnabled, historyQueries } = useState('historyQueries', [\n        'isEnabled',\n        'historyQueries'\n      ]);\n\n      /**\n       * Checks if there are history queries.\n       *\n       * @returns True if there are history queries; false otherwise.\n       */\n      const hasHistoryQueries = computed(\n        () => !isArrayEmpty(historyQueries.value as HistoryQuery[])\n      );\n\n      const disableEvent = computed(() =>\n        hasHistoryQueries.value\n          ? 'UserClickedDisableHistoryQueries'\n          : 'UserClickedConfirmDisableHistoryQueries'\n      );\n\n      /**\n       * Emits an event based on the switch state.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries');\n      };\n\n      return {\n        toggle,\n        isEnabled\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedEnableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch and the history queries are deactivated.\n- [`UserClickedDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is not empty.\n- [`UserClickedConfirmDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is empty.\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  <HistoryQueriesSwitch />\n</template>\n\n<script>\n  import { HistoryQueriesSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      HistoryQueriesSwitch\n    }\n  };\n</script>\n```\n\nHere you have a more complex example.\n\n```vue live\n<template>\n  <div>\n    <div>\n      <SearchInput :instant=\"false\" />\n      <SearchButton>Search</SearchButton>\n    </div>\n    <label>\n      History queries:\n      <HistoryQueriesSwitch />\n      <HistoryQueries />\n      <BaseEventsModal :eventsToOpenModal=\"eventsToOpenModal\">\n        <BaseEventButton :events=\"disableEvents\">Disable</BaseEventButton>\n        <BaseEventButton :events=\"cancelEvents\">Cancel</BaseEventButton>\n      </BaseEventsModal>\n    </label>\n  </div>\n</template>\n\n<script>\n  import { BaseEventButton, BaseEventsModal } from '@empathyco/x-components';\n  import { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search';\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      BaseEventButton,\n      BaseEventsModal,\n      HistoryQueriesSwitch,\n      HistoryQueries,\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        eventsToOpenModal: ['UserClickedDisableHistoryQueries'],\n        disableEvents: {\n          UserClickedConfirmDisableHistoryQueries: undefined,\n          UserClickedCloseEventsModal: undefined\n        },\n        cancelEvents: {\n          UserClickedCloseEventsModal: undefined\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock"],"mappings":";;;;;gCACEA,gBAAgG,CAAA,YAAA,CAAA,CAAA;AAAvD,EAAA,OAAAC,SAAA,EAAqB,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IAAE,qBAAW,EAAA,IAAA,CAAA,MAAA;AAAA,IAAA,UAAA,EAAA,IAAA,CAAA,SAAA;;;;;;;;"}

package/js/x-modules/history-queries/components/history-queries-switch.vue2.js

@@ -1,11 +1,9 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Component } from 'vue-property-decorator';
-import __vue_component__ from '../../../components/base-switch.vue.js';
-import { State } from '../../../components/decorators/store.decorators.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { defineComponent, computed } from 'vue';
+import BaseSwitch from '../../../components/base-switch.vue.js';
 import { historyQueriesXModule } from '../x-module.js';
 import { isArrayEmpty } from '../../../utils/array.js';
+import { use$x } from '../../../composables/use-_x.js';
+import { useState } from '../../../composables/use-state.js';
 
 /**
  * History Queries Switch is a component to activate or deactivate the history queries.
@@ -13,41 +11,46 @@ import { isArrayEmpty } from '../../../utils/array.js';
  *
  * @public
  */
-let HistoryQueriesSwitch = class HistoryQueriesSwitch extends Vue {
-    /**
-     * Checks if there are history queries.
-     *
-     * @returns True if there are history queries; false otherwise.
-     */
-    get hasHistoryQueries() {
-        return !isArrayEmpty(this.historyQueries);
+var _sfc_main = defineComponent({
+    name: 'HistoryQueriesSwitch',
+    xModule: historyQueriesXModule.name,
+    components: {
+        BaseSwitch
+    },
+    setup() {
+        const $x = use$x();
+        /**
+         * An object with the isEnabled value and the history queries coming from the store state.
+         *
+         * @internal
+         */
+        const { isEnabled, historyQueries } = useState('historyQueries', [
+            'isEnabled',
+            'historyQueries'
+        ]);
+        /**
+         * Checks if there are history queries.
+         *
+         * @returns True if there are history queries; false otherwise.
+         */
+        const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value));
+        const disableEvent = computed(() => hasHistoryQueries.value
+            ? 'UserClickedDisableHistoryQueries'
+            : 'UserClickedConfirmDisableHistoryQueries');
+        /**
+         * Emits an event based on the switch state.
+         *
+         * @internal
+         */
+        const toggle = () => {
+            $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries');
+        };
+        return {
+            toggle,
+            isEnabled
+        };
     }
-    /**
-     * Emits an event based on the switch state.
-     *
-     * @internal
-     */
-    toggle() {
-        this.$x.emit(this.isEnabled
-            ? this.hasHistoryQueries
-                ? 'UserClickedDisableHistoryQueries'
-                : 'UserClickedConfirmDisableHistoryQueries'
-            : 'UserClickedEnableHistoryQueries');
-    }
-};
-__decorate([
-    State('historyQueries', 'isEnabled')
-], HistoryQueriesSwitch.prototype, "isEnabled", void 0);
-__decorate([
-    State('historyQueries', 'historyQueries')
-], HistoryQueriesSwitch.prototype, "historyQueries", void 0);
-HistoryQueriesSwitch = __decorate([
-    Component({
-        mixins: [xComponentMixin(historyQueriesXModule)],
-        components: { BaseSwitch: __vue_component__ }
-    })
-], HistoryQueriesSwitch);
-var script = HistoryQueriesSwitch;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=history-queries-switch.vue2.js.map

package/js/x-modules/history-queries/components/history-queries-switch.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-queries-switch.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { HistoryQuery } from '@empathyco/x-types';\n  import BaseSwitch from '../../../components/base-switch.vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { historyQueriesXModule } from '../x-module';\n  import { isArrayEmpty } from '../../../utils/array';\n\n  /**\n   * History Queries Switch is a component to activate or deactivate the history queries.\n   * This component emits events depending on the `isEnabled` value.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(historyQueriesXModule)],\n    components: { BaseSwitch }\n  })\n  export default class HistoryQueriesSwitch extends Vue {\n    /**\n     * A boolean with the isEnabled value coming from the store state.\n     *\n     * @internal\n     */\n    @State('historyQueries', 'isEnabled')\n    public isEnabled!: boolean;\n\n    /**\n     * The history queries from the state.\n     */\n    @State('historyQueries', 'historyQueries')\n    public historyQueries!: HistoryQuery[];\n\n    /**\n     * Checks if there are history queries.\n     *\n     * @returns True if there are history queries; false otherwise.\n     */\n    protected get hasHistoryQueries(): boolean {\n      return !isArrayEmpty(this.historyQueries);\n    }\n\n    /**\n     * Emits an event based on the switch state.\n     *\n     * @internal\n     */\n    protected toggle(): void {\n      this.$x.emit(\n        this.isEnabled\n          ? this.hasHistoryQueries\n            ? 'UserClickedDisableHistoryQueries'\n            : 'UserClickedConfirmDisableHistoryQueries'\n          : 'UserClickedEnableHistoryQueries'\n      );\n    }\n  }\n"],"names":["BaseSwitch"],"mappings":";;;;;;;;;AAcE;;;;;AAKG;AAKY,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,GAAG,CAAA;AAenD;;;;AAIG;AACH,IAAA,IAAc,iBAAiB,GAAA;AAC7B,QAAA,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3C;AAED;;;;AAIG;IACO,MAAM,GAAA;AACd,QAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CACV,IAAI,CAAC,SAAS;cACV,IAAI,CAAC,iBAAiB;AACtB,kBAAE,kCAAkC;AACpC,kBAAE,yCAAyC;cAC3C,iCAAiC,CACtC,CAAC;KACH;CACF,CAAA;AA/BC,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,gBAAgB,EAAE,WAAW,CAAC;AACV,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAM3B,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;AACH,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAbpB,oBAAoB,GAAA,UAAA,CAAA;AAJxC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;QAChD,UAAU,EAAE,cAAEA,iBAAU,EAAE;KAC3B,CAAC;AACmB,CAAA,EAAA,oBAAoB,CAsCxC,CAAA;aAtCoB,oBAAoB;;;;"}
+{"version":3,"file":"history-queries-switch.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch @update:modelValue=\"toggle\" :modelValue=\"isEnabled\" aria-label=\"Queries' history\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { HistoryQuery } from '@empathyco/x-types';\n  import BaseSwitch from '../../../components/base-switch.vue';\n  import { historyQueriesXModule } from '../x-module';\n  import { isArrayEmpty } from '../../../utils/array';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * History Queries Switch is a component to activate or deactivate the history queries.\n   * This component emits events depending on the `isEnabled` value.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HistoryQueriesSwitch',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseSwitch\n    },\n    setup() {\n      const $x = use$x();\n\n      /**\n       * An object with the isEnabled value and the history queries coming from the store state.\n       *\n       * @internal\n       */\n      const { isEnabled, historyQueries } = useState('historyQueries', [\n        'isEnabled',\n        'historyQueries'\n      ]);\n\n      /**\n       * Checks if there are history queries.\n       *\n       * @returns True if there are history queries; false otherwise.\n       */\n      const hasHistoryQueries = computed(\n        () => !isArrayEmpty(historyQueries.value as HistoryQuery[])\n      );\n\n      const disableEvent = computed(() =>\n        hasHistoryQueries.value\n          ? 'UserClickedDisableHistoryQueries'\n          : 'UserClickedConfirmDisableHistoryQueries'\n      );\n\n      /**\n       * Emits an event based on the switch state.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries');\n      };\n\n      return {\n        toggle,\n        isEnabled\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedEnableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch and the history queries are deactivated.\n- [`UserClickedDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is not empty.\n- [`UserClickedConfirmDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is empty.\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  <HistoryQueriesSwitch />\n</template>\n\n<script>\n  import { HistoryQueriesSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      HistoryQueriesSwitch\n    }\n  };\n</script>\n```\n\nHere you have a more complex example.\n\n```vue live\n<template>\n  <div>\n    <div>\n      <SearchInput :instant=\"false\" />\n      <SearchButton>Search</SearchButton>\n    </div>\n    <label>\n      History queries:\n      <HistoryQueriesSwitch />\n      <HistoryQueries />\n      <BaseEventsModal :eventsToOpenModal=\"eventsToOpenModal\">\n        <BaseEventButton :events=\"disableEvents\">Disable</BaseEventButton>\n        <BaseEventButton :events=\"cancelEvents\">Cancel</BaseEventButton>\n      </BaseEventsModal>\n    </label>\n  </div>\n</template>\n\n<script>\n  import { BaseEventButton, BaseEventsModal } from '@empathyco/x-components';\n  import { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search';\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      BaseEventButton,\n      BaseEventsModal,\n      HistoryQueriesSwitch,\n      HistoryQueries,\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        eventsToOpenModal: ['UserClickedDisableHistoryQueries'],\n        disableEvents: {\n          UserClickedConfirmDisableHistoryQueries: undefined,\n          UserClickedCloseEventsModal: undefined\n        },\n        cancelEvents: {\n          UserClickedCloseEventsModal: undefined\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;AAaE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,UAAS;AACV,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB;;;;AAIE;QACF,MAAM,EAAE,SAAS,EAAE,gBAAiB,GAAE,QAAQ,CAAC,gBAAgB,EAAE;YAC/D,WAAW;YACX,gBAAe;AAChB,SAAA,CAAC,CAAA;AAEF;;;;AAIE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAChC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,KAAuB,CAAA,CAC3D,CAAA;QAED,MAAM,YAAW,GAAI,QAAQ,CAAC,MAC5B,iBAAiB,CAAC,KAAI;AACpB,cAAE,kCAAiC;cACjC,yCAAwC,CAC7C,CAAA;AAED;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAI,GAAI,YAAY,CAAC,KAAM,GAAE,iCAAiC,CAAC,CAAA;AACnF,SAAC,CAAA;QAED,OAAO;YACL,MAAM;YACN,SAAQ;SACT,CAAA;KACH;AACD,CAAA,CAAC;;;;"}