glib-web 4.34.3 → 4.34.4

package/components/fields/_select.vue

@@ -16,14 +16,9 @@
             <glib-component :spec="item.raw" />
           </v-list-subheader>
           <v-divider v-else-if="item.raw.divider"></v-divider>
-          <v-list-item v-else v-bind="props" :disabled="item.raw.disabled">
-            <template v-slot:prepend="{ isActive }">
-              <glib-component v-if="item.raw.icon" :spec="itemIconSpec(item.raw.icon)" />
-              <v-list-item-action start v-if="spec.multiple">
-                <v-checkbox-btn :model-value="isActive"></v-checkbox-btn>
-              </v-list-item-action>
-            </template>
-          </v-list-item>
+          <select-item-default v-else-if="!item.raw.imageUrl" :context="props" :item="item"
+            :spec="spec"></select-item-default>
+          <select-item-with-image :context="props" :item="item" :spec="spec" v-else></select-item-with-image>
         </div>
       </template>
 
@@ -65,8 +60,14 @@ import { triggerOnChange, triggerOnInput, useGlibInput } from "../composable/for
 import Hash from '../../utils/hash';
 import { useGlibSelectable, watchNoneOfAbove } from '../composable/selectable';
 import { ref } from 'vue';
+import SelectItemDefault from "./_selectItemDefault.vue";
+import SelectItemWithImage from "./_selectItemWithImage.vue";
 
 export default {
+  components: {
+    'select-item-default': SelectItemDefault,
+    'select-item-with-image': SelectItemWithImage
+  },
   mixins: [inputVariant],
   props: {
     spec: { type: Object, required: true },

package/components/fields/_selectItemDefault.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-list-item v-bind="props.context" :disabled="props.item.raw.disabled">
+    <template v-slot:prepend="{ isActive }">
+      <glib-component v-if="props.item.raw.icon" :spec="itemIconSpec(props.item.raw.icon)" />
+      <v-list-item-action start v-if="props.spec.multiple">
+        <v-checkbox-btn :model-value="isActive"></v-checkbox-btn>
+      </v-list-item-action>
+    </template>
+  </v-list-item>
+</template>
+
+<script setup>
+const props = defineProps(['context', 'item', 'spec']);
+</script>

package/components/fields/_selectItemWithImage.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-list-item v-bind="props.context" :disabled="props.item.raw.disabled">
+    <template v-slot:prepend>
+      <v-avatar size="24" color="white">
+        <v-img :src="props.item.raw.imageUrl"></v-img>
+      </v-avatar>
+    </template>
+    <template v-slot:append="{ isActive }">
+      <v-list-item-action start v-if="props.spec.multiple">
+        <v-checkbox-btn :model-value="isActive"></v-checkbox-btn>
+      </v-list-item-action>
+    </template>
+  </v-list-item>
+</template>
+
+<script setup>
+const props = defineProps(['context', 'item', 'spec']);
+</script>

package/index.js

@@ -17,6 +17,7 @@ const Vue = createApp({
 
     const { mobile } = useDisplay();
     vueApp.mobile = mobile;
+    vueApp.colors = themeConfig.current.value.colors;
   },
   render: function () {
     return h(App, { page: jsonView.page });

package/package.json

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

package/store.js

@@ -3,6 +3,7 @@ import Action from "./action";
 import eventBus from "./utils/eventBus";
 
 export const vueApp = reactive({
+    colors: null,
     indicator: false,
     isStale: false,
     isFormSubmitted: false,

package/utils/constant.js

@@ -1,4 +1,4 @@
-import { useTheme } from "vuetify";
+import { vueApp } from "../store";
 
 // const colors = ['primary', 'secondary', 'success', 'warning', 'info', 'error']
 const variants = ['text', 'flat', 'elevated', 'outlined', 'plain', 'tonal'];
@@ -6,7 +6,7 @@ const densities = ['comfortable', 'compact'];
 const sizes = ['x-small', 'small', 'large', 'x-large'];
 
 function determineColor(styleClasses, defaultColor) {
-  const colors = Object.keys(useTheme().current.value.colors);
+  const colors = Object.keys(vueApp.colors);
   const classes = styleClasses || [];
   for (const value of colors) {
     if (classes.includes(value)) {

package/utils/http.js

@@ -4,6 +4,7 @@ import { nextTick } from 'vue';
 import { ctx, dialogs, jsonView, vueApp } from "../store";
 import Hash from "./hash";
 import { hideSkeletonView } from "../actions/windows/skeletionView";
+import Mustache from "mustache";
 
 const strandom = () => (Math.random() + 1).toString(36).substring(7) + Date.now().toString();
 
@@ -208,11 +209,12 @@ export default class {
   }
 
   static _populatePlaceholders(str, body) {
-    str = this._populatePlaceholdersForIndicators(str, body, "{{", "}}");
-    // Allow support for encoded `{{placeholder}}`
-    str = this._populatePlaceholdersForIndicators(str, body, "%7B%7B", "%7D%7D");
+    // str = this._populatePlaceholdersForIndicators(str, body, "{{", "}}");
+    // // Allow support for encoded `{{placeholder}}`
+    // str = this._populatePlaceholdersForIndicators(str, body, "%7B%7B", "%7D%7D");
 
-    return str;
+    // return str;    
+    return Mustache.render(decodeURI(str), Object.fromEntries(body));
   }
 
   static execute(properties, methodName, component, jsonHandler, errorHandler) {