@abi-software/simulationvuer 0.7.0-vue-3-alpha.4 → 1.0.0

package/src/components/SimulationVuerInput.vue

@@ -1,140 +1,146 @@
-<template>
-  <div v-show="visible">
-    <p :class="labelClasses">{{ name }}</p>
-    <el-select class="discrete" popper-class="discrete-popper" size="small" v-if="isDiscrete" v-model="vModel" :teleport=false @change="updateUi()">
-      <el-option v-for="possibleValue in possibleValues" :key="possibleValue.value" :label="possibleValue.name" :value="possibleValue.value" />
-    </el-select>
-    <div class="sliders-and-fields" v-if="!isDiscrete">
-      <el-slider v-model="vModel" :max="maximumValue" :min="minimumValue" :show-input="false" :show-tooltip="false" :step="stepValue" @change="updateUi()" />
-      <el-input-number class="scalar" size="small" v-model="vModel" :controls="false" :max="maximumValue" :min="minimumValue" :step="stepValue" :step-strictly="true" @input="updateUi()" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { ElInputNumber, ElOption, ElSelect, ElSlider } from "element-plus";
-import { updateUi } from "./ui.js";
-
-export default {
-  name: "SimulationVuerInput",
-  components: {
-    ElInputNumber,
-    ElOption,
-    ElSelect,
-    ElSlider,
-  },
-  props: {
-    defaultValue: {
-      required: true,
-      type: Number,
-    },
-    maximumValue: {
-      type: Number,
-    },
-    minimumValue: {
-      type: Number,
-    },
-    name: {
-      required: true,
-      type: String,
-    },
-    possibleValues: {
-      type: Array,
-    },
-    stepValue: {
-      type: Number,
-    },
-  },
-  data: function() {
-    return {
-      isDiscrete: this.possibleValues !== undefined,
-      labelClasses: "default " + ((this.possibleValues !== undefined)?"discrete":"scalar"),
-      visible: true,
-      vModel: this.defaultValue,
-    };
-  },
-  methods: {
-    updateUi: function() {
-      updateUi(this.$parent);
-    },
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-
-:deep( .el-input-number.scalar ){
-  margin-top: -8px;
-  width: 0;
-}
-:deep( .el-input-number.scalar .el-input ){
-  width: 60px;
-}
-:deep( .el-input-number.scalar .el-input__inner:focus ){
-  border-color: #8300bf;
-}
-:deep( .el-select.discrete ){
-  margin-bottom: 16px;
-}
-:deep( .el-slider ){
-  width: 108px;
-  margin-top: -12px;
-  margin-left: 8px;
-}
-:deep( .el-slider__bar ){
-  background-color: #8300bf;
-}
-:deep( .el-slider__button ){
-  border-color: #8300bf;
-}
-.discrete {
-  margin-left: 8px;
-}
-.discrete {
-  :deep( .el-input__inner ){
-    font-family: Asap, sans-serif;
-    font-size: 16px;
-  }
-}
-.discrete :deep( .el-input__inner:focus),
-.discrete :deep( .el-input.is-focus .el-input__inner) {
-  border-color: #8300bf;
-}
-.discrete-popper .el-select-dropdown__item {
-  font-family: Asap, sans-serif;
-}
-.discrete-popper .el-select-dropdown__item.selected {
-  font-weight: normal;
-  color: #8300bf;
-}
-.scalar :deep( .el-input__inner ){
-  text-align: center;
-}
-div.simulation-vuer {
-  height: 100%;
-}
-div.sliders-and-fields {
-  display: grid;
-  grid-template-columns: 132px auto;
-  width: 191px;
-  height: 26px;
-  margin-bottom: 4px;
-}
-p.default {
-  font-family: Asap, sans-serif;
-  letter-spacing: 0;
-  margin: 16px 0;
-  text-align: start;
-}
-p.discrete {
-  margin-top: 0;
-  margin-bottom: 4px;
-}
-p.scalar {
-  grid-column-start: 1;
-  grid-column-end: 3;
-  margin-bottom: 8px;
-  margin-top: 0;
-}
-</style>
+<template>
+  <div v-show="visible">
+    <p :class="labelClasses">{{ name }}</p>
+    <el-select class="discrete" popper-class="discrete-popper" size="small" v-if="isDiscrete" v-model="vModel" :teleported=false @change="updateUi()">
+      <el-option v-for="possibleValue in possibleValues" :key="possibleValue.value" :label="possibleValue.name" :value="possibleValue.value" />
+    </el-select>
+    <div class="sliders-and-fields" v-if="!isDiscrete">
+      <el-slider v-model="vModel" :max="maximumValue" :min="minimumValue" :show-input="false" :show-tooltip="false" :step="stepValue" @change="updateUi()" />
+      <el-input-number class="scalar" size="small" v-model="vModel" :controls="false" :max="maximumValue" :min="minimumValue" :step="stepValue" :step-strictly="true" @input="updateUi()" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ElInputNumber, ElOption, ElSelect, ElSlider } from "element-plus";
+import { updateUi } from "./ui.js";
+
+export default {
+  name: "SimulationVuerInput",
+  components: {
+    ElInputNumber,
+    ElOption,
+    ElSelect,
+    ElSlider,
+  },
+  props: {
+    defaultValue: {
+      required: true,
+      type: Number,
+    },
+    maximumValue: {
+      type: Number,
+    },
+    minimumValue: {
+      type: Number,
+    },
+    name: {
+      required: true,
+      type: String,
+    },
+    possibleValues: {
+      type: Array,
+    },
+    stepValue: {
+      type: Number,
+    },
+  },
+  data: function() {
+    return {
+      isDiscrete: this.possibleValues !== undefined,
+      labelClasses: "default " + ((this.possibleValues !== undefined)?"discrete":"scalar"),
+      visible: true,
+      vModel: this.defaultValue,
+    };
+  },
+  methods: {
+    updateUi: function() {
+      updateUi(this.$parent);
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+:deep( .el-input-number.scalar ){
+  margin-top: -8px;
+  width: 45px;
+}
+:deep( .el-input-number.scalar .el-input ){
+  width: 60px;
+}
+:deep( .el-input-number.scalar .el-input__inner:focus ){
+  border-color: #8300bf;
+}
+:deep( .el-select.discrete ){
+  margin-bottom: 16px;
+}
+:deep( .el-slider ){
+  width: 108px;
+  margin-top: -12px;
+  margin-left: 8px;
+}
+:deep( .el-slider__bar ){
+  background-color: #8300bf;
+}
+:deep( .el-slider__button ){
+  border-color: #8300bf;
+}
+.discrete {
+  margin-left: 8px;
+  width: 160px;
+}
+.discrete {
+  :deep( .el-input__inner ){
+    font-family: Asap, sans-serif;
+    font-size: 16px;
+  }
+}
+.discrete :deep( .el-input__inner:focus),
+.discrete :deep( .el-input.is-focus .el-input__inner) {
+  border-color: #8300bf;
+}
+.discrete-popper .el-select-dropdown__item {
+  font-family: Asap, sans-serif;
+}
+.discrete-popper .el-select-dropdown__item.is-selected {
+  font-weight: normal;
+  color: #8300bf;
+}
+.scalar :deep( .el-input__inner ){
+  text-align: center;
+}
+
+.scalar :deep(.el-input__wrapper){
+  padding-left: 4px;
+  padding-right: 4px;
+}
+div.simulation-vuer {
+  height: 100%;
+}
+div.sliders-and-fields {
+  display: grid;
+  grid-template-columns: 132px auto;
+  width: 191px;
+  height: 26px;
+  margin-bottom: 4px;
+}
+p.default {
+  font-family: Asap, sans-serif;
+  letter-spacing: 0;
+  margin: 16px 0;
+  text-align: start;
+}
+p.discrete {
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+p.scalar {
+  grid-column-start: 1;
+  grid-column-end: 3;
+  margin-bottom: 8px;
+  margin-top: 0;
+}
+</style>

package/src/components/common.js

@@ -1,31 +1,31 @@
-export const OPENCOR_SOLVER_NAME = "simcore/services/comp/opencor";
-
-function doEvaluateValue(value, from, to) {
-  if (from !== undefined) {
-    let re = new RegExp(`\\b${ from }\\b`, 'g');
-
-    value = value.replace(re, to);
-  }
-
-  return value;
-}
-
-export function evaluateValue(parent, value) {
-  let index = -1;
-
-  parent.simulationUiInfo.input.forEach((input) => {
-    ++index;
-
-    value = doEvaluateValue(value, input.id, parent.$refs.simInput[index].vModel);
-  });
-
-  return Function("return " + value + ";")();
-}
-
-export function evaluateSimulationValue(parent, results, value, i) {
-  parent.simulationUiInfo.output.data.forEach((data) => {
-    value = doEvaluateValue(value, data.id, results[parent.simulationDataId[data.id]][i]);
-  });
-
-  return Function("return " + value + ";")();
-}
+export const OPENCOR_SOLVER_NAME = "simcore/services/comp/opencor";
+
+function doEvaluateValue(value, from, to) {
+  if (from !== undefined) {
+    let re = new RegExp(`\\b${ from }\\b`, 'g');
+
+    value = value.replace(re, to);
+  }
+
+  return value;
+}
+
+export function evaluateValue(parent, value) {
+  let index = -1;
+
+  parent.simulationUiInfo.input.forEach((input) => {
+    ++index;
+
+    value = doEvaluateValue(value, input.id, parent.$refs.simInput[index].vModel);
+  });
+
+  return Function("return " + value + ";")();
+}
+
+export function evaluateSimulationValue(parent, results, value, i) {
+  parent.simulationUiInfo.output.data.forEach((data) => {
+    value = doEvaluateValue(value, data.id, results[parent.simulationDataId[data.id]][i]);
+  });
+
+  return Function("return " + value + ";")();
+}

package/src/components/index.js

@@ -1,7 +1,7 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import SimulationVuer from './SimulationVuer.vue';
-
-export {
-    SimulationVuer
-};
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import SimulationVuer from './SimulationVuer.vue';
+
+export {
+    SimulationVuer
+};