glib-web 4.35.12 → 4.36.1

package/AGENT.md

@@ -0,0 +1,8 @@
+* System architecture
+  * Read [ui_architecture.md](doc/common/ui_architecture.md)
+  * This project implements the frontend components of the `glib` UI framework mentioned
+    in the architecture above.
+
+* Project guidelines
+  * For working examples on how to use `glib` UI components, see all the jbuilder
+    files located in `doc/garage/`.

package/CLAUDE.md

@@ -0,0 +1,2 @@
+@AGENT.md
+

package/components/fields/radio/_subtitle.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-radio
+    :value="(spec.value || '').presence() || vuetifyEmptyString"
+    :readonly="spec.readOnly"
+    :on-icon="spec.onIcon"
+    :off-icon="spec.offIcon"
+    @click="$onClick()"
+    :color="gcolor"
+  >
+    <template v-slot:label>
+      <div class="flex flex-col">
+        <span>{{ spec.label }}</span>
+        <span v-if="spec.subtitle" class="text-sm text-gray-500 mt-1">
+          {{ spec.subtitle }}
+        </span>
+      </div>
+    </template>
+  </v-radio>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  inject: ['radioGroupCtx'],
+};
+</script>

package/components/fields/radio.vue

@@ -1,8 +1,9 @@
 <template>
   <div :class="cls" :style="$styles()" v-if="loadIf">
+    <subtitle-radio v-if="spec.subtitle" :spec="spec" />
     <v-radio :label="spec.label" :value="(spec.value || '').presence() || vuetifyEmptyString" :readonly="spec.readOnly"
       :on-icon="spec.onIcon" :off-icon="spec.offIcon" @click="$onClick()" :color="gcolor"
-      v-if="!spec.image && !spec.icon">
+      v-if="!spec.image && !spec.icon && !spec.subtitle">
     </v-radio>
     <thumbnail-radio v-if="spec.image && spec.image.template == 'thumbnail'" :spec=this.spec></thumbnail-radio>
     <featured-radio v-if="spec.icon && spec.icon.template == 'featured'" :spec=this.spec></featured-radio>
@@ -19,11 +20,13 @@
 
 import ThumbnailRadio from "../fields/radio/_thumbnail.vue";
 import FeaturedRadio from "../fields/radio/_featured.vue";
+import SubtitleRadio from "../fields/radio/_subtitle.vue";
 
 export default {
   components: {
     "thumbnail-radio": ThumbnailRadio,
     "featured-radio": FeaturedRadio,
+    "subtitle-radio": SubtitleRadio,
   },
   props: {
     spec: { type: Object, required: true }

package/components/panels/vertical.vue

@@ -28,21 +28,20 @@ export default {
           classes.push("layouts-vertical--space-equally");
           break;
       }
-      return classes;
-    },
-    cssStyles: function () {
-      const styles = this.$styles();
       switch (this.spec.align) {
         case "center":
-          styles["align-items"] = "center";
+          classes.push("layouts-vertical--align-center");
           break;
         case "right":
-          styles["align-items"] = "flex-end";
+          classes.push("layouts-vertical--align-right");
           break;
         default:
-          styles["align-items"] = "flex-start";
+          classes.push("layouts-vertical--align-left");
       }
-      return styles;
+      return classes;
+    },
+    cssStyles: function () {
+      return this.$styles();
     },
     componentName() {
       return this.spec.onClick ? "a" : "div";
@@ -95,4 +94,17 @@ a.panels-vertical {
 .layouts-vertical--space-equally>* {
   flex: initial;
 }
+
+.layouts-vertical--align-left {
+  align-items: flex-start;
+}
+
+.layouts-vertical--align-center {
+  align-items: center;
+}
+
+.layouts-vertical--align-right {
+  align-items: flex-end;
+}
+
 </style>

package/nav/drawer.vue

@@ -14,9 +14,24 @@
 
       <v-list :dense="true">
         <div v-for="(item, index) in spec.rows" :key="index" class="nav-item">
-          <div v-if="item.type == 'button'" class="indicator"></div>
+          <div v-if="item.type == 'button' && !item.childButtons" class="indicator"></div>
           <v-divider v-if="item.type == 'divider'" />
           <nav-drawerLabel v-else-if="item.type == 'label'" :spec="rowSpec(item)" />
+          <template v-else-if="item.childButtons && item.childButtons.length > 0">
+            <v-list-group>
+              <template v-slot:activator="{ props }">
+                <v-list-item v-bind="props">
+                  <div class="parent-item">
+                    <common-icon v-if="item.icon" :spec="item.icon || {}" />
+                    <span>{{ item.text }}</span>
+                  </div>
+                </v-list-item>
+              </template>
+              <div v-for="(child, childIndex) in item.childButtons" :key="childIndex" class="child-item">
+                <nav-drawerButton :spec="child" />
+              </div>
+            </v-list-group>
+          </template>
           <nav-drawerButton v-else :spec="item" />
         </div>
       </v-list>
@@ -60,7 +75,7 @@ export default {
       // Using null as the starting value for its v-model will initialize the drawer as closed on mobile and as open on desktop.
       // See https://vuetifyjs.com/en/components/navigation-drawers
       state: null,
-      isExpand: false,
+      isExpand: false
     };
   },
   computed: {
@@ -146,6 +161,13 @@ export default {
   align-items: center;
   background-color: white;
 }
+
+.parent-item {
+  padding-left: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 </style>
 
 <style lang="scss">
@@ -171,4 +193,20 @@ export default {
   //   margin: 8px 0;
   // }
 }
+
+// .v-list-group__items {
+  .child-item {
+    .v-list-item.drawer-button {
+      // padding-left: 0;
+      // padding-right: 0;
+      padding-inline-start: 0 !important;
+      padding-inline-end: 0;
+
+      .views-button {
+        padding-left: 32px;
+        padding-right: 32px;
+      }
+    }
+  }
+// }
 </style>

package/package.json

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