web/dataTable
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: release v1.0.14 with final UI polish, scroll-tracking editor and compact menus By: AICoder

Browse Source
This commit is contained in:
AI Engineer 2026-06-12 00:48:21 +08:00
parent 549ab0b552
commit 92b111c785
12 changed files with 9434 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
dist/datatable.js vendored
View File

@ -945,9 +945,9 @@
</div> </div>
<div class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between"> <div class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">
<button class="btn btn-sm btn-outline-secondary flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button> <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button>
<button class="btn btn-sm btn-outline-secondary flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button> <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button>
<button class="btn btn-sm btn-outline-danger flex-grow-1" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button> <button class="btn btn-sm btn-light border-0 flex-grow-1 text-danger" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button>
</div> </div>
</template> </template>
</div> </div>
@ -986,6 +986,7 @@
DataTable { display: block; } DataTable { display: block; }
.dt-root { font-size: 0.875rem; } .dt-root { font-size: 0.875rem; }
.dt-row, .dt-header-row { display: grid; grid-template-columns: var(--dt-grid-template); width: var(--dt-row-width, max-content); min-width: 100%; height: 40px; contain: paint layout; } .dt-row, .dt-header-row { display: grid; grid-template-columns: var(--dt-grid-template); width: var(--dt-row-width, max-content); min-width: 100%; height: 40px; contain: paint layout; }
.dt-main { position: relative; }
.dt-header-row { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); } .dt-header-row { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
.dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; } .dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; }
.dt-cell-selected { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; outline: 1px solid var(--bs-primary); outline-offset: -1px; } .dt-cell-selected { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; outline: 1px solid var(--bs-primary); outline-offset: -1px; }

2
dist/datatable.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "@web/datatable", "name": "@web/datatable",
"version": "1.0.13", "version": "1.0.14",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@web/datatable", "name": "@web/datatable",
"version": "1.0.13", "version": "1.0.14",
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.40.0", "@playwright/test": "^1.40.0",
"@rollup/plugin-terser": "^1.0.0", "@rollup/plugin-terser": "^1.0.0",

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@web/datatable", "name": "@web/datatable",
"version": "1.0.13", "version": "1.0.14",
"type": "module", "type": "module",
"main": "dist/datatable.js", "main": "dist/datatable.js",
"module": "dist/datatable.js", "module": "dist/datatable.js",

7
src/DataTable.js
View File

@ -727,9 +727,9 @@ globalThis.Component.register('DataTable', container => {
</div> </div>
<div class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between"> <div class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">
<button class="btn btn-sm btn-outline-secondary flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button> <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button>
<button class="btn btn-sm btn-outline-secondary flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button> <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button>
<button class="btn btn-sm btn-outline-danger flex-grow-1" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button> <button class="btn btn-sm btn-light border-0 flex-grow-1 text-danger" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button>
</div> </div>
</template> </template>
</div> </div>
@ -765,6 +765,7 @@ globalThis.Component.register('DataTable', container => {
DataTable { display: block; } DataTable { display: block; }
.dt-root { font-size: 0.875rem; } .dt-root { font-size: 0.875rem; }
.dt-row, .dt-header-row { display: grid; grid-template-columns: var(--dt-grid-template); width: var(--dt-row-width, max-content); min-width: 100%; height: 40px; contain: paint layout; } .dt-row, .dt-header-row { display: grid; grid-template-columns: var(--dt-grid-template); width: var(--dt-row-width, max-content); min-width: 100%; height: 40px; contain: paint layout; }
.dt-main { position: relative; }
.dt-header-row { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); } .dt-header-row { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
.dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; } .dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; }
.dt-cell-selected { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; outline: 1px solid var(--bs-primary); outline-offset: -1px; } .dt-cell-selected { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; outline: 1px solid var(--bs-primary); outline-offset: -1px; }

2
test/diagnostic.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>AutoForm Diagnostic</title> <title>AutoForm Diagnostic</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="lib/bootstrap.js"></script>
<script src="lib/state.js"></script> <script src="lib/state.js"></script>
<script src="lib/base.js"></script> <script src="lib/base.js"></script>
<script src="lib/datatable.js"></script> <script src="lib/datatable.js"></script>

5
test/index.html
View File

@ -5,9 +5,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataTable Demo</title> <title>DataTable Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 0. Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css"> <script src="lib/bootstrap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<style> <style>
body, html { height: 100%; margin: 0; padding: 0; overflow: hidden; } body, html { height: 100%; margin: 0; padding: 0; overflow: hidden; }
.demo-container { height: 100vh; padding: 20px; display: flex; flex-direction: column; } .demo-container { height: 100vh; padding: 20px; display: flex; flex-direction: column; }

4
test/lib/base.js
View File

@ -127,14 +127,14 @@
<option $each="item.options" as="opt" $value="opt.value !== undefined ? opt.value : opt" $text="opt.label || opt"></option> <option $each="item.options" as="opt" $value="opt.value !== undefined ? opt.value : opt" $text="opt.label || opt"></option>
</select> </select>
<div $if="['checkbox', 'radio'].includes(item.type)" class="d-flex align-items-center flex-wrap gap-3 h-100"> <div $if="['checkbox', 'radio'].includes(item.type)" class="d-flex align-items-center flex-wrap gap-3 h-100" style="padding-left: 0.75rem; padding-right: 0.75rem; min-height: calc(2.25rem + 2px);">
<label $each="item.options || [item.text||item.label||item.name]" as="opt" class="form-check mb-0 d-flex align-items-center" style="padding-left:0; cursor:pointer;"> <label $each="item.options || [item.text||item.label||item.name]" as="opt" class="form-check mb-0 d-flex align-items-center" style="padding-left:0; cursor:pointer;">
<input $name="item.name" class="form-check-input m-0 me-2" style="float:none;" $type="item.type" $.="item.setting || {}" $value="item.options ? (opt.value !== undefined ? opt.value : opt) : 'on'" $bind="this.data[item.name]"> <input $name="item.name" class="form-check-input m-0 me-2" style="float:none;" $type="item.type" $.="item.setting || {}" $value="item.options ? (opt.value !== undefined ? opt.value : opt) : 'on'" $bind="this.data[item.name]">
<span $if="!this.inline || (item.options && item.options.length > 0)" $text="opt.label || opt" class="form-check-label"></span> <span $if="!this.inline || (item.options && item.options.length > 0)" $text="opt.label || opt" class="form-check-label"></span>
</label> </label>
</div> </div>
<div $if="item.type === 'switch'" class="form-check form-switch fs-5 d-flex align-items-center m-0" style="padding-left:0; min-height:0; display:flex !important;"> <div $if="item.type === 'switch'" class="form-check form-switch fs-5 d-flex align-items-center m-0" style="padding-left: 3.25rem; padding-right: 0.75rem; min-height: calc(2.25rem + 2px); display:flex !important;">
<input $name="item.name" class="form-check-input m-0" style="float:none; cursor:pointer" type="checkbox" $bind="this.data[item.name]"> <input $name="item.name" class="form-check-input m-0" style="float:none; cursor:pointer" type="checkbox" $bind="this.data[item.name]">
</div> </div>

7284
test/lib/bootstrap.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2128
test/lib/bootstrap.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
test/lib/datatable.js
View File

@ -945,9 +945,9 @@
</div> </div>
<div class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between"> <div class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">
<button class="btn btn-sm btn-outline-secondary flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button> <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button>
<button class="btn btn-sm btn-outline-secondary flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button> <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button>
<button class="btn btn-sm btn-outline-danger flex-grow-1" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button> <button class="btn btn-sm btn-light border-0 flex-grow-1 text-danger" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button>
</div> </div>
</template> </template>
</div> </div>
@ -986,6 +986,7 @@
DataTable { display: block; } DataTable { display: block; }
.dt-root { font-size: 0.875rem; } .dt-root { font-size: 0.875rem; }
.dt-row, .dt-header-row { display: grid; grid-template-columns: var(--dt-grid-template); width: var(--dt-row-width, max-content); min-width: 100%; height: 40px; contain: paint layout; } .dt-row, .dt-header-row { display: grid; grid-template-columns: var(--dt-grid-template); width: var(--dt-row-width, max-content); min-width: 100%; height: 40px; contain: paint layout; }
.dt-main { position: relative; }
.dt-header-row { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); } .dt-header-row { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
.dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; } .dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; }
.dt-cell-selected { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; outline: 1px solid var(--bs-primary); outline-offset: -1px; } .dt-cell-selected { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; outline: 1px solid var(--bs-primary); outline-offset: -1px; }

1
test/minimal_perf.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="lib/bootstrap.js"></script>
<script src="lib/state.js"></script> <script src="lib/state.js"></script>
<script src="lib/base.js"></script> <script src="lib/base.js"></script>
<script src="lib/datatable.js"></script> <script src="lib/datatable.js"></script>