urnovl-web-components 0.0.207 → 0.0.209

package/dist/cjs/anchor-5TTsOQUs.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var componentStyle = require('./component-style-DynYNNFH.js');
+var helper = require('./helper-CSyCWEcu.js');
+var ifDefined = require('./if-defined-PTiMDrJQ.js');
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var classcat;
+var hasRequiredClasscat;
+
+function requireClasscat () {
+	if (hasRequiredClasscat) return classcat;
+	hasRequiredClasscat = 1;
+	classcat = function cc(names) {
+	  if (typeof names === "string" || typeof names === "number") return "" + names
+
+	  let out = "";
+
+	  if (Array.isArray(names)) {
+	    for (let i = 0, tmp; i < names.length; i++) {
+	      if ((tmp = cc(names[i])) !== "") {
+	        out += (out && " ") + tmp;
+	      }
+	    }
+	  } else {
+	    for (let k in names) {
+	      if (names[k]) out += (out && " ") + k;
+	    }
+	  }
+
+	  return out
+	};
+	return classcat;
+}
+
+var classcatExports = requireClasscat();
+var cc = /*@__PURE__*/getDefaultExportFromCjs(classcatExports);
+
+const AnchorMixin = (superclass) => {
+    class AnchorMixinClass extends superclass {
+        renderAnchor({ id, className, part, content = componentStyle.x `<slot></slot>`, refDirective, tabIndex, }) {
+            return componentStyle.x `<a ${refDirective} id="${ifDefined.o(id)}" class="_a ${className ? className : ''}" part="${ifDefined.o(part)}" href="${ifDefined.o(this.href)}" download="${ifDefined.o(this.download)}" target="${ifDefined.o(this.target)}" rel="${ifDefined.o(this.rel)}" tabindex="${ifDefined.o(tabIndex)}">${content}</a>`;
+        }
+    }
+    componentStyle.__decorate([
+        helper.n({ reflect: true })
+    ], AnchorMixinClass.prototype, "href", void 0);
+    componentStyle.__decorate([
+        helper.n({ reflect: true })
+    ], AnchorMixinClass.prototype, "download", void 0);
+    componentStyle.__decorate([
+        helper.n({ reflect: true })
+    ], AnchorMixinClass.prototype, "target", void 0);
+    componentStyle.__decorate([
+        helper.n({ reflect: true })
+    ], AnchorMixinClass.prototype, "rel", void 0);
+    return AnchorMixinClass;
+};
+
+exports.AnchorMixin = AnchorMixin;
+exports.cc = cc;

package/dist/cjs/app-globals-V2Kpy_OQ.js

@@ -3,5 +3,3 @@
 const globalScripts = () => {};
 
 exports.globalScripts = globalScripts;
-
-//# sourceMappingURL=app-globals-V2Kpy_OQ.js.map

package/dist/cjs/appendTo-AncJu7qG.js

@@ -0,0 +1,236 @@
+'use strict';
+
+var is = require('./is-BZqNsJMQ.js');
+var helper = require('./helper-CSyCWEcu.js');
+
+helper.eachArray(['add', 'remove', 'toggle'], (name) => {
+    is.$.fn[`${name}Class`] = function (className) {
+        if (name === 'remove' && !arguments.length) {
+            return this.each((_, element) => {
+                is.setAttribute(element, 'class', '');
+            });
+        }
+        return this.each((i, element) => {
+            if (!helper.isElement(element)) {
+                return;
+            }
+            const classes = (helper.isFunction(className)
+                ? className.call(element, i, is.getAttribute(element, 'class', ''))
+                : className)
+                .split(' ')
+                .filter((name) => name);
+            helper.eachArray(classes, (cls) => {
+                element.classList[name](cls);
+            });
+        });
+    };
+});
+
+// eslint-disable-next-line
+function each(target, callback) {
+    // eachArray 回调函数是 value, key，这里的 each 函数是 key, value
+    return helper.isArrayLike(target)
+        ? helper.eachArray(target, (value, index) => {
+            return callback.call(value, index, value);
+        })
+        : helper.eachObject(target, callback);
+}
+
+// eslint-disable-next-line
+function map(elements, callback) {
+    const window = is.getWindow();
+    let value;
+    const ret = [];
+    each(elements, (i, element) => {
+        value = callback.call(window, element, i);
+        if (value != null) {
+            ret.push(value);
+        }
+    });
+    return [].concat(...ret);
+}
+
+// eslint-disable-next-line
+is.$.fn.map = function (callback) {
+    return new is.JQ(map(this, (element, i) => {
+        return callback.call(element, i, element);
+    }));
+};
+
+/**
+ * 值上面的 padding、border、margin 处理
+ * @param element
+ * @param name
+ * @param value
+ * @param funcIndex
+ * @param includeMargin
+ * @param multiply
+ */
+const handleExtraWidth = (element, name, value, funcIndex, includeMargin, multiply) => {
+    // 获取元素的 padding, border, margin 宽度（两侧宽度的和）
+    const getExtraWidthValue = (extra) => {
+        return (is.getExtraWidth(element, name.toLowerCase(), extra) *
+            multiply);
+    };
+    if (funcIndex === 2 && includeMargin) {
+        value += getExtraWidthValue('margin');
+    }
+    if (is.isBorderBox(element)) {
+        if (funcIndex === 0) {
+            value -= getExtraWidthValue('border');
+        }
+        if (funcIndex === 1) {
+            value -= getExtraWidthValue('border');
+            value -= getExtraWidthValue('padding');
+        }
+    }
+    else {
+        if (funcIndex === 0) {
+            value += getExtraWidthValue('padding');
+        }
+        if (funcIndex === 2) {
+            value += getExtraWidthValue('border');
+            value += getExtraWidthValue('padding');
+        }
+    }
+    return value;
+};
+/**
+ * 获取元素的样式值
+ * @param element
+ * @param name
+ * @param funcIndex 0: innerWidth, innerHeight; 1: width, height; 2: outerWidth, outerHeight
+ * @param includeMargin
+ */
+const get = (element, name, funcIndex, includeMargin) => {
+    const document = is.getDocument();
+    const clientProp = `client${name}`;
+    const scrollProp = `scroll${name}`;
+    const offsetProp = `offset${name}`;
+    const innerProp = `inner${name}`;
+    // $(window).width()
+    if (helper.isWindow(element)) {
+        // outerWidth, outerHeight 需要包含滚动条的宽度
+        return funcIndex === 2
+            ? element[innerProp]
+            : helper.toElement(document)[clientProp];
+    }
+    // $(document).width()
+    if (helper.isDocument(element)) {
+        const doc = helper.toElement(element);
+        return Math.max(
+        // @ts-ignore
+        element.body[scrollProp], doc[scrollProp], 
+        // @ts-ignore
+        element.body[offsetProp], doc[offsetProp], doc[clientProp]);
+    }
+    const value = parseFloat(is.getComputedStyleValue(element, name.toLowerCase()) || '0');
+    return handleExtraWidth(element, name, value, funcIndex, includeMargin, 1);
+};
+/**
+ * 设置元素的样式值
+ * @param element
+ * @param elementIndex
+ * @param name
+ * @param funcIndex 0: innerWidth, innerHeight; 1: width, height; 2: outerWidth, outerHeight
+ * @param includeMargin
+ * @param value
+ */
+const set = (element, elementIndex, name, funcIndex, includeMargin, value) => {
+    let computedValue = helper.isFunction(value)
+        ? value.call(element, elementIndex, get(element, name, funcIndex, includeMargin))
+        : value;
+    if (computedValue == null) {
+        return;
+    }
+    const $element = is.$(element);
+    const dimension = name.toLowerCase();
+    // 特殊的值，不需要计算 padding、border、margin
+    if (helper.isString(computedValue) &&
+        ['auto', 'inherit', ''].includes(computedValue)) {
+        $element.css(dimension, computedValue);
+        return;
+    }
+    // 其他值保留原始单位。注意：如果不使用 px 作为单位，则算出的值一般是不准确的
+    const suffix = computedValue.toString().replace(/\b[0-9.]*/, '');
+    const numerical = parseFloat(computedValue);
+    computedValue =
+        handleExtraWidth(element, name, numerical, funcIndex, includeMargin, -1) +
+            (suffix || 'px');
+    $element.css(dimension, computedValue);
+};
+helper.eachArray(['Width', 'Height'], (name) => {
+    helper.eachArray([`inner${name}`, name.toLowerCase(), `outer${name}`], (funcName, funcIndex) => {
+        is.$.fn[funcName] = function (
+        // eslint-disable-next-line
+        margin, 
+        // eslint-disable-next-line
+        value) {
+            // 是否是赋值操作
+            const isSet = arguments.length && (funcIndex < 2 || !helper.isBoolean(margin));
+            const includeMargin = margin === true || value === true;
+            // 获取第一个元素的值
+            if (!isSet) {
+                return this.length
+                    ? get(this[0], name, funcIndex, includeMargin)
+                    : undefined;
+            }
+            // 设置每个元素的值
+            return this.each((index, element) => {
+                return set(element, index, name, funcIndex, includeMargin, margin);
+            });
+        };
+    });
+});
+
+helper.eachArray(['insertBefore', 'insertAfter'], (name, nameIndex) => {
+    // eslint-disable-next-line
+    is.$.fn[name] = function (target) {
+        const $element = nameIndex ? is.$(this.get().reverse()) : this; // 顺序和 jQuery 保持一致
+        const $target = is.$(target);
+        const result = [];
+        $target.each((index, target) => {
+            if (!target.parentNode) {
+                return;
+            }
+            $element.each((_, element) => {
+                const newItem = index
+                    ? element.cloneNode(true)
+                    : element;
+                const existingItem = nameIndex ? target.nextSibling : target;
+                result.push(newItem);
+                target.parentNode.insertBefore(newItem, existingItem);
+            });
+        });
+        return is.$(nameIndex ? result.reverse() : result);
+    };
+});
+
+is.$.fn.remove = function (selector) {
+    return this.each((_, element) => {
+        if (!selector || is.$(element).is(selector)) {
+            is.removeChild(element);
+        }
+    });
+};
+
+helper.eachArray(['appendTo', 'prependTo'], (name, nameIndex) => {
+    // eslint-disable-next-line
+    is.$.fn[name] = function (target) {
+        const extraChilds = [];
+        const $target = is.$(target).map((_, element) => {
+            const childNodes = element.childNodes;
+            const childLength = childNodes.length;
+            if (childLength) {
+                return childNodes[nameIndex ? 0 : childLength - 1];
+            }
+            const child = is.createElement('div');
+            is.appendChild(element, child);
+            extraChilds.push(child);
+            return child;
+        });
+        const $result = this[nameIndex ? 'insertBefore' : 'insertAfter']($target);
+        is.$(extraChilds).remove();
+        return $result;
+    };
+});

package/dist/cjs/array-DklQ4VWF.js

@@ -0,0 +1,25 @@
+'use strict';
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function*o(o,f){if(void 0!==o){let i=0;for(const t of o)yield f(t,i++);}}
+
+/**
+ * 检查两个数组是否包含相同的元素，不考虑顺序
+ * @param a
+ * @param b
+ */
+const arraysEqualIgnoreOrder = (a, b) => {
+    if (a.length !== b.length) {
+        return false;
+    }
+    const sortedA = [...a].sort();
+    const sortedB = [...b].sort();
+    return sortedA.every((value, index) => value === sortedB[index]);
+};
+
+exports.arraysEqualIgnoreOrder = arraysEqualIgnoreOrder;
+exports.o = o;

package/dist/cjs/breakpoint-DZJ9czf-.js

@@ -0,0 +1,106 @@
+'use strict';
+
+var is = require('./is-BZqNsJMQ.js');
+require('./appendTo-AncJu7qG.js');
+var helper = require('./helper-CSyCWEcu.js');
+
+/**
+ * 断点相关的 js 函数
+ * 这些函数直接导出到 mdui 全局对象下，供应用使用。框架内部使用时，为避免循环依赖，从 @mdui/shared 包内导入
+ */
+/**
+ * 获取断点对象，通过返回的对象可用于判断指定宽度、或指定元素的宽度、或当前窗口宽度与各个断点值的关系
+ *
+ * * 未传入参数时，获取的是 `window` 的宽度对应的断点对象
+ * * 若传入数值，则获取的是该数值宽度对应的断点对象
+ * * 若传入 CSS 选择器，则获取的是该选择器对应元素的宽度对应的断点对象
+ * * 若传入 HTML 元素，则获取的是该元素的宽度对应的断点对象
+ * * 若传入 JQ 对象，则获取的是该 JQ 对象中的元素的宽度对应的断点对象
+ *
+ * 返回的对象包含以下方法：
+ *
+ * * `up(breakpoint)`：判断当前宽度是否大于指定断点值
+ * * `down(breakpoint)`：判断当前宽度是否小于指定断点值
+ * * `only(breakpoint)`：判断当前宽度是否在指定断点值内
+ * * `not(breakpoint)`：判断当前宽度是否不在指定断点值内
+ * * `between(startBreakpoint, endBreakpoint)`：判断当前宽度是否在指定断点值之间
+ */
+const breakpoint = (width) => {
+    const window = is.getWindow();
+    const document = is.getDocument();
+    const computedStyle = window.getComputedStyle(document.documentElement);
+    // 容器的宽度
+    const containerWidth = helper.isElement(width)
+        ? is.$(width).innerWidth()
+        : helper.isNumber(width)
+            ? width
+            : is.$(window).innerWidth();
+    // 断点对应的宽度值
+    const getBreakpointValue = (breakpoint) => {
+        const width = computedStyle
+            .getPropertyValue(`--mdui-breakpoint-${breakpoint}`)
+            .toLowerCase();
+        return parseFloat(width);
+    };
+    // 获取比指定断点更大的一个断点
+    const getNextBreakpoint = (breakpoint) => {
+        switch (breakpoint) {
+            case 'xs':
+                return 'sm';
+            case 'sm':
+                return 'md';
+            case 'md':
+                return 'lg';
+            case 'lg':
+                return 'xl';
+            case 'xl':
+                return 'xxl';
+        }
+    };
+    return {
+        /**
+         * 当前宽度是否大于指定断点值
+         * @param breakpoint
+         */
+        up(breakpoint) {
+            return containerWidth >= getBreakpointValue(breakpoint);
+        },
+        /**
+         * 当前宽度是否小于指定断点值
+         * @param breakpoint
+         */
+        down(breakpoint) {
+            return containerWidth < getBreakpointValue(breakpoint);
+        },
+        /**
+         * 当前宽度是否在指定断点值内
+         * @param breakpoint
+         */
+        only(breakpoint) {
+            if (breakpoint === 'xxl') {
+                return this.up(breakpoint);
+            }
+            else {
+                return this.up(breakpoint) && this.down(getNextBreakpoint(breakpoint));
+            }
+        },
+        /**
+         * 当前宽度是否不在指定断点值内
+         * @param breakpoint
+         */
+        not(breakpoint) {
+            return !this.only(breakpoint);
+        },
+        /**
+         * 当前宽度是否在指定断点值之间
+         * @param startBreakpoint
+         * @param endBreakpoint
+         * @returns
+         */
+        between(startBreakpoint, endBreakpoint) {
+            return this.up(startBreakpoint) && this.down(endBreakpoint);
+        },
+    };
+};
+
+exports.breakpoint = breakpoint;

package/dist/cjs/button-base-DB811IFG.js

@@ -0,0 +1,210 @@
+'use strict';
+
+var componentStyle = require('./component-style-DynYNNFH.js');
+var helper = require('./helper-CSyCWEcu.js');
+var ifDefined = require('./if-defined-PTiMDrJQ.js');
+var anchor = require('./anchor-5TTsOQUs.js');
+var form = require('./form-B68_3t2J.js');
+var is = require('./is-BZqNsJMQ.js');
+var template = require('./template-BXSzuubO.js');
+var rippleMixin = require('./ripple-mixin-ORJWLe-4.js');
+require('./index-CUOJ7A09.js');
+
+const buttonBaseStyle = componentStyle.i$1 `.button{position:relative;display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0;overflow:hidden;color:inherit;font-size:inherit;font-family:inherit;font-weight:inherit;letter-spacing:inherit;white-space:nowrap;text-align:center;text-decoration:none;vertical-align:middle;background:0 0;border:none;outline:0;cursor:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none}`;
+
+class ButtonBase extends anchor.AnchorMixin(rippleMixin.RippleMixin(rippleMixin.FocusableMixin(componentStyle.MduiElement))) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否禁用
+         */
+        this.disabled = false;
+        /**
+         * 是否处于加载中状态
+         */
+        this.loading = false;
+        /**
+         * 按钮的名称，将与表单数据一起提交。
+         *
+         * **Note**：仅在未设置 `href` 属性时，此属性才有效。
+         */
+        this.name = '';
+        /**
+         * 按钮的初始值，将与表单数据一起提交。
+         *
+         * **Note**：仅在未设置 `href` 属性时，此属性才有效。
+         */
+        this.value = '';
+        /**
+         * 按钮的类型。默认类型为 `button`。可选类型包括：
+         *
+         * * `submit`：点击按钮会提交表单数据到服务器
+         * * `reset`：点击按钮会将表单中的所有字段重置为初始值
+         * * `button`：此类型的按钮没有默认行为
+         *
+         * **Note**：仅在未指定 `href` 属性时，此属性才有效。
+         */
+        this.type = 'button';
+        /**
+         * 如果设置了此属性，表单提交时将不执行表单验证。
+         *
+         * 如果设置了此属性，将覆盖 `<form>` 元素的 `novalidate` 属性。
+         *
+         * **Note**：仅在未设置 `href` 属性且 `type="submit"` 时，此属性才有效。
+         */
+        this.formNoValidate = false;
+        this.formController = new form.FormController(this);
+    }
+    /**
+     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
+     */
+    get validity() {
+        if (this.isButton()) {
+            return this.focusElement.validity;
+        }
+    }
+    /**
+     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
+     */
+    get validationMessage() {
+        if (this.isButton()) {
+            return this.focusElement.validationMessage;
+        }
+    }
+    get rippleDisabled() {
+        return this.disabled || this.loading;
+    }
+    get focusElement() {
+        return this.isButton()
+            ? this.renderRoot?.querySelector('._button')
+            : !this.focusDisabled
+                ? this.renderRoot?.querySelector('._a')
+                : this;
+    }
+    get focusDisabled() {
+        return this.disabled || this.loading;
+    }
+    /**
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
+     */
+    checkValidity() {
+        if (this.isButton()) {
+            const valid = this.focusElement.checkValidity();
+            if (!valid) {
+                // @ts-ignore
+                this.emit('invalid', {
+                    bubbles: false,
+                    cancelable: true,
+                    composed: false,
+                });
+            }
+            return valid;
+        }
+        return true;
+    }
+    /**
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
+     *
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
+     */
+    reportValidity() {
+        if (this.isButton()) {
+            const invalid = !this.focusElement.reportValidity();
+            if (invalid) {
+                // @ts-ignore
+                this.emit('invalid', {
+                    bubbles: false,
+                    cancelable: true,
+                    composed: false,
+                });
+                // todo 考虑是否要支持 preventDefault() 方法，当前 invalid 状态没有样式
+            }
+            return !invalid;
+        }
+        return true;
+    }
+    /**
+     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
+     *
+     * @param message 自定义的错误提示文本
+     */
+    setCustomValidity(message) {
+        if (this.isButton()) {
+            this.focusElement.setCustomValidity(message);
+        }
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.addEventListener('click', () => {
+            if (this.type === 'submit') {
+                this.formController.submit(this);
+            }
+            if (this.type === 'reset') {
+                this.formController.reset(this);
+            }
+        });
+    }
+    renderLoading() {
+        return this.loading
+            ? componentStyle.x `<mdui-circular-progress part="loading"></mdui-circular-progress>`
+            : template.nothingTemplate;
+    }
+    renderButton({ id, className, part, content = componentStyle.x `<slot></slot>`, }) {
+        return componentStyle.x `<button id="${ifDefined.o(id)}" class="${anchor.cc(['_button', className])}" part="${ifDefined.o(part)}" ?disabled="${this.rippleDisabled || this.focusDisabled}">${content}</button>`;
+    }
+    isButton() {
+        return !this.href;
+    }
+}
+ButtonBase.styles = [
+    componentStyle.componentStyle,
+    buttonBaseStyle,
+];
+componentStyle.__decorate([
+    helper.n({
+        type: Boolean,
+        reflect: true,
+        converter: is.booleanConverter,
+    })
+], ButtonBase.prototype, "disabled", void 0);
+componentStyle.__decorate([
+    helper.n({
+        type: Boolean,
+        reflect: true,
+        converter: is.booleanConverter,
+    })
+], ButtonBase.prototype, "loading", void 0);
+componentStyle.__decorate([
+    helper.n({ reflect: true })
+], ButtonBase.prototype, "name", void 0);
+componentStyle.__decorate([
+    helper.n({ reflect: true })
+], ButtonBase.prototype, "value", void 0);
+componentStyle.__decorate([
+    helper.n({ reflect: true })
+], ButtonBase.prototype, "type", void 0);
+componentStyle.__decorate([
+    helper.n({ reflect: true })
+], ButtonBase.prototype, "form", void 0);
+componentStyle.__decorate([
+    helper.n({ reflect: true, attribute: 'formaction' })
+], ButtonBase.prototype, "formAction", void 0);
+componentStyle.__decorate([
+    helper.n({ reflect: true, attribute: 'formenctype' })
+], ButtonBase.prototype, "formEnctype", void 0);
+componentStyle.__decorate([
+    helper.n({ reflect: true, attribute: 'formmethod' })
+], ButtonBase.prototype, "formMethod", void 0);
+componentStyle.__decorate([
+    helper.n({
+        type: Boolean,
+        reflect: true,
+        converter: is.booleanConverter,
+        attribute: 'formnovalidate',
+    })
+], ButtonBase.prototype, "formNoValidate", void 0);
+componentStyle.__decorate([
+    helper.n({ reflect: true, attribute: 'formtarget' })
+], ButtonBase.prototype, "formTarget", void 0);
+
+exports.ButtonBase = ButtonBase;

package/dist/cjs/check-BX7ajjfI.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var componentStyle = require('./component-style-DynYNNFH.js');
+var svgTag = require('./svg-tag-RUsb7uPH.js');
+
+let IconCheck = class IconCheck extends componentStyle.i {
+    render() {
+        return svgTag.svgTag('<path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>');
+    }
+};
+IconCheck.styles = svgTag.style;
+IconCheck = componentStyle.__decorate([
+    componentStyle.t('mdui-icon-check')
+], IconCheck);

package/dist/cjs/children-BbRaA9l5.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var is = require('./is-BZqNsJMQ.js');
+var helper = require('./helper-CSyCWEcu.js');
+
+is.$.fn.children = function (selector) {
+    const children = [];
+    this.each((_, element) => {
+        helper.eachArray(element.childNodes, (childNode) => {
+            if (!helper.isElement(childNode)) {
+                return;
+            }
+            if (!selector || is.$(childNode).is(selector)) {
+                children.push(childNode);
+            }
+        });
+    });
+    return new is.JQ(is.unique(children));
+};