vue-smart-widget

Smart widget is a flexible and extensible content container component. It includes header and body part, and widget body includes editbox、content、footer. If you use with grid, it also have a draggable and resizable grid layout, base on Vue2.5.+ & vue-grid-layout.

Both Support Vue 2/Vue 3

Vue 2 | Vue 3

Installation

npm i vue-smart-widget -S

npm i vue-smart-widget@next -S

Import

Install all the components:

import Vue from 'vue'
import VueSmartWidget from 'vue-smart-widget'

Vue.use(VueSmartWidget)

Use widget only:

import Vue from 'vue'
import { SmartWidget } from 'vue-smart-widget'

Vue.component('SmartWidget', SmartWidget)

Usage

The SmartWidget is heavily base on vue-grid-layout, you can know about vue-grid-layout first, maybe you already use in your project.

Use widget only

Html

<smart-widget title="Default Widget">
  <p>
    It's default widget.
  </p>
</smart-widget>

Use widget with grid

import Vue from 'vue'
import { SmartWidgetGrid } from 'vue-smart-widget'

Vue.component('SmartWidgetGrid', SmartWidgetGrid)

Script

new Vue({
  data () {
    return {
      layout: [
        { x: 0, y: 0, w: 4, h: 4, i: '0' },
        { x: 4, y: 0, w: 4, h: 4, i: '1' },
        { x: 8, y: 0, w: 4, h: 4, i: '2' }
      ]
    }
  }
})

Html

<smart-widget-grid :layout="layout">
  <smart-widget slot="0" simple>
    <div class="layout-center">
      <h3>Simple Widget Without Header</h3>
    </div>
  </smart-widget>
  <smart-widget slot="1" title="Default Widget">
    <div class="layout-center">
      <h3>Default Widget With Header</h3>
    </div>
  </smart-widget>
  <smart-widget slot="2" title="Full Screen" fullscreen>
    <div class="layout-center">
      <h3>Make any widget full screen</h3>
    </div>
  </smart-widget>
</smart-widget-grid>

SmartWidget Props

Attribute Description Type Accepted values Default

slot Widget slot, the unique identifier of the widget. refer to SmartWidgetGrid Props String - -

title Widget Header Title String - -

subTitle Widget Header Sub Title String - -

padding padding in Widget Body [Number, Array] - [12, 20]

simple Widget without Header Boolean true or false false

loading determine whether it's loading Boolean true or false false

fullscreen determine whether have fullscreen button Boolean true or false false

collapse determine whether have collapse button, only support smart-widget Boolean true or false false

refresh determine whether have refresh button Boolean true or false false

fixedHeight determine whether widget body's height is fixed, only support smart-widget Boolean true or false false

shadow when to show card shadows String always、hover、never always

translateY the length of vertically transform Number - 0

isActived determine whether widget is actived Boolean true or false false

activedColor the actived widget box-shadow color, usually used with isActived attribute String hex color #0076db

headerHeight Widget Header Height(px) Number - 48

SmartWidget Methods

Name Description Parameters

move Every time an item is being moved and changes position (i, newX, newY)

moved Every time an item is finished being moved and changes position (i, newX, newY)

resize Every time an item is being resized and changes size (i, newH, newW, newHPx, newWPx)

resized Every time an item is finished being moved and changes position (i, newH, newW, newHPx, newWPx)

container-resized Every time the grid item/layout container changes size (browser window or other) (i, newH, newW, newHPx, newWPx)

on-refresh Used when the widget need fetching data from ajax methods, usually used with loading attribute -

before-fullscreen Used when the widget before fullscreen, usually used with fullscreen attribute true or false

on-fullscreen Used when the widget is already fullscreen, usually used with fullscreen attribute true or false

CSS Selector in SmartWidget

Name Description

.smartwidget The main selector in SmartWidget

.is-actived The state of widget is actived

.vue-grid-item.vue-grid-placeholder The default css for the placeholder

SmartWidgetGrid Props

It's similar with 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.

Attribute Description Type Accepted values Default

layout This is the initial layout of the grid. Array - required

responsiveLayouts This is the initial layouts of the grid per breakpoint if responsive is set to true. Object - {}

colNum Says how many columns the grid has. Number - 12

rowHeight Says what is a height of a single row in pixels. Number - 48

maxRows Says what is a maximal number of rows in the grid. Number - Infinity

margin Says what are the margins of elements inside the grid. Array - [10, 10]

draggable Says if the grids items are draggable. Boolean true or false true

resizable Says if the grids items are resizable. Boolean true or false true

isMirrored Says if the RTL/LTR should be reversed. Boolean true or false false

autoSize Says if the container height should swells and contracts to fit contents. Boolean true or false true

verticalCompact Says if the layout should be compact vertically. Boolean true or false true

preventCollision Says if grid items will move when being dragged over. Boolean true or false false

responsive Says if the layout should be responsive to window width. Boolean true or false false

breakpoints Breakpoints defined for responsive layout. Sets widths on wich column number changes. Object - { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }

cols Defines number of columns for each breakpoint. Object - { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }

isStatic Control all widgets won't be draggable, resizable or moved Boolean true or false false

Slot scopes

Each widget in the grid is resizable, slot-scope provide the widget attribute to the children component.

Name Description Type

contentH Provide the widget body content(widget-body__content) height Number

SmartWidgetGrid Methods

Name Description Parameters

layout-created Emited on the component created lifecycle hook newLayout

layout-before-mount Emited on the component beforeMount lifecycle hook newLayout

layout-mounted Emited on the component mounted lifecycle hook newLayout

layout-ready Emited when all the operations on the mount hook finish newLayout

layout-updated Every time the layout has finished updating and positions of all grid-items are recalculated newLayout

breakpoint-changed Every time the breakpoint value changes due to window resize (newBreakpoint, newLayout)

License

MIT @xiaoluoboding