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

optimize style sheets, support tabIndex in popup

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-21 10:59:56 +08:00
parent cbdb2c7868
commit c4316e7e52
16 changed files with 235 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
lib/ui/checkbox.js
View File

@ -2,9 +2,23 @@ import './css/checkbox.scss';
import { createElement } from "../functions";
import { createIcon } from "./icon";
function fillCheckbox(container, type, label, charactor = 'check') {
function fillCheckbox(container, type = 'fa-regular', label, tabindex = -1, charactor = 'check') {
container.appendChild(
createElement('layer', 'check-box-inner', createIcon(type, charactor))
createElement('layer', layer => {
layer.className = 'check-box-inner';
layer.addEventListener('keypress', e => {
if (e.key === ' ' || e.key === 'Enter') {
const input = container.querySelector('input');
if (input != null) {
input.checked = !input.checked;
input.dispatchEvent(new Event('change'));
}
}
});
if (tabindex >= 0) {
layer.tabIndex = tabindex;
}
}, createIcon(type, charactor))
);
if (label instanceof Element) {
container.appendChild(label);
@ -38,7 +52,7 @@ function createRadiobox(opts = {}) {
if (opts.className) {
container.classList.add(opts.className);
}
fillCheckbox(container, opts.type || 'fa-regular', opts.label, 'circle');
fillCheckbox(container, opts.type, opts.label, opts.tabindex, 'circle');
return container;
}
@ -78,7 +92,7 @@ function createCheckbox(opts = {}) {
opts.uncheckedNode.classList.add('unchecked');
container.appendChild(opts.uncheckedNode);
} else {
fillCheckbox(container, opts.type || 'fa-regular', opts.label);
fillCheckbox(container, opts.type, opts.label, opts.tabindex);
}
return container;
}
@ -130,7 +144,7 @@ function resolveCheckbox(container = document.body, legacy) {
label.className = 'checkbox-wrapper';
}
label.replaceChildren();
fillCheckbox(label, 'fa-regular', text);
fillCheckbox(label, 'fa-regular', text, chk.tabIndex);
label.insertBefore(chk, label.firstChild);
}
}
@ -144,9 +158,10 @@ function resolveCheckbox(container = document.body, legacy) {
box.classList.add('checkbox-image');
}
} else {
const type = box.dataset.type || 'fa-regular';
const label = box.dataset.label;
fillCheckbox(box, type, label)
fillCheckbox(box,
box.dataset.type,
box.dataset.label,
box.dataset.tabindex)
box.removeAttribute('data-type');
box.removeAttribute('data-label');
}

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

@ -1,4 +1,4 @@
@import './functions/checkbox.scss';
@import "./functions/checkbox.scss";
.checkbox-image {
>input[type="checkbox"] {

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

@ -1,26 +1,11 @@
@import "../css/functions/func.scss";
.ui-text,
.ui-input {
.ui-input[type] {
font-size: var(--font-size);
font-family: var(--font-family);
border: 1px solid var(--box-color);
border-radius: var(--border-radius);
transition: border-color .2s;
&:focus,
&:focus-visible {
outline: none;
}
&:focus,
&:hover {
border-color: var(--focus-color);
}
&:disabled {
border-color: var(--disabled-box-color);
color: var(--disabled-color);
background-color: var(--disabled-bg-color);
}
@include outborder();
}
.ui-input {

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

@ -1,4 +1,4 @@
@import './functions/func.scss';
@import "./functions/func.scss";
$headerHeight: 26px;
$caretWidth: 26px;
@ -16,90 +16,15 @@ $listMaxHeight: 210px;
border-radius: unset;
user-select: none;
position: relative;
font-size: var(--font-size);
font-family: var(--font-family);
>.drop-header {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
background-color: var(--bg-color);
display: flex;
height: $headerHeight;
transition: border-color .2s;
&:focus,
&:hover {
border-color: var(--focus-color);
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
}
&:focus,
&:focus-visible {
outline: none;
}
/*>.drop-select-container {
flex: 1 1 auto;
overflow-x: auto;
white-space: nowrap;
display: flex;
flex-direction: row;
@include scrollbar();
&::-webkit-scrollbar {
height: $scrollBarSize;
}
&::-webkit-scrollbar-thumb {
border-radius: var(--border-radius);
}
>span {
display: inline-block;
margin: 2px;
padding: 0 2px;
border: 1px solid lightgray;
height: 20px;
line-height: 20px;
background-color: white;
font-size: $tinySize;
border-radius: var(--border-radius);
cursor: pointer;
position: relative;
>svg {
display: none;
width: 8px;
height: 20px;
fill: white;
vertical-align: top;
}
&:hover {
border-color: #1890ff;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
background-color: #1890ff;
color: white;
>svg {
display: inline-block;
margin-left: 3px;
padding: 0 2px;
}
}
}
>label {
flex: 1 1 auto;
min-width: 40px;
cursor: pointer;
outline: none;
line-height: $headerHeight;
padding: 0 4px;
font-weight: 400;
font-size: var(--font-smaller-size);
color: var(--color);
}
}*/
@include outborder();
>.drop-text {
flex: 1 1 auto;
@ -110,8 +35,9 @@ $listMaxHeight: 210px;
overflow: hidden;
text-overflow: ellipsis;
border: none;
outline: none;
white-space: nowrap;
@include outline();
}
>input.drop-text {
@ -143,11 +69,12 @@ $listMaxHeight: 210px;
}
&.disabled {
border-color: var(--disabled-bg-color);
border-color: var(--disabled-border-color);
background-color: var(--disabled-bg-color);
color: var(--disabled-color);
&:focus {
border-color: var(--disabled-bg-color);
border-color: var(--disabled-border-color);
// box-shadow: none;
}
@ -170,8 +97,6 @@ $listMaxHeight: 210px;
transition: transform 120ms ease, opacity 120ms ease, visibility 120ms ease;
width: calc(100% + 2px);
box-sizing: border-box;
/*border: 1px solid var(--border-color);
border-top-width: 0;*/
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
left: -1px;
@ -202,17 +127,10 @@ $listMaxHeight: 210px;
box-sizing: border-box;
width: 100%;
height: $searchInputHeight;
outline: none;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0 6px 0 22px;
color: var(--color);
transition: border-color .2s;
&:hover,
&:focus {
border-color: var(--focus-color);
}
@include outborder();
// &:focus {
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);

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

@ -1,3 +1,5 @@
@import "./func.scss";
@mixin check-box() {
.check-box-inner {
position: relative;
@ -6,12 +8,11 @@
width: 14px;
height: 14px;
background-color: #fff;
border: 1px solid var(--box-color);
user-select: none;
border-radius: 2px;
transition: all .2s;
cursor: pointer;
@include outborder();
>svg {
position: absolute;
top: 0;
@ -50,17 +51,18 @@
&:disabled {
&+.check-box-inner {
border-color: var(--disabled-box-color);
border-color: var(--disabled-border-color);
background-color: var(--disabled-bg-color);
cursor: default;
}
&:checked+.check-box-inner {
border-color: var(--disabled-box-color);
background-color: var(--disabled-box-color);
border-color: var(--disabled-border-color);
background-color: var(--disabled-border-color);
}
&~span {
color: var(--disabled-box-color);
color: var(--disabled-border-color);
cursor: default;
}
}

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

@ -15,4 +15,31 @@
background-color: rgba(168, 168, 168, 0.9);
border-radius: 4px;
}
}
@mixin outline() {
&:focus,
&:focus-visible {
outline: none;
}
}
@mixin outborder() {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
transition: border-color .12s ease;
@include outline();
&:focus,
&:hover {
border-color: var(--focus-border-color);
}
&:disabled {
border-color: var(--disabled-border-color);
color: var(--disabled-color);
background-color: var(--disabled-bg-color);
}
}

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

@ -1,4 +1,4 @@
@import './functions/func.scss';
@import "./functions/func.scss";
.grid {
position: relative;
@ -43,16 +43,11 @@
--spacing-cell: 6px 4px 6px 8px;
}
&:focus,
&:focus-visible {
outline: none;
}
@include outline();
&,
input[type="text"],
textarea,
.drop-wrapper>.drop-header>.drop-text,
.drop-wrapper>.drop-box>.drop-list {
textarea {
font-size: var(--font-size);
font-family: var(--font-family);
}
@ -238,10 +233,7 @@
width: 100%;
padding: 0;
&:focus,
&:focus-visible {
outline: none;
}
@include outline();
&:disabled {
color: var(--text-disabled-color);

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

@ -1,4 +1,4 @@
@import './functions/func.scss';
@import "./functions/func.scss";
$headerLineHeight: 24px;
$buttonHeight: 28px;
@ -75,6 +75,14 @@ $buttonHeight: 28px;
&:hover {
opacity: .8;
}
&:focus,
&:focus-visible {
outline: none;
opacity: .8;
background-color: rgb(0 0 0/10%);
border-radius: var(--corner-radius);
}
}
}
@ -118,7 +126,7 @@ $buttonHeight: 28px;
width: 40px;
height: 40px;
&+span {
+span {
padding-left: 16px;
}
}
@ -148,7 +156,7 @@ $buttonHeight: 28px;
font-weight: bold;
}
&+* {
+* {
flex: 1 1 auto;
margin-right: 10px;
box-sizing: border-box;
@ -156,30 +164,11 @@ $buttonHeight: 28px;
line-height: var(--line-height);
}
&+input[type="text"],
&+input[type="email"],
&+input[type="tel"],
&+textarea {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
+textarea {
text-indent: var(--text-indent);
transition: border-color .12s ease;
&:hover {
border-color: var(--focus-color);
}
&:focus,
&:focus-visible {
outline: none;
}
}
&+.drop-wrapper>.drop-header>.drop-text {
font-size: 12px;
}
&+.checkbox-wrapper {
+.checkbox-wrapper {
padding: 0;
}
}
@ -210,14 +199,12 @@ $buttonHeight: 28px;
background-color: var(--title-bg-color);
transition: opacity .12s ease;
&:focus,
&:hover {
opacity: .8;
}
&:focus,
&:focus-visible {
outline: none;
}
@include outline();
}
}

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

@ -1,8 +1,11 @@
@import "./functions/func.scss";
.tooltip-color {
background-color: #fff;
color: #323130;
border-color: rgba(204, 204, 204, .8);
outline: none;
@include outline();
}
.tooltip-wrapper {

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

@ -11,16 +11,16 @@
:root {
--color: #201f1e;
--red-color: red;
--bg-color: #fff;
--border-color: #b9b9b9;
--focus-border-color: #666;
--disabled-color: #aaa;
--disabled-bg-color: #e9e9e9;
--disabled-border-color: #d9d9d9;
--red-color: red;
--title-color: #fff;
--title-bg-color: rgb(68, 114, 196);
--border-color: #d9d9d9;
--focus-color: #666;
--disabled-bg-color: #e9e9e9;
--disabled-color: #aaa;
--box-color: #999898;
--disabled-box-color: #d9d9d9;
--hover-bg-color: #eee;
--link-color: #1890ff;
--primary-color: rgb(123, 28, 33);

57
lib/ui/dropdown.js
View File

@ -120,12 +120,54 @@ class Dropdown {
// header
const header = createElement('div', 'drop-header');
header.addEventListener('keypress', e => {
if (e.key === ' ' || e.key === 'Enter') {
header.dispatchEvent(new MouseEvent('click'));
}
});
header.addEventListener('keydown', e => {
const up = e.key === 'ArrowUp';
const down = e.key === 'ArrowDown';
if (up || down) {
const source = this.source;
const count = source.length;
const valuekey = this.#options.valuekey;
let index = source?.indexOf(this.#selected);
if (isNaN(index) || index < -1) {
index = -1;
} else if (index >= count) {
index = count - 1;
}
if (up) {
if (index > 0) {
index--;
} else {
index = 0;
}
} else if (down) {
if (index < 0) {
index = 0;
} else if (index < count) {
index++;
} else {
index = count - 1;
}
}
const target = source[index]?.[valuekey];
if (target != null) {
this.select(target);
}
} else if (e.key === 'Tab') {
this.#dropdown(false);
}
});
header.addEventListener('click', () => {
if (this.disabled) {
return;
}
const active = this.#expanded;
if (active && this.#label.hasFocus()) {
const label = this.#label;
if (active && label.ownerDocument.activeElement === label) {
return;
}
this.#dropdown(!active);
@ -230,6 +272,10 @@ class Dropdown {
}
this.#label.value = selected;
} else {
const expanded = this.#expanded;
if (expanded) {
this.#container.querySelectorAll('li[data-value].selected').forEach(li => li.classList.remove('selected'));
}
if (item == null) {
this.#selected = null;
this.#label.innerText = ' ';
@ -245,6 +291,13 @@ class Dropdown {
}
this.#label.innerText = text;
}
if (expanded) {
const val = selected.replace(/"/g, '\\"');
const li = this.#container.querySelector(`li[data-value="${val}"]`);
if (li != null) {
li.classList.add('selected');
}
}
}
this.#selected = item;
if (!silence && typeof this.onselected === 'function') {
@ -276,7 +329,7 @@ class Dropdown {
}
}
get #expanded() { return this.#container?.style?.visibility === 'visible' }
get #expanded() { return this.#container?.classList?.contains('active') }
#dropdown(flag = true) {
const options = this.#options;

50
lib/ui/popup.js
View File

@ -110,6 +110,8 @@ class Popup {
mask.classList.add('popup-transparent');
}
const container = createElement('div', 'popup-container');
let tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0));
container.tabIndex = tabIndex + 1;
const close = () => {
mask.classList.add('popup-active');
mask.style.opacity = 0;
@ -155,7 +157,13 @@ class Popup {
}
if (this.#option.collapsable === true) {
const collapse = createIcon('fa-regular', 'compress-alt');
collapse.tabIndex = tabIndex + 2;
collapse.classList.add('icon-expand');
collapse.addEventListener('keypress', e => {
if (e.key === ' ' || e.key === 'Enter') {
collapse.dispatchEvent(new MouseEvent('click'));
}
});
collapse.addEventListener('click', () => {
if (container.classList.contains('popup-collapse')) {
const bounds = this.#bounds;
@ -176,6 +184,12 @@ class Popup {
header.appendChild(collapse);
}
const cancel = createIcon('fa-regular', 'times');
cancel.tabIndex = tabIndex + 3;
cancel.addEventListener('keypress', e => {
if (e.key === ' ' || e.key === 'Enter') {
close();
}
});
cancel.addEventListener('click', () => close());
header.appendChild(cancel);
}),
@ -184,9 +198,15 @@ class Popup {
))
);
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 => {
const button = createElement('div', 'popup-button');
createElement('div', 'popup-footer', ...this.#option.buttons.map((b, i) => {
const button = createElement('button', 'popup-button');
if (b.tabindex > 0) {
button.tabIndex = b.tabindex;
} else {
button.tabIndex = tabIndex + i + 1;
}
button.innerText = b.text;
button.addEventListener('click', () => {
if (typeof b.trigger === 'function') {
@ -207,6 +227,19 @@ class Popup {
return button;
}))
);
const tabs = [...container.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0);
const tabMin = Math.min.apply(null, tabs);
const tabMax = Math.max.apply(null, tabs);
const last = container.querySelector(`[tabindex="${tabMax}"]`);
if (last != null) {
last.addEventListener('keydown', e => {
if (e.key === 'Tab') {
const first = container.querySelector(`[tabindex="${tabMin}"]`);
first?.focus();
e.preventDefault();
}
});
}
}
// resizable
if (this.#option.resizable === true) {
@ -264,7 +297,8 @@ class Popup {
}
return new Promise(resolve => {
setTimeout(() => {
mask.style.opacity = 1
mask.style.opacity = 1;
this.container.focus();
resolve(mask);
}, 0);
});
@ -396,7 +430,10 @@ export function showAlert(title, message, iconType = 'info', parent = document.b
{ text: r('ok', 'OK'), trigger: resolve }
]
});
popup.show(parent);
popup.show(parent).then(mask => {
const button = mask.querySelector('.popup-container .popup-footer .popup-button:last-child');
button?.focus();
});
});
}
@ -442,6 +479,9 @@ export function showConfirm(title, content, buttons, iconType = 'question', pare
{ text: r('no', 'No'), trigger: p => resolve({ key: 'no', popup: p }) }
]
});
popup.show(parent);
popup.show(parent).then(mask => {
const button = mask.querySelector('.popup-container .popup-footer .popup-button:last-child');
button?.focus();
});
});
}