[Dashboards] The class value should only apply to the widget wrapper, not to the wrapped widget [see #179]

platypush/backend/http/webapp/dist/static/js/chunk-24b41efa.a95de99b.js

@@ -1,2 +0,0 @@
-(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-24b41efa"],{"0cb7":function(e,t,n){},"4de4":function(e,t,n){"use strict";var u=n("23e7"),o=n("b727").filter,r=n("1dde"),a=n("ae40"),i=r("filter"),c=a("filter");u({target:"Array",proto:!0,forced:!i||!c},{filter:function(e){return o(this,e,arguments.length>1?arguments[1]:void 0)}})},5870:function(e,t,n){"use strict";n("0cb7")},8285:function(e,t,n){"use strict";var u=n("7a23"),o=Object(u["K"])("data-v-1a18952e"),r=o((function(e,t,n,o,r,a){return Object(u["r"])(),Object(u["e"])("label",null,[Object(u["h"])("input",{class:"slider",type:"range",min:n.range[0],max:n.range[1],value:n.value,disabled:n.disabled,onChange:t[1]||(t[1]=function(t){return e.$emit("input",t)}),onMouseup:t[2]||(t[2]=function(t){return e.$emit("mouseup",t)}),onInput:t[3]||(t[3]=function(t){return e.$emit("input",t)}),onMousedown:t[4]||(t[4]=function(t){return e.$emit("mousedown",t)}),onTouch:t[5]||(t[5]=function(t){return e.$emit("input",t)}),onTouchstart:t[6]||(t[6]=function(t){return e.$emit("mousedown",t)}),onTouchend:t[7]||(t[7]=function(t){return e.$emit("mouseup",t)})},null,40,["min","max","value","disabled"]),n.withLabel?(Object(u["r"])(),Object(u["e"])("span",{key:0,class:"label",textContent:Object(u["C"])(n.value)},null,8,["textContent"])):Object(u["f"])("",!0)])})),a=(n("a9e3"),{name:"Slider",emits:["input","mouseup","mousedown"],props:{value:{type:Number},disabled:{type:Boolean,default:!1},range:{type:Array,default:function(){return[0,100]}},withLabel:{type:Boolean,default:!1}}});n("5870");a.render=r,a.__scopeId="data-v-1a18952e";t["a"]=a}}]);
-//# sourceMappingURL=chunk-24b41efa.a95de99b.js.map

platypush/backend/http/webapp/dist/static/js/chunk-6ee47cbe.3a207d3e.js

@@ -0,0 +1,2 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-6ee47cbe"],{"0cb7":function(e,n,t){},5870:function(e,n,t){"use strict";t("0cb7")},8285:function(e,n,t){"use strict";var u=t("7a23"),o=Object(u["K"])("data-v-1a18952e"),a=o((function(e,n,t,o,a,i){return Object(u["r"])(),Object(u["e"])("label",null,[Object(u["h"])("input",{class:"slider",type:"range",min:t.range[0],max:t.range[1],value:t.value,disabled:t.disabled,onChange:n[1]||(n[1]=function(n){return e.$emit("input",n)}),onMouseup:n[2]||(n[2]=function(n){return e.$emit("mouseup",n)}),onInput:n[3]||(n[3]=function(n){return e.$emit("input",n)}),onMousedown:n[4]||(n[4]=function(n){return e.$emit("mousedown",n)}),onTouch:n[5]||(n[5]=function(n){return e.$emit("input",n)}),onTouchstart:n[6]||(n[6]=function(n){return e.$emit("mousedown",n)}),onTouchend:n[7]||(n[7]=function(n){return e.$emit("mouseup",n)})},null,40,["min","max","value","disabled"]),t.withLabel?(Object(u["r"])(),Object(u["e"])("span",{key:0,class:"label",textContent:Object(u["C"])(t.value)},null,8,["textContent"])):Object(u["f"])("",!0)])})),i=(t("a9e3"),{name:"Slider",emits:["input","mouseup","mousedown"],props:{value:{type:Number},disabled:{type:Boolean,default:!1},range:{type:Array,default:function(){return[0,100]}},withLabel:{type:Boolean,default:!1}}});t("5870");i.render=a,i.__scopeId="data-v-1a18952e";n["a"]=i}}]);
+//# sourceMappingURL=chunk-6ee47cbe.3a207d3e.js.map

platypush/backend/http/webapp/dist/static/js/chunk-6ee47cbe.3a207d3e.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///./src/components/elements/Slider.vue?8b04","webpack:///./src/components/elements/Slider.vue","webpack:///./src/components/elements/Slider.vue?7dba"],"names":["class","type","min","range","max","value","disabled","$emit","$event","withLabel","name","emits","props","Number","Boolean","default","Array","render","__scopeId"],"mappings":"yIAAA,W,yICCE,eAOQ,cANN,eAGqF,SAH9EA,MAAM,SAASC,KAAK,QAASC,IAAK,EAAAC,MAAK,GAAMC,IAAK,EAAAD,MAAK,GAAME,MAAO,EAAAA,MAAQC,SAAU,EAAAA,SACrF,SAAM,+BAAE,EAAAC,MAAK,QAAUC,KAAU,UAAO,+BAAE,EAAAD,MAAK,UAAYC,KAAU,QAAK,+BAAE,EAAAD,MAAK,QAAUC,KAC3F,YAAS,+BAAE,EAAAD,MAAK,YAAcC,KAAU,QAAK,+BAAE,EAAAD,MAAK,QAAUC,KAC9D,aAAU,+BAAE,EAAAD,MAAK,YAAcC,KAAU,WAAQ,+BAAE,EAAAD,MAAK,UAAYC,M,0CAElD,EAAAC,W,iBAA1B,eAAsD,Q,MAAhDT,MAAM,Q,YAAyB,eAAc,EAAD,Q,oDAKvC,G,UAAA,CACbU,KAAM,SACNC,MAAO,CAAC,QAAS,UAAW,aAC5BC,MAAO,CACLP,MAAO,CACLJ,KAAMY,QAGRP,SAAU,CACRL,KAAMa,QACNC,SAAS,GAGXZ,MAAO,CACLF,KAAMe,MACND,QAAS,iBAAM,CAAC,EAAG,OAGrBN,UAAW,CACTR,KAAMa,QACNC,SAAS,M,UC3Bf,EAAOE,OAAS,EAChB,EAAOC,UAAY,kBAEJ","file":"static/js/chunk-6ee47cbe.3a207d3e.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Slider.vue?vue&type=style&index=0&id=1a18952e&lang=scss&scoped=true\"","<template>\n  <label>\n    <input class=\"slider\" type=\"range\" :min=\"range[0]\" :max=\"range[1]\" :value=\"value\" :disabled=\"disabled\"\n           @change=\"$emit('input', $event)\" @mouseup=\"$emit('mouseup', $event)\" @input=\"$emit('input', $event)\"\n           @mousedown=\"$emit('mousedown', $event)\" @touch=\"$emit('input', $event)\"\n           @touchstart=\"$emit('mousedown', $event)\" @touchend=\"$emit('mouseup', $event)\">\n\n    <span class=\"label\" v-if=\"withLabel\" v-text=\"value\" />\n  </label>\n</template>\n\n<script>\nexport default {\n  name: \"Slider\",\n  emits: ['input', 'mouseup', 'mousedown'],\n  props: {\n    value: {\n      type: Number,\n    },\n\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    range: {\n      type: Array,\n      default: () => [0, 100],\n    },\n\n    withLabel: {\n      type: Boolean,\n      default: false,\n    }\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.slider {\n  @include appearance(none);\n  @include transition(opacity .2s);\n  width: 100%;\n  height: 1em;\n  border-radius: 0.33em;\n  background: $slider-bg;\n  outline: none;\n\n  @mixin slider-thumb {\n    @include appearance(none);\n    width: 1.5em;\n    height: 1.5em;\n    border-radius: 50%;\n    border: 0;\n    background: $slider-thumb-bg;\n    cursor: pointer;\n  }\n\n  &::-webkit-slider-thumb { @include slider-thumb; }\n  &::-moz-range-thumb { @include slider-thumb; }\n  &::-moz-range-track { @include appearance(none); }\n\n  &::-webkit-progress-value,\n  &::-moz-range-progress {\n    background: $slider-progress-bg;\n    height: 1em;\n  }\n\n  &[disabled] {\n    &::-webkit-progress-value,\n    &::-moz-range-progress {\n      opacity: .5;\n    }\n\n    &::-webkit-slider-thumb,\n    &::-moz-range-thumb {\n      opacity: .4;\n    }\n  }\n}\n\nlabel {\n  position: relative;\n  .label {\n    font-weight: normal;\n    text-align: center;\n  }\n}\n</style>\n","import { render } from \"./Slider.vue?vue&type=template&id=1a18952e&scoped=true\"\nimport script from \"./Slider.vue?vue&type=script&lang=js\"\nexport * from \"./Slider.vue?vue&type=script&lang=js\"\n\nimport \"./Slider.vue?vue&type=style&index=0&id=1a18952e&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-1a18952e\"\n\nexport default script"],"sourceRoot":""}

platypush/backend/http/webapp/src/components/widgets/Widget.vue

@@ -25,7 +25,7 @@ export default {
 
   computed: {
     classes() {
-      return (this.class && this.class.length ? this.class.split(' ') : ['col-3']).concat(['widget', 'column'])
+      return (this.class?.length ? this.class.split(' ') : ['col-3']).concat(['widget', 'column'])
     },
   },
 }

platypush/backend/http/webapp/src/views/Dashboard.vue

@@ -5,7 +5,7 @@
     <Row v-for="(row, i) in rows" :key="i" :class="row.class" :style="row.style">
       <keep-alive v-for="(widget, j) in row.widgets" :key="j">
         <Widget :style="widget.style" :class="widget.class">
-          <component :is="widget.component" v-bind="widget.props" />
+          <component :is="widget.component" v-bind="getWidgetProps(widget)" />
         </Widget>
       </keep-alive>
     </Row>
@@ -48,6 +48,14 @@ export default {
   },
 
   methods: {
+    getWidgetProps(widget) {
+      const props = {...widget.props}
+      if (props.class)
+        delete props.class
+
+      return props
+    },
+
     parseTemplate(name, tmpl) {
       const node = new DOMParser().parseFromString(tmpl, 'text/xml').childNodes[0]
       const self = this