@empathyco/x-components
Version:
Empathy X Components
108 lines (105 loc) • 4.07 kB
JavaScript
import { defineComponent, ref, watch } from 'vue';
import '../../composables/create-use-device.js';
import { use$x } from '../../composables/use-_x.js';
import 'vuex';
import '@vue/devtools-api';
import '../../plugins/devtools/timeline.devtools.js';
import '@empathyco/x-utils';
import 'rxjs/operators';
import 'rxjs';
import '../../plugins/devtools/colors.utils.js';
import '../../plugins/x-bus.js';
import '../../plugins/x-plugin.js';
import '@vueuse/core';
import { AnimationProp } from '../../types/animation-prop.js';
import '../animations/animate-clip-path/animate-clip-path.style.scss.js';
import '../animations/animate-scale/animate-scale.style.scss.js';
import '../animations/animate-translate/animate-translate.style.scss.js';
import '../animations/animate-width.vue2.js';
import '../animations/animate-width.vue3.js';
import '../animations/change-height.vue2.js';
import '../animations/collapse-height.vue2.js';
import '../animations/collapse-height.vue3.js';
import '../animations/collapse-width.vue2.js';
import '../animations/collapse-width.vue3.js';
import '../animations/cross-fade.vue2.js';
import '../animations/cross-fade.vue3.js';
import '../animations/fade-and-slide.vue2.js';
import '../animations/fade-and-slide.vue3.js';
import '../animations/fade.vue2.js';
import '../animations/fade.vue3.js';
import _sfc_main$1 from '../animations/no-animation.vue.js';
import '../animations/staggered-fade-and-slide.vue2.js';
import '../animations/staggered-fade-and-slide.vue3.js';
import BaseTogglePanel from './base-toggle-panel.vue.js';
/**
* Simple panel that could receives its initial open state via prop, if not the default is opens
* and a required prop, named `panelId`, which are responsible of rendering default slot
* inside a configurable transition.
*
* It reacts to `UserClickedPanelToggleButton` event, when their payload matches the component's
* 'panelId' prop, to handle its open/close state.
*
* The default slot offers the possibility to customise the modal content.
*
* @public
*/
var _sfc_main = defineComponent({
name: 'BaseIdTogglePanel',
components: { BaseTogglePanel },
props: {
/** Shows the panel open at the beginning or not, depending on its state. */
startOpen: {
type: Boolean,
default: true,
},
/** Animation component that will be used to animate the panel content. */
animation: {
type: AnimationProp,
default: () => _sfc_main$1,
},
/**
* The id to link with the BaseIdTogglePanelButton.
* Both components must use the same Id to make them interact.
*/
panelId: {
type: String,
required: true,
},
},
setup(props) {
const $x = use$x();
/** Whether the toggle panel is open or not. */
const isOpen = ref(props.startOpen);
/**
* Method to subscribe to the {@link XEventsTypes.UserClickedPanelToggleButton} event.
*
* @param panelId - The payload of the {@link XEventsTypes.UserClickedPanelToggleButton} event.
*
* @public
*/
const togglePanel = (panelId) => {
if (props.panelId === panelId) {
isOpen.value = !isOpen.value;
}
};
$x.on('UserClickedPanelToggleButton', false).subscribe(togglePanel);
/**
* Emits the {@link XEventsTypes.TogglePanelStateChanged} event, when the internal state
* changes.
*
* @remarks This event is necessary to link the state with the {@link BaseIdTogglePanelButton}
* component.
* @public
*/
watch(() => isOpen.value, () => {
$x.emit('TogglePanelStateChanged', isOpen.value, {
id: props.panelId,
target: document.getElementById(props.panelId),
});
}, { immediate: true });
return { isOpen };
},
});
export { _sfc_main as default };
//# sourceMappingURL=base-id-toggle-panel.vue2.js.map