vgapp 1.4.8 → 1.5.0

package/app/modules/vgdynamictable/js/expandable.js

@@ -1,248 +0,0 @@
-class Expandable {
-    constructor(table, params = {}) {
-        this._table = table;
-        this._params = params && typeof params === 'object' ? params : {};
-        this._collapsed = new Set();
-        this._boundClick = this._handleClick.bind(this);
-        this._initialized = false;
-    }
-
-    init() {
-        if (!this._isEnabled() || this._initialized) {
-            return;
-        }
-        this._table.addEventListener('click', this._boundClick);
-        this._initialized = true;
-        this.refresh();
-    }
-
-    destroy() {
-        if (!this._initialized) {
-            return;
-        }
-        this._table.removeEventListener('click', this._boundClick);
-        this._initialized = false;
-    }
-
-    refresh() {
-        if (!this._isEnabled()) {
-            return;
-        }
-
-        const rows = this._getRows();
-        if (!rows.length) {
-            return;
-        }
-
-        this._resetExpandHidden(rows);
-        this._rememberBaseVisibility(rows);
-
-        const idAttr = this._getIdAttr();
-        const parentAttr = this._getParentAttr();
-        const rowById = new Map();
-        const parentById = new Map();
-        const childrenByParent = new Map();
-
-        rows.forEach((row, index) => {
-            const fallbackId = `row-${index + 1}`;
-            const rowId = String(row.getAttribute(idAttr) || fallbackId).trim() || fallbackId;
-            row.setAttribute(idAttr, rowId);
-            rowById.set(rowId, row);
-
-            const parentId = String(row.getAttribute(parentAttr) || '').trim();
-            parentById.set(rowId, parentId);
-            if (parentId) {
-                if (!childrenByParent.has(parentId)) {
-                    childrenByParent.set(parentId, []);
-                }
-                childrenByParent.get(parentId).push(rowId);
-            }
-        });
-
-        const depthCache = new Map();
-        const getDepth = (rowId) => {
-            if (depthCache.has(rowId)) {
-                return depthCache.get(rowId);
-            }
-            const parentId = String(parentById.get(rowId) || '').trim();
-            if (!parentId) {
-                depthCache.set(rowId, 0);
-                return 0;
-            }
-            if (!rowById.has(parentId) || parentId === rowId) {
-                depthCache.set(rowId, 0);
-                return 0;
-            }
-            const depth = Math.max(0, getDepth(parentId) + 1);
-            depthCache.set(rowId, depth);
-            return depth;
-        };
-
-        const isAncestorCollapsed = (rowId) => {
-            let parentId = String(parentById.get(rowId) || '').trim();
-            while (parentId) {
-                if (this._collapsed.has(parentId)) {
-                    return true;
-                }
-                parentId = String(parentById.get(parentId) || '').trim();
-            }
-            return false;
-        };
-
-        rowById.forEach((row, rowId) => {
-            const depth = getDepth(rowId);
-            row.setAttribute('data-expand-depth', String(depth));
-            row.style.setProperty('--vgdt-expand-depth', String(depth));
-
-            const hasChildren = childrenByParent.has(rowId) && childrenByParent.get(rowId).length > 0;
-            const seeded = row.getAttribute('data-expand-seeded') === '1';
-            if (hasChildren && !seeded) {
-                if (this._isInitiallyCollapsed(row)) {
-                    this._collapsed.add(rowId);
-                }
-                row.setAttribute('data-expand-seeded', '1');
-            }
-            this._syncToggleNode(row, rowId, hasChildren);
-
-            const baseHidden = row.getAttribute('data-expand-base-hidden') === '1';
-            const collapseHidden = isAncestorCollapsed(rowId);
-            const nextHidden = baseHidden || collapseHidden;
-            row.hidden = nextHidden;
-            if (collapseHidden) {
-                row.setAttribute('data-expand-hidden', '1');
-            } else {
-                row.removeAttribute('data-expand-hidden');
-            }
-        });
-    }
-
-    _handleClick(event) {
-        const toggleSelector = this._getToggleSelector();
-        const rawTarget = event.target || null;
-        const target = rawTarget && rawTarget.nodeType === 3 ? rawTarget.parentElement : rawTarget;
-        const toggle = target && target.closest ? target.closest(toggleSelector) : null;
-        if (!toggle || !this._table.contains(toggle)) {
-            return;
-        }
-        event.preventDefault();
-
-        const row = toggle.closest('tr');
-        if (!row) {
-            return;
-        }
-        const rowId = String(row.getAttribute(this._getIdAttr()) || '').trim();
-        if (!rowId) {
-            return;
-        }
-
-        const collapsed = !this._collapsed.has(rowId);
-        if (collapsed) {
-            this._collapsed.add(rowId);
-        } else {
-            this._collapsed.delete(rowId);
-        }
-        this.refresh();
-
-        const payload = {
-            id: rowId,
-            collapsed,
-            row,
-        };
-        if (typeof this._params.onToggle === 'function') {
-            this._params.onToggle(payload);
-        }
-    }
-
-    _syncToggleNode(row, rowId, hasChildren) {
-        const selector = this._getToggleSelector();
-        let toggle = row.querySelector(selector);
-        if (!toggle && hasChildren) {
-            const firstCell = row.cells && row.cells[0] ? row.cells[0] : null;
-            if (firstCell) {
-                toggle = document.createElement('button');
-                toggle.type = 'button';
-                toggle.className = 'vgdt-expand-toggle';
-                toggle.setAttribute('data-expand-toggle', '1');
-                firstCell.prepend(toggle);
-            }
-        }
-        if (!toggle) {
-            return;
-        }
-
-        // Keep visual spacing stable even if CSS bundle is outdated.
-        toggle.style.marginInlineEnd = '10px';
-        toggle.style.cursor = 'pointer';
-
-        const nextNode = toggle.nextSibling;
-        const hasLeadingSpace = nextNode
-            && nextNode.nodeType === 3
-            && /^\s/.test(String(nextNode.textContent || ''));
-        if (!hasLeadingSpace) {
-            toggle.after(document.createTextNode(' '));
-        }
-
-        toggle.setAttribute('data-expand-toggle', rowId);
-        toggle.setAttribute('aria-expanded', this._collapsed.has(rowId) ? 'false' : 'true');
-        toggle.hidden = !hasChildren;
-        if (!hasChildren) {
-            return;
-        }
-        const collapsed = this._collapsed.has(rowId);
-        toggle.textContent = collapsed ? '+' : '−';
-    }
-
-    _getRows() {
-        const body = this._table.tBodies && this._table.tBodies[0];
-        if (!body) {
-            return [];
-        }
-        return Array.from(body.rows).filter((row) => !row.querySelector('[data-table-state]'));
-    }
-
-    _resetExpandHidden(rows) {
-        rows.forEach((row) => {
-            if (row.getAttribute('data-expand-hidden') === '1') {
-                row.hidden = false;
-                row.removeAttribute('data-expand-hidden');
-            }
-        });
-    }
-
-    _rememberBaseVisibility(rows) {
-        rows.forEach((row) => {
-            row.setAttribute('data-expand-base-hidden', row.hidden ? '1' : '0');
-        });
-    }
-
-    _isInitiallyCollapsed(row) {
-        const attr = row.getAttribute('data-expand-collapsed');
-        if (attr !== null) {
-            return this._isTruthy(attr);
-        }
-        return Boolean(this._params.collapsed);
-    }
-
-    _isEnabled() {
-        return Boolean(this._params.enable);
-    }
-
-    _getIdAttr() {
-        return String(this._params.idAttr || 'data-expand-id').trim() || 'data-expand-id';
-    }
-
-    _getParentAttr() {
-        return String(this._params.parentAttr || 'data-expand-parent-id').trim() || 'data-expand-parent-id';
-    }
-
-    _getToggleSelector() {
-        return String(this._params.toggleSelector || '[data-expand-toggle]').trim() || '[data-expand-toggle]';
-    }
-
-    _isTruthy(value) {
-        const normalized = String(value || '').toLowerCase().trim();
-        return normalized !== '' && normalized !== '0' && normalized !== 'false' && normalized !== 'off' && normalized !== 'no';
-    }
-}
-
-export default Expandable;

package/app/modules/vgdynamictable/js/filters.js

@@ -1,450 +0,0 @@
-import {normalizeNonNegativeInt, safeQuerySelector} from "./utils/common";
-
-class Filters {
-    constructor(options = {}) {
-        this._options = Object.assign({
-            enabled: true,
-            formSelector: '',
-            formNode: null,
-            debounceMs: 300,
-            applyMode: 'auto', // auto | manual
-            button: {
-                apply: '[data-filter-apply]',
-                reset: '[data-filter-reset]',
-            },
-            fieldAttr: 'data-filter-field',
-            partAttr: 'data-filter-part',
-            typeAttr: 'data-filter-type',
-            valueAttr: 'data-filter-value',
-            operatorAttr: 'data-filter-operator',
-            defaultOperator: 'eq',
-            skipEmpty: true,
-            trimValues: true,
-            emitOnInit: false,
-            initialValues: {},
-            onChange: null,
-            onReset: null,
-        }, options);
-
-        this._form = null;
-        this._timer = null;
-        this._controls = [];
-        this._boundInput = this._handleInput.bind(this);
-        this._boundChange = this._handleChange.bind(this);
-        this._boundClick = this._handleClick.bind(this);
-        this._boundSubmit = this._handleSubmit.bind(this);
-    }
-
-    init() {
-        if (!this._options.enabled) {
-            return;
-        }
-
-        const form = this._resolveFormNode();
-        if (!form) {
-            return;
-        }
-
-        this._form = form;
-        this._syncCachedNodes();
-        this._form.addEventListener('input', this._boundInput);
-        this._form.addEventListener('change', this._boundChange);
-        this._form.addEventListener('click', this._boundClick);
-        this._form.addEventListener('submit', this._boundSubmit);
-
-        this.setValues(this._options.initialValues || {}, { emit: false });
-        if (this._options.emitOnInit) {
-            this._emit();
-        }
-    }
-
-    destroy() {
-        if (!this._form) {
-            return;
-        }
-        this._form.removeEventListener('input', this._boundInput);
-        this._form.removeEventListener('change', this._boundChange);
-        this._form.removeEventListener('click', this._boundClick);
-        this._form.removeEventListener('submit', this._boundSubmit);
-        this._form = null;
-        clearTimeout(this._timer);
-        this._timer = null;
-        this._controls = [];
-    }
-
-    getState() {
-        return this._collectState();
-    }
-
-    getValues() {
-        return this._collectState().params;
-    }
-
-    getFields() {
-        const unique = new Set();
-        this._getControls().forEach((control) => {
-            const field = this._getField(control);
-            if (field) {
-                unique.add(field);
-            }
-        });
-        return Array.from(unique);
-    }
-
-    setValues(nextValues = {}, options = {}) {
-        if (!this._form) {
-            return;
-        }
-        this._getControls().forEach((control) => {
-            const field = this._getField(control);
-            if (!field) {
-                return;
-            }
-            const part = this._getPart(control);
-            const key = part === 'operator' ? `${field}_op` : field;
-            const hasOwn = Object.prototype.hasOwnProperty.call(nextValues, key);
-            const nextValue = hasOwn ? nextValues[key] : '';
-            this._setControlValue(control, nextValue);
-        });
-        if (options.emit) {
-            this._emit();
-        }
-    }
-
-    _resolveFormNode() {
-        if (this._options.formNode && this._options.formNode.nodeType === 1) {
-            return this._options.formNode;
-        }
-        const selector = String(this._options.formSelector || '').trim();
-        if (!selector) {
-            return null;
-        }
-        return safeQuerySelector(selector);
-    }
-
-    _handleInput(event) {
-        if (!this._isFilterControl(event.target)) {
-            return;
-        }
-        if (this._isManualMode()) {
-            return;
-        }
-        const type = String(event.target.type || '').toLowerCase();
-        if (type === 'checkbox' || type === 'radio' || event.target.tagName === 'SELECT') {
-            this._emit();
-            return;
-        }
-        clearTimeout(this._timer);
-        this._timer = setTimeout(() => this._emit(), normalizeNonNegativeInt(this._options.debounceMs, 300));
-    }
-
-    _handleChange(event) {
-        if (!this._isFilterControl(event.target)) {
-            return;
-        }
-        if (this._isManualMode()) {
-            return;
-        }
-        clearTimeout(this._timer);
-        this._emit();
-    }
-
-    _handleClick(event) {
-        if (!this._form) {
-            return;
-        }
-        const button = this._options.button || {};
-        const applySelector = String(button.apply || '[data-filter-apply]').trim();
-        const resetSelector = String(button.reset || '[data-filter-reset]').trim();
-
-        const applyButton = applySelector ? event.target.closest(applySelector) : null;
-        if (applyButton) {
-            event.preventDefault();
-            clearTimeout(this._timer);
-            this._emit();
-            return;
-        }
-
-        const resetButton = resetSelector ? event.target.closest(resetSelector) : null;
-        if (!resetButton) {
-            return;
-        }
-        event.preventDefault();
-        this._reset();
-        if (typeof this._options.onReset === 'function') {
-            this._options.onReset();
-        }
-        clearTimeout(this._timer);
-        this._emit();
-    }
-
-    _handleSubmit(event) {
-        if (!this._isManualMode()) {
-            return;
-        }
-        event.preventDefault();
-        clearTimeout(this._timer);
-        this._emit();
-    }
-
-    _emit() {
-        if (!this._form || typeof this._options.onChange !== 'function') {
-            return;
-        }
-        this._options.onChange(this._collectState());
-    }
-
-    _collectState() {
-        const groups = new Map();
-        this._getControls().forEach((control) => {
-            const field = this._getField(control);
-            if (!field) {
-                return;
-            }
-            if (!groups.has(field)) {
-                groups.set(field, {
-                    field,
-                    type: this._getType(control),
-                    operator: this._getStaticOperator(control),
-                    value: '',
-                    values: [],
-                });
-            }
-            const item = groups.get(field);
-            const part = this._getPart(control);
-            const value = this._readControlValue(control);
-            const controlType = String(control.type || '').toLowerCase();
-            if (part === 'operator') {
-                item.operator = String(value || '').trim() || item.operator || this._getDefaultOperator();
-                return;
-            }
-            if (part === 'type') {
-                item.type = String(value || '').trim() || item.type || 'text';
-                return;
-            }
-            // Ignore unchecked radio/checkbox values so they do not wipe selected values in a group.
-            if ((controlType === 'checkbox' || controlType === 'radio') && value === '') {
-                return;
-            }
-            if (Array.isArray(value)) {
-                item.values = value.slice();
-                item.value = item.values.join(',');
-                return;
-            }
-            item.value = value;
-        });
-
-        const filters = {};
-        const params = {};
-        groups.forEach((item, field) => {
-            const normalized = this._normalizeFilterItem(item);
-            if (!normalized) {
-                return;
-            }
-            filters[field] = normalized;
-
-            if (normalized.values.length > 0) {
-                params[field] = normalized.values.slice();
-            } else {
-                params[field] = normalized.value;
-            }
-            if (normalized.operator) {
-                params[`${field}_op`] = normalized.operator;
-            }
-        });
-
-        return {
-            filters,
-            params,
-            fields: Object.keys(filters),
-            meta: {
-                count: Object.keys(filters).length,
-            },
-        };
-    }
-
-    _normalizeFilterItem(item) {
-        const type = String(item.type || 'text').trim() || 'text';
-        const operator = String(item.operator || this._getDefaultOperator()).trim();
-        let value = item.value;
-        let values = Array.isArray(item.values) ? item.values.slice() : [];
-
-        if (this._options.trimValues) {
-            if (typeof value === 'string') {
-                value = value.trim();
-            }
-            values = values.map((entry) => String(entry || '').trim()).filter((entry) => entry !== '');
-        }
-
-        if (this._options.skipEmpty) {
-            const isEmptyArray = values.length === 0;
-            const isEmptyValue = value === undefined || value === null || String(value) === '';
-            if (isEmptyArray && isEmptyValue) {
-                return null;
-            }
-        }
-
-        return {
-            field: String(item.field || '').trim(),
-            type,
-            operator,
-            value: value === undefined || value === null ? '' : value,
-            values,
-        };
-    }
-
-    _setControlValue(control, nextValue) {
-        const type = String(control.type || '').toLowerCase();
-        if (type === 'checkbox') {
-            const normalized = String(nextValue || '').toLowerCase();
-            control.checked = normalized === String(control.value || '').toLowerCase()
-                || normalized === '1'
-                || normalized === 'true'
-                || normalized === 'on';
-            return;
-        }
-        if (type === 'radio') {
-            control.checked = String(control.value || '') === String(nextValue || '');
-            return;
-        }
-        if (control.tagName === 'SELECT' && control.multiple) {
-            const rawValues = Array.isArray(nextValue)
-                ? nextValue
-                : String(nextValue || '').split(',');
-            const selected = new Set(rawValues
-                .map((value) => String(value || '').trim())
-                .filter((value) => value !== ''));
-            Array.from(control.options || []).forEach((option) => {
-                option.selected = selected.has(String(option.value || '').trim());
-            });
-            return;
-        }
-        control.value = String(nextValue || '');
-    }
-
-    _readControlValue(control) {
-        if (control.tagName === 'SELECT' && control.multiple) {
-            return Array.from(control.selectedOptions || [])
-                .map((option) => String(option.value || '').trim())
-                .filter((value) => value !== '');
-        }
-        const type = String(control.type || '').toLowerCase();
-        if (type === 'checkbox') {
-            return control.checked ? (control.value || '1') : '';
-        }
-        if (type === 'radio') {
-            return control.checked ? (control.value || '') : '';
-        }
-        return String(control.value || '');
-    }
-
-    _syncCachedNodes() {
-        if (!this._form) {
-            this._controls = [];
-            return;
-        }
-        const attr = this._getFieldAttr();
-        this._controls = Array.from(this._form.querySelectorAll(`[${attr}]`))
-            .filter((control) => this._isSupportedControl(control));
-    }
-
-    _getControls() {
-        if (!this._form) {
-            return [];
-        }
-        if (!Array.isArray(this._controls) || this._controls.length === 0) {
-            this._syncCachedNodes();
-        }
-        return this._controls;
-    }
-
-    _reset() {
-        this._getControls().forEach((control) => {
-            const type = String(control.type || '').toLowerCase();
-            if (type === 'checkbox' || type === 'radio') {
-                control.checked = false;
-                return;
-            }
-            if (control.tagName === 'SELECT') {
-                if (control.multiple) {
-                    Array.from(control.options || []).forEach((option) => {
-                        option.selected = false;
-                    });
-                    return;
-                }
-                control.selectedIndex = 0;
-                return;
-            }
-            control.value = '';
-        });
-    }
-
-    _getFieldAttr() {
-        return String(this._options.fieldAttr || 'data-filter-field').trim() || 'data-filter-field';
-    }
-
-    _getPartAttr() {
-        return String(this._options.partAttr || 'data-filter-part').trim() || 'data-filter-part';
-    }
-
-    _getTypeAttr() {
-        return String(this._options.typeAttr || 'data-filter-type').trim() || 'data-filter-type';
-    }
-
-    _getValueAttr() {
-        return String(this._options.valueAttr || 'data-filter-value').trim() || 'data-filter-value';
-    }
-
-    _getOperatorAttr() {
-        return String(this._options.operatorAttr || 'data-filter-operator').trim() || 'data-filter-operator';
-    }
-
-    _getDefaultOperator() {
-        return String(this._options.defaultOperator || 'eq').trim() || 'eq';
-    }
-
-    _getField(control) {
-        return String(control.getAttribute(this._getFieldAttr()) || '').trim();
-    }
-
-    _getPart(control) {
-        const part = String(control.getAttribute(this._getPartAttr()) || 'value').toLowerCase().trim();
-        if (part === 'operator' || part === 'type') {
-            return part;
-        }
-        return 'value';
-    }
-
-    _getType(control) {
-        const type = String(control.getAttribute(this._getTypeAttr()) || '').toLowerCase().trim();
-        return type || 'text';
-    }
-
-    _getStaticOperator(control) {
-        const operator = String(control.getAttribute(this._getOperatorAttr()) || '').trim();
-        return operator || '';
-    }
-
-    _isFilterControl(node) {
-        return Boolean(
-            node
-            && this._isSupportedControl(node)
-            && typeof node.getAttribute === 'function'
-            && String(node.getAttribute(this._getFieldAttr()) || '').trim() !== ''
-        );
-    }
-
-    _isSupportedControl(node) {
-        if (!node || typeof node.tagName !== 'string') {
-            return false;
-        }
-        const tag = String(node.tagName || '').toUpperCase();
-        return tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA';
-    }
-    _isManualMode() {
-        const mode = String(this._options.applyMode || 'auto').toLowerCase().trim();
-        return mode === 'manual';
-    }
-}
-
-export default Filters;