mirror of
https://github.com/esiur/iui.git
synced 2026-02-01 21:50:39 +00:00
136 lines
4.6 KiB
HTML
136 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta charset="UTF-8">
|
|
|
|
<link href="../css/iui.css" rel="stylesheet" />
|
|
<script src="../src/iui.js" type="module"></script>
|
|
|
|
<style>
|
|
body {
|
|
font-family: Segoe UI;
|
|
padding: 20px;
|
|
}
|
|
|
|
.demo-card {
|
|
max-width: 520px;
|
|
padding: 16px;
|
|
border: 1px solid #d6d6d6;
|
|
border-radius: 12px;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.demo-title {
|
|
font-size: 18px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.demo-note {
|
|
color: #555;
|
|
margin-bottom: 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<i-app onload="init()">
|
|
<div class="demo-card">
|
|
<div class="demo-title">Multiselect Demo</div>
|
|
<div class="demo-note">Type to filter, click items to add, use the x to remove.</div>
|
|
|
|
<i-multiselect id="demo-multi" placeholder="Search cities..." distinct key="id">
|
|
<i-layout>
|
|
<i-field name="label">${d.name}</i-field>
|
|
<i-field name="menu">${d.name}</i-field>
|
|
</i-layout>
|
|
</i-multiselect>
|
|
</div>
|
|
|
|
<div class="demo-card" style="margin-top: 16px;">
|
|
<div class="demo-title">i-if Demo</div>
|
|
<div class="demo-note">Toggles DOM insertion/removal based on a condition.</div>
|
|
|
|
<button id="demo-if-toggle" type="button">Toggle</button>
|
|
|
|
<div :data="d">
|
|
<i-if :condition="d?.show">
|
|
<div style="margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: #fff2cc; border: 1px solid #f0d58c;">
|
|
Now you see me.
|
|
</div>
|
|
</i-if>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-card" style="margin-top: 16px;">
|
|
<div class="demo-title">Table Tree + Multi-Group Demo</div>
|
|
<div class="demo-note">Items can belong to multiple groups via parents.</div>
|
|
|
|
<i-table id="demo-table">
|
|
<i-layout>
|
|
<i-field name="name" width="60%"> ${d.name} </i-field>
|
|
<i-field name="type" width="40%"> ${d.type} </i-field>
|
|
</i-layout>
|
|
</i-table>
|
|
</div>
|
|
</i-app>
|
|
|
|
<script>
|
|
function init(){
|
|
const app = document.querySelector("i-app");
|
|
const ifData = { show: true };
|
|
//app.setData(ifData);
|
|
|
|
const toggle = document.getElementById("demo-if-toggle");
|
|
toggle.addEventListener("click", function () {
|
|
ifData.show = !ifData.show;
|
|
app.setData(ifData);
|
|
});
|
|
|
|
const groupA = { id: 1, name: "Group A", type: "group" };
|
|
const groupB = { id: 2, name: "Group B", type: "group" };
|
|
const subgroupA1 = { id: 3, name: "Subgroup A1", type: "group", parents: [groupA] };
|
|
const itemShared = { id: 4, name: "Shared Item", type: "item", parents: [groupA, groupB] };
|
|
const itemA = { id: 5, name: "Item A", type: "item", parents: [groupA] };
|
|
const itemB = { id: 6, name: "Item B", type: "item", parents: [groupB] };
|
|
const itemA1 = { id: 7, name: "Item A1", type: "item", parents: [subgroupA1] };
|
|
|
|
const table = document.getElementById("demo-table");
|
|
table.indexer = (item) => item.id;
|
|
table.parents_getter = (item) => item.parents || [];
|
|
|
|
table.setData([
|
|
groupA,
|
|
groupB,
|
|
subgroupA1,
|
|
itemShared,
|
|
itemA,
|
|
itemB,
|
|
itemA1
|
|
]);
|
|
|
|
const items = [
|
|
{ id: 1, name: "Cairo" },
|
|
{ id: 2, name: "Alexandria" },
|
|
{ id: 3, name: "Giza" },
|
|
{ id: 4, name: "Aswan" },
|
|
{ id: 5, name: "Luxor" },
|
|
{ id: 6, name: "Fayoum" },
|
|
{ id: 7, name: "Sohag" },
|
|
{ id: 8, name: "Hurghada" }
|
|
];
|
|
|
|
const ms = document.getElementById("demo-multi");
|
|
ms.query = function (offset, text) {
|
|
const q = (text || "").toLowerCase();
|
|
if (!q)
|
|
return items;
|
|
return items.filter(x => x.name.toLowerCase().indexOf(q) >= 0);
|
|
};
|
|
|
|
ms.setData([items[0], items[3]]);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|