clickgo 6.6.0 → 6.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clickgo",
-  "version": "6.6.0",
+  "version": "6.7.1",
   "description": "Background interface, software interface, mobile phone APP interface operation library.",
   "type": "module",
   "keywords": [

package/test/dock-lifecycle.mjs

@@ -8,7 +8,8 @@ const sizeUnwatches = [];
 
 globalThis.document = {
     'documentElement': {
-        'clientWidth': 360
+        'clientWidth': 360,
+        'clientHeight': 800
     }
 };
 
@@ -32,6 +33,14 @@ class AbstractControl {
         return Boolean(this.props[name]);
     }
 
+    propNumber(name) {
+        return Number(this.props[name]);
+    }
+
+    parentByName(name) {
+        return this.parents?.[name] ?? null;
+    }
+
     emit() {}
 }
 
@@ -56,6 +65,9 @@ const clickgo = new SyntheticModule(['control', 'dom'], function() {
         },
         isRtl(element) {
             return element.rtl;
+        },
+        index(element) {
+            return element.order;
         }
     });
 });
@@ -146,6 +158,10 @@ group.dock = {
 group.updateFloatLayout();
 assert.equal(group.floatMaxWidth, 280, 'LTR left Dock must use only the viewport space on its right');
 assert.equal(group.floatStyle['max-width'], '280px');
+assert.equal(group.floatStyle.height, undefined, 'short floating panels must size to their content');
+group.props.grow = true;
+assert.equal(group.floatStyle.height, '300px', 'grow floating panels fill the available height');
+group.props.grow = false;
 
 group.element.rtl = true;
 areaRect.left = 320;
@@ -159,14 +175,106 @@ areaRect.right = 40;
 group.updateFloatLayout();
 assert.equal(group.floatMaxWidth, 320, 'RTL right Dock must open toward the viewport space on its right');
 
+group.element.rtl = false;
+group.dock.getFloatBounds = () => ({ 'left': 30, 'right': 330, 'top': 60, 'bottom': 220 });
+areaRect.left = 300;
+areaRect.right = 340;
+group.updateFloatLayout();
+assert.equal(group.floatMaxWidth, 270, 'floating panels must stay inside their Form, not only the viewport');
+assert.equal(group.floatMaxHeight, '160px');
+assert.equal(group.floatTop, 60);
+group.dock.positionData = 'left';
+group.updateFloatLayout();
+assert.equal(group.floatMaxWidth, 0, 'zero available width must remain zero rather than use a fallback');
+assert.equal(group.floatStyle['max-width'], '0px');
+
+const columnMod = new SourceTextModule(await readFile(new URL('../dist/sources/control/dock-column/code.js', import.meta.url), 'utf8'));
+await columnMod.link(() => clickgo);
+await columnMod.evaluate();
+const DockColumn = columnMod.namespace.default;
+
+document.documentElement.clientWidth = 1200;
+document.documentElement.clientHeight = 900;
+const multiForm = {
+    'element': {
+        'isConnected': true,
+        'offsetWidth': 1100,
+        'getBoundingClientRect': () => ({ 'left': 60, 'right': 1160, 'top': 30, 'bottom': 930 })
+    }
+};
+const multiDock = new Dock(multiForm, 600);
+await multiDock.onMounted();
+assert.deepEqual(multiDock.getFloatBounds(), { 'left': 60, 'right': 1160, 'top': 30, 'bottom': 900 });
+
+const projectColumn = new DockColumn(multiForm, 600);
+const mainColumn = new DockColumn(multiForm, 600);
+projectColumn.parents = mainColumn.parents = { 'dock': multiDock };
+projectColumn.element = { 'order': 0 };
+mainColumn.element = { 'order': 1 };
+projectColumn.props.width = 220;
+mainColumn.props.width = 340;
+// Child groups mount before their column: both columns must allocate through the same root.
+const projectIndex = projectColumn.registerGroup();
+const mainIndex = mainColumn.registerGroup();
+assert.notEqual(projectIndex, mainIndex);
+await projectColumn.onMounted();
+await mainColumn.onMounted();
+assert.equal(projectColumn.expandedData, true);
+assert.equal(mainColumn.expandedData, true);
+
+function resizeMultiForm(width) {
+    multiForm.element.offsetWidth = width;
+    multiDock.access.formSizeWatch.handler();
+}
+resizeMultiForm(850);
+assert.equal(projectColumn.autoCollapsed, true, 'the auxiliary column collapses first');
+assert.equal(mainColumn.autoCollapsed, false, 'keep the main column open when it still fits');
+assert.equal(projectColumn.expandedPreference, true, 'automatic collapse must preserve user preference');
+assert.equal(projectColumn.props.expanded, true);
+assert.match(multiDock.widthComp, /var\(--dock-collapsed-width\).*340px/);
+
+resizeMultiForm(650);
+assert.equal(projectColumn.expandedData, false);
+assert.equal(mainColumn.expandedData, false, 'collapse the main column too when workspace space is insufficient');
+resizeMultiForm(1100);
+assert.equal(projectColumn.expandedData, true);
+assert.equal(mainColumn.expandedData, true);
+
+document.documentElement.clientWidth = 600;
+multiDock.access.viewportSizeWatch.handler();
+assert.equal(projectColumn.expandedData, false);
+assert.equal(mainColumn.expandedData, false, 'viewport clipping must also limit multiple expanded columns');
+document.documentElement.clientWidth = 1200;
+multiDock.access.viewportSizeWatch.handler();
+assert.equal(mainColumn.expandedData, true);
+projectColumn.toggle();
+assert.equal(projectColumn.expandedPreference, false);
+resizeMultiForm(650);
+resizeMultiForm(1100);
+assert.equal(projectColumn.expandedData, false, 'a column the user closed must remain closed after resizing');
+assert.equal(mainColumn.expandedData, true);
+
+multiDock.toggleFloat(projectIndex);
+multiDock.toggleFloat(mainIndex);
+assert.equal(multiDock.floatGroup, mainIndex, 'only one floating group may be open across columns');
+mainColumn.unregisterGroup(mainIndex);
+assert.equal(multiDock.floatGroup, -1);
+multiDock.toggleFloat(projectIndex);
+projectColumn.onUnmounted();
+assert.equal(multiDock.columns.length, 1);
+assert.equal(multiDock.floatGroup, -1, 'column removal closes its floating panel');
+mainColumn.onUnmounted();
+multiDock.onUnmounted();
+
 const dockStyle = await readFile(new URL('../dist/sources/control/dock/style.scss', import.meta.url), 'utf8');
 assert.match(dockStyle, /border-inline-end/, 'left Dock border must follow the inline end edge');
 assert.match(dockStyle, /border-inline-start/, 'right Dock border must follow the inline start edge');
-assert.match(dockStyle, /:dir\(rtl\)[\s\S]*scaleX\(-1\)/, 'Dock chevron must mirror in RTL');
+const toggleStyle = await readFile(new URL('../dist/sources/control/sidebar-toggle/style.scss', import.meta.url), 'utf8');
+assert.match(toggleStyle, /:dir\(rtl\)[\s\S]*scaleX\(-1\)/, 'shared sidebar chevron must mirror in RTL');
 
 const groupStyle = await readFile(new URL('../dist/sources/control/dock-group/style.scss', import.meta.url), 'utf8');
 assert.match(groupStyle, /inset-inline-start:\s*100%/, 'left Dock floating panel must open toward inline end');
 assert.match(groupStyle, /inset-inline-end:\s*100%/, 'right Dock floating panel must open toward inline start');
 assert.match(groupStyle, /max-width:\s*calc\(100vw - 40px\)/, 'floating panel must reserve the collapsed Dock width');
 
-console.log('Dock lifecycle, RTL layout and viewport-bound floating-panel checks passed.');
+console.log('Dock lifecycle, multiple columns, preference restoration, RTL and Form/viewport bounds passed.');

package/test/locale-integrity.mjs

@@ -140,7 +140,7 @@ for (const path of localeSources) {
         tables.push({ ...table, path });
     }
 }
-assert.equal(tables.length, 24, 'all 24 built-in TypeScript locale tables must be present');
+assert.equal(tables.length, 26, 'all 26 built-in TypeScript locale tables must be present');
 for (const { node, path, line } of tables) {
     const tableCodes = node.properties.map(getPropertyName);
     assert.deepEqual([...tableCodes].sort(), [...codes].sort(), `${path}:${line} must contain exactly 16 locale entries`);
@@ -186,4 +186,4 @@ const demoLocaleCodes = [...demoLocaleData.matchAll(/'([^']+)'/g)].map((match) =
 assert.deepEqual(demoLocaleCodes, codes, 'demo global locale selector must expose all 16 locales in registry order');
 
 dom.window.close();
-console.log('Locale registry, 24 TypeScript tables, 16 task app locale JSON files and the Demo selector are complete.');
+console.log(`Locale registry, ${tables.length} TypeScript tables, 16 task app locale JSON files and the Demo selector are complete.`);

package/test/rtl-archive.mjs

@@ -14,12 +14,12 @@ const codes = [
 /** --- 包含 localeData 的全部内置控件 --- */
 const localeControls = [
     'arteditor', 'calendar', 'captcha', 'date', 'datepanel', 'daterange', 'empty', 'jodit', 'label',
-    'levelselect', 'map', 'monaco', 'number', 'page', 'palette', 'property', 'select', 'text', 'tuieditor',
+    'levelselect', 'map', 'monaco', 'number', 'page', 'palette', 'property', 'select', 'sidebar-toggle', 'text', 'toolbox', 'tuieditor',
 ];
 /** --- 合并到 common.cgc 的多语言控件 --- */
 const commonControls = new Set([
     'calendar', 'date', 'datepanel', 'daterange', 'empty', 'label', 'levelselect', 'number', 'palette',
-    'select', 'text',
+    'select', 'sidebar-toggle', 'text', 'toolbox',
 ]);
 /** --- 全部内置主题 --- */
 const themes = ['admin', 'cyber', 'dark', 'light', 'modern', 'modern-light', 'compact-dark', 'compact-light'];
@@ -335,7 +335,7 @@ for (const code of codes) {
     }
 }
 
-// --- 19 个控件的归档语言表必须与 TypeScript 源码一致 ---
+// --- 所有多语言控件的归档语言表必须与 TypeScript 源码一致 ---
 const archivedControlCode = new Map();
 for (const control of localeControls) {
     const packageName = commonControls.has(control) ? 'common' : control;
@@ -365,6 +365,10 @@ const rtlCodeChecks = [
     ['dist/control/common.cgc', 'date', ['autoPosition', 'autoScroll']],
     ['dist/control/common.cgc', 'daterange', ['autoPosition', 'autoScroll']],
     ['dist/control/common.cgc', 'dock-group', ['isRtl', 'floatMaxWidth']],
+    ['dist/control/common.cgc', 'dock', ['updateColumns', 'getFloatBounds']],
+    ['dist/control/common.cgc', 'dock-column', ['registerGroup', 'expandedPreference']],
+    ['dist/control/common.cgc', 'toolbox', ['getBoundingClientRect', 'toggleColumns']],
+    ['dist/control/common.cgc', 'sidebar-toggle', ['chevronRight', 'tipLabelComp', 'update:expanded']],
     ['dist/control/table.cgc', 'table', ['localeDirection', 'getScrollLeft', 'setScrollInlineOffset']],
     ['dist/control/desc.cgc', 'desc', ['getScrollInlineOffset', 'setScrollInlineOffset']],
     ['dist/control/iconview.cgc', 'iconview', ['isRtl']],
@@ -387,8 +391,11 @@ const rtlStyleChecks = [
     ['dist/control/common.cgc', 'list/style.css', 'dist/sources/control/list/style.css', [':dir(rtl)', 'margin-inline-end']],
     ['dist/control/common.cgc', 'tab/style.css', 'dist/sources/control/tab/style.css', ['border-inline-start-width', 'border-inline-end-width']],
     ['dist/control/common.cgc', 'timeline/style.css', 'dist/sources/control/timeline/style.css', ['border-inline-start']],
-    ['dist/control/common.cgc', 'dock/style.css', 'dist/sources/control/dock/style.css', [':dir(rtl)', 'border-inline-end']],
+    ['dist/control/common.cgc', 'dock/style.css', 'dist/sources/control/dock/style.css', ['border-inline-end']],
     ['dist/control/common.cgc', 'dock-group/style.css', 'dist/sources/control/dock-group/style.css', ['inset-inline-start', 'max-width:calc(100vw - 40px)']],
+    ['dist/control/common.cgc', 'dock-column/style.css', 'dist/sources/control/dock-column/style.css', ['border-inline-start']],
+    ['dist/control/common.cgc', 'toolbox/style.css', 'dist/sources/control/toolbox/style.css', ['border-inline-end']],
+    ['dist/control/common.cgc', 'sidebar-toggle/style.css', 'dist/sources/control/sidebar-toggle/style.css', [':dir(rtl)', 'border-bottom', '--sidebar-toggle-background']],
     ['dist/control/table.cgc', 'table/style.css', 'dist/sources/control/table/style.css', ['border-inline-end', 'inset-inline-end']],
     ['dist/control/xterm.cgc', 'xterm/style.css', 'dist/sources/control/xterm/style.css', ['direction:ltr']],
 ];
@@ -417,4 +424,4 @@ for (const theme of themes) {
     );
 }
 
-console.log(`Archive check passed: task.cga has 16 locales, 19 control locale tables are current, and RTL output is present in all ${themes.length} themes.`);
+console.log(`Archive check passed: task.cga has 16 locales, ${localeControls.length} control locale tables are current, and RTL output is present in all ${themes.length} themes.`);

package/test/sidebar-toggle.mjs

@@ -0,0 +1,75 @@
+// Run after TypeScript compilation: node --experimental-vm-modules test/sidebar-toggle.mjs
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import { SourceTextModule, SyntheticModule } from 'node:vm';
+
+class AbstractControl {
+    constructor() {
+        this.emitted = [];
+        this.locale = 'sc';
+    }
+    propBoolean(name) {
+        return [true, 'true', ''].includes(this.props[name]);
+    }
+    l(key) {
+        return this.localeData[this.locale][key];
+    }
+    emit(name, value) {
+        this.emitted.push([name, value]);
+    }
+}
+
+const clickgo = new SyntheticModule(['control'], function() {
+    this.setExport('control', { AbstractControl });
+});
+const mod = new SourceTextModule(await readFile(new URL('../dist/sources/control/sidebar-toggle/code.js', import.meta.url), 'utf8'));
+await mod.link(() => clickgo);
+await mod.evaluate();
+const SidebarToggle = mod.namespace.default;
+const toggle = new SidebarToggle();
+
+for (const [position, expanded, pointsRight] of [
+    ['left', false, true], ['left', true, false], ['right', false, false], ['right', true, true],
+]) {
+    toggle.props.position = position;
+    toggle.props.expanded = expanded;
+    assert.equal(toggle.chevronRight, pointsRight, `${position}, expanded=${expanded}`);
+}
+
+toggle.props.expanded = 'false';
+toggle.props.label = 'Project';
+assert.equal(toggle.tipLabelComp, '展开侧栏 · Project');
+toggle.props.expanded = 'true';
+assert.equal(toggle.tipLabelComp, '收起侧栏 · Project');
+toggle.locale = 'ar';
+assert.equal(toggle.tipLabelComp, 'طي الشريط الجانبي · Project');
+toggle.props.tipLabel = 'Use one tool column';
+assert.equal(toggle.tipLabelComp, 'Use one tool column', 'Toolbox keeps its column-specific operation');
+
+for (const key of ['Enter', ' ']) {
+    toggle.props.expanded = false;
+    const count = toggle.emitted.length;
+    let prevented = false;
+    let stopped = false;
+    const event = {
+        key, 'repeat': false,
+        'preventDefault': () => { prevented = true; },
+        'stopPropagation': () => { stopped = true; },
+    };
+    toggle.keydown(event);
+    assert.equal(prevented && stopped, true);
+    assert.deepEqual(toggle.emitted[count], ['update:expanded', true]);
+    assert.equal(toggle.props.expanded, false, 'the owner applies the requested state');
+    toggle.keydown({ ...event, 'repeat': true });
+    assert.equal(toggle.emitted.length, count + 1, 'holding a key must not repeatedly flip the sidebar');
+}
+toggle.keydown({
+    'key': 'Tab',
+    'preventDefault': () => assert.fail('Tab keeps native focus navigation'),
+    'stopPropagation': () => assert.fail('Other keys are not consumed'),
+});
+toggle.props.expanded = true;
+toggle.toggle();
+assert.deepEqual(toggle.emitted.at(-1), ['update:expanded', false]);
+
+console.log('Shared sidebar toggle direction, localized tips, controlled state and keyboard activation passed.');

package/test/toolbox.mjs

@@ -0,0 +1,88 @@
+// Run after TypeScript compilation: node --experimental-vm-modules test/toolbox.mjs
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import { SourceTextModule, SyntheticModule } from 'node:vm';
+import { JSDOM } from 'jsdom';
+
+const dom = new JSDOM('<div id="tools"></div>');
+globalThis.HTMLElement = dom.window.HTMLElement;
+const tools = dom.window.document.getElementById('tools');
+class AbstractControl {
+    constructor() {
+        this.refs = { tools };
+        this.emitted = [];
+    }
+    emit(name, value) {
+        this.emitted.push([name, value]);
+    }
+    propNumber(name) {
+        return Number(this.props[name]);
+    }
+    watch(name, callback, options) {
+        if (options?.immediate) {
+            callback();
+        }
+    }
+}
+const clickgo = new SyntheticModule(['control'], function() {
+    this.setExport('control', { AbstractControl });
+});
+const mod = new SourceTextModule(await readFile(new URL('../dist/sources/control/toolbox/code.js', import.meta.url), 'utf8'));
+await mod.link(() => clickgo);
+await mod.evaluate();
+const Toolbox = mod.namespace.default;
+const toolbox = new Toolbox();
+toolbox.props.columns = '2';
+toolbox.onMounted();
+assert.equal(toolbox.columnsData, 2);
+toolbox.toggleColumns();
+assert.equal(toolbox.columnsData, 1);
+assert.deepEqual(toolbox.emitted, [['update:columns', 1]]);
+
+function button(x, y, { disabled = false, hidden = false } = {}) {
+    const item = dom.window.document.createElement('div');
+    item.setAttribute('data-cg-control', 'button');
+    item.setAttribute('role', 'button');
+    item.setAttribute('tabindex', '0');
+    if (disabled) {
+        item.setAttribute('data-cg-disabled', '');
+    }
+    Object.defineProperty(item, 'offsetHeight', { 'value': hidden ? 0 : 24 });
+    item.getBoundingClientRect = () => ({ 'left': x, 'top': y, 'width': 24, 'height': 24 });
+    tools.append(item);
+    return item;
+}
+// A one-tool group precedes a two-column group; DOM index arithmetic would pick the wrong row.
+const browse = button(0, 0);
+const paint = button(0, 40);
+const erase = button(30, 40);
+button(0, 80, { 'disabled': true });
+button(30, 80, { 'hidden': true });
+const select = button(0, 120);
+
+function move(from, key, expected) {
+    from.focus();
+    let prevented = false;
+    toolbox.keydown({ 'target': from, key, 'preventDefault': () => { prevented = true; } });
+    assert.equal(prevented, true);
+    assert.equal(dom.window.document.activeElement, expected, key);
+}
+move(browse, 'ArrowDown', paint);
+move(paint, 'ArrowRight', erase);
+move(erase, 'ArrowLeft', paint);
+move(paint, 'ArrowDown', select);
+move(select, 'Home', browse);
+move(browse, 'End', select);
+move(browse, 'ArrowUp', browse);
+
+// RTL changes the rendered physical positions; navigation must follow those positions.
+paint.getBoundingClientRect = () => ({ 'left': 30, 'top': 40, 'width': 24, 'height': 24 });
+erase.getBoundingClientRect = () => ({ 'left': 0, 'top': 40, 'width': 24, 'height': 24 });
+move(paint, 'ArrowLeft', erase);
+move(erase, 'ArrowRight', paint);
+
+const outside = dom.window.document.createElement('div');
+outside.setAttribute('data-cg-control', 'button');
+outside.setAttribute('role', 'button');
+toolbox.keydown({ 'target': outside, 'key': 'ArrowDown', 'preventDefault': () => assert.fail('header/outside buttons are not tools') });
+console.log('Toolbox column binding and keyboard navigation across groups, hidden/disabled tools and RTL passed.');