@empathyco/x-components
Version:
Empathy X Components
170 lines (167 loc) • 5.56 kB
JavaScript
import { defineComponent, ref, computed, watch } from 'vue';
import '../../../composables/create-use-device.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 { useState } from '../../../composables/use-state.js';
import { AnimationProp } from '../../../types/animation-prop.js';
import { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview.js';
import { queriesPreviewXModule } from '../x-module.js';
import QueryPreview from './query-preview.vue.js';
/**
* Renders the results previews of a list of objects with the information about the query preview,
* and exposes the {@link QueryPreview} slots to modify the content.
* The requests are made in sequential order.
*
* @public
*/
var _sfc_main = defineComponent({
name: 'QueryPreviewList',
xModule: queriesPreviewXModule.name,
components: { QueryPreview },
props: {
/**
* The list of queries preview to render.
*
* @public
*/
queriesPreviewInfo: {
type: Array,
required: true,
},
/**
* The origin property for the request on each query preview.
*
* @public
*/
queryFeature: {
type: String,
},
/**
* Number of query preview results to be rendered on each query preview.
*
* @public
*/
maxItemsToRender: {
type: Number,
},
/**
* Debounce time in milliseconds for triggering the search requests
* on each query preview.
* It will default to 0 to fit the most common use case (pre-search),
* and it would work properly with a 250 value inside empathize.
*/
debounceTimeMs: {
type: Number,
default: 0,
},
/**
* Controls whether all the QueryPreview should be removed from the state
* when the component is destroyed.
*
* @public
*/
persistInCache: Boolean,
/**
* Animation component that will be used to animate the elements.
*
* @public
*/
animation: {
type: AnimationProp,
default: 'ul',
},
},
setup(props) {
const { params } = useState('queriesPreview');
/**
* Contains the status of the preview requests, indexed by query.
*/
const queriesStatus = ref({});
/**
* The list of queries to preview.
*
* @returns The list of queries in the queriesPreviewInfo list.
* @internal
*/
const queries = computed(() => props.queriesPreviewInfo.map(item => getHashFromQueryPreviewInfo(item, { ...params.value, ...item.extraParams })));
/**
* Gets all the queries to render, that are those that don't have an `error` status.
*
* @returns A list of queries.
* @internal
*/
const renderedQueryPreviews = computed(() => {
return props.queriesPreviewInfo.filter(item => {
const queryPreviewHash = getHashFromQueryPreviewInfo(item, {
...params.value,
...item.extraParams,
});
return (queriesStatus.value[queryPreviewHash] === 'success' ||
queriesStatus.value[queryPreviewHash] === 'loading');
});
});
/**
* Tries to load the next query.
*
* @internal
*/
const loadNext = () => {
const queryToLoad = queries.value.find(query => !(query in queriesStatus.value));
if (queryToLoad) {
queriesStatus.value[queryToLoad] = 'loading';
}
};
/**
* Resets the status of all queries if they change.
*
* @param newQueries - The new queries.
* @param oldQueries - The old queries.
* @internal
*/
watch(queries, (newQueries, oldQueries) => {
if (newQueries.toString() !== oldQueries?.toString()) {
for (const key of Object.keys(queriesStatus.value)) {
if (!newQueries.includes(key)) {
delete queriesStatus.value[key];
}
}
loadNext();
}
}, { immediate: true, deep: true });
/**
* Sets the status of a given query to `success`.
*
* @param loadedQuery - The query to flag as loaded.
* @internal
*/
const flagAsLoaded = (loadedQuery) => {
queriesStatus.value[loadedQuery] = 'success';
loadNext();
};
/**
* Sets the status of a given query to `error`.
*
* @param failedQuery - The query to flag as failed.
* @internal
*/
const flagAsFailed = (failedQuery) => {
queriesStatus.value[failedQuery] = 'error';
loadNext();
};
return {
renderedQueryPreviews,
flagAsFailed,
flagAsLoaded,
};
},
});
export { _sfc_main as default };
//# sourceMappingURL=query-preview-list.vue2.js.map