{"_id":"vi-grid-builder","_rev":"116-739de09e149343c2e8bcaed46b1e7754","name":"vi-grid-builder","dist-tags":{"latest":"2.3.70"},"versions":{"0.0.0":{"name":"vi-grid-builder","version":"0.0.0","_id":"vi-grid-builder@0.0.0","maintainers":[{"name":"anja.tomovska","email":"anja.tomovska@gmail.com"}],"dist":{"shasum":"bb8481a7e95ba8233e73a021b9f1c5fde1f62f68","tarball":"https://registry.npmjs.org/vi-grid-builder/-/vi-grid-builder-0.0.0.tgz","fileCount":31,"integrity":"sha512-AhSCK/eHpnbWnPSdykP1NODqoUHPXliakEb/buikXXw7KmSQqKX80E5jYhOwqJpHCvR2v8z/HLvGq4AWb1q09Q==","signatures":[{"sig":"MEYCIQDwywQrhrqABQdUU2ERtzxe2YTjH7m8/RrzEFDz9fynmgIhAMHjZuLD77oE/wZCO4/g8TVga1tJs1w6avMIn8q8JIDS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23139},"main":"ViGridBuilderPlugin","type":"module","gitHead":"e284be1b997bdd6b9a3d952435f7b340dcbee87e","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"anja.tomovska","email":"anja.tomovska@gmail.com"},"_npmVersion":"9.5.1","description":"This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `\n```\n\nThen we need to add this component as part of the settings for the plugin.\nSee example:\n\n```javascript\nimport UserAvatar from \"./components/user/UserAvatar.vue\";\nimport ViGridBuilder from \"vi-grid-builder\";\n\nconst app = createApp(App)\n .use(ViGridBuilder, {\n fieldComponents: {\n UserAvatar\n }\n })\n```\n\nAfter adding the component in the fieldComponents we can use the new field type in the definition for the columns, like\nthis\n\n```javascript\ncolumns: [\n {\n label: 'User',\n type: 'user-avatar',\n name: 'picture',\n }]\n```\n\n## Pagination\n\nPagination is passed as object in table prop, the obejct should have this fields:\n\n| name | type | description | default value \n|-------------|------------------|--------------------------------------------------------|---------------|\n| page | Number | number for the current page | / \n| rowsPerPage | Number | number of rows displayed per page | 10 \n| rowsNumber | Number | number of total avaliable rows - only for server side | / \n| sortBy | array of objects | sort by field and direction | null \n\n## Pagination otpions\n\n| name | type | description | default value \n|--------------------|------------------|--------------------------------------------------------|---------------|\n| disablePagination | Boolean | hide pagination | false \n| compactPagination | Boolean | should the pagination be compact (no pages displayed) | false \n| rowsPerPageOptions | Array of obecjts | Droprdown options for displayin how many rows per page | / \n\n## CSS CLASSES\n\n| class name | description \n|-----------------------------|------------------------------------------------------------------------|\n| .vi-table-container | wrapper around table |\n| .vi-table-container.loading | classes for loading state of table |\n| .vi-table | class for the table tag |\n| .vi-table.stripped | class used to apply alternating background colors to table rows |\n| .vi-table.bordered | class used to apply borders on table cells |\n| .vi-table-head | class for the head tag |\n| .vi-table-body | class for the tbody tag |\n| .vi-table-row | class for all rows in table |\n| .vi-header-row | class for rows only in table header |\n| .vi-body-row | class for rows only in table body |\n| .vi-body-row.selected | class for selected row |\n| .vi-body-row.clickable | class for clickable row |\n| .vi-title-row | class for row that displays the table tite |\n| .vi-loading-row | class for row that holds the loading bar |\n| .vi-no-data-row | class for row that appears when no data is avaliable in table |\n| .vi-cell | class for all cells in table |\n| .vi-header-cell | class for header cells in table |\n| .vi-body-cell | class for body cells in table |\n| .vi-header-cell-content | class that wrapes content in header cells |\n| .vi-select-cell | class for cells that holds checkbox for selecting row or master select |\n| .vi-grid-field | wraaper clas for content in body cells |\n| .vi-footer-row | class for last row in table that holds usually pagination |\n| .vi-footer-cell | class for cell in last row |\n\n## GLOBAL SETTINGS\n\n### **Grid props that can be set globally**\n\n- align: `center`, `left`,`right`\n- bordered: boolean\n- stripped: boolean\n- disablePagination: boolean\n- noDataLabel: String\n- noCellDataLabel: String\n- compactPagination: boolean\n- rowsPerPageOptions: Array\n\nExample:\n\n```javascript\n\nimport {createApp} from 'vue'\nimport App from './App.vue'\n\nconst app = createApp(App);\napp.use(ViGridBuilderPlugin, {\n align: 'right',\n compactPagination: true,\n noDataLabel: 'emtpy table data',\n noCellDataLabel: 'NA',\n stripped: true,\n bordered: true,\n rowsPerPage: 30,\n rowsPerPageOptions: [{\n label: 15,\n value: 15\n }, {\n label: 20,\n value: 20\n }, {\n label: 30,\n value: 30\n }, {\n label: 'all',\n value: 0\n }],\n});\n\n\napp.mount('#app')\n\n```\n\n### **Date field global settings**\n\nYou can globally set format for date field by passing `dateFormats` in the plugin options\nYou can globally set mode for date field by passing `dateMode` in the plugin options (one of `date` , `dateTime`,\n`time` by default is `dateTime`)\n\n```javascript\nconst app = createApp(App);\napp.use(ViGridBuilderPlugin, {\n\n dateFormats: {\n time: 'HH:mm',\n date: \"yyyy-MM-dd\",\n dateTime: \"yyyy-MM-dd HH:mm:ss\"\n },\n dateMode: 'date'\n});\n```\n\n### **Css variables and global overwriting of the variables**\n\n| name | usage | default value \n|------------------------------|---------------------------------------------------------------------|-----------------------|\n| --vi-grid-primary-color | background color of header and used as backgorund for rows on hover | rgba(0, 0, 255, 0.65) \n| --vi-grid-primary-text_color | text color of header and used as text color for rows on hover | rgb(255, 255, 255) \n| --vi-grid-secondary-color | background color even rows in stripped table | rgb(243, 243, 243) \n| --vi-grid-text-color | color of text in tabel body cells | rgb(0, 0, 0) \n| --vi-grid-color | background color for table | rgb(255, 255, 255) \n\nYou can override this values in the options when plugin is installed:\n\n```javascript\n\nconst app = createApp(App);\napp.use(ViGridBuilderPlugin, {\n style:\n {\n 'color': 'white',\n 'text-color': 'black',\n 'secondary-color': 'lightgrey',\n 'primary-color': '#f18080',\n 'primary-text-color': 'white',\n }\n})\n```\n\n### Steps for adding changes for contributors\n\n- git pull origin main\n- add and test your changes in playground\n- change the version in package.json\n- vite build\n- push to git\n- npm publish\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","readmeFilename":"README.md"}