wt-empty.vue

TIP

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

Компонент для відображення відсутності даних (наприклад, замість таблички).

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
image		string,object,null	-
size		string	ComponentSize.MD
headline		string,null	''	shown only if prop or slot is provided
title		string,null	''	shown only if prop or slot is provided
text		string,null	''	shown only if prop or slot is provided
primaryActionText		string,null	''	primary action is shown only if prop or slot is provided
secondaryActionText		string,null	''	secondary action shown only if prop or slot is provided
disabledPrimaryAction		boolean	false	disable primary action button while still showing its text. useful for access control
disabledSecondaryAction		boolean	false	disable primary action button while still showing its text. useful for access control

Events

Name	Params	Description
click:primary		emitted without a parameter, but could accept one, if used in a slot
click:secondary		emitted without a parameter, but could accept one, if used in a slot

Slots

Name	Scope	Description
media	{ size: mediaSize }	for custom media, replaces image
headline	{ headline }	for custom headline, replaces headline
title	{ title }	for custom title, replaces title
text	{ text }	for custom text, replaces text
default	{ size }	custom content, between text and actions
actions	{ onPrimaryClick, onSecondaryClick }	for custom actions, replaces primary and secondary actions
primary-action	{ onPrimaryClick }	for custom primary action, replaces primaryAction
secondary-action	{ onSecondaryClick }	for custom secondary action, replaces secondaryAction

Example Empty

Component is fully built using props

No data

There is no data to display

Code

<template>
  <wt-empty
    headline="Component is fully built using props" 
    :image="img"
    primary-action-text="alert me"
    secondary-action-text="me too"
    text="There is no data to display"
    title="No data"
    @click:primary="handleClick('primary')"
    @click:secondary="handleClick('secondary')"
  />
</template>

<script setup>
import img from './assets/img.png';

const props = defineProps({});

const emit = defineEmits([]);

const handleClick = (action) => {
  alert(`Clicked ${action}`);
};
</script>

Example Image Sizes

sm	Component is fully built using props No data There is no data to display
md	Component is fully built using props No data There is no data to display
lg	Component is fully built using props No data There is no data to display

Code

<template>
  <div style="display: flex; gap: var(--spacing-sm); flex-wrap: nowrap">
    <wt-table
      :data="sizes.map((size) => ({ size, empty: true }))"
      :headers="[
        { value: 'size', width: '40px' },
        { value: 'empty', width: 'auto' },
      ]"
      :selectable="false"
    >
      <template #empty="{ item }">
        <wt-empty
          :size="item.size"
          headline="Component is fully built using props"
          :image="img"
          primary-action-text="primary"
          secondary-action-text="secondary"
          text="There is no data to display"
          title="No data"
        />
      </template>
    </wt-table>
  </div>
</template>

<script setup>
import img from './assets/img.png';

const sizes = ['sm', 'md', 'lg'];
</script>