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

This commit is contained in:
Fabio Manganiello 2021-03-18 01:30:29 +01:00
parent 3ce98305f0
commit 1355f7a3f6
63 changed files with 56 additions and 48 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

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

View file

@ -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":""}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -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'])
},
},
}

View file

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