d2coreui 23.0.15 → 23.0.17

package/style/flexLayout/old/light.scss

@@ -1,16 +1,16 @@
-$color_text: black !default;
-$color_background: white !default;
-$color_base: white !default;
-$color_1: scale_color($color_base, $lightness:-3%) !default;
-$color_2: scale_color($color_base, $lightness:-10%) !default;
-$color_3: scale_color($color_base, $lightness:-15%) !default;
-$color_4: scale_color($color_base, $lightness:-20%) !default;
-$color_5: scale_color($color_base, $lightness:-25%) !default;
-$color_6: scale_color($color_base, $lightness:-30%) !default;
-$color_drag1: red !default;
-$color_drag2: green !default;
-
-$font-size: medium !default;
-$font-family: Roboto, Arial, sans-serif !default;
-
-@import "_base";
+$color_text: black !default;
+$color_background: white !default;
+$color_base: white !default;
+$color_1: scale_color($color_base, $lightness:-3%) !default;
+$color_2: scale_color($color_base, $lightness:-10%) !default;
+$color_3: scale_color($color_base, $lightness:-15%) !default;
+$color_4: scale_color($color_base, $lightness:-20%) !default;
+$color_5: scale_color($color_base, $lightness:-25%) !default;
+$color_6: scale_color($color_base, $lightness:-30%) !default;
+$color_drag1: red !default;
+$color_drag2: green !default;
+
+$font-size: medium !default;
+$font-family: Roboto, Arial, sans-serif !default;
+
+@import "_base";

package/style/form/niceFormItem.css

@@ -1,39 +1,39 @@
-
-.nice-form-item {
-    padding-top: 24px;
-}
-
-.nice-float-label {
-    position: relative;
-}
-
-.nice-label {
-    font-size: 12px;
-    font-weight: normal;
-    position: absolute;
-    pointer-events: none;
-    left: 12px;
-    top: 6px;
-    transition: 0.2s ease all;
-    color: rgba(0,0,0,.70);
-}
-
-.nice-label-float {
-    top: -15px;
-    z-index: 1;
-    font-size: 12px !important;
-    background: white;
-    padding: 0 4px;
-    margin-left: -4px;
-    margin-bottom: 1px;
-}
-
-.nice-form-item-box {
-    position: relative;
-    display: inline-block;
-    width: 100%;
-    border: 1px solid rgba(0,0,0,.06);
-    border-radius: 2px;
-    transition: all .2s;
-    padding: 8px;
+
+.nice-form-item {
+    padding-top: 24px;
+}
+
+.nice-float-label {
+    position: relative;
+}
+
+.nice-label {
+    font-size: 12px;
+    font-weight: normal;
+    position: absolute;
+    pointer-events: none;
+    left: 12px;
+    top: 6px;
+    transition: 0.2s ease all;
+    color: rgba(0,0,0,.70);
+}
+
+.nice-label-float {
+    top: -15px;
+    z-index: 1;
+    font-size: 12px !important;
+    background: white;
+    padding: 0 4px;
+    margin-left: -4px;
+    margin-bottom: 1px;
+}
+
+.nice-form-item-box {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    border: 1px solid rgba(0,0,0,.06);
+    border-radius: 2px;
+    transition: all .2s;
+    padding: 8px;
 }

package/style/loading.css

@@ -1,32 +1,32 @@
-.loadingPage {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDFweCIgIGhlaWdodD0iNDFweCIgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBjbGFzcz0ibGRzLXJvbGxpbmciPiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiBmaWxsPSJub25lIiBuZy1hdHRyLXN0cm9rZT0ie3tjb25maWcuY29sb3J9fSIgbmctYXR0ci1zdHJva2Utd2lkdGg9Int7Y29uZmlnLndpZHRofX0iIG5nLWF0dHItcj0ie3tjb25maWcucmFkaXVzfX0iIG5nLWF0dHItc3Ryb2tlLWRhc2hhcnJheT0ie3tjb25maWcuZGFzaGFycmF5fX0iIHN0cm9rZT0iIzAxOTBmZSIgc3Ryb2tlLXdpZHRoPSIxMCIgcj0iMzUiIHN0cm9rZS1kYXNoYXJyYXk9IjE2NC45MzM2MTQzMTM0NjQxNSA1Ni45Nzc4NzE0Mzc4MjEzOCIgdHJhbnNmb3JtPSJyb3RhdGUoODQgNTAgNTApIj4gICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgY2FsY01vZGU9ImxpbmVhciIgdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPiAgICA8L2NpcmNsZT4gIDwvc3ZnPg==);
-}
-
-.handle {
-    position: absolute;
-    bottom: 0px;
-    right: 0px;
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    font-size: 16px;
-    text-align: center;
-    background: #1890ff;
-    border-radius: 4px 0 0 4px;
-    cursor: pointer;
-    pointer-events: auto;
-}
-
-body {
-    border-top: #aaaaaa 1px;
+.loadingPage {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDFweCIgIGhlaWdodD0iNDFweCIgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBjbGFzcz0ibGRzLXJvbGxpbmciPiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiBmaWxsPSJub25lIiBuZy1hdHRyLXN0cm9rZT0ie3tjb25maWcuY29sb3J9fSIgbmctYXR0ci1zdHJva2Utd2lkdGg9Int7Y29uZmlnLndpZHRofX0iIG5nLWF0dHItcj0ie3tjb25maWcucmFkaXVzfX0iIG5nLWF0dHItc3Ryb2tlLWRhc2hhcnJheT0ie3tjb25maWcuZGFzaGFycmF5fX0iIHN0cm9rZT0iIzAxOTBmZSIgc3Ryb2tlLXdpZHRoPSIxMCIgcj0iMzUiIHN0cm9rZS1kYXNoYXJyYXk9IjE2NC45MzM2MTQzMTM0NjQxNSA1Ni45Nzc4NzE0Mzc4MjEzOCIgdHJhbnNmb3JtPSJyb3RhdGUoODQgNTAgNTApIj4gICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgY2FsY01vZGU9ImxpbmVhciIgdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPiAgICA8L2NpcmNsZT4gIDwvc3ZnPg==);
+}
+
+.handle {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    font-size: 16px;
+    text-align: center;
+    background: #1890ff;
+    border-radius: 4px 0 0 4px;
+    cursor: pointer;
+    pointer-events: auto;
+}
+
+body {
+    border-top: #aaaaaa 1px;
 }

package/style/splitPane/splitPane.css

@@ -1,49 +1,49 @@
-.Resizer {
-    background: #000;
-    opacity: 0.2;
-    z-index: 1;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -moz-background-clip: padding;
-    -webkit-background-clip: padding;
-    background-clip: padding-box;
-}
-
-.Resizer:hover {
-    -webkit-transition: all 2s ease;
-    transition: all 2s ease;
-}
-
-.Resizer.horizontal {
-    height: 11px;
-    margin: -5px 0;
-    border-top: 5px solid rgba(255, 255, 255, 0);
-    border-bottom: 5px solid rgba(255, 255, 255, 0);
-    cursor: row-resize;
-    width: 100%;
-}
-
-.Resizer.horizontal:hover {
-    border-top: 5px solid rgba(0, 0, 0, 0.5);
-    border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-}
-
-.Resizer.vertical {
-    width: 11px;
-    margin: 0 -5px;
-    border-left: 5px solid rgba(255, 255, 255, 0);
-    border-right: 5px solid rgba(255, 255, 255, 0);
-    cursor: col-resize;
-}
-
-.Resizer.vertical:hover {
-    border-left: 5px solid rgba(0, 0, 0, 0.5);
-    border-right: 5px solid rgba(0, 0, 0, 0.5);
-}
-.Resizer.disabled {
-    cursor: not-allowed;
-}
-.Resizer.disabled:hover {
-    border-color: transparent;
+.Resizer {
+    background: #000;
+    opacity: 0.2;
+    z-index: 1;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding;
+    background-clip: padding-box;
+}
+
+.Resizer:hover {
+    -webkit-transition: all 2s ease;
+    transition: all 2s ease;
+}
+
+.Resizer.horizontal {
+    height: 11px;
+    margin: -5px 0;
+    border-top: 5px solid rgba(255, 255, 255, 0);
+    border-bottom: 5px solid rgba(255, 255, 255, 0);
+    cursor: row-resize;
+    width: 100%;
+}
+
+.Resizer.horizontal:hover {
+    border-top: 5px solid rgba(0, 0, 0, 0.5);
+    border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+}
+
+.Resizer.vertical {
+    width: 11px;
+    margin: 0 -5px;
+    border-left: 5px solid rgba(255, 255, 255, 0);
+    border-right: 5px solid rgba(255, 255, 255, 0);
+    cursor: col-resize;
+}
+
+.Resizer.vertical:hover {
+    border-left: 5px solid rgba(0, 0, 0, 0.5);
+    border-right: 5px solid rgba(0, 0, 0, 0.5);
+}
+.Resizer.disabled {
+    cursor: not-allowed;
+}
+.Resizer.disabled:hover {
+    border-color: transparent;
 }

package/tsconfig.build.json

@@ -1,24 +1,24 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "lib/esm",
-    "resolveJsonModule": true,
-    "allowJs": true,
-    "sourceMap": true,
-    "inlineSources": true,
-    "paths": {
-      "d2core": [
-        "../core"
-      ]
-    }
-  },
-  "include": [
-    "./**/*",
-    "./**/*.json",
-    "./**/*.ts*"
-  ],
-  "exclude": [
-    "node_modules",
-    "lib"
-  ]
-}
+{
+    "extends": "../tsconfig.base.json",
+    "compilerOptions": {
+        "outDir": "lib/esm",
+        "resolveJsonModule": true,
+        "allowJs": true,
+        "sourceMap": true,
+        "inlineSources": true,
+        "paths": {
+            "d2core": [
+                "../core"
+            ]
+        }
+    },
+    "include": [
+        "./**/*",
+        "./**/*.json",
+        "./**/*.ts*"
+    ],
+    "exclude": [
+        "node_modules",
+        "lib"
+    ]
+}

package/tsconfig.json

@@ -1,11 +1,11 @@
-{
-  "extends": "../tsconfig.base.json",
-  "references": [
-    {
-      "path": "../core"
-    }
-  ],
-  "compilerOptions": {
-    "composite": true,
-  },
-}
+{
+    "extends": "../tsconfig.base.json",
+    "references": [
+        {
+            "path": "../core"
+        }
+    ],
+    "compilerOptions": {
+        "composite": true
+    }
+}

package/components/clipboard/clipboardUtils.ts

@@ -1,53 +0,0 @@
-import {ModalDialog, ModalDialogMode} from "../modal/modalDialog";
-import i18n from "d2core/i18n/i18n";
-
-export class ClipboardUtils {
-    // Copies a string to the clipboard. Must be called from within an
-    // event handler such as click. May return false if it failed, but
-    // this is not always possible. Browser support for Chrome 43+,
-    // Firefox 42+, Safari 10+, Edge and IE 10+.
-    // IE: The clipboard feature may be disabled by an administrator. By
-    // default a prompt is shown the first time the clipboard is
-    // used (per session).
-    static copyToClipboard(text: string): boolean {
-        if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
-            var textarea = document.createElement("textarea");
-            textarea.textContent = text;
-            textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
-            document.body.appendChild(textarea);
-            textarea.select();
-            try {
-                return document.execCommand("copy");  // Security exception may be thrown by some browsers.
-            } catch (ex) {
-                console.warn("Copy to clipboard failed.", ex);
-                return false;
-            } finally {
-                document.body.removeChild(textarea);
-            }
-        }
-        return false;
-    }
-
-    static async readFromClipboard(): Promise<string | undefined> {
-        if (navigator.clipboard && window.isSecureContext) {
-            // @ts-ignore
-            const permission = await navigator.permissions.query({ name: "clipboard-read" });
-            if (permission.state === "granted" || permission.state === "prompt") {
-                return await navigator.clipboard.readText();
-            } else {
-                ModalDialog.error({
-                    mode: ModalDialogMode.OK,
-                    title: i18n("Error reading data from clipboard"),
-                    content: i18n("Clipboard not permitted")
-                })
-            }
-        } else {
-            ModalDialog.error({
-                mode: ModalDialogMode.OK,
-                title: i18n("Error reading data from clipboard"),
-                content: i18n("Secure context not available")
-            })
-        }
-        return undefined;
-    }
-}

package/components/codemirror/SyntaxHighlighter.tsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import CodeMirror from 'codemirror';
-import 'codemirror/addon/runmode/runmode'
-import 'codemirror/mode/meta'
-
-interface SyntaxHighlighterProps {
-    // codeMirror: typeof CodeMirror
-    className?: string
-    theme?: string
-    inline?: boolean
-    mode: string
-    prefix?: string
-    value: string
-    tooltip?:boolean
-}
-
-export default class SyntaxHighlighter extends React.Component<SyntaxHighlighterProps> {
-    static defaultProps = {
-        className: '',
-        prefix: 'cm-'
-    }
-
-    constructor(props: Readonly<SyntaxHighlighterProps>) {
-        super(props);
-    }
-
-    render() {
-        const {inline, value, mode, className, prefix, theme, tooltip} = this.props
-        const elements: React.ReactNode[] = []
-        let index = 0
-        let lastStyle: string | null | undefined = null
-        let tokenBuf = ''
-        let trimmedValue = value;
-        if( tooltip && value.length > 100) {
-            trimmedValue = value.substring(0, 100) + " ...";
-        }
-        CodeMirror.runMode(trimmedValue, mode, (token, style) => {
-            if (lastStyle === style) {
-                tokenBuf += token
-                lastStyle = style
-            } else {
-                if (tokenBuf) {
-                    elements.push(<span className={lastStyle ? prefix + lastStyle : ''} key={++index}>{tokenBuf}</span>);
-                }
-                tokenBuf = token
-                lastStyle = style
-            }
-        })
-        elements.push(<span className={lastStyle ? prefix + lastStyle : ''} key={++index}>{tokenBuf}</span>);
-
-        let tooltipText: undefined | string = undefined;
-        if(tooltip && trimmedValue !== value) {
-            tooltipText = value;//.replace("\t","&#009;").replace("\n","&#013;&#010;");
-        }
-        const code = (<code title={tooltipText} className={inline ? `inline ${prefix}s-${theme}` : ''}>{elements}</code>);
-        return inline ? (code) : (<pre className={`${className} ${prefix}s-${theme}`}>{code}</pre>);
-    }
-}

package/components/collapse/expandable.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-import {Divider} from "antd";
-import {DoubleRightOutlined} from "@ant-design/icons";
-import {Collapse} from 'react-collapse';
-
-interface ExpandableProps {
-    extraContent?: React.ReactNode
-    expanded?: boolean
-    compact?: boolean
-    children?: React.ReactNode;
-
-    onExpand?(expanded: boolean): void
-}
-
-export default class Expandable extends React.Component<ExpandableProps> {
-    constructor(props: Readonly<ExpandableProps>) {
-        super(props);
-    }
-
-    render(): React.ReactNode {
-        return (
-            <div style={{transition: "height .5s"}}>
-                <header>
-                    {this.props.children}
-                </header>
-                <Collapse isOpened={!!this.props.expanded}>
-                    <section style={{marginTop: 5}}>
-                        {this.props.extraContent}
-                    </section>
-                </Collapse>
-                <Divider
-                    style={{margin: this.props.compact ? "8px 0px" : "20px 0px"}}
-                    className={this.props.extraContent ? "stronger-divider-with-text" : "stronger-divider"}
-                    plain
-                >
-                    {this.props.extraContent && <DoubleRightOutlined
-                        rotate={this.props.expanded ? -90 : 90}
-                        onClick={() => {
-                            const expanded = !this.props.expanded;
-                            this.props.onExpand?.(expanded);
-                        }}
-                    />}
-                </Divider>
-            </div>
-        )
-    }
-
-}

package/components/color/colorPicker.tsx

@@ -1,121 +0,0 @@
-import React from "react";
-import i18n from "d2core/i18n/i18n";
-import {Badge, Button, Popover} from "antd";
-import {CloseOutlined, StopOutlined} from "@ant-design/icons";
-import {RGBColor, SketchPicker} from "react-color";
-import {SketchPickerProps} from "react-color/lib/components/sketch/Sketch";
-import {TooltipPlacement} from "antd/lib/tooltip";
-
-const transparentBackgroundStyle = "url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==\") left center"
-const presetColors = [
-    "#fff1f0", "#ffccc7", "#ffa39e", "#ff7875", "#ff4d4f", "#f5222d", "#cf1322", "#a8071a", "#820014", "#5c0011",
-    "#fff2e8", "#ffd8bf", "#ffbb96", "#ff9c6e", "#ff7a45", "#fa541c", "#d4380d", "#ad2102", "#871400", "#610b00",
-    "#fff7e6", "#ffe7ba", "#ffd591", "#ffc069", "#ffa940", "#fa8c16", "#d46b08", "#ad4e00", "#873800", "#612500",
-    "#feffe6", "#ffffb8", "#fffb8f", "#fff566", "#ffec3d", "#fadb14", "#d4b106", "#ad8b00", "#876800", "#614700",
-    "#f6ffed", "#d9f7be", "#b7eb8f", "#95de64", "#73d13d", "#52c41a", "#389e0d", "#237804", "#135200", "#092b00",
-    "#e6fffb", "#b5f5ec", "#87e8de", "#5cdbd3", "#36cfc9", "#13c2c2", "#08979c", "#006d75", "#00474f", "#002329",
-    "#e6f7ff", "#bae7ff", "#91d5ff", "#69c0ff", "#40a9ff", "#1890ff", "#096dd9", "#0050b3", "#003a8c", "#002766",
-    "#ffffff", "#fafafa", "#f5f5f5", "#e8e8e8", "#d9d9d9", "#bfbfbf", "#8c8c8c", "#595959", "#262626", "#000000",
-];
-
-interface ColorPickerProps extends SketchPickerProps {
-    badgeIcon?: React.ReactNode
-    title: string
-    placement?: TooltipPlacement
-    disabled?: boolean
-    transparentColorAllowed?: boolean
-
-    onResetColor(): void
-}
-
-interface ColorPickerState {
-    popupVisible: boolean
-}
-
-export default class ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {
-    constructor(props: Readonly<ColorPickerProps>) {
-        super(props);
-
-        this.state = {
-            popupVisible: false,
-        }
-    }
-
-    private getColorString(color: RGBColor | string | undefined): string | undefined {
-        if (typeof color === "object") {
-            return `rgba(${color.r},${color.g},${color.b},${color.a})`;
-        } else {
-            return color;
-        }
-    }
-
-    render() {
-        return (
-            <Popover
-                placement={this.props.placement}
-                trigger={this.props.disabled ? [] : "click"}
-                open={this.state.popupVisible}
-                onOpenChange={(visible) => {
-                    this.setState({popupVisible: visible});
-                }}
-                title={
-                    <div>
-                        {this.props.title}
-                        <Button
-                            style={{float: "right", paddingLeft: 8, border: "none"}}
-                            size="small"
-                            title={i18n("Close")}
-                            onClick={() => {
-                                this.setState({popupVisible: false});
-                            }}
-                        >
-                            <CloseOutlined/>
-                        </Button>
-                        <Button
-                            style={{background: transparentBackgroundStyle, float: "right"}}
-                            size="small"
-                            title={i18n("Set No Color")}
-                            onClick={() => {
-                                this.props.onResetColor();
-                                this.setState({popupVisible: false});
-                            }}
-                        >
-                            <StopOutlined style={{color: "rgba(0,0,0,0.85)"}}/>
-                        </Button>
-                    </div>
-                }
-                content={
-                    <SketchPicker
-                        color={this.props.color}
-                        width={"250px"}
-                        presetColors={this.props.transparentColorAllowed ? [...presetColors, "transparent"] : presetColors}
-                        onChange={this.props.onChange}
-                        onChangeComplete={this.props.onChangeComplete}
-                    />
-                }
-            >
-                <Badge
-                    className={this.props.className}
-                    count={this.props.badgeIcon ?
-                        <span
-                            className="ant-badge-count"
-                            style={{color: "#1890ff", background: "#e6f7ff", borderColor: "#91d5ff"}}
-                        >
-                                {this.props.badgeIcon}
-                            </span>
-                        : undefined
-                    }
-                >
-                    <Button
-                        style={{background: this.getColorString(this.props.color as RGBColor | string | undefined) ?? transparentBackgroundStyle}}
-                        disabled={this.props.disabled}
-                        title={this.props.title}
-                    >
-                        <span role="img" className="anticon"/>
-                    </Button>
-                </Badge>
-            </Popover>
-        );
-    }
-
-}