npm - clickgo - Versions diffs - 6.1.3 → 6.1.5 - Mend

clickgo 6.1.3 → 6.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/app/demo.cga +0 -0
package/dist/app/task.cga +0 -0
package/dist/control/form.cgc +0 -0
package/dist/index.js +1 -1
package/dist/lib/control.d.ts +1 -1
package/dist/lib/native.d.ts +7 -0
package/doc/clickgo-rag.md +365 -321
package/package.json +1 -1
package/test/form-native-style.mjs +70 -0
package/test/form-native.mjs +68 -0

package/package.json CHANGED Viewed

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

package/test/form-native-style.mjs ADDED Viewed

@@ -0,0 +1,70 @@
+// Run: node test/form-native-style.mjs
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import { JSDOM } from 'jsdom';
+const dom = new JSDOM('<!doctype html><html><head></head><body></body></html>');
+for (const name of ['window', 'document', 'Element', 'SVGElement', 'Node', 'HTMLElement']) {
+    globalThis[name] = dom.window[name];
+}
+const { createApp, compile, nextTick } = await import('vue');
+const template = await readFile(new URL('../dist/sources/control/form/layout.html', import.meta.url), 'utf8');
+const render = compile(template);
+const theme = document.createElement('style');
+theme.textContent = `
+    .wrap { border: 3px solid black !important; border-radius: 24px !important; box-shadow: 0 0 8px black !important; }
+    .wrap > .inner, .wrap > .inner > .header, .wrap > .inner > .content { border-radius: 24px !important; }
+    .child-control { border: 1px solid blue; border-radius: 12px; }
+`;
+document.head.append(theme);
+for (const nativeFirst of [true, false]) {
+    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,
+                stateMinData: false, stateMaxData: false, taskPosition: 'bottom',
+                isShow: true, isInside: false, formFocus: false, widthData: 500,
+                heightData: 400, leftData: 0, topData: 0, zIndex: 1,
+                isMask: false, isResize: false, iconDataUrl: '', title: 'Notepad',
+                isMin: true, isMax: true, isClose: true, direction: 'v',
+                background: '', padding: '', stepShowData: false, stepData: [],
+                stepValue: '', isLoading: false,
+            }),
+            methods: { moveMethod() {}, minMethod() {}, maxMethod() {}, closeMethod() {}, stepDown() {} },
+        });
+        app.component('cg-step', { render: () => null });
+        app.component('cg-loading', { render: () => null });
+        const form = app.mount(host);
+        const wrap = host.querySelector('.wrap');
+        const inner = host.querySelector('.inner');
+        const content = host.querySelector('.content');
+        const header = host.querySelector('.header');
+        assert.equal(Boolean(header), border === 'normal' || border === 'thin');
+        const child = document.createElement('div');
+        child.className = 'child-control';
+        content.append(child);
+        for (const focused of [false, true]) {
+            form.formFocus = focused;
+            form.stateMaxData = focused;
+            await nextTick();
+            for (const el of [wrap, inner, content, header].filter(Boolean)) {
+                assert.equal(el.style.getPropertyPriority('border-radius'), nativeFirst ? 'important' : '');
+                assert.equal(dom.window.getComputedStyle(el).borderRadius, nativeFirst ? '0' : '24px');
+            }
+            for (const property of ['border', 'box-shadow']) {
+                assert.equal(wrap.style.getPropertyPriority(property), nativeFirst ? 'important' : '');
+            }
+            assert.equal(dom.window.getComputedStyle(wrap).boxShadow, nativeFirst ? 'none' : '0 0 8px black');
+            assert.equal(dom.window.getComputedStyle(wrap).borderTopWidth, nativeFirst ? '0px' : '3px');
+            assert.equal(dom.window.getComputedStyle(child).borderRadius, '12px');
+            assert.equal(dom.window.getComputedStyle(child).borderTopWidth, '1px');
+        }
+        app.unmount();
+        host.remove();
+    }
+}
+console.log('Native first-Form styling, theme overrides and ordinary Form isolation checks passed.');

package/test/form-native.mjs ADDED Viewed

@@ -0,0 +1,68 @@
+// Run after TypeScript compilation: node --experimental-vm-modules test/form-native.mjs
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import { SourceTextModule, SyntheticModule } from 'node:vm';
+const listeners = {};
+const minimums = [];
+let ended = 0;
+let cancelled = true;
+class AbstractControl {
+    constructor() {
+        this.parent = { controlName: 'root', isNativeNoFrameFirst: true };
+        this.formId = 'form';
+        this.element = {};
+        this.watches = {};
+    }
+    watch(name, callback, options) {
+        this.watches[name] = callback;
+        if (options?.immediate) { callback(); }
+    }
+    propInt(name) { return parseInt(this.props[name]); }
+    propBoolean(name) { return Boolean(this.props[name]); }
+    emit(name, event) {
+        if (name === 'close') {
+            assert.equal(event.detail.event, null);
+            if (cancelled) { event.preventDefault(); }
+        }
+    }
+}
+const clickgo = new SyntheticModule(['control', 'native', 'dom', 'tool', 'task'], function() {
+    this.setExport('control', { AbstractControl });
+    this.setExport('native', {
+        on(current, name, handler) { listeners[name] = handler; },
+        async minSize(current, w, h) { minimums.push([w, h]); },
+        async maximizable() {},
+    });
+    this.setExport('dom', { watchSize() {} });
+    this.setExport('tool', { getBoolean: Boolean });
+    this.setExport('task', { async end() { ++ended; } });
+});
+const mod = new SourceTextModule(await readFile(new URL('../dist/sources/control/form/code.js', import.meta.url), 'utf8'));
+await mod.link(() => clickgo);
+await mod.evaluate();
+const Form = mod.namespace.default;
+const form = new Form();
+form.onMounted();
+assert.deepEqual(minimums.at(-1), [200, 100]);
+form.props.minWidth = '360';
+form.watches.minWidth();
+assert.deepEqual(minimums.at(-1), [360, 100]);
+form.props.minHeight = 240;
+form.watches.minHeight();
+assert.deepEqual(minimums.at(-1), [360, 240]);
+listeners['close-request']();
+assert.equal(ended, 0);
+cancelled = false;
+listeners['close-request']();
+assert.equal(ended, 1);
+form.props.close = false;
+listeners['close-request']();
+assert.equal(ended, 1);
+const web = new Form();
+web.parent.isNativeNoFrameFirst = false;
+const before = minimums.length;
+web.onMounted();
+assert.equal(minimums.length, before);
+console.log('Form native minimum-size and cancellable close-event checks passed.');