vue-clusterize

clusterize in vue

Showing:

Popularity

Downloads/wk

112

GitHub Stars

273

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

1

Size (min+gzip)

5.1KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

vue-clusterize

An implementation of Clusterize.js in vue.

Works similar to v-for but only takes enough data to fill the viewport 3 times.
This data is then splitted into three clusters which will move and get filled with the right data on scrolling.

Demo

Disclaimer

Only for webpack workflows.

No jQuery dependency

Install

npm install --save-dev vue-clusterize

use version 0.2.0 before vue 1.0.24

Usage

# link the components up
components:
  "clusterize": require("vue-clusterize")
# or ES6
import clusterize from "vue-clusterize"
components: {
  "clusterize": clusterize
}
<clusterize :data="rowsData">
  <!-- default slot will be used as a template for a single row -->
  <div>{{data}}</div>
  <!-- (optional) loading slot will be displayed in each cluster which is busy fetching data - only with dynamic data -->
  <p slot="loading">loading...</p>
</clusterize>

For examples see dev/.

Available variables in template

Nametypedescription
dataObjecta single datapiece (see binding-name in props)
loadingNumberwill be 0 when finished loading data (only with dynamic data)
indexNumberindex of the datapiece
heightNumberthe height of a single row

you can add your own variables with the row-watchers prop.

example:

<clusterize @get-data="getData">
  <div v-if="!loading" v-bind:style="{height:height+'px'}">{{data}} - index: {{index}}</div>
  <p slot="loading">loading...</p>
</clusterize>

Props

Nametypedefaultdescription
binding-nameString"data"name to access the data in your template
heightNumbernullHeight of the clusterize element
auto-heightBooleanfalseIf autoheight should be used (see below)
manual-startBooleanfalserendering doesn't start on ready (call start on the component instance instead)
dataArray[]static data to render
scroll-topNumber0sets scrollTop
scroll-leftNumber0sets scrollLeft
cluster-size-facNumber1.5determines the cluster size relative to visible size
row-heightNumbernullenforced row-height, will be determined at runtime when not set
templateString-row template (defaults to slot content)
styleObject-to pass trough style (vue object)
row-watchersObject{height: {vm: this, prop:"rowHeight"}}variables, will be available in template
parent-vmObjectthis.$parentwhere to resolve components in template
flexBooleanfalseallow multiple items per row. See flex.
flex-initialNumber20data pieces to take for calculation of row height (should fill several rows)
flex-facNumber1reduce to reduce items per row

Autoheight

There are two ways clusterize can be used, either use a fixed height:

<clusterize :data="rowsData" :height="400" v-ref:clusterize>

Or use autoheight:

<html style="height:100%">
  <body style="height:100%">
    <div style="position:relative">
      <clusterize :data="rowsData" auto-height>

In this case clusterize will always fill the nearest parent element with either position:relative; or position:absolute;.
Keep in mind, that padding of the parent will be ignored. If you need a padding, use a wrapper <div>.

Dynamic data

The clusterize instance emits two events to get dynamic data:

<clusterize @get-data="getData" @get-data-count="getDataCount">
methods:
  # For the first datapiece, first and last will be 0
  getData: function(first,last,cb) {
      # somehow get data
      cb(data)
    }
  getDataCount: function(cb) {
    cb(dataCount)
  }

To issue a manual redraw, call redraw() on the clusterize instance.

If you want to enforce a scroll-to-top use the scrollTop prop.

Flex

When using the flex prop, the usage changes. You will now recieve a array of row items per row which you can use in a v-for:

<clusterize :data="rowsData" flex>
  <div style="display:flex;align-items:center;justify-content:space-between">
    <div v-for="d in data">{{d}}</div>
  </div>
</clusterize>

The row height, items per row and rows per cluster will be recalculated on resize of clusterize.

Development

Clone repository.

npm install
npm run test

Browse to http://localhost:8080/.

To-Do

  • use html5 history mode or document.store to save scroll position

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100