glib-web 5.0.6 → 6.0.0

package/components/fields/multiUpload.vue

@@ -2,8 +2,8 @@
   <div v-if="loadIf" :style="$styles()" :class="$classes()">
     <div ref="container" class="gdrop-file border-[2px]" @click="handleClick" @drop="handleDrop" @dragover="handleDragOver"
       @dragleave="handleDragLeave">
-      <input ref="fileSelect" :name="props.spec.directUploadUrl ? '' : fieldName" type="file" multiple
-        style="display: none">
+      <input ref="fileSelect" :name="props.spec.directUploadUrl ? '' : fieldName" type="file"
+        :multiple="isMultiple" style="display: none">
 
       <div class="cloud" style="pointer-events: none;">
         <VIcon ref="icon" size="48" class="icon">cloud_upload</VIcon>
@@ -87,6 +87,8 @@ export default defineComponent({
 
     const uploadTitle = props.spec.uploadTitle || 'File added';
 
+    const isMultiple = computed(() => props.spec.multiple ?? true);
+
     const files = ref({});
 
     function initFiles(fls) {
@@ -138,14 +140,9 @@ export default defineComponent({
 
     function handleDrop(e) {
       e.preventDefault();
-      uploader.uploadFiles(
-        {
-          droppedFiles: e.dataTransfer.files,
-          files: files,
-          spec: props.spec,
-          container: container
-        }
-      );
+      const droppedFiles = isMultiple.value ? e.dataTransfer.files : [e.dataTransfer.files[0]].filter(Boolean);
+      if (!isMultiple.value) files.value = {};
+      uploader.uploadFiles({ droppedFiles, files, spec: props.spec, container });
 
       e.currentTarget.classList.remove('border-[4px]');
       container.value.classList.add('border-[2px]');
@@ -182,16 +179,11 @@ export default defineComponent({
       }
     }
 
-    function handleClick(e) {
+    function handleClick() {
       const onchange = () => {
-        uploader.uploadFiles(
-          {
-            droppedFiles: e.target.files,
-            files: files,
-            spec: props.spec,
-            container: container
-          }
-        );
+        const selectedFiles = isMultiple.value ? fileSelect.value.files : [fileSelect.value.files[0]].filter(Boolean);
+        if (!isMultiple.value) files.value = {};
+        uploader.uploadFiles({ droppedFiles: selectedFiles, files, spec: props.spec, container });
       };
 
       fileSelect.value.onchange = onchange;
@@ -201,6 +193,7 @@ export default defineComponent({
     useGlibInput({ props, cacheValue: false });
 
     return {
+      isMultiple,
       files,
       fileSelect,
       container,

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');
+  });
+});