{"_id":"@davleb/vue-grid-lib","_rev":"1-7f4913955aa7025826d3a1db5df32822","name":"@davleb/vue-grid-lib","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@davleb/vue-grid-lib","description":"A vuejs library around grid component","version":"1.0.0","author":{"name":"David Lebret","email":"davleb@zohomail.eu"},"license":"MIT","private":false,"main":"VueGridLib.umd.js","unpkg":"VueGridLib.umd.min.js","scripts":{"serve":"vue-cli-service serve","dev:cdn":"http-server ./examples/cdn/ -p 9000","dev:node":"http-server ./examples/appvue/src -p 9000","build":"cross-env NODE_ENV=production webpack --progress --hide-modules","build:examples":"cross-env NODE_ENV=production webpack --config ./build/examples.appvue.webpack.config.js --progress --hide-modules","build:wc":"cross-env NODE_ENV=development vue-cli-service build --modern --target wc './src/components/*/*.vue'","build:lib":"cross-env NODE_ENV=production vue-cli-service build --modern --target lib --name VueGridLib './src/index.js'"},"dependencies":{"@mdi/font":"^5.0.45","bootstrap":"^4.4.1","bootstrap-vue":"^2.8.0","dayjs":"^1.8.27","jquery":"^3.4.1","moment":"^2.24.0","vue":"^2.6.11"},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"devDependencies":{"babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.0","babel-preset-stage-3":"^6.24.1","cross-env":"^5.0.5","css-loader":"^0.28.7","file-loader":"^1.1.4","vue-loader":"^13.0.5","vue-template-compiler":"^2.4.4","webpack":"^3.6.0","webpack-bundle-analyzer":"^3.8.0","webpack-dev-server":">=3.1.11"},"gitHead":"a0990021d57d4f167698e3f1b56d8cac3caf8e81","_id":"@davleb/vue-grid-lib@1.0.0","_shasum":"b11c7444ef866359b059259e1850e70f3091acba","_from":".","_npmVersion":"3.5.2","_nodeVersion":"8.10.0","_npmUser":{"name":"davleb","email":"davleb@zohomail.eu"},"dist":{"shasum":"b11c7444ef866359b059259e1850e70f3091acba","tarball":"https://registry.npmjs.org/@davleb/vue-grid-lib/-/vue-grid-lib-1.0.0.tgz","integrity":"sha512-Erbhh0i2IyYmsfp1kisVNbDlc23bJUPO5IkAfR1zf4VerpdDVxTDaWkV0ngfeaVE7UCIU8/Fda+eS7qkz47o/g==","fileCount":11,"unpackedSize":2202277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexzaPCRA9TVsSAnZWagAAW10P/38IHWlnYxtDiUYrl17q\ncG/JX/F51ASWVZCxPBMCmMQLjG2z7F9MxD7UYw4DKPHxk6YWoWRsBkEPjt+l\nMlRTM8Wy3W/ZaHl3fWMdoAZhTmZRLduOXZyltLMyflPw9LzRpNpaDRl3UsQW\n8AkKa9hhpgWasTnXnRFNdMMkHxJ2dlFRELhhTtZcxBU3BeoEmaXal5faQ2Sq\nti8EAHndFoopfJQ5BHGCuEH4slXoFo0MUhgk/VH3no02v2wd5Jw+uoMclwH5\nCAiMr18jwOGow0bdhVCPvxdG9IvceBOCBbUneEebBozuwxsMVlhLYvSJ+0y0\n6Upjx5CZ52Xl4EQ1fjNaZnA7NmEFBWS8LKQTAFhHpU4TIPXt7dIbg1JY99u2\nKQGd5PSCqVfVkruUHeOp0H2FU9hogzkLPj1Dw790+alocGLWKVX4eanut2VK\n/t79EpwZl0XBMkuWHL72kZn8lL0UBWPHkRkt2byX34cos6T1RdYvD4IzciGs\nDwBIMOIrdPrqzf0/OHvGz+2aMSdcoyPUhsSZuPryrrHUyUJa+IPyvTAy10+t\nGtnkMZXT2Hzw7nbofRk7EdfHG4T3uvp9/iG0q7y7TSApM/XASTn3eKXNmvji\nn9LkavPf/CcS9t10Qw8NVmrO2LVc1nqon7bkVlOZ044v3nA76/cYRLIKqj2U\nyUM8\r\n=Zs91\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJuGhLgpEKCLbNziH4lFahkrvikTCzlvcx2elPptd0bAIhAI+9fU6v8Rh+CZ/7JjW6aJLQ64aHQwj3CbhwmKFkFHTq"}]},"maintainers":[{"name":"davleb","email":"davleb@zohomail.eu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-grid-lib_1.0.0_1590113934941_0.7174546803851172"},"_hasShrinkwrap":false}},"time":{"created":"2020-05-22T02:18:54.891Z","1.0.0":"2020-05-22T02:18:55.112Z","modified":"2022-04-05T03:10:43.048Z"},"maintainers":[{"name":"davleb","email":"davleb@zohomail.eu"}],"description":"A vuejs library around grid component","author":{"name":"David Lebret","email":"davleb@zohomail.eu"},"license":"MIT","readme":"# vue-custom-grid\n\n> A vue datagrid component with customization as a goal. Data can be local or server-based. Many ways to customize the cells content or action/link buttons.\nClassical sorting and filtering features.\nLocalization feature as i18.\nPagination component included with bus event for more flexibility.\nBootstrap 4 oriented.\n\nIt is build as a library, including three vuejs compoments: VueCustomGrid, VueAction, VuePagination.\n\n## Demo\n For a demo with node, run\n ```bash\n npm run dev\n ```\n <a href='https://davleb.github.io/vue-grid-lib/examples/index.html' target='\\_blank'>Online demo with CDN</a>\n\n\n## Install\n```bash\nnpm install\n```\n\n### serve with hot reload at localhost:8080\n```bash\nnpm run dev\n```\n\n### build for production with minification\n```bash\nnpm run build-lib\n```\n\n## Usage for Browser (CDN)\nPlease look at examples for a simple or complex example with CDN.\n\n```javascript\n<link rel=\"stylesheet\" href=\"path/to/vue-custom-grid-lib.css\"/>\n<script type=\"text/javascript\" src=\"path/to/vue.min.js\"></script>\n<script type=\"text/javascript\" src=\"path/to/vue-custom-grid-lib.js\"></script>\n\n<script text=\"text/javascript\">\nvar EventBus = new Vue();\nvar gridViewModel = new Vue({\n        el: '#app-view-model',\n        components:{\n          VueCustomGrid: VueCustomGridLib.VueCustomGrid,\n          VuePagination: VueCustomGridLib.VuePagination\n        },\n        data: {\n          fetchurl: 'http://localhost:8080/json/get-users-roles',\n          itemsperpage: 10,\n          bus: EventBus      \n        }\n      });\n</script>\n```\n\n## Usage as Vue Single File\n```javascript\n<template>\n    <div class=\"container-fluid\">\n    \t<div id=\"app-view-model\">\n    \t  <vue-custom-grid :fetchurl=\"fetchurl\" :bus=\"bus\" :language=\"language\" :itemsperpage=\"itemsperpage\" :actions=\"actions\" :actionplus=\"actionplus\">\n    \t  </vue-custom-grid>\n        <vue-pagination :bus=\"bus\" :limit=\"10\" :display=\"previous-numbers-next\"></vue-pagination>\n    \t</div>\n    </div>\n\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport VueAction from './components/vue-action/vue-action.vue'\nimport VueCustomGrid from './components/vue-custom-grid/vue-custom-grid.vue'\nimport VuePagination from './components/vue-pagination/vue-pagination.vue'\n\n<style>\nul {\n  list-style-type: none;\n  padding: 0;\n}\nli {\n  display: inline-block;\n  margin: 0 10px;\n}\n</style>\n```\n## Components bundled in the library\n\n### VueCustomGrid\nVueCustomGrid is the main compoment. It will load json data from fetchurl if not empty or will use any json data as a feed.\n\n### VueAction\nVueAction is an action bar that can be used inside cells.\nIf used, it must be defined like this:\n```javascript\nvar actions =[\n{glyphiconclass:'mdi mdi-thumb-up',buttonclass:'btn btn-sm btn-info',onclick:\"launchBlank('http://www.aol.com?with-my-param=$members')\"},\n{glyphiconclass:'mdi mdi-pencil',buttonclass:'btn btn-sm btn-info',onclick:\"goTo('http://www.aol.com?with-my-id=$id')\"}]\n```\n\n### VuePagination\nVuePagination is receiving on the bus a single event from VueCustomGrid \"vue-custom-grid:maxPage\".\nVue-Pagination is emitting an event \"vue-pagination:pageUpdated\" wich allows VueCustomGrid for selecting a slice of data.\n\n\n## Properties\n|   | Description  |Type   |Required   |Default   |\n|---|---|---|---|---|\n| fetchurl |  url for api returning json data  | String   | No  | |\n| feed | data for the grid  | Array  | yes if no fetchurl  ||\n|  dateformat |date format to use when cells content is a date   | String   | No  | YYYY MM DD\n| restitle | title above the grid| String| No||\n| language | language used for the component and grid headers translation| String| No| en|\n| translator | dico object with translation for grid headers| Object| No||\n| translator service | url for the api returning a dico| String| No| |\n| action | definition for action buttons in last column| Array| No||\n| actionscolumns | definition for action buttons in specific columns | Object| No||\n| actionplus | definition for action to add an item| String| No ||\n| actionsave | definition for action to save grid parameters| String| No||\n| customrender | optionnaly customize the render of specific column content| Object| No||\n| itemsperpage | items per page for grid and paginator | Number| No||\n| searchquery | search parameters to use with fetchurl | String| No||\n| sortedby | name of the column to use for sort | String| No||\n| sortedasc | asc or desc order to use with sortedby prop| Boolean| No| true|\n| options | minor options for display| Object| No||\n| bus | event bus | Object | yes if VuePaginator is used| |\n\n\n\nCopyright (c) 2020 David Lebret\n","readmeFilename":"README.md"}