glib-web 4.27.0 → 4.27.3

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

@@ -122,7 +122,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%';

package/components/fields/_buttonDate.vue

@@ -18,10 +18,11 @@
     <v-input :name="fieldName" :rules="$validation()" v-model="model" />
 
     <v-dialog v-model="dialog" width="auto">
-      <v-date-picker :model-value="new Date(model)" @update:modelValue="handleDatePickerChanged"
+      <v-date-picker :model-value="model ? new Date(model) : null" @update:modelValue="handleDatePickerChanged"
         :disabled="inputDisabled" :min="sanitizeValue(spec.min)" :max="sanitizeValue(spec.max)" show-adjacent-months
         location="center" position="fixed">
         <template v-slot:actions>
+          <v-btn color="error" @click="remove">Remove</v-btn>
           <v-btn color="primary" @click="dialog = false">Save</v-btn>
         </template>
       </v-date-picker>
@@ -69,6 +70,11 @@ export default {
       model.value = sanitizeValue(val.spec.value);
     });
 
+    function remove() {
+      model.value = '';
+      ctx.emit('datePicked', model.value);
+    }
+
     function handleChanged(e) {
       const { value } = e.srcElement;
       model.value = value;
@@ -83,7 +89,7 @@ export default {
 
     const { smAndUp } = useDisplay();
 
-    return { text, sanitizeValue, dateInput, handleChanged, model, template, dialog, handleDatePickerChanged, smAndUp };
+    return { text, sanitizeValue, dateInput, handleChanged, model, template, dialog, handleDatePickerChanged, smAndUp, remove };
   },
   methods: {
     showPicker(e) {

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,7 +1,10 @@
 <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">
-    <span v-if="spec.text" class="grey--text text--lighten-1 text-h5">{{ spec.text }}</span>
+      <div>
+        <div class="value-style text-center">{{ spec.value }}%</div>
+        <span v-if="spec.text" class="text-style">{{ spec.text }}</span>
+      </div>
   </v-progress-circular>
 </template>
 
@@ -13,4 +16,16 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.value-style {
+  font-size: 16px;
+  line-height: 150%;
+  font-weight: 700;
+}
+
+.text-style {
+  font-size: 16px;
+  line-height: 150%;
+  font-weight: 400;
+}
+</style>

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.0",
+  "version": "4.27.3",
   "description": "",
   "main": "index.js",
   "scripts": {