add: ui-switch style

add: virtual mode in Dropdown
2024-05-27 17:06:00 +08:00 · 2024-05-27 17:06:00 +08:00 · ea7f4f538a
commit ea7f4f538a
parent 190e43c814
7 changed files with 277 additions and 139 deletions
--- a/README.md
+++ b/README.md
@ -2,6 +2,11 @@

 UI Mordern Gridview Library

+## 1.0.4
+* 调整: `Dropdown` 组件支持虚模式
+* 新增: `ui-switch` 样式（iOS 切换组件）
+* 新增: `Dropdown` 组件增加 `ignoreAll` 参数
+
 ## 1.0.3
 * 调整: [showSortPanel(callback?: Function, layout?: boolean)](Grid.html#showSortPanel) 现支持输入搜索列，已添加的列不会重复显示在下拉数据源中，增加回调函数与 layout 更新复选框。
 * 新增: [onRowChanged(action: "update" | "add" | "remove", items: GridRowItem[], indexes: number | number[])](Grid.html#onRowChanged) - 行发生变化时触发的事件
--- a/lib/ui/css/checkbox.scss
+++ b/lib/ui/css/checkbox.scss
@ -48,4 +48,62 @@
            color: var(--color);
        }
    }
+}
+
+.ui-switch {
+    position: relative;
+    line-height: 1rem;
+    user-select: none;
+    cursor: pointer;
+
+    >span:first-of-type {
+        display: inline-flex;
+        align-items: center;
+
+        &::before {
+            content: '';
+            width: 30px;
+            min-width: 30px;
+            max-width: 30px;
+            height: 16px;
+            margin-right: 4px;
+            background-color: var(--switch-bg-color);
+            border-radius: 8px;
+            transition: background-color .08s ease;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            left: 1px;
+            width: 14px;
+            height: 14px;
+            background-color: white;
+            border-radius: 7px;
+            box-shadow: 1px 1px 8px rgb(0 0 0 / 20%);
+            transition: left .08s ease;
+        }
+    }
+
+    >input[type="checkbox"] {
+        display: none;
+
+        &:checked+span:first-of-type {
+
+            &::before {
+                background-color: var(--switch-active-bg-color);
+            }
+
+            &::after {
+                left: 15px;
+            }
+        }
+
+        &:disabled+span:first-of-type {
+
+            &::before {
+                opacity: .5;
+            }
+        }
+    }
 }
--- a/lib/ui/css/dropdown.scss
+++ b/lib/ui/css/dropdown.scss
@ -152,21 +152,25 @@ $listMaxHeight: 210px;
    }

    >.ui-drop-list {
-        margin: 0;
-        padding: 0;
-        list-style: none;
        max-height: $listMaxHeight;
        overflow-y: auto;
+        position: relative;
        font-size: var(--font-size);
        @include scrollbar();

-        &.filtered>li:first-child {
+        &.filtered>.drop-content>.li:first-child {
            background-color: var(--hover-bg-color);
        }

-        >li {
+        >.drop-content {
+            position: absolute;
+            width: 100%;
+        }
+
+        li {
            // display: flex;
            // align-items: center;
+            list-style: none;
            line-height: $dropItemHeight;
            height: $dropItemHeight;
            padding: 0 10px;
@ -186,4 +190,4 @@ $listMaxHeight: 210px;
            }
        }
    }
-}
+}
--- a/lib/ui/css/variables/definition.scss
+++ b/lib/ui/css/variables/definition.scss
@ -21,6 +21,8 @@
    --disabled-color: #aaa;
    --disabled-bg-color: #e9e9e9;
    --disabled-border-color: #d9d9d9;
+    --switch-bg-color: #eae9eb;
+    --switch-active-bg-color: #33c559;

    --red-color: red;
    --title-color: #fff;
--- a/lib/ui/dropdown.js
+++ b/lib/ui/dropdown.js
@ -1,7 +1,7 @@
 import './css/dropdown.scss';
 import { r } from "../utility/lgres";
 import { contains, nullOrEmpty } from "../utility/strings";
-import { global, isPositive } from "../utility";
+import { global, isPositive, throttle } from "../utility";
 import { createElement } from "../functions";
 import { createCheckbox } from "./checkbox";
 import { createIcon } from "./icon"
@ -137,6 +137,9 @@ export class Dropdown {
        // wrapper
        const wrapper = createElement('div', 'ui-drop-wrapper');
        const dropId = String(Math.random()).substring(2);
+        if (options.wrapper instanceof HTMLElement) {
+            options.wrapper.dataset.dropId = dropId;
+        }
        wrapper.dataset.dropId = dropId;
        dropdownGlobal[dropId] = this;
        this._var.wrapper = wrapper;
@ -241,6 +244,8 @@ export class Dropdown {

    get multiSelect() { return this._var.options.multiSelect }

+    get ignoreAll() { return this._var.options.ignoreAll }
+
    get disabled() { return this._var.wrapper == null || this._var.wrapper.querySelector('.ui-drop-header.disabled') != null }

    set disabled(flag) {
@ -363,7 +368,7 @@ export class Dropdown {
        });
        if (itemlist.length === 0) {
            this._var.selectedList = null;
-            this._var.label.innerText = none;
+            this._var.label.innerText = r('none', '( None )');
            return false;
        }
        selectItems(this._var.label, itemlist, htmlkey, textkey);
@ -396,7 +401,8 @@ export class Dropdown {
                panel.appendChild(search);
            }
            // list
-            const list = createElement('ul', 'ui-drop-list');
+            const list = createElement('div', 'ui-drop-list');
+            list.addEventListener('scroll', e => throttle(this._onlistscroll, 10, this, list, e.target.scrollTop), { passive: true });
            if (!this.multiSelect) {
                list.addEventListener('click', e => {
                    let li = e.target;
@ -468,36 +474,99 @@ export class Dropdown {
                }
            }
            panel.classList.add('active');
+            this._var.dropTop = 0;
+            panel.querySelector('.ui-drop-list').dispatchEvent(new Event('scroll'));
        } else {
            panel.classList.remove('active');
        }
    }

+    _onlistscroll(list, top) {
+        const offset = (this.multiSelect && !this.ignoreAll) ? DropdownItemHeight : 0;
+        top -= (top % (DropdownItemHeight * 2)) + offset;
+        if (top < 0) {
+            top = 0;
+        } else {
+            let bottomTop = this._var.dropHeight - (20 * DropdownItemHeight);
+            if (bottomTop < 0) {
+                bottomTop = 0;
+            }
+            if (top > bottomTop) {
+                top = bottomTop;
+            }
+        }
+        if (this._var.dropTop !== top) {
+            this._var.dropTop = top;
+            const startIndex = top / DropdownItemHeight;
+            let array = this._var.currentSource;
+            if (startIndex + 20 < array.length) {
+                array = array.slice(startIndex, startIndex + 20);
+            } else {
+                array = array.slice(-20);
+            }
+            const content = list.querySelector('.drop-content');
+            content.replaceChildren();
+            this._dofilllist(content, array);
+            content.style.top = `${top + offset}px`;
+        }
+    }
+
    _filllist(source) {
        const list = this._var.container.querySelector('.ui-drop-list');
        list.replaceChildren();
-        const multiselect = this.multiSelect;
-        const allchecked = this._var.allChecked;
-        if (multiselect) {
+        const height = source.length * DropdownItemHeight;
+        this._var.dropHeight = height;
+        this._var.currentSource = source;
+        const holder = createElement('div', 'drop-holder');
+        holder.style.height = `${height}px`;
+        const content = createElement('div', 'drop-content');
+        if (this.multiSelect && !this.ignoreAll) {
            list.appendChild(
                createElement('li', null,
                    createCheckbox({
                        label: r('allItem', '( All )'),
-                        checked: allchecked,
+                        checked: this._var.allChecked,
                        customAttributes: { 'isall': '1' },
                        onchange: e => this._triggerselect(e.target)
                    })
                )
            );
+            content.style.top = `${DropdownItemHeight}px`;
+        } else {
+            content.style.top = '0px';
        }
-        // TODO: virtual mode
+        const multiselect = this.multiSelect;
+        const valuekey = this._var.options.valueKey;
+        const allchecked = this._var.allChecked;
+        const selectedlist = this.selectedList;
+        source.forEach((item, i) => {
+            let val = item[valuekey];
+            if (typeof val !== 'string') {
+                val = String(val);
+            }
+            if (multiselect) {
+                const selected = selectedlist.some(s => String(s[valuekey]) === val);
+                item.__checked = allchecked || selected;
+            }
+        });
+        if (source.length > 20) {
+            source = source.slice(0, 20);
+        }
+        const scrolled = this._dofilllist(content, source);
+        list.append(holder, content);
+        if (scrolled != null) {
+            setTimeout(() => list.scrollTop = scrolled, 10);
+        }
+    }
+
+    _dofilllist(content, array) {
+        const multiselect = this.multiSelect;
        const valuekey = this._var.options.valueKey;
        const textkey = this._var.options.textKey;
        const htmlkey = this._var.options.htmlKey;
        const selected = this.selected;
-        const selectedlist = this.selectedList;
        let scrolled;
-        source.slice(0, 200).forEach((item, i) => {
+        array.forEach((item, i) => {
            let val = item[valuekey];
            if (typeof val !== 'string') {
                val = String(val);
@ -514,19 +583,18 @@ export class Dropdown {
                label.innerHTML = html;
            }
            if (multiselect) {
-                const selected = selectedlist.some(s => String(s[valuekey]) === val);
                if (label == null) {
                    label = createElement('span');
                    label.innerText = item[textkey];
                }
                const box = createCheckbox({
                    label,
-                    checked: allchecked || selected,
+                    checked: item.__checked,
                    customAttributes: {
                        'class': 'dataitem',
                        'data-value': val
                    },
-                    onchange: e => this._triggerselect(e.target)
+                    onchange: e => this._triggerselect(e.target, item)
                });
                li.appendChild(box);
            } else {
@ -540,14 +608,12 @@ export class Dropdown {
                    li.classList.add('selected');
                }
            }
-            list.appendChild(li);
+            content.appendChild(li);
        });
-        if (scrolled != null) {
-            setTimeout(() => list.scrollTop = scrolled, 10);
-        }
+        return scrolled;
    }

-    _triggerselect(checkbox) {
+    _triggerselect(checkbox, item) {
        let list;
        const valuekey = this._var.options.valueKey;
        const textkey = this._var.options.textKey;
@ -557,28 +623,31 @@ export class Dropdown {
            const boxes = this._var.container.querySelectorAll('input.dataitem');
            boxes.forEach(box => box.checked = allchecked);
            list = [];
-        } else if (checkbox.checked) {
-            if (this._var.container.querySelectorAll('input.dataitem:not(:checked)').length === 0) {
-                this._var.allChecked = true;
-                this._var.container.querySelector('input[isall="1"]').checked = true;
-                list = [];
-            } else {
-                const source = this.source;
-                list = [...this._var.container.querySelectorAll('input.dataitem:checked')]
-                    .map(c => {
-                        const v = c.dataset.value;
-                        return source.find(it => String(it[valuekey]) === v);
-                    })
-                    .filter(it => it != null);
-            }
        } else {
-            const val = checkbox.dataset.value;
-            if (this._var.allChecked) {
-                this._var.allChecked = false;
-                this._var.container.querySelector('input[isall="1"]').checked = false;
-                list = this.source.filter(it => String(it[valuekey]) !== val);
+            item.__checked = checkbox.checked;
+            const all = this._var.container.querySelector('input[isall="1"]');
+            if (checkbox.checked) {
+                const source = this.source;
+                if (source.some(it => it.__checked) == null) {
+                    this._var.allChecked = true;
+                    if (all != null) {
+                        all.checked = true;
+                    }
+                    list = [];
+                } else {
+                    list = source.filter(it => it.__checked);
+                }
            } else {
-                list = this.selectedList.filter(it => String(it[valuekey]) !== val);
+                const val = checkbox.dataset.value;
+                if (this._var.allChecked) {
+                    this._var.allChecked = false;
+                    if (all != null) {
+                        all.checked = false;
+                    }
+                    list = this.source.filter(it => String(it[valuekey]) !== val);
+                } else {
+                    list = this.selectedList.filter(it => String(it[valuekey]) !== val);
+                }
            }
        }
        if (this._var.allChecked) {
--- a/package-lock.json
+++ b/package-lock.json
@ -1,18 +1,18 @@
 {
  "name": "ui-lib",
-  "version": "1.0.3",
+  "version": "1.0.4",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "ui-lib",
-      "version": "1.0.3",
+      "version": "1.0.4",
      "devDependencies": {
        "@mxssfd/typedoc-theme": "^1.1.3",
        "clean-jsdoc-theme": "^4.3.0",
        "docdash": "^2.0.2",
        "jsdoc": "^4.0.3",
-        "postcss-preset-env": "^9.5.13",
+        "postcss-preset-env": "^9.5.14",
        "sass": "^1.77.2",
        "typedoc": "^0.25.13",
        "vite": "^5.2.11",
@ -20,9 +20,9 @@
      }
    },
    "node_modules/@babel/parser": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.5.tgz",
-      "integrity": "sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==",
+      "version": "7.24.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.6.tgz",
+      "integrity": "sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q==",
      "dev": true,
      "bin": {
        "parser": "bin/babel-parser.js"
@ -1462,9 +1462,9 @@
      }
    },
    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz",
-      "integrity": "sha512-NM0jFxY8bB8QLkoKxIQeObCaDlJKewVlIEkuyYKm5An1tdVZ966w2+MPQ2l8LBZLjR+SgyV+nRkTIunzOYBMLQ==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
+      "integrity": "sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==",
      "cpu": [
        "arm"
      ],
@ -1475,9 +1475,9 @@
      ]
    },
    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.17.2.tgz",
-      "integrity": "sha512-yeX/Usk7daNIVwkq2uGoq2BYJKZY1JfyLTaHO/jaiSwi/lsf8fTFoQW/n6IdAsx5tx+iotu2zCJwz8MxI6D/Bw==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.0.tgz",
+      "integrity": "sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==",
      "cpu": [
        "arm64"
      ],
@ -1488,9 +1488,9 @@
      ]
    },
    "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.17.2.tgz",
-      "integrity": "sha512-kcMLpE6uCwls023+kknm71ug7MZOrtXo+y5p/tsg6jltpDtgQY1Eq5sGfHcQfb+lfuKwhBmEURDga9N0ol4YPw==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz",
+      "integrity": "sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==",
      "cpu": [
        "arm64"
      ],
@ -1501,9 +1501,9 @@
      ]
    },
    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.17.2.tgz",
-      "integrity": "sha512-AtKwD0VEx0zWkL0ZjixEkp5tbNLzX+FCqGG1SvOu993HnSz4qDI6S4kGzubrEJAljpVkhRSlg5bzpV//E6ysTQ==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.0.tgz",
+      "integrity": "sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==",
      "cpu": [
        "x64"
      ],
@ -1514,9 +1514,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.17.2.tgz",
-      "integrity": "sha512-3reX2fUHqN7sffBNqmEyMQVj/CKhIHZd4y631duy0hZqI8Qoqf6lTtmAKvJFYa6bhU95B1D0WgzHkmTg33In0A==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.0.tgz",
+      "integrity": "sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==",
      "cpu": [
        "arm"
      ],
@ -1527,9 +1527,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.17.2.tgz",
-      "integrity": "sha512-uSqpsp91mheRgw96xtyAGP9FW5ChctTFEoXP0r5FAzj/3ZRv3Uxjtc7taRQSaQM/q85KEKjKsZuiZM3GyUivRg==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.0.tgz",
+      "integrity": "sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==",
      "cpu": [
        "arm"
      ],
@ -1540,9 +1540,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.17.2.tgz",
-      "integrity": "sha512-EMMPHkiCRtE8Wdk3Qhtciq6BndLtstqZIroHiiGzB3C5LDJmIZcSzVtLRbwuXuUft1Cnv+9fxuDtDxz3k3EW2A==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.0.tgz",
+      "integrity": "sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==",
      "cpu": [
        "arm64"
      ],
@ -1553,9 +1553,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.17.2.tgz",
-      "integrity": "sha512-NMPylUUZ1i0z/xJUIx6VUhISZDRT+uTWpBcjdv0/zkp7b/bQDF+NfnfdzuTiB1G6HTodgoFa93hp0O1xl+/UbA==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.0.tgz",
+      "integrity": "sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==",
      "cpu": [
        "arm64"
      ],
@ -1566,9 +1566,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.17.2.tgz",
-      "integrity": "sha512-T19My13y8uYXPw/L/k0JYaX1fJKFT/PWdXiHr8mTbXWxjVF1t+8Xl31DgBBvEKclw+1b00Chg0hxE2O7bTG7GQ==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.0.tgz",
+      "integrity": "sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==",
      "cpu": [
        "ppc64"
      ],
@ -1579,9 +1579,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.17.2.tgz",
-      "integrity": "sha512-BOaNfthf3X3fOWAB+IJ9kxTgPmMqPPH5f5k2DcCsRrBIbWnaJCgX2ll77dV1TdSy9SaXTR5iDXRL8n7AnoP5cg==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.0.tgz",
+      "integrity": "sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==",
      "cpu": [
        "riscv64"
      ],
@ -1592,9 +1592,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.17.2.tgz",
-      "integrity": "sha512-W0UP/x7bnn3xN2eYMql2T/+wpASLE5SjObXILTMPUBDB/Fg/FxC+gX4nvCfPBCbNhz51C+HcqQp2qQ4u25ok6g==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.0.tgz",
+      "integrity": "sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==",
      "cpu": [
        "s390x"
      ],
@ -1605,9 +1605,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.17.2.tgz",
-      "integrity": "sha512-Hy7pLwByUOuyaFC6mAr7m+oMC+V7qyifzs/nW2OJfC8H4hbCzOX07Ov0VFk/zP3kBsELWNFi7rJtgbKYsav9QQ==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz",
+      "integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==",
      "cpu": [
        "x64"
      ],
@ -1618,9 +1618,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.17.2.tgz",
-      "integrity": "sha512-h1+yTWeYbRdAyJ/jMiVw0l6fOOm/0D1vNLui9iPuqgRGnXA0u21gAqOyB5iHjlM9MMfNOm9RHCQ7zLIzT0x11Q==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.0.tgz",
+      "integrity": "sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==",
      "cpu": [
        "x64"
      ],
@ -1631,9 +1631,9 @@
      ]
    },
    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.17.2.tgz",
-      "integrity": "sha512-tmdtXMfKAjy5+IQsVtDiCfqbynAQE/TQRpWdVataHmhMb9DCoJxp9vLcCBjEQWMiUYxO1QprH/HbY9ragCEFLA==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.0.tgz",
+      "integrity": "sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==",
      "cpu": [
        "arm64"
      ],
@ -1644,9 +1644,9 @@
      ]
    },
    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.17.2.tgz",
-      "integrity": "sha512-7II/QCSTAHuE5vdZaQEwJq2ZACkBpQDOmQsE6D6XUbnBHW8IAhm4eTufL6msLJorzrHDFv3CF8oCA/hSIRuZeQ==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.0.tgz",
+      "integrity": "sha512-Txjh+IxBPbkUB9+SXZMpv+b/vnTEtFyfWZgJ6iyCmt2tdx0OF5WhFowLmnh8ENGNpfUlUZkdI//4IEmhwPieNg==",
      "cpu": [
        "ia32"
      ],
@ -1657,9 +1657,9 @@
      ]
    },
    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.17.2.tgz",
-      "integrity": "sha512-TGGO7v7qOq4CYmSBVEYpI1Y5xDuCEnbVC5Vth8mOsW0gDSzxNrVERPc790IGHsrT2dQSimgMr9Ub3Y1Jci5/8w==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.0.tgz",
+      "integrity": "sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g==",
      "cpu": [
        "x64"
      ],
@ -1865,9 +1865,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001620",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz",
-      "integrity": "sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew==",
+      "version": "1.0.30001621",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001621.tgz",
+      "integrity": "sha512-+NLXZiviFFKX0fk8Piwv3PfLPGtRqJeq2TiNoUff/qB5KJgwecJTvCXDpmlyP/eCI/GUEmp/h/y5j0yckiiZrA==",
      "dev": true,
      "funding": [
        {
@ -2033,9 +2033,9 @@
      }
    },
    "node_modules/cssdb": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-8.0.1.tgz",
-      "integrity": "sha512-diegY/vnOYmPXY0bOBj5jeHaiK8MMpjgPuipirY8pF9AthtqEXgqVdKF5tnb6RTc/ZdhQqG0TBnInQ5CbbUW7Q==",
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-8.0.2.tgz",
+      "integrity": "sha512-zbOCmmbcHvr2lP+XrZSgftGMGumbosC6IM3dbxwifwPEBD70pVJaH3Ho191VBEqDg644AM7PPPVj0ZXokTjZng==",
      "dev": true,
      "funding": [
        {
@ -2080,9 +2080,9 @@
      }
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.4.777",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.777.tgz",
-      "integrity": "sha512-n02NCwLJ3wexLfK/yQeqfywCblZqLcXphzmid5e8yVPdtEcida7li0A5WQKghHNG0FeOMCzeFOzEbtAh5riXFw==",
+      "version": "1.4.783",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.783.tgz",
+      "integrity": "sha512-bT0jEz/Xz1fahQpbZ1D7LgmPYZ3iHVY39NcWWro1+hA2IvjiPeaXtfSqrQ+nXjApMvQRE2ASt1itSLRrebHMRQ==",
      "dev": true
    },
    "node_modules/entities": {
@ -3022,9 +3022,9 @@
      }
    },
    "node_modules/postcss-nesting": {
-      "version": "12.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.4.tgz",
-      "integrity": "sha512-CcHOq94K137E+U4Ommu7pexcpp0Tjm24zl4UcqWs1oSLAr5cLI+jLrqQ5h/bdjhMX6cMbzunyustVNnvrzF8Zg==",
+      "version": "12.1.5",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.5.tgz",
+      "integrity": "sha512-N1NgI1PDCiAGWPTYrwqm8wpjv0bgDmkYHH72pNsqTCv9CObxjxftdYu6AKtGN+pnJa7FQjMm3v4sp8QJbFsYdQ==",
      "dev": true,
      "funding": [
        {
@ -3039,7 +3039,7 @@
      "dependencies": {
        "@csstools/selector-resolve-nested": "^1.1.0",
        "@csstools/selector-specificity": "^3.1.1",
-        "postcss-selector-parser": "^6.0.13"
+        "postcss-selector-parser": "^6.1.0"
      },
      "engines": {
        "node": "^14 || ^16 || >=18"
@ -3130,9 +3130,9 @@
      }
    },
    "node_modules/postcss-preset-env": {
-      "version": "9.5.13",
-      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-9.5.13.tgz",
-      "integrity": "sha512-YQMwWu6MAc4Envrjf/mW2BTrb5J8WkrJ4dV2VostZVDhrmEPpYREOyhmvtlFLDxK1/AmTDY8aXjZViMC1qKu/w==",
+      "version": "9.5.14",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-9.5.14.tgz",
+      "integrity": "sha512-gTMi+3kENN/mN+K59aR+vEOjlkujTmmXJcM9rnAqGh9Y/euQ/ypdp9rd8mO1eoIjAD8vNS15+xbkBxoi+65BqQ==",
      "dev": true,
      "funding": [
        {
@ -3197,7 +3197,7 @@
        "postcss-image-set-function": "^6.0.3",
        "postcss-lab-function": "^6.0.16",
        "postcss-logical": "^7.0.1",
-        "postcss-nesting": "^12.1.4",
+        "postcss-nesting": "^12.1.5",
        "postcss-opacity-percentage": "^2.0.0",
        "postcss-overflow-shorthand": "^5.0.1",
        "postcss-page-break": "^3.0.4",
@ -3273,9 +3273,9 @@
      }
    },
    "node_modules/postcss-selector-parser": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
-      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
+      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
      "dev": true,
      "dependencies": {
        "cssesc": "^3.0.0",
@ -3331,9 +3331,9 @@
      }
    },
    "node_modules/rollup": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.17.2.tgz",
-      "integrity": "sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz",
+      "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==",
      "dev": true,
      "dependencies": {
        "@types/estree": "1.0.5"
@ -3346,22 +3346,22 @@
        "npm": ">=8.0.0"
      },
      "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.17.2",
-        "@rollup/rollup-android-arm64": "4.17.2",
-        "@rollup/rollup-darwin-arm64": "4.17.2",
-        "@rollup/rollup-darwin-x64": "4.17.2",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.17.2",
-        "@rollup/rollup-linux-arm-musleabihf": "4.17.2",
-        "@rollup/rollup-linux-arm64-gnu": "4.17.2",
-        "@rollup/rollup-linux-arm64-musl": "4.17.2",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.17.2",
-        "@rollup/rollup-linux-riscv64-gnu": "4.17.2",
-        "@rollup/rollup-linux-s390x-gnu": "4.17.2",
-        "@rollup/rollup-linux-x64-gnu": "4.17.2",
-        "@rollup/rollup-linux-x64-musl": "4.17.2",
-        "@rollup/rollup-win32-arm64-msvc": "4.17.2",
-        "@rollup/rollup-win32-ia32-msvc": "4.17.2",
-        "@rollup/rollup-win32-x64-msvc": "4.17.2",
+        "@rollup/rollup-android-arm-eabi": "4.18.0",
+        "@rollup/rollup-android-arm64": "4.18.0",
+        "@rollup/rollup-darwin-arm64": "4.18.0",
+        "@rollup/rollup-darwin-x64": "4.18.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.18.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.18.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.18.0",
+        "@rollup/rollup-linux-arm64-musl": "4.18.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.18.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.18.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.18.0",
+        "@rollup/rollup-linux-x64-gnu": "4.18.0",
+        "@rollup/rollup-linux-x64-musl": "4.18.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.18.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.18.0",
+        "@rollup/rollup-win32-x64-msvc": "4.18.0",
        "fsevents": "~2.3.2"
      }
    },
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "ui-lib",
  "private": true,
-  "version": "1.0.3",
+  "version": "1.0.4",
  "type": "module",
  "files": [
    "dist"
@ -32,7 +32,7 @@
    "clean-jsdoc-theme": "^4.3.0",
    "docdash": "^2.0.2",
    "jsdoc": "^4.0.3",
-    "postcss-preset-env": "^9.5.13",
+    "postcss-preset-env": "^9.5.14",
    "sass": "^1.77.2",
    "typedoc": "^0.25.13",
    "vite": "^5.2.11",