{"id":13403189,"url":"https://github.com/xiaoluoboding/vue-smart-widget","last_synced_at":"2025-10-09T03:11:14.393Z","repository":{"id":30836805,"uuid":"126145286","full_name":"xiaoluoboding/vue-smart-widget","owner":"xiaoluoboding","description":"🗃️Smart widget is a flexible and extensible content container component for Vue2.x / Vue3.x in Next branch.","archived":false,"fork":false,"pushed_at":"2023-07-25T01:44:32.000Z","size":8796,"stargazers_count":192,"open_issues_count":18,"forks_count":35,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-09-12T00:24:33.463Z","etag":null,"topics":["card","draggable","grid","layout","panel","resizable","vue","vue-smart-widget","widget"],"latest_commit_sha":null,"homepage":"https://xiaoluoboding.github.io/vue-smart-widget/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xiaoluoboding.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":["xiaoluoboding"],"custom":["https://www.buymeacoffee.com/xlbd","https://paypal.me/xlbd"]}},"created_at":"2018-03-21T08:16:54.000Z","updated_at":"2025-09-11T07:20:28.000Z","dependencies_parsed_at":"2024-01-07T13:09:44.675Z","dependency_job_id":"0f26dabe-049c-4ca0-a596-026f3f8cd5b8","html_url":"https://github.com/xiaoluoboding/vue-smart-widget","commit_stats":{"total_commits":116,"total_committers":2,"mean_commits":58.0,"dds":"0.051724137931034475","last_synced_commit":"a34ab05922c539cf0710693d4496ca6c73f4b4d2"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/xiaoluoboding/vue-smart-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-smart-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-smart-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-smart-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-smart-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaoluoboding","download_url":"https://codeload.github.com/xiaoluoboding/vue-smart-widget/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-smart-widget/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000778,"owners_count":26082911,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["card","draggable","grid","layout","panel","resizable","vue","vue-smart-widget","widget"],"created_at":"2024-07-30T19:01:26.588Z","updated_at":"2025-10-09T03:11:14.373Z","avatar_url":"https://github.com/xiaoluoboding.png","language":"JavaScript","funding_links":["https://github.com/sponsors/xiaoluoboding","https://www.buymeacoffee.com/xlbd","https://paypal.me/xlbd"],"categories":["JavaScript","Components \u0026 Libraries","UI Layout [🔝](#readme)"],"sub_categories":["UI Layout"],"readme":"# vue-smart-widget\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://travis-ci.org/xiaoluoboding/vue-smart-widget\"\u003e\u003cimg src=\"https://travis-ci.org/xiaoluoboding/vue-smart-widget.svg?branch=master\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-smart-widget\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-smart-widget.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/xiaoluoboding/vue-smart-widget\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/xiaoluoboding/vue-smart-widget.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/xiaoluoboding/vue-smart-widget\"\u003e\u003cimg src=\"https://img.shields.io/github/license/xiaoluoboding/vue-smart-widget.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e Smart widget is a flexible and extensible content container component.\nIt includes header and body part, and widget body includes \u003cem\u003eeditbox\u003c/em\u003e、\u003cem\u003econtent\u003c/em\u003e、\u003cem\u003efooter\u003c/em\u003e.\nIf you use with grid, it also have a draggable and resizable grid layout,\nbase on \u003cstrong\u003eVue2.5.+\u003c/strong\u003e \u0026 \u003cstrong\u003e[vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout)\u003c/strong\u003e.\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\u003csmart-widget title=\"Default Widget\"\u003e\n  \u003cp\u003e\n    It's default widget.\n  \u003c/p\u003e\n\u003c/smart-widget\u003e\n```\n\n### Use widget with grid\n\n```bash\nimport Vue from 'vue'\nimport { SmartWidgetGrid } from 'vue-smart-widget'\n\nVue.component('SmartWidgetGrid', SmartWidgetGrid)\n```\n\n**Script**\n\n```js\nnew Vue({\n  data () {\n    return {\n      layout: [\n        { x: 0, y: 0, w: 4, h: 4, i: '0' },\n        { x: 4, y: 0, w: 4, h: 4, i: '1' },\n        { x: 8, y: 0, w: 4, h: 4, i: '2' }\n      ]\n    }\n  }\n})\n```\n\n**Html**\n\n```html\n\u003csmart-widget-grid :layout=\"layout\"\u003e\n  \u003csmart-widget slot=\"0\" simple\u003e\n    \u003cdiv class=\"layout-center\"\u003e\n      \u003ch3\u003eSimple Widget Without Header\u003c/h3\u003e\n    \u003c/div\u003e\n  \u003c/smart-widget\u003e\n  \u003csmart-widget slot=\"1\" title=\"Default Widget\"\u003e\n    \u003cdiv class=\"layout-center\"\u003e\n      \u003ch3\u003eDefault Widget With Header\u003c/h3\u003e\n    \u003c/div\u003e\n  \u003c/smart-widget\u003e\n  \u003csmart-widget slot=\"2\" title=\"Full Screen\" fullscreen\u003e\n    \u003cdiv class=\"layout-center\"\u003e\n      \u003ch3\u003eMake any widget full screen\u003c/h3\u003e\n    \u003c/div\u003e\n  \u003c/smart-widget\u003e\n\u003c/smart-widget-grid\u003e\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\u003e 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\u003e 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoluoboding%2Fvue-smart-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaoluoboding%2Fvue-smart-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoluoboding%2Fvue-smart-widget/lists"}