Merge remote-tracking branch 'refs/remotes/origin/main' into feat/EMP…

…-4442-migrate-animation-factory

# Conflicts:
#	packages/_vue3-migration-test/src/router.ts

packages/_vue3-migration-test/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.42](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.42) (2024-07-08)
+
+
+### Features
+
+* **renderless-extra-param:** migrate to composition API (#1546) ([3f111f9](https://github.com/empathyco/x/commit/3f111f98fdf0a4175dce0a5d8711bb8d4e4729df))
+
+
+
 ## [1.0.0-alpha.41](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.41) (2024-07-03)
 
 

packages/_vue3-migration-test/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.41",
+  "version": "1.0.0-alpha.42",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

packages/_vue3-migration-test/src/components/extra-params/test-renderless-extra-param.vue

@@ -0,0 +1,16 @@
+<template>
+  <SnippetConfigExtraParams :values="{ store: 'portugal' }" />
+  <RenderlessExtraParam name="store" #default="{ value, updateValue }">
+    <BaseDropdown @update:modelValue="updateValue" :modelValue="value" :items="items" />
+  </RenderlessExtraParam>
+  {{ params }}
+</template>
+<script setup lang="ts">
+  import RenderlessExtraParam from '../../../../x-components/src/x-modules/extra-params/components/renderless-extra-param.vue';
+  import SnippetConfigExtraParams from '../../../../x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue';
+  import BaseDropdown from '../../../../x-components/src/components/base-dropdown.vue';
+  import { useState } from '../../../../x-components/src/composables/use-state';
+
+  const items = ['spain', 'portugal', 'italy'];
+  const { params } = useState('extraParams', ['params']);
+</script>

packages/_vue3-migration-test/src/components/index.ts

@@ -17,3 +17,4 @@ export { default as TestBaseIdModal } from './modals/test-base-id-modal.vue';
 export { default as TestExtraParams } from './extra-params/test-extra-params.vue';
 export { default as TestSearch } from './test-search.vue';
 export { default as TestTagging } from './tagging/test-tagging.vue';
+export { default as TestRenderlessExtraParam } from './extra-params/test-renderless-extra-param.vue';

packages/_vue3-migration-test/src/router.ts

@@ -46,6 +46,7 @@ import {
   TestExtraParams,
   TestSearch,
   TestTagging,
+  TestRenderlessExtraParam,
   TestAnimationFactory
 } from './';
 
@@ -280,6 +281,11 @@ const routes = [
     name: 'Tagging',
     component: TestTagging
   },
+  {
+    path: '/renderless-extra-param',
+    name: 'RenderlessExtraParam',
+    component: TestRenderlessExtraParam
+  },
   {
     path: '/animation-factory',
     name: 'AnimationFactory',

packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue

@@ -28,12 +28,69 @@
       </label>
     </SimpleFilter>
   </div>
+  <br />
+  <hr />
+  <br />
+  <h2>Number Range Filter</h2>
+  <NumberRangeFilter
+    :clickEvents="{ UserClickedANumberRangeFilter: filterNumber }"
+    :filter="filterNumber"
+    :cssClasses="innerCssClasses"
+  />
+  <br />
+  <hr />
+  <br />
+  <h2>Editable Number Range Filter</h2>
+  <EditableNumberRangeFilter
+    :filter="filterEditNumber"
+    :hasClearButton="false"
+    :class="innerCssClasses"
+    :inputsClass="'my-inputs-class'"
+    :buttonsClass="'my-buttons-class'"
+  />
+  <EditableNumberRangeFilter
+    :filter="filterEditNumber"
+    :class="innerCssClasses"
+    #default="{
+      min,
+      max,
+      setMin,
+      setMax,
+      emitUserModifiedFilter,
+      clearValues,
+      hasError,
+      isAnyRange
+    }"
+  >
+    <button @click="emitUserModifiedFilter">✅ Apply!</button>
+    <button @click="clearValues">🗑 Clear!</button>
+    <input @change="setMin($event.target.value)" :value="!isAnyRange ? min : null" />
+    <input @change="setMax($event.target.value)" :value="max" />
+    <div v-if="hasError" class="has-error">⚠️ Invalid range values</div>
+  </EditableNumberRangeFilter>
+  <br />
+  <hr />
+  <br />
+  <h2>Hierarchical Filter</h2>
+  <HierarchicalFilter :cssClasses="innerCssClasses" :filter="filterHierarchical">
+    <template #label>
+      <span class="custom-class">{{ filterHierarchical.label }}</span>
+    </template>
+  </HierarchicalFilter>
 </template>
 
 <script setup lang="ts">
-  import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';
+  import {
+    SimpleFilter as SimpleFilterModel,
+    NumberRangeFilter as NumberRangeFilterModel,
+    EditableNumberRangeFilter as EditableNumberRangeFilterModel,
+    HierarchicalFilter as HierarchicalFilterModel
+  } from '@empathyco/x-types';
   import { computed, ref, Ref } from 'vue';
   import SimpleFilter from '../../../../../x-components/src/x-modules/facets/components/filters/simple-filter.vue';
+  import NumberRangeFilter from '../../../../../x-components/src/x-modules/facets/components/filters/number-range-filter.vue';
+  import EditableNumberRangeFilter from '../../../../../x-components/src/x-modules/facets/components/filters/editable-number-range-filter.vue';
+  import HierarchicalFilter from '../../../../../x-components/src/x-modules/facets/components/filters/hierarchical-filter.vue';
 
   const filter: Ref<SimpleFilterModel> = ref({
     modelName: 'SimpleFilter',
@@ -44,14 +101,50 @@
     selected: false
   });
 
+  const filterNumber: Ref<NumberRangeFilterModel> = ref({
+    id: `price:1-10`,
+    modelName: 'NumberRangeFilter',
+    label: `From 1 to 10`,
+    facetId: 'price',
+    range: {
+      min: 1,
+      max: 10
+    },
+    selected: false
+  });
+
+  const filterEditNumber: Ref<EditableNumberRangeFilterModel> = ref({
+    facetId: 'age',
+    id: 'age:primary',
+    label: 'primary',
+    modelName: 'EditableNumberRangeFilter',
+    range: {
+      min: null,
+      max: null
+    },
+    selected: false
+  });
+
+  const filterHierarchical: Ref<HierarchicalFilterModel> = ref({
+    id: `categories:men`,
+    modelName: 'HierarchicalFilter',
+    label: `men`,
+    facetId: 'categories',
+    parentId: null,
+    totalResults: 10,
+    children: [],
+    selected: false
+  });
+
   const innerCssClasses = computed(() => [
     'MOT-CUSTOM',
     { 'MOT-CUSTOM--SELECTED': filter.value.selected }
   ]);
 </script>
 
-<style>
-  .MOT-CUSTOM--SELECTED {
+<style lang="scss">
+  .MOT-CUSTOM--SELECTED,
+  .x-selected {
     background-color: greenyellow;
   }
 </style>

packages/x-components/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.62](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-07-08)
+
+
+### Features
+
+* **renderless-extra-param:** migrate to composition API (#1546) ([3f111f9](https://github.com/empathyco/x/commit/3f111f98fdf0a4175dce0a5d8711bb8d4e4729df))
+
+
+
 ## [5.0.0-alpha.61](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-07-03)
 
 

packages/x-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.61",
+  "version": "5.0.0-alpha.62",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",

packages/x-components/src/x-modules/extra-params/components/__tests__/renderless-extra-params.spec.ts

@@ -82,7 +82,7 @@ describe('testing RenderlessExtraParam component', () => {
     expect(userChangedExtraParamsCallback).toHaveBeenCalledWith<[WirePayload<Dictionary<unknown>>]>(
       {
         eventPayload: { warehouse: 45678 },
-        metadata: { moduleName: 'extraParams', location: undefined, replaceable: true }
+        metadata: { moduleName: 'extraParams', location: 'none', replaceable: true }
       }
     );
 

packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue

@@ -5,63 +5,63 @@
 </template>
 
 <script lang="ts">
-  import { Dictionary } from '@empathyco/x-utils';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { NoElement, State, xComponentMixin } from '../../../components';
+  import { computed, defineComponent } from 'vue';
+  import { NoElement } from '../../../components/no-element';
   import { extraParamsXModule } from '../x-module';
+  import { useState, useXBus } from '../../../composables';
 
   /**
    * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`
    * is called.
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(extraParamsXModule)],
+  export default defineComponent({
+    name: 'RenderlessExtraParam',
+    xModule: extraParamsXModule.name,
     components: {
       NoElement
-    }
-  })
-  export default class RenderlessExtraParam extends Vue {
-    /**
-     * The extra param's name.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    public name!: string;
+    },
+    props: {
+      name: {
+        type: String,
+        required: true
+      }
+    },
+    setup(props) {
+      const xBus = useXBus();
+      /**
+       * A dictionary with the extra params in the store state.
+       *
+       * @public
+       */
+      const stateParams = useState('extraParams', ['params']).params;
 
-    /**
-     * A dictionary with the extra params in the store state.
-     *
-     * @public
-     */
-    @State('extraParams', 'params')
-    public stateParams!: Dictionary<unknown>;
+      /**
+       * It returns the value of the extra param from the store.
+       *
+       * @returns - The value from the store.
+       *
+       * @internal
+       */
+      const value = computed(() => {
+        return stateParams.value[props.name];
+      });
 
-    /**
-     * It returns the value of the extra param from the store.
-     *
-     * @returns - The value from the store.
-     *
-     * @internal
-     */
-    protected get value(): unknown {
-      return this.stateParams[this.name];
-    }
+      /**
+       * It sets the new value to the store.
+       *
+       * @param newValue - The new value of the extra param.
+       *
+       * @internal
+       */
+      function updateValue(newValue: unknown) {
+        xBus.emit('UserChangedExtraParams', { [props.name]: newValue });
+      }
 
-    /**
-     * It sets the new value to the store.
-     *
-     * @param newValue - The new value of the extra param.
-     *
-     * @internal
-     */
-    protected updateValue(newValue: unknown): void {
-      this.$x.emit('UserChangedExtraParams', { [this.name]: newValue });
+      return { value, updateValue };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">

packages/x-components/src/x-modules/facets/components/filters/__tests__/editable-number-range-filter.spec.ts

@@ -1,7 +1,7 @@
 import { EditableNumberRangeFilter, RangeValue } from '@empathyco/x-types';
 import { DeepPartial } from '@empathyco/x-utils';
 import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { Ref, ref } from 'vue';
 import Vuex, { Store } from 'vuex';
 // eslint-disable-next-line max-len
 import { createEditableNumberRangeFilter } from '../../../../../__stubs__/filters-stubs.factory';
@@ -34,13 +34,12 @@ function renderEditableNumberRangeFilter({
     />
   `,
   range,
-  filter = createEditableNumberRangeFilter('age', range),
+  filter = ref(createEditableNumberRangeFilter('age', range)),
   isInstant = false,
   hasClearButton = true,
   buttonsClass,
   inputsClass
 }: EditableNumberRangeFilterOptions = {}): EditableNumberRangeFilterAPI {
-  Vue.observable(filter);
   const localVue = createLocalVue();
   localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
@@ -343,7 +342,7 @@ interface EditableNumberRangeFilterOptions {
    * The {@link @empathyco/x-types#EditableNumberRangeFilter | EditableNumberRangeFilter} object
    * to be passed to the component.
    */
-  filter?: EditableNumberRangeFilter;
+  filter?: Ref<EditableNumberRangeFilter>;
   /** `hasClearButton` property to init the component. */
   hasClearButton?: boolean;
   /** `isInstant` property to init the component. */
@@ -364,7 +363,7 @@ interface EditableNumberRangeFilterAPI {
   /** Clear button wrapper. */
   clearButtonWrapper: Wrapper<Vue>;
   /** The filter passed to the component. */
-  filter: EditableNumberRangeFilter;
+  filter: Ref<EditableNumberRangeFilter>;
   /** Filter component wrapper. */
   filterWrapper: Wrapper<Vue>;
   /** Max input element wrapper. */