npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-smart-widget

v0.6.2

Published

Smart widget is a flexible and extensible content container component for Vue2.5+.

Downloads

5,235

Readme

vue-smart-widget

Smart widget is a flexible and extensible content container component. It includes header and body part, and widget body includes editboxcontentfooter. 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 | alwayshovernever | 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