velo-data-vue-render 0.0.1

package/dist/types/index.d.ts

@@ -0,0 +1,704 @@
+export type ComponentType = 'singleLineChart' | 'doubleLineChart' | 'singleBarChart' | 'doubleBarChart' | 'horizontalBarChart' | 'pieChart' | 'halfPieChart' | 'funnelChart' | 'wordCloudChart' | 'gaugeChart' | 'radarChart' | 'scatterChart' | 'mapChart' | 'cityMapChart' | 'calendarChart' | 'treeChart' | 'sankeyChart' | 'text' | 'button' | 'input' | 'select' | 'switch' | 'progress' | 'tag' | 'badge' | 'avatar' | 'card' | 'table' | 'scrollRankList' | 'carouselList' | 'borderBox1' | 'borderBox2' | 'borderBox3' | 'borderBox4' | 'borderBox5' | 'decoration1' | 'decoration2' | 'fullscreenButton' | 'gradientText' | 'futuristicTitle' | 'flipCountdown' | 'customImageBorder' | 'image' | 'carousel' | 'icon' | 'container' | 'layoutTwoColumn' | 'layoutThreeColumn' | 'layoutHeader' | 'layoutSidebar' | 'layoutCell' | 'threeEarth' | 'threeParticles' | 'threeCube' | 'threeDNA' | 'threeWave' | 'threeTorus' | 'threeGalaxy' | 'threeTunnel' | 'threeMatrix' | 'threePlasma' | 'gradientText' | 'flipCountdown' | 'futuristicTitle';
+export type ComponentCategory = 'chart' | 'component' | 'widget' | 'image' | 'icon' | '3d' | 'recent' | 'favorite';
+export interface ComponentStyle {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    backgroundColor?: string;
+    color?: string;
+    fontSize?: number;
+    borderRadius?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    opacity?: number;
+    zIndex?: number;
+}
+export interface ChartAxisConfig {
+    show?: boolean;
+    type?: 'value' | 'category' | 'time' | 'log';
+    name?: string;
+    nameLocation?: 'start' | 'middle' | 'end';
+    nameTextStyle?: {
+        color?: string;
+        fontSize?: number;
+        fontWeight?: string;
+    };
+    nameGap?: number;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    axisLine?: {
+        show?: boolean;
+        lineStyle?: {
+            color?: string;
+            width?: number;
+            type?: 'solid' | 'dashed' | 'dotted';
+        };
+    };
+    axisTick?: {
+        show?: boolean;
+        lineStyle?: {
+            color?: string;
+            width?: number;
+        };
+    };
+    axisLabel?: {
+        show?: boolean;
+        color?: string;
+        fontSize?: number;
+        fontWeight?: string;
+        rotate?: number;
+        margin?: number;
+    };
+    splitLine?: {
+        show?: boolean;
+        lineStyle?: {
+            color?: string;
+            width?: number;
+            type?: 'solid' | 'dashed' | 'dotted';
+            opacity?: number;
+        };
+    };
+    splitArea?: {
+        show?: boolean;
+        areaStyle?: {
+            color?: string[];
+            opacity?: number;
+        };
+    };
+}
+export interface ChartSymbolConfig {
+    show?: boolean;
+    type?: 'circle' | 'rect' | 'roundRect' | 'triangle' | 'diamond' | 'pin' | 'arrow' | 'none';
+    size?: number;
+    color?: string;
+    borderColor?: string;
+    borderWidth?: number;
+    opacity?: number;
+}
+export interface ChartLegendConfig {
+    show?: boolean;
+    orient?: 'horizontal' | 'vertical';
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    align?: 'left' | 'center' | 'right';
+    left?: string;
+    top?: string;
+    textStyle?: {
+        color?: string;
+        fontSize?: number;
+        fontWeight?: string;
+    };
+}
+export interface DataSourceConfig {
+    type: 'mock' | 'api';
+    apiConfig?: {
+        url?: string;
+        method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
+        headers?: Record<string, string>;
+        params?: Record<string, any>;
+        body?: Record<string, any>;
+        dataPath?: string;
+        refreshInterval?: number;
+    };
+}
+export interface ComponentProps {
+    content?: string;
+    subContent?: string;
+    fontSize?: number;
+    fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+    color?: string;
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
+    textDecoration?: 'none' | 'underline' | 'overline' | 'line-through';
+    textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+    fontStyle?: 'normal' | 'italic' | 'oblique';
+    letterSpacing?: number;
+    lineHeight?: number;
+    textShadow?: boolean;
+    shadowColor?: string;
+    shadowBlur?: number;
+    shadowOffsetX?: number;
+    shadowOffsetY?: number;
+    opacity?: number;
+    backgroundColor?: string;
+    borderRadius?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    padding?: number;
+    buttonType?: 'primary' | 'default' | 'dashed' | 'link';
+    disabled?: boolean;
+    loading?: boolean;
+    block?: boolean;
+    danger?: boolean;
+    placeholder?: string;
+    allowClear?: boolean;
+    showCount?: boolean;
+    maxLength?: number;
+    inputType?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+    tagColor?: string;
+    closable?: boolean;
+    icon?: string;
+    src?: string;
+    alt?: string;
+    objectFit?: 'contain' | 'cover' | 'fill' | 'scale-down' | 'none';
+    preview?: boolean;
+    fallback?: string;
+    chartType?: 'line' | 'bar' | 'pie';
+    chartData?: unknown;
+    chartOption?: unknown;
+    xAxisConfig?: ChartAxisConfig;
+    yAxisConfig?: ChartAxisConfig;
+    symbolConfig?: ChartSymbolConfig;
+    iconType?: string;
+    iconSize?: number;
+    iconColor?: string;
+    iconRotate?: number;
+    iconSpin?: boolean;
+    borderStyle?: number;
+    glowColor?: string;
+    cornerSize?: number;
+    animationDuration?: number;
+    buttonSize?: number;
+    fullscreenIconSize?: number;
+    buttonColor?: string;
+    hoverColor?: string;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center' | 'left' | 'right';
+    customIcon?: string;
+    showText?: boolean;
+    customBorderImage?: string;
+    borderImageSlice?: number;
+    borderImageWidth?: number;
+    borderImageRepeat?: 'stretch' | 'repeat' | 'round' | 'space';
+    borderImageOutset?: number;
+    borderImageOpacity?: number;
+    borderImageMode?: 'border' | 'background' | 'frame';
+    titleColor?: string;
+    percent?: number;
+    progressType?: 'line' | 'circle' | 'dashboard';
+    status?: 'success' | 'exception' | 'normal' | 'active';
+    showInfo?: boolean;
+    progressStrokeColor?: string | Record<string, string>;
+    progressSize?: 'default' | 'small';
+    buttonText?: string;
+    btnSize?: 'small' | 'middle' | 'large';
+    ghost?: boolean;
+    value?: string;
+    readonly?: boolean;
+    inputSize?: 'small' | 'middle' | 'large';
+    selectSize?: 'small' | 'middle' | 'large';
+    mode?: 'multiple' | 'tags';
+    showSearch?: boolean;
+    options?: Array<{
+        label: string;
+        value: any;
+    }>;
+    switchSize?: 'default' | 'small';
+    checkedChildren?: string;
+    unCheckedChildren?: string;
+    badgeCount?: number;
+    showDot?: boolean;
+    badgeColor?: string;
+    showZero?: boolean;
+    avatarSize?: number | 'small' | 'default' | 'large';
+    avatarShape?: 'circle' | 'square';
+    cardTitle?: string;
+    cardBordered?: boolean;
+    cardHoverable?: boolean;
+    tableBordered?: boolean;
+    tableSize?: 'small' | 'middle' | 'large';
+    tablePagination?: boolean;
+    gradientStart?: string;
+    gradientEnd?: string;
+    subtitle?: string;
+    targetTime?: number | string;
+    leftWidth?: string;
+    rightWidth?: string;
+    headerHeight?: string;
+    sidebarWidth?: string;
+    gap?: number;
+    tableColumns?: Array<{
+        title: string;
+        dataIndex: string;
+        key: string;
+    }>;
+    tableData?: Array<Record<string, any>>;
+    chartTitle?: string;
+    dataSource?: DataSourceConfig;
+    xAxisData?: string[];
+    seriesData?: Array<{
+        name: string;
+        data: any[];
+        symbolConfig?: ChartSymbolConfig;
+    }>;
+    pieData?: Array<{
+        name: string;
+        value: number;
+    }>;
+    funnelData?: Array<{
+        name: string;
+        value: number;
+    }>;
+    wordCloudData?: Array<{
+        name: string;
+        value: number;
+    }>;
+    singleData?: number;
+    legend?: ChartLegendConfig;
+    selectOptions?: Array<{
+        label: string;
+        value: string;
+    }>;
+    checked?: boolean;
+    radarConfig?: {
+        shape?: 'polygon' | 'circle';
+        radius?: number;
+        indicator?: Array<{
+            name: string;
+            max: number;
+        }>;
+        axisLine?: {
+            show?: boolean;
+            lineStyle?: {
+                color?: string;
+                width?: number;
+            };
+        };
+        splitLine?: {
+            show?: boolean;
+            lineStyle?: {
+                color?: string;
+                width?: number;
+            };
+        };
+        splitArea?: {
+            show?: boolean;
+            areaStyle?: {
+                color?: string[];
+            };
+        };
+        axisName?: {
+            color?: string;
+            fontSize?: number;
+            fontWeight?: string;
+        };
+    };
+    radarSeriesConfig?: {
+        areaStyle?: {
+            show?: boolean;
+            opacity?: number;
+        };
+        lineStyle?: {
+            width?: number;
+        };
+        symbol?: string;
+        symbolSize?: number;
+    };
+    pieConfig?: {
+        radius?: [string, string];
+        center?: [string, string];
+        roseType?: false | 'radius' | 'area';
+        borderRadius?: number;
+        borderWidth?: number;
+        borderColor?: string;
+        label?: {
+            show?: boolean;
+            position?: 'outside' | 'inside' | 'center';
+            color?: string;
+            fontSize?: number;
+            formatter?: string;
+        };
+        labelLine?: {
+            show?: boolean;
+            length?: number;
+            length2?: number;
+            lineStyle?: {
+                color?: string;
+                width?: number;
+            };
+        };
+        itemStyle?: {
+            shadowBlur?: number;
+            shadowColor?: string;
+        };
+    };
+    mapRegion?: string;
+    mapData?: Array<{
+        name: string;
+        value: number;
+    }>;
+    provinceName?: string;
+    showCityData?: boolean;
+    mapType?: 'province' | 'city';
+    selectedProvince?: string;
+    showBuiltinData?: boolean;
+    colorScheme?: 'blue' | 'green' | 'red' | 'purple' | 'orange';
+    calendarYear?: number;
+    calendarData?: Array<[string, number]>;
+    calendarColors?: string[];
+    calendarCellSize?: number;
+    calendarLang?: 'zh' | 'en';
+    calendarMonthLabel?: {
+        show?: boolean;
+        color?: string;
+        fontSize?: number;
+    };
+    calendarDayLabel?: {
+        show?: boolean;
+        color?: string;
+        fontSize?: number;
+        firstDay?: number;
+    };
+    calendarYearLabel?: {
+        show?: boolean;
+        color?: string;
+        fontSize?: number;
+    };
+    rankListData?: Array<{
+        name: string;
+        value: number;
+    }>;
+    rankListConfig?: {
+        rowHeight?: number;
+        barHeight?: number;
+        barColor?: string;
+        barBgColor?: string;
+        textColor?: string;
+        valueColor?: string;
+        fontSize?: number;
+        showIndex?: boolean;
+        indexColor?: string;
+        scrollSpeed?: number;
+        showBar?: boolean;
+    };
+    carouselListData?: Array<Record<string, any>>;
+    carouselListConfig?: {
+        columns?: Array<{
+            title: string;
+            key: string;
+            width?: number;
+        }>;
+        rowHeight?: number;
+        headerHeight?: number;
+        headerBgColor?: string;
+        headerTextColor?: string;
+        rowBgColor?: string;
+        rowAltBgColor?: string;
+        textColor?: string;
+        fontSize?: number;
+        scrollSpeed?: number;
+        showHeader?: boolean;
+        pageSize?: number;
+    };
+    carouselImages?: string[];
+    carouselConfig?: {
+        autoplay?: boolean;
+        interval?: number;
+        showDots?: boolean;
+        showArrows?: boolean;
+        effect?: 'slide' | 'fade';
+        dotPosition?: 'top' | 'bottom' | 'left' | 'right';
+    };
+    wordCloudConfig?: {
+        shape?: 'circle' | 'rect' | 'diamond' | 'triangle';
+        colorScheme?: 'default' | 'blue' | 'green' | 'warm' | 'cool' | 'rainbow';
+        minFontSize?: number;
+        maxFontSize?: number;
+        fontFamily?: string;
+        fontWeight?: 'normal' | 'bold';
+        rotation?: boolean;
+        rotationRange?: [number, number];
+        gridSize?: number;
+    };
+    treeData?: any;
+    treeConfig?: {
+        orient?: 'LR' | 'TB' | 'RL' | 'BT';
+        top?: string | number;
+        left?: string | number;
+        bottom?: string | number;
+        right?: string | number;
+        symbolSize?: number;
+        expandAndCollapse?: boolean;
+        animationDuration?: number;
+        animationDurationUpdate?: number;
+        initialTreeDepth?: number;
+        label?: {
+            show?: boolean;
+            position?: 'left' | 'right' | 'top' | 'bottom' | 'inside' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom';
+            verticalAlign?: 'top' | 'middle' | 'bottom';
+            align?: 'left' | 'center' | 'right';
+            fontSize?: number;
+            color?: string;
+            fontWeight?: 'normal' | 'bold';
+            backgroundColor?: string;
+            borderColor?: string;
+            borderWidth?: number;
+            borderRadius?: number;
+            padding?: number | [number, number] | [number, number, number, number];
+        };
+        leaves?: {
+            label?: {
+                show?: boolean;
+                position?: 'left' | 'right' | 'top' | 'bottom' | 'inside';
+                verticalAlign?: 'top' | 'middle' | 'bottom';
+                align?: 'left' | 'center' | 'right';
+                fontSize?: number;
+                color?: string;
+                fontWeight?: 'normal' | 'bold';
+            };
+        };
+        itemStyle?: {
+            color?: string;
+            borderColor?: string;
+            borderWidth?: number;
+        };
+        lineStyle?: {
+            color?: string;
+            width?: number;
+            curveness?: number;
+        };
+        emphasis?: {
+            itemStyle?: {
+                color?: string;
+                borderColor?: string;
+                borderWidth?: number;
+            };
+            lineStyle?: {
+                color?: string;
+                width?: number;
+            };
+        };
+    };
+    sankeyData?: {
+        nodes?: Array<{
+            name: string;
+            value?: number;
+        }>;
+        links?: Array<{
+            source: string | number;
+            target: string | number;
+            value: number;
+        }>;
+    };
+    sankeyConfig?: {
+        orient?: 'horizontal' | 'vertical';
+        nodeWidth?: number;
+        nodeGap?: number;
+        layoutIterations?: number;
+        nodeAlign?: 'justify' | 'left' | 'right' | 'center';
+        draggable?: boolean;
+        focusNodeAdjacency?: boolean | 'inEdges' | 'outEdges' | 'allEdges';
+        levels?: Array<{
+            depth?: number;
+            itemStyle?: {
+                color?: string;
+                borderColor?: string;
+                borderWidth?: number;
+            };
+            lineStyle?: {
+                color?: string;
+                opacity?: number;
+            };
+            label?: {
+                color?: string;
+                fontSize?: number;
+            };
+        }>;
+        label?: {
+            show?: boolean;
+            position?: 'inside' | 'outside' | 'left' | 'right' | 'top' | 'bottom';
+            color?: string;
+            fontSize?: number;
+            fontWeight?: 'normal' | 'bold';
+            formatter?: string;
+        };
+        itemStyle?: {
+            color?: string;
+            borderColor?: string;
+            borderWidth?: number;
+            borderRadius?: number;
+            opacity?: number;
+        };
+        lineStyle?: {
+            color?: string;
+            opacity?: number;
+            curveness?: number;
+        };
+        emphasis?: {
+            itemStyle?: {
+                color?: string;
+                borderColor?: string;
+                borderWidth?: number;
+            };
+            lineStyle?: {
+                opacity?: number;
+            };
+            label?: {
+                color?: string;
+                fontSize?: number;
+            };
+        };
+    };
+    layoutConfig?: {
+        direction?: 'horizontal' | 'vertical';
+        gap?: number;
+        cells?: Array<{
+            flex?: number;
+            width?: string;
+            height?: string;
+            backgroundColor?: string;
+            layoutMode?: 'fill' | 'free';
+        }>;
+    };
+    gradientType?: 'linear' | 'radial';
+    gradientAngle?: number;
+    gradientColors?: string[];
+    textStroke?: boolean;
+    strokeColor?: string;
+    strokeWidth?: number;
+    countdownMode?: 'target' | 'duration';
+    targetDate?: string;
+    countdownDuration?: number;
+    showDays?: boolean;
+    showHours?: boolean;
+    showMinutes?: boolean;
+    showSeconds?: boolean;
+    cardBgOpacity?: number;
+    cardColorType?: 'solid' | 'gradient';
+    cardSolidColor?: string;
+    cardGradientStart?: string;
+    cardGradientEnd?: string;
+    textColor?: string;
+    labelColor?: string;
+    showLabels?: boolean;
+    separator?: string;
+    containerPadding?: number | string;
+    containerBackground?: string;
+    containerBackgroundImage?: string;
+    containerBorderRadius?: number;
+    containerBorderWidth?: number;
+    containerBorderColor?: string;
+    containerShadow?: string;
+}
+export interface ComponentItem {
+    id: string;
+    type: ComponentType;
+    name: string;
+    props: ComponentProps;
+    style: ComponentStyle;
+    visible: boolean;
+    locked: boolean;
+    parentId?: string;
+    cellIndex?: number;
+    groupId?: string;
+    isGroup?: boolean;
+}
+export interface SnapLine {
+    type: 'v' | 'h';
+    position: number;
+}
+export interface CanvasConfig {
+    width: number;
+    height: number;
+    backgroundColor: string;
+    name: string;
+    backgroundType?: 'color' | 'image';
+    backgroundImage?: string;
+    backgroundImageMode?: 'tile' | 'stretch' | 'cover' | 'contain' | 'center';
+    backgroundImageOpacity?: number;
+    chartTheme?: {
+        type: 'preset' | 'custom';
+        presetName?: string;
+        customColors?: string[];
+    };
+}
+export interface EditorState {
+    components: ComponentItem[];
+    selectedId: string | null;
+    selectedIds: string[];
+    scale: number;
+    snapLines: SnapLine[];
+    canvasConfig: CanvasConfig;
+    zenMode?: boolean;
+    showComponentPanel?: boolean;
+    showLayerPanel?: boolean;
+    showPropertyPanel?: boolean;
+}
+export type EditorAction = {
+    type: 'SYNC_STATE';
+    payload: EditorState;
+} | {
+    type: 'ADD_COMPONENT';
+    payload: ComponentItem;
+} | {
+    type: 'UPDATE_COMPONENT';
+    payload: {
+        id: string;
+        updates: Partial<ComponentItem>;
+    };
+} | {
+    type: 'DELETE_COMPONENT';
+    payload: string;
+} | {
+    type: 'DELETE_COMPONENTS';
+    payload: string[];
+} | {
+    type: 'SELECT_COMPONENT';
+    payload: string | null;
+} | {
+    type: 'SELECT_COMPONENTS';
+    payload: string[];
+} | {
+    type: 'MOVE_COMPONENT';
+    payload: {
+        id: string;
+        x: number;
+        y: number;
+    };
+} | {
+    type: 'REORDER_LAYERS';
+    payload: ComponentItem[];
+} | {
+    type: 'TOGGLE_VISIBILITY';
+    payload: string;
+} | {
+    type: 'TOGGLE_LOCK';
+    payload: string;
+} | {
+    type: 'SET_SCALE';
+    payload: number;
+} | {
+    type: 'SET_SNAP_LINES';
+    payload: SnapLine[];
+} | {
+    type: 'SET_CANVAS_CONFIG';
+    payload: Partial<CanvasConfig>;
+} | {
+    type: 'GROUP_COMPONENTS';
+    payload: string[];
+} | {
+    type: 'UNGROUP_COMPONENTS';
+    payload: string;
+} | {
+    type: 'TOGGLE_ZEN_MODE';
+    payload: boolean;
+} | {
+    type: 'TOGGLE_PANEL';
+    payload: 'component' | 'layer' | 'property';
+} | {
+    type: 'IMPORT_PROJECT';
+    payload: {
+        canvasConfig: CanvasConfig;
+        components: ComponentItem[];
+    };
+};
+export interface DragItem {
+    type: 'NEW_COMPONENT' | 'CANVAS_COMPONENT';
+    componentType?: ComponentType;
+    id?: string;
+}
+export interface ComponentConfig {
+    type: ComponentType;
+    name: string;
+    icon: any;
+    category: ComponentCategory;
+    defaultProps: ComponentProps;
+    defaultStyle: Partial<ComponentStyle>;
+}