Merge branch 'main' into feat/EMP-4154-migrate-panels-components-to-c…

…omposition-api

# Conflicts:
#	packages/_vue3-migration-test/src/components/index.ts
#	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.19](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.19) (2024-05-30)
+
+
+### Features
+
+* **highlight:** migrate highlight component to composition API (#1486) ([10dd541](https://github.com/empathyco/x/commit/10dd5417f861d6e1152483abbd510059d2917f48))
+
+
+
 ## [1.0.0-alpha.18](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.18) (2024-05-29)
 
 

packages/_vue3-migration-test/package.json

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

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

@@ -8,4 +8,5 @@ export { default as TestBaseVariableColumnGrid } from './test-base-variable-colu
 export { default as TestSlidingPanel } from './test-sliding-panel.vue';
 export { default as TestUseLayouts } from './test-use-layouts.vue';
 export { default as TestBaseSuggestions } from './suggestions/test-base-suggestions.vue';
+export { default as TestHighlight } from './test-highlight.vue';
 export { default as TestBasePanel } from './panels/test-base-panel.vue';

packages/_vue3-migration-test/src/components/test-highlight.vue

@@ -0,0 +1,33 @@
+<template>
+  <Highlight
+    :text="'Almendra garrapiñada'"
+    :highlight="'men'"
+    match-class="match-class"
+    no-match-class="no-match-class"
+    matching-part-class="matching-part-class"
+  />
+  <br />
+  <Highlight
+    :text="'Almendra garrapiñada'"
+    :highlight="'tar'"
+    match-class="match-class"
+    no-match-class="no-match-class"
+    matching-part-class="matching-part-class"
+  />
+</template>
+
+<script setup lang="ts">
+  import Highlight from '../../../x-components/src/components/highlight.vue';
+</script>
+
+<style>
+  .match-class {
+    color: red;
+  }
+  .matching-part-class {
+    color: greenyellow;
+  }
+  .no-match-class {
+    color: blue;
+  }
+</style>

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

@@ -23,6 +23,7 @@ import {
   TestUseLayouts,
   TestSlidingPanel,
   TestBaseSuggestions,
+  TestHighlight,
   TestBasePanel
 } from './';
 
@@ -142,6 +143,11 @@ const routes = [
     name: 'BaseSuggestions',
     component: TestBaseSuggestions
   },
+  {
+    path: '/highlight',
+    name: 'Highlight',
+    component: TestHighlight
+  },
   {
     path: '/test-base-panel',
     name: 'TestBasePanel',

packages/x-components/CHANGELOG.md

@@ -3,6 +3,24 @@
 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.27](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-30)
+
+
+### Features
+
+* **highlight:** migrate highlight component to composition API (#1486) ([10dd541](https://github.com/empathyco/x/commit/10dd5417f861d6e1152483abbd510059d2917f48))
+
+
+
+## [5.0.0-alpha.26](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-30)
+
+
+### Bug Fixes
+
+* **animation:** fix Expected Object, got Function on animations props (#1489) ([4467edc](https://github.com/empathyco/x/commit/4467edcb08c8d4f59044209d0f9a800745f6d6af))
+
+
+
 ## [5.0.0-alpha.25](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-29)
 
 

packages/x-components/package.json

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

packages/x-components/src/components/base-dropdown.vue

@@ -78,15 +78,8 @@
 
 <script lang="ts">
   import { Identifiable } from '@empathyco/x-types';
-  import Vue, {
-    computed,
-    defineComponent,
-    nextTick,
-    onBeforeUnmount,
-    PropType,
-    ref,
-    watch
-  } from 'vue';
+  import { computed, defineComponent, nextTick, onBeforeUnmount, PropType, ref, watch } from 'vue';
+  import { AnimationProp } from '../types';
   import { getTargetElement } from '../utils/html';
   import { normalizeString } from '../utils/normalize';
   import { isInRange } from '../utils/number';
@@ -123,7 +116,7 @@
        * so only `<transition>` components are allowed.
        */
       animation: {
-        type: Object as PropType<string | typeof Vue>,
+        type: AnimationProp,
         default: () => NoElement
       },
       /** Time to wait without receiving any keystroke before resetting the items search query. */

packages/x-components/src/components/highlight.vue

@@ -27,113 +27,132 @@
 </template>
 
 <script lang="ts">
-  import { Component, Mixins, Prop } from 'vue-property-decorator';
+  import { computed, defineComponent } from 'vue';
   import { normalizeString } from '../utils/normalize';
   import { VueCSSClasses } from '../utils/types';
   import { NoElement } from './no-element';
-  import { dynamicPropsMixin } from './dynamic-props.mixin';
 
   /**
    * Highlights the given part of the text. The component is smart enough to do matches
    * between special characters like tilde, cedilla, eñe, capital letters...
    *
    * @public
    */
-  @Component({
-    components: { NoElement }
-  })
-  export default class Highlight extends Mixins(
-    dynamicPropsMixin(['noMatchClass', 'matchingPartClass'])
-  ) {
-    /**
-     * The text to highlight some part of it.
-     *
-     * @public
-     */
-    @Prop({ default: '' })
-    public text!: string;
-
-    /**
-     * The part of the text to be highlighted.
-     *
-     * @public
-     */
-    @Prop({ default: '' })
-    public highlight!: string;
-
-    /**
-     * CSS Class to add when the `text` string contains the `highlight` string.
-     */
-    @Prop({ default: '' })
-    public matchClass!: string;
-
-    /**
-     * Checks if the normalized suggestion query matches with the module's query, so it has a
-     * matching part.
-     *
-     * @returns True if there is a match between the text and the highlight strings.
-     * @internal
-     */
-    protected get hasMatch(): boolean {
-      return !!this.matchParts.match;
-    }
-
-    /**
-     * CSS classes to add depending on the component state.
-     *
-     * @remarks
-     * `x-highlight--has-match`: When there is a match between the text and the part to highlight.
-     * `[matchClass]`: When there is a match between the text and
-     * the part to highlight.
-     * `[noMatchClass]`: when there is no match between the text to highlight.
-     * @returns The {@link VueCSSClasses} classes.
-     * @internal
-     */
-    protected get dynamicCSSClasses(): VueCSSClasses {
-      const classes: VueCSSClasses = {
-        'x-highlight--has-match': this.hasMatch,
-        'x-highlight-text': this.hasMatch,
-        [this.matchClass]: this.hasMatch
-      };
-      if (this.noMatchClass) {
-        classes[this.noMatchClass] = !this.hasMatch;
+  export default defineComponent({
+    name: 'Highlight',
+    components: { NoElement },
+    props: {
+      /**
+       * The text to highlight some part of it.
+       *
+       * @public
+       */
+      text: {
+        type: String,
+        default: ''
+      },
+      /**
+       * The part of the text to be highlighted.
+       *
+       * @public
+       */
+      highlight: {
+        type: String,
+        default: ''
+      },
+      /**
+       * CSS Class to add when the `text` string contains the `highlight` string.
+       */
+      matchClass: {
+        type: String,
+        default: ''
+      },
+      /**
+       * CSS Class to add when the given `text` doesn't contain the `highlight` string.
+       */
+      noMatchClass: {
+        type: String,
+        default: ''
+      },
+      /**
+       * CSS Class to add to the matching text.
+       */
+      matchingPartClass: {
+        type: String,
+        default: ''
+      }
+    },
+    setup: function (props) {
+      /**
+       * Splits the text to highlight into 3 parts: a starting part, the matching part
+       * and the ending part. If there is no match between the text and the highlight, the `start`
+       * property will contain the whole text.
+       *
+       * @returns An object containing the different parts of the text.
+       * @internal
+       */
+      const matchParts = computed((): HighlightMatch => {
+        const matcherIndex = normalizeString(props.text).indexOf(normalizeString(props.highlight));
+        return matcherIndex !== -1 && props.highlight
+          ? splitAt(props.text.trim(), matcherIndex, matcherIndex + props.highlight.trim().length)
+          : { start: props.text, match: '', end: '' };
+      });
+
+      /**
+       * Checks if the normalized suggestion query matches with the module's query, so it has a
+       * matching part.
+       *
+       * @returns True if there is a match between the text and the highlight strings.
+       * @internal
+       */
+      const hasMatch = computed((): boolean => {
+        return !!matchParts.value.match;
+      });
+
+      /**
+       * CSS classes to add depending on the component state.
+       *
+       * @remarks
+       * `x-highlight--has-match`: When there is a match between the text and the part to highlight.
+       * `[matchClass]`: When there is a match between the text and
+       * the part to highlight.
+       * `[noMatchClass]`: when there is no match between the text to highlight.
+       * @returns The {@link VueCSSClasses} classes.
+       * @internal
+       */
+      const dynamicCSSClasses = computed((): VueCSSClasses => {
+        const classes: VueCSSClasses = {
+          'x-highlight--has-match': hasMatch.value,
+          'x-highlight-text': hasMatch.value,
+          [props.matchClass]: hasMatch.value
+        };
+        if (props.noMatchClass) {
+          classes[props.noMatchClass] = !hasMatch.value;
+        }
+        return classes;
+      });
+
+      /**
+       * Splits the label in three parts based on two indexes.
+       *
+       * @param label - The string that will be divided in three parts.
+       * @param start - The first index that the label will be divided by.
+       * @param end - The second index that the label will be divided by.
+       *
+       * @returns The three parts of the divided label.
+       * @internal
+       */
+      function splitAt(label: string, start: number, end: number): HighlightMatch {
+        return {
+          start: label.substring(0, start),
+          match: label.substring(start, end),
+          end: label.substring(end)
+        };
       }
-      return classes;
-    }
-
-    /**
-     * Splits the text to highlight into 3 parts: a starting part, the matching part
-     * and the ending part. If there is no match between the text and the highlight, the `start`
-     * property will contain the whole text.
-     *
-     * @returns An object containing the different parts of the text.
-     * @internal
-     */
-    protected get matchParts(): HighlightMatch {
-      const matcherIndex = normalizeString(this.text).indexOf(normalizeString(this.highlight));
-      return matcherIndex !== -1 && this.highlight
-        ? this.splitAt(this.text.trim(), matcherIndex, matcherIndex + this.highlight.trim().length)
-        : { start: this.text, match: '', end: '' };
-    }
 
-    /**
-     * Splits the label in three parts based on two indexes.
-     *
-     * @param label - The string that will be divided in three parts.
-     * @param start - The first index that the label will be divided by.
-     * @param end - The second index that the label will be divided by.
-     *
-     * @returns The three parts of the divided label.
-     * @internal
-     */
-    protected splitAt(label: string, start: number, end: number): HighlightMatch {
-      return {
-        start: label.substring(0, start),
-        match: label.substring(start, end),
-        end: label.substring(end)
-      };
+      return { hasMatch, matchParts, dynamicCSSClasses };
     }
-  }
+  });
 
   /**
    * Contains the different parts of a string match.