@type-dom/ui 0.1.1 → 0.1.2

package/src/theme-chalk/var.scss

@@ -0,0 +1,87 @@
+// CSS3 var
+@use 'common/var' as *;
+@use 'mixins/var' as *;
+@use 'mixins/mixins' as *;
+
+// for better performance do not dynamically change the root variable if you really
+// do not need that, since this could introduce recalculation overhead for rendering.
+// https://lisilinhart.info/posts/css-variables-performance/
+
+// common
+:root {
+  @include set-css-var-value('color-white', $color-white);
+  @include set-css-var-value('color-black', $color-black);
+
+  // get rgb
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-rgb($type);
+  }
+
+  // Typography
+  @include set-component-css-var('font-size', $font-size);
+  @include set-component-css-var('font-family', $font-family);
+
+  @include set-css-var-value('font-weight-primary', 500);
+  @include set-css-var-value('font-line-height-primary', 24px);
+
+  // z-index --el-index-#{$type}
+  @include set-component-css-var('index', $z-index);
+
+  // --el-border-radius-#{$type}
+  @include set-component-css-var('border-radius', $border-radius);
+
+  // Transition
+  // refer to this website to get the bezier motion function detail
+  // https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
+  @include set-component-css-var('transition-duration', $transition-duration);
+
+  @include set-component-css-var('transition-function', $transition-function);
+  @include set-component-css-var('transition', $transition);
+
+  // common component size
+  @include set-component-css-var('component-size', $common-component-size);
+}
+
+// for light
+:root {
+  color-scheme: light;
+
+  // --el-color-#{$type}
+  // --el-color-#{$type}-light-{$i}
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
+
+  // color-scheme
+  // Background --el-bg-color-#{$type}
+  @include set-component-css-var('bg-color', $bg-color);
+  // --el-text-color-#{$type}
+  @include set-component-css-var('text-color', $text-color);
+  // --el-border-color-#{$type}
+  @include set-component-css-var('border-color', $border-color);
+  // Fill --el-fill-color-#{$type}
+  @include set-component-css-var('fill-color', $fill-color);
+
+  // Box-shadow
+  // --el-box-shadow-#{$type}
+  @include set-component-css-var('box-shadow', $box-shadow);
+  // Disable base
+  @include set-component-css-var('disabled', $disabled);
+
+  // overlay & mask
+  @include set-component-css-var('overlay-color', $overlay-color);
+  @include set-component-css-var('mask-color', $mask-color);
+
+  // Border
+  @include set-css-var-value('border-width', $border-width);
+  @include set-css-var-value('border-style', $border-style);
+  @include set-css-var-value('border-color-hover', $border-color-hover);
+  @include set-css-var-value(
+    'border',
+    getCssVar('border-width') getCssVar('border-style')
+      getCssVar('border-color')
+  );
+
+  // Svg
+  @include css-var-from-global('svg-monochrome-grey', 'border-color');
+}

package/src/theme-chalk/virtual-list.scss

@@ -0,0 +1,40 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@mixin showScrollbar {
+  @include b(virtual-scrollbar) {
+    opacity: 1;
+  }
+}
+
+@include b(vl) {
+  @include e(wrapper) {
+    position: relative;
+    &:hover {
+      @include showScrollbar();
+    }
+    &.always-on {
+      @include showScrollbar();
+    }
+  }
+}
+
+.#{$namespace}-vl__window {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+@include b(virtual-scrollbar) {
+  opacity: 0;
+  transition: opacity 340ms ease-out;
+  &.always-on {
+    opacity: 1;
+  }
+}
+
+@include b(vg) {
+  @include e(wrapper) {
+    position: relative;
+  }
+}

package/src/components/basic/td-container/td-container.old.d.ts

@@ -1,11 +0,0 @@
-import { TypeElement, TypeSection } from '@type-dom/framework';
-import { TdAside } from './td-aside/td-aside.class';
-import { TdHeader } from './td-header/td-header.class';
-import { TdMain } from './td-main/td-main.class';
-import { ITdContainer, ContainerProps } from './td-container.interface';
-export declare class TdContainer extends TypeSection implements ITdContainer {
-    className: 'TdContainer';
-    props: ContainerProps;
-    childNodes: (TdAside | TdHeader | TdMain | TdContainer | TypeElement)[];
-    constructor(params?: ContainerProps);
-}

package/src/components/basic/td-container/td-container.old.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdContainer = void 0;
-const framework_1 = require("@type-dom/framework");
-class TdContainer extends framework_1.TypeSection {
-    constructor(params = {}) {
-        super();
-        this.className = 'TdContainer';
-        this.childNodes = [];
-        this.attr.addObj({
-            name: 'td-container',
-            class: 'td-container',
-        });
-        this.style.addObj({
-            display: 'flex',
-            flexDirection: 'row', // vertical ===> column
-            flex: 1,
-            flexBasis: 'auto',
-            boxSizing: 'border-box',
-            minWidth: 0,
-        });
-        if (params === null || params === void 0 ? void 0 : params.vertical) {
-            this.style.addObj({
-                flexDirection: 'column',
-            });
-        }
-        this.slotChildren(params.slot);
-        this.props = this.useParams(params);
-    }
-}
-exports.TdContainer = TdContainer;

package/src/components/form/td-input/widget/prefix.d.ts

@@ -1,10 +0,0 @@
-import { TypeSpan } from '@type-dom/framework';
-import { TdInputProps } from '../td-input.interface';
-import { TdInputWrapper } from './td-input-wrapper.class';
-export declare class TdInputPrefix extends TypeSpan {
-    className: 'TdInputPrefix';
-    parent: TdInputWrapper;
-    private prefixInner;
-    private prefixIcon?;
-    constructor(parent: TdInputWrapper, config?: TdInputProps);
-}

package/src/components/form/td-input/widget/prefix.js

@@ -1,63 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdInputPrefix = void 0;
-const framework_1 = require("@type-dom/framework");
-const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
-const td_input_style_1 = require("../td-input.style");
-class TdInputPrefix extends framework_1.TypeSpan {
-    constructor(parent, config) {
-        super();
-        this.parent = parent;
-        this.className = 'TdInputPrefix';
-        this.style.addObj({
-            display: (config === null || config === void 0 ? void 0 : config.prefixIcon) ? 'inline-flex' : 'none',
-            whiteSpace: 'nowrap',
-            flexShrink: 0,
-            flexWrap: 'nowrap',
-            height: '100%',
-            textAlign: 'center',
-            //   color: var,
-            //     #{getCssVarName('input-icon-color')},
-            //     map.get($input, 'icon-color',
-            // ),
-            color: td_input_style_1.$input.iconColor,
-            // transition: all getCssVar('transition-duration'),
-            transition: 'all 0.3s',
-            pointerEvents: 'none',
-        });
-        this.prefixInner = new framework_1.Span({
-            attrObj: {
-                name: 'prefix-inner',
-            },
-            styleObj: {
-                pointerEvents: 'all',
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                marginRight: '8px',
-            },
-        });
-        this.addChild(this.prefixInner);
-        if (config === null || config === void 0 ? void 0 : config.prefixIcon) {
-            this.prefixIcon = new td_icon_class_1.TdIcon({
-                slot: config.prefixIcon,
-                attrObj: {
-                    name: 'prefix-icon',
-                },
-                styleObj: {
-                    display: 'inline-flex',
-                    fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
-                    // cursor: 'pointer',
-                },
-                events: {
-                    click: (evt, icon) => {
-                        console.log('prefixIcon click . ');
-                        this.parent.inner.focus();
-                    },
-                },
-            });
-            this.prefixInner.addChild(this.prefixIcon);
-        }
-    }
-}
-exports.TdInputPrefix = TdInputPrefix;

package/src/components/form/td-input/widget/suffix.d.ts

@@ -1,14 +0,0 @@
-import { TypeSpan } from '@type-dom/framework';
-import { TdIcon } from '../../../basic/td-icon/td-icon.class';
-import { TdInputProps } from '../td-input.interface';
-import { TdInputWrapper } from './td-input-wrapper.class';
-export declare class TdInputSuffix extends TypeSpan {
-    className: 'TdInputSuffix';
-    parent: TdInputWrapper;
-    private suffixInner;
-    private suffixIcon?;
-    clearIcon?: TdIcon;
-    passwordIcon?: TdIcon;
-    constructor(parent: TdInputWrapper, config?: TdInputProps);
-    setup(): void;
-}

package/src/components/form/td-input/widget/suffix.js

@@ -1,125 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdInputSuffix = void 0;
-const framework_1 = require("@type-dom/framework");
-const svgs_1 = require("@type-dom/svgs");
-const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
-const td_input_style_1 = require("../td-input.style");
-class TdInputSuffix extends framework_1.TypeSpan {
-    constructor(parent, config) {
-        super();
-        this.parent = parent;
-        this.className = 'TdInputSuffix';
-        this.style.addObj({
-            display: 'inline-flex',
-            whiteSpace: 'nowrap',
-            flexShrink: 0,
-            flexWrap: 'nowrap',
-            height: '100%',
-            textAlign: 'center',
-            //   color: var,
-            //     #{getCssVarName('input-icon-color')},
-            //     map.get($input, 'icon-color',
-            // ),
-            color: td_input_style_1.$input.iconColor,
-            // transition: all getCssVar('transition-duration'),
-            transition: 'all 0.3s',
-            pointerEvents: 'none',
-        });
-        this.suffixInner = new framework_1.Span({
-            attrObj: {
-                name: 'suffix-inner',
-            },
-            styleObj: {
-                pointerEvents: 'all',
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                marginLeft: '8px',
-            },
-        });
-        this.addChild(this.suffixInner);
-        if (config === null || config === void 0 ? void 0 : config.clearable) {
-            this.clearIcon = new td_icon_class_1.TdIcon({
-                slot: new svgs_1.ElCircleCloseSvg(),
-                attrObj: {
-                    name: 'suffix-icon',
-                },
-                styleObj: {
-                    display: 'none',
-                    fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
-                    cursor: 'pointer',
-                },
-                events: {
-                    click: (evt, icon) => {
-                        console.log('click icon is ', icon);
-                        this.parent.inner.setValue('');
-                        this.parent.setShowClear(false);
-                        this.parent.inner.focus();
-                    },
-                    mousedown: (evt, icon) => {
-                        console.log('mousedown, icon is ', icon);
-                        evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                    },
-                },
-            });
-            this.suffixInner.addChild(this.clearIcon);
-        }
-        if (config === null || config === void 0 ? void 0 : config.showPassword) {
-            this.passwordIcon = new td_icon_class_1.TdIcon({
-                slot: new svgs_1.ElHideSvg(),
-                styleObj: {
-                    display: this.parent.showPwdVisible ? 'inline-flex' : 'none',
-                    fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
-                    cursor: 'pointer',
-                },
-                events: {
-                    click: () => {
-                        var _a;
-                        console.log('click showPassword ');
-                        this.parent.passwordVisible = !this.parent.passwordVisible;
-                        (_a = this.passwordIcon) === null || _a === void 0 ? void 0 : _a.replaceSvg(this.parent.passwordVisible ? new svgs_1.ElViewSvg() : new svgs_1.ElHideSvg());
-                        if (this.parent.passwordVisible) {
-                            this.parent.inner.attr.setObj({
-                                type: 'text',
-                            });
-                        }
-                        else {
-                            this.parent.inner.attr.setObj({
-                                type: 'password',
-                            });
-                        }
-                        this.parent.inner.focus();
-                    },
-                },
-            });
-            this.suffixInner.addChild(this.passwordIcon);
-        }
-        if (config === null || config === void 0 ? void 0 : config.suffixIcon) {
-            this.suffixIcon = new td_icon_class_1.TdIcon({
-                slot: config.suffixIcon,
-                attrObj: {
-                    name: 'suffix-icon',
-                },
-                styleObj: {
-                    display: 'inline-flex',
-                    fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
-                    // cursor: 'pointer',
-                },
-                events: {
-                    click: (evt, icon) => {
-                        console.log('suffixIcon click . ');
-                        this.parent.inner.focus();
-                    },
-                },
-            });
-            this.suffixInner.addChild(this.suffixIcon);
-        }
-    }
-    setup() {
-        this.style.addObj({
-            display: this.parent.suffixVisible ? 'inline-flex' : 'none', // constructor 中this.parent.suffixVisible是undefined
-        });
-    }
-}
-exports.TdInputSuffix = TdInputSuffix;

package/src/components/form/td-input/widget/td-input-wrapper.class.d.ts

@@ -1,33 +0,0 @@
-import { Div, Input, TypeDiv, TypeElement } from '@type-dom/framework';
-import { TdInput } from '../td-input.class';
-import { TdInputProps } from '../td-input.interface';
-import { ITdInputWrapper } from './td-input-wrapper.interface';
-import { TdInputSuffix } from './suffix';
-import { TdInputPrefix } from './prefix';
-export declare class TdInputWrapper extends TypeDiv implements ITdInputWrapper {
-    className: 'TdInputWrapper';
-    props: TdInputProps;
-    parent?: TdInput;
-    prepend?: Div;
-    append?: Div;
-    prefix?: TdInputPrefix;
-    suffix: TdInputSuffix;
-    inner: Input;
-    private isComposing?;
-    passwordVisible?: boolean;
-    private isWordLimitVisible?;
-    private validateState?;
-    private needStatusIcon?;
-    constructor(params?: TdInputProps);
-    setup(): void;
-    get suffixVisible(): boolean;
-    get showClear(): boolean | undefined;
-    get showPwdVisible(): boolean | undefined;
-    get nativeInputValue(): string;
-    set nativeInputValue(value: string);
-    setDisabled(disabled: boolean): void;
-    setShowClear(showClear: boolean | undefined): void;
-    setShowPassword(showPassword: boolean | undefined): void;
-    setNativeInputValue(): void;
-    handleInput(event?: Event, element?: TypeElement): void;
-}