New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vue-list-picker

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-list-picker - npm Package Compare versions

Comparing version

0.1.2
to
0.2.0

63

package.json
{
"name": "vue-list-picker",
"version": "0.1.2",
"version": "0.2.0",
"private": false,
"scripts": {
"lint": "vue-cli-service lint",
"storybook:build": "vue-cli-service storybook:build -c config/storybook",
"storybook": "start-storybook",
"storybook:old": "vue-cli-service storybook:serve -p 6006 -c config/storybook",
"storybook:build": "build-storybook",
"storybook": "start-storybook -p 6006",
"test:unit": "vue-cli-service test:unit",

@@ -14,31 +13,41 @@ "test:watch": "vue-cli-service test:unit --watch",

"commit:retry": "git-cz --retry",
"commitmsg": "commitlint -e"
"commitmsg": "commitlint -e",
"build-storybook": "build-storybook"
},
"dependencies": {
"vue": "^2.6.10"
"vue": "^2.6.12"
},
"devDependencies": {
"@commitlint/cli": "^8.1.0",
"@commitlint/config-conventional": "^8.1.0",
"@storybook/addon-actions": "^5.1.9",
"@storybook/addon-backgrounds": "^5.1.9",
"@storybook/addon-knobs": "^5.1.9",
"@storybook/addon-links": "^5.1.9",
"@storybook/addon-notes": "^5.1.9",
"@vue/cli-plugin-babel": "^3.9.0",
"@vue/cli-plugin-eslint": "^3.9.0",
"@vue/cli-plugin-unit-jest": "^3.9.0",
"@vue/cli-service": "^3.9.0",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/test-utils": "1.0.0-beta.29",
"@commitlint/cli": "^11.0.0",
"@commitlint/config-conventional": "^11.0.0",
"@storybook/addon-actions": "^6.0.21",
"@storybook/addon-backgrounds": "^6.0.21",
"@storybook/addon-controls": "^6.0.21",
"@storybook/addon-essentials": "^6.0.21",
"@storybook/addon-knobs": "^6.0.21",
"@storybook/addon-links": "^6.0.21",
"@storybook/vue": "^6.0.21",
"@vue/cli-plugin-babel": "^4.5.6",
"@vue/cli-plugin-eslint": "^4.5.6",
"@vue/cli-plugin-unit-jest": "^4.5.6",
"@vue/cli-service": "^4.5.6",
"@vue/eslint-config-standard": "^5.1.2",
"@vue/test-utils": "^1.1.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-eslint": "^10.1.0",
"babel-jest": "^23.6.0",
"commitizen": "^3.1.1",
"core-js": "2.6.5",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"husky": "^3.0.0",
"vue-cli-plugin-storybook": "^0.6.1",
"vue-template-compiler": "^2.6.10"
"babel-loader": "^8.1.0",
"babel-preset-vue": "^2.0.2",
"commitizen": "^4.2.1",
"core-js": "^3.6.5",
"eslint": "^7.9.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2",
"husky": "^4.3.0",
"react-is": "^16.13.1",
"vue-cli-plugin-storybook": "^1.3.0",
"vue-template-compiler": "^2.6.12"
},

@@ -45,0 +54,0 @@ "bugs": {

92

README.md

@@ -7,3 +7,3 @@ <p align="center">

<p align="center">
<a href="https://circleci.com/gh/guastallaigor/vue-list-picker/tree/master"><img src="https://badgen.net/circleci/github/guastallaigor/vue-list-picker/master" alt="Build"></a>
<a href="https://circleci.com/gh/guastallaigor/vue-list-picker"><img alt="CircleCI" src="https://img.shields.io/circleci/build/github/guastallaigor/vue-list-picker/master?label=circleci&logo=circleci" alt="Build"></a>
<a href="https://codecov.io/gh/guastallaigor/vue-list-picker"><img src="https://codecov.io/gh/guastallaigor/vue-list-picker/branch/master/graph/badge.svg" alt="Code Coverage"></a>

@@ -34,2 +34,3 @@ <a href="https://www.npmjs.com/package/vue-list-picker"><img src="https://img.shields.io/npm/dt/vue-list-picker.svg" alt="Total Downloads"></a>

## Quick start
### Vue.js

@@ -40,6 +41,6 @@

```js
import Vue from 'vue'
import VueListPicker from 'vue-list-picker'
import Vue from "vue";
import VueListPicker from "vue-list-picker";
Vue.use(VueListPicker)
Vue.use(VueListPicker);
```

@@ -50,9 +51,9 @@

```js
import { VueListPicker } from 'vue-list-picker'
import { VueListPicker } from "vue-list-picker";
export default {
components: {
VueListPicker
}
}
VueListPicker,
},
};
```

@@ -65,14 +66,14 @@

`~/plugins/vue-list-picker.js`
```js
import Vue from 'vue'
import VueListPicker from 'vue-list-picker'
import Vue from "vue";
import VueListPicker from "vue-list-picker";
Vue.use(VueListPicker)
Vue.use(VueListPicker);
```
and then import it in your `nuxt.config.js` file
```js
plugins: [
'~/plugins/vue-list-picker.js'
]
plugins: ["~/plugins/vue-list-picker.js"];
```

@@ -86,34 +87,31 @@

<template>
<vue-list-picker
:left-items="leftItems"
:right-items="rightItems"
/>
<vue-list-picker :left-items="leftItems" :right-items="rightItems" />
</template>
<script>
export default {
data() {
const example1 = {
key: 1,
content: 'Item 1'
}
const example2 = {
key: 2,
content: 'Item 2'
}
const example3 = {
key: 3,
content: 'Item 3'
}
const example4 = {
key: 4,
content: 'Item 4'
}
const leftItems = [example1, example2]
const rightItems = [example3, example4]
export default {
data() {
const example1 = {
key: 1,
content: "Item 1",
};
const example2 = {
key: 2,
content: "Item 2",
};
const example3 = {
key: 3,
content: "Item 3",
};
const example4 = {
key: 4,
content: "Item 4",
};
return { leftItems, rightItems }
}
}
const leftItems = [example1, example2];
const rightItems = [example3, example4];
return { leftItems, rightItems };
},
};
</script>

@@ -125,3 +123,3 @@ ```

| Property name | Type | Default | Description |
|---------------------|---------|-------------------|-------------------------------------------------------------------------------------------------|
| ------------------- | ------- | ----------------- | ----------------------------------------------------------------------------------------------- |
| left-items | Array | null | Array of objects to be displayed in the left. Must have at least a key and content property |

@@ -149,3 +147,3 @@ | right-items | Array | null | Array of objects to be displayed in the right. Must have at least a key and content property |

| Event name | Return type | Description |
|----------------|-------------|----------------------|
| -------------- | ----------- | -------------------- |
| move-all-right | Array | Array of items moved |

@@ -160,3 +158,3 @@ | move-right | Object | Item object moved |

| Slot name | Description |
|--------------|-----------------------------------------------------------------------------|
| ------------ | --------------------------------------------------------------------------- |
| moveAllRight | Use this to change the icon (chevrons-right) inside the first action button |

@@ -201,3 +199,5 @@ | moveRight | Use this to change the icon (chevron-right) inside the second action button |

### Storybook
For visual testing, this project contains storybook which you can run by doing the next command
```sh

@@ -208,2 +208,3 @@ $ yarn storybook

### Jest
Before making the PR, if you changed something that needs to be tested, please make the tests inside the `tests/unit` folder.

@@ -218,2 +219,3 @@

### Commitlint
This project follows the [commitlint](https://github.com/conventional-changelog/commitlint) guidelines, with minor changes.

@@ -220,0 +222,0 @@ 

src/components/VueListPicker.vue

Sorry, the diff of this file is not supported yet