@type-dom/ui 0.1.1 → 0.1.3

package/src/components/navigation/td-menu/utils/menu-bar.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+// import type { RendererNode } from 'vue'
+const menu_item_1 = require("./menu-item");
+class Menu {
+    constructor(domNode, namespace) {
+        this.domNode = domNode;
+        this.init(namespace);
+    }
+    init(namespace) {
+        const menuChildren = this.domNode.childNodes;
+        Array.from(menuChildren).forEach((child) => {
+            if (child.nodeType === 1) {
+                new menu_item_1.default(child, namespace);
+            }
+        });
+    }
+}
+exports.Menu = Menu;
+exports.default = Menu;

package/src/components/navigation/td-menu/utils/menu-item.d.ts

@@ -0,0 +1,9 @@
+import SubMenu from './submenu';
+declare class MenuItem {
+    domNode: HTMLElement;
+    submenu: SubMenu | null;
+    constructor(domNode: HTMLElement, namespace: string);
+    init(namespace: string): void;
+    addListeners(): void;
+}
+export default MenuItem;

package/src/components/navigation/td-menu/utils/menu-item.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// import { triggerEvent } from '@element-plus/utils'
+// import { EVENT_CODE } from '@element-plus/constants'
+const utils_1 = require("@type-dom/utils");
+const aria_1 = require("../../../../constants/aria");
+const submenu_1 = require("./submenu");
+class MenuItem {
+    constructor(domNode, namespace) {
+        this.domNode = domNode;
+        this.submenu = null;
+        this.submenu = null;
+        this.init(namespace);
+    }
+    init(namespace) {
+        this.domNode.setAttribute('tabindex', '0');
+        const menuChild = this.domNode.querySelector(`.${namespace}-menu`);
+        if (menuChild) {
+            this.submenu = new submenu_1.default(this, menuChild);
+        }
+        this.addListeners();
+    }
+    addListeners() {
+        this.domNode.addEventListener('keydown', (event) => {
+            let prevDef = false;
+            switch (event.code) {
+                case aria_1.EVENT_CODE.down: {
+                    (0, utils_1.triggerEvent)(event.currentTarget, 'mouseenter');
+                    this.submenu && this.submenu.gotoSubIndex(0);
+                    prevDef = true;
+                    break;
+                }
+                case aria_1.EVENT_CODE.up: {
+                    (0, utils_1.triggerEvent)(event.currentTarget, 'mouseenter');
+                    this.submenu &&
+                        this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);
+                    prevDef = true;
+                    break;
+                }
+                case aria_1.EVENT_CODE.tab: {
+                    (0, utils_1.triggerEvent)(event.currentTarget, 'mouseleave');
+                    break;
+                }
+                case aria_1.EVENT_CODE.enter:
+                case aria_1.EVENT_CODE.numpadEnter:
+                case aria_1.EVENT_CODE.space: {
+                    prevDef = true;
+                    event.currentTarget.click();
+                    break;
+                }
+            }
+            if (prevDef) {
+                event.preventDefault();
+            }
+        });
+    }
+}
+exports.default = MenuItem;

package/src/components/navigation/td-menu/utils/submenu.d.ts

@@ -0,0 +1,12 @@
+import type MenuItem from './menu-item';
+declare class SubMenu {
+    parent: MenuItem;
+    domNode: ParentNode;
+    subMenuItems: NodeList;
+    subIndex: number;
+    constructor(parent: MenuItem, domNode: ParentNode);
+    init(): void;
+    gotoSubIndex(idx: number): void;
+    addListeners(): void;
+}
+export default SubMenu;

package/src/components/navigation/td-menu/utils/submenu.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// import { triggerEvent } from '@element-plus/utils'
+// import { EVENT_CODE } from '@element-plus/constants'
+const utils_1 = require("@type-dom/utils");
+const aria_1 = require("../../../../constants/aria");
+class SubMenu {
+    constructor(parent, domNode) {
+        this.parent = parent;
+        this.domNode = domNode;
+        this.subIndex = 0;
+        this.subIndex = 0;
+        this.init();
+    }
+    init() {
+        this.subMenuItems = this.domNode.querySelectorAll('li');
+        this.addListeners();
+    }
+    gotoSubIndex(idx) {
+        if (idx === this.subMenuItems.length) {
+            idx = 0;
+        }
+        else if (idx < 0) {
+            idx = this.subMenuItems.length - 1;
+        }
+        this.subMenuItems[idx].focus();
+        this.subIndex = idx;
+    }
+    addListeners() {
+        const parentNode = this.parent.domNode;
+        Array.prototype.forEach.call(this.subMenuItems, (el) => {
+            el === null || el === void 0 ? void 0 : el.addEventListener('keydown', (event) => {
+                let prevDef = false;
+                switch (event.code) {
+                    case aria_1.EVENT_CODE.down: {
+                        this.gotoSubIndex(this.subIndex + 1);
+                        prevDef = true;
+                        break;
+                    }
+                    case aria_1.EVENT_CODE.up: {
+                        this.gotoSubIndex(this.subIndex - 1);
+                        prevDef = true;
+                        break;
+                    }
+                    case aria_1.EVENT_CODE.tab: {
+                        (0, utils_1.triggerEvent)(parentNode, 'mouseleave');
+                        break;
+                    }
+                    case aria_1.EVENT_CODE.enter:
+                    case aria_1.EVENT_CODE.numpadEnter:
+                    case aria_1.EVENT_CODE.space: {
+                        prevDef = true;
+                        event.currentTarget.click();
+                        break;
+                    }
+                }
+                if (prevDef) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+                return false;
+            });
+        });
+    }
+}
+exports.default = SubMenu;

package/src/components/navigation/td-menu-item/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-menu-item.css';

package/src/components/navigation/td-menu-item/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-menu-item.css");

package/src/components/navigation/td-menu-item-group/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-menu-item-group.css';

package/src/components/navigation/td-menu-item-group/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-menu-item-group.css");

package/src/components/navigation/td-page-header/style/css.d.ts

@@ -1,3 +1,3 @@
-import '@element-plus/components/base/style/css';
-import '@element-plus/components/divider/style/css';
+import '../../../base/style/css';
+import '../../../others/td-divider/style/css';
 import '@element-plus/theme-chalk/el-page-header.css';

package/src/components/navigation/td-page-header/style/css.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
-require("@element-plus/components/divider/style/css");
+require("../../../base/style/css");
+require("../../../others/td-divider/style/css");
 require("@element-plus/theme-chalk/el-page-header.css");

package/src/components/navigation/td-step/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-step.css';

package/src/components/navigation/td-step/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-step.css");

package/src/components/navigation/td-steps/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-steps.css';

package/src/components/navigation/td-steps/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-steps.css");

package/src/components/navigation/td-tab-pane/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-tab-pane.css';

package/src/components/navigation/td-tab-pane/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-tab-pane.css");

package/src/components/navigation/td-tabs/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-tabs.css';

package/src/components/navigation/td-tabs/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-tabs.css");

package/src/components/others/collapsible-box/heading/expand-heading.js

@@ -41,7 +41,7 @@ class ExpandHeading extends framework_1.TypeDiv {
         this.svg.addEvents({
             click: (e) => {
                 var _a, _b;
-                console.log('expand-heading svg.dom clicked');
+                // console.log('expand-heading svg.dom clicked');
                 e === null || e === void 0 ? void 0 : e.stopPropagation();
                 // const style = getComputedStyle(this.svg.dom);
                 // console.log('style.transform is ', style.transform);

package/src/components/others/example/op-btns.js

@@ -47,7 +47,7 @@ class OpBtns extends framework_1.TypeDiv {
                         alert('文本已复制到剪贴板！');
                     }
                     catch (err) {
-                        console.error('无法复制文本: ', err);
+                        // console.error('无法复制文本: ', err);
                         alert('复制失败，请手动复制。');
                     }
                 }),

package/src/components/others/menus/menu.d.ts

@@ -1,21 +1,22 @@
-import { Div, TypeMenu, type IRoute, Router, TypeProps } from '@type-dom/framework';
+import { Div, TypeMenu, TypeProps } from '@type-dom/framework';
+import { Router, RouteRecordNormalized, RouteRecordRaw } from '@type-dom/router';
 import { TdIcon } from '../../basic/td-icon/td-icon.class';
 import { Menus } from './menus';
-export interface IMenuConfig extends TypeProps {
-    route: IRoute;
+export interface MenuProps extends TypeProps {
+    route: RouteRecordNormalized | RouteRecordRaw;
     router?: Router;
     width?: string;
 }
 export declare class Menu extends TypeMenu {
     className: 'Menu';
-    route?: IRoute;
+    route?: RouteRecordNormalized | RouteRecordRaw;
     router?: Router;
     parent?: Menu | Menus;
     contentItem: Div;
     menuItems: Menu[];
     collapsed?: boolean;
     caret?: TdIcon;
-    constructor(params: IMenuConfig);
+    constructor(params: MenuProps);
     get menuRoot(): Menus | undefined;
     setup(): void;
 }

package/src/components/others/menus/menu.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Menu = void 0;
 const framework_1 = require("@type-dom/framework");
+const router_1 = require("@type-dom/router");
 const svgs_1 = require("@type-dom/svgs");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 class Menu extends framework_1.TypeMenu {
     constructor(params) {
-        var _a;
+        var _a, _b;
         // console.log('Menu constructor . ');
         super();
         this.className = 'Menu';
@@ -24,9 +25,9 @@ class Menu extends framework_1.TypeMenu {
                 alignItems: 'center',
             },
         });
-        if (this.route.svgObj) {
+        if ((_a = this.route.meta) === null || _a === void 0 ? void 0 : _a.svgObj) {
             div.addChild(new td_icon_class_1.TdIcon({
-                slot: this.route.svgObj,
+                slot: this.route.meta.svgObj,
                 styleObj: {
                     paddingRight: '5px',
                 },
@@ -38,7 +39,7 @@ class Menu extends framework_1.TypeMenu {
                 name: 'route-name',
             },
             styleObj: {
-                width: (_a = params.width) !== null && _a !== void 0 ? _a : '160px',
+                width: (_b = params.width) !== null && _b !== void 0 ? _b : '160px',
             },
         }));
         if (this.route.children) {
@@ -60,18 +61,22 @@ class Menu extends framework_1.TypeMenu {
     }
     setup() {
         var _a;
+        const route = (0, router_1.useRoute)();
+        // console.warn('route.get().fullPath is ', route.get().fullPath);
         if (((_a = this.route) === null || _a === void 0 ? void 0 : _a.redirect) === undefined) {
             // todo addEvent 如何pipe ??
             this.contentItem.addEvents({
                 click: (event) => {
-                    var _a, _b, _c, _d;
-                    console.log('click . ');
+                    var _a, _b, _c, _d, _e, _f;
+                    console.log('menu click . ');
                     if (((_a = this.menuRoot) === null || _a === void 0 ? void 0 : _a.selectedMenu) === this) {
                         return;
                     }
-                    (_b = this.router) === null || _b === void 0 ? void 0 : _b.push(this.route.path);
-                    (_c = this.menuRoot) === null || _c === void 0 ? void 0 : _c.setSelectedMenu(this);
-                    document.title = 'UI - ' + ((_d = this.route) === null || _d === void 0 ? void 0 : _d.name);
+                    console.error('then push path ', (_b = this.route) === null || _b === void 0 ? void 0 : _b.path);
+                    const fullPath = (_c = this.router) === null || _c === void 0 ? void 0 : _c.resolve(this.route).fullPath;
+                    fullPath && ((_d = this.router) === null || _d === void 0 ? void 0 : _d.push(fullPath));
+                    (_e = this.menuRoot) === null || _e === void 0 ? void 0 : _e.setSelectedMenu(this);
+                    document.title = 'UI - ' + ((_f = this.route) === null || _f === void 0 ? void 0 : _f.path);
                     event === null || event === void 0 ? void 0 : event.stopPropagation(); // 防止冒泡
                     event === null || event === void 0 ? void 0 : event.preventDefault();
                 },
@@ -94,7 +99,7 @@ class Menu extends framework_1.TypeMenu {
             // bottomSvg.resetSize('1.5em', '1.5em');
             this.contentItem.addEvent('click', (event) => {
                 var _a, _b, _c;
-                console.log('click .');
+                // console.warn('click .');
                 if (((_a = this.menuRoot) === null || _a === void 0 ? void 0 : _a.selectedMenu) === this) {
                     return;
                 }
@@ -120,6 +125,15 @@ class Menu extends framework_1.TypeMenu {
                 event === null || event === void 0 ? void 0 : event.preventDefault();
             });
         }
+        (0, framework_1.onMounted)(() => {
+            var _a, _b, _c;
+            // console.warn('mounted .  this.route is ', this.route);
+            const fullPath = (_a = this.router) === null || _a === void 0 ? void 0 : _a.resolve(this.route).fullPath;
+            if (route.get().fullPath === fullPath) { // todo
+                (_b = this.menuRoot) === null || _b === void 0 ? void 0 : _b.setSelectedMenu(this);
+                document.title = 'UI - ' + ((_c = this.route) === null || _c === void 0 ? void 0 : _c.path);
+            }
+        });
     }
 }
 exports.Menu = Menu;

package/src/components/others/menus/menus.d.ts

@@ -1,15 +1,15 @@
-import { IRoute, TypeProps, Router, TypeDiv } from '@type-dom/framework';
+import { TypeProps, TypeDiv } from '@type-dom/framework';
+import { Router, RouteRecordRaw } from '@type-dom/router';
 import { Menu } from './menu';
-export interface IMenusConfig extends TypeProps {
+export interface MenusProps extends TypeProps {
     router?: Router;
 }
 export declare class Menus extends TypeDiv {
     className: 'Menus';
     selectedMenu?: Menu;
     private router?;
-    constructor(params?: IMenusConfig);
+    constructor(params?: MenusProps);
     get menuRoot(): Menus;
-    mounted(): void;
-    createMenus(parent: Menus | Menu, routes: IRoute[], router: Router): void;
+    createMenus(parent: Menus | Menu, routes?: readonly RouteRecordRaw[], router?: Router): void;
     setSelectedMenu(menu: Menu): void;
 }

package/src/components/others/menus/menus.js

@@ -22,40 +22,32 @@ class Menus extends framework_1.TypeDiv {
         this.router = params.router;
         // console.log('ui-doc routerUI.routes is ', this.router);
         if (this.router) {
-            this.createMenus(this, this.router.routes, this.router);
+            // console.error('this.router.getRoutes() is ', this.router.getRoutes());
+            // 递归过滤函数
+            const filterRoutes = (routes) => {
+                return routes === null || routes === void 0 ? void 0 : routes.filter(route => { var _a; return !((_a = route.meta) === null || _a === void 0 ? void 0 : _a.isHidden); }).map(route => {
+                    route.children = filterRoutes(route.children);
+                    return route;
+                });
+            };
+            const routes = filterRoutes(this.router.routes);
+            this.createMenus(this, routes, this.router);
         }
         // console.log('menus is ', this);
     }
     get menuRoot() {
         return this;
     }
-    mounted() {
-        var _a, _b;
-        // console.warn('menus mounted . ');
-        // hash路由和history路由要分别判断
-        let path;
-        if (((_a = this.router) === null || _a === void 0 ? void 0 : _a.mode) === 'hash') {
-            path = window.location.hash.slice(1);
-        }
-        else if (((_b = this.router) === null || _b === void 0 ? void 0 : _b.mode) === 'history') {
-            path = window.location.pathname;
-        }
-        if (path === '/') {
-            path = '/home';
-        }
-        const menuItem = this.down('route.path', path);
-        // 当前路由与菜单绑定路由一致，则选中状态
-        this.setSelectedMenu(menuItem);
-    }
     // /home '' '/' 首页菜单要单独处理
     createMenus(parent, routes, router) {
-        // console.log('createMenus . ');
-        routes.forEach((route) => {
-            if (route.hidden) {
+        // console.log('createMenus . routes is ', routes);
+        routes === null || routes === void 0 ? void 0 : routes.forEach((route) => {
+            var _a;
+            if ((_a = route.meta) === null || _a === void 0 ? void 0 : _a.isHidden) {
                 return;
             }
             if ((route === null || route === void 0 ? void 0 : route.path) === '/' && route.redirect) {
-                route = route.children.find((item) => item.path === route.redirect);
+                // route = route.children!.find((item) => item.path === route.redirect)!;
                 //   todo 没有的话，要报错的。
             }
             // 创建菜单项

package/src/components/others/td-divider/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-divider.css';

package/src/components/others/td-divider/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-divider.css");

package/src/hooks/use-attrs/index.d.ts

@@ -3,5 +3,5 @@ interface Params {
     excludeListeners?: boolean;
     excludeKeys?: Computed<string[]>;
 }
-export declare const useAttrs: (params?: Params) => Computed;
+export declare const useAttrs: (params?: Params) => Computed<{}>;
 export {};

package/src/hooks/use-calc-input-width/index.d.ts

@@ -1,5 +1,5 @@
 export declare function useCalcInputWidth(): {
-    calculatorRef: import("@type-dom/signals").Signal<HTMLElement | undefined>;
+    calculatorRef: import("@type-dom/signals").Signal<HTMLElement>;
     calculatorWidth: import("@type-dom/signals").Signal<number>;
     inputStyle: import("@type-dom/signals").Computed<{
         minWidth: string;

package/src/hooks/use-delayed-toggle/index.js

@@ -16,7 +16,7 @@ const useDelayedToggle = ({ showAfter, hideAfter, autoClose, open, close, }) =>
     const { registerTimeout } = (0, use_timeout_1.useTimeout)();
     const { registerTimeout: registerTimeoutForAutoClose, cancelTimeout: cancelTimeoutForAutoClose, } = (0, use_timeout_1.useTimeout)();
     const onOpen = (event) => {
-        console.log('use-delayed-toggle onOpen');
+        // console.log('use-delayed-toggle onOpen');
         registerTimeout(() => {
             open === null || open === void 0 ? void 0 : open(event);
             const _autoClose = (0, signals_1.unref)(autoClose);

package/src/hooks/use-deprecated/index.d.ts

@@ -7,5 +7,5 @@ type DeprecationParam = {
     ref: string;
     type?: 'API' | 'Attribute' | 'Event' | 'Slot';
 };
-export declare const useDeprecated: ({ from, replacement, scope, version, ref, type }: DeprecationParam, condition: MaybeRef<boolean>) => void;
+export declare const useDeprecated: ({ from, replacement, scope, version, ref, type }: DeprecationParam, condition: MaybeRef<boolean | undefined>) => void;
 export {};

package/src/hooks/use-deprecated/index.js

@@ -6,8 +6,8 @@ const utils_1 = require("@type-dom/utils");
 const useDeprecated = ({ from, replacement, scope, version, ref, type = 'API' }, condition) => {
     (0, signals_1.watch)(() => (0, signals_1.unref)(condition), (val) => {
         if (val) {
-            (0, utils_1.debugWarn)(scope, `[${type}] ${from} is about to be deprecated in version ${version}, please use ${replacement} instead.
-For more detail, please visit: ${ref}
+            (0, utils_1.debugWarn)(scope, `[${type}] ${from} is about to be deprecated in version ${version}, please use ${replacement} instead.
+For more detail, please visit: ${ref}
 `);
         }
     }, {

package/src/hooks/use-empty-values/index.d.ts

@@ -1,4 +1,6 @@
-import { InjectionKey, AnyFn } from '@type-dom/framework';
+import { AnyFn } from '@type-dom/utils';
+import { InjectionKey } from '@type-dom/framework';
+import { Ref } from '@type-dom/signals';
 export type EmptyValuesContext = {
     /**
      * @description empty values supported by the component
@@ -9,7 +11,7 @@ export type EmptyValuesContext = {
      */
     valueOnClear?: string | number | boolean | AnyFn;
 };
-export declare const emptyValuesContextKey: InjectionKey<EmptyValuesContext>;
+export declare const emptyValuesContextKey: InjectionKey<Ref<EmptyValuesContext>>;
 export declare const SCOPE = "use-empty-values";
 export declare const DEFAULT_EMPTY_VALUES: (string | null | undefined)[];
 export declare const DEFAULT_VALUE_ON_CLEAR: undefined;

package/src/hooks/use-empty-values/index.js

@@ -24,9 +24,9 @@ exports.useEmptyValuesProps = {
 };
 const useEmptyValues = (props, defaultValue) => {
     const config = (0, framework_1.getCurrentInstance)()
-        ? (0, framework_1.inject)(exports.emptyValuesContextKey, {})
-        : {};
-    const emptyValues = props.emptyValues || (config === null || config === void 0 ? void 0 : config.emptyValues) || exports.DEFAULT_EMPTY_VALUES;
+        ? (0, framework_1.inject)(exports.emptyValuesContextKey, (0, signals_1.signal)({}))
+        : (0, signals_1.signal)({});
+    const emptyValues = props.emptyValues || config.get().emptyValues || exports.DEFAULT_EMPTY_VALUES;
     const valueOnClear = (0, signals_1.computed)(() => {
         // function is used for undefined cause undefined can't be a value of prop
         if ((0, utils_1.isFunction)(props.valueOnClear)) {
@@ -35,18 +35,18 @@ const useEmptyValues = (props, defaultValue) => {
         else if (props.valueOnClear !== undefined) {
             return props.valueOnClear;
         }
-        else if ((0, utils_1.isFunction)(config.valueOnClear)) {
-            return config.valueOnClear();
+        else if ((0, utils_1.isFunction)(config.get().valueOnClear)) {
+            return config.get().valueOnClear();
         }
-        else if (config.valueOnClear !== undefined) {
-            return config.valueOnClear;
+        else if (config.get().valueOnClear !== undefined) {
+            return config.get().valueOnClear;
         }
         return defaultValue !== undefined ? defaultValue : exports.DEFAULT_VALUE_ON_CLEAR;
     });
     const isEmptyValue = (value) => {
         return emptyValues.includes(value);
     };
-    if (!emptyValues.includes(valueOnClear)) {
+    if (!emptyValues.includes(valueOnClear.get())) {
         (0, utils_1.debugWarn)(exports.SCOPE, 'value-on-clear should be a value of empty-values');
     }
     return {

package/src/hooks/use-focus-controller/index.d.ts

@@ -18,7 +18,7 @@ export declare function useFocusController<T extends {
 }>(target: Signal<T | undefined> | Computed<T | undefined>, { beforeFocus, afterFocus, beforeBlur, afterBlur, }?: UseFocusControllerOptions): {
     isFocused: Signal<boolean>;
     /** Avoid using wrapperRef and handleFocus/handleBlur together */
-    wrapperRef: Signal<HTMLElement | undefined>;
+    wrapperRef: Signal<HTMLElement>;
     handleFocus: (event?: FocusEvent) => void;
     handleBlur: (event?: FocusEvent) => void;
 };

package/src/hooks/use-focus-controller/index.js

@@ -52,7 +52,7 @@ function useFocusController(target, { beforeFocus, afterFocus, beforeBlur, after
     (0, framework_1.useEventListener)(wrapperRef, 'focus', handleFocus, true);
     (0, framework_1.useEventListener)(wrapperRef, 'blur', handleBlur, true);
     (0, framework_1.useEventListener)(wrapperRef, 'click', handleClick, true);
-    // only for test
+    // only for test-dts
     if (process.env.NODE_ENV === 'test') {
         (0, framework_1.onMounted)(() => {
             const targetEl = (0, utils_1.isElement)(target.get())

package/src/hooks/use-id/index.js

@@ -19,10 +19,10 @@ const useId = (deterministicId) => {
     // const idInjection = defaultIdInjection;
     const idInjection = (0, exports.useIdInjection)();
     if (!utils_1.isClient && idInjection === defaultIdInjection) {
-        console.warn('IdInjection', `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
-usage: app.provide(ID_INJECTION_KEY, {
-  prefix: number,
-  current: number,
+        console.warn('IdInjection', `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
+usage: app.provide(ID_INJECTION_KEY, {
+  prefix: number,
+  current: number,
 })`);
     }
     // NOTE: Here we use `computedEager` to calculate the id value immediately, avoiding inconsistent id generation due to the lazy feature of `computed` when server rendering.