mdui 1.0.2 → 2.0.1

package/functions/prompt.js

@@ -0,0 +1,103 @@
+import isPromise from 'is-promise';
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/on.js';
+import { isBoolean, isString, isUndefined, returnTrue, } from '@mdui/jq/shared/helper.js';
+import { TextField } from '../components/text-field.js';
+import { dialog as openDialog } from './dialog.js';
+const defaultOptions = {
+    confirmText: '确定',
+    cancelText: '取消',
+    onConfirm: returnTrue,
+    onCancel: returnTrue,
+    validator: returnTrue,
+    textFieldOptions: {},
+};
+/**
+ * 打开一个 prompt，返回 Promise。
+ * 如果是通过点击确定按钮关闭，则返回的 promise 会被 resolve，resolve 的参数为输入框的值；
+ * 如果是通过其他方式关闭，则返回的 promise 会被 reject。
+ * @param options
+ */
+export const prompt = (options) => {
+    const mergedOptions = Object.assign({}, defaultOptions, options);
+    const properties = [
+        'headline',
+        'description',
+        'icon',
+        'closeOnEsc',
+        'closeOnOverlayClick',
+        'stackedActions',
+        'queue',
+        'onOpen',
+        'onOpened',
+        'onClose',
+        'onClosed',
+        'onOverlayClick',
+    ];
+    const textField = new TextField();
+    Object.entries(mergedOptions.textFieldOptions).forEach(([key, value]) => {
+        // @ts-ignore
+        textField[key] = value;
+    });
+    return new Promise((resolve, reject) => {
+        let isResolve = false;
+        const dialog = openDialog({
+            ...Object.fromEntries(properties
+                .filter((key) => !isUndefined(mergedOptions[key]))
+                .map((key) => [key, mergedOptions[key]])),
+            body: textField,
+            actions: [
+                {
+                    text: mergedOptions.cancelText,
+                    onClick: (dialog) => {
+                        return mergedOptions.onCancel.call(dialog, textField.value, dialog);
+                    },
+                },
+                {
+                    text: mergedOptions.confirmText,
+                    onClick: (dialog) => {
+                        const onConfirm = () => {
+                            const clickResult = mergedOptions.onConfirm.call(dialog, textField.value, dialog);
+                            if (isPromise(clickResult)) {
+                                clickResult.then(() => {
+                                    isResolve = true;
+                                });
+                            }
+                            else if (clickResult !== false) {
+                                isResolve = true;
+                            }
+                            return clickResult;
+                        };
+                        // 原生验证
+                        textField.setCustomValidity('');
+                        if (!textField.reportValidity()) {
+                            return false;
+                        }
+                        // validator 函数验证
+                        const validateResult = mergedOptions.validator.call(textField, textField.value);
+                        if (isBoolean(validateResult) && !validateResult) {
+                            textField.setCustomValidity(' ');
+                            return false;
+                        }
+                        if (isString(validateResult)) {
+                            textField.setCustomValidity(validateResult);
+                            return false;
+                        }
+                        if (isPromise(validateResult)) {
+                            return new Promise((resolve, reject) => {
+                                validateResult.then(resolve).catch((reason) => {
+                                    textField.setCustomValidity(reason);
+                                    reject(reason);
+                                });
+                            });
+                        }
+                        return onConfirm();
+                    },
+                },
+            ],
+        });
+        $(dialog).on('close', () => {
+            isResolve ? resolve(textField.value) : reject();
+        });
+    });
+};

package/functions/removeColorScheme.d.ts

@@ -0,0 +1,6 @@
+import type { JQ } from '@mdui/jq/shared/core.js';
+/**
+ * 移除指定元素上的配色方案
+ * @param target 要移除配色方案的元素。可以是 CSS 选择器、DOM 元素、或 JQ 对象。默认为 `<html>` 元素
+ */
+export declare const removeColorScheme: (target?: string | HTMLElement | JQ<HTMLElement>) => void;

package/functions/removeColorScheme.js

@@ -0,0 +1,8 @@
+import { remove } from './utils/colorScheme.js';
+/**
+ * 移除指定元素上的配色方案
+ * @param target 要移除配色方案的元素。可以是 CSS 选择器、DOM 元素、或 JQ 对象。默认为 `<html>` 元素
+ */
+export const removeColorScheme = (target = document.documentElement) => {
+    remove(target);
+};

package/functions/setColorScheme.d.ts

@@ -0,0 +1,15 @@
+import type { CustomColor } from './utils/colorScheme.js';
+import type { JQ } from '@mdui/jq/shared/core.js';
+/**
+ * 在指定元素上设置配色方案
+ * @param hex 十六进制颜色值，如 #f82506
+ * @param options
+ * @param options.target 要设置配色方案的元素。可以是 CSS 选择器、DOM 元素、或 JQ 对象。默认为 `<html>` 元素
+ * @param options.customColors 自定义颜色数组
+ * @param options.customColors[].name 自定义颜色名
+ * @param options.customColors[].value 自定义十六进制颜色值，如 #f82506
+ */
+export declare const setColorScheme: (hex: string, options?: {
+    target?: string | HTMLElement | JQ<HTMLElement>;
+    customColors?: CustomColor[];
+}) => void;

package/functions/setColorScheme.js

@@ -0,0 +1,15 @@
+import { argbFromHex } from '@material/material-color-utilities';
+import { setFromSource } from './utils/colorScheme.js';
+/**
+ * 在指定元素上设置配色方案
+ * @param hex 十六进制颜色值，如 #f82506
+ * @param options
+ * @param options.target 要设置配色方案的元素。可以是 CSS 选择器、DOM 元素、或 JQ 对象。默认为 `<html>` 元素
+ * @param options.customColors 自定义颜色数组
+ * @param options.customColors[].name 自定义颜色名
+ * @param options.customColors[].value 自定义十六进制颜色值，如 #f82506
+ */
+export const setColorScheme = (hex, options) => {
+    const source = argbFromHex(hex);
+    setFromSource(source, options);
+};

package/functions/setTheme.d.ts

@@ -0,0 +1,10 @@
+import '@mdui/jq/methods/addClass.js';
+import '@mdui/jq/methods/removeClass.js';
+import type { Theme } from './utils/theme.js';
+import type { JQ } from '@mdui/jq/shared/core.js';
+/**
+ * 在当前页面、或指定元素上设置主题。
+ * @param theme 要设置的主题。值为 `light`、`dark` 或 `auto`
+ * @param target 在该元素上设置主题。可以是 CSS 选择器、DOM 元素、或 JQ 对象。默认为 `<html>` 元素
+ */
+export declare const setTheme: (theme: Theme, target?: string | HTMLElement | JQ<HTMLElement>) => void;

package/functions/setTheme.js

@@ -0,0 +1,16 @@
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/addClass.js';
+import '@mdui/jq/methods/removeClass.js';
+/**
+ * 在当前页面、或指定元素上设置主题。
+ * @param theme 要设置的主题。值为 `light`、`dark` 或 `auto`
+ * @param target 在该元素上设置主题。可以是 CSS 选择器、DOM 元素、或 JQ 对象。默认为 `<html>` 元素
+ */
+export const setTheme = (theme, target = document.documentElement) => {
+    const $target = $(target);
+    const themes = ['light', 'dark', 'auto'];
+    const prefix = 'mdui-theme-';
+    $target
+        .removeClass(themes.map((theme) => prefix + theme).join(' '))
+        .addClass(prefix + theme);
+};

package/functions/snackbar.d.ts

@@ -0,0 +1,91 @@
+import '@mdui/jq/methods/appendTo.js';
+import '@mdui/jq/methods/on.js';
+import '@mdui/jq/methods/remove.js';
+import { Snackbar } from '../components/snackbar.js';
+interface Options {
+    /**
+     * Snackbar 中的消息文本内容
+     */
+    message: string;
+    /**
+     * Snackbar 出现的位置。默认为 `bottom`。可选值为：
+     * * `top`：位于顶部，居中对齐
+     * * `top-start`：位于顶部，左对齐
+     * * `top-end`：位于顶部，右对齐
+     * * `bottom`：位于底部，居中对齐
+     * * `bottom-start`：位于底部，左对齐
+     * * `bottom-end`：位于底部，右对齐
+     */
+    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+    /**
+     * 操作按钮的文本
+     */
+    action?: string;
+    /**
+     * 是否在右侧显示关闭按钮
+     */
+    closeable?: boolean;
+    /**
+     * 消息文本最多显示几行。默认不限制行数。可选值为
+     * * `1`：消息文本最多显示一行
+     * * `2`：消息文本最多显示两行
+     */
+    messageLine?: 1 | 2;
+    /**
+     * 在多长时间后自动关闭（单位为毫秒）。设置为 0 时，不自动关闭。默认为 5 秒后自动关闭。
+     */
+    autoCloseDelay?: number;
+    /**
+     * 点击或触摸 Snackbar 以外的区域时是否关闭 Snackbar
+     */
+    closeOnOutsideClick?: boolean;
+    /**
+     * 队列名称。
+     * 默认不启用队列，在多次调用该函数时，将同时显示多个 snackbar。
+     * 可在该参数中传入一个队列名称，具有相同队列名称的 snackbar 函数，将在上一个 snackbar 关闭后才打开下一个 snackbar。
+     */
+    queue?: string;
+    /**
+     * 点击 Snackbar 时的回调函数。
+     * 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
+     * @param snackbar
+     */
+    onClick?: (snackbar: Snackbar) => void;
+    /**
+     * 点击操作按钮时的回调函数。
+     * 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
+     * 默认点击后会关闭 snackbar；若返回值为 false，则不关闭 snackbar；若返回值为 promise，则将在 promise 被 resolve 后，关闭 snackbar。
+     * @param snackbar
+     */
+    onActionClick?: (snackbar: Snackbar) => void | boolean | Promise<void>;
+    /**
+     * Snackbar 开始显示时的回调函数。
+     * 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
+     * @param snackbar
+     */
+    onOpen?: (snackbar: Snackbar) => void;
+    /**
+     * Snackbar 显示动画完成时的回调函数。
+     * 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
+     * @param snackbar
+     */
+    onOpened?: (snackbar: Snackbar) => void;
+    /**
+     * Snackbar 开始隐藏时的回调函数。
+     * 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
+     * @param snackbar
+     */
+    onClose?: (snackbar: Snackbar) => void;
+    /**
+     * Snackbar 隐藏动画完成时的回调函数。
+     * 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
+     * @param snackbar
+     */
+    onClosed?: (snackbar: Snackbar) => void;
+}
+/**
+ * 打开一个 Snackbar
+ * @param options
+ */
+export declare const snackbar: (options: Options) => Snackbar;
+export {};

package/functions/snackbar.js

@@ -0,0 +1,84 @@
+import isPromise from 'is-promise';
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/appendTo.js';
+import '@mdui/jq/methods/on.js';
+import '@mdui/jq/methods/remove.js';
+import { returnTrue, toKebabCase } from '@mdui/jq/shared/helper.js';
+import { dequeue, queue } from '@mdui/shared/helpers/queue.js';
+import { Snackbar } from '../components/snackbar.js';
+const queueName = 'mdui.functions.snackbar.';
+let currentSnackbar = undefined;
+/**
+ * 打开一个 Snackbar
+ * @param options
+ */
+export const snackbar = (options) => {
+    const snackbar = new Snackbar();
+    const $snackbar = $(snackbar);
+    Object.entries(options).forEach(([key, value]) => {
+        if (key === 'message') {
+            snackbar.innerHTML = value;
+        }
+        else if ([
+            'onClick',
+            'onActionClick',
+            'onOpen',
+            'onOpened',
+            'onClose',
+            'onClosed',
+        ].includes(key)) {
+            const eventName = toKebabCase(key.slice(2));
+            $snackbar.on(eventName, () => {
+                var _a;
+                if (key === 'onActionClick') {
+                    const actionClick = ((_a = options.onActionClick) !== null && _a !== void 0 ? _a : returnTrue).call(snackbar, snackbar);
+                    if (isPromise(actionClick)) {
+                        snackbar.actionLoading = true;
+                        actionClick
+                            .then(() => {
+                            snackbar.open = false;
+                        })
+                            .finally(() => {
+                            snackbar.actionLoading = false;
+                        });
+                    }
+                    else if (actionClick !== false) {
+                        snackbar.open = false;
+                    }
+                }
+                else {
+                    value.call(snackbar, snackbar);
+                }
+            });
+        }
+        else {
+            // @ts-ignore
+            snackbar[key] = value;
+        }
+    });
+    $snackbar.appendTo('body').on('closed', () => {
+        $snackbar.remove();
+        if (options.queue) {
+            currentSnackbar = undefined;
+            dequeue(queueName + options.queue);
+        }
+    });
+    if (!options.queue) {
+        setTimeout(() => {
+            snackbar.open = true;
+        });
+    }
+    else if (currentSnackbar) {
+        queue(queueName + options.queue, () => {
+            snackbar.open = true;
+            currentSnackbar = snackbar;
+        });
+    }
+    else {
+        setTimeout(() => {
+            snackbar.open = true;
+        });
+        currentSnackbar = snackbar;
+    }
+    return snackbar;
+};

package/functions/throttle.d.ts

@@ -0,0 +1 @@
+export { throttle } from '@mdui/shared/helpers/throttle.js';

package/functions/throttle.js

@@ -0,0 +1 @@
+export { throttle } from '@mdui/shared/helpers/throttle.js';

package/functions/utils/colorScheme.d.ts

@@ -0,0 +1,39 @@
+import '@mdui/jq/methods/addClass.js';
+import '@mdui/jq/methods/append.js';
+import '@mdui/jq/methods/get.js';
+import '@mdui/jq/methods/remove.js';
+import '@mdui/jq/methods/removeClass.js';
+import type { JQ } from '@mdui/jq/shared/core.js';
+export interface CustomColor {
+    /**
+     * 自定义颜色名
+     */
+    name: string;
+    /**
+     * 自定义十六进制颜色值，如 `#f82506`
+     */
+    value: string;
+}
+/**
+ * 移除指定元素上的配色方案
+ * @param target
+ */
+export declare const remove: (target: string | HTMLElement | JQ<HTMLElement>) => void;
+/**
+ * 设置配色方案
+ * 在 head 中插入一个 <style id="mdui-custom-color-scheme-${source}"> 元素，
+ * 并在 target 元素上添加 class="mdui-custom-color-scheme-${source}"
+ *
+ * 自定义颜色的 css 变量
+ * --mdui-color-red
+ * --mdui-color-on-red
+ * --mdui-color-red-container
+ * --mdui-color-on-red-container
+ *
+ * @param source
+ * @param options
+ */
+export declare const setFromSource: (source: number, options?: {
+    target?: string | HTMLElement | JQ<HTMLElement>;
+    customColors?: CustomColor[];
+}) => void;

package/functions/utils/colorScheme.js

@@ -0,0 +1,133 @@
+import { blueFromArgb, greenFromArgb, redFromArgb, customColor, argbFromHex, Scheme, CorePalette, } from '@material/material-color-utilities';
+import { getDocument } from 'ssr-window';
+import { $ } from '@mdui/jq/$.js';
+import { unique } from '@mdui/jq/functions/unique.js';
+import '@mdui/jq/methods/addClass.js';
+import '@mdui/jq/methods/append.js';
+import '@mdui/jq/methods/get.js';
+import '@mdui/jq/methods/remove.js';
+import '@mdui/jq/methods/removeClass.js';
+import { toKebabCase } from '@mdui/jq/shared/helper.js';
+const themeArr = ['light', 'dark'];
+const prefix = 'mdui-custom-color-scheme-'; // 类名前缀
+let themeIndex = 0;
+const rgbFromArgb = (source) => {
+    const red = redFromArgb(source);
+    const green = greenFromArgb(source);
+    const blue = blueFromArgb(source);
+    return [red, green, blue].join(', ');
+};
+/**
+ * 移除指定元素上的配色方案
+ * @param target
+ */
+export const remove = (target) => {
+    const $target = $(target);
+    // 找出指定元素上所有的配色方案 CSS class
+    let classNames = $target
+        .get()
+        .map((element) => Array.from(element.classList))
+        .flat();
+    classNames = unique(classNames).filter((className) => className.startsWith(prefix));
+    // 移除 CSS class
+    $target.removeClass(classNames.join(' '));
+    // 找出没有被其他元素使用的 CSS class
+    const unusedClassNames = classNames.filter((className) => $(`.${className}`).length === 0);
+    // 移除对应的 <style> 元素
+    $(unusedClassNames.map((i) => `#${i}`).join(',')).remove();
+};
+/**
+ * 设置配色方案
+ * 在 head 中插入一个 <style id="mdui-custom-color-scheme-${source}"> 元素，
+ * 并在 target 元素上添加 class="mdui-custom-color-scheme-${source}"
+ *
+ * 自定义颜色的 css 变量
+ * --mdui-color-red
+ * --mdui-color-on-red
+ * --mdui-color-red-container
+ * --mdui-color-on-red-container
+ *
+ * @param source
+ * @param options
+ */
+export const setFromSource = (source, options) => {
+    const document = getDocument();
+    const $target = $((options === null || options === void 0 ? void 0 : options.target) || document.documentElement);
+    // 生成配色方案
+    const schemes = {
+        light: Scheme.light(source).toJSON(),
+        dark: Scheme.dark(source).toJSON(),
+    };
+    // todo 目前 @material/material-color-utilities 库缺失了 8 种颜色，等官方库加上后，可以删除这段代码
+    // https://github.com/material-foundation/material-color-utilities/issues/98
+    const palette = CorePalette.of(source);
+    Object.assign(schemes.light, {
+        'surface-dim': palette.n1.tone(87),
+        'surface-bright': palette.n1.tone(98),
+        'surface-container-lowest': palette.n1.tone(100),
+        'surface-container-low': palette.n1.tone(96),
+        'surface-container': palette.n1.tone(94),
+        'surface-container-high': palette.n1.tone(92),
+        'surface-container-highest': palette.n1.tone(90),
+        'surface-tint-color': schemes.light.primary,
+    });
+    Object.assign(schemes.dark, {
+        'surface-dim': palette.n1.tone(6),
+        'surface-bright': palette.n1.tone(24),
+        'surface-container-lowest': palette.n1.tone(4),
+        'surface-container-low': palette.n1.tone(10),
+        'surface-container': palette.n1.tone(12),
+        'surface-container-high': palette.n1.tone(17),
+        'surface-container-highest': palette.n1.tone(22),
+        'surface-tint-color': schemes.dark.primary,
+    });
+    // 扩充自定义颜色
+    ((options === null || options === void 0 ? void 0 : options.customColors) || []).map((color) => {
+        const name = toKebabCase(color.name);
+        const custom = customColor(source, {
+            name,
+            value: argbFromHex(color.value),
+            blend: true,
+        });
+        themeArr.forEach((theme) => {
+            schemes[theme][name] = custom[theme].color;
+            schemes[theme][`on-${name}`] = custom[theme].onColor;
+            schemes[theme][`${name}-container`] = custom[theme].colorContainer;
+            schemes[theme][`on-${name}-container`] = custom[theme].onColorContainer;
+        });
+    });
+    // 根据配色方案生成 css 变量
+    const colorVar = (theme, callback) => {
+        return Object.entries(schemes[theme])
+            .map(([key, value]) => callback(toKebabCase(key), rgbFromArgb(value)))
+            .join('');
+    };
+    const className = prefix + `${source}-${themeIndex++}`;
+    // CSS 文本
+    const cssText = `.${className} {
+  ${colorVar('light', (token, rgb) => `--mdui-color-${token}-light: ${rgb};`)}
+  ${colorVar('dark', (token, rgb) => `--mdui-color-${token}-dark: ${rgb};`)}
+  ${colorVar('light', (token) => `--mdui-color-${token}: var(--mdui-color-${token}-light);`)}
+
+  color: rgb(var(--mdui-color-on-background));
+  background-color: rgb(var(--mdui-color-background));
+}
+
+.mdui-theme-dark .${className},
+.mdui-theme-dark.${className} {
+  ${colorVar('dark', (token) => `--mdui-color-${token}: var(--mdui-color-${token}-dark);`)}
+}
+
+@media (prefers-color-scheme: dark) {
+  .mdui-theme-auto .${className},
+  .mdui-theme-auto.${className} {
+    ${colorVar('dark', (token) => `--mdui-color-${token}: var(--mdui-color-${token}-dark);`)}
+  }
+}`;
+    // 移除旧的配色方案
+    remove($target);
+    // 创建 <style> 元素，添加到 head 中
+    $(document.head).append(`<style id="${className}">${cssText}</style>`);
+    // 添加新配色方案
+    $target.addClass(className);
+};

package/functions/utils/theme.d.ts

@@ -0,0 +1 @@
+export type Theme = 'light' | 'dark' | 'auto';