glib-web 4.1.0 → 4.1.1

package/README.md

@@ -61,6 +61,7 @@ view.chipGroup styleClasses: ['custom']
 ## Prepare for publishing
 
 - Create a PR to the `master` branch
+- Make sure test pass `yarn run test`
 - After approval, merge the PR.
 
 ## Publish package to npm

package/action.js

@@ -228,7 +228,7 @@ export default class Action {
 
     if (response.header || response.body || response.footer) {
       Utils.http.forceComponentUpdate(() => {
-        const dialog = dialogs.last();
+        const dialog = dialogs.value.last();
         const updateDialog = windowMode ? false : Utils.type.isObject(dialog);
         if (updateDialog) {
           dialog.updateContent(response);

package/actions/components/replace.js

@@ -5,7 +5,7 @@ export default class {
   execute(spec, component) {
     const target = GLib.component.findById(spec.targetId) || component;
     if (target) {
-      Object.assign(target.spec, spec.newView);
+      target.action_merge(spec.newView);
     }
 
     Action.execute(spec.onReplace, target);

package/actions/components/set.js

@@ -1,6 +1,6 @@
-const setFileModel = (component, value) => {
-  component.fieldModel = component.$sanitizeValue(component.$externalizeValue(value));
-};
+// const setFileModel = (component, value) => {
+//   component.fieldModel = component.$sanitizeValue(component.$externalizeValue(value));
+// };
 
 
 export default class {
@@ -13,7 +13,7 @@ export default class {
 
     Utils.type.ifObject(spec.data, (data) => {
       targetComponent.action_merge(data);
-      if (data.value) setFileModel(targetComponent, data.value);
+      // if (data.value) setFileModel(targetComponent, data.value);
     });
 
     GLib.action.execute(spec.onSet, targetComponent);

package/actions/dialogs/open.js

@@ -2,7 +2,7 @@ import { dialogs } from "../../store";
 
 export default class {
   execute(spec, component) {
-    const dialog = dialogs.last();
+    const dialog = dialogs.value.last();
     if (spec.updateExisting && dialog) {
       dialog.reload(spec);
 

package/actions/dialogs/show.js

@@ -2,7 +2,7 @@ import { dialogs } from "../../store";
 
 export default class {
   execute(spec, component) {
-    const dialog = dialogs.last();
+    const dialog = dialogs.value.last();
     if (spec.updateExisting && dialog) {
       dialog.updateContent(spec);
       return;

package/components/fields/_select.vue

@@ -49,7 +49,7 @@ export default {
     return {
       options: null,
       append: {},
-      rules: [],
+      rules: this.$validation(),
       focused: false
     };
   },

package/components/fields/chipGroup.vue

@@ -13,7 +13,6 @@
 import { defineComponent } from "vue";
 import inputVariant from "../mixins/inputVariant";
 import { triggerOnInput } from "../composable/form";
-import { fieldModels } from "../composable/conditional";
 
 export default defineComponent({
   mixins: [inputVariant],

package/components/fields/radio.vue

@@ -1,9 +1,20 @@
 <template>
   <div :class="$classes()" :style="$styles()">
-    <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-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-radio>
     <div v-if="spec.childViews" class="radio-childviews">
-      <div v-for="(item, i) in spec.childViews" :key="i">
+      <div v-for="( item, i ) in spec.childViews " :key="i">
         <glib-component :spec="item" />
       </div>
     </div>
@@ -18,3 +29,99 @@ export default {
   }
 };
 </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 {
+  width: 80px;
+  height: 80px;
+  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/mixins/styles.js

@@ -266,11 +266,13 @@ export default {
       if (Utils.type.isNotNull(newSpec.displayed)) vm._show = newSpec.displayed;
       vm._submitWhenNotDisplayed = newSpec.submitWhenNotDisplayed;
 
-      const els = vm.$el.querySelectorAll('input,textarea');
-      if (!vm.submitWhenNotDisplayed) {
-        els.forEach((el) => el.disabled = true);
-      } else {
-        els.forEach((el) => el.disabled = false);
+      if (vm.$el && vm.$el == typeof HTMLElement) {
+        const els = vm.$el.querySelectorAll('input,textarea');
+        if (!vm.submitWhenNotDisplayed) {
+          els.forEach((el) => el.disabled = true);
+        } else {
+          els.forEach((el) => el.disabled = false);
+        }
       }
 
       Object.assign(this.spec, newSpec);

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

@@ -0,0 +1,53 @@
+const TEST_PAGE = 'http://localhost:3000/glib/json_ui_garage?path=test_page%2Findex'
+
+describe('reactivity', () => {
+  it('logics/set, components/set, components/replace', () => {
+    cy.visit(TEST_PAGE)
+
+    // submit button should be clickabl e
+    cy.contains('submit (if form valid)').should('not.have.class', 'v-btn--disabled')
+
+    cy.contains('components/set').click()
+    cy.contains('logics/set').click()
+    cy.contains('components/replace').click()
+
+    // submit button should be disabled
+    cy.contains('submit (if form valid)').should('have.class', 'v-btn--disabled')
+
+    cy.get('.fields-check input[type="checkbox"]').first().click()
+
+    // cy.contains('submit (if form valid)').should('have.class', 'v-btn--disabled')
+
+    cy.get('.fields-radio input[type="radio"]').first().click()
+
+    // cy.contains('submit (if form valid)').should('have.class', 'v-btn--disabled')
+
+    cy.get('.fields-chipGroup .v-chip').first().click()
+
+    // cy.contains('submit (if form valid)').should('not.have.class', 'v-btn--disabled')
+
+    cy.get('button').contains('submit').first().click()
+
+    const result = `Method: POST
+Form Data:
+{
+  "date": "2024-07-27",
+  "select": "option99",
+  "chip_group": "option99",
+  "text": "Doe John",
+  "textarea": "The quick brown fox jumps over the lazy dog"
+}`
+
+    cy.get('.unformatted').should('contain.text', result)
+  })
+
+  it('dialog', () => {
+    cy.visit(TEST_PAGE)
+    cy.contains('Dialog updateExisting').click()
+    cy.get('.v-dialog h1').should('contain.text', 'Hello world')
+    cy.get('.v-dialog .v-icon').should('exist')
+    cy.get('.v-dialog').contains('change dialog content').click()
+    cy.get('.v-dialog h1').should('contain.text', 'Hello world (updated)')
+    cy.get('.v-dialog .v-icon').should('not.exist')
+  })
+})

package/nav/dialog.vue

@@ -49,7 +49,7 @@ import { ref } from "vue";
 import { usePasteable } from "../components/composable/pasteable";
 
 export default {
-  expose: ['isFormDirty', 'model'],
+  expose: ['isFormDirty', 'model', 'close'],
   setup(props) {
     const filePaster = ref(undefined);
     usePasteable(filePaster);
@@ -74,7 +74,6 @@ export default {
       model: null,
       url: null,
       urlLoaded: false,
-      disableCloseButton: false,
       isMobile: false,
       formSpec: null,
       isFormDirty: false
@@ -101,10 +100,13 @@ export default {
         return `height: ${this.mainHeight}px;`;
       }
       return null;
+    },
+    disableCloseButton() {
+      return this.spec.disableCloseButton || Utils.type.isString(this.url);
     }
   },
   mounted() {
-    dialogs.push(this);
+    dialogs.value.push(this);
   },
   created() {
     this.onResize();
@@ -135,7 +137,7 @@ export default {
     close() {
       if (!this.isDirty()) {
         this.filePaster = null;
-        dialogs.remove(this);
+        dialogs.value.remove(this);
         this.model = false;
       }
     },
@@ -160,7 +162,6 @@ export default {
     show(reload) {
       const spec = this.spec;
       this.url ||= spec.url;
-      this.disableCloseButton = this.spec.disableCloseButton || Utils.type.isString(this.url);
 
       if (Utils.type.isString(this.url)) {
         if (!this.urlLoaded) {
@@ -178,12 +179,10 @@ export default {
                 this.urlLoaded = true;
                 this.message = "";
                 this.formSpec = response.fullPageForm;
-                this.disableCloseButton = this.spec.disableCloseButton || false;
                 this.updateContent(response);
               });
             },
             (error, response) => {
-              this.disableCloseButton = false;
               Utils.launch.snackbar.error(error.toString(), this);
             }
           );
@@ -193,7 +192,6 @@ export default {
         // this.body = this.spec.body;
 
         this.message = this.spec.message;
-        this.disableCloseButton = this.spec.disableCloseButton || false;
 
         this.updateContent(this.spec);
       }
@@ -205,6 +203,7 @@ export default {
       this.header = response.header;
       this.body = response.body;
       this.footer = response.footer;
+      this.spec.disableCloseButton = response.disableCloseButton;
 
       // Make sure action only executes after the content has finished populating.
       this.$nextTick(() => {

package/package.json

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

package/store.js

@@ -1,4 +1,4 @@
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
 import { useDirtyState } from './components/composable/dirtyState';
 import Action from "./action";
 
@@ -26,11 +26,14 @@ export const vueApp = reactive({
 
 export const jsonView = reactive({ page: window.__page });
 
-export const dialogs = reactive([]);
+export const dialogs = ref([]);
 
-export const closeAllDialog = () => dialogs.forEach((dialog) => dialog.model = false);
+export const closeAllDialog = () => {
+    dialogs.value.forEach((dialog) => dialog.model = false);
+    dialogs.value = [];
+};
 
-export const ctx = () => dialogs.slice(-1)[0] || vueApp;
+export const ctx = () => dialogs.value.slice(-1)[0] || vueApp;
 
 export const glibevent = reactive({
     onbeforewindowsopen: null,
@@ -44,7 +47,14 @@ function glibEventHandler(e) {
         Action.execute(onUnload, {});
     }
 
-    return !isDirty();
+    if (e) {
+        if (ctx().isFormDirty && !ctx().isFormSubmitted) {
+            e.preventDefault();
+        }
+    } else {
+        return !isDirty();
+    }
+
 }
 export const watchGlibEvent = () => {
     window.onbeforeunload = glibEventHandler;

package/utils/http.js

@@ -81,7 +81,7 @@ export default class {
       const htmlUrl = Utils.url.htmlUrl(properties["url"]);
 
       Utils.http.execute(properties, "GET", component, (data, response) => {
-        const pushHistory = windowMode ? true : !Utils.type.isObject(dialogs.last());
+        const pushHistory = windowMode ? true : !Utils.type.isObject(dialogs.value.last());
         // TODO: Check if it is okay to remove this `if` statement so we always push even if it's the same URL.
         if (forcePushHistory || (htmlUrl !== currentUrl && pushHistory)) {
           const redirectUrl = Utils.url.htmlUrl(response.url);

package/utils/launch.js

@@ -93,7 +93,7 @@ class LaunchDialog {
 
 
   static topDialog() {
-    return dialogs.last();
+    return dialogs.value.last();
   }
 
   static open(properties, component) {
@@ -122,13 +122,13 @@ class LaunchDialog {
   }
 
   static reload(properties, component) {
-    Utils.type.ifObject(dialogs.last(), dialog => {
+    Utils.type.ifObject(dialogs.value.last(), dialog => {
       dialog.reload(properties);
     });
   }
 
   static close(properties, component) {
-    Utils.type.ifObject(dialogs.last(), dialog => {
+    Utils.type.ifObject(dialogs.value.last(), dialog => {
       dialog.close();
     });
 

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

@@ -1,8 +0,0 @@
-describe('components set', () => {
-  it('populate select options', () => {
-    cy.visit('http://localhost:3000/glib/json_ui_garage?path=views%2Fcomponents_set')
-    cy.get('.pages-body .v-btn').eq(0).click()
-    cy.get('.fields-select').eq(0).click()
-    cy.get('.v-overlay__content > .v-list').should('contain.text', 'Option1')
-  })
-})

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

@@ -1,9 +0,0 @@
-describe('pick country and region', () => {
-  it('autopopulate region', () => {
-    cy.visit('http://localhost:3000/glib/json_ui_garage?path=forms%2Fpickers')
-    cy.get('.fields-select').eq(0).click()
-    cy.get('.v-overlay__content > .v-list').contains('Australia').click()
-    cy.get('.fields-select').eq(1).click()
-    cy.get('.v-overlay__content > .v-list').should('contain.text', 'ACT')
-  })
-})

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

@@ -1,57 +0,0 @@
-describe('input select', () => {
-  it('produce value', () => {
-    const result = `Method: POST
-Form Data:
-{
-  "city": "canberra",
-  "cities": [
-    "melbourne",
-    "sydney"
-  ],
-  "language": "nl",
-  "languages": [
-    "ja",
-    "de"
-  ],
-  "empty_default": "",
-  "nil_default": "",
-  "mixed_default": [
-    "",
-    "specified",
-    ""
-  ],
-  "time_zone": "Asia/Jakarta"
-}`
-
-    cy.visit('http://localhost:3000/glib/json_ui_garage?path=forms%2Fselects')
-    cy.contains('Submit').click()
-    cy.get('.unformatted').should('contain.text', result)
-  })
-
-  it('produce value (empty)', () => {
-    const result = `Method: POST
-Form Data:
-{
-  "city": "",
-  "cities": [
-    ""
-  ],
-  "language": "",
-  "languages": [
-    ""
-  ],
-  "empty_default": "",
-  "nil_default": "",
-  "mixed_default": [
-    ""
-  ],
-  "time_zone": ""
-}`
-
-    cy.visit('http://localhost:3000/glib/json_ui_garage?path=forms%2Fselects')
-    cy.get('.v-field__clearable').click({ multiple: true })
-    cy.contains('Submit').click()
-
-    cy.get('.unformatted').should('contain.text', result)
-  })
-})