@type-dom/ui 0.1.0 → 0.1.2

package/src/components/feedback/td-popper/content/content.class.d.ts

@@ -1,9 +1,15 @@
-import { TypeDiv } from '@type-dom/framework';
-import { ITdPopperContent, ITdPopperContentConfig } from './content.interface';
+import { Computed, Signal } from '@type-dom/signals';
+import { TypeDivProps, TypeDiv } from '@type-dom/framework';
+import { IStyle } from '@type-dom/css-type';
+import { Instance } from '@type-dom/popper';
+import { ITdPopperContent, PopperContentProps } from './content.interface';
 export declare class TdPopperContent extends TypeDiv implements ITdPopperContent {
     className: 'TdPopperContent';
-    props: ITdPopperContentConfig;
-    private focusTrap;
-    constructor(params?: ITdPopperContentConfig);
+    props: PopperContentProps & TypeDivProps;
+    popperContentRef: Signal<HTMLElement | undefined>;
+    popperInstanceRef?: Computed<Instance | undefined>;
+    updatePopper?: (shouldUpdateZIndex?: boolean) => void;
+    contentStyle?: IStyle;
+    constructor(params?: PopperContentProps);
     setup(): void;
 }

package/src/components/feedback/td-popper/content/content.class.js

@@ -1,40 +1,143 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopperContent = void 0;
+const tslib_1 = require("tslib");
+const signals_1 = require("@type-dom/signals");
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
 const td_form_const_1 = require("../../../form/td-form/td-form.const");
 const td_focus_trap_class_1 = require("../../td-focus-trap/td-focus-trap.class");
 const constants_1 = require("../constants");
+const use_content_1 = require("../composable/use-content");
+const use_content_dom_1 = require("../composable/use-content-dom");
+const use_focus_trap_1 = require("../composable/use-focus-trap");
 const content_const_1 = require("./content.const");
 class TdPopperContent extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
+        // console.log('TdPopperContent . ');
         this.className = 'TdPopperContent';
         this.attr.addName('td-popper-content');
-        this.attr.addObj({
-            tabindex: -1
-        });
-        this.focusTrap = new td_focus_trap_class_1.TdFocusTrap();
-        this.addChild(this.focusTrap);
-        if (params.contentStyle) { // todo
-            this.style.addObj(params.contentStyle);
-        }
-        this.assignProps(content_const_1.popperContentProps);
+        this.addEmits(content_const_1.popperContentEmits);
         this.props = this.useParams(params);
     }
     setup() {
-        const formItemContext = this.inject(td_form_const_1.formItemContextKey, undefined);
-        const arrowOffset = 0;
+        const props = this.props;
+        const emit = this.emit;
+        const { focusStartRef, trapped, onFocusAfterReleased, onFocusAfterTrapped, onFocusInTrap, onFocusoutPrevented, onReleaseRequested, } = (0, use_focus_trap_1.usePopperContentFocusTrap)(props, emit);
+        const { attributes, arrowRef, contentRef, styles, instanceRef, role, update, } = (0, use_content_1.usePopperContent)(props);
+        const { ariaModal, arrowStyle, 
+        // contentAttrs,
+        contentClass, contentStyle, updateZIndex, } = (0, use_content_dom_1.usePopperContentDOM)(props, {
+            styles,
+            attributes,
+            role,
+        });
+        const formItemContext = (0, framework_1.inject)(td_form_const_1.formItemContextKey, undefined);
+        const arrowOffset = (0, signals_1.signal)();
         this.provide(constants_1.POPPER_CONTENT_INJECTION_KEY, {
-            // arrowStyle,
-            // arrowRef,
+            arrowStyle,
+            arrowRef,
             arrowOffset,
         });
         if (formItemContext) {
             // disallow auto-id from inside popper content
             this.provide(td_form_const_1.formItemContextKey, Object.assign(Object.assign({}, formItemContext), { addInputId: utils_1.NOOP, removeInputId: utils_1.NOOP }));
         }
+        let triggerTargetAriaStopWatch = undefined;
+        const updatePopper = (...args_1) => tslib_1.__awaiter(this, [...args_1], void 0, function* (shouldUpdateZIndex = true) {
+            // console.warn('updatePopper . ');
+            update();
+            shouldUpdateZIndex && updateZIndex();
+        });
+        const togglePopperAlive = () => {
+            // console.warn('togglePopperAlive . ');
+            updatePopper(false);
+            if ((0, signals_1.unref)(props.visible) && props.focusOnShow) {
+                trapped.set(true);
+            }
+            else if ((0, signals_1.unref)(props.visible) === false) {
+                trapped.set(false);
+            }
+        };
+        (0, framework_1.onMounted)(() => {
+            (0, signals_1.watch)(() => (0, signals_1.unref)(props.triggerTargetEl), (triggerTargetEl, prevTriggerTargetEl) => {
+                triggerTargetAriaStopWatch === null || triggerTargetAriaStopWatch === void 0 ? void 0 : triggerTargetAriaStopWatch();
+                triggerTargetAriaStopWatch = undefined;
+                const el = (0, signals_1.unref)(triggerTargetEl || (contentRef === null || contentRef === void 0 ? void 0 : contentRef.get()));
+                const prevEl = (0, signals_1.unref)(prevTriggerTargetEl || (contentRef === null || contentRef === void 0 ? void 0 : contentRef.get()));
+                if ((0, utils_1.isElement)(el)) {
+                    triggerTargetAriaStopWatch = (0, signals_1.watch)(() => [
+                        role.get(),
+                        (0, signals_1.unref)(props.ariaLabel),
+                        ariaModal.get(),
+                        (0, signals_1.unref)(props.id),
+                    ], (watches) => {
+                        ['role', 'aria-label', 'aria-modal', 'id'].forEach((key, idx) => {
+                            (0, utils_1.isNil)(watches[idx])
+                                ? el.removeAttribute(key)
+                                : el.setAttribute(key, watches[idx]);
+                        });
+                    }, { immediate: true });
+                }
+                if (prevEl !== el && (0, utils_1.isElement)(prevEl)) {
+                    ['role', 'aria-label', 'aria-modal', 'id'].forEach((key) => {
+                        prevEl.removeAttribute(key);
+                    });
+                }
+            }, { immediate: true });
+            (0, signals_1.watch)(() => (0, signals_1.unref)(props.visible), togglePopperAlive, { immediate: true });
+        });
+        (0, framework_1.onBeforeUnmount)(() => {
+            triggerTargetAriaStopWatch === null || triggerTargetAriaStopWatch === void 0 ? void 0 : triggerTargetAriaStopWatch();
+            triggerTargetAriaStopWatch = undefined;
+        });
+        (0, framework_1.defineExpose)({
+            /**
+             * @description popper content element
+             */
+            popperContentRef: contentRef,
+            /**
+             * @description popperjs instance
+             */
+            popperInstanceRef: instanceRef,
+            /**
+             * @description method for updating popper
+             */
+            updatePopper,
+            /**
+             * @description content style
+             */
+            contentStyle,
+        });
+        this.assignProps({
+            refDom: contentRef,
+            // styleObj: contentStyle,
+        });
+        // this.addEvents({ // dead loop
+        //   mouseenter: (e) => emit('mouseenter', e),
+        //   mouseleave: (e) => emit('mouseleave', e),
+        // });
+        this.attr.addObj({
+            tabindex: -1,
+            class: contentClass,
+        });
+        // console.warn('contentStyle is ', contentStyle.get());
+        this.style.addObj(contentStyle);
+        this.addChild(new td_focus_trap_class_1.TdFocusTrap({
+            trapped: trapped,
+            trapOnFocusIn: true,
+            focusTrapEl: contentRef,
+            focusStartEl: focusStartRef,
+            emits: {
+                focusAfterTrapped: onFocusAfterTrapped,
+                focusAfterReleased: onFocusAfterReleased,
+                focusin: onFocusInTrap,
+                focusoutPrevented: onFocusoutPrevented,
+                releaseRequested: onReleaseRequested,
+            },
+            slot: props.slot,
+        }));
     }
 }
 exports.TdPopperContent = TdPopperContent;

package/src/components/feedback/td-popper/content/content.const.d.ts

@@ -1,3 +1,10 @@
-import { IPopperCoreConfig, ITdPopperContentConfig } from './content.interface';
-export declare const popperCoreProps: IPopperCoreConfig;
-export declare const popperContentProps: ITdPopperContentConfig;
+import { PopperCoreConfigProps, PopperContentProps } from './content.interface';
+export declare const popperCoreConfigProps: PopperCoreConfigProps;
+export declare const popperContentProps: PopperContentProps;
+export declare const popperContentEmits: {
+    mouseenter: (evt?: MouseEvent) => evt is MouseEvent;
+    mouseleave: (evt?: MouseEvent) => evt is MouseEvent;
+    focus: () => boolean;
+    blur: () => boolean;
+    close: () => boolean;
+};

package/src/components/feedback/td-popper/content/content.const.js

@@ -1,28 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.popperContentProps = exports.popperCoreProps = void 0;
-exports.popperCoreProps = {
+exports.popperContentEmits = exports.popperContentProps = exports.popperCoreConfigProps = void 0;
+exports.popperCoreConfigProps = {
     boundariesPadding: 0,
     gpuAcceleration: true,
-    /**
-     * @description offset of the Tooltip
-     */
     offset: 12,
-    /**
-     * @description position of Tooltip
-     */
     placement: 'bottom',
-    /**
-     * @description [popper.js](https://popper.js.org/docs/v2/) parameters
-     */
-    // popperOptions:  () => ({}),
     strategy: 'absolute',
 };
-exports.popperContentProps = Object.assign(Object.assign({}, exports.popperCoreProps), { 
-    // style: {
-    //   type: definePropType<StyleValue>([String, Array, Object]),
-    // },
-    // className: {
-    //   type: definePropType<ClassType>([String, Array, Object]),
-    // },
-    effect: 'dark', enterable: true, focusOnShow: false, trapping: false, stopPopperMouseEvent: true });
+exports.popperContentProps = {
+    boundariesPadding: 0,
+    gpuAcceleration: true,
+    offset: 12,
+    placement: 'bottom',
+    strategy: 'absolute',
+    // ...popperCoreConfigProps,
+    effect: 'dark',
+    enterable: true,
+    focusOnShow: false,
+    trapping: false,
+    stopPopperMouseEvent: true,
+};
+exports.popperContentEmits = {
+    mouseenter: (evt) => evt instanceof MouseEvent,
+    mouseleave: (evt) => evt instanceof MouseEvent,
+    focus: () => true,
+    blur: () => true,
+    close: () => true,
+};

package/src/components/feedback/td-popper/content/content.interface.d.ts

@@ -1,17 +1,14 @@
 import { IStyle } from '@type-dom/css-type';
-import { IEmits, ITypeConfig, ITypeDiv } from '@type-dom/framework';
+import { Placement, Strategy } from '@type-dom/popper';
+import { TypeProps, ITypeDiv, StyleValue } from '@type-dom/framework';
+import { MaybeRef } from '@type-dom/signals';
+import { popperContentEmits } from './content.const';
 export interface ITdPopperContent extends ITypeDiv {
     className: 'TdPopperContent';
 }
-declare const top = "top";
-declare const bottom = "bottom";
-declare const right = "right";
-declare const left = "left";
-type BasePlacement = typeof top | typeof bottom | typeof right | typeof left;
-type VariationPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
-type AutoPlacement = 'auto' | 'auto-start' | 'auto-end';
-export type Placement = AutoPlacement | BasePlacement | VariationPlacement;
-export interface IPopperCoreConfig extends ITypeConfig {
+type ClassObjectType = Record<string, boolean | unknown>;
+type ClassType = string | ClassObjectType | (ClassType | undefined)[];
+export interface PopperCoreConfigProps extends TypeProps {
     boundariesPadding?: number;
     fallbackPlacements?: Placement[];
     gpuAcceleration?: boolean;
@@ -24,36 +21,32 @@ export interface IPopperCoreConfig extends ITypeConfig {
      *     values: placements,
      *     default: 'bottom',
      */
-    placement?: string;
+    placement?: Placement;
     /**
      * @description [popper.js](https://popper.js.org/docs/v2/) parameters
      *   //   default: () => ({}),
      */
     popperOptions?: Record<string, any>;
-    strategy?: string;
+    strategy?: Strategy;
 }
-export interface ITdPopperContentConfig extends IPopperCoreConfig {
-    id?: string;
+export interface PopperContentProps extends PopperCoreConfigProps {
+    id?: MaybeRef<string>;
     contentStyle?: IStyle;
-    effect?: string;
-    visible?: boolean;
+    style?: StyleValue;
+    effect?: 'dark' | 'light' | string;
+    visible?: MaybeRef<boolean> | null;
     enterable?: boolean;
     pure?: boolean;
     focusOnShow?: boolean;
     trapping?: boolean;
-    popperStyle?: IStyle;
+    popperClass?: ClassType;
+    popperStyle?: StyleValue;
     referenceEl?: HTMLElement;
     triggerTargetEl?: HTMLElement;
     stopPopperMouseEvent?: boolean;
-    ariaLabel?: string;
     virtualTriggering?: boolean;
     zIndex?: number;
+    ariaLabel?: MaybeRef<string>;
 }
-export interface ITdPopperContentEmits extends IEmits {
-    mouseenter?: (evt: MouseEvent) => void;
-    mouseleave?: (evt: MouseEvent) => void;
-    focus?: (evt: FocusEvent) => void;
-    blur?: (evt: FocusEvent) => void;
-    close?: () => void;
-}
+export type PopperContentEmits = typeof popperContentEmits;
 export {};

package/src/components/feedback/td-popper/content/content.interface.js

@@ -1,6 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const top = 'top';
-const bottom = 'bottom';
-const right = 'right';
-const left = 'left';

package/src/components/feedback/td-popper/style/css.d.ts

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

package/src/components/feedback/td-popper/style/css.js

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

package/src/components/feedback/td-popper/style/index.d.ts

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

package/src/components/feedback/td-popper/style/index.js

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

package/src/components/feedback/td-popper/td-popper.class.d.ts

@@ -1,8 +1,16 @@
-import { SlotNode, TypeFragment } from '@type-dom/framework';
-import { ITdPopper, ITdPopperConfig } from './td-popper.interface';
+import { TypeFragment } from '@type-dom/framework';
+import { Computed, Signal } from '@type-dom/signals';
+import { Instance as PopperInstance } from '@type-dom/popper';
+import { ITdPopper, PopperProps, Measurable, RoleTypes } from './td-popper.interface';
+import './style/index';
 export declare class TdPopper extends TypeFragment implements ITdPopper {
     className: 'TdPopper';
-    content: SlotNode;
-    props: ITdPopperConfig;
-    constructor(params: ITdPopperConfig);
+    props: PopperProps;
+    triggerRef?: Signal<Measurable | undefined>;
+    popperInstanceRef?: Signal<PopperInstance | undefined>;
+    contentRef?: Signal<HTMLElement | undefined>;
+    referenceRef?: Signal<HTMLElement | undefined>;
+    role?: Computed<RoleTypes | undefined>;
+    constructor(params: PopperProps);
+    setup(): void;
 }

package/src/components/feedback/td-popper/td-popper.class.js

@@ -2,23 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopper = void 0;
 const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
 const constants_1 = require("./constants");
 const td_popper_const_1 = require("./td-popper.const");
+require("./style/index");
 class TdPopper extends framework_1.TypeFragment {
     constructor(params) {
         super();
         this.className = 'TdPopper';
-        // this.useTag('fragment');
-        this.content = new framework_1.SlotNode();
-        this.addChild(this.content);
-        const triggerRef = (0, framework_1.createProxy)(null);
-        const popperInstanceRef = (0, framework_1.createProxy)(null);
-        const contentRef = (0, framework_1.createProxy)(null);
-        const referenceRef = (0, framework_1.createProxy)(null);
-        this.content.addSlot(params.slot);
         this.assignProps(td_popper_const_1.popperProps);
         this.props = this.useParams(params);
-        const role = this.props.role;
+    }
+    setup() {
+        var _a;
+        const props = this.props;
+        const triggerRef = (0, signals_1.signal)();
+        const popperInstanceRef = (0, signals_1.signal)();
+        const contentRef = (0, signals_1.signal)();
+        const referenceRef = (0, signals_1.signal)();
+        const role = (0, signals_1.computed)(() => props.role);
         const popperProviders = {
             /**
              * @description trigger element
@@ -41,7 +43,9 @@ class TdPopper extends framework_1.TypeFragment {
              */
             role,
         };
-        this.provide(constants_1.POPPER_INJECTION_KEY, popperProviders);
+        (0, framework_1.defineExpose)(popperProviders);
+        (0, framework_1.provide)(constants_1.POPPER_INJECTION_KEY, popperProviders);
+        this.slotChildren(props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
     }
 }
 exports.TdPopper = TdPopper;

package/src/components/feedback/td-popper/td-popper.const.d.ts

@@ -1,6 +1,12 @@
-import { ITdPopperConfig } from './td-popper.interface';
+import { PopperProps } from './td-popper.interface';
+declare const effects: readonly ["light", "dark"];
+declare const triggers: readonly ["click", "contextmenu", "hover", "focus"];
 export declare const Effect: {
     LIGHT: string;
     DARK: string;
 };
-export declare const popperProps: ITdPopperConfig;
+export declare const roleTypes: readonly ["dialog", "grid", "group", "listbox", "menu", "navigation", "tooltip", "tree"];
+export type PopperEffect = (typeof effects)[number] | (string & NonNullable<unknown>);
+export type PopperTrigger = (typeof triggers)[number];
+export declare const popperProps: PopperProps;
+export {};

package/src/components/feedback/td-popper/td-popper.const.js

@@ -1,10 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.popperProps = exports.Effect = void 0;
+exports.popperProps = exports.roleTypes = exports.Effect = void 0;
+const effects = ['light', 'dark'];
+const triggers = ['click', 'contextmenu', 'hover', 'focus'];
 exports.Effect = {
     LIGHT: 'light',
-    DARK: 'dark'
+    DARK: 'dark',
 };
+exports.roleTypes = [
+    'dialog',
+    'grid',
+    'group',
+    'listbox',
+    'menu',
+    'navigation',
+    'tooltip',
+    'tree',
+];
 exports.popperProps = {
-    role: 'tooltip'
+    role: 'tooltip',
 };

package/src/components/feedback/td-popper/td-popper.interface.d.ts

@@ -1,13 +1,36 @@
-import { ITypeConfig, ITypeElement } from '@type-dom/framework';
-export interface ITdPopper extends ITypeElement {
+import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
+import { Computed, Signal } from '@type-dom/signals';
+import { IStyle } from '@type-dom/css-type';
+import { Instance } from '@type-dom/popper';
+export interface ITdPopper extends ITypeFragment {
     className: 'TdPopper';
 }
-export type IRoleTypes = 'dialog' | 'grid' | 'group' | 'listbox' | 'menu' | 'navigation' | 'tooltip' | 'tree';
-export interface ITdPopperConfig extends ITypeConfig {
+export type RoleTypes = 'dialog' | 'grid' | 'group' | 'listbox' | 'menu' | 'navigation' | 'tooltip' | 'tree';
+export interface PopperProps extends TypeFragmentProps {
     /**
      *    default: 'tooltip',
      */
-    role?: IRoleTypes;
+    role?: RoleTypes;
 }
 export type ITdPopperEffect = 'dark' | 'light';
 export type ITdPopperTrigger = 'click' | 'hover' | 'focus' | 'context-menu';
+export type Measurable = {
+    getBoundingClientRect: () => DOMRect;
+};
+/**
+ * triggerRef indicates the element that triggers popper
+ * contentRef indicates the element of popper content
+ * referenceRef indicates the element that popper content relative with
+ */
+export type TdPopperInjectionContext = {
+    triggerRef: Signal<Measurable | undefined>;
+    contentRef: Signal<HTMLElement | undefined>;
+    popperInstanceRef: Signal<Instance | undefined>;
+    referenceRef: Signal<Measurable | undefined>;
+    role: Computed<RoleTypes | undefined>;
+};
+export type TdPopperContentInjectionContext = {
+    arrowRef?: Signal<HTMLElement | undefined>;
+    arrowOffset?: Signal<number | undefined>;
+    arrowStyle: Computed<IStyle>;
+};

package/src/components/feedback/td-popper/td-popper.style.d.ts

@@ -0,0 +1,23 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const $popper: {
+    borderRadius: string;
+};
+export declare const $popperStyle: IStyle;
+export declare const $popperArrowStyle: IStyle;
+export declare const $arrowBeforeStyle: IStyle;
+export declare const $darkStyle: IStyle;
+export declare const $arrowDarkStyle: IStyle;
+export declare const $lightStyle: IStyle;
+export declare const $arrowLightStyle: IStyle;
+export declare const $customizedEffectStyle: IStyle;
+export declare const $customizedEffectArrowStyle: IStyle;
+export declare const $popperContentPureStyle: IStyle;
+export declare const $placements: {
+    top: string;
+    bottom: string;
+    left: string;
+    right: string;
+};
+export declare const matchPlacement: (placement: keyof typeof $placements) => {
+    [x: string]: string;
+};

package/src/components/feedback/td-popper/td-popper.style.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchPlacement = exports.$placements = exports.$popperContentPureStyle = exports.$customizedEffectArrowStyle = exports.$customizedEffectStyle = exports.$arrowLightStyle = exports.$lightStyle = exports.$arrowDarkStyle = exports.$darkStyle = exports.$arrowBeforeStyle = exports.$popperArrowStyle = exports.$popperStyle = exports.$popper = void 0;
+const var_1 = require("../../../styles/var");
+const utils_1 = require("@type-dom/utils");
+exports.$popper = {
+    borderRadius: '4px',
+};
+exports.$popperStyle = {
+    position: 'absolute',
+    // border-radius: getCssVar('popper', 'border-radius'),
+    borderRadius: exports.$popper.borderRadius,
+    padding: '5px 11px',
+    zIndex: 2000,
+    fontSize: '12px',
+    lineHeight: '20px',
+    minWidth: '10px',
+    overflowWrap: 'break-word',
+    // visibility: 'hidden' // 'visible', // edit by me
+};
+exports.$popperArrowStyle = {
+    position: 'absolute',
+    width: '10px',
+    height: '10px',
+    zIndex: -1,
+    // add by me
+    // position: 'absolute',
+    // top: '100%', /* 箭头的位置 */
+    // left: '50%',
+    // marginLeft: '-5px',
+    // width: 0,
+    // height: 0,
+    // borderLeft: '7px solid transparent',
+    // borderRight: '7px solid transparent',
+    // borderTop: '7px solid ' + $textColor.primary,
+};
+exports.$arrowBeforeStyle = {
+    position: 'absolute',
+    width: '10px',
+    height: '10px',
+    zIndex: -1,
+    // content: ' ',
+    transform: 'rotate(45deg)',
+    // background: getCssVar('text-color', 'primary'),
+    background: var_1.$textColor.primary,
+    boxSizing: 'border-box',
+};
+exports.$darkStyle = {
+    color: var_1.$bgColor.default, // getCssVar('bg-color');
+    background: var_1.$textColor.primary, // getCssVar('text-color', 'primary');
+    border: '1px solid ' + var_1.$textColor.primary, //getCssVar('text-color', 'primary');
+};
+exports.$arrowDarkStyle = {
+    border: '1px solid ' + var_1.$textColor.primary, //getCssVar('text-color', 'primary');
+    background: var_1.$textColor.primary, //getCssVar('text-color', 'primary');
+    right: 0,
+};
+exports.$lightStyle = {
+    background: var_1.$bgColor.overlay, // getCssVar('bg-color', 'overlay');
+    border: '1px solid ' + var_1.$borderColor.light, // getCssVar('border-color', 'light');
+};
+exports.$arrowLightStyle = {
+    border: '1px solid ' + var_1.$borderColor.light, // getCssVar('border-color', 'light');
+    background: var_1.$bgColor.overlay, // getCssVar('bg-color', 'overlay');
+    right: 0,
+};
+exports.$customizedEffectStyle = {
+    /* Set padding to ensure the height is 32px */
+    padding: '6px 12px',
+    background: 'linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129))',
+};
+exports.$customizedEffectArrowStyle = {
+    background: 'linear-gradient(45deg, #b2e68d, #bce689)',
+    right: 0,
+};
+exports.$popperContentPureStyle = {
+    padding: 0,
+};
+exports.$placements = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+};
+const $adjacency = {
+    top: 'left',
+    bottom: 'right',
+    left: 'bottom',
+    right: 'top',
+};
+// 根据placement 返回箭头对应的位置
+const matchPlacement = (placement) => {
+    const opposite = exports.$placements[placement];
+    const borderPlacementColor = 'border' + (0, utils_1.capitalize)(placement) + 'Color';
+    const borderPlacement = 'border' + (0, utils_1.capitalize)(placement);
+    const borderAdjacencyColor = 'border' + (0, utils_1.capitalize)($adjacency[placement]) + 'Color';
+    const borderAdjacency = 'border' + (0, utils_1.capitalize)($adjacency[placement]);
+    return {
+        [opposite]: '-5px',
+        [borderPlacementColor]: 'transparent !important',
+        [borderAdjacencyColor]: 'transparent !important',
+        [borderPlacement]: 'none',
+        [borderAdjacency]: 'none',
+    };
+};
+exports.matchPlacement = matchPlacement;

package/src/components/feedback/td-popper/trigger/trigger.class.d.ts

@@ -1,18 +1,8 @@
-import { TypeDiv } from '@type-dom/framework';
-import { ITdPopperTrigger, ITdPopperTriggerConfig } from './trigger.interface';
-export declare class TdPopperTrigger extends TypeDiv implements ITdPopperTrigger {
+import { TypeFragment } from '@type-dom/framework';
+import { ITdPopperTrigger, PopperTriggerProps } from './trigger.interface';
+export declare class TdPopperTrigger extends TypeFragment implements ITdPopperTrigger {
     className: 'TdPopperTrigger';
-    props: ITdPopperTriggerConfig;
-    private role;
-    triggerRef?: HTMLElement;
-    virtualTriggerAriaStopWatch?: () => void;
-    constructor(params?: ITdPopperTriggerConfig);
-    get ariaHaspopup(): any;
-    get ariaControls(): string | undefined;
-    get ariaDescribedby(): string | undefined;
-    get ariaExpanded(): string | undefined;
+    props: PopperTriggerProps;
+    constructor(params?: PopperTriggerProps);
     setup(): void;
-    beforeDestroy(): void;
-    setVirtualRef(el: HTMLElement): void;
-    setTriggerRef(el: HTMLElement, prevEl?: HTMLElement): void;
 }