@progress/kendo-vue-gauges
Version:
141 lines (140 loc) • 4.52 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as u, createVNode as d, inject as g } from "vue";
import { provideIntlService as l } from "@progress/kendo-vue-intl";
import { loadTheme as p } from "./theming/theme-service.mjs";
import f from "./store/store.mjs";
import { themeReducer as m } from "./store/reducer.mjs";
import { canUseDOM as v, getDefaultSlots as S, validatePackage as O } from "@progress/kendo-vue-common";
import { packageMetadata as I } from "./package-metadata.mjs";
const F = /* @__PURE__ */ u({
name: "KendoBaseGauge",
props: {
dir: String,
renderAs: {
type: String,
default: "svg",
validator: function(e) {
return ["svg", "canvas"].includes(e);
}
},
scale: Object,
value: Number,
pointer: {
type: [Object, Array],
default: function() {
}
},
gaugeConstructor: [Object, Function],
deriveOptionsFromParent: Function,
transitions: {
type: Boolean,
default: void 0
},
getTarget: Function,
onRender: Function
},
created() {
O(I), this.gaugeInstance = null, this.themeStore = {}, this._prevRenderAs = this.renderAs, this._prevDir = this.dir, this._prevScale = this.scale, this.themeStore = f(m);
},
mounted() {
p(this.themeStore, this.instantiateCoreGauge.bind(this), this.$el), this.themeUnsubscriber = this.themeStore.subscribe(this.refresh.bind(this)), window.addEventListener("resize", this.onWindowResize);
},
watch: {
dir: function(e, t) {
this._prevDir = t;
},
renderAs: function(e, t) {
this._prevRenderAs = t;
},
scale: function(e, t) {
this._prevScale = t;
}
},
updated() {
const {
dir: e,
getTarget: t,
gaugeConstructor: i,
className: s,
renderAs: o,
scale: h,
...r
} = this.$props;
if (this.gaugeInstance !== null) {
const a = this._prevDir !== e || this._prevRenderAs !== o || this._prevScale !== h, n = r;
a || this.gaugeInstance.noTransitionsRedraw(), a || (o || "svg") !== (this._prevRenderAs || "svg") ? this.refresh() : Object.keys(r).indexOf("pointer") > -1 && r.pointer ? Array.isArray(n.pointer) ? this.refreshAllValues(n.pointer.map((c) => c.value)) : this.refreshValue((n.pointer || {}).value) : this.refreshValue(n.value), this._prevDir !== e && this.gaugeInstance.setDirection(this.getDirection(e)), this.$emit("render", {
sender: this
});
}
},
destroyed() {
this.themeUnsubscriber(), this.gaugeInstance !== null && (this.gaugeInstance.destroy(), this.gaugeInstance = null), window.removeEventListener("resize", this.onWindowResize);
},
setup: function() {
return {
kendoIntlService: g("kendoIntlService", {})
};
},
render() {
const e = S(this), t = Object.assign({}, {
position: "relative"
});
return this._intl = l(this), d("div", {
style: t
}, [e]);
},
methods: {
instantiateCoreGauge() {
const {
dir: e,
gaugeConstructor: t
} = this.$props, i = this.getGaugeOptions();
this.gaugeInstance = new t(this.$el, i, this.themeStore.getState(), {
rtl: this.getDirection(e),
intlService: this._intl,
sender: this
});
},
refresh() {
if (this.gaugeInstance !== null) {
const e = this.themeStore.getState(), t = this.getGaugeOptions();
this.gaugeInstance.setOptions(t, e);
}
},
refreshValue(e) {
this.gaugeInstance.value(e);
},
refreshAllValues(e) {
this.gaugeInstance.allValues(e);
},
getDirection(e) {
return (e !== void 0 ? e : v && window.getComputedStyle(this.$el).direction || "ltr") === "rtl";
},
getGaugeOptions() {
const {
renderAs: e,
transitions: t,
deriveOptionsFromParent: i
} = this.$props;
let s = Object.assign({
renderAs: e,
transitions: t
});
return i && (s = i(s)), s;
},
onWindowResize() {
this.gaugeInstance !== null && (this.gaugeInstance.resize(), this.$emit("render", {
sender: this
}));
}
}
});
export {
F as BaseGauge
};