Skip to content

Commit

Permalink
refactor: update loading | adjust notification component (#622)
Browse files Browse the repository at this point in the history 
* reafctor(loading): update loading component

* refactor(notification): add expose close
  • Loading branch information
@mlmoravek
mlmoravek committed Oct 11, 2023
1 parent c7da2d8 commit 860d083
Show file tree
Hide file tree
Showing 11 changed files with 295 additions and 261 deletions.
13 changes: 6 additions & 7 deletions packages/docs-next/.vitepress/theme/examples/loading/base.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@ const isFullPage = ref(true);
function openLoading() {
isLoading.value = true;
setTimeout(() => {
isLoading.value = false;
}, 10 * 1000);
setTimeout(() => (isLoading.value = false), 10 * 1000);
}
</script>

Expand All @@ -22,9 +20,9 @@ function openLoading() {
@click="openLoading" />
</o-field>
<o-field>
<o-switch v-model="isFullPage">
Display loader over full page
</o-switch>
<o-switch
v-model="isFullPage"
label="Display loader over full page" />
</o-field>
<p style="position: relative">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
Expand All @@ -33,7 +31,8 @@ function openLoading() {
<o-loading
v-model:active="isLoading"
:full-page="isFullPage"
:can-cancel="true" />
label="Loading..."
:cancelable="true" />
</p>
</section>
</template>
8 changes: 4 additions & 4 deletions packages/docs-next/.vitepress/theme/examples/loading/inspector.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const inspectData = [
class: "rootClass",
description: "Class of the root element",
action: (cmp, data) => {
data.canCancel = true;
data.cancelable = true;
data.fullPage = false;
loading.value = true;
},
Expand All @@ -16,7 +16,7 @@ const inspectData = [
class: "overlayClass",
description: "Class of the loading overlay",
action: (cmp, data) => {
data.canCancel = true;
data.cancelable = true;
data.fullPage = false;
loading.value = true;
},
Expand All @@ -25,7 +25,7 @@ const inspectData = [
class: "iconClass",
description: "Class for the loading icon",
action: (cmp, data) => {
data.canCancel = true;
data.cancelable = true;
data.fullPage = false;
loading.value = true;
},
Expand All @@ -36,7 +36,7 @@ const inspectData = [
properties: ["fullPage"],
action: (cmp, data) => {
data.fullPage = true;
data.canCancel = true;
data.cancelable = true;
loading.value = true;
},
},
Expand Down
6 changes: 3 additions & 3 deletions packages/docs-next/.vitepress/theme/examples/loading/programmatically.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ function openLoading() {
@click="openLoading" />
</o-field>
<o-field>
<o-switch v-model="isFullPage">
Display loader over full page
</o-switch>
<o-switch
v-model="isFullPage"
label="Display loader over full page" />
</o-field>
<p ref="elementRef" style="position: relative">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
Expand Down
12 changes: 5 additions & 7 deletions packages/docs-next/.vitepress/theme/examples/loading/slot.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@ const isFullPage = ref(true);
function openLoading() {
isLoading.value = true;
setTimeout(() => {
isLoading.value = false;
}, 10 * 1000);
setTimeout(() => (isLoading.value = false), 10 * 1000);
}
</script>

Expand All @@ -22,9 +20,9 @@ function openLoading() {
@click="openLoading" />
</o-field>
<o-field>
<o-switch v-model="isFullPage">
Display loader over full page
</o-switch>
<o-switch
v-model="isFullPage"
label="Display loader over full page" />
</o-field>
<p style="position: relative">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
Expand All @@ -33,7 +31,7 @@ function openLoading() {
<o-loading
v-model:active="isLoading"
:full-page="isFullPage"
:can-cancel="true">
:cancelable="true">
<o-icon pack="fas" icon="sync-alt" size="large" spin />
</o-loading>
</p>
Expand Down
39 changes: 19 additions & 20 deletions packages/docs-next/components/Loading.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,32 +38,31 @@ title: Loading

### Props

| Prop name | Description | Type | Values | Default |
| --------- | -------------------------------------------------------------------------------- | ------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| active | Whether loading is active or not, use v-model:active to make it two-way binding | boolean | - | <code style='white-space: nowrap; padding: 0;'></code> |
| animation | | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;animation: "fade", <br>}</code> |
| canCancel | Can close Loading by pressing escape or clicking outside | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| container | | object\|func\|HTMLElement | - | <code style='white-space: nowrap; padding: 0;'></code> |
| fullPage | Loader will overlay the full page | boolean | - | <code style='white-space: nowrap; padding: 0;'>true</code> |
| icon | Icon name | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;icon: "loading"<br>}</code> |
| iconSize | | string | - | <code style='white-space: nowrap; padding: 0;'>"medium"</code> |
| iconSpin | Enable spin effect on icon | boolean | - | <code style='white-space: nowrap; padding: 0;'>true</code> |
| onCancel | Callback function to call after user canceled (pressed escape / clicked outside) | func | - | Default function (see source code) |
| override | | boolean | - | <code style='white-space: nowrap; padding: 0;'></code> |
| Prop name | Description | Type | Values | Default |
| ---------- | -------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| active | Whether loading is active or not, use v-model:active to make it two-way binding. | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| animation | Custom animation (transition name) | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;animation: "fade"<br>}</code> |
| cancelable | Can cancle Loading by pressing escape or clicking outside. | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| container | DOM element where the loading component will be created on.<br/>Note that this also changes fullPage to false. | HTMLElement | - | |
| fullPage | Loader will overlay the full page. | boolean | - | <code style='white-space: nowrap; padding: 0;'>true</code> |
| icon | Icon name to show, unnecessary when default slot is used. | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;icon: "loading"<br>}</code> |
| iconSize | Icon size | string | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;iconSize: "medium"<br>}</code> |
| iconSpin | Enable spin effect on icon | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;iconSpin: true<br>}</code> |
| label | Notification label, unnecessary when default slot is used. | string | - | |
| onCancle | Callback function to call after user canceled (pressed escape / clicked outside). | func | - | Default function (see source code) |

### Events

| Event name | Properties | Description |
| ---------------- | ---------- | ----------- |
| update:active | |
| close | |
| update:full-page | |
| Event name | Properties | Description |
| ------------- | ----------------------------------------- | --------------------------- |
| update:active | **value** `boolean` - updated active prop | active prop two-way binding |
| close | **value** `any` - | on loading close event |

### Slots

| Name | Description | Bindings |
| ------- | ----------- | -------- |
| default | | |
| Name | Description | Bindings |
| ------- | ----------------------- | -------- |
| default | Override icon and label | |

</div>

Expand Down
Loading

0 comments on commit 860d083

Please sign in to comment.