compelem 0.2.1-beta → 0.2.2-beta

package/index.js

@@ -1,3172 +1,7 @@
 /**
-   * compelem v0.2.1-beta.1731600715
+   * compelem v0.2.2-beta.1731842602
    * A modern, reactive, fast, lightweight and flexible lib for building web components
    * @holyhigh2
    * https://github.com/holyhigh2/compelem
    */
-  import { toPath, isObject, isDefined, get, isUndefined, isEmpty, has, concat, set, merge, cloneDeep, each, kebabCase, last, isEqual, startsWith, includes, clone, isFunction, isElement, isArray, initial, find, debounce, throttle, once, remove, map, size, isBlank, join, split, replace, compact, toArray, assign, first, isString, closest, bind as bind$1, trim, omitBy, camelCase, isNil, some, isNull, fval, test, omit, flatMap, groupBy, reject, filter, slice, head, trimStart, trimEnd, replaceAll, snakeCase, toString, findIndex, call } from 'myfx';
-
-function showError(msg) {
-    console.error(`[CompElem]`, msg);
-}
-function showTagError(tagName, msg) {
-    console.error(`[CompElem <${tagName}>]`, msg);
-}
-function showWarn(...args) {
-    console.warn(`[CompElem]`, ...args);
-}
-//为依赖收集提供标准地址
-function _toUpdatePath(varPath) {
-    return toPath(varPath).join("-");
-}
-//获取父类构造
-function _getSuper(cls) {
-    return Object.getPrototypeOf(cls);
-}
-
-//装饰器类型
-var DecoratorType;
-(function (DecoratorType) {
-    DecoratorType["CLASS"] = "class";
-    DecoratorType["FIELD"] = "field";
-    DecoratorType["METHOD"] = "method";
-})(DecoratorType || (DecoratorType = {}));
-/**
- * 用于构造装饰器
- * @author holyhigh2
- */
-class Decorator {
-}
-
-const GetKeyFnName = 'getKey';
-const DecoratorsKey = '__decorators';
-/**
- * 装饰器包装类
- * 用于框架内部，表示class上的一个装饰器属性定义
- * 该定义在实例初始化时会产生装饰器实例属性
- */
-class DecoratorWrapper {
-    //execute 参数
-    args;
-    //装饰器参数
-    metadata;
-    decoratorClass;
-    instanceMap;
-    key; //装饰器唯一key
-    constructor(args, metadata, decoratorClass) {
-        this.args = args;
-        this.metadata = metadata;
-        this.decoratorClass = decoratorClass;
-        this.instanceMap = new WeakMap;
-    }
-    //在组件构造时调用
-    create(comp) {
-        let ins = new this.decoratorClass(...this.args);
-        //1. 校验targets
-        let targets = ins.targets;
-        let decoType = undefined;
-        let descriptor = this.metadata[2];
-        if (isObject(descriptor) && isDefined(get(descriptor, 'configurable'))) {
-            decoType = DecoratorType.METHOD;
-        }
-        else if (isUndefined(this.metadata[2])) {
-            decoType = DecoratorType.FIELD;
-        }
-        if (isEmpty(targets) || !decoType || !targets.includes(decoType)) {
-            showError(`Decorator '${this.decoratorClass.name}' is out of targets, expect '${targets.join(',')}' bug got '${decoType}'`);
-            return;
-        }
-        ins.created(comp, ...this.metadata);
-        this.instanceMap.set(comp, ins);
-    }
-    propsReady(comp, setReactive) {
-        let ins = this.instanceMap.get(comp);
-        ins.propsReady(comp, setReactive, ...this.metadata);
-    }
-    mounted(comp, setReactive) {
-        let ins = this.instanceMap.get(comp);
-        ins.mounted(comp, setReactive, ...this.metadata);
-    }
-    updated(comp, changed) {
-        this.instanceMap.get(comp).updated(comp, changed);
-    }
-}
-//每个装饰器类中不同组件类中的重复key
-const DecoKeyMap = new WeakMap();
-/**
- * 该函数用于创建一个装饰器
- * @param decoClass 装饰器构造
- * @returns 装饰器函数
- */
-function decorator(decoClass) {
-    return (...args) => {
-        return (...metadata) => {
-            let constr = metadata[0].constructor;
-            let ary = get(constr, DecoratorsKey);
-            if (!has(constr, DecoratorsKey)) {
-                //继承父类
-                let parentAry = get(Object.getPrototypeOf(constr), DecoratorsKey);
-                ary = parentAry ? concat(parentAry) : [];
-                set(constr, DecoratorsKey, ary);
-            }
-            let getKey = get(decoClass, GetKeyFnName);
-            if (getKey) {
-                let compMap = DecoKeyMap.get(decoClass);
-                if (!compMap) {
-                    compMap = new WeakMap;
-                    DecoKeyMap.set(decoClass, compMap);
-                }
-                let kMap = compMap.get(constr);
-                if (!kMap) {
-                    kMap = {};
-                    compMap.set(constr, kMap);
-                }
-                let k = getKey(...args);
-                if (kMap[k])
-                    return;
-                kMap[k] = true;
-            }
-            ary?.push(new DecoratorWrapper(args, metadata, decoClass));
-        };
-    };
-}
-
-//每个类需要监控的属性
-const ObservedAttrsMap = new WeakMap;
-function prop(options) {
-    if (arguments.length === 1) {
-        return (target, propertyKey, descriptor) => {
-            options.required = options.required || false;
-            options.attribute = options.attribute === false ? false : true;
-            defineProp(target, propertyKey, options, descriptor);
-        };
-    }
-    let target = arguments[0], propertyKey = arguments[1], descriptor = arguments[2];
-    defineProp(target, propertyKey, { type: undefined, required: false, attribute: true }, descriptor);
-}
-function defineProp(target, propertyKey, options, descriptor) {
-    if (!/[a-z]/.test(propertyKey[0])) {
-        showError(`Prop '${propertyKey}' must be in CamelCase`);
-    }
-    let attrSet;
-    if (!has(target.constructor, '__deco_props')) {
-        const mixinProps = {};
-        let parentCtor = target.constructor;
-        while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
-            merge(mixinProps, parentCtor.__deco_props ? cloneDeep(parentCtor.__deco_props) : {});
-        }
-        target.constructor.__deco_props = mixinProps;
-        attrSet = new Set();
-        each(mixinProps, (v, k) => {
-            if (v.attribute) {
-                let kbb = kebabCase(k);
-                attrSet?.add(kbb);
-            }
-        });
-        ObservedAttrsMap.set(target.constructor, attrSet);
-    }
-    if (descriptor) {
-        if (descriptor.get)
-            options.getter = descriptor.get;
-        if (descriptor.set)
-            options.setter = descriptor.set;
-    }
-    if (options.attribute) {
-        let kbb = kebabCase(propertyKey);
-        attrSet?.add(kbb);
-    }
-    target.constructor.__deco_props[propertyKey] = options;
-}
-/**
- * 同@prop装饰器，但可用于构造器中调用
- * @param ctor 类构造函数
- * @param propertyKey prop名称
- * @param options
- */
-function makeProp(ctor, propertyKey, options) {
-    if (options) {
-        options.required = options.required || false;
-        options.attribute = options.attribute === false ? false : true;
-    }
-    defineProp(ctor.prototype, propertyKey, options || { type: undefined, required: false, attribute: true });
-}
-//内部接口
-const emptySet = new Set;
-function _getObservedAttrs(ctor) {
-    return ObservedAttrsMap.get(ctor) ?? emptySet;
-}
-
-/**
- * 用于提供全局state状态管理
- * @author holyhigh2
- */
-const EVENT_UPDATE = 'update';
-const Collector = {
-    startCss(comp) {
-        this.__cssCollecting = comp;
-    },
-    endCss() {
-        this.__cssCollecting = null;
-    },
-    setCssUpdater(updater) {
-        this.__cssUpdater = updater;
-    },
-    startCompute(comp) {
-        this.__computeCollecting = comp;
-    },
-    endCompute() {
-        this.__computeCollecting = null;
-    },
-    setComputedProp(updater) {
-        this.__computeUpdater = updater;
-    },
-    __computeCollecting: null,
-    __computeUpdater: null,
-    __cssCollecting: null,
-    __cssUpdater: null,
-    //仅用于指令在构造时获取
-    __directiveQ: [],
-    setDirectiveQ(val) {
-        let lastVar = last(this.__directiveQ);
-        if (lastVar && isEqual(lastVar, val))
-            return;
-        if (lastVar && lastVar.length < val.length && startsWith(val.join(','), lastVar.join(','))) {
-            this.__directiveQ[this.__directiveQ.length - 1] = val;
-            return;
-        }
-        this.__directiveQ.push(val);
-    },
-    popDirectiveQ() {
-        let rs = concat(this.__directiveQ);
-        this.__directiveQ = [];
-        return rs;
-    },
-    startRender(context) {
-        this.__renderCollecting = true;
-        this.__renderContext = context;
-    },
-    endRender(component) {
-        //注册依赖
-        this.__renderCollection.forEach((varPath) => {
-            component._regDeps(varPath, this.__renderContext);
-        });
-        this.__renderCollection.clear();
-        this.__renderCollecting = false;
-        this.__renderContext = null;
-    },
-    collect(prop) {
-        this.__renderCollection.add(prop);
-    },
-    clear() {
-        this.__directiveQ = [];
-    },
-    __renderCollection: new Set(),
-    __renderContext: null,
-    __renderCollecting: false,
-    __skipCheck: false
-};
-const OBJECT_META_DATA = new WeakMap();
-const OBJECT_VAR_PATH = new WeakMap();
-const COMPUTED_MAP = new WeakMap();
-const CSS_MAP = new WeakMap();
-/**
- * 1. 初始化时obj都是普通对象
- * 2. OBJECT_VAR_PATH 首次是普通对象
- * 3. OBJECT_META_DATA 直接绑定代理对象
- * @param obj
- * @param context
- * @returns
- */
-function reactive(obj, context) {
-    if (!isObject(obj))
-        return obj;
-    const proxyObject = obj.__proxy ? obj : new Proxy(obj, {
-        get(target, prop, receiver) {
-            const ks = Object.keys(target);
-            const value = Reflect.get(target, prop, receiver);
-            if (!includes(ks, prop)) {
-                return value;
-            }
-            if (target.hasOwnProperty(prop)) {
-                let chain = OBJECT_VAR_PATH.get(receiver) ?? [];
-                let subChain = concat(chain, [prop]);
-                let subChainStr = subChain.join('-');
-                if (Collector.__renderCollecting) {
-                    Collector.collect(_toUpdatePath(subChain));
-                    Collector.setDirectiveQ(subChain);
-                }
-                else if (Collector.__computeCollecting) {
-                    let watchVarMap = COMPUTED_MAP.get(Collector.__computeCollecting);
-                    if (!watchVarMap) {
-                        watchVarMap = {};
-                        COMPUTED_MAP.set(Collector.__computeCollecting, watchVarMap);
-                    }
-                    let list = watchVarMap[subChainStr];
-                    if (!list)
-                        list = watchVarMap[subChainStr] = [];
-                    list.push(Collector.__computeUpdater);
-                }
-                else if (Collector.__cssCollecting) {
-                    let watchVarMap = CSS_MAP.get(Collector.__cssCollecting);
-                    if (!watchVarMap) {
-                        watchVarMap = {};
-                        CSS_MAP.set(Collector.__cssCollecting, watchVarMap);
-                    }
-                    watchVarMap[subChainStr] = Collector.__cssUpdater;
-                }
-            }
-            return value;
-        },
-        set(target, prop, newValue, receiver) {
-            let sourceContext = OBJECT_META_DATA.get(receiver).from;
-            let propDefs = get(sourceContext.constructor, '__deco_props');
-            if (propDefs && propDefs[prop] && target.__isData) {
-                if (propDefs[prop].sync) {
-                    sourceContext.emit(EVENT_UPDATE + ":" + prop, { value: newValue });
-                }
-            }
-            let ov = target[prop];
-            let stateDefs = get(sourceContext.constructor, '__deco_states');
-            let hasChanged = get(propDefs, [prop, 'hasChanged']) || get(stateDefs, [prop, 'hasChanged']);
-            if (hasChanged) {
-                if (!hasChanged.call(sourceContext, newValue, ov))
-                    return false;
-            }
-            else {
-                //防止重复设置，如Array.length
-                if (target[prop] === newValue)
-                    return true;
-                if (Number.isNaN(newValue) && Number.isNaN(target[prop]))
-                    return false;
-            }
-            //todo 如果对象保存一层副本，如果要保存全部内容需要自行实现
-            if (isObject(ov)) {
-                ov = clone(ov);
-            }
-            let deps = OBJECT_META_DATA.get(receiver)?.contextSet;
-            //get oldValue from sourceContext
-            let chain = OBJECT_VAR_PATH.get(receiver) ?? [];
-            let subChain = concat(chain, [prop]);
-            let nv = newValue;
-            if (isObject(newValue) && !isFunction(newValue) && !isElement(newValue)) {
-                deps.forEach(dep => {
-                    let pathMap = OBJECT_META_DATA.get(receiver)?.pathMap;
-                    let pathAry = pathMap?.get(dep);
-                    if (!pathAry)
-                        return;
-                    subChain = concat(pathAry, [prop]);
-                    OBJECT_VAR_PATH.set(nv, subChain);
-                    nv = reactive(nv, dep);
-                    OBJECT_VAR_PATH.set(nv, subChain);
-                });
-            }
-            let rs = Reflect.set(target, prop, nv);
-            let pathMap = OBJECT_META_DATA.get(receiver).pathMap;
-            deps.forEach(dep => {
-                //view update
-                let pathAry = pathMap.get(dep);
-                if (!pathAry)
-                    return;
-                //数组length属性变动直接通知为数组自身变动
-                subChain = concat(pathAry, prop == 'length' && isArray(receiver) ? [] : [prop]);
-                dep._notify(ov, subChain);
-                let varPath = subChain.join('-');
-                //computed
-                let watchVarMap = COMPUTED_MAP.get(dep);
-                if (watchVarMap) {
-                    let computedList = watchVarMap[varPath];
-                    if (computedList) {
-                        computedList.forEach(computedGetter => {
-                            computedGetter.call(dep);
-                        });
-                    }
-                    let i = subChain.length - 1;
-                    while (i) {
-                        let subPath = subChain.slice(0, i).join('-');
-                        let computedList = watchVarMap[subPath];
-                        if (computedList) {
-                            computedList.forEach(computedGetter => {
-                                computedGetter.call(dep);
-                            });
-                        }
-                        i--;
-                    }
-                }
-                //css
-                let cssMap = CSS_MAP.get(dep);
-                if (cssMap) {
-                    let computedCss = cssMap[varPath];
-                    if (computedCss) {
-                        computedCss.call(dep);
-                    }
-                    let i = subChain.length - 1;
-                    while (i) {
-                        let subPath = subChain.slice(0, i).join('-');
-                        let computedCss = cssMap[subPath];
-                        if (computedCss) {
-                            computedCss.call(dep);
-                        }
-                        i--;
-                    }
-                }
-            });
-            return rs;
-        }
-    });
-    if (!obj.__proxy) {
-        Object.defineProperty(obj, "__proxy", {
-            enumerable: false,
-            writable: false,
-            configurable: false,
-            value: true,
-        });
-    }
-    let chain = OBJECT_VAR_PATH.get(obj) ?? [];
-    if (Object.isExtensible(obj) && !OBJECT_META_DATA.get(proxyObject)) {
-        let contextSet = new Set();
-        contextSet.add(context);
-        //对象所属context
-        let pathMap = new WeakMap();
-        pathMap.set(context, chain);
-        OBJECT_META_DATA.set(proxyObject, {
-            from: context,
-            contextSet,
-            pathMap
-        });
-    }
-    else {
-        let deps = OBJECT_META_DATA.get(proxyObject).contextSet;
-        deps.add(context);
-        let pathMap = OBJECT_META_DATA.get(proxyObject).pathMap;
-        let chains = pathMap.get(context);
-        let subChain = concat(chain);
-        if (chains && chains.join('') !== subChain.join('')) {
-            let parentVar = get(context, initial(chains));
-            //处理数组元素更新，如 ary.1 -> ary.0
-            if (!isArray(parentVar)) {
-                showWarn(`The object is referenced by more than one @state '${subChain.join('.')},${chains.join('.')}'`);
-            }
-            chains = subChain;
-        }
-        else {
-            pathMap.set(context, subChain);
-        }
-    }
-    for (let k in obj) {
-        const v = obj[k];
-        if (isObject(v) && !isFunction(v) && !isElement(v) && !(v instanceof Text)) {
-            OBJECT_VAR_PATH.set(v, concat(chain, [k]));
-            obj[k] = reactive(v, context);
-            OBJECT_VAR_PATH.set(obj[k], concat(chain, [k]));
-        }
-    }
-    return proxyObject;
-}
-
-/*************************************************************
- * 扩展事件
- * @author holyhigh2
- *
- * resize
- * outside.[mousedown/up/click/dblclick] 默认click
- *
- *************************************************************/
-const ExtEvNames = ['resize', 'outside'];
-///////////////////////////////////////////////// resize
-const AllResizeEls = new WeakMap;
-const AllOutsideDownEls = [];
-const resizeObserver = new ResizeObserver((entries) => {
-    for (const entry of entries) {
-        const contentBoxSize = Array.isArray(entry.contentBoxSize)
-            ? entry.contentBoxSize[0]
-            : entry.contentBoxSize;
-        const borderBoxSize = Array.isArray(entry.borderBoxSize)
-            ? entry.borderBoxSize[0]
-            : entry.borderBoxSize;
-        let cbk = AllResizeEls.get(entry.target);
-        if (cbk) {
-            let ev = new CustomEvent('resize', {
-                bubbles: false,
-                cancelable: false,
-                detail: {
-                    borderBox: { w: borderBoxSize.inlineSize, h: borderBoxSize.blockSize },
-                    contentBox: { w: contentBoxSize.inlineSize, h: contentBoxSize.blockSize },
-                },
-            });
-            cbk(ev);
-        }
-    }
-});
-function addResize(node, cbk) {
-    AllResizeEls.set(node, cbk);
-    resizeObserver.observe(node);
-}
-///////////////////////////////////////////////// outside
-document.addEventListener('mousedown', e => {
-    let t = e.target;
-    AllOutsideDownEls.forEach(([node, cbk]) => {
-        if (!node.contains(t)) {
-            let ev = new CustomEvent('outside', {
-                bubbles: false,
-                cancelable: false,
-                detail: {
-                    currentTarget: node,
-                    event: e
-                },
-            });
-            cbk(ev);
-        }
-    });
-}, false);
-function addOutsideMouseDown(node, cbk) {
-    AllOutsideDownEls.push([node, cbk]);
-}
-function isExtEvent(evName) {
-    return ExtEvNames.includes(evName);
-}
-function addExtEvent(evName, node, cbk, parts) {
-    if (evName === 'resize') {
-        addResize(node, cbk);
-    }
-    else if (evName === 'outside') {
-        switch (parts[0]) {
-            case 'mousedown':
-                addOutsideMouseDown(node, cbk);
-                break;
-        }
-    }
-}
-
-const MODI_EV_DEBOUNCE = /,|^(debounce:.+)|(debounce$)/;
-const MODI_EV_THROTTLE = /,|^(throttle:.+)|(throttle$)/;
-const MODI_EV_SELF = 'self';
-const MODI_EV_STOP = 'stop';
-const MODI_EV_PREVENT = 'prevent';
-const MODI_EV_ONCE = 'once';
-const MODI_EV_MOUSE_LEFT = 'left';
-const MODI_EV_MOUSE_RIGHT = 'right';
-const MODI_EV_MOUSE_MIDDLE = 'middle';
-const MODI_EV_KEYBOARD_COMBO_CTRL = 'ctrl';
-const MODI_EV_KEYBOARD_COMBO_ALT = 'alt';
-const MODI_EV_KEYBOARD_COMBO_SHIFT = 'shift';
-const MODI_EV_KEYBOARD_COMBO_META = 'meta';
-const MODI_EV_KEYBOARD_KEY_MAP = {
-    'esc': 'escape'
-};
-const MODI_PARAM_DIVIDER = ":";
-/*************************************************************
- * 事件修饰符
- * @author holyhigh2
- *
- * 通用 debounce/stop/prevent/once/throttle/self 可组合
- * 鼠标 left/right/middle 不可组合
- * 键盘 ctrl/alt/shift/meta 可组合 esc/letters... 不可组合,多个key并列式表示可选
- *
- * 部分修饰符支持参数，使用冒号传参如：throttle:100 / debounce:100
- *************************************************************/
-function addEvent(fullName, cbk, node, component) {
-    let parts = fullName.split('.');
-    let evName = parts.shift();
-    let isOnce = parts.includes(MODI_EV_ONCE);
-    let c = cbk;
-    let modi;
-    if (modi = find(parts, x => MODI_EV_DEBOUNCE.test(x))) {
-        let params = modi.split(MODI_PARAM_DIVIDER);
-        c = debounce(c, parseInt(params[1]) || 100);
-    }
-    if (modi = find(parts, x => MODI_EV_THROTTLE.test(x))) {
-        let params = modi.split(MODI_PARAM_DIVIDER);
-        c = throttle(c, parseInt(params[1]) || 100);
-    }
-    if (isOnce) {
-        c = once(c);
-    }
-    if (isExtEvent(evName)) {
-        addExtEvent(evName, node, c, parts);
-        return c;
-    }
-    let listener = (e) => {
-        if (parts.includes(MODI_EV_PREVENT))
-            e.preventDefault();
-        if (parts.includes(MODI_EV_STOP))
-            e.stopPropagation();
-        if (parts.includes(MODI_EV_SELF) && e.target !== e.currentTarget)
-            return;
-        if (e instanceof MouseEvent) {
-            if (parts.includes(MODI_EV_MOUSE_LEFT) && e.button != 0)
-                return;
-            if (parts.includes(MODI_EV_MOUSE_RIGHT) && e.button != 2)
-                return;
-            if (parts.includes(MODI_EV_MOUSE_MIDDLE) && e.button != 1)
-                return;
-        }
-        else if (e instanceof KeyboardEvent) {
-            if (remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_CTRL)[0] && !e.ctrlKey)
-                return;
-            if (remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_ALT)[0] && !e.altKey)
-                return;
-            if (remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_SHIFT)[0] && !e.shiftKey)
-                return;
-            if (remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_META)[0] && !e.metaKey)
-                return;
-            let checkKeys = map(parts, k => MODI_EV_KEYBOARD_KEY_MAP[k] || k);
-            if (!checkKeys.includes(e.key.toLowerCase()))
-                return;
-        }
-        c(e);
-    };
-    node.addEventListener(evName, listener);
-    //record
-    let evAry = component.__events[evName];
-    if (!evAry)
-        evAry = component.__events[evName] = [];
-    evAry.push([node, listener]);
-    return listener;
-}
-
-/**
- * 为组件/指令提供渲染接口
- * @author holyhigh2
- */
-function RenderContext(spuerClass) {
-    //mixin class
-    return class extends spuerClass {
-        /**
-       * 渲染实现
-       */
-        render(...args) { }
-        //模板中变量位置信息
-        __expPos = {};
-        //对于each指令存在多个context，每个context需要单独更新 {contextKey:expPos}
-        __expPosMap = {};
-        //组件内所有的指令
-        __directives = {}; /**
-        * 指令/组件所在的插槽所属组件
-        */
-        slotComponent;
-        /**
-         * 渲染上下文所属组件
-         */
-        renderComponent;
-        //////////////////////////////////// methods
-        renderContext(...args) {
-            return renderContext.call(this, ...args);
-        }
-        updateContext(...args) {
-            let tmpl = size(args) == 1 && ((isArray(args[0]) && args[0][0] instanceof Template) || (args[0] instanceof Template)) ? args[0] : this.render(...args);
-            if (tmpl instanceof Template) {
-                this.__updateExpPos(tmpl, this.__expPos);
-            }
-            else if (isArray(tmpl) && tmpl[0] instanceof Template) {
-                tmpl.forEach((tmp, i) => {
-                    this.__updateExpPos(tmp, this.__expPosMap[tmp.key ?? tmp.getKey()]);
-                });
-            }
-        }
-        __updateExpPos(tmpl, _expPos) {
-            if (isBlank(join(tmpl.strings)))
-                return;
-            let { vars } = tmpl;
-            _expPos && Object.values(_expPos).forEach(expPos => {
-                let varIndex = expPos.index;
-                let oldValue = expPos.value;
-                let newValue = vars;
-                let node = expPos.node;
-                let indexSegs = split(varIndex, '-');
-                indexSegs.forEach((seg, i) => {
-                    newValue = get(newValue, seg);
-                    if (newValue && newValue.vars && i < indexSegs.length - 1) {
-                        newValue = newValue.vars;
-                    }
-                });
-                //check
-                if (!isObject(oldValue) && oldValue === newValue)
-                    return;
-                let elNode = node;
-                if (expPos.isDirective) {
-                    //指令
-                    newValue.di = oldValue.di;
-                    newValue.di.renderParams = newValue.varChain;
-                    newValue.di._renderArgs = newValue.args;
-                    newValue.point = oldValue.point;
-                    newValue.varPath = oldValue.varPath;
-                    let nodes = getDirectiveNodes(newValue.point.startNode, newValue.point.endNode);
-                    newValue.update(nodes, newValue.args, oldValue.args);
-                }
-                else if (expPos.isToggleProp) {
-                    //布尔特性
-                    if ((!!newValue) === oldValue)
-                        return;
-                    elNode.toggleAttribute(expPos.attrName, !!newValue);
-                    set(elNode, expPos.attrName, !!newValue);
-                }
-                else if (expPos.isProp) {
-                    //子组件属性
-                    if (!isObject(newValue) && newValue === oldValue)
-                        return;
-                    if (isObject(newValue) && isEqual(newValue, oldValue))
-                        return;
-                    //如果node是slot则触发组件的slot更新
-                    if (node instanceof CompElem) {
-                        node._updateProps({ [expPos.attrName]: newValue });
-                    }
-                    else if (node instanceof HTMLSlotElement) {
-                        this.renderComponent._updateSlot(node.getAttribute('name') || 'default', expPos.attrName, newValue);
-                    }
-                }
-                else if (expPos.eventName) {
-                    elNode.removeEventListener(expPos.eventName, oldValue);
-                    newValue = newValue.bind(this.renderComponent);
-                    newValue = addEvent(expPos.attrName, newValue, elNode, this.renderComponent);
-                }
-                else if (expPos.attrName) {
-                    //特性
-                    if (!isEqual(oldValue, newValue)) {
-                        switch (expPos.attrName) {
-                            case 'value':
-                                if (node instanceof HTMLInputElement) {
-                                    node.value = newValue;
-                                    break;
-                                }
-                            default:
-                                node.setAttribute(expPos.attrName, replace(expPos.attrTmpl, PLACEHOLDER_EXP, newValue + ''));
-                        }
-                    }
-                }
-                else if (expPos.isTmpl) {
-                    //这里一定是子视图更新，子视图仅更新内部__expose
-                    if (!isEqual(newValue, oldValue)) {
-                        let [subNodes, subExpPos, subExpPosMap] = renderContext.call(this, newValue /*newValue */);
-                        if (isEmpty(subExpPos)) {
-                            DomUtil.remove(expPos.textNode, expPos.node);
-                            DomUtil.insertBefore(expPos.node, subNodes);
-                        }
-                        else {
-                            this.__updateExpPos(newValue, subExpPos);
-                        }
-                    }
-                }
-                else if (expPos.isText) {
-                    let textNode = expPos.textNode.nextSibling;
-                    if (textNode && textNode === expPos.node.previousSibling) {
-                        textNode.textContent = newValue;
-                    }
-                    else {
-                        DomUtil.remove(expPos.textNode, expPos.node);
-                        DomUtil.insertBefore(expPos.node, [newValue]);
-                    }
-                }
-                expPos.value = newValue;
-            });
-        }
-    };
-}
-function renderContext(...args) {
-    let tmpl = args.length === 1 && args[0] instanceof Template ? args[0] : this.render(...args);
-    let domTree;
-    let diWrappers = [];
-    let expPos = undefined;
-    let expPosMap = undefined;
-    if (tmpl instanceof Template) {
-        let html = buildHTML(tmpl);
-        // this.__expPos = {}
-        expPos = {};
-        domTree = buildTmplate(expPos, diWrappers, html, tmpl.vars, this.renderComponent);
-    }
-    if (isArray(tmpl) && tmpl[0] instanceof Template) {
-        // this.__expPosMap = {}
-        let doms = [];
-        expPosMap = {};
-        tmpl.forEach(tmp => {
-            let html = buildHTML(tmp);
-            let __expPos = {};
-            domTree = buildTmplate(__expPos, diWrappers, html, tmp.vars, this.renderComponent);
-            doms.push(...domTree);
-            expPosMap[tmp.key ?? tmp.getKey()] = __expPos;
-            // this.__expPosMap[tmp.key ?? tmp.getKey()] = __expPos
-        });
-        domTree = doms;
-    }
-    else if (tmpl instanceof Function) {
-        //todo 目前仅支持slot，后续如有异步指令再行重构
-        this.slotComponent._asyncDirectives.set(tmpl, this);
-    }
-    if (diWrappers.length < 1)
-        return [domTree, expPos, expPosMap];
-    diWrappers.forEach(diWrapper => {
-        let nodes = compact(toArray(diWrapper.render(this.renderComponent)));
-        if (!isEmpty(nodes)) {
-            let fragment = document.createDocumentFragment();
-            fragment.append(...nodes);
-            diWrapper.point.endNode.parentNode.insertBefore(fragment, diWrapper.point.endNode);
-        }
-    });
-    return [domTree, expPos, expPosMap];
-}
-function getDirectiveNodes(startNode, endNode) {
-    let nextNode = startNode.nextSibling;
-    if (!endNode)
-        return [nextNode];
-    let rs = [];
-    while (nextNode && nextNode !== endNode) {
-        rs.push(nextNode);
-        nextNode = nextNode?.nextSibling;
-    }
-    return rs;
-}
-
-const ATTR_CSS_LINK = "css-link";
-const PropTypeMap = {
-    boolean: Boolean,
-    string: String,
-    number: Number,
-    object: Object,
-    array: Array,
-    function: Function,
-    bigint: BigInt,
-    symbol: Symbol,
-    undefined: Object
-};
-const PrivatePreffix = '#';
-/**
- * CompElem基类，意为组件元素。提供了基本内置属性及生命周期等必备接口
- * 每个组件都需要继承自该类
- *
- * @author holyhigh2
- */
-class CompElem extends RenderContext(HTMLElement) {
-    static __l_globalRule = document.createElement("style");
-    static {
-        document.head.appendChild(CompElem.__l_globalRule);
-    }
-    #slotPropsMap = {};
-    #data = { '#slots': {} };
-    #reactiveData = {};
-    #updateTimer;
-    #updateSources = {};
-    #shadow;
-    #selfObserver;
-    //保存所有渲染上下文 {CompElem/Directive}
-    #renderContextList = {};
-    __events = {};
-    get reactiveData() {
-        return this.#reactiveData;
-    }
-    get attrs() {
-        return this.#attrs;
-    }
-    get props() {
-        return this.#props;
-    }
-    get renderRoot() {
-        return this.#renderRoot;
-    }
-    get renderRoots() {
-        return this.#renderRoots;
-    }
-    get parentComponent() {
-        return this.#parentComponent;
-    }
-    get slotHooks() {
-        return this.#slotHooks;
-    }
-    get styles() {
-        return get(this.constructor, '_component_style_attached', []); //this.#styles;
-    }
-    get isMounted() {
-        return this.#mounted;
-    }
-    //slots列表中绝对不会出现slot元素
-    get slots() {
-        return this.#data['#slots'];
-    }
-    #attrs;
-    #props;
-    #renderRoot;
-    #renderRoots;
-    #parentComponent;
-    #slotsEl = {};
-    #slotHooks = {};
-    #slotNodes = {};
-    #mounted = false;
-    #instanceCss = new CSSStyleSheet();
-    /**
-     * 是否自动插入插槽，如果需要控制插槽类型时，可以设置为false
-     */
-    static get autoSlot() {
-        return true;
-    }
-    //////////////////////////////////// styles
-    /**
-     * 组件样式，CSSStyleSheet可动态变更
-     */
-    static get styles() {
-        return [];
-    }
-    static get globalStyles() {
-        return [];
-    }
-    get css() {
-        return '';
-    }
-    #inited = false;
-    constructor(...args) {
-        super();
-        //init props via constructor
-        if (size(args) === 1) {
-            this.#props = {};
-            assign(this.#props, first(args));
-        }
-        this.renderComponent = this;
-        let render = this.render;
-        this.render = () => {
-            let rs;
-            Collector.startRender(this);
-            rs = render.call(this);
-            Collector.endRender(this.renderComponent);
-            return rs;
-        };
-        /////////////////////////////////////////////////// styles
-        //global styles
-        let globalStyles = get(this.constructor, "globalStyles");
-        let beAttached = get(this.constructor, '_global_style_attached');
-        if (!isEmpty(globalStyles) && beAttached !== '1') {
-            let globalTextContent = "";
-            each(globalStyles, (st) => {
-                if (isString(st)) {
-                    globalTextContent += st + "\n";
-                }
-            });
-            CompElem.__l_globalRule.textContent += globalTextContent;
-            set(this.constructor, '_global_style_attached', '1');
-        }
-        //component styles
-        let beAttached2 = get(this.constructor, '_component_style_attached');
-        let styleSheets = beAttached2 ?? [];
-        if (!beAttached2) {
-            each(get(this.constructor, "styles"), (st) => {
-                if (isString(st)) {
-                    let sheet = new CSSStyleSheet();
-                    sheet.replace(st);
-                    styleSheets.push(sheet);
-                }
-                else {
-                    styleSheets.push(st);
-                }
-            });
-            set(this.constructor, '_component_style_attached', styleSheets);
-        }
-        /////////////////////////////////////////////////// shadow
-        this.#shadow = this.attachShadow({
-            mode: "open",
-            slotAssignment: get(this.constructor, "autoSlot", true) ? "named" : "manual",
-        });
-        this.#shadow.adoptedStyleSheets = concat(styleSheets, this.#instanceCss);
-        //check link
-        let cssLink = this.attributes.getNamedItem(ATTR_CSS_LINK)?.value;
-        if (cssLink) {
-            const link = document.createElement("style");
-            link.textContent = `@import "${cssLink}"`;
-            this.#shadow.appendChild(link);
-        }
-        let filterSlotFn = debounce(this.#filterSlot, 20);
-        this.#selfObserver = new MutationObserver(mutations => {
-            mutations.forEach(mutation => {
-                if (mutation.type === 'childList') {
-                    filterSlotFn.call(this);
-                }
-                else if (mutation.type === 'attributes') {
-                    if (mutation.attributeName)
-                        this.#attrChanged(mutation.attributeName, mutation.oldValue, this.getAttribute(mutation.attributeName));
-                }
-            });
-        });
-        //slots prop map
-        this._slotsPropMap = { default: [] };
-        /////////////////////////////////////////////////// decorators create
-        let ary = get(this.constructor, DecoratorsKey);
-        each(ary, dw => {
-            dw.create(this);
-        });
-    }
-    connectedCallback() {
-        //parent
-        let node = closest(this.parentNode, (node) => node instanceof CompElem || node.host instanceof CompElem, "parentNode");
-        this.#parentComponent = node
-            ? node instanceof CompElem
-                ? node
-                : node.host
-            : null;
-        this.connected();
-        this.__init();
-    }
-    disconnectedCallback() {
-        this.#selfObserver.disconnect();
-    }
-    //////////////////////////////////// lifecycles
-    //********************************** 首次渲染
-    //构造时上级传递的参数
-    __init() {
-        if (this.#inited)
-            return;
-        /////////////////////////////////////////////////// slots
-        this.#updateSlotsAry();
-        //check props
-        this.#initProps();
-        this.#initStates();
-        //define reactive
-        each(this.#data, (v, k) => {
-            let descr = Reflect.getOwnPropertyDescriptor(this.#data, k);
-            Object.defineProperty(this, k, {
-                get() {
-                    let v = Reflect.get(this.#reactiveData, k);
-                    return descr?.get ? descr?.get() : v;
-                },
-                set(v) {
-                    if (descr?.set) {
-                        descr?.set(v);
-                    }
-                    else {
-                        Reflect.set(this.#reactiveData, k, v);
-                    }
-                },
-            });
-        });
-        Object.defineProperty(this.#data, '__isData', {
-            enumerable: false,
-            value: true
-        });
-        this.#reactiveData = reactive(this.#data, this);
-        /////////////////////////////////////////////////// decorators propsReady
-        const that = this;
-        let ary = get(this.constructor, DecoratorsKey);
-        each(ary, dw => {
-            dw.propsReady(this, (key, value) => {
-                that.#reactiveData[key] = value;
-                return that.#reactiveData[key];
-            });
-        });
-        this.propsReady();
-        //computed props
-        let computedMap = get(this.constructor, "__deco_computed");
-        each(computedMap, ({ key, getter }, propKey) => {
-            Collector.startCompute(this);
-            Collector.setComputedProp(() => {
-                this.#reactiveData[propKey] = getter.call(this);
-            });
-            this.#data[propKey] = getter.call(this);
-            Collector.endCompute();
-        });
-        each(computedMap, (v, k) => {
-            Object.defineProperty(this, k, {
-                get() {
-                    return Reflect.get(this.#reactiveData, k);
-                },
-                set(v) {
-                    showTagError(this.tagName, "Cannot set a computed property '" + k + "'");
-                },
-            });
-        });
-        //render
-        let [nodes, expPos, expPosMap] = this.renderContext();
-        this.__expPos = expPos;
-        if (nodes) {
-            let children = toArray(nodes);
-            each(children, (c) => {
-                this.#shadow.appendChild(c);
-            });
-            this.#renderRoots = children;
-            this.#renderRoot = children[0];
-        }
-        //filter slot before append to dom
-        this.#filterSlot();
-        this.#selfObserver.observe(this, { childList: true, attributes: true });
-        //events
-        let eventList = get(this.constructor, "__deco_events");
-        each(eventList, (ev) => {
-            let name = ev.name;
-            let options = assign({ target: document, once: false, passive: false, capture: false }, ev.options);
-            let listener = bind$1(ev.fn, this);
-            let target = options.target;
-            if (isFunction(target)) {
-                target = target.call(this, this);
-            }
-            target.addEventListener(name, listener, options);
-        });
-        //slot hook
-        each(this.#slotHooks, (v, k) => {
-            this.#updateSlot(k);
-        });
-        //instance dynamic style
-        Collector.startCss(this);
-        Collector.setCssUpdater(() => {
-            let css = this.css;
-            this.#instanceCss.replace(css);
-        });
-        let css = this.css;
-        if (trim(css)) {
-            this.#instanceCss.replace(css);
-        }
-        Collector.endCss();
-        setTimeout(() => {
-            this.#mounted = true;
-            this.mounted();
-            each(ary, dw => {
-                dw.mounted(this, (key, value) => {
-                    that.#reactiveData[key] = value;
-                    return that.#reactiveData[key];
-                });
-            });
-        }, 0);
-        this.#inited = true;
-    }
-    /**
-     * 初始化属性及状态，该回调内可以访问props和state
-     * 此时组件dom并未构建，但已有parent 属性，没有root属性
-     */
-    connected() { }
-    /**
-     * props初始化完成回调
-     */
-    propsReady() { }
-    /**
-     * 每次更新时调用
-     */
-    render() {
-        throw Error(`[CompElem <${this.tagName}>] Missing render()`);
-    }
-    /**
-     * dom渲染完毕后调用，该回调内可以query注解初始化完成
-     */
-    mounted() { }
-    #onSlogChange(slot, name) {
-        //1. 更新 _slotsPropMap & slots
-        this.#updateSlotsAry();
-        //2. 设置attrs
-        let props = get(this.#slotPropsMap[name], 'props');
-        if (props) {
-            each(this.slots, (nodeAry, k) => {
-                nodeAry.filter(node => node.nodeType === Node.ELEMENT_NODE).forEach((node) => {
-                    if (node instanceof CompElem) {
-                        // node._setParentProps(props)
-                        node._updateProps(props);
-                        return;
-                    }
-                    each(props, (v, k) => {
-                        if (node instanceof HTMLSlotElement) {
-                            let compOfSlot = get(node, '__l_comp');
-                            if (compOfSlot) {
-                                let sname = node.name || 'default';
-                                let slotMap = compOfSlot.#slotPropsMap[sname];
-                                if (!slotMap) {
-                                    slotMap = compOfSlot.#slotPropsMap[sname] = { props: {} };
-                                }
-                                if (!slotMap.props) {
-                                    slotMap.props = {};
-                                }
-                                slotMap.props[k] = v;
-                                compOfSlot.#onSlogChange(node, sname);
-                            }
-                        }
-                        else {
-                            node.setAttribute(k, v);
-                        }
-                    });
-                });
-            });
-        }
-        //3. callback
-        this.slotchange(slot, name);
-    }
-    slotchange(slot, name) {
-    }
-    //********************************** 更新
-    /**
-     * 是否需要更新，可获取变更属性
-     * 返回true时更新
-     */
-    shouldUpdate(changed) {
-        return true;
-    }
-    /**
-     * 1. 调用render
-     * 2. 更新@query/all
-     * 3. 更新ref
-     * 4. 更新prop到attr的映射
-     * @param changed
-     */
-    updated(changed) { }
-    /**
-     * 抛出自定义事件
-     * @param evName 事件名称
-     * @param args 自定义参数
-     */
-    emit(evName, arg = {}, options) {
-        if (options && options.event) {
-            arg.event = options.event;
-        }
-        arg.target = this;
-        this.dispatchEvent(new CustomEvent(evName, {
-            bubbles: get(options, "bubbles", false),
-            composed: get(options, "composed", false),
-            cancelable: true,
-            detail: arg,
-        }));
-    }
-    #rootEvs = {};
-    /**
-     * 在root上绑定事件
-     * @param evName
-     * @param hook
-     */
-    on(evName, hook) {
-        if (!this.#rootEvs[evName]) {
-            this.#rootEvs[evName] = [];
-        }
-        let cbk = hook.bind(this);
-        this.#rootEvs[evName].push(cbk);
-        this.addEventListener(evName, cbk);
-    }
-    /**
-     * 下一帧执行
-     * @param cbk
-     */
-    nextTick(cbk) {
-        requestAnimationFrame(cbk);
-    }
-    /**
-     * 强制更新一次视图
-     */
-    forceUpdate() {
-        each(this.#reactiveData, (v, k) => {
-            this.#updateSources[k] = {
-                value: undefined,
-                chain: undefined,
-            };
-        });
-        this.#update();
-    }
-    /**
-     * 由监控变量调用
-     * @param stateKey
-     * @param ov
-     * @param rootStateKey 如果是对象内部属性变更，会返回根属性名
-     * @returns
-     */
-    _notify(ov, chain) {
-        let varPath = [];
-        each(chain, (seg) => {
-            varPath.push(seg);
-            let v = get(this, varPath);
-            let pathStr = _toUpdatePath(varPath);
-            if (pathStr === "#slots") {
-                pathStr = 'slots';
-            }
-            this.#updateSources[pathStr] = { value: v, chain: pathStr === "slots" ? ['slots'] : varPath, oldValue: ov, end: varPath.length === chain.length };
-        });
-        //debounce
-        if (this.#updateTimer) {
-            clearTimeout(this.#updateTimer);
-        }
-        this.#updateTimer = setTimeout(this.#update.bind(this), 10);
-    }
-    #update() {
-        const changed = Object.seal(clone(omitBy(this.#updateSources, (v, k) => k[0] === PrivatePreffix)));
-        //update decorators
-        let ary = get(this.constructor, DecoratorsKey);
-        each(ary, dw => {
-            dw.updated(this, changed);
-        });
-        let toBreak = !this.shouldUpdate(changed);
-        if (toBreak)
-            return;
-        let renderContextList = new Set();
-        //1. filter context
-        each(this.#updateSources, ({ value, chain, oldValue }, k) => {
-            if (this.#renderContextList[k]) {
-                this.#renderContextList[k].forEach(cx => {
-                    renderContextList.add(cx);
-                });
-            }
-        });
-        //2. update context
-        renderContextList.forEach(context => {
-            context.updateContext(...(context._renderArgs ? context._renderArgs : []));
-        });
-        //update slot view
-        each(this.#updateSlots, (v) => {
-            this.#updateSlot(v);
-        });
-        this.updated(changed);
-        this.#updateSources = {};
-    }
-    /**
-     * 1. 初始props中并未包含的属性，可从attributes取，且定义类型不是string时自动转换
-     * 2. 如果attributes中也未出现且必填报错
-     * 3. 否则设置默认值
-     * @returns 非props的attr集合
-     */
-    #initProps() {
-        let propDefs = get(this.constructor, "__deco_props");
-        let attrs = this.attributes;
-        let tagName = this.tagName;
-        let parentProps = this.#props;
-        let filterAttrs = {};
-        each(attrs, ({ name, value }) => {
-            if (name[0] === ATTR_PREFIX_EVENT ||
-                name[0] === ATTR_PREFIX_PROP ||
-                name[0] === ATTR_PREFIX_BOOLEAN ||
-                name === ATTR_REF || name === 'slot')
-                return;
-            let camelName = camelCase(name);
-            if (propDefs && !propDefs[camelName]) {
-                filterAttrs[name] = value;
-            }
-        });
-        this.#attrs = this.#attrs ? assign(this.#attrs, filterAttrs) : filterAttrs;
-        each(propDefs, (def, key) => {
-            let propDef = propDefs[key];
-            let isInited = has(parentProps, key);
-            let defaultVal = get(this, key);
-            if (!('_defaultValue' in propDef)) {
-                //在构造结束后
-                propDef._defaultValue = defaultVal;
-                if (!propDef.type) {
-                    if (isUndefined(defaultVal)) {
-                        showTagError(tagName, "Prop '" + key + "' has neither propType nor defaultValue be used for type inference");
-                    }
-                    let type = typeof defaultVal;
-                    if (isArray(defaultVal))
-                        type = 'array';
-                    let inferredType = PropTypeMap[type];
-                    propDef.type = inferredType;
-                }
-            }
-            let val = undefined;
-            if (isInited) {
-                val = isNil(parentProps[key]) ? defaultVal : parentProps[key];
-            }
-            else {
-                val = defaultVal;
-                let attr = attrs.getNamedItem(kebabCase(key)) ||
-                    attrs.getNamedItem(ATTR_PREFIX_PROP + kebabCase(key));
-                if (attr) {
-                    isInited = true;
-                    val = attr.value;
-                }
-            }
-            //required check
-            let isRequired = propDef.required;
-            if (isRequired && !isInited) {
-                showTagError(tagName, "Prop '" + key + "' is required");
-                return false;
-            }
-            val = this.#propTypeCheck(propDefs, key, val);
-            let getter = get(propDefs, [key, 'getter']);
-            if (getter)
-                getter = bind$1(getter, this);
-            let setter = get(propDefs, [key, 'setter']);
-            if (setter)
-                setter = bind$1(setter, this);
-            if (getter || setter) {
-                Object.defineProperty(this.#data, key, {
-                    set: setter || function (v) { },
-                    get: getter
-                });
-            }
-            if (propDef.attribute && isDefined(val) && !isObject(val)) {
-                this.setAttribute(kebabCase(key), trim(val));
-            }
-            this.#data[key] = val;
-        });
-    }
-    //属性值检测
-    #propTypeCheck(propDefs, propKey, newValue) {
-        let propDef = propDefs[propKey];
-        if (!propDef)
-            return newValue;
-        let validator = propDef.isValid;
-        let expectType = propDef.type;
-        let expectTypeAry = isArray(expectType) ? expectType : [expectType];
-        let typeConverter = propDef.converter;
-        let val = newValue;
-        if (!some(expectTypeAry, (et) => et === String) && isString(val) && !isNull(val)) {
-            try {
-                val = typeConverter ? typeConverter(val) : fval(val, { html });
-            }
-            catch (error) {
-                showTagError(this.tagName, `Convert attribute '${propKey}' error with ` + val);
-            }
-        } //endif
-        //extra work
-        expectTypeAry.forEach(et => {
-            if (et.name === 'Boolean') {
-                if (isString(val) && /(?:^true$)|(?:^false$)/.test(val)) {
-                    val = fval(val);
-                }
-                else if (isUndefined(val) || isBlank(val)) {
-                    val = true;
-                }
-            }
-        });
-        let realType = typeof val;
-        let matched = isDefined(val) ? false : true;
-        each(expectTypeAry, (et) => {
-            if (
-            //base form
-            test(realType, et.name, "i") ||
-                //object form
-                val instanceof et) {
-                matched = true;
-                return false;
-            }
-        });
-        if (!matched) {
-            showTagError(this.tagName, `Invalid prop '${propKey}'. expected '${expectTypeAry.map((t) => t.name || t)}' but got '${realType}'`);
-        }
-        if (validator) {
-            if (!validator.call(this, val, this.#data)) {
-                showTagError(this.tagName, `Invalid prop '${propKey}'. IsValid() check failed`);
-            }
-        }
-        return val;
-    }
-    #initStates() {
-        let stateDefs = get(this.constructor, "__deco_states");
-        each(stateDefs, (def, key) => {
-            let stateDef = stateDefs[key];
-            let val = get(this, key);
-            if (stateDef) {
-                let propName = stateDef.prop;
-                val = propName ? cloneDeep(this.#data[propName]) : get(this, key);
-            }
-            this.#data[key] = val;
-        });
-    }
-    /**
-     * 由外部调用，在初始化及更新时。
-     * @param props
-     * @param attrs
-     */
-    #propsReady = debounce(this.propsReady, 100);
-    /**
-     * @deprecated
-     */
-    _setParentProps(props, attrs) {
-        if (this.#inited) {
-            let propDefs = get(this.constructor, "__deco_props");
-            //存在attrs表示已初始化完成
-            each(props, (v, k) => {
-                let ck = camelCase(k);
-                let propDef = propDefs[ck];
-                if (!propDef)
-                    return;
-                let ov = this.#data[ck];
-                v = this.#propTypeCheck(propDefs, ck, v);
-                if (propDef.hasChanged && !propDef.hasChanged.call(this, v, ov))
-                    return;
-                this.#data[ck] = v;
-                this._notify(ov, [ck]);
-            });
-            assign(this.#props, props);
-            assign(this.#attrs, attrs);
-            this.#propsReady();
-        }
-    }
-    //todo 这里需要直接修改prop
-    _updateProps(props) {
-        let propDefs = get(this.constructor, "__deco_props");
-        //存在attrs表示已初始化完成
-        each(props, (v, k) => {
-            let ck = camelCase(k);
-            let propDef = propDefs[ck];
-            if (!propDef)
-                return;
-            let ov = this.#data[ck];
-            v = this.#propTypeCheck(propDefs, ck, v);
-            if (propDef.hasChanged && !propDef.hasChanged.call(this, v, ov))
-                return;
-            Collector.__skipCheck = true;
-            set(this, ck, v);
-            Collector.__skipCheck = false;
-        });
-        assign(this.#props, props);
-        this.#propsReady();
-    }
-    _initProps(props, attrs) {
-        this.#props = merge(this.#props || {}, props);
-        this.#attrs = merge({}, attrs);
-    }
-    /**
-     * 绑定slot标签，render时调用
-     */
-    _bindSlot(slot, name, props) {
-        //1. 设置map
-        if (!this.#slotsEl[name]) {
-            this.#slotsEl[name] = slot;
-            Object.defineProperty(slot, '__l_comp', {
-                value: this
-            });
-        }
-        slot.addEventListener('slotchange', (e) => {
-            if (this.#inited)
-                this.#onSlogChange(slot, name === 'default' ? '' : name);
-        });
-        //3. 保存参数
-        if (!isEmpty(props)) {
-            let slotMap = this.#slotPropsMap[name];
-            if (!slotMap) {
-                slotMap = this.#slotPropsMap[name] = {};
-            }
-            if (props.nodeFilter) {
-                slotMap.filter = props.nodeFilter;
-            }
-            slotMap.props = omit(props, 'nodeFilter');
-        }
-    }
-    _bindSlotHook(name, hook) {
-        this.#slotHooks[name] = hook;
-    }
-    //slot变量变动时触发
-    #updateSlots = new Set();
-    _updateSlot(name, propName, value) {
-        let slotEl = this.#slotsEl[name];
-        let hook = this.#slotHooks[name];
-        if (!hook && !slotEl)
-            return;
-        let slotMap = this.#slotPropsMap[name];
-        if (propName) {
-            if (!slotMap.props) {
-                slotMap.props = {};
-            }
-            slotMap.props[propName] = value;
-        }
-        if (!!hook) {
-            this.#updateSlots.add(name);
-        }
-        else {
-            //update nodes
-            let els = slotEl.assignedElements({ flatten: true });
-            each(els, el => {
-                el.setAttribute(propName, value + '');
-            });
-        }
-    }
-    #updateSlotsAry() {
-        const cs = flatMap(this.childNodes, node => {
-            if (node.nodeType === Node.COMMENT_NODE)
-                return [];
-            if (node instanceof HTMLSlotElement)
-                return node.assignedNodes({ flatten: true });
-            return node;
-        });
-        let groups = groupBy(cs, node => {
-            // if (node.nodeType === Node.COMMENT_NODE) return ''
-            if (node.nodeType === Node.TEXT_NODE)
-                return 'default';
-            if (node instanceof Element) {
-                return node.getAttribute('slot') || 'default';
-            }
-        });
-        if (isEmpty(groups)) {
-            if (!isEmpty(this.#data['#slots'])) {
-                this.#inited ? this.#reactiveData['#slots'] = {} : this.#data['#slots'] = {};
-            }
-            return;
-        }
-        each(groups, (nodeAry, k) => {
-            if (!k)
-                return;
-            while (nodeAry.length > 0) {
-                let node = nodeAry[0];
-                if ((node.nodeType === Node.TEXT_NODE && isBlank(node.textContent)) ||
-                    (node instanceof HTMLSlotElement && isEmpty(node.assignedNodes({ flatten: true })))) {
-                    nodeAry.shift();
-                    continue;
-                }
-                break;
-            }
-            while (nodeAry.length > 0) {
-                let node = last(nodeAry);
-                if ((node.nodeType === Node.TEXT_NODE && isBlank(node.textContent)) ||
-                    (node instanceof HTMLSlotElement && isEmpty(node.assignedNodes({ flatten: true })))) {
-                    nodeAry.pop();
-                    continue;
-                }
-                break;
-            }
-        });
-        let rs = {};
-        each(groups, (v, k) => {
-            if (!isEmpty(v)) {
-                rs[k] = v;
-            }
-        });
-        this.#inited ? this.#reactiveData['#slots'] = rs : this.#data['#slots'] = rs;
-    }
-    #updateSlot(name) {
-        let hook = this.#slotHooks[name];
-        if (!hook)
-            return;
-        let slotMap = this.#slotPropsMap[name];
-        let slot = this.#data['#slots'][name];
-        //slot not ready yet
-        //1. 可能是if/each等指令还未插入
-        if (!slot)
-            return;
-        //组件通知渲染异步指令
-        this.renderAsync(hook, get(slotMap, 'props'));
-        const rc = this._asyncDirectives.get(hook);
-        //todo 如果要做成通用异步指令，元素必须插入到指令挂载的位置，并且slot的插入节点还要去掉注释
-        let [nodes, expPos, expPosMap] = rc?.renderContext(hook(get(slotMap, 'props')));
-        let nnodes = reject(toArray(nodes), n => n.nodeType === Node.COMMENT_NODE);
-        if (nnodes) {
-            let slottedNodes = this.#slotNodes[name];
-            if (!isEmpty(slottedNodes)) {
-                each(slottedNodes, n => {
-                    n.parentNode?.removeChild(n);
-                });
-            }
-            this.#slotNodes[name] = nnodes;
-            this.append(...nnodes);
-            this.#updateSlots.clear();
-        }
-    }
-    _asyncDirectives = new WeakMap();
-    renderAsync(cbk, ...args) {
-    }
-    //children变化时触发
-    #filterSlot() {
-        if (isEmpty(this.#slotPropsMap))
-            return;
-        each(this.slots, (slottedNodes, k) => {
-            if (isEmpty(slottedNodes))
-                return;
-            let slotMap = this.#slotPropsMap[k];
-            let filterNodes = slottedNodes;
-            if (slotMap) {
-                let filterFn = slotMap.filter;
-                if (isFunction(filterFn)) {
-                    filterNodes = filterFn(slottedNodes);
-                }
-                else if (isObject(filterFn)) {
-                    let type = filterFn.type;
-                    let maxCount = filterFn.maxCount;
-                    if (type) {
-                        let ts = isArray(type) ? type : [type];
-                        filterNodes = filter(slottedNodes, n => some(ts, t => n instanceof t));
-                    }
-                    if (maxCount > 0) {
-                        filterNodes = slice(slottedNodes, 0, maxCount);
-                    }
-                }
-            }
-            if (this.#shadow.slotAssignment === 'named') {
-                let removeNodes = [];
-                each(slottedNodes, c => {
-                    if (!filterNodes.includes(c)) {
-                        removeNodes.push(c);
-                    }
-                });
-                while (removeNodes.length > 0) {
-                    let n = removeNodes.pop();
-                    n.parentNode?.removeChild(n);
-                }
-            }
-            else {
-                this.#slotsEl[k].assign(...filterNodes);
-            }
-            if (this.#inited)
-                this.#onSlogChange(this.#slotsEl[k], k === 'default' ? '' : k);
-        });
-    }
-    #attrChanged(name, oldValue, newValue) {
-        if (!this.isMounted)
-            return;
-        let observedAttrs = _getObservedAttrs(this.constructor);
-        if (observedAttrs.has(name)) {
-            if (isNull(newValue)) {
-                let propDefs = get(this.constructor, "__deco_props");
-                //使用默认值
-                newValue = propDefs[name]._defaultValue;
-            }
-            this._updateProps({ [name]: newValue });
-            // this._setParentProps({ [name]: newValue }, { [name]: newValue })
-        }
-    }
-    _regDeps(varPath, renderContext) {
-        let list = this.#renderContextList[varPath];
-        if (!list) {
-            list = this.#renderContextList[varPath] = new Set();
-        }
-        list.add(renderContext);
-    }
-}
-
-/**
- * @author holyhigh2
- */
-var DirectiveUpdateTag;
-(function (DirectiveUpdateTag) {
-    DirectiveUpdateTag["NONE"] = "NONE";
-    DirectiveUpdateTag["REMOVE"] = "REMOVE";
-    DirectiveUpdateTag["REPLACE"] = "REPLACE";
-    DirectiveUpdateTag["UPDATE"] = "UPDATE";
-    DirectiveUpdateTag["APPEND"] = "APPEND";
-})(DirectiveUpdateTag || (DirectiveUpdateTag = {}));
-/**
- * 模板中的表达式位置
- */
-class ExpPos {
-    //表达式位置，多层使用-分割
-    index;
-    value;
-    isText = false;
-    //是否模板
-    isTmpl = false;
-    isDirective = false;
-    //表达式所在节点，可能是元素/文本
-    node;
-    //如果是文本位置，与node一起构成插入范围
-    textNode;
-    //是否组件
-    isComponent = false;
-    //如果在属性中，属性名
-    attrName;
-    //属性值模板
-    attrTmpl;
-    //是否组件属性
-    isProp = false;
-    //是否布尔属性
-    isToggleProp = false;
-    //事件名称
-    eventName;
-    constructor(varIndex, node, attrName, attrTmpl) {
-        this.index = varIndex + '';
-        this.node = node;
-        if (attrName)
-            this.attrName = attrName;
-        if (attrTmpl) {
-            this.attrTmpl = attrTmpl;
-        }
-    }
-}
-
-const DI_KEY = "__directives";
-/**
- * 属性定义
- */
-var EnterPointType;
-(function (EnterPointType) {
-    EnterPointType["ATTR"] = "attr";
-    EnterPointType["PROP"] = "prop";
-    EnterPointType["TEXT"] = "text";
-    EnterPointType["CLASS"] = "class";
-    EnterPointType["STYLE"] = "style";
-    EnterPointType["SLOT"] = "slot";
-    EnterPointType["TAG"] = "tag"; //在标签内但不是属性内
-})(EnterPointType || (EnterPointType = {}));
-/**
- * 交互点信息
- */
-class EnterPoint {
-    startNode; //依赖节点
-    endNode; //依赖节点2
-    type; //依赖类型
-    attrName; //依赖属性名
-    varIndex;
-    expressionChain; //所在层级序号 [parentVarIndex-varIndex-]+，如1-6 表示根的第2个表达式下的context的第7个表达式
-    nodes; //如果是插入节点，保存插入的节点数组
-    constructor(level, node, attrName, type) {
-        this.startNode = node;
-        this.attrName = attrName;
-        this.type = type;
-    }
-    setVarIndex(varIndex) {
-        this.varIndex = varIndex;
-    }
-}
-var MovePosition;
-(function (MovePosition) {
-    MovePosition["AFTER_BEGIN"] = "afterbegin";
-})(MovePosition || (MovePosition = {}));
-/**
- * Delay the actual time of execution of directive
- */
-class DirectiveWrapper extends Function {
-    diClass;
-    args;
-    di;
-    varPath;
-    point;
-    slotComponent;
-    varChain;
-    constructor(diClass, ...args) {
-        super();
-        this.diClass = diClass;
-        this.args = args;
-        this.varChain = Collector.popDirectiveQ();
-    }
-    //校验scope
-    checkScope(scopeType) {
-        let scopes = get(this.diClass, 'scopes');
-        if (!isEmpty(scopes) && !test(scopes.join(','), scopeType)) {
-            showError(`Directive '${this.diClass.name}' is out of scopes, expect '${scopes.join(',')}' bug got '${scopeType}'`);
-            return;
-        }
-    }
-    render(component) {
-        let diMap = get(component, DI_KEY);
-        let di = this.di || diMap[this.varPath];
-        if (!di) {
-            di = new this.diClass(this.point);
-            di.renderComponent = component;
-            di.slotComponent = this.slotComponent;
-            di.renderParams = this.varChain;
-        }
-        this.di = di;
-        di._renderArgs = this.args;
-        let [nodes, expPos, expPosMap] = di.renderContext(...this.args);
-        if (expPosMap) {
-            di.__expPosMap = expPosMap;
-        }
-        else if (expPos) {
-            di.__expPos = expPos;
-        }
-        return nodes;
-    }
-    update(nodes, newArgs, oldArgs) {
-        let tag = this.di.update(nodes, newArgs, oldArgs);
-        if (tag === DirectiveUpdateTag.REMOVE) {
-            nodes.forEach(n => {
-                n.parentNode?.removeChild(n);
-            });
-        }
-        else if (tag === DirectiveUpdateTag.REPLACE) {
-            let newNodes = [];
-            nodes.forEach(n => {
-                n.parentNode?.removeChild(n);
-            });
-            let rs = this.di.render(...newArgs);
-            let [nnodes, expPos, expPosMap] = this.di.renderContext(rs);
-            if (expPosMap) {
-                this.di.__expPosMap = expPosMap;
-            }
-            else if (expPos) {
-                this.di.__expPos = expPos;
-            }
-            newNodes = toArray(nnodes);
-            let fragment = document.createDocumentFragment();
-            fragment.append(...newNodes);
-            this.point.endNode.parentNode.insertBefore(fragment, this.point.endNode);
-        }
-        else if (tag === DirectiveUpdateTag.UPDATE) {
-            let newKeys = {};
-            let newKeyMap = {};
-            let nodesToUpdate;
-            //原节点顺序
-            let oldSeq = [];
-            let newSeq = [];
-            let updateRs = this.di.render(...newArgs);
-            if (isArray(updateRs) && updateRs[0] instanceof Template) {
-                updateRs.forEach(tmpl => {
-                    let k = tmpl.key ?? tmpl.getKey();
-                    newKeys[k] = '1';
-                    newKeyMap[k] = tmpl;
-                    newSeq.push(k);
-                });
-            }
-            //UPDATE仅处理元素节点
-            nodes = filter(compact(nodes), n => n.nodeType === Node.ELEMENT_NODE);
-            nodesToUpdate = filter(compact(toArray(nodesToUpdate)), n => n.nodeType === Node.ELEMENT_NODE);
-            let oldNodeMap = {};
-            let dupKey = '';
-            let keyQ = {};
-            map(nodes, (node) => {
-                let treeNode = node;
-                let k = treeNode.getAttribute("key");
-                if (!k)
-                    return;
-                if (oldNodeMap[k]) {
-                    dupKey = k;
-                    return false;
-                }
-                oldNodeMap[k] = treeNode;
-                oldSeq.push(k);
-                keyQ[k] = '1';
-            });
-            if (dupKey) {
-                showError(`${camelCase(this.diClass.name)} - duplicate key '${dupKey}'`);
-            }
-            let newNodeMap = {};
-            let updateQ = newKeys;
-            const parentNode = this.point.startNode.parentNode;
-            //compare
-            let adds = [];
-            let dels = [];
-            //计算del
-            each(keyQ, (v, k) => {
-                if (!updateQ[k]) {
-                    dels.push(k);
-                    delete keyQ[k];
-                    remove(oldSeq, k);
-                }
-            });
-            //计算move
-            if (!isEmpty(newSeq)) {
-                let lastMoveNodeId = '';
-                let lastMoveIndex = -1;
-                let lastGroup = [];
-                let idWeightMap = {};
-                newSeq.forEach((nodeId, i) => {
-                    let oldI = oldSeq.findIndex(c => c === nodeId);
-                    if (oldI > -1 && oldI !== i) {
-                        if (lastMoveIndex < 0 || lastMoveIndex - oldI == 1) {
-                            let lastEl = last(lastGroup);
-                            lastGroup.push({ nodeId, targetId: i === 0 ? MovePosition.AFTER_BEGIN : (lastEl ? lastEl.nodeId : newSeq[i - 1]) });
-                        }
-                        else {
-                            idWeightMap[lastGroup.length] = { group: lastGroup, targetId: '' };
-                            lastGroup = [];
-                            lastGroup.push({ nodeId, targetId: oldSeq[oldI] });
-                        }
-                        lastMoveIndex = oldI;
-                    }
-                    else if (oldI < 0) {
-                        let prev = lastMoveNodeId ? oldNodeMap[lastMoveNodeId] || this.point.endNode : this.point.startNode;
-                        //add
-                        adds.push({ prevNode: prev, newkey: nodeId });
-                    }
-                    lastMoveNodeId = nodeId;
-                });
-                if (isEmpty(idWeightMap) && lastGroup.length > 0) {
-                    idWeightMap[lastGroup.length] = { group: lastGroup, targetId: '' };
-                }
-                let keys = Object.keys(idWeightMap);
-                let keyNums = keys.map(k => parseInt(k)).sort((a, b) => a - b);
-                if (keys.length < 2 && keys.length > 0) {
-                    //如果仅有一组，留最后一个节点
-                    let { group } = idWeightMap[keyNums[0]];
-                    initial(group).forEach(({ targetId, nodeId }) => {
-                        let srcEl = oldNodeMap[nodeId];
-                        let target;
-                        if (targetId === MovePosition.AFTER_BEGIN) {
-                            target = this.point.startNode;
-                            target.after(srcEl);
-                        }
-                        else {
-                            target = oldNodeMap[targetId];
-                            target.after(srcEl);
-                        }
-                    });
-                }
-                else {
-                    //如果多组，留最后一组
-                    console.debug('todo....');
-                }
-            }
-            adds.forEach(v => {
-                let k = v.newkey;
-                let treeNode = newNodeMap[k] || this.#addNode(newKeyMap[k], k);
-                let prevNode = v.prevNode;
-                if (prevNode === this.point.endNode) {
-                    prevNode.before(treeNode);
-                }
-                else if (prevNode === this.point.startNode) {
-                    prevNode.after(treeNode);
-                }
-                else {
-                    prevNode.after(treeNode);
-                }
-            });
-            dels.forEach(k => {
-                this.#removeNode(k);
-                // remove(adjustedQ, ak => ak === k)
-                let treeNode = oldNodeMap[k];
-                if (treeNode) {
-                    parentNode.removeChild(treeNode);
-                }
-            });
-            this.di.updateContext(updateRs);
-        }
-    }
-    getDirective() {
-        return this.di;
-    }
-    #addNode(tmpl, key) {
-        //追加expPos
-        let [nodes, expPos, expPosMap] = this.di.renderContext(tmpl);
-        let node = head(nodes);
-        this.di.__expPosMap[key] = expPos;
-        // this.di.__expPosMap[key] = clone(this.di.__expPos)
-        return node;
-    }
-    #removeNode(key) {
-        this.di.__expPosMap[key] = null;
-        delete this.di.__expPosMap[key];
-    }
-}
-/**
- * 返回指令调用函数
- * @param di
- * @returns
- */
-function directive(diClass) {
-    return (...args) => {
-        let wrapper = null;
-        //todo 可能存在非返回模板函数开启了依赖监控
-        args.forEach((v, i) => {
-            if (isFunction(v)) {
-                let cbk = v;
-                args[i] = function (...ps) {
-                    let di = wrapper.di;
-                    Collector.startRender(di);
-                    let rs = cbk(...ps);
-                    Collector.endRender(di.renderComponent);
-                    return rs;
-                };
-            }
-        });
-        wrapper = new DirectiveWrapper(diClass, ...args);
-        return wrapper;
-    };
-}
-
-const ATTR_PREFIX_EVENT = "@";
-const ATTR_PREFIX_PROP = ".";
-const ATTR_PREFIX_BOOLEAN = "?";
-const ATTR_PREFIX_REF = "*";
-const ATTR_PROP_DELIMITER = ":";
-const ATTR_REF = "ref";
-const EXP_ATTR_CHECK = /[.?-a-z]+\s*=\s*(['"])\s*([^='"]*<\!--l_ui-pl_df-->){2,}.*?\1/ims;
-const EXP_PLACEHOLDER = /<\s*[a-z0-9-]+([^>]*<\!--l_ui-pl_df-->)*[^>]*?(?<!-)>/imgs;
-const SLOT_KEY_PROPS = 'slot-props';
-/**
- * 提供渲染函数相关操作
- * @author holyhigh2
- */
-/**
- * 高性能dom生成及变量绑定算法
- * 1. 使用占位符拼接HTML字符串，占位符与变量需要按照顺序对应
- * 2. 插入dom片段，并遍历元素+注释节点, 搜索占位符
- *  1. 按顺序遍历所有attr，发现一个属性值含有占位符时，标记节点及属性名，以便变量可以进行绑定（ 如果key是事件/ref则内容仅允许一个占位符）
- *  2. 如果是注释节点
- *    1. 在后面追加同内容注释节点，标记两个节点，以便变量可以进行绑定
- *    2. 在中间插入变量内容
- * 3. 只有表达式是一个指令时才能绑定依赖
- * @param tmpl
- * @param slotArgs
- * @returns
- */
-function buildHTML(tmpl) {
-    let html = "";
-    let tmplList = isArray(tmpl) ? tmpl : [tmpl];
-    tmplList.forEach(({ strings, vars }) => {
-        let strList = toArray(strings);
-        strList[0] = trimStart(strList[0]);
-        strList[strList.length - 1] = trimEnd(strList[strList.length - 1]);
-        let l = strList.length - 1;
-        strList.forEach((str, i) => {
-            let val = get(vars, i, "");
-            val = l === i ? "" : PLACEHOLDER;
-            html += str + val;
-        });
-    });
-    //attr check
-    let rs = html.match(EXP_ATTR_CHECK);
-    if (rs) {
-        let errorMsg = replaceAll(rs[0], PLACEHOLDER, '${...}');
-        showError(`Parse error: attribute value can be set only one interpolation —— \n ${errorMsg}`);
-        return '';
-    }
-    let i = 0;
-    html = html.replace(EXP_PLACEHOLDER, (a, b) => {
-        let rs = replaceAll(a, PLACEHOLDER, () => PLACEHOLDER.replace('-->', '') + (i++));
-        return rs;
-    });
-    return html;
-}
-const PLACEHOLDER = "<!--l_ui-pl_df-->";
-const PLACEHOLDER_PREFFIX = "<!--l_ui-pl_df";
-const PLACEHOLDER_EXP = /<!--l_ui-pl_df\d*(-->)?/;
-/**
- * 构建模板为DOM结构
- * @param html
- */
-function buildTmplate(expPos, directives, html, vars, component, slotArgs, level = 0, expressionChain = '') {
-    const container = document.createElement("div");
-    container.innerHTML = html;
-    //遍历dom
-    const nodeIterator = document.createNodeIterator(container, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
-    let currentNode;
-    let varIndex = 0;
-    let slotComponent = null;
-    while ((currentNode = nodeIterator.nextNode())) {
-        if (currentNode instanceof HTMLElement || currentNode instanceof SVGElement) {
-            if (currentNode instanceof CompElem) {
-                slotComponent = currentNode;
-            }
-            else {
-                if (!slotComponent?.contains(currentNode)) {
-                    slotComponent = null;
-                }
-            }
-            let props = {};
-            let attrs = toArray(currentNode.attributes);
-            each(attrs, (attr) => {
-                let { name, value } = attr;
-                if (name === SLOT_KEY_PROPS) {
-                    let slotName = currentNode.name || 'default';
-                    if (slotComponent) {
-                        let ary = slotComponent._slotsPropMap[slotName];
-                        if (!ary) {
-                            ary = slotComponent._slotsPropMap[slotName] = [];
-                        }
-                        ary.push(currentNode);
-                    }
-                }
-                if (startsWith(name, PLACEHOLDER_PREFFIX)) {
-                    let val = vars[varIndex];
-                    //support directive only for now
-                    if (val instanceof DirectiveWrapper) {
-                        val.checkScope(EnterPointType.TAG);
-                        let point = new EnterPoint(level, currentNode, name.substring(1), EnterPointType.TAG);
-                        val.point = point;
-                        val.varPath = expressionChain + varIndex;
-                        val.slotComponent = slotComponent;
-                        directives.push(val);
-                        let pos = expPos[expressionChain + varIndex] = new ExpPos(expressionChain + varIndex, currentNode);
-                        pos.isDirective = true;
-                        pos.value = val;
-                        pos.isComponent = !!slotComponent;
-                        varIndex++;
-                    }
-                    currentNode.removeAttribute(name);
-                    return;
-                }
-                //@event.stop.prevent.debounce
-                if (name[0] === ATTR_PREFIX_EVENT) {
-                    let cbk = (e) => { };
-                    let pos = null;
-                    if (PLACEHOLDER_EXP.test(value)) {
-                        let val = vars[varIndex];
-                        if (!isFunction(val)) {
-                            showTagError(currentNode.tagName, `Event '${name}' must be a function`);
-                            return;
-                        }
-                        cbk = val.bind(component);
-                        pos = expPos[expressionChain + varIndex] = new ExpPos(expressionChain + varIndex, currentNode, name.replace(/\.|\?|@/, ''), value);
-                        pos.isComponent = !!slotComponent;
-                        varIndex++;
-                    }
-                    let parts = name.substring(1).split('.');
-                    let evName = parts.shift();
-                    cbk = addEvent(name.substring(1), cbk, currentNode, component);
-                    currentNode.removeAttribute(name);
-                    if (pos) {
-                        pos.eventName = evName;
-                        pos.value = cbk;
-                    }
-                    return;
-                }
-                if (name === ATTR_REF) {
-                    if (PLACEHOLDER_EXP.test(value)) {
-                        let val = vars[varIndex];
-                        if (!has(val, 'current')) {
-                            showTagError(currentNode.tagName, `Ref must be a RefObject`);
-                            return;
-                        }
-                        varIndex++;
-                        val.current = currentNode;
-                    }
-                    currentNode.removeAttribute(name);
-                    return;
-                }
-                //校验变量必须是表达式
-                if (name[0] === ATTR_PREFIX_PROP && !PLACEHOLDER_EXP.test(value)) {
-                    showTagError(currentNode.tagName, `Prop '${name}' must be an interpolation`);
-                    return;
-                }
-                if (PLACEHOLDER_EXP.test(value)) {
-                    let val = vars[varIndex];
-                    let pos = expPos[expressionChain + varIndex] = new ExpPos(expressionChain + varIndex, currentNode, name.replace(/\.|\?|@/, ''), value);
-                    pos.isComponent = !!slotComponent;
-                    if (name[0] === ATTR_PREFIX_PROP ||
-                        name[0] === ATTR_PREFIX_BOOLEAN ||
-                        name[0] === ATTR_PREFIX_REF) {
-                        if (val instanceof DirectiveWrapper) {
-                            val.checkScope(EnterPointType.PROP);
-                            directives.push(val);
-                            let point = new EnterPoint(level, currentNode, name.substring(1), EnterPointType.PROP);
-                            val.varPath = expressionChain + varIndex;
-                            val.point = point;
-                            val.slotComponent = slotComponent;
-                            pos.value = val;
-                            pos.isDirective = true;
-                        }
-                        else if (name[0] === ATTR_PREFIX_BOOLEAN) {
-                            pos.isToggleProp = true;
-                            pos.value = !!val;
-                            if (pos.value)
-                                currentNode.setAttribute(name.substring(1), '');
-                        }
-                        else if (name[0] === ATTR_PREFIX_REF) {
-                            pos.value = val;
-                            let refNames = name.substring(1);
-                            const [refNamec, prop] = refNames.split(ATTR_PROP_DELIMITER);
-                            let refName = refNamec;
-                            switch (prop) {
-                                case 'camel':
-                                    refName = camelCase(refName);
-                                    break;
-                                case 'kebab':
-                                    refName = kebabCase(refName);
-                                    break;
-                                case 'snake':
-                                    refName = snakeCase(refName);
-                                    break;
-                            }
-                            pos.attrName = refName;
-                            currentNode.setAttribute(refName, val);
-                        }
-                        else {
-                            if (!(currentNode instanceof CompElem) && currentNode.tagName !== 'SLOT') {
-                                showTagError(currentNode.tagName, `Prop '${name}' can only be set on a CompElem or a slot`);
-                                delete expPos[expressionChain + varIndex];
-                            }
-                            else {
-                                let propName = camelCase(name.substring(1));
-                                if (!(propName in currentNode) && currentNode.tagName !== 'SLOT') {
-                                    showTagError(currentNode.tagName, `Prop '${name}' is not defined in ${currentNode.tagName}`);
-                                }
-                                pos.value = val;
-                                pos.isProp = true;
-                                props[propName] = val;
-                            }
-                        }
-                        currentNode.removeAttribute(name);
-                        val = '';
-                    }
-                    else {
-                        pos.value = val;
-                        if (val instanceof DirectiveWrapper) {
-                            let type = EnterPointType.ATTR;
-                            if (name === "class") {
-                                type = EnterPointType.CLASS;
-                            }
-                            else if (name === "style") {
-                                type = EnterPointType.STYLE;
-                            }
-                            val.checkScope(type);
-                            directives.push(val);
-                            pos.isDirective = true;
-                            let point = new EnterPoint(level, currentNode, name, type);
-                            val.point = point;
-                            val.slotComponent = slotComponent;
-                            val.varPath = expressionChain + varIndex;
-                            val = '';
-                        }
-                        value = replace(value, PLACEHOLDER_EXP, val);
-                        //回填
-                        attr.value = value;
-                    }
-                    varIndex++;
-                }
-            });
-            if (currentNode instanceof CompElem) {
-                // currentNode._setParentProps(props)
-                currentNode._initProps(props);
-            }
-            else if (currentNode instanceof HTMLSlotElement) {
-                component._bindSlot(currentNode, currentNode.name || 'default', props);
-            }
-        }
-        else {
-            let comment = currentNode;
-            if (`<!--${comment.nodeValue}-->` !== PLACEHOLDER) {
-                continue;
-            }
-            let pos = expPos[expressionChain + varIndex] = new ExpPos(expressionChain + varIndex, currentNode);
-            pos.isComponent = !!slotComponent;
-            pos.isText = true;
-            let val = vars[varIndex];
-            let startComment;
-            //插入start占位符
-            startComment = document.createComment(`compelem-ui-${level}-${varIndex}-child-start`);
-            comment.parentNode.insertBefore(startComment, comment);
-            comment.nodeValue = `compelem-ui-${level}-${varIndex}-child-end`;
-            pos.textNode = startComment;
-            if (val instanceof DirectiveWrapper) {
-                pos.isDirective = true;
-                pos.value = val;
-                let pType = slotComponent ? EnterPointType.SLOT : EnterPointType.TEXT;
-                directives.push(val);
-                let point = new EnterPoint(level, startComment, "", pType);
-                point.endNode = comment;
-                val.point = point;
-                val.slotComponent = slotComponent;
-                val.varPath = expressionChain + varIndex;
-                val = '';
-            }
-            else if (val instanceof Template) {
-                pos.isTmpl = true;
-                pos.value = val;
-                let html = buildHTML(val);
-                val = buildTmplate(expPos, directives, html, val.vars, component, slotArgs, level, expressionChain + `${varIndex}-`);
-            }
-            else {
-                pos.value = val;
-            }
-            varIndex++;
-            if (isUndefined(val))
-                continue;
-            if (val instanceof NodeList) {
-                let fragment = document.createDocumentFragment();
-                fragment.append(...val);
-                comment.parentNode.insertBefore(fragment, comment);
-            }
-            else if (val instanceof Element) {
-                comment.parentNode.insertBefore(val, comment);
-            }
-            else if (trim(val)) {
-                let text = document.createTextNode(val);
-                comment.parentNode.insertBefore(text, comment);
-            }
-        }
-    }
-    return container.childNodes;
-}
-const DomUtil = {
-    insertBefore: function (node, newNodes) {
-        let fragment = document.createDocumentFragment();
-        fragment.append(...newNodes);
-        node.parentNode.insertBefore(fragment, node);
-    },
-    remove: function (startNode, endNode) {
-        let nextNode = startNode.nextSibling;
-        while (nextNode !== endNode) {
-            nextNode?.parentNode?.removeChild(nextNode);
-            nextNode = startNode.nextSibling;
-        }
-    }
-};
-const EXP_KEY$1 = /\s+\.?key\s*=/;
-class Template {
-    strings;
-    vars;
-    //如果模板仅有一个root节点且含有key属性
-    key;
-    constructor(strings, vars) {
-        this.strings = concat(strings);
-        this.vars = vars;
-    }
-    //解析模板中的key
-    getKey() {
-        let vars = this.vars;
-        let k = '';
-        each(this.strings, (str, i) => {
-            if (EXP_KEY$1.test(str)) {
-                k = toString(vars[i]);
-                return false;
-            }
-        });
-        this.key = k;
-        return k;
-    }
-    /**
-     * 追加tmpl
-     * 交接处模板进行合并
-     * @param tmpl
-     */
-    append(tmpl) {
-        let lastStr = last(this.strings);
-        tmpl.strings.forEach((str, i) => {
-            if (i == 0) {
-                this.strings[this.strings.length - 1] = lastStr + str;
-                return;
-            }
-            this.strings.push(str);
-        });
-        this.vars = concat(this.vars, tmpl.vars);
-        return this;
-    }
-    /**
-     * 获取html字符串
-     */
-    getHTML() {
-        let html = '';
-        let strList = toArray(this.strings);
-        strList[0] = trimStart(strList[0]);
-        strList[strList.length - 1] = trimEnd(strList[strList.length - 1]);
-        let l = strList.length - 1;
-        strList.forEach((str, i) => {
-            let val = get(this.vars, i, "");
-            if (val instanceof Template) {
-                val = val.getHTML();
-            }
-            else {
-                val = l === i ? "" : val;
-            }
-            html += str + val;
-        });
-        return html;
-    }
-}
-//////////////////////////////////////////////////// interfaces
-/**
- * 标签函数，用于构建模板
- * @param strings
- * @param vars
- */
-function html(strings, ...vars) {
-    return new Template(isString(strings) ? [strings] : strings, vars);
-}
-/**
- * 使用初始值创建一个引用对象
- * @param initValue
- * @returns
- */
-function createRef(initValue) {
-    return { current: initValue };
-}
-
-function computed(target, propertyKey, descriptor) {
-    if (!descriptor.get) {
-        showError(`Prop '${propertyKey}' must be a getter`);
-    }
-    if (!has(target.constructor, '__deco_computed')) {
-        target.constructor.__deco_computed = isEmpty(target.constructor.__deco_computed) ? {} : cloneDeep(target.constructor.__deco_computed);
-    }
-    target.constructor.__deco_computed[propertyKey] = { key: propertyKey, getter: descriptor.get };
-}
-
-/**
- * 绑定非视图事件，如window/document等
- * @param eventName 事件名
- * @param immediate 立即执行
- * @param deep 深度监控
- */
-function event(eventName, options) {
-    return (target, name, descriptor) => {
-        if (!has(target.constructor, '__deco_events')) {
-            target.constructor.__deco_events = isEmpty(target.constructor.__deco_events) ? [] : cloneDeep(target.constructor.__deco_events);
-        }
-        target.constructor.__deco_events.push({ name: eventName, options, fn: target[name] });
-    };
-}
-
-/**
- * 缓存策略
- */
-var QueryCache;
-(function (QueryCache) {
-    QueryCache["ONCE"] = "once";
-    QueryCache["UPDATABLE"] = "updatable"; //每次update结束都会更新缓存
-})(QueryCache || (QueryCache = {}));
-/**
- * css查询装饰器
- * @example
- *  @query('l-popup', QueryCache.ONCE)
- */
-class QueryDecorator extends Decorator {
-    created(component, ...args) {
-    }
-    mounted(component, setReactive, ...args) {
-    }
-    get targets() {
-        return [DecoratorType.FIELD];
-    }
-    selector;
-    cache;
-    result;
-    constructor(selector, cache) {
-        super();
-        this.selector = selector;
-        this.cache = cache;
-    }
-    static getKey(selector) {
-        return selector;
-    }
-    getter(component) {
-        this.result = component.shadowRoot?.querySelector(this.selector);
-    }
-    propsReady(component, setReactive, classProto, fieldName, ...args) {
-        const that = this;
-        Object.defineProperty(component, fieldName, {
-            get() {
-                if (that.result && that.cache) {
-                    return that.result;
-                }
-                that.getter(component);
-                return that.result;
-            }
-        });
-    }
-    updated(component, changed) {
-        if (this.cache !== QueryCache.UPDATABLE)
-            return;
-        this.getter(component);
-    }
-}
-class QueryAllDecorator extends QueryDecorator {
-    getter(component) {
-        this.result = component.shadowRoot?.querySelectorAll(this.selector);
-    }
-}
-const query = decorator(QueryDecorator);
-const queryAll = decorator(QueryAllDecorator);
-
-function state(options) {
-    if (arguments.length === 1) {
-        return (target, stateKey) => {
-            defineState(target, stateKey, options);
-        };
-    }
-    let target = arguments[0], stateKey = arguments[1];
-    defineState(target, stateKey, { prop: "" });
-}
-function defineState(target, stateKey, options) {
-    if (!has(target.constructor, "__deco_states")) {
-        const mixinStates = {};
-        let parentCtor = target.constructor;
-        while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
-            merge(mixinStates, parentCtor.__deco_states ? cloneDeep(parentCtor.__deco_states) : {});
-        }
-        target.constructor.__deco_states = mixinStates;
-    }
-    target.constructor.__deco_states[stateKey] = options;
-}
-/**
- * 同@state装饰器，但可用于构造器中调用
- * @param ctor 类构造函数
- * @param stateKey state 名称
- * @param options
- */
-function makeState(ctor, stateKey, options) {
-    defineState(ctor.prototype, stateKey, options || { prop: "" });
-}
-
-/**
- * class用注解，用于自动注册自定义组件
- * @param name 自定义组件名称
- */
-function tag(name) {
-    return (target) => {
-        if (target) {
-            customElements.define(name, target);
-        }
-    };
-}
-
-/**
- * prop/state监视
- * @example
- *  @watch('a.b.c')
- */
-class WatchDecorator extends Decorator {
-    created(component, ...args) {
-    }
-    propsReady(component, setReactive, ...args) {
-    }
-    get targets() {
-        return [DecoratorType.METHOD];
-    }
-    sources;
-    options;
-    handler;
-    constructor(source, options) {
-        super();
-        this.sources = isArray(source) ? source : [source];
-        this.options = options;
-    }
-    static getKey(source) {
-        return isArray(source) ? source.sort().join('') : source;
-    }
-    mounted(component, setReactive, classProto, fnName, ...args) {
-        let handler = this.handler = component[fnName];
-        let immediate = get(this.options, "immediate", false);
-        let onceWatch = get(this.options, "once", false);
-        if (onceWatch) {
-            handler = once(handler.bind(component));
-        }
-        let invocations = [];
-        this.sources.forEach(src => {
-            let nv = get(component, src.replaceAll('-', '.'));
-            if (immediate) {
-                invocations.push({
-                    handler, value: nv, varPath: src
-                });
-            }
-        });
-        invocations.forEach(({ handler, value, varPath }) => {
-            handler.call(component, get(component, varPath), value, varPath);
-        });
-    }
-    updated(component, changed) {
-        this.sources.forEach(src => {
-            each(changed, ({ value, chain, oldValue, end }, k) => {
-                let srcPath = src.replaceAll('.', '-');
-                //监视路径不长于变量路径
-                if (!startsWith(k, srcPath))
-                    return;
-                if (k === srcPath && end) {
-                    this.handler && this.handler.call(component, value, oldValue, k);
-                }
-                //watches deep
-                let i = chain.length - 1;
-                while (i) {
-                    let varPath = chain.slice(0, i);
-                    if (end && varPath.join('-') === srcPath && get(this.options, 'deep')) {
-                        let v = get(component, varPath);
-                        this.handler.call(component, v, v, varPath.join('-'));
-                    }
-                    i--;
-                }
-            });
-        });
-    }
-}
-const watch = decorator(WatchDecorator);
-
-/**
- * 用于解析HTML模板
- * @author holyhigh2
- */
-class Directive extends RenderContext(Object) {
-    //render参数，仅保存上次指令所在context变更时的数据，用于指令内部context更新时
-    _renderArgs;
-    /**
-     * 指令使用范围，超出范围会报错
-     */
-    static get scopes() {
-        return [];
-    }
-    /**
-     * 指令渲染参数变量链
-     */
-    renderParams;
-}
-
-const Ignores = ['key'];
-/**
- * 绑定属性到节点上，如果节点是组件会使用in操作符判断是否props
- * @param styles 对象/数组/字符串
- */
-class Bind extends Directive {
-    update(nodes, newArgs, oldArgs) {
-        return DirectiveUpdateTag.NONE;
-    }
-    static get scopes() {
-        return [EnterPointType.TAG];
-    }
-    constructor(point) {
-        super();
-        this.point = point;
-    }
-    render(obj) {
-        let el = this.point.startNode;
-        if (el instanceof CompElem) {
-            //判断是否prop
-            let props = {};
-            let attrs = {};
-            each(obj, (v, k) => {
-                if (Ignores.includes(k))
-                    return;
-                if (k in el) {
-                    props[k] = v;
-                }
-                else {
-                    attrs[k] = v + '';
-                }
-            });
-            // el._setParentProps(props, attrs)
-            el._initProps(props, attrs);
-        }
-        else {
-            each(obj, (v, k) => {
-                el.setAttribute(k, v);
-            });
-        }
-    }
-}
-const bind = directive(Bind);
-
-/**
- * 根据变量内容自动插入class，仅能用于class属性
- * @param styles 对象/数组/字符串
- */
-class Classes extends Directive {
-    update(nodes, newArgs, oldArgs) {
-        this.render(newArgs[0]);
-        return DirectiveUpdateTag.NONE;
-    }
-    static get scopes() {
-        return [EnterPointType.CLASS];
-    }
-    constructor(point) {
-        super(point);
-        this.point = point;
-    }
-    lastCls;
-    render(clazz) {
-        let rs = [];
-        if (isArray(clazz)) {
-            rs = compact(clazz);
-        }
-        else if (isObject(clazz)) {
-            rs = flatMap(clazz, (v, k) => v ? k : []);
-        }
-        else if (isString(clazz)) {
-            rs = clazz.split(' ');
-        }
-        let el = this.point.startNode;
-        each(this.lastCls, cls => {
-            el.classList.remove(cls);
-        });
-        each(rs, cls => {
-            el.classList.add(cls);
-        });
-        this.lastCls = concat(rs);
-    }
-}
-const classes = directive(Classes);
-
-const EXP_KEY = /\s+\.?key\s*=/;
-/**
- * 循环列表并自动优化列表更新
- * foreach循环的只能是节点，且必须有key属性。非节点元素会被过滤掉
- * 使用序号作为key时可能会导致异常问题
- */
-class ForEach extends Directive {
-    update(nodes, newArgs, oldArgs) {
-        if (isEmpty(nodes) && isEmpty(newArgs[0]))
-            return DirectiveUpdateTag.NONE;
-        if (!isEmpty(this.renderParams)) {
-            let rp = last(this.renderParams);
-            if (!isArray(rp)) {
-                rp = [rp];
-            }
-            this.renderParams = rp;
-        }
-        return DirectiveUpdateTag.UPDATE;
-    }
-    constructor(point) {
-        super();
-        if (!isEmpty(this.renderParams))
-            this.renderParams = toArray(last(this.renderParams));
-    }
-    static get scopes() {
-        return [EnterPointType.TEXT, EnterPointType.SLOT];
-    }
-    render(value, cbk) {
-        //1. 产生模板
-        let tmpls = map(value, (v, k) => {
-            return cbk(v, k);
-        });
-        //2. 合并模板
-        let keyAry = [];
-        let strs = [];
-        tmpls.forEach((tmpl) => {
-            let lastStr = last(strs);
-            let vars = tmpl.vars;
-            let hasNoKey = true;
-            tmpl.strings.forEach((str, i) => {
-                if (EXP_KEY.test(str)) {
-                    let key = vars[i] + '';
-                    if (keyAry.includes(key)) {
-                        showError(`forEach - duplicate key '${key}'`);
-                    }
-                    keyAry.push(key);
-                    hasNoKey = false;
-                }
-                if (i == 0 && lastStr) {
-                    strs[strs.length - 1] = lastStr + str;
-                    return;
-                }
-                strs.push(str);
-            });
-            if (hasNoKey) {
-                showError("forEach - missing 'key' prop");
-            }
-        });
-        return tmpls;
-    }
-}
-const forEach = directive(ForEach);
-
-/**
- * 条件为真时返回参数1，否则返回参数2，仅能用于文本节点
- * @param condition 条件
- * @param tmpl 模板
- */
-class IfElse extends Directive {
-    //todo 缓存后会导致缓存内容无法更新，需要按照新的结构修改后进行缓存
-    ifNodes;
-    elseNodes;
-    static get scopes() {
-        return [EnterPointType.TEXT, EnterPointType.SLOT];
-    }
-    update(nodes, newArgs, oldArgs) {
-        if (!!newArgs[0] === !!oldArgs[0]) {
-            return DirectiveUpdateTag.UPDATE;
-        }
-        if (newArgs[0]) {
-            //缓存else
-            // if (isEmpty(this.elseNodes)) {
-            //   this.elseNodes = concat(nodes)
-            // }
-            return DirectiveUpdateTag.REPLACE;
-        }
-        else {
-            //缓存if
-            // if (isEmpty(this.ifNodes)) {
-            //   this.ifNodes = concat(nodes)
-            // }
-            return DirectiveUpdateTag.REPLACE;
-        }
-    }
-    render(condition, tmplFn1, tmplFn2) {
-        return condition ? tmplFn1(condition) : tmplFn2(condition);
-    }
-}
-const ifElse = directive(IfElse);
-
-/**
- * 条件为真时返回内容，仅能用于文本节点
- * @param condition 条件
- * @param tmpl 模板
- */
-class IfTrue extends Directive {
-    static get scopes() {
-        return [EnterPointType.TEXT, EnterPointType.SLOT];
-    }
-    update(nodes, newArgs, oldArgs) {
-        if (newArgs[0] === oldArgs[0])
-            return DirectiveUpdateTag.UPDATE;
-        if (newArgs[0]) {
-            return DirectiveUpdateTag.REPLACE;
-        }
-        this.cacheNodes = nodes;
-        return DirectiveUpdateTag.REMOVE;
-    }
-    render(condition, tmplFn) {
-        return condition ? tmplFn() : html ``;
-    }
-}
-const ifTrue = directive(IfTrue);
-
-var ModelTriggerType;
-(function (ModelTriggerType) {
-    ModelTriggerType["CHANGE"] = "change";
-    ModelTriggerType["INPUT"] = "input";
-})(ModelTriggerType || (ModelTriggerType = {}));
-/**
- * 实现双向绑定（仅支持静态路径，动态增加的属性路径无法识别）
- * 当用于组件时，监控 @update:value 事件
- * 当用于元素时，
- * - 对于 input/textarea 监控 @input，并设置 value 属性
- * - 对于 checkbox/radio 监控 @change，并设置 checked 属性
- * - 对于 select  监控 @change，并设置 value 属性
- * @param modelValue 双向绑定的组件变量
- */
-class Model extends Directive {
-    update(nodes, newArgs, oldArgs) {
-        if (!this.modelPath)
-            this.modelPath = last(this.renderParams);
-        if (!isEqual(newArgs, oldArgs)) {
-            const node = this.point.startNode;
-            if (node instanceof CompElem) {
-                // node._setParentProps({ value: newArgs[0] });
-                node._updateProps({ value: newArgs[0] });
-            }
-            else if (node instanceof HTMLTextAreaElement || node instanceof HTMLSelectElement) {
-                node.setAttribute('value', newArgs[0] + '');
-            }
-            else if (node instanceof HTMLInputElement) {
-                switch (node.type) {
-                    case 'checkbox':
-                    case 'radio':
-                        if (!!newArgs[0]) {
-                            node.setAttribute('checked', '');
-                        }
-                        else {
-                            node.removeAttribute('checked');
-                        }
-                        break;
-                    case 'text':
-                    case 'email':
-                    case 'number':
-                    case 'password':
-                    case 'search':
-                    case 'tel':
-                    case 'url':
-                        node.setAttribute('value', newArgs[0] + '');
-                        break;
-                    default:
-                        node.setAttribute('value', newArgs[0] + '');
-                        break;
-                }
-            }
-        }
-        return DirectiveUpdateTag.NONE;
-    }
-    static get scopes() {
-        return [EnterPointType.TAG];
-    }
-    modelPath;
-    point;
-    constructor(point) {
-        super();
-        this.point = point;
-    }
-    render(modelValue) {
-        if (!this.modelPath)
-            this.modelPath = last(this.renderParams);
-        const node = this.point.startNode;
-        if (get(node, '_model') === 'binded')
-            return;
-        if (!isObject(modelValue) && !trim(modelValue))
-            modelValue = '';
-        if (node instanceof CompElem) {
-            //todo _setParentProps接口不应该外部使用
-            // node._setParentProps({ value: modelValue });
-            node._initProps({ value: modelValue });
-            node.addEventListener('update:value', (e) => {
-                set(this.renderComponent, this.modelPath, e.detail.value);
-            });
-            set(node, '_model', 'binded');
-        }
-        else if (node instanceof HTMLTextAreaElement) {
-            node.setAttribute('value', modelValue + '');
-            node.addEventListener('input', (e) => {
-                let t = e.target;
-                set(this.renderComponent, this.modelPath, t.value);
-            });
-            set(node, '_model', 'binded');
-        }
-        else if (node instanceof HTMLInputElement) {
-            let propName = '';
-            let evName = '';
-            switch (node.type) {
-                case 'checkbox':
-                case 'radio':
-                    propName = 'checked';
-                    evName = 'change';
-                    break;
-                case 'text':
-                case 'email':
-                case 'number':
-                case 'password':
-                case 'search':
-                case 'tel':
-                case 'url':
-                    propName = 'value';
-                    evName = 'input';
-                    break;
-                default:
-                    propName = 'value';
-                    evName = 'input';
-                    break;
-            }
-            node.setAttribute(propName, modelValue + '');
-            node.addEventListener(evName, (e) => {
-                let t = e.target;
-                set(this.renderComponent, this.modelPath, t.value);
-            });
-            set(node, '_model', 'binded');
-        }
-        else if (node instanceof HTMLSelectElement) {
-            node.setAttribute('value', modelValue + '');
-            node.addEventListener('change', (e) => {
-                let t = e.target;
-                set(this.renderComponent, this.modelPath, t.value);
-            });
-            set(node, '_model', 'binded');
-        }
-    }
-}
-const model = directive(Model);
-
-/**
- * display的快捷指令
- * 如果
- * @param isvisible 是否显示
- */
-class Show extends Directive {
-    update(nodes, newArgs, oldArgs) {
-        this.render(newArgs[0]);
-        return DirectiveUpdateTag.NONE;
-    }
-    display = undefined;
-    static get scopes() {
-        return [EnterPointType.TAG];
-    }
-    constructor(point) {
-        super();
-        this.point = point;
-    }
-    render(isVisible) {
-        let el = this.point.startNode;
-        if (isUndefined(this.display)) {
-            this.display = el.style.display;
-        }
-        this.renderComponent.nextTick(() => {
-            el.style.display = isVisible ? this.display : 'none';
-        });
-    }
-}
-const show = directive(Show);
-
-/**
- * 创建一个动态插槽内容
- * @param cbk 回调函数，函数接收插槽上定义得变量
- * @param slotName 插槽名词，默认default
- */
-class Slot extends Directive {
-    update(nodes, newArgs, oldArgs) {
-        return DirectiveUpdateTag.NONE;
-    }
-    static get scopes() {
-        return [EnterPointType.SLOT];
-    }
-    render(cbk, slotName) {
-        cbk = cbk.bind(this.renderComponent);
-        this.slotComponent._bindSlotHook(slotName || 'default', cbk);
-        return cbk;
-    }
-}
-const slot = directive(Slot);
-
-/**
- * 根据变量内容自动插入class，仅能用于style属性
- * @param styles 对象/字符串
- */
-class Styles extends Directive {
-    update(nodes, newArgs, oldArgs) {
-        this.render(newArgs[0]);
-        return DirectiveUpdateTag.NONE;
-    }
-    constructor(point) {
-        super();
-        this.point = point;
-    }
-    static get scopes() {
-        return [EnterPointType.STYLE];
-    }
-    render(styles) {
-        let rs = '';
-        if (isObject(styles)) {
-            rs = join(map(styles, (v, k) => kebabCase(k) + ":" + v), ';');
-        }
-        else if (isString(styles)) {
-            rs = styles;
-        }
-        each(rs.split(';'), prop => {
-            let kv = prop.split(':');
-            this.point.startNode.style.setProperty(trim(kv[0]), trim(kv[1]));
-        });
-    }
-}
-const styles = directive(Styles);
-
-/**
- * 类似Model，实现属性的同步跟踪
- * 设置组件prop，并监控 @update:prop 事件
- * @param syncValue 双向绑定的组件变量
- */
-class Sync extends Directive {
-    update(nodes, newArgs, oldArgs) {
-        if (!isEqual(newArgs, oldArgs)) {
-            this.targetComponent._updateProps({ [this.attrName]: newArgs[0] });
-            // this.targetComponent._setParentProps({ [this.attrName]: newArgs[0] });
-        }
-        return DirectiveUpdateTag.NONE;
-    }
-    static get scopes() {
-        return [EnterPointType.PROP];
-    }
-    modelPath;
-    attrName;
-    targetComponent;
-    constructor(point) {
-        super();
-        this.targetComponent = point.startNode;
-        this.attrName = point.attrName;
-    }
-    render(syncValue) {
-        if (!this.modelPath)
-            this.modelPath = last(this.renderParams);
-        //todo _setParentProps接口不应该外部使用
-        this.targetComponent._initProps({ [this.attrName]: syncValue });
-        // this.targetComponent._setParentProps({ [this.attrName]: syncValue });
-        this.targetComponent.addEventListener('update:' + this.attrName, (e) => {
-            set(this.renderComponent, this.modelPath, e.detail.value);
-        });
-    }
-}
-const sync = directive(Sync);
-
-/**
- * 分支指令，具有switch / if else 两种模式
- * @example
- *  switch 模式
- * ${when(var, {
-    closed: () => html``, //case 1
-    connecting: () => html``, //case 2
-    default: () => html``// default
-   })}
-
-   if else 模式
- * ${when(this.editingTitle, [
-    [(v: any) => v.substring(2) > 0, () => html`<div style="${PageHome.tunnelLight}"></div>`],
-    [(v: any) => v == 'closed', () => html`<div style="${PageHome.tunnelLight}"></div>`],
-    [() => true, () => html`默认`]
-    ])}
- *
- * @param condition 条件
- * @param tmpl 模板
- */
-class When extends Directive {
-    static get scopes() {
-        return [EnterPointType.TEXT, EnterPointType.SLOT];
-    }
-    update(nodes, newArgs, oldArgs) {
-        if (isEqual(newArgs, oldArgs)) {
-            return DirectiveUpdateTag.NONE;
-        }
-        //todo 缓存
-        return DirectiveUpdateTag.REPLACE;
-    }
-    render(value, cases) {
-        let defaultFn = () => html ``;
-        let conditionList = [];
-        let tmplList = [];
-        each(cases, (v, k) => {
-            if (isFunction(v)) {
-                conditionList.push(k);
-                tmplList.push(v);
-            }
-            else {
-                let condiFn = v[0];
-                let tmplFn = v[1];
-                conditionList.push(condiFn);
-                tmplList.push(tmplFn);
-            }
-            if (k === 'default') {
-                defaultFn = v;
-            }
-        });
-        let i = findIndex(conditionList, c => {
-            if (isFunction(c)) {
-                return c(value);
-            }
-            else {
-                return c == value;
-            }
-        });
-        return call(tmplList[i] ?? defaultFn);
-    }
-}
-const when = directive(When);
-
-export { CompElem, Decorator, DecoratorType, DecoratorWrapper, DecoratorsKey, Directive, DirectiveUpdateTag, DirectiveWrapper, EnterPoint, EnterPointType, ExpPos, GetKeyFnName, ModelTriggerType, QueryCache, Template, _getObservedAttrs, bind, buildHTML, classes, computed, createRef, decorator, directive, event, forEach, html, ifElse, ifTrue, makeProp, makeState, model, prop, query, queryAll, show, slot, state, styles, sync, tag, watch, when };
+  import{toPath as t,isFunction as e,isObject as s,isDefined as n,get as r,isUndefined as i,isEmpty as o,has as a,concat as l,set as c,defaults as d,merge as h,cloneDeep as p,each as u,kebabCase as f,last as m,isEqual as _,startsWith as g,includes as v,clone as E,isElement as C,isArray as b,initial as N,find as y,debounce as P,throttle as T,once as x,remove as S,map as M,size as A,isBlank as k,join as L,split as O,replace as w,compact as D,toArray as R,assign as $,first as j,isString as I,closest as H,bind as B,trim as U,omitBy as F,camelCase as V,isNil as z,some as W,isNull as K,fval as Q,test as G,omit as X,flatMap as q,groupBy as Y,reject as J,filter as Z,slice as tt,head as et,trimStart as st,trimEnd as nt,replaceAll as rt,snakeCase as it,toString as ot,findIndex as at,call as lt}from"myfx";function ct(t){console.error("[CompElem]",t)}function dt(t,e){console.error(`[CompElem <${t}>]`,e)}function ht(e){return t(e).join("-")}function pt(t){return Object.getPrototypeOf(t)}var ut;!function(t){t.CLASS="class",t.FIELD="field",t.METHOD="method"}(ut||(ut={}));class ft{static call(t,s,n,...r){if(gt.get(s)){s(...r)(t,n,e(n)?{configurable:!0}:null).create(t)}else s(t,n,...r)}}const mt="getKey",_t="__decorators",gt=new WeakMap;class vt{args;metadata;decoratorClass;instanceMap;key;constructor(t,e,s){this.args=t,this.metadata=e,this.decoratorClass=s,this.instanceMap=new WeakMap}create(t){let e,a=new this.decoratorClass(...this.args),l=a.targets,c=this.metadata[2];s(c)&&n(r(c,"configurable"))?e=ut.METHOD:i(this.metadata[2])&&(e=ut.FIELD),!o(l)&&e&&l.includes(e)?(a.created(t,...this.metadata),this.instanceMap.set(t,a)):ct(`Decorator '${this.decoratorClass.name}' is out of targets, expect '${l.join(",")}' bug got '${e}'`)}propsReady(t,e){this.instanceMap.get(t).propsReady(t,e,...this.metadata)}mounted(t,e){this.instanceMap.get(t).mounted(t,e,...this.metadata)}updated(t,e){this.instanceMap.get(t).updated(t,e)}}const Et=new WeakMap;function Ct(t){let e=(...e)=>(...s)=>{let n=s[0].constructor,i=r(n,_t);if(!a(n,_t)){let t=r(Object.getPrototypeOf(n),_t);i=t?l(t):[],c(n,_t,i)}let o,d={},h=r(t,mt);if(h){let s=Et.get(t);if(s||(s=new WeakMap,Et.set(t,s)),d=s.get(n),d||(d={},s.set(n,d)),o=h(...e),d[o])return d[o]}let p=new vt(e,s,t);return d[o]=p,i?.push(p),p};return gt.set(e,!0),e}const bt=new WeakMap;function Nt(t){if(1===arguments.length)return(e,s,n)=>{t.required=t.required||!1,t.attribute=!1!==t.attribute,yt(e,s,t,n)};let e=arguments[0],s=arguments[1],n=arguments[2];t={type:void 0,required:!1,attribute:!0},n&&"function"==typeof n.type&&(t=d(n,t),n=void 0),yt(e,s,t,n)}function yt(t,e,s,n){let r;if(/[a-z]/.test(e[0])||ct(`Prop '${e}' must be in CamelCase`),!a(t.constructor,"__deco_props")){const e={};let s=t.constructor;for(;(s=pt(s))!==zt;)h(e,s.__deco_props?p(s.__deco_props):{});t.constructor.__deco_props=e,r=new Set,u(e,((t,e)=>{if(t.attribute){let t=f(e);r?.add(t)}})),bt.set(t.constructor,r)}if(n&&(n.get&&(s.getter=n.get),n.set&&(s.setter=n.set)),s.attribute){r||(r=bt.get(t.constructor));let s=f(e);r?.add(s)}t.constructor.__deco_props[e]=s}const Pt=new Set;function Tt(t){return bt.get(t)??Pt}const xt={startCss(t){this.__cssCollecting=t},endCss(){this.__cssCollecting=null},setCssUpdater(t){this.__cssUpdater=t},startCompute(t){this.__computeCollecting=t},endCompute(){this.__computeCollecting=null},setComputedProp(t){this.__computeUpdater=t},__computeCollecting:null,__computeUpdater:null,__cssCollecting:null,__cssUpdater:null,__directiveQ:[],setDirectiveQ(t){let e=m(this.__directiveQ);e&&_(e,t)||(e&&e.length<t.length&&g(t.join(","),e.join(","))?this.__directiveQ[this.__directiveQ.length-1]=t:this.__directiveQ.push(t))},popDirectiveQ(){let t=l(this.__directiveQ);return this.__directiveQ=[],t},startRender(t){this.__renderCollecting=!0,this.__renderContext=t},endRender(t){this.__renderCollection.forEach((e=>{t._regDeps(e,this.__renderContext)})),this.__renderCollection.clear(),this.__renderCollecting=!1,this.__renderContext=null},collect(t){this.__renderCollection.add(t)},clear(){this.__directiveQ=[]},__renderCollection:new Set,__renderContext:null,__renderCollecting:!1,__skipCheck:!1},St=new WeakMap,Mt=new WeakMap,At=new WeakMap,kt=new WeakMap;function Lt(t,n){if(!s(t))return t;const i=t.__proxy?t:new Proxy(t,{get(t,e,s){const n=Object.keys(t),r=Reflect.get(t,e,s);if(!v(n,e))return r;if(t.hasOwnProperty(e)){let t=Mt.get(s)??[],n=l(t,[e]),r=n.join("-");if(xt.__renderCollecting)xt.collect(ht(n)),xt.setDirectiveQ(n);else if(xt.__computeCollecting){let t=At.get(xt.__computeCollecting);t||(t={},At.set(xt.__computeCollecting,t));let e=t[r];e||(e=t[r]=[]),e.push(xt.__computeUpdater)}else if(xt.__cssCollecting){let t=kt.get(xt.__cssCollecting);t||(t={},kt.set(xt.__cssCollecting,t)),t[r]=xt.__cssUpdater}}return r},set(t,n,i,o){let a=St.get(o).from,c=r(a.constructor,"__deco_props");c&&c[n]&&t.__isData&&c[n].sync&&a.emit("update:"+n,{value:i});let d=t[n],h=r(a.constructor,"__deco_states"),p=r(c,[n,"hasChanged"])||r(h,[n,"hasChanged"]);if(p){if(!p.call(a,i,d))return!1}else{if(t[n]===i)return!0;if(Number.isNaN(i)&&Number.isNaN(t[n]))return!1}s(d)&&(d=E(d));let u=St.get(o)?.contextSet,f=Mt.get(o)??[],m=l(f,[n]),_=i;!s(i)||e(i)||C(i)||u.forEach((t=>{let e=St.get(o)?.pathMap,s=e?.get(t);s&&(m=l(s,[n]),Mt.set(_,m),_=Lt(_,t),Mt.set(_,m))}));let g=Reflect.set(t,n,_),v=St.get(o).pathMap;return u.forEach((t=>{let e=v.get(t);if(!e)return;m=l(e,"length"==n&&b(o)?[]:[n]),t._notify(d,m);let s=m.join("-"),r=At.get(t);if(r){let e=r[s];e&&e.forEach((e=>{e.call(t)}));let n=m.length-1;for(;n;){let e=r[m.slice(0,n).join("-")];e&&e.forEach((e=>{e.call(t)})),n--}}let i=kt.get(t);if(i){let e=i[s];e&&e.call(t);let n=m.length-1;for(;n;){let e=i[m.slice(0,n).join("-")];e&&e.call(t),n--}}})),g}});t.__proxy||Object.defineProperty(t,"__proxy",{enumerable:!1,writable:!1,configurable:!1,value:!0});let o=Mt.get(t)??[];if(Object.isExtensible(t)&&!St.get(i)){let t=new Set;t.add(n);let e=new WeakMap;e.set(n,o),St.set(i,{from:n,contextSet:t,pathMap:e})}else{St.get(i).contextSet.add(n);let t=St.get(i).pathMap,e=t.get(n),s=l(o);if(e&&e.join("")!==s.join("")){let t=r(n,N(e));b(t)||function(...t){console.warn("[CompElem]",...t)}(`The object is referenced by more than one @state '${s.join(".")},${e.join(".")}'`),e=s}else t.set(n,s)}for(let r in t){const i=t[r];!s(i)||e(i)||C(i)||i instanceof Text||(Mt.set(i,l(o,[r])),t[r]=Lt(i,n),Mt.set(t[r],l(o,[r])))}return i}const Ot=["resize","outside"],wt=new WeakMap,Dt=[],Rt=new ResizeObserver((t=>{for(const e of t){const t=Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize,s=Array.isArray(e.borderBoxSize)?e.borderBoxSize[0]:e.borderBoxSize;let n=wt.get(e.target);if(n){n(new CustomEvent("resize",{bubbles:!1,cancelable:!1,detail:{borderBox:{w:s.inlineSize,h:s.blockSize},contentBox:{w:t.inlineSize,h:t.blockSize}}}))}}}));function $t(t,e,s,n){if("resize"===t)!function(t,e){wt.set(t,e),Rt.observe(t)}(e,s);else if("outside"===t&&"mousedown"===n[0])!function(t,e){Dt.push([t,e])}(e,s)}document.addEventListener("mousedown",(t=>{let e=t.target;Dt.forEach((([s,n])=>{if(!s.contains(e)){n(new CustomEvent("outside",{bubbles:!1,cancelable:!1,detail:{currentTarget:s,event:t}}))}}))}),!1);const jt=/,|^(debounce:.+)|(debounce$)/,It=/,|^(throttle:.+)|(throttle$)/,Ht={esc:"escape"};function Bt(t,e,s,n){let r,i=t.split("."),o=i.shift(),a=i.includes("once"),l=e;if(r=y(i,(t=>jt.test(t)))){let t=r.split(":");l=P(l,parseInt(t[1])||100)}if(r=y(i,(t=>It.test(t)))){let t=r.split(":");l=T(l,parseInt(t[1])||100)}if(a&&(l=x(l)),function(t){return Ot.includes(t)}(o))return $t(o,s,l,i),l;let c=t=>{if(i.includes("prevent")&&t.preventDefault(),i.includes("stop")&&t.stopPropagation(),!i.includes("self")||t.target===t.currentTarget){if(t instanceof MouseEvent){if(i.includes("left")&&0!=t.button)return;if(i.includes("right")&&2!=t.button)return;if(i.includes("middle")&&1!=t.button)return}else if(t instanceof KeyboardEvent){if(S(i,(t=>"ctrl"==t))[0]&&!t.ctrlKey)return;if(S(i,(t=>"alt"==t))[0]&&!t.altKey)return;if(S(i,(t=>"shift"==t))[0]&&!t.shiftKey)return;if(S(i,(t=>"meta"==t))[0]&&!t.metaKey)return;if(!M(i,(t=>Ht[t]||t)).includes(t.key.toLowerCase()))return}l(t)}};s.addEventListener(o,c);let d=n.__events[o];return d||(d=n.__events[o]=[]),d.push([s,c]),c}function Ut(t){return class extends t{render(...t){}__expPos={};__expPosMap={};__directives={};slotComponent;renderComponent;renderContext(...t){return Ft.call(this,...t)}updateContext(...t){let e=1==A(t)&&(b(t[0])&&t[0][0]instanceof fe||t[0]instanceof fe)?t[0]:this.render(...t);e instanceof fe?this.__updateExpPos(e,this.__expPos):b(e)&&e[0]instanceof fe&&e.forEach(((t,e)=>{this.__updateExpPos(t,this.__expPosMap[t.key??t.getKey()])}))}__updateExpPos(t,e){if(k(L(t.strings)))return;let{vars:n}=t;e&&Object.values(e).forEach((t=>{let e=t.index,i=t.value,a=n,l=t.node,d=O(e,"-");if(d.forEach(((t,e)=>{a=r(a,t),a&&a.vars&&e<d.length-1&&(a=a.vars)})),!s(i)&&i===a)return;let h=l;if(t.isDirective){a.di=i.di,a.di.renderParams=a.varChain,a.di._renderArgs=a.args,a.point=i.point,a.varPath=i.varPath;let t=function(t,e){let s=t.nextSibling;if(!e)return[s];let n=[];for(;s&&s!==e;)n.push(s),s=s?.nextSibling;return n}(a.point.startNode,a.point.endNode);a.update(t,a.args,i.args)}else if(t.isToggleProp){if(!!a===i)return;h.toggleAttribute(t.attrName,!!a),c(h,t.attrName,!!a)}else if(t.isProp){if(!s(a)&&a===i)return;if(s(a)&&_(a,i))return;l instanceof zt?l._updateProps({[t.attrName]:a}):l instanceof HTMLSlotElement&&this.renderComponent._updateSlot(l.getAttribute("name")||"default",t.attrName,a)}else if(t.eventName)h.removeEventListener(t.eventName,i),a=a.bind(this.renderComponent),a=Bt(t.attrName,a,h,this.renderComponent);else if(t.attrName){if(!_(i,a))switch(t.attrName){case"value":if(l instanceof HTMLInputElement){l.value=a;break}default:l.setAttribute(t.attrName,w(t.attrTmpl,de,a+""))}}else if(t.isTmpl){if(!_(a,i)){let[e,s,n]=Ft.call(this,a);o(s)?(pe.remove(t.textNode,t.node),pe.insertBefore(t.node,e)):this.__updateExpPos(a,s)}}else if(t.isText){let e=t.textNode.nextSibling;e&&e===t.node.previousSibling?e.textContent=a:(pe.remove(t.textNode,t.node),pe.insertBefore(t.node,[a]))}t.value=a}))}}}function Ft(...t){let e,s,n,r=1===t.length&&t[0]instanceof fe?t[0]:this.render(...t),i=[];if(r instanceof fe){let t=ae(r);s={},e=he(s,i,t,r.vars,this.renderComponent)}if(b(r)&&r[0]instanceof fe){let t=[];n={},r.forEach((s=>{let r=ae(s),o={};e=he(o,i,r,s.vars,this.renderComponent),t.push(...e),n[s.key??s.getKey()]=o})),e=t}else r instanceof Function&&this.slotComponent._asyncDirectives.set(r,this);return i.length<1||i.forEach((t=>{let e=D(R(t.render(this.renderComponent)));if(!o(e)){let s=document.createDocumentFragment();s.append(...e),t.point.endNode.parentNode.insertBefore(s,t.point.endNode)}})),[e,s,n]}const Vt={boolean:Boolean,string:String,number:Number,object:Object,array:Array,function:Function,bigint:BigInt,symbol:Symbol,undefined:Object};class zt extends(Ut(HTMLElement)){static __l_globalRule=document.createElement("style");static{document.head.appendChild(zt.__l_globalRule)}#t={};#e={"#slots":{}};#s={};#n;#r={};#i;#o;#a={};__events={};get reactiveData(){return this.#s}get attrs(){return this.#l}get props(){return this.#c}get renderRoot(){return this.#d}get renderRoots(){return this.#h}get parentComponent(){return this.#p}get slotHooks(){return this.#u}get styles(){return r(this.constructor,"_component_style_attached",[])}get isMounted(){return this.#f}get slots(){return this.#e["#slots"]}#l;#c;#d;#h;#p;#m={};#u={};#_={};#f=!1;#g=new CSSStyleSheet;static get autoSlot(){return!0}static get styles(){return[]}static get globalStyles(){return[]}get css(){return""}#v=!1;constructor(...t){super(),1===A(t)&&(this.#c={},$(this.#c,j(t))),this.renderComponent=this;let e=this.render;this.render=()=>{let t;return xt.startRender(this),t=e.call(this),xt.endRender(this.renderComponent),t};let s=r(this.constructor,"globalStyles"),n=r(this.constructor,"_global_style_attached");if(!o(s)&&"1"!==n){let t="";u(s,(e=>{I(e)&&(t+=e+"\n")})),zt.__l_globalRule.textContent+=t,c(this.constructor,"_global_style_attached","1")}let i=r(this.constructor,"_component_style_attached"),a=i??[];i||(u(r(this.constructor,"styles"),(t=>{if(I(t)){let e=new CSSStyleSheet;e.replace(t),a.push(e)}else a.push(t)})),c(this.constructor,"_component_style_attached",a)),this.#i=this.attachShadow({mode:"open",slotAssignment:r(this.constructor,"autoSlot",!0)?"named":"manual"}),this.#i.adoptedStyleSheets=l(a,this.#g);let d=this.attributes.getNamedItem("css-link")?.value;if(d){const t=document.createElement("style");t.textContent=`@import "${d}"`,this.#i.appendChild(t)}let h=P(this.#E,20);this.#o=new MutationObserver((t=>{t.forEach((t=>{"childList"===t.type?h.call(this):"attributes"===t.type&&t.attributeName&&this.#C(t.attributeName,t.oldValue,this.getAttribute(t.attributeName))}))})),this._slotsPropMap={default:[]};let p=r(this.constructor,_t);u(p,(t=>{t.create(this)}))}connectedCallback(){let t=H(this.parentNode,(t=>t instanceof zt||t.host instanceof zt),"parentNode");this.#p=t?t instanceof zt?t:t.host:null,this.connected(),this.__init()}disconnectedCallback(){this.#o.disconnect()}__init(){if(this.#v)return;this.#b(),this.#N(),this.#y(),u(this.#e,((t,e)=>{let s=Reflect.getOwnPropertyDescriptor(this.#e,e);Object.defineProperty(this,e,{get(){let t=Reflect.get(this.#s,e);return s?.get?s?.get():t},set(t){s?.set?s?.set(t):Reflect.set(this.#s,e,t)}})})),Object.defineProperty(this.#e,"__isData",{enumerable:!1,value:!0}),this.#s=Lt(this.#e,this);const t=this;let s=r(this.constructor,_t);u(s,(e=>{e.propsReady(this,((e,s)=>(t.#s[e]=s,t.#s[e])))})),this.propsReady();let n=r(this.constructor,"__deco_computed");u(n,(({key:t,getter:e},s)=>{xt.startCompute(this),xt.setComputedProp((()=>{this.#s[s]=e.call(this)})),this.#e[s]=e.call(this),xt.endCompute()})),u(n,((t,e)=>{Object.defineProperty(this,e,{get(){return Reflect.get(this.#s,e)},set(t){dt(this.tagName,"Cannot set a computed property '"+e+"'")}})}));let[i,o,a]=this.renderContext();if(this.__expPos=o,i){let t=R(i);u(t,(t=>{this.#i.appendChild(t)})),this.#h=t,this.#d=t[0]}this.#E(),this.#o.observe(this,{childList:!0,attributes:!0});let l=r(this.constructor,"__deco_events");u(l,(t=>{let s=t.name,n=$({target:document,once:!1,passive:!1,capture:!1},t.options),r=B(t.fn,this),i=n.target;e(i)&&(i=i.call(this,this)),i.addEventListener(s,r,n)})),u(this.#u,((t,e)=>{this.#P(e)})),xt.startCss(this),xt.setCssUpdater((()=>{let t=this.css;this.#g.replace(t)}));let c=this.css;U(c)&&this.#g.replace(c),xt.endCss(),setTimeout((()=>{this.#f=!0,this.mounted(),u(s,(e=>{e.mounted(this,((e,s)=>(t.#s[e]=s,t.#s[e])))}))}),0),this.#v=!0}connected(){}propsReady(){}render(){throw Error(`[CompElem <${this.tagName}>] Missing render()`)}mounted(){}#T(t,e){this.#b();let s=r(this.#t[e],"props");s&&u(this.slots,((t,e)=>{t.filter((t=>t.nodeType===Node.ELEMENT_NODE)).forEach((t=>{t instanceof zt?t._updateProps(s):u(s,((e,s)=>{if(t instanceof HTMLSlotElement){let n=r(t,"__l_comp");if(n){let r=t.name||"default",i=n.#t[r];i||(i=n.#t[r]={props:{}}),i.props||(i.props={}),i.props[s]=e,n.#T(t,r)}}else t.setAttribute(s,e)}))}))})),this.slotchange(t,e)}slotchange(t,e){}shouldUpdate(t){return!0}updated(t){}emit(t,e={},s){s&&s.event&&(e.event=s.event),e.target=this,this.dispatchEvent(new CustomEvent(t,{bubbles:r(s,"bubbles",!1),composed:r(s,"composed",!1),cancelable:!0,detail:e}))}#x={};on(t,e){this.#x[t]||(this.#x[t]=[]);let s=e.bind(this);this.#x[t].push(s),this.addEventListener(t,s)}nextTick(t){requestAnimationFrame(t)}forceUpdate(){u(this.#s,((t,e)=>{this.#r[e]={value:void 0,chain:void 0}})),this.#S()}_notify(t,e){let s=[];u(e,(n=>{s.push(n);let i=r(this,s),o=ht(s);this.#r[o]={value:i,chain:"slots"===o?["slots"]:s,oldValue:t,end:s.length===e.length}})),this.#n&&clearTimeout(this.#n),this.#n=setTimeout(this.#S.bind(this),10)}#S(){const t=Object.seal(E(F(this.#r,((t,e)=>"#"===e[0]))));let e=r(this.constructor,_t);if(u(e,(e=>{e.updated(this,t)})),!this.shouldUpdate(t))return;let s=new Set;u(this.#r,(({value:t,chain:e,oldValue:n},r)=>{this.#a[r]&&this.#a[r].forEach((t=>{s.add(t)}))})),s.forEach((t=>{t.updateContext(...t._renderArgs?t._renderArgs:[])})),u(this.#M,(t=>{this.#P(t)})),this.updated(t),this.#r={}}#N(){let t=r(this.constructor,"__deco_props"),e=this.attributes,o=this.tagName,l=this.#c,c={};u(e,(({name:e,value:s})=>{if(e[0]===Jt||e[0]===Zt||e[0]===te||e===ne||"slot"===e)return;let n=V(e);t&&!t[n]&&(c[e]=s)})),this.#l=this.#l?$(this.#l,c):c,u(t,((c,d)=>{let h,p=t[d],u=a(l,d),m=r(this,d);if(!("_defaultValue"in p)&&(p._defaultValue=m,!p.type)){i(m)&&dt(o,"Prop '"+d+"' has neither propType nor defaultValue be used for type inference");let t=typeof m;b(m)&&(t="array");let e=Vt[t];p.type=e}if(u)h=z(l[d])?m:l[d];else{h=m;let t=e.getNamedItem(f(d))||e.getNamedItem(Zt+f(d));t&&(u=!0,h=t.value)}if(p.required&&!u)return dt(o,"Prop '"+d+"' is required"),!1;h=this.#A(t,d,h);let _=r(t,[d,"getter"]);_&&(_=B(_,this));let g=r(t,[d,"setter"]);g&&(g=B(g,this)),(_||g)&&Object.defineProperty(this.#e,d,{set:g||function(t){},get:_}),p.attribute&&n(h)&&!s(h)&&this.setAttribute(f(d),U(h)),this.#e[d]=h}))}#A(t,e,s){let r=t[e];if(!r)return s;let o=r.isValid,a=r.type,l=b(a)?a:[a],c=r.converter,d=s;if(!W(l,(t=>t===String))&&I(d)&&!K(d))try{d=c?c(d):Q(d,{html:me})}catch(t){dt(this.tagName,`Convert attribute '${e}' error with `+d)}l.forEach((t=>{"Boolean"===t.name&&(I(d)&&/(?:^true$)|(?:^false$)/.test(d)?d=Q(d):(i(d)||k(d))&&(d=!0))}));let h=typeof d,p=!n(d);return u(l,(t=>{if(G(h,t.name,"i")||d instanceof t)return p=!0,!1})),p||dt(this.tagName,`Invalid prop '${e}'. expected '${l.map((t=>t.name||t))}' but got '${h}'`),o&&(o.call(this,d,this.#e)||dt(this.tagName,`Invalid prop '${e}'. IsValid() check failed`)),d}#y(){let t=r(this.constructor,"__deco_states");u(t,((e,s)=>{let n=t[s],i=r(this,s);if(n){let t=n.prop;i=t?p(this.#e[t]):r(this,s)}this.#e[s]=i}))}#k=P(this.propsReady,100);_setParentProps(t,e){if(this.#v){let s=r(this.constructor,"__deco_props");u(t,((t,e)=>{let n=V(e),r=s[n];if(!r)return;let i=this.#e[n];t=this.#A(s,n,t),r.hasChanged&&!r.hasChanged.call(this,t,i)||(this.#e[n]=t,this._notify(i,[n]))})),$(this.#c,t),$(this.#l,e),this.#k()}}_updateProps(t){let e=r(this.constructor,"__deco_props");u(t,((t,s)=>{let n=V(s),r=e[n];if(!r)return;let i=this.#e[n];t=this.#A(e,n,t),r.hasChanged&&!r.hasChanged.call(this,t,i)||(xt.__skipCheck=!0,c(this,n,t),xt.__skipCheck=!1)})),$(this.#c,t),this.#k()}_initProps(t,e){this.#c=h(this.#c||{},t),this.#l=h({},e)}_bindSlot(t,e,s){if(this.#m[e]||(this.#m[e]=t,Object.defineProperty(t,"__l_comp",{value:this})),t.addEventListener("slotchange",(s=>{this.#v&&this.#T(t,"default"===e?"":e)})),!o(s)){let t=this.#t[e];t||(t=this.#t[e]={}),s.nodeFilter&&(t.filter=s.nodeFilter),t.props=X(s,"nodeFilter")}}_bindSlotHook(t,e){this.#u[t]=e}#M=new Set;_updateSlot(t,e,s){let n=this.#m[t],r=this.#u[t];if(!r&&!n)return;let i=this.#t[t];if(e&&(i.props||(i.props={}),i.props[e]=s),r)this.#M.add(t);else{let t=n.assignedElements({flatten:!0});u(t,(t=>{t.setAttribute(e,s+"")}))}}#b(){const t=q(this.childNodes,(t=>t.nodeType===Node.COMMENT_NODE?[]:t instanceof HTMLSlotElement?t.assignedNodes({flatten:!0}):t));let e=Y(t,(t=>t.nodeType===Node.TEXT_NODE?"default":t instanceof Element?t.getAttribute("slot")||"default":void 0));if(o(e))return void(o(this.#e["#slots"])||(this.#v?this.#s["#slots"]={}:this.#e["#slots"]={}));u(e,((t,e)=>{if(e){for(;t.length>0;){let e=t[0];if(!(e.nodeType===Node.TEXT_NODE&&k(e.textContent)||e instanceof HTMLSlotElement&&o(e.assignedNodes({flatten:!0}))))break;t.shift()}for(;t.length>0;){let e=m(t);if(!(e.nodeType===Node.TEXT_NODE&&k(e.textContent)||e instanceof HTMLSlotElement&&o(e.assignedNodes({flatten:!0}))))break;t.pop()}}}));let s={};u(e,((t,e)=>{o(t)||(s[e]=t)})),this.#v?this.#s["#slots"]=s:this.#e["#slots"]=s}#P(t){let e=this.#u[t];if(!e)return;let s=this.#t[t];if(!this.#e["#slots"][t])return;this.renderAsync(e,r(s,"props"));const n=this._asyncDirectives.get(e);let[i,a,l]=n?.renderContext(e(r(s,"props"))),c=J(R(i),(t=>t.nodeType===Node.COMMENT_NODE));if(c){let e=this.#_[t];o(e)||u(e,(t=>{t.parentNode?.removeChild(t)})),this.#_[t]=c,this.append(...c),this.#M.clear()}}_asyncDirectives=new WeakMap;renderAsync(t,...e){}#E(){o(this.#t)||u(this.slots,((t,n)=>{if(o(t))return;let r=this.#t[n],i=t;if(r){let n=r.filter;if(e(n))i=n(t);else if(s(n)){let e=n.type,s=n.maxCount;if(e){let s=b(e)?e:[e];i=Z(t,(t=>W(s,(e=>t instanceof e))))}s>0&&(i=tt(t,0,s))}}if("named"===this.#i.slotAssignment){let e=[];for(u(t,(t=>{i.includes(t)||e.push(t)}));e.length>0;){let t=e.pop();t.parentNode?.removeChild(t)}}else this.#m[n].assign(...i);this.#v&&this.#T(this.#m[n],"default"===n?"":n)}))}#C(t,e,s){if(!this.isMounted)return;if(Tt(this.constructor).has(t)){if(K(s)){s=r(this.constructor,"__deco_props")[t]._defaultValue}this._updateProps({[t]:s})}}_regDeps(t,e){let s=this.#a[t];s||(s=this.#a[t]=new Set),s.add(e);let n="",r=t.split("-");r.pop(),r.forEach((t=>{n=o(n)?t:n+"-"+t;let s=this.#a[n];s||(s=this.#a[n]=new Set),s.add(e)}))}}var Wt;!function(t){t.NONE="NONE",t.REMOVE="REMOVE",t.REPLACE="REPLACE",t.UPDATE="UPDATE",t.APPEND="APPEND"}(Wt||(Wt={}));class Kt{index;value;isText=!1;isTmpl=!1;isDirective=!1;node;textNode;isComponent=!1;attrName;attrTmpl;isProp=!1;isToggleProp=!1;eventName;constructor(t,e,s,n){this.index=t+"",this.node=e,s&&(this.attrName=s),n&&(this.attrTmpl=n)}}var Qt,Gt;!function(t){t.ATTR="attr",t.PROP="prop",t.TEXT="text",t.CLASS="class",t.STYLE="style",t.SLOT="slot",t.TAG="tag"}(Qt||(Qt={}));class Xt{startNode;endNode;type;attrName;varIndex;expressionChain;nodes;constructor(t,e,s,n){this.startNode=e,this.attrName=s,this.type=n}setVarIndex(t){this.varIndex=t}}!function(t){t.AFTER_BEGIN="afterbegin"}(Gt||(Gt={}));class qt extends Function{diClass;args;di;varPath;point;slotComponent;varChain;constructor(t,...e){super(),this.diClass=t,this.args=e,this.varChain=xt.popDirectiveQ()}checkScope(t){let e=r(this.diClass,"scopes");o(e)||G(e.join(","),t)||ct(`Directive '${this.diClass.name}' is out of scopes, expect '${e.join(",")}' bug got '${t}'`)}render(t){let e=r(t,"__directives"),s=this.di||e[this.varPath];s||(s=new this.diClass(this.point),s.renderComponent=t,s.slotComponent=this.slotComponent,s.renderParams=this.varChain),this.di=s,s._renderArgs=this.args;let[n,i,o]=s.renderContext(...this.args);return o?s.__expPosMap=o:i&&(s.__expPos=i),n}update(t,e,s){let n=this.di.update(t,e,s);if(n===Wt.REMOVE)t.forEach((t=>{t.parentNode?.removeChild(t)}));else if(n===Wt.REPLACE){let s=[];t.forEach((t=>{t.parentNode?.removeChild(t)}));let n=this.di.render(...e),[r,i,o]=this.di.renderContext(n);o?this.di.__expPosMap=o:i&&(this.di.__expPos=i),s=R(r);let a=document.createDocumentFragment();a.append(...s),this.point.endNode.parentNode.insertBefore(a,this.point.endNode)}else if(n===Wt.UPDATE){let s,n={},r={},i=[],a=[],l=this.di.render(...e);b(l)&&l[0]instanceof fe&&l.forEach((t=>{let e=t.key??t.getKey();n[e]="1",r[e]=t,a.push(e)})),t=Z(D(t),(t=>t.nodeType===Node.ELEMENT_NODE)),s=Z(D(R(s)),(t=>t.nodeType===Node.ELEMENT_NODE));let c={},d="",h={};M(t,(t=>{let e=t,s=e.getAttribute("key");if(s){if(c[s])return d=s,!1;c[s]=e,i.push(s),h[s]="1"}})),d&&ct(`${V(this.diClass.name)} - duplicate key '${d}'`);let p={},f=n;const _=this.point.startNode.parentNode;let g=[],v=[];if(u(h,((t,e)=>{f[e]||(v.push(e),delete h[e],S(i,e))})),!o(a)){let t="",e=-1,s=[],n={};a.forEach(((r,o)=>{let l=i.findIndex((t=>t===r));if(l>-1&&l!==o){if(e<0||e-l==1){let t=m(s);s.push({nodeId:r,targetId:0===o?Gt.AFTER_BEGIN:t?t.nodeId:a[o-1]})}else n[s.length]={group:s,targetId:""},s=[],s.push({nodeId:r,targetId:i[l]});e=l}else if(l<0){let e=t?c[t]||this.point.endNode:this.point.startNode;g.push({prevNode:e,newkey:r})}t=r})),o(n)&&s.length>0&&(n[s.length]={group:s,targetId:""});let r=Object.keys(n),l=r.map((t=>parseInt(t))).sort(((t,e)=>t-e));if(r.length<2&&r.length>0){let{group:t}=n[l[0]];N(t).forEach((({targetId:t,nodeId:e})=>{let s,n=c[e];t===Gt.AFTER_BEGIN?(s=this.point.startNode,s.after(n)):(s=c[t],s.after(n))}))}}g.forEach((t=>{let e=t.newkey,s=p[e]||this.#L(r[e],e),n=t.prevNode;n===this.point.endNode?n.before(s):(this.point.startNode,n.after(s))})),v.forEach((t=>{this.#O(t);let e=c[t];e&&_.removeChild(e)})),this.di.updateContext(l)}}getDirective(){return this.di}#L(t,e){let[s,n,r]=this.di.renderContext(t),i=et(s);return this.di.__expPosMap[e]=n,i}#O(t){this.di.__expPosMap[t]=null,delete this.di.__expPosMap[t]}}function Yt(t){return(...s)=>{let n=null;return s.forEach(((t,r)=>{if(e(t)){let e=t;s[r]=function(...t){let s=n.di;xt.startRender(s);let r=e(...t);return xt.endRender(s.renderComponent),r}}})),n=new qt(t,...s),n}}const Jt="@",Zt=".",te="?",ee="*",se=":",ne="ref",re=/[.?-a-z]+\s*=\s*(['"])\s*([^='"]*<\!--l_ui-pl_df-->){2,}.*?\1/ims,ie=/<\s*[a-z0-9-]+([^>]*<\!--l_ui-pl_df-->)*[^>]*?(?<!-)>/gims,oe="slot-props";function ae(t){let e="";(b(t)?t:[t]).forEach((({strings:t,vars:s})=>{let n=R(t);n[0]=st(n[0]),n[n.length-1]=nt(n[n.length-1]);let i=n.length-1;n.forEach(((t,n)=>{let o=r(s,n,"");o=i===n?"":le,e+=t+o}))}));let s=e.match(re);if(s){return ct(`Parse error: attribute value can be set only one interpolation —— \n ${rt(s[0],le,"${...}")}`),""}let n=0;return e=e.replace(ie,((t,e)=>rt(t,le,(()=>le.replace("--\x3e","")+n++)))),e}const le="\x3c!--l_ui-pl_df--\x3e",ce="\x3c!--l_ui-pl_df",de=/<!--l_ui-pl_df\d*(-->)?/;function he(t,s,n,r,o,l,c=0,d=""){const h=document.createElement("div");h.innerHTML=n;const p=document.createNodeIterator(h,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_COMMENT);let m,_=0,v=null;for(;m=p.nextNode();)if(m instanceof HTMLElement||m instanceof SVGElement){m instanceof zt?v=m:v?.contains(m)||(v=null);let n={},i=R(m.attributes);u(i,(i=>{let{name:l,value:h}=i;if(l===oe){let t=m.name||"default";if(v){let e=v._slotsPropMap[t];e||(e=v._slotsPropMap[t]=[]),e.push(m)}}if(g(l,ce)){let e=r[_];if(e instanceof qt){e.checkScope(Qt.TAG);let n=new Xt(c,m,l.substring(1),Qt.TAG);e.point=n,e.varPath=d+_,e.slotComponent=v,s.push(e);let r=t[d+_]=new Kt(d+_,m);r.isDirective=!0,r.value=e,r.isComponent=!!v,_++}m.removeAttribute(l)}else{if(l[0]===Jt){let s=t=>{},n=null;if(de.test(h)){let i=r[_];if(!e(i))return void dt(m.tagName,`Event '${l}' must be a function`);s=i.bind(o),n=t[d+_]=new Kt(d+_,m,l.replace(/\.|\?|@/,""),h),n.isComponent=!!v,_++}let i=l.substring(1).split(".").shift();return s=Bt(l.substring(1),s,m,o),m.removeAttribute(l),void(n&&(n.eventName=i,n.value=s))}if(l!==ne)if(l[0]!==Zt||de.test(h)){if(de.test(h)){let e=r[_],o=t[d+_]=new Kt(d+_,m,l.replace(/\.|\?|@/,""),h);if(o.isComponent=!!v,l[0]===Zt||l[0]===te||l[0]===ee){if(e instanceof qt){e.checkScope(Qt.PROP),s.push(e);let t=new Xt(c,m,l.substring(1),Qt.PROP);e.varPath=d+_,e.point=t,e.slotComponent=v,o.value=e,o.isDirective=!0}else if(l[0]===te)o.isToggleProp=!0,o.value=!!e,o.value&&m.setAttribute(l.substring(1),"");else if(l[0]===ee){o.value=e;let t=l.substring(1);const[s,n]=t.split(se);let r=s;switch(n){case"camel":r=V(r);break;case"kebab":r=f(r);break;case"snake":r=it(r)}o.attrName=r,m.setAttribute(r,e)}else if(m instanceof zt||"SLOT"===m.tagName){let t=V(l.substring(1));t in m||"SLOT"===m.tagName||dt(m.tagName,`Prop '${l}' is not defined in ${m.tagName}`),o.value=e,o.isProp=!0,n[t]=e}else dt(m.tagName,`Prop '${l}' can only be set on a CompElem or a slot`),delete t[d+_];m.removeAttribute(l),e=""}else{if(o.value=e,e instanceof qt){let t=Qt.ATTR;"class"===l?t=Qt.CLASS:"style"===l&&(t=Qt.STYLE),e.checkScope(t),s.push(e),o.isDirective=!0;let n=new Xt(c,m,l,t);e.point=n,e.slotComponent=v,e.varPath=d+_,e=""}h=w(h,de,e),i.value=h}_++}}else dt(m.tagName,`Prop '${l}' must be an interpolation`);else{if(de.test(h)){let t=r[_];if(!a(t,"current"))return void dt(m.tagName,"Ref must be a RefObject");_++,t.current=m}m.removeAttribute(l)}}})),m instanceof zt?m._initProps(n):m instanceof HTMLSlotElement&&o._bindSlot(m,m.name||"default",n)}else{let e=m;if(`\x3c!--${e.nodeValue}--\x3e`!==le)continue;let n=t[d+_]=new Kt(d+_,m);n.isComponent=!!v,n.isText=!0;let a,h=r[_];if(a=document.createComment(`compelem-ui-${c}-${_}-child-start`),e.parentNode.insertBefore(a,e),e.nodeValue=`compelem-ui-${c}-${_}-child-end`,n.textNode=a,h instanceof qt){n.isDirective=!0,n.value=h;let t=v?Qt.SLOT:Qt.TEXT;s.push(h);let r=new Xt(c,a,"",t);r.endNode=e,h.point=r,h.slotComponent=v,h.varPath=d+_,h=""}else if(h instanceof fe){n.isTmpl=!0,n.value=h;let e=ae(h);h=he(t,s,e,h.vars,o,l,c,d+`${_}-`)}else n.value=h;if(_++,i(h))continue;if(h instanceof NodeList){let t=document.createDocumentFragment();t.append(...h),e.parentNode.insertBefore(t,e)}else if(h instanceof Element)e.parentNode.insertBefore(h,e);else if(U(h)){let t=document.createTextNode(h);e.parentNode.insertBefore(t,e)}}return h.childNodes}const pe={insertBefore:function(t,e){let s=document.createDocumentFragment();s.append(...e),t.parentNode.insertBefore(s,t)},remove:function(t,e){let s=t.nextSibling;for(;s!==e;)s?.parentNode?.removeChild(s),s=t.nextSibling}},ue=/\s+\.?key\s*=/;class fe{strings;vars;key;constructor(t,e){this.strings=l(t),this.vars=e}getKey(){let t=this.vars,e="";return u(this.strings,((s,n)=>{if(ue.test(s))return e=ot(t[n]),!1})),this.key=e,e}append(t){let e=m(this.strings);return t.strings.forEach(((t,s)=>{0!=s?this.strings.push(t):this.strings[this.strings.length-1]=e+t})),this.vars=l(this.vars,t.vars),this}getHTML(){let t="",e=R(this.strings);e[0]=st(e[0]),e[e.length-1]=nt(e[e.length-1]);let s=e.length-1;return e.forEach(((e,n)=>{let i=r(this.vars,n,"");i=i instanceof fe?i.getHTML():s===n?"":i,t+=e+i})),t}}function me(t,...e){return new fe(I(t)?[t]:t,e)}function _e(t){return{current:t}}function ge(t,e,s){s.get||ct(`Prop '${e}' must be a getter`),a(t.constructor,"__deco_computed")||(t.constructor.__deco_computed=o(t.constructor.__deco_computed)?{}:p(t.constructor.__deco_computed)),t.constructor.__deco_computed[e]={key:e,getter:s.get}}function ve(t,e){return(s,n,r)=>{a(s.constructor,"__deco_events")||(s.constructor.__deco_events=o(s.constructor.__deco_events)?[]:p(s.constructor.__deco_events)),s.constructor.__deco_events.push({name:t,options:e,fn:s[n]})}}var Ee;!function(t){t.ONCE="once",t.UPDATABLE="updatable"}(Ee||(Ee={}));class Ce extends ft{created(t,...e){}mounted(t,e,...s){}get targets(){return[ut.FIELD]}selector;cache;result;constructor(t,e){super(),this.selector=t,this.cache=e}static getKey(t){return t}getter(t){this.result=t.shadowRoot?.querySelector(this.selector)}propsReady(t,e,s,n,...r){const i=this;Object.defineProperty(t,n,{get:()=>(i.result&&i.cache||i.getter(t),i.result)})}updated(t,e){this.cache===Ee.UPDATABLE&&this.getter(t)}}const be=Ct(Ce),Ne=Ct(class extends Ce{getter(t){this.result=t.shadowRoot?.querySelectorAll(this.selector)}});function ye(t){if(1===arguments.length)return(e,s)=>{Pe(e,s,t)};Pe(arguments[0],arguments[1],{prop:""})}function Pe(t,e,s){if(!a(t.constructor,"__deco_states")){const e={};let s=t.constructor;for(;(s=pt(s))!==zt;)h(e,s.__deco_states?p(s.__deco_states):{});t.constructor.__deco_states=e}t.constructor.__deco_states[e]=s}function Te(t,e,s){Pe(t.prototype,e,s||{prop:""})}function xe(t){return e=>{e&&customElements.define(t,e)}}const Se=Ct(class extends ft{created(t,...e){}propsReady(t,e,...s){}get targets(){return[ut.METHOD]}sources;options;handler;constructor(t,e,s){super(),this.sources=b(t)?t:[t],this.options=e,this.handler=s}static getKey(t){return b(t)?t.sort().join(""):t}mounted(t,s,n,i,...o){this.handler||(this.handler=e(i)?i:t[i]);let a=this.handler,l=r(this.options,"immediate",!1);r(this.options,"once",!1)&&(a=x(a.bind(t)));let c=[];this.sources.forEach((e=>{let s=r(t,e.replaceAll("-","."));l&&c.push({handler:a,value:s,varPath:e})})),c.forEach((({handler:e,value:s,varPath:n})=>{e.call(t,r(t,n),s,n)}))}updated(t,e){this.sources.forEach((s=>{u(e,(({value:e,chain:n,oldValue:i,end:o},a)=>{let l=s.replaceAll(".","-");if(!g(a,l))return;a===l&&o&&this.handler&&this.handler.call(t,e,i,a);let c=n.length-1;for(;c;){let e=n.slice(0,c);if(o&&e.join("-")===l&&r(this.options,"deep")){let s=r(t,e);this.handler.call(t,s,s,e.join("-"))}c--}}))}))}});class Me extends(Ut(Object)){_renderArgs;static get scopes(){return[]}renderParams}const Ae=["key"];const ke=Yt(class extends Me{update(t,e,s){return Wt.NONE}static get scopes(){return[Qt.TAG]}constructor(t){super(),this.point=t}render(t){let e=this.point.startNode;if(e instanceof zt){let s={},n={};u(t,((t,r)=>{Ae.includes(r)||(r in e?s[r]=t:n[r]=t+"")})),e._initProps(s,n)}else u(t,((t,s)=>{e.setAttribute(s,t)}))}});const Le=Yt(class extends Me{update(t,e,s){return this.render(e[0]),Wt.NONE}static get scopes(){return[Qt.CLASS]}constructor(t){super(t),this.point=t}lastCls;render(t){let e=[];b(t)?e=D(t):s(t)?e=q(t,((t,e)=>t?e:[])):I(t)&&(e=t.split(" "));let n=this.point.startNode;u(this.lastCls,(t=>{n.classList.remove(t)})),u(e,(t=>{n.classList.add(t)})),this.lastCls=l(e)}}),Oe=/\s+\.?key\s*=/;const we=Yt(class extends Me{update(t,e,s){if(o(t)&&o(e[0]))return Wt.NONE;if(!o(this.renderParams)){let t=m(this.renderParams);b(t)||(t=[t]),this.renderParams=t}return Wt.UPDATE}constructor(t){super(),o(this.renderParams)||(this.renderParams=R(m(this.renderParams)))}static get scopes(){return[Qt.TEXT,Qt.SLOT]}render(t,e){let s=M(t,((t,s)=>e(t,s))),n=[],r=[];return s.forEach((t=>{let e=m(r),s=t.vars,i=!0;t.strings.forEach(((t,o)=>{if(Oe.test(t)){let t=s[o]+"";n.includes(t)&&ct(`forEach - duplicate key '${t}'`),n.push(t),i=!1}0==o&&e?r[r.length-1]=e+t:r.push(t)})),i&&ct("forEach - missing 'key' prop")})),s}});const De=Yt(class extends Me{ifNodes;elseNodes;static get scopes(){return[Qt.TEXT,Qt.SLOT]}update(t,e,s){return!!e[0]==!!s[0]?Wt.UPDATE:(e[0],Wt.REPLACE)}render(t,e,s){return t?e(t):s(t)}});const Re=Yt(class extends Me{static get scopes(){return[Qt.TEXT,Qt.SLOT]}update(t,e,s){return e[0]===s[0]?Wt.UPDATE:e[0]?Wt.REPLACE:(this.cacheNodes=t,Wt.REMOVE)}render(t,e){return t?e():me``}});var $e;!function(t){t.CHANGE="change",t.INPUT="input"}($e||($e={}));const je=Yt(class extends Me{update(t,e,s){if(this.modelPath||(this.modelPath=m(this.renderParams)),!_(e,s)){const t=this.point.startNode;if(t instanceof zt)t._updateProps({value:e[0]});else if(t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement)t.setAttribute("value",e[0]+"");else if(t instanceof HTMLInputElement)switch(t.type){case"checkbox":case"radio":e[0]?t.setAttribute("checked",""):t.removeAttribute("checked");break;default:t.setAttribute("value",e[0]+"")}}return Wt.NONE}static get scopes(){return[Qt.TAG]}modelPath;point;constructor(t){super(),this.point=t}render(e,n){this.modelPath||(this.modelPath=m(this.renderParams)),n&&(this.modelPath=t(n));const i=this.point.startNode;if("binded"!==r(i,"_model"))if(s(e)||U(e)||(e=""),i instanceof zt)i._initProps({value:e}),i.addEventListener("update:value",(t=>{c(this.renderComponent,this.modelPath,t.detail.value)})),c(i,"_model","binded");else if(i instanceof HTMLTextAreaElement)i.setAttribute("value",e+""),i.addEventListener("input",(t=>{let e=t.target;c(this.renderComponent,this.modelPath,e.value)})),c(i,"_model","binded");else if(i instanceof HTMLInputElement){let t="",s="";switch(i.type){case"checkbox":case"radio":t="checked",s="change";break;default:t="value",s="input"}i.setAttribute(t,e+""),i.addEventListener(s,(t=>{let e=t.target;c(this.renderComponent,this.modelPath,e.value)})),c(i,"_model","binded")}else i instanceof HTMLSelectElement&&(i.setAttribute("value",e+""),i.addEventListener("change",(t=>{let e=t.target;c(this.renderComponent,this.modelPath,e.value)})),c(i,"_model","binded"))}});const Ie=Yt(class extends Me{update(t,e,s){return this.render(e[0]),Wt.NONE}display=void 0;static get scopes(){return[Qt.TAG]}constructor(t){super(),this.point=t}render(t){let e=this.point.startNode;i(this.display)&&(this.display=e.style.display),this.renderComponent.nextTick((()=>{e.style.display=t?this.display:"none"}))}});const He=Yt(class extends Me{update(t,e,s){return Wt.NONE}static get scopes(){return[Qt.SLOT]}render(t,e){return t=t.bind(this.renderComponent),this.slotComponent._bindSlotHook(e||"default",t),t}});const Be=Yt(class extends Me{update(t,e,s){return this.render(e[0]),Wt.NONE}constructor(t){super(),this.point=t}static get scopes(){return[Qt.STYLE]}render(t){let e="";s(t)?e=L(M(t,((t,e)=>f(e)+":"+t)),";"):I(t)&&(e=t),u(e.split(";"),(t=>{let e=t.split(":");this.point.startNode.style.setProperty(U(e[0]),U(e[1]))}))}});const Ue=Yt(class extends Me{update(t,e,s){return _(e,s)||this.targetComponent._updateProps({[this.attrName]:e[0]}),Wt.NONE}static get scopes(){return[Qt.PROP]}modelPath;attrName;targetComponent;constructor(t){super(),this.targetComponent=t.startNode,this.attrName=t.attrName}render(t){this.modelPath||(this.modelPath=m(this.renderParams)),this.targetComponent._initProps({[this.attrName]:t}),this.targetComponent.addEventListener("update:"+this.attrName,(t=>{c(this.renderComponent,this.modelPath,t.detail.value)}))}});const Fe=Yt(class extends Me{static get scopes(){return[Qt.TEXT,Qt.SLOT]}update(t,e,s){return _(e,s)?Wt.NONE:Wt.REPLACE}render(t,s){let n=()=>me``,r=[],i=[];u(s,((t,s)=>{if(e(t))r.push(s),i.push(t);else{let e=t[0],s=t[1];r.push(e),i.push(s)}"default"===s&&(n=t)}));let o=at(r,(s=>e(s)?s(t):s==t));return lt(i[o]??n)}});export{zt as CompElem,ft as Decorator,ut as DecoratorType,vt as DecoratorWrapper,Me as Directive,Wt as DirectiveUpdateTag,qt as DirectiveWrapper,Xt as EnterPoint,Qt as EnterPointType,Kt as ExpPos,mt as GetKeyFnName,$e as ModelTriggerType,Ee as QueryCache,fe as Template,gt as _DecoratorMap,_t as _DecoratorsKey,Tt as _getObservedAttrs,ke as bind,ae as buildHTML,Le as classes,ge as computed,_e as createRef,Ct as decorator,Yt as directive,ve as event,we as forEach,me as html,De as ifElse,Re as ifTrue,Te as makeState,je as model,Nt as prop,be as query,Ne as queryAll,Ie as show,He as slot,ye as state,Be as styles,Ue as sync,xe as tag,Se as watch,Fe as when};