clickgo 6.5.1 → 6.5.2

package/doc/clickgo-rag.md

@@ -1711,7 +1711,7 @@ cell 之间的间距，默认 0。
 ## dock
 ---
 
-桌面软件侧栏停靠容器。负责展开、收起和浮动显示，与 `dock-group`、`dock-item` 搭配使用；业务内容由 Form/Panel 的局部应用组件提供。当所属 Form 宽度小于 `600px` 时，Dock 会自动进入不可展开的收起模式，并在空间恢复后回到 `expanded` 指定的状态。
+桌面软件侧栏停靠容器。负责展开、收起和浮动显示，与 `dock-group`、`dock-item` 搭配使用；业务内容由 Form/Panel 的局部应用组件提供。当所属 Form 宽度小于 `600px` 时，Dock 会自动进入不可展开的收起模式，并在空间恢复后回到 `expanded` 指定的状态。收起后的浮动面板宽度不会超过 Dock 到浏览器视窗边缘的剩余空间。
 
 ### 参数
 
@@ -3001,7 +3001,7 @@ public init(canvas: fabric.Canvas): void {
 
 `(size: { width: number; height: number }) => void`
 
-窗体实际显示尺寸变化时触发，首次挂载也会触发。框架只报告尺寸，不自动改变窗体位置、大小或窗口能力；应用可据此自行切换 `move`、`resize`、`min`、`max` 等参数。
+窗体实际显示尺寸变化时触发，首次挂载也会触发。浏览器模式下非最大化窗体的实际显示尺寸不超过视窗；应用可据此自行切换 `move`、`resize`、`min`、`max` 等参数。
 
 ### 样式
 

package/package.json

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

package/test/dock-lifecycle.mjs

@@ -6,6 +6,12 @@ import { SourceTextModule, SyntheticModule } from 'node:vm';
 const sizeWatches = [];
 const sizeUnwatches = [];
 
+globalThis.document = {
+    'documentElement': {
+        'clientWidth': 360
+    }
+};
+
 class AbstractControl {
     constructor(rootForm, height) {
         this.rootForm = rootForm;
@@ -47,6 +53,9 @@ const clickgo = new SyntheticModule(['control', 'dom'], function() {
                 handler();
             }
             return true;
+        },
+        isRtl(element) {
+            return element.rtl;
         }
     });
 });
@@ -73,6 +82,9 @@ assert.equal(dockB.narrow, false);
 assert.equal(dockA1.floatAreaHeight, 300);
 assert.equal(dockA2.floatAreaHeight, 400);
 assert.equal(dockB.floatAreaHeight, 500);
+assert.equal(dockA1.viewportWidth, 360);
+assert.equal(dockA2.viewportWidth, 360);
+assert.equal(dockB.viewportWidth, 360);
 
 dockB.toggleFloat(1);
 dockA1.toggleFloat(2);
@@ -82,12 +94,79 @@ assert.equal(dockA2.floatGroup, 3);
 assert.equal(dockB.floatGroup, 1);
 
 const dockA1Watch = dockA1.access.formSizeWatch;
+const dockA1ViewportWatch = dockA1.access.viewportSizeWatch;
 dockA1.onUnmounted();
 assert.equal(dockA1.access.formSizeWatch, null);
-assert.equal(sizeUnwatches.length, 1);
+assert.equal(dockA1.access.viewportSizeWatch, null);
+assert.equal(sizeUnwatches.length, 2);
 assert.equal(sizeUnwatches[0].current, dockA1);
 assert.equal(sizeUnwatches[0].element, formA.element);
 assert.equal(sizeUnwatches[0].handler, dockA1Watch.handler);
-assert.equal(sizeWatches.length, 3);
+assert.equal(sizeUnwatches[1].current, dockA1);
+assert.equal(sizeUnwatches[1].element, document.documentElement);
+assert.equal(sizeUnwatches[1].handler, dockA1ViewportWatch.handler);
+assert.equal(sizeWatches.length, 6);
+
+const groupMod = new SourceTextModule(await readFile(new URL('../dist/sources/control/dock-group/code.js', import.meta.url), 'utf8'));
+await groupMod.link(() => clickgo);
+await groupMod.evaluate();
+const DockGroup = groupMod.namespace.default;
+
+const areaRect = {
+    'left': 40,
+    'right': 80,
+    'top': 0,
+    'bottom': 300
+};
+const group = new DockGroup();
+group.index = 0;
+group.element = {
+    'rtl': false,
+    'getBoundingClientRect': () => ({
+        'top': 0
+    })
+};
+group.refs = {
+    'content': {
+        'offsetHeight': 200
+    }
+};
+group.dock = {
+    'expandedData': false,
+    'floatGroup': 0,
+    'floatAreaHeight': 300,
+    'viewportWidth': 360,
+    'positionData': 'left',
+    'widthComp': '400px',
+    'getFloatArea': () => ({
+        'getBoundingClientRect': () => areaRect
+    })
+};
+
+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');
+
+group.element.rtl = true;
+areaRect.left = 320;
+areaRect.right = 360;
+group.updateFloatLayout();
+assert.equal(group.floatMaxWidth, 320, 'RTL left Dock must open toward the viewport space on its left');
+
+group.dock.positionData = 'right';
+areaRect.left = 0;
+areaRect.right = 40;
+group.updateFloatLayout();
+assert.equal(group.floatMaxWidth, 320, 'RTL right Dock must open toward the viewport space on its right');
+
+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 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 access state, Form isolation and size-watch cleanup checks passed.');
+console.log('Dock lifecycle, RTL layout and viewport-bound floating-panel checks passed.');

package/test/form-native-style.mjs

@@ -18,14 +18,16 @@ theme.textContent = `
 `;
 document.head.append(theme);
 
-for (const nativeFirst of [true, false]) {
+for (const mode of ['web', 'native-framed', 'native-frameless']) {
+    const nativeFirst = mode === 'native-frameless';
+    const nativeMode = mode !== 'web';
     for (const border of ['normal', 'thin', 'plain', 'none']) {
         const host = document.createElement('div');
         document.body.append(host);
         const app = createApp({
             render,
             data: () => ({
-                border, isNativeNoFrameFirst: nativeFirst, flashTimer: undefined,
+                border, isNative: nativeMode, isNativeNoFrameFirst: nativeFirst, flashTimer: undefined,
                 stateMinData: false, stateMaxData: false, taskPosition: 'bottom',
                 isShow: true, isInside: false, formFocus: false, widthData: 500,
                 heightData: 400, leftData: 0, topData: 0, zIndex: 1,
@@ -40,6 +42,8 @@ for (const nativeFirst of [true, false]) {
         app.component('cg-loading', { render: () => null });
         const form = app.mount(host);
         const wrap = host.querySelector('.wrap');
+        assert.equal(wrap.style.maxWidth, nativeMode ? '' : '100vw');
+        assert.equal(wrap.style.maxHeight, nativeMode ? '' : '100vh');
         const inner = host.querySelector('.inner');
         const content = host.querySelector('.content');
         const header = host.querySelector('.header');
@@ -47,6 +51,12 @@ for (const nativeFirst of [true, false]) {
         const child = document.createElement('div');
         child.className = 'child-control';
         content.append(child);
+        if (!nativeMode && border === 'none') {
+            form.leftData = 700;
+            form.topData = 600;
+            await nextTick();
+            assert.deepEqual([wrap.style.left, wrap.style.top], ['700px', '600px']);
+        }
         for (const focused of [false, true]) {
             form.formFocus = focused;
             form.stateMaxData = focused;

package/test/form-viewport.mjs

@@ -0,0 +1,50 @@
+// Run: node test/form-viewport.mjs
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import vm from 'node:vm';
+import ts from 'typescript';
+
+let nativeMode = false;
+const clickgo = {
+    isNative: () => nativeMode,
+    control: {
+        AbstractControl: class {
+            emit() {}
+            propInt(name) { return Number(this.props[name]); }
+            trigger() { return Promise.resolve(); }
+        },
+    },
+    native: {
+        restore: async () => {},
+        size: async () => {},
+    },
+    tool: { sleep: () => Promise.resolve() },
+};
+const source = await readFile(new URL('../dist/sources/control/form/code.ts', import.meta.url), 'utf8');
+const compiled = ts.transpileModule(source, {
+    compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2022 },
+}).outputText;
+const exports = {};
+vm.runInNewContext(compiled, {
+    exports, require: () => clickgo,
+    window: { innerWidth: 640, innerHeight: 440 },
+});
+const Form = exports.default;
+
+function restore(history, mode = 'web') {
+    nativeMode = mode !== 'web';
+    const form = new Form();
+    form.isNativeNoFrameFirst = mode === 'native-frameless';
+    form.stateMaxData = true;
+    form.historyLocation = history;
+    form.element = { style: {}, removeAttribute() {} };
+    form.maxMethod();
+    return [form.widthData, form.heightData, form.leftData, form.topData];
+}
+
+assert.deepEqual(restore({ width: 900, height: 700, left: 500, top: 300 }), [900, 700, 0, 0]);
+assert.deepEqual(restore({ width: 400, height: 300, left: 500, top: 300 }), [400, 300, 240, 140]);
+assert.deepEqual(restore({ width: 600, height: 40, left: 40, top: 400 }), [600, 40, 40, 400]);
+assert.deepEqual(restore({ width: 900, height: 700, left: 500, top: 300 }, 'native-framed'), [900, 700, 500, 300]);
+assert.deepEqual(restore({ width: 900, height: 700, left: 500, top: 300 }, 'native-frameless'), [900, 700, 500, 300]);
+console.log('Form restore stays visible, edge-positioned Forms stay anchored, and Native geometry is unchanged.');

package/test/rtl-archive.mjs

@@ -364,6 +364,7 @@ const rtlCodeChecks = [
     ['dist/control/common.cgc', 'toolbar', ['getScrollInlineOffset', 'setScrollLeft']],
     ['dist/control/common.cgc', 'date', ['autoPosition', 'autoScroll']],
     ['dist/control/common.cgc', 'daterange', ['autoPosition', 'autoScroll']],
+    ['dist/control/common.cgc', 'dock-group', ['isRtl', 'floatMaxWidth']],
     ['dist/control/table.cgc', 'table', ['localeDirection', 'getScrollLeft', 'setScrollInlineOffset']],
     ['dist/control/desc.cgc', 'desc', ['getScrollInlineOffset', 'setScrollInlineOffset']],
     ['dist/control/iconview.cgc', 'iconview', ['isRtl']],
@@ -385,6 +386,8 @@ 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-group/style.css', 'dist/sources/control/dock-group/style.css', ['inset-inline-start', 'max-width:calc(100vw - 40px)']],
     ['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']],
 ];