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's Issues

能否提供这个页面的demo

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

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.

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 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

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

resize 时，colNum 数量不会更新

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

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

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

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 ?

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

请问下这是什么原因

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

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

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

fit content?

How to AUTO fit connetent space layout height = moniter

on-refresh its not work

on-refresh toolbar not refresh only slot widget

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

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

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

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

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;
}

Problem with install

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

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

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

Full-Screen SVG need Slot Support

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

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

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

I need import css file

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

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

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

CDN Request

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

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

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.

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' }
      ]
    }
  } 
}

collapse vue3 its not working

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';