tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

move sample files

Browse Source
This commit is contained in:
Chen Lily
2024-03-05 15:03:53 +08:00
parent baec3a3959
commit 6fb7c3c769
9 changed files with 396 additions and 78 deletions

20
sample/amrnb.js Normal file

File diff suppressed because one or more lines are too long

33
sample/index.html Normal file

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UI Lib</title>
<link href="/dist/ui.min.css" rel="stylesheet" />
<script src="/amrnb.js"></script>
<script type="module" src="/main.js"></script>
<script src="/dist/ui.min.js"></script>
<script src="/dist/utility.min.js"></script>
<style type="text/css">
#container>.ui-grid {
width: 1000px;
height: 400px;
}
</style>
</head>
<body>
<div style="display: flex; flex-direction: column; align-items: flex-start">
<div id="container"></div>
<!--<button id="setItem">set item</button>
<button id="addItem">add item</button>
<button id="addItems">add items</button>
<button id="removeItem">remove item</button>
<button id="removeItems">remove items</button>-->
</div>
</body>
</html>

1
sample/javascript.svg Normal file

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>
Side by Side

After

(image error) Size: 995 B

350
sample/main.js Normal file

@@ -0,0 +1,350 @@
// import './style.scss'
// import javascriptLogo from './javascript.svg'
// import { get } from './lib/utility'
// import { createPicture, createAudio, createVideo, createPdf } from './lib/ui/media'
// import './lib/element/style.scss'
// import ScheduleItem from './lib/element/schedule'
// import { createElement } from './lib/functions';
// import Grid from './lib/ui/grid/grid';
// document.querySelector('#js-logo').src = javascriptLogo
window.consts = {
path: '/',
resver: 20231218
}
// const DateSelector = window['lib-ui'].DateSelector;
// const formatDate = window['lib-ui'].formatDate;
// window.addEventListener('load', () => {
// DateSelector.resolve(document.querySelector('#container'), function (date) {
// console.log(`element(#${this.element.id}), date changed to: ${formatDate(date)}`);
// const value = document.querySelector('#dateFrom').value;
// console.log(`dateFrom.value = '${value}', formatted: '${formatDate(value)}'`);
// });
// });
const Grid = window['lib-ui'].Grid;
const createElement = window['lib-ui'].createElement;
const toDateValue = window['lib-ui'].toDateValue;
const showConfirm = window['lib-ui'].showConfirm;
window.addEventListener('load', () => {
const grid = new Grid('#container');
grid.columns = [
{
key: 'name',
// type: Grid.ColumnTypes.Common,
caption: 'Name',
captionStyle: {
'font-style': 'italic'
},
width: 150,
allowFilter: true,
totalCss: {
'text-align': 'right'
}
},
{
key: 'birthday',
type: Grid.ColumnTypes.Date,
caption: 'Birthday',
width: 120,
dateMin: '1900-01-01',
dateMax: '2025-01-01',
dateValueFormatter: toDateValue
},
{
key: 'age',
type: Grid.ColumnTypes.Input,
caption: 'Age',
enabled: false,
align: 'right',
filter: item => {
const ms = new Date() - new Date(item.birthday);
const age = Math.floor(ms / 1000 / 60 / 60 / 24 / 365);
return String(age);
}
},
{
key: 'sex',
type: Grid.ColumnTypes.Dropdown,
caption: 'Sex',
source: [
{ value: 'male', text: 'Male' },
{ value: 'female', text: 'Female' },
{ value: 'other', text: 'Other' }
]
},
{
key: 'active',
type: Grid.ColumnTypes.Checkbox,
caption: 'Active'
},
{
key: 'remove',
type: Grid.ColumnTypes.Icon,
text: 'times',
resizable: false,
sortable: false,
orderable: false,
tooltip: 'Remove',
events: {
onclick: function () {
showConfirm('Remove', `Are you sure you want to remove "${this.name}"?`, [
{
key: 'yes',
text: 'Yes',
trigger: () => {
console.log('yes');
return true;
}
},
{
key: 'no',
text: 'No'
}
], 'question')
}
}
}
];
// grid.height = 700 - 36;
// grid.autoResize = false;
grid.multiSelect = true;
// grid.expandable = true;
// grid.expandableGenerator = item => ({
// element: createElement('div', div => {
// div.innerText = JSON.stringify(item);
// })
// });
const fnames = '李王张刘陈杨赵黄周吴徐孙胡朱高林何郭马罗梁宋郑谢韩唐冯于董萧程曹袁邓许傅沈曾彭吕苏卢蒋蔡贾丁魏薛叶阎余潘杜戴夏钟汪田任姜范方石姚谭廖邹熊金陆郝孔白崔康毛邱秦江史顾侯邵孟龙万段漕钱汤尹黎易常武乔贺赖龚文';
const names = '先帝创业未半而中道崩殂今天下三分益州疲弊此诚危急存亡之秋也然侍卫之臣不懈于内忠志之士忘身于外者盖追先帝之殊遇欲报之于陛下也诚宜开张圣听以光先帝遗德恢弘志士之气不宜妄自菲薄引喻失义以塞忠谏之路也';
// grid.source = Array.from({ length: 200 }).map(() => {
// const r = Math.random();
// const r2 = Math.random();
// const date = new Date(631152000000 + Math.floor(20 * 365 * 24 * 60 * 60 * 1000 * r));
// return {
// name: `${fnames[Math.floor(r * fnames.length)]}${names[Math.floor(r2 * names.length)]}`,
// birthday: `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`,
// sex: r > 0.5 ? 'female' : 'male',
// active: r2 > 0.5 ? true : false
// }
// });
const getCountFilter = key => (it) => {
const count = it[key];
if (isNaN(count)) {
return '';
}
// return count.toLocaleString();
return String(count).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
grid.columns = [
{ key: 'name', caption: '包名称', type: Grid.ColumnTypes.Input },
{ key: 'version', caption: '版本号' },
{ key: 'author', caption: '作者' },
{ key: 'count', caption: '下载量', filter: getCountFilter('count'), align: 'right' },
{ key: 'mauiName', caption: 'Maui 对应包' },
{ key: 'mauiVersion', caption: '版本号' },
{ key: 'mauiNet', caption: '.NET' },
{ key: 'mauiCount', caption: '下载量', filter: getCountFilter('mauiCount'), align: 'right' }
];
grid.source = [
{
name: 'Dynatrace.OneAgent.Xamarin',
version: '8.283.1',
author: 'Dynatrace',
count: 308681,
mauiName: 'Dynatrace.OneAgent.MAUI',
mauiVersion: '1.283.1',
mauiNet: '7.0',
mauiCount: 12351
},
{
name: 'Esri.ArcGISRuntime.Xamarin.Forms',
version: '100.15.4',
author: 'Esri_Inc',
count: 249909,
mauiName: 'Esri.ArcGISRuntime.Maui',
mauiVersion: '200.3.0',
mauiNet: '8.0',
mauiCount: 40913
},
{
name: 'Scandit.DataCapture.Core.Xamarin',
version: '6.22.0',
author: 'Scandit',
count: 527424,
mauiName: 'Scandit.DataCapture.Core.Maui',
mauiVersion: '6.22.0',
mauiNet: '6.0',
mauiCount: 14032
},
{
name: 'Scandit.DataCapture.Barcode.Xamarin',
version: '6.22.0',
author: 'Scandit',
count: 417823,
mauiName: 'Scandit.DataCapture.Barcode.Maui',
mauiVersion: '6.22.0',
mauiNet: '6.0',
mauiCount: 6048
},
{
name: 'SkiaSharp.Views.Forms',
version: '2.88.7',
author: 'Microsoft Xamarin',
count: 7229049,
mauiName: 'SkiaSharp.Views.Maui.Core',
mauiVersion: '2.88.7',
mauiNet: '7.0',
mauiCount: 558468
},
{
mauiName: 'SkiaSharp.Views.Maui.Controls',
mauiVersion: '2.88.7',
mauiNet: '7.0',
mauiCount: 550081
},
{
name: 'ZXing.Net.Mobile',
version: '2.4.1',
author: 'redth',
count: 7187155,
mauiName: 'ZXing.Net.Maui',
mauiVersion: '0.4.0',
mauiNet: '7.0',
mauiCount: 177002
},
{
name: 'ZXing.Net.Mobile.Forms',
version: '2.4.1',
author: 'redth',
count: 5494785,
mauiName: 'ZXing.Net.Maui.Controls',
mauiVersion: '0.4.0',
mauiNet: '7.0',
mauiCount: 104144
}
]
grid.init();
// setTimeout(() => {
// grid.total = { name: '合计', birthday: grid.source.length };
// }, 1000);
window.grid = grid;
});
/*
window.addEventListener('load', () => {
const grid = new Grid('#container');
grid.columns = ['a', 'b'].map(i => ({
key: i,
caption: `column ${i}`,
width: 200,
allowFilter: true
}));
grid.multiSelect = true;
grid.init();
const items = [];
for (let i = 0; i < 10; ++i) {
items.push({ a: i + 1, b: `row ${i + 1}` });
}
grid.source = items;
window.grid = grid;
});
document.querySelector('#setItem').addEventListener('click', () => {
if (window.grid.selectedIndex < 0) {
return;
}
window.grid.setItem(window.grid.selectedIndex, {
a: 'new',
b: 'new item'
});
});
document.querySelector('#addItem').addEventListener('click', () => {
window.grid.addItem({
a: 'add',
b: 'add item'
}, window.grid.selectedIndex);
});
document.querySelector('#addItems').addEventListener('click', () => {
window.grid.addItems([
{
a: 'add1',
b: 'add item 1'
},
{
a: 'add2',
b: 'add item 2'
},
{
a: 'add3',
b: 'add item 3'
}
], window.grid.selectedIndex);
});
document.querySelector('#removeItem').addEventListener('click', () => {
if (window.grid.selectedIndex < 0) {
return;
}
window.grid.removeItem(window.grid.selectedIndex);
});
document.querySelector('#removeItems').addEventListener('click', () => {
window.grid.removeItems(window.grid.selectedIndexes);
});
//*/
// const schedule = new ScheduleItem();
// document.querySelector('#container').replaceChildren(
// schedule.create(),
// createElement('button', button => {
// button.innerText = 'Get';
// button.addEventListener('click', () => console.log(schedule.getParameters()));
// })
// );
// document.querySelector('#container').replaceChildren(
// // createPicture('https://fleet.foresightintelligence.com/doc/mmspart/1740581frZuuFhz5WWCysxs9oGB.jpg'),
// createAudio('audio/amr', 'http://vite.tsanie.org/1055003tb0DisaMu1615PeSXKG.amr'),
// createPdf('AG-PRO COMPANIES', 'https://fleet.foresightintelligence.com/doc/mmspart/1333321JLrYhkGYqsw6QSVMx3d.pdf'),
// // createPicture('https://fleet.foresightintelligence.com/doc/mmspart/138390UGZUMWRmqBsEgPnWuW16.gif'),
// // createVideo('https://fleet.foresightintelligence.com/doc/mmspart/17359338sR5qsG7TvS7eaUdP9PL.mp4'),
// );
/*
init(null, {
template: '/res.json',
callback: result => console.log(result)
}).then(() => {
// document.querySelector('#create-icon').appendChild(createIcon('fa-solid', 'user-edit'))
resolveIcon(document.querySelector('#create-icon'))
// document.querySelector('#create-checkbox').appendChild(createCheckbox({
// label: 'Switch 1'
// }))
resolveCheckbox(document.querySelector('#create-checkbox'))
resolveTooltip(document.querySelector('#buttons'))
document.querySelector('#button-fetch').addEventListener('click', () => {
get('javascript.svg', {
// contentType: '',
customHeaders: {
'X-Auth': 'test/authentication'
}
})
.then(r => r.blob())
.then(blob => document.querySelector('#js-logo').src = URL.createObjectURL(blob));
});
});
*/

1
sample/style.css Normal file

File diff suppressed because one or more lines are too long

234
sample/style.scss Normal file

@@ -0,0 +1,234 @@
@import './lib/ui/css/variables/definition.scss';
@import './lib/ui/css/common.scss';
@import './lib/ui/css/checkbox.scss';
@import './lib/ui/css/dropdown.scss';
@import './lib/ui/css/grid.scss';
@import './lib/ui/css/popup.scss';
@import './lib/ui/css/tooltip.scss';
:root {
font-family: var(--serif-font-family);
font-size: 1.125rem;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: var(--color);
background-color: var(--bg-color);
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
--split-border-color: #ccc;
--hover-color: #666;
--serif-font-family: 'Segoe UI Variable Display', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
--mono-font-family: 'FantasqueSansMono NFM', 'Cascadia Code', 'PT Mono', Consolas, 'Courier New', monospace;
}
input {
font-family: var(--serif-font-family);
}
code,
kbd,
pre,
samp {
font-family: var(--mono-font-family);
background-color: var(--hover-color);
padding: 0 10px;
}
code {
display: inline-block;
}
pre,
samp {
font-size: .875em;
}
h2+code {
margin-left: 70px;
position: relative;
&::before {
content: '签名：';
position: absolute;
margin-left: -70px;
}
}
h3,
h4 {
font-family: var(--mono-font-family);
font-size: 1em;
margin-left: 10px;
/* font-weight: bold; */
}
h3~p {
margin-left: 10px;
}
h4 {
font-size: .9em;
margin-block-end: .4em;
+code {
font-size: .9rem;
}
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
&:hover {
color: #535bf2;
}
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
// font-size: 1em;
// font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
&:hover {
border-color: #646cff;
}
&:focus,
&:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
}
body {
margin: 0;
display: flex;
height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
margin: 20px 0;
}
#directory {
width: 200px;
padding: 2rem;
border-right: 1px solid var(--split-border-color);
flex: 0 0 auto;
>ul {
padding: 0;
line-height: 1.6em;
>li {
list-style: none;
user-select: none;
&.title {
margin: 20px 0 6px;
font-weight: bold;
font-size: 1.25em;
}
}
}
ol {
padding-left: 10px;
>li {
padding: 0 6px;
list-style-position: inside;
cursor: pointer;
&:hover {
background-color: var(--hover-color);
}
}
}
}
#container {
// flex: 1 1 auto;
width: 600px;
overflow: auto;
padding: 20px;
>div {
margin-right: 20px;
}
}
.app-module {
margin: 8px 0;
}
#create-icon {
display: flex;
justify-content: center;
svg {
width: 20px;
height: 20px;
}
}
#create-checkbox {
display: flex;
flex-direction: column;
align-items: center;
}
.ui-check-wrapper {
.ui-check-inner {
width: 14px;
height: 14px;
}
>span {
font-size: 1em;
}
}
.icon-col {
cursor: pointer;
color: rgb(123, 28, 33);
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre;
text-align: center;
&:hover {
text-decoration: underline;
}
}
@media (prefers-color-scheme: light) {
:root {
--split-border-color: #666;
--hover-color: #eee;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

13
sample/web.config Normal file

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".amr" mimeType="audio/amr" />
</staticContent>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>