urnovl-web-components 0.0.255 → 0.0.257

package/dist/cjs/anchor-B2WOhfFL.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var componentStyle = require('./component-style-BC5DdXyd.js');
+var directive = require('./directive-CxKj9eM_.js');
+var ifDefined = require('./if-defined-CSIrgCHw.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([
+        directive.n({ reflect: true })
+    ], AnchorMixinClass.prototype, "href", void 0);
+    componentStyle.__decorate([
+        directive.n({ reflect: true })
+    ], AnchorMixinClass.prototype, "download", void 0);
+    componentStyle.__decorate([
+        directive.n({ reflect: true })
+    ], AnchorMixinClass.prototype, "target", void 0);
+    componentStyle.__decorate([
+        directive.n({ reflect: true })
+    ], AnchorMixinClass.prototype, "rel", void 0);
+    return AnchorMixinClass;
+};
+
+exports.AnchorMixin = AnchorMixin;
+exports.cc = cc;

package/dist/cjs/appendTo-DN8OV-GK.js

@@ -0,0 +1,237 @@
+'use strict';
+
+var get$1 = require('./get-DihLFVsH.js');
+var attr = require('./attr-D_LyPdSc.js');
+var directive = require('./directive-CxKj9eM_.js');
+
+/**
+ * 值上面的 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 (attr.getExtraWidth(element, name.toLowerCase(), extra) *
+            multiply);
+    };
+    if (funcIndex === 2 && includeMargin) {
+        value += getExtraWidthValue('margin');
+    }
+    if (attr.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 = get$1.getDocument();
+    const clientProp = `client${name}`;
+    const scrollProp = `scroll${name}`;
+    const offsetProp = `offset${name}`;
+    const innerProp = `inner${name}`;
+    // $(window).width()
+    if (directive.isWindow(element)) {
+        // outerWidth, outerHeight 需要包含滚动条的宽度
+        return funcIndex === 2
+            ? element[innerProp]
+            : directive.toElement(document)[clientProp];
+    }
+    // $(document).width()
+    if (directive.isDocument(element)) {
+        const doc = directive.toElement(element);
+        return Math.max(
+        // @ts-ignore
+        element.body[scrollProp], doc[scrollProp], 
+        // @ts-ignore
+        element.body[offsetProp], doc[offsetProp], doc[clientProp]);
+    }
+    const value = parseFloat(attr.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 = directive.isFunction(value)
+        ? value.call(element, elementIndex, get(element, name, funcIndex, includeMargin))
+        : value;
+    if (computedValue == null) {
+        return;
+    }
+    const $element = get$1.$(element);
+    const dimension = name.toLowerCase();
+    // 特殊的值，不需要计算 padding、border、margin
+    if (directive.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);
+};
+directive.eachArray(['Width', 'Height'], (name) => {
+    directive.eachArray([`inner${name}`, name.toLowerCase(), `outer${name}`], (funcName, funcIndex) => {
+        get$1.$.fn[funcName] = function (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        margin, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        value) {
+            // 是否是赋值操作
+            const isSet = arguments.length && (funcIndex < 2 || !directive.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);
+            });
+        };
+    });
+});
+
+directive.eachArray(['add', 'remove', 'toggle'], (name) => {
+    get$1.$.fn[`${name}Class`] = function (className) {
+        if (name === 'remove' && !arguments.length) {
+            return this.each((_, element) => {
+                attr.setAttribute(element, 'class', '');
+            });
+        }
+        return this.each((i, element) => {
+            if (!directive.isElement(element)) {
+                return;
+            }
+            const classes = (directive.isFunction(className)
+                ? className.call(element, i, attr.getAttribute(element, 'class', ''))
+                : className)
+                .split(' ')
+                .filter((name) => name);
+            directive.eachArray(classes, (cls) => {
+                element.classList[name](cls);
+            });
+        });
+    };
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-function-type
+function each(target, callback) {
+    // eachArray 回调函数是 value, key，这里的 each 函数是 key, value
+    return directive.isArrayLike(target)
+        ? directive.eachArray(target, (value, index) => {
+            return callback.call(value, index, value);
+        })
+        : directive.eachObject(target, callback);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-function-type
+function map(elements, callback) {
+    const window = get$1.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 @typescript-eslint/no-explicit-any
+get$1.$.fn.map = function (callback) {
+    return new get$1.JQ(map(this, (element, i) => {
+        return callback.call(element, i, element);
+    }));
+};
+
+directive.eachArray(['insertBefore', 'insertAfter'], (name, nameIndex) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    get$1.$.fn[name] = function (target) {
+        const $element = nameIndex ? get$1.$(this.get().reverse()) : this; // 顺序和 jQuery 保持一致
+        const $target = get$1.$(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 get$1.$(nameIndex ? result.reverse() : result);
+    };
+});
+
+get$1.$.fn.remove = function (selector) {
+    return this.each((_, element) => {
+        if (!selector || get$1.$(element).is(selector)) {
+            get$1.removeChild(element);
+        }
+    });
+};
+
+directive.eachArray(['appendTo', 'prependTo'], (name, nameIndex) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    get$1.$.fn[name] = function (target) {
+        const extraChilds = [];
+        const $target = get$1.$(target).map((_, element) => {
+            const childNodes = element.childNodes;
+            const childLength = childNodes.length;
+            if (childLength) {
+                return childNodes[nameIndex ? 0 : childLength - 1];
+            }
+            const child = get$1.createElement('div');
+            get$1.appendChild(element, child);
+            extraChilds.push(child);
+            return child;
+        });
+        const $result = this[nameIndex ? 'insertBefore' : 'insertAfter']($target);
+        get$1.$(extraChilds).remove();
+        return $result;
+    };
+});

package/dist/cjs/attr-D_LyPdSc.js

@@ -0,0 +1,374 @@
+'use strict';
+
+var get = require('./get-DihLFVsH.js');
+var directive = require('./directive-CxKj9eM_.js');
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+get.$.fn.is = function (selector) {
+    let isMatched = false;
+    if (directive.isFunction(selector)) {
+        this.each((index, element) => {
+            if (selector.call(element, index, element)) {
+                isMatched = true;
+            }
+        });
+        return isMatched;
+    }
+    if (directive.isString(selector)) {
+        this.each((_, element) => {
+            if (directive.isDocument(element) || directive.isWindow(element)) {
+                return;
+            }
+            if (element.matches.call(element, selector)) {
+                isMatched = true;
+            }
+        });
+        return isMatched;
+    }
+    const $compareWith = get.$(selector);
+    this.each((_, element) => {
+        $compareWith.each((_, compare) => {
+            if (element === compare) {
+                isMatched = true;
+            }
+        });
+    });
+    return isMatched;
+};
+
+/**
+ * 过滤掉数组中的重复元素
+ * @param arr 数组
+ * @example
+```js
+unique([1, 2, 12, 3, 2, 1, 2, 1, 1]);
+// [1, 2, 12, 3]
+```
+ */
+const unique = (arr) => {
+    return [...new Set(arr)];
+};
+
+/**
+ * 判断组件是否定义完成
+ *
+ * 如果需要在组件操作或读取组件外部、或组件 slot 中的原生 DOM 时，则需要在 DOM 就绪时，才能认为组件定义完成
+ * 如果组件需要和其他组件配合使用，则需要等待其他组件定义完成后，才能认为组件定义完成
+ */
+class DefinedController {
+    constructor(host, options) {
+        /**
+         * 组件是否已定义完成
+         */
+        this.defined = false;
+        (this.host = host).addController(this);
+        this.relatedElements = options.relatedElements;
+        this.needDomReady = options.needDomReady || !!options.relatedElements;
+        this.onSlotChange = this.onSlotChange.bind(this);
+    }
+    hostConnected() {
+        this.host.shadowRoot.addEventListener('slotchange', this.onSlotChange);
+    }
+    hostDisconnected() {
+        this.host.shadowRoot.removeEventListener('slotchange', this.onSlotChange);
+    }
+    /**
+     * 判断组件是否定义完成
+     */
+    isDefined() {
+        if (this.defined) {
+            return true;
+        }
+        this.defined =
+            (!this.needDomReady || get.isDomReady()) &&
+                !this.getUndefinedLocalNames().length;
+        return this.defined;
+    }
+    /**
+     * 在组件定义完成后，promise 被 resolve
+     */
+    async whenDefined() {
+        if (this.defined) {
+            return Promise.resolve();
+        }
+        const document = get.getDocument();
+        if (this.needDomReady && !get.isDomReady(document)) {
+            await new Promise((resolve) => {
+                document.addEventListener('DOMContentLoaded', () => resolve(), {
+                    once: true,
+                });
+            });
+        }
+        const undefinedLocalNames = this.getUndefinedLocalNames();
+        if (undefinedLocalNames.length) {
+            const promises = [];
+            undefinedLocalNames.forEach((localName) => {
+                promises.push(customElements.whenDefined(localName));
+            });
+            await Promise.all(promises);
+        }
+        this.defined = true;
+        return;
+    }
+    /**
+     * slot 中的未完成定义的相关 Web components 组件的 CSS 选择器
+     */
+    getScopeLocalNameSelector() {
+        const localNames = this.relatedElements;
+        if (!localNames) {
+            return null;
+        }
+        if (Array.isArray(localNames)) {
+            return localNames
+                .map((localName) => `${localName}:not(:defined)`)
+                .join(',');
+        }
+        return Object.keys(localNames)
+            .filter((localName) => !localNames[localName])
+            .map((localName) => `${localName}:not(:defined)`)
+            .join(',');
+    }
+    /**
+     * 整个页面中的未完成定义的相关 Web components 组件的 CSS 选择器
+     */
+    getGlobalLocalNameSelector() {
+        const localNames = this.relatedElements;
+        if (!localNames || Array.isArray(localNames)) {
+            return null;
+        }
+        return Object.keys(localNames)
+            .filter((localName) => localNames[localName])
+            .map((localName) => `${localName}:not(:defined)`)
+            .join(',');
+    }
+    /**
+     * 获取未完成定义的相关 Web components 组件名
+     */
+    getUndefinedLocalNames() {
+        const scopeSelector = this.getScopeLocalNameSelector();
+        const globalSelector = this.getGlobalLocalNameSelector();
+        const undefinedScopeElements = scopeSelector
+            ? [...this.host.querySelectorAll(scopeSelector)]
+            : [];
+        const undefinedGlobalElements = globalSelector
+            ? [...get.getDocument().querySelectorAll(globalSelector)]
+            : [];
+        const localNames = [
+            ...undefinedScopeElements,
+            ...undefinedGlobalElements,
+        ].map((element) => element.localName);
+        return unique(localNames);
+    }
+    /**
+     * slot 变更时，若 slot 中包含未完成定义的相关 Web components 组件，则组件未定义完成
+     */
+    onSlotChange() {
+        const selector = this.getScopeLocalNameSelector();
+        if (selector) {
+            const undefinedElements = this.host.querySelectorAll(selector);
+            if (undefinedElements.length) {
+                this.defined = false;
+            }
+        }
+    }
+}
+
+/**
+ * 在原生的 HTML 中，布尔属性只要添加了属性名，不论属性值设置成什么，属性值都是 true
+ * 但这里设置了 attr="false" 时，要把属性设置为 false
+ *
+ * 原因是：
+ * 在 vue3 中，通过 :attr="value" 设置属性时，vue 会优先从 DOM 属性中寻找是否存在 attr 属性名，
+ * 若存在，则设置对应的 DOM 属性，否则设置对应的 attribute 属性
+ * 但在 vue 的服务端渲染（ssr）时，不存在 DOM 对象，所以会把 attribute 属性设置成 attr="true" 或 attr="false"
+ * 所以在 attribute 属性 attr="false" 时，需要把属性值转换为布尔值 false
+ *
+ * 在 CSS 中选择布尔属性时，必须排除掉属性值为 false 的情况。i 表示不区分大小写。仅 public 属性需要这样处理，private 和 protected 属性不需要
+ * 例如：:host([hide]:not([hide="false" i])) { ... }
+ *
+ * 这段代码不能封装成函数，否则生成 custom-elements.json 会识别不了
+ * 这段注释仅在这里写一次，其他地方不再重复
+ *
+ * @see https://v3-migration.vuejs.org/zh/breaking-changes/attribute-coercion.html
+ */
+const booleanConverter = (value) => {
+    return value !== null && value.toLowerCase() !== 'false';
+};
+
+/**
+ * 获取元素的样式值
+ * @param element
+ * @param name
+ */
+const getComputedStyleValue = (element, name) => {
+    const window = get.getWindow();
+    return window.getComputedStyle(element).getPropertyValue(directive.toKebabCase(name));
+};
+/**
+ * 检查元素的 box-sizing 是否是 border-box
+ * @param element
+ */
+const isBorderBox = (element) => {
+    return getComputedStyleValue(element, 'box-sizing') === 'border-box';
+};
+/**
+ * 获取元素的 padding, border, margin 宽度（两侧宽度的和，单位为px）
+ * @param element
+ * @param direction
+ * @param extra
+ */
+const getExtraWidth = (element, direction, extra) => {
+    const position = direction === 'width'
+        ? ['Left', 'Right']
+        : ['Top', 'Bottom'];
+    return [0, 1].reduce((prev, _, index) => {
+        let prop = extra + position[index];
+        if (extra === 'border') {
+            prop += 'Width';
+        }
+        return prev + parseFloat(getComputedStyleValue(element, prop) || '0');
+    }, 0);
+};
+/**
+ * 获取元素的样式值，对 width 和 height 进行过处理
+ * @param element
+ * @param name
+ */
+const getStyle = (element, name) => {
+    // width、height 属性使用 getComputedStyle 得到的值不准确，需要使用 getBoundingClientRect 获取
+    if (name === 'width' || name === 'height') {
+        const valueNumber = element.getBoundingClientRect()[name];
+        if (isBorderBox(element)) {
+            return `${valueNumber}px`;
+        }
+        return `${valueNumber -
+            getExtraWidth(element, name, 'border') -
+            getExtraWidth(element, name, 'padding')}px`;
+    }
+    return getComputedStyleValue(element, name);
+};
+/**
+ * 数值单位的 CSS 属性
+ */
+const cssNumber = [
+    'animation-iteration-count',
+    'column-count',
+    'fill-opacity',
+    'flex-grow',
+    'flex-shrink',
+    'font-weight',
+    'grid-area',
+    'grid-column',
+    'grid-column-end',
+    'grid-column-start',
+    'grid-row',
+    'grid-row-end',
+    'grid-row-start',
+    'line-height',
+    'opacity',
+    'order',
+    'orphans',
+    'widows',
+    'z-index',
+    'zoom',
+];
+
+/**
+ * 获取属性值
+ * @param element
+ * @param key 属性键名
+ * @param defaultValue 当 element.getAttribute 为 null 时，默认返回 undefined
+ */
+const getAttribute = (element, key, defaultValue) => {
+    const value = element.getAttribute(key);
+    return directive.isNull(value) ? defaultValue : value;
+};
+/**
+ * 移除属性
+ * @param element
+ * @param key 属性键名
+ */
+const removeAttribute = (element, key) => {
+    element.removeAttribute(key);
+};
+/**
+ * 设置属性值
+ * @param element
+ * @param key 属性键名
+ * @param value 值，若为 null，则调用 removeAttribute
+ */
+const setAttribute = (element, key, value) => {
+    if (directive.isNull(value)) {
+        removeAttribute(element, key);
+    }
+    else {
+        element.setAttribute(key, value);
+    }
+};
+
+directive.eachArray(['attr', 'prop', 'css'], (name, nameIndex) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const set = (element, key, value) => {
+        // 值为 undefined 时，不修改
+        if (directive.isUndefined(value)) {
+            return;
+        }
+        // attr
+        if (nameIndex === 0) {
+            return setAttribute(element, key, value);
+        }
+        // prop
+        if (nameIndex === 1) {
+            // @ts-ignore
+            element[key] = value;
+            return;
+        }
+        // css
+        key = directive.toKebabCase(key);
+        // 获取默认后缀。以 -- 开头的为 CSS 变量，不添加后缀；值为数值类型的不添加后缀
+        const getSuffix = () => key.startsWith('--') || cssNumber.includes(key) ? '' : 'px';
+        element.style.setProperty(key, directive.isNumber(value) ? `${value}${getSuffix()}` : value);
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const get$1 = (element, key) => {
+        // attr
+        if (nameIndex === 0) {
+            // 属性不存在时，原生 getAttribute 方法返回 null，而 jquery 返回 undefined。这里和 jquery 保持一致
+            return getAttribute(element, key);
+        }
+        // prop
+        if (nameIndex === 1) {
+            // @ts-ignore
+            return element[key];
+        }
+        return getStyle(element, key);
+    };
+    get.$.fn[name] = function (key, 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value) {
+        if (directive.isObjectLike(key)) {
+            directive.eachObject(key, (k, v) => {
+                // @ts-ignore
+                this[name](k, v);
+            });
+            return this;
+        }
+        if (arguments.length === 1) {
+            const element = this[0];
+            return directive.isElement(element) ? get$1(element, key) : undefined;
+        }
+        return this.each((i, element) => {
+            set(element, key, directive.isFunction(value) ? value.call(element, i, get$1(element, key)) : value);
+        });
+    };
+});
+
+exports.DefinedController = DefinedController;
+exports.booleanConverter = booleanConverter;
+exports.getAttribute = getAttribute;
+exports.getComputedStyleValue = getComputedStyleValue;
+exports.getExtraWidth = getExtraWidth;
+exports.isBorderBox = isBorderBox;
+exports.removeAttribute = removeAttribute;
+exports.setAttribute = setAttribute;
+exports.unique = unique;