-
-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(lib): add wait plugin to manage loading state (#214)
* feat(lib): add wait plugin to manage loading state * refactor(lib): MazIcon - use transformSource method * chore(release): bump version to 3.0.0-next.12
- Loading branch information
1 parent
b803ce6
commit a6a1931
Showing
36 changed files
with
434 additions
and
137 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,5 +2,6 @@ export const plugins = { | |
| text: 'Plugins', | ||
| children: [ | ||
| '/plugins/toaster.md', | ||
| '/plugins/wait.md', | ||
| ] | ||
| } | ||
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,96 @@ | ||
| --- | ||
| description: Plugins to manage your loading states | ||
| --- | ||
|
|
||
| # wait | ||
|
|
||
| > Loading state handling | ||
| ## Basic usage | ||
|
|
||
| <br /> | ||
|
|
||
|
|
||
| <MazBtn @click="submitData" :loading="wait.isLoading('DATA_SUBMITTING')"> | ||
| Submit Data | ||
| </MazBtn> | ||
| <br /> | ||
| <br /> | ||
| <div v-if="submitted" style="padding: 20px; background-color: var(--maz-color-bg-light); border-radius: 10px;"> | ||
| Data Submitted | ||
| </div> | ||
|
|
||
| ```vue | ||
| <template> | ||
| <MazBtn @click="submitData" :loading="wait.isLoading('DATA_SUBMITTING')"> | ||
| Submit Data | ||
| </MazBtn> | ||
| <div v-if="submitted" style="padding: 20px; background-color: var(--maz-color-bg-light); border-radius: 10px;"> | ||
| Data Submitted | ||
| </div> | ||
| </template> | ||
| <script lang="ts" setup> | ||
| import { inject, ref } from 'vue' | ||
| import { WaitHandler } from 'maz-ui' | ||
| const wait = inject<WaitHandler>('wait') | ||
| const submitted = ref(false) | ||
| function sleep(ms: number) { | ||
| return new Promise(resolve => setTimeout(resolve, ms)); | ||
| } | ||
| const submitData = async () => { | ||
| try { | ||
| submitted.value = false | ||
| wait.start('DATA_SUBMITTING') | ||
| await sleep(2000) | ||
| submitted.value = true | ||
| } finally { | ||
| wait.stop('DATA_SUBMITTING') | ||
| } | ||
| } | ||
| </script> | ||
| ``` | ||
|
|
||
| <script lang="ts" setup> | ||
| import { inject, ref } from 'vue' | ||
| import { WaitHandler } from 'maz-ui' | ||
|
|
||
| const wait = inject<WaitHandler>('wait') | ||
|
|
||
| const submitted = ref(false) | ||
|
|
||
| function sleep(ms: number) { | ||
| return new Promise(resolve => setTimeout(resolve, ms)); | ||
| } | ||
|
|
||
| const submitData = async () => { | ||
| try { | ||
| submitted.value = false | ||
| wait.start('DATA_SUBMITTING') | ||
| await sleep(2000) | ||
| submitted.value = true | ||
| } finally { | ||
| wait.stop('DATA_SUBMITTING') | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| ## Install | ||
|
|
||
| `main.ts` or `main.js` | ||
|
|
||
| ```ts | ||
| import { createApp } from 'vue' | ||
| import { installWait } from 'maz-ui' | ||
|
|
||
| const app = createApp(App) | ||
|
|
||
| app.use(installWait) | ||
|
|
||
| app.mount('#app') | ||
| ``` |
Oops, something went wrong.