Feedback

/**
 * Alert component for important messages
 */
const Alert = Vue.component;

interface AlertProps {
  title?: string;
  type?: 'success' | 'warning' | 'info' | 'error';
  description?: string;
  closable?: boolean;
  center?: boolean;
  closeText?: string;
  showIcon?: boolean;
  effect?: 'light' | 'dark';
}

// Basic alerts
<el-alert title="Success alert" type="success"></el-alert>
<el-alert title="Info alert" type="info"></el-alert>
<el-alert title="Warning alert" type="warning"></el-alert>
<el-alert title="Error alert" type="error"></el-alert>

// Alert with description
<el-alert
  title="Success alert"
  type="success"
  description="More text description"
  show-icon>
</el-alert>

// Closable alert
<el-alert
  title="Closable alert"
  type="success"
  closable
  @close="handleClose">
</el-alert>

// Alert with custom close text
<el-alert
  title="Custom close text"
  type="info"
  close-text="Gotcha"
  @close="handleClose">
</el-alert>

/**
 * Modal dialog component
 */
const Dialog = Vue.component;

interface DialogProps {
  visible?: boolean;
  title?: string;
  width?: string | number;
  fullscreen?: boolean;
  top?: string;
  modal?: boolean;
  modalAppendToBody?: boolean;
  appendToBody?: boolean;
  lockScroll?: boolean;
  customClass?: string;
  closeOnClickModal?: boolean;
  closeOnPressEscape?: boolean;
  showClose?: boolean;
  beforeClose?: Function;
  center?: boolean;
  destroyOnClose?: boolean;
}

// Basic dialog
<el-dialog
  title="Tips"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>This is a message</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
  </span>
</el-dialog>

// Custom content dialog
<el-dialog title="Form" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="Name" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="Zone" :label-width="formLabelWidth">
      <el-select v-model="form.region" placeholder="Please select a zone">
        <el-option label="Zone 1" value="shanghai"></el-option>
        <el-option label="Zone 2" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
  </div>
</el-dialog>

// Nested dialog
<el-dialog title="Outer Dialog" :visible.sync="outerVisible">
  <el-dialog
    width="30%"
    title="Inner Dialog"
    :visible.sync="innerVisible"
    append-to-body>
  </el-dialog>
  <div slot="footer" class="dialog-footer">
    <el-button @click="outerVisible = false">Cancel</el-button>
    <el-button type="primary" @click="innerVisible = true">open inner Dialog</el-button>
  </div>
</el-dialog>

/**
 * Drawer component for slide-out panels
 */
const Drawer = Vue.component;

interface DrawerProps {
  appendToBody?: boolean;
  beforeClose?: Function;
  closeOnPressEscape?: boolean;
  customClass?: string;
  destroyOnClose?: boolean;
  modal?: boolean;
  direction?: 'rtl' | 'ltr' | 'ttb' | 'btt';
  showClose?: boolean;
  size?: string | number;
  title?: string;
  visible?: boolean;
  wrapperClosable?: boolean;
  withHeader?: boolean;
}

// Basic drawer
<el-drawer
  title="I am the title"
  :visible.sync="drawer"
  direction="rtl"
  size="30%">
  <span>Hi, there!</span>
</el-drawer>

// Drawer with form
<el-drawer
  title="Create a new article"
  :visible.sync="drawer"
  direction="rtl"
  :before-close="handleClose">
  <div class="demo-drawer__content">
    <el-form :model="form">
      <el-form-item label="Title" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="Author" :label-width="formLabelWidth">
        <el-input v-model="form.region" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div class="demo-drawer__footer">
      <el-button @click="cancelForm">Cancel</el-button>
      <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
    </div>
  </div>
</el-drawer>

// Multiple drawers
<el-drawer
  title="I'm outer Drawer"
  :visible.sync="drawer">
  <div>
   <el-button @click="innerDrawer = true" type="primary" style="margin-left: 16px;">
     Click me!
   </el-button>
   <el-drawer
     title="I'm inner Drawer"
     :append-to-body="true"
     :before-close="handleClose"
     :visible.sync="innerDrawer">
     <p>_(:зゝ∠)_</p>
   </el-drawer>
  </div>
</el-drawer>

/**
 * Popover component for contextual content
 */
const Popover = Vue.component;

interface PopoverProps {
  trigger?: 'click' | 'focus' | 'hover' | 'manual';
  title?: string;
  content?: string;
  width?: string | number;
  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
  disabled?: boolean;
  value?: boolean;
  offset?: number;
  transition?: string;
  visibleArrow?: boolean;
  popperOptions?: object;
  popperClass?: string;
  openDelay?: number;
  closeDelay?: number;
  tabindex?: number;
}

/**
 * Tooltip component for simple contextual information
 */
const Tooltip = Vue.component;

interface TooltipProps {
  effect?: 'dark' | 'light';
  content?: string;
  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
  value?: boolean;
  disabled?: boolean;
  offset?: number;
  transition?: string;
  visibleArrow?: boolean;
  popperOptions?: object;
  openDelay?: number;
  manual?: boolean;
  popperClass?: string;
  enterable?: boolean;
  hideAfter?: number;
  tabindex?: number;
}

/**
 * Popconfirm component for confirmation actions
 */
const Popconfirm = Vue.component;

interface PopconfirmProps {
  title?: string;
  confirmButtonText?: string;
  cancelButtonText?: string;
  confirmButtonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
  cancelButtonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
  icon?: string;
  iconColor?: string;
  hideIcon?: boolean;
}

// Basic popover
<el-popover
  placement="top-start"
  title="Title"
  width="200"
  trigger="hover"
  content="this is content, this is content, this is content">
  <el-button slot="reference">Hover to activate</el-button>
</el-popover>

// Popover with custom content
<el-popover
  placement="right"
  width="400"
  trigger="click">
  <el-table :data="gridData">
    <el-table-column width="150" property="date" label="date"></el-table-column>
    <el-table-column width="100" property="name" label="name"></el-table-column>
    <el-table-column width="300" property="address" label="address"></el-table-column>
  </el-table>
  <el-button slot="reference">Click to activate</el-button>
</el-popover>

// Tooltip
<el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">
  <el-button>top-start</el-button>
</el-tooltip>

// Popconfirm
<el-popconfirm
  confirm-button-text='OK'
  cancel-button-text='No, Thanks'
  icon="el-icon-info"
  icon-color="red"
  title="Are you sure to delete this?"
  @confirm="confirmEvent"
  @cancel="cancelEvent">
  <el-button slot="reference">Delete</el-button>
</el-popconfirm>

/**
 * Loading spinner component
 */
const Loading = Vue.component;

/**
 * Spinner component for simple loading indicators
 */
const Spinner = Vue.component;

/**
 * Skeleton component for content placeholders
 */
const Skeleton = Vue.component;

interface SkeletonProps {
  animated?: boolean;
  count?: number;
  loading?: boolean;
  rows?: number;
  throttle?: number;
}

/**
 * Individual skeleton item
 */
const SkeletonItem = Vue.component;

interface SkeletonItemProps {
  variant?: 'p' | 'text' | 'h1' | 'h3' | 'caption' | 'button' | 'image' | 'circle' | 'rect';
}

// Loading service interface
interface LoadingService {
  (options?: LoadingOptions): LoadingInstance;
  service(options?: LoadingOptions): LoadingInstance;
  directive: Vue.DirectiveOptions;
}

interface LoadingOptions {
  target?: HTMLElement | string;
  body?: boolean;
  fullscreen?: boolean;
  lock?: boolean;
  text?: string;
  spinner?: string;
  background?: string;
  customClass?: string;
}

interface LoadingInstance {
  close(): void;
}

// Loading directive
<el-table
  v-loading="loading"
  element-loading-text="Loading..."
  element-loading-spinner="el-icon-loading"
  element-loading-background="rgba(0, 0, 0, 0.8)"
  :data="tableData"
  style="width: 100%">
</el-table>

// Loading service
openFullScreen1() {
  const loading = this.$loading({
    lock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  setTimeout(() => {
    loading.close();
  }, 2000);
}

// Loading on specific element
openFullScreen2() {
  this.$loading({
    target: '.loading-area',
    text: 'Loading...'
  });
}

// Skeleton placeholder
<el-skeleton :loading="loading" animated>
  <template slot="template">
    <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
    <div style="padding: 14px;">
      <el-skeleton-item variant="p" style="width: 50%" />
      <div style="display: flex; align-items: center; justify-items: space-between;">
        <el-skeleton-item variant="text" style="margin-right: 16px;" />
        <el-skeleton-item variant="text" style="width: 30%;" />
      </div>
    </div>
  </template>
  <template>
    <el-card :body-style="{ padding: '0px' }">
      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image" />
      <div style="padding: 14px;">
        <span>Yummy hamburger</span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <el-button type="text" class="button">Operating button</el-button>
        </div>
      </div>
    </el-card>
  </template>
</el-skeleton>

/**
 * Collapse container for collapsible content
 */
const Collapse = Vue.component;

interface CollapseProps {
  value?: string | array;
  accordion?: boolean;
}

/**
 * Individual collapse panel
 */
const CollapseItem = Vue.component;

interface CollapseItemProps {
  name?: string | number;
  title?: string;
  disabled?: boolean;
}

// Basic collapse
<el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item title="Consistency" name="1">
    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
  </el-collapse-item>
  <el-collapse-item title="Feedback" name="2">
    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
  </el-collapse-item>
</el-collapse>

// Accordion mode
<el-collapse v-model="activeName" accordion>
  <el-collapse-item title="Consistency" name="1">
    Content 1
  </el-collapse-item>
  <el-collapse-item title="Feedback" name="2">
    Content 2
  </el-collapse-item>
</el-collapse>

// Custom title content
<el-collapse accordion>
  <el-collapse-item name="1">
    <template slot="title">
      Consistency<i class="header-icon el-icon-info"></i>
    </template>
    <div>Efficient: save time</div>
  </el-collapse-item>
  <el-collapse-item title="Feedback" name="2">
    <div>Clear</div>
  </el-collapse-item>
</el-collapse>

/**
 * Carousel container for slideshow content
 */
const Carousel = Vue.component;

interface CarouselProps {
  height?: string;
  initialIndex?: number;
  trigger?: 'hover' | 'click';
  autoplay?: boolean;
  interval?: number;
  indicatorPosition?: 'outside' | 'none';
  indicator?: boolean;
  arrow?: 'always' | 'hover' | 'never';
  type?: 'card';
  loop?: boolean;
  direction?: 'horizontal' | 'vertical';
}

/**
 * Individual carousel item
 */
const CarouselItem = Vue.component;

interface CarouselItemProps {
  name?: string;
  label?: string;
}

// Basic carousel
<el-carousel height="150px">
  <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
  </el-carousel-item>
</el-carousel>

// Carousel with indicators
<el-carousel indicator-position="outside">
  <el-carousel-item v-for="item in 4" :key="item">
    <h3>{{ item }}</h3>
  </el-carousel-item>
</el-carousel>

// Card mode carousel
<el-carousel type="card" height="200px">
  <el-carousel-item v-for="item in 6" :key="item">
    <h3 class="medium">{{ item }}</h3>
  </el-carousel-item>
</el-carousel>

// Vertical carousel
<el-carousel height="200px" direction="vertical" :autoplay="false">
  <el-carousel-item v-for="item in 3" :key="item">
    <h3 class="medium">{{ item }}</h3>
  </el-carousel-item>
</el-carousel>

/**
 * Back to top button component
 */
const Backtop = Vue.component;

interface BacktopProps {
  target?: string;
  visibilityHeight?: number;
  right?: number;
  bottom?: number;
}

// Basic back to top
<el-backtop></el-backtop>

// Custom position and trigger height
<el-backtop :bottom="100">
  <div
    style="{
      height: 100%;
      width: 100%;
      background-color: #f2f5f6;
      box-shadow: 0 0 6px rgba(0,0,0, .12);
      text-align: center;
      line-height: 40px;
      color: #1989fa;
    }"
  >
    UP
  </div>
</el-backtop>

// Target specific container
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>