Skip to content

Latest commit

 

History

History
232 lines (214 loc) · 6.03 KB

ComponentAPI.md

File metadata and controls

232 lines (214 loc) · 6.03 KB
Raw

Virtual scroll component API

Props

Name Type Description Default
actions Array An array of actions that displays for each of row data []
panelActions Array An array of panel actions that displays for all table []
cols Object An object of cols model Required
items Array An array of items of list Required
i18n Object Object with fields of translate some things {}
dateRange Number The timestamps range for dataset component 0
filter String Init text for filter input ''
title String Title dataset section ''
viewConfig Object Config for view of component { needShowFilter: false }
theme Object Object of params that modifies view of component {color: 'dark', bgColor: 'white', controlsInverted: false, contentInverted: false}
itemHeight Number Height of list item 19
autoscroll Boolean Need autoscroll flag false
hasNewMessages Boolean or null Need show new messages indicator undefined

Action

action = {
    icon: 'add',
    label: 'add',
    classes: 'text-grey-3',
    type: 'add'
}

Panel action

action = {
    label: 'Name',
    icon: 'icon',
    handler: () => { console.log(123) },
    condition: true, // will shown in menu?
    tooltip: 'Save messages to CSV',
    async: true // flag async spinner
  }

Col

cols = {
  activeSchema: '_default',
  schemas: {
    _default: {
      name: '_default',
      cols: [
        name: 'param#1',
        width: 150
      ]
    }
  },
  enum: {
    'param#1': {
      name: 'param#1',
      __dest: 'etc', // sys destination fields. May be only etc
      addition: '', // some addition data for col name
      unit: 'Km/h'
    }
  }
}

Item

item = {
    'param#1': 'param#1',
    'param#2': 'param#2',
    'param#3': 'param#2',
    timestamp: 1509494400000
}

Theme

theme = {
    color: 'white', // color of controls
    bgColor: 'dark', // background of controls
    contentInverted: true, // flag state of invert of content
    controlsInverted: true, // flag state of invert of controls
    headerShow: true // flag need show header
}

i18n

i18n = {
  'Columns by schema': 'Columns by schema',
  'Default columns': 'Default columns',
  'Messages not found': 'Messages not found'
}

viewConfig

config = {
    needShowFilter: false, // Flag that displays need filter input or not
    needShowDateRange: false, // Flag that displays need show dateRange-set or not.
    needKeysProcess: false, // Flag that displays need keys process(arrow up/down).
}

Events

Name Description Payload
change-filter Handling change of filter 'new_filter'
action Handling click context menu action {index, type, content}
item-click Handling click by item {index, content}
change-date-range Handling click by control for change current in datesetRange-component timestamps array
scroll Scroll event { event, data: { offset, offsetAll, start, end } }
scroll-top Scroll event to top Empty
scroll-bottom Scroll event to bottom Empty
action-to-bottom Action event on to-bottom button Empty
action-to-new-messages Action event on to-new-messages indicator Empty
action-to-new-messages-hide Action event on to-new-messages hide button Empty
arrowup Action event on arrow up pressed Empty
arrowdown Action event on arrow down pressed Empty

Methods

Name Description Params
enableAutoscroll Enable autoscroll of wrapper Empty
disableAutoscroll Enable autoscroll of wrapper Empty

Example

In quasar.conf.js

framework: {
  components: [
    'QToolbar',
    'QToolbarTitle',
    'QBtn',
    'QResizeObserver',
    'QInput',
    'QIcon',
    'QTooltip',
    'QDialog',
    'QSlider',
    'QBtnToggle',
    'QChip',
    'QMenu',
    'QSeparator',
    'QList',
    'QItem',
    'QItemSection',
    'QItemLabel'
  ]
}

In App.vue (You can use component without of Vuex modules):

import { VirtualScrollList } from 'qvirtualscroll'

 components: {
   VirtualScrollList
 }

Simple example of template:

<virtual-scroll-list
      v-if="type && active"
      :cols="cols"
      :items="messages"
      :actions="actions"
      :date-range="[old, now]"
      :i18n="i18n"
      :filter="filter"
      :theme="theme"
      @change-filter="filterChangeHandler"
      @change-date-range="dateChangeHandler"
      @change-date-range-prev="datePrevChangeHandler"
      @change-date-range-next="dateNextChangeHandler"
      @action="actionsHandler"
      @update-cols="updateColsHandler"
    >
</virtual-scroll-list>

You can use component with scoped slot:

<virtual-scroll-list
      v-if="type && active"
      :cols="cols"
      :items="messages"
      :actions="actions"
      :date-range="[old, now]"
      :i18n="i18n"
      :filter="filter"
      :theme="theme"
      @change-filter="filterChangeHandler"
      @change-date-range="dateChangeHandler"
      @change-date-range-prev="datePrevChangeHandler"
      @change-date-range-next="dateNextChangeHandler"
      @action="actionsHandler"
      @update-cols="updateColsHandler"
    >
      <list-item-custom slot="items" slot-scope="{item, index, actions, cols, itemHeight, rowWidth}"
         :item="item"
         :index="index"
         :actions="actions"
         :cols="cols"
         @action="actionsHandler"
      />
    </virtual-scroll-list>

Slots

Empty state

<div slot="empty" class="no-messages text-center" style="font-size: 3rem; padding-top: 40px;">
  Messages not found
</div>

Scoped slot

Component for scoped slot need design based on ListItem.vue. You can just expand yours component. All props is required.

 <list-item-custom
   slot="items"
   slot-scope="{item, index, actions, cols, etcVisible, rowWidth}"
   :item="item"
   :index="index"
   :actions="actions"
   :cols="cols"
   @action="actionsHandler"
 />