@progress/kendo-vue-gauges 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/RadialGauge.js

@@ -0,0 +1,135 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { BaseGauge } from './BaseGauge.js';
+import { RadialGauge as KendoRadialGauge } from '@progress/kendo-charts';
+import { Group } from '@progress/kendo-drawing';
+import { getDefaultSlots } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var RadialGaugeVue2 = {
+  name: 'KendoRadialGauge',
+  props: {
+    dir: String,
+    renderAs: {
+      type: String,
+      default: 'svg',
+      validator: function validator(value) {
+        return ['svg', 'canvas'].includes(value);
+      }
+    },
+    gaugeConstructor: [Object, Function],
+    pointer: {
+      type: [Object, Array],
+      default: undefined
+    },
+    scale: {
+      type: Object,
+      default: undefined
+    },
+    transitions: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  mounted: function mounted() {
+    this._baseGauge = this.v3 ? this.baseGaugeRef : this.$refs.baseGauge;
+  },
+  updated: function updated() {
+    this._baseGauge = this.v3 ? this.baseGaugeRef : this.$refs.baseGauge;
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var defaultSlots = getDefaultSlots(this);
+    var _a = this.$props,
+        pointer = _a.pointer,
+        scale = _a.scale,
+        transitions = _a.transitions;
+    return (// @ts-ignore  function children
+      h(BaseGauge, {
+        transitions: transitions,
+        attrs: this.v3 ? undefined : {
+          transitions: transitions,
+          scale: scale,
+          pointer: pointer,
+          deriveOptionsFromParent: this.deriveOptionsFromParent,
+          gaugeConstructor: KendoRadialGauge,
+          getTarget: this.getTarget
+        },
+        scale: scale,
+        pointer: pointer,
+        deriveOptionsFromParent: this.deriveOptionsFromParent,
+        ref: this.v3 ? function (el) {
+          _this.baseGaugeRef = el;
+        } : 'baseGauge',
+        gaugeConstructor: KendoRadialGauge,
+        getTarget: this.getTarget,
+        "class": 'k-gauge'
+      }, this.v3 ? function () {
+        return [defaultSlots];
+      } : [defaultSlots])
+    );
+  },
+  methods: {
+    gaugeInstance: function gaugeInstance() {
+      if (this._baseGauge !== null) {
+        return this._baseGauge.gaugeInstance;
+      }
+
+      return null;
+    },
+    surface: function surface() {
+      if (this._baseGauge !== null) {
+        return this._baseGauge.surface;
+      }
+
+      return null;
+    },
+    element: function element() {
+      if (this._baseGauge !== null) {
+        return this._baseGauge.element;
+      }
+
+      return null;
+    },
+    exportVisual: function exportVisual(options) {
+      if (this.gaugeInstance() !== null) {
+        return Promise.resolve(this.gaugeInstance().exportVisual(options));
+      }
+
+      return Promise.resolve(new Group());
+    },
+    getTarget: function getTarget() {
+      return this;
+    },
+    deriveOptionsFromParent: function deriveOptionsFromParent(options) {
+      var _a = this.$props,
+          pointer = _a.pointer,
+          scale = _a.scale;
+      return Object.assign({}, options, {
+        pointer: pointer,
+        scale: scale
+      });
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var RadialGauge = RadialGaugeVue2;
+export { RadialGauge, RadialGaugeVue2 };

package/dist/esm/RadialGaugeProps.d.ts

@@ -0,0 +1,15 @@
+import { BaseGaugeProps } from './BaseGaugeProps';
+import { RadialPointer, RadialScale } from './types';
+/**
+ * Represents the props of the [Kendo UI for Vue RadialGauge component]({% slug overview_radialgauge_gauges %}).
+ */
+export interface RadialGaugeProps extends BaseGaugeProps {
+    /**
+     * The configuration of the pointers ([see example]({% slug multiplepointers_radialgauge %})).
+     */
+    pointer: RadialPointer | RadialPointer[];
+    /**
+     * The configuration of the scale.
+     */
+    scale?: RadialScale;
+}

package/dist/esm/RadialGaugeProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/additionalTypes.ts

@@ -0,0 +1,21 @@
+// @ts-ignore
+import { DefineComponent } from 'vue';
+// @ts-ignore
+import * as Vue from 'vue';
+
+/**
+ * @hidden
+ */
+// @ts-ignore
+type Vue2type = Vue.default;
+
+/**
+ * @hidden
+ */
+// @ts-ignore
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+/**
+ * @hidden
+ */
+// @ts-ignore
+export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };

package/dist/esm/main.d.ts

@@ -0,0 +1,10 @@
+import { ArcGauge, ArcGaugeVue2 } from './ArcGauge';
+import { ArcGaugeProps } from './ArcGaugeProps';
+import { CircularGauge, CircularGaugeVue2 } from './CircularGauge';
+import { CircularGaugeProps } from './CircularGaugeProps';
+import { LinearGauge, LinearGaugeVue2 } from './LinearGauge';
+import { LinearGaugeProps } from './LinearGaugeProps';
+import { RadialGauge, RadialGaugeVue2 } from './RadialGauge';
+import { RadialGaugeProps } from './RadialGaugeProps';
+export * from './types';
+export { ArcGauge, ArcGaugeVue2, ArcGaugeProps, CircularGauge, CircularGaugeVue2, CircularGaugeProps, LinearGauge, LinearGaugeVue2, LinearGaugeProps, RadialGauge, RadialGaugeVue2, RadialGaugeProps };

package/dist/esm/main.js

@@ -0,0 +1,6 @@
+import { ArcGauge, ArcGaugeVue2 } from './ArcGauge.js';
+import { CircularGauge, CircularGaugeVue2 } from './CircularGauge.js';
+import { LinearGauge, LinearGaugeVue2 } from './LinearGauge.js';
+import { RadialGauge, RadialGaugeVue2 } from './RadialGauge.js';
+export * from './types.js';
+export { ArcGauge, ArcGaugeVue2, CircularGauge, CircularGaugeVue2, LinearGauge, LinearGaugeVue2, RadialGauge, RadialGaugeVue2 };

package/dist/esm/package-metadata.d.ts

@@ -0,0 +1,5 @@
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;

package/dist/esm/package-metadata.js

@@ -0,0 +1,11 @@
+/**
+ * @hidden
+ */
+export var packageMetadata = {
+    name: '@progress/kendo-vue-gauges',
+    productName: 'Kendo UI for Vue',
+    productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
+    publishDate: 1660543472,
+    version: '',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
+};

package/dist/esm/package.json

@@ -0,0 +1,3 @@
+{
+                    "type": "module"
+                 }

package/dist/esm/store/reducer.d.ts

@@ -0,0 +1,14 @@
+import { StoreAction } from './store';
+/**
+ * @hidden
+ */
+declare const optionsReducer: (currentState: any, action: StoreAction) => object;
+/**
+ * @hidden
+ */
+declare const themeReducer: (currentState: any, action: StoreAction) => any;
+/**
+ * @hidden
+ */
+declare const observersReducer: (currentState: any, action: StoreAction) => any;
+export { optionsReducer, themeReducer, observersReducer };

package/dist/esm/store/reducer.js

@@ -0,0 +1,102 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+/**
+ * @hidden
+ */
+var optionsReducer = function (currentState, action) {
+    if (action.gaugeCollectionIdxKey) {
+        return reducers.collectionConfigurationItem(currentState, action);
+    }
+    else if (action.gaugeKey) {
+        return reducers.configurationItem(currentState, action);
+    }
+    else {
+        return {};
+    }
+};
+/**
+ * @hidden
+ */
+var themeReducer = function (currentState, action) {
+    if (action.type) {
+        switch (action.type) {
+            case 'set':
+                return reducers.themeItem(currentState, action);
+            case 'push':
+                return Object.assign(currentState, action.payload);
+            default:
+                return currentState;
+        }
+    }
+    else {
+        return {};
+    }
+};
+/**
+ * @hidden
+ */
+var observersReducer = function (currentState, action) {
+    if (action.type) {
+        switch (action.type) {
+            case 'add':
+                return __spreadArray(__spreadArray([], currentState, true), [action.payload], false);
+            case 'remove':
+                return currentState.filter(function (element) { return element !== action.payload; });
+            default:
+                return currentState;
+        }
+    }
+    else {
+        return [];
+    }
+};
+/**
+ * @hidden
+ */
+var reducers = {
+    configurationItem: function (currentState, action) {
+        var _a;
+        return Object.assign(currentState, (_a = {},
+            _a[action.gaugeKey] = action.payload,
+            _a));
+    },
+    collectionConfigurationItem: function (currentState, action) {
+        var _a;
+        var inCollection = false;
+        var _b = action.gaugeCollectionIdxKey.split('_'), collectionName = _b[0], collectionIdx = _b[1];
+        var collection = currentState[collectionName].map(function (item, index) {
+            if (parseInt(collectionIdx, 10) === index) {
+                inCollection = true;
+                return action.payload;
+            }
+            return item;
+        });
+        if (inCollection === false) {
+            collection.splice(parseInt(collectionIdx, 10), 0, action.payload);
+        }
+        return Object.assign(currentState, (_a = {},
+            _a[collectionName] = collection,
+            _a));
+    },
+    themeItem: function (currentState, action) {
+        var store = {};
+        var nextStore = Object.assign(store, currentState);
+        var _a = action.payload, field = _a.field, value = _a.value;
+        var parts = field.split('.');
+        var key = parts.shift();
+        while (parts.length > 0) {
+            store = store[key] = store[key] || {};
+            key = parts.shift();
+        }
+        store[key] = value;
+        return nextStore;
+    }
+};
+export { optionsReducer, themeReducer, observersReducer };

package/dist/esm/store/store.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @hidden
+ */
+export declare const THROTTLE_MS: number;
+/**
+ * @hidden
+ */
+export interface StoreAction {
+    gaugeKey?: string;
+    gaugeCollectionIdxKey?: string;
+    type?: string;
+    payload: any;
+}
+/**
+ * @hidden
+ */
+export interface Store {
+    getState(): any;
+    dispatch(action: StoreAction | object): void;
+    subscribe(f: Function): Function;
+}
+/**
+ * @hidden
+ */
+declare const createStore: (reducer: any) => Store;
+export default createStore;

package/dist/esm/store/store.js

@@ -0,0 +1,28 @@
+import { canUseDOM } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+export var THROTTLE_MS = 1000 / 60;
+/**
+ * @hidden
+ */
+var createStore = function (reducer) {
+    var state;
+    var timerId;
+    var listeners = [];
+    var getState = function () { return state; };
+    var dispatch = function (action) {
+        state = reducer(state, action);
+        if (canUseDOM) {
+            window.clearTimeout(timerId);
+            timerId = window.setTimeout(function () { return listeners.forEach(function (l) { return l(); }); }, THROTTLE_MS);
+        }
+    };
+    var subscribe = function (listener) {
+        listeners.push(listener);
+        return function () { return listeners = listeners.filter(function (l) { return l !== listener; }); };
+    };
+    dispatch({});
+    return { getState: getState, dispatch: dispatch, subscribe: subscribe };
+};
+export default createStore;

package/dist/esm/theming/theme-service.d.ts

@@ -0,0 +1,6 @@
+import { Store } from './../store/store';
+/**
+ * @hidden
+ */
+declare const loadTheme: (store: Store, done: any) => void;
+export { loadTheme };

package/dist/esm/theming/theme-service.js

@@ -0,0 +1,53 @@
+import { chartBaseTheme } from '@progress/kendo-charts';
+var template = "\n    <div class=\"k-var--gauge-pointer\"></div>\n    <div class=\"k-var--gauge-track\"></div>\n    <div class=\"k-var--normal-text-color\"></div>\n";
+/**
+ * @hidden
+ */
+var ThemeService = /** @class */ (function () {
+    function ThemeService(store) {
+        this.store = store;
+    }
+    ThemeService.prototype.setStyle = function (field, value) {
+        this.store.dispatch({ type: 'set', payload: { field: field, value: value } });
+    };
+    ThemeService.prototype.setColors = function () {
+        this.mapColor('pointer.color', 'gauge-pointer');
+        this.mapColor('scale.rangePlaceholderColor', 'gauge-track');
+        this.mapColor('scale.labels.color', 'normal-text-color');
+        this.mapColor('scale.minorTicks.color', 'normal-text-color');
+        this.mapColor('scale.majorTicks.color', 'normal-text-color');
+        this.mapColor('scale.line.color', 'normal-text-color');
+    };
+    ThemeService.prototype.mapColor = function (key, varName) {
+        this.setStyle(key, this.queryStyle(varName).backgroundColor);
+    };
+    ThemeService.prototype.queryStyle = function (varName) {
+        var element = this.element;
+        return window.getComputedStyle(element === null || element === void 0 ? void 0 : element.querySelector(".k-var--".concat(varName)));
+    };
+    return ThemeService;
+}());
+/**
+ * @hidden
+ */
+var loadTheme = function (store, done) {
+    var service = new ThemeService(store);
+    if (typeof document === 'undefined') {
+        store.dispatch({ type: 'push', payload: chartBaseTheme() });
+        return;
+    }
+    var container = service.element = document.createElement('div');
+    container.style.display = 'none';
+    container.innerHTML = template;
+    document.body.appendChild(container);
+    try {
+        store.dispatch({ type: 'push', payload: chartBaseTheme() });
+        service.setColors();
+    }
+    finally {
+        document.body.removeChild(service.element);
+        delete service.element;
+        done();
+    }
+};
+export { loadTheme };

package/dist/esm/types/arc-scale.interface.d.ts

@@ -0,0 +1,28 @@
+import { RadialLabels } from './radial-labels.interface';
+import { Scale } from './scale.interface';
+import { LineCap } from './line-cap';
+/**
+ * The scale options of the Gauge.
+ */
+export interface ArcScale extends Scale {
+    /**
+     * Configures the scale labels.
+     */
+    labels?: RadialLabels;
+    /**
+     * The distance between the range indicators and the ticks.
+     */
+    rangeDistance?: number;
+    /**
+     * The `lineCap` style of the ranges.
+     */
+    rangeLineCap?: LineCap;
+    /**
+     * The starting angle of the Gauge. The Gauge is rendered clockwise (0 degrees equal 180 degrees in the polar coordinate system).
+     */
+    startAngle?: number;
+    /**
+     * The ending angle of the Gauge. The Gauge is rendered clockwise (0 degrees equals 180 degrees in the polar coordinate system).
+     */
+    endAngle?: number;
+}

package/dist/esm/types/arc-scale.interface.js

@@ -0,0 +1,2 @@
+export {};
+// tslint:enable:max-line-length

package/dist/esm/types/border.interface.d.ts

@@ -0,0 +1,18 @@
+import { DashType } from './dash-type.interface';
+/**
+ * The appearance settings for the border lines.
+ */
+export interface Border {
+    /**
+     * The color of the border line. Accepts valid CSS color strings, including hex and rgb.
+     */
+    color?: string;
+    /**
+     * The dash type of the border line.
+     */
+    dashType?: DashType;
+    /**
+     * The width of the border line in pixels.
+     */
+    width?: number;
+}

package/dist/esm/types/border.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/cap.interface.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The configuration options for the RadialGauge pointer cap.
+ */
+export interface Cap {
+    /**
+     * The color of the cap. Accepts valid CSS color strings, including hex and rgb.
+     */
+    color?: string;
+    /**
+     * The size of the cap in percent (from 0 to 1).
+     */
+    size?: number;
+}

package/dist/esm/types/cap.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/circular-scale.interface.d.ts

@@ -0,0 +1,10 @@
+import { ArcScale } from './arc-scale.interface';
+/**
+ * The scale options of the Gauge.
+ */
+export interface CircularScale extends ArcScale {
+    /**
+     * @hidden
+     */
+    endAngle?: number;
+}

package/dist/esm/types/circular-scale.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/color-range.interface.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The color range configuration.
+ */
+export interface ColorRange {
+    /**
+     * The color of the range. Accepts valid CSS color strings, including hex and rgb.
+     */
+    color?: string;
+    /**
+     * The opacity of the range.
+     */
+    opacity?: number;
+    /**
+     * The range start value.
+     */
+    from?: number;
+    /**
+     * The range end value.
+     */
+    to?: number;
+}

package/dist/esm/types/color-range.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/dash-type.interface.d.ts

@@ -0,0 +1,4 @@
+/**
+ * The dash type of a line.
+ */
+export declare type DashType = 'dash' | 'dashDot' | 'dot' | 'longDash' | 'longDashDot' | 'longDashDotDot' | 'solid';

package/dist/esm/types/dash-type.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/gauge-area.interface.d.ts

@@ -0,0 +1,27 @@
+import { Border } from './border.interface';
+import { Margin } from './margin.interface';
+/**
+ * The configuration options for the Gauge area. Represents the entire visible area of the Gauge.
+ */
+export interface GaugeArea {
+    /**
+     * The background of the Gauge area. Accepts valid CSS color strings, including hex and rgb.
+     */
+    background?: string;
+    /**
+     * The border of the Gauge area.
+     */
+    border?: Border;
+    /**
+     * The height of the Gauge area.
+     */
+    height?: number;
+    /**
+     * The margin of the Gauge area.
+     */
+    margin?: number | Margin;
+    /**
+     * The height of the Gauge area.
+     */
+    width?: number;
+}

package/dist/esm/types/gauge-area.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/labels.interface.d.ts

@@ -0,0 +1,47 @@
+import { Border } from './border.interface';
+import { Margin } from './margin.interface';
+import { Padding } from './padding.interface';
+/**
+ * The configuration of the scale labels.
+ */
+export interface Labels {
+    /**
+     * The background of the labels. Accepts valid CSS color strings, including hex and rgb.
+     */
+    background?: string;
+    /**
+     * The border of the labels.
+     */
+    border?: Border;
+    /**
+     * The color of the labels. Accepts valid CSS color strings, including hex and rgb.
+     */
+    color?: string;
+    /**
+     * The font of the labels.
+     */
+    font?: string;
+    /**
+     * The format that is used to display the labels. Uses the IntlService [`format`]({% slug api_intl_intlservice %}#toc-format) method.
+     */
+    format?: string;
+    /**
+     * The margin of the labels.
+     */
+    margin?: number | Margin;
+    /**
+     * The padding of the labels.
+     */
+    padding?: number | Padding;
+    /**
+     * The function which returns the label content.
+     *
+     * The available fields in the function argument are:
+     * - `value`—The value of the label.
+     */
+    content?: (e: any) => string;
+    /**
+     * The visibility of the labels.
+     */
+    visible?: boolean;
+}

package/dist/esm/types/labels.interface.js

@@ -0,0 +1,2 @@
+export {};
+// tslint:enable:max-line-length

package/dist/esm/types/line-cap.d.ts

@@ -0,0 +1,4 @@
+/**
+ * The cap style of a line.
+ */
+export declare type LineCap = 'butt' | 'round' | 'square';

package/dist/esm/types/line-cap.js

@@ -0,0 +1 @@
+export {};