glib-web 4.27.2 → 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/_internal_button.vue

@@ -1,11 +1,7 @@
 <template>
-  <!-- Use `click.prevent` to prevent bubbling when clicking a dropdown button that is
-         located in a list row that has href. -->
   <v-btn :type="type" :disabled="spec.disabled" :style="styles()" :class="$classes()" :href="$href()" :rel="$rel()"
     :variant="variant" :rounded="$classes().includes('rounded') || null" :density="density" :size="size" :color="color"
-    :active="$classesInclude('active')" :icon="$classes().includes('icon') ? $vuetify : null" @click.prevent="
-      type == 'submit' ? $dispatchEvent('forms/submit') : $onClick()
-      ">
+    :active="$classesInclude('active')" :icon="$classes().includes('icon') ? $vuetify : null" @click="onClick">
     <!-- <span v-if="spec.icon"><common-icon :spec="spec.icon || {}" /></span> -->
     <common-icon v-if="spec.icon" :spec="spec.icon || {}" />
     <div :class="hideTextOnXs && spec.icon ? 'd-none d-sm-flex' : null">
@@ -15,7 +11,6 @@
 </template>
 
 <script>
-import { nextTick } from "vue";
 import { determineColor, determineDensity, determineVariant, determineSize } from '../utils/constant';
 
 
@@ -42,6 +37,15 @@ export default {
     }
   },
   methods: {
+    onClick(e) {
+      if (this.type == 'submit') {
+        e.preventDefault(); // prevent get submitted twice
+        this.$dispatchEvent('forms/submit');
+      }
+      e.stopPropagation(); // prevent event bubbling
+
+      this.$onClick();
+    },
     // $ready() {
     //   this.$type.ifArray(this.spec.styleClasses, val => {
     //     this.linkStyling = val.includes("link");

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);
@@ -122,7 +124,24 @@ function useChart({ dataSeries, spec, multiple = true }) {
     let colors = undefined;
     if (spec.colors) colors = spec.colors;
 
-    const options = {};
+    let options = {}
+
+    if (spec.formatYAxis) {
+        options = {
+            scales: {
+                y: {
+                    ticks: {
+                        callback: function (value) {
+                            return `${spec.prefix || ''}${value.toLocaleString()}${spec.suffix || ''}`;
+                        }
+                    }
+                }
+            },
+            plugins: {}
+        };
+    }
+
+
     options.plugins = {};
     if (legend) options.plugins.legend = legend;
     if (isDonut) options.cutout = '75%';
@@ -169,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/fields/richText2.vue

@@ -153,19 +153,87 @@ export default defineComponent({
       ]
     };
     if (props.spec.mentionList) {
+      const simpleSource = (searchTerm, renderList, mentionChar) => {
+        const matches = props.spec.mentionList.toSorted().map((v, index) => ({ id: index + 1, value: v }));
+
+        if (searchTerm.length === 0) {
+          renderList(matches, searchTerm);
+        } else {
+          renderList(matches.filter((v) => v.value.toLowerCase().includes(searchTerm)), searchTerm);
+        }
+      };
+
+      const advancedSource = (searchTerm, renderList, mentionChar) => {
+
+        const compareFn = (a, b) => a.value > b.value;
+        const options = props.spec.mentionList.toSorted(compareFn);
+        const isGrouped = !!props.spec.mentionList[0].group;
+        let matches;
+
+        if (searchTerm.length === 0) {
+          matches = options;
+        } else {
+          matches = options.filter((v) => v.value.toLowerCase().includes(searchTerm));
+        }
+
+        if (isGrouped) {
+          const groupedMatches = Object.groupBy(matches, ({ group }) => group);
+          let tmpMatches = [];
+          Object.keys(groupedMatches).toSorted().forEach((group) => {
+            tmpMatches.push({ id: group, value: group, disabled: true });
+            groupedMatches[group].forEach((item) => {
+              tmpMatches.push(item);
+            });
+          });
+          matches = tmpMatches;
+        }
+
+        renderList(matches, searchTerm);
+      };
+
+      const source = typeof props.spec.mentionList[0] == 'object' ? advancedSource : simpleSource;
+
       Quill.register({ "blots/mention": MentionBlot, "modules/mention": Mention });
       modules.mention = {
         allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
         mentionDenotationChars: ["@"],
-        source: function (searchTerm, renderList, mentionChar) {
-          const values = props.spec.mentionList.map((v, index) => ({ id: index + 1, value: v }));
+        renderItem: (data) => {
+          if (data.disabled) {
+            const div = document.createElement("div");
+            div.classList.add('glib-quill-group');
+            div.innerText = data.value;
+            return div;
+          }
+          const div = document.createElement("div");
+          div.classList.add('glib-quill-item');
+
+          if (data.avatar) {
+            const img = document.createElement('img');
+            img.src = data.avatar;
+            img.classList.add('avatar');
+            div.appendChild(img);
+          }
 
-          if (searchTerm.length === 0) {
-            renderList(values, searchTerm);
-          } else {
-            renderList(values.filter((v) => v.value.toLowerCase().includes(searchTerm)), searchTerm);
+          const childDiv = document.createElement('div');
+          div.appendChild(childDiv);
+
+          if (data.text) {
+            const title = document.createElement('div');
+            title.style.lineHeight = '170%';
+            title.innerText = data.text;
+            childDiv.appendChild(title);
           }
-        }
+
+          const subtitle = document.createElement('div');
+          subtitle.innerText = data.value;
+          childDiv.appendChild(subtitle);
+
+          return div;
+        },
+        renderLoading: () => {
+          return "Loading...";
+        },
+        source: source
       };
     }
     onMounted(() => {
@@ -218,4 +286,36 @@ export default defineComponent({
 .ql-container {
   height: fit-content;
 }
+
+.glib-quill-group {
+  /* padding: 16px 0; */
+  color: #A7ADB5;
+  font-size: 12px;
+  height: 12px;
+  line-height: 12px;
+}
+
+.glib-quill-item {
+  padding: 8px 0;
+  display: flex;
+  gap: 12px;
+  flex-wrap: nowrap;
+  align-items: center;
+
+  .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: calc(infinity * 1px);
+  }
+
+  div {
+    font-size: 14px;
+    line-height: 100%;
+  }
+}
+
+.ql-mention-list-container {
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+}
 </style>

package/components/helper.js

@@ -30,4 +30,8 @@ function closest(component, name) {
   }
 }
 
-export { realComponent, htmlElement, closest };
+function strandom() {
+  return (Math.random() + 1).toString(36).substring(7) + Date.now().toString();
+}
+
+export { realComponent, htmlElement, closest, strandom };

package/components/mixins/events.js

@@ -88,7 +88,8 @@ export default {
             return `#${onClick.viewId}`;
         }
       }
-      return '';
+
+      return null;
     },
     $onClick: function (explicitEvent, spec) {
       const properties = spec || this.spec;

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/nav/dialog.vue

@@ -1,7 +1,7 @@
 <template>
   <v-dialog :class="spec.styleClass" :model-value="model" :width="spec.width || 600" :dark="false"
     :fullscreen="fullscreen" :sm-and-down="false" :persistent="true" @click:outside="clickOutside">
-    <v-card :style="hamburgerStyles" class="dialog-hamburger">
+    <v-card :style="hamburgerStyles" class="dialog-hamburger" :key="dialogKey">
 
       <panels-responsive v-if="header" :spec="header" />
       <div :class="`dialog-title  ${title ? '' : 'dialog-absolute'}`">
@@ -46,6 +46,7 @@ import FormPanel from "../components/panels/form.vue";
 import { confirmDirty, dialogs } from "../store";
 import { onMounted, ref } from "vue";
 import { usePasteable } from "../components/composable/pasteable";
+import { strandom } from "../components/helper.js";
 
 export default {
   expose: ['model', 'close', 'isFormDirty'],
@@ -84,7 +85,8 @@ export default {
       url: null,
       urlLoaded: false,
       isMobile: false,
-      formSpec: null
+      formSpec: null,
+      dialogKey: 'init',
     };
   },
   computed: {
@@ -157,6 +159,7 @@ export default {
       this.url = newSpec.url;
       this.urlLoaded = false;
       this.show(true);
+      this.dialogKey = strandom();
     },
     onResize() {
       this.isMobile = window.innerWidth < 600;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "4.27.2",
+  "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);
     };