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

sync

Browse Source
This commit is contained in:
Chen Lily
2025-12-24 10:55:40 +08:00
parent eec9d6045c
commit 752bb23571
25 changed files with 2348 additions and 816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
lib/ui/popup.js
View File

@@ -17,6 +17,8 @@ const ResizeMods = {
topLeft: 8 | 4
}
const IconStyle = 'fa-light';
// const Cursors = {
// [ResizeMods.right]: 'ew-resize',
// [ResizeMods.bottom]: 'ns-resize',
@@ -110,7 +112,7 @@ export class Popup {
this._var.bounds = r;
container.classList.add('ui-popup-collapse');
if (collapse != null) {
changeIcon(collapse, 'fa-regular', 'expand-alt');
changeIcon(collapse, IconStyle, 'expand-alt');
}
} else {
if (!isNaN(r.width) && r.width > 0) {
@@ -122,7 +124,7 @@ export class Popup {
container.classList.remove('ui-popup-collapse');
this._var.bounds = null;
if (collapse != null) {
changeIcon(collapse, 'fa-regular', 'compress-alt');
changeIcon(collapse, IconStyle, 'compress-alt');
}
}
if (css.length > 0) {
@@ -259,7 +261,7 @@ export class Popup {
const icons = createElement('div', icons => {
icons.className = 'ui-popup-header-icons';
if (option.collapsable === true) {
const collapse = createIcon('fa-regular', 'compress-alt');
const collapse = createIcon(IconStyle, 'compress-alt');
collapse.tabIndex = tabIndex + 2;
collapse.classList.add('icon-expand');
collapse.addEventListener('keypress', e => {
@@ -275,13 +277,13 @@ export class Popup {
this._var.bounds = null;
}
container.classList.remove('ui-popup-collapse');
changeIcon(collapse, 'fa-regular', 'compress-alt');
changeIcon(collapse, IconStyle, 'compress-alt');
} else {
const rect = this.rect;
this._var.bounds = rect;
container.style.cssText += `width: 160px; height: 40px`;
container.classList.add('ui-popup-collapse');
changeIcon(collapse, 'fa-regular', 'expand-alt');
changeIcon(collapse, IconStyle, 'expand-alt');
}
if (typeof option.onResizeEnded === 'function') {
option.onResizeEnded.call(this);
@@ -290,7 +292,7 @@ export class Popup {
icons.appendChild(collapse);
}
if (option.closable !== false) {
const cancel = createIcon('fa-regular', 'times');
const cancel = createIcon(IconStyle, 'times');
cancel.tabIndex = tabIndex + 3;
cancel.addEventListener('keypress', e => {
if (e.key === ' ' || e.key === 'Enter') {
@@ -304,7 +306,7 @@ export class Popup {
header.appendChild(icons);
}),
createElement('div', 'ui-popup-body', content, createElement('div', 'ui-popup-loading',
createElement('div', null, createIcon('fa-regular', 'spinner-third'))
createElement('div', null, createIcon(IconStyle, 'spinner-third'))
))
);
if (Array.isArray(option.buttons) && option.buttons.length > 0) {
@@ -315,6 +317,9 @@ export class Popup {
if (b.className != null) {
button.classList.add(b.className);
}
if (b.isPrimary) {
button.classList.add('primary');
}
if (b.tabIndex > 0) {
button.tabIndex = b.tabIndex;
} else {
@@ -560,6 +565,7 @@ export function resolvePopup(wrapper, callback, removable, zIndex) {
const buttons = [...wrapper.querySelectorAll('.dialog-func>input[type="button"]')].reverse().map(b => ({
tabIndex: b.tabIndex,
text: b.value,
isPrimary: b.dataset.primary != null,
trigger: b.onclick == null ? null : (popup => (b.onclick.call(popup), false))
}));
const popup = new Popup({
@@ -594,16 +600,54 @@ export function showAlert(title, message, iconType = 'info', parent = document.b
),
resolve,
buttons: [
{ text: r('ok', 'OK') }
{ text: r('ok', 'OK'), isPrimary: true }
]
});
popup.show(parent).then(mask => {
const button = mask.querySelector('.ui-popup-container .ui-popup-footer .ui-popup-button:last-child');
const button = mask.querySelector('.ui-popup-container .ui-popup-footer .ui-popup-button');
button?.focus();
});
});
}
export function showInput(title, multiline, message, def, placeholder, buttons, parent = document.body) {
const r = typeof GetTextByKey === 'function' ? GetTextByKey : lang;
return new Promise(resolve => {
let tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0));
if (tabIndex < 0) {
tabIndex = 0;
}
const input = multiline ?
createElement('textarea', text => {
text.className = 'ui-text';
}) :
createElement('input', input => {
input.type = 'text';
input.className = 'ui-input';
});
input.tabIndex = tabIndex + 4;
if (!nullOrEmpty(placeholder)) {
input.placeholder = placeholder;
}
if (!nullOrEmpty(def)) {
input.value = def;
}
const popup = new Popup({
title,
content: createElement('div', 'message-wrapper message-wrapper-input',
nullOrEmpty(message) ? '' : createElement('span', span => span.innerText = message),
input
),
resolve: r => resolve(r.result === 'yes' ? input.value : null),
buttons: buttons ?? [
{ key: 'yes', text: r('yes', 'Yes'), isPrimary: true },
{ key: 'no', text: r('no', 'No') }
]
});
popup.show(parent).then(() => input.focus());
});
}
export function showConfirm(title, content, buttons, iconType = 'question', parent = document.body) {
const r = typeof GetTextByKey === 'function' ? GetTextByKey : lang;
return new Promise(resolve => {
@@ -621,6 +665,7 @@ export function showConfirm(title, content, buttons, iconType = 'question', pare
buttons: buttons?.map((b, i) => {
return {
text: b.text,
isPrimary: b.isPrimary,
trigger: p => {
let result;
if (typeof b.trigger === 'function') {
@@ -633,12 +678,12 @@ export function showConfirm(title, content, buttons, iconType = 'question', pare
};
}) ??
[
{ key: 'yes', text: r('yes', 'Yes') },
{ key: 'yes', text: r('yes', 'Yes'), isPrimary: true },
{ key: 'no', text: r('no', 'No') }
]
});
popup.show(parent).then(mask => {
const button = mask.querySelector('.ui-popup-container .ui-popup-footer .ui-popup-button:last-child');
const button = mask.querySelector('.ui-popup-container .ui-popup-footer .ui-popup-button:first-child');
button?.focus();
});
});