@type-dom/ui 0.0.10 → 0.1.1

package/src/components/data/td-collapse/td-collapse.class.js

@@ -1,82 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCollapse = void 0;
-const utils_1 = require("@type-dom/utils");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-const td_collapse_style_1 = require("./td-collapse.style");
-class TdCollapse extends ui_abstract_1.UI {
+const framework_1 = require("@type-dom/framework");
+const use_collapse_1 = require("./use-collapse");
+const td_collapse_const_1 = require("./td-collapse.const");
+require("./style/index");
+class TdCollapse extends framework_1.TypeDiv {
     constructor(params = {}) {
-        var _a;
-        super(params);
+        super();
         this.className = 'TdCollapse';
         this.childNodes = [];
-        this.style.addObj({
-            //   border-top: 1px solid getCssVar('collapse-border-color');
-            borderTop: '1px solid ' + td_collapse_style_1.$collapse.borderColor,
-            // border-bottom: 1px solid getCssVar('collapse-border-color');
-            borderBottom: '1px solid ' + td_collapse_style_1.$collapse.borderColor
-        });
-        this.activeNames = (0, utils_1.isArray)(params === null || params === void 0 ? void 0 : params.modelValue)
-            ? params.modelValue
-            : [(_a = params === null || params === void 0 ? void 0 : params.modelValue) !== null && _a !== void 0 ? _a : ''];
+        this.addEmits(td_collapse_const_1.collapseEmits);
         this.props = this.useParams(params);
     }
-    mounted() {
-        this.setActiveNames(this.activeNames);
-    }
-    // get name() {
-    //   return this.props.name ??
-    // }
-    setActiveNames(activeNames) {
-        // this.activeNames = activeNames;
-        // if (this.props.accordion) {
-        //   this.activeNames = activeNames[0];
-        // }
-        this.activeNames = activeNames;
-        console.log('this.activeNames is ', this.activeNames);
-        if (activeNames) {
-            if (this.props.accordion) {
-                this.childNodes.forEach((item) => {
-                    if (item.props.nameId === activeNames[0]) {
-                        item.setActive(true);
-                    }
-                    else {
-                        item.setActive(false);
-                    }
-                });
-            }
-            else {
-                this.childNodes.forEach((item) => {
-                    var _a;
-                    if (activeNames && ((_a = item.props) === null || _a === void 0 ? void 0 : _a.nameId)) {
-                        if (activeNames.includes(item.props.nameId)) {
-                            item.setActive(true);
-                        }
-                        else {
-                            item.setActive(false);
-                        }
-                    }
-                });
-            }
-        }
-    }
-    handleItemClick(name) {
+    setup() {
         var _a;
-        console.log('handleItemClick, name is ', name);
-        if ((_a = this.props) === null || _a === void 0 ? void 0 : _a.accordion) {
-            this.setActiveNames([this.activeNames[0] === name ? '' : name]);
-        }
-        else {
-            const _activeNames = [...this.activeNames];
-            const index = _activeNames.indexOf(name);
-            if (index > -1) {
-                _activeNames.splice(index, 1);
-            }
-            else {
-                _activeNames.push(name);
-            }
-            this.setActiveNames(_activeNames);
-        }
+        console.log('TdCollapse setup . ');
+        const props = this.props;
+        const emit = this.emit;
+        const { activeNames, setActiveNames } = (0, use_collapse_1.useCollapse)(props, emit);
+        const { rootKls } = (0, use_collapse_1.useCollapseDOM)();
+        (0, framework_1.defineExpose)({
+            /** @description active names */
+            activeNames,
+            /** @description set active names */
+            setActiveNames,
+        });
+        this.attr.addClass(rootKls);
+        this.slotChildren(props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
     }
 }
 exports.TdCollapse = TdCollapse;

package/src/components/data/td-collapse/td-collapse.const.d.ts

@@ -0,0 +1,7 @@
+import { CollapseModelValue } from './td-collapse.interface';
+export declare const emitChangeFn: (value: CollapseModelValue) => value is string | number | import("./td-collapse.interface").CollapseActiveName[];
+export declare const collapseEmits: {
+    "update:modelValue": (value: CollapseModelValue) => value is string | number | import("./td-collapse.interface").CollapseActiveName[];
+    change: (value: CollapseModelValue) => value is string | number | import("./td-collapse.interface").CollapseActiveName[];
+};
+export type CollapseEmits = typeof collapseEmits;

package/src/components/data/td-collapse/td-collapse.const.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collapseEmits = exports.emitChangeFn = void 0;
+const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../constants/event");
+const emitChangeFn = (value) => (0, utils_1.isNumber)(value) || (0, utils_1.isString)(value) || (0, utils_1.isArray)(value);
+exports.emitChangeFn = emitChangeFn;
+exports.collapseEmits = {
+    [event_1.UPDATE_MODEL_EVENT]: exports.emitChangeFn,
+    [event_1.CHANGE_EVENT]: exports.emitChangeFn,
+};

package/src/components/data/td-collapse/td-collapse.interface.d.ts

@@ -1,9 +1,12 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { Arrayable } from '../../feedback/td-tooltip/utils';
-export interface ITdCollapse extends IUI {
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
+import { Arrayable } from '@type-dom/utils';
+import { TdCollapseItem } from '../td-collapse-item/td-collapse-item.class';
+export type CollapseActiveName = string | number;
+export type CollapseModelValue = Arrayable<CollapseActiveName>;
+export interface ITdCollapse extends ITypeDiv {
     className: 'TdCollapse';
 }
-export interface ITdCollapseConfig extends IUIConfig {
+export interface CollapseProps extends TypeDivProps {
     /**
      * @description whether to activate accordion mode
      */
@@ -12,8 +15,6 @@ export interface ITdCollapseConfig extends IUIConfig {
      * @description currently active panel, the type is `string` in accordion mode, otherwise it is `array`
      *   default: () => mutable([] as const),
      */
-    modelValue?: string | number | ICollapseActiveName[];
-    slot?: undefined;
+    modelValue?: CollapseModelValue;
+    slot?: TdCollapseItem[];
 }
-export type ICollapseActiveName = string | number;
-export type ICollapseModelValue = Arrayable<ICollapseActiveName>;

package/src/components/data/td-collapse/td-collapse.style.d.ts

@@ -1,3 +1,4 @@
+import { IStyle } from '@type-dom/css-type';
 export declare const $collapse: {
     borderColor: string;
     headerHeight: string;
@@ -9,3 +10,4 @@ export declare const $collapse: {
     contentFontSize: string;
     contentTextColor: string;
 };
+export declare const $collapseStyle: IStyle;

package/src/components/data/td-collapse/td-collapse.style.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$collapse = void 0;
+exports.$collapseStyle = exports.$collapse = void 0;
 const var_1 = require("../../../styles/var");
+// Collapse
+// css3 var in packages/theme-chalk/src/collapse.scss
 exports.$collapse = {
     // 'border-color': getCssVar('border-color-lighter'),
     borderColor: var_1.$borderColor.lighter,
@@ -18,5 +20,11 @@ exports.$collapse = {
     'content-font-size': '13px',
     contentFontSize: '13px',
     // 'content-text-color': getCssVar('text-color-primary'),
-    contentTextColor: var_1.$textColor.primary
+    contentTextColor: var_1.$textColor.primary,
+};
+exports.$collapseStyle = {
+    // border-top: 1px solid getCssVar('collapse-border-color');
+    borderTop: '1px solid ' + exports.$collapse.borderColor,
+    // border-bottom: 1px solid getCssVar('collapse-border-color');
+    borderBottom: '1px solid ' + exports.$collapse.borderColor,
 };

package/src/components/data/td-collapse/use-collapse-item.d.ts

@@ -0,0 +1,20 @@
+import { CollapseItemProps } from '../td-collapse-item/td-collapse-item.interface';
+export declare const useCollapseItem: (props: CollapseItemProps) => {
+    focusing: import("@type-dom/signals").Signal<boolean>;
+    id: import("@type-dom/signals").Computed<number>;
+    isActive: import("@type-dom/signals").Computed<boolean | undefined>;
+    handleFocus: () => void;
+    handleHeaderClick: () => void;
+    handleEnterClick: () => void;
+};
+export declare const useCollapseItemDOM: (props: CollapseItemProps, { focusing, isActive, id }: Partial<ReturnType<typeof useCollapseItem>>) => {
+    arrowKls: import("@type-dom/signals").Computed<string[]>;
+    headKls: import("@type-dom/signals").Computed<(string | {
+        focusing: boolean | undefined;
+    })[]>;
+    rootKls: import("@type-dom/signals").Computed<string[]>;
+    itemWrapperKls: import("@type-dom/signals").Computed<string>;
+    itemContentKls: import("@type-dom/signals").Computed<string>;
+    scopedContentId: import("@type-dom/signals").Computed<string>;
+    scopedHeadId: import("@type-dom/signals").Computed<string>;
+};

package/src/components/data/td-collapse/use-collapse-item.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCollapseItemDOM = exports.useCollapseItem = void 0;
+// import { computed, inject, ref, unref } from 'vue'
+// import { useIdInjection, useNamespace } from '@element-plus/hooks'
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const use_id_1 = require("../../../hooks/use-id");
+const constants_1 = require("./constants");
+// import type { CollapseItemProps } from './collapse-item'
+const useCollapseItem = (props) => {
+    const collapse = (0, framework_1.inject)(constants_1.collapseContextKey);
+    const { namespace } = (0, use_namespace_1.useNamespace)('collapse');
+    const focusing = (0, signals_1.signal)(false);
+    const isClick = (0, signals_1.signal)(false);
+    const idInjection = (0, use_id_1.useIdInjection)();
+    const id = (0, signals_1.computed)(() => idInjection.current++);
+    const name = (0, signals_1.computed)(() => {
+        var _a;
+        return ((_a = props.name) !== null && _a !== void 0 ? _a : `${namespace.get()}-id-${idInjection.prefix}-${(0, signals_1.unref)(id)}`);
+    });
+    console.warn('name is ', name);
+    const isActive = (0, signals_1.computed)(() => collapse === null || collapse === void 0 ? void 0 : collapse.activeNames.get().includes((0, signals_1.unref)(name)));
+    console.error('isActive is ', isActive);
+    const handleFocus = () => {
+        setTimeout(() => {
+            if (!isClick.get()) {
+                focusing.set(true);
+            }
+            else {
+                isClick.set(false);
+            }
+        }, 50);
+    };
+    const handleHeaderClick = () => {
+        if (props.disabled)
+            return;
+        collapse === null || collapse === void 0 ? void 0 : collapse.handleItemClick((0, signals_1.unref)(name));
+        focusing.set(false);
+        isClick.set(true);
+    };
+    const handleEnterClick = () => {
+        collapse === null || collapse === void 0 ? void 0 : collapse.handleItemClick((0, signals_1.unref)(name));
+    };
+    return {
+        focusing,
+        id,
+        isActive,
+        handleFocus,
+        handleHeaderClick,
+        handleEnterClick,
+    };
+};
+exports.useCollapseItem = useCollapseItem;
+const useCollapseItemDOM = (props, { focusing, isActive, id }) => {
+    const ns = (0, use_namespace_1.useNamespace)('collapse');
+    const rootKls = (0, signals_1.computed)(() => [
+        ns.b('item'),
+        ns.is('active', (0, signals_1.unref)(isActive)),
+        ns.is('disabled', props.disabled),
+    ]);
+    const headKls = (0, signals_1.computed)(() => [
+        ns.be('item', 'header'),
+        ns.is('active', (0, signals_1.unref)(isActive)),
+        { focusing: (0, signals_1.unref)(focusing) && !props.disabled },
+    ]);
+    const arrowKls = (0, signals_1.computed)(() => [
+        ns.be('item', 'arrow'),
+        ns.is('active', (0, signals_1.unref)(isActive)),
+    ]);
+    const itemWrapperKls = (0, signals_1.computed)(() => ns.be('item', 'wrap'));
+    const itemContentKls = (0, signals_1.computed)(() => ns.be('item', 'content'));
+    const scopedContentId = (0, signals_1.computed)(() => ns.b(`content-${(0, signals_1.unref)(id)}`));
+    const scopedHeadId = (0, signals_1.computed)(() => ns.b(`head-${(0, signals_1.unref)(id)}`));
+    return {
+        arrowKls,
+        headKls,
+        rootKls,
+        itemWrapperKls,
+        itemContentKls,
+        scopedContentId,
+        scopedHeadId,
+    };
+};
+exports.useCollapseItemDOM = useCollapseItemDOM;

package/src/components/data/td-collapse/use-collapse.d.ts

@@ -0,0 +1,9 @@
+import { AnyFn } from '@type-dom/framework';
+import { CollapseActiveName, CollapseProps } from './td-collapse.interface';
+export declare const useCollapse: (props: CollapseProps, emit: AnyFn) => {
+    activeNames: import("@type-dom/signals").Signal<any[]>;
+    setActiveNames: (_activeNames: CollapseActiveName[]) => void;
+};
+export declare const useCollapseDOM: () => {
+    rootKls: import("@type-dom/signals").Computed<string>;
+};

package/src/components/data/td-collapse/use-collapse.js

@@ -0,0 +1,68 @@
+"use strict";
+// import { computed, provide, ref, watch } from 'vue'
+// import { ensureArray } from '@element-plus/utils'
+// import { useNamespace } from '@element-plus/hooks'
+// import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
+// import { collapseContextKey } from './constants'
+//
+// import type { SetupContext } from 'vue'
+// import type {
+//   CollapseActiveName,
+//   CollapseEmits,
+//   CollapseProps,
+// } from './collapse'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCollapseDOM = exports.useCollapse = void 0;
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const event_1 = require("../../../constants/event");
+const constants_1 = require("./constants");
+const useCollapse = (props, emit) => {
+    var _a;
+    const activeNames = (0, signals_1.signal)((0, utils_1.ensureArray)((_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get()));
+    const setActiveNames = (_activeNames) => {
+        activeNames.set(_activeNames);
+        const value = props.accordion ? activeNames.get()[0] : activeNames.get();
+        emit(event_1.UPDATE_MODEL_EVENT, value);
+        emit(event_1.CHANGE_EVENT, value);
+    };
+    const handleItemClick = (name) => {
+        if (props.accordion) {
+            setActiveNames([activeNames.get()[0] === name ? '' : name]);
+        }
+        else {
+            const _activeNames = [...activeNames.get()];
+            const index = _activeNames.indexOf(name);
+            if (index > -1) {
+                _activeNames.splice(index, 1);
+            }
+            else {
+                _activeNames.push(name);
+            }
+            setActiveNames(_activeNames);
+        }
+    };
+    (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, // props.vModel 是数组，
+    () => { var _a; return activeNames.set((0, utils_1.ensureArray)((_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get())); }
+    // { deep: true }
+    );
+    (0, framework_1.provide)(constants_1.collapseContextKey, {
+        activeNames,
+        handleItemClick,
+    });
+    return {
+        activeNames,
+        setActiveNames,
+    };
+};
+exports.useCollapse = useCollapse;
+const useCollapseDOM = () => {
+    const ns = (0, use_namespace_1.useNamespace)('collapse');
+    const rootKls = (0, signals_1.computed)(() => ns.b());
+    return {
+        rootKls,
+    };
+};
+exports.useCollapseDOM = useCollapseDOM;

package/src/components/data/td-collapse-item/style/css.d.ts

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

package/src/components/data/td-collapse-item/style/css.js

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

package/src/components/data/td-collapse-item/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../base/style';
+import '../../../../theme-chalk/collapse-item.scss';

package/src/components/data/td-collapse-item/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style");
+require("../../../../theme-chalk/collapse-item.scss");

package/src/components/data/td-collapse-item/td-collapse-item.class.d.ts

@@ -1,25 +1,11 @@
-import { Button, Div } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
-import { TdIcon } from '../../basic/td-icon/td-icon.class';
-import { TdCollapse } from '../td-collapse/td-collapse.class';
-import { ICollapseActiveName } from '../td-collapse/td-collapse.interface';
-import { ITdCollapseItem, ITdCollapseItemConfig } from './td-collapse-item.interface';
-export declare class TdCollapseItem extends UI<undefined> implements ITdCollapseItem {
+import { TypeDiv } from '@type-dom/framework';
+import { Computed } from '@type-dom/signals';
+import { ITdCollapseItem, CollapseItemProps } from './td-collapse-item.interface';
+import './style/index';
+export declare class TdCollapseItem extends TypeDiv implements ITdCollapseItem {
     className: 'TdCollapseItem';
-    props: ITdCollapseItemConfig;
-    parent?: TdCollapse;
-    headerBtn: Button;
-    private disabled?;
-    wrapper: Div;
-    content: Div;
-    private focusing?;
-    private isClick?;
-    private transition;
-    arrowIcon: TdIcon;
-    constructor(params?: ITdCollapseItemConfig);
-    setActive(active: boolean): void;
-    setDisable(disabled: boolean): void;
-    handleFocus(): void;
-    handleHeaderClick(name: ICollapseActiveName): void;
-    handleEnterClick(): void;
+    props: CollapseItemProps;
+    isActive?: Computed<boolean | undefined>;
+    constructor(params?: CollapseItemProps);
+    setup(): void;
 }