aldehyde 0.2.281 → 0.2.283

package/src/aldehyde/lowcode-components/border/border13/index.tsx

@@ -0,0 +1,69 @@
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from "react";
+import "./index.less";
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number }
+}
+
+export interface ComponentRef {
+    updateConfig: (config: ComponentProps) => void;
+}
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
+    const [width, setWidth] = useState<number>(320);
+    const [height, setHeight] = useState<number>(200);
+    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { width, height } = newConfig.base;
+            setStyle({ ...newConfig.style });
+            setWidth(width);
+            setHeight(height);
+        },
+    }));
+
+    return <div className="border-box-13"  >
+        <svg className='border-svg-container' width={width} height={height}>
+            <path
+                fill="none"
+                stroke={mainColor}
+                d={`
+            M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
+            L ${width - 20} 10 L ${width - 5} 25
+            L ${width - 5} ${height - 5} L 20 ${height - 5}
+            L 5 ${height - 20} L 5 20
+          `}
+            />
+
+            <path
+                fill='transparent'
+                strokeWidth='3'
+                strokeLinecap='round'
+                strokeDasharray='10, 5'
+                stroke={mainColor}
+                d='M 16 9 L 61 9'
+            />
+
+            <path
+                fill='transparent'
+                stroke={subColor}
+                d='M 5 20 L 5 10 L 12 3  L 60 3 L 68 10'
+            />
+
+            <path
+                fill='transparent'
+                stroke={subColor}
+                d={`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${width - 30} ${height - 5}`}
+            />
+        </svg>
+    </div>;
+});
+
+export default Index;

package/src/aldehyde/lowcode-components/border/border2/index.less

@@ -0,0 +1,18 @@
+.border-box-2 {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .border-svg-container {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+
+        polyline {
+            fill: none;
+            stroke-width: 1;
+        }
+    }
+}

package/src/aldehyde/lowcode-components/border/border2/index.tsx

@@ -0,0 +1,51 @@
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from "react";
+import "./index.less";
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number }
+}
+
+export interface ComponentRef {
+    updateConfig: (config: ComponentProps) => void;
+}
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
+    const [width, setWidth] = useState<number>(320);
+    const [height, setHeight] = useState<number>(200);
+    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setStyle({ ...newConfig.style });
+            setWidth(newConfig.base.width);
+            setHeight(newConfig.base.height);
+        },
+    }));
+
+    return <div className="border-box-2"  >
+        <svg className='border-svg-container' width={width} height={height}>
+            <polyline
+                stroke={mainColor}
+                points={`2, 2 ${width - 2} ,2 ${width - 2}, ${height -
+                    2} 2, ${height - 2} 2, 2`}
+            />
+            <polyline
+                stroke={subColor}
+                points={`6, 6 ${width - 6}, 6 ${width - 6}, ${height -
+                    6} 6, ${height - 6} 6, 6`}
+            />
+            <circle fill={mainColor} cx='11' cy='11' r='1' />
+            <circle fill={mainColor} cx={width - 11} cy='11' r='1' />
+            <circle fill={mainColor} cx={width - 11} cy={height - 11} r='1' />
+            <circle fill={mainColor} cx='11' cy={height - 11} r='1' />
+        </svg>
+    </div>;
+});
+
+export default Index;

package/src/aldehyde/lowcode-components/border/border3/index.less

@@ -0,0 +1,26 @@
+.border-box-3 {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .border-svg-container {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+
+        &>polyline {
+            fill: none;
+        }
+    }
+
+    .bb3-line1 {
+        stroke-width: 3;
+    }
+
+    .bb3-line2 {
+        stroke-width: 1;
+    }
+
+}

package/src/aldehyde/lowcode-components/border/border3/index.tsx

@@ -0,0 +1,61 @@
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from "react";
+import "./index.less";
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number }
+}
+
+export interface ComponentRef {
+    updateConfig: (config: ComponentProps) => void;
+}
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
+    const [width, setWidth] = useState<number>(320);
+    const [height, setHeight] = useState<number>(200);
+    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setStyle({ ...newConfig.style });
+            setWidth(newConfig.base.width);
+            setHeight(newConfig.base.height);
+        },
+    }));
+
+    return <div className="border-box-3"  >
+        <svg className='border-svg-container' width={width} height={height}>
+            <polyline
+                className='bb3-line1'
+                stroke={mainColor}
+                points={`4, 4 ${width - 22} ,4 ${width - 22}, ${height -
+                    22} 4, ${height - 22} 4, 4`}
+            />
+            <polyline
+                className='bb3-line2'
+                stroke={subColor}
+                points={`10, 10 ${width - 16}, 10 ${width - 16}, ${height -
+                    16} 10, ${height - 16} 10, 10`}
+            />
+            <polyline
+                className='bb3-line2'
+                stroke={subColor}
+                points={`16, 16 ${width - 10}, 16 ${width - 10}, ${height -
+                    10} 16, ${height - 10} 16, 16`}
+            />
+            <polyline
+                className='bb3-line2'
+                stroke={subColor}
+                points={`22, 22 ${width - 4}, 22 ${width - 4}, ${height -
+                    4} 22, ${height - 4} 22, 22`}
+            />
+        </svg>
+    </div>;
+});
+
+export default Index;

package/src/aldehyde/lowcode-components/border/border4/index.less

@@ -0,0 +1,73 @@
+.border-box-4 {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .reverse {
+        transform: rotate(180deg);
+    }
+
+    .border-svg-container {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+
+        &>polyline {
+            fill: none;
+        }
+    }
+
+    .sw1 {
+        stroke-width: 1;
+    }
+
+    .sw3 {
+        stroke-width: 3px;
+        stroke-linecap: round;
+    }
+
+    .bb4-line-1 {
+        .sw1;
+    }
+
+    .bb4-line-2 {
+        .sw1;
+    }
+
+    .bb4-line-3 {
+        .sw3;
+    }
+
+    .bb4-line-4 {
+        .sw3;
+    }
+
+    .bb4-line-5 {
+        .sw1;
+    }
+
+    .bb4-line-6 {
+        .sw1;
+    }
+
+    .bb4-line-7 {
+        .sw1;
+    }
+
+    .bb4-line-8 {
+        .sw3;
+    }
+
+    .bb4-line-9 {
+        .sw3;
+        stroke-dasharray: 100 250;
+    }
+
+    .bb4-line-10 {
+        .sw1;
+        stroke-dasharray: 80 270;
+    }
+
+}

package/src/aldehyde/lowcode-components/border/border4/index.tsx

@@ -0,0 +1,79 @@
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from "react";
+import "./index.less";
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+    reverse?: boolean;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number }
+}
+
+export interface ComponentRef {
+    updateConfig: (config: ComponentProps) => void;
+}
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
+    const [width, setWidth] = useState<number>(320);
+    const [height, setHeight] = useState<number>(200);
+    const { mainColor = "#83BFF6", subColor = "#00CED1", reverse } = style || {};
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { width, height } = newConfig.base;
+            setStyle({ ...newConfig.style });
+            setWidth(width);
+            setHeight(height);
+        },
+    }));
+
+    return <div className="border-box-4"  >
+        <svg
+            className={`border-svg-container ${reverse && 'reverse'}`}
+            width={width}
+            height={height}
+        >
+            <polyline
+                className='bb4-line-1'
+                stroke={mainColor}
+                points={`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
+          10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`}
+            />
+            <polyline
+                className='bb4-line-2'
+                stroke={subColor}
+                points={`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
+          14, ${height - 100}`}
+            />
+            <polyline
+                className='bb4-line-3'
+                stroke={mainColor}
+                points={`7, ${height - 40} 7, ${height - 75}`}
+            />
+            <polyline className='bb4-line-4' stroke={mainColor} points={`28, 24 13, 41 13, 64`} />
+            <polyline className='bb4-line-5' stroke={mainColor} points={`5, 45 5, 140`} />
+            <polyline className='bb4-line-6' stroke={subColor} points={`14, 75 14, 180`} />
+            <polyline
+                className='bb4-line-7'
+                stroke={subColor}
+                points={`55, 11 147, 11 167, 26 250, 26`}
+            />
+            <polyline className='bb4-line-8' stroke={subColor} points={`158, 5 173, 16`} />
+            <polyline
+                className='bb4-line-9'
+                stroke={mainColor}
+                points={`200, 17 ${width - 10}, 17`}
+            />
+            <polyline
+                className='bb4-line-10'
+                stroke={subColor}
+                points={`385, 17 ${width - 10}, 17`}
+            />
+        </svg>
+    </div>;
+});
+
+export default Index;

package/src/aldehyde/lowcode-components/border/border5/index.less

@@ -0,0 +1,36 @@
+.border-box-5 {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .reverse {
+        transform: rotate(180deg);
+    }
+
+    .border-svg-container {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+
+        &>polyline {
+            fill: none;
+        }
+    }
+
+    .bb5-line-1,
+    .bb5-line-2 {
+        stroke-width: 1;
+    }
+
+    .bb5-line-3,
+    .bb5-line-6 {
+        stroke-width: 5;
+    }
+
+    .bb5-line-4,
+    .bb5-line-5 {
+        stroke-width: 2;
+    }
+}

package/src/aldehyde/lowcode-components/border/border5/index.tsx

@@ -0,0 +1,75 @@
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from "react";
+import "./index.less";
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+    reverse?: boolean;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number }
+}
+
+export interface ComponentRef {
+    updateConfig: (config: ComponentProps) => void;
+}
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
+    const [width, setWidth] = useState<number>(320);
+    const [height, setHeight] = useState<number>(200);
+    const { mainColor = "#83BFF6", subColor = "#00CED1", reverse } = style || {};
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { width, height } = newConfig.base;
+            setStyle({ ...newConfig.style });
+            setWidth(width);
+            setHeight(height);
+        },
+    }));
+
+    return <div className="border-box-5"  >
+        <svg
+            className={`border-svg-container  ${reverse && 'reverse'}`}
+            width={width}
+            height={height}
+        >
+            <polyline
+                className='bb5-line-1'
+                stroke={mainColor}
+                points={`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
+          ${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`}
+            />
+            <polyline
+                className='bb5-line-2'
+                stroke={subColor}
+                points={`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
+          ${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`}
+            />
+            <polyline
+                className='bb5-line-3'
+                stroke={subColor}
+                points={`50, 13 ${width - 35}, 13`}
+            />
+            <polyline
+                className='bb5-line-4'
+                stroke={subColor}
+                points={`15, 20 ${width - 35}, 20`}
+            />
+            <polyline
+                className='bb5-line-5'
+                stroke={subColor}
+                points={`15, ${height - 20} ${width - 110}, ${height - 20}`}
+            />
+            <polyline
+                className='bb5-line-6'
+                stroke={subColor}
+                points={`15, ${height - 13} ${width - 110}, ${height - 13}`}
+            />
+        </svg>
+    </div>;
+});
+
+export default Index;

package/src/aldehyde/lowcode-components/border/border6/index.less

@@ -0,0 +1,18 @@
+.border-box-6 {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .border-svg-container {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+
+        &>polyline {
+            fill: none;
+            stroke-width: 1;
+        }
+    }
+}

package/src/aldehyde/lowcode-components/border/border6/index.tsx

@@ -0,0 +1,60 @@
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from "react";
+import "./index.less";
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number }
+}
+
+export interface ComponentRef {
+    updateConfig: (config: ComponentProps) => void;
+}
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
+    const [width, setWidth] = useState<number>(320);
+    const [height, setHeight] = useState<number>(200);
+    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { width, height } = newConfig.base;
+            setStyle({ ...newConfig.style });
+            setWidth(width);
+            setHeight(height);
+        },
+    }));
+
+    return <div className="border-box-6"  >
+        <svg className='border-svg-container' width={width} height={height}>
+            <circle fill={subColor} cx='5' cy='5' r='2' />
+            <circle fill={subColor} cx={width - 5} cy='5' r='2' />
+            <circle fill={subColor} cx={width - 5} cy={height - 5} r='2' />
+            <circle fill={subColor} cx='5' cy={height - 5} r='2' />
+            <polyline stroke={mainColor} points={`10, 4 ${width - 10}, 4`} />
+            <polyline stroke={mainColor} points={`10, ${height - 4} ${width - 10}, ${height - 4}`} />
+            <polyline stroke={mainColor} points={`5, 70 5, ${height - 70}`} />
+            <polyline stroke={mainColor} points={`${width - 5}, 70 ${width - 5}, ${height - 70}`} />
+            <polyline stroke={mainColor} points={`3, 10, 3, 50`} />
+            <polyline stroke={mainColor} points={`7, 30 7, 80`} />
+            <polyline stroke={mainColor} points={`${width - 3}, 10 ${width - 3}, 50`} />
+            <polyline stroke={mainColor} points={`${width - 7}, 30 ${width - 7}, 80`} />
+            <polyline stroke={mainColor} points={`3, ${height - 10} 3, ${height - 50}`} />
+            <polyline stroke={mainColor} points={`7, ${height - 30} 7, ${height - 80}`} />
+            <polyline
+                stroke={mainColor}
+                points={`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`}
+            />
+            <polyline
+                stroke={mainColor}
+                points={`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`}
+            />
+        </svg>
+    </div>;
+});
+
+export default Index;

package/src/aldehyde/lowcode-components/border/border7/index.less

@@ -0,0 +1,27 @@
+.border-box-7 {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .border-svg-container {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+
+        &>polyline {
+            fill: none;
+            stroke-linecap: round;
+        }
+    }
+
+    .bb7-line-width-2 {
+        stroke-width: 2;
+    }
+
+    .bb7-line-width-5 {
+        stroke-width: 5;
+    }
+
+}

package/src/aldehyde/lowcode-components/border/border7/index.tsx

@@ -0,0 +1,75 @@
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from "react";
+import "./index.less";
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number }
+}
+
+export interface ComponentRef {
+    updateConfig: (config: ComponentProps) => void;
+}
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
+    const [width, setWidth] = useState<number>(320);
+    const [height, setHeight] = useState<number>(200);
+    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { width, height } = newConfig.base;
+            setStyle({ ...newConfig.style });
+            setWidth(width);
+            setHeight(height);
+        },
+    }));
+
+    return <div className="border-box-7" style={{
+        boxShadow: `inset 0 0 40px ${mainColor}`,
+        border: `1px solid ${mainColor}`
+    }} >
+        <svg className='border-svg-container' width={width} height={height}>
+            <polyline className='bb7-line-width-2' stroke={mainColor} points={`0, 25 0, 0 25, 0`} />
+            <polyline
+                className='bb7-line-width-2'
+                stroke={mainColor}
+                points={`${width - 25}, 0 ${width}, 0 ${width}, 25`}
+            />
+            <polyline
+                className='bb7-line-width-2'
+                stroke={mainColor}
+                points={`${width -
+                    25}, ${height} ${width}, ${height} ${width}, ${height - 25}`}
+            />
+            <polyline
+                className='bb7-line-width-2'
+                stroke={mainColor}
+                points={`0, ${height - 25} 0, ${height} 25, ${height}`}
+            />
+            <polyline className='bb7-line-width-5' stroke={subColor} points={`0, 10 0, 0 10, 0`} />
+            <polyline
+                className='bb7-line-width-5'
+                stroke={subColor}
+                points={`${width - 10}, 0 ${width}, 0 ${width}, 10`}
+            />
+            <polyline
+                className='bb7-line-width-5'
+                stroke={subColor}
+                points={`${width -
+                    10}, ${height} ${width}, ${height} ${width}, ${height - 10}`}
+            />
+            <polyline
+                className='bb7-line-width-5'
+                stroke={subColor}
+                points={`0, ${height - 10} 0, ${height} 10, ${height}`}
+            />
+        </svg>
+    </div>;
+});
+
+export default Index;

package/src/aldehyde/lowcode-components/border/border8/index.less

@@ -0,0 +1,14 @@
+.border-box-8 {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .border-svg-container {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0px;
+        top: 0px;
+    }
+
+}