@type-dom/ui 0.0.10 → 0.1.1

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

@@ -0,0 +1,317 @@
+"use strict";
+// import {
+//   computed,
+//   getCurrentInstance,
+//   isVNode,
+//   onBeforeUnmount,
+//   onMounted,
+//   provide,
+//   ref,
+//   shallowRef,
+//   unref,
+//   useSlots,
+//   watch,
+// } from 'vue'
+// import { throttle } from 'lodash-unified'
+// import { useResizeObserver } from '@vueuse/core'
+// import { debugWarn, flattedChildren, isString } from '@element-plus/utils'
+// import { useOrderedChildren } from '@element-plus/hooks'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCarousel = void 0;
+// import type { SetupContext } from 'vue'
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const lodash_1 = require("lodash");
+const utils_1 = require("@type-dom/utils");
+const use_ordered_children_1 = require("../../../hooks/use-ordered-children");
+const constants_1 = require("./constants");
+const THROTTLE_TIME = 300;
+const useCarousel = (props, emit, componentName) => {
+    const { children: items, addChild: addItem, removeChild: removeItem, } = (0, use_ordered_children_1.useOrderedChildren)((0, framework_1.getCurrentInstance)(), constants_1.CAROUSEL_ITEM_NAME);
+    const slots = (0, framework_1.useSlots)();
+    // refs
+    const activeIndex = (0, signals_1.signal)(-1);
+    const timer = (0, signals_1.signal)(null);
+    const hover = (0, signals_1.signal)(false);
+    const root = (0, signals_1.signal)();
+    const containerHeight = (0, signals_1.signal)(0);
+    const isItemsTwoLength = (0, signals_1.signal)(true);
+    const isFirstCall = (0, signals_1.signal)(true);
+    const isTransitioning = (0, signals_1.signal)(false);
+    // computed
+    const arrowDisplay = (0, signals_1.computed)(() => props.arrow !== 'never' && !(0, signals_1.unref)(isVertical));
+    const hasLabel = (0, signals_1.computed)(() => {
+        return items.get().some((item) => item.props.label.toString().length > 0);
+    });
+    const isCardType = (0, signals_1.computed)(() => props.type === 'card');
+    const isVertical = (0, signals_1.computed)(() => props.direction === 'vertical');
+    const containerStyle = (0, signals_1.computed)(() => {
+        if (props.height !== 'auto') {
+            return {
+                height: props.height,
+            };
+        }
+        return {
+            height: `${containerHeight.get()}px`,
+            overflow: 'hidden',
+        };
+    });
+    // methods
+    const throttledArrowClick = (0, lodash_1.throttle)((index) => {
+        setActiveItem(index);
+    }, THROTTLE_TIME, { trailing: true });
+    const throttledIndicatorHover = (0, lodash_1.throttle)((index) => {
+        handleIndicatorHover(index);
+    }, THROTTLE_TIME);
+    const isTwoLengthShow = (index) => {
+        if (!isItemsTwoLength.get())
+            return true;
+        return activeIndex.get() <= 1 ? index <= 1 : index > 1;
+    };
+    function pauseTimer() {
+        if (timer.get()) {
+            clearInterval(timer.get());
+            timer.set(null);
+        }
+    }
+    function startTimer() {
+        if (props.interval <= 0 || !props.autoplay || timer.get())
+            return;
+        timer.set(setInterval(() => playSlides(), props.interval));
+    }
+    const playSlides = () => {
+        if (!isFirstCall.get()) {
+            isTransitioning.set(true);
+        }
+        isFirstCall.set(false);
+        if (activeIndex.get() < items.get().length - 1) {
+            activeIndex.set(activeIndex.get() + 1);
+        }
+        else if (props.loop) {
+            activeIndex.set(0);
+        }
+        else {
+            isTransitioning.set(false);
+        }
+    };
+    function setActiveItem(index) {
+        if (!isFirstCall.get()) {
+            isTransitioning.set(true);
+        }
+        isFirstCall.set(false);
+        if ((0, utils_1.isString)(index)) {
+            const filteredItems = items
+                .get()
+                .filter((item) => item.props.name === index);
+            if (filteredItems.length > 0) {
+                index = items.get().indexOf(filteredItems[0]);
+            }
+        }
+        index = Number(index);
+        if (Number.isNaN(index) || index !== Math.floor(index)) {
+            (0, utils_1.debugWarn)(componentName, 'index must be integer.');
+            return;
+        }
+        const itemCount = items.get().length;
+        const oldIndex = activeIndex.get();
+        if (index < 0) {
+            activeIndex.set(props.loop ? itemCount - 1 : 0);
+        }
+        else if (index >= itemCount) {
+            activeIndex.set(props.loop ? 0 : itemCount - 1);
+        }
+        else {
+            activeIndex.set(index);
+        }
+        if (oldIndex === activeIndex.get()) {
+            resetItemPosition(oldIndex);
+        }
+        resetTimer();
+    }
+    function resetItemPosition(oldIndex) {
+        items.get().forEach((item, index) => {
+            item.translateItem(index, activeIndex.get(), oldIndex);
+        });
+    }
+    function itemInStage(item, index) {
+        var _a, _b, _c, _d;
+        const _items = (0, signals_1.unref)(items);
+        const itemCount = _items.length;
+        if (itemCount === 0 || !item.states.inStage)
+            return false;
+        const nextItemIndex = index + 1;
+        const prevItemIndex = index - 1;
+        const lastItemIndex = itemCount - 1;
+        const isLastItemActive = _items[lastItemIndex].states.active;
+        const isFirstItemActive = _items[0].states.active;
+        const isNextItemActive = (_b = (_a = _items[nextItemIndex]) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.active;
+        const isPrevItemActive = (_d = (_c = _items[prevItemIndex]) === null || _c === void 0 ? void 0 : _c.states) === null || _d === void 0 ? void 0 : _d.active;
+        if ((index === lastItemIndex && isFirstItemActive) || isNextItemActive) {
+            return 'left';
+        }
+        else if ((index === 0 && isLastItemActive) || isPrevItemActive) {
+            return 'right';
+        }
+        return false;
+    }
+    function handleMouseEnter() {
+        hover.set(true);
+        if (props.pauseOnHover) {
+            pauseTimer();
+        }
+    }
+    function handleMouseLeave() {
+        hover.set(false);
+        startTimer();
+    }
+    function handleTransitionEnd() {
+        isTransitioning.set(false);
+    }
+    function handleButtonEnter(arrow) {
+        if ((0, signals_1.unref)(isVertical))
+            return;
+        items.get().forEach((item, index) => {
+            if (arrow === itemInStage(item, index)) {
+                item.states.hover.set(true);
+            }
+        });
+    }
+    function handleButtonLeave() {
+        if ((0, signals_1.unref)(isVertical))
+            return;
+        items.get().forEach((item) => {
+            item.states.hover.set(false);
+        });
+    }
+    function handleIndicatorClick(index) {
+        if (index !== activeIndex.get()) {
+            if (!isFirstCall.get()) {
+                isTransitioning.set(true);
+            }
+        }
+        activeIndex.set(index);
+    }
+    function handleIndicatorHover(index) {
+        if (props.trigger === 'hover' && index !== activeIndex.get()) {
+            activeIndex.set(index);
+            if (!isFirstCall.get()) {
+                isTransitioning.set(true);
+            }
+        }
+    }
+    function prev() {
+        setActiveItem(activeIndex.get() - 1);
+    }
+    function next() {
+        setActiveItem(activeIndex.get() + 1);
+    }
+    function resetTimer() {
+        pauseTimer();
+        if (!props.pauseOnHover)
+            startTimer();
+    }
+    function setContainerHeight(height) {
+        if (props.height !== 'auto')
+            return;
+        containerHeight.set(height);
+    }
+    // todo
+    function PlaceholderItem() {
+        // fix: https://github.com/element-plus/element-plus/issues/12139
+        const defaultSlots = slots === null || slots === void 0 ? void 0 : slots.default;
+        if (!defaultSlots)
+            return null;
+        // const flatSlots = flattedChildren(defaultSlots)
+        //
+        // const normalizeSlots = flatSlots.filter((slot) => {
+        //   return isVNode(slot) && (slot.type as any).name === CAROUSEL_ITEM_NAME
+        // })
+        // if (normalizeSlots?.length === 2 && props.loop && !isCardType.get()) {
+        //   isItemsTwoLength.set(true)
+        //   return normalizeSlots
+        // }
+        isItemsTwoLength.set(false);
+        return null;
+    }
+    // watch
+    (0, signals_1.watch)(() => activeIndex.get(), (current, prev) => {
+        resetItemPosition(prev);
+        if (isItemsTwoLength.get()) {
+            current = current % 2;
+            prev = prev % 2;
+        }
+        if (prev > -1) {
+            emit('change', current, prev);
+        }
+    });
+    (0, signals_1.watch)(() => props.autoplay, (autoplay) => {
+        autoplay ? startTimer() : pauseTimer();
+    });
+    (0, signals_1.watch)(() => props.loop, () => {
+        setActiveItem(activeIndex.get());
+    });
+    (0, signals_1.watch)(() => props.interval, () => {
+        resetTimer();
+    });
+    const resizeObserver = (0, signals_1.signal)();
+    // lifecycle
+    (0, framework_1.onMounted)(() => {
+        (0, signals_1.watch)(() => items.get(), () => {
+            if (items.get().length > 0)
+                setActiveItem(props.initialIndex);
+        }, {
+            immediate: true,
+        });
+        resizeObserver.set((0, framework_1.useResizeObserver)(root.get(), () => {
+            resetItemPosition();
+        }));
+        startTimer();
+    });
+    (0, framework_1.onBeforeUnmount)(() => {
+        var _a;
+        pauseTimer();
+        if (root.get() && resizeObserver.get()) {
+            (_a = resizeObserver.get()) === null || _a === void 0 ? void 0 : _a.stop();
+        }
+    });
+    // provide
+    (0, framework_1.provide)(constants_1.carouselContextKey, {
+        root,
+        isCardType,
+        isVertical,
+        items,
+        loop: props.loop,
+        cardScale: props.cardScale,
+        addItem,
+        removeItem,
+        setActiveItem,
+        setContainerHeight,
+    });
+    return {
+        root,
+        activeIndex,
+        arrowDisplay,
+        hasLabel,
+        hover,
+        isCardType,
+        isTransitioning,
+        items,
+        isVertical,
+        containerStyle,
+        isItemsTwoLength,
+        handleButtonEnter,
+        handleTransitionEnd,
+        handleButtonLeave,
+        handleIndicatorClick,
+        handleMouseEnter,
+        handleMouseLeave,
+        setActiveItem,
+        prev,
+        next,
+        PlaceholderItem,
+        isTwoLengthShow,
+        throttledArrowClick,
+        throttledIndicatorHover,
+    };
+};
+exports.useCarousel = useCarousel;

package/src/components/data/td-check-tag/style/css.d.ts

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

package/src/components/data/td-check-tag/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-check-tag.css");

package/src/components/data/td-check-tag/style/index.d.ts

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

package/src/components/data/td-check-tag/style/index.js

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

package/src/components/data/td-check-tag/td-check-tag.class.d.ts

@@ -1,11 +1,9 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdCheckTag, ITdCheckTagConfig } from './td-check-tag.interface';
-export declare class TdCheckTag extends UI implements ITdCheckTag {
+import { TypeSpan } from '@type-dom/framework';
+import { ITdCheckTag, CheckTagProps } from './td-check-tag.interface';
+import './style/index';
+export declare class TdCheckTag extends TypeSpan implements ITdCheckTag {
     className: 'TdCheckTag';
-    props: ITdCheckTagConfig;
-    checked?: boolean;
-    private type;
-    constructor(params?: ITdCheckTagConfig);
-    handleChange(): void;
-    setChecked(checked?: boolean): void;
+    props: CheckTagProps;
+    constructor(params?: CheckTagProps);
+    setup(): void;
 }

package/src/components/data/td-check-tag/td-check-tag.class.js

@@ -1,73 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCheckTag = void 0;
-const var_1 = require("../../../styles/var");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
 const event_1 = require("../../../constants/event");
-const td_check_tag_style_1 = require("./td-check-tag.style");
-class TdCheckTag extends ui_abstract_1.UI {
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const td_check_tag_const_1 = require("./td-check-tag.const");
+require("./style/index");
+class TdCheckTag extends framework_1.TypeSpan {
     constructor(params = {}) {
-        super(params, 'span');
+        super();
         this.className = 'TdCheckTag';
         this.attr.addName('td-check-tag');
-        this.type = (params === null || params === void 0 ? void 0 : params.type) || 'primary';
-        (0, td_check_tag_style_1.useType)();
-        this.style.addObj(td_check_tag_style_1.$checkTag);
-        this.setChecked(params === null || params === void 0 ? void 0 : params.checked);
+        this.addEmits(td_check_tag_const_1.checkTagEmits);
+        this.assignProps(td_check_tag_const_1.checkTagProps);
         this.props = this.useParams(params);
-        this.addEvents({
-            click: () => {
-                // if (this.props.emits?.change) {
-                //   this.checked = !this.checked;
-                //   this.setChecked(this.checked);
-                // }
-                this.handleChange();
-            },
-            mouseenter: () => {
-                if (this.checked) {
-                    this.style.setObj({
-                        backgroundColor: var_1.$colors[this.type]['light-7']
-                    });
-                }
-                else {
-                    this.style.setObj({
-                        backgroundColor: var_1.$colors.info['light-7']
-                    });
-                }
-            },
-            mouseleave: () => {
-                if (this.checked) {
-                    this.style.setObj({
-                        backgroundColor: var_1.$colors[this.type]['light-8']
-                    });
-                }
-                else {
-                    this.style.setObj({
-                        backgroundColor: var_1.$colors.info['light-9']
-                    });
-                }
+    }
+    setup() {
+        var _a;
+        const props = this.props;
+        const emit = this.emit;
+        const ns = (0, use_namespace_1.useNamespace)('check-tag');
+        const isDisabled = (0, signals_1.computed)(() => props.disabled);
+        const containerKls = (0, signals_1.computed)(() => [
+            ns.b(),
+            ns.is('checked', (0, signals_1.unref)(props.checked)),
+            ns.is('disabled', isDisabled.get()),
+            ns.m(props.type || 'primary'),
+        ]);
+        const handleChange = () => {
+            if (isDisabled.get()) {
+                return;
             }
+            const checked = !(0, signals_1.unref)(props.checked);
+            emit(event_1.CHANGE_EVENT, checked);
+            emit('update:checked', checked);
+        };
+        this.attr.addClass(containerKls);
+        this.addEvents({
+            click: handleChange,
         });
-    }
-    handleChange() {
-        this.checked = !this.checked;
-        this.setChecked(this.checked);
-        this.emit(event_1.CHANGE_EVENT, this.checked);
-        this.emit('update:checked', this.checked);
-        // emit(CHANGE_EVENT, checked)
-        // emit('update:checked', checked)
-    }
-    setChecked(checked) {
-        this.checked = checked;
-        if (checked) {
-            this.style.setObj(td_check_tag_style_1.$checkTagChecked[this.type]);
-        }
-        else {
-            this.style.setObj({
-                backgroundColor: var_1.$colors.info['light-9'],
-                color: var_1.$colors.info.base
-            });
-        }
+        this.slotChildren(props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
     }
 }
 exports.TdCheckTag = TdCheckTag;

package/src/components/data/td-check-tag/td-check-tag.const.d.ts

@@ -0,0 +1,6 @@
+import { CheckTagProps } from './td-check-tag.interface';
+export declare const checkTagProps: CheckTagProps;
+export declare const checkTagEmits: {
+    'update:checked': (value: boolean) => boolean;
+    change: (value: boolean) => boolean;
+};

package/src/components/data/td-check-tag/td-check-tag.const.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkTagEmits = exports.checkTagProps = void 0;
+const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../constants/event");
+exports.checkTagProps = {
+    type: 'primary',
+};
+exports.checkTagEmits = {
+    'update:checked': (value) => (0, utils_1.isBoolean)(value),
+    [event_1.CHANGE_EVENT]: (value) => (0, utils_1.isBoolean)(value),
+};

package/src/components/data/td-check-tag/td-check-tag.interface.d.ts

@@ -1,15 +1,17 @@
+import { ITypeSpan, TypeSpanProps } from '@type-dom/framework';
+import { MaybeRef } from '@type-dom/signals';
 import { IType } from '../../../styles/var';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
 import { CHANGE_EVENT } from '../../../constants/event';
-export interface ITdCheckTag extends IUI {
+export interface ITdCheckTag extends ITypeSpan {
     className: 'TdCheckTag';
+    props: CheckTagProps;
 }
-export interface ITdCheckTagConfig extends IUIConfig {
+export interface CheckTagProps extends TypeSpanProps {
     /**
      * @description is checked
      *     default: false,
      */
-    checked?: boolean;
+    checked?: MaybeRef<boolean>;
     /**
      * @description type of Tag
      *     default: 'primary',

package/src/components/data/td-check-tag/td-check-tag.style.d.ts

@@ -1,7 +1,7 @@
 import { IStyle } from '@type-dom/css-type';
 import { IType } from '../../../styles/var';
-export declare const $checkTag: IStyle;
-export declare const $checkTagHover: IStyle;
+export declare const $checkTagStyle: IStyle;
+export declare const $checkTagHoverStyle: IStyle;
 export declare const $checkTagChecked: Record<IType, IStyle>;
 export declare const $checkTagCheckedHover: Record<IType, string>;
 export declare function useType(): void;

package/src/components/data/td-check-tag/td-check-tag.style.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$checkTagCheckedHover = exports.$checkTagChecked = exports.$checkTagHover = exports.$checkTag = void 0;
+exports.$checkTagCheckedHover = exports.$checkTagChecked = exports.$checkTagHoverStyle = exports.$checkTagStyle = void 0;
 exports.useType = useType;
 const var_1 = require("../../../styles/var");
 const transition_1 = require("../../../styles/transition");
-exports.$checkTag = {
+exports.$checkTagStyle = {
     // background-color: getCssVar('color', 'info', 'light-9'),
     backgroundColor: var_1.$colors.info['light-9'],
     // border-radius: getCssVar('border-radius', 'base'),
@@ -23,7 +23,7 @@ exports.$checkTag = {
     fontWeight: 'bold',
     userSelect: 'none', // 禁止用户选中文本
 };
-exports.$checkTagHover = {
+exports.$checkTagHoverStyle = {
     backgroundColor: var_1.$colors.info['light-7'],
 };
 exports.$checkTagChecked = {};

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

@@ -0,0 +1,8 @@
+import { InjectionKey } from '@type-dom/framework';
+import { Ref } from '@type-dom/signals';
+import { CollapseActiveName } from './td-collapse.interface';
+export interface CollapseContext {
+    activeNames: Ref<CollapseActiveName[]>;
+    handleItemClick: (name: CollapseActiveName) => void;
+}
+export declare const collapseContextKey: InjectionKey<CollapseContext>;

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

@@ -0,0 +1,6 @@
+"use strict";
+// import type { InjectionKey, Ref } from 'vue'
+// import type { CollapseActiveName } from './collapse'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collapseContextKey = void 0;
+exports.collapseContextKey = Symbol('collapseContextKey');

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

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

package/src/components/data/td-collapse/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.css");

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

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

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

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

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

@@ -1,13 +1,14 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
+import { Signal } from '@type-dom/signals';
 import { TdCollapseItem } from '../td-collapse-item/td-collapse-item.class';
-import type { ICollapseActiveName, ITdCollapse, ITdCollapseConfig } from './td-collapse.interface';
-export declare class TdCollapse extends UI implements ITdCollapse {
+import type { CollapseActiveName, ITdCollapse, CollapseProps } from './td-collapse.interface';
+import './style/index';
+export declare class TdCollapse extends TypeDiv implements ITdCollapse {
     className: 'TdCollapse';
-    props: ITdCollapseConfig;
+    props: CollapseProps;
     childNodes: TdCollapseItem[];
-    private activeNames;
-    constructor(params?: ITdCollapseConfig);
-    mounted(): void;
-    setActiveNames(activeNames: ICollapseActiveName[]): void;
-    handleItemClick(name: ICollapseActiveName): void;
+    activeNames?: Signal<(string | number | undefined)[]>;
+    setActiveNames?: (_activeNames: CollapseActiveName[]) => void;
+    constructor(params?: CollapseProps);
+    setup(): void;
 }