-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(useSearchParams): Adding useSearchParams function
- Loading branch information
1 parent
ab180cf
commit 260b3f8
Showing
21 changed files
with
434 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './useSearchParams' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
<template> | ||
<div class="field is-horizontal"> | ||
<div class="field-label is-normal"> | ||
<label class="label">{{label}}</label> | ||
</div> | ||
<div class="field-body"> | ||
<div class="field"> | ||
<slot></slot> | ||
</div> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
name: 'Field', | ||
props: { | ||
label: String, | ||
} | ||
} | ||
</script> |
87 changes: 87 additions & 0 deletions
87
src/components/useSearchParams/stories/UseSearchParamsDemo.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
<template> | ||
<table class="table is-fullwidth"> | ||
<thead> | ||
<tr> | ||
<th>Prop</th> | ||
<th>Value</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<td>searchParams</td> | ||
<td> | ||
<pre>{{ searchParams }}</pre> | ||
<br /> | ||
<field label="Search param"> | ||
<input class="input" type="text" v-model="searchFld" /> | ||
</field> | ||
<field label="Filter param"> | ||
<input class="input" type="text" v-model="filterFld" /> | ||
</field> | ||
<button class="button is-info" @click="clearFields">Clear</button> | ||
</td> | ||
</tr> | ||
<tr> | ||
<td colspan="2"> | ||
<button class="button is-primary" @click="start" v-if="!isTracking"> | ||
Start tracking search param | ||
</button> | ||
<button class="button is-danger" @click="stop" v-else> | ||
Stop tracking search param | ||
</button> | ||
</td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import Vue from 'vue' | ||
import { ref, watch } from '@src/api' | ||
import { useSearchParams } from '@src/vue-use-kit' | ||
import Field from './Field.vue' | ||
const updateSearchParams = ( | ||
url: string, | ||
idVal: string | null, | ||
searchVal: string | ||
) => history.pushState({}, '', `${url}?id=${idVal}${searchVal}`) | ||
export default Vue.extend({ | ||
name: 'UseSearchParamsDemo', | ||
components: { Field }, | ||
setup() { | ||
const { searchParams, isTracking, start, stop } = useSearchParams([ | ||
'id', | ||
'search', | ||
'filter' | ||
]) | ||
const searchFld = ref('') | ||
const filterFld = ref('') | ||
// Update location bar params | ||
watch([searchFld, filterFld], ([searchVal, filterVal]) => { | ||
const url = `${location.origin}${location.pathname}` | ||
const idVal = new URLSearchParams(location.search).get('id') | ||
const fieldParams = | ||
searchVal || filterVal ? `&search=${searchVal}&filter=${filterVal}` : '' | ||
updateSearchParams(url, idVal, fieldParams) | ||
}) | ||
const clearFields = () => { | ||
searchFld.value = '' | ||
filterFld.value = '' | ||
} | ||
return { | ||
searchParams, | ||
isTracking, | ||
start, | ||
stop, | ||
searchFld, | ||
filterFld, | ||
clearFields | ||
} | ||
} | ||
}) | ||
</script> |
Oops, something went wrong.