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

add dropdown component

Browse Source
This commit is contained in:
Tsanie Lily 2023-03-31 17:35:36 +08:00
parent b9447997fe
commit 41b1bbd7d6
20 changed files with 575 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
css/checkbox.scss
View File

@ -34,19 +34,19 @@
.check-box-inner {
flex: 0 0 auto;
}
>span {
flex: 1 1 auto;
font-weight: 400;
font-size: $mediumSize;
padding-left: 8px;
padding-right: 6px;
align-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
color: #201f1e;
&+* {
flex: 1 1 auto;
font-weight: 400;
font-size: $mediumSize;
padding-left: 8px;
padding-right: 6px;
align-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
color: $foreColor;
}
}
}

43
css/dropdown.scss
View File

@ -14,6 +14,9 @@ $searchIconSize: 13px;
$listMaxHeight: 210px;
.dropdown-wrapper {
display: inline-block;
border: none;
@include border-radius(unset);
@include user-select(none);
position: relative;
@ -35,7 +38,7 @@ $listMaxHeight: 210px;
outline: none;
}
>.dropdown-select-container {
/*>.dropdown-select-container {
flex: 1 1 auto;
overflow-x: auto;
white-space: nowrap;
@ -98,7 +101,7 @@ $listMaxHeight: 210px;
font-size: .8125rem;
color: $foreColor;
}
}
}*/
>.dropdown-text {
flex: 1 1 auto;
@ -132,11 +135,11 @@ $listMaxHeight: 210px;
}
&.disabled {
border-color: $disabledColor;
color: $disabledColor;
border-color: $disabledBgColor;
color: $disabledForeColor;
&:focus {
border-color: $disabledColor;
border-color: $disabledBgColor;
// @include box-shadow(none);
}
@ -217,6 +220,7 @@ $listMaxHeight: 210px;
>.dropdown-list {
margin: 0;
padding: 0;
padding-bottom: 6px;
list-style: none;
max-height: $listMaxHeight;
overflow-y: auto;
@ -226,8 +230,8 @@ $listMaxHeight: 210px;
}
>li {
display: flex;
align-items: center;
// display: flex;
// align-items: center;
line-height: $dropItemHeight;
height: $dropItemHeight;
padding: 0 10px;
@ -241,29 +245,8 @@ $listMaxHeight: 210px;
background-color: $hoverColor;
}
@include check-box();
>label {
display: flex;
align-items: center;
}
.check-box-inner {
flex: 0 0 auto;
}
.check-box-inner+* {
flex: 1 1 auto;
font-weight: 400;
font-size: .8125rem;
padding-left: 8px;
padding-right: 6px;
align-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
color: $foreColor;
>.checkbox-wrapper {
height: $dropItemHeight;
}
}
}

2
css/tooltip.scss
View File

@ -46,7 +46,7 @@
font-size: $smallSize;
line-height: 1rem;
white-space: normal;
overflow: auto;
overflow: hidden;
margin: 8px;
height: calc(100% - 16px);
@include user-select(none);

2
css/ui.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
css/ui.scss
View File

@ -1,2 +1,3 @@
@import './checkbox.scss';
@import './dropdown.scss';
@import './tooltip.scss';

3
css/variables/definition.scss
View File

@ -1,7 +1,8 @@
// color
$borderColor: #d9d9d9;
$focusColor: #b9b9b9;
$disabledColor: #e9e9e9;
$disabledBgColor: #e9e9e9;
$disabledForeColor: #aaa;
$hoverColor: #eee;
$bgColor: #fff;
$foreColor: #201f1e;

5
lib/ui.js
View File

@ -1,6 +1,7 @@
import { createIcon, resolveIcon } from "./ui/icon";
import { createCheckbox, resolveCheckbox } from "./ui/checkbox";
import { setTooltip, resolveTooltip } from "./ui/tooltip";
import Dropdown from "./ui/dropdown";
export {
// icon
@ -11,5 +12,7 @@ export {
resolveCheckbox,
// tooltip
setTooltip,
resolveTooltip
resolveTooltip,
// dropdown
Dropdown
}

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

@ -1,11 +1,12 @@
interface CheckboxOptions {
type?: string;
label?: string;
label?: string | HTMLElement;
checked?: boolean;
isImage?: boolean;
imageHeight?: Number;
checkedNode?: HTMLElement;
uncheckedNode?: HTMLElement;
customerAttributes?: { [key: string]: string };
onchange?: (this: HTMLInputElement, ev: Event) => any;
}

13
lib/ui/checkbox.html
View File

@ -18,6 +18,7 @@
imageHeight?: Number;
checkedNode?: HTMLElement;
uncheckedNode?: HTMLElement;
customerAttributes?: { [key: string]: string };
onchange?: (this: HTMLInputElement, ev: Event) => any;
}</pre>
</p>
@ -25,9 +26,9 @@
<p>
复选框图标的样式，可选值目前有 <code>fa-regular</code>、<code>fa-light</code>、<code>fa-solid</code>
</p>
<h3>label?: string</h3>
<h3>label?: string | HTMLElement</h3>
<p>
复选框的标签文本
复选框的标签文本，或者想要呈现的元素
</p>
<h3>checked?: boolean</h3>
<p>
@ -49,6 +50,14 @@
<p>
为图片复选框时的未选中时显示的元素
</p>
<h3>customerAttributes?: { [key: string]: string }</h3>
<p>
自定义属性，例如
<pre>{
'data-id': 'xxxxxx',
'disabled': ''
}</pre>
</p>
<h3>onchange?: (this: HTMLInputElement, ev: Event) => any</h3>
<p>
复选框改变时触发的事件

13
lib/ui/checkbox.js
View File

@ -5,7 +5,9 @@ function fillCheckbox(container, type, label) {
layer.className = 'check-box-inner';
layer.appendChild(createIcon(type, 'check'));
container.appendChild(layer);
if (label != null && label.length > 0) {
if (label instanceof HTMLElement) {
container.appendChild(label);
} else if (label != null && label.length > 0) {
const span = document.createElement('span');
span.innerText = label;
container.appendChild(span);
@ -21,6 +23,11 @@ function createCheckbox(opts) {
if (opts.checked === true) {
input.checked = true;
}
if (opts.customerAttributes != null) {
for (let entry of Object.entries(opts.customerAttributes)) {
input.setAttribute(entry[0], entry[1]);
}
}
if (typeof opts.onchange === 'function') {
input.addEventListener('change', opts.onchange);
}
@ -50,9 +57,7 @@ function createCheckbox(opts) {
}
function resolveCheckbox(container, legacy) {
if (container == null) {
container = document.body;
}
container ??= document.body;
if (legacy) {
const checks = container.querySelectorAll('input[type="checkbox"]');
for (let chk of checks) {

32
lib/ui/dropdown.d.ts vendored Normal file
View File

@ -0,0 +1,32 @@
interface DropdownOptions {
textkey?: string;
valuekey?: string;
htmlkey?: string;
maxlength?: Number;
multiselect?: boolean;
selected?: any;
selectedlist?: any[];
disabled?: boolean;
input?: boolean;
search?: boolean;
searchkeys?: string[];
searchplaceholder?: string;
tabindex?: Number;
slidefixed?: boolean;
parent?: HTMLElement
}
interface Dropdown {
create(): HTMLElement;
get disabled(): boolean;
set disabled(flag: boolean);
readonly multiselect: boolean;
readonly selected: any;
}
declare var Dropdown: {
prototype: Dropdown;
new(options: DropdownOptions): Dropdown;
};
export default Dropdown;

466
lib/ui/dropdown.js Normal file
View File

@ -0,0 +1,466 @@
// import { r, global, contains, isPositive, nullOrEmpty } from "../utility";
import { r } from "../utility/lgres";
import { contains, nullOrEmpty } from "../utility/strings";
import { global, isPositive } from "../utility";
import { createCheckbox } from "./checkbox";
import { createIcon } from "./icon"
const SymbolDropdown = Symbol.for('ui-dropdown');
const DropdownTitleHeight = 26;
const DropdownItemHeight = 30;
let dropdownGlobal = global[SymbolDropdown];
if (dropdownGlobal == null) {
// init
dropdownGlobal = {};
Object.defineProperty(dropdownGlobal, 'clear', {
writable: false,
configurable: false,
enumerable: false,
value: function () {
const panel = document.querySelector('.dropdown-wrapper .dropdown-panel.active');
if (panel == null) {
return;
}
panel.classList.remove('active');
const dropId = panel.parentElement.dataset.dropId;
if (dropId == null) {
return;
}
const dropdown = this[dropId];
if (dropdown != null && dropdown.multiselect && typeof dropdown.oncollapsed === 'function') {
dropdown.oncollapsed();
}
}
})
global[SymbolDropdown] = dropdownGlobal;
document.addEventListener('mousedown', e => {
let parent = e.target;
while (parent != null) {
if (parent.classList.contains('dropdown-panel')) {
e.stopPropagation();
return;
}
parent = parent.parentElement;
}
dropdownGlobal.clear();
});
}
class Dropdown {
#options;
#wrapper;
#container;
#label;
#allChecked;
#source;
#lastSelected;
#selected;
#selectedList;
sourceFilter;
onselectedlist;
onselected;
onexpanded;
constructor(options) {
options ??= {};
options.searchplaceholder ??= r('searchHolder', 'Search...');
options.textkey ??= 'text';
options.valuekey ??= 'value';
options.htmlkey ??= 'html';
options.maxlength ??= 500;
this.#options = options;
}
create() {
const options = this.#options;
// wrapper
const wrapper = document.createElement('div');
const dropId = String(Math.random()).substring(2);
wrapper.dataset.dropId = dropId;
wrapper.className = 'dropdown-wrapper';
dropdownGlobal[dropId] = this;
this.#wrapper = wrapper;
// header
const header = document.createElement('div');
header.className = 'dropdown-header';
header.addEventListener('click', () => {
if (this.disabled) {
return;
}
const active = this.#expanded;
if (active && this.#label.hasFocus()) {
return;
}
this.#dropdown(!active);
if (!active && typeof this.onexpanded === 'function') {
setTimeout(() => this.onexpanded(), 120);
}
});
// label or input
let label;
let searchkeys = options.searchkeys;
if (!Array.isArray(searchkeys) || searchkeys.length === 0) {
searchkeys = [options.textkey];
}
if (options.input) {
label = document.createElement('input');
label.className = 'dropdown-text';
label.setAttribute('type', 'text');
isPositive(options.maxlength) && label.setAttribute('maxlength', options.maxlength);
isPositive(options.tabindex) && label.setAttribute('tabindex', options.tabindex);
label.addEventListener('input', e => {
const key = e.target.value.toLowerCase();
let source = this.source;
if (key.length > 0) {
source = source.filter(it => {
for (let k of searchkeys) {
if (contains(it[k].toLowerCase(), key)) {
return true;
}
}
return false;
});
}
this.#filllist(source);
this.#container.classList.add('active');
});
label.addEventListener('blur', e => this.select(e.target.value));
label.addEventListener('mousedown', e => this.#expanded && e.stopPropagation());
} else {
isPositive(options.tabindex) && header.setAttribute('tabindex', options.tabindex);
label = document.createElement('label');
label.className = 'dropdown-text';
}
this.#label = label;
if (options.multiselect) {
if (Array.isArray(options.selectedlist)) {
this.selectlist(options.selectedlist, true);
} else {
this.#allChecked = true;
label.innerText = r('allItem', '( All )');
}
} else if (options.selected != null) {
this.select(options.selected, true);
}
header.appendChild(label);
const caret = document.createElement('label');
caret.className = 'dropdown-caret';
header.appendChild(caret);
wrapper.appendChild(header);
this.disabled = options.disabled || false;
return wrapper;
}
get multiselect() { return this.#options.multiselect }
get disabled() { return this.#wrapper == null || this.#wrapper.querySelector('.dropdown-header.disabled') != null }
set disabled(flag) {
if (this.#wrapper == null) {
return;
}
if (flag) {
this.#wrapper.querySelector('.dropdown-header').classList.add('disabled');
} else {
this.#wrapper.querySelector('.dropdown-header').classList.remove('disabled');
}
}
get source() {
let source = this.#source;
if (source == null || !Array.isArray(source)) {
if (typeof this.sourceFilter === 'function') {
source = this.sourceFilter();
}
if (!Array.isArray(source)) {
source = [];
}
this.#source = source;
}
return source;
}
set source(list) {
if (!Array.isArray(list)) {
return;
}
this.#source = list;
if (this.#expanded) {
setTimeout(() => this.#dropdown(), 120);
}
}
get selected() { return this.#selected }
get selectedlist() { return this.#selectedList || [] }
select(selected, init) {
if (this.#lastSelected === selected) {
return false;
}
this.#lastSelected = selected;
const valuekey = this.#options.valuekey;
const textkey = this.#options.textkey;
let item = this.source.find(it => it[valuekey] === selected);
if (this.#options.input) {
if (item == null) {
item = {};
item[valuekey] = selected;
}
this.#label.value = selected;
} else {
if (item == null) {
this.#selected = null;
this.#label.innerText = ' ';
return false;
}
let text = item[textkey];
if (nullOrEmpty(text)) {
text = ' ';
}
this.#label.innerText = text;
}
this.#selected = item;
if (!init && typeof this.onselected === 'function') {
this.onselected(item);
}
}
selectlist(selectedlist, init) {
const source = this.source;
const valuekey = this.#options.valuekey;
const textkey = this.#options.textkey;
const itemlist = selectedlist.map(v => {
let item = source.find(it => it[valuekey] === v);
if (item == null) {
item = {};
item[valuekey] = v;
item[textkey] = v;
}
return item;
});
const none = r('noneItem', '( None )');
if (itemlist.length === 0) {
this.#selectedList = null;
this.#label.innerText = none;
return false;
}
const text = itemlist.map(it => it[textkey]).join(', ');
if (nullOrEmpty(text)) {
text = none;
}
this.#selectedList = itemlist;
this.#label.innerText = text;
if (!init && typeof this.onselectedlist === 'function') {
this.onselectedlist(itemlist);
}
}
get #expanded() { return this.#container != null && this.#container.style.visibility === 'visible' }
#dropdown(flag) {
flag ??= true;
const options = this.#options;
const textkey = options.textkey;
let panel = this.#container;
if (panel == null) {
panel = document.createElement('div');
panel.className = 'dropdown-panel';
// search box
if (options.search) {
let searchkeys = options.searchkeys;
if (!Array.isArray(searchkeys) || searchkeys.length === 0) {
searchkeys = [textkey];
}
const search = document.createElement('div');
search.className = 'dropdown-search';
const input = document.createElement('input');
input.setAttribute('type', 'text');
isPositive(options.tabindex) && input.setAttribute('tabindex', options.tabindex);
!nullOrEmpty(options.searchplaceholder) && input.setAttribute('placeholder', options.searchplaceholder);
input.addEventListener('input', e => {
const key = e.target.value.toLowerCase();
let source = this.source;
if (key.length > 0) {
source = source.filter(it => {
for (let k of searchkeys) {
if (contains(it[k].toLowerCase(), key)) {
return true;
}
}
return false;
});
}
this.#filllist(source);
})
search.appendChild(input);
search.appendChild(createIcon('fa-light', 'search'));
panel.appendChild(search);
}
// list
const list = document.createElement('ul');
list.className = 'dropdown-list';
if (!this.multiselect) {
list.addEventListener('click', e => {
let li = e.target;
while (li.tagName !== 'LI') {
li = li.parentElement;
if (li == null) {
return;
}
}
const value = li.dataset.value;
if (this.select(value) !== false) {
dropdownGlobal.clear();
}
});
}
panel.appendChild(list);
this.#container = panel;
this.#wrapper.appendChild(panel);
this.#filllist(this.source);
}
if (flag) {
if (!options.slidefixed) {
let parent = options.parent ?? document.body;
const height = panel.offsetHeight;
if (this.#wrapper.offsetTop - parent.offsetTop + DropdownTitleHeight + height >= parent.offsetHeight) {
panel.style.marginTop = -height - DropdownTitleHeight - 2;
panel.classList.add('slide-up');
} else {
panel.style.marginTop = null;
panel.classList.remove('slide-up');
}
}
panel.classList.add('active');
// search input
// const inputSearch = panel.querySelector('.dropdown-search > input');
// if (!nullOrEmpty(inputSearch.value)) {
// const event = new InputEvent('type');
// inputSearch.dispatchEvent(event);
// }
} else {
panel.classList.remove('active');
}
}
#filllist(source) {
const list = this.#container.querySelector('.dropdown-list');
list.replaceChildren();
const multiselect = this.multiselect;
const allchecked = this.#allChecked;
if (multiselect) {
const liall = document.createElement('li');
const boxall = createCheckbox({
label: r('allItem', '( All )'),
checked: allchecked,
customerAttributes: { 'isall': '1' },
onchange: e => this.#triggerselect(e.target)
});
liall.appendChild(boxall);
list.appendChild(liall);
}
// TODO: virtual mode
const valuekey = this.#options.valuekey;
const textkey = this.#options.textkey;
const htmlkey = this.#options.htmlkey;
const selected = this.selected;
const selectedlist = this.selectedlist;
let scrolled;
source.slice(0, 200).forEach((item, i) => {
const val = item[valuekey];
const li = document.createElement('li');
li.dataset.value = val;
li.setAttribute('title', item[textkey]);
let label;
const html = item[htmlkey];
if (html instanceof HTMLElement) {
label = html;
}
if (multiselect) {
const selected = selectedlist.some(s => s[valuekey] === val);
if (label == null) {
label = document.createElement('span');
label.innerText = item[textkey];
}
const box = createCheckbox({
label,
checked: allchecked || selected,
customerAttributes: {
'class': 'dataitem',
'data-value': val
},
onchange: e => this.#triggerselect(e.target)
});
li.appendChild(box);
} else {
if (label == null) {
li.innerText = item[textkey];
} else {
li.appendChild(label);
}
if (selected != null && selected[valuekey] === val) {
scrolled = DropdownItemHeight * i;
li.classList.add('selected');
}
}
list.appendChild(li);
});
if (scrolled != null) {
setTimeout(() => list.scrollTop = scrolled, 10);
}
}
#triggerselect(checkbox) {
let list;
const valuekey = this.#options.valuekey;
const textkey = this.#options.textkey;
if (checkbox.getAttribute('isall') === '1') {
const allchecked = this.#allChecked = checkbox.checked;
const boxes = this.#container.querySelectorAll('input.dataitem');
boxes.forEach(box => box.checked = allchecked);
list = [];
} else if (checkbox.checked) {
if (this.#container.querySelectorAll('input.dataitem:not(:checked)').length === 0) {
this.#allChecked = true;
this.#container.querySelector('input[isall="1"]').checked = true;
list = [];
} else {
const source = this.source;
list = [...this.#container.querySelectorAll('input.dataitem:checked')]
.map(c => source.find(it => it[valuekey] === c.dataset.value))
.filter(it => it != null);
}
} else {
const val = checkbox.dataset.value;
if (this.#allChecked) {
this.#allChecked = false;
this.#container.querySelector('input[isall="1"]').checked = false;
list = this.source.filter(it => it[valuekey] !== val);
} else {
list = this.selectedlist.filter(it => it[valuekey] !== val);
}
}
let text = this.#allChecked ? r('allItem', '( All )') : list.map(it => it[textkey]).join(', ');
if (nullOrEmpty(text)) {
text = r('noneItem', '( None )');
}
this.#selectedList = list;
this.#label.innerText = text;
if (typeof this.onselectedlist === 'function') {
this.onselectedlist(itemlist);
}
}
}
export default Dropdown;

4
lib/ui/tooltip.js
View File

@ -49,9 +49,7 @@ function setTooltip(container, content) {
}
function resolveTooltip(container) {
if (container == null) {
container = document.body;
}
container ??= document.body;
const tips = container.querySelectorAll('[title]');
for (let tip of tips) {
const title = tip.getAttribute('title');

11
lib/utility.js
View File

@ -3,6 +3,12 @@ import { init, r, lang } from "./utility/lgres";
import { get, post, upload } from "./utility/request";
import { nullOrEmpty, contains, endsWith, padStart } from "./utility/strings";
let g = typeof globalThis !== 'undefined' ? globalThis : self;
function isPositive(n) {
return !isNaN(n) && n > 0;
}
export {
// cookie
getCookie,
@ -20,5 +26,8 @@ export {
nullOrEmpty,
contains,
endsWith,
padStart
padStart,
// variables
g as global,
isPositive
}

2
lib/utility/lgres.html
View File

@ -65,7 +65,7 @@
lgres.init(document.body, {
template: '/res.json',
callback: (res) => document.title = res.r('title', 'Default Title')
callback: res => document.title = res.r('title', 'Default Title')
}).then(res => {
document.querySelector('#header').innerText = res.r('header', 'My Header');
const msg = lgres.lang.unknownError;

10
lib/utility/lgres.js
View File

@ -66,6 +66,7 @@ async function refreshLgres(template, lgres) {
Object.defineProperty(lgres, 'r', {
writable: false,
configurable: false,
enumerable: false,
value: function (key, defaultValue) {
return getLanguage(this, key, defaultValue);
}
@ -76,16 +77,11 @@ async function refreshLgres(template, lgres) {
function getLanguage(lgres, key, defaultValue) {
let value = lgres[key];
if (value == null) {
value = defaultValue;
}
return value;
return value ?? defaultValue;
}
function applyLanguage(dom, result) {
if (dom == null) {
dom = document.body;
}
dom ??= document.body;
for (let text of dom.querySelectorAll('[data-lgid]')) {
const key = text.getAttribute('data-lgid');
if (text.tagName === 'INPUT') {

2
lib/utility/request.html
View File

@ -103,7 +103,7 @@ request.post('api/query', { id: 101 })
.then(result => console.log(result.data));
request.upload('api/upload', data, {
progress: (ev) => {
progress: ev => {
console.log(`loaded: ${ev.loaded}, total: ${ev.total}`);
}
})

5
lib/utility/strings.js
View File

@ -26,10 +26,7 @@ function padStart(s, num, char) {
if (nullOrEmpty(s) || isNaN(num) || num <= s.length) {
return s;
}
if (char == null) {
char = ' ';
}
return char.repeat(num - s.length);
return (char ?? ' ').repeat(num - s.length);
}
export {

4
main.js
View File

@ -25,7 +25,7 @@ function navigate(page) {
});
}
document.querySelector('#directory').addEventListener('click', (ev) => {
document.querySelector('#directory').addEventListener('click', ev => {
const page = ev.target.getAttribute('data-page');
if (typeof page === 'string') {
location.hash = page;
@ -42,7 +42,7 @@ if (page.length > 1) {
/*
init(null, {
template: '/res.json',
callback: (result) => console.log(result)
callback: result => console.log(result)
}).then(() => {
// document.querySelector('#create-icon').appendChild(createIcon('fa-solid', 'user-edit'))
resolveIcon(document.querySelector('#create-icon'))

2
vite.build.js
View File

@ -11,7 +11,7 @@ const libraries = [
}
]
libraries.forEach(async (lib) => {
libraries.forEach(async lib => {
await build({
build: {
lib: {