powergrid-viewer 1.5.4

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "powergrid-viewer",
+  "version": "1.5.4",
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "lodash": "^4.17.19",
+    "regenerator-runtime": "^0.13.7",
+    "tslib": "^2.2.0",
+    "vue": "^2.6.11",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^8.4.2",
+    "powergrid-engine": "1.9.7"
+  },
+  "devDependencies": {
+    "@types/assert": "^1.4.7",
+    "@types/chai": "^4.2.11",
+    "@types/events": "^3.0.0",
+    "@types/lodash": "^4.14.154",
+    "@types/mocha": "^5.2.4",
+    "@typescript-eslint/parser": "^4.26.1",
+    "@vue/cli-plugin-babel": "~4.4.0",
+    "@vue/cli-plugin-typescript": "~4.4.0",
+    "@vue/cli-plugin-unit-mocha": "~4.4.0",
+    "@vue/cli-service": "~4.4.0",
+    "@vue/test-utils": "^1.0.3",
+    "chai": "^4.1.2",
+    "eslint": "^7.28.0",
+    "eslint-plugin-vue": "^7.11.0",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "typescript": "^4.3.5",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "files": [
+    "src",
+    "dist/powergrid-viewer.umd.min.js",
+    "dist/powergrid-viewer.css",
+    "dist/img",
+    "dist/media",
+    "tsconfig.json",
+    "public/audio"
+  ],
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "package": "vue-cli-service build --target lib --name powergrid-viewer src/wrapper.ts"
+  }
+}

package/src/components/Calculator.vue

@@ -0,0 +1,62 @@
+<template>
+    <g class="calculator">
+        <rect width="125" height="50" rx="4" />
+        <rect x="10" y="10" width="30" height="30" fill="lime" rx="2" />
+        <text class="visor" x="25" y="25" fill="black" text-anchor="middle">{{ value }}</text>
+        <g :style="value < maxValue ? 'cursor: pointer' : ''" @click="add()">
+            <rect x="48" y="7" width="24" height="15" fill="gray" stroke="gray" rx="2" />
+            <path d="M52,17 l8,-6 l8,6" fill="none" stroke="white" stroke-width="3" />
+        </g>
+        <g :style="value > minValue ? 'cursor: pointer' : ''" @click="sub()">
+            <rect x="48" y="28" width="24" height="15" fill="gray" stroke="gray" rx="2" />
+            <path d="M52,32 l8,6 l8,-6" fill="none" stroke="white" stroke-width="3" />
+        </g>
+        <g style="cursor: pointer" @click="bid()">
+            <rect class="button" x="80" y="7" width="36" height="36" fill="gray" rx="2" />
+            <text x="97" y="25" fill="white" text-anchor="middle">OK</text>
+        </g>
+    </g>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component({
+    created(this: Calculator) {
+        this.value = this.minValue;
+    }
+})
+export default class Calculator extends Vue {
+    @Prop()
+    minValue;
+
+    @Prop()
+    maxValue;
+
+    value: number = 0;
+
+    add() {
+        this.value = Math.min(this.maxValue, this.value + 1);
+    }
+
+    sub() {
+        this.value = Math.max(this.minValue, this.value - 1);
+    }
+
+    bid() {
+        this.$emit('bid', this.value);
+    }
+}
+</script>
+<style lang="scss">
+.calculator {
+    fill: #333;
+
+    .button {
+        cursor: pointer;
+    }
+
+    .visor {
+        font-family: 'system-ui';
+    }
+}
+</style>