Basic example
Example: tool bar with filter bar
Contextual toolbelt bar
A toolbelt bar can transform into a contextual action bar to provide contextual actions to selected items. For example, upon user selection of items from a table, the toolbelt bar transforms to a contextual toolbar with actions related to the selected items.
When a toolbelt bar transforms into a contextual action bar, the following changes occur:
- The bar color changes
- A close icon or confirmation button will appear on the right side
- Toolbelt bar title text converts to contextual action bar text
- Toolbelt bar actions are replaced with contextual actions
- Upon closing, the contextual action bar transforms back into a toolbelt bar.
Contextual action bar example
The following example shows a contextual action bar with a contextual title (e. g. number of selected items), a close icon, two contextual action buttons, one with a dropdown dialog menu:
2 selected
Complete example with contextual action bar and confirmation bar
The following example shows a complete example on how different tool bars can be used. There will be a default tool bar, a contextual action bar and a "delete" confirmation bar:
Do you really want to delete these items?
selected
Select one or more items to activate the contextual action bar
Description
Toolbelt bars display actions, statuses or a combination of both related to the content below. Its main purpose is to offer actions through buttons or input widgets. Multiple toolbars can be used and associated with a visibility state.
Example: Basic toolbelt bar usage
<template>
<div>
<wui-toolbelt>
<wui-toolbelt-bar>
<div class="left display--flex">
<div class="display--flex align-items-center m-r-15">
<wui-button variant="primary" class="m-r-10">Action 1</wui-button>
</div>
<div class="display--flex align-items-center m-r-15">
<wui-button variant="primary" class="m-r-10">Action 2</wui-button>
</div>
<div class="display--flex align-items-center">
<wui-button variant="primary">Action 3</wui-button>
</div>
</div>
<div class="right display--flex">
<div class="display--flex align-items-center m-r-5">
<wui-button variant="default" title="Save"
><wui-fa-icon icon="floppy-disk"
/></wui-button>
</div>
<div class="display--flex align-items-center">
<wui-button variant="primary" title="Delete"
><wui-fa-icon icon="trash"
/></wui-button>
</div>
</div>
</wui-toolbelt-bar>
</wui-toolbelt>
</div>
</template>
<!-- wui-toolbelt-bar-basic-example.vue -->
Toggle toolbelt bar visibility
There are several methods that you can employ to toggle the visibility of <wui-toolbelt-bar>.
Using show(), hide(), and toggle() component methods
You can access the toolbelt bar using ref attribute and then call the show(), hide() or toggle() methods.
<template>
<div>
<wui-toolbelt>
<wui-toolbelt-bar ref="toolbar-default">
<wui-button @click="showContextual"
>Show contextual tool bar</wui-button
>
<wui-button @click="toggleContextual">Toggle</wui-button>
</wui-toolbelt-bar>
<wui-toolbelt-bar ref="toolbar-contextual" :visible="false">
<wui-button>Contextual action</wui-button>
<wui-button @click="hideContextual">Hide</wui-button>
<wui-button @click="toggleContextual">Toggle</wui-button>
</wui-toolbelt-bar>
</wui-toolbelt>
</div>
</template>
<script>
export default {
methods: {
showContextual() {
this.$refs["toolbar-default"].hide();
this.$refs["toolbar-contextual"].show();
},
hideContextual() {
this.$refs["toolbar-contextual"].hide();
this.$refs["toolbar-default"].show();
},
toggleToolbars() {
this.$refs["toolbar-default"].toggle();
this.$refs["toolbar-contextual"].toggle();
},
},
};
</script>
<!-- wui-toolbelt-bar-toggle-methods.vue -->
Using v-model property
v-model property is always automatically synced with <wui-toolbelt-bar> visible state and you can show/hide using v-model.
<template>
<div>
<wui-toolbelt>
<wui-toolbelt-bar v-model="showDefaultToolbar">
<wui-button @click="handleShowEvent"
>Show contextual tool bar</wui-button
>
</wui-toolbelt-bar>
<wui-toolbelt-bar v-model="showContextualToolbar">
<wui-button>Contextual action</wui-button>
<wui-button @click="hideContextual">Hide</wui-button>
</wui-toolbelt-bar>
</wui-toolbelt>
</div>
</template>
<script>
export default {
data() {
return {
showDefaultToolbar: true,
showContextualToolbar: false,
};
},
methods: {
handleShowEvent() {
this.showDefaultToolbar = false;
this.showContextualToolbar = true;
},
hideContextual() {
this.showContextualToolbar = false;
this.showDefaultToolbar = true;
},
},
};
</script>
<!-- wui-toolbelt-bar-v-model.vue -->
When using the
v-modelprop, do not use thevisibleprop at the same time.
Contextual toolbelt bar
A toolbelt bar can transform into a contextual action bar to provide contextual actions to selected items. For example, upon user selection of items from a table, the toolbelt bar transforms to a contextual toolbar with actions related to the selected items.
When a toolbelt bar transforms into a contextual action bar, the following changes occur:
- The bar color changes
- A close icon or confirmation button will appear on the right side
- Toolbelt bar title text converts to contextual action bar text
- Toolbelt bar actions are replaced with contextual actions
- Upon closing, the contextual action bar transforms back into a toolbelt bar.
Contextual action bar example
The following example shows a default toolbar with a primary action button on the left side and three icon buttons on the right side. After the "Add item" button is clicked and a item selection was made, a new contextual action bar will be shown with a contextual title ({n} selexted), a close icon and two contextual action buttons, one of them with a dropdown. Once you click "Delete" a third confirmation bar will be shown where whichs asks you to confirm your action.
<template>
<wui-container>
<wui-panel panel-title="WUI toolbar example">
<wui-panel-body>
<ol>
<li>Click the "Add new" button to create a list of checkbox items</li>
<li>Select one or more items to activate another toolbar</li>
<li>Click "Delete" button to show a confirmation toolbar</li>
</ol>
</wui-panel-body>
<wui-toolbelt :class="{ 'border-0': showDeleteConfirmation }">
<!-- The default toolbar -->
<wui-toolbelt-bar
:visible="!showDeleteConfirmation && !showSelectedToolbar"
>
<!-- Left toolbar panel -->
<div class="toolbar-panel">
<div class="toolbar-item m-r-15">
<wui-button variant="primary" @click="addNewItem"
><wui-fa-icon icon="plus" /> Add item</wui-button
>
</div>
</div>
<!-- Right toolbar panel -->
<div class="toolbar-panel">
<div class="display--flex align-items-center m-r-5">
<!-- Search icon button, triggers a popup -->
<wui-button
id="example-btn-search"
variant="default"
outline
title="Search"
v-w-popup.example-popup-search
><wui-fa-icon icon="magnifying-glass"
/></wui-button>
</div>
<div class="display--flex align-items-center m-r-5">
<!-- Save icon button, triggers a popup -->
<wui-button
id="example-btn-save"
variant="default"
outline
title="Save"
v-w-popup.example-popup-save
><wui-fa-icon icon="floppy-disk"
/></wui-button>
</div>
<div class="display--flex align-items-center">
<!-- Delete icon button, triggers the confirmation toolbar -->
<wui-button
variant="default"
outline
title="Delete"
@click="handleConfirmDeleteEvent"
><wui-fa-icon icon="trash"
/></wui-button>
</div>
</div>
</wui-toolbelt-bar>
<!-- "Delete" confirmation toolbar -->
<wui-toolbelt-bar :visible="showDeleteConfirmation" class="p-0">
<wui-alert
variant="danger"
class="display--flex align-items-center justify-content-between w-full p-x-15 p-y-0 border-l-0 border-r-0"
>
<p>
Do you really want to delete
<template v-if="selectedItemsLength > 1">these items</template
><template v-else>this item</template>?
</p>
<wui-button variant="danger" @click="handleDeleteEvent"
>Delete</wui-button
>
</wui-alert>
</wui-toolbelt-bar>
<!-- Contextual action bar, displayed once an item has been selected -->
<wui-toolbelt-bar
:visible="showSelectedToolbar && !showDeleteConfirmation"
class="wui-bg-color--active text--white"
>
<!-- Left toolbar panel -->
<div class="toolbar-panel">
<div class="toolbar-item m-r-10">
{ selectedItemsLength } selected
</div>
<div class="toolbar-item m-r-10"><div class="divider"></div></div>
<div class="toolbar-item m-r-10">
<div class="display--flex">
<!-- Action 1 -->
<wui-button id="example-selected-btn-edit" variant="ghost"
>Action 1</wui-button
>
<!-- Action 1 toggle, triggers a dialog menu -->
<wui-button
variant="ghost"
class="m-l--1"
v-w-dialog-menu.dmenu-edit-example-selected
><span class="caret"></span
></wui-button>
</div>
<!-- The dialog menu -->
<wui-dialog-menu
id="dmenu-edit-example-selected"
target="example-selected-btn-edit"
:items="[
{ value: 'copy', text: 'Copy', keys: '⌘C' },
{ value: 'cut', text: 'Cut', keys: '⌘X' },
{ value: 'paste', text: 'Paste', keys: '⌘V' },
]"
/>
</div>
<div class="toolbar-item m-r-15">
<!-- Action 2, triggers "Delete" confirmation toolbar -->
<wui-button
variant="ghost"
outline
@click="handleConfirmDeleteEvent"
>Delete</wui-button
>
</div>
</div>
<!-- Right toolbar panel -->
<div class="toolbar-panel">
<div class="toolbar-item">
<!-- "Close" icon button, aborts this toolbar and resets the selected items -->
<wui-button
variant="ghost"
@click="handleCloseEvent"
title="Close"
><wui-fa-icon icon="xmark"
/></wui-button>
</div>
</div>
</wui-toolbelt-bar>
</wui-toolbelt>
<wui-panel-body>
<p v-if="optionsSelectItems.length">
<strong>Select one or more items to activate another toolbar</strong>
</p>
<wui-checkbox-group
v-model="selectedItems"
:options="optionsSelectItems"
stacked
></wui-checkbox-group>
</wui-panel-body>
</wui-panel>
<!-- Popup triggered by the "Save" icon button in default toolbar -->
<wui-popup
ref="popup-save"
id="example-popup-save"
:offset="-(32 + (60 - 32) / 2)"
:shift="true"
placement="bottom-end"
target="example-btn-save"
title="New saved filter"
@shown="focusInput('save-input')"
>
<form class="p-10">
<wui-form-group
label="Name"
label-for="name-input"
invalid-feedback="Name is required"
>
<wui-form-input
ref="save-input"
id="name-input"
required
></wui-form-input>
</wui-form-group>
</form>
<template #footer>
<wui-button
variant="default"
class="m-r-5"
@click="hidePopup('popup-save')"
>Cancel</wui-button
>
<wui-button variant="primary" @click="hidePopup('popup-save')"
>Save</wui-button
>
</template>
</wui-popup>
<!-- Popup triggered by the "Search" icon button in default toolbar -->
<wui-popup
ref="popup-search"
id="example-popup-search"
:offset="{ crossAxis: -50 }"
:shift="true"
target="example-btn-search"
:close-on-target-click="true"
@shown="focusInput('search-input')"
>
<wui-search-input
ref="search-input"
v-model="query"
class="wui-popup-search"
input-css="border-l-0 border-t-0"
append-css="border-r-0 border-t-0"
trim,
placeholder="Search keywords"
:style="{ height: '40px' }"
:wrapper-attrs="{
style: { height: '40px' }
}"
></wui-search-input>
<div id="results" class="m-t-30" style="min-width: 300px"> </div>
</wui-popup>
</wui-container>
</template>
<script>
import { isArray, isEmptyArray, isString } from "../../src/utils/inspect";
export default {
data() {
return {
showDeleteConfirmation: false,
items: [],
selectedItems: [],
query: "",
};
},
computed: {
optionsSelectItems() {
return this.items.map((item) => ({
value: item.id,
text: item.text,
}));
},
showSelectedToolbar() {
return !!this.selectedItems.length;
},
selectedItemsLength() {
return this.selectedItems.length;
},
},
methods: {
findItemIndexById(id) {
return this.items.findIndex((f) => f.id === id);
},
addNewItem() {
this.items.push({
"value-field": "id",
id: `item_${this.items.length + 1}`,
text: `Menu item #${this.items.length + 1}`,
});
},
removeItems(itemIds) {
if (itemIds) {
this.clearSelectedItemsById([...itemIds]);
if (isString(itemIds)) {
const index = this.findItemIndexById(itemIds);
this.items.splice(index, 1);
} else if (isArray(itemIds) && !isEmptyArray(itemIds)) {
[...itemIds].forEach((itemId) =>
this.items.splice(this.findItemIndexById(itemId), 1)
);
}
}
},
clearAllSelectedItems() {
this.selectedItems = [];
},
clearSelectedItemsById(itemId) {
if (isString(itemId)) {
this.selectedItems.splice(
this.selectedItems.findIndex((item) => item === itemId),
1
);
} else if (isArray(itemId) && !isEmptyArray(itemId)) {
[...itemId].forEach((id) =>
this.selectedItems.splice(
this.selectedItems.findIndex((item) => item === id),
1
)
);
}
},
handleCloseEvent() {
this.clearAllSelectedItems();
},
handleConfirmDeleteEvent() {
this.showDeleteConfirmation = true;
},
handleDeleteEvent() {
this.removeItems([...this.selectedItems]);
this.showDeleteConfirmation = false;
},
hidePopup(refId) {
if (refId) {
this.$refs[refId] && this.$refs[refId].hide();
}
},
focusInput(refId) {
if (refId) {
this.$refs[refId] && this.$refs[refId].focus();
}
},
},
};
</script>
<style scoped>
.toolbar-panel {
align-items: center;
display: flex;
position: relative;
white-space: nowrap;
}
.toolbar-item {
align-items: center;
display: flex;
height: 100%;
position: relative;
}
.divider {
align-self: center;
background-color: var(--wui-border-color);
height: 32px;
width: 1px;
}
</style>
<!-- wui-toolbelt-bar-contextual-example.vue -->
Component reference
<wui-toolbelt>
Slots
| Name | Description |
|---|---|
| default | Content to place in the toolbelt |
<wui-toolbelt-bar>
Properties
| Property | Type | Default | Description |
|---|---|---|---|
visiblev-model | Boolean | true | Whether the toolbar is visible or not. Here only the Vue directive v-show is used instead of v-if to allow the CSS transition effect to work |
v-model
| Property | Event |
|---|---|
visible | change |
Events
| Event | Arguments | Description |
|---|---|---|
change | visible - Visible state of the toolbelt bar | Emitted to update the v-model |
Slots
| Name | Description |
|---|---|
| default | Content to place in the toolbelt bar |
Importing individual components
You can import individual components into your project via the following named exports:
| Component | Named Export |
|---|---|
<wui-toolbelt> | WuiToolbelt |
Example
import { WuiToolbelt } from "@wui/wui-vue/lib/toolbelt";
Vue.component("wui-toolbelt", WuiToolbelt);
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 |
|---|---|
ToolbeltPlugin | @wui/wui-vue/lib/toolbelt |
Example
import { ToolbeltPlugin } from "@wui/wui-vue/lib/toolbelt";
Vue.use(ToolbeltPlugin);
