feature: tiered sort

2024-05-22 09:27:22 +08:00 · 2024-05-22 09:27:22 +08:00 · 190e43c814
commit 190e43c814
parent a946012a33
14 changed files with 254 additions and 147 deletions
--- a/lib/ui.js
+++ b/lib/ui.js
@ -11,7 +11,8 @@ import { GridColumn, GridInputColumn, GridDropdownColumn, GridCheckboxColumn, Gr
 import { Popup, createPopup, showAlert, showConfirm } from "./ui/popup";
 import { createPicture, createAudio, createVideo, createFile, createVideoList } from './ui/media';
 import { validation, convertCssStyle } from './ui/extension';
-import { createDateInput, toDateValue, formatDate, setDateValue, getDateValue, DateSelector } from './ui/date';
+import { createDateInput, toDateValue, getFormatter, formatDate, setDateValue, getDateValue, DateSelector } from './ui/date';
+import * as utility from './utility';

 export {
  createElement,
@ -47,6 +48,7 @@ export {
  // dateSelector
  createDateInput,
  toDateValue,
+  getFormatter,
  formatDate,
  setDateValue,
  getDateValue,
@ -59,5 +61,7 @@ export {
  createVideoList,
  // extension
  validation,
-  convertCssStyle
+  convertCssStyle,
+  // utility
+  utility
 }
--- a/lib/ui/date.js
+++ b/lib/ui/date.js
@ -50,12 +50,12 @@ export function toDateValue(dt, local) {
 }

 /**
- * @private
- * @param {Date} date 
- * @param {boolean} [utc=true] 
- * @returns {string}
+ * 获取日期格式器
+ * @param {Date} date - 待格式的日期
+ * @param {boolean} [utc=true] - 是否按 UTC 时间格式化
+ * @returns {any} 返回格式化工具对象
 */
-function getFormatter(date, utc) {
+export function getFormatter(date, utc) {
    const prefix = utc !== false ? 'getUTC' : 'get';
    const r = {
        /**
--- a/lib/ui/dropdown.js
+++ b/lib/ui/dropdown.js
@ -1,4 +1,3 @@
-// import { r, global, contains, isPositive, nullOrEmpty } from "../utility";
 import './css/dropdown.scss';
 import { r } from "../utility/lgres";
 import { contains, nullOrEmpty } from "../utility/strings";
@ -205,6 +204,7 @@ export class Dropdown {
        if (options.input) {
            label = createElement('input', 'ui-drop-text');
            label.type = 'text';
+            label.autocomplete = 'off';
            label.draggable = false;
            options.placeholder && label.setAttribute('placeholder', options.placeholder);
            isPositive(options.maxLength) && label.setAttribute('maxlength', options.maxLength);
--- a/lib/ui/grid/grid.js
+++ b/lib/ui/grid/grid.js
@ -1,19 +1,19 @@
 import '../css/grid.scss';
-import { global, isPositive, isMobile, throttle, truncate, debounce } from "../../utility";
+import { global, isPositive, isMobile, throttle, debounce, truncate } from "../../utility";
 import { r as lang } from "../../utility/lgres";
 import { nullOrEmpty } from "../../utility/strings";
 import { createElement } from "../../functions";
 import { createIcon } from "../icon";
 import { createCheckbox } from "../checkbox";
 import { setTooltip } from "../tooltip";
-import { Popup, showAlert } from "../popup";
+import { Popup, showAlert, showConfirm } from "../popup";
 import { convertCssStyle } from "../extension";
 import { GridColumn, GridInputColumn, GridTextColumn, GridDropdownColumn, GridCheckboxColumn, GridRadioboxColumn, GridIconColumn, GridDateColumn } from "./column";

 /**
 * @author Tsanie Lily <tsorgy@gmail.com>
 * @license MIT
- * @version 1.0.2
+ * @version 1.0.3
 */

 const ScriptPath = (self.document == null ? self.location.href : self.document.currentScript?.src ?? '').replace(/ui\.min\.js\?.+$/, '');
@ -258,6 +258,7 @@ let r = lang;
 * @property {(ValueItem[] | GridColumnFilterSourceCallback)} [filterSource] - 自定义列过滤器的数据源，支持调用函数返回数据源
 * @property {boolean} [filterAsValue=false] - 列头过滤强制使用 `Value` 字段
 * @property {GridItemSortCallback} [sortFilter] - 自定义列排序函数
+ * @property {boolean} [sortAsText=false] - 按照 `DisplayValue` 排序
 * @property {DropdownOptions} [dropOptions] - 列为下拉列表类型时以该值设置下拉框的参数
 * @property {boolean} [dropRestrictCase=false] - 下拉列表是否区分大小写
 * @property {(GridSourceItem[] | Promise<GridSourceItem[]> | GridDropdownSourceCallback)} [source] - 列为下拉列表类型时以该值设置下拉列表数据源，支持返回异步对象，也支持调用函数返回
@ -450,6 +451,7 @@ const GridColumnDirection = {
 * @typedef GridLanguages
 * @property {string} [all] - ( All )
 * @property {string} [ok] - OK
+ * @property {string} [yes] - Yes
 * @property {string} [reset] - Reset
 * @property {string} [cancel] - Cancel
 * @property {string} [null] - ( Null )
@ -464,6 +466,7 @@ const GridColumnDirection = {
 * @property {string} [column] - Column
 * @property {string} [order] - Order
 * @property {string} [sort] - Sort
+ * @property {string} [sortArrayExists] - This will remove the current tiered sort. Do you wish to continue?
 * @property {string} [requirePrompt] - All sort criteria must have a column specified. Check the selected sort criteria and try again.
 * @property {string} [duplicatePrompt] - {column} is being sorted more than once. Delete the duplicate sort criteria and try again.
 * @interface
@ -1348,6 +1351,7 @@ export class Grid {
            this.langs = {
                all: r('allItem', '( All )'),
                ok: r('ok', 'OK'),
+                yes: r('yes', 'Yes'),
                reset: r('reset', 'Reset'),
                cancel: r('cancel', 'Cancel'),
                null: r('null', '( Null )'),
@ -1362,6 +1366,7 @@ export class Grid {
                column: r('column', 'Column'),
                order: r('order', 'Order'),
                sort: r('sort', 'Sort'),
+                sortArrayExists: r('sortArrayExists', 'This will remove the current tiered sort. Do you wish to continue?'),
                requirePrompt: r('requirePrompt', 'All sort criteria must have a column specified. Check the selected sort criteria and try again.'),
                duplicatePrompt: r('duplicatePrompt', '{column} is being sorted more than once. Delete the duplicate sort criteria and try again.')
            };
@ -1405,10 +1410,9 @@ export class Grid {
            if (e.target === this._var.el) {
                // cancel selections
                const selectedIndexes = this._var.selectedIndexes;
-                if (selectedIndexes == null || selectedIndexes.length === 0) {
-                    return;
+                if (selectedIndexes?.length > 0) {
+                    selectedIndexes.splice(0);
                }
-                selectedIndexes.splice(0);
                if (this.readonly) {
                    this._tableRows.forEach(row => {
                        row.classList.remove('selected');
@ -1426,6 +1430,10 @@ export class Grid {
            if (parent == null) {
                return;
            }
+            if (this._getParentElement(parent) !== this._var.el) {
+                // sub ui-grid
+                return;
+            }
            const rowIndex = parent.classList.contains('ui-grid-total-row') ? -1 : this._tableRows.indexOf(parent);
            let colIndex = indexOfParent(target) - (this.expandable ? 1 : 0);
            if (colIndex >= this.columns.length) {
@ -1799,58 +1807,64 @@ export class Grid {
            grid.onRowChanged();
        }
        buttonWrapper.append(
-            createElement('span', 'button',
+            createElement('span', button => {
+                button.className = 'button';
+                button.addEventListener('click', () => {
+                    let index = grid.selectedIndex;
+                    const n = { column: '', order: 'asc' };
+                    if (index >= 0) {
+                        index += 1;
+                        grid.addItem(n, index);
+                    } else {
+                        grid.addItem(n);
+                        index = grid.source.length - 1;
+                    }
+                    reload(index);
+                });
+            },
                createIcon('fa-light', 'plus'),
                createElement('span', span => {
                    span.innerText = this.langs.addLevel;
-                    span.addEventListener('click', () => {
-                        let index = grid.selectedIndex;
-                        const n = { column: '', order: 'asc' };
-                        if (index >= 0) {
-                            index += 1;
-                            grid.addItem(n, index);
-                        } else {
-                            grid.addItem(n);
-                            index = grid.source.length - 1;
-                        }
-                        reload(index);
-                    });
                })
            ),
-            createElement('span', 'button ui-button-delete',
+            createElement('span', button => {
+                button.className = 'button ui-button-delete';
+                button.addEventListener('click', () => {
+                    let index = grid.selectedIndex;
+                    if (index < 0) {
+                        return;
+                    }
+                    grid.removeItem(index);
+                    const length = grid.source.length;
+                    if (index >= length) {
+                        index = length - 1;
+                    }
+                    reload(index);
+                });
+            },
                createIcon('fa-light', 'times'),
                createElement('span', span => {
                    span.innerText = this.langs.deleteLevel;
-                    span.addEventListener('click', () => {
-                        let index = grid.selectedIndex;
-                        if (index < 0) {
-                            return;
-                        }
-                        grid.removeItem(index);
-                        const length = grid.source.length;
-                        if (index >= length) {
-                            index = length - 1;
-                        }
-                        reload(index);
-                    });
                })
            ),
-            createElement('span', 'button ui-button-copy',
+            createElement('span', button => {
+                button.className = 'button ui-button-copy';
+                button.addEventListener('click', () => {
+                    const index = grid.selectedIndex;
+                    if (index < 0) {
+                        return;
+                    }
+                    const item = grid.source[index];
+                    if (item == null) {
+                        return;
+                    }
+                    grid.addItem(Object.assign({}, item), index + 1);
+                    reload(index + 1);
+                });
+            },
                createIcon('fa-light', 'copy'),
                createElement('span', span => {
                    span.innerText = this.langs.copyLevel;
-                    span.addEventListener('click', () => {
-                        const index = grid.selectedIndex;
-                        if (index < 0) {
-                            return;
-                        }
-                        const item = grid.source[index];
-                        if (item == null) {
-                            return;
-                        }
-                        grid.addItem(Object.assign({}, item), index + 1);
-                        reload(index + 1);
-                    });
                })
            ),
            /*
@ -2444,22 +2458,39 @@ export class Grid {
            if (isNaN(direction)) {
                direction = 1;
            }
+            const editing = col.sortAsText !== true;
            return (a, b) => {
-                a = this._getItemProp(a.values, true, col);
-                b = this._getItemProp(b.values, true, col);
-                if (typeof a === 'boolean') {
-                    a = a ? 2 : 1;
-                }
-                if (typeof b === 'boolean') {
-                    b = b ? 2 : 1;
-                }
-                if (a == null && typeof b === 'number') {
-                    a = 0;
-                } else if (typeof a === 'number' && b == null) {
-                    b = 0;
-                } else if (a != null && b == null) {
-                    return direction;
+                a = this._getItemSortProp(a.values, editing, col);
+                b = this._getItemSortProp(b.values, editing, col);
+                if (editing) {
+                    if (typeof a === 'boolean') {
+                        a = a ? 2 : 1;
+                    }
+                    if (typeof b === 'boolean') {
+                        b = b ? 2 : 1;
+                    }
+                    if (a == null && typeof b === 'number') {
+                        a = 0;
+                    } else if (typeof a === 'number' && b == null) {
+                        b = 0;
+                    } else if (a != null && b == null) {
+                        return direction;
+                    } else {
+                        if (Array.isArray(a)) {
+                            a = a.join(', ');
+                        }
+                        if (Array.isArray(b)) {
+                            b = b.join(', ');
+                        }
+                        if (typeof a === 'string' && typeof b === 'string') {
+                            a = a.toLowerCase();
+                            b = b.toLowerCase();
+                        }
+                    }
                } else {
+                    if (a != null && b == null) {
+                        return direction;
+                    }
                    if (Array.isArray(a)) {
                        a = a.join(', ');
                    }
@ -3546,6 +3577,21 @@ export class Grid {
        return value;
    }

+    /**
+     * @private
+     * @param {GridRowItem} item 
+     * @param {boolean} editing 
+     * @param {GridColumnDefinition} col 
+     * @returns {any}
+     */
+    _getItemSortProp(item, editing, col) {
+        const value = item[col.key];
+        if (value != null && Object.prototype.hasOwnProperty.call(value, 'SortValue')) {
+            return value.SortValue;
+        }
+        return this._getItemProp(item, editing, col);
+    }
+
    /**
     * @private
     * @param {HTMLElement} target 
@ -3591,22 +3637,46 @@ export class Grid {
            return;
        }
        if (!this._notHeader(e.target.tagName)) {
-            const index = this.columns.indexOf(col);
-            if (index < 0) {
-                return;
-            }
-            if (this.sortIndex === index) {
-                this.sortDirection = this.sortDirection === 1 ? -1 : 1;
+            if (Array.isArray(this.sortArray) && this.sortArray.length > 0) {
+                showConfirm(this.langs.sort, this.langs.sortArrayExists, [
+                    {
+                        key: 'yes',
+                        text: this.langs.yes
+                    },
+                    {
+                        text: this.langs.cancel
+                    }
+                ]).then(result => {
+                    if (result?.key === 'yes') {
+                        this._onDoHeaderSort(col);
+                    }
+                });
            } else {
-                this.sortIndex = index;
-            }
-            this.sortColumn();
-            if (typeof this.onColumnChanged === 'function') {
-                this.onColumnChanged(ColumnChangedType.Sort, index, this.sortDirection);
+                this._onDoHeaderSort(col);
            }
        }
    }

+    /**
+     * @private
+     * @param {GridColumnDefinition} col 
+     */
+    _onDoHeaderSort(col) {
+        const index = this.columns.indexOf(col);
+        if (index < 0) {
+            return;
+        }
+        if (this.sortIndex === index) {
+            this.sortDirection = this.sortDirection === 1 ? -1 : 1;
+        } else {
+            this.sortIndex = index;
+        }
+        this.sortColumn();
+        if (typeof this.onColumnChanged === 'function') {
+            this.onColumnChanged(ColumnChangedType.Sort, index, this.sortDirection);
+        }
+    }
+
    /**
     * @private
     * @param {MouseEvent} [e] 
--- a/lib/ui/media.js
+++ b/lib/ui/media.js
@ -1,7 +1,7 @@
 import "./css/media.scss";
 import { createElement } from "../functions";
 import { createIcon } from "./icon";
-import { get } from "../utility";
+import { get } from "../utility/request";

 export function createPicture(url) {
    return createElement('a', a => {
--- a/lib/ui/popup.d.ts
+++ b/lib/ui/popup.d.ts
@ -69,7 +69,8 @@ export class Popup {
 }

 interface PopupButton {
-    tabIndex: number;
+    className?: string;
+    tabIndex?: number;
    key: string;
    text: string;
    trigger: (this: Popup) => boolean | Promise<boolean>;
--- a/lib/ui/popup.js
+++ b/lib/ui/popup.js
@ -271,6 +271,9 @@ export class Popup {
            container.appendChild(
                createElement('div', 'ui-popup-footer', ...option.buttons.map((b, i) => {
                    const button = createElement('button', 'ui-popup-button');
+                    if (b.className != null) {
+                        button.classList.add(b.className);
+                    }
                    if (b.tabIndex > 0) {
                        button.tabIndex = b.tabIndex;
                    } else {
--- a/lib/ui/tooltip.js
+++ b/lib/ui/tooltip.js
@ -1,6 +1,5 @@
 import './css/tooltip.scss';
 import { createElement } from "../functions";
-// import { global } from "../utility";

 const pointerHeight = 12;

--- a/lib/utility.js
+++ b/lib/utility.js
@ -53,6 +53,22 @@ function isPhone(text) {
    return false;
 }

+function verifyPassword(password, min) {
+    if (password == null || typeof password !== 'string') {
+        return false;
+    }
+    if (password.length < 8) {
+        return false;
+    }
+    min ??= 3;
+    let secure = 0;
+    if (/[0-9]/.test(password)) { secure++ }
+    if (/[a-z]/.test(password)) { secure++ }
+    if (/[A-Z]/.test(password)) { secure++ }
+    if (/[^0-9a-zA-Z]/.test(password)) { secure++ }
+    return secure >= min;
+}
+
 export {
    // cookie
    getCookie,
@ -83,5 +99,6 @@ export {
    debounce,
    truncate,
    isEmail,
-    isPhone
+    isPhone,
+    verifyPassword
 }
--- a/lib/utility/cookie.d.ts
+++ b/lib/utility/cookie.d.ts
@ -1,3 +1,3 @@
 export function getCookie(name: string): string
-export function setCookie(name: string, value: string, expireDays?: Number): void
+export function setCookie(name: string, value: string, expireDays?: Number, host?: string, encode?: boolean): void
 export function deleteCookie(name: string): void
--- a/lib/utility/cookie.js
+++ b/lib/utility/cookie.js
@ -1,8 +1,8 @@
-export function setCookie(name, value, expireDays) {
+export function setCookie(name, value, expireDays, host, encode) {
    if (name == null) {
        return;
    }
-    let extra = `; domain=${location.host}; path=/`;
+    let extra = `; domain=${host ?? location.hostname}; path=/`;
    if (expireDays != null) {
        const d = new Date();
        d.setTime(d.getTime() + (expireDays * 24 * 60 * 60 * 1000));
@ -11,7 +11,10 @@ export function setCookie(name, value, expireDays) {
    if (/^(https|wss):$/.test(location.protocol)) {
        extra += '; secure';
    }
-    document.cookie = `${name}=${encodeURIComponent(value)}${extra}`;
+    if (encode !== false) {
+        value = encodeURIComponent(value);
+    }
+    document.cookie = `${name}=${value}${extra}`;
 }

 export function getCookie(name) {
--- a/lib/utility/lgres.js
+++ b/lib/utility/lgres.js
@ -23,17 +23,21 @@ function getCurrentLgId() {
        lgid = 'en';
    }
    switch (lgid) {
-        case 'en':
        case 'en_au':
-        case 'fr':
+        case 'en_ca':
+        case 'fr_ca':
        case 'zh_cn':
            return lgid;
    }
    const lang = lgid.split('_')[0];
    switch (lang) {
        case 'en':
+        case 'es':
        case 'fr':
+        case 'pt':
            return lang;
+        case 'zh':
+            return 'zh_cn';
    }
    return 'en';
 }
@ -88,14 +92,20 @@ function applyLanguage(dom, result) {
        } else {
            text.innerText = getLanguage(result, key, text.innerText);
        }
+        // delete text.dataset.lgid;
+        text.dataset.lgid = '';
    }
    for (let title of dom.querySelectorAll('[data-title-lgid]')) {
        const key = title.dataset.titleLgid;
        title.setAttribute('title', getLanguage(result, key, title.getAttribute('title')));
+        // delete title.dataset.titleLgid;
+        title.dataset.titleLgid = '';
    }
    for (let holder of dom.querySelectorAll('[data-placeholder-lgid]')) {
        const key = holder.dataset.placeholderLgid;
        holder.setAttribute('placeholder', getLanguage(result, key, holder.getAttribute('placeholder')));
+        // delete holder.dataset.placeholderLgid;
+        holder.dataset.placeholderLgid = '';
    }
 }

--- a/package-lock.json
+++ b/package-lock.json
@ -1,19 +1,19 @@
 {
  "name": "ui-lib",
-  "version": "1.0.2",
+  "version": "1.0.3",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "ui-lib",
-      "version": "1.0.2",
+      "version": "1.0.3",
      "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.12",
-        "sass": "^1.77.1",
+        "postcss-preset-env": "^9.5.13",
+        "sass": "^1.77.2",
        "typedoc": "^0.25.13",
        "vite": "^5.2.11",
        "vite-plugin-externals": "^0.6.2"
@ -188,9 +188,9 @@
      }
    },
    "node_modules/@csstools/postcss-cascade-layers": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-4.0.5.tgz",
-      "integrity": "sha512-nAI2ToT2G/E4XEwJitVjCr2V2SluE9Eaiski+xfRbKSGxFmDUtua7SCG1AtMbjteIVqGDRw7uBd7qXqCZq2b1Q==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-4.0.6.tgz",
+      "integrity": "sha512-Xt00qGAQyqAODFiFEJNkTpSUz5VfYqnDLECdlA/Vv17nl/OIV5QfTRHGAXrBGG5YcJyHpJ+GF9gF/RZvOQz4oA==",
      "dev": true,
      "funding": [
        {
@ -203,7 +203,7 @@
        }
      ],
      "dependencies": {
-        "@csstools/selector-specificity": "^3.1.0",
+        "@csstools/selector-specificity": "^3.1.1",
        "postcss-selector-parser": "^6.0.13"
      },
      "engines": {
@ -459,9 +459,9 @@
      }
    },
    "node_modules/@csstools/postcss-is-pseudo-class": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-4.0.7.tgz",
-      "integrity": "sha512-snT/fL6V0I/4AiObPtk2mzJ/eSvpqnf3Kyx9Mc0rI6VskjRkkrEME+kH3aMKBKwjstBrgrYUMoI+vXw2HRi9CQ==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-4.0.8.tgz",
+      "integrity": "sha512-0aj591yGlq5Qac+plaWCbn5cpjs5Sh0daovYUKJUOMjIp70prGH/XPLp7QjxtbFXz3CTvb0H9a35dpEuIuUi3Q==",
      "dev": true,
      "funding": [
        {
@ -474,7 +474,7 @@
        }
      ],
      "dependencies": {
-        "@csstools/selector-specificity": "^3.1.0",
+        "@csstools/selector-specificity": "^3.1.1",
        "postcss-selector-parser": "^6.0.13"
      },
      "engines": {
@ -968,9 +968,9 @@
      }
    },
    "node_modules/@csstools/selector-specificity": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.0.tgz",
-      "integrity": "sha512-tGDFEHZ4XJeIt5NF7/nAfLGqPckmDZSnYne5gl67p4agQolE5s4rofdQ3e+VkeukfR91lVtSQ/Jt9DqM1ICiIQ==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz",
+      "integrity": "sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==",
      "dev": true,
      "funding": [
        {
@ -1805,12 +1805,12 @@
      }
    },
    "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
      "dev": true,
      "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
      },
      "engines": {
        "node": ">=8"
@ -1865,9 +1865,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001617",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001617.tgz",
-      "integrity": "sha512-mLyjzNI9I+Pix8zwcrpxEbGlfqOkF9kM3ptzmKNw5tizSyYwMe+nGLTqMK9cO+0E+Bh6TsBxNAaHWEM8xwSsmA==",
+      "version": "1.0.30001620",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz",
+      "integrity": "sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew==",
      "dev": true,
      "funding": [
        {
@ -1984,9 +1984,9 @@
      }
    },
    "node_modules/css-has-pseudo": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-6.0.4.tgz",
-      "integrity": "sha512-u9vuyeksska4OMRC061xTQb2RJZv7T1JJjnZbaQpNhZRPF1UqGpBqHnlcwRS/1vv+QOpD4NVsaFT4U1zmkciuA==",
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-6.0.5.tgz",
+      "integrity": "sha512-ZTv6RlvJJZKp32jPYnAJVhowDCrRrHUTAxsYSuUPBEDJjzws6neMnzkRblxtgmv1RgcV5dhH2gn7E3wA9Wt6lw==",
      "dev": true,
      "funding": [
        {
@ -1999,7 +1999,7 @@
        }
      ],
      "dependencies": {
-        "@csstools/selector-specificity": "^3.1.0",
+        "@csstools/selector-specificity": "^3.1.1",
        "postcss-selector-parser": "^6.0.13",
        "postcss-value-parser": "^4.2.0"
      },
@ -2080,9 +2080,9 @@
      }
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.4.763",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.763.tgz",
-      "integrity": "sha512-k4J8NrtJ9QrvHLRo8Q18OncqBCB7tIUyqxRcJnlonQ0ioHKYB988GcDFF3ZePmnb8eHEopDs/wPHR/iGAFgoUQ==",
+      "version": "1.4.777",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.777.tgz",
+      "integrity": "sha512-n02NCwLJ3wexLfK/yQeqfywCblZqLcXphzmid5e8yVPdtEcida7li0A5WQKghHNG0FeOMCzeFOzEbtAh5riXFw==",
      "dev": true
    },
    "node_modules/entities": {
@ -2160,9 +2160,9 @@
      }
    },
    "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
      "dev": true,
      "dependencies": {
        "to-regex-range": "^5.0.1"
@ -2252,9 +2252,9 @@
      }
    },
    "node_modules/immutable": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
-      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
      "dev": true
    },
    "node_modules/is-binary-path": {
@ -2557,9 +2557,9 @@
      }
    },
    "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
      "dev": true
    },
    "node_modules/picomatch": {
@ -3022,9 +3022,9 @@
      }
    },
    "node_modules/postcss-nesting": {
-      "version": "12.1.3",
-      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.3.tgz",
-      "integrity": "sha512-8XVmgNNYlmIg1qxSP7O5n76nm0I71noCzlSCl7oqaL2opJ5nSB7r8/726yObKrUTRt6ipjiqHB1wYrMVTM66Sg==",
+      "version": "12.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.4.tgz",
+      "integrity": "sha512-CcHOq94K137E+U4Ommu7pexcpp0Tjm24zl4UcqWs1oSLAr5cLI+jLrqQ5h/bdjhMX6cMbzunyustVNnvrzF8Zg==",
      "dev": true,
      "funding": [
        {
@ -3038,7 +3038,7 @@
      ],
      "dependencies": {
        "@csstools/selector-resolve-nested": "^1.1.0",
-        "@csstools/selector-specificity": "^3.1.0",
+        "@csstools/selector-specificity": "^3.1.1",
        "postcss-selector-parser": "^6.0.13"
      },
      "engines": {
@ -3130,9 +3130,9 @@
      }
    },
    "node_modules/postcss-preset-env": {
-      "version": "9.5.12",
-      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-9.5.12.tgz",
-      "integrity": "sha512-aSeT8hNFKAgywopQE9MINFR5rZjRoA1MKv/Z09aLNlF3ki7Es3oeoFDx52po1QbBVvFuU9wSH/IosqqAa3oJow==",
+      "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==",
      "dev": true,
      "funding": [
        {
@ -3145,7 +3145,7 @@
        }
      ],
      "dependencies": {
-        "@csstools/postcss-cascade-layers": "^4.0.5",
+        "@csstools/postcss-cascade-layers": "^4.0.6",
        "@csstools/postcss-color-function": "^3.0.16",
        "@csstools/postcss-color-mix-function": "^2.0.16",
        "@csstools/postcss-exponential-functions": "^1.0.7",
@ -3155,7 +3155,7 @@
        "@csstools/postcss-hwb-function": "^3.0.15",
        "@csstools/postcss-ic-unit": "^3.0.6",
        "@csstools/postcss-initial": "^1.0.1",
-        "@csstools/postcss-is-pseudo-class": "^4.0.7",
+        "@csstools/postcss-is-pseudo-class": "^4.0.8",
        "@csstools/postcss-light-dark-function": "^1.0.5",
        "@csstools/postcss-logical-float-and-clear": "^2.0.1",
        "@csstools/postcss-logical-overflow": "^1.0.1",
@ -3177,7 +3177,7 @@
        "autoprefixer": "^10.4.19",
        "browserslist": "^4.22.3",
        "css-blank-pseudo": "^6.0.2",
-        "css-has-pseudo": "^6.0.4",
+        "css-has-pseudo": "^6.0.5",
        "css-prefers-color-scheme": "^9.0.1",
        "cssdb": "^8.0.0",
        "postcss-attribute-case-insensitive": "^6.0.3",
@ -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.3",
+        "postcss-nesting": "^12.1.4",
        "postcss-opacity-percentage": "^2.0.0",
        "postcss-overflow-shorthand": "^5.0.1",
        "postcss-page-break": "^3.0.4",
@ -3366,9 +3366,9 @@
      }
    },
    "node_modules/sass": {
-      "version": "1.77.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.1.tgz",
-      "integrity": "sha512-OMEyfirt9XEfyvocduUIOlUSkWOXS/LAt6oblR/ISXCTukyavjex+zQNm51pPCOiFKY1QpWvEH1EeCkgyV3I6w==",
+      "version": "1.77.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.2.tgz",
+      "integrity": "sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==",
      "dev": true,
      "dependencies": {
        "chokidar": ">=3.0.0 <4.0.0",
@ -3565,9 +3565,9 @@
      }
    },
    "node_modules/update-browserslist-db": {
-      "version": "1.0.15",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.15.tgz",
-      "integrity": "sha512-K9HWH62x3/EalU1U6sjSZiylm9C8tgq2mSvshZpqc7QE69RaA2qjhkW2HlNA0tFpEbtyFz7HTqbSdN4MSwUodA==",
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz",
+      "integrity": "sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==",
      "dev": true,
      "funding": [
        {
@ -3585,7 +3585,7 @@
      ],
      "dependencies": {
        "escalade": "^3.1.2",
-        "picocolors": "^1.0.0"
+        "picocolors": "^1.0.1"
      },
      "bin": {
        "update-browserslist-db": "cli.js"
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "ui-lib",
  "private": true,
-  "version": "1.0.2",
+  "version": "1.0.3",
  "type": "module",
  "files": [
    "dist"
@ -32,8 +32,8 @@
    "clean-jsdoc-theme": "^4.3.0",
    "docdash": "^2.0.2",
    "jsdoc": "^4.0.3",
-    "postcss-preset-env": "^9.5.12",
-    "sass": "^1.77.1",
+    "postcss-preset-env": "^9.5.13",
+    "sass": "^1.77.2",
    "typedoc": "^0.25.13",
    "vite": "^5.2.11",
    "vite-plugin-externals": "^0.6.2"