glib-web 4.38.0 → 4.39.0

package/.claude/settings.local.json

@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Read(//home/hgani/workspace/glib-web/app/views/json_ui/garage/**)",
+      "Read(//home/hgani/workspace/glib-web-npm/doc/garage/**)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

package/actions/dialogs/alert.js

@@ -4,7 +4,7 @@ export default class {
   execute(properties, component) {
     const spec = Object.assign({}, properties, {
       disableCloseButton: true,
-      styleClass: 'dialogs-alert',
+      styleClasses: (properties.styleClasses || []).concat(['dialogs-alert']),
       buttons: [
         {
           text: "OK",

package/actions/dialogs/open.js

@@ -3,7 +3,9 @@ import { dialogs } from "../../store";
 export default class {
   execute(spec, component) {
     const dialog = dialogs.value.last();
-    const prop = Object.assign({}, spec, { styleClass: 'dialogs-open' });
+    const prop = Object.assign({}, spec, {
+      styleClasses: (spec.styleClasses || []).concat(['dialogs-open'])
+    });
     if (spec.updateExisting && dialog) {
       dialog.reload(prop);
 

package/actions/dialogs/show.js

@@ -3,7 +3,9 @@ import { dialogs } from "../../store";
 export default class {
   execute(spec, component) {
     const dialog = dialogs.value.last();
-    const prop = Object.assign({}, spec, { styleClass: 'dialogs-show' });
+    const prop = Object.assign({}, spec, {
+      styleClasses: (spec.styleClasses || []).concat(['dialogs-show'])
+    });
     if (spec.updateExisting && dialog) {
       Object.assign(dialog.spec, prop);
       dialog.updateContent(spec);

package/actions/sheets/show.js

@@ -3,12 +3,14 @@ import { vueApp } from "../../store";
 export default class {
   execute(spec, component) {
 
-    const { placement, body } = spec;
+    const { body, placement, scrim, elevation } = spec;
 
     vueApp.sheet = {
-      spec: body,
+      body: body,
       show: true,
-      placement
+      placement,
+      scrim,
+      elevation
     };
   }
 }

package/app.vue

@@ -35,10 +35,15 @@
     <div :id="tooltipId">
       <panels-responsive :spec="vueApp.tooltipSpec"></panels-responsive>
     </div>
+    <Transition name="scrim-fade">
+      <div v-if="sheet.show && sheet.scrim" class="glib-sheet-scrim" @click="closeSheet"></div>
+    </Transition>
     <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="`${vueApp.sheet.spec.key}-${index}`"></glib-component>
+      <v-sheet v-if="sheet.show" :class="`views-sheet ${sheet.placement}`" :elevation="sheet.elevation">
+        <!-- <glib-component v-for="(rbSpec, index) in sheet.spec.childViews" :spec="rbSpec"
+          :key="`${vueApp.sheet.spec.key}-${index}`"></glib-component> -->
+
+        <panels-responsive :spec="sheet.body"></panels-responsive>
       </v-sheet>
     </Transition>
     <div class="glib-bottomBanner">
@@ -133,6 +138,9 @@ export default {
     pageClasses() {
       return [`page-${this.$vuetify.display.name}`].concat(this.page.styleClasses || []);
     },
+    sheet() {
+      return this.vueApp.sheet;
+    },
     containerComponent() {
       if (this.formSpec) {
         this.name = "panels-form";
@@ -173,6 +181,9 @@ export default {
     watchGlibEvent();
   },
   methods: {
+    closeSheet() {
+      this.vueApp.sheet.show = false;
+    },
     handleActionCable(val) {
       if (val.actionCable) {
         const { customer } = useSocket(val.actionCable, this.actionCableConsumer);
@@ -426,34 +437,20 @@ body,
 .fields-textarea .v-input--readonly {
   pointer-events: unset;
 }
-</style>
-
-<style scoped>
-/*** Header/footer support ***/
-.hamburger {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-  padding: 0;
-}
 
-.body-wrapper {
-  height: 100%;
-  /* overflow-y: auto; */
-  overflow-y: overlay;
-}
-
-.glib-bottomBanner {
+.glib-sheet-scrim {
   position: fixed;
-  bottom: 0;
-  right: 0;
-  z-index: 99;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.2);
+  z-index: 1006;
 }
 
 .views-sheet {
+  position: fixed;
   z-index: 1007;
-  box-shadow: 0px 4px 12px 0px #0000001A;
   overflow-y: auto;
 
   &.top {
@@ -484,13 +481,43 @@ body,
     max-width: 684px;
   }
 }
+</style>
+
+<style scoped>
+/*** Header/footer support ***/
+.hamburger {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  padding: 0;
+}
+
+.body-wrapper {
+  height: 100%;
+  /* overflow-y: auto; */
+  overflow-y: overlay;
+}
+
+.glib-bottomBanner {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 99;
+}
+
+:root {
+  --sheet-slide-in-duration: 0.3s;
+  --sheet-slide-out-duration: 0.18s;
+  --sheet-scrim-delay: 0.1s;
+}
 
 .slide-fade-enter-active {
-  transition: all 0.1s ease-out;
+  transition: all var(--sheet-slide-in-duration) ease-out;
 }
 
 .slide-fade-leave-active {
-  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+  transition: all var(--sheet-slide-out-duration) ease-in;
 }
 
 .slide-fade-enter-from,
@@ -499,5 +526,18 @@ body,
   opacity: 0;
 }
 
+.scrim-fade-enter-active {
+  transition: opacity 0.2s ease-out var(--sheet-scrim-delay);
+}
+
+.scrim-fade-leave-active {
+  transition: opacity 0.2s ease-in;
+}
+
+.scrim-fade-enter-from,
+.scrim-fade-leave-to {
+  opacity: 0;
+}
+
 /******/
 </style>

package/nav/appBar.vue

@@ -4,14 +4,18 @@
     <v-app-bar-nav-icon v-if="showDrawerMenu" @click="triggerDrawer()"></v-app-bar-nav-icon>
     <!-- <v-app-bar-nav-icon v-if="page.leftDrawer && !isPermanent" style="color: inherit;"
       @click="drawerTrigger = new Date()"></v-app-bar-nav-icon> -->
-    <v-progress-circular v-if="vueApp.indicator" indeterminate></v-progress-circular>
-    <div v-else>
-      <panels-responsive v-if="navBar.logo" :spec="navBar.logo" />
-      <v-app-bar-title v-else-if="navBar.showTitle">{{
-        page.title
-        }}</v-app-bar-title>
+
+    <div style="width: 100%; display: flex; align-items: center;" v-else>
+      <div>
+        <v-progress-circular v-if="vueApp.indicator" indeterminate></v-progress-circular>
+        <panels-responsive v-else-if="navBar.logo" :spec="navBar.logo" />
+        <v-app-bar-title v-else-if="navBar.showTitle">{{page.title}}</v-app-bar-title>
+      </div>
+
+      <panels-responsive v-if="navBar.body" :spec="navBar.body" />
     </div>
-    <span style="padding-left: 10px;" v-if="navBar.showBreakpoint">
+
+    <span style="position: absolute; top: 0; right: 0; font-size: 0.7em;" v-if="navBar.showBreakpoint">
       <common-chip :spec="chipSpec" />
     </span>
     <v-spacer></v-spacer>
@@ -85,31 +89,31 @@ export default {
       };
     },
     chipSpec() {
-      let alpha = 'aa';
-      switch (this.$vuetify.display.name) {
-        case "xxl":
-          alpha = 'b0';
-          break;
-        case "xl":
-          alpha = '90';
-          break;
-        case "lg":
-          alpha = '70';
-          break;
-        case "md":
-          alpha = '50';
-          break;
-        case "sm":
-          alpha = '30';
-          break;
-        case "xs":
-          alpha = '10';
-          break;
-      }
+      // let alpha = 'aa';
+      // switch (this.$vuetify.display.name) {
+      //   case "xxl":
+      //     alpha = 'b0';
+      //     break;
+      //   case "xl":
+      //     alpha = '90';
+      //     break;
+      //   case "lg":
+      //     alpha = '70';
+      //     break;
+      //   case "md":
+      //     alpha = '50';
+      //     break;
+      //   case "sm":
+      //     alpha = '30';
+      //     break;
+      //   case "xs":
+      //     alpha = '10';
+      //     break;
+      // }
       return {
         view: 'chip',
-        text: this.$vuetify.display.name,
-        backgroundColor: `#ff0000${alpha}`
+        styleClasses: ['dev-mode'],
+        text: this.$vuetify.display.name
       };
     }
   },

package/nav/dialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog :class="spec.styleClass" :model-value="model" :width="spec.width || 600" :dark="false"
+  <v-dialog :class="cssClasses" :model-value="model" :width="spec.width || 600" :dark="false"
     :fullscreen="fullscreen" :sm-and-down="false" :persistent="true" @click:outside="clickOutside">
     <v-card v-show="!loading || !spec.loaderViews" :style="hamburgerStyles" class="dialog-hamburger" :key="dialogKey">
 
@@ -99,6 +99,9 @@ export default {
     };
   },
   computed: {
+    cssClasses() {
+      return (this.spec.styleClasses || []).concat(['views-dialog']);
+    },
     containerComponent() {
       if (this.formSpec) {
         return "panels-form";

package/package.json

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