glib-web 4.27.3 → 4.28.0

package/actions/sheets/open.js

@@ -1,3 +1,4 @@
+import { strandom } from "../../components/helper";
 import { vueApp } from "../../store";
 import http from "../../utils/http";
 
@@ -12,7 +13,7 @@ export default class {
       component,
       (response) => {
         vueApp.sheet = {
-          spec: response.body,
+          spec: Object.assign({}, response.body, { key: strandom() }),
           show: true,
           placement
         };

package/app.vue

@@ -32,7 +32,7 @@
     <Transition name="slide-fade">
       <v-sheet v-if="vueApp.sheet.show" position="fixed" :class="`views-sheet ${vueApp.sheet.placement}`">
         <glib-component v-for="(rbSpec, index) in vueApp.sheet.spec.childViews" :spec="rbSpec"
-          :key="index"></glib-component>
+          :key="`${vueApp.sheet.spec.key}-${index}`"></glib-component>
       </v-sheet>
     </Transition>
     <div class="glib-bottomBanner">

package/components/charts/series.js

@@ -1,7 +1,7 @@
 import { Chart, Colors } from "chart.js";
 import chartDataLabels from 'chartjs-plugin-datalabels';
 import doughnutLabel from 'chartjs-plugin-doughnutlabel-v3';
-import { Vue, vueApp } from "../..";
+import { settings, Vue, vueApp } from "../..";
 import { computePosition, flip, offset } from '@floating-ui/dom';
 
 import 'chartkick/chart.js';
@@ -12,6 +12,8 @@ Chart.register(chartDataLabels);
 Chart.register(doughnutLabel);
 Chart.register(Colors);
 
+if (settings.chartPlugin.htmlLegendPlugin) Chart.register(settings.chartPlugin.htmlLegendPlugin);
+
 import VueChartkick from 'vue-chartkick';
 import { computed } from "vue";
 Vue.use(VueChartkick);
@@ -186,6 +188,14 @@ function useChart({ dataSeries, spec, multiple = true }) {
         };
     }
 
+    if (legend.override) {
+        options.plugins.htmlLegend = {
+            display: true
+        };
+        options.plugins.legend = {
+            display: false
+        };
+    }
     return { series, colors, options };
 }
 

package/components/progressCircle.vue

@@ -1,17 +1,44 @@
 <template>
-  <v-progress-circular :class="$classes()" :rotate="spec.rotate || 0" :size="spec.size || 100" :width="spec.width || 20"
-    :color="spec.color" :model-value="spec.value" :indeterminate="spec.indeterminate">
-      <div>
+  <div ref="container" :class="containerClass" :style="containerStyle">
+    <v-progress-circular ref="progress" :class="$classes()" :rotate="rotate" :size="spec.size || 100"
+      :width="spec.width || 20" :color="spec.color" :model-value="model" :indeterminate="spec.indeterminate">
+      <div :style="middleTextStyle">
         <div class="value-style text-center">{{ spec.value }}%</div>
         <span v-if="spec.text" class="text-style">{{ spec.text }}</span>
       </div>
-  </v-progress-circular>
+    </v-progress-circular>
+  </div>
 </template>
 
 <script>
+import { onMounted, ref } from "vue";
+
 export default {
   props: {
     spec: { type: Object, required: true }
+  },
+  setup(props) {
+    const container = ref(null);
+    const progress = ref(null);
+    const model = ref(props.spec.half ? props.spec.value / 2 : props.spec.value);
+    const rotate = ref(props.spec.half ? 270 : 0);
+    const containerStyle = ref({ width: '100%', height: '100%' });
+    const middleTextStyle = ref({});
+    const containerClass = ref([]);
+
+    function getHeight() {
+      return parseInt(progress.value.$el.style.height.replace('px', ''));
+    }
+
+    onMounted(() => {
+      if (props.spec.half) {
+        middleTextStyle.value = { marginBottom: `${getHeight() / 3}px` };
+        containerStyle.value = { width: '100%', height: `${getHeight() / 2}px` };
+        containerClass.value = ['half-circle'];
+      }
+    });
+
+    return { container, containerClass, containerStyle, middleTextStyle, model, rotate, progress };
   }
 };
 </script>
@@ -28,4 +55,9 @@ export default {
   line-height: 150%;
   font-weight: 400;
 }
+
+.half-circle {
+  overflow-y: hidden;
+  position: relative;
+}
 </style>

package/components/progressbar.vue

@@ -1,4 +1,5 @@
 <template>
+
   <v-progress-linear :class="$classes()" :height="spec.height" :color="spec.color"
     :background-color="spec.backgroundColor" :disabled="true" :model-value="value_in_percentage"
     :striped="$classes().includes('striped')" :reverse="spec.reversed || false" :rounded="spec.rounded">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "4.27.3",
+  "version": "4.28.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/utils/settings.js

@@ -9,6 +9,7 @@ class MutableSettings {
       retries: 3,
       interval: 50
     };
+    this.chartPlugin = {};
     this.errorHandler = (err, message) => {
       console.error(message || err.message, err);
     };