Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: update loading | adjust notification component #622

Merged
merged 4 commits into from
Oct 11, 2023
Merged

refactor: update loading | adjust notification component #622

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c70a5b6
reafctor(loading): update loading component
mlmoravek Oct 10, 2023
f1f2a4e
reafctor(notification): adjust notification component
mlmoravek Oct 10, 2023
26d6821
fix(loading): typo
mlmoravek Oct 11, 2023
dff1e18
refactor(notification): add expose close
mlmoravek Oct 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions packages/docs-next/.vitepress/theme/examples/loading/base.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading