\n\n> Smart widget is a flexible and extensible content container component.\nIt includes header and body part, and widget body includes editbox、content、footer.\nIf you use with grid, it also have a draggable and resizable grid layout,\nbase on Vue 3.x & [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout/tree/vue3).\n\n## Installation\n\n```bash\nnpm i vue-smart-widget@next -S\n// or\nyarn add vue-smart-widget@next -S\n```\n\n## Using components\n\n### Full Import\n\n```js\n// main.ts\nimport { createApp } from 'vue'\nimport VueSmartWidget from 'vue-smart-widget'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\napp.use(VueSmartWidget)\napp.mount('#app')\n```\n\n### Import on demand\n\n```js\n// main.ts\nimport { createApp } from 'vue'\nimport { SmartWidget, SmartWidgetGrid } from 'vue-smart-widget'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.component(SmartWidget.name, SmartWidget)\napp.component(SmartWidgetGrid.name, SmartWidgetGrid)\napp.mount('#app')\n```\n\n## Usage\n\nThe SmartWidget is heavily base on [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout), you can learn about `vue-grid-layout` first, maybe you already use in your project.\n\n### Use widget only\n\n**Html**\n\n```html\n\n
\n It's default widget.\n
\n\n```\n\n### Use widget with grid\n\n**Script**\n\n```js\n\n```\n\n**Html**\n\n```html\n\n \n \n \n
\n
Simple Widget Without Header
\n
\n \n \n \n \n
\n
Default Widget With Header
\n
\n \n \n \n \n
\n
Make any widget full screen
\n
\n \n \n\n```\n\n## SmartWidget Props\n\n| Attribute | Description | Type | Accepted values | Default |\n|:--------:|--------|--------|:--------:|:--------:|\n| slot | Widget slot, the unique identifier of the widget. refer to `SmartWidgetGrid Props` | String | - | - |\n| title | Widget Header Title | String | - | - |\n| subTitle | Widget Header Sub Title | String | - | - |\n| padding | padding in Widget Body | [Number, Array] | - | `[12, 20]` |\n| simple | Widget without Header | Boolean | `true` or `false` | `false` |\n| loading | determine whether it's loading | Boolean | `true` or `false` | `false` |\n| fullscreen | determine whether have fullscreen button | Boolean | `true` or `false` | `false` |\n| collapse | determine whether have collapse button, only support `smart-widget` | Boolean | `true` or `false` | `false` |\n| refresh | determine whether have refresh button | Boolean | `true` or `false` | `false` |\n| fixedHeight | determine whether widget body's height is fixed, only support `smart-widget` | Boolean | `true` or `false` | `false` |\n| shadow | when to show card shadows | String | `always`、`hover`、`never` | `always` |\n| translateY | the length of vertically transform | Number | - | 0 |\n| isActived | determine whether widget is actived | Boolean | `true` or `false` | `false` |\n| activedColor | the actived widget `box-shadow` color, usually used with `isActived` attribute | String | hex color | #0076db |\n| headerHeight | Widget Header Height(px) | Number | - | 48 |\n\n## SmartWidget Methods\n\n| Name | Description | Parameters |\n|:--------:|--------|:--------|\n| move | Every time an item is being moved and changes position | `(i, newX, newY)` |\n| moved | Every time an item is finished being moved and changes position | `(i, newX, newY)` |\n| resize | Every time an item is being resized and changes size | `(i, newH, newW, newHPx, newWPx)` |\n| resized | Every time an item is finished being moved and changes position | `(i, newH, newW, newHPx, newWPx)` |\n| container-resized | Every time the grid item/layout container changes size (browser window or other) | `(i, newH, newW, newHPx, newWPx)` |\n| on-refresh | Used when the widget need fetching data from ajax methods, usually used with `loading` attribute | - |\n| before-fullscreen | Used when the widget before fullscreen, usually used with `fullscreen` attribute | `true` or `false` |\n| on-fullscreen | Used when the widget is already fullscreen, usually used with `fullscreen` attribute | `true` or `false` |\n\n## CSS Selector in SmartWidget\n\n| Name | Description |\n|:--------|--------|\n| `.smartwidget` | The main selector in SmartWidget |\n| `.is-actived` | The state of widget is actived |\n| `.vue-grid-item.vue-grid-placeholder` | The default css for the placeholder |\n\n## SmartWidgetGrid Props\n\n> It's similar with [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout). Care about the attribute `layout`, The value of layout must be an Array of Object items. Each item must have i, x, y, w and h proprties. especially, the i proprties, it's the unique identifier of the widget item, euqal with widget slot.\n\n| Attribute | Description | Type | Accepted values | Default |\n|:--------|--------|:--------:|:--------:|:--------:|\n| layout | This is the initial layout of the grid. | Array | - | `required` |\n| responsiveLayouts | This is the initial layouts of the grid per breakpoint if responsive is set to true. | Object | - | `{}` |\n| colNum | Says how many columns the grid has. | Number | - | `12` |\n| rowHeight | Says what is a height of a single row in pixels. | Number | - | `48` |\n| maxRows | Says what is a maximal number of rows in the grid. | Number | - | `Infinity` |\n| margin | Says what are the margins of elements inside the grid. | Array | - | `[10, 10]` |\n| draggable | Says if the grids items are draggable. | Boolean | `true` or `false` | `true` |\n| resizable | Says if the grids items are resizable. | Boolean | `true` or `false` | `true` |\n| isMirrored | Says if the RTL/LTR should be reversed. | Boolean | `true` or `false` | `false` |\n| autoSize | Says if the container height should swells and contracts to fit contents. | Boolean | `true` or `false` | `true` |\n| verticalCompact | Says if the layout should be compact vertically. | Boolean | `true` or `false` | `true` |\n| preventCollision | Says if grid items will move when being dragged over. | Boolean | `true` or `false` | `false` |\n| responsive | Says if the layout should be responsive to window width. | Boolean | `true` or `false` | `false` |\n| breakpoints | Breakpoints defined for responsive layout. Sets widths on wich column number changes. | Object | - | `{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }` |\n| cols | Defines number of columns for each breakpoint. | Object | - | `{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }` |\n| isStatic | Control all widgets won't be draggable, resizable or moved | Boolean | `true` or `false` | `false` |\n\n## Slot scopes\n\n> Each widget in the grid is resizable, `slot-scope` provide the widget attribute to the children component.\n\n| Name | Description | Type |\n|:--------|:--------|:--------:|\n| contentH | Provide the widget body content(`widget-body__content`) height | Number |\n\n## SmartWidgetGrid Methods\n\n| Name | Description | Parameters |\n|:--------|:--------|:--------:|\n| layout-created | Emited on the component created lifecycle hook | `newLayout` |\n| layout-before-mount | Emited on the component beforeMount lifecycle hook | `newLayout` |\n| layout-mounted | Emited on the component mounted lifecycle hook | `newLayout` |\n| layout-ready | Emited when all the operations on the mount hook finish | `newLayout` |\n| layout-updated | Every time the layout has finished updating and positions of all grid-items are recalculated | `newLayout` |\n| breakpoint-changed | Every time the breakpoint value changes due to window resize | `(newBreakpoint, newLayout)` |\n\n## License\n\nMIT [@xiaoluoboding](https://github.com/xiaoluoboding)\n","readmeFilename":"README.md","gitHead":"1872eb6cceedea210c04d7e7bccc8830ca800661","bugs":{"url":"https://github.com/xiaoluoboding/vue-smart-widget/issues"},"_id":"vue-smart-widget@1.0.0-alpha.1","_nodeVersion":"14.16.1","_npmVersion":"7.16.0","dist":{"integrity":"sha512-J0+5dHi+FrOZAFM27Rku8L6HwgJyUYSG5YjEruZ28SVypkne4LfaOGwoYPiquFpYzRYYJFjeM5ujrzLP0651aw==","shasum":"b0208d830a61fe78ae83cd0f47db89e4565f87f5","tarball":"https://registry.npmjs.org/vue-smart-widget/-/vue-smart-widget-1.0.0-alpha.1.tgz","fileCount":7,"unpackedSize":388753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhRDZVCRA9TVsSAnZWagAAdUQP+wRKHascPA8KGFtgaWSy\nVvWyvRfmIR1QKYZ1nXcaZrJl/KGVlAuk4jxB5Wlf01uypGk14xtRd2E7LHXr\nfItYiCJGCbaANa1XWRTVfQne/JlNPLzl3sIPwRNBb3AywrKrUIx3z7twVb2V\no+g+GGF9QJLEUGmF1vHquYoiUB0jbYM8VmH9MyeP3dCuJQBHPjWRKOwd5G3h\nNe292/tNmRyyHuXW01D1y/U5UkECU4+rhwNEVTUTSilW3SYtZJFTbjylnCfH\nZxl6mObQMH/z9R80uN4PnxsyFHWDemw6YtKNKuRhTkaeOYqQobdCwHSG/tb9\nqe99Rxdu9Eh9UkAHgGxHv7ec8qVv8gf6T8Atp+ogaJuO+26rrRaeeQ3yDeo+\nCTo6l+b/pqOCUfdMI+cuj7eD/ln9LrTLGeRlWqybn5z8QdmDlDrQjpSxM4AC\nej+dEfO84C6Q19Y04q7YL0B0qVkMb3qRlSnqNc1AIfpJcImKk7VzOU37cHD/\nxVtFrstoaslwbsM9gCozk7xpdqbu8K9ZZ7eMPymzvPOWM4RihEx/Tewazfnr\n1HSJ6jNYH4KDGNl3sKQsDvAfRPrzyXVrzh4Le/CDIoHZlvJpxaq9aesP+iRR\nyGfLRwAbhiivXc56+UpqtUS//hx0/ryxjrFiugtdEeG/QVIPLHwlcWq//T/p\n516x\r\n=Dqjp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHqiDRlEvYkFE+ZPbw+SpsUDYAXzocNBkCL21QLk0I40AiBxDF7fvODCC6AENTkm2k6vojyArktEb7xp9kmk5dMizg=="}]},"_npmUser":{"name":"xiaoluoboding","email":"xiaoluoboding@gmail.com"},"directories":{},"maintainers":[{"name":"xiaoluoboding","email":"xiaoluoboding@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-smart-widget_1.0.0-alpha.1_1631860309742_0.5803257174679681"},"_hasShrinkwrap":false},"0.6.2":{"name":"vue-smart-widget","version":"0.6.2","description":"Smart widget is a flexible and extensible content container component for Vue2.5+.","author":{"name":"xiaoluoboding","email":"xiaoluoboding@gmail.com"},"scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build --dest docs","lint":"vue-cli-service lint","build:lib":"vue-cli-service build --mode lib --target lib --dest lib src/index.js","bundle":"npm run build && npm run build:lib","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0","report":"vue-cli-service build --mode lib --target lib --dest lib --report src/index.js"},"main":"lib/vue-smart-widget.common.js","unpkg":"lib/vue-smart-widget.umd.min.js","repository":{"type":"git","url":"git+https://github.com/xiaoluoboding/vue-smart-widget.git"},"homepage":"https://github.com/xiaoluoboding/vue-smart-widget","keywords":["widget","card","panel","vue","grid","drag","draggable","resize","resizable"],"vetur":{"tags":"vetur/tags.json","attributes":"vetur/attributes.json"},"license":"MIT","dependencies":{"vue-grid-layout":"^2.3.11"},"devDependencies":{"@vue/cli-plugin-babel":"^4.5.9","@vue/cli-plugin-eslint":"^4.5.9","@vue/cli-service":"^4.5.9","@vue/eslint-config-standard":"^6.0.0","babel-eslint":"^10.1.0","core-js":"^3.8.2","echarts":"4.9.0","element-ui":"^2.14.1","eslint":"^7.17.0","eslint-plugin-html":"^6.1.1","eslint-plugin-import":"^2.22.1","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-standard":"^5.0.0","eslint-plugin-vue":"^7.4.0","less":"^4.0.0","less-loader":"^7.2.1","v-tooltip":"^2.1.1","ve-charts":"^0.9.5","vue":"^2.6.12","vue-router":"^3.4.9","vue-template-compiler":"^2.6.12","vuex":"^3.6.0"},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"gitHead":"a34ab05922c539cf0710693d4496ca6c73f4b4d2","bugs":{"url":"https://github.com/xiaoluoboding/vue-smart-widget/issues"},"_id":"vue-smart-widget@0.6.2","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-RGkbjaSy7uAbBHZmgp5dAROUnyzAU3bQyu5YtyJStpfGa30MohCVApRzQCmERVtJkmavF9zDGZ9/fxxAhGw7Rg==","shasum":"5d8e3e8ad997cebd256f69620dbb4f2946c13d69","tarball":"https://registry.npmjs.org/vue-smart-widget/-/vue-smart-widget-0.6.2.tgz","fileCount":8,"unpackedSize":1139303,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFC6QcP4SZcv9o353U08xYjxVCeXSDxi8Ee7GZBaNs5QIhAIJINqQ9pZ2MkMkPZc2g7y0Tj7dThKhr5o1wSN4z7fh6"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKBQMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT9xAAnWld6Cdc5/jMFyb/VRoMUDjM4bbNjF0xmKZURfwQfJqhTokp\r\ny8dvNmx36UzKvc/MKqF2di1zqBjgeusvwUupKiKzhVWnmeOEKfef7HHC9UsD\r\nm+zRauMsmZTWbiG5cHV07LINRycOZ2gRHO2uwgQkntGaQh9LEBzrZTjKVeja\r\np8p31vERDpoLdSqXxKOtVMbG6hGYJ9ET2/2Uh+pA9OSeULQKINs9NfeTWFyi\r\nBOK8DBzE2K5xHcozhnrMQiKu3roxlJSOBrxxa4HzsEiLM7rVGWMd2zzRG1eO\r\nFT0sa2jXEdbqYWOElewC9E2qOkUCB8sMjC6DNe7/g2BTNZKNp9Sj10f6k7sV\r\nOb4gL1eb/r5k7r2mee8sXCIS6ySw3A1z1TNwUJ+i5GrSLb4wC6yRfDncetj+\r\nmNi3eUP8X9+gXO5Krcbci3E6hD8aT9VMt5kNcIJxXXc7w0ZlVrPf0VBjE1nY\r\neaU1ekmdBKhQ9/3rJfdK6V4oqNlEEwgaXAS3jIM8I2QrBCyTjOiFfAGuCMgI\r\nsdfpyXq1UBwibJxWDnnJrYo42Ota+dLLZKXccyuTyWFRur1Sbq24ja2U0r15\r\n3bMZx+aTdfl4mGzjWvZRScAy/yc8EnIyEesPLMD1jFGm9dUVZ4OT6lATp77k\r\nIcCxijVOl+hdKOIWUOqSpRGJURp+k++E2LE=\r\n=iUNX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"xiaoluoboding","email":"xiaoluoboding@gmail.com"},"directories":{},"maintainers":[{"name":"xiaoluoboding","email":"xiaoluoboding@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-smart-widget_0.6.2_1663570956463_0.49463505067296465"},"_hasShrinkwrap":false}},"time":{"created":"2018-05-31T03:07:25.180Z","0.1.0":"2018-05-31T03:07:25.338Z","modified":"2022-09-19T07:02:36.746Z","0.1.1":"2018-06-01T07:37:20.049Z","0.2.0":"2018-06-04T03:06:12.302Z","0.2.5":"2018-06-25T07:52:49.058Z","0.2.6":"2018-07-11T14:27:11.021Z","0.3.0":"2018-10-03T14:37:14.123Z","0.3.1":"2018-10-03T16:07:41.601Z","0.3.2":"2018-10-04T10:42:29.077Z","0.4.0":"2019-08-02T09:59:58.275Z","0.4.1":"2019-08-02T10:42:39.497Z","0.4.2":"2019-08-02T13:01:27.966Z","0.4.3":"2019-08-02T14:09:57.826Z","0.4.4":"2019-08-02T15:20:18.756Z","0.4.5":"2019-08-02T16:42:16.133Z","0.4.6":"2019-08-08T06:47:41.002Z","0.5.0":"2019-11-25T07:57:25.824Z","0.5.1":"2019-11-26T08:05:08.159Z","0.5.2":"2019-11-27T03:07:31.058Z","0.5.3":"2019-12-06T14:41:06.158Z","0.5.4":"2019-12-09T02:28:52.362Z","0.5.5":"2020-01-03T07:20:50.908Z","0.6.0":"2021-01-04T07:38:49.590Z","0.6.1":"2021-01-07T09:26:36.129Z","1.0.0-alpha.1":"2021-09-17T06:31:49.889Z","0.6.2":"2022-09-19T07:02:36.661Z"},"maintainers":[{"name":"xiaoluoboding","email":"xiaoluoboding@gmail.com"}],"description":"Smart widget is a flexible and extensible content container component for Vue2.5+.","author":{"name":"xiaoluoboding","email":"xiaoluoboding@gmail.com"},"readme":"# vue-smart-widget\n\n
\n \n \n \n \n
\n\n> Smart widget is a flexible and extensible content container component.\nIt includes header and body part, and widget body includes editbox、content、footer.\nIf you use with grid, it also have a draggable and resizable grid layout,\nbase on Vue2.5.+ & [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout).\n\n## Both Support Vue 2/Vue 3\n\n[Vue 2](https://github.com/xiaoluoboding/vue-smart-widget) | [Vue 3](https://github.com/xiaoluoboding/vue-smart-widget/tree/next)\n\n## Installation\n\n### Vue 2\n\n```bash\nnpm i vue-smart-widget -S\n```\n\n### Vue 3\n\n```bash\nnpm i vue-smart-widget@next -S\n```\n\n\n## Import\n\nInstall all the components:\n\n```bash\nimport Vue from 'vue'\nimport VueSmartWidget from 'vue-smart-widget'\n\nVue.use(VueSmartWidget)\n```\n\nUse widget only:\n\n```bash\nimport Vue from 'vue'\nimport { SmartWidget } from 'vue-smart-widget'\n\nVue.component('SmartWidget', SmartWidget)\n```\n\n## Usage\n\nThe SmartWidget is heavily base on [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout), you can know about `vue-grid-layout` first, maybe you already use in your project.\n\n### Use widget only\n\n**Html**\n\n```html\n\n
\n \n\n```\n\n## SmartWidget Props\n\n| Attribute | Description | Type | Accepted values | Default |\n|:--------:|--------|--------|:--------:|:--------:|\n| slot | Widget slot, the unique identifier of the widget. refer to `SmartWidgetGrid Props` | String | - | - |\n| title | Widget Header Title | String | - | - |\n| subTitle | Widget Header Sub Title | String | - | - |\n| padding | padding in Widget Body | [Number, Array] | - | `[12, 20]` |\n| simple | Widget without Header | Boolean | `true` or `false` | `false` |\n| loading | determine whether it's loading | Boolean | `true` or `false` | `false` |\n| fullscreen | determine whether have fullscreen button | Boolean | `true` or `false` | `false` |\n| collapse | determine whether have collapse button, only support `smart-widget` | Boolean | `true` or `false` | `false` |\n| refresh | determine whether have refresh button | Boolean | `true` or `false` | `false` |\n| fixedHeight | determine whether widget body's height is fixed, only support `smart-widget` | Boolean | `true` or `false` | `false` |\n| shadow | when to show card shadows | String | `always`、`hover`、`never` | `always` |\n| translateY | the length of vertically transform | Number | - | 0 |\n| isActived | determine whether widget is actived | Boolean | `true` or `false` | `false` |\n| activedColor | the actived widget `box-shadow` color, usually used with `isActived` attribute | String | hex color | #0076db |\n| headerHeight | Widget Header Height(px) | Number | - | 48 |\n\n## SmartWidget Methods\n\n| Name | Description | Parameters |\n|:--------:|--------|:--------|\n| move | Every time an item is being moved and changes position | `(i, newX, newY)` |\n| moved | Every time an item is finished being moved and changes position | `(i, newX, newY)` |\n| resize | Every time an item is being resized and changes size | `(i, newH, newW, newHPx, newWPx)` |\n| resized | Every time an item is finished being moved and changes position | `(i, newH, newW, newHPx, newWPx)` |\n| container-resized | Every time the grid item/layout container changes size (browser window or other) | `(i, newH, newW, newHPx, newWPx)` |\n| on-refresh | Used when the widget need fetching data from ajax methods, usually used with `loading` attribute | - |\n| before-fullscreen | Used when the widget before fullscreen, usually used with `fullscreen` attribute | `true` or `false` |\n| on-fullscreen | Used when the widget is already fullscreen, usually used with `fullscreen` attribute | `true` or `false` |\n\n## CSS Selector in SmartWidget\n\n| Name | Description |\n|:--------|--------|\n| `.smartwidget` | The main selector in SmartWidget |\n| `.is-actived` | The state of widget is actived |\n| `.vue-grid-item.vue-grid-placeholder` | The default css for the placeholder |\n\n## SmartWidgetGrid Props\n\n> It's similar with [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout). Care about the attribute `layout`, The value of layout must be an Array of Object items. Each item must have i, x, y, w and h proprties. especially, the i proprties, it's the unique identifier of the widget item, euqal with widget slot.\n\n| Attribute | Description | Type | Accepted values | Default |\n|:--------|--------|:--------:|:--------:|:--------:|\n| layout | This is the initial layout of the grid. | Array | - | `required` |\n| responsiveLayouts | This is the initial layouts of the grid per breakpoint if responsive is set to true. | Object | - | `{}` |\n| colNum | Says how many columns the grid has. | Number | - | `12` |\n| rowHeight | Says what is a height of a single row in pixels. | Number | - | `48` |\n| maxRows | Says what is a maximal number of rows in the grid. | Number | - | `Infinity` |\n| margin | Says what are the margins of elements inside the grid. | Array | - | `[10, 10]` |\n| draggable | Says if the grids items are draggable. | Boolean | `true` or `false` | `true` |\n| resizable | Says if the grids items are resizable. | Boolean | `true` or `false` | `true` |\n| isMirrored | Says if the RTL/LTR should be reversed. | Boolean | `true` or `false` | `false` |\n| autoSize | Says if the container height should swells and contracts to fit contents. | Boolean | `true` or `false` | `true` |\n| verticalCompact | Says if the layout should be compact vertically. | Boolean | `true` or `false` | `true` |\n| preventCollision | Says if grid items will move when being dragged over. | Boolean | `true` or `false` | `false` |\n| responsive | Says if the layout should be responsive to window width. | Boolean | `true` or `false` | `false` |\n| breakpoints | Breakpoints defined for responsive layout. Sets widths on wich column number changes. | Object | - | `{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }` |\n| cols | Defines number of columns for each breakpoint. | Object | - | `{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }` |\n| isStatic | Control all widgets won't be draggable, resizable or moved | Boolean | `true` or `false` | `false` |\n\n## Slot scopes\n\n> Each widget in the grid is resizable, `slot-scope` provide the widget attribute to the children component.\n\n| Name | Description | Type |\n|:--------|:--------|:--------:|\n| contentH | Provide the widget body content(`widget-body__content`) height | Number |\n\n## SmartWidgetGrid Methods\n\n| Name | Description | Parameters |\n|:--------|:--------|:--------:|\n| layout-created | Emited on the component created lifecycle hook | `newLayout` |\n| layout-before-mount | Emited on the component beforeMount lifecycle hook | `newLayout` |\n| layout-mounted | Emited on the component mounted lifecycle hook | `newLayout` |\n| layout-ready | Emited when all the operations on the mount hook finish | `newLayout` |\n| layout-updated | Every time the layout has finished updating and positions of all grid-items are recalculated | `newLayout` |\n| breakpoint-changed | Every time the breakpoint value changes due to window resize | `(newBreakpoint, newLayout)` |\n\n## License\n\nMIT [@xiaoluoboding](https://github.com/xiaoluoboding)\n","readmeFilename":"README.md","keywords":["widget","card","panel","vue","grid","drag","draggable","resize","resizable"],"homepage":"https://github.com/xiaoluoboding/vue-smart-widget","repository":{"type":"git","url":"git+https://github.com/xiaoluoboding/vue-smart-widget.git"},"bugs":{"url":"https://github.com/xiaoluoboding/vue-smart-widget/issues"},"license":"MIT"}
![](\"https://travis-ci.org/xiaoluoboding/vue-smart-widget.svg?branch=master\")
\n ![](\"https://img.shields.io/npm/v/vue-smart-widget.svg\")
\n ![](\"https://img.shields.io/github/stars/xiaoluoboding/vue-smart-widget.svg\")
\n ![](\"https://img.shields.io/github/license/xiaoluoboding/vue-smart-widget.svg\")
\n