Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 34x 34x 34x 34x | <script>
import { historyPushState, historyReplaceState } from '~/lib/utils/common_utils';
import { mergeUrlParams, setUrlParams } from '~/lib/utils/url_utility';
export const HISTORY_PUSH_UPDATE_METHOD = 'push';
export const HISTORY_REPLACE_UPDATE_METHOD = 'replace';
export const URL_SET_PARAMS_STRATEGY = 'set';
export const URL_MERGE_PARAMS_STRATEGY = 'merge';
/**
* Renderless component to update the query string,
* the update is done by updating the query property or
* by using updateQuery method in the scoped slot.
* note: do not use both prop and updateQuery method.
*/
export default {
props: {
query: {
type: Object,
required: false,
default: null,
},
urlParamsUpdateStrategy: {
type: String,
required: false,
default: URL_MERGE_PARAMS_STRATEGY,
validator: (value) => [URL_MERGE_PARAMS_STRATEGY, URL_SET_PARAMS_STRATEGY].includes(value),
},
historyUpdateMethod: {
type: String,
required: false,
default: HISTORY_PUSH_UPDATE_METHOD,
validator: (value) =>
[HISTORY_PUSH_UPDATE_METHOD, HISTORY_REPLACE_UPDATE_METHOD].includes(value),
},
},
watch: {
query: {
immediate: true,
deep: true,
handler(newQuery) {
if (newQuery) {
this.updateQuery(newQuery);
}
},
},
},
methods: {
updateQuery(newQuery) {
const url =
this.urlParamsUpdateStrategy === URL_SET_PARAMS_STRATEGY
? setUrlParams(this.query, window.location.href, true, true, true)
: mergeUrlParams(newQuery, window.location.href, { spreadArrays: true });
if (this.historyUpdateMethod === HISTORY_PUSH_UPDATE_METHOD) {
historyPushState(url);
} else {
historyReplaceState(url);
}
},
},
render() {
return this.$scopedSlots.default?.({ updateQuery: this.updateQuery });
},
};
</script>
|