Compare commits
No commits in common. "main" and "v1.0.13" have entirely different histories.
15
CHANGELOG.md
15
CHANGELOG.md
@ -1,20 +1,5 @@
|
||||
# Changelog
|
||||
|
||||
## [1.0.17] - 2026-06-09
|
||||
### Changed
|
||||
- **Non-ESM Architecture**: Refactored all source components to remove `import`/`export` and use IIFE wrappers, attaching directly to `globalThis`.
|
||||
- **Synchronous Dependency Loading**: Redesigned the test suite to load dependencies synchronously in the `<head>`, ensuring absolute timing stability and 100% production parity.
|
||||
- **Vite Alignment**: Updated build configuration to prioritize IIFE/UMD output and removed ESM distribution artifacts.
|
||||
- **Documentation**: Updated README with the new "Synchronous First" quick start guide and latest CDN versions.
|
||||
|
||||
## [1.0.14] - 2026-06-08
|
||||
### Fixed
|
||||
- **State Integration**: Bumped `@apigo.cc/state` to `1.0.18` to restore the globally injected `$`/`$$` helpers from the original UMD era, fixing `TagsInput` element targeting.
|
||||
- **AutoForm Layout**: Fixed `horizontal` grid layout breakage caused by missing `AUTOFORM_STYLE` registration.
|
||||
- **AutoForm Expansion**: Restored `AutoForm.register` with deep-blueprint `[control-wrapper]` physical insertion mechanism, fixing the blank rendering bug of `TagsInput` and `ColorPicker`.
|
||||
- **Form Controls**: Removed `height: 100%` from `ColorPicker` preventing flex squash; fixed horizontal mode left-padding overflow for Check/Radio/Switch components.
|
||||
- **Build**: Fully expunged `.mjs` artifacts from vite build pipeline to enforce UMD compliance.
|
||||
|
||||
## [1.0.12] - 2026-06-05
|
||||
### Changed
|
||||
- **De-ESM Refactor**: Fully transitioned the runtime environment to synchronous UMD loading, eliminating race conditions and rendering artifacts.
|
||||
|
||||
46
README.md
46
README.md
@ -1,34 +1,20 @@
|
||||
# @apigo.cc/base - AI 逻辑操作说明书 (示例驱动)
|
||||
|
||||
本库是基于 `@apigo.cc/state` 增强的 UI 原子库，提供遵循 Bootstrap 5.3 规范的高阶业务组件。本包采用完全的全局注入模式。
|
||||
|
||||
---
|
||||
|
||||
## 全局变量与核心 API 清单
|
||||
引入 `base.js` 后，以下对象将直接挂载到 `window` / `globalThis` 上，可随时随地调用：
|
||||
|
||||
| 全局变量名 | 用途说明 |
|
||||
| :--- | :--- |
|
||||
| **`HTTP`** | 异步请求工具 (`HTTP.get`, `HTTP.post`, `HTTP.request` 等)。 |
|
||||
| **`UI`** | 交互组件触发器 (`UI.toast`, `UI.alert`, `UI.confirm`, `UI.showDialog`)。 |
|
||||
| **`AutoForm`** | 表单组件扩展注册器 (`AutoForm.register`) 和自定义控件库 (`AutoForm.customTypes`)。 |
|
||||
| **`MouseMover`** | 拖拽辅助工具 (`MouseMover.start`)。 |
|
||||
| **`VirtualScroll`** / **`List`** | 虚拟滚动列表核心算法类。 |
|
||||
|
||||
*(注意：底层状态库 `@apigo.cc/state` 暴露的 `NewState`, `Hash`, `LocalStorage`, `State`, `$`, `$$`, `Component` 以及危险的高级 API `_unsafeRefreshState` 也在全局可用。严禁随意调用 `_unsafeRefreshState`。)*
|
||||
本库是基于 `@apigo.cc/state` 增强的 UI 原子库，提供遵循 Bootstrap 5.3 规范的高阶业务组件。
|
||||
|
||||
---
|
||||
|
||||
## 1. 快速集成 (Quick Start)
|
||||
|
||||
### 同步 UMD 集成 (推荐：消灭异步时序风险，实现“秒开”渲染)
|
||||
将脚本放置在 `<head>` 中，确保地基在 DOM 解析前就绪：
|
||||
```html
|
||||
<!-- 1. 基础状态机 (地基) -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/state@1.0.19/dist/state.min.js"></script>
|
||||
<script src="dist/lib/state.js"></script>
|
||||
<!-- 2. Bootstrap 适配层 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/bootstrap@1.0.6/dist/bootstrap.min.js"></script>
|
||||
<!-- 3. 本业务组件库 (原生注入) -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/base@1.0.17/dist/base.min.js"></script>
|
||||
<script src="dist/lib/bootstrap.js"></script>
|
||||
<!-- 3. 本业务组件库 -->
|
||||
<script src="dist/lib/base.js"></script>
|
||||
|
||||
<script>
|
||||
// 4. 数据先行 (在 body 解析前定义)
|
||||
@ -36,6 +22,11 @@
|
||||
</script>
|
||||
```
|
||||
|
||||
### ESM 模块引入 (Legacy)
|
||||
```javascript
|
||||
import { HTTP, UI, AutoForm, State } from '@apigo.cc/base'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. 组件超能力示例 (Mega Examples)
|
||||
@ -108,7 +99,7 @@
|
||||
<!-- 2. HTML 声明式属性绑定 schema 状态，且绑定接口 API 实例 -->
|
||||
<AutoForm id="employeeForm"
|
||||
vertical
|
||||
$.state.schema="employeeFormSchema"
|
||||
$state.schema="employeeFormSchema"
|
||||
$api="saveEmployeeApi"
|
||||
$onresponse="UI.toast('保存成功！')">
|
||||
</AutoForm>
|
||||
@ -166,7 +157,7 @@
|
||||
```
|
||||
* **HTML 写法**：
|
||||
```html
|
||||
<List mode="group" $list="groupUserList" $.state.groups="deptGroups"></List>
|
||||
<List mode="group" $list="groupUserList" $state.groups="deptGroups"></List>
|
||||
```
|
||||
|
||||
#### 模式三：树形可折叠列表 (`mode="tree"`) —— 超级示例
|
||||
@ -231,8 +222,8 @@
|
||||
<!-- 2. HTML 声明式属性绑定 -->
|
||||
<Nav id="sidebarNav"
|
||||
vertical
|
||||
$.state.brand="myBrand"
|
||||
$.state.list="myNavList"
|
||||
$state.brand="myBrand"
|
||||
$state.list="myNavList"
|
||||
$onnav="console.log('导航点击:', event.detail.item)">
|
||||
</Nav>
|
||||
```
|
||||
@ -298,7 +289,6 @@ const resp = await HTTP.post({
|
||||
## 4. 开发红线 (Constraints)
|
||||
|
||||
1. **表单数据操作红线**：严禁直接覆盖表单的 `state.data` 或 `data` 对象（如 `form.data = {}`）。这会切断与内部 Proxy 的响应式链路。必须使用 `Object.assign(form.state.data, newData)`。
|
||||
2. **结构化指令红线**：所有 `$if` 与 `$each` 指令 **必须** 显式作用于 `<template>` 标签，且严禁在同一个 `<template>` 上同时使用两者（必须嵌套）。
|
||||
3. **列表布局红线**：开启虚拟滚动（`fast`）时，容器必须包含 `overflow-auto` 类。
|
||||
4. **指令 DOM 保护**：严禁使用原生 DOM API 直接修改由 `$each`、`$if` 或组件渲染指令生成的 DOM 节点。所有 DOM 状态的变化应当完全通过修改与之绑定的底层 `State` 属性驱动。
|
||||
5. **退出拦截约束**：在全局配置有 `State.exitBlocks > 0` 时，框架将强行拦截并警告任何刷新/关闭页面的行为。
|
||||
2. **列表布局红线**：开启虚拟滚动（`fast`）时，容器必须包含 `overflow-auto` 类。
|
||||
3. **指令 DOM 保护**：严禁使用原生 DOM API 直接修改由 `$each`、`$if` 或组件渲染指令生成的 DOM 节点。所有 DOM 状态的变化应当完全通过修改与之绑定的底层 `State` 属性驱动。
|
||||
4. **退出拦截约束**：在全局配置有 `State.exitBlocks > 0` 时，框架将强行拦截并警告任何刷新/关闭页面的行为。
|
||||
|
||||
1397
dist/base.js
vendored
1397
dist/base.js
vendored
File diff suppressed because one or more lines are too long
2
dist/base.min.js
vendored
2
dist/base.min.js
vendored
File diff suppressed because one or more lines are too long
1
dist/base.min.mjs
vendored
Normal file
1
dist/base.min.mjs
vendored
Normal file
File diff suppressed because one or more lines are too long
961
dist/base.mjs
vendored
Normal file
961
dist/base.mjs
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,8 +1,9 @@
|
||||
{
|
||||
"name": "@apigo.cc/base",
|
||||
"version": "1.0.17",
|
||||
"version": "1.0.11",
|
||||
"type": "module",
|
||||
"main": "dist/base.js",
|
||||
"module": "dist/base.js",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
|
||||
186
src/controls.js
vendored
186
src/controls.js
vendored
File diff suppressed because one or more lines are too long
262
src/form.js
262
src/form.js
@ -1,128 +1,174 @@
|
||||
// src/form.js
|
||||
(function(global) {
|
||||
const { Component, NewState, Util, $, State } = global;
|
||||
import { Component, NewState, Util, $, State } from '@apigo.cc/state'
|
||||
import { HTTP } from './http.js'
|
||||
|
||||
const AutoForm = {
|
||||
customTypes: [],
|
||||
register: (name, typeName) => {
|
||||
const type = typeName || name
|
||||
if (!AutoForm.customTypes.includes(type)) AutoForm.customTypes.push(type)
|
||||
}
|
||||
};
|
||||
Component.register('AutoForm', container => {
|
||||
if (!container.state.schema) container.state.schema = []
|
||||
|
||||
// TRY: 确保 state.data 始终是响应式 Proxy，支持深层嵌套属性的监听
|
||||
const ensureProxy = v => (v && typeof v === 'object' && !v.__isProxy) ? NewState(v) : v;
|
||||
container.state.__watch('data', v => container.data = ensureProxy(v));
|
||||
container.data = ensureProxy(container.state.data || {});
|
||||
|
||||
Component.register('AutoForm', container => {
|
||||
if (!container.state.schema) container.state.schema = []
|
||||
container.vertical = container.hasAttribute('vertical')
|
||||
container.inline = container.hasAttribute('inline')
|
||||
container.request = { method: 'POST' }
|
||||
container.response = {}
|
||||
container.result = null
|
||||
|
||||
const ensureProxy = v => (v && typeof v === 'object' && !v.__isProxy) ? NewState(v) : v;
|
||||
container.state.__watch('data', v => container.data = ensureProxy(v));
|
||||
container.data = ensureProxy(container.state.data || {});
|
||||
// 初始化数据联动：如果处于行编辑模式（inline），监听全局编辑状态
|
||||
if (container.inline) {
|
||||
State.__watch('editingData', (data) => {
|
||||
container.data = data
|
||||
})
|
||||
State.__watch('editingSchema', (schema) => {
|
||||
container.state.schema = schema
|
||||
})
|
||||
}
|
||||
|
||||
container.addEventListener('submit', async (event) => {
|
||||
event.preventDefault()
|
||||
if (!container.form.reportValidity()) return global.UI?.toast?.('{#verify failed#}', { type: 'danger' })
|
||||
|
||||
container.state.formState = 'submitting'
|
||||
const detail = JSON.parse(JSON.stringify(container.data))
|
||||
const customEvent = new CustomEvent('submit', { bubbles: false, cancelable: true, detail })
|
||||
container.dispatchEvent(customEvent)
|
||||
|
||||
if (customEvent.defaultPrevented) return
|
||||
try {
|
||||
if (container.state.action) {
|
||||
const resp = await global.HTTP.request({ url: container.state.action, method: 'POST', data: detail })
|
||||
if (!resp.ok) throw new Error(resp.error)
|
||||
}
|
||||
container.state.formState = 'success'
|
||||
if (global.UI?.toast) global.UI.toast('{#submit success#}', { type: 'success' })
|
||||
} catch (err) {
|
||||
container.state.formState = 'error'
|
||||
if (global.UI?.toast) global.UI.toast(err.message, { type: 'danger' })
|
||||
}
|
||||
})
|
||||
}, Util.makeDom(/*html*/`
|
||||
<form class="auto-form-root" $onsubmit="this.dispatchEvent(new Event('submit'))">
|
||||
<div $class="auto-grid-form \${this.state?.grid ? 'row g-3' : ''}">
|
||||
<template $each="this.state?.schema" as="field">
|
||||
<div $class="\${this.state?.grid ? 'col-md-' + (field.col || 12) : 'mb-3'}">
|
||||
<label $if="field.label" class="form-label small fw-bold text-muted mb-1" $text="field.label"></label>
|
||||
<div class="field-container">
|
||||
<template $if="!field.type || field.type === 'text'">
|
||||
<input type="text" class="form-control" $bind="this.data[field.id]" $required="field.required" $placeholder="field.placeholder || ''">
|
||||
container.form = $(container, 'form')
|
||||
container.submit = (opt = {}) => {
|
||||
if (!container.form.reportValidity()) return globalThis.UI?.toast?.('{#verify failed#}', { type: 'danger' })
|
||||
if (!container.dispatchEvent(new CustomEvent('submit', { detail: container.data, cancelable: true, bubbles: false }))) return
|
||||
const req = { ...container.request, data: container.data, noui: true, ...opt }
|
||||
let task = null
|
||||
if (container.api) task = container.api.do(req)
|
||||
else if (container.request.url) task = HTTP.request(req)
|
||||
else return console.warn('{#please config .api or .request.url to auto submit#}')
|
||||
task.then(resp => {
|
||||
container.response = resp
|
||||
container.result = resp.result
|
||||
if (typeof resp.result === 'object' && resp.result.error) throw new Error(resp.result.error)
|
||||
container.dispatchEvent(new CustomEvent('response', { detail: resp, bubbles: false }))
|
||||
}).catch(err => {
|
||||
if (globalThis.UI?.toast) UI.toast(err.message, { type: 'danger' })
|
||||
container.dispatchEvent(new CustomEvent('error', { detail: err, bubbles: true }))
|
||||
})
|
||||
}
|
||||
}, Util.makeDom(/*html*/`
|
||||
<div $class="auto-form-root d-flex \${this.inline ? 'auto-form-inline h-100 w-100' : ''}">
|
||||
<form $class="w-100 d-flex flex-fill \${this.inline ? 'align-items-stretch h-100' : (this.vertical ? 'flex-column' : 'auto-grid-form')}" $onsubmit="event.stopPropagation();event.preventDefault();this.submit()">
|
||||
<template $each="this.state.schema || []">
|
||||
<template $if="item.if || 'true'">
|
||||
<div style="display:contents">
|
||||
<template $if="!this.inline">
|
||||
<label $name="item.name" class="col-form-label text-muted" $text="item.label"></label>
|
||||
</template>
|
||||
<div control-wrapper $class="\${this.inline ? 'flex-grow-1 h-100 d-flex align-items-center' : 'mb-3'}">
|
||||
<template $if="['text', 'password', 'email', 'number', 'date', 'datetime', 'file'].includes(item.type)">
|
||||
<input $name="item.name" $type="item.type" $.="item.setting || {}" $bind="this.data[item.name]" $class="form-control h-100 \${item.type === 'number' ? 'text-end' : ''}">
|
||||
</template>
|
||||
<template $if="field.type === 'textarea'">
|
||||
<textarea class="form-control" $bind="this.data[field.id]" $required="field.required" $placeholder="field.placeholder || ''" $rows="field.rows || 3"></textarea>
|
||||
</template>
|
||||
<template $if="field.type === 'select'">
|
||||
<select class="form-select" $bind="this.data[field.id]" $required="field.required">
|
||||
<template $each="field.options" as="opt">
|
||||
<option $value="typeof opt === 'object' ? opt.value : opt" $text="typeof opt === 'object' ? opt.label : opt"></option>
|
||||
<template $if="item.type === 'select'">
|
||||
<select $name="item.name" $.="item.setting || {}" $bind="this.data[item.name]" class="form-select h-100">
|
||||
<template $if="item.placeholder">
|
||||
<option value="" $text="item.placeholder" disabled selected></option>
|
||||
</template>
|
||||
<template $each="item.options" as="opt">
|
||||
<option $value="opt.value || opt" $text="opt.label || opt"></option>
|
||||
</template>
|
||||
</select>
|
||||
</template>
|
||||
<template $if="field.type === 'switch'">
|
||||
<div class="form-check form-switch mt-1">
|
||||
<input class="form-check-input" type="checkbox" $bind="this.data[field.id]">
|
||||
<template $if="['checkbox', 'radio'].includes(item.type)">
|
||||
<div $class="\${this.inline ? 'h-100 d-flex align-items-center px-2 gap-3 justify-content-center w-100 bg-body' : ''}" style="white-space:nowrap; border-radius: 4px;">
|
||||
<template $each="item.options || [item.text||item.label||item.name]" as="option">
|
||||
<label $class="form-check \${item.vertical ? '' : 'form-check-inline'} mb-0 d-flex align-items-center p-0">
|
||||
<input $name="item.name" class="form-check-input me-1" $type="item.type" $.="item.setting || {}" $value="item.options?option:'on'" $bind="this.data[item.name]">
|
||||
<template $if="!this.inline || (item.options && item.options.length > 0)">
|
||||
<span $text="option" class="form-check-label"></span>
|
||||
</template>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template $each="AutoForm.customTypes" as="type">
|
||||
<template $if="field.type === type">
|
||||
<div $is="type" $.data="this.data[field.id]" $onchange="this.data[field.id] = event.detail"></div>
|
||||
<template $if="item.type === 'switch'">
|
||||
<div $class="form-check form-switch fs-4 h-100 d-flex align-items-center px-2 m-0 \${this.inline ? 'justify-content-center w-100' : ''}" style="padding-left:0">
|
||||
<input $name="item.name" class="form-check-input m-0" type="checkbox" style="cursor:pointer" $bind="this.data[item.name]">
|
||||
</div>
|
||||
</template>
|
||||
<template $if="item.type === 'textarea'">
|
||||
<textarea $name="item.name" class="form-control" $.="item.setting || {}" $bind="this.data[item.name]"></textarea>
|
||||
</template>
|
||||
|
||||
<!-- 扩展控件容器 -->
|
||||
<template $each="AutoForm.customTypes" as="ext">
|
||||
<template $if="item.type?.toLowerCase() === ext.typeName.toLowerCase()">
|
||||
<div $is="ext.name" $name="item.name" $.="item.setting || {}" $bind="this.data[item.name]" class="h-100"></div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div $if="!this.state?.hideSubmit" class="mt-4 pt-2 border-top d-flex justify-content-end gap-2">
|
||||
<button type="button" class="btn btn-light px-4" $if="this.state?.showCancel" $onclick="this.dispatchEvent(new CustomEvent('cancel'))">{#Cancel#}</button>
|
||||
<button type="submit" class="btn btn-primary px-4" $disabled="this.state?.formState === 'submitting'">
|
||||
<span $if="this.state?.formState === 'submitting'" class="spinner-border spinner-border-sm me-2"></span>
|
||||
<span $text="this.state?.submitLabel || '{#Submit#}'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
`))
|
||||
|
||||
Component.register('TagsInput', container => {
|
||||
container._thisObj = container;
|
||||
if (!container.state) container.state = NewState({ tags: [] })
|
||||
container.addEventListener('bind', e => {
|
||||
container.state.tags = Array.isArray(e.detail) ? e.detail : []
|
||||
})
|
||||
}, Util.makeDom(/*html*/`
|
||||
<div class="form-control d-flex flex-wrap gap-1 align-items-center" style="min-height:38px;cursor:text">
|
||||
<template $each="this.state.tags">
|
||||
<button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-0 px-2" $onkeydown="${Util.getFunctionBody(function (event) {
|
||||
if (['Backspace', 'Delete'].includes(event.key)) {
|
||||
event.preventDefault()
|
||||
this.state.tags.splice(index, 1)
|
||||
this.state.tags = this.state.tags
|
||||
this.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: this.state.tags }))
|
||||
Promise.resolve().then(() => {
|
||||
const buttons = $$(this, 'button');
|
||||
(buttons.length > 0 ? buttons[index > 0 ? index - 1 : 0] : $(this, 'input')).focus()
|
||||
})
|
||||
}
|
||||
})}" $text="item"></button>
|
||||
</template>
|
||||
<input type="text" class="border-0 shadow-none py-0 px-2 flex-grow-1 bg-transparent" placeholder="{#new tag name#}" style="min-width:100px;width:0;outline:none" $onkeydown="${Util.getFunctionBody(function (event) {
|
||||
if (event.isComposing) return
|
||||
if (['Enter', ',', ' '].includes(event.key)) {
|
||||
event.preventDefault()
|
||||
const v = thisNode.value.trim()
|
||||
if (v && !this.state.tags.includes(v)) {
|
||||
this.state.tags.push(v)
|
||||
this.state.tags = this.state.tags
|
||||
this.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: this.state.tags }))
|
||||
}
|
||||
thisNode.value = ''
|
||||
}
|
||||
})}">
|
||||
<template $if="!this.inline">
|
||||
<div class="d-flex justify-content-end align-items-baseline gap-3 mt-3" style="grid-column:1/-1">
|
||||
<div slot-id="actions"></div>
|
||||
<button type="submit" class="btn btn-primary" $text="this.submitlabel || '{#Submit#}'"></button>
|
||||
</div>
|
||||
</template>
|
||||
</form>
|
||||
</div>
|
||||
`), Util.makeDom(/*html*/`<style>TagsInput button:focus {background-color:var(--bs-btn-hover-bg);color:var(--bs-btn-hover-color)}</style>`))
|
||||
`), Util.makeDom(/*html*/`<style>
|
||||
@media (min-width: 576px) { .auto-grid-form {display: grid;grid-template-columns: max-content 1fr} .auto-grid-form .col-form-label {text-align: right; margin-bottom: 1rem;padding-right: 1rem;max-width: 200px} }
|
||||
.auto-form-inline { background-color: var(--bs-body-bg); }
|
||||
.auto-form-inline.min-h-100 { min-height: 100%; height: auto; }
|
||||
.auto-form-inline .form-control, .auto-form-inline .form-select { border-radius: 0; border: none; background-color: transparent !important; min-height: 100%; height: auto; width: 100%; padding: 0 8px; box-shadow: none; color: inherit; }
|
||||
.auto-form-inline .form-select { background-position: right 4px center; background-size: 12px 10px; padding-right: 20px; }
|
||||
.auto-form-inline textarea.form-control { padding: 8px; min-height: 100px; height: auto; }
|
||||
</style>`))
|
||||
|
||||
AutoForm.register('TagsInput');
|
||||
export const AutoForm = {
|
||||
customTypes: [],
|
||||
register: (name, typeName) => {
|
||||
const type = typeName || name
|
||||
if (!AutoForm.customTypes.find(t => t.name === name)) {
|
||||
AutoForm.customTypes.push({ name, typeName: type })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
global.AutoForm = AutoForm;
|
||||
Component.register('TagsInput', container => {
|
||||
container.state = NewState({ tags: [] })
|
||||
container.addEventListener('bind', e => {
|
||||
container.state.tags = Array.isArray(e.detail) ? e.detail : []
|
||||
})
|
||||
// Handle direct property access
|
||||
Object.defineProperty(container, 'value', {
|
||||
get: () => container.state.tags,
|
||||
set: v => { container.state.tags = Array.isArray(v) ? v : []; }
|
||||
})
|
||||
}, Util.makeDom(/*html*/`
|
||||
<div class="form-control d-flex flex-wrap gap-1 align-items-center w-100" style="cursor:text; min-height: 38px; border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 8px !important;">
|
||||
<button $each="(this.state && this.state.tags) || []" type="button" class="btn btn-sm btn-outline-primary rounded-pill py-0 px-2" $onkeydown="${Util.getFunctionBody(function (event) {
|
||||
if (['Backspace', 'Delete'].includes(event.key)) {
|
||||
event.preventDefault()
|
||||
if (this.state?.tags) {
|
||||
this.state.tags.splice(index, 1)
|
||||
this.state.tags = this.state.tags
|
||||
this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: this.state.tags }))
|
||||
Promise.resolve().then(() => {
|
||||
const buttons = this.querySelectorAll('button');
|
||||
if (buttons.length > 0) (buttons[index > 0 ? index - 1 : 0] || buttons[0]).focus()
|
||||
else { const input = $(this, 'input'); if (input) input.focus(); }
|
||||
})
|
||||
}
|
||||
}
|
||||
})}" $text="item"></button>
|
||||
<input type="text" class="border-0 shadow-none py-0 px-2 flex-grow-1 bg-transparent" placeholder="{#new tag name#}" style="min-width:100px;width:0;outline:none; height: 32px" $onkeydown="${Util.getFunctionBody(function (event) {
|
||||
if (event.isComposing) return
|
||||
if (['Enter', ',', ' '].includes(event.key)) {
|
||||
event.preventDefault()
|
||||
const v = thisNode.value.trim()
|
||||
if (v && this.state?.tags && !this.state.tags.includes(v)) {
|
||||
this.state.tags.push(v)
|
||||
this.state.tags = this.state.tags
|
||||
this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: this.state.tags }))
|
||||
}
|
||||
thisNode.value = ''
|
||||
}
|
||||
})}">
|
||||
</div>
|
||||
`), Util.makeDom(/*html*/`<style>
|
||||
TagsInput { display: flex; align-items: center; min-height: 100%; width: 100%; background: transparent !important; }
|
||||
TagsInput button:focus {background-color:var(--bs-btn-hover-bg);color:var(--bs-btn-hover-color)}
|
||||
</style>`))
|
||||
|
||||
})(globalThis);
|
||||
AutoForm.register('TagsInput')
|
||||
|
||||
148
src/http.js
148
src/http.js
@ -1,61 +1,91 @@
|
||||
// src/http.js
|
||||
(function(global) {
|
||||
const { Component, NewState } = global;
|
||||
import { Component, NewState } from '@apigo.cc/state'
|
||||
|
||||
const HTTP = {
|
||||
get: ({ url, ...opt }) => HTTP.request({ url, method: 'GET', ...opt }),
|
||||
post: ({ url, data, ...opt }) => HTTP.request({ url, method: 'POST', data, ...opt }),
|
||||
put: ({ url, data, ...opt }) => HTTP.request({ url, method: 'PUT', data, ...opt }),
|
||||
delete: ({ url, ...opt }) => HTTP.request({ url, method: 'DELETE', ...opt }),
|
||||
head: ({ url, ...opt }) => HTTP.request({ url, method: 'HEAD', ...opt }),
|
||||
request: async ({ url, method = 'POST', data = undefined, headers = {}, responseType, timeout = 10000 }) => {
|
||||
method = method.toUpperCase()
|
||||
const opt = { method, headers: { 'Content-Type': 'application/json', ...headers } }
|
||||
if (data !== undefined) opt.body = JSON.stringify(data)
|
||||
export const HTTP = {
|
||||
get: ({ url, ...opt }) => HTTP.request({ url, method: 'GET', ...opt }),
|
||||
post: ({ url, data, ...opt }) => HTTP.request({ url, method: 'POST', data, ...opt }),
|
||||
put: ({ url, data, ...opt }) => HTTP.request({ url, method: 'PUT', data, ...opt }),
|
||||
delete: ({ url, ...opt }) => HTTP.request({ url, method: 'DELETE', ...opt }),
|
||||
head: ({ url, ...opt }) => HTTP.request({ url, method: 'HEAD', ...opt }),
|
||||
request: async ({ url, method = 'POST', data = undefined, headers = {}, responseType, timeout = 10000 }) => {
|
||||
method = method.toUpperCase()
|
||||
const options = { method, signal: AbortSignal.timeout?.(timeout) }
|
||||
if (data !== undefined && method !== 'GET' && method !== 'HEAD') {
|
||||
if (data instanceof HTMLFormElement) data = new FormData(data)
|
||||
if (data && typeof data === 'object' && !(data instanceof FormData) && !(data instanceof ArrayBuffer || ArrayBuffer.isView(data)) && Object.values(data).some(v => v instanceof File || v instanceof Blob || v instanceof FileList || (Array.isArray(v) && v.some(i => i instanceof File || i instanceof Blob)))) {
|
||||
const fd = new FormData()
|
||||
for (const [k, v] of Object.entries(data)) {
|
||||
if (v instanceof FileList || Array.isArray(v)) Array.from(v).forEach(item => fd.append(k, item))
|
||||
else if (v !== undefined && v !== null) fd.append(k, v)
|
||||
}
|
||||
data = fd
|
||||
}
|
||||
if (data instanceof FormData) {
|
||||
delete headers['Content-Type']
|
||||
} else if (typeof data !== 'string' && !(data instanceof ArrayBuffer || ArrayBuffer.isView(data))) {
|
||||
data = JSON.stringify(data)
|
||||
if (!headers['Content-Type']) headers['Content-Type'] = 'application/json'
|
||||
}
|
||||
options.body = data
|
||||
}
|
||||
if (Object.keys(headers).length) options.headers = headers
|
||||
const response = { error: null, ok: null, status: 0, headers: {}, responseType: '', result: null }
|
||||
try {
|
||||
const resp = await fetch(url, options)
|
||||
Object.assign(response, { ok: resp.ok, status: resp.status, headers: Object.fromEntries(resp.headers.entries()) })
|
||||
if (!responseType) {
|
||||
const contentType = resp.headers.get('Content-Type') || ''
|
||||
if (contentType.includes('application/json')) responseType = 'json'
|
||||
else if (/image|video|audio|pdf|zip|octet-stream/.test(contentType)) responseType = 'binary'
|
||||
else responseType = 'text'
|
||||
response.responseType = responseType
|
||||
}
|
||||
if (response.ok === false) response.error = (response.statusText || 'HTTP ' + response.status + ' error') + ' for ' + url
|
||||
if (responseType === 'json') response.result = await resp.json()
|
||||
else response.result = (responseType === 'binary') ? await resp.arrayBuffer() : await resp.text()
|
||||
} catch (err) {
|
||||
Object.assign(response, { error: err.message || String(err), ok: false })
|
||||
}
|
||||
return response
|
||||
}
|
||||
}
|
||||
|
||||
const controller = new AbortController()
|
||||
const timer = setTimeout(() => controller.abort(), timeout)
|
||||
opt.signal = controller.signal
|
||||
|
||||
try {
|
||||
const response = await fetch(url, opt)
|
||||
clearTimeout(timer)
|
||||
const result = responseType === 'blob' ? await response.blob() : (responseType === 'text' ? await response.text() : await response.json())
|
||||
return { ok: response.ok, status: response.status, result }
|
||||
} catch (err) {
|
||||
clearTimeout(timer)
|
||||
return { ok: false, status: 0, error: err.message }
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Component.register('API', container => {
|
||||
if (!container.state.request) container.state.request = { url: '', method: 'GET', data: {}, noui: false }
|
||||
if (!container.state.response) container.state.response = { ok: false, status: 0, result: null, loading: false }
|
||||
|
||||
container.do = async (req) => {
|
||||
const opt = { ...container.state.request, ...req }
|
||||
container.state.response.loading = true
|
||||
const resp = await HTTP.request(opt)
|
||||
Object.assign(container.state.response, resp, { loading: false })
|
||||
if (!resp.ok) {
|
||||
if (!opt.noui && global.UI?.toast) global.UI.toast(resp.error || 'Request failed', { type: 'danger' })
|
||||
}
|
||||
container.dispatchEvent(new CustomEvent('success', { bubbles: false, detail: resp.result }))
|
||||
return resp
|
||||
}
|
||||
|
||||
let _autoTimer = null
|
||||
container.state.request.__watch(null, () => {
|
||||
if (!container.hasAttribute('auto') || !container.state.request.url) return
|
||||
if (_autoTimer) return
|
||||
_autoTimer = Promise.resolve().then(() => {
|
||||
container.do()
|
||||
_autoTimer = null
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
global.HTTP = HTTP;
|
||||
|
||||
})(globalThis);
|
||||
// HTTP 和 API 组件
|
||||
export const APIComponent = Component.register('API', container => {
|
||||
container.request = NewState({ url: '', method: 'GET', headers: {}, data: null, timeout: 10000, responseType: '' })
|
||||
container.response = NewState({ loading: false, ok: null, status: null, error: null, headers: {}, responseType: '', result: null })
|
||||
container.result = NewState()
|
||||
container.do = (opt = {}) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const req = { ...container.request, ...opt }
|
||||
if (!req.url) throw new Error('.url is required')
|
||||
req.headers = { ...container.request.headers, ...opt.headers }
|
||||
container.response.loading = true
|
||||
HTTP.request(req).then(resp => {
|
||||
Object.keys(resp).forEach(k => { if (k !== 'result') container.response[k] = resp[k] })
|
||||
if (resp.result && typeof resp.result === 'object' && container.result && typeof container.result === 'object') {
|
||||
Object.assign(container.result, resp.result)
|
||||
} else {
|
||||
container.result = resp.result
|
||||
}
|
||||
container.response.loading = false
|
||||
if (resp.ok === false) throw new Error(resp.error)
|
||||
if (typeof resp.result === 'object' && resp.result.error) throw new Error(resp.result.error)
|
||||
container.dispatchEvent(new CustomEvent('response', { detail: resp, bubbles: false }))
|
||||
resolve(resp)
|
||||
}).catch(err => {
|
||||
if (!opt.noui && globalThis.UI?.toast) UI.toast(err.message, { type: 'danger' })
|
||||
container.dispatchEvent(new CustomEvent('error', { detail: err, bubbles: true }))
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
let _autoTimer = null
|
||||
container.request.__watch(null, () => {
|
||||
if (!container.hasAttribute('auto') || !container.request.url) return
|
||||
if (_autoTimer) return
|
||||
_autoTimer = Promise.resolve().then(() => {
|
||||
container.do()
|
||||
_autoTimer = null
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
63
src/index.js
63
src/index.js
@ -1,20 +1,49 @@
|
||||
// src/index.js
|
||||
import { NewState, State } from '@apigo.cc/state'
|
||||
import '@apigo.cc/bootstrap'
|
||||
import './ui.js'
|
||||
import './http.js'
|
||||
import './form.js'
|
||||
import './list.js'
|
||||
import './interaction.js'
|
||||
import './controls.js'
|
||||
import './nav.js'
|
||||
|
||||
// Additional global helpers or initializations for base can go here
|
||||
if (typeof document !== 'undefined') {
|
||||
// Example: global listener for exitBlocks
|
||||
window.addEventListener('beforeunload', (event) => {
|
||||
if (globalThis.State?.exitBlocks > 0) {
|
||||
event.preventDefault();
|
||||
event.returnValue = '';
|
||||
}
|
||||
});
|
||||
// Re-exports
|
||||
export * from './http.js'
|
||||
export * from './ui.js'
|
||||
export * from './form.js'
|
||||
export * from './controls.js'
|
||||
export * from './list.js'
|
||||
export * from './nav.js'
|
||||
export * from './interaction.js'
|
||||
|
||||
export { State }
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.addEventListener('beforeunload', (event) => {
|
||||
if (State.exitBlocks > 0) event.preventDefault()
|
||||
})
|
||||
}
|
||||
|
||||
const htmlNode = document.documentElement;
|
||||
if (!htmlNode.hasAttribute('$data-bs-theme') && !htmlNode.hasAttribute('data-bs-theme')) {
|
||||
htmlNode.setAttribute('$data-bs-theme', "LocalStorage.darkMode?'dark':'light'");
|
||||
}
|
||||
|
||||
// Side effects: ensure global namespaces are populated
|
||||
import { HTTP } from './http.js'
|
||||
import { UI } from './ui.js'
|
||||
import { AutoForm } from './form.js'
|
||||
import { MouseMover } from './interaction.js'
|
||||
import { VirtualScroll } from './list.js'
|
||||
import './nav.js'
|
||||
import './controls.js'
|
||||
|
||||
globalThis.HTTP = HTTP
|
||||
globalThis.UI = UI
|
||||
globalThis.AutoForm = AutoForm
|
||||
globalThis.MouseMover = MouseMover
|
||||
globalThis.VirtualScroll = VirtualScroll
|
||||
|
||||
const ApigoBase = {
|
||||
HTTP, UI, AutoForm, MouseMover, VirtualScroll, State,
|
||||
List: VirtualScroll
|
||||
};
|
||||
|
||||
if (typeof document !== 'undefined') {
|
||||
globalThis.ApigoBase = ApigoBase;
|
||||
}
|
||||
|
||||
|
||||
@ -1,73 +1,60 @@
|
||||
// src/interaction.js
|
||||
(function(global) {
|
||||
const { Component, Util } = global;
|
||||
import { Component, Util } from '@apigo.cc/state'
|
||||
|
||||
const MouseMover = {
|
||||
bind: (handle, target, options = {}) => {
|
||||
let isMoving = false
|
||||
let startX, startY, startLeft, startTop
|
||||
let _mouseMoverMoving = false
|
||||
let _mouseMoverPos = {}
|
||||
let _mouseMoverEvents = {}
|
||||
|
||||
const onMouseDown = (e) => {
|
||||
if (options.shouldStart && !options.shouldStart(e)) return
|
||||
isMoving = true
|
||||
startX = e.clientX
|
||||
startY = e.clientY
|
||||
const rect = target.getBoundingClientRect()
|
||||
startLeft = rect.left
|
||||
startTop = rect.top
|
||||
document.addEventListener('mousemove', onMouseMove)
|
||||
document.addEventListener('mouseup', onMouseUp)
|
||||
if (options.onStart) options.onStart(e)
|
||||
}
|
||||
export const MouseMover = {
|
||||
start: (event, { onmousemove, onmouseup }) => {
|
||||
_mouseMoverPos = { x: event.clientX, y: event.clientY, w: 0, h: 0 }
|
||||
_mouseMoverEvents = { onmousemove, onmouseup }
|
||||
_mouseMoverMoving = true
|
||||
},
|
||||
}
|
||||
|
||||
const onMouseMove = (e) => {
|
||||
if (!isMoving) return
|
||||
const dx = e.clientX - startX
|
||||
const dy = e.clientY - startY
|
||||
if (options.axis !== 'y') target.style.left = (startLeft + dx) + 'px'
|
||||
if (options.axis !== 'x') target.style.top = (startTop + dy) + 'px'
|
||||
if (options.onMove) options.onStart(e)
|
||||
}
|
||||
if (typeof document !== 'undefined') {
|
||||
document.addEventListener('mouseup', event => {
|
||||
if (!_mouseMoverMoving) return
|
||||
_mouseMoverMoving = false
|
||||
_mouseMoverEvents.onmouseup?.({ event, ..._mouseMoverPos })
|
||||
})
|
||||
document.addEventListener('mousemove', event => {
|
||||
if (!_mouseMoverMoving) return
|
||||
_mouseMoverPos.w = event.clientX - _mouseMoverPos.x
|
||||
_mouseMoverPos.h = event.clientY - _mouseMoverPos.y
|
||||
_mouseMoverEvents.onmousemove?.({ event, ..._mouseMoverPos })
|
||||
})
|
||||
}
|
||||
|
||||
const onMouseUp = (e) => {
|
||||
isMoving = false
|
||||
document.removeEventListener('mousemove', onMouseMove)
|
||||
document.removeEventListener('mouseup', onMouseUp)
|
||||
if (options.onEnd) options.onEnd(e)
|
||||
}
|
||||
|
||||
handle.addEventListener('mousedown', onMouseDown)
|
||||
return () => handle.removeEventListener('mousedown', onMouseDown)
|
||||
}
|
||||
}
|
||||
|
||||
Component.register('Resizer', container => {
|
||||
container.style.cursor = container.hasAttribute('vertical') ? 'col-resize' : 'row-resize'
|
||||
container.addEventListener('mousedown', e => {
|
||||
const target = container.parentElement
|
||||
if (!target) return
|
||||
const rect = target.getBoundingClientRect()
|
||||
const startX = e.clientX
|
||||
const startY = e.clientY
|
||||
const startW = rect.width
|
||||
const startH = rect.height
|
||||
|
||||
const onMouseMove = (e) => {
|
||||
const dw = e.clientX - startX
|
||||
const dh = e.clientY - startY
|
||||
if (container.hasAttribute('vertical')) target.style.width = (startW + dw) + 'px'
|
||||
else target.style.height = (startH + dh) + 'px'
|
||||
container.dispatchEvent(new CustomEvent('resize', { bubbles: false, detail: { width: target.offsetWidth, height: target.offsetHeight } }))
|
||||
}
|
||||
const onMouseUp = () => {
|
||||
document.removeEventListener('mousemove', onMouseMove)
|
||||
document.removeEventListener('mouseup', onMouseUp)
|
||||
}
|
||||
document.addEventListener('mousemove', onMouseMove)
|
||||
document.addEventListener('mouseup', onMouseUp)
|
||||
})
|
||||
}, Util.makeDom(/*html*/`<div style="position:absolute;right:0;bottom:0;width:10px;height:10px;z-index:100"></div>`))
|
||||
|
||||
global.MouseMover = MouseMover;
|
||||
|
||||
})(globalThis);
|
||||
Component.register('Resizer', container => {
|
||||
container.isVertical = container.hasAttribute('vertical')
|
||||
const min = parseInt(container.getAttribute('min')) || 10
|
||||
const max = parseInt(container.getAttribute('max')) || 1000
|
||||
const target = container.target || container.previousElementSibling
|
||||
container.addEventListener('bind', e => {
|
||||
if (e.detail !== undefined && e.detail !== null) {
|
||||
target.style[container.isVertical ? 'height' : 'width'] = e.detail + 'px'
|
||||
}
|
||||
})
|
||||
const getSize = (startSize, w, h) => {
|
||||
const newSize = startSize + (container.isVertical ? h : w)
|
||||
return newSize < min ? min : newSize > max ? max : newSize
|
||||
}
|
||||
container.addEventListener('mousedown', event => {
|
||||
const startSize = container.isVertical ? target.offsetHeight : target.offsetWidth
|
||||
MouseMover.start(event, {
|
||||
onmousemove: ({ w, h }) => {
|
||||
const newSize = getSize(startSize, w, h)
|
||||
target.style[container.isVertical ? 'height' : 'width'] = newSize + 'px'
|
||||
container.dispatchEvent(new CustomEvent('resizing', { detail: { oldSize: startSize, newSize }, bubbles: false }))
|
||||
},
|
||||
onmouseup: ({ w, h }) => {
|
||||
const newSize = getSize(startSize, w, h)
|
||||
container.dispatchEvent(new CustomEvent('resize', { detail: { oldSize: startSize, newSize }, bubbles: false }))
|
||||
container.dispatchEvent(new CustomEvent('change', { detail: newSize, bubbles: false }))
|
||||
},
|
||||
})
|
||||
})
|
||||
}, Util.makeDom(/*html*/`
|
||||
<div $class="border-\${this.isVertical?'top':'start'} flex-shrink-0" $style="\${this.isVertical?'height':'width'}:3px;\${!this.isVertical?'height':'width'}:100%;cursor:\${this.isVertical?'row-resize':'col-resize'}"></div>
|
||||
`))
|
||||
|
||||
339
src/list.js
339
src/list.js
@ -1,127 +1,244 @@
|
||||
// src/list.js
|
||||
(function(global) {
|
||||
const { Component, NewState, Util, Hash } = global;
|
||||
import { Component, NewState, Util, Hash } from '@apigo.cc/state'
|
||||
|
||||
const VirtualScroll = (options = {}) => {
|
||||
const config = {
|
||||
itemHeight: 50,
|
||||
buffer: 5,
|
||||
...options
|
||||
}
|
||||
export const VirtualScroll = (options = {}) => {
|
||||
const itemHeights = new Map()
|
||||
const groupHeights = new Map()
|
||||
let groupItemCount = 1
|
||||
const avg = Util.newAvg()
|
||||
let padTop = 0, rowGap = 0, topMargin = 0, itemMarginTop = null, itemMarginBottom = null, listInited = false
|
||||
|
||||
return (container) => {
|
||||
if (!container.state.list) container.state.list = []
|
||||
if (!container.state._renderedList) container.state._renderedList = []
|
||||
const providedItemHeight = options.itemHeight || null;
|
||||
|
||||
let _lastScrollTop = 0
|
||||
let _ticking = false
|
||||
return {
|
||||
reset: (list, container) => {
|
||||
listInited = false; itemHeights.clear(); groupHeights.clear(); avg.clear(); topMargin = 0; itemMarginTop = null; itemMarginBottom = null;
|
||||
if (!list?.length) return [];
|
||||
const size = list.length; groupItemCount = Math.ceil(Math.sqrt(size)) || 10;
|
||||
const style = window.getComputedStyle(container);
|
||||
padTop = parseFloat(style.paddingTop) || 0; rowGap = parseFloat(style.rowGap) || 0;
|
||||
// Optimization: Give a reasonably large initial buffer instead of just 30 to prevent the
|
||||
// "first scroll unresponsiveness" where the user scrolls past the small initial slice
|
||||
// before the init() callback has time to map all heights.
|
||||
const visibleCount = Math.max(10, Math.ceil((container.clientHeight || 100) / (providedItemHeight || 32)));
|
||||
return list.slice(0, Math.min(visibleCount * 3, size));
|
||||
},
|
||||
init: (list, refreshCallback) => {
|
||||
if (listInited) return;
|
||||
const size = list.length;
|
||||
let defaultHeight = providedItemHeight || avg.get() || 32;
|
||||
|
||||
// Optimization: If the first item declares a fixed height, use it as the global baseline.
|
||||
// This completely bypasses the need for DOM measurement (node.offsetHeight) in fixed-height scenarios.
|
||||
if (size > 0 && typeof list[0] === 'object' && list[0] !== null && list[0]._itemHeight) {
|
||||
defaultHeight = list[0]._itemHeight;
|
||||
}
|
||||
|
||||
avg.add(defaultHeight);
|
||||
if (itemMarginTop === null) { itemMarginTop = 0; itemMarginBottom = 0; }
|
||||
|
||||
const update = () => {
|
||||
const list = container.state.list || []
|
||||
const scrollTop = container.scrollTop
|
||||
const containerHeight = container.clientHeight
|
||||
const itemHeight = config.itemHeight
|
||||
for (let i = 0; i < size; i++) {
|
||||
if (!itemHeights.has(i)) {
|
||||
// Fallback to individual item height if specified, otherwise global default
|
||||
const ih = (typeof list[i] === 'object' && list[i] !== null && list[i]._itemHeight) ? list[i]._itemHeight : defaultHeight;
|
||||
itemHeights.set(i, ih);
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < size; i += groupItemCount) groupHeights.set(i, Math.min(groupItemCount, size - i) * defaultHeight);
|
||||
listInited = true; refreshCallback();
|
||||
},
|
||||
update: (absoluteIndex, node) => {
|
||||
if (node.offsetHeight === 0) return;
|
||||
if (itemMarginTop === null) {
|
||||
const style = window.getComputedStyle(node);
|
||||
itemMarginTop = parseFloat(style.marginTop) || 0; itemMarginBottom = parseFloat(style.marginBottom) || 0;
|
||||
}
|
||||
if (absoluteIndex === 0 && !topMargin) topMargin = itemMarginTop;
|
||||
const newHeight = node.offsetHeight + itemMarginTop + itemMarginBottom + rowGap;
|
||||
const oldHeight = itemHeights.get(absoluteIndex);
|
||||
if (newHeight !== oldHeight) {
|
||||
itemHeights.set(absoluteIndex, newHeight); avg.add(newHeight);
|
||||
const offset = newHeight - (oldHeight || 0), groupIndex = absoluteIndex - (absoluteIndex % groupItemCount);
|
||||
if (groupHeights.has(groupIndex)) groupHeights.set(groupIndex, groupHeights.get(groupIndex) + offset);
|
||||
}
|
||||
},
|
||||
calc: (container, list) => {
|
||||
if (!listInited || !list) return null;
|
||||
const size = list.length;
|
||||
const avgVal = Math.max(16, avg.get() || 32);
|
||||
let visibleCount = Math.max(10, Math.ceil((container.clientHeight || 100) / avgVal));
|
||||
let prev = padTop + topMargin + rowGap, post = 0, status = 0, listStartIndex = 0, listEndIndex = 0;
|
||||
let renderedList = [];
|
||||
const scrollTop = container.scrollTop;
|
||||
let loopCount = 0;
|
||||
|
||||
const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - config.buffer)
|
||||
const endIndex = Math.min(list.length, Math.ceil((scrollTop + containerHeight) / itemHeight) + config.buffer)
|
||||
for (let i = 0; i < size; i++) {
|
||||
if (++loopCount > size * 2) {
|
||||
throw new Error(`VirtualScroll.calc infinite loop detected at i=${i}, status=${status}, size=${size}, groupItemCount=${groupItemCount}`);
|
||||
}
|
||||
if (status === 0) {
|
||||
const gh = groupHeights.get(i);
|
||||
if (gh && prev + gh <= scrollTop && (i + groupItemCount < size)) {
|
||||
prev += gh;
|
||||
i += groupItemCount - 1;
|
||||
} else {
|
||||
const ih = itemHeights.get(i);
|
||||
if (prev + ih <= scrollTop && i < size - 1) {
|
||||
prev += ih;
|
||||
} else {
|
||||
status = 1;
|
||||
let visibleStartIndex = Math.max(0, i);
|
||||
listStartIndex = Math.max(0, visibleStartIndex - visibleCount);
|
||||
listEndIndex = Math.min(listStartIndex + visibleCount * 3, size);
|
||||
i = listEndIndex - 1;
|
||||
renderedList = list.slice(listStartIndex, listEndIndex);
|
||||
for (let j = listStartIndex; j < visibleStartIndex; j++) prev -= itemHeights.get(j);
|
||||
}
|
||||
}
|
||||
} else if (status === 1) {
|
||||
const gh = groupHeights.get(i);
|
||||
if (gh) {
|
||||
post += gh;
|
||||
i += groupItemCount - 1;
|
||||
} else {
|
||||
post += itemHeights.get(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Fix for flex gap inflation:
|
||||
// prevHeight block participates in flex gap, so we subtract one rowGap.
|
||||
const finalPrevHeight = Math.max(0, prev - padTop - topMargin - rowGap - (listStartIndex > 0 ? rowGap : 0));
|
||||
// post accumulated M * (h + gap). Real space is sum(h) + (M-1)*gap = post - gap.
|
||||
// DOM adds one gap before the block, so we need postHeight + gap = post - gap => postHeight = post - 2*gap.
|
||||
const finalPostHeight = post > 0 ? Math.max(0, post - 2 * rowGap) : 0;
|
||||
return { prevHeight: finalPrevHeight, postHeight: finalPostHeight, renderedList, listStartIndex };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const rendered = []
|
||||
for (let i = startIndex; i < endIndex; i++) {
|
||||
rendered.push({
|
||||
...list[i],
|
||||
_top: i * itemHeight,
|
||||
_index: i
|
||||
})
|
||||
}
|
||||
Component.register('List', container => {
|
||||
container.mode = container.getAttribute('mode') || 'normal'
|
||||
container.fast = container.hasAttribute('fast')
|
||||
container.collapsible = container.hasAttribute('collapsible')
|
||||
|
||||
const padTopEl = container.fast ? container.querySelector('.vs-pad-top') : null
|
||||
const padBottomEl = container.fast ? container.querySelector('.vs-pad-bottom') : null
|
||||
|
||||
container.state._renderedList = rendered
|
||||
|
||||
const spacerPost = container.querySelector('.dt-spacer-post')
|
||||
if (spacerPost) {
|
||||
spacerPost.style.height = (list.length * itemHeight - (endIndex * itemHeight)) + 'px'
|
||||
spacerPost.style.display = 'block'
|
||||
}
|
||||
const spacerPrev = container.querySelector('.dt-spacer-prev')
|
||||
if (spacerPrev) {
|
||||
spacerPrev.style.height = (startIndex * itemHeight) + 'px'
|
||||
spacerPrev.style.display = 'block'
|
||||
}
|
||||
}
|
||||
const defaultSets = {
|
||||
idfield: 'id', labelfield: 'label', summaryfield: 'summary',
|
||||
groupidfield: 'id', grouplabelfield: 'label', groupsummaryfield: 'summary', groupfield: 'group',
|
||||
parentfield: 'parent', groupicon: 'folder', itemicon: 'file'
|
||||
}
|
||||
container.collapsed = NewState({})
|
||||
|
||||
const updateFlatList = () => {
|
||||
Util.updateDefaults(container, defaultSets)
|
||||
const list = container.state.list || [], flatList = []
|
||||
if (container.mode === 'group') {
|
||||
const itemMap = {}
|
||||
list.forEach(item => (itemMap[item[container.groupfield]] ??= []).push(item));
|
||||
(container.state.groups || []).forEach(group => {
|
||||
flatList.push({ type: 'group', ...group })
|
||||
const items = itemMap[group[container.groupidfield]]
|
||||
if (items) items.forEach(item => flatList.push({ type: 'item', ...item }))
|
||||
})
|
||||
} else if (container.mode === 'tree') {
|
||||
const childrenMap = {}
|
||||
list.forEach(item => (childrenMap[item[container.parentfield] || ''] ??= []).push(item))
|
||||
const traverse = (items, level, parents) => items.forEach(item => {
|
||||
const id = item[container.idfield], hasChildren = !!childrenMap[id]?.length
|
||||
const isCollapsed = container.collapsed[id]
|
||||
flatList.push({ type: 'item', ...item, _level: level, _hasChildren: hasChildren, _parents: parents })
|
||||
if (hasChildren && !isCollapsed) traverse(childrenMap[id], level + 1, [...parents, id])
|
||||
})
|
||||
traverse(childrenMap[''] || [], 0, [])
|
||||
} else list.forEach(item => flatList.push({ type: 'item', ...item }))
|
||||
container.state._flatList = flatList
|
||||
}
|
||||
|
||||
container.state.__watch('list', updateFlatList)
|
||||
const vs = container.fast ? VirtualScroll() : null
|
||||
container.state._renderedList = []
|
||||
|
||||
container.addEventListener('scroll', () => {
|
||||
if (!_ticking) {
|
||||
window.requestAnimationFrame(() => {
|
||||
update()
|
||||
_ticking = false
|
||||
})
|
||||
_ticking = true
|
||||
}
|
||||
})
|
||||
let refreshing = false
|
||||
container.refresh = () => {
|
||||
if (!container.fast || refreshing) return
|
||||
refreshing = true
|
||||
try {
|
||||
const res = vs.calc(container, container.state._flatList)
|
||||
if (res) {
|
||||
if (padTopEl) padTopEl.style.height = `${res.prevHeight}px`
|
||||
if (padBottomEl) padBottomEl.style.height = `${res.postHeight}px`
|
||||
|
||||
container.state.__watch('list', update)
|
||||
window.addEventListener('resize', update)
|
||||
Promise.resolve().then(update)
|
||||
}
|
||||
}
|
||||
if (container.state._listStartIndex !== res.listStartIndex) {
|
||||
container.state._listStartIndex = res.listStartIndex
|
||||
}
|
||||
|
||||
Component.register('FastList', container => {
|
||||
const itemHeights = new Map()
|
||||
const groupHeights = new Map()
|
||||
let groupItemCount = 1
|
||||
container.state.renderedList = []
|
||||
const avg = Util.newAvg()
|
||||
let containerPaddingTop = 0
|
||||
let containerRowGap = 0
|
||||
let topMargin = 0
|
||||
const cur = container.state._renderedList || []
|
||||
if (cur.length !== res.renderedList.length || cur[0] !== res.renderedList[0] || cur[cur.length - 1] !== res.renderedList[res.renderedList.length - 1]) {
|
||||
container.state._renderedList = res.renderedList
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
setTimeout(() => { refreshing = false }, 0)
|
||||
}
|
||||
}
|
||||
|
||||
const update = () => {
|
||||
const list = container.state.list || []
|
||||
const groups = container.state.groups || []
|
||||
const scrollTop = container.scrollTop
|
||||
const viewHeight = container.clientHeight
|
||||
const itemHeight = container.state.itemHeight || 40
|
||||
container.onItemUpdate = (index, node) => { if (container.fast) vs.update(index + (container.state._listStartIndex || 0), node) }
|
||||
|
||||
let currentTop = 0
|
||||
let startIndex = -1
|
||||
let endIndex = list.length
|
||||
container.state.__watch('_flatList', flatList => {
|
||||
if (container.fast) {
|
||||
if (padTopEl) padTopEl.style.height = '0px'
|
||||
if (padBottomEl) padBottomEl.style.height = '0px'
|
||||
container.state._listStartIndex = 0
|
||||
container.state._renderedList = vs.reset(flatList, container) || []
|
||||
setTimeout(() => { if (container.state._flatList === flatList) vs.init(flatList, container.refresh) })
|
||||
} else container.state._renderedList = flatList
|
||||
})
|
||||
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const h = itemHeights.get(list[i].id) || itemHeight
|
||||
if (startIndex === -1 && currentTop + h > scrollTop - 200) startIndex = i
|
||||
if (startIndex !== -1 && currentTop > scrollTop + viewHeight + 200) {
|
||||
endIndex = i
|
||||
break
|
||||
}
|
||||
currentTop += h
|
||||
}
|
||||
container.selectItem = (item, index) => {
|
||||
if (container.hasAttribute('auto-select')) container.state.selectedItem = container.state.selectedItem === item[container.idfield] ? null : item[container.idfield]
|
||||
container.dispatchEvent(new CustomEvent('itemclick', { bubbles: false, detail: { item, index: index + (container.fast ? (container.state._listStartIndex || 0) : 0) } }))
|
||||
}
|
||||
container.selectGroup = (item, index) => {
|
||||
if (container.hasAttribute('auto-select-group')) container.state.selectedGroup = container.state.selectedGroup === item[container.groupidfield] ? null : item[container.groupidfield]
|
||||
container.dispatchEvent(new CustomEvent('groupclick', { bubbles: false, detail: { item, index } }))
|
||||
}
|
||||
container.toggleCollapse = (item) => { if (container.collapsible && item._hasChildren) { container.collapsed[item[container.idfield]] = !container.collapsed[item[container.idfield]]; updateFlatList(); } }
|
||||
|
||||
if (startIndex === -1) startIndex = 0
|
||||
container.state.renderedList = list.slice(startIndex, endIndex).map((item, i) => ({ ...item, _index: startIndex + i }))
|
||||
|
||||
const prevH = list.slice(0, startIndex).reduce((s, item) => s + (itemHeights.get(item.id) || itemHeight), 0)
|
||||
const postH = list.slice(endIndex).reduce((s, item) => s + (itemHeights.get(item.id) || itemHeight), 0)
|
||||
|
||||
const prev = container.querySelector('.list-spacer-prev')
|
||||
const post = container.querySelector('.list-spacer-post')
|
||||
if (prev) prev.style.height = prevH + 'px'
|
||||
if (post) post.style.height = postH + 'px'
|
||||
}
|
||||
|
||||
container.addEventListener('scroll', update)
|
||||
container.state.__watch('list', update)
|
||||
Promise.resolve().then(update)
|
||||
}, Util.makeDom(/*html*/`
|
||||
<div class="fast-list-root overflow-auto h-100">
|
||||
<div class="list-spacer-prev"></div>
|
||||
<div class="list-container">
|
||||
<template $each="this.state.renderedList" key="id">
|
||||
<div slot-id="item"></div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="list-spacer-post"></div>
|
||||
updateFlatList()
|
||||
}, Util.makeDom(/*html*/`
|
||||
<div class="list-group overflow-auto" onscroll="this.refresh()" style="overflow-anchor:none">
|
||||
<div class="vs-pad-top flex-shrink-0" style="height:0px;"></div>
|
||||
<template slot-id="item" $each="this.state?._renderedList">
|
||||
<div $onupdate="this.onItemUpdate(index, thisNode)" $class="list-group-item list-group-item-action d-inline-flex align-items-center ps-2 pe-2 \${item.type==='group'?(this.state?.selectedGroup===item[this.groupidfield]?'active':''):(this.state?.selectedItem===item[this.idfield]?'active':'')}" $onclick="item.type==='group'?this.selectGroup(item,index):this.selectItem(item,index)">
|
||||
<template $if="item.type === 'group'">
|
||||
<template $if="this.groupicon">
|
||||
<span $class="bi bi-\${this.groupicon} text-body"></span>
|
||||
</template>
|
||||
<div class="flex-shrink-0 px-1" $text="\${item[this.grouplabelfield]}"></div>
|
||||
<div class="text-muted small flex-fill text-end text-truncate" style="width: 0" $text="\${item[this.groupsummaryfield]}"></div>
|
||||
<div slot-id="group-actions"></div>
|
||||
</template>
|
||||
<template $if="item.type === 'item'">
|
||||
<template $if="this.mode === 'tree'">
|
||||
<div $style="width:\${item._level * 16 + (this.collapsible ? 16 : 0)}px; cursor:\${this.collapsible ? 'pointer' : 'default'}" class="text-end text-muted flex-shrink-0" $onclick="event.stopPropagation(); this.toggleCollapse(item)">
|
||||
<template $if="this.collapsible && item._hasChildren">
|
||||
<i $class="bi \${this.collapsed[item[this.idfield]] ? 'bi-caret-right-fill' : 'bi-caret-down-fill'}"></i>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template $if="this.mode === 'tree'">
|
||||
<span $class="text-muted bi bi-\${item._hasChildren ? this.groupicon : this.itemicon}"></span>
|
||||
</template>
|
||||
<template $if="this.mode !== 'tree' && this.itemicon">
|
||||
<span $class="bi bi-\${this.itemicon} text-body"></span>
|
||||
</template>
|
||||
<div class="flex-shrink-0 px-1" $text="\${item[this.labelfield]}"></div>
|
||||
<div class="text-muted small flex-fill text-end text-truncate" style="width: 0" $text="\${item[this.summaryfield]}"></div>
|
||||
<div slot-id="item-actions"></div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<div class="vs-pad-bottom flex-shrink-0" style="height:0px;"></div>
|
||||
</div>
|
||||
`))
|
||||
|
||||
global.VirtualScroll = VirtualScroll;
|
||||
|
||||
})(globalThis);
|
||||
|
||||
97
src/nav.js
97
src/nav.js
@ -1,48 +1,53 @@
|
||||
// src/nav.js
|
||||
(function(global) {
|
||||
const { Component, Hash, Util } = global;
|
||||
import { Component, Hash, Util } from '@apigo.cc/state'
|
||||
|
||||
Component.register('Nav', container => {
|
||||
container.state.items = []
|
||||
container.state.activeId = Hash.nav
|
||||
container.state.__watch('activeId', v => Hash.nav = v)
|
||||
window.addEventListener('hashchange', () => container.state.activeId = Hash.nav)
|
||||
|
||||
container.select = (id) => {
|
||||
container.state.activeId = id
|
||||
container.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: id }))
|
||||
}
|
||||
}, Util.makeDom(/*html*/`
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<template $each="this.state.items" as="item">
|
||||
<li class="nav-item">
|
||||
<a $class="nav-link \${this.state.activeId === item.id ? 'active' : ''}"
|
||||
href="#" $onclick="this.select(item.id)">
|
||||
<i $if="item.icon" $class="bi bi-\${item.icon} me-2"></i>
|
||||
<span $text="item.label"></span>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
Component.register('Nav', container => {
|
||||
container.vertical = container.hasAttribute('vertical')
|
||||
container.click = (item, noselect) => {
|
||||
if (!item.noselect && !noselect) Hash.nav = item.name
|
||||
container.dispatchEvent(new CustomEvent('nav', { detail: { item }, bubbles: false }))
|
||||
}
|
||||
}, Util.makeDom(/*html*/`
|
||||
<div $class="\${this.vertical ? 'd-flex flex-column border-end h-100' : 'navbar navbar-expand border-bottom'} bg-body-secondary px-3 \${this.vertical ? 'py-3' : 'pb-0'} align-items-center \${this.vertical ? 'align-items-start' : ''}">
|
||||
<template $if="this.state?.brand?.image">
|
||||
<img $src="this.state.brand.image" $class="\${this.vertical ? 'mb-4' : 'me-2'}" style="height:30px;width:auto;max-width:300px">
|
||||
</template>
|
||||
<template $if="this.state?.brand?.icon">
|
||||
<i $class="bi bi-\${this.state.brand.icon} \${this.vertical ? 'mb-4' : 'me-2'}"></i>
|
||||
</template>
|
||||
<template $if="this.state?.brand?.label">
|
||||
<span $class="\${this.vertical ? 'mb-4 fw-bold' : 'me-2'}" $text="this.state.brand.label"></span>
|
||||
</template>
|
||||
<div $class="\${this.vertical ? 'w-100' : 'ms-2'}"></div>
|
||||
<template $each="this.state?.list || []">
|
||||
<div $class="\${this.vertical ? 'nav nav-pills flex-column w-100' : 'navbar-nav'} text-truncate \${item.type==='fill'?'flex-fill':''}">
|
||||
<template $if="item.type==='button'">
|
||||
<button $class="nav-link \${Hash.nav===item.name?'active':''} \${this.vertical ? 'text-start' : ''}" $onclick="this.click(item)">
|
||||
<i $class="bi bi-\${item.icon} me-2"></i><span $class="\${this.vertical ? '' : 'd-none d-' + (this.state?.list?.length>5?'lg':'md') + '-inline'}" $text="item.label"></span>
|
||||
</button>
|
||||
</template>
|
||||
<template $if="item.type==='dropdown'">
|
||||
<div class="dropdown">
|
||||
<button $class="nav-link \${Hash.nav===item.name?'active':''} \${this.vertical ? 'text-start' : ''}" data-bs-toggle="dropdown">
|
||||
<i $class="bi bi-\${item.icon} me-2"></i><span $class="\${this.vertical ? '' : 'd-none d-' + (this.state?.list?.length>5?'lg':'md') + '-inline'}" $text="item.label"></span>
|
||||
</button>
|
||||
<div $class="dropdown-menu \${this.vertical?'position-static':'dropdown-menu-end'} p-3 bg-body-secondary shadow" $style="width: \${item.width || 250}px;">
|
||||
<template $each="item.list" as="subitem">
|
||||
<template $if="subitem.type==='button'">
|
||||
<button class="nav-link px-0 w-100 text-start" $onclick="this.click(subitem, true)">
|
||||
<i $class="bi bi-\${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span>
|
||||
</button>
|
||||
</template>
|
||||
<template $if="subitem.type==='switch'">
|
||||
<div class="d-flex align-items-center">
|
||||
<i $class="bi bi-\${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span><div class="flex-fill"></div>
|
||||
<div class="form-switch"><input class="form-check-input mx-0" type="checkbox" $bind="subitem.bind[subitem.name]"></div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
`))
|
||||
|
||||
Component.register('Breadcrumb', container => {
|
||||
container.state.items = []
|
||||
}, Util.makeDom(/*html*/`
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb mb-0">
|
||||
<template $each="this.state.items" as="item">
|
||||
<li $class="breadcrumb-item \${index === (this.state.items || []).length - 1 ? 'active' : ''}">
|
||||
<template $if="index < (this.state.items || []).length - 1">
|
||||
<a href="#" $onclick="this.dispatchEvent(new CustomEvent('select', {detail: item}))" $text="item.label"></a>
|
||||
</template>
|
||||
<template $if="index === (this.state.items || []).length - 1">
|
||||
<span $text="item.label"></span>
|
||||
</template>
|
||||
</li>
|
||||
</template>
|
||||
</ol>
|
||||
</nav>
|
||||
`))
|
||||
|
||||
})(globalThis);
|
||||
|
||||
134
src/ui.js
134
src/ui.js
@ -1,20 +1,18 @@
|
||||
// src/ui.js
|
||||
(function(global) {
|
||||
const { Component, Util, $ } = global;
|
||||
import { Component, Util, $ } from '@apigo.cc/state'
|
||||
|
||||
const UI = {};
|
||||
export const UI = {}
|
||||
|
||||
Component.register('Modal', container => {
|
||||
container.modal = new bootstrap.Modal(container)
|
||||
container.addEventListener('bind', e => {
|
||||
e.detail ? container.modal.show() : container.modal.hide()
|
||||
})
|
||||
container.addEventListener('hide.bs.modal', () => {
|
||||
document.activeElement?.blur()
|
||||
container.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: false }))
|
||||
})
|
||||
Util.copyFunction(container, container.modal, 'show', 'hide')
|
||||
}, Util.makeDom(/*html*/`
|
||||
Component.register('Modal', container => {
|
||||
container.modal = new bootstrap.Modal(container)
|
||||
container.addEventListener('bind', e => {
|
||||
e.detail ? container.modal.show() : container.modal.hide()
|
||||
})
|
||||
container.addEventListener('hide.bs.modal', () => {
|
||||
document.activeElement?.blur()
|
||||
container.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: false }))
|
||||
})
|
||||
Util.copyFunction(container, container.modal, 'show', 'hide')
|
||||
}, Util.makeDom(/*html*/`
|
||||
<div class="modal fade" data-bs-backdrop="static">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div $class="modal-content border-\${this.state?.type || 'primary'} border-2 shadow-lg">
|
||||
@ -29,7 +27,7 @@
|
||||
</div>
|
||||
`))
|
||||
|
||||
Component.register('Dialog', Component.getSetupFunction('Modal'), Util.makeDom(/*html*/`
|
||||
Component.register('Dialog', Component.getSetupFunction('Modal'), Util.makeDom(/*html*/`
|
||||
<div class="modal fade" data-bs-backdrop="static">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div $class="modal-content border-\${this.state?.type || 'primary'} border-2 shadow-lg">
|
||||
@ -47,48 +45,48 @@
|
||||
</div>
|
||||
`))
|
||||
|
||||
let _dialogCount = 0
|
||||
UI.showDialog = function ({ title = '', message = '', buttons = ['{#Close#}'], type = 'body' }) {
|
||||
const d = document.body.appendChild(document.createElement('Dialog'))
|
||||
d.style.zIndex = 2000 + ++_dialogCount
|
||||
Promise.resolve().then(() => {
|
||||
Object.assign(d.state, { message, title, type, buttons })
|
||||
d.show()
|
||||
})
|
||||
return new Promise((resolve) => {
|
||||
d.addEventListener('change', e => {
|
||||
_dialogCount--
|
||||
resolve(d.result || 0)
|
||||
d.remove()
|
||||
})
|
||||
})
|
||||
}
|
||||
let _dialogCount = 0
|
||||
UI.showDialog = function ({ title = '', message = '', buttons = ['{#Close#}'], type = 'body' }) {
|
||||
const d = document.body.appendChild(document.createElement('Dialog'))
|
||||
d.style.zIndex = 2000 + ++_dialogCount
|
||||
Promise.resolve().then(() => {
|
||||
Object.assign(d.state, { message, title, type, buttons })
|
||||
d.show()
|
||||
})
|
||||
return new Promise((resolve) => {
|
||||
d.addEventListener('change', e => {
|
||||
_dialogCount--
|
||||
resolve(d.result || 0)
|
||||
d.remove()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
UI.alert = function (message, options = {}) {
|
||||
return UI.showDialog({ message, ...options })
|
||||
}
|
||||
UI.confirm = function (message, options = {}) {
|
||||
return new Promise((resolve) => UI.showDialog({ message, buttons: ['{#Cancel#}', '{#Confirm#}'], ...options }).then(index => resolve(index >= 2)).catch(() => resolve(false)))
|
||||
}
|
||||
UI.alert = function (message, options = {}) {
|
||||
return UI.showDialog({ message, ...options })
|
||||
}
|
||||
UI.confirm = function (message, options = {}) {
|
||||
return new Promise((resolve) => UI.showDialog({ message, buttons: ['{#Cancel#}', '{#Confirm#}'], ...options }).then(index => resolve(index >= 2)).catch(() => resolve(false)))
|
||||
}
|
||||
|
||||
Component.register('Toast', container => {
|
||||
container.toast = new bootstrap.Toast(container, { autohide: container.state.delay > 0 })
|
||||
Util.copyFunction(container, container.toast, 'show', 'hide')
|
||||
container.addEventListener('show.bs.toast', () => {
|
||||
if (container.state.delay > 0) {
|
||||
let timer
|
||||
const startTimer = () => {
|
||||
container.state.left = container.state.delay / 1000
|
||||
timer = setInterval(() => {
|
||||
if (!container.isConnected || --container.state.left <= 0) clearInterval(timer)
|
||||
}, 1000)
|
||||
}
|
||||
startTimer()
|
||||
container.addEventListener('mouseenter', () => { clearInterval(timer); container.state.left = undefined })
|
||||
container.addEventListener('mouseleave', startTimer)
|
||||
}
|
||||
})
|
||||
}, Util.makeDom(/*html*/`
|
||||
Component.register('Toast', container => {
|
||||
container.toast = new bootstrap.Toast(container, { autohide: container.state.delay > 0 })
|
||||
Util.copyFunction(container, container.toast, 'show', 'hide')
|
||||
container.addEventListener('show.bs.toast', () => {
|
||||
if (container.state.delay > 0) {
|
||||
let timer
|
||||
const startTimer = () => {
|
||||
container.state.left = container.state.delay / 1000
|
||||
timer = setInterval(() => {
|
||||
if (!container.isConnected || --container.state.left <= 0) clearInterval(timer)
|
||||
}, 1000)
|
||||
}
|
||||
startTimer()
|
||||
container.addEventListener('mouseenter', () => { clearInterval(timer); container.state.left = undefined })
|
||||
container.addEventListener('mouseleave', startTimer)
|
||||
}
|
||||
})
|
||||
}, Util.makeDom(/*html*/`
|
||||
<div class="toast align-items-center border-0 m-1">
|
||||
<div $class="toast-body rounded p-3 text-bg-\${this.state?.type}">
|
||||
<div class="d-flex align-items-center">
|
||||
@ -109,18 +107,14 @@
|
||||
</div>
|
||||
`), Util.makeDom(/*html*/`<div toast-container="default" class="position-fixed bottom-0 end-0 overflow-auto" style="z-index:3000;max-height:80%"></div>`))
|
||||
|
||||
UI.toast = function (message, options = {}) {
|
||||
const delay = options.delay ?? 5000
|
||||
const t = document.createElement('Toast')
|
||||
t.state = { delay, left: delay ? delay / 1000 : undefined, type: options.type || 'primary', message, buttons: options.buttons || [] }
|
||||
$(`[toast-container="${options.container || 'default'}"]`).appendChild(t)
|
||||
Promise.resolve().then(() => t.show())
|
||||
}
|
||||
UI.toast = function (message, options = {}) {
|
||||
const delay = options.delay ?? 5000
|
||||
const t = document.createElement('Toast')
|
||||
t.state = { delay, left: delay ? delay / 1000 : undefined, type: options.type || 'primary', message, buttons: options.buttons || [] }
|
||||
$(`[toast-container="${options.container || 'default'}"]`).appendChild(t)
|
||||
Promise.resolve().then(() => t.show())
|
||||
}
|
||||
|
||||
UI.toastConfirm = function (message, options = {}) {
|
||||
return new Promise((resolve) => UI.toast(message, { buttons: ['{#Confirm#}'], ...options }).then(index => resolve(index === 1)).catch(() => resolve(false)))
|
||||
}
|
||||
|
||||
global.UI = UI;
|
||||
|
||||
})(globalThis);
|
||||
UI.toastConfirm = function (message, options = {}) {
|
||||
return new Promise((resolve) => UI.toast(message, { buttons: ['{#Confirm#}'], ...options }).then(index => resolve(index === 1)).catch(() => resolve(false)))
|
||||
}
|
||||
|
||||
@ -1,10 +1,4 @@
|
||||
{
|
||||
"status": "failed",
|
||||
"failedTests": [
|
||||
"8a84b43f13b676ea22b7-4f4df3778b9a6eb1af05",
|
||||
"3779845d6d162ffd6a31-a0891c7cdc5018d2d965",
|
||||
"3b536bb397f2008773c1-4debec93cdb0fb4b728c",
|
||||
"e444dae6bf10150e2e04-c45d1b6ee1ed839393fc",
|
||||
"2812e09a1ea99f189232-a499b1acb367a0cbe09c"
|
||||
]
|
||||
"status": "passed",
|
||||
"failedTests": []
|
||||
}
|
||||
@ -1,116 +0,0 @@
|
||||
# Instructions
|
||||
|
||||
- Following Playwright test failed.
|
||||
- Explain why, be concise, respect Playwright best practices.
|
||||
- Provide a snippet of code with the fix, if possible.
|
||||
|
||||
# Test info
|
||||
|
||||
- Name: all.spec.js >> base project comprehensive tests and scrolling benchmarks
|
||||
- Location: test/all.spec.js:3:1
|
||||
|
||||
# Error details
|
||||
|
||||
```
|
||||
Error: expect(received).toBeGreaterThan(expected)
|
||||
|
||||
Expected: > 0
|
||||
Received: 0
|
||||
```
|
||||
|
||||
# Page snapshot
|
||||
|
||||
```yaml
|
||||
- generic [active] [ref=e1]:
|
||||
- heading "All Tests Passed 🎉" [level=1] [ref=e3]
|
||||
- generic [ref=e4]:
|
||||
- button "Fast List" [ref=e5] [cursor=pointer]
|
||||
- button "Fast Grouped" [ref=e6] [cursor=pointer]
|
||||
- button "Fast Tree" [ref=e7] [cursor=pointer]
|
||||
- button "Normal Tree" [ref=e8] [cursor=pointer]
|
||||
- button "AutoForm Controls" [ref=e9] [cursor=pointer]
|
||||
- heading "Fast List (Variable Height)" [level=5] [ref=e12]
|
||||
```
|
||||
|
||||
# Test source
|
||||
|
||||
```ts
|
||||
1 | import { test, expect } from '@playwright/test';
|
||||
2 |
|
||||
3 | test('base project comprehensive tests and scrolling benchmarks', async ({ page }) => {
|
||||
4 | test.setTimeout(60000);
|
||||
5 | page.on('console', msg => console.log('BROWSER LOG:', msg.text()));
|
||||
6 | page.on('pageerror', err => console.log('BROWSER EXCEPTION:', err.message, err.stack));
|
||||
7 | await page.goto('http://127.0.0.1:8082/test/index.html');
|
||||
8 |
|
||||
9 | // Wait for testStatus to be set (includes basic unit tests and scrolling refresh test)
|
||||
10 | await page.waitForFunction(() => window.testStatus !== undefined, { timeout: 60000 });
|
||||
11 |
|
||||
12 | const status = await page.evaluate(() => window.testStatus);
|
||||
13 | expect(status).toBe('passed');
|
||||
14 |
|
||||
15 | // Simulate real scrolling and check dynamic rendering for FastList
|
||||
16 | console.log('Simulating real scroll on FastList...');
|
||||
17 | const scrollInfo = await page.evaluate(async () => {
|
||||
18 | window.switchTab?.('ll');
|
||||
19 | await new Promise(r => setTimeout(r, 200)); // wait for render
|
||||
20 | const el = document.getElementById('ll');
|
||||
21 | const results = [];
|
||||
22 |
|
||||
23 | const getRenderedCount = () => el.querySelectorAll('.border-primary').length;
|
||||
24 |
|
||||
25 | results.push({
|
||||
26 | id: 'initial',
|
||||
27 | scrollTop: el.scrollTop,
|
||||
28 | scrollHeight: el.scrollHeight,
|
||||
29 | clientHeight: el.clientHeight,
|
||||
30 | renderedCount: getRenderedCount(),
|
||||
31 | renderedListLen: el.state.renderedList?.length
|
||||
32 | });
|
||||
33 |
|
||||
34 | // Scroll to middle
|
||||
35 | el.scrollTop = 50000;
|
||||
36 | el.refresh?.();
|
||||
37 | await new Promise(r => setTimeout(r, 500));
|
||||
38 | const midCount = getRenderedCount();
|
||||
39 | const midHtml = el.innerHTML.length;
|
||||
40 | results.push({
|
||||
41 | id: 'deep-middle',
|
||||
42 | scrollTop: el.scrollTop,
|
||||
43 | renderedCount: midCount,
|
||||
44 | htmlLen: midHtml,
|
||||
45 | prevHeight: el.state.prevHeight,
|
||||
46 | postHeight: el.state.postHeight,
|
||||
47 | renderedListLen: el.state._renderedList?.length
|
||||
48 | });
|
||||
49 |
|
||||
50 | // Scroll to end
|
||||
51 | el.scrollTop = el.scrollHeight;
|
||||
52 | el.refresh?.();
|
||||
53 | await new Promise(r => setTimeout(r, 500));
|
||||
54 | results.push({
|
||||
55 | id: 'end',
|
||||
56 | scrollTop: el.scrollTop,
|
||||
57 | renderedCount: getRenderedCount(),
|
||||
58 | scrollHeight: el.scrollHeight,
|
||||
59 | prevHeight: el.state.prevHeight,
|
||||
60 | postHeight: el.state.postHeight
|
||||
61 | });
|
||||
62 |
|
||||
63 | return results;
|
||||
64 | });
|
||||
65 |
|
||||
66 | console.log('Scroll Details:', JSON.stringify(scrollInfo, null, 2));
|
||||
> 67 | expect(scrollInfo[0].renderedCount).toBeGreaterThan(0);
|
||||
| ^ Error: expect(received).toBeGreaterThan(expected)
|
||||
68 | expect(scrollInfo[1].scrollTop).toBeGreaterThan(0);
|
||||
69 |
|
||||
70 | const bench = await page.evaluate(() => window.benchResults);
|
||||
71 | if (bench) {
|
||||
72 | Object.entries(bench).forEach(([name, time]) => {
|
||||
73 | console.log(`BENCHMARK [${name}]: ${time.toFixed(2)}ms`);
|
||||
74 | });
|
||||
75 | }
|
||||
76 | });
|
||||
77 |
|
||||
```
|
||||
@ -1,119 +0,0 @@
|
||||
# Instructions
|
||||
|
||||
- Following Playwright test failed.
|
||||
- Explain why, be concise, respect Playwright best practices.
|
||||
- Provide a snippet of code with the fix, if possible.
|
||||
|
||||
# Test info
|
||||
|
||||
- Name: deep_dump.spec.js >> Capability demo page deep DOM dump
|
||||
- Location: test/deep_dump.spec.js:3:1
|
||||
|
||||
# Error details
|
||||
|
||||
```
|
||||
Error: expect(received).toBeGreaterThan(expected)
|
||||
|
||||
Expected: > 0
|
||||
Received: 0
|
||||
```
|
||||
|
||||
# Page snapshot
|
||||
|
||||
```yaml
|
||||
- generic [ref=e2]:
|
||||
- navigation [ref=e4]
|
||||
- generic [ref=e6]:
|
||||
- generic [ref=e7]:
|
||||
- heading "项目概览" [level=2] [ref=e8]
|
||||
- button " 切换主题" [ref=e10] [cursor=pointer]:
|
||||
- generic [ref=e11]:
|
||||
- text: 切换主题
|
||||
- generic [ref=e12]:
|
||||
- generic [ref=e13]:
|
||||
- heading "Apigo Base Mega Demo" [level=1] [ref=e14]
|
||||
- paragraph [ref=e15]: 点击左侧菜单查看不同组件的能力展示
|
||||
- generic [ref=e16]:
|
||||
- heading "核心原子能力验证 (State singleton)" [level=4] [ref=e17]
|
||||
- generic [ref=e18]:
|
||||
- generic [ref=e20]:
|
||||
- generic [ref=e21]: 1. $text & 样式绑定
|
||||
- generic [ref=e22]:
|
||||
- paragraph [ref=e23]: Synchronous State Ready
|
||||
- button "切换颜色" [ref=e24] [cursor=pointer]
|
||||
- generic [ref=e26]:
|
||||
- generic [ref=e27]: 2. $if 显式模板判断
|
||||
- generic [ref=e28]:
|
||||
- generic [ref=e29]: 已激活 ($if="true")
|
||||
- button "切换显示状态" [ref=e30] [cursor=pointer]
|
||||
- generic [ref=e32]:
|
||||
- generic [ref=e33]: 3. $each 循环渲染
|
||||
- generic [ref=e35]:
|
||||
- generic [ref=e36]: Alpha
|
||||
- generic [ref=e37]: Beta
|
||||
- generic [ref=e38]: Gamma
|
||||
- generic [ref=e40]:
|
||||
- generic [ref=e41]: 4. $if 嵌套 $each
|
||||
- generic [ref=e42]:
|
||||
- generic [ref=e43]:
|
||||
- generic [ref=e44]: Red
|
||||
- generic [ref=e45]: Green
|
||||
- generic [ref=e46]: Blue
|
||||
- button "切换外层容器" [ref=e47] [cursor=pointer]
|
||||
- generic [ref=e49]:
|
||||
- generic [ref=e50]:
|
||||
- text: 5. $each 嵌套 $if (奇偶成员过滤)
|
||||
- button "仅看奇数项" [ref=e51] [cursor=pointer]
|
||||
- generic [ref=e53]:
|
||||
- generic [ref=e54]:
|
||||
- generic [ref=e55]:
|
||||
- text: Alice (1)
|
||||
- generic [ref=e56]:
|
||||
- generic [ref=e57]:
|
||||
- text: Bob (2)
|
||||
- generic [ref=e58]:
|
||||
- generic [ref=e59]:
|
||||
- text: Charlie (3)
|
||||
- generic [ref=e60]:
|
||||
- generic [ref=e61]:
|
||||
- text: David (4)
|
||||
- generic [ref=e62]:
|
||||
- generic [ref=e63]:
|
||||
- text: Eve (5)
|
||||
```
|
||||
|
||||
# Test source
|
||||
|
||||
```ts
|
||||
1 | import { test, expect } from '@playwright/test';
|
||||
2 |
|
||||
3 | test('Capability demo page deep DOM dump', async ({ page }) => {
|
||||
4 | page.on('console', msg => console.log('BROWSER:', msg.text()));
|
||||
5 |
|
||||
6 | await page.goto('http://localhost:5173/test/capability.html');
|
||||
7 | await page.waitForTimeout(3000);
|
||||
8 |
|
||||
9 | const dump = await page.evaluate(() => {
|
||||
10 | const nav = document.getElementById('mainNav');
|
||||
11 | const form = document.getElementById('demoForm');
|
||||
12 | return {
|
||||
13 | nav: {
|
||||
14 | tagName: nav?.tagName,
|
||||
15 | childCount: nav?.children.length,
|
||||
16 | innerHTML: nav?.innerHTML
|
||||
17 | },
|
||||
18 | form: {
|
||||
19 | tagName: form?.tagName,
|
||||
20 | childCount: form?.children.length,
|
||||
21 | innerHTML: form?.innerHTML
|
||||
22 | }
|
||||
23 | };
|
||||
24 | });
|
||||
25 |
|
||||
26 | console.log('Deep DOM Dump:', JSON.stringify(dump, null, 2));
|
||||
27 |
|
||||
> 28 | expect(dump.nav.childCount).toBeGreaterThan(0);
|
||||
| ^ Error: expect(received).toBeGreaterThan(expected)
|
||||
29 | });
|
||||
30 |
|
||||
```
|
||||
@ -1,41 +0,0 @@
|
||||
# Instructions
|
||||
|
||||
- Following Playwright test failed.
|
||||
- Explain why, be concise, respect Playwright best practices.
|
||||
- Provide a snippet of code with the fix, if possible.
|
||||
|
||||
# Test info
|
||||
|
||||
- Name: mega_verify.spec.js >> Empirical Mega Verification
|
||||
- Location: test/mega_verify.spec.js:3:1
|
||||
|
||||
# Error details
|
||||
|
||||
```
|
||||
Error: page.evaluate: TypeError: Cannot read properties of null (reading 'querySelectorAll')
|
||||
at eval (eval at evaluate (:302:30), <anonymous>:3:27)
|
||||
at UtilityScript.evaluate (<anonymous>:304:16)
|
||||
at UtilityScript.<anonymous> (<anonymous>:1:44)
|
||||
```
|
||||
|
||||
# Page snapshot
|
||||
|
||||
```yaml
|
||||
- generic [ref=e2]:
|
||||
- heading "AutoForm Mega Test & Function Showcase" [level=2] [ref=e3]
|
||||
- generic [ref=e4]:
|
||||
- generic [ref=e7]: 1. Vertical Mode
|
||||
- generic [ref=e9]:
|
||||
- generic [ref=e11]:
|
||||
- generic [ref=e12]: 2. Responsive Horizontal
|
||||
- generic [ref=e13]: Try shrinking the window!
|
||||
- generic [ref=e16]: 2b. Forced Horizontal
|
||||
- generic [ref=e18]:
|
||||
- heading "3. Inline Mode Scenarios" [level=4] [ref=e19]
|
||||
- generic [ref=e20]:
|
||||
- heading "Toolbar (No label, with action)" [level=6] [ref=e22]
|
||||
- heading "Compact Config (With labels, no button)" [level=6] [ref=e25]
|
||||
- generic [ref=e27]:
|
||||
- generic [ref=e28]: Live Data Sync Debug
|
||||
- generic [ref=e30]: "{ \"t\": \"Apigo\", \"s\": \"1\", \"c\": [ \"Apple\" ], \"sw\": false, \"cp\": \"#0d6efd\", \"range\": \"2026-01-01\", \"rangeEnd\": \"2026-12-31\" }"
|
||||
```
|
||||
@ -1,71 +0,0 @@
|
||||
# Instructions
|
||||
|
||||
- Following Playwright test failed.
|
||||
- Explain why, be concise, respect Playwright best practices.
|
||||
- Provide a snippet of code with the fix, if possible.
|
||||
|
||||
# Test info
|
||||
|
||||
- Name: verify_stress.spec.js >> Stress test: Virtual List should handle 10,000 items with dynamic height
|
||||
- Location: test/verify_stress.spec.js:3:1
|
||||
|
||||
# Error details
|
||||
|
||||
```
|
||||
Test timeout of 60000ms exceeded.
|
||||
```
|
||||
|
||||
```
|
||||
Error: page.waitForFunction: Test timeout of 60000ms exceeded.
|
||||
```
|
||||
|
||||
# Page snapshot
|
||||
|
||||
```yaml
|
||||
- generic [ref=e2]:
|
||||
- heading "1. Standard List (Normal)" [level=5] [ref=e4]
|
||||
- 'heading "2. Group List (Mode: Group)" [level=5] [ref=e7]'
|
||||
- 'heading "3. Tree List (Mode: Tree + Collapsible)" [level=5] [ref=e10]'
|
||||
- heading "4. FAST Virtual List (10,000 Items + Dynamic Height)" [level=5] [ref=e13]
|
||||
```
|
||||
|
||||
# Test source
|
||||
|
||||
```ts
|
||||
1 | import { test, expect } from '@playwright/test';
|
||||
2 |
|
||||
3 | test('Stress test: Virtual List should handle 10,000 items with dynamic height', async ({ page }) => {
|
||||
4 | test.setTimeout(60000);
|
||||
5 | page.on('console', msg => console.log('BROWSER LOG:', msg.text()));
|
||||
6 |
|
||||
7 | await page.goto('http://localhost:8082/test/list_test.html');
|
||||
8 |
|
||||
9 | const listFast = page.locator('#listFast');
|
||||
10 | await expect(listFast).toBeVisible();
|
||||
> 11 | await page.waitForFunction(() => document.querySelectorAll('#listFast .list-group-item').length > 0);
|
||||
| ^ Error: page.waitForFunction: Test timeout of 60000ms exceeded.
|
||||
12 |
|
||||
13 | // Check initial state
|
||||
14 | const scrollTop = await listFast.evaluate(e => e.scrollTop);
|
||||
15 | const scrollHeight = await listFast.evaluate(e => e.scrollHeight);
|
||||
16 | const clientHeight = await listFast.evaluate(e => e.clientHeight);
|
||||
17 | console.log(`Initial: scrollTop=${scrollTop}, scrollHeight=${scrollHeight}, clientHeight=${clientHeight}`);
|
||||
18 |
|
||||
19 | // Attach event listener to see if scroll fires
|
||||
20 | await listFast.evaluate(e => {
|
||||
21 | e.addEventListener('scroll', () => console.log('SCROLL EVENT FIRED! new scrollTop:', e.scrollTop));
|
||||
22 | });
|
||||
23 |
|
||||
24 | // Scroll to the very end
|
||||
25 | await listFast.evaluate(e => e.scrollTop = e.scrollHeight);
|
||||
26 | await page.waitForTimeout(1000);
|
||||
27 |
|
||||
28 | const finalScrollTop = await listFast.evaluate(e => e.scrollTop);
|
||||
29 | console.log(`Final: scrollTop=${finalScrollTop}`);
|
||||
30 |
|
||||
31 | const lastItemText = await listFast.locator('.list-group-item').last().textContent();
|
||||
32 | console.log('Last rendered item text:', lastItemText);
|
||||
33 | expect(lastItemText).toContain('Virtual Item 10000');
|
||||
34 | });
|
||||
35 |
|
||||
```
|
||||
@ -1,72 +0,0 @@
|
||||
# Instructions
|
||||
|
||||
- Following Playwright test failed.
|
||||
- Explain why, be concise, respect Playwright best practices.
|
||||
- Provide a snippet of code with the fix, if possible.
|
||||
|
||||
# Test info
|
||||
|
||||
- Name: verify_style.spec.js >> Check styles and globals
|
||||
- Location: test/verify_style.spec.js:3:1
|
||||
|
||||
# Error details
|
||||
|
||||
```
|
||||
Test timeout of 30000ms exceeded.
|
||||
```
|
||||
|
||||
```
|
||||
Error: locator.evaluate: Test timeout of 30000ms exceeded.
|
||||
Call log:
|
||||
- waiting for locator('#formH form')
|
||||
|
||||
```
|
||||
|
||||
# Page snapshot
|
||||
|
||||
```yaml
|
||||
- generic [ref=e2]:
|
||||
- heading "AutoForm Mega Test & Function Showcase" [level=2] [ref=e3]
|
||||
- generic [ref=e4]:
|
||||
- generic [ref=e7]: 1. Vertical Mode
|
||||
- generic [ref=e9]:
|
||||
- generic [ref=e11]:
|
||||
- generic [ref=e12]: 2. Responsive Horizontal
|
||||
- generic [ref=e13]: Try shrinking the window!
|
||||
- generic [ref=e16]: 2b. Forced Horizontal
|
||||
- generic [ref=e18]:
|
||||
- heading "3. Inline Mode Scenarios" [level=4] [ref=e19]
|
||||
- generic [ref=e20]:
|
||||
- heading "Toolbar (No label, with action)" [level=6] [ref=e22]
|
||||
- heading "Compact Config (With labels, no button)" [level=6] [ref=e25]
|
||||
- generic [ref=e27]:
|
||||
- generic [ref=e28]: Live Data Sync Debug
|
||||
- generic [ref=e30]: "{ \"t\": \"Apigo\", \"s\": \"1\", \"c\": [ \"Apple\" ], \"sw\": false, \"cp\": \"#0d6efd\", \"range\": \"2026-01-01\", \"rangeEnd\": \"2026-12-31\" }"
|
||||
```
|
||||
|
||||
# Test source
|
||||
|
||||
```ts
|
||||
1 | import { test, expect } from '@playwright/test';
|
||||
2 |
|
||||
3 | test('Check styles and globals', async ({ page }) => {
|
||||
4 | await page.goto('http://localhost:8082/test/form_test.html');
|
||||
5 |
|
||||
6 | // Check if auto-grid-form is grid (horizontal mode)
|
||||
7 | const formH = page.locator('#formH form');
|
||||
> 8 | const display = await formH.evaluate(el => window.getComputedStyle(el).display);
|
||||
| ^ Error: locator.evaluate: Test timeout of 30000ms exceeded.
|
||||
9 | console.log('formH display:', display);
|
||||
10 | expect(display).toBe('grid');
|
||||
11 |
|
||||
12 | // Get color picker input to check height
|
||||
13 | const colorInput = page.locator('#formH input[type="color"]');
|
||||
14 | if (await colorInput.count() > 0) {
|
||||
15 | const height = await colorInput.evaluate(el => window.getComputedStyle(el).height);
|
||||
16 | console.log('colorInput height:', height);
|
||||
17 | // It shouldn't be very small (like 0 or 2px)
|
||||
18 | expect(parseInt(height)).toBeGreaterThan(20);
|
||||
19 | }
|
||||
20 | });
|
||||
21 |
|
||||
```
|
||||
@ -3,8 +3,7 @@ import { test, expect } from '@playwright/test';
|
||||
test('Capability demo page atomic tests verification', async ({ page }) => {
|
||||
page.on('console', msg => console.log('BROWSER:', msg.text()));
|
||||
|
||||
await page.goto('/test/capability.html');
|
||||
// Wait for the framework to initialize and finish initial renders
|
||||
await page.goto('http://localhost:5173/test/capability.html');
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
const testResults = await page.evaluate(() => {
|
||||
@ -12,22 +11,22 @@ test('Capability demo page atomic tests verification', async ({ page }) => {
|
||||
const getColors = (sel) => Array.from(document.querySelectorAll(sel)).map(el => el.style.color);
|
||||
|
||||
return {
|
||||
textBinding: getTexts('.test-title-node'),
|
||||
textColor: getColors('.test-title-node'),
|
||||
textBinding: getTexts('p[$text="DemoState.testTitle"]'),
|
||||
textColor: getColors('p[$text="DemoState.testTitle"]'),
|
||||
ifTrue: document.querySelector('.alert-success')?.textContent.trim(),
|
||||
ifFalse: document.querySelector('.alert-danger')?.textContent.trim(),
|
||||
eachItems: getTexts('.list-group-item'),
|
||||
nestedEachInIf: getTexts('.badge.bg-secondary'),
|
||||
nestedIfInEach: getTexts('.p-2.border.rounded.bg-white.shadow-sm')
|
||||
eachItems: getTexts('li.list-group-item'),
|
||||
nestedEachInIf: getTexts('.badge.bg-primary'),
|
||||
nestedIfInEach: getTexts('.bg-white')
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
console.log('Atomic Test Results:', JSON.stringify(testResults, null, 2));
|
||||
|
||||
expect(testResults.textBinding).toContain('Synchronous State Ready');
|
||||
expect(testResults.ifTrue).toBe('已激活 ($if="true")');
|
||||
expect(testResults.textBinding).toContain('Framework Is Active');
|
||||
expect(testResults.ifTrue).toBe('显示的内容 (True)');
|
||||
expect(testResults.ifFalse).toBeUndefined();
|
||||
expect(testResults.eachItems).toHaveLength(3);
|
||||
expect(testResults.nestedEachInIf).toHaveLength(3);
|
||||
expect(testResults.nestedIfInEach).toHaveLength(5); // All members initially visible
|
||||
expect(testResults.nestedIfInEach).toHaveLength(2); // Item A and C are visible
|
||||
});
|
||||
|
||||
@ -1,38 +1,127 @@
|
||||
// test/base.test.js
|
||||
window.runTests = async function() {
|
||||
import { HTTP, UI, State } from '@apigo.cc/base';
|
||||
|
||||
export async function runTests() {
|
||||
console.log('Starting comprehensive Base.js tests...');
|
||||
|
||||
// 1. HTTP Test
|
||||
console.log('Testing HTTP (local check)...');
|
||||
if (typeof HTTP === 'undefined') throw new Error('Global HTTP not found');
|
||||
|
||||
// 2. UI Test
|
||||
if (typeof HTTP.request !== 'function') throw new Error('HTTP.request missing');
|
||||
|
||||
// 2. State Test
|
||||
console.log('Testing State...');
|
||||
State.exitBlocks = 1;
|
||||
if (State.exitBlocks !== 1) throw new Error('State update failed');
|
||||
State.exitBlocks = 0;
|
||||
|
||||
// 3. UI Namespace Test
|
||||
console.log('Testing UI...');
|
||||
if (typeof UI === 'undefined') throw new Error('Global UI not found');
|
||||
if (typeof UI.alert !== 'function') throw new Error('UI.alert not found');
|
||||
if (typeof UI.alert !== 'function') throw new Error('UI.alert missing');
|
||||
if (typeof UI.toast !== 'function') throw new Error('UI.toast missing');
|
||||
|
||||
// 3. Component Check
|
||||
console.log('Testing Components...');
|
||||
if (!Component.exists('Modal')) throw new Error('Modal component not registered');
|
||||
if (!Component.exists('AutoForm')) throw new Error('AutoForm component not registered');
|
||||
if (!Component.exists('FastList')) throw new Error('FastList component not registered');
|
||||
// 4. API Component Test
|
||||
console.log('Testing API Component...');
|
||||
const api = document.createElement('API');
|
||||
document.body.appendChild(api);
|
||||
await new Promise(r => setTimeout(r, 50));
|
||||
api.request.url = '../package.json';
|
||||
const apiResp = await api.do();
|
||||
if (!apiResp.ok) throw new Error('API component request failed');
|
||||
api.remove();
|
||||
|
||||
// 4. State Integration
|
||||
console.log('Testing State integration...');
|
||||
if (typeof State === 'undefined') throw new Error('Global State not found');
|
||||
// 5. AutoForm & TagsInput Test
|
||||
console.log('Testing AutoForm...');
|
||||
const { NewState } = await import('@apigo.cc/state');
|
||||
const form = document.createElement('AutoForm');
|
||||
document.body.appendChild(form);
|
||||
await new Promise(r => setTimeout(r, 200));
|
||||
|
||||
// Test dynamic schema and visibility
|
||||
form.data = NewState({ showName: false, name: 'Gemini' });
|
||||
form.state.schema = [
|
||||
{ name: 'tags', type: 'TagsInput', label: '标签' },
|
||||
{ name: 'showName', type: 'switch', label: 'Show Name' },
|
||||
{ name: 'name', type: 'text', label: 'Name', if: 'this.data.showName' }
|
||||
];
|
||||
await new Promise(r => setTimeout(r, 200));
|
||||
if (!form.querySelector('TagsInput')) throw new Error('TagsInput not rendered');
|
||||
if (form.querySelector('[name="name"]')) throw new Error('Name field should be hidden');
|
||||
|
||||
// 5. VirtualScroll logic
|
||||
console.log('Testing VirtualScroll...');
|
||||
if (typeof VirtualScroll === 'undefined') throw new Error('Global VirtualScroll not found');
|
||||
form.data.showName = true;
|
||||
await new Promise(r => setTimeout(r, 200));
|
||||
if (!form.querySelector('[name="name"]')) throw new Error('Name field should be visible');
|
||||
form.remove();
|
||||
|
||||
// Benchmark placeholders (visual verification required via UI)
|
||||
// 6. New Controls (DatePicker, ColorPicker, IconPicker) Test
|
||||
console.log('Testing New Controls...');
|
||||
const controlForm = document.createElement('AutoForm');
|
||||
document.body.appendChild(controlForm);
|
||||
await new Promise(r => setTimeout(r, 200));
|
||||
controlForm.state.schema = [
|
||||
{ name: 'startDate', type: 'DatePicker', setting: { rangeEnd: 'endDate' } },
|
||||
{ name: 'endDate', type: 'date' },
|
||||
{ name: 'color', type: 'ColorPicker' },
|
||||
{ name: 'icon', type: 'IconPicker' }
|
||||
];
|
||||
controlForm.data = { startDate: '2026-05-01', endDate: '2026-05-31', color: '#ff0000', icon: 'gear' };
|
||||
await new Promise(r => setTimeout(r, 400));
|
||||
|
||||
const dp = controlForm.querySelector('DatePicker');
|
||||
const cp = controlForm.querySelector('ColorPicker');
|
||||
const ip = controlForm.querySelector('IconPicker');
|
||||
|
||||
if (!dp) throw new Error('DatePicker not rendered');
|
||||
if (!cp) throw new Error('ColorPicker not rendered');
|
||||
if (!ip) throw new Error('IconPicker not rendered');
|
||||
|
||||
// Test DatePicker range sync
|
||||
dp.updateEnd('2026-06-01');
|
||||
if (controlForm.data.endDate !== '2026-06-01') throw new Error('DatePicker rangeEnd sync failed');
|
||||
|
||||
// Test ColorPicker
|
||||
cp.updateValue('#00ff00');
|
||||
if (controlForm.data.color !== '#00ff00') throw new Error('ColorPicker sync failed');
|
||||
|
||||
// Test IconPicker
|
||||
ip.selectIcon('star');
|
||||
if (controlForm.data.icon !== 'star') throw new Error('IconPicker sync failed');
|
||||
|
||||
controlForm.remove();
|
||||
|
||||
// 7. List Components Basic Verification
|
||||
console.log('Verifying List Components...');
|
||||
const { Component } = await import('@apigo.cc/state');
|
||||
console.log('FastList exists:', Component.exists('FastList'));
|
||||
|
||||
const listIds = ['ll', 'gl', 'tt', 'ct'];
|
||||
for (const id of listIds) {
|
||||
window.switchTab?.(id);
|
||||
await new Promise(r => setTimeout(r, 100)); // wait for render
|
||||
const el = document.getElementById(id);
|
||||
if (!el) throw new Error(`Component #${id} not found`);
|
||||
console.log(`Component #${id} tagName:`, el.tagName, 'has refresh:', !!el.refresh, 'setupFunc exists:', !!Component.getSetupFunction(el.tagName));
|
||||
if (!el.state.list || el.state.list.length === 0) throw new Error(`Component #${id} list data not bound`);
|
||||
}
|
||||
|
||||
// 7. Benchmarks
|
||||
console.log('Recording list benchmarks...');
|
||||
window.benchResults = {};
|
||||
|
||||
const measure = async (id, name) => {
|
||||
const list = document.getElementById(id);
|
||||
if (!list) return;
|
||||
window.switchTab?.(id);
|
||||
await new Promise(r => setTimeout(r, 100)); // wait for render
|
||||
const el = document.getElementById(id);
|
||||
const start = performance.now();
|
||||
switchTab(id);
|
||||
await new Promise(r => setTimeout(r, 100));
|
||||
console.log(`BENCHMARK [${name}]: ${performance.now() - start}ms, Items: ${list.state?.renderedList?.length}`);
|
||||
console.log(`[MEASURE] ${name} setting scrollTop to 5000`);
|
||||
el.scrollTop = 5000;
|
||||
console.log(`[MEASURE] ${name} calling refresh`);
|
||||
el.refresh?.();
|
||||
console.log(`[MEASURE] ${name} refresh called, waiting 50ms`);
|
||||
await new Promise(r => setTimeout(r, 50));
|
||||
console.log(`[MEASURE] ${name} wait done`);
|
||||
const time = performance.now() - start;
|
||||
window.benchResults[name] = time;
|
||||
console.log(`BENCHMARK: ${name} scroll & refresh: ${time.toFixed(2)}ms`);
|
||||
console.log(`DEBUG [${id}]: _renderedList len: ${el.state._renderedList?.length}, _flatList len: ${el.state._flatList?.length}`);
|
||||
};
|
||||
|
||||
await measure('ll', 'FastList');
|
||||
|
||||
@ -116,7 +116,7 @@
|
||||
<div class="col-md-8">
|
||||
<AutoForm id="demoForm" vertical
|
||||
$.state.schema="window.formSchema"
|
||||
$.state.data="State.formData"
|
||||
$state.data="State.formData"
|
||||
$onsubmit="UI.toast('提交数据: ' + JSON.stringify(event.detail))">
|
||||
</AutoForm>
|
||||
</div>
|
||||
@ -144,7 +144,7 @@
|
||||
<div style="height: 500px;" class="border rounded overflow-hidden">
|
||||
<List id="demoList" fast collapsible auto-select class="h-100 overflow-auto"
|
||||
$mode="State.listMode"
|
||||
$.state.list="State.listData"
|
||||
$list="State.listData"
|
||||
$.state.groups="State.listGroups"
|
||||
$onitemclick="UI.toast('点击项目: ' + event.detail.item.label)">
|
||||
<template slot-id="item">
|
||||
@ -213,7 +213,7 @@
|
||||
<div class="card h-100">
|
||||
<div class="card-header">1. $text & 样式绑定</div>
|
||||
<div class="card-body text-center">
|
||||
<p class="fs-4 fw-bold test-title-node" $text="State.testTitle" $style="'color:' + State.testColor"></p>
|
||||
<p class="fs-4 fw-bold" $text="State.testTitle" $style="'color:' + State.testColor"></p>
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="State.testColor = State.testColor === 'blue' ? 'green' : 'blue'">切换颜色</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,108 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AutoForm Mega Unit Test</title>
|
||||
<script src="./lib/state.js"></script>
|
||||
<script src="./lib/bootstrap.js"></script>
|
||||
<script src="./lib/base.js"></script>
|
||||
<script>
|
||||
window.fullSchema = [
|
||||
{ name: 't', label: 'Text Input', type: 'text', placeholder: 'Enter name...' },
|
||||
{ name: 's', label: 'Single Select', type: 'select', options: [{label:'Option 1', value:'1'}, {label:'Option 2', value:'2'}] },
|
||||
{ name: 'date', label: 'Single Date', type: 'DatePicker' },
|
||||
{ name: 'range', label: 'Date Range', type: 'DatePicker', setting: { rangeEnd: 'rangeEnd' } },
|
||||
{ name: 'c', label: 'Multi Check', type: 'checkbox', options: ['Apple', 'Banana', 'Orange'] },
|
||||
{ name: 'r', label: 'Single Radio', type: 'radio', options: ['High', 'Medium', 'Low'] },
|
||||
{ name: 'sw', label: 'Enable Linkage', type: 'switch' },
|
||||
{ name: 'linkageField', label: 'Secret Key', type: 'password', if: 'this.data.sw', placeholder: 'Only visible when switch is ON' },
|
||||
{ name: 'cp', label: 'Color Picker', type: 'ColorPicker' },
|
||||
{ name: 'tg', label: 'Tags System', type: 'TagsInput' },
|
||||
{ name: 'txt', label: 'Description', type: 'textarea' }
|
||||
];
|
||||
|
||||
window.searchSchema = [
|
||||
{ name: 'q', type: 'text', placeholder: 'Search...' },
|
||||
{ name: 'cat', type: 'select', placeholder: 'Category', options: ['All', 'Docs', 'Issues'] }
|
||||
];
|
||||
|
||||
window.compactSchema = [
|
||||
{ name: 'user', label: 'User', type: 'text' },
|
||||
{ name: 'role', label: 'Role', type: 'select', options: ['Admin', 'Editor'] }
|
||||
];
|
||||
|
||||
Object.assign(window.State, {
|
||||
formData: { t: 'Apigo', s: '1', c: ['Apple'], sw: false, cp: '#0d6efd', range: '2026-01-01', rangeEnd: '2026-12-31' },
|
||||
searchData: { q: '', cat: '' },
|
||||
compactData: { user: 'Admin', role: 'Admin' }
|
||||
});
|
||||
</script>
|
||||
<style>body { padding: 30px; background: #111; color: #eee; }</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<h2 class="mb-4">AutoForm Mega Test & Function Showcase</h2>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- 1. 垂直模式 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card bg-dark border-secondary h-100">
|
||||
<div class="card-header border-secondary bg-secondary bg-opacity-10">1. Vertical Mode</div>
|
||||
<div class="card-body">
|
||||
<AutoForm id="formV" vertical $.state.schema="window.fullSchema" $.state.data="State.formData"></AutoForm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 响应式水平模式 -->
|
||||
<div class="col-md-8">
|
||||
<div class="card bg-dark border-secondary">
|
||||
<div class="card-header border-secondary bg-secondary bg-opacity-10 d-flex justify-content-between">
|
||||
<span>2. Responsive Horizontal</span>
|
||||
<small class="text-info">Try shrinking the window!</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<AutoForm id="formH" $.state.schema="window.fullSchema" $.state.data="State.formData">
|
||||
<template slot="actions">
|
||||
<button type="button" class="btn btn-outline-info" onclick="UI.toast('Custom Action!')">Custom Button</button>
|
||||
</template>
|
||||
</AutoForm>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-dark border-secondary mt-4">
|
||||
<div class="card-header border-secondary bg-secondary bg-opacity-10">2b. Forced Horizontal</div>
|
||||
<div class="card-body">
|
||||
<AutoForm id="formFH" horizontal $.state.schema="window.fullSchema" $.state.data="State.formData"></AutoForm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<h4 class="text-primary border-bottom pb-2">3. Inline Mode Scenarios</h4>
|
||||
<div class="row align-items-end">
|
||||
<div class="col-auto">
|
||||
<h6>Toolbar (No label, with action)</h6>
|
||||
<div class="p-2 border border-secondary rounded bg-dark d-inline-block shadow-sm">
|
||||
<AutoForm id="formSearch" inline submitlabel="Search" $.state.schema="window.searchSchema" $.state.data="State.searchData"></AutoForm>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto ms-4">
|
||||
<h6>Compact Config (With labels, no button)</h6>
|
||||
<div class="p-2 border border-secondary rounded bg-dark d-inline-block shadow-sm">
|
||||
<AutoForm id="formCompact" inline nobutton $.state.schema="window.compactSchema" $.state.data="State.compactData"></AutoForm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 card bg-dark border-primary">
|
||||
<div class="card-header border-primary text-primary">Live Data Sync Debug</div>
|
||||
<div class="card-body">
|
||||
<pre class="m-0 text-success" $text="JSON.stringify(State.formData, null, 2)"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -5,19 +5,14 @@
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- 同步加载已构建好的依赖 (通过 test/lib/ 软链接) -->
|
||||
<script src="./lib/state.js"></script>
|
||||
<script src="./lib/bootstrap.js"></script>
|
||||
|
||||
<!-- 同步加载 Base 源码 (用于测试当前正在开发的源码) -->
|
||||
<script src="../src/ui.js"></script>
|
||||
<script src="../src/http.js"></script>
|
||||
<script src="../src/form.js"></script>
|
||||
<script src="../src/list.js"></script>
|
||||
<script src="../src/interaction.js"></script>
|
||||
<script src="../src/controls.js"></script>
|
||||
<script src="../src/nav.js"></script>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"@apigo.cc/state": "../../state/src/index.js",
|
||||
"@apigo.cc/base": "../src/index.js"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="d-flex flex-column vh-100">
|
||||
<script>
|
||||
@ -57,26 +52,26 @@
|
||||
<div class="d-flex flex-fill p-2 overflow-hidden">
|
||||
<div id="container-ll" class="list-container flex-fill d-flex flex-column overflow-hidden">
|
||||
<h5>Fast List (Variable Height)</h5>
|
||||
<FastList fast id="ll" auto-select class="flex-fill d-flex flex-column gap-3 bg-body-secondary rounded" $.state.list="list_data" $onitemclick="console.log(index, item)">
|
||||
<List fast id="ll" auto-select class="flex-fill d-flex flex-column gap-3 bg-body-secondary rounded" $.state.list="list_data" $onitemclick="console.log(index, item)">
|
||||
<template slot="item">
|
||||
<div class="d-flex justify-content-center align-items-center border border-primary rounded" $text="item.label" $.style.height="${(item.index%10)*5+40}px"></div>
|
||||
</template>
|
||||
</FastList>
|
||||
</List>
|
||||
</div>
|
||||
<div id="container-gl" class="list-container flex-fill flex-column overflow-hidden" style="display: none;">
|
||||
<h5>Fast Grouped List</h5>
|
||||
<FastList fast mode="group" id="gl" auto-select auto-select-group class="flex-fill d-flex flex-column border border-info rounded" $.state.groups="group_list" $.state.list="list_data"
|
||||
<List fast mode="group" id="gl" auto-select auto-select-group class="flex-fill d-flex flex-column border border-info rounded" $.state.groups="group_list" $.state.list="list_data"
|
||||
$ongroupclick="console.log(index, item)">
|
||||
</FastList>
|
||||
</List>
|
||||
</div>
|
||||
<div id="container-tt" class="list-container flex-fill flex-column overflow-hidden" style="display: none;">
|
||||
<h5>Fast Tree List</h5>
|
||||
<FastList fast mode="tree" id="tt" auto-select class="flex-fill d-flex flex-column border border-info rounded" $.state.list="list_data" $onitemclick="console.log(index, item)"></FastList>
|
||||
<List fast mode="tree" id="tt" auto-select class="flex-fill d-flex flex-column border border-info rounded" $.state.list="list_data" $onitemclick="console.log(index, item)"></List>
|
||||
</div>
|
||||
<div id="container-ct" class="list-container flex-fill flex-column overflow-hidden" style="display: none;">
|
||||
<h5>Normal Tree List (Collapsible)</h5>
|
||||
<FastList mode="tree" collapsible id="ct" auto-select class="flex-fill d-flex flex-column border border-info rounded" $.state.list="list_data.slice(0, 1200)" $onitemclick="console.log(index, item)">
|
||||
</FastList>
|
||||
<List mode="tree" collapsible id="ct" auto-select class="flex-fill d-flex flex-column border border-info rounded" $.state.list="list_data.slice(0, 1200)" $onitemclick="console.log(index, item)">
|
||||
</List>
|
||||
</div>
|
||||
<div id="container-form" class="list-container flex-fill flex-column overflow-hidden" style="display: none;">
|
||||
<h5>AutoForm Controls</h5>
|
||||
@ -98,14 +93,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载测试脚本 -->
|
||||
<script src="./base.test.js"></script>
|
||||
<script>
|
||||
<script type="module">
|
||||
import { runTests } from './base.test.js';
|
||||
|
||||
async function runAll() {
|
||||
const results = document.getElementById('results');
|
||||
try {
|
||||
// Wait for components to initialize (async due to MutationObserver)
|
||||
await new Promise(r => setTimeout(r, 800));
|
||||
// Wait for components to initialize
|
||||
await new Promise(r => setTimeout(r, 500));
|
||||
await runTests();
|
||||
results.innerHTML = '<h1 style="color: green; font-size: 1.2rem">All Tests Passed 🎉</h1>';
|
||||
window.testStatus = 'passed';
|
||||
|
||||
702
test/lib/base.js
702
test/lib/base.js
File diff suppressed because one or more lines are too long
1
test/lib/bootstrap.js
vendored
1
test/lib/bootstrap.js
vendored
@ -1 +0,0 @@
|
||||
../../../bootstrap/dist/bootstrap.js
|
||||
7285
test/lib/bootstrap.js
vendored
Normal file
7285
test/lib/bootstrap.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@
|
||||
../../../state/dist/state.js
|
||||
655
test/lib/state.js
Normal file
655
test/lib/state.js
Normal file
@ -0,0 +1,655 @@
|
||||
(function(global, factory) {
|
||||
typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.ApigoState = {}));
|
||||
})(this, function(exports2) {
|
||||
"use strict";
|
||||
var _a;
|
||||
let _activeBinding = null;
|
||||
let _noWriteBack = null;
|
||||
const setActiveBinding = (val) => _activeBinding = val;
|
||||
const setNoWriteBack = (val) => _noWriteBack = val;
|
||||
const _notifiers = /* @__PURE__ */ new Set();
|
||||
const onNotifyUpdate = (fn) => _notifiers.add(fn);
|
||||
function NewState(defaults = {}, getter = null, setter = null) {
|
||||
const _defaults = {};
|
||||
const _stateMappings = /* @__PURE__ */ new Map();
|
||||
const _watchers = /* @__PURE__ */ new Map();
|
||||
const _watchFunc = (k, cb) => {
|
||||
if (!_watchers.has(k)) _watchers.set(k, /* @__PURE__ */ new Set());
|
||||
!cb ? _watchers.get(k).clear() : _watchers.get(k).add(cb);
|
||||
return () => _watchers.get(k).delete(cb);
|
||||
};
|
||||
const _unwatchFunc = (k, cb) => {
|
||||
if (_watchers.has(k)) _watchers.set(k, /* @__PURE__ */ new Set());
|
||||
_watchers.get(k).delete(cb);
|
||||
};
|
||||
const __getter = getter || ((k) => _defaults[k]);
|
||||
const __setter = setter || ((k, v) => _defaults[k] = v);
|
||||
Object.assign(_defaults, defaults);
|
||||
return new Proxy(_defaults, {
|
||||
get(target, key) {
|
||||
if (key === "__watch") return _watchFunc;
|
||||
if (key === "__unwatch") return _unwatchFunc;
|
||||
if (key === "__isProxy") return true;
|
||||
if (_activeBinding) {
|
||||
if (!_stateMappings.has(key)) _stateMappings.set(key, /* @__PURE__ */ new Set());
|
||||
_stateMappings.get(key).add(_activeBinding);
|
||||
if (!_activeBinding.node._states) _activeBinding.node._states = /* @__PURE__ */ new Set();
|
||||
_activeBinding.node._states.add(_stateMappings);
|
||||
}
|
||||
return __getter(key);
|
||||
},
|
||||
set(target, key, value) {
|
||||
if (__getter(key) !== value) {
|
||||
__setter(key, value);
|
||||
}
|
||||
if (_watchers.has(key)) {
|
||||
_watchers.get(key).forEach((cb) => {
|
||||
const r = cb(value);
|
||||
if (r !== void 0) {
|
||||
value = r;
|
||||
target[key] = value;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (_watchers.has(null)) {
|
||||
_watchers.get(null).forEach((cb) => cb(value));
|
||||
}
|
||||
if (_stateMappings.has(key)) {
|
||||
const bindings = _stateMappings.get(key);
|
||||
for (const binding of bindings) {
|
||||
if (!binding.node.isConnected) {
|
||||
bindings.delete(binding);
|
||||
continue;
|
||||
}
|
||||
if (_noWriteBack !== binding.node) {
|
||||
_notifiers.forEach((fn) => fn(binding));
|
||||
}
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
const $ = (a, b) => b ? a.querySelector(b) : document.querySelector(a);
|
||||
const $$ = (a, b) => b ? a.querySelectorAll(b) : document.querySelectorAll(a);
|
||||
const _components = /* @__PURE__ */ new Map();
|
||||
const _pendingTemplates = [];
|
||||
const Component = {
|
||||
getTemplate: (name) => document.querySelector(`template[component="${name.toUpperCase()}"]`),
|
||||
register: (name, setupFunc, templateNode = null, ...globalNodes) => {
|
||||
console.log("Component.register:", name.toUpperCase());
|
||||
_components.set(name.toUpperCase(), setupFunc);
|
||||
if (document.readyState !== "loading") Component._addTemplate(name, templateNode, globalNodes);
|
||||
else _pendingTemplates.push([name, templateNode, globalNodes]);
|
||||
},
|
||||
exists: (name) => _components.has(name.toUpperCase()),
|
||||
getSetupFunction: (name) => _components.get(name.toUpperCase()),
|
||||
_addTemplate: (name, templateNode, globalNodes) => {
|
||||
if (templateNode) {
|
||||
const template = document.createElement("TEMPLATE");
|
||||
template.setAttribute("component", name.toUpperCase());
|
||||
template.content.appendChild(templateNode);
|
||||
document.body.appendChild(template);
|
||||
}
|
||||
if (globalNodes) globalNodes.forEach((node) => document.body.appendChild(node));
|
||||
},
|
||||
_initPending: () => {
|
||||
_pendingTemplates.forEach(([name, templateNode, globalNodes]) => Component._addTemplate(name, templateNode, globalNodes));
|
||||
_pendingTemplates.length = 0;
|
||||
}
|
||||
};
|
||||
function _mergeNode(from, to, scanObj, exists = {}) {
|
||||
if (from.attributes) {
|
||||
Array.from(from.attributes).forEach((attr) => {
|
||||
if (attr.name === "class") return;
|
||||
if (attr.name === "style") {
|
||||
if (to.hasAttribute("style")) to.setAttribute("style", `${attr.value}; ${to.getAttribute("style")}`);
|
||||
else to.setAttribute("style", attr.value);
|
||||
} else if (!to.hasAttribute(attr.name)) {
|
||||
to.setAttribute(attr.name, attr.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
to.classList.add(...from.classList);
|
||||
Array.from(from.childNodes).forEach((child) => to.appendChild(child));
|
||||
if (from.tagName && Component.exists(from.tagName)) _makeComponent(from.tagName, to, scanObj, exists);
|
||||
}
|
||||
function _makeComponent(name, node, scanObj, exists = {}) {
|
||||
if (exists[name]) return;
|
||||
exists[name] = true;
|
||||
if (scanObj.thisObj) {
|
||||
Array.from(node.attributes).forEach((attr) => {
|
||||
if ((attr.name.startsWith("$") || attr.name.startsWith("st-")) && attr.value.includes("this.")) {
|
||||
attr.value = attr.value.replace(/\bthis\./g, "this.parent.");
|
||||
}
|
||||
});
|
||||
}
|
||||
const componentFunc = Component.getSetupFunction(name);
|
||||
const slots = {};
|
||||
Array.from(node.childNodes).forEach((child) => {
|
||||
if (child.nodeType === Node.ELEMENT_NODE && child.hasAttribute("slot")) {
|
||||
slots[child.getAttribute("slot")] = child;
|
||||
child.removeAttribute("slot");
|
||||
}
|
||||
});
|
||||
node.innerHTML = "";
|
||||
node.state = NewState(node.state || {});
|
||||
const template = Component.getTemplate(name);
|
||||
if (template) {
|
||||
const tplnode = template.content.cloneNode(true);
|
||||
if (tplnode.childNodes.length) {
|
||||
const rootNode = tplnode.children[0];
|
||||
if (rootNode) _mergeNode(rootNode, node, scanObj, exists);
|
||||
$$(node, "[slot-id]").forEach((placeholder) => {
|
||||
const slotName = placeholder.getAttribute("slot-id");
|
||||
if (slots[slotName]) {
|
||||
placeholder.removeAttribute("slot-id");
|
||||
placeholder.innerHTML = "";
|
||||
_mergeNode(slots[slotName], placeholder, scanObj, exists);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
if (componentFunc) componentFunc(node);
|
||||
}
|
||||
let _disableRunCodeError = false;
|
||||
function setDisableRunCodeError(value) {
|
||||
_disableRunCodeError = value;
|
||||
}
|
||||
const _fnCache = /* @__PURE__ */ new Map();
|
||||
function _runCode(code, vars, thisObj, extendVars) {
|
||||
const allVars = { ...extendVars || {}, ...vars || {} };
|
||||
const argKeys = Object.keys(allVars);
|
||||
const argValues = Object.values(allVars);
|
||||
const cacheKey = code + argKeys.join(",");
|
||||
try {
|
||||
let fn = _fnCache.get(cacheKey);
|
||||
if (!fn) {
|
||||
fn = new Function("Hash", "LocalStorage", "State", ...argKeys, code);
|
||||
_fnCache.set(cacheKey, fn);
|
||||
}
|
||||
return fn.apply(thisObj, [globalThis.Hash, globalThis.LocalStorage, globalThis.State, ...argValues]);
|
||||
} catch (e) {
|
||||
if (!_disableRunCodeError) console.error(e, extendVars, [code, extendVars, vars, thisObj]);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
function _returnCode(code, vars, thisObj, extendVars) {
|
||||
if (code.includes("${")) return _runCode("return `" + code + "`", vars, thisObj, extendVars);
|
||||
else return _runCode("return " + code, vars, thisObj, extendVars);
|
||||
}
|
||||
let _translator = (text, args) => {
|
||||
if (!text || typeof text !== "string") return text;
|
||||
return text.replace(/\{(.+?)\}/g, (match, key) => args.hasOwnProperty(key) ? args[key] : match);
|
||||
};
|
||||
const SetTranslator = (fn) => _translator = fn;
|
||||
const _translate = (text) => {
|
||||
if (!text || typeof text !== "string" || !text.includes("{#")) return text;
|
||||
return text.replace(/\{#(.+?)#\}/g, (m, content) => {
|
||||
const parts = content.split("||").map((s) => s.trim());
|
||||
const args = {};
|
||||
if (parts.length > 1) {
|
||||
const matches = parts[0].match(/\{(.+?)\}/g);
|
||||
if (matches) matches.forEach((match, i) => args[match.substring(1, match.length - 1)] = parts[i + 1] || "");
|
||||
}
|
||||
return _translator(parts[0], args);
|
||||
});
|
||||
};
|
||||
if (typeof document !== "undefined") {
|
||||
try {
|
||||
document.createElement("div").setAttribute("$t", "1");
|
||||
} catch (e) {
|
||||
const originalSetAttribute = Element.prototype.setAttribute;
|
||||
Element.prototype.setAttribute = function(name, value) {
|
||||
if (!name.startsWith("$")) return originalSetAttribute.call(this, name, value);
|
||||
return originalSetAttribute.call(this, "st-" + name.substring(1), value);
|
||||
};
|
||||
}
|
||||
}
|
||||
onNotifyUpdate((binding) => _updateBinding(binding));
|
||||
function _clearRenderedNodes(node) {
|
||||
if (node._renderedNodes) node._renderedNodes.forEach((nodes) => nodes.forEach((child) => {
|
||||
child.remove();
|
||||
if (child._renderedNodes) _clearRenderedNodes(child);
|
||||
}));
|
||||
}
|
||||
function _updateBinding(binding) {
|
||||
const node = binding.node;
|
||||
if (!node.isConnected && node.tagName !== "TEMPLATE") return;
|
||||
setActiveBinding(binding);
|
||||
let result = binding.exp ? binding.tpl ? _returnCode(binding.tpl, { thisNode: node }, node._thisObj || node, node._ref || null) : null : binding.tpl;
|
||||
if (binding.exp === 2 && typeof result === "string") {
|
||||
try {
|
||||
result = _returnCode(result, { thisNode: node }, node._thisObj || node, node._ref || null);
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
setActiveBinding(null);
|
||||
if (binding.prop) {
|
||||
const prop = binding.prop;
|
||||
let o = node;
|
||||
for (let i = 0; i < prop.length - 1; i++) {
|
||||
if (!prop[i]) continue;
|
||||
if (o[prop[i]] == null) o[prop[i]] = {};
|
||||
o = o[prop[i]];
|
||||
if (typeof o !== "object") break;
|
||||
}
|
||||
if (typeof o === "object" && o !== null) {
|
||||
const resultIsObject = typeof result === "object" && result != null && !Array.isArray(result);
|
||||
const lk = prop[prop.length - 1];
|
||||
if (lk) {
|
||||
if (resultIsObject && o[lk] == null) o[lk] = {};
|
||||
const lo = o[lk];
|
||||
if (typeof lo === "object" && lo != null && lo.__watch) Object.assign(lo, result);
|
||||
else {
|
||||
if (o[lk] !== result) o[lk] = result;
|
||||
}
|
||||
} else if (typeof result === "object" && result != null && !Array.isArray(result)) {
|
||||
Object.assign(o, result);
|
||||
}
|
||||
}
|
||||
} else if (binding.attr) {
|
||||
const attr = binding.attr;
|
||||
if (attr === "if") {
|
||||
if (result) {
|
||||
if (!node._renderedNodes || node._renderedNodes.length === 0) {
|
||||
node._children.forEach((child) => {
|
||||
node.parentNode.insertBefore(child, node);
|
||||
child._ref = { ...node._ref };
|
||||
child._thisObj = node._thisObj;
|
||||
});
|
||||
node._renderedNodes = [node._children];
|
||||
}
|
||||
} else {
|
||||
_clearRenderedNodes(node);
|
||||
node._renderedNodes = [];
|
||||
}
|
||||
} else if (attr === "each") {
|
||||
if (result && typeof result === "object") {
|
||||
const asName = node.getAttribute("as") || "item";
|
||||
const indexName = node.getAttribute("index") || "index";
|
||||
const keyName = node.getAttribute("key");
|
||||
let keys, getVal;
|
||||
if (result instanceof Map) {
|
||||
keys = Array.from(result.keys());
|
||||
getVal = (k) => result.get(k);
|
||||
} else if (typeof result[Symbol.iterator] === "function") {
|
||||
const arr = Array.isArray(result) ? result : Array.from(result);
|
||||
keys = new Array(arr.length);
|
||||
for (let i = 0; i < arr.length; i++) keys[i] = i;
|
||||
getVal = (k) => arr[k];
|
||||
} else {
|
||||
keys = Object.keys(result);
|
||||
getVal = (k) => result[k];
|
||||
}
|
||||
if (!node._keyedNodes) node._keyedNodes = /* @__PURE__ */ new Map();
|
||||
const newKeyedNodes = /* @__PURE__ */ new Map();
|
||||
const currentRenderedNodes = [];
|
||||
keys.forEach((k, i) => {
|
||||
const item = getVal(k);
|
||||
const rawKey = keyName ? item && typeof item === "object" ? item[keyName] : item : k;
|
||||
const keyVal = rawKey === void 0 || rawKey === null || newKeyedNodes.has(rawKey) ? `st_key_${i}` : rawKey;
|
||||
let existingNodes = node._keyedNodes.get(keyVal);
|
||||
if (existingNodes) {
|
||||
node._keyedNodes.delete(keyVal);
|
||||
existingNodes.forEach((child) => {
|
||||
child._ref[indexName] = k;
|
||||
child._ref[asName] = item;
|
||||
_scanTree(child);
|
||||
});
|
||||
} else {
|
||||
existingNodes = [];
|
||||
node._children.forEach((child) => {
|
||||
const cloned = child.cloneNode(true);
|
||||
cloned._ref = { ...node._ref, [indexName]: k, [asName]: item };
|
||||
cloned._thisObj = node._thisObj;
|
||||
node.parentNode.insertBefore(cloned, node);
|
||||
existingNodes.push(cloned);
|
||||
});
|
||||
}
|
||||
newKeyedNodes.set(keyVal, existingNodes);
|
||||
currentRenderedNodes.push(existingNodes);
|
||||
});
|
||||
node._keyedNodes.forEach((nodes) => nodes.forEach((child) => {
|
||||
_clearRenderedNodes(child);
|
||||
child.remove();
|
||||
}));
|
||||
node._keyedNodes = newKeyedNodes;
|
||||
node._renderedNodes = currentRenderedNodes;
|
||||
} else {
|
||||
_clearRenderedNodes(node);
|
||||
node._renderedNodes = [];
|
||||
}
|
||||
} else if (attr === "bind") {
|
||||
if (["INPUT", "SELECT", "TEXTAREA"].includes(node.tagName) && !node.hasAttribute("autocomplete")) node.setAttribute("autocomplete", "off");
|
||||
if (node.type === "checkbox") {
|
||||
if (node.value !== "on" && !result) {
|
||||
_runCode(`${binding.tpl} = []`, { thisNode: node }, node._thisObj || node, node._ref || {});
|
||||
result = [];
|
||||
}
|
||||
node._checkboxMultiMode = result instanceof Array;
|
||||
const isChecked = result instanceof Array ? result.includes(node.value) : !!result;
|
||||
if (node.checked !== isChecked) node.checked = isChecked;
|
||||
} else if (node.type === "radio") {
|
||||
if (node.checked !== (node.value === String(result ?? ""))) node.checked = node.value === String(result ?? "");
|
||||
} else if ("value" in node && node.type !== "file") {
|
||||
Promise.resolve().then(() => {
|
||||
if (node.value !== String(result ?? "")) node.value = result;
|
||||
});
|
||||
} else if (node.isContentEditable) {
|
||||
if (node.innerHTML !== String(result ?? "")) node.innerHTML = result;
|
||||
}
|
||||
node.dispatchEvent(new CustomEvent("bind", { bubbles: false, detail: result }));
|
||||
} else {
|
||||
if (["checked", "disabled", "readonly"].includes(attr)) result = !!result;
|
||||
if (typeof result === "boolean") result ? node.setAttribute(attr, "") : node.removeAttribute(attr);
|
||||
else if (result !== void 0) {
|
||||
if (typeof result !== "string") result = JSON.stringify(result);
|
||||
if (attr === "text") node.textContent = result ?? "";
|
||||
else if (attr === "html") node.innerHTML = result ?? "";
|
||||
else if (node.tagName === "IMG" && attr === "src" && result.includes(".svg")) node.setAttribute("_src", result ?? "");
|
||||
else node.setAttribute(attr, result ?? "");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const _initBinding = (binding) => {
|
||||
if (!binding.node._bindings) binding.node._bindings = [];
|
||||
binding.node._bindings.push({ attr: binding.attr, prop: binding.prop, tpl: binding.tpl, exp: binding.exp });
|
||||
_updateBinding(binding);
|
||||
};
|
||||
const _parseNode = (node, scanObj) => {
|
||||
if (node._bindings) {
|
||||
node._states = /* @__PURE__ */ new Set();
|
||||
node._bindings.forEach((b) => _updateBinding({ node, ...b }));
|
||||
if (node._hasOnUpdate) node.dispatchEvent(new Event("update", { bubbles: false }));
|
||||
return;
|
||||
}
|
||||
if (Component.exists(node.tagName) && !node._componentInitialized) {
|
||||
Array.from(node.attributes).forEach((attr) => {
|
||||
var _a2;
|
||||
if (attr.name.startsWith("$.")) {
|
||||
const realAttrName = attr.name.slice(2);
|
||||
let tpl = _translate(attr.value);
|
||||
if (tpl.includes("this.")) tpl = tpl.replace(/\bthis\./g, "this.parent.");
|
||||
const result = _returnCode(tpl, { thisNode: node }, { parent: scanObj.thisObj || node }, node._ref || {});
|
||||
let o = node;
|
||||
const prop = realAttrName.split(".");
|
||||
for (let i = 0; i < prop.length - 1; i++) {
|
||||
if (prop[i]) o = o[_a2 = prop[i]] ?? (o[_a2] = {});
|
||||
}
|
||||
o[prop[prop.length - 1]] = result;
|
||||
node.removeAttribute(attr.name);
|
||||
}
|
||||
});
|
||||
_makeComponent(node.tagName, node, scanObj);
|
||||
$$(node, "[slot-id]").forEach((p) => p.removeAttribute("slot-id"));
|
||||
node._componentInitialized = true;
|
||||
if (!node._thisObj) node._thisObj = node;
|
||||
}
|
||||
if (node.tagName === "TEMPLATE") {
|
||||
node._children = [...node.content.childNodes];
|
||||
if (!node._renderedNodes) node._renderedNodes = [];
|
||||
}
|
||||
let attrs = [];
|
||||
if (node.tagName === "TEMPLATE") {
|
||||
["$if", "$each", "st-if", "st-each"].forEach((n) => node.hasAttribute(n) && attrs.push(node.getAttributeNode(n)));
|
||||
} else {
|
||||
attrs = Array.from(node.attributes).filter((a) => (a.name.startsWith("$") || a.name.startsWith("st-")) && !["$if", "$each", "st-if", "st-each"].includes(a.name) || a.name.includes("."));
|
||||
}
|
||||
if (node._thisObj && scanObj.thisObj) node._thisObj.parent = scanObj.thisObj;
|
||||
if (!node._thisObj) node._thisObj = scanObj.thisObj || null;
|
||||
if (!node._ref) node._ref = scanObj.extendVars || {};
|
||||
node._states = /* @__PURE__ */ new Set();
|
||||
attrs.forEach((attr) => {
|
||||
let exp = 0;
|
||||
if (attr.name.startsWith("$$") || attr.name.startsWith("st-st-")) exp = 2;
|
||||
else if (attr.name.startsWith("$") || attr.name.startsWith("st-")) exp = 1;
|
||||
const realAttrName = exp === 2 ? attr.name.startsWith("$$") ? attr.name.slice(2) : attr.name.slice(6) : exp === 1 ? attr.name.startsWith("$") ? attr.name.slice(1) : attr.name.slice(3) : attr.name;
|
||||
let tpl = attr.value;
|
||||
node.removeAttribute(attr.name);
|
||||
if (realAttrName.startsWith(".")) _initBinding({ node, prop: realAttrName.split("."), tpl, exp });
|
||||
else if (realAttrName.startsWith("on")) {
|
||||
const eventName = realAttrName.slice(2);
|
||||
if (eventName === "update") node._hasOnUpdate = true;
|
||||
if (eventName === "load" && !["BODY", "IMG", "IFRAME"].includes(node.tagName)) node._hasOnLoad = true;
|
||||
if (eventName === "unload" && !["BODY", "IMG", "IFRAME"].includes(node.tagName)) node._hasOnUnload = true;
|
||||
node.addEventListener(eventName, (e) => _runCode(tpl, { event: e, thisNode: node, ...e.detail || {} }, scanObj.thisObj || node, node._ref || {}));
|
||||
} else {
|
||||
if (realAttrName === "bind") {
|
||||
node.addEventListener(["textarea", "text", "password"].includes(node.type || "text") || node.isContentEditable ? "input" : "change", (e) => {
|
||||
let newVal = node.isContentEditable ? e.target.innerHTML : node.type === "checkbox" ? e.target.checked : e.target.files || e.target.value || e.detail;
|
||||
setNoWriteBack(node);
|
||||
setDisableRunCodeError(true);
|
||||
if (node.type === "checkbox" && node._checkboxMultiMode) _runCode(`!!checked ? (!${tpl}.includes(val) && ${tpl}.push(val)) : (index = ${tpl}.indexOf(val), index > -1 && ${tpl}.splice(index, 1))`, { val: node.value, checked: newVal, thisNode: node }, scanObj.thisObj || node, node._ref || {});
|
||||
else _runCode(`${tpl} = val`, { val: newVal, thisNode: node }, scanObj.thisObj || node, node._ref || {});
|
||||
setDisableRunCodeError(false);
|
||||
setNoWriteBack(null);
|
||||
});
|
||||
} else if (realAttrName === "text" && !tpl) {
|
||||
tpl = node.textContent;
|
||||
node.textContent = "";
|
||||
}
|
||||
if (tpl) {
|
||||
tpl = _translate(tpl);
|
||||
_initBinding({ node, attr: realAttrName, tpl, exp });
|
||||
}
|
||||
}
|
||||
});
|
||||
if (node._hasOnLoad || node._componentInitialized) Promise.resolve().then(() => node.dispatchEvent(new Event("load", { bubbles: false })));
|
||||
if (node._hasOnUpdate) node.dispatchEvent(new Event("update", { bubbles: false }));
|
||||
if (node._thisObj) scanObj.thisObj = node._thisObj;
|
||||
};
|
||||
const _scanTree = (node, scanObj = {}) => {
|
||||
if (node.nodeType !== 1) return;
|
||||
if (!node._stTranslated) {
|
||||
Array.from(node.attributes).forEach((attr) => {
|
||||
if (!attr.name.startsWith("$") && !attr.name.startsWith("st-") && !attr.name.startsWith(".")) {
|
||||
const translated = _translate(attr.value);
|
||||
if (translated !== attr.value) attr.value = translated;
|
||||
}
|
||||
});
|
||||
node._stTranslated = true;
|
||||
}
|
||||
if (node.tagName === "TEMPLATE" && (node.hasAttribute("$if") || node.hasAttribute("st-if")) && (node.hasAttribute("$each") || node.hasAttribute("st-each"))) {
|
||||
const template = document.createElement("TEMPLATE");
|
||||
const attrs = Array.from(node.attributes).filter((attr2) => ["$if", "$each", "st-if", "st-each"].includes(attr2.name));
|
||||
const attr = attrs[attrs.length - 1];
|
||||
template.setAttribute(attr.name, attr.value);
|
||||
node.removeAttribute(attr.name);
|
||||
if (attr.name === "$each" || attr.name === "st-each") {
|
||||
Array.from(node.attributes).filter((attr2) => ["as", "index"].includes(attr2.name)).forEach((attr2) => {
|
||||
template.setAttribute(attr2.name, attr2.value);
|
||||
node.removeAttribute(attr2.name);
|
||||
});
|
||||
}
|
||||
Array.from(node.content.childNodes).forEach((child) => template.content.appendChild(child));
|
||||
node.content.appendChild(template);
|
||||
template._ref = node._ref;
|
||||
}
|
||||
if (node.tagName === "IMG" && (node.hasAttribute("src") || node.hasAttribute("_src") || node.hasAttribute("$src"))) {
|
||||
const imgNode = node;
|
||||
Promise.resolve().then(() => {
|
||||
const url = imgNode.getAttribute("_src") || imgNode.getAttribute("src");
|
||||
if (url) fetch(url, { cache: "force-cache" }).then((r) => r.text()).then((svgText) => {
|
||||
const realSvg = new DOMParser().parseFromString(svgText, "image/svg+xml").querySelector("svg");
|
||||
if (realSvg) {
|
||||
Array.from(imgNode.attributes).forEach((attr) => realSvg.setAttribute(attr.name, attr.value));
|
||||
imgNode.replaceWith(realSvg);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
if (node._thisObj !== void 0) scanObj.thisObj = node._thisObj || null;
|
||||
else {
|
||||
let curr = node;
|
||||
while (curr && curr._thisObj === void 0) curr = curr.parentNode;
|
||||
scanObj.thisObj = curr ? curr._thisObj : null;
|
||||
}
|
||||
if (node._ref === void 0) {
|
||||
let curr = node;
|
||||
while (curr && curr._ref === void 0) curr = curr.parentNode;
|
||||
node._ref = curr ? { ...curr._ref } : {};
|
||||
}
|
||||
if (scanObj.extendVars) Object.assign(node._ref, scanObj.extendVars);
|
||||
_parseNode(node, { ...scanObj });
|
||||
const nodes = [...node.childNodes || []];
|
||||
nodes.forEach((child) => _scanTree(child, { thisObj: scanObj.thisObj, extendVars: { ...node._ref } }));
|
||||
};
|
||||
const _unbindTree = (node) => {
|
||||
if (node.nodeType !== 1) return;
|
||||
if (node._hasOnUnload) node.dispatchEvent(new Event("unload", { bubbles: false }));
|
||||
if (node._states) node._states.forEach((mappings) => {
|
||||
for (const [key, bindingSet] of mappings) {
|
||||
for (const binding of bindingSet) {
|
||||
if (binding.node === node) bindingSet.delete(binding);
|
||||
}
|
||||
}
|
||||
});
|
||||
node.childNodes && node.childNodes.forEach((child) => _unbindTree(child));
|
||||
};
|
||||
const ____RefreshState_Internal_Force_Full_Scan_Only_In_Extreme_Performance_Scenarios = _scanTree;
|
||||
const Util = {
|
||||
clone: window.structuredClone || ((obj) => JSON.parse(JSON.stringify(obj))),
|
||||
base64: (str) => btoa(String.fromCharCode(...new TextEncoder().encode(str))),
|
||||
unbase64: (str) => new TextDecoder().decode(Uint8Array.from(atob(str), (c) => c.charCodeAt(0))),
|
||||
urlbase64: (str) => Util.base64(str).replace(/[+/=]/g, (m) => ({ "+": "-", "/": "", "=": "" })[m]),
|
||||
unurlbase64: (str) => Util.unbase64(str.replace(/[-_.]/g, (m) => ({ "-": "+", "_": "/", ".": "=" })[m]).padEnd(Math.ceil(str.length / 4) * 4, "=")),
|
||||
safeJson: (str) => {
|
||||
try {
|
||||
return JSON.parse(str);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
updateDefaults: (obj, defaults) => {
|
||||
for (const k in defaults) if (obj[k] === void 0) obj[k] = defaults[k];
|
||||
},
|
||||
copyFunction: (toObj, fromObj, ...funcNames) => {
|
||||
funcNames.forEach((name) => toObj[name] = fromObj[name].bind(fromObj));
|
||||
},
|
||||
getFunctionBody: (fn) => {
|
||||
const code = fn.toString();
|
||||
return code.slice(code.indexOf("{") + 1, code.lastIndexOf("}")).trim();
|
||||
},
|
||||
makeDom: (html) => {
|
||||
if (html.includes(">\n")) html = html.replace(/>\s+</g, "><").trim();
|
||||
const node = document.createElement("div");
|
||||
node.innerHTML = html;
|
||||
return node.children[0];
|
||||
},
|
||||
newAvg: () => {
|
||||
let total = 0, count = 0, avg = 0;
|
||||
return {
|
||||
add: (v) => {
|
||||
total += v;
|
||||
count++;
|
||||
return avg = total / count;
|
||||
},
|
||||
get: () => avg,
|
||||
clear: () => {
|
||||
total = 0, count = 0, avg = 0;
|
||||
}
|
||||
};
|
||||
},
|
||||
newTimeCount: () => {
|
||||
let startTime = 0, total = 0, count = 0;
|
||||
return {
|
||||
start: () => startTime = (/* @__PURE__ */ new Date()).getTime(),
|
||||
end: () => {
|
||||
const endTime = (/* @__PURE__ */ new Date()).getTime();
|
||||
const left = endTime - startTime;
|
||||
startTime = endTime;
|
||||
total += left;
|
||||
count++;
|
||||
return left;
|
||||
},
|
||||
avg: () => total / count
|
||||
};
|
||||
}
|
||||
};
|
||||
globalThis.Util = Util;
|
||||
let _hashParams = new URLSearchParams(((_a = window.location.hash) == null ? void 0 : _a.substring(1)) || "");
|
||||
const Hash = NewState({}, (k) => Util.safeJson(_hashParams.get(k)), (k, v) => {
|
||||
const oldStr = _hashParams.get(k);
|
||||
const newStr = v === void 0 ? void 0 : JSON.stringify(v);
|
||||
if (oldStr === newStr || oldStr === null && newStr === void 0) return;
|
||||
v === void 0 ? _hashParams.delete(k) : _hashParams.set(k, newStr);
|
||||
window.location.hash = "#" + _hashParams.toString();
|
||||
});
|
||||
if (typeof window !== "undefined") {
|
||||
window.addEventListener("hashchange", () => {
|
||||
var _a2;
|
||||
const newParams = new URLSearchParams(((_a2 = window.location.hash) == null ? void 0 : _a2.substring(1)) || "");
|
||||
const keys = /* @__PURE__ */ new Set([..._hashParams.keys(), ...newParams.keys()]);
|
||||
_hashParams = newParams;
|
||||
keys.forEach((k) => Hash[k] = Hash[k]);
|
||||
});
|
||||
}
|
||||
const LocalStorage = NewState({}, (k) => Util.safeJson(localStorage.getItem(k)), (k, v) => {
|
||||
const oldStr = localStorage.getItem(k);
|
||||
const newStr = v === void 0 ? void 0 : JSON.stringify(v);
|
||||
if (oldStr === newStr || oldStr === null && newStr === void 0) return;
|
||||
v === void 0 ? localStorage.removeItem(k) : localStorage.setItem(k, newStr);
|
||||
});
|
||||
const State = NewState({
|
||||
exitBlocks: 0
|
||||
});
|
||||
globalThis.Hash = Hash;
|
||||
globalThis.LocalStorage = LocalStorage;
|
||||
globalThis.State = State;
|
||||
const ApigoState = {
|
||||
NewState,
|
||||
Component,
|
||||
$,
|
||||
$$,
|
||||
____RefreshState_Internal_Force_Full_Scan_Only_In_Extreme_Performance_Scenarios,
|
||||
SetTranslator,
|
||||
_scanTree,
|
||||
_unbindTree,
|
||||
Util,
|
||||
Hash,
|
||||
LocalStorage,
|
||||
State,
|
||||
_runCode,
|
||||
_returnCode,
|
||||
onNotifyUpdate,
|
||||
setActiveBinding
|
||||
};
|
||||
if (typeof window !== "undefined") {
|
||||
window.ApigoState = ApigoState;
|
||||
}
|
||||
if (typeof document !== "undefined") {
|
||||
const init = () => {
|
||||
Component._initPending();
|
||||
const htmlNode = document.documentElement;
|
||||
if (!htmlNode.hasAttribute("$data-bs-theme") && !htmlNode.hasAttribute("data-bs-theme")) {
|
||||
htmlNode.setAttribute("$data-bs-theme", "LocalStorage.darkMode?'dark':'light'");
|
||||
}
|
||||
new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
mutation.addedNodes.forEach((newNode) => {
|
||||
if (newNode.isConnected) _scanTree(newNode);
|
||||
});
|
||||
mutation.removedNodes.forEach((oldNode) => _unbindTree(oldNode));
|
||||
});
|
||||
}).observe(document.documentElement, { childList: true, subtree: true });
|
||||
_scanTree(document.documentElement);
|
||||
};
|
||||
if (document.readyState !== "loading") init();
|
||||
else document.addEventListener("DOMContentLoaded", init, true);
|
||||
}
|
||||
exports2.$ = $;
|
||||
exports2.$$ = $$;
|
||||
exports2.Component = Component;
|
||||
exports2.Hash = Hash;
|
||||
exports2.LocalStorage = LocalStorage;
|
||||
exports2.NewState = NewState;
|
||||
exports2.SetTranslator = SetTranslator;
|
||||
exports2.State = State;
|
||||
exports2.Util = Util;
|
||||
exports2.____RefreshState_Internal_Force_Full_Scan_Only_In_Extreme_Performance_Scenarios = ____RefreshState_Internal_Force_Full_Scan_Only_In_Extreme_Performance_Scenarios;
|
||||
exports2._scanTree = _scanTree;
|
||||
exports2._unbindTree = _unbindTree;
|
||||
Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
|
||||
});
|
||||
@ -1,100 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>List Mega Test (Virtual Scroll Stress Test)</title>
|
||||
<script src="./lib/state.js"></script>
|
||||
<script src="./lib/bootstrap.js"></script>
|
||||
<script src="./lib/base.js"></script>
|
||||
<style>
|
||||
body { height: 100vh; background: #111; color: #eee; }
|
||||
.test-container { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 20px; height: 100%; padding: 20px; box-sizing: border-box; }
|
||||
.list-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #444; border-radius: 8px; background: #222; }
|
||||
.list-card h5 { padding: 10px; margin: 0; background: #333; border-bottom: 1px solid #444; font-size: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test-container">
|
||||
<div class="list-card">
|
||||
<h5>1. Standard List (Normal)</h5>
|
||||
<List id="listStd" class="flex-fill" $.state.list="State.stdItems" auto-select></List>
|
||||
</div>
|
||||
<div class="list-card">
|
||||
<h5>2. Group List (Mode: Group)</h5>
|
||||
<List id="listGrp" mode="group" class="flex-fill" $.state.list="State.grpItems" $.state.groups="State.groups"></List>
|
||||
</div>
|
||||
<div class="list-card">
|
||||
<h5>3. Tree List (Mode: Tree + Collapsible)</h5>
|
||||
<List id="listTree" mode="tree" collapsible class="flex-fill" $.state.list="State.treeItems"></List>
|
||||
</div>
|
||||
<div class="list-card">
|
||||
<h5>4. FAST Virtual List (10,000 Items + Dynamic Height)</h5>
|
||||
<List id="listFast" fast class="flex-fill" $.state.list="State.bigItems" auto-select>
|
||||
<!-- 自定义插槽：必须保留 list-group-item 类和 $onupdate 钩子 -->
|
||||
<template slot="item">
|
||||
<div $onupdate="this.onItemUpdate(index, thisNode)"
|
||||
$class="list-group-item list-group-item-action d-flex flex-column w-100 py-2 \${this.state?.selectedItem===item.id?'active':''}"
|
||||
$onclick="this.selectItem(item,index)">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="bi bi-person-circle me-2 text-primary"></i>
|
||||
<span class="fw-bold" $text="item.label"></span>
|
||||
<span class="ms-auto badge bg-dark text-muted" $text="'#' + item.id"></span>
|
||||
</div>
|
||||
<div class="small text-secondary mt-1" style="white-space: normal; line-height: 1.4" $text="item.summary"></div>
|
||||
</div>
|
||||
</template>
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 1. 准备标准数据
|
||||
const stdItems = [];
|
||||
for(let i=1; i<=50; i++) stdItems.push({ id: i, label: 'Item ' + i, summary: 'This is standard item ' + i });
|
||||
|
||||
const groups = [
|
||||
{ id: 'g1', label: 'Engineering', summary: 'Technical staff' },
|
||||
{ id: 'g2', label: 'Marketing', summary: 'Growth team' },
|
||||
{ id: 'g3', label: 'Sales', summary: 'Revenue drivers' }
|
||||
];
|
||||
const grpItems = [];
|
||||
for(let i=1; i<=100; i++) {
|
||||
grpItems.push({ id: i, label: 'Member ' + i, group: i % 3 === 0 ? 'g1' : (i % 3 === 1 ? 'g2' : 'g3') });
|
||||
}
|
||||
|
||||
const treeItems = [
|
||||
{ id: 'root1', label: 'Company HQ', parent: '' },
|
||||
{ id: 'dept1', label: 'R&D Division', parent: 'root1' },
|
||||
{ id: 'team1', label: 'Framework Team', parent: 'dept1' },
|
||||
{ id: 'team2', label: 'UI Team', parent: 'dept1' },
|
||||
{ id: 'dept2', label: 'Operations', parent: 'root1' },
|
||||
{ id: 'team3', label: 'Cloud Ops', parent: 'dept2' },
|
||||
{ id: 'root2', label: 'Overseas Branch', parent: '' },
|
||||
{ id: 'dept3', label: 'Asia Pacific', parent: 'root2' }
|
||||
];
|
||||
|
||||
// 2. 准备 10,000 条极端高度差异数据
|
||||
const bigItems = [];
|
||||
const lorem = [
|
||||
"Short summary.",
|
||||
"Medium length summary that might take two lines in a narrow container to test dynamic height measurement accurately. We are checking if the VirtualScroll correctly captures this.",
|
||||
"EXTREME HEIGHT TEST: " + new Array(15).fill("This is a very long line of text intended to force the container to expand significantly. ").join(" ") + " This block should be at least 200px-300px high depending on the width.",
|
||||
"Normal sentence for baseline."
|
||||
];
|
||||
|
||||
for(let i=1; i<=10000; i++) {
|
||||
bigItems.push({
|
||||
id: i,
|
||||
label: 'Virtual Item ' + i,
|
||||
summary: lorem[i % 4]
|
||||
});
|
||||
}
|
||||
|
||||
State.stdItems = stdItems;
|
||||
State.groups = groups;
|
||||
State.grpItems = grpItems;
|
||||
State.treeItems = treeItems;
|
||||
State.bigItems = bigItems;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,59 +0,0 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test('Empirical Mega Verification', async ({ page }) => {
|
||||
page.on('console', msg => console.log('BROWSER:', msg.text()));
|
||||
|
||||
// 1. Verify AutoForm
|
||||
console.log('--- Verifying AutoForm Mega ---');
|
||||
await page.goto('http://localhost:5173/test/form_test.html');
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
const checkForm = async (id) => {
|
||||
return await page.evaluate((fid) => {
|
||||
const form = document.getElementById(fid);
|
||||
const inputs = form.querySelectorAll('input, select, textarea');
|
||||
const labels = form.querySelectorAll('label');
|
||||
return {
|
||||
id: fid,
|
||||
inputCount: inputs.length,
|
||||
labelCount: labels.length,
|
||||
html: form.innerHTML.substring(0, 100)
|
||||
};
|
||||
}, id);
|
||||
};
|
||||
|
||||
const vResult = await checkForm('formV');
|
||||
const hResult = await checkForm('formH');
|
||||
const iResult = await checkForm('formI');
|
||||
|
||||
console.log('Form results:', { vResult, hResult, iResult });
|
||||
expect(vResult.inputCount).toBeGreaterThan(5);
|
||||
expect(hResult.inputCount).toBeGreaterThan(5);
|
||||
|
||||
// 2. Verify List
|
||||
console.log('--- Verifying List Mega ---');
|
||||
await page.goto('http://localhost:5173/test/list_test.html');
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
const checkList = async (id) => {
|
||||
return await page.evaluate((lid) => {
|
||||
const list = document.getElementById(lid);
|
||||
const items = list.querySelectorAll('.list-group-item');
|
||||
return {
|
||||
id: lid,
|
||||
itemCount: items.length,
|
||||
labels: Array.from(items).map(i => i.textContent.trim())
|
||||
};
|
||||
}, id);
|
||||
};
|
||||
|
||||
const stdResult = await checkList('listStd');
|
||||
const grpResult = await checkList('listGrp');
|
||||
const treeResult = await checkList('listTree');
|
||||
|
||||
console.log('List results:', { stdResult, grpResult, treeResult });
|
||||
|
||||
expect(stdResult.itemCount).toBeGreaterThan(0);
|
||||
expect(grpResult.itemCount).toBeGreaterThan(2);
|
||||
expect(treeResult.itemCount).toBeGreaterThan(0);
|
||||
});
|
||||
@ -1,34 +0,0 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test('Stress test: Virtual List should handle 10,000 items with dynamic height', async ({ page }) => {
|
||||
test.setTimeout(60000);
|
||||
page.on('console', msg => console.log('BROWSER LOG:', msg.text()));
|
||||
|
||||
await page.goto('http://localhost:8082/test/list_test.html');
|
||||
|
||||
const listFast = page.locator('#listFast');
|
||||
await expect(listFast).toBeVisible();
|
||||
await page.waitForFunction(() => document.querySelectorAll('#listFast .list-group-item').length > 0);
|
||||
|
||||
// Check initial state
|
||||
const scrollTop = await listFast.evaluate(e => e.scrollTop);
|
||||
const scrollHeight = await listFast.evaluate(e => e.scrollHeight);
|
||||
const clientHeight = await listFast.evaluate(e => e.clientHeight);
|
||||
console.log(`Initial: scrollTop=${scrollTop}, scrollHeight=${scrollHeight}, clientHeight=${clientHeight}`);
|
||||
|
||||
// Attach event listener to see if scroll fires
|
||||
await listFast.evaluate(e => {
|
||||
e.addEventListener('scroll', () => console.log('SCROLL EVENT FIRED! new scrollTop:', e.scrollTop));
|
||||
});
|
||||
|
||||
// Scroll to the very end
|
||||
await listFast.evaluate(e => e.scrollTop = e.scrollHeight);
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
const finalScrollTop = await listFast.evaluate(e => e.scrollTop);
|
||||
console.log(`Final: scrollTop=${finalScrollTop}`);
|
||||
|
||||
const lastItemText = await listFast.locator('.list-group-item').last().textContent();
|
||||
console.log('Last rendered item text:', lastItemText);
|
||||
expect(lastItemText).toContain('Virtual Item 10000');
|
||||
});
|
||||
@ -1,20 +0,0 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test('Check styles and globals', async ({ page }) => {
|
||||
await page.goto('http://localhost:8082/test/form_test.html');
|
||||
|
||||
// Check if auto-grid-form is grid (horizontal mode)
|
||||
const formH = page.locator('#formH form');
|
||||
const display = await formH.evaluate(el => window.getComputedStyle(el).display);
|
||||
console.log('formH display:', display);
|
||||
expect(display).toBe('grid');
|
||||
|
||||
// Get color picker input to check height
|
||||
const colorInput = page.locator('#formH input[type="color"]');
|
||||
if (await colorInput.count() > 0) {
|
||||
const height = await colorInput.evaluate(el => window.getComputedStyle(el).height);
|
||||
console.log('colorInput height:', height);
|
||||
// It shouldn't be very small (like 0 or 2px)
|
||||
expect(parseInt(height)).toBeGreaterThan(20);
|
||||
}
|
||||
});
|
||||
@ -19,13 +19,13 @@ export default defineConfig({
|
||||
lib: {
|
||||
entry: resolve(__dirname, 'src/index.js'),
|
||||
name: 'ApigoBase',
|
||||
formats: ['iife']
|
||||
formats: ['umd', 'es']
|
||||
},
|
||||
rollupOptions: {
|
||||
external: ['@apigo.cc/state', '@apigo.cc/bootstrap'],
|
||||
external: ['@apigo.cc/state', '@apigo.cc/bootstrap'],
|
||||
output: [
|
||||
{
|
||||
format: 'iife',
|
||||
format: 'umd',
|
||||
name: 'ApigoBase',
|
||||
entryFileNames: 'base.js',
|
||||
globals: {
|
||||
@ -34,7 +34,7 @@ export default defineConfig({
|
||||
}
|
||||
},
|
||||
{
|
||||
format: 'iife',
|
||||
format: 'umd',
|
||||
name: 'ApigoBase',
|
||||
entryFileNames: 'base.min.js',
|
||||
globals: {
|
||||
@ -42,6 +42,15 @@ export default defineConfig({
|
||||
'@apigo.cc/bootstrap': 'bootstrap'
|
||||
},
|
||||
plugins: [terser()]
|
||||
},
|
||||
{
|
||||
format: 'es',
|
||||
entryFileNames: 'base.mjs'
|
||||
},
|
||||
{
|
||||
format: 'es',
|
||||
entryFileNames: 'base.min.mjs',
|
||||
plugins: [terser()]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user