复选框初始参数，结构为
interface CheckboxOptions {
+ className?: string;
+ enabled?: boolean;
+ name?: string;
+ tabIndex?: Number;
type?: string;
label?: string;
checked?: boolean;
@@ -29,6 +33,14 @@
复选框默认是否可用
+ name?: string
+
+ 复选框或单选框的 name
+
+ tabIndex?: Number
+
+ 复选框的 tabindex
+
type?: string
复选框图标的样式，可选值目前有 fa-regular、fa-light、fa-solid
@@ -65,6 +77,12 @@
复选框改变时触发的事件
+ createRadiobox
+ function createRadiobox(opts?: CheckboxOptions): HTMLElement
+ opts?: CheckboxOptions
+
+ 单选框初始参数，结构如上
+
resolveCheckbox
function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement
container?: HTMLElement
diff --git a/lib/ui/checkbox.js b/lib/ui/checkbox.js
index 8faf596..0ceafa9 100644
--- a/lib/ui/checkbox.js
+++ b/lib/ui/checkbox.js
@@ -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');
}
diff --git a/lib/ui/css/checkbox.scss b/lib/ui/css/checkbox.scss
index 0081a0b..7b106f9 100644
--- a/lib/ui/css/checkbox.scss
+++ b/lib/ui/css/checkbox.scss
@@ -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);
diff --git a/lib/ui/css/common.scss b/lib/ui/css/common.scss
index 4fda95e..d876ece 100644
--- a/lib/ui/css/common.scss
+++ b/lib/ui/css/common.scss
@@ -1,4 +1,4 @@
-@import "../css/functions/func.scss";
+@import "./functions/func.scss";
.ui-text,
.ui-input[type] {
diff --git a/lib/ui/css/dropdown.scss b/lib/ui/css/dropdown.scss
index 93a7e4c..774831c 100644
--- a/lib/ui/css/dropdown.scss
+++ b/lib/ui/css/dropdown.scss
@@ -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;
}
diff --git a/lib/ui/css/functions/checkbox.scss b/lib/ui/css/functions/checkbox.scss
deleted file mode 100644
index 216ff54..0000000
--- a/lib/ui/css/functions/checkbox.scss
+++ /dev/null
@@ -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;
- }
- }
- }
-}
\ No newline at end of file
diff --git a/lib/ui/css/functions/func.scss b/lib/ui/css/functions/func.scss
index 4d8b6ae..f945ed2 100644
--- a/lib/ui/css/functions/func.scss
+++ b/lib/ui/css/functions/func.scss
@@ -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;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/lib/ui/css/grid.scss b/lib/ui/css/grid.scss
index c1fdd88..6076877 100644
--- a/lib/ui/css/grid.scss
+++ b/lib/ui/css/grid.scss
@@ -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;
+ }
}
\ No newline at end of file
diff --git a/lib/ui/css/popup.scss b/lib/ui/css/popup.scss
index 0f8db69..5670209 100644
--- a/lib/ui/css/popup.scss
+++ b/lib/ui/css/popup.scss
@@ -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;
}
}
diff --git a/lib/ui/css/tooltip.scss b/lib/ui/css/tooltip.scss
index b19b41d..f1a8ba8 100644
--- a/lib/ui/css/tooltip.scss
+++ b/lib/ui/css/tooltip.scss
@@ -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;
diff --git a/lib/ui/css/variables/definition.scss b/lib/ui/css/variables/definition.scss
index cf0fcb4..78612ee 100644
--- a/lib/ui/css/variables/definition.scss
+++ b/lib/ui/css/variables/definition.scss
@@ -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%);
+ }
+}
\ No newline at end of file
diff --git a/lib/ui/dropdown.html b/lib/ui/dropdown.html
index 219f570..151eec5 100644
--- a/lib/ui/dropdown.html
+++ b/lib/ui/dropdown.html
@@ -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;
diff --git a/lib/ui/dropdown.js b/lib/ui/dropdown.js
index 9a3b1ad..c55d7a1 100644
--- a/lib/ui/dropdown.js
+++ b/lib/ui/dropdown.js
@@ -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;
diff --git a/lib/ui/grid/column.js b/lib/ui/grid/column.js
index e9f5ac1..9a38fea 100644
--- a/lib/ui/grid/column.js
+++ b/lib/ui/grid/column.js
@@ -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' : '';
}
diff --git a/lib/ui/grid/grid.js b/lib/ui/grid/grid.js
index 45a15ee..dac4046 100644
--- a/lib/ui/grid/grid.js
+++ b/lib/ui/grid/grid.js
@@ -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;
diff --git a/lib/ui/popup.html b/lib/ui/popup.html
index ccb0645..c1cce38 100644
--- a/lib/ui/popup.html
+++ b/lib/ui/popup.html
@@ -42,12 +42,7 @@
});