wt-actions-bar.vue

TIP

Цей компонент – нова версія wt-table-actions, з переробленим інтерфейсом та новими можливостями. Замість wt-table-actions треба використовувати wt-actions-bar.

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
mode		string	'table'	['table', 'section']
size		string	-	Not implemented
include		array	[]	Leave the default value for the mode only listed in includes prop
exclude		array	[]	Leave the default values for the mode, except for those in exclude prop
sort:order		string	null
disabled		boolean	false	Built dynamically on disabled:[IconAction] pattern for all available IconActions.

Slots

Name	Scope	Description
search-bar	{ size<ComponentSize> }	searchbar here
default	{ size<ComponentSize> }	custom actions here
action	{ action<IconAction>, size<ComponentSize>, onClick: () => emit('click:[action]') }	May be useful to set complex component which draws the same wt-icon-action

Events

Events are built dynamically on click:[IconAction] pattern for all available IconActions.

Actions Order, depending on mode prop

Code

import IconAction from '../../enums/IconAction/IconAction.enum.js';

export const tableActionsOrder = [
	IconAction.ADD,
	IconAction.ADD_CONTACT,
	IconAction.COPY,
	IconAction.DOWNLOAD_PDF,
	IconAction.DOWNLOAD,
	IconAction.LOGOUT,
	IconAction.UPLOAD,
	IconAction.COLUMNS,
	IconAction.VARIABLES,
	IconAction.FILTERS,
	IconAction.REFRESH,
	IconAction.DELETE,
	IconAction.SORT,
];

// TODO
export const sectionActionsOrder = tableActionsOrder;

Example Table Actions Bar (All table actions)

Code

<template>
  <wt-action-bar :include="tableActionsOrder" />
</template>

<script setup>
import { tableActionsOrder } from '__lib__/components/wt-action-bar/WtActionBarActionsOrder.js';
</script>

<style lang="scss" scoped>
.example-table-action-bar {
}
</style>

Example Slotted Table Actions Bar

searchbar slot delete action slot

Code

<template>
  <wt-action-bar
    :include="tableActionsOrder"
    mode="table"
  >
    <template> default slot </template>
    <template #search-bar> searchbar slot </template>
    <template #delete> delete action slot </template>
  </wt-action-bar>
</template>

<script setup>
import { tableActionsOrder } from '__lib__/components/wt-action-bar/WtActionBarActionsOrder.js';
</script>

<style lang="scss" scoped>
.example-table-action-bar {
}
</style>

Example Slotted Table Actions Bar

searchbar slot delete action slot

Code

<template>
  <wt-action-bar
    :include="tableActionsOrder"
    mode="table"
  >
    <template> default slot </template>
    <template #search-bar> searchbar slot </template>
    <template #delete> delete action slot </template>
  </wt-action-bar>
</template>

<script setup>
import { tableActionsOrder } from '__lib__/components/wt-action-bar/WtActionBarActionsOrder.js';
</script>

<style lang="scss" scoped>
.example-table-action-bar {
}
</style>

Example Disabled Actions Bar

Code

<template>
  <wt-action-bar
    :include="tableActionsOrder"
    disabled:add="true"
    disabled:delete="true"
    disabled:refresh="true"
    mode="table"
  />
</template>

<script setup>
import { tableActionsOrder } from '__lib__/components/wt-action-bar/WtActionBarActionsOrder.js';
</script>

<style lang="scss" scoped>
.example-table-action-bar {
}
</style>