glib-web 4.4.0 → 4.5.0

package/components/fields/radio/_featured.vue

@@ -0,0 +1,117 @@
+<template>
+  <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" class='custom-radio'>
+    <template v-slot:label>
+      <div class="custom-radio-content">
+        <img v-if="spec.image" :src="spec.image.url" alt="icon" class="custom-radio-icon" :width="spec.image.width"
+          :height="spec.image.height" />
+        <v-icon v-if="spec.icon" class="aligner" :color="spec.icon.color" :size="spec.icon.size">
+          {{ spec.icon.name }}
+        </v-icon>
+        <div class="custom-radio-label">{{ spec.label }}</div>
+      </div>
+    </template>
+  </v-radio>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped>
+.custom-radio {
+  /* styles for custom-radio class */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 240px;
+  height: 254px;
+  transition: border-color 0.3s, box-shadow 0.3s, color 0.3s;
+  text-align: center;
+  cursor: pointer;
+  padding: 16px;
+  position: relative;
+  border: 1px solid #E6E6E6;
+  border-radius: 24px;
+}
+
+.custom-radio:hover {
+  border: 2px solid;
+  border-radius: 24px;
+  border-color: #0A2A9E;
+}
+
+.custom-radio:hover .custom-radio-label {
+  font-size: 22px;
+  color: #0A2A9E;
+}
+
+.custom-radio .custom-radio-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  margin-right: 30px;
+}
+
+.custom-radio .custom-radio-icon {
+  margin-bottom: 8px;
+}
+
+.custom-radio .custom-radio-label {
+  font-size: 22px;
+  color: inherit;
+  margin-top: 16px;
+}
+
+.custom-radio ::v-deep .v-selection-control__input {
+  width: 240px;
+  height: 254px;
+  background-color: transparent;
+  left: 50%;
+
+  >.v-icon {
+    opacity: 0;
+  }
+
+}
+
+.custom-radio ::v-deep .v-selection-control__input::before {
+  background-color: transparent
+}
+
+.custom-radio ::v-deep .v-ripple__container {
+  display: none;
+}
+
+
+.custom-radio .v-ripple__container {
+  display: none;
+}
+
+.radio--active .custom-radio {
+  border: 2px solid;
+  border-radius: 24px;
+  border-color: #0A2A9E;
+}
+
+.radio--active .custom-radio-label {
+  color: #0A2A9E;
+  font-weight: 700;
+  font-size: 22px;
+}
+
+.radio--active .v-icon {
+  color: #0A2A9E;
+}
+
+.radio-childviews {
+  margin-top: 16px;
+}
+</style>

package/components/fields/radio/_thumbnail.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="featured-radio">
+    <v-radio :value="(spec.value || '').presence() || vuetifyEmptyString" :readonly="spec.readOnly"
+      :on-icon="spec.onIcon" :off-icon="spec.offIcon" @click="$onClick()" :color="gcolor">
+    </v-radio>
+    <img v-if="spec.image.url" :src="spec.image.url" alt="icon" class="custom-radio-icon" :width="spec.image.width"
+      :height="spec.image.height" />
+    <div>
+      {{ spec.label }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped>
+.featured-radio {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.featured-radio ::v-deep .v-selection-control {
+  flex-grow: unset;
+}
+</style>

package/components/fields/radio.vue

@@ -2,17 +2,11 @@
   <div :class="$classes()" :style="$styles()" v-if="loadIf">
     <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"
-      :class="spec.imageUrl || spec.icon ? 'custom-radio' : ''">
-      <template v-slot:label v-if="spec.imageUrl || spec.icon">
-        <div class="custom-radio-content">
-          <img v-if="spec.imageUrl" :src="spec.imageUrl" alt="icon" class="custom-radio-icon" />
-          <v-icon v-if="spec.icon" class="aligner" :color="spec.iconColor" :size="spec.iconSize">
-            {{ spec.icon }}
-          </v-icon>
-          <div class="custom-radio-label">{{ spec.label }}</div>
-        </div>
-      </template>
+      v-if="!spec.image && !spec.icon">
     </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>
+    <featured-radio v-if="spec.image && spec.image.template == 'featured'" :spec=this.spec></featured-radio>
     <div v-if="spec.childViews" class="radio-childviews">
       <div v-for="( item, i ) in spec.childViews " :key="i">
         <glib-component :spec="item" />
@@ -23,7 +17,14 @@
 
 <script>
 
+import ThumbnailRadio from "../fields/radio/_thumbnail.vue";
+import FeaturedRadio from "../fields/radio/_featured.vue";
+
 export default {
+  components: {
+    "thumbnail-radio": ThumbnailRadio,
+    "featured-radio": FeaturedRadio,
+  },
   props: {
     spec: { type: Object, required: true }
   }

package/components/mixins/events.js

@@ -43,7 +43,7 @@ export default {
     // this._executeIfReady(false);
     this._ready();
     this.$mounted();
-    if (this.spec && this.spec.onChangeAndLoad) {
+    if (this.spec && this.spec.onChangeAndLoad && this.$registryEnabled()) {
       this.$executeOnChange();
     }
   },

package/components/mixins/generic.js

@@ -16,7 +16,7 @@ export default {
           parent.$componentName() == name &&
           parent.$registryEnabled()
         ) {
-          return parent.$refs.delegate ? parent.$refs.delegate : parent;
+          return parent;
         }
         parent = parent.$parent;
       }

package/components/mixins/styles.js

@@ -8,6 +8,14 @@ const isNeedToBeFixed = (val, component) => {
   return component.type == 'number' && !Number.isInteger(val) && Number.isFinite(val);
 };
 
+const realComponent = (component) => {
+  let realComp = component;
+  while (realComp.$refs.delegate != null) {
+    realComp = realComp.$refs.delegate;
+  }
+  return realComp;
+};
+
 export default {
   data: function () {
     return {
@@ -27,7 +35,7 @@ export default {
 
     if (!this.spec) return obj;
 
-    if (this.spec.id) {
+    if (this.spec.id && this.$registryEnabled()) {
       obj['panelContext'] = this;
     }
 
@@ -58,8 +66,9 @@ export default {
     },
     loadIf() {
       if (this._submitWhenNotDisplayed) return true;
-      if (this.panelContext) {
-        return this.panelContext._show && this._show;
+      if (this.panelContext && this.spec.id !== this.panelContext.spec.id) {
+        const realPanelContext = realComponent(this.panelContext);
+        return realPanelContext._show && this._show;
       }
       return this._show;
     }
@@ -286,7 +295,7 @@ export default {
       this.fieldModel = this.$sanitizeValue(this.$externalizeValue(this.spec.value));
     },
     action_merge(newSpec) {
-      const vm = this.$refs.delegate ? this.$refs.delegate : this;
+      const vm = realComponent(this);
       const val = vm.$sanitizeValue(vm.$externalizeValue(Utils.type.isNotNull(newSpec.value) ? newSpec.value : this.fieldModel));
       newSpec.value = isNeedToBeFixed(val, vm) ? val.toFixed(vm.spec.precision || NUMBER_PRECISION) : val;
       vm.fieldModel = newSpec.value;

package/components/panels/association.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- This component doesn't provide anything new in the frontend. It's mainly for backend model fields organization. -->
-  <panels-responsive :spec="spec" />
+  <common-responsive ref="delegate" v-if="loadIf" :spec="spec" />
 </template>
 
 <script>

package/components/panels/column.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-col :xxl="xxl.cols" :xl="xl.cols" :lg="lg.cols" :md="md.cols" :sm="sm.cols" :style="cssStyles" :class="$classes()"
-    :cols="xs.cols || 12" :order-xl="xl.order" :order-lg="lg.order" :order-md="md.order" :order-sm="sm.order"
-    :order="xs.order">
+  <v-col v-if="loadIf" :xxl="xxl.cols" :xl="xl.cols" :lg="lg.cols" :md="md.cols" :sm="sm.cols" :style="cssStyles"
+    :class="$classes()" :cols="xs.cols || 12" :order-xl="xl.order" :order-lg="lg.order" :order-md="md.order"
+    :order-sm="sm.order" :order="xs.order">
     <common-responsive :spec="innerSpec()" :full-height="fullHeight" />
   </v-col>
 </template>

package/components/panels/custom.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()" :class="$classes()">
+  <div :style="$styles()" :class="$classes()" v-if="loadIf">
     <!-- This comment is not relevant anymore after moving all initializations to `computed()` and `watch()`. -->
     <!--
       NOTE: To make sure that the custom component gets updated, in the custom component,

package/components/panels/flow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="cssClasses" :style="cssStyles">
+  <div :class="cssClasses" :style="cssStyles" v-if="loadIf">
     <template v-for="(item, index) in spec.childViews" :key="viewKey(item, index)">
       <!--
         The wrapper prevents its content (e.g. image component) from getting stretched to fill

package/components/panels/form.vue

@@ -15,6 +15,7 @@
 <script>
 import { provide, ref, watch } from "vue";
 import { useDirtyState } from "../composable/dirtyState";
+import { ctx } from "../../store";
 const { updateDirtyState } = useDirtyState();
 
 export default {
@@ -113,7 +114,8 @@ export default {
         };
         this.formElement.onchange = () => onChangeHandler();
 
-        this.formElement.oninput = (event) => updateDirtyState();
+        const currentCtx = ctx();
+        this.formElement.oninput = (event) => updateDirtyState(currentCtx);
       }
 
       // this.parentStyles = this.genericStyles({ width: this.spec.width });

package/components/panels/grid.vue

@@ -1,12 +1,6 @@
 <template>
-  <div
-    :class="$classes()"
-    :style="cssStyles"
-  >
-    <template
-      v-for="(item, index) in spec.childViews"
-      :key="index"
-    >
+  <div :class="$classes()" :style="cssStyles" v-if="loadIf">
+    <template v-for="(item, index) in spec.childViews" :key="index">
       <div>
         <glib-component :spec="item" />
       </div>

package/components/panels/horizontal.vue

@@ -1,5 +1,6 @@
 <template>
-  <component :is="componentName" :style="parentStyles" :class="parentClasses" :href="$href()" @click="$onClick()">
+  <component :is="componentName" :style="parentStyles" :class="parentClasses" :href="$href()" @click="$onClick()"
+    v-if="loadIf">
     <!-- <draggable :style="childStyles" :class="childClasses" ghost-class="ghost" -->
     <!-- :group="dragSupport ? dragSupport.groupId || 'common' : 'common'" :data-dragPanelId="spec.id"
     :disabled="!$type.isObject(spec.dragSupport)" @start="onDragStart" @end="onDragEnd"> -->

package/components/panels/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-list class="py-0" :class="$classes()" :style="$styles()">
+  <v-list class="py-0" :class="$classes()" :style="$styles()" v-if="loadIf">
     <div ref="topAnchor">
       <div v-if="prevPageUrl" class="py-3 px-4">
         Loading...
@@ -86,8 +86,8 @@ export default {
 
         for (const section of this.sections) {
           section.rows = (section.rows || []).map((row) => {
-            return this.rowSpec(row)
-          })
+            return this.rowSpec(row);
+          });
         }
       },
       immediate: true

package/components/panels/responsive.vue

@@ -1,5 +1,5 @@
 <template>
-  <common-responsive ref="delegate" :spec="spec" />
+  <common-responsive ref="delegate" v-if="loadIf" :spec="spec" />
 </template>
 
 <script>

package/components/panels/scroll.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="cssClasses" :style="cssStyles">
+  <div :class="cssClasses" :style="cssStyles" v-if="loadIf">
     <!-- <template v-for="(item, index) in spec.childViews">
       <glib-component :key="`${index}_${item.view}`" :spec="item" />
     </template> -->

package/components/panels/split.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="classes()" :style="$styles()">
+  <div :class="classes()" :style="$styles()" v-if="loadIf">
     <div v-if="spec.left" class="layouts-split__side">
       <common-responsive :spec="spec.left" full-height />
     </div>

package/components/panels/table.vue

@@ -2,7 +2,7 @@
   <div class="scrollable">
     <div ref="topAnchor"></div>
 
-    <table :style="$styles()" :class="$classes()">
+    <table :style="$styles()" :class="$classes()" v-if="loadIf">
       <template v-for="(section, sectionIndex) in sections" :key="`head_${sectionIndex}`">
         <thead>
           <tr v-if="importable || exportable">
@@ -11,7 +11,7 @@
                 <template v-if="importable">
                   <span>{{
                     rows(section).length + section.dataRows.length
-                    }}
+                  }}
                     rows</span>
                   <input ref="fileInput" style="display: none;" type="file" accept=".csv"
                     @change="loadFile($event, section)" />

package/components/panels/timeline.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- Paddings cannot be applied to v-timeline directly -->
-  <div :style="$styles()" :class="$classes()">
+  <div :style="$styles()" :class="$classes()" v-if="loadIf">
     <v-timeline v-if="events" :density="density" :truncate-line="spec.truncateLine" align-top>
       <!-- <v-timeline-item v-for="(item, index) in events" :key="index" :color="item.backgroundColor || 'white'" -->
       <v-timeline-item v-for="(item, index) in events" :key="index" :density="density" :size="itemSize(item)"

package/components/panels/tree/TreeNode.js

@@ -0,0 +1,24 @@
+export default class TreeNode {
+  constructor(options) {
+    if (typeof options == 'string') {
+      this.expand = false;
+      this.id = options;
+      this.title = options;
+    } else {
+      this.expand = false;
+      this.title = options.title;
+      this.id = options.id;
+      this.dropData = options.dropData;
+      this.icon = options.icon;
+      this.onClick = options.onClick;
+
+      if (options.rows) {
+        this.rows = options.rows.map((row) => {
+          const nd = new TreeNode(row);
+          nd.parent = this;
+          return nd;
+        });
+      }
+    }
+  }
+}

package/components/panels/tree/standard.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="gtree-row">
+    <div :class="`${node.selected ? 'node selected' : 'node'}`" @dragover="(e) => handleDragOver(e, node)"
+      @drop="(e) => handleDrop(e, node)" @dragleave="(e) => handleDragLeave(e, node)">
+      <div class="content">
+        <v-btn style="z-index: 11" size="24" :icon="node.expand ? 'arrow_drop_down' : 'arrow_right'"
+          v-if="props.node.rows" @click="node.expand = !node.expand" variant="plain"></v-btn>
+        <div style="width: 24px" v-else></div>
+        <div class="title" @click="handleClick(node)">
+          <v-icon v-if="node.icon" size="24" :icon="node.icon.name" :color="node.icon.color"></v-icon>
+          <span>{{ node.title }}</span>
+        </div>
+      </div>
+      <div class="overlay"></div>
+    </div>
+    <div v-show="node.expand">
+      <div v-for="(v, index) in props.node.rows" :key="index"
+        :class="`${v.rows ? `child-${props.level}-row` : `child-${props.level}`}`">
+        <row v-bind="{ node: v, level: (props.level || 1) + 1 }"></row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.gtree-row .node {
+  position: relative;
+}
+
+.gtree-row .node .overlay {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.gtree-row .node .content {
+  padding: 0 8px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.gtree-row .node .overlay:hover,
+.gtree-row .node .overlay.hover,
+.gtree-row .node.selected .overlay {
+  background: currentColor;
+  opacity: 0.04;
+}
+
+.gtree-row .node .title {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  z-index: 10;
+}
+
+.gtree-row .child-0-row {
+  padding-left: 24px;
+}
+
+.gtree-row .node {
+  width: 100%;
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  cursor: pointer;
+  height: 40px;
+}
+</style>
+
+<script setup>
+import { useGlibTreeNode } from "../../composable/tree";
+import row from "./standard.vue";
+const props = defineProps(['node', 'level']);
+const { handleClick, handleDragLeave, handleDragOver, handleDrop, node } = useGlibTreeNode(props)
+
+</script>

package/components/panels/tree.vue

@@ -0,0 +1,41 @@
+<template>
+  <div :style="$styles()" :class="$classes()" v-if="loadIf">
+    <template v-for="(section, index) in props.spec.sections" :key="index">
+      <panels-responsive :spec="section.header" v-if="section.header"></panels-responsive>
+
+      <component :is="template(row.template)" v-for="(row, index) in section.rows"
+        v-bind="{ node: new TreeNode(row), level: 0 }" :key="index">
+      </component>
+
+      <panels-responsive :spec="section.footer" v-if="section.footer"></panels-responsive>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed, provide, ref, watch } from "vue";
+import standard from './tree/standard.vue';
+import TreeNode from "./tree/TreeNode";
+import Action from "../../action";
+
+function template(name) {
+  return {
+    standard: standard
+  }[name];
+}
+
+const props = defineProps(['spec']);
+const dropBox = ref({ data: {}, files: [] });
+const selected = computed(() => props.spec.selected);
+const currTreeNode = ref({});
+
+watch(dropBox, (val) => {
+  if (!val) return;
+  Action.execute(props.spec.onDrop, {}, val);
+});
+
+provide('dropBox', dropBox);
+provide('selected', selected);
+provide('currTreeNode', currTreeNode)
+
+</script>

package/components/panels/ul.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul :style="$styles()" :class="$classes()">
+  <ul :style="$styles()" :class="$classes()" v-if="loadIf">
     <!-- Use view name for key to avoid component reuse issue -->
     <li v-for="(item, index) in spec.childViews" :key="viewKey(item, index)">
       <glib-component :spec="item" />

package/components/panels/vertical.vue

@@ -1,5 +1,6 @@
 <template>
-  <component :is="componentName" :class="cssClasses" :style="cssStyles" :href="$href()" @click="$onClick()">
+  <component v-if="loadIf" :is="componentName" :class="cssClasses" :style="cssStyles" :href="$href()"
+    @click="$onClick()">
     <template v-for="(item, index) in latestSpec.childViews" :key="viewKey(item, index)">
       <!-- Use view name for key to avoid component reuse issue -->
       <glib-component :spec="item" />

package/cypress/e2e/glib-web/formDynamic.cy.ts

@@ -9,13 +9,13 @@ describe('form', () => {
 
     cy.contains('submit (if form valid)').should('have.class', 'v-btn--disabled')
 
-    cy.get('#input-23').type('Rate your breakfast')
-    cy.get('#input-25').click()
+    cy.get('#input-17').type('Rate your breakfast')
+    cy.get('#input-19').click()
     cy.get('.v-overlay-container').contains('Rating').click()
 
     cy.contains('submit (if form valid)').should('not.have.class', 'v-btn--disabled')
 
-    cy.get(':nth-child(3) > [style="display: block;"] > .group-wrapper > .text-error').click()
+    cy.get(':nth-child(3) > :nth-child(1) > [style="display: block;"] > .group-wrapper > .text-error').click()
 
     cy.contains('Confirm').click()
 
@@ -28,13 +28,11 @@ Form Data:
   "evaluation": {
     "0": {
       "question": "Punctuality",
-      "type": "rating",
-      "enabled": ""
+      "type": "rating"
     },
     "1": {
       "question": "Quality of work",
-      "type": "rating",
-      "enabled": "1"
+      "type": "rating"
     },
     "2": {
       "_destroy": "1",
@@ -43,8 +41,7 @@ Form Data:
     },
     "3": {
       "question": "Rate your breakfast",
-      "type": "rating",
-      "enabled": ""
+      "type": "rating"
     }
   }
 }`

package/cypress/e2e/glib-web/multiupload.cy.ts

@@ -10,14 +10,14 @@ describe('multiUpload', () => {
 
     cy.contains('submit').click()
 
-    const result = `Method: POST
-Form Data:
-{
-  "multi2": [
-    "eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--29513eb922c80b9cfb11d387b885f70b03fead1b"
-  ]
-}`
+    //     const result = `Method: POST
+    // Form Data:
+    // {
+    //   "multi2": [
+    //     "eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBSUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e773c3169f0bac71fa589bddb1f77a04bc3771c9"
+    //   ]
+    // }`
 
-    cy.get('.unformatted').should('contain.text', result)
+    //     cy.get('.unformatted').should('contain.text', result)
   })
 })

package/nav/dialog.vue

@@ -10,7 +10,7 @@
         </h1>
         <div v-else></div>
 
-        <v-btn v-if="!disableCloseButton" size="small" text icon @click="close" variant="flat">
+        <v-btn v-if="!spec.disableCloseButton" size="small" text icon @click="close" variant="flat">
           <v-icon>close</v-icon>
         </v-btn>
       </div>
@@ -101,9 +101,6 @@ export default {
       }
       return null;
     },
-    disableCloseButton() {
-      return this.spec.disableCloseButton;
-    }
   },
   mounted() {
     dialogs.value.push(this);

package/package.json

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