Commit d7122507 authored by Marc Mautz's avatar Marc Mautz

updated version & notes

parent 128aa68b
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
A [Vue.js](https://vuejs.org) plugin for [Shuffle.js](https://vestride.github.io/Shuffle/) library. A [Vue.js](https://vuejs.org) plugin for [Shuffle.js](https://vestride.github.io/Shuffle/) library.
**Note**: This project is still under development! **Note**: This project is still under development!
The plugin use and require the following packages: The plugin use and require the following packages:
* [Bootstrap 3](http://getbootstrap.com) - Grid system * [Bootstrap 3](http://getbootstrap.com) - Grid system (Note: see Bootstrap section below)
* [vue-multiselect](https://vue-multiselect.js.org) - Probably the most complete selecting solution for Vue.js 2.0, without jQuery. ([Github](https://github.com/shentao/vue-multiselect)) * [vue-multiselect](https://vue-multiselect.js.org) - Probably the most complete selecting solution for Vue.js 2.0, without jQuery. ([Github](https://github.com/shentao/vue-multiselect))
* [imagesLoaded](http://imagesloaded.desandro.com) - Detect when images have been loaded. ([Github](https://github.com/desandro/imagesloaded)) * [imagesLoaded](http://imagesloaded.desandro.com) - Detect when images have been loaded. ([Github](https://github.com/desandro/imagesloaded))
...@@ -19,25 +19,25 @@ The plugin use and require the following packages: ...@@ -19,25 +19,25 @@ The plugin use and require the following packages:
The preferred way to install this extension is through [yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com). The preferred way to install this extension is through [yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com).
Either run Either run
```bash ```bash
yarn add https://git.hrzg.de/dmstr/vue-shufflejs-plugin.git#0.4.5 yarn add https://git.hrzg.de/dmstr/vue-shufflejs-plugin.git#0.4.6
``` ```
or via npm or via npm
```bash ```bash
npm install https://git.hrzg.de/dmstr/vue-shufflejs-plugin.git#0.4.5 --save npm install https://git.hrzg.de/dmstr/vue-shufflejs-plugin.git#0.4.6 --save
``` ```
## Usage ## Usage
The following types are supported: The following types are supported:
- [Basic masonry layout](https://vestride.github.io/Shuffle/basic) without any extra options - [Basic masonry layout](https://vestride.github.io/Shuffle/basic) without any extra options
- Grid with [filter, search and / or sort options](https://vestride.github.io/Shuffle/) - Grid with [filter, search and / or sort options](https://vestride.github.io/Shuffle/)
- ... - ...
The following example renders the [Shuffle.js](https://vestride.github.io/Shuffle/) plugin with Filter, Search and Sort `options`. The following example renders the [Shuffle.js](https://vestride.github.io/Shuffle/) plugin with Filter, Search and Sort `options`.
Please check the [Shuffle.js](https://vestride.github.io/Shuffle/) documentation for available `options` supported by the plugin. Please check the [Shuffle.js](https://vestride.github.io/Shuffle/) documentation for available `options` supported by the plugin.
#### Bundler (Webpack, etc.) #### Bundler (Webpack, etc.)
...@@ -51,14 +51,21 @@ import 'vue-shufflejs-plugin/dist/vue-shufflejs-plugin.css' ...@@ -51,14 +51,21 @@ import 'vue-shufflejs-plugin/dist/vue-shufflejs-plugin.css'
Vue.use(VueShuffle) Vue.use(VueShuffle)
``` ```
###### Bootstrap icon font issue: ### Bootstrap
Bootstrap is defined as peer dependency in `packages.json` file.
If you working in a project without Bootstrap you must install it manually and add following css files via Import or Link Tag to your project:
- bootstrap/dist/css/bootstrap.min.css
- bootstrap/dist/css/bootstrap-theme.min.css
###### Bootstrap icon font issue (only needed if Bootstrap is bundled in dist source):
Add Add
```bash ```bash
yarn add url-loader --dev yarn add url-loader --dev
``` ```
or via npm or via npm
```bash ```bash
npm install url-loader --save-dev npm install url-loader --save-dev
...@@ -77,6 +84,13 @@ Updated module rules section in webpack config and add: ...@@ -77,6 +84,13 @@ Updated module rules section in webpack config and add:
```html ```html
<!-- Include after Vue --> <!-- Include after Vue -->
<!-- Local files --> <!-- Local files -->
<!--
Add Bootstrap CSS files if needed, see Bootstrap section above
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
-->
<link rel="stylesheet" href="vue-shufflejs-plugin/dist/vue-shufflejs-plugin.css"></link> <link rel="stylesheet" href="vue-shufflejs-plugin/dist/vue-shufflejs-plugin.css"></link>
<script src="vue-shufflejs-plugin/dist/vue-shufflejs-plugin.js"></script> <script src="vue-shufflejs-plugin/dist/vue-shufflejs-plugin.js"></script>
``` ```
......
{ {
"name": "@dmstr/vue-shufflejs-plugin", "name": "@dmstr/vue-shufflejs-plugin",
"version": "0.4.5", "version": "0.4.6",
"description": "A \"ShuffleJs\" plugin for Vue.js", "description": "A \"ShuffleJs\" plugin for Vue.js",
"main": "src/index.js", "main": "src/index.js",
"scripts": { "scripts": {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment