xiaoluoboding/vue-smart-widget

🗃️Smart widget is a flexible and extensible content container component for Vue2.x / Vue3.x in Next branch.

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

vue-smart-widget's Issues

Full-Screen SVG need Slot Support

I need import css file

您好 我在 vue2.9的cli 中 使用这个插件 不能使用

您好 我在 vue2.9的cli 中 使用这个插件 不能使用 首先会报错 下载的依赖 里面 解析不了某些js 然后全局注册的话 提示没有注册 这个 插件的名称

on-refresh its not work

on-refresh toolbar not refresh only slot widget

slot-scope能增加小部件的宽度吗

slot-scope能增加小部件的宽度吗，比如content-w?

Can't resize smart-widget in smart-widget-layout

Can't resize smart-widget in smart-widget-layout. I can't even see the sign of the resize func

Full Demo?

I would love to see the code for the demo website if possible? I cannot get similar results in Vue 3 at all.

https://xiaoluoboding.github.io/vue-smart-widget/#/widget-with-grid

This is the example I've been trying to work off.

Error adding it to main.js

I get this error, I execute npm run watch:

I have in my package.json
"vue-smart-widget": "^ 0.6.1",

and main.js

 import { SmartWidget } from 'vue-smart-widget'
Vue.component('SmartWidget', SmartWidget)

or if I use it this way:

import VueSmartWidget from 'vue-smart-widget'
Vue.use(VueSmartWidget)

I receive the error, am I integrating it wrong?
I have deleted my node_modules folder, then npm i, but the error persists, I have also run npm run cache

It only works for me in this version: vue-smart-widget": "^ 0.4.6

collapse vue3 its not working

Docs for Vue3 need to be updated

code example from main README.md doesn't alow to work in Vue3

in the docs:

<smart-widget-grid :layout="layout">
  <smart-widget slot="0" simple>
    <div class="layout-center">
      <h3>Simple Widget Without Header</h3>
    </div>
  </smart-widget>

While the correct code is in https://github.com/xiaoluoboding/vue-smart-widget/blob/next/app/views/Home.vue

 <smart-widget-grid :layout="layout">
          <template #0>
            <smart-widget simple>
              <div class="layout-center">
                <h3>Simple Widget Without Header</h3>
              </div>
            </smart-widget>
          </template>

see the extra <template #0> tag

vue3 how to dynamically set colNum and rowHeight?

dynamically set property not work,only can set static。how to do ?

 <smart-widget-grid @layout-before-mount="gridMount"   :colNum="colNum" :rowHeight="rowHeight"  :layout="tags"  draggable="true" @dragover="onEnd" @dragenter="onEnter">
</>


// ts

query=>{
  rowHeight.value=res.data.result.rowHeight;
  colNum.value=res.data.result.colNum;
}

Issue with test

While trying to check the test. got error

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Problem with resize

When we try to resize some items and get out from the visible part of the browser. size changed but the value of height don't change

main.ts 引用报错

Could not find a declaration file for module 'vue-smart-widget'. 'D:/svn/owner/jyh/2023/survey/pure-admin-thin-main/node_modules/.pnpm/[email protected]/node_modules/vue-smart-widget/lib/vue-smart-widget.umd.js' implicitly has an 'any' type.
Try npm i --save-dev @types/vue-smart-widget if it exists or add a new declaration (.d.ts) file containing declare module 'vue-smart-widget';

how to use in vite2+vue3

1. npm i vue-smart-widget@next -S
2. main.ts

import { createApp } from 'vue'
import App from './App.vue'
import VueSmartWidget from 'vue-smart-widget'

const app = createApp(App)
app.use(VueSmartWidget)
app.mount('#app')

3. Test.vue

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

<script lang="ts" setup>
import { ref } from 'vue'
let layout = ref([
    { 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' }
])

</script>

<style scoped>
</style>

and the page shows

it looks like missing styles？
is there any example that used in vite2+vue3

能否提供这个页面的demo

主要想学习怎么处理图标的resize，谢谢

能否支持分别控制每个 grid-item 的 static

使用场景：
画布中包含文本框组件。相比其他它组件，文本框会有一种编辑状态：聚焦时支持拖动鼠标选中文本内容而不是拖动文本框组件。
期望：文本框聚焦时，仅将文本框 static 设置为 false
目前：通过 smart-widget-grid isStatic 属性将所有组件 static 设置为 false
建议：layout 属性中增加 static 字段，表示每个 grid-item 的状态

页面关闭后鼠标在页面上移动不断报错，导致重新打开页面无法打开。

请问下这是什么原因

Outside dragging support

Hello, this library looks promising.
Does it support dragging widgets into the grid from outside(e.g. from some sidebar with widgets gallery)?

how to use vue-smart-widget with Vue3 + Tyscript. / Vite2 + Tyscript

Exception for vue-grid-layout

Hey,
I have a project on Vue 3 (using Quasar).
After installing the package and copy the demo with smart grid I got this errors:

I have to note that I tried installed vue-grid-layout before your package and same error.

Any ideas ?

CDN Request

Hi did u have CDN version ? or how to do it if i have to manually

fit content?

How to AUTO fit connetent space layout height = moniter

resize 时，colNum 数量不会更新

透过 vue tools 可以看到 <SmartWidgetGrid> 里面还有包一个 <GridLayout> 组件
而我拖拽改变 grid 大小时，<SmartWidgetGrid> 的 colNum 会更新

但里面的 <GridLayout> 没有跟着更新

希望能在 grid-layout.vue 里面加上监听，即时更新 colNum 数据

退出全屏时会删除body的class属性

vue-smart-widget/src/packages/SmartWidget.vue文件：
document.body.removeAttribute('class', 'no-overflow')

removeAttribute使用错误，removeAttribute() 是从指定的元素中删除一个属性。造成body的class属性被删除，其它class类不生效。

你好这个插件 拖拽 在vue2.0 中使用 draggable 属性 有bug

这个 属性 在vue 2.0 中使用 在data 中定义一个 draggable ：true 然后在某个方法中改为 false 但是这个插件 中 不起作用 数据是更新了 视图 中 组件还是可以 拖拽 我测试grid-layout 是ok 的

responsive in vue3 has Issue

hi,
responsive in vue3 has Issue, after remove a widget, this widget hide from stage but it exist in layout array!

thanks @xiaoluoboding

get null when `import {SmartWidget, SmartWidgetGrid}`

I do not want to reg component globally. I only want both locally, but failed, because SmartWidget and SmartWidgeGrid are null.

Maybe you con include src in npm package

import Vue from 'vue'
// import VueSmartWidget from 'vue-smart-widget'  
import {SmartWidget, SmartWidgetGrid} from 'vue-smart-widget'

export default {
  name: "dashboard",
  components: {
    'smart-widget':SmartWidget,
    'smart-widget-grid':SmartWidgetGrid,
  },
  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' }
      ]
    }
  } 
}

Problem with install

When install package I have some issues when i run assembly, on screenshot show this problem. Could you help me, please?