glib-web 5.0.7 → 6.0.0

package/.claude/commands/gen-cypress-test.md

@@ -0,0 +1,101 @@
+Generate a Cypress e2e test for a glib test page by visiting it with Playwright, observing its interactive elements, and writing a test file following project conventions.
+
+## Arguments
+
+`$ARGUMENTS` — either a test page slug (e.g. `file_upload`) or a full URL.
+
+## Steps
+
+### 1. Resolve the URL
+
+If `$ARGUMENTS` looks like a full URL (starts with `http`), use it as-is.
+Otherwise treat it as a test page slug and build the URL:
+```
+http://localhost:3000/glib/json_ui_garage?path=test_page%2F<slug>
+```
+
+### 2. Visit the page with Playwright and observe it
+
+Use the Playwright MCP browser tools in this order:
+
+1. **Navigate** to the resolved URL.
+2. **Take a screenshot** to see the initial page state.
+3. **Snapshot** the accessibility tree to discover all interactive elements (buttons, links, inputs, selects, checkboxes).
+4. Ignore the left-side navigation menu entirely — do not interact with or assert on it.
+5. For every interactive element in the main page content area, interact with it one at a time (revisiting the page between interactions to reset state). Cover all element types:
+   - **Buttons** — click each one.
+   - **Text inputs / textareas** — type a representative value, then trigger any associated action (e.g. submit button).
+   - **File inputs** — note the accepted file types from the input's `accept` attribute or surrounding labels, then trigger any associated action.
+   - **Selects / dropdowns** — choose a non-default option.
+   - **Checkboxes / radio buttons / switches** — toggle them.
+   - **Other clickable elements** — chips, tabs, icon buttons, etc.
+   After each interaction:
+   - Take a screenshot.
+   - Snapshot the DOM to detect what changed: text content, new elements appearing, visibility changes, URL changes. Note the actual rendered text and HTML structure rather than component class names.
+6. If an interaction opens a dialog/sheet/overlay, interact with all elements nested inside it and record those interactions too.
+7. After observing all interactions, **close the browser**.
+
+### 3. Derive the output file path
+
+- If given a slug, the filename is the slug converted from `snake_case` to `camelCase` + `.cy.js`.
+  - Example: `file_upload_new` → `fileUploadNew.cy.js`
+- If given a full URL, extract a meaningful slug from the `path=` query param or the last path segment.
+- Output path: `cypress/e2e/glib-web/<filename>`
+
+### 4. Check for an existing test file
+
+Before generating anything, check if `cypress/e2e/glib-web/<filename>` already exists.
+
+- **If it does not exist** — proceed to step 5 in "new file" mode.
+- **If it exists** — read it, identify the scenarios already covered by existing `it` blocks, then ask the user:
+  > "Found existing `<filename>`. Overwrite it entirely, or append only the new scenarios not yet covered?"
+  Wait for the user's answer before continuing.
+
+### 5. Generate the Cypress test
+
+Write only the content appropriate for the chosen mode.
+
+**New file** — produce a complete file:
+
+```js
+import { testPageUrl } from "../../helper.js"
+
+const url = testPageUrl('<slug>')
+// or: const url = '<full_url>'
+
+describe('<slug or page name>', () => {
+  // one it block per logical scenario
+})
+```
+
+**Append** — produce only the new `it` blocks (no imports, no `describe` wrapper). Skip any scenario whose description already appears in the existing file.
+
+Rules for both modes:
+
+- One `it` block per logical scenario (one per button, or a small group of related interactions).
+- Each `it` block starts with `cy.visit(url)`.
+- Prefer `cy.contains('BUTTON_TEXT')` over `cy.contains('button', 'BUTTON_TEXT')`.
+- Assert from rendered HTML whenever possible — prefer what the user actually sees over component class names:
+  - Dialog/overlay opened → `cy.contains('DIALOG_TITLE_TEXT').should('be.visible')` (assert on visible text inside the dialog, not `.v-dialog`)
+  - Snackbar/toast appeared → `cy.contains('MESSAGE_TEXT').should('be.visible')` (assert on the message text, not `.v-snackbar`)
+  - Text updated → `cy.contains('new text').should('be.visible')` or `cy.get('#element_id').should('have.text', 'new text')`
+  - Element hidden/shown → `.should('not.be.visible')` / `.should('be.visible')`
+  - URL changed → `cy.location('pathname').should('eq', '/...')`
+  - No observable change → `cy.contains('BUTTON_TEXT').should('exist')` (smoke)
+  - Fall back to component class selectors (`.v-dialog`, `.v-snackbar`, etc.) only when no stable rendered text or semantic HTML attribute is available.
+- For file upload inputs, use `cy.fixture` and `.selectFile`:
+  - Check `cypress/fixtures/` for an existing file that matches the accepted type (e.g. `example.jpg`, `example.pdf`).
+  - If a suitable fixture exists, use it: `cy.get('input[type="file"]').selectFile('cypress/fixtures/<file>')`
+  - If no suitable fixture exists, create a minimal one in `cypress/fixtures/` (e.g. a small `.jpg`, `.png`, or `.pdf`) and use that.
+  - Never hardcode absolute paths — always use the `cypress/fixtures/` relative path form.
+- ASCII only — no special characters in strings.
+- Match the style of existing tests in `cypress/e2e/glib-web/`.
+
+### 6. Write the file and report
+
+- **New file**: write the full generated content to `cypress/e2e/glib-web/<filename>`.
+- **Append**: insert the new `it` blocks inside the existing `describe` block, before its closing `}`.
+
+After writing, report:
+- The file path.
+- A bullet list of every `it` block written, each with a one-line note on what it asserts (e.g. `"opens dialog with title X"`, `"shows snackbar 'Saved'"`).

package/.github/dependabot.yml

@@ -5,19 +5,31 @@ updates:
     schedule:
       interval: weekly
       day: monday
-    open-pull-requests-limit: 5
+      time: "09:00"
+      timezone: "Asia/Jakarta"
+    open-pull-requests-limit: 0
+    labels:
+      - "dependencies"
+      - "automated"
+    assignees:
+      - "ikhwanh"
+      - "hgani"
     ignore:
       # Major version bumps on framework deps need manual migration; review separately.
       - dependency-name: vite
-        update-types: ["version-update:semver-major"]
+        update-types: [ "version-update:semver-major" ]
       - dependency-name: vue
-        update-types: ["version-update:semver-major"]
+        update-types: [ "version-update:semver-major" ]
       - dependency-name: vuetify
-        update-types: ["version-update:semver-major"]
-      - dependency-name: eslint
-        update-types: ["version-update:semver-major"]
-      - dependency-name: cypress
-        update-types: ["version-update:semver-major"]
+        update-types: [ "version-update:semver-major" ]
+      - dependency-name: chart.js
+        update-types: [ "version-update:semver-major" ]
+      - dependency-name: lodash
+        update-types: [ "version-update:semver-major" ]
+      - dependency-name: lodash-es
+        update-types: [ "version-update:semver-major" ]
+      - dependency-name: v-phone-input
+        update-types: [ "version-update:semver-major" ]
     groups:
       vue:
         applies-to: version-updates
@@ -25,22 +37,20 @@ updates:
           - vue
           - vuetify
           - vuedraggable
-          - vue-chartkick
           - vue-social-sharing
           - v-phone-input
           - "@vitejs/plugin-vue"
           - eslint-plugin-vue
-      chart:
-        applies-to: version-updates
-        patterns:
           - chart.js
           - chartjs-*
+          - vue-chartkick
           - "@types/chart.js"
       cypress:
         applies-to: version-updates
         patterns:
           - cypress
           - "@cypress/*"
+          - vite-plugin-istanbul
       eslint:
         applies-to: version-updates
         patterns:
@@ -53,6 +63,8 @@ updates:
         patterns:
           - vite
           - vite-plugin-*
+        exclude-patterns:
+          - vite-plugin-istanbul
       lodash:
         applies-to: version-updates
         patterns:

package/.nycrc.json

@@ -25,6 +25,10 @@
     "templates/**",
     "utils/**"
   ],
+  "branches": 55,
+  "functions": 63,
+  "lines": 65,
+  "statements": 64,
   "exclude": [
     "actions/cables/*",
     "actions/analytics/*",

package/AGENTS.md

@@ -22,6 +22,7 @@
 - Read [behavior.md](doc/common/ai/behavior.md)
 
 ## Rules
+* Always use `yarn` instead of `npm` for package management and running scripts.
 * Always use `utils/type.js` to check types
   - For example, avoid checking against `undefined` manually.
 

package/README.md

@@ -89,6 +89,10 @@ view.chipGroup styleClasses: ['custom']
   - `bin/vite clobber`
   - `bin/vite dev`
 
+## Handling Dependabot Dependency Updates
+
+See [doc/dependabot.md](doc/dependabot.md).
+
 ## Prepare for publishing
 
 - Create a PR to the `master` branch

package/actions/logics/set.js

@@ -82,6 +82,11 @@ const isPresentOperator = function (value) {
 };
 jsonLogic.add_operation("isPresent", isPresentOperator);
 
+const strlen = function (value) {
+  return value ? String(value).length : 0;
+};
+jsonLogic.add_operation("strlen", strlen);
+
 function getFormData() {
   return Array.from(document.querySelectorAll('form')).reduce((prev, curr) => {
     const obj = _getFormData(curr);

package/actions/panels/scrollTo.js

@@ -31,12 +31,12 @@ export default class {
   scrollIfNeeded(element, spec, component, alignment) {
     const vm = this;
     const observerOptions = {
-      threshold: 1 // Trigger callback when 100% of the element becomes/unbecomes visible
+      threshold: 0.99 // Trigger callback when element is effectively fully visible (1.0 can miss due to sub-pixel rendering)
     };
     new IntersectionObserver(function([entry]) {
       const ratio = entry.intersectionRatio;
 
-      if (ratio < 1) {
+      if (ratio < 0.99) {
         // const place = ratio <= 0 && centerIfNeeded ? "center" : "nearest";
         const place = ratio <= 0 ? alignment : "nearest";
         element.scrollIntoView({

package/actions/timeouts/set.js

@@ -14,7 +14,7 @@ export default class {
       delete timerIds[timerId];
     }
 
-    let id = null;
+    let id;
     if (repeat) {
       id = setInterval(() => {
         this.onTimeout(properties, component);

package/app.vue

@@ -70,7 +70,6 @@ import { htmlElement } from "./components/helper";
 import { nextTick } from "vue";
 
 export default {
-  expose: ['updateMainHeight'],
   components: {
     "nav-layout": NavLayout,
     "panels-form": FormPanel,
@@ -79,6 +78,7 @@ export default {
   props: {
     page: { type: Object, required: true },
   },
+  expose: ['updateMainHeight'],
   setup(props) {
     const filePaster = computed(() => props.page.filePaster);
     usePasteable(filePaster);

package/components/charts/series.js

@@ -32,7 +32,7 @@ const installChartkick = () => {
 
 const multipleDataSeries = (dataSeries) => {
     return dataSeries.map((value) => {
-        let points = null;
+        let points;
         if (TypeUtils.isArray(value.points)) {
             points = value.points.reduce((prev, curr) => {
                 return Object.assign(prev, { [curr.x]: curr.y });
@@ -136,7 +136,7 @@ function useChart({ dataSeries, spec, multiple = true }) {
     const { datalabels, centerLabel, customTooltip } = spec.plugins || {};
     const legend = spec.legend || { display: true };
 
-    let series = null;
+    let series;
     if (multiple) {
         series = computed(() => multipleDataSeries(normalizedDataSeries));
     } else {

package/components/composable/gmap.js

@@ -17,7 +17,7 @@ export function useAutocomplete({ inputRef, options, onPlaceChanged }) {
   onMounted(async () => {
     await waitForGmapLoaded();
 
-    let inputElement = null;
+    let inputElement;
     if (inputRef.value instanceof HTMLElement) {
       inputElement = inputRef.value;
     } else {

package/components/composable/upload.js

@@ -33,12 +33,9 @@ function setBusyWhenUploading({ files }) {
 }
 
 function uploadFiles({ droppedFiles, files, spec, container, onAfterUploaded }) {
-  let { responseMessages } = spec;
-  responseMessages ||= {};
-
   if (!validateFiles({ newFiles: droppedFiles, spec, files })) return;
 
-  let key = '';
+  let key;
   for (let index = 0; index < droppedFiles.length; index++) {
     // show new dropped file and track progress
     key = makeKey();

package/components/composable/upload_nothing.js

@@ -6,7 +6,7 @@ function uploadFiles({ droppedFiles, files, spec, onAfterUploaded }) {
 
   if (!validateFiles({ newFiles: droppedFiles, files, spec })) return;
 
-  let key = '';
+  let key;
   files.value = {};
   for (let index = 0; index < droppedFiles.length; index++) {
     key = makeKey();

package/components/fields/_buttonDate.vue

@@ -104,6 +104,7 @@ export default {
         return;
       }
 
+      this.dateInput.focus();
       this.dateInput.showPicker();
     }
   }
@@ -143,8 +144,7 @@ export default {
     width: 100%;
     height: 100%;
     opacity: 0;
-    cursor: pointer;
-    z-index: 2;
+    pointer-events: none;
   }
 
   .calendar-icon {

package/components/fields/_patternText.vue

@@ -6,8 +6,8 @@
     <template v-else>
       <v-text-field ref="field" :color="gcolor" :label="spec.label" :hint="spec.hint" :readonly="spec.readOnly"
         :disabled="inputDisabled" :style="$styles()" :density="$classes().includes('compact') ? 'compact' : 'default'"
-        :clearable="spec.clearable" :variant="variant" validate-on="blur" persistent-placeholder :placeholder="spec.placeholder"
-        :value="format" @change="onChange" @click="openPicker" />
+        :clearable="spec.clearable" :variant="variant" validate-on="blur" persistent-placeholder
+        :placeholder="spec.placeholder" :value="format" @change="onChange" @click="openPicker" />
       <input ref="nativePicker" v-model="fieldModel" class="native-picker" :type="type" :name="fieldName"
         :min="sanitizeValue(spec.min)" :max="sanitizeValue(spec.max)" :value="sanitizeValue(fieldModel)"
         @change="handleNativeChange" />
@@ -41,12 +41,6 @@ export default {
     return { adapter, variant };
   },
   computed: {
-    isDateType() {
-      return this.type === 'date';
-    },
-    isDateTimeType() {
-      return this.type === 'datetime-local';
-    },
     format() {
       if (!isPresent(this.fieldModel)) return;
       if (!isPresent(this.spec.format)) {

package/components/fields/_select.vue

@@ -27,10 +27,8 @@
         <template v-if="spec.prependSelectAll">
           <v-list-item title="Select All" @click="checkAll">
             <template #prepend>
-              <v-list-item-action start>
-                <v-checkbox-btn color="primary" :indeterminate="isIndeterminate"
-                  :model-value="isAllSelected"></v-checkbox-btn>
-              </v-list-item-action>
+              <v-checkbox-btn color="primary" :indeterminate="isIndeterminate"
+                :model-value="isAllSelected"></v-checkbox-btn>
             </template>
           </v-list-item>
           <v-divider class="mt-2" :opacity="20"></v-divider>
@@ -69,6 +67,10 @@
 
     <input v-for="(item, index) in values" :key="index" type="hidden" :disabled="inputDisabled" :name="fieldName"
       :value="item" />
+
+    <select hidden aria-hidden="true">
+      <option v-for="(opt, i) in selectableOptions" :key="i" :value="opt.value">{{ opt.text }}</option>
+    </select>
   </div>
 </template>
 
@@ -364,6 +366,9 @@ export default {
     emptyValue() {
       return [null];
     },
+    selectableOptions() {
+      return this.normalizedOptions.filter(o => !o.divider && o.type !== 'view');
+    },
     density() {
       return determineDensity(this.spec.styleClasses);
     },
@@ -391,10 +396,7 @@ export default {
       // This can happen when spec.useChips is explicitly set to true while spec.multiple is false.
       // In this scenario, fieldModel is a single value (not an array), so we need to handle both cases.
       if (isArray(this.fieldModel)) {
-        const index = this.fieldModel.indexOf(item.value);
-        if (index >= 0) {
-          this.fieldModel.splice(index, 1);
-        }
+        this.fieldModel = this.fieldModel.filter(v => v !== item.value);
       } else {
         // Single select mode - clear the value
         this.fieldModel = null;

package/components/fields/_selectItemDefault.vue

@@ -1,9 +1,7 @@
 <template>
   <v-list-item v-bind="props.context" :disabled="props.item.raw.disabled">
     <template #prepend="{ isActive }">
-      <v-list-item-action v-if="props.spec.multiple" start>
-        <v-checkbox-btn :model-value="isActive"></v-checkbox-btn>
-      </v-list-item-action>
+      <v-checkbox-btn v-if="props.spec.multiple" :model-value="isActive"></v-checkbox-btn>
     </template>
   </v-list-item>
 </template>

package/components/fields/_selectItemWithIcon.vue

@@ -1,9 +1,7 @@
 <template>
   <v-list-item v-bind="props.context" :disabled="props.item.raw.disabled">
     <template #prepend="{ isActive }">
-      <v-list-item-action v-if="props.spec.multiple">
-        <v-checkbox-btn :model-value="isActive"></v-checkbox-btn>
-      </v-list-item-action>
+      <v-checkbox-btn v-if="props.spec.multiple" :model-value="isActive"></v-checkbox-btn>
       <glib-component :spec="itemIconSpec(props.item.raw.icon)" />
     </template>
   </v-list-item>

package/components/fields/_selectItemWithImage.vue

@@ -6,9 +6,7 @@
       </v-avatar>
     </template>
     <template #append="{ isActive }">
-      <v-list-item-action v-if="props.spec.multiple" start>
-        <v-checkbox-btn :model-value="isActive"></v-checkbox-btn>
-      </v-list-item-action>
+      <v-checkbox-btn v-if="props.spec.multiple" :model-value="isActive"></v-checkbox-btn>
     </template>
   </v-list-item>
 </template>

package/components/fields/clipboardUpload.vue

@@ -0,0 +1,115 @@
+<template>
+  <div ref="container" class="clipboard-upload">
+    <v-text-field :label="props.spec.label" :placeholder="props.spec.placeholder" :variant="props.spec.variant"
+      :loading="uploading" :model-value="fileName" readonly>
+      <template #append-inner>
+        <v-icon v-if="fileName" :disabled="uploading" style="cursor: pointer; pointer-events: auto" icon="cancel"
+          size="small" @click.stop="reset"></v-icon>
+      </template>
+      <template #append>
+        <v-icon :disabled="uploading" style="cursor: pointer; pointer-events: auto" icon="content_paste"
+          @click.stop="handlePasteClick"></v-icon>
+      </template>
+    </v-text-field>
+
+    <template v-if="props.spec.directUploadUrl">
+      <input v-for="(file, index) in Object.values(files)" :key="`hidden-${index}`" type="hidden" :name="fieldName"
+        :value="file.signedId">
+    </template>
+    <input v-if="!props.spec.directUploadUrl && fileName" type="hidden" :name="fieldName" :value="fileName">
+  </div>
+</template>
+
+<script>
+import GlibBase from "../base/glibBase.js";
+
+export default {
+  extends: GlibBase
+};
+</script>
+
+<script setup>
+import { computed, getCurrentInstance, nextTick, ref, watch } from "vue";
+import { useUploader } from "../composable/uploader";
+import { useFileUtils, useFilesState } from "../composable/file";
+import Action from "../../action";
+
+const props = defineProps(['spec']);
+const container = ref(null);
+const uploader = useUploader(props.spec);
+const instance = getCurrentInstance();
+const files = ref({});
+const { makeKey, Item } = useFileUtils();
+const { uploading, uploaded } = useFilesState(files);
+
+const fileName = computed(() => {
+  const items = Object.values(files.value);
+  if (items.length === 0) return '';
+  return items.map(f => f.name).filter(Boolean).join(', ');
+});
+
+files.value = (props.spec.files || []).reduce((prev, curr) => {
+  const key = makeKey();
+  prev[key] = new Item({
+    status: null,
+    url: curr.url,
+    name: curr.name,
+    signedId: curr.signed_id || curr.signedId || props.spec.value,
+    type: curr.type,
+    el: null
+  });
+  return prev;
+}, {});
+
+function uploadFileList(fileList) {
+  if (!fileList || fileList.length === 0) return;
+  const spec = props.spec;
+  const onAfterUploaded = () => {
+    Action.execute(spec.onFinishUpload, instance.ctx);
+  };
+  uploader.uploadFiles({ container, files, spec, onAfterUploaded, droppedFiles: fileList });
+}
+
+async function handlePasteClick() {
+  try {
+    const clipboardItems = await navigator.clipboard.read();
+    const fileItems = [];
+
+    for (const item of clipboardItems) {
+      for (const type of item.types) {
+        if (type.startsWith('image/')) {
+          const blob = await item.getType(type);
+          const ext = type.split('/')[1];
+          fileItems.push(new File([blob], `clipboard.${ext}`, { type }));
+        }
+      }
+    }
+
+    if (fileItems.length === 0) return;
+
+    const dt = new DataTransfer();
+    fileItems.forEach(f => dt.items.add(f));
+    uploadFileList(dt.files);
+  } catch {
+    // clipboard access denied or nothing to paste
+  }
+}
+
+if (props.spec.onFinishUpload) {
+  watch(uploaded, (val) => {
+    if (val) {
+      nextTick(() => Action.execute(props.spec.onFinishUpload, instance.ctx));
+    }
+  });
+}
+
+function trigger() {
+  handlePasteClick();
+}
+
+function reset() {
+  files.value = {};
+}
+
+defineExpose({ trigger, reset });
+</script>

package/components/fields/dynamicGroup2.vue

@@ -57,7 +57,7 @@ export default defineComponent({
 
     function prefixFieldName(index, fieldName) {
       if (fieldName.match(/\[|\]/g)) {
-        let suffix = '';
+        let suffix;
         const indexOfFirstBracket = fieldName.indexOf('[');
         if (indexOfFirstBracket > 0) {
           suffix = '[' + fieldName.slice(0, indexOfFirstBracket) + ']' + fieldName.slice(indexOfFirstBracket, fieldName.length);

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,