Skip to content

Latest commit

 

History

History
202 lines (157 loc) · 8.58 KB

README.md

File metadata and controls

202 lines (157 loc) · 8.58 KB
Raw

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

Vue 2

npm i vue-smart-widget -S

Vue 3

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