glib-web 5.0.7 → 6.0.0

package/components/fields/placeholderUpload.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="container" class="placeholder-view" @click="trigger">
-    <v-img v-if="props.spec.type == 'image' && !uploading" :style="style" :src="sourceUrl" />
+    <v-img v-if="props.spec.type == 'image' && !uploading" :src="sourceUrl" cover width="100%" />
     <v-avatar v-else-if="props.spec.type == 'avatar' && !uploading" :size="props.spec.width">
       <v-img :src="sourceUrl"></v-img>
     </v-avatar>
@@ -26,10 +26,11 @@ export default {
 
 <script setup>
 import { computed, ref, getCurrentInstance, watch, nextTick } from "vue";
-import { useFilesState } from "../composable/file";
+import { useFilesState, useFileUtils } from "../composable/file";
 import { useUploader } from "../composable/uploader";
 import Action from "../../action";
 
+const { makeKey, Item } = useFileUtils();
 const props = defineProps(['spec']);
 const files = ref({});
 const { uploading, uploaded } = useFilesState(files);
@@ -44,6 +45,8 @@ const inputRef = ref(null);
 const container = ref(null);
 const blobUrl = ref(undefined);
 const sourceUrl = computed(() => {
+  if (blobUrl.value === '') return '';
+
   return blobUrl.value || props.spec.url;
 });
 const style = computed(() => {
@@ -70,8 +73,8 @@ if (props.spec.onFinishUpload) {
 }
 
 function reset() {
-  files.value = {};
-  blobUrl.value = null;
+  files.value = { [makeKey()]: new Item({ signedId: '', status: null, el: null }) };
+  blobUrl.value = '';
   inputRef.value.value = null;
 }
 
@@ -86,5 +89,6 @@ defineExpose({ reset, trigger });
 .placeholder-view {
   width: 100%;
   cursor: pointer;
+  background-color: rgb(var(--v-theme-surface));
 }
 </style>

package/components/fields/radioGroup.vue

@@ -37,13 +37,6 @@ export default {
       };
     }
   },
-  methods: {
-    updateValue(variable) {
-      if (variable.value) {
-        this.fieldModel = variable.value;
-      }
-    },
-  },
 };
 </script>
 

package/components/fields/sign.vue

@@ -66,7 +66,7 @@ function upload() {
 }
 
 function penSource(e) {
-  let source = {};
+  let source;
   const touch = e.touches ? e.touches[0] : null;
   if (touch) {
     const canvasPos = e.target.getBoundingClientRect();

package/components/fields/text.vue

@@ -80,15 +80,7 @@ export default {
               ) ||
               "Must be a valid URL",
           ],
-        },
-        search: {
-          type: "url",
-          prependIcon: "search",
-          onRightIconClick: function () { },
-          rules: [
-            (v) => !v || /^\w+:\/\/[.-\w]+$/.test(v) || "Must be a valid URL",
-          ],
-        },
+        }
       },
     };
   },

package/components/fields/upload.vue

@@ -3,6 +3,7 @@
     <placeholderUpload v-if="props.spec.placeholderView" ref="realComp" :spec="childSpec" />
     <inputUpload v-else-if="props.spec.inputView" ref="realComp" :spec="childSpec" />
     <multiUpload v-else-if="props.spec.multiProgressView" ref="realComp" :spec="childSpec" />
+    <clipboardUpload v-else-if="props.spec.clipboardView" ref="realComp" :spec="childSpec" />
   </div>
 </template>
 
@@ -18,6 +19,7 @@ export default {
 import placeholderUpload from "./placeholderUpload.vue";
 import inputUpload from "./inputUpload.vue";
 import multiUpload from "./multiUpload.vue";
+import clipboardUpload from "./clipboardUpload.vue";
 
 import { computed, ref } from "vue";
 
@@ -31,6 +33,8 @@ const childSpec = computed(() => {
     return Object.assign({}, props.spec, { inputView: null }, props.spec.inputView);
   } else if (props.spec.multiProgressView) {
     return Object.assign({}, props.spec, { multiProgressView: null }, props.spec.multiProgressView);
+  } else if (props.spec.clipboardView) {
+    return Object.assign({}, props.spec, { clipboardView: null }, props.spec.clipboardView);
   }
 
   return props.spec;

package/components/mixins/longClick.js

@@ -7,7 +7,7 @@ export default ({ delay = 400, interval = 50 }) => ({
       if (compName) {
         warn += `Found in component '${compName}' `;
       }
-      console.warn(warn) // eslint-disable-line
+      console.warn(warn)  
       return;
     }
 

package/components/panels/bulkEdit2.vue

@@ -254,7 +254,7 @@ function handleCellChange(e, cell) {
   const rowId = cell.rowId;
   const columnId = cell.cellId;
 
-  let value = null;
+  let value;
   if (e.target instanceof HTMLInputElement) {
     value = e.target.value;
   } else {

package/components/panels/list.vue

@@ -145,7 +145,7 @@ export default {
         const section = this.sections[index] || {};
 
         if (!section.rows) {
-          this.$set(section, "rows", []);
+          section.rows = [];
         }
 
         Utils.type.ifArray(appendedSection.rows, (rows) => {

package/components/popover.vue

@@ -135,7 +135,7 @@ export default {
       }
     },
     handleClose(event) {
-      let element = null;
+      let element;
       if (this.$refs.container) {
         element = this.$refs.container.$el;
       } else {

package/components/responsive.vue

@@ -48,7 +48,7 @@ export default {
     },
     innerStyles() {
       const styles = {};
-      let align = null;
+      let align;
       switch (this.spec.align) {
         case "center":
           align = "center";

package/cypress/e2e/glib-web/dialog.cy.js

@@ -1,5 +1,4 @@
 import { testPageUrl } from "../../helper.js";
-import * as Type from "../../../utils/type.js";
 const url = testPageUrl('dialog');
 
 describe('dialog', () => {

package/cypress/e2e/glib-web/dirtyState.cy.js

@@ -1,76 +1,76 @@
-import { testPageUrl } from "../../helper.js"
-const url = testPageUrl('dirty_state')
-const prompt = 'Changes have not been saved. Are you sure you want to leave this page?'
+import { testPageUrl } from "../../helper.js";
+const url = testPageUrl('dirty_state');
+const prompt = 'Changes have not been saved. Are you sure you want to leave this page?';
 
 describe('dirtyState', () => {
   it('can be disabled', () => {
-    cy.visit(url)
+    cy.visit(url);
 
     cy.get('input[name="user[dirty_check_disabled]"]')
       .type('TEST TEST TEST')
-      .blur()
+      .blur();
 
-    cy.reload()
+    cy.reload();
 
-    cy.get('input[name="user[dirty_check_disabled]"]').should('be.empty')
-  })
+    cy.get('input[name="user[dirty_check_disabled]"]').should('be.empty');
+  });
 
   it('dirty if not equal to init value', () => {
-    cy.visit(url)
+    cy.visit(url);
 
     cy.contains('Male').click();
 
     cy.on('window:confirm', (str) => {
-      cy.then(() => expect(str).to.equal(prompt))
+      cy.then(() => expect(str).to.equal(prompt));
       return false;
-    })
+    });
 
-    cy.contains('fields_upload').click()
-    cy.contains('Female').click()
-    cy.contains('fields_upload').click() // Try to navigate to another page
-    cy.location('href').should('eq', testPageUrl('fields_upload'))
-  })
+    cy.contains('fields_upload').click({ force: true });
+    cy.contains('Female').click();
+    cy.contains('fields_upload').click({ force: true }); // Try to navigate to another page
+    cy.location('href').should('eq', testPageUrl('fields_upload'));
+  });
 
   it('have different context between window and dialog', () => {
-    cy.visit(url)
+    cy.visit(url);
 
-    cy.contains('Dialog Form').click()
+    cy.contains('Dialog Form').click();
 
-    cy.get('input[name="user[name]"]').click().type('John Doe')
+    cy.get('input[name="user[name]"]').click().type('John Doe');
 
-    cy.contains('cancel').click()
+    cy.contains('cancel').click();
 
     let text = '';
     cy.on('window:confirm', (str) => {
       text = str;
       return true;
-    })
+    });
 
-    cy.then(() => expect(text).to.equal(prompt))
+    cy.then(() => expect(text).to.equal(prompt));
 
-    cy.contains('fields_upload').click() // Try to navigate to another page
-    cy.location('href').should('eq', testPageUrl('fields_upload'))
-  })
+    cy.contains('fields_upload').click(); // Try to navigate to another page
+    cy.location('href').should('eq', testPageUrl('fields_upload'));
+  });
 
   it('pop on history back', () => {
-    cy.visit(testPageUrl('fields_upload'))
-    cy.contains('dirty_state').click()
+    cy.visit(testPageUrl('fields_upload'));
+    cy.contains('dirty_state').click();
 
-    cy.contains('choice2').click()
+    cy.contains('choice2').click();
 
-    cy.go('back')
-
-    let text = ''
+    let text = '';
     cy.on('window:confirm', (str) => {
       text = str;
       return false;
-    })
+    });
+
+    cy.go('back');
 
-    cy.then(() => expect(text).to.equal(prompt))
+    cy.wrap(null).should(() => expect(text).to.equal(prompt));
 
     // dirty state is removed after second try
-    cy.go('back')
+    cy.go('back');
 
-    cy.location('href').should('eq', testPageUrl('fields_upload'))
-  })
-})
+    cy.location('href').should('eq', testPageUrl('fields_upload'));
+  });
+});

package/cypress/e2e/glib-web/fieldsDateTime.cy.js

@@ -3,30 +3,38 @@ import { testPageUrl, withComponent } from "../../helper.js"
 const url = testPageUrl('fields_date_time')
 
 describe('fields_date_time', () => {
-  it('updates date actions', () => {
+  it('sets date to today + 1 week', () => {
     cy.visit(url)
 
     cy.contains('Set today + 1 week').click()
     cy.get('#date_status').should('contain.text', 'Date changed')
+  })
+
+  it('clears date', () => {
+    cy.visit(url)
 
     cy.contains('Clear date').click()
     cy.get('#date_status').should('contain.text', 'Date changed')
     cy.get('input[name="user[date_basic]"]').should('have.value', '')
   })
 
-  it('updates datetime actions', () => {
+  it('sets datetime to evening', () => {
     cy.visit(url)
 
     cy.contains('Set datetime (evening)').click()
     cy.get('#datetime_status').should('contain.text', 'Datetime changed')
     cy.get('input[name="user[datetime_basic]"]').should('have.value', '2024-12-12T18:45')
+  })
+
+  it('clears datetime', () => {
+    cy.visit(url)
 
     cy.contains('Clear datetime').click()
     cy.get('#datetime_status').should('contain.text', 'Datetime changed')
     cy.get('input[name="user[datetime_basic]"]').should('have.value', '')
   })
 
-  it('toggles templates and disabled state', () => {
+  it('disables and enables date', () => {
     cy.visit(url)
 
     cy.contains('Disable date').click()
@@ -34,6 +42,41 @@ describe('fields_date_time', () => {
 
     cy.contains('Enable date').click()
     cy.get('#date_basic').find('.v-input--disabled').should('not.exist')
+  })
+
+  it('opens datetime picker on click and reflects selected value', () => {
+    cy.visit(url)
+
+    cy.get('#datetime_basic').find('.v-field__input').click()
+    cy.get('#datetime_basic').find('.v-input--focused').should('exist')
+
+    cy.get('#datetime_basic').find('input.native-picker').then($el => {
+      const nativeSet = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set
+      nativeSet.call($el[0], '2024-12-20T14:30')
+      $el[0].dispatchEvent(new Event('input', { bubbles: true }))
+    })
+
+    cy.get('#datetime_basic').find('.v-field__input').should('have.value', '12/20/2024 14:30')
+    cy.get('input[name="user[datetime_basic]"]').should('have.value', '2024-12-20T14:30')
+  })
+
+  it('opens plain template picker on click and reflects selected value', () => {
+    cy.visit(url)
+
+    cy.get('#datetime_plain').find('.date-button').click()
+    cy.get('#datetime_plain').find('input.date-input').should('be.focused')
+
+    cy.get('#datetime_plain').find('input.date-input').then($el => {
+      const nativeSet = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set
+      nativeSet.call($el[0], '2026-03-15T10:00')
+      $el[0].dispatchEvent(new Event('input', { bubbles: true }))
+    })
+
+    cy.get('input[name="user[datetime_plain]"]').should('have.value', '2026-03-15T10:00')
+  })
+
+  it('switches datetime_plain between text and plain templates', () => {
+    cy.visit(url)
 
     cy.contains('Use text template').click()
     withComponent('datetime_plain', (comp) => {

package/cypress/e2e/glib-web/fieldsRadio.cy.js

@@ -0,0 +1,65 @@
+import { testPageUrl } from "../../helper.js";
+
+const url = testPageUrl('fields_radio');
+
+describe('fields_radio', () => {
+  it('selects Female in basic example and shows status changed', () => {
+    cy.visit(url);
+
+    cy.contains('Status: idle').should('be.visible');
+    cy.contains('Female').click();
+    cy.contains('Status: changed').should('be.visible');
+  });
+
+  it('programmatically sets Female then Male via action buttons', () => {
+    cy.visit(url);
+
+    cy.contains('Select Female').click();
+    cy.contains('Status: changed').should('be.visible');
+    cy.contains('Select Male').click();
+    cy.contains('Status: changed').should('be.visible');
+  });
+
+  it('clears basic example selection via Clear selection button', () => {
+    cy.visit(url);
+
+    cy.contains('Clear selection').click();
+    cy.contains('Status: changed').should('be.visible');
+  });
+
+  it('shows Phone number field when Phone is selected in onChangeAndLoad', () => {
+    cy.visit(url);
+
+    cy.contains('.v-field-label--floating', 'Email address').scrollIntoView().should('be.visible');
+    cy.contains('Phone').click();
+    cy.contains('.v-field-label--floating', 'Phone number').scrollIntoView().should('be.visible');
+    cy.contains('.v-field-label--floating', 'Email address').should('not.exist');
+  });
+
+  it('restores Email address field when Email is re-selected', () => {
+    cy.visit(url);
+
+    cy.contains('Phone').click();
+    cy.contains('.v-field-label--floating', 'Phone number').scrollIntoView().should('be.visible');
+    cy.contains('Email').click();
+    cy.contains('.v-field-label--floating', 'Email address').scrollIntoView().should('be.visible');
+    cy.contains('.v-field-label--floating', 'Phone number').should('not.exist');
+  });
+
+  it('toggles I agree single-option radio and submits form', () => {
+    cy.visit(url);
+
+    cy.contains('I agree to the terms and conditions').click();
+    cy.contains('Submit').click();
+    cy.contains('Method: POST').should('be.visible');
+    cy.contains('"agree": "yes"').should('be.visible');
+  });
+
+  it('submits form without I agree and agree is absent from form data', () => {
+    cy.visit(url);
+
+    cy.contains('Submit').click();
+    cy.contains('Method: POST').should('be.visible');
+    cy.contains('"agree"').should('not.exist');
+  });
+});

package/cypress/e2e/glib-web/fieldsSelect.cy.js

@@ -1,82 +1,122 @@
-import { testPageUrl } from "../../helper.js"
+import { testPageUrl } from "../../helper.js";
 
-const url = testPageUrl('fields_select')
-
-const getSelectComponent = () =>
-  cy.window().then((win) => {
-    const comp = win.GLib.component.findById('select_media')
-    expect(comp).to.exist
-    return comp
-  })
+const url = testPageUrl('fields_select');
 
 describe('fields_select', () => {
   it('updates option variants', () => {
-    cy.visit(url)
-
-    cy.contains('Use icon options').click()
-    getSelectComponent().then((comp) => {
-      expect(comp.spec.options).to.have.length(4)
-      expect(comp.spec.options[0].icon.name).to.eq('star')
-      expect(comp.spec.multiple).to.not.eq(true)
-      expect(comp.spec.useChips).to.not.eq(true)
-    })
-
-    cy.contains('Use image options').click()
-    getSelectComponent().then((comp) => {
-      expect(comp.spec.options).to.have.length(4)
-      expect(comp.spec.options[0].imageUrl).to.contain('select-1')
-      expect(comp.spec.multiple).to.not.eq(true)
-      expect(comp.spec.useChips).to.not.eq(true)
-    })
-
-    cy.contains('Text only').click()
-    getSelectComponent().then((comp) => {
-      expect(comp.spec.options).to.have.length(4)
-      expect(comp.spec.options[0].icon).to.be.undefined
-      expect(comp.spec.options[0].imageUrl).to.be.undefined
-      // expect(comp.spec.value).to.eq('option3')
-      expect(comp.spec.multiple).to.not.eq(true)
-      expect(comp.spec.useChips).to.not.eq(true)
-    })
-
-    cy.contains('Multiple + chips').click()
-    getSelectComponent().then((comp) => {
-      expect(comp.spec.options).to.have.length(4)
-      expect(comp.spec.options[0].icon.name).to.eq('star')
-      // expect(comp.spec.value).to.deep.equal(['option1', 'option3'])
-      expect(comp.spec.multiple).to.eq(true)
-      expect(comp.spec.useChips).to.eq(true)
-    })
-  })
+    cy.visit(url);
+
+    cy.contains('Use icon options').click();
+    cy.get('#select_media select[hidden] option').should('have.length', 4);
+    cy.get('#select_media').click();
+    cy.get('body').type('{esc}');
+    cy.get('#select_media .v-select--multiple').should('not.exist');
+    cy.get('#select_media .v-chip').should('not.exist');
+
+    cy.contains('Use image options').click();
+    cy.get('#select_media select[hidden] option').should('have.length', 4);
+    cy.get('#select_media').click();
+    cy.get('.v-overlay--active .v-list-item').first().find('img').should('have.attr', 'src').and('contain', 'select-1');
+    cy.get('body').type('{esc}');
+    cy.get('#select_media .v-select--multiple').should('not.exist');
+    cy.get('#select_media .v-chip').should('not.exist');
+
+    cy.contains('Text only').click();
+    cy.get('#select_media select[hidden] option').should('have.length', 4);
+    cy.get('#select_media').click();
+    cy.get('.v-overlay--active .v-list-item').first().find('.v-icon').should('not.exist');
+    cy.get('.v-overlay--active .v-list-item').first().find('img').should('not.exist');
+    cy.get('body').type('{esc}');
+    cy.get('#select_media .v-select--multiple').should('not.exist');
+    cy.get('#select_media .v-chip').should('not.exist');
+
+    cy.contains('Multiple + chips').click();
+    cy.get('#select_media select[hidden] option').should('have.length', 4);
+    cy.get('#select_media').click();
+    cy.get('body').type('{esc}');
+    cy.get('#select_media .v-select--multiple').should('exist');
+    cy.get('#select_media .v-chip').should('exist');
+  });
+
+  it('selects all options in multiple mode', () => {
+    cy.on('uncaught:exception', (err) => {
+      if (err.message.includes('ResizeObserver')) return false;
+    });
+
+    cy.visit(url);
+
+    cy.contains('Multiple + chips').click();
+    cy.get('#select_media').click();
+    cy.get('.v-list-item').contains('Option 2').click();
+    cy.get('.v-list-item').contains('Option 4').click();
+    cy.get('body').type('{esc}');
+
+    cy.get('#select_media input[type="hidden"]').should('have.length', 4);
+    cy.get('#select_media input[type="hidden"]').eq(0).should('have.value', 'option1');
+    cy.get('#select_media input[type="hidden"]').eq(1).should('have.value', 'option3');
+    cy.get('#select_media input[type="hidden"]').eq(2).should('have.value', 'option2');
+    cy.get('#select_media input[type="hidden"]').eq(3).should('have.value', 'option4');
+  });
+
+  it('removes one chip from multiple selection', () => {
+    cy.visit(url);
+
+    cy.contains('Multiple + chips').click();
+    cy.get('#select_media').contains('.v-chip', 'Option 1').should('exist');
+    cy.get('#select_media').contains('.v-chip', 'Option 1').find('[data-testid="close-chip"]').click();
+    cy.get('#select_media').contains('.v-chip', 'Option 1').should('not.exist');
+    cy.get('#select_media input[type="hidden"][value="option1"]').should('not.exist');
+  });
+
+  it('collapses expanded chips back to overflow state', () => {
+    cy.on('uncaught:exception', (err) => {
+      if (err.message.includes('ResizeObserver')) return false;
+    });
+
+    cy.visit(url);
+
+    cy.contains('Multiple + chips').click();
+
+    // Initial collapsed state: overflow chip shows "X more"
+    cy.get('#select_media .expansion-chip').should('contain.text', 'more');
+    cy.get('#select_media').contains('.expansion-chip', 'Show less').should('not.exist');
+
+    // Expand: click the "X more" chip
+    cy.get('#select_media .expansion-chip').click();
+    cy.get('body').type('{esc}');
+
+    // Expanded state: "Show less" chip is visible, "X more" is gone
+    cy.get('#select_media .expansion-chip').should('contain.text', 'Show less');
+    cy.get('#select_media').contains('.expansion-chip', 'more').should('not.exist');
+
+    // Collapse: click "Show less" (calls collapseChips)
+    cy.get('#select_media .expansion-chip').click();
+    cy.get('body').type('{esc}');
+
+    // Back to collapsed state
+    cy.get('#select_media .expansion-chip').should('contain.text', 'more');
+    cy.get('#select_media').contains('.expansion-chip', 'Show less').should('not.exist');
+  });
 
   it('toggles disabled and resets options', () => {
-    cy.visit(url)
-
-    cy.contains('Disable select').click()
-    getSelectComponent().then((comp) => {
-      expect(comp.spec.disabled).to.eq(true)
-    })
-    cy.get('#select_media').find('.v-input--disabled').should('exist')
-
-    cy.contains('Enable select').click()
-    getSelectComponent().then((comp) => {
-      expect(comp.spec.disabled).to.not.eq(true)
-    })
-    cy.get('#select_media').find('.v-input--disabled').should('not.exist')
-
-    cy.contains('Empty options').click()
-    getSelectComponent().then((comp) => {
-      expect(comp.spec.options).to.have.length(0)
-    })
-
-    cy.contains('Restore defaults').click()
-    getSelectComponent().then((comp) => {
-      expect(comp.spec.options).to.have.length(4)
-      expect(comp.spec.options[0].icon.name).to.eq('star')
-      expect(comp.fieldModel).to.eq('option1')
-      expect(comp.spec.disabled).to.not.eq(true)
-      expect(comp.spec.multiple).to.not.eq(true)
-      expect(comp.spec.useChips).to.not.eq(true)
-    })
-  })
-})
+    cy.visit(url);
+
+    cy.contains('Disable select').click();
+    cy.get('#select_media').find('.v-input--disabled').should('exist');
+
+    cy.contains('Enable select').click();
+    cy.get('#select_media').find('.v-input--disabled').should('not.exist');
+
+    cy.contains('Empty options').click();
+    cy.get('#select_media select[hidden] option').should('have.length', 0);
+
+    cy.contains('Restore defaults').click();
+    cy.get('#select_media select[hidden] option').should('have.length', 4);
+    cy.get('#select_media').click();
+    cy.get('body').type('{esc}');
+    cy.get('#select_media input[type="hidden"]').should('have.length', 1).and('have.value', 'option1');
+    cy.get('#select_media .v-input--disabled').should('not.exist');
+    cy.get('#select_media .v-select--multiple').should('not.exist');
+    cy.get('#select_media .v-chip').should('not.exist');
+  });
+});