@type-dom/ui 0.0.9 → 0.1.0

package/src/components/navigation/td-tabs/td-tabs.class.js

@@ -5,18 +5,20 @@ const tslib_1 = require("tslib");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
 const utils_1 = require("@type-dom/utils");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 // import { $colorPrimary, $colors, $textColor } from '../../../styles';
 const event_1 = require("../../../constants/event");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_tab_nav_class_1 = require("./td-tab-nav.class");
 const td_tabs_style_1 = require("./td-tabs.style");
-class TdTabs extends ui_abstract_1.UI {
+class TdTabs extends framework_1.TypeDiv {
     constructor(params = {}) {
         var _a, _b;
-        super(params);
+        super();
         this.className = 'TdTabs';
-        this.attr.addName('td-tabs');
+        this.attr.setObj({
+            name: 'td-tabs'
+        });
+        // this.attr.addName('td-tabs');
         // this.style.addObj($tabsStyle);
         this.currentName = (params === null || params === void 0 ? void 0 : params.modelValue) || '';
         this.header = new framework_1.Div({

package/src/components/navigation/td-tabs/td-tabs.interface.d.ts

@@ -1,13 +1,13 @@
 import { IStyle } from '@type-dom/css-type';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
 import { UPDATE_MODEL_EVENT } from '../../../constants/event';
 import { TdIcon } from '../../basic/td-icon/td-icon.class';
 import { ITdTabPaneConfig } from './td-tab-pane.interface';
 import { TdTabPane } from './td-tab-pane.class';
-export interface ITdTabs extends IUI {
+export interface ITdTabs extends ITypeDiv {
     className: 'TdTabs';
 }
-export interface ITdTabsConfig extends IUIConfig {
+export interface ITdTabsConfig extends ITypeConfig {
     /**
      * @description type of Tab
      *     default: '',

package/src/components/others/example/example-source-wrapper.js

@@ -12,7 +12,8 @@ class ExampleSourceWrapper extends framework_1.TypeDiv {
         this.style.addObj({
             // background-color: var(--code-bg-color),
             backgroundColor: styles_1.$fillColor.light,
-            overflowX: 'auto'
+            overflowX: 'auto',
+            userSelect: 'text',
         });
         this.addChild(new framework_1.Pre({
             childNodes: [

package/src/components/others/td-divider/td-divider.class.d.ts

@@ -1,6 +1,6 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { ITdDivider, ITdDividerConfig } from './td-divider.interface';
-export declare class TdDivider extends UI implements ITdDivider {
+export declare class TdDivider extends TypeDiv implements ITdDivider {
     className: 'TdDivider';
     constructor(params?: ITdDividerConfig);
 }

package/src/components/others/td-divider/td-divider.class.js

@@ -3,10 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdDivider = void 0;
 const framework_1 = require("@type-dom/framework");
 const var_1 = require("../../../styles/var");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-class TdDivider extends ui_abstract_1.UI {
+class TdDivider extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdDivider';
         this.style.addObj({
             position: 'relative'

package/src/components/others/td-divider/td-divider.interface.d.ts

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdDivider extends IUI {
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+export interface ITdDivider extends ITypeDiv {
     className: 'TdDivider';
 }
-export interface ITdDividerConfig extends IUIConfig {
+export interface ITdDividerConfig extends ITypeConfig {
     /**
      * @description Set divider's direction
      */

package/src/constants/aria.d.ts

@@ -0,0 +1,17 @@
+export declare const ariaProps: {
+    /**
+     * @description native `aria-label` attribute
+     */
+    ariaLabel: StringConstructor;
+    /**
+     * @description native `aria-orientation` attribute
+     */
+    ariaOrientation: {
+        type: StringConstructor;
+        values: string[];
+    };
+    /**
+     * @description native `aria-controls` attribute
+     */
+    ariaControls: StringConstructor;
+};

package/src/constants/aria.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ariaProps = void 0;
+exports.ariaProps = {
+    /**
+     * @description native `aria-label` attribute
+     */
+    ariaLabel: String,
+    /**
+     * @description native `aria-orientation` attribute
+     */
+    ariaOrientation: {
+        type: String,
+        values: ['horizontal', 'vertical', 'undefined'],
+    },
+    /**
+     * @description native `aria-controls` attribute
+     */
+    ariaControls: String,
+};

package/src/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from './use-cursor';
 export * from './use-escape-keydown';
 export * from './use-forward-ref';
+export * from './use-delayed-toggle';

package/src/hooks/index.js

@@ -4,3 +4,4 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./use-cursor"), exports);
 tslib_1.__exportStar(require("./use-escape-keydown"), exports);
 tslib_1.__exportStar(require("./use-forward-ref"), exports);
+tslib_1.__exportStar(require("./use-delayed-toggle"), exports);

package/src/hooks/use-delayed-toggle.d.ts

@@ -0,0 +1,23 @@
+import { ITypeConfig } from '@type-dom/framework';
+export interface IDelayedToggleConfig extends ITypeConfig {
+    /**
+     * @description delay of appearance, in millisecond
+     *     default: 0,
+     */
+    showAfter?: number;
+    /**
+     * @description delay of disappear, in millisecond
+     *     default: 200,
+     */
+    hideAfter?: number;
+    /**
+     * @description disappear automatically, in millisecond
+     *     default: 0,
+     */
+    autoClose?: number;
+}
+export declare const useDelayedToggleProps: {
+    showAfter: number;
+    hideAfter: number;
+    autoClose: number;
+};

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDelayedToggleProps = void 0;
+exports.useDelayedToggleProps = {
+    showAfter: 0,
+    hideAfter: 200,
+    autoClose: 0,
+};
+// export type UseDelayedToggleProps = {
+//   open: (event?: Event) => void
+//   close: (event?: Event) => void
+// } & ToRefs<ExtractPropTypes<typeof useDelayedToggleProps>>
+//
+// export const useDelayedToggle = ({
+//   showAfter,
+//   hideAfter,
+//   autoClose,
+//   open,
+//   close,
+// }: UseDelayedToggleProps) => {
+//   const { registerTimeout } = useTimeout()
+//   const {
+//     registerTimeout: registerTimeoutForAutoClose,
+//     cancelTimeout: cancelTimeoutForAutoClose,
+//   } = useTimeout()
+//
+//   const onOpen = (event?: Event) => {
+//     registerTimeout(() => {
+//       open(event)
+//
+//       const _autoClose = unref(autoClose)
+//       if (isNumber(_autoClose) && _autoClose > 0) {
+//         registerTimeoutForAutoClose(() => {
+//           close(event)
+//         }, _autoClose)
+//       }
+//     }, unref(showAfter))
+//   }
+//
+//   const onClose = (event?: Event) => {
+//     cancelTimeoutForAutoClose()
+//
+//     registerTimeout(() => {
+//       close(event)
+//     }, unref(hideAfter))
+//   }
+//
+//   return {
+//     onOpen,
+//     onClose,
+//   }
+// }

package/src/styles/var.d.ts

@@ -181,22 +181,7 @@ export declare const $fontSizeMap: {
     default: string;
     small: string;
 };
-export declare const $borderRadiusMap: {
-    large: string;
-    default: string;
-    small: string;
-};
-export declare const $paddingVerticalMap: {
-    large: string;
-    default: string;
-    small: string;
-};
-export declare const $paddingHorizontalMap: {
-    large: string;
-    default: string;
-    small: string;
-};
-export declare const $transitionDuration = "0.3s";
+export declare const $transitionDurationDefault = "0.3s";
 export declare const $transitionDurationFast = "0.2s";
 export declare const $colorPrimaryRgb = "64, 158, 255";
 export declare const $colorDangerRgb = "245, 108, 108";
@@ -209,3 +194,4 @@ export declare const $scrollbar: {
 export declare const $ellipsisStyle: IStyle;
 export declare const $border: string;
 export declare const $svgMonochromeGrey: string;
+export declare const $row: IStyle;

package/src/styles/var.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$svgMonochromeGrey = exports.$border = exports.$ellipsisStyle = exports.$scrollbar = exports.$colorDangerRgb = exports.$colorPrimaryRgb = exports.$transitionDurationFast = exports.$transitionDuration = exports.$paddingHorizontalMap = exports.$paddingVerticalMap = exports.$borderRadiusMap = exports.$fontSizeMap = exports.$buttonTextColor = exports.$buttonBgColor = exports.$buttonBorderColor = exports.$buttonActiveShadePercent = exports.$buttonHoverTintPercent = exports.$buttonBorderWidth = exports.$button = exports.$colorInfo = exports.$colorError = exports.$colorDanger = exports.$colorWarning = exports.$colorSuccess = exports.$colorPrimary = exports.$colorBlack = exports.$colorWhite = exports.$colors = exports.$overlayColor = exports.$commonComponentSize = exports.componentSizeMap = exports.componentSizes = exports.$disabled = exports.$zIndex = exports.$fontSizes = exports.fontFamily = exports.$boxShadow = exports.$borderRadius = exports.$borderColorHover = exports.$borderStyle = exports.$borderWidth = exports.$bgColor = exports.$fillColor = exports.$borderColor = exports.$textColor = exports.$types = exports.$fontLineHeightPrimary = exports.$fontWeightPrimary = void 0;
+exports.$row = exports.$svgMonochromeGrey = exports.$border = exports.$ellipsisStyle = exports.$scrollbar = exports.$colorDangerRgb = exports.$colorPrimaryRgb = exports.$transitionDurationFast = exports.$transitionDurationDefault = exports.$fontSizeMap = exports.$buttonTextColor = exports.$buttonBgColor = exports.$buttonBorderColor = exports.$buttonActiveShadePercent = exports.$buttonHoverTintPercent = exports.$buttonBorderWidth = exports.$button = exports.$colorInfo = exports.$colorError = exports.$colorDanger = exports.$colorWarning = exports.$colorSuccess = exports.$colorPrimary = exports.$colorBlack = exports.$colorWhite = exports.$colors = exports.$overlayColor = exports.$commonComponentSize = exports.componentSizeMap = exports.componentSizes = exports.$disabled = exports.$zIndex = exports.$fontSizes = exports.fontFamily = exports.$boxShadow = exports.$borderRadius = exports.$borderColorHover = exports.$borderStyle = exports.$borderWidth = exports.$bgColor = exports.$fillColor = exports.$borderColor = exports.$textColor = exports.$types = exports.$fontLineHeightPrimary = exports.$fontWeightPrimary = void 0;
 exports.setColorMixLevel = setColorMixLevel;
 /**
  * scss/var
@@ -256,22 +256,7 @@ exports.$fontSizeMap = {
     default: exports.$fontSizes.base,
     small: '12px',
 };
-exports.$borderRadiusMap = {
-    large: exports.$borderRadius.base,
-    default: exports.$borderRadius.base,
-    small: parseInt(exports.$borderRadius.base, 10) - 1 + 'px',
-};
-exports.$paddingVerticalMap = {
-    large: '13px',
-    default: '9px',
-    small: '6px',
-};
-exports.$paddingHorizontalMap = {
-    large: '20px',
-    default: '16px',
-    small: '12px',
-};
-exports.$transitionDuration = '0.3s';
+exports.$transitionDurationDefault = '0.3s';
 exports.$transitionDurationFast = '0.2s';
 exports.$colorPrimaryRgb = '64, 158, 255';
 exports.$colorDangerRgb = '245, 108, 108';
@@ -293,3 +278,8 @@ exports.$ellipsisStyle = {
 exports.$border = exports.$borderWidth + ' ' + exports.$borderStyle + ' ' + exports.$borderColor.base;
 // Svg
 exports.$svgMonochromeGrey = exports.$borderColor.base;
+exports.$row = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};

package/src/utils/dom/event.d.ts

@@ -0,0 +1,6 @@
+export declare const composeEventHandlers: <E>(theirsHandler?: (event: E) => boolean | void, oursHandler?: (event: E) => void, { checkForDefaultPrevented }?: {
+    checkForDefaultPrevented?: boolean | undefined;
+}) => (event: E) => void;
+type WhenMouseHandler = (e: PointerEvent) => any;
+export declare const whenMouse: (handler: WhenMouseHandler) => WhenMouseHandler;
+export {};

package/src/utils/dom/event.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.whenMouse = exports.composeEventHandlers = void 0;
+const composeEventHandlers = (theirsHandler, oursHandler, { checkForDefaultPrevented = true } = {}) => {
+    const handleEvent = (event) => {
+        const shouldPrevent = theirsHandler === null || theirsHandler === void 0 ? void 0 : theirsHandler(event);
+        if (checkForDefaultPrevented === false || !shouldPrevent) {
+            return oursHandler === null || oursHandler === void 0 ? void 0 : oursHandler(event);
+        }
+    };
+    return handleEvent;
+};
+exports.composeEventHandlers = composeEventHandlers;
+const whenMouse = (handler) => {
+    return (e) => e.pointerType === 'mouse' ? handler(e) : undefined;
+};
+exports.whenMouse = whenMouse;

package/src/ui/ui.abstract.d.ts

@@ -1,18 +0,0 @@
-import { ITypeConfig, SlotNode, TypeElement } from '@type-dom/framework';
-import { IUI, IUISlotNodes } from './ui.interface';
-export declare let componentId: number;
-export declare abstract class UI<T extends HTMLElement | undefined = HTMLElement> extends TypeElement implements IUI {
-    nodeName: 'fragment' | string;
-    dom: T;
-    componentId: number;
-    slotNodes: IUISlotNodes;
-    protected constructor(params: ITypeConfig | undefined, tag?: string);
-    /**
-     * 确保slot存在，不存在则创建；
-     * 要在useSlots之后调用
-     *
-     * @param name
-     */
-    getSlotNode(name?: string): SlotNode;
-    useSlots<T extends IUISlotNodes>(params?: ITypeConfig): T;
-}

package/src/ui/ui.abstract.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UI = exports.componentId = void 0;
-const framework_1 = require("@type-dom/framework");
-exports.componentId = 0;
-class UI extends framework_1.TypeElement {
-    // 手动的方式设置 fragment; 实现类似 TypeFragment 类
-    constructor(params, tag = 'div') {
-        super();
-        this.params = Object.assign(this.params, params);
-        this.componentId = exports.componentId++;
-        this.attr.addObj({
-            componentId: this.componentId,
-        });
-        this.nodeName = tag;
-        if (this.nodeName === 'fragment') {
-            this.dom = undefined;
-        }
-        else {
-            this.dom = document.createElement(this.nodeName.trim());
-        }
-        this.slotNodes = {
-        // default: new SlotNode('default'),
-        };
-        // todo 统一处理，还是在各个类中处理
-        this.useSlots(params);
-    }
-    /**
-     * 确保slot存在，不存在则创建；
-     * 要在useSlots之后调用
-     *
-     * @param name
-     */
-    getSlotNode(name = 'default') {
-        var _a;
-        return this.slotNodes[name] = (_a = this.slotNodes[name]) !== null && _a !== void 0 ? _a : new framework_1.SlotNode(name);
-    }
-    useSlots(params) {
-        if (params === null || params === void 0 ? void 0 : params.slot) {
-            this.getSlotNode().resetSlot(params.slot);
-        }
-        (params === null || params === void 0 ? void 0 : params.slots) &&
-            Object.keys(params.slots).forEach((key) => {
-                var _a;
-                this.getSlotNode(key).resetSlot((_a = params.slots) === null || _a === void 0 ? void 0 : _a[key]);
-            });
-        return this.slotNodes;
-    }
-}
-exports.UI = UI;

package/src/ui/ui.interface.d.ts

@@ -1,12 +0,0 @@
-import { ISlotNodes, ITypeConfig, ITypeElement, SlotNode, TypeElement } from '@type-dom/framework';
-export interface IUI extends ITypeElement {
-    componentId?: string | number;
-}
-export interface IUIConfig extends ITypeConfig {
-    tag?: string;
-    items?: ITypeConfig[];
-    childNodes?: TypeElement[] | undefined;
-}
-export interface IUISlotNodes extends ISlotNodes {
-    default?: SlotNode;
-}

package/src/ui/ui.interface.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });