hyperscript-rxjs 1.3.15 → 1.3.17

package/src/hyperscript-rxjs/multiselect.test.js

@@ -1,121 +0,0 @@
-import { BehaviorSubject } from 'rxjs';
-import { multiselect } from './multiselect';
-import { option } from './tags';
-
-describe('multiselect', () => {
-    test('should create a multi-select element with options', () => {
-        const a = new BehaviorSubject(false);
-        const b = new BehaviorSubject(false);
-        const c = new BehaviorSubject(false);
-
-        const elem = multiselect({
-            oninput: e => {
-                let aa = e.target[0].selected;
-                if (a.value !== aa) a.next(aa);
-
-                let bb = e.target[1].selected;
-                if (b.value !== bb) b.next(bb);
-
-                let cc = e.target[2].selected;
-                if (c.value !== cc) c.next(cc);
-            },
-        },
-            option({ selected: a }, "A"),
-            option({ selected: b }, "B"),
-            option({ selected: c }, "C")
-        );
-
-        // 初始状态
-        expect(elem.multiple).toBe(true);
-        expect(elem.options[0].selected).toBe(false);
-        expect(elem.options[1].selected).toBe(false);
-        expect(elem.options[2].selected).toBe(false);
-
-        // 更新 BehaviorSubject
-        a.next(true);
-        b.next(false);
-        c.next(true);
-        expect(elem.options[0].selected).toBe(true);
-        expect(elem.options[1].selected).toBe(false);
-        expect(elem.options[2].selected).toBe(true);
-
-        // 模拟用户选择
-        elem.options[0].selected = false;
-        elem.options[1].selected = true;
-        elem.options[2].selected = false;
-        elem.dispatchEvent(new Event('input'));
-
-        expect(a.getValue()).toBe(false);
-        expect(b.getValue()).toBe(true);
-        expect(c.getValue()).toBe(false);
-    });
-
-    test('should handle oninput and onchange callbacks', () => {
-        const oninputMock = jest.fn();
-        const onchangeMock = jest.fn();
-
-        const elem = multiselect(
-            { oninput: oninputMock, onchange: onchangeMock },
-            option({ value: 'A' }, 'Option A'),
-            option({ value: 'B' }, 'Option B')
-        );
-
-        // 模拟用户交互
-        elem.options[0].selected = true;
-        elem.dispatchEvent(new Event('input'));
-        expect(oninputMock).toHaveBeenCalledWith(expect.any(Event));
-
-        elem.options[1].selected = true;
-        elem.dispatchEvent(new Event('change'));
-        expect(onchangeMock).toHaveBeenCalledWith(expect.any(Event));
-    });
-
-    test('should throw an error if props is not an object', () => {
-        expect(() => multiselect(null)).toThrow('`select` requires a `props` object.');
-    });
-
-    test('should synchronize selected state between BehaviorSubject and DOM', () => {
-        const a = new BehaviorSubject(false);
-        const b = new BehaviorSubject(true);
-
-        const elem = multiselect(
-            {
-                oninput: e => {
-                    let aa = e.target[0].selected;
-                    if (a.value !== aa) a.next(aa);
-    
-                    let bb = e.target[1].selected;
-                    if (b.value !== bb) b.next(bb);
-    
-                },
-
-            },
-            option({ selected: a }, 'Option A'),
-            option({ selected: b }, 'Option B')
-        );
-
-        // 初始状态
-        expect(elem.options[0].selected).toBe(false);
-        expect(elem.options[1].selected).toBe(true);
-
-        // 更新 BehaviorSubject
-        a.next(true);
-        b.next(false);
-        expect(elem.options[0].selected).toBe(true);
-        expect(elem.options[1].selected).toBe(false);
-
-        // 更新 DOM
-        elem.options[0].selected = false;
-        elem.options[1].selected = true;
-        elem.dispatchEvent(new Event('input'));
-
-        expect(a.getValue()).toBe(false);
-        expect(b.getValue()).toBe(true);
-    });
-
-    test('should handle empty options', () => {
-        const elem = multiselect({}, []);
-        expect(elem.multiple).toBe(true);
-        expect(elem.options.length).toBe(0);
-    });
-});

package/src/hyperscript-rxjs/numberbox.d.ts

@@ -1,14 +0,0 @@
-import { BehaviorSubject } from 'rxjs';
-import { HyperscriptExtensions } from './HyperscriptExtensions';
-
-/**
- * 创建一个支持双向绑定的数字输入框。
- * 
- * @param props - 配置对象，必须包含 number（BehaviorSubject<number>），其余为 <input> 元素属性。
- * @returns 创建的数字输入框元素。
- * @throws 如果 props 不是对象，或者 number 不是 BehaviorSubject 会抛出错误。
- */
-export function numberbox(props: {
-  number: BehaviorSubject<number>;
-  [key: string]: any;
-}): HyperscriptExtensions<HTMLInputElement>;

package/src/hyperscript-rxjs/numberbox.js

@@ -1,73 +0,0 @@
-import { BehaviorSubject, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { input } from './tags';
-import { subscribeProp } from '../props/subscribeProp';
-// import { fromEvent } from 'rxjs';
-// import { attachSubscriptionToNode } from '../../nodes/attachSubscriptionToNode';
-
-/**
- * @typedef {import("./HyperscriptExtensions").HyperscriptExtensions<HTMLInputElement>} HyperscriptInputElement
- */
-
-/**
- * 创建一个支持双向绑定的数字输入框。
- *
- * `numberbox` 是一个自定义的输入框组件，支持通过 RxJS 的 `BehaviorSubject` 实现数字值的双向绑定。
- *
- * @param {{ number: BehaviorSubject<number>;  [key: string]: any;}} props - 配置对象，包含输入框的属性。
- * @returns {HyperscriptInputElement} - 创建的数字输入框元素。
- * @throws {Error} 如果 `props` 不是对象，或者 `number` 不是 `BehaviorSubject` 实例。
- * 
- */
-export function numberbox(props) {
-    if (typeof props !== 'object' || props === null) {
-        throw new Error('`numberbox` requires a `props` object.');
-    }
-    let { number, ...rest } = props;
-    let elem =
-        /** @type {HyperscriptInputElement} */
-        (input({ ...rest, type: 'text' }));
-
-    if (number && number instanceof BehaviorSubject) {
-        let value = number.pipe(map(n => String(n)));
-
-        subscribeProp(elem, 'value', value);
-
-        let subscriber =
-            /**
-             * 
-             * @param {Observable<Event>} blur$ 
-             * @returns 
-             */
-            blur$ =>
-                blur$.pipe(
-                    map(e => Number(
-                        /** @type {HTMLInputElement} */
-                        (e.target).value)
-                    )
-                ).subscribe(newValue => {
-                    if (Number.isNaN(newValue)) {
-                        elem.select();
-                    } else if (number.value !== newValue) {
-                        number.next(newValue);
-                    }
-                })
-
-        // 展开pipeEvent是为了正确生成测试代码
-        // let event$ = fromEvent(elem, 'blur')// 创建事件流 Observable
-        // let subscription = blurSubscriber(event$); // 订阅事件流并处理           
-        // attachSubscriptionToNode(elem, subscription); // 将订阅附加到 DOM 元素，便于管理
-
-        elem.pipeEvent('blur', subscriber)
-
-    } else {
-        throw new Error(
-            '`numberbox` requires a `number` prop that is an instance of BehaviorSubject. '
-        );
-    }
-
-    // 数字右对齐，用 style 可以获得最高优先级
-    elem.style.textAlign = 'right';
-
-    return elem;
-}

package/src/hyperscript-rxjs/numberbox.test.js

@@ -1,84 +0,0 @@
-import { BehaviorSubject } from 'rxjs';
-import { numberbox } from './numberbox';
-import { subscribeProp } from '../props/subscribeProp';
-import { attachSubscriptionToNode } from '../nodes/attachSubscriptionToNode';
-
-jest.mock('../props/subscribeProp', () => ({
-    subscribeProp: jest.fn(),
-}));
-
-jest.mock('../nodes/attachSubscriptionToNode', () => ({
-    attachSubscriptionToNode: jest.fn(),
-}));
-
-describe('numberbox', () => {
-    beforeEach(() => {
-        jest.clearAllMocks();
-    });
-
-    test('should create a numberbox with a BehaviorSubject', () => {
-        const number = new BehaviorSubject(42);
-        const elem = numberbox({ number });
-
-        // 验证 input 元素的类型
-        expect(elem.tagName.toLowerCase()).toBe('input');
-        expect(elem.type).toBe('text');
-
-        // 验证 subscribeProp 被正确调用
-        expect(subscribeProp).toHaveBeenCalledWith(elem, 'value', expect.any(Object));
-
-        // 验证样式
-        expect(elem.style.textAlign).toBe('right');
-    });
-
-    test('should update BehaviorSubject when valid number is entered', () => {
-        const number = new BehaviorSubject(42);
-        const elem = numberbox({ number });
-
-        // 模拟 blur 事件
-        const blurEvent = new Event('blur');
-        elem.value = '100';
-        elem.dispatchEvent(blurEvent);
-
-        // 验证 BehaviorSubject 的值是否更新
-        expect(number.getValue()).toBe(100);
-    });
-
-    test('should select input when invalid number is entered', () => {
-        const number = new BehaviorSubject(42);
-        const elem = numberbox({ number });
-
-        // 模拟 select 方法
-        elem.select = jest.fn();
-
-        // 模拟 blur 事件
-        const blurEvent = new Event('blur');
-        elem.value = 'invalid';
-        elem.dispatchEvent(blurEvent);
-
-        // 验证 select 是否被调用
-        expect(elem.select).toHaveBeenCalled();
-    });
-
-    test('should attach subscription to the DOM element', () => {
-        const number = new BehaviorSubject(42);
-        const elem = numberbox({ number });
-
-        // 验证 attachSubscriptionToNode 被正确调用
-        expect(attachSubscriptionToNode).toHaveBeenCalledWith(elem, expect.any(Object));
-    });
-
-    test('should throw an error if number is not a BehaviorSubject', () => {
-        const invalidNumber = 42;
-
-        expect(() => numberbox({ number: invalidNumber })).toThrow(
-            '`numberbox` requires a `number` prop that is an instance of BehaviorSubject. '
-        );
-    });
-
-    test('should throw an error if number prop is missing', () => {
-        expect(() => numberbox({})).toThrow(
-            '`numberbox` requires a `number` prop that is an instance of BehaviorSubject. '
-        );
-    });
-});

package/src/hyperscript-rxjs/radio.d.ts

@@ -1,15 +0,0 @@
-import { BehaviorSubject } from 'rxjs';
-import { HyperscriptExtensions } from './HyperscriptExtensions';
-
-/**
- * 创建一个支持 RxJS 数据绑定的 <input type="radio"> 单选按钮。
- * 
- * @param props - 配置对象，必须包含 checked（BehaviorSubject<boolean>）。
- * @returns 创建的 <input type="radio"> 元素。
- * @throws 如果 props 不是对象，或者 checked 不是 BehaviorSubject 会抛出错误。
- */
-export function radio(props: {
-  checked: BehaviorSubject<boolean>,
-  [key: string]: any
-}): HyperscriptExtensions<HTMLInputElement>;
-

package/src/hyperscript-rxjs/radio.js

@@ -1,53 +0,0 @@
-import { map } from 'rxjs/operators'
-import { input } from './tags'
-import { BehaviorSubject, Observable } from 'rxjs';
-// import { fromEvent } from 'rxjs';
-// import { attachSubscriptionToNode } from '../../nodes/attachSubscriptionToNode';
-
-/**
- * @typedef {import("./HyperscriptExtensions").HyperscriptExtensions<HTMLInputElement>} HyperscriptInputElement
- */
-
-/**
- * 单选按钮
- * @param {{checked: BehaviorSubject<boolean>; [key: string]: any}} props 
- * @returns {HyperscriptInputElement}
- */
-export function radio(props) {
-    if (typeof props !== 'object' || props === null) {
-        throw new Error('`radio` requires a `props` object.');
-    }
-
-    const elem =
-        /** @type {HyperscriptInputElement} */
-        (input({ ...props, type: 'radio' }))
-
-    if (props.checked && props.checked instanceof BehaviorSubject) {
-        const subscriber =
-            /**
-             * 
-             * @param {Observable<Event>} input$ 
-             * @returns 
-             */
-            input$ =>
-                input$.pipe(
-                    map(e =>
-                        /** @type {HTMLInputElement} */
-                        (e.target).checked),
-                ).subscribe(props.checked)
-
-        elem.pipeEvent('input', subscriber)
-
-        // 展开pipeEvent是为了正确生成测试代码
-        // let event$ = fromEvent(elem, 'input')// 创建事件流 Observable
-        // let subscription = subscriber(event$); // 订阅事件流并处理           
-        // attachSubscriptionToNode(elem, subscription); // 将订阅附加到 DOM 元素，便于管理
-
-    } else {
-        throw new Error(
-            '`radio` requires a `checked` prop that is an instance of BehaviorSubject. '
-        );
-    }
-
-    return elem
-}

package/src/hyperscript-rxjs/radio.test.js

@@ -1,59 +0,0 @@
-import { BehaviorSubject } from 'rxjs';
-import { radio } from './radio';
-import { attachSubscriptionToNode } from '../nodes/attachSubscriptionToNode';
-
-jest.mock('../nodes/attachSubscriptionToNode', () => ({
-    attachSubscriptionToNode: jest.fn(),
-}));
-
-describe('radio', () => {
-    beforeEach(() => {
-        jest.clearAllMocks();
-    });
-
-    test('should create a radio input element with BehaviorSubject', () => {
-        const checked = new BehaviorSubject(false);
-        const elem = radio({ checked, name: 'test', value: 'option1' });
-
-        // 验证返回的元素
-        expect(elem).toBeInstanceOf(HTMLInputElement);
-        expect(elem.type).toBe('radio');
-        expect(elem.name).toBe('test');
-        expect(elem.value).toBe('option1');
-    });
-
-    test('should bind checked state to BehaviorSubject', () => {
-        const checked = new BehaviorSubject(false);
-        const elem = radio({ checked });
-
-        // 模拟 input 事件
-        const event = new Event('input');
-        elem.checked = true;
-        elem.dispatchEvent(event);
-
-        // 验证 BehaviorSubject 的值是否更新
-        expect(checked.getValue()).toBe(true);
-    });
-
-    test('should attach subscription to the DOM element', () => {
-        const checked = new BehaviorSubject(false);
-        const elem = radio({ checked });
-
-        // 验证 attachSubscriptionToNode 被正确调用
-        expect(attachSubscriptionToNode).toHaveBeenCalledWith(elem, expect.any(Object));
-    });
-
-    test('should throw an error if props is not an object', () => {
-        let msg = '`radio` requires a `props` object.'
-        expect(() => radio(null)).toThrow(msg);
-        expect(() => radio(42)).toThrow(msg);
-        expect(() => radio(undefined)).toThrow(msg);
-    });
-
-    test('should throw an error if checked is not a BehaviorSubject', () => {
-        let msg = '`radio` requires a `checked` prop that is an instance of BehaviorSubject. ';
-        expect(() => radio({ checked: null })).toThrow(msg);
-        expect(() => radio({ checked: 42 })).toThrow(msg);
-        expect(() => radio({ checked: {} })).toThrow(msg);
-    });
-});

package/src/hyperscript-rxjs/select.d.ts

@@ -1,28 +0,0 @@
-import { BehaviorSubject } from 'rxjs';
-import { HyperscriptExtensions } from './HyperscriptExtensions';
-
-/**
- * 创建一个支持 RxJS 数据绑定的 <select> 元素（仅单选）。
- * 
- * @param props - 配置对象，包含 <select> 元素的属性，可选 selectedIndex/value（BehaviorSubject）。
- * @param options - 一个或多个 <option> 元素。
- * @returns 创建的 <select> 元素。
- * @throws 如果 props 不是对象，或者 selectedIndex/value 不是 BehaviorSubject 会抛出错误。
- */
-export function select(
-  props: {
-    selectedIndex?: BehaviorSubject<number>,
-    value?: BehaviorSubject<string>,
-    [key: string]: any
-  },
-  ...options: HTMLOptionElement[]
-): HyperscriptExtensions<HTMLSelectElement>;
-
-export function select(
-  props: {
-    selectedIndex?: BehaviorSubject<number>,
-    value?: BehaviorSubject<string>,
-    [key: string]: any
-  },
-  options: HTMLOptionElement[]
-): HyperscriptExtensions<HTMLSelectElement>;

package/src/hyperscript-rxjs/select.js

@@ -1,88 +0,0 @@
-import { BehaviorSubject, Observable } from 'rxjs';
-import { map } from 'rxjs/operators'
-import { hyperscript } from './hyperscript'
-
-// import { fromEvent } from 'rxjs';
-// import { attachSubscriptionToNode } from '../nodes/attachSubscriptionToNode';
-
-/**
- * @typedef {import("./HyperscriptExtensions").HyperscriptExtensions<HTMLSelectElement>} HyperscriptSelectElement
- */
-
-/**
- * 创建一个支持 RxJS 数据绑定的 <select> 元素。仅单选选择框。
- * 
- * @param {{ selectedIndex?: BehaviorSubject<number>, value?: BehaviorSubject<string>, [key: string]: any }} props - 配置对象，包含 <select> 元素的属性。
- * @param {...HTMLOptionElement} options - 一个或多个 <option> 元素，必须是 HTMLOptionElement 类型。
- * @returns {HyperscriptSelectElement} - 创建的 <select> 元素。
- * @throws {Error} 如果 `props` 不是对象，或者 `selectedIndex` 或 `value` 不是 BehaviorSubject。
- */
-export function select(props, ...options) {
-    if (typeof props !== 'object' || props === null) {
-        throw new Error('`select` requires a `props` object.');
-    }
-
-    let elem =
-        /** @type {HyperscriptSelectElement} */
-        (hyperscript('select', { ...props, multiple: false }, ...options))
-
-    // todo: 显示判断属性是否传递了属性，('selectedIndex' in props)
-    let { selectedIndex, value } = props
-
-    // 确保至少有一个是 BehaviorSubject
-    if (elem.options.length > 0 &&
-        !(selectedIndex instanceof BehaviorSubject) &&
-        !(value instanceof BehaviorSubject)) {
-        throw new Error('`select` requires at least one of `selectedIndex` or `value` to be a BehaviorSubject.');
-    }
-
-    if (selectedIndex && selectedIndex instanceof BehaviorSubject) {
-
-        selectedIndex.subscribe(i => {
-            /** @type {HTMLOptionElement} */
-            (elem[i]).selected = true
-        })
-        let subscriber =
-            /**
-             * @param {Observable<Event>} input$ 
-             */
-            input$ =>
-                input$.pipe(
-                    map(e =>
-                        /** @type {HTMLSelectElement} */
-                        (e.target).selectedIndex)
-                ).subscribe(selectedIndex)
-
-        elem.pipeEvent('input', subscriber)
-        // let event$ = fromEvent(elem, 'input');
-        // let subscription = subscriber(event$);
-        // attachSubscriptionToNode(elem, subscription);
-    }
-
-    if (value && value instanceof BehaviorSubject) {
-
-        value.subscribe(value => {
-            Array.from(elem.getElementsByTagName('option'))
-                .filter(opt => opt.value === value)
-                .forEach(opt => { opt.selected = true })
-        })
-
-        let subscriber =
-            /**
-             * @param {Observable<Event>} input$ 
-             */
-
-            input$ =>
-                input$.pipe(map(e =>
-                    /** @type {HTMLSelectElement} */
-                    (e.target).value)
-                ).subscribe(value)
-        elem.pipeEvent('input', subscriber)
-        // let event$ = fromEvent(elem, 'input');
-        // let subscription = subscriber(event$);
-        // attachSubscriptionToNode(elem, subscription);
-    }
-
-    return elem
-}
-

package/src/hyperscript-rxjs/select.test.js

@@ -1,101 +0,0 @@
-import { BehaviorSubject } from 'rxjs';
-import { select } from './select';
-import { option } from './tags';
-
-describe('select', () => {
-    test('should create a single-select element with options', () => {
-        const selectedIndex = new BehaviorSubject(0);
-        const value = new BehaviorSubject('A');
-
-        const elem = select(
-            { selectedIndex, value },
-            option({ value: 'A' }, 'Option A'),
-            option({ value: 'B' }, 'Option B'),
-            option({ value: 'C' }, 'Option C')
-        );
-
-        // 验证初始状态
-        expect(elem.multiple).toBe(false);
-        expect(elem.options.length).toBe(3);
-        expect(elem.options[0].selected).toBe(true);
-        expect(elem.options[1].selected).toBe(false);
-        expect(elem.options[2].selected).toBe(false);
-        expect(value.getValue()).toBe('A');
-        expect(selectedIndex.getValue()).toBe(0);
-    });
-
-    test('should synchronize selectedIndex with DOM', () => {
-        const selectedIndex = new BehaviorSubject(1);
-
-        const elem = select(
-            { selectedIndex },
-            option({ value: 'A' }, 'Option A'),
-            option({ value: 'B' }, 'Option B'),
-            option({ value: 'C' }, 'Option C')
-        );
-
-        // 验证初始状态
-        expect(elem.options[0].selected).toBe(false);
-        expect(elem.options[1].selected).toBe(true);
-        expect(elem.options[2].selected).toBe(false);
-
-        // 更新 BehaviorSubject
-        selectedIndex.next(2);
-        expect(elem.options[0].selected).toBe(false);
-        expect(elem.options[1].selected).toBe(false);
-        expect(elem.options[2].selected).toBe(true);
-
-        // 更新 DOM
-        elem.options[0].selected = true;
-        elem.dispatchEvent(new Event('input'));
-        expect(selectedIndex.getValue()).toBe(0);
-    });
-
-    test('should synchronize value with DOM', () => {
-        const value = new BehaviorSubject('B');
-
-        const elem = select(
-            { value },
-            option({ value: 'A' }, 'Option A'),
-            option({ value: 'B' }, 'Option B'),
-            option({ value: 'C' }, 'Option C')
-        );
-
-        // 验证初始状态
-        expect(elem.options[0].selected).toBe(false);
-        expect(elem.options[1].selected).toBe(true);
-        expect(elem.options[2].selected).toBe(false);
-
-        // 更新 BehaviorSubject
-        value.next('C');
-        expect(elem.options[0].selected).toBe(false);
-        expect(elem.options[1].selected).toBe(false);
-        expect(elem.options[2].selected).toBe(true);
-
-        // 更新 DOM
-        elem.options[0].selected = true;
-        elem.dispatchEvent(new Event('input'));
-        expect(value.getValue()).toBe('A');
-    });
-
-    test('should throw an error if props is not an object', () => {
-        expect(() => select(null)).toThrow('`select` requires a `props` object.');
-    });
-
-    test('should throw an error if selectedIndex is not a BehaviorSubject', () => {
-        expect(() =>
-            select({ selectedIndex: 0 }, option({ value: 'A' }, 'Option A'))
-        ).toThrow('`select` requires at least one of `selectedIndex` or `value` to be a BehaviorSubject.');
-    });
-
-    test('should throw an error if value is not a BehaviorSubject', () => {
-        expect(() =>
-            select({ value: 'A' }, option({ value: 'A' }, 'Option A'))
-        ).toThrow('`select` requires at least one of `selectedIndex` or `value` to be a BehaviorSubject.');
-    });
-
-    test('should handle empty options', () => {
-        const elem = select({}, []);
-        expect(elem.options.length).toBe(0);
-    });
-});

package/src/hyperscript-rxjs/tabControls/bindTabIndex.d.ts

@@ -1,12 +0,0 @@
-import { BehaviorSubject } from 'rxjs';
-
-/**
- * 绑定选项卡的激活状态到 tabIndex，实现动态切换选项卡的功能。
- * 
- * @param tabRoot - 选项卡的根容器，包含导航栏和内容面板。
- * @param tabIndex$ - 表示当前激活选项卡索引的 BehaviorSubject。
- */
-export function bindTabIndex(
-  tabRoot: HTMLElement,
-  tabIndex$: BehaviorSubject<number>
-): void;