Skip to content

Commit

Permalink
fix breaking changes
Browse files Browse the repository at this point in the history
  • Loading branch information
diegopf committed Jul 15, 2024
1 parent 671c35a commit 8ec5a20
Show file tree
Hide file tree
Showing 48 changed files with 419 additions and 586 deletions.
2 changes: 1 addition & 1 deletion packages/x-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@
"vue": "~3.4.31",
"vue-docgen-cli": "~4.79.0",
"vue-router": "~4.4.0",
"vuex": "~4.1.0"
"vuex": "4.0.2"
},
"publishConfig": {
"access": "public",
Expand Down
1 change: 0 additions & 1 deletion packages/x-components/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
<script setup>
import { useRouter } from 'vue-router';
const $router = useRouter();
console.log($router);
</script>

<style lang="scss">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<!-- eslint-disable-next-line vue/attributes-order -->
<transition v-bind="$attrs" v-on="$listeners" name="x-animate-width-">
<transition v-bind="$attrs" name="x-animate-width-">
<!-- @slot (Required) Transition content -->
<slot />
</transition>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<!-- eslint-disable vue/attributes-order -->
<transition
v-bind="$attrs"
v-on="$listeners"
@enter="expand"
@after-enter="cleanUpAnimationStyles"
@leave="collapse"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<!-- eslint-disable vue/attributes-order -->
<transition
v-bind="$attrs"
v-on="$listeners"
@enter="expand"
@after-enter="cleanUpAnimationStyles"
@leave="collapse"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<!-- eslint-disable-next-line vue/attributes-order -->
<transition v-bind="$attrs" v-on="$listeners" name="x-cross-fade-" :appear="appear">
<transition v-bind="$attrs" name="x-cross-fade-" :appear="appear">
<!-- @slot (Required) to add content to the transition -->
<slot />
</transition>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<!-- eslint-disable vue/attributes-order -->
<transition-group
v-bind="$attrs"
v-on="$listeners"
class="x-fade-and-slide"
:name="name"
:tag="tag"
Expand Down
2 changes: 1 addition & 1 deletion packages/x-components/src/components/animations/fade.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<!-- eslint-disable-next-line vue/attributes-order -->
<transition v-bind="$attrs" v-on="$listeners" name="x-fade-" :appear="appear">
<transition v-bind="$attrs" name="x-fade-" :appear="appear">
<!-- @slot (Required) to add content to the transition -->
<slot />
</transition>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<!-- eslint-disable vue/attributes-order -->
<StaggeringTransitionGroup
v-bind="$attrs"
v-on="$listeners"
class="x-staggered-fade-and-slide"
:name="name"
:appear="appear"
Expand Down
3 changes: 2 additions & 1 deletion packages/x-components/src/components/base-event-button.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<button ref="rootRef" v-on="$listeners" @click="emitEvents" data-test="event-button">
<button ref="rootRef" v-bind="$attrs" @click="emitEvents" data-test="event-button">
<!-- @slot (Required) Button content with a text, an icon or both -->
<slot />
</button>
Expand All @@ -20,6 +20,7 @@
* @public
*/
export default defineComponent({
inheritAttrs: false,
name: 'BaseEventButton',
props: {
/** An object where the keys are the {@link XEvent} and the values are the payload. */
Expand Down
13 changes: 8 additions & 5 deletions packages/x-components/src/components/base-grid.vue
Original file line number Diff line number Diff line change
Expand Up @@ -229,11 +229,14 @@
*
* @internal
*/
const resizeObserver = useResizeObserver(
gridEl as MaybeComputedElementRef,
updateRenderedColumnsNumber
);
onBeforeUnmount(() => resizeObserver.stop());
let resizeObserver: any;
if (gridEl.value) {
resizeObserver = useResizeObserver(
gridEl as MaybeComputedElementRef,
updateRenderedColumnsNumber
);
}
onBeforeUnmount(() => resizeObserver?.stop());
return {
gridItems,
Expand Down
18 changes: 10 additions & 8 deletions packages/x-components/src/components/global-x-bus.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, PropType } from 'vue';
import { XEventListeners } from '../x-installer/api/api.types';
import { XEvent } from '../wiring/events.types';
import { useNoElementRender } from '../composables/use-no-element-render';
import { useXBus } from '../composables/use-x-bus';
/**
Expand All @@ -13,22 +12,25 @@
*/
export default defineComponent({
name: 'GlobalXBus',
inheritAttrs: false,
setup(_, { attrs, slots }) {
props: {
listeners: {
type: Object as PropType<XEventListeners>,
required: true
}
},
setup(props) {
const xBus = useXBus();
/**
* Handles a subscription to all the events provided in the listeners with the function that
* will execute the callback.
*/
console.log(attrs);
Object.entries(attrs.listeners as XEventListeners).forEach(([eventName, callback]) => {
Object.entries(props.listeners as XEventListeners).forEach(([eventName, callback]) => {
xBus.on(eventName as XEvent, true).subscribe(({ eventPayload, metadata }) => {
callback(eventPayload as never, metadata);
});
});
return () => useNoElementRender(slots);
return () => {};
}
});
</script>
Expand Down
51 changes: 24 additions & 27 deletions packages/x-components/src/components/highlight.vue
Original file line number Diff line number Diff line change
@@ -1,36 +1,33 @@
<template>
<NoElement>
<slot v-bind="{ text, hasMatch, ...matchParts }">
<span class="x-highlight" :class="dynamicCSSClasses">
<span
v-if="matchParts.start"
v-text="matchParts.start"
class="x-highlight__text"
data-test="highlight-start"
/>
<span
v-if="hasMatch"
v-text="matchParts.match"
class="x-highlight__text x-highlight-text-match"
:class="matchingPartClass"
data-test="matching-part"
/>
<span
v-if="matchParts.end"
v-text="matchParts.end"
class="x-highlight__text"
data-test="highlight-end"
/>
</span>
</slot>
</NoElement>
<slot v-bind="{ text, hasMatch, ...matchParts, ...$attrs }" >
<span class="x-highlight" :class="dynamicCSSClasses">
<span
v-if="matchParts.start"
v-text="matchParts.start"
class="x-highlight__text"
data-test="highlight-start"
/>
<span
v-if="hasMatch"
v-text="matchParts.match"
class="x-highlight__text x-highlight-text-match"
:class="matchingPartClass"
data-test="matching-part"
/>
<span
v-if="matchParts.end"
v-text="matchParts.end"
class="x-highlight__text"
data-test="highlight-end"
/>
</span>
</slot>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import { normalizeString } from '../utils/normalize';
import { VueCSSClasses } from '../utils/types';
import { NoElement } from './no-element';
/**
* Highlights the given part of the text. The component is smart enough to do matches
Expand All @@ -39,8 +36,8 @@
* @public
*/
export default defineComponent({
inheritAttrs: false,
name: 'Highlight',
components: { NoElement },
props: {
/**
* The text to highlight some part of it.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,32 @@
<div
class="x-layout x-layout--columns"
:class="{ 'dev-mode': devMode }"
:style="{ height: hasContent('main-body') ? '100%' : 'auto' }"
:style="{ height: '100%' }"
>
<header class="x-layout__header">
<div v-if="hasContent('header-start')" class="x-list x-layout__header-start">
<div class="x-list x-layout__header-start">
<!-- @slot Slot that can be used to insert content into the left part of the header. -->
<slot name="header-start">
<span v-if="devMode" class="slot-helper">HEADER START</span>
</slot>
</div>

<div v-if="hasContent('header-middle')" class="x-list x-layout__header-middle">
<div class="x-list x-layout__header-middle">
<!-- @slot Slot that can be used to insert content into the center part of the header. -->
<slot name="header-middle">
<span v-if="devMode" class="slot-helper">HEADER MIDDLE</span>
</slot>
</div>

<div v-if="hasContent('header-end')" class="x-list x-layout__header-end">
<div class="x-list x-layout__header-end">
<!-- @slot Slot that can be used to insert content into the right part of the header. -->
<slot name="header-end">
<span v-if="devMode" class="slot-helper">HEADER END</span>
</slot>
</div>
</header>

<div v-if="hasContent('sub-header')" class="x-layout__sub-header">
<div class="x-layout__sub-header">
<div class="x-layout__sub-header-content">
<!-- @slot Slot that can be used to insert content into below the header. -->
<slot name="sub-header">
Expand All @@ -36,7 +36,7 @@
</div>
</div>

<section v-if="hasContent('toolbar-aside', 'toolbar-body')" class="x-layout__toolbar">
<section class="x-layout__toolbar">
<aside class="x-list x-layout__toolbar-aside">
<slot name="toolbar-aside">
<!-- @slot Slot that can be used to insert content above the left aside. -->
Expand All @@ -54,7 +54,6 @@

<main class="x-layout__main">
<BaseIdTogglePanel
v-if="hasContent('main-aside')"
panelId="aside-panel"
:animation="asideAnimation"
class="x-layout__collapse-aside"
Expand All @@ -70,7 +69,7 @@
</BaseIdTogglePanel>

<MainScroll class="x-flex x-flex-auto">
<Scroll v-if="hasContent('main-body')" id="main-scroll" class="x-layout__body-scroll">
<Scroll id="main-scroll" class="x-layout__body-scroll">
<section class="x-layout__main-body x-list x-list--vertical">
<!-- @slot Slot that can be used to insert the body content. -->
<slot name="main-body">
Expand All @@ -81,7 +80,7 @@
</MainScroll>
</main>

<div v-if="hasContent('scroll-to-top')" class="x-layout__scroll-to-top">
<div class="x-layout__scroll-to-top">
<div class="x-layout__scroll-to-top-content">
<slot name="scroll-to-top">
<span v-if="devMode" class="slot-helper" style="height: 50px">SCROLL TO TOP</span>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<BaseEventButton
v-on="$listeners"
v-bind="$attrs"
:events="events"
class="x-events-modal-close-button x-button"
data-test="close-modal"
Expand All @@ -24,6 +24,7 @@
* @public
*/
export default defineComponent({
inheritAttrs: false,
components: {
BaseEventButton
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<BaseEventButton
v-on="$listeners"
v-bind="$attrs"
:events="events"
class="x-events-modal-open-button x-button"
data-test="open-modal"
Expand All @@ -24,6 +24,7 @@
* @public
*/
export default defineComponent({
inheritAttrs: false,
components: {
BaseEventButton
},
Expand Down
24 changes: 11 additions & 13 deletions packages/x-components/src/components/modals/base-id-modal-close.vue
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
<template>
<NoElement>
<!--
<!--
@slot closing-element. It's the element that will trigger the modal closing. It's a
button by default.
@binding {Function} closeModal - The function to close the modal.
-->
<slot :closeModal="emitCloseModalEvent" name="closing-element">
<button
@click="emitCloseModalEvent"
class="x-events-modal-id-close-button x-button"
data-test="close-modal-id"
>
<!-- @slot (Required) Button content with a text, an icon or both -->
<slot />
</button>
</slot>
</NoElement>
<slot :closeModal="emitCloseModalEvent" name="closing-element">
<button
@click="emitCloseModalEvent"
class="x-events-modal-id-close-button x-button"
data-test="close-modal-id"
>
<!-- @slot (Required) Button content with a text, an icon or both -->
<slot />
</button>
</slot>
</template>

<script lang="ts">
Expand Down
24 changes: 11 additions & 13 deletions packages/x-components/src/components/modals/base-id-modal-open.vue
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
<template>
<NoElement>
<!--
<!--
@slot opening-element. It's the element that will trigger the modal opening. It's a
button by default.
@binding {Function} openModal - The function to open the modal.
-->
<slot :openModal="emitOpenModalEvent" name="opening-element">
<button
@click="emitOpenModalEvent"
class="x-events-modal-id-open-button x-button"
data-test="open-modal-id"
>
<!-- @slot (Required) Button content with a text, an icon or both -->
<slot />
</button>
</slot>
</NoElement>
<slot :openModal="emitOpenModalEvent" name="opening-element">
<button
@click="emitOpenModalEvent"
class="x-events-modal-id-open-button x-button"
data-test="open-modal-id"
>
<!-- @slot (Required) Button content with a text, an icon or both -->
<slot />
</button>
</slot>
</template>

<script lang="ts">
Expand Down
Loading

0 comments on commit 8ec5a20

Please sign in to comment.