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

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

@ -441,7 +441,7 @@ class CustomerCommunication {
div.style.alignItems = 'center';
div.append(
createElement('div', div => {
div.className = 'popup-move';
div.className = 'ui-popup-move';
div.style.flex = '1 1 auto';
},
createElement('div', div => div.innerText = r('editContacts', 'Edit Contacts')),
@ -797,7 +797,7 @@ class CustomerCommunication {
div.style.alignItems = 'center';
div.append(
createElement('div', div => {
div.className = 'popup-move';
div.className = 'ui-popup-move';
div.style.flex = '1 1 auto';
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";
.popup-mask .wrapper-edit-method {
.ui-popup-mask .wrapper-edit-method {
width: 100%;
.checkbox-wrapper {
.ui-check-wrapper {
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 {
flex: 0 0 auto;
padding: 5px 0 5px 10px;
@ -278,7 +254,7 @@
font-size: var(--font-size);
align-self: flex-start;
.tooltip-wrapper>.tooltip-content {
.ui-tooltip-wrapper>.ui-tooltip-content {
font-weight: normal;
}
}
@ -349,12 +325,12 @@
}
}
.popup-mask {
.grid {
.ui-popup-mask {
.ui-grid {
height: 100%;
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;
.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 {
className?: string;
enabled?: boolean;
name?: string;
tabIndex?: Number;
type?: string;
label?: string | HTMLElement;
checked?: boolean;
@ -11,5 +13,6 @@ interface CheckboxOptions {
onchange?: (this: HTMLInputElement, ev: Event) => any;
}
export function createRadiobox(opts?: CheckboxOptions): HTMLElement
export function createCheckbox(opts?: CheckboxOptions): HTMLElement
export function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement

18
lib/ui/checkbox.html
View File

@ -11,6 +11,10 @@
<p>
复选框初始参数，结构为
<pre>interface CheckboxOptions {
className?: string;
enabled?: boolean;
name?: string;
tabIndex?: Number;
type?: string;
label?: string;
checked?: boolean;
@ -29,6 +33,14 @@
<p>
复选框默认是否可用
</p>
<h4>name?: string</h4>
<p>
复选框或单选框的 name
</p>
<h4>tabIndex?: Number</h4>
<p>
复选框的 tabindex
</p>
<h4>type?: string</h4>
<p>
复选框图标的样式，可选值目前有 <code>fa-regular</code>、<code>fa-light</code>、<code>fa-solid</code>
@ -65,6 +77,12 @@
<p>
复选框改变时触发的事件
</p>
<h2>createRadiobox</h2>
<code>function createRadiobox(opts?: CheckboxOptions): HTMLElement</code>
<h3>opts?: CheckboxOptions</h3>
<p>
单选框初始参数，结构如上
</p>
<h2>resolveCheckbox</h2>
<code>function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement</code>
<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') {
container.appendChild(
createElement('layer', layer => {
layer.className = 'check-box-inner';
layer.className = 'ui-check-inner';
layer.addEventListener('keypress', e => {
if (e.key === ' ' || e.key === 'Enter') {
const input = container.querySelector('input');
@ -30,7 +30,7 @@ function fillCheckbox(container, type = 'fa-regular', label, tabindex = -1, char
}
function createRadiobox(opts = {}) {
const container = createElement('label', 'checkbox-wrapper radiobox-wrapper',
const container = createElement('label', 'ui-check-wrapper ui-radio-wrapper',
createElement('input', input => {
input.setAttribute('type', 'radio');
input.name = opts.name;
@ -52,12 +52,12 @@ function createRadiobox(opts = {}) {
if (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;
}
function createCheckbox(opts = {}) {
const container = createElement('label', 'checkbox-wrapper',
const container = createElement('label', 'ui-check-wrapper',
createElement('input', input => {
input.setAttribute('type', 'checkbox');
if (opts.checked === true) {
@ -82,7 +82,7 @@ function createCheckbox(opts = {}) {
container.classList.add('disabled');
}
if (opts.checkedNode != null && opts.uncheckedNode != null) {
container.classList.add('checkbox-image');
container.classList.add('ui-check-image-wrapper');
let height = opts.imageHeight;
if (isNaN(height) || height <= 0) {
height = 14;
@ -92,7 +92,7 @@ function createCheckbox(opts = {}) {
opts.uncheckedNode.classList.add('unchecked');
container.appendChild(opts.uncheckedNode);
} else {
fillCheckbox(container, opts.type, opts.label, opts.tabindex);
fillCheckbox(container, opts.type, opts.label, opts.tabIndex);
}
return container;
}
@ -101,7 +101,7 @@ function resolveCheckbox(container = document.body, legacy) {
if (legacy) {
const checks = container.querySelectorAll('input[type="checkbox"]');
for (let chk of checks) {
if (chk.parentElement.classList.contains('checkbox-wrapper')) {
if (chk.parentElement.classList.contains('ui-check-wrapper')) {
// skip
continue;
}
@ -139,9 +139,9 @@ function resolveCheckbox(container = document.body, legacy) {
text = label.innerText;
}
if (chk.disabled) {
label.className = 'checkbox-wrapper disabled';
label.className = 'ui-check-wrapper disabled';
} else {
label.className = 'checkbox-wrapper';
label.className = 'ui-check-wrapper';
}
label.replaceChildren();
fillCheckbox(label, 'fa-regular', text, chk.tabIndex);
@ -150,18 +150,18 @@ function resolveCheckbox(container = document.body, legacy) {
}
const boxes = container.querySelectorAll('label[data-checkbox]');
for (let box of boxes) {
if (!box.classList.contains('checkbox-wrapper')) {
box.classList.add('checkbox-wrapper');
if (!box.classList.contains('ui-check-wrapper')) {
box.classList.add('ui-check-wrapper');
}
if (box.hasChildNodes()) {
if (!box.classList.contains('checkbox-image')) {
box.classList.add('checkbox-image');
if (!box.classList.contains('ui-check-image-wrapper')) {
box.classList.add('ui-check-image-wrapper');
}
} else {
fillCheckbox(box,
box.dataset.type,
box.dataset.label,
box.dataset.tabindex)
box.dataset.tabIndex)
box.removeAttribute('data-type');
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"] {
display: none;
&:checked {
&~.checked {
~.checked {
display: inline;
}
&~.unchecked {
~.unchecked {
display: none;
}
}
@ -24,17 +24,17 @@
}
}
.checkbox-wrapper {
.ui-check-wrapper {
display: inline-flex;
align-items: center;
padding: 0 8px;
height: 36px;
@include check-box();
@include ui-check();
.check-box-inner {
.ui-check-inner {
flex: 0 0 auto;
&+* {
+* {
flex: 1 1 auto;
font-weight: 400;
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-input[type] {

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

@ -10,7 +10,7 @@ $searchInputHeight: 26px;
$searchIconSize: 13px;
$listMaxHeight: 210px;
.drop-wrapper {
.ui-drop-wrapper {
display: inline-block;
border: none;
border-radius: unset;
@ -19,14 +19,14 @@ $listMaxHeight: 210px;
font-size: var(--font-size);
font-family: var(--font-family);
>.drop-header {
>.ui-drop-header {
background-color: var(--bg-color);
display: flex;
height: $headerHeight;
@include outborder();
>.drop-text {
>.ui-drop-text {
flex: 1 1 auto;
cursor: pointer;
font-size: var(--font-size);
@ -40,7 +40,7 @@ $listMaxHeight: 210px;
@include outline();
}
>input.drop-text {
>input.ui-drop-text {
cursor: initial;
&::placeholder {
@ -49,7 +49,7 @@ $listMaxHeight: 210px;
}
}
>.drop-caret {
>.ui-drop-caret {
flex: 0 0 auto;
width: $caretWidth;
display: flex;
@ -78,14 +78,14 @@ $listMaxHeight: 210px;
// box-shadow: none;
}
>.drop-text,
>.drop-caret {
>.ui-drop-text,
>.ui-drop-caret {
cursor: default;
}
}
}
>.drop-box {
>.ui-drop-box {
position: absolute;
visibility: hidden;
opacity: 0;
@ -114,7 +114,7 @@ $listMaxHeight: 210px;
transform: scaleY(1);
}
>.drop-search {
>.ui-drop-search {
box-sizing: border-box;
height: $searchBarHeight;
line-height: $searchBarHeight;
@ -150,7 +150,7 @@ $listMaxHeight: 210px;
}
}
>.drop-list {
>.ui-drop-list {
margin: 0;
padding: 0;
list-style: none;
@ -179,7 +179,7 @@ $listMaxHeight: 210px;
background-color: var(--hover-bg-color);
}
>.checkbox-wrapper {
>.ui-check-wrapper {
height: $dropItemHeight;
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);
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";
.grid {
.ui-grid {
position: relative;
box-sizing: border-box;
display: flex;
@ -52,14 +52,14 @@
font-family: var(--font-family);
}
>.grid-sizer {
>.ui-grid-sizer {
position: absolute;
white-space: nowrap;
font-weight: bold;
visibility: hidden;
}
>.grid-header {
>.ui-grid-header {
width: 100%;
min-width: 100%;
margin: 0;
@ -187,20 +187,20 @@
}
}
>.grid-body {
>.ui-grid-body {
flex: 1 1 auto;
overflow: auto;
color: var(--cell-fore-color);
@include scrollbar();
.grid-body-content {
.ui-grid-body-content {
position: absolute;
min-width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
>.grid-row {
>.ui-grid-row {
line-height: var(--line-height);
white-space: nowrap;
background-color: var(--row-bg-color);
@ -254,11 +254,11 @@
@include scrollbar();
}
.checkbox-wrapper {
.ui-check-wrapper {
display: flex;
justify-content: center;
.check-box-inner {
.ui-check-inner {
&,
>svg {
@ -267,22 +267,22 @@
}
}
.drop-wrapper {
.ui-drop-wrapper {
height: var(--row-height);
width: 100%;
display: flex;
flex-direction: column;
>.drop-header {
>.ui-drop-header {
border: none;
height: 100%;
>.drop-text {
>.ui-drop-text {
padding: var(--spacing-cell);
}
}
>.drop-box {
>.ui-drop-box {
top: calc(var(--row-height) + 2px);
&.slide-up {
@ -323,7 +323,7 @@
}
}
.grid-hover-holder {
.ui-grid-hover-holder {
box-sizing: border-box;
position: absolute;
line-height: var(--line-height);
@ -343,7 +343,7 @@
}
}
>.grid-loading {
>.ui-grid-loading {
position: absolute;
@include inset(0, 0, 0, 0);
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;
$buttonHeight: 28px;
.popup-mask {
.ui-popup-mask {
position: fixed;
@include inset(0, 0, 0, 0);
background-color: rgba(0 0 0 /20%);
@ -20,27 +20,29 @@ $buttonHeight: 28px;
--loading-border-radius: 10px;
}
&.popup-active .popup-container {
&.ui-popup-active .ui-popup-container {
transform: scale(1.1);
}
&.popup-transparent {
&.ui-popup-transparent {
right: unset;
bottom: unset;
}
.popup-container {
.ui-popup-container {
min-width: 400px;
max-width: 800px;
background-color: var(--bg-color);
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;
position: absolute;
display: flex;
flex-direction: column;
.popup-header {
@include outline();
.ui-popup-header {
flex: 0 0 auto;
padding: 10px 12px 6px;
border-radius: var(--corner-radius) var(--corner-radius) 0 0;
@ -56,7 +58,7 @@ $buttonHeight: 28px;
font-size: 1rem;
}
>.popup-header-title {
>.ui-popup-header-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -86,14 +88,14 @@ $buttonHeight: 28px;
}
}
.popup-body {
.ui-popup-body {
margin: 6px 10px;
flex: 1 1 auto;
line-height: $headerLineHeight;
position: relative;
min-height: 100px;
>.popup-loading {
>.ui-popup-loading {
position: absolute;
@include inset(0, 0, -46px, 0);
visibility: hidden;
@ -168,7 +170,7 @@ $buttonHeight: 28px;
text-indent: var(--text-indent);
}
+.checkbox-wrapper {
+.ui-check-wrapper {
padding: 0;
}
}
@ -176,21 +178,21 @@ $buttonHeight: 28px;
}
}
.popup-footer {
.ui-popup-footer {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 4px 10px 16px 2px;
.popup-button {
.ui-popup-button {
margin-left: 12px;
border: none;
height: $buttonHeight;
// height: $buttonHeight;
line-height: $buttonHeight;
color: var(--title-color);
border-radius: var(--corner-radius);
padding: 0 16px;
padding: 4px 16px;
box-sizing: border-box;
min-width: 70px;
text-align: center;
@ -208,75 +210,75 @@ $buttonHeight: 28px;
}
}
.popup-border {
.ui-popup-border {
position: absolute;
&.popup-border-left,
&.popup-border-right {
&.ui-popup-border-left,
&.ui-popup-border-right {
width: 6px;
height: 100%;
top: 0;
cursor: ew-resize;
}
&.popup-border-top,
&.popup-border-bottom {
&.ui-popup-border-top,
&.ui-popup-border-bottom {
width: 100%;
height: 6px;
left: 0;
cursor: ns-resize;
}
&.popup-border-top-left,
&.popup-border-top-right,
&.popup-border-bottom-right,
&.popup-border-bottom-left {
&.ui-popup-border-top-left,
&.ui-popup-border-top-right,
&.ui-popup-border-bottom-right,
&.ui-popup-border-bottom-left {
width: 8px;
height: 8px;
}
&.popup-border-top-left,
&.popup-border-bottom-right {
&.ui-popup-border-top-left,
&.ui-popup-border-bottom-right {
cursor: nwse-resize;
}
&.popup-border-top-right,
&.popup-border-bottom-left {
&.ui-popup-border-top-right,
&.ui-popup-border-bottom-left {
cursor: nesw-resize;
}
&.popup-border-left,
&.popup-border-top-left,
&.popup-border-bottom-left {
&.ui-popup-border-left,
&.ui-popup-border-top-left,
&.ui-popup-border-bottom-left {
left: -4px;
}
&.popup-border-right,
&.popup-border-top-right,
&.popup-border-bottom-right {
&.ui-popup-border-right,
&.ui-popup-border-top-right,
&.ui-popup-border-bottom-right {
right: -4px;
}
&.popup-border-top,
&.popup-border-top-left,
&.popup-border-top-right {
&.ui-popup-border-top,
&.ui-popup-border-top-left,
&.ui-popup-border-top-right {
top: -4px;
}
&.popup-border-bottom,
&.popup-border-bottom-right,
&.popup-border-bottom-left {
&.ui-popup-border-bottom,
&.ui-popup-border-bottom-right,
&.ui-popup-border-bottom-left {
bottom: -4px;
}
}
&.popup-collapse {
&.ui-popup-collapse {
min-height: 40px;
min-width: 160px;
.popup-body,
.popup-footer,
.popup-border {
.ui-popup-body,
.ui-popup-footer,
.ui-popup-border {
display: none;
}
}

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

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

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

@ -10,10 +10,13 @@
}
:root {
color-scheme: light dark;
--color: #201f1e;
--bg-color: #fff;
--border-color: #b9b9b9;
--focus-border-color: #666;
--shadow-color: rgba(0 0 0 /11%);
--disabled-color: #aaa;
--disabled-bg-color: #e9e9e9;
--disabled-border-color: #d9d9d9;
@ -31,8 +34,30 @@
--text-indent: 4px;
--line-height: 24px;
--font-size: .8125rem; // 13px
--font-smaller-size: .75rem; // 12px
--font-larger-size: .875rem; // 14px
--font-size: .8125rem; // 13px
--font-smaller-size: .75rem; // 12px
--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;
}
@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 => {
const span = document.createElement('span');
span.className = 'drop-item';
span.className = 'ui-drop-item';
span.style.setProperty('--color', it.value);
span.innerText = it.text;
it.html = span;
@ -266,7 +266,7 @@
];
drop.source.forEach(it => {
const span = document.createElement('span');
span.className = 'drop-item';
span.className = 'ui-drop-item';
span.style.setProperty('--color', it.value);
span.innerText = it.text;
it.html = span;
@ -279,18 +279,18 @@
display: flex;
}
#dropdown-sample>.drop-wrapper {
#dropdown-sample>.ui-drop-wrapper {
width: 200px;
margin-right: 10px;
}
.drop-item {
.ui-drop-item {
font-size: .75rem !important;
padding: 0 0 0 22px !important;
position: relative;
}
.drop-item::before {
.ui-drop-item::before {
content: '';
position: absolute;
width: 12px;

30
lib/ui/dropdown.js
View File

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

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

@ -212,7 +212,7 @@ class GridIconColumn extends GridColumn {
} else {
element.classList.remove('disabled');
}
const tooltip = element.querySelector('.tooltip-wrapper');
const tooltip = element.querySelector('.ui-tooltip-wrapper');
if (tooltip != null) {
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.');
}
this.#parent = container;
const grid = createElement('div', 'grid');
const grid = createElement('div', 'ui-grid');
grid.setAttribute('tabindex', 0);
grid.addEventListener('keydown', e => {
let index = this.selectedIndex;
@ -235,7 +235,7 @@ class Grid {
}
});
container.replaceChildren(grid);
const sizer = createElement('span', 'grid-sizer');
const sizer = createElement('span', 'ui-grid-sizer');
grid.appendChild(sizer);
this.#refs.sizer = sizer;
@ -246,7 +246,7 @@ class Grid {
grid.appendChild(body);
// loading
const loading = createElement('div', 'grid-loading',
const loading = createElement('div', 'ui-grid-loading',
createElement('div', null, createIcon('fa-regular', 'spinner-third'))
);
this.#refs.loading = loading;
@ -404,7 +404,7 @@ class Grid {
}
#createHeader() {
const thead = createElement('table', 'grid-header');
const thead = createElement('table', 'ui-grid-header');
if (this.headerVisible === false) {
thead.style.display = 'none';
}
@ -512,7 +512,7 @@ class Grid {
}
#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 });
const cols = this.columns;
let width = 1;
@ -531,7 +531,7 @@ class Grid {
}
body.appendChild(bodyContainer);
// body content
const bodyContent = createElement('table', 'grid-body-content');
const bodyContent = createElement('table', 'ui-grid-body-content');
bodyContent.addEventListener('mousedown', e => {
let [parent, target] = this.#getRowTarget(e.target);
const rowIndex = indexOfParent(parent);
@ -546,7 +546,7 @@ class Grid {
// this.#adjustRows();
// events
if (!this.holderDisabled) {
const holder = createElement('div', 'grid-hover-holder');
const holder = createElement('div', 'ui-grid-hover-holder');
holder.addEventListener('mousedown', e => {
const holder = e.currentTarget;
const keyid = holder.keyid;
@ -582,7 +582,7 @@ class Grid {
count -= exists;
if (count > 0) {
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('dblclick', e => this.#onRowDblClicked(e));
cols.forEach((col, j) => {
@ -938,7 +938,7 @@ class Grid {
#getRowTarget(target) {
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;
}
return [parent, target];
@ -1138,7 +1138,7 @@ class Grid {
}
#onBodyMouseMove(e, holder) {
if (e.target.classList.contains('grid-hover-holder')) {
if (e.target.classList.contains('ui-grid-hover-holder')) {
return;
}
let [parent, target] = this.#getRowTarget(e.target);
@ -1257,7 +1257,7 @@ class Grid {
}
#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;
}
const index = this.selectedIndex;

7
lib/ui/popup.html
View File

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

67
lib/ui/popup.js
View File

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

12
lib/ui/tooltip.js
View File

@ -6,23 +6,23 @@ function setTooltip(container, content, flag = false, parent = null) {
const isParent = parent instanceof HTMLElement;
if (isParent) {
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();
} else {
const tip = container.querySelector('.tooltip-wrapper');
const tip = container.querySelector('.ui-tooltip-wrapper');
tip?.remove();
}
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.opacity = 0;
wrapper.style.top = '0';
wrapper.style.left = '0';
},
createElement('div', 'tooltip-pointer tooltip-color'),
createElement('div', 'tooltip-curtain tooltip-color'),
createElement('div', 'ui-tooltip-pointer ui-tooltip-color'),
createElement('div', 'ui-tooltip-curtain ui-tooltip-color'),
createElement('div', cnt => {
cnt.className = 'tooltip-content';
cnt.className = 'ui-tooltip-content';
if (content instanceof Element) {
cnt.appendChild(content);
} else {

20
style.scss
View File

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