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

adjustment

Browse Source
This commit is contained in:
Tsanie Lily 2023-04-21 17:17:56 +08:00
parent c4316e7e52
commit 222ca43afb
23 changed files with 341 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
lib/app/communications/contact.js
View File

@ -20,7 +20,7 @@ class Contact {
input.maxLength = 200; input.maxLength = 200;
input.autocomplete = 'off'; input.autocomplete = 'off';
}); });
const preferences = new Dropdown({ tabindex: tabIndex + 2 }); const preferences = new Dropdown({ tabIndex: tabIndex + 2 });
preferences.source = [ preferences.source = [
{ value: '0', text: r('text', 'Text') }, { value: '0', text: r('text', 'Text') },
{ value: '1', text: r('email', 'Email') }, { value: '1', text: r('email', 'Email') },
@ -40,7 +40,7 @@ class Contact {
input.maxLength = 50; input.maxLength = 50;
input.autocomplete = 'off'; input.autocomplete = 'off';
}); });
const checkOpt = createCheckbox({ tabindex: tabIndex + 5 }); const checkOpt = createCheckbox({ tabIndex: tabIndex + 5 });
const contactNotes = createElement('textarea', txt => { const contactNotes = createElement('textarea', txt => {
txt.className = 'ui-text'; txt.className = 'ui-text';
txt.tabIndex = tabIndex + 6; txt.tabIndex = tabIndex + 6;
@ -51,7 +51,7 @@ class Contact {
if (this.#option.company) { if (this.#option.company) {
buttons.push({ buttons.push({
text: c == null ? r('addContactRecord', 'Add Contact Record') : r('editContactRecord', 'Edit Contact Record'), text: c == null ? r('addContactRecord', 'Add Contact Record') : r('editContactRecord', 'Edit Contact Record'),
// tabindex: tabIndex + 7, // tabIndex: tabIndex + 7,
trigger: () => { trigger: () => {
const item = this.prepare(); const item = this.prepare();
if (item == null) { if (item == null) {
@ -67,7 +67,7 @@ class Contact {
buttons.push( buttons.push(
{ {
text: r('workOrderOnly', 'Work Order Only'), text: r('workOrderOnly', 'Work Order Only'),
// tabindex: tabIndex + 8, // tabIndex: tabIndex + 8,
trigger: () => { trigger: () => {
const item = this.prepare(); const item = this.prepare();
if (item == null) { if (item == null) {
@ -82,7 +82,7 @@ class Contact {
}, },
{ {
text: r('cancel', 'Cancel'), text: r('cancel', 'Cancel'),
// tabindex: tabIndex + 9 // tabIndex: tabIndex + 9
} }
); );
const popup = createPopup( const popup = createPopup(

4
lib/app/communications/customer.js
View File

@ -441,7 +441,7 @@ class CustomerCommunication {
div.style.alignItems = 'center'; div.style.alignItems = 'center';
div.append( div.append(
createElement('div', div => { createElement('div', div => {
div.className = 'popup-move'; div.className = 'ui-popup-move';
div.style.flex = '1 1 auto'; div.style.flex = '1 1 auto';
}, },
createElement('div', div => div.innerText = r('editContacts', 'Edit Contacts')), createElement('div', div => div.innerText = r('editContacts', 'Edit Contacts')),
@ -797,7 +797,7 @@ class CustomerCommunication {
div.style.alignItems = 'center'; div.style.alignItems = 'center';
div.append( div.append(
createElement('div', div => { createElement('div', div => {
div.className = 'popup-move'; div.className = 'ui-popup-move';
div.style.flex = '1 1 auto'; div.style.flex = '1 1 auto';
div.innerText = r('editContacts', 'Edit Contacts') + '\n' + r('followers', 'Followers'); div.innerText = r('editContacts', 'Edit Contacts') + '\n' + r('followers', 'Followers');
}), }),

45
lib/app/communications/style.scss
View File

@ -1,9 +1,9 @@
@import "../../ui/css/functions/func.scss"; @import "../../ui/css/functions/func.scss";
.popup-mask .wrapper-edit-method { .ui-popup-mask .wrapper-edit-method {
width: 100%; width: 100%;
.checkbox-wrapper { .ui-check-wrapper {
padding: 0 28px; padding: 0 28px;
} }
} }
@ -65,30 +65,6 @@
} }
} }
.image-check-box {
user-select: none;
>input[type="checkbox"] {
display: none;
&:checked~.unchecked {
display: none;
}
&:checked~.checked {
display: unset;
}
}
>.unchecked {
opacity: .5;
}
>.checked {
display: none;
}
}
.title-bar { .title-bar {
flex: 0 0 auto; flex: 0 0 auto;
padding: 5px 0 5px 10px; padding: 5px 0 5px 10px;
@ -278,7 +254,7 @@
font-size: var(--font-size); font-size: var(--font-size);
align-self: flex-start; align-self: flex-start;
.tooltip-wrapper>.tooltip-content { .ui-tooltip-wrapper>.ui-tooltip-content {
font-weight: normal; font-weight: normal;
} }
} }
@ -349,12 +325,12 @@
} }
} }
.popup-mask { .ui-popup-mask {
.grid { .ui-grid {
height: 100%; height: 100%;
min-height: 120px; min-height: 120px;
>.grid-body .grid-body-content>.grid-row>td { >.ui-grid-body .ui-grid-body-content>.ui-grid-row>td {
vertical-align: top; vertical-align: top;
.col-icon { .col-icon {
@ -403,4 +379,13 @@
} }
} }
} }
}
@media (prefers-color-scheme: dark) {
.comm {
--dark-fore-color: #000;
--dark-fore-opacity-color: rgba(0, 0, 0, .4);
--strong-color: #ccc;
--light-color: #333;
}
} }

3
lib/ui/checkbox.d.ts vendored
View File

@ -1,6 +1,8 @@
interface CheckboxOptions { interface CheckboxOptions {
className?: string; className?: string;
enabled?: boolean; enabled?: boolean;
name?: string;
tabIndex?: Number;
type?: string; type?: string;
label?: string | HTMLElement; label?: string | HTMLElement;
checked?: boolean; checked?: boolean;
@ -11,5 +13,6 @@ interface CheckboxOptions {
onchange?: (this: HTMLInputElement, ev: Event) => any; onchange?: (this: HTMLInputElement, ev: Event) => any;
} }
export function createRadiobox(opts?: CheckboxOptions): HTMLElement
export function createCheckbox(opts?: CheckboxOptions): HTMLElement export function createCheckbox(opts?: CheckboxOptions): HTMLElement
export function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement export function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement

18
lib/ui/checkbox.html
View File

@ -11,6 +11,10 @@
<p> <p>
复选框初始参数，结构为 复选框初始参数，结构为
<pre>interface CheckboxOptions { <pre>interface CheckboxOptions {
className?: string;
enabled?: boolean;
name?: string;
tabIndex?: Number;
type?: string; type?: string;
label?: string; label?: string;
checked?: boolean; checked?: boolean;
@ -29,6 +33,14 @@
<p> <p>
复选框默认是否可用 复选框默认是否可用
</p> </p>
<h4>name?: string</h4>
<p>
复选框或单选框的 name
</p>
<h4>tabIndex?: Number</h4>
<p>
复选框的 tabindex
</p>
<h4>type?: string</h4> <h4>type?: string</h4>
<p> <p>
复选框图标的样式，可选值目前有 <code>fa-regular</code>、<code>fa-light</code>、<code>fa-solid</code> 复选框图标的样式，可选值目前有 <code>fa-regular</code>、<code>fa-light</code>、<code>fa-solid</code>
@ -65,6 +77,12 @@
<p> <p>
复选框改变时触发的事件 复选框改变时触发的事件
</p> </p>
<h2>createRadiobox</h2>
<code>function createRadiobox(opts?: CheckboxOptions): HTMLElement</code>
<h3>opts?: CheckboxOptions</h3>
<p>
单选框初始参数，结构如上
</p>
<h2>resolveCheckbox</h2> <h2>resolveCheckbox</h2>
<code>function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement</code> <code>function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement</code>
<h3>container?: HTMLElement</h3> <h3>container?: HTMLElement</h3>

28
lib/ui/checkbox.js
View File

@ -5,7 +5,7 @@ import { createIcon } from "./icon";
function fillCheckbox(container, type = 'fa-regular', label, tabindex = -1, charactor = 'check') { function fillCheckbox(container, type = 'fa-regular', label, tabindex = -1, charactor = 'check') {
container.appendChild( container.appendChild(
createElement('layer', layer => { createElement('layer', layer => {
layer.className = 'check-box-inner'; layer.className = 'ui-check-inner';
layer.addEventListener('keypress', e => { layer.addEventListener('keypress', e => {
if (e.key === ' ' || e.key === 'Enter') { if (e.key === ' ' || e.key === 'Enter') {
const input = container.querySelector('input'); const input = container.querySelector('input');
@ -30,7 +30,7 @@ function fillCheckbox(container, type = 'fa-regular', label, tabindex = -1, char
} }
function createRadiobox(opts = {}) { function createRadiobox(opts = {}) {
const container = createElement('label', 'checkbox-wrapper radiobox-wrapper', const container = createElement('label', 'ui-check-wrapper ui-radio-wrapper',
createElement('input', input => { createElement('input', input => {
input.setAttribute('type', 'radio'); input.setAttribute('type', 'radio');
input.name = opts.name; input.name = opts.name;
@ -52,12 +52,12 @@ function createRadiobox(opts = {}) {
if (opts.className) { if (opts.className) {
container.classList.add(opts.className); container.classList.add(opts.className);
} }
fillCheckbox(container, opts.type, opts.label, opts.tabindex, 'circle'); fillCheckbox(container, opts.type, opts.label, opts.tabIndex, 'circle');
return container; return container;
} }
function createCheckbox(opts = {}) { function createCheckbox(opts = {}) {
const container = createElement('label', 'checkbox-wrapper', const container = createElement('label', 'ui-check-wrapper',
createElement('input', input => { createElement('input', input => {
input.setAttribute('type', 'checkbox'); input.setAttribute('type', 'checkbox');
if (opts.checked === true) { if (opts.checked === true) {
@ -82,7 +82,7 @@ function createCheckbox(opts = {}) {
container.classList.add('disabled'); container.classList.add('disabled');
} }
if (opts.checkedNode != null && opts.uncheckedNode != null) { if (opts.checkedNode != null && opts.uncheckedNode != null) {
container.classList.add('checkbox-image'); container.classList.add('ui-check-image-wrapper');
let height = opts.imageHeight; let height = opts.imageHeight;
if (isNaN(height) || height <= 0) { if (isNaN(height) || height <= 0) {
height = 14; height = 14;
@ -92,7 +92,7 @@ function createCheckbox(opts = {}) {
opts.uncheckedNode.classList.add('unchecked'); opts.uncheckedNode.classList.add('unchecked');
container.appendChild(opts.uncheckedNode); container.appendChild(opts.uncheckedNode);
} else { } else {
fillCheckbox(container, opts.type, opts.label, opts.tabindex); fillCheckbox(container, opts.type, opts.label, opts.tabIndex);
} }
return container; return container;
} }
@ -101,7 +101,7 @@ function resolveCheckbox(container = document.body, legacy) {
if (legacy) { if (legacy) {
const checks = container.querySelectorAll('input[type="checkbox"]'); const checks = container.querySelectorAll('input[type="checkbox"]');
for (let chk of checks) { for (let chk of checks) {
if (chk.parentElement.classList.contains('checkbox-wrapper')) { if (chk.parentElement.classList.contains('ui-check-wrapper')) {
// skip // skip
continue; continue;
} }
@ -139,9 +139,9 @@ function resolveCheckbox(container = document.body, legacy) {
text = label.innerText; text = label.innerText;
} }
if (chk.disabled) { if (chk.disabled) {
label.className = 'checkbox-wrapper disabled'; label.className = 'ui-check-wrapper disabled';
} else { } else {
label.className = 'checkbox-wrapper'; label.className = 'ui-check-wrapper';
} }
label.replaceChildren(); label.replaceChildren();
fillCheckbox(label, 'fa-regular', text, chk.tabIndex); fillCheckbox(label, 'fa-regular', text, chk.tabIndex);
@ -150,18 +150,18 @@ function resolveCheckbox(container = document.body, legacy) {
} }
const boxes = container.querySelectorAll('label[data-checkbox]'); const boxes = container.querySelectorAll('label[data-checkbox]');
for (let box of boxes) { for (let box of boxes) {
if (!box.classList.contains('checkbox-wrapper')) { if (!box.classList.contains('ui-check-wrapper')) {
box.classList.add('checkbox-wrapper'); box.classList.add('ui-check-wrapper');
} }
if (box.hasChildNodes()) { if (box.hasChildNodes()) {
if (!box.classList.contains('checkbox-image')) { if (!box.classList.contains('ui-check-image-wrapper')) {
box.classList.add('checkbox-image'); box.classList.add('ui-check-image-wrapper');
} }
} else { } else {
fillCheckbox(box, fillCheckbox(box,
box.dataset.type, box.dataset.type,
box.dataset.label, box.dataset.label,
box.dataset.tabindex) box.dataset.tabIndex)
box.removeAttribute('data-type'); box.removeAttribute('data-type');
box.removeAttribute('data-label'); box.removeAttribute('data-label');
} }

16
lib/ui/css/checkbox.scss
View File

@ -1,15 +1,15 @@
@import "./functions/checkbox.scss"; @import "./functions/func.scss";
.checkbox-image { .ui-check-image-wrapper {
>input[type="checkbox"] { >input[type="checkbox"] {
display: none; display: none;
&:checked { &:checked {
&~.checked { ~.checked {
display: inline; display: inline;
} }
&~.unchecked { ~.unchecked {
display: none; display: none;
} }
} }
@ -24,17 +24,17 @@
} }
} }
.checkbox-wrapper { .ui-check-wrapper {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 0 8px; padding: 0 8px;
height: 36px; height: 36px;
@include check-box(); @include ui-check();
.check-box-inner { .ui-check-inner {
flex: 0 0 auto; flex: 0 0 auto;
&+* { +* {
flex: 1 1 auto; flex: 1 1 auto;
font-weight: 400; font-weight: 400;
font-size: var(--font-size); font-size: var(--font-size);

2
lib/ui/css/common.scss
View File

@ -1,4 +1,4 @@
@import "../css/functions/func.scss"; @import "./functions/func.scss";
.ui-text, .ui-text,
.ui-input[type] { .ui-input[type] {

22
lib/ui/css/dropdown.scss
View File

@ -10,7 +10,7 @@ $searchInputHeight: 26px;
$searchIconSize: 13px; $searchIconSize: 13px;
$listMaxHeight: 210px; $listMaxHeight: 210px;
.drop-wrapper { .ui-drop-wrapper {
display: inline-block; display: inline-block;
border: none; border: none;
border-radius: unset; border-radius: unset;
@ -19,14 +19,14 @@ $listMaxHeight: 210px;
font-size: var(--font-size); font-size: var(--font-size);
font-family: var(--font-family); font-family: var(--font-family);
>.drop-header { >.ui-drop-header {
background-color: var(--bg-color); background-color: var(--bg-color);
display: flex; display: flex;
height: $headerHeight; height: $headerHeight;
@include outborder(); @include outborder();
>.drop-text { >.ui-drop-text {
flex: 1 1 auto; flex: 1 1 auto;
cursor: pointer; cursor: pointer;
font-size: var(--font-size); font-size: var(--font-size);
@ -40,7 +40,7 @@ $listMaxHeight: 210px;
@include outline(); @include outline();
} }
>input.drop-text { >input.ui-drop-text {
cursor: initial; cursor: initial;
&::placeholder { &::placeholder {
@ -49,7 +49,7 @@ $listMaxHeight: 210px;
} }
} }
>.drop-caret { >.ui-drop-caret {
flex: 0 0 auto; flex: 0 0 auto;
width: $caretWidth; width: $caretWidth;
display: flex; display: flex;
@ -78,14 +78,14 @@ $listMaxHeight: 210px;
// box-shadow: none; // box-shadow: none;
} }
>.drop-text, >.ui-drop-text,
>.drop-caret { >.ui-drop-caret {
cursor: default; cursor: default;
} }
} }
} }
>.drop-box { >.ui-drop-box {
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
@ -114,7 +114,7 @@ $listMaxHeight: 210px;
transform: scaleY(1); transform: scaleY(1);
} }
>.drop-search { >.ui-drop-search {
box-sizing: border-box; box-sizing: border-box;
height: $searchBarHeight; height: $searchBarHeight;
line-height: $searchBarHeight; line-height: $searchBarHeight;
@ -150,7 +150,7 @@ $listMaxHeight: 210px;
} }
} }
>.drop-list { >.ui-drop-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
@ -179,7 +179,7 @@ $listMaxHeight: 210px;
background-color: var(--hover-bg-color); background-color: var(--hover-bg-color);
} }
>.checkbox-wrapper { >.ui-check-wrapper {
height: $dropItemHeight; height: $dropItemHeight;
display: flex; display: flex;
} }

70
lib/ui/css/functions/checkbox.scss
View File

@ -1,70 +0,0 @@
@import "./func.scss";
@mixin check-box() {
.check-box-inner {
position: relative;
display: inline-block;
padding: 0;
width: 14px;
height: 14px;
background-color: #fff;
user-select: none;
cursor: pointer;
@include outborder();
>svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
fill: #fff;
transform: scale(0);
opacity: 0;
transition: all .08s cubic-bezier(.78, .14, .15, .86);
}
}
&.radiobox-wrapper {
.check-box-inner {
box-sizing: border-box;
border-radius: 8px;
width: 16px;
height: 16px;
}
}
>input[type="checkbox"],
>input[type="radio"] {
display: none;
&:checked+.check-box-inner {
border-color: var(--link-color);
background-color: var(--link-color);
>svg {
transform: scale(1);
opacity: 1;
}
}
&:disabled {
&+.check-box-inner {
border-color: var(--disabled-border-color);
background-color: var(--disabled-bg-color);
cursor: default;
}
&:checked+.check-box-inner {
border-color: var(--disabled-border-color);
background-color: var(--disabled-border-color);
}
&~span {
color: var(--disabled-border-color);
cursor: default;
}
}
}
}

70
lib/ui/css/functions/func.scss
View File

@ -42,4 +42,74 @@
color: var(--disabled-color); color: var(--disabled-color);
background-color: var(--disabled-bg-color); background-color: var(--disabled-bg-color);
} }
}
@mixin ui-check() {
.ui-check-inner {
position: relative;
display: inline-block;
padding: 0;
width: 14px;
height: 14px;
background-color: #fff;
user-select: none;
cursor: pointer;
@include outborder();
>svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
fill: #fff;
transform: scale(0);
opacity: 0;
transition: all .08s cubic-bezier(.78, .14, .15, .86);
}
}
&.ui-radio-wrapper {
.ui-check-inner {
box-sizing: border-box;
border-radius: 8px;
width: 16px;
height: 16px;
}
}
>input[type="checkbox"],
>input[type="radio"] {
display: none;
&:checked+.ui-check-inner {
border-color: var(--link-color);
background-color: var(--link-color);
>svg {
transform: scale(1);
opacity: 1;
}
}
&:disabled {
&:checked+.ui-check-inner {
border-color: var(--disabled-border-color);
background-color: var(--disabled-border-color);
}
+.ui-check-inner {
border-color: var(--disabled-border-color);
background-color: var(--disabled-bg-color);
cursor: default;
}
~span {
color: var(--disabled-border-color);
cursor: default;
}
}
}
} }

47
lib/ui/css/grid.scss
View File

@ -1,6 +1,6 @@
@import "./functions/func.scss"; @import "./functions/func.scss";
.grid { .ui-grid {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -52,14 +52,14 @@
font-family: var(--font-family); font-family: var(--font-family);
} }
>.grid-sizer { >.ui-grid-sizer {
position: absolute; position: absolute;
white-space: nowrap; white-space: nowrap;
font-weight: bold; font-weight: bold;
visibility: hidden; visibility: hidden;
} }
>.grid-header { >.ui-grid-header {
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
margin: 0; margin: 0;
@ -187,20 +187,20 @@
} }
} }
>.grid-body { >.ui-grid-body {
flex: 1 1 auto; flex: 1 1 auto;
overflow: auto; overflow: auto;
color: var(--cell-fore-color); color: var(--cell-fore-color);
@include scrollbar(); @include scrollbar();
.grid-body-content { .ui-grid-body-content {
position: absolute; position: absolute;
min-width: 100%; min-width: 100%;
table-layout: fixed; table-layout: fixed;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
>.grid-row { >.ui-grid-row {
line-height: var(--line-height); line-height: var(--line-height);
white-space: nowrap; white-space: nowrap;
background-color: var(--row-bg-color); background-color: var(--row-bg-color);
@ -254,11 +254,11 @@
@include scrollbar(); @include scrollbar();
} }
.checkbox-wrapper { .ui-check-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
.check-box-inner { .ui-check-inner {
&, &,
>svg { >svg {
@ -267,22 +267,22 @@
} }
} }
.drop-wrapper { .ui-drop-wrapper {
height: var(--row-height); height: var(--row-height);
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
>.drop-header { >.ui-drop-header {
border: none; border: none;
height: 100%; height: 100%;
>.drop-text { >.ui-drop-text {
padding: var(--spacing-cell); padding: var(--spacing-cell);
} }
} }
>.drop-box { >.ui-drop-box {
top: calc(var(--row-height) + 2px); top: calc(var(--row-height) + 2px);
&.slide-up { &.slide-up {
@ -323,7 +323,7 @@
} }
} }
.grid-hover-holder { .ui-grid-hover-holder {
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
line-height: var(--line-height); line-height: var(--line-height);
@ -343,7 +343,7 @@
} }
} }
>.grid-loading { >.ui-grid-loading {
position: absolute; position: absolute;
@include inset(0, 0, 0, 0); @include inset(0, 0, 0, 0);
visibility: hidden; visibility: hidden;
@ -367,4 +367,23 @@
} }
} }
} }
}
@media (prefers-color-scheme: dark) {
.ui-grid {
--hover-bg-color: yellow;
--header-border-color: #525456;
--header-bg-color: #050505;
--header-fore-color: #fff;
--cell-border-color: #0f0f0f;
--cell-fore-color: #ccc;
--dark-border-color: #999;
--split-border-color: #4c4c4c;
--dragger-bg-color: #000;
--dragger-cursor-color: #ccc;
--row-bg-color: #000;
--row-active-bg-color: #050505;
--row-selected-bg-color: #190d04;
--text-disabled-color: gray;
}
} }

88
lib/ui/css/popup.scss
View File

@ -3,7 +3,7 @@
$headerLineHeight: 24px; $headerLineHeight: 24px;
$buttonHeight: 28px; $buttonHeight: 28px;
.popup-mask { .ui-popup-mask {
position: fixed; position: fixed;
@include inset(0, 0, 0, 0); @include inset(0, 0, 0, 0);
background-color: rgba(0 0 0 /20%); background-color: rgba(0 0 0 /20%);
@ -20,27 +20,29 @@ $buttonHeight: 28px;
--loading-border-radius: 10px; --loading-border-radius: 10px;
} }
&.popup-active .popup-container { &.ui-popup-active .ui-popup-container {
transform: scale(1.1); transform: scale(1.1);
} }
&.popup-transparent { &.ui-popup-transparent {
right: unset; right: unset;
bottom: unset; bottom: unset;
} }
.popup-container { .ui-popup-container {
min-width: 400px; min-width: 400px;
max-width: 800px; max-width: 800px;
background-color: var(--bg-color); background-color: var(--bg-color);
border-radius: var(--corner-radius); border-radius: var(--corner-radius);
box-shadow: 0 2px 8px rgba(0 0 0 /11%); box-shadow: 0 2px 8px var(--shadow-color);
transition: opacity .12s ease, transform .12s ease; transition: opacity .12s ease, transform .12s ease;
position: absolute; position: absolute;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.popup-header { @include outline();
.ui-popup-header {
flex: 0 0 auto; flex: 0 0 auto;
padding: 10px 12px 6px; padding: 10px 12px 6px;
border-radius: var(--corner-radius) var(--corner-radius) 0 0; border-radius: var(--corner-radius) var(--corner-radius) 0 0;
@ -56,7 +58,7 @@ $buttonHeight: 28px;
font-size: 1rem; font-size: 1rem;
} }
>.popup-header-title { >.ui-popup-header-title {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -86,14 +88,14 @@ $buttonHeight: 28px;
} }
} }
.popup-body { .ui-popup-body {
margin: 6px 10px; margin: 6px 10px;
flex: 1 1 auto; flex: 1 1 auto;
line-height: $headerLineHeight; line-height: $headerLineHeight;
position: relative; position: relative;
min-height: 100px; min-height: 100px;
>.popup-loading { >.ui-popup-loading {
position: absolute; position: absolute;
@include inset(0, 0, -46px, 0); @include inset(0, 0, -46px, 0);
visibility: hidden; visibility: hidden;
@ -168,7 +170,7 @@ $buttonHeight: 28px;
text-indent: var(--text-indent); text-indent: var(--text-indent);
} }
+.checkbox-wrapper { +.ui-check-wrapper {
padding: 0; padding: 0;
} }
} }
@ -176,21 +178,21 @@ $buttonHeight: 28px;
} }
} }
.popup-footer { .ui-popup-footer {
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding: 4px 10px 16px 2px; padding: 4px 10px 16px 2px;
.popup-button { .ui-popup-button {
margin-left: 12px; margin-left: 12px;
border: none; border: none;
height: $buttonHeight; // height: $buttonHeight;
line-height: $buttonHeight; line-height: $buttonHeight;
color: var(--title-color); color: var(--title-color);
border-radius: var(--corner-radius); border-radius: var(--corner-radius);
padding: 0 16px; padding: 4px 16px;
box-sizing: border-box; box-sizing: border-box;
min-width: 70px; min-width: 70px;
text-align: center; text-align: center;
@ -208,75 +210,75 @@ $buttonHeight: 28px;
} }
} }
.popup-border { .ui-popup-border {
position: absolute; position: absolute;
&.popup-border-left, &.ui-popup-border-left,
&.popup-border-right { &.ui-popup-border-right {
width: 6px; width: 6px;
height: 100%; height: 100%;
top: 0; top: 0;
cursor: ew-resize; cursor: ew-resize;
} }
&.popup-border-top, &.ui-popup-border-top,
&.popup-border-bottom { &.ui-popup-border-bottom {
width: 100%; width: 100%;
height: 6px; height: 6px;
left: 0; left: 0;
cursor: ns-resize; cursor: ns-resize;
} }
&.popup-border-top-left, &.ui-popup-border-top-left,
&.popup-border-top-right, &.ui-popup-border-top-right,
&.popup-border-bottom-right, &.ui-popup-border-bottom-right,
&.popup-border-bottom-left { &.ui-popup-border-bottom-left {
width: 8px; width: 8px;
height: 8px; height: 8px;
} }
&.popup-border-top-left, &.ui-popup-border-top-left,
&.popup-border-bottom-right { &.ui-popup-border-bottom-right {
cursor: nwse-resize; cursor: nwse-resize;
} }
&.popup-border-top-right, &.ui-popup-border-top-right,
&.popup-border-bottom-left { &.ui-popup-border-bottom-left {
cursor: nesw-resize; cursor: nesw-resize;
} }
&.popup-border-left, &.ui-popup-border-left,
&.popup-border-top-left, &.ui-popup-border-top-left,
&.popup-border-bottom-left { &.ui-popup-border-bottom-left {
left: -4px; left: -4px;
} }
&.popup-border-right, &.ui-popup-border-right,
&.popup-border-top-right, &.ui-popup-border-top-right,
&.popup-border-bottom-right { &.ui-popup-border-bottom-right {
right: -4px; right: -4px;
} }
&.popup-border-top, &.ui-popup-border-top,
&.popup-border-top-left, &.ui-popup-border-top-left,
&.popup-border-top-right { &.ui-popup-border-top-right {
top: -4px; top: -4px;
} }
&.popup-border-bottom, &.ui-popup-border-bottom,
&.popup-border-bottom-right, &.ui-popup-border-bottom-right,
&.popup-border-bottom-left { &.ui-popup-border-bottom-left {
bottom: -4px; bottom: -4px;
} }
} }
&.popup-collapse { &.ui-popup-collapse {
min-height: 40px; min-height: 40px;
min-width: 160px; min-width: 160px;
.popup-body, .ui-popup-body,
.popup-footer, .ui-popup-footer,
.popup-border { .ui-popup-border {
display: none; display: none;
} }
} }

10
lib/ui/css/tooltip.scss
View File

@ -1,6 +1,6 @@
@import "./functions/func.scss"; @import "./functions/func.scss";
.tooltip-color { .ui-tooltip-color {
background-color: #fff; background-color: #fff;
color: #323130; color: #323130;
border-color: rgba(204, 204, 204, .8); border-color: rgba(204, 204, 204, .8);
@ -8,7 +8,7 @@
@include outline(); @include outline();
} }
.tooltip-wrapper { .ui-tooltip-wrapper {
position: absolute; position: absolute;
word-wrap: break-word; word-wrap: break-word;
height: auto; height: auto;
@ -21,7 +21,7 @@
box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, .13), 0 0.6px 1.8px 0 rgba(0, 0, 0, .11); box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, .13), 0 0.6px 1.8px 0 rgba(0, 0, 0, .11);
transition: visibility 0s linear 120ms, opacity 120ms ease; transition: visibility 0s linear 120ms, opacity 120ms ease;
>.tooltip-pointer { >.ui-tooltip-pointer {
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 5px 15px 2px rgba(0, 0, 0, .3); box-shadow: 0 5px 15px 2px rgba(0, 0, 0, .3);
border: 1px solid #fff; border: 1px solid #fff;
@ -35,14 +35,14 @@
transform-origin: center; transform-origin: center;
} }
>.tooltip-curtain { >.ui-tooltip-curtain {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: -1; z-index: -1;
} }
>.tooltip-content { >.ui-tooltip-content {
font-size: var(--font-smaller-size); font-size: var(--font-smaller-size);
line-height: 1rem; line-height: 1rem;
white-space: normal; white-space: normal;

31
lib/ui/css/variables/definition.scss
View File

@ -10,10 +10,13 @@
} }
:root { :root {
color-scheme: light dark;
--color: #201f1e; --color: #201f1e;
--bg-color: #fff; --bg-color: #fff;
--border-color: #b9b9b9; --border-color: #b9b9b9;
--focus-border-color: #666; --focus-border-color: #666;
--shadow-color: rgba(0 0 0 /11%);
--disabled-color: #aaa; --disabled-color: #aaa;
--disabled-bg-color: #e9e9e9; --disabled-bg-color: #e9e9e9;
--disabled-border-color: #d9d9d9; --disabled-border-color: #d9d9d9;
@ -31,8 +34,30 @@
--text-indent: 4px; --text-indent: 4px;
--line-height: 24px; --line-height: 24px;
--font-size: .8125rem; // 13px --font-size: .8125rem; // 13px
--font-smaller-size: .75rem; // 12px --font-smaller-size: .75rem; // 12px
--font-larger-size: .875rem; // 14px --font-larger-size: .875rem; // 14px
--font-family: "Franklin Gothic Book", "San Francisco", "Segoe UI", "Open Sans", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei UI", sans-serif; --font-family: "Franklin Gothic Book", "San Francisco", "Segoe UI", "Open Sans", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei UI", sans-serif;
} }
@media (prefers-color-scheme: dark) {
:root {
--color: rgb(255 255 255/87%);
--bg-color: #141414;
--border-color: #464646;
--focus-border-color: #999;
--shadow-color: rgba(128 128 128 /8%);
--disabled-color: #555;
--disabled-bg-color: #161616;
--disabled-border-color: #262626;
--red-color: #c80000;
--title-color: #ddd;
--title-bg-color: rgb(40, 89, 173);
--hover-bg-color: #222;
--link-color: #0177e6;
--primary-color: rgb(123, 28, 33);
--loading-bg-color: rgb(20 20 20/40%);
--loading-fore-color: rgb(255 255 255/20%);
}
}

10
lib/ui/dropdown.html
View File

@ -218,7 +218,7 @@
]; ];
drop.source.forEach(it => { drop.source.forEach(it => {
const span = document.createElement('span'); const span = document.createElement('span');
span.className = 'drop-item'; span.className = 'ui-drop-item';
span.style.setProperty('--color', it.value); span.style.setProperty('--color', it.value);
span.innerText = it.text; span.innerText = it.text;
it.html = span; it.html = span;
@ -266,7 +266,7 @@
]; ];
drop.source.forEach(it => { drop.source.forEach(it => {
const span = document.createElement('span'); const span = document.createElement('span');
span.className = 'drop-item'; span.className = 'ui-drop-item';
span.style.setProperty('--color', it.value); span.style.setProperty('--color', it.value);
span.innerText = it.text; span.innerText = it.text;
it.html = span; it.html = span;
@ -279,18 +279,18 @@
display: flex; display: flex;
} }
#dropdown-sample>.drop-wrapper { #dropdown-sample>.ui-drop-wrapper {
width: 200px; width: 200px;
margin-right: 10px; margin-right: 10px;
} }
.drop-item { .ui-drop-item {
font-size: .75rem !important; font-size: .75rem !important;
padding: 0 0 0 22px !important; padding: 0 0 0 22px !important;
position: relative; position: relative;
} }
.drop-item::before { .ui-drop-item::before {
content: ''; content: '';
position: absolute; position: absolute;
width: 12px; width: 12px;

30
lib/ui/dropdown.js
View File

@ -21,7 +21,7 @@ if (dropdownGlobal == null) {
configurable: false, configurable: false,
enumerable: false, enumerable: false,
value: function () { value: function () {
const panel = document.querySelector('.drop-wrapper .drop-box.active'); const panel = document.querySelector('.ui-drop-wrapper .ui-drop-box.active');
if (panel == null) { if (panel == null) {
return; return;
} }
@ -41,7 +41,7 @@ if (dropdownGlobal == null) {
document.addEventListener('mousedown', e => { document.addEventListener('mousedown', e => {
let parent = e.target; let parent = e.target;
while (parent != null) { while (parent != null) {
if (parent.classList.contains('drop-box')) { if (parent.classList.contains('ui-drop-box')) {
e.stopPropagation(); e.stopPropagation();
return; return;
} }
@ -112,14 +112,14 @@ class Dropdown {
const options = this.#options; const options = this.#options;
// wrapper // wrapper
const wrapper = createElement('div', 'drop-wrapper'); const wrapper = createElement('div', 'ui-drop-wrapper');
const dropId = String(Math.random()).substring(2); const dropId = String(Math.random()).substring(2);
wrapper.dataset.dropId = dropId; wrapper.dataset.dropId = dropId;
dropdownGlobal[dropId] = this; dropdownGlobal[dropId] = this;
this.#wrapper = wrapper; this.#wrapper = wrapper;
// header // header
const header = createElement('div', 'drop-header'); const header = createElement('div', 'ui-drop-header');
header.addEventListener('keypress', e => { header.addEventListener('keypress', e => {
if (e.key === ' ' || e.key === 'Enter') { if (e.key === ' ' || e.key === 'Enter') {
header.dispatchEvent(new MouseEvent('click')); header.dispatchEvent(new MouseEvent('click'));
@ -179,7 +179,7 @@ class Dropdown {
// label or input // label or input
let label; let label;
if (options.input) { if (options.input) {
label = createElement('input', 'drop-text'); label = createElement('input', 'ui-drop-text');
label.setAttribute('type', 'text'); label.setAttribute('type', 'text');
options.placeholder && label.setAttribute('placeholder', options.placeholder); options.placeholder && label.setAttribute('placeholder', options.placeholder);
isPositive(options.maxlength) && label.setAttribute('maxlength', options.maxlength); isPositive(options.maxlength) && label.setAttribute('maxlength', options.maxlength);
@ -194,7 +194,7 @@ class Dropdown {
label.addEventListener('mousedown', e => this.#expanded && e.stopPropagation()); label.addEventListener('mousedown', e => this.#expanded && e.stopPropagation());
} else { } else {
isPositive(options.tabindex) && header.setAttribute('tabindex', options.tabindex); isPositive(options.tabindex) && header.setAttribute('tabindex', options.tabindex);
label = createElement('label', 'drop-text'); label = createElement('label', 'ui-drop-text');
} }
this.#label = label; this.#label = label;
if (options.multiselect) { if (options.multiselect) {
@ -207,7 +207,7 @@ class Dropdown {
} else if (options.selected != null) { } else if (options.selected != null) {
this.select(options.selected, true); this.select(options.selected, true);
} }
header.append(label, createElement('label', 'drop-caret')); header.append(label, createElement('label', 'ui-drop-caret'));
wrapper.appendChild(header); wrapper.appendChild(header);
this.disabled = options.disabled || false; this.disabled = options.disabled || false;
@ -216,16 +216,16 @@ class Dropdown {
get multiselect() { return this.#options.multiselect } get multiselect() { return this.#options.multiselect }
get disabled() { return this.#wrapper == null || this.#wrapper.querySelector('.drop-header.disabled') != null } get disabled() { return this.#wrapper == null || this.#wrapper.querySelector('.ui-drop-header.disabled') != null }
set disabled(flag) { set disabled(flag) {
if (this.#wrapper == null) { if (this.#wrapper == null) {
return; return;
} }
if (flag) { if (flag) {
this.#wrapper.querySelector('.drop-header').classList.add('disabled'); this.#wrapper.querySelector('.ui-drop-header').classList.add('disabled');
} else { } else {
this.#wrapper.querySelector('.drop-header').classList.remove('disabled'); this.#wrapper.querySelector('.ui-drop-header').classList.remove('disabled');
} }
} }
@ -335,10 +335,10 @@ class Dropdown {
const options = this.#options; const options = this.#options;
let panel = this.#container; let panel = this.#container;
if (panel == null) { if (panel == null) {
panel = createElement('div', 'drop-box'); panel = createElement('div', 'ui-drop-box');
// search box // search box
if (!options.input && options.search) { if (!options.input && options.search) {
const search = createElement('div', 'drop-search'); const search = createElement('div', 'ui-drop-search');
const input = createElement('input'); const input = createElement('input');
input.setAttribute('type', 'text'); input.setAttribute('type', 'text');
isPositive(options.tabindex) && input.setAttribute('tabindex', options.tabindex); isPositive(options.tabindex) && input.setAttribute('tabindex', options.tabindex);
@ -352,7 +352,7 @@ class Dropdown {
panel.appendChild(search); panel.appendChild(search);
} }
// list // list
const list = createElement('ul', 'drop-list'); const list = createElement('ul', 'ui-drop-list');
if (!this.multiselect) { if (!this.multiselect) {
list.addEventListener('click', e => { list.addEventListener('click', e => {
let li = e.target; let li = e.target;
@ -375,7 +375,7 @@ class Dropdown {
if (flag) { if (flag) {
let source = this.source; let source = this.source;
if (!options.input && options.search) { if (!options.input && options.search) {
const search = panel.querySelector('.drop-search > input'); const search = panel.querySelector('.ui-drop-search > input');
if (!nullOrEmpty(search?.value)) { if (!nullOrEmpty(search?.value)) {
source = filterSource(options.searchkeys, options.textkey, search.value, source); source = filterSource(options.searchkeys, options.textkey, search.value, source);
} }
@ -402,7 +402,7 @@ class Dropdown {
} }
#filllist(source) { #filllist(source) {
const list = this.#container.querySelector('.drop-list'); const list = this.#container.querySelector('.ui-drop-list');
list.replaceChildren(); list.replaceChildren();
const multiselect = this.multiselect; const multiselect = this.multiselect;
const allchecked = this.#allChecked; const allchecked = this.#allChecked;

2
lib/ui/grid/column.js
View File

@ -212,7 +212,7 @@ class GridIconColumn extends GridColumn {
} else { } else {
element.classList.remove('disabled'); element.classList.remove('disabled');
} }
const tooltip = element.querySelector('.tooltip-wrapper'); const tooltip = element.querySelector('.ui-tooltip-wrapper');
if (tooltip != null) { if (tooltip != null) {
tooltip.style.display = enabled === false ? 'none' : ''; tooltip.style.display = enabled === false ? 'none' : '';
} }

22
lib/ui/grid/grid.js
View File

@ -205,7 +205,7 @@ class Grid {
throw new Error('no specified parent.'); throw new Error('no specified parent.');
} }
this.#parent = container; this.#parent = container;
const grid = createElement('div', 'grid'); const grid = createElement('div', 'ui-grid');
grid.setAttribute('tabindex', 0); grid.setAttribute('tabindex', 0);
grid.addEventListener('keydown', e => { grid.addEventListener('keydown', e => {
let index = this.selectedIndex; let index = this.selectedIndex;
@ -235,7 +235,7 @@ class Grid {
} }
}); });
container.replaceChildren(grid); container.replaceChildren(grid);
const sizer = createElement('span', 'grid-sizer'); const sizer = createElement('span', 'ui-grid-sizer');
grid.appendChild(sizer); grid.appendChild(sizer);
this.#refs.sizer = sizer; this.#refs.sizer = sizer;
@ -246,7 +246,7 @@ class Grid {
grid.appendChild(body); grid.appendChild(body);
// loading // loading
const loading = createElement('div', 'grid-loading', const loading = createElement('div', 'ui-grid-loading',
createElement('div', null, createIcon('fa-regular', 'spinner-third')) createElement('div', null, createIcon('fa-regular', 'spinner-third'))
); );
this.#refs.loading = loading; this.#refs.loading = loading;
@ -404,7 +404,7 @@ class Grid {
} }
#createHeader() { #createHeader() {
const thead = createElement('table', 'grid-header'); const thead = createElement('table', 'ui-grid-header');
if (this.headerVisible === false) { if (this.headerVisible === false) {
thead.style.display = 'none'; thead.style.display = 'none';
} }
@ -512,7 +512,7 @@ class Grid {
} }
#createBody() { #createBody() {
const body = createElement('div', 'grid-body'); const body = createElement('div', 'ui-grid-body');
body.addEventListener('scroll', e => throttle(this.#onScroll, RefreshInterval, this, e), { passive: true }); body.addEventListener('scroll', e => throttle(this.#onScroll, RefreshInterval, this, e), { passive: true });
const cols = this.columns; const cols = this.columns;
let width = 1; let width = 1;
@ -531,7 +531,7 @@ class Grid {
} }
body.appendChild(bodyContainer); body.appendChild(bodyContainer);
// body content // body content
const bodyContent = createElement('table', 'grid-body-content'); const bodyContent = createElement('table', 'ui-grid-body-content');
bodyContent.addEventListener('mousedown', e => { bodyContent.addEventListener('mousedown', e => {
let [parent, target] = this.#getRowTarget(e.target); let [parent, target] = this.#getRowTarget(e.target);
const rowIndex = indexOfParent(parent); const rowIndex = indexOfParent(parent);
@ -546,7 +546,7 @@ class Grid {
// this.#adjustRows(); // this.#adjustRows();
// events // events
if (!this.holderDisabled) { if (!this.holderDisabled) {
const holder = createElement('div', 'grid-hover-holder'); const holder = createElement('div', 'ui-grid-hover-holder');
holder.addEventListener('mousedown', e => { holder.addEventListener('mousedown', e => {
const holder = e.currentTarget; const holder = e.currentTarget;
const keyid = holder.keyid; const keyid = holder.keyid;
@ -582,7 +582,7 @@ class Grid {
count -= exists; count -= exists;
if (count > 0) { if (count > 0) {
for (let i = 0; i < count; i += 1) { for (let i = 0; i < count; i += 1) {
const row = createElement('tr', 'grid-row'); const row = createElement('tr', 'ui-grid-row');
// row.addEventListener('mousedown', e => this.#onRowClicked(e, exists + i)); // row.addEventListener('mousedown', e => this.#onRowClicked(e, exists + i));
// row.addEventListener('dblclick', e => this.#onRowDblClicked(e)); // row.addEventListener('dblclick', e => this.#onRowDblClicked(e));
cols.forEach((col, j) => { cols.forEach((col, j) => {
@ -938,7 +938,7 @@ class Grid {
#getRowTarget(target) { #getRowTarget(target) {
let parent; let parent;
while ((parent = target.parentElement) != null && !parent.classList.contains('grid-row')) { while ((parent = target.parentElement) != null && !parent.classList.contains('ui-grid-row')) {
target = parent; target = parent;
} }
return [parent, target]; return [parent, target];
@ -1138,7 +1138,7 @@ class Grid {
} }
#onBodyMouseMove(e, holder) { #onBodyMouseMove(e, holder) {
if (e.target.classList.contains('grid-hover-holder')) { if (e.target.classList.contains('ui-grid-hover-holder')) {
return; return;
} }
let [parent, target] = this.#getRowTarget(e.target); let [parent, target] = this.#getRowTarget(e.target);
@ -1257,7 +1257,7 @@ class Grid {
} }
#onRowDblClicked(e) { #onRowDblClicked(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'LAYER' && e.target.className === 'check-box-inner' || e.target.tagName === 'LABEL' && (e.target.className === 'drop-text' || e.target.className === 'drop-caret')) { if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'LAYER' && e.target.className === 'ui-check-inner' || e.target.tagName === 'LABEL' && (e.target.className === 'ui-drop-text' || e.target.className === 'ui-drop-caret')) {
return; return;
} }
const index = this.selectedIndex; const index = this.selectedIndex;

7
lib/ui/popup.html
View File

@ -42,12 +42,7 @@
}); });
</script> </script>
<style type="text/css"> <style type="text/css">
:root { .ui-popup-mask .ui-popup-container {
--title-bg-color: lightgray;
--title-color: #333;
}
.popup-mask .popup-container {
min-width: 210px; min-width: 210px;
min-height: 200px; min-height: 200px;
max-width: unset; max-width: unset;

67
lib/ui/popup.js
View File

@ -48,7 +48,7 @@ class Popup {
this.#option = opts; this.#option = opts;
} }
get container() { return this.#mask.querySelector('.popup-container') } get container() { return this.#mask.querySelector('.ui-popup-container') }
get rect() { get rect() {
const container = this.container; const container = this.container;
@ -56,7 +56,7 @@ class Popup {
return null; return null;
} }
const style = global.getComputedStyle(container); const style = global.getComputedStyle(container);
const collapsed = container.classList.contains('popup-collapse'); const collapsed = container.classList.contains('ui-popup-collapse');
const bounds = this.#bounds; const bounds = this.#bounds;
return { return {
collapsed, collapsed,
@ -78,11 +78,11 @@ class Popup {
if (!isNaN(r.top)) { if (!isNaN(r.top)) {
css.push(`top: ${r.top}px`); css.push(`top: ${r.top}px`);
} }
const collapse = container.querySelector('.popup-header>.icon-expand'); const collapse = container.querySelector('.ui-popup-header>.icon-expand');
if (r.collapsed === true) { if (r.collapsed === true) {
css.push('width: 160px', 'height: 40px'); css.push('width: 160px', 'height: 40px');
this.#bounds = r; this.#bounds = r;
container.classList.add('popup-collapse'); container.classList.add('ui-popup-collapse');
if (collapse != null) { if (collapse != null) {
changeIcon(collapse, 'fa-regular', 'expand-alt'); changeIcon(collapse, 'fa-regular', 'expand-alt');
} }
@ -93,7 +93,7 @@ class Popup {
if (!isNaN(r.height) && r.height > 0) { if (!isNaN(r.height) && r.height > 0) {
css.push(`height: ${r.height}px`); css.push(`height: ${r.height}px`);
} }
container.classList.remove('popup-collapse'); container.classList.remove('ui-popup-collapse');
this.#bounds = null; this.#bounds = null;
if (collapse != null) { if (collapse != null) {
changeIcon(collapse, 'fa-regular', 'compress-alt'); changeIcon(collapse, 'fa-regular', 'compress-alt');
@ -105,15 +105,18 @@ class Popup {
} }
create() { create() {
const mask = createElement('div', 'popup-mask'); const mask = createElement('div', 'ui-popup-mask');
if (this.#option.mask === false) { if (this.#option.mask === false) {
mask.classList.add('popup-transparent'); mask.classList.add('ui-popup-transparent');
} }
const container = createElement('div', 'popup-container'); const container = createElement('div', 'ui-popup-container');
let tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0)); let tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0));
if (tabIndex < 0) {
tabIndex = 0;
}
container.tabIndex = tabIndex + 1; container.tabIndex = tabIndex + 1;
const close = () => { const close = () => {
mask.classList.add('popup-active'); mask.classList.add('ui-popup-active');
mask.style.opacity = 0; mask.style.opacity = 0;
setTimeout(() => mask.remove(), 120); setTimeout(() => mask.remove(), 120);
}; };
@ -123,17 +126,17 @@ class Popup {
} }
container.append( container.append(
createElement('div', header => { createElement('div', header => {
header.className = 'popup-header'; header.className = 'ui-popup-header';
let title = this.#option.title; let title = this.#option.title;
if (!(title instanceof HTMLElement)) { if (!(title instanceof HTMLElement)) {
title = createElement('div', t => { title = createElement('div', t => {
t.className = 'popup-header-title'; t.className = 'ui-popup-header-title';
t.innerText = title; t.innerText = title;
}); });
} }
header.appendChild(title); header.appendChild(title);
if (this.#option.movable !== false) { if (this.#option.movable !== false) {
const move = title.querySelector('.popup-move') ?? title; const move = title.querySelector('.ui-popup-move') ?? title;
move.addEventListener('mousedown', e => { move.addEventListener('mousedown', e => {
const x = e.clientX - container.offsetLeft; const x = e.clientX - container.offsetLeft;
const y = e.clientY - container.offsetTop; const y = e.clientY - container.offsetTop;
@ -165,19 +168,19 @@ class Popup {
} }
}); });
collapse.addEventListener('click', () => { collapse.addEventListener('click', () => {
if (container.classList.contains('popup-collapse')) { if (container.classList.contains('ui-popup-collapse')) {
const bounds = this.#bounds; const bounds = this.#bounds;
if (bounds != null) { if (bounds != null) {
container.style.cssText += `width: ${bounds.width}px; height: ${bounds.height}px`; container.style.cssText += `width: ${bounds.width}px; height: ${bounds.height}px`;
this.#bounds = null; this.#bounds = null;
} }
container.classList.remove('popup-collapse'); container.classList.remove('ui-popup-collapse');
changeIcon(collapse, 'fa-regular', 'compress-alt'); changeIcon(collapse, 'fa-regular', 'compress-alt');
} else { } else {
const rect = this.rect; const rect = this.rect;
this.#bounds = rect; this.#bounds = rect;
container.style.cssText += `width: 160px; height: 40px`; container.style.cssText += `width: 160px; height: 40px`;
container.classList.add('popup-collapse'); container.classList.add('ui-popup-collapse');
changeIcon(collapse, 'fa-regular', 'expand-alt'); changeIcon(collapse, 'fa-regular', 'expand-alt');
} }
}); });
@ -193,17 +196,17 @@ class Popup {
cancel.addEventListener('click', () => close()); cancel.addEventListener('click', () => close());
header.appendChild(cancel); header.appendChild(cancel);
}), }),
createElement('div', 'popup-body', content, createElement('div', 'popup-loading', createElement('div', 'ui-popup-body', content, createElement('div', 'ui-popup-loading',
createElement('div', null, createIcon('fa-regular', 'spinner-third')) createElement('div', null, createIcon('fa-regular', 'spinner-third'))
)) ))
); );
if (Array.isArray(this.#option.buttons)) { if (Array.isArray(this.#option.buttons)) {
tabIndex = Math.max.apply(null, [...container.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0)); tabIndex = Math.max.apply(null, [...container.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0));
container.appendChild( container.appendChild(
createElement('div', 'popup-footer', ...this.#option.buttons.map((b, i) => { createElement('div', 'ui-popup-footer', ...this.#option.buttons.map((b, i) => {
const button = createElement('button', 'popup-button'); const button = createElement('button', 'ui-popup-button');
if (b.tabindex > 0) { if (b.tabIndex > 0) {
button.tabIndex = b.tabindex; button.tabIndex = b.tabIndex;
} else { } else {
button.tabIndex = tabIndex + i + 1; button.tabIndex = tabIndex + i + 1;
} }
@ -245,35 +248,35 @@ class Popup {
if (this.#option.resizable === true) { if (this.#option.resizable === true) {
container.append( container.append(
createElement('layer', layer => { createElement('layer', layer => {
layer.className = 'popup-border popup-border-right'; layer.className = 'ui-popup-border ui-popup-border-right';
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.right, e)); layer.addEventListener('mousedown', e => this.#resize(ResizeMods.right, e));
}), }),
createElement('layer', layer => { createElement('layer', layer => {
layer.className = 'popup-border popup-border-bottom'; layer.className = 'ui-popup-border ui-popup-border-bottom';
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottom, e)); layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottom, e));
}), }),
createElement('layer', layer => { createElement('layer', layer => {
layer.className = 'popup-border popup-border-left'; layer.className = 'ui-popup-border ui-popup-border-left';
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.left, e)); layer.addEventListener('mousedown', e => this.#resize(ResizeMods.left, e));
}), }),
createElement('layer', layer => { createElement('layer', layer => {
layer.className = 'popup-border popup-border-top'; layer.className = 'ui-popup-border ui-popup-border-top';
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.top, e)); layer.addEventListener('mousedown', e => this.#resize(ResizeMods.top, e));
}), }),
createElement('layer', layer => { createElement('layer', layer => {
layer.className = 'popup-border popup-border-bottom-right'; layer.className = 'ui-popup-border ui-popup-border-bottom-right';
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottomRight, e)); layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottomRight, e));
}), }),
createElement('layer', layer => { createElement('layer', layer => {
layer.className = 'popup-border popup-border-bottom-left'; layer.className = 'ui-popup-border ui-popup-border-bottom-left';
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottomLeft, e)); layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottomLeft, e));
}), }),
createElement('layer', layer => { createElement('layer', layer => {
layer.className = 'popup-border popup-border-top-left'; layer.className = 'ui-popup-border ui-popup-border-top-left';
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.topLeft, e)); layer.addEventListener('mousedown', e => this.#resize(ResizeMods.topLeft, e));
}), }),
createElement('layer', layer => { createElement('layer', layer => {
layer.className = 'popup-border popup-border-top-right'; layer.className = 'ui-popup-border ui-popup-border-top-right';
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.topRight, e)); layer.addEventListener('mousedown', e => this.#resize(ResizeMods.topRight, e));
}) })
) )
@ -304,9 +307,9 @@ class Popup {
}); });
} }
get loading() { return this.#mask?.querySelector('.popup-body>.popup-loading')?.style?.visibility === 'visible' } get loading() { return this.#mask?.querySelector('.ui-popup-body>.ui-popup-loading')?.style?.visibility === 'visible' }
set loading(flag) { set loading(flag) {
let loading = this.#mask?.querySelector('.popup-body>.popup-loading'); let loading = this.#mask?.querySelector('.ui-popup-body>.ui-popup-loading');
if (loading == null) { if (loading == null) {
return; return;
} }
@ -431,7 +434,7 @@ export function showAlert(title, message, iconType = 'info', parent = document.b
] ]
}); });
popup.show(parent).then(mask => { popup.show(parent).then(mask => {
const button = mask.querySelector('.popup-container .popup-footer .popup-button:last-child'); const button = mask.querySelector('.ui-popup-container .ui-popup-footer .ui-popup-button:last-child');
button?.focus(); button?.focus();
}); });
}); });
@ -480,7 +483,7 @@ export function showConfirm(title, content, buttons, iconType = 'question', pare
] ]
}); });
popup.show(parent).then(mask => { popup.show(parent).then(mask => {
const button = mask.querySelector('.popup-container .popup-footer .popup-button:last-child'); const button = mask.querySelector('.ui-popup-container .ui-popup-footer .ui-popup-button:last-child');
button?.focus(); button?.focus();
}); });
}); });

12
lib/ui/tooltip.js
View File

@ -6,23 +6,23 @@ function setTooltip(container, content, flag = false, parent = null) {
const isParent = parent instanceof HTMLElement; const isParent = parent instanceof HTMLElement;
if (isParent) { if (isParent) {
const tipid = container.dataset.tipId; const tipid = container.dataset.tipId;
const tip = parent.querySelector(`.tooltip-wrapper[data-tip-id="${tipid}"]`); const tip = parent.querySelector(`.ui-tooltip-wrapper[data-tip-id="${tipid}"]`);
tip?.remove(); tip?.remove();
} else { } else {
const tip = container.querySelector('.tooltip-wrapper'); const tip = container.querySelector('.ui-tooltip-wrapper');
tip?.remove(); tip?.remove();
} }
const wrapper = createElement('div', wrapper => { const wrapper = createElement('div', wrapper => {
wrapper.className = 'tooltip-wrapper tooltip-color'; wrapper.className = 'ui-tooltip-wrapper ui-tooltip-color';
wrapper.style.visibility = 'hidden'; wrapper.style.visibility = 'hidden';
wrapper.style.opacity = 0; wrapper.style.opacity = 0;
wrapper.style.top = '0'; wrapper.style.top = '0';
wrapper.style.left = '0'; wrapper.style.left = '0';
}, },
createElement('div', 'tooltip-pointer tooltip-color'), createElement('div', 'ui-tooltip-pointer ui-tooltip-color'),
createElement('div', 'tooltip-curtain tooltip-color'), createElement('div', 'ui-tooltip-curtain ui-tooltip-color'),
createElement('div', cnt => { createElement('div', cnt => {
cnt.className = 'tooltip-content'; cnt.className = 'ui-tooltip-content';
if (content instanceof Element) { if (content instanceof Element) {
cnt.appendChild(content); cnt.appendChild(content);
} else { } else {

20
style.scss
View File

@ -13,8 +13,8 @@
font-weight: 400; font-weight: 400;
color-scheme: light dark; color-scheme: light dark;
color: rgba(255, 255, 255, 0.87); color: var(--color);
background-color: #242424; background-color: var(--bg-color);
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@ -22,7 +22,7 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
--border-color: #ccc; --split-border-color: #ccc;
--hover-color: #666; --hover-color: #666;
--serif-font-family: 'Segoe UI Variable Display', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; --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; --mono-font-family: 'FantasqueSansMono NFM', 'Cascadia Code', 'PT Mono', Consolas, 'Courier New', monospace;
@ -96,8 +96,8 @@ button {
border-radius: 8px; border-radius: 8px;
border: 1px solid transparent; border: 1px solid transparent;
padding: 0.6em 1.2em; padding: 0.6em 1.2em;
font-size: 1em; // font-size: 1em;
font-weight: 500; // font-weight: 500;
font-family: inherit; font-family: inherit;
background-color: #1a1a1a; background-color: #1a1a1a;
cursor: pointer; cursor: pointer;
@ -128,7 +128,7 @@ h1 {
#directory { #directory {
width: 200px; width: 200px;
padding: 2rem; padding: 2rem;
border-right: 1px solid var(--border-color); border-right: 1px solid var(--split-border-color);
flex: 0 0 auto; flex: 0 0 auto;
>ul { >ul {
@ -191,8 +191,8 @@ h1 {
align-items: center; align-items: center;
} }
.checkbox-wrapper { .ui-check-wrapper {
.check-box-inner { .ui-check-inner {
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
@ -218,9 +218,7 @@ h1 {
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
color: #213547; --split-border-color: #666;
background-color: #ffffff;
--border-color: #666;
--hover-color: #eee; --hover-color: #eee;
} }