@type-dom/ui 0.0.1

package/src/others/collapsible-box/heading/expand-heading.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandHeading = void 0;
+const rxjs_1 = require("rxjs");
+const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
+class ExpandHeading extends framework_1.TypeComponent {
+    constructor(title) {
+        super('div');
+        this.className = 'ExpandHeading';
+        this.propObj = {
+            styleObj: {
+                margin: '0',
+                paddingLeft: '10px',
+                boxSizing: 'border-box',
+                backgroundColor: '#a0a0a0',
+                color: '#fff',
+                textIndent: '20px',
+                borderRadius: '4px 4px 0 0',
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                height: '36px'
+            },
+            attrObj: {
+                name: 'expand-heading',
+            }
+        };
+        this.svg = new svgs_1.ElCaretBottomSvg();
+        this.svg.addAttrObj({
+            fill: '#FFF',
+        });
+        this.title = new framework_1.TextNode(title);
+        // span.setStyle('verticalAlign', 'middle');
+        const span = new framework_1.Span(this);
+        span.childNodes = [this.title];
+        this.childNodes = [this.svg, span];
+    }
+    setTitle(title) {
+        this.title.setText(title);
+    }
+    initEvents() {
+        this.events.push((0, rxjs_1.fromEvent)(this.svg.dom, 'click').subscribe((e) => {
+            var _a, _b;
+            e.stopPropagation();
+            const style = getComputedStyle(this.svg.dom);
+            console.log('style.transform is ', style.transform);
+            if (this.svg.styleObj.transform === 'rotate(-90deg)') {
+                this.svg.setStyleObj({
+                    transform: 'rotate(0deg)',
+                    transition: 'transform 0.3s'
+                });
+                console.log('style.transform is ', style.transform);
+                if (((_a = this === null || this === void 0 ? void 0 : this.parent) === null || _a === void 0 ? void 0 : _a.lastChild) instanceof framework_1.TypeElement) {
+                    this.parent.lastChild.setStyle('display', 'flex'); // flex
+                }
+            }
+            else {
+                this.svg.setStyleObj({
+                    transform: 'rotate(-90deg)',
+                    transition: 'transform 0.3s'
+                });
+                if (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.lastChild) instanceof framework_1.TypeElement) {
+                    this.parent.lastChild.setStyle('display', 'none');
+                }
+            }
+        }));
+    }
+}
+exports.ExpandHeading = ExpandHeading;

package/src/others/index.d.ts

@@ -0,0 +1,3 @@
+export { CollapsibleBox } from './collapsible-box/collapsible-box';
+export { ExpandHeading } from './collapsible-box/heading/expand-heading';
+export { CollapsibleBoxContents } from './collapsible-box/contents/contents';

package/src/others/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleBoxContents = exports.ExpandHeading = exports.CollapsibleBox = void 0;
+var collapsible_box_1 = require("./collapsible-box/collapsible-box");
+Object.defineProperty(exports, "CollapsibleBox", { enumerable: true, get: function () { return collapsible_box_1.CollapsibleBox; } });
+var expand_heading_1 = require("./collapsible-box/heading/expand-heading");
+Object.defineProperty(exports, "ExpandHeading", { enumerable: true, get: function () { return expand_heading_1.ExpandHeading; } });
+var contents_1 = require("./collapsible-box/contents/contents");
+Object.defineProperty(exports, "CollapsibleBoxContents", { enumerable: true, get: function () { return contents_1.CollapsibleBoxContents; } });

package/src/styles/color-scheme.d.ts

@@ -0,0 +1 @@
+export {};

package/src/styles/color-scheme.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const var_1 = require("./var");
+const colorScheme = {
+    light: {
+        color: {
+            white: var_1.$colorWhite,
+            black: var_1.$colorBlack,
+            primary: {
+                base: var_1.$colorPrimary,
+                light: {
+                    3: '#79bbff',
+                    5: '#a0cfff',
+                    7: '#c6e2ff',
+                    8: '#d9ecff',
+                    9: '#ecf5ff',
+                },
+                dark: {
+                    2: '#337ecc',
+                }
+            },
+            success: {
+                base: '#67c23a',
+                light: {
+                    3: '#95d475',
+                    5: '#b3e19d',
+                    7: '#d1edc4',
+                    8: '#e1f3d8',
+                    9: '#f0f9eb',
+                },
+                dark: {
+                    2: '#529b2e'
+                }
+            },
+            warning: {
+                base: '#e6a23c',
+                light: {
+                    3: '#eebe77',
+                    5: '#f3d19e',
+                    7: '#f8e3c5',
+                    8: '#faecd8',
+                    9: '#fdf6ec',
+                },
+                dark: {
+                    2: '#b88230'
+                }
+            },
+            danger: {
+                base: '#f56c6c',
+                light: {
+                    3: '#f89898',
+                    5: '#fab6b6',
+                    7: '#fcd3d3',
+                    8: '#fde2e2',
+                    9: '#fef0f0',
+                },
+                dark: {
+                    2: '#c45656'
+                }
+            },
+            // error: === danger
+            info: {
+                base: '#909399',
+                light: {
+                    3: '#b1b3b8',
+                    5: '#c8c9cc',
+                    7: '#dedfe0',
+                    8: '#e9e9eb',
+                    9: '#f4f4f5',
+                },
+                dark: {
+                    2: '#73767a'
+                }
+            }
+        },
+        bgColor: var_1.$bgColors,
+        textColor: var_1.$textColors,
+        borderColor: var_1.$borderColors,
+        fillColor: var_1.$fillColors,
+        boxShadow: var_1.$boxShadow,
+        disabled: var_1.$disabled,
+        overlay: {
+            color: var_1.$overlayColor,
+        },
+        borderWidth: var_1.$borderWidth,
+        borderStyle: var_1.$borderStyle,
+    }
+};

package/src/styles/config.d.ts

@@ -0,0 +1,5 @@
+export declare const $namespace = "td";
+export declare const $commonSeparator = "-";
+export declare const $elementSeparator = "__";
+export declare const $modifierSeparator = "--";
+export declare const $statePrefix = "is-";

package/src/styles/config.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$statePrefix = exports.$modifierSeparator = exports.$elementSeparator = exports.$commonSeparator = exports.$namespace = void 0;
+exports.$namespace = 'td';
+exports.$commonSeparator = '-';
+exports.$elementSeparator = '__';
+exports.$modifierSeparator = '--';
+exports.$statePrefix = 'is-';

package/src/styles/function.d.ts

@@ -0,0 +1,10 @@
+export declare function selectorToString($selector: string): string;
+export declare function containsModifier($selector: string): boolean;
+export declare function containWhenFlag($selector: string): boolean;
+export declare function containPseudoClass($selector: string): boolean;
+export declare function hitAllSpecialNestRule($selector: string): boolean;
+export declare function joinVarName($list: string[]): string;
+export declare function getCssVarName(...$args: string[]): string;
+export declare function getCssVar(...$args: string[]): string;
+export declare function getCssVarWithDefault($args: string[], $default: string): string;
+export declare function bem($block: string, $element: '', $modifier: ''): string;

package/src/styles/function.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bem = exports.getCssVarWithDefault = exports.getCssVar = exports.getCssVarName = exports.joinVarName = exports.hitAllSpecialNestRule = exports.containPseudoClass = exports.containWhenFlag = exports.containsModifier = exports.selectorToString = void 0;
+const config = require("./config");
+// BEM support Func
+function selectorToString($selector) {
+    // $selector = inspect($selector);
+    // $selector = strSlice($selector, 2, -2);
+    $selector = $selector.slice(2, -2);
+    return $selector;
+}
+exports.selectorToString = selectorToString;
+function containsModifier($selector) {
+    $selector = selectorToString($selector);
+    return !!$selector.indexOf(config.$modifierSeparator);
+}
+exports.containsModifier = containsModifier;
+function containWhenFlag($selector) {
+    $selector = selectorToString($selector);
+    return !!$selector.indexOf('.' + config.$statePrefix);
+}
+exports.containWhenFlag = containWhenFlag;
+function containPseudoClass($selector) {
+    $selector = selectorToString($selector);
+    return !!$selector.indexOf(':');
+}
+exports.containPseudoClass = containPseudoClass;
+function hitAllSpecialNestRule($selector) {
+    return containsModifier($selector)
+        || containWhenFlag($selector)
+        || containPseudoClass($selector);
+}
+exports.hitAllSpecialNestRule = hitAllSpecialNestRule;
+// join var name
+// joinVarName(('button', 'text-color')) => '--el-button-text-color'
+function joinVarName($list) {
+    let $name = '--' + config.$namespace;
+    for (const $item in $list) {
+        if ($item !== '') {
+            $name = $name + '-' + $item;
+        }
+    }
+    return $name;
+}
+exports.joinVarName = joinVarName;
+// getCssVarName('button', 'text-color') => '--el-button-text-color'
+function getCssVarName(...$args) {
+    return joinVarName($args);
+}
+exports.getCssVarName = getCssVarName;
+// getCssVar('button', 'text-color') => var(--el-button-text-color)
+function getCssVar(...$args) {
+    // return var(#{joinVarName($args)});
+    return joinVarName($args);
+}
+exports.getCssVar = getCssVar;
+// getCssVarWithDefault(('button', 'text-color'), red) => var(--el-button-text-color, red)
+function getCssVarWithDefault($args, $default) {
+    // return var(#{joinVarName($args)}, #{$default});
+    return joinVarName($args) || $default;
+}
+exports.getCssVarWithDefault = getCssVarWithDefault;
+// bem('block', 'element', 'modifier') => 'el-block__element--modifier'
+function bem($block, $element, $modifier) {
+    let $name = config.$namespace + config.$commonSeparator + $block;
+    if ($element !== '') {
+        $name = $name + config.$elementSeparator + $element;
+    }
+    if ($modifier !== '') {
+        $name = $name + config.$modifierSeparator + $modifier;
+    }
+    // debug $name;
+    return $name;
+}
+exports.bem = bem;

package/src/styles/var.d.ts

@@ -0,0 +1,184 @@
+/**
+ * scss/var
+ */
+export declare const $fontWeightPrimary = 500;
+export declare const $fontLineHeightPrimary = "24px";
+/**
+ * 样式的通用全局变量
+ * scss/common/var
+ */
+export type IType = 'primary' | 'success' | 'warning' | 'danger' | 'error' | 'info';
+export declare const $types: IType[];
+export declare const $textColors: {
+    primary: string;
+    regular: string;
+    secondary: string;
+    placeholder: string;
+    disabled: string;
+};
+export declare const $borderColors: {
+    '': string;
+    light: string;
+    lighter: string;
+    extraLight: string;
+    dark: string;
+    darker: string;
+};
+export declare const $fillColors: {
+    '': string;
+    light: string;
+    lighter: string;
+    extraLight: string;
+    dark: string;
+    darker: string;
+    blank: string;
+};
+export declare const $bgColors: {
+    '': string;
+    page: string;
+    overlay: string;
+};
+export declare const $borderWidth = "1px";
+export declare const $borderStyle = "solid";
+export declare const $borderColorHover: string;
+export declare const $borderRadius: {
+    base: string;
+    small: string;
+    round: string;
+    circle: string;
+};
+export declare const $boxShadow: {
+    '': string;
+    light: string;
+    lighter: string;
+    dark: string;
+};
+export declare const fontFamily: {
+    '': string;
+};
+export declare const $fontSizes: {
+    extraLarge: string;
+    large: string;
+    medium: string;
+    base: string;
+    small: string;
+    extraSmall: string;
+};
+export declare const $zIndex: {
+    normal: number;
+    top: number;
+    popper: number;
+};
+export declare const $disabled: {
+    bgColor: string;
+    textColor: string;
+    borderColor: string;
+};
+export declare const $commonComponentSize: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $overlayColor: {
+    '': string;
+    light: string;
+    lighter: string;
+};
+export declare const $colors: {
+    white: string;
+    black: string;
+    default: {
+        base: string;
+        [propName: string]: string;
+    };
+    primary: {
+        base: string;
+        [propName: string]: string;
+    };
+    success: {
+        base: string;
+        [propName: string]: string;
+    };
+    warning: {
+        base: string;
+        [propName: string]: string;
+    };
+    danger: {
+        base: string;
+        [propName: string]: string;
+    };
+    error: {
+        base: string;
+        [propName: string]: string;
+    };
+    info: {
+        base: string;
+        [propName: string]: string;
+    };
+};
+export declare const $colorWhite: string;
+export declare const $colorBlack: string;
+export declare const $colorPrimary: string;
+export declare const $colorSuccess: string;
+export declare const $colorWarning: string;
+export declare const $colorDanger: string;
+export declare const $colorError: string;
+export declare const $colorInfo: string;
+export declare function setColorMixLevel($type: IType, $number: number, $mode?: string, $mixColor?: string): void;
+export declare const $button: {
+    fontWeight: number;
+    borderColor: string;
+    bgColor: string;
+    textColor: string;
+    disabled: {
+        textColor: string;
+        bgColor: string;
+        borderColor: string;
+    };
+    divide: {
+        borderColor: string;
+    };
+    hover: {
+        textColor: string;
+        bgColor: string;
+        borderColor: string;
+        link: {
+            textColor: string;
+        };
+    };
+    active: {
+        textColor: string;
+        borderColor: string;
+        bgColor: string;
+        color: string;
+    };
+    outline: {
+        Color: string;
+    };
+};
+export declare const $buttonBorderWidth = "1px";
+export declare const $buttonHoverTintPercent = "20%";
+export declare const $buttonActiveShadePercent = "10%";
+export declare const $buttonBorderColor: Record<string, string>;
+export declare const $buttonBgColor: Record<string, string>;
+export declare const $buttonTextColor: {};
+export declare const $buttonFontSize: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $buttonBorderRadius: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $buttonPaddingVertical: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $buttonPaddingHorizontal: {
+    large: string;
+    default: string;
+    small: string;
+};