Example
<div class="display--flex justify-content-center">
<wui-auto-refresh />
</div>
Unfortunately, the design page you are looking for is not ready yet. But you might want to switch to the implementation tab. There you will find the corresponding Vue component and a description of the different use cases and what to consider when implementing it.
If you have any questions, suggestions or ideas for improvement right now, please feel free to contact us directly.
via Slack: #wescale-wui-public
via Mail: wescale-wui@wescale.com
Stay tuned!
import { WuiAutoRefresh } from "@wui/wui-vue/lib/auto-refresh";
Description
Use the
wui-auto-refreshcomponent if you want to allow the user to refresh e.g. table data. The UI of the component also offers the option of setting an interval after which the component automatically triggers a refresh event.
<wui-auto-refresh @refresh="handleRefresh" />
Custom intervals
The user can choose from user-defined intervals after which time a refresh event should be triggered. Please note that the auto-refresh component automatically adds OFF as the first option and this is preselected by default. The following intervals are set by default for the component:
export const DEFAULT_INTERVALS = [
"5s",
"10s",
"30s",
"1m",
"5m",
"15m",
"30m",
"1h",
"2h",
"1d",
];
The following time units are supported:
| Unit | Description |
|---|---|
s | Seconds |
m | Minutes |
h | Hours |
d | Days |
You can also specify your own intervals by passing an array of valid intervals via the intervals property. Valid intervals start with a number followed by one of the supported time units.
Example
<wui-auto-refresh :intervals="['5s', '10s', '2m', '2d']" />
Placement of the dropdown
wui-auto-refresh uses wui-form-select under the hood, which in turn relies on "@floating-ui" for positioning. With the prop object selectProps you can pass through all props supported by wui-form-select.
Example: auto-refresh with bottom right aligned dropdown placement
<wui-auto-refresh
:intervals="['5s', '10s', '2m', '2d']"
:select-props="{ placement: 'bottom-end' }"
/>
Component reference
<wui-auto-refresh>
Properties
| Property | Type | Default | Description |
|---|---|---|---|
busy | Boolean | false | When set to true, loading icon start spinning providing visual feedback that action by refresh has been triggered |
defaultInterval | String | null | The default interval, should be one of intervals or null |
disabled | Boolean | false | When set to true, disables the component's functionality and places it in a disabled state |
id | String | Used to set the id attribute on the rendered content, and used as the base to generate any additional element IDs as needed | |
intervals | Array | ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"] | A list of valid intervals (e.g. 5s, 30m, 2h or 1d) |
translations | Object | see translations.js | The translation object to pass custom texts |
disabled | Boolean | false | Wether or not the component renders in disabled state |
selectProps | Object | {} | All supported props of the wui-form-select component (e.g. :select-props="{ placement: 'bottom-end' }") |
refreshButtonTooltip | String | "" | When set to a string it adds the text as a tooltip over the refresh button |
Events
| Event | Arguments | Description |
|---|---|---|
input | interval - Current selected interval as a string | Emitted when the auto-refresh interval changes via user interaction |
refresh | Emitted when a refresh is triggered by the component, either by user interaction or by the interval timer |
Importing individual components
You can import individual components into your project via the following named exports:
| Component | Named Export |
|---|---|
<wui-auto-refresh> | WuiAutoRefresh |
Example
import { WuiAutoRefresh } from "@wui/wui-vue/lib/auto-refresh";
Vue.component("wui-auto-refresh", WuiAutoRefresh);
Importing as a Vue.js plugin
This plugin includes all of the above listed individual components. Plugins also include any component aliases.
| Named Export | Import Path |
|---|---|
AutoRefreshPlugin | @wui/wui-vue/lib/auto-refresh |
Example
import { AutoRefreshPlugin } from "@wui/wui-vue/lib/auto-refresh";
Vue.use(AutoRefreshPlugin);
